From daa1a2aff136fa9da1fcc97d7da97a2036fabc77 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:51:47 +0100 Subject: unslug uk: move --- files/uk/conflicting/glossary/doctype/index.html | 10 + .../conflicting/learn/css/first_steps/index.html | 47 ++ .../web/api/windoworworkerglobalscope/index.html | 126 +++ .../reference/global_objects/boolean/index.html | 83 ++ .../reference/global_objects/error/index.html | 115 +++ .../reference/global_objects/evalerror/index.html | 90 ++ .../reference/global_objects/function/index.html | 100 +++ .../global_objects/generatorfunction/index.html | 66 ++ .../global_objects/internalerror/index.html | 63 ++ .../reference/global_objects/number/index.html | 90 ++ .../reference/global_objects/promise/index.html | 70 ++ .../reference/global_objects/rangeerror/index.html | 90 ++ .../global_objects/referenceerror/index.html | 91 ++ .../global_objects/syntaxerror/index.html | 89 ++ .../reference/global_objects/typeerror/index.html | 88 ++ .../reference/global_objects/urierror/index.html | 89 ++ .../web/javascript/reference/operators/index.html | 314 +++++++ .../reference/operators/spread_syntax/index.html | 283 +++++++ .../index.html | 419 ++++++++++ .../index.html | 560 +++++++++++++ .../index.html | 245 ++++++ .../index.html | 253 ++++++ .../reference/statements/switch/index.html | 118 +++ files/uk/glossary/abstraction/index.html | 18 + files/uk/glossary/accessibility/index.html | 32 + files/uk/glossary/algorithm/index.html | 18 + files/uk/glossary/argument/index.html | 27 + files/uk/glossary/block/scripting/index.html | 19 + .../index.html" | 19 - files/uk/glossary/buffer/index.html | 33 + files/uk/glossary/cipher/index.html | 33 + files/uk/glossary/ciphertext/index.html | 19 + files/uk/glossary/closure/index.html | 46 + files/uk/glossary/compile/index.html | 26 + files/uk/glossary/cryptanalysis/index.html | 19 + .../cryptographic_hash_function/index.html | 27 + files/uk/glossary/cryptography/index.html | 22 + files/uk/glossary/decryption/index.html | 25 + files/uk/glossary/dtd/index.html | 10 - .../dynamic_programming_language/index.html | 22 + files/uk/glossary/function/index.html | 89 ++ files/uk/glossary/hyperlink/index.html | 26 + files/uk/glossary/identifier/index.html | 19 + files/uk/glossary/internet/index.html | 19 + files/uk/glossary/method/index.html | 38 + files/uk/glossary/oop/index.html | 21 + files/uk/glossary/operator/index.html | 23 + files/uk/glossary/recursion/index.html | 42 + files/uk/glossary/statement/index.html | 33 + files/uk/glossary/symbol/index.html | 108 +++ files/uk/glossary/type/index.html | 23 + files/uk/glossary/ux/index.html | 21 + files/uk/glossary/value/index.html | 35 + files/uk/glossary/variable/index.html | 24 + files/uk/glossary/viewport/index.html | 23 + files/uk/glossary/world_wide_web/index.html | 40 + files/uk/glossary/wrapper/index.html | 18 + .../index.html" | 18 - .../index.html" | 18 - .../index.html" | 27 - .../index.html" | 33 - .../index.html" | 32 - .../index.html" | 23 - .../index.html" | 25 - .../index.html" | 22 - "files/uk/glossary/\320\264\320\272/index.html" | 21 - .../index.html" | 46 - .../index.html" | 24 - .../index.html" | 35 - .../index.html" | 26 - .../index.html" | 19 - .../index.html" | 27 - .../index.html" | 22 - .../index.html" | 38 - .../index.html" | 18 - .../glossary/\320\276\320\276\320\277/index.html" | 21 - .../index.html" | 23 - .../index.html" | 26 - .../index.html" | 42 - .../index.html" | 108 --- .../index.html" | 40 - .../glossary/\321\202\320\270\320\277/index.html" | 23 - .../index.html" | 89 -- .../\321\210\320\270\321\204\321\200/index.html" | 33 - .../index.html" | 19 - .../index.html" | 19 - .../index.html" | 33 - .../index.html" | 19 - files/uk/learn/accessibility/index.html | 75 ++ files/uk/learn/css/css_layout/index.html | 70 ++ .../index.html" | 70 -- .../learn/css/first_steps/how_css_works/index.html | 114 +++ .../learn/css/first_steps/what_is_css/index.html | 129 +++ .../index.html" | 129 --- .../css/styling_text/styling_lists/index.html | 394 +++++++++ .../index.html" | 394 --------- files/uk/learn/forms/index.html | 77 ++ files/uk/learn/forms/your_first_form/index.html | 298 +++++++ files/uk/learn/front-end_web_developer/index.html | 202 +++++ .../the_web_and_web_standards/index.html | 164 ++++ .../index.html" | 164 ---- files/uk/learn/how_to_contribute/index.html | 83 -- files/uk/learn/html/forms/index.html | 77 -- .../uk/learn/html/forms/your_first_form/index.html | 298 ------- .../scho_v_head_metadani_v_html/index.html | 276 ------ .../the_head_metadata_in_html/index.html | 276 ++++++ files/uk/learn/javascript/asynchronous/index.html | 51 ++ .../uk/learn/javascript/building_blocks/index.html | 57 ++ .../index.html" | 51 -- .../index.html" | 57 -- .../uk/learn/learning_and_getting_help/index.html | 315 +++++++ .../client-side_javascript_frameworks/index.html | 138 +++ .../svelte_getting_started/index.html | 536 ++++++++++++ .../cross_browser_testing/index.html | 41 + .../git_\321\202\320\260_github/index.html" | 86 -- files/uk/learn/tools_and_testing/github/index.html | 86 ++ .../understanding_client-side_tools/index.html | 37 + .../index.html" | 138 --- .../znayomymos_zi_svelte/index.html" | 536 ------------ .../index.html" | 37 - .../index.html" | 41 - .../index.html" | 75 -- .../index.html" | 315 ------- .../index.html" | 202 ----- files/uk/mdn/about/index.html | 115 +++ files/uk/mdn/community/index.html | 53 -- .../howto/create_an_mdn_account/index.html | 42 - .../howto/create_and_edit_pages/index.html | 180 ++++ .../howto/do_an_editorial_review/index.html | 64 -- .../howto/set_the_summary_for_a_page/index.html | 47 -- .../index.html" | 45 - .../index.html" | 180 ---- .../mdn/guidelines/writing_style_guide/index.html | 726 ++++++++++++++++ .../index.html" | 726 ---------------- files/uk/mdn/kuma/index.html | 25 - .../macros/commonly-used_macros/index.html | 233 ++++++ files/uk/mdn/structures/macros/index.html | 46 + .../index.html" | 46 - .../index.html" | 233 ------ .../tools/kumascript/troubleshooting/index.html | 61 ++ .../index.html" | 61 -- files/uk/mdn/yari/index.html | 25 + "files/uk/mdn/\320\277\321\200\320\276/index.html" | 115 --- .../what_are_webextensions/index.html | 25 + .../index.html" | 25 - .../uk/orphaned/learn/how_to_contribute/index.html | 83 ++ files/uk/orphaned/mdn/community/index.html | 53 ++ .../contribute/howto/be_a_beta_tester/index.html | 45 + .../howto/create_an_mdn_account/index.html | 42 + .../howto/do_an_editorial_review/index.html | 64 ++ .../howto/set_the_summary_for_a_page/index.html | 47 ++ .../global_objects/array/prototype/index.html | 185 +++++ .../asyncfunction/prototype/index.html | 59 ++ files/uk/tools/index.html | 309 +++++++ files/uk/tools/network_monitor/index.html | 53 ++ .../performance_analysis/index.html | 36 + .../uk/tools/network_monitor/recording/index.html | 32 + .../network_monitor/request_details/index.html | 188 +++++ .../tools/network_monitor/request_list/index.html | 345 ++++++++ .../uk/tools/network_monitor/throttling/index.html | 97 +++ files/uk/tools/network_monitor/toolbar/index.html | 53 ++ .../tools/web_console/console_messages/index.html | 385 +++++++++ files/uk/tools/web_console/index.html | 37 + .../uk/tools/web_console/split_console/index.html | 22 + files/uk/tools/web_console/ui_tour/index.html | 25 + .../index.html" | 201 ----- .../hit_regions_and_accessibility/index.html | 108 +++ .../index.html" | 108 --- files/uk/web/api/event/index.html | 188 +++++ files/uk/web/api/event/target/index.html | 134 +++ .../api/htmlmediaelement/abort_event/index.html | 68 ++ files/uk/web/api/page_visibility_api/index.html | 201 +++++ .../api/window/domcontentloaded_event/index.html | 152 ++++ .../settimeout/index.html | 428 ++++++++++ files/uk/web/api/windowtimers/index.html | 126 --- .../uk/web/api/windowtimers/settimeout/index.html | 428 ---------- .../index.html" | 188 ----- .../target/index.html" | 134 --- .../uk/web/css/alternative_style_sheets/index.html | 80 ++ .../css_animations/using_css_animations/index.html | 357 ++++++++ .../index.html" | 357 -------- files/uk/web/css/css_box_model/index.html | 161 ++++ .../mastering_margin_collapsing/index.html | 90 ++ .../index.html" | 90 -- .../basic_concepts_of_flexbox/index.html | 391 +++++++++ .../using_css_flexible_boxes/index.html | 391 --------- files/uk/web/css/layout_cookbook/index.html | 80 ++ files/uk/web/css/layout_mode/index.html | 30 + files/uk/web/css/reference/index.html | 188 +++++ .../uk/web/css/visual_formatting_model/index.html | 225 +++++ .../index.html" | 80 -- .../index.html" | 188 ----- .../index.html" | 161 ---- .../index.html" | 225 ----- .../index.html" | 80 -- .../index.html" | 30 - files/uk/web/events/abort/index.html | 68 -- files/uk/web/events/domcontentloaded/index.html | 152 ---- files/uk/web/guide/css/getting_started/index.html | 47 -- .../css/getting_started/what_is_css/index.html | 114 --- files/uk/web/guide/graphics/index.html | 49 ++ .../using_html_sections_and_outlines/index.html | 337 ++++++++ .../index.html" | 337 -------- .../index.html" | 49 -- files/uk/web/houdini/index.html | 87 ++ files/uk/web/html/element/header/index.html | 145 ++++ files/uk/web/html/element/html/index.html | 169 ++++ files/uk/web/html/element/iframe/index.html | 260 ++++++ files/uk/web/html/element/index.html | 96 +++ files/uk/web/html/element/link/index.html | 325 ++++++++ files/uk/web/html/element/nav/index.html | 99 +++ files/uk/web/html/element/script/index.html | 243 ++++++ files/uk/web/html/element/section/index.html | 173 ++++ files/uk/web/html/element/style/index.html | 201 +++++ files/uk/web/html/element/table/index.html | 371 +++++++++ files/uk/web/html/element/video/index.html | 420 ++++++++++ .../web/html/global_attributes/hidden/index.html | 68 ++ files/uk/web/html/global_attributes/index.html | 474 +++++++++++ .../html/global_attributes/itemscope/index.html | 319 +++++++ .../uk/web/html/global_attributes/lang/index.html | 90 ++ .../web/html/global_attributes/tabindex/index.html | 96 +++ .../html/quirks_mode_and_standards_mode/index.html | 46 + files/uk/web/html/reference/index.html | 27 + .../index.html" | 27 - .../html/index.html" | 169 ---- .../iframe/index.html" | 260 ------ .../index.html" | 96 --- .../link/index.html" | 325 -------- .../nav/index.html" | 99 --- .../script/index.html" | 243 ------ .../section/index.html" | 173 ---- .../style/index.html" | 201 ----- .../table/index.html" | 371 --------- .../video/index.html" | 420 ---------- .../index.html" | 145 ---- .../hidden/index.html" | 68 -- .../index.html" | 474 ----------- .../itemscope/index.html" | 319 ------- .../lang/index.html" | 90 -- .../tabindex/index.html" | 96 --- .../index.html" | 46 - .../uk/web/http/headers/accept-encoding/index.html | 109 +++ .../uk/web/http/headers/accept-language/index.html | 94 +++ files/uk/web/http/headers/connection/index.html | 46 + .../uk/web/http/headers/content-length/index.html | 62 ++ files/uk/web/http/headers/content-type/index.html | 113 +++ files/uk/web/http/headers/etag/index.html | 98 +++ files/uk/web/http/headers/if-match/index.html | 86 ++ files/uk/web/http/headers/index.html | 382 +++++++++ files/uk/web/http/headers/location/index.html | 78 ++ files/uk/web/http/headers/referer/index.html | 80 ++ files/uk/web/http/headers/user-agent/index.html | 133 +++ .../web/http/headers/x-forwarded-proto/index.html | 69 ++ .../accept-encoding/index.html" | 109 --- .../accept-language/index.html" | 94 --- .../connection/index.html" | 46 - .../content-length/index.html" | 62 -- .../content-type/index.html" | 113 --- .../etag/index.html" | 98 --- .../if-match/index.html" | 86 -- .../index.html" | 382 --------- .../location/index.html" | 78 -- .../referer/index.html" | 80 -- .../user-agent/index.html" | 133 --- .../x-forwarded-proto/index.html" | 69 -- .../equality_comparisons_and_sameness/index.html | 494 +++++++++++ .../guide/details_of_the_object_model/index.html | 760 +++++++++++++++++ .../guide/dokladno_pro_objectnu_model/index.html | 760 ----------------- .../guide/expressions_and_operators/index.html | 925 +++++++++++++++++++++ .../index.html" | 925 --------------------- .../javascript_technologies_overview/index.html | 87 ++ .../oglyad_tehnologiy_javascript/index.html | 87 -- .../reference/functions/arrow_functions/index.html | 362 ++++++++ .../reference/functions/rest_parameters/index.html | 211 +++++ .../index.html" | 211 ----- .../index.html" | 362 -------- .../global_objects/array/prototype/index.html | 185 ----- .../asyncfunction/prototype/index.html | 59 -- .../global_objects/boolean/prototype/index.html | 83 -- .../global_objects/error/prototype/index.html | 115 --- .../global_objects/evalerror/prototype/index.html | 90 -- .../global_objects/function/prototype/index.html | 100 --- .../generatorfunction/prototype/index.html | 66 -- .../internalerror/prototype/index.html | 63 -- .../reference/global_objects/math/round/index.html | 194 +++++ .../index.html" | 194 ----- .../global_objects/number/epsilon/index.html | 67 ++ .../reference/global_objects/number/index.html | 186 +++++ .../global_objects/number/isfinite/index.html | 86 ++ .../global_objects/number/isinteger/index.html | 94 +++ .../global_objects/number/isnan/index.html | 100 +++ .../global_objects/number/issafeinteger/index.html | 95 +++ .../number/max_safe_integer/index.html | 78 ++ .../global_objects/number/max_value/index.html | 64 ++ .../number/min_safe_integer/index.html | 62 ++ .../global_objects/number/min_value/index.html | 66 ++ .../reference/global_objects/number/nan/index.html | 59 ++ .../number/negative_infinity/index.html | 82 ++ .../global_objects/number/number/index.html | 63 ++ .../global_objects/number/parsefloat/index.html | 88 ++ .../global_objects/number/parseint/index.html | 83 ++ .../number/positive_infinity/index.html | 82 ++ .../global_objects/number/toexponential/index.html | 89 ++ .../global_objects/number/tofixed/index.html | 95 +++ .../number/tolocalestring/index.html | 154 ++++ .../global_objects/number/toprecision/index.html | 88 ++ .../global_objects/number/tosource/index.html | 54 ++ .../global_objects/number/tostring/index.html | 97 +++ .../global_objects/number/valueof/index.html | 67 ++ .../global_objects/promise/prototype/index.html | 70 -- .../global_objects/promise/reject/index.html | 73 ++ .../index.html" | 73 -- .../global_objects/rangeerror/prototype/index.html | 90 -- .../referenceerror/prototype/index.html | 91 -- .../syntaxerror/prototype/index.html | 89 -- .../global_objects/typeerror/prototype/index.html | 88 -- .../global_objects/urierror/prototype/index.html | 89 -- .../epsilon/index.html" | 67 -- .../index.html" | 186 ----- .../isfinite/index.html" | 86 -- .../isinteger/index.html" | 94 --- .../isnan/index.html" | 100 --- .../issafeinteger/index.html" | 95 --- .../max_safe_integer/index.html" | 78 -- .../max_value/index.html" | 64 -- .../min_safe_integer/index.html" | 62 -- .../min_value/index.html" | 66 -- .../nan/index.html" | 59 -- .../negative_infinity/index.html" | 82 -- .../number/index.html" | 63 -- .../parsefloat/index.html" | 88 -- .../parseint/index.html" | 83 -- .../positive_infinity/index.html" | 82 -- .../prototype/index.html" | 90 -- .../toexponential/index.html" | 89 -- .../tofixed/index.html" | 95 --- .../tolocalestring/index.html" | 154 ---- .../toprecision/index.html" | 88 -- .../tosource/index.html" | 54 -- .../tostring/index.html" | 97 --- .../valueof/index.html" | 67 -- .../reference/iteration_protocols/index.html | 352 ++++++++ .../operators/arithmetic_operators/index.html | 314 ------- .../operators/bitwise_operators/index.html | 560 ------------- .../operators/destructuring_assignment/index.html | 453 ++++++++++ .../operators/logical_operators/index.html | 253 ------ .../operators/object_initializer/index.html | 296 +++++++ .../index.html" | 453 ---------- .../index.html" | 283 ------- .../index.html" | 245 ------ .../index.html" | 419 ---------- .../index.html" | 296 ------- .../reference/statements/default/index.html | 118 --- .../index.html" | 352 -------- .../index.html" | 494 ----------- files/uk/web/tutorials/index.html | 184 ++++ .../index.html" | 87 -- .../index.html" | 184 ---- .../index.html" | 309 ------- .../network_monitor/index.html" | 53 -- .../performance_analysis/index.html" | 36 - .../network_monitor/recording/index.html" | 32 - .../network_monitor/request_details/index.html" | 188 ----- .../network_monitor/request_list/index.html" | 345 -------- .../network_monitor/throttling/index.html" | 97 --- .../network_monitor/toolbar/index.html" | 53 -- .../web_console/console_messages/index.html" | 385 --------- .../web_console/index.html" | 37 - .../opening_the_web_console/index.html" | 25 - .../web_console/split_console/index.html" | 22 - 370 files changed, 25834 insertions(+), 25834 deletions(-) create mode 100644 files/uk/conflicting/glossary/doctype/index.html create mode 100644 files/uk/conflicting/learn/css/first_steps/index.html create mode 100644 files/uk/conflicting/web/api/windoworworkerglobalscope/index.html create mode 100644 files/uk/conflicting/web/javascript/reference/global_objects/boolean/index.html create mode 100644 files/uk/conflicting/web/javascript/reference/global_objects/error/index.html create mode 100644 files/uk/conflicting/web/javascript/reference/global_objects/evalerror/index.html create mode 100644 files/uk/conflicting/web/javascript/reference/global_objects/function/index.html create mode 100644 files/uk/conflicting/web/javascript/reference/global_objects/generatorfunction/index.html create mode 100644 files/uk/conflicting/web/javascript/reference/global_objects/internalerror/index.html create mode 100644 files/uk/conflicting/web/javascript/reference/global_objects/number/index.html create mode 100644 files/uk/conflicting/web/javascript/reference/global_objects/promise/index.html create mode 100644 files/uk/conflicting/web/javascript/reference/global_objects/rangeerror/index.html create mode 100644 files/uk/conflicting/web/javascript/reference/global_objects/referenceerror/index.html create mode 100644 files/uk/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html create mode 100644 files/uk/conflicting/web/javascript/reference/global_objects/typeerror/index.html create mode 100644 files/uk/conflicting/web/javascript/reference/global_objects/urierror/index.html create mode 100644 files/uk/conflicting/web/javascript/reference/operators/index.html create mode 100644 files/uk/conflicting/web/javascript/reference/operators/spread_syntax/index.html create mode 100644 files/uk/conflicting/web/javascript/reference/operators_1cd48548c16282df3883f99267726c3e/index.html create mode 100644 files/uk/conflicting/web/javascript/reference/operators_7c8eb9475d97a4a734c5991857698560/index.html create mode 100644 files/uk/conflicting/web/javascript/reference/operators_a8aa9ce42ce1749862961c61113d120b/index.html create mode 100644 files/uk/conflicting/web/javascript/reference/operators_f71733c8e7001a29c3ec40d8522a4aca/index.html create mode 100644 files/uk/conflicting/web/javascript/reference/statements/switch/index.html create mode 100644 files/uk/glossary/abstraction/index.html create mode 100644 files/uk/glossary/accessibility/index.html create mode 100644 files/uk/glossary/algorithm/index.html create mode 100644 files/uk/glossary/argument/index.html create mode 100644 files/uk/glossary/block/scripting/index.html delete mode 100644 "files/uk/glossary/block/\321\201\320\272\321\200\320\270\320\277\321\202\320\270\320\275\320\263/index.html" create mode 100644 files/uk/glossary/buffer/index.html create mode 100644 files/uk/glossary/cipher/index.html create mode 100644 files/uk/glossary/ciphertext/index.html create mode 100644 files/uk/glossary/closure/index.html create mode 100644 files/uk/glossary/compile/index.html create mode 100644 files/uk/glossary/cryptanalysis/index.html create mode 100644 files/uk/glossary/cryptographic_hash_function/index.html create mode 100644 files/uk/glossary/cryptography/index.html create mode 100644 files/uk/glossary/decryption/index.html delete mode 100644 files/uk/glossary/dtd/index.html create mode 100644 files/uk/glossary/dynamic_programming_language/index.html create mode 100644 files/uk/glossary/function/index.html create mode 100644 files/uk/glossary/hyperlink/index.html create mode 100644 files/uk/glossary/identifier/index.html create mode 100644 files/uk/glossary/internet/index.html create mode 100644 files/uk/glossary/method/index.html create mode 100644 files/uk/glossary/oop/index.html create mode 100644 files/uk/glossary/operator/index.html create mode 100644 files/uk/glossary/recursion/index.html create mode 100644 files/uk/glossary/statement/index.html create mode 100644 files/uk/glossary/symbol/index.html create mode 100644 files/uk/glossary/type/index.html create mode 100644 files/uk/glossary/ux/index.html create mode 100644 files/uk/glossary/value/index.html create mode 100644 files/uk/glossary/variable/index.html create mode 100644 files/uk/glossary/viewport/index.html create mode 100644 files/uk/glossary/world_wide_web/index.html create mode 100644 files/uk/glossary/wrapper/index.html delete mode 100644 "files/uk/glossary/\320\260\320\261\321\201\321\202\321\200\320\260\320\272\321\206\321\226\321\217/index.html" delete mode 100644 "files/uk/glossary/\320\260\320\273\320\263\320\276\321\200\320\270\321\202\320\274/index.html" delete mode 100644 "files/uk/glossary/\320\260\321\200\322\221\321\203\320\274\320\265\320\275\321\202/index.html" delete mode 100644 "files/uk/glossary/\320\261\321\203\321\204\320\265\321\200/index.html" delete mode 100644 "files/uk/glossary/\320\262\320\265\320\261_\320\264\320\276\321\201\321\202\321\203\320\277\320\275\321\226\321\201\321\202\321\214/index.html" delete mode 100644 "files/uk/glossary/\320\262\321\226\320\272\320\275\320\276_\320\277\320\265\321\200\320\265\320\263\320\273\321\217\320\264\321\203/index.html" delete mode 100644 "files/uk/glossary/\320\264\320\265\321\210\320\270\321\204\321\200\321\203\320\262\320\260\320\275\320\275\321\217/index.html" delete mode 100644 "files/uk/glossary/\320\264\320\270\320\275\320\260\320\274\321\226\321\207\320\275\320\260_\320\274\320\276\320\262\320\260_\320\277\321\200\320\276\320\263\321\200\320\260\320\274\321\203\320\262\320\260\320\275\320\275\321\217/index.html" delete mode 100644 "files/uk/glossary/\320\264\320\272/index.html" delete mode 100644 "files/uk/glossary/\320\267\320\260\320\274\320\270\320\272\320\260\320\275\320\275\321\217/index.html" delete mode 100644 "files/uk/glossary/\320\267\320\274\321\226\320\275\320\275\320\260/index.html" delete mode 100644 "files/uk/glossary/\320\267\320\275\320\260\321\207\320\265\320\275\320\275\321\217/index.html" delete mode 100644 "files/uk/glossary/\320\272\320\276\320\274\320\277\321\226\320\273\321\217\321\206\321\226\321\217/index.html" delete mode 100644 "files/uk/glossary/\320\272\321\200\320\270\320\277\321\202\320\276\320\260\320\275\320\260\320\273\321\226\320\267/index.html" delete mode 100644 "files/uk/glossary/\320\272\321\200\320\270\320\277\321\202\320\276\320\263\321\200\320\260\321\204\321\226\321\207\320\275\320\260_\320\263\320\265\321\210-\321\204\321\203\320\275\320\272\321\206\321\226\321\217/index.html" delete mode 100644 "files/uk/glossary/\320\272\321\200\320\270\320\277\321\202\320\276\320\263\321\200\320\260\321\204\321\226\321\217/index.html" delete mode 100644 "files/uk/glossary/\320\274\320\265\321\202\320\276\320\264/index.html" delete mode 100644 "files/uk/glossary/\320\276\320\261\320\263\320\276\321\200\321\202\320\272\320\260/index.html" delete mode 100644 "files/uk/glossary/\320\276\320\276\320\277/index.html" delete mode 100644 "files/uk/glossary/\320\276\320\277\320\265\321\200\320\260\321\202\320\276\321\200/index.html" delete mode 100644 "files/uk/glossary/\320\277\320\276\321\201\320\270\320\273\320\260\320\275\320\275\321\217/index.html" delete mode 100644 "files/uk/glossary/\321\200\320\265\320\272\321\203\321\200\321\201\321\226\321\217/index.html" delete mode 100644 "files/uk/glossary/\321\201\320\270\320\274\320\262\320\276\320\273/index.html" delete mode 100644 "files/uk/glossary/\321\202\320\265\320\275\320\265\321\202\320\260/index.html" delete mode 100644 "files/uk/glossary/\321\202\320\270\320\277/index.html" delete mode 100644 "files/uk/glossary/\321\204\321\203\320\275\320\272\321\206\321\226\321\217/index.html" delete mode 100644 "files/uk/glossary/\321\210\320\270\321\204\321\200/index.html" delete mode 100644 "files/uk/glossary/\321\210\320\270\321\204\321\200\320\276\321\202\320\265\320\272\321\201\321\202/index.html" delete mode 100644 "files/uk/glossary/\321\226\320\264\320\265\320\275\321\202\320\270\321\204\321\226\320\272\320\260\321\202\320\276\321\200/index.html" delete mode 100644 "files/uk/glossary/\321\226\320\275\321\201\321\202\321\200\321\203\320\272\321\206\321\226\321\217/index.html" delete mode 100644 "files/uk/glossary/\321\226\320\275\321\202\320\265\321\200\320\275\320\265\321\202/index.html" create mode 100644 files/uk/learn/accessibility/index.html create mode 100644 files/uk/learn/css/css_layout/index.html delete mode 100644 "files/uk/learn/css/css_\321\200\320\276\320\267\320\274\321\226\321\202\320\272\320\260/index.html" create mode 100644 files/uk/learn/css/first_steps/how_css_works/index.html create mode 100644 files/uk/learn/css/first_steps/what_is_css/index.html delete mode 100644 "files/uk/learn/css/first_steps/\321\211\320\276_\321\202\320\260\320\272\320\265_css/index.html" create mode 100644 files/uk/learn/css/styling_text/styling_lists/index.html delete mode 100644 "files/uk/learn/css/styling_text/\321\201\321\202\320\270\320\273\321\226_\321\201\320\277\320\270\321\201\320\272\321\226\320\262/index.html" create mode 100644 files/uk/learn/forms/index.html create mode 100644 files/uk/learn/forms/your_first_form/index.html create mode 100644 files/uk/learn/front-end_web_developer/index.html create mode 100644 files/uk/learn/getting_started_with_the_web/the_web_and_web_standards/index.html delete mode 100644 "files/uk/learn/getting_started_with_the_web/\321\226\320\275\321\202\320\265\321\200\320\275\320\265\321\202_\321\202\320\260_\320\262\320\265\320\261-\321\201\321\202\320\260\320\275\320\264\320\260\321\200\321\202\320\270/index.html" delete mode 100644 files/uk/learn/how_to_contribute/index.html delete mode 100644 files/uk/learn/html/forms/index.html delete mode 100644 files/uk/learn/html/forms/your_first_form/index.html delete mode 100644 files/uk/learn/html/introduction_to_html/scho_v_head_metadani_v_html/index.html create mode 100644 files/uk/learn/html/introduction_to_html/the_head_metadata_in_html/index.html create mode 100644 files/uk/learn/javascript/asynchronous/index.html create mode 100644 files/uk/learn/javascript/building_blocks/index.html delete mode 100644 "files/uk/learn/javascript/\320\260\321\201\320\270\320\275\321\205\321\200\320\276\320\275\320\275\320\270\320\271/index.html" delete mode 100644 "files/uk/learn/javascript/\320\261\321\203\320\264\321\226\320\262\320\265\320\273\321\214\320\275\321\226_\320\261\320\273\320\276\320\272\320\270/index.html" create mode 100644 files/uk/learn/learning_and_getting_help/index.html create mode 100644 files/uk/learn/tools_and_testing/client-side_javascript_frameworks/index.html create mode 100644 files/uk/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.html create mode 100644 files/uk/learn/tools_and_testing/cross_browser_testing/index.html delete mode 100644 "files/uk/learn/tools_and_testing/git_\321\202\320\260_github/index.html" create mode 100644 files/uk/learn/tools_and_testing/github/index.html create mode 100644 files/uk/learn/tools_and_testing/understanding_client-side_tools/index.html delete mode 100644 "files/uk/learn/tools_and_testing/\321\200\320\276\320\267\321\203\320\274\321\226\320\275\320\275\321\217_javascript-\321\204\321\200\320\265\320\271\320\274\320\262\320\276\321\200\320\272\321\226\320\262_\320\275\320\260_\321\201\321\202\320\276\321\200\320\276\320\275\321\226_\320\272\320\273\321\226\321\224\320\275\321\202\320\260/index.html" delete mode 100644 "files/uk/learn/tools_and_testing/\321\200\320\276\320\267\321\203\320\274\321\226\320\275\320\275\321\217_javascript-\321\204\321\200\320\265\320\271\320\274\320\262\320\276\321\200\320\272\321\226\320\262_\320\275\320\260_\321\201\321\202\320\276\321\200\320\276\320\275\321\226_\320\272\320\273\321\226\321\224\320\275\321\202\320\260/znayomymos_zi_svelte/index.html" delete mode 100644 "files/uk/learn/tools_and_testing/\321\200\320\276\320\267\321\203\320\274\321\226\320\275\320\275\321\217_\321\226\320\275\321\201\321\202\321\200\321\203\320\274\320\265\320\275\321\202\321\226\320\262_\320\262\320\265\320\261-\321\200\320\276\320\267\321\200\320\276\320\261\320\272\320\270_\320\275\320\260_\321\201\321\202\320\276\321\200\320\276\320\275\321\226_\320\272\320\273\321\226\321\224\320\275\321\202\320\260/index.html" delete mode 100644 "files/uk/learn/tools_and_testing/\321\202\320\265\321\201\321\202\321\203\320\262\320\260\320\275\320\275\321\217_\320\272\321\200\320\276\321\201\320\261\321\200\320\260\321\203\320\267\320\265\321\200\320\275\320\276\321\201\321\202\321\226/index.html" delete mode 100644 "files/uk/learn/\320\264\320\276\321\201\321\202\321\203\320\277\320\275\321\226\321\201\321\202\321\214/index.html" delete mode 100644 "files/uk/learn/\320\275\320\260\320\262\321\207\320\260\320\275\320\275\321\217_\321\202\320\260_\320\276\321\202\321\200\320\270\320\274\320\260\320\275\320\275\321\217_\320\264\320\276\320\277\320\276\320\274\320\276\320\263\320\270/index.html" delete mode 100644 "files/uk/learn/\321\204\321\200\320\276\320\275\321\202-\320\265\320\275\320\264_\320\262\320\265\320\261-\321\200\320\276\320\267\321\200\320\276\320\261\320\275\320\270\320\272/index.html" create mode 100644 files/uk/mdn/about/index.html delete mode 100644 files/uk/mdn/community/index.html delete mode 100644 files/uk/mdn/contribute/howto/create_an_mdn_account/index.html create mode 100644 files/uk/mdn/contribute/howto/create_and_edit_pages/index.html delete mode 100644 files/uk/mdn/contribute/howto/do_an_editorial_review/index.html delete mode 100644 files/uk/mdn/contribute/howto/set_the_summary_for_a_page/index.html delete mode 100644 "files/uk/mdn/contribute/howto/\320\261\320\265\321\202\320\260_\321\202\320\265\321\201\321\202\321\203\320\262\320\260\320\275\320\275\321\217/index.html" delete mode 100644 "files/uk/mdn/contribute/howto/\321\217\320\272_\321\201\321\202\320\262\320\276\321\200\321\216\320\262\320\260\321\202\320\270_\320\271_\321\200\320\265\320\264\320\260\320\263\321\203\320\262\320\260\321\202\320\270_\321\201\321\202\320\276\321\200\321\226\320\275\320\272\320\270/index.html" create mode 100644 files/uk/mdn/guidelines/writing_style_guide/index.html delete mode 100644 "files/uk/mdn/guidelines/\320\275\320\260\321\201\321\202\320\260\320\275\320\276\320\262\320\270_\320\267\321\226_\321\201\321\202\320\270\320\273\321\216/index.html" delete mode 100644 files/uk/mdn/kuma/index.html create mode 100644 files/uk/mdn/structures/macros/commonly-used_macros/index.html create mode 100644 files/uk/mdn/structures/macros/index.html delete mode 100644 "files/uk/mdn/structures/\321\210\320\260\320\261\320\273\320\276\320\275\320\270/index.html" delete mode 100644 "files/uk/mdn/structures/\321\210\320\260\320\261\320\273\320\276\320\275\320\270/\320\267\320\260\320\263\320\260\320\273\321\214\320\275\320\276\320\262\320\266\320\270\320\262\320\260\320\275\321\226_\321\210\320\260\320\261\320\273\320\276\320\275\320\270/index.html" create mode 100644 files/uk/mdn/tools/kumascript/troubleshooting/index.html delete mode 100644 "files/uk/mdn/tools/kumascript/\321\203\321\201\321\203\320\275\320\265\320\275\320\275\321\217_\320\277\320\276\320\274\320\270\320\273\320\276\320\272_kumascript/index.html" create mode 100644 files/uk/mdn/yari/index.html delete mode 100644 "files/uk/mdn/\320\277\321\200\320\276/index.html" create mode 100644 files/uk/mozilla/add-ons/webextensions/what_are_webextensions/index.html delete mode 100644 "files/uk/mozilla/add-ons/webextensions/\321\211\320\276_\321\202\320\260\320\272\320\265_web_\321\200\320\276\320\267\321\210\320\270\321\200\320\265\320\275\320\275\321\217/index.html" create mode 100644 files/uk/orphaned/learn/how_to_contribute/index.html create mode 100644 files/uk/orphaned/mdn/community/index.html create mode 100644 files/uk/orphaned/mdn/contribute/howto/be_a_beta_tester/index.html create mode 100644 files/uk/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html create mode 100644 files/uk/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html create mode 100644 files/uk/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html create mode 100644 files/uk/orphaned/web/javascript/reference/global_objects/array/prototype/index.html create mode 100644 files/uk/orphaned/web/javascript/reference/global_objects/asyncfunction/prototype/index.html create mode 100644 files/uk/tools/index.html create mode 100644 files/uk/tools/network_monitor/index.html create mode 100644 files/uk/tools/network_monitor/performance_analysis/index.html create mode 100644 files/uk/tools/network_monitor/recording/index.html create mode 100644 files/uk/tools/network_monitor/request_details/index.html create mode 100644 files/uk/tools/network_monitor/request_list/index.html create mode 100644 files/uk/tools/network_monitor/throttling/index.html create mode 100644 files/uk/tools/network_monitor/toolbar/index.html create mode 100644 files/uk/tools/web_console/console_messages/index.html create mode 100644 files/uk/tools/web_console/index.html create mode 100644 files/uk/tools/web_console/split_console/index.html create mode 100644 files/uk/tools/web_console/ui_tour/index.html delete mode 100644 "files/uk/web/api/api_\320\262\321\226\320\264\320\276\320\261\321\200\320\260\320\266\320\265\320\275\320\275\321\217_\321\201\321\202\320\276\321\200\321\226\320\275\320\272\320\270/index.html" create mode 100644 files/uk/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html delete mode 100644 "files/uk/web/api/canvas_api/tutorial/\321\207\321\203\321\202\320\273\320\270\320\262\321\226_\320\264\321\226\320\273\321\217\320\275\320\272\320\270_\321\202\320\260_\320\264\320\276\321\201\321\202\321\203\320\277\320\275\321\226\321\201\321\202\321\214/index.html" create mode 100644 files/uk/web/api/event/index.html create mode 100644 files/uk/web/api/event/target/index.html create mode 100644 files/uk/web/api/htmlmediaelement/abort_event/index.html create mode 100644 files/uk/web/api/page_visibility_api/index.html create mode 100644 files/uk/web/api/window/domcontentloaded_event/index.html create mode 100644 files/uk/web/api/windoworworkerglobalscope/settimeout/index.html delete mode 100644 files/uk/web/api/windowtimers/index.html delete mode 100644 files/uk/web/api/windowtimers/settimeout/index.html delete mode 100644 "files/uk/web/api/\320\277\320\276\320\264\321\226\321\217/index.html" delete mode 100644 "files/uk/web/api/\320\277\320\276\320\264\321\226\321\217/target/index.html" create mode 100644 files/uk/web/css/alternative_style_sheets/index.html create mode 100644 files/uk/web/css/css_animations/using_css_animations/index.html delete mode 100644 "files/uk/web/css/css_animations/\320\262\320\270\320\272\320\276\321\200\320\270\321\201\321\202\320\260\320\275\320\275\321\217_css_\320\260\320\275\321\226\320\274\320\260\321\206\321\226\320\271/index.html" create mode 100644 files/uk/web/css/css_box_model/index.html create mode 100644 files/uk/web/css/css_box_model/mastering_margin_collapsing/index.html delete mode 100644 "files/uk/web/css/css_box_model/\320\267\320\263\320\276\321\200\321\202\320\260\320\275\320\275\321\217_\320\262\321\226\320\264\321\201\321\202\321\203\320\277\321\226\320\262/index.html" create mode 100644 files/uk/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html delete mode 100644 files/uk/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html create mode 100644 files/uk/web/css/layout_cookbook/index.html create mode 100644 files/uk/web/css/layout_mode/index.html create mode 100644 files/uk/web/css/reference/index.html create mode 100644 files/uk/web/css/visual_formatting_model/index.html delete mode 100644 "files/uk/web/css/\320\260\320\273\321\214\321\202\320\265\321\200\320\275\320\260\321\202\320\270\320\262\320\275\321\226_\321\202\320\260\320\261\320\273\320\270\321\206\321\226_\321\201\321\202\320\270\320\273\321\226\320\262/index.html" delete mode 100644 "files/uk/web/css/\320\264\320\276\320\262\321\226\320\264\320\275\320\270\320\272/index.html" delete mode 100644 "files/uk/web/css/\320\272\320\276\321\200\320\276\320\261\321\207\320\260\321\201\321\202\320\260_\320\274\320\276\320\264\320\265\320\273\321\214_css/index.html" delete mode 100644 "files/uk/web/css/\320\274\320\276\320\264\320\265\320\273\321\214_\320\262\321\226\320\267\321\203\320\260\320\273\321\214\320\275\320\276\320\263\320\276_\321\204\320\276\321\200\320\274\321\203\320\262\320\260\320\275\320\275\321\217/index.html" delete mode 100644 "files/uk/web/css/\321\200\320\276\320\267\320\274\321\226\321\202\320\272\320\260_\320\272\321\203\320\273\321\226\320\275\320\260\321\200\320\275\320\260-\320\272\320\275\320\270\320\263\320\260/index.html" delete mode 100644 "files/uk/web/css/\321\201\321\205\320\265\320\274\320\260_\320\272\320\276\320\274\320\277\320\276\320\275\321\203\320\262\320\260\320\275\320\275\321\217/index.html" delete mode 100644 files/uk/web/events/abort/index.html delete mode 100644 files/uk/web/events/domcontentloaded/index.html delete mode 100644 files/uk/web/guide/css/getting_started/index.html delete mode 100644 files/uk/web/guide/css/getting_started/what_is_css/index.html create mode 100644 files/uk/web/guide/graphics/index.html create mode 100644 files/uk/web/guide/html/using_html_sections_and_outlines/index.html delete mode 100644 "files/uk/web/guide/html/\320\262\320\270\320\272\320\276\321\200\320\270\321\201\321\202\320\260\320\275\320\275\321\217_html-\321\201\320\265\320\272\321\206\321\226\320\271_\321\202\320\260_\321\201\321\202\321\200\321\203\320\272\321\202\321\203\321\200\320\260_\320\264\320\276\320\272\321\203\320\274\320\265\320\275\321\202\321\203/index.html" delete mode 100644 "files/uk/web/guide/\320\263\321\200\320\260\321\204\321\226\320\272\320\260/index.html" create mode 100644 files/uk/web/houdini/index.html create mode 100644 files/uk/web/html/element/header/index.html create mode 100644 files/uk/web/html/element/html/index.html create mode 100644 files/uk/web/html/element/iframe/index.html create mode 100644 files/uk/web/html/element/index.html create mode 100644 files/uk/web/html/element/link/index.html create mode 100644 files/uk/web/html/element/nav/index.html create mode 100644 files/uk/web/html/element/script/index.html create mode 100644 files/uk/web/html/element/section/index.html create mode 100644 files/uk/web/html/element/style/index.html create mode 100644 files/uk/web/html/element/table/index.html create mode 100644 files/uk/web/html/element/video/index.html create mode 100644 files/uk/web/html/global_attributes/hidden/index.html create mode 100644 files/uk/web/html/global_attributes/index.html create mode 100644 files/uk/web/html/global_attributes/itemscope/index.html create mode 100644 files/uk/web/html/global_attributes/lang/index.html create mode 100644 files/uk/web/html/global_attributes/tabindex/index.html create mode 100644 files/uk/web/html/quirks_mode_and_standards_mode/index.html create mode 100644 files/uk/web/html/reference/index.html delete mode 100644 "files/uk/web/html/\320\264\320\276\320\262\321\226\320\264\320\275\320\270\320\272/index.html" delete mode 100644 "files/uk/web/html/\320\265\320\273\320\265\320\274\320\265\320\275\321\202/html/index.html" delete mode 100644 "files/uk/web/html/\320\265\320\273\320\265\320\274\320\265\320\275\321\202/iframe/index.html" delete mode 100644 "files/uk/web/html/\320\265\320\273\320\265\320\274\320\265\320\275\321\202/index.html" delete mode 100644 "files/uk/web/html/\320\265\320\273\320\265\320\274\320\265\320\275\321\202/link/index.html" delete mode 100644 "files/uk/web/html/\320\265\320\273\320\265\320\274\320\265\320\275\321\202/nav/index.html" delete mode 100644 "files/uk/web/html/\320\265\320\273\320\265\320\274\320\265\320\275\321\202/script/index.html" delete mode 100644 "files/uk/web/html/\320\265\320\273\320\265\320\274\320\265\320\275\321\202/section/index.html" delete mode 100644 "files/uk/web/html/\320\265\320\273\320\265\320\274\320\265\320\275\321\202/style/index.html" delete mode 100644 "files/uk/web/html/\320\265\320\273\320\265\320\274\320\265\320\275\321\202/table/index.html" delete mode 100644 "files/uk/web/html/\320\265\320\273\320\265\320\274\320\265\320\275\321\202/video/index.html" delete mode 100644 "files/uk/web/html/\320\265\320\273\320\265\320\274\320\265\320\275\321\202/\320\267\320\260\320\263\320\276\320\273\320\276\320\262\320\276\320\272/index.html" delete mode 100644 "files/uk/web/html/\320\267\320\260\320\263\320\260\320\273\321\214\320\275\321\226_\320\260\321\202\321\200\320\270\320\261\321\203\321\202\320\270/hidden/index.html" delete mode 100644 "files/uk/web/html/\320\267\320\260\320\263\320\260\320\273\321\214\320\275\321\226_\320\260\321\202\321\200\320\270\320\261\321\203\321\202\320\270/index.html" delete mode 100644 "files/uk/web/html/\320\267\320\260\320\263\320\260\320\273\321\214\320\275\321\226_\320\260\321\202\321\200\320\270\320\261\321\203\321\202\320\270/itemscope/index.html" delete mode 100644 "files/uk/web/html/\320\267\320\260\320\263\320\260\320\273\321\214\320\275\321\226_\320\260\321\202\321\200\320\270\320\261\321\203\321\202\320\270/lang/index.html" delete mode 100644 "files/uk/web/html/\320\267\320\260\320\263\320\260\320\273\321\214\320\275\321\226_\320\260\321\202\321\200\320\270\320\261\321\203\321\202\320\270/tabindex/index.html" delete mode 100644 "files/uk/web/html/\321\200\320\265\320\266\320\270\320\274_\321\201\321\203\320\274\321\226\321\201\320\275\320\276\321\201\321\202\321\226_\320\271_\321\201\321\202\320\260\320\275\320\264\320\260\321\200\321\202\320\275\320\270\320\271_\321\200\320\265\320\266\320\270\320\274/index.html" create mode 100644 files/uk/web/http/headers/accept-encoding/index.html create mode 100644 files/uk/web/http/headers/accept-language/index.html create mode 100644 files/uk/web/http/headers/connection/index.html create mode 100644 files/uk/web/http/headers/content-length/index.html create mode 100644 files/uk/web/http/headers/content-type/index.html create mode 100644 files/uk/web/http/headers/etag/index.html create mode 100644 files/uk/web/http/headers/if-match/index.html create mode 100644 files/uk/web/http/headers/index.html create mode 100644 files/uk/web/http/headers/location/index.html create mode 100644 files/uk/web/http/headers/referer/index.html create mode 100644 files/uk/web/http/headers/user-agent/index.html create mode 100644 files/uk/web/http/headers/x-forwarded-proto/index.html delete mode 100644 "files/uk/web/http/\320\267\320\260\320\263\320\276\320\273\320\276\320\262\320\272\320\270/accept-encoding/index.html" delete mode 100644 "files/uk/web/http/\320\267\320\260\320\263\320\276\320\273\320\276\320\262\320\272\320\270/accept-language/index.html" delete mode 100644 "files/uk/web/http/\320\267\320\260\320\263\320\276\320\273\320\276\320\262\320\272\320\270/connection/index.html" delete mode 100644 "files/uk/web/http/\320\267\320\260\320\263\320\276\320\273\320\276\320\262\320\272\320\270/content-length/index.html" delete mode 100644 "files/uk/web/http/\320\267\320\260\320\263\320\276\320\273\320\276\320\262\320\272\320\270/content-type/index.html" delete mode 100644 "files/uk/web/http/\320\267\320\260\320\263\320\276\320\273\320\276\320\262\320\272\320\270/etag/index.html" delete mode 100644 "files/uk/web/http/\320\267\320\260\320\263\320\276\320\273\320\276\320\262\320\272\320\270/if-match/index.html" delete mode 100644 "files/uk/web/http/\320\267\320\260\320\263\320\276\320\273\320\276\320\262\320\272\320\270/index.html" delete mode 100644 "files/uk/web/http/\320\267\320\260\320\263\320\276\320\273\320\276\320\262\320\272\320\270/location/index.html" delete mode 100644 "files/uk/web/http/\320\267\320\260\320\263\320\276\320\273\320\276\320\262\320\272\320\270/referer/index.html" delete mode 100644 "files/uk/web/http/\320\267\320\260\320\263\320\276\320\273\320\276\320\262\320\272\320\270/user-agent/index.html" delete mode 100644 "files/uk/web/http/\320\267\320\260\320\263\320\276\320\273\320\276\320\262\320\272\320\270/x-forwarded-proto/index.html" create mode 100644 files/uk/web/javascript/equality_comparisons_and_sameness/index.html create mode 100644 files/uk/web/javascript/guide/details_of_the_object_model/index.html delete mode 100644 files/uk/web/javascript/guide/dokladno_pro_objectnu_model/index.html create mode 100644 files/uk/web/javascript/guide/expressions_and_operators/index.html delete mode 100644 "files/uk/web/javascript/guide/\320\262\320\270\321\200\320\260\320\267\320\270_\321\202\320\260_\320\276\320\277\320\265\321\200\320\260\321\202\320\276\321\200\320\270/index.html" create mode 100644 files/uk/web/javascript/javascript_technologies_overview/index.html delete mode 100644 files/uk/web/javascript/oglyad_tehnologiy_javascript/index.html create mode 100644 files/uk/web/javascript/reference/functions/arrow_functions/index.html create mode 100644 files/uk/web/javascript/reference/functions/rest_parameters/index.html delete mode 100644 "files/uk/web/javascript/reference/functions/\321\200\320\265\321\210\321\202\320\260_\320\277\320\260\321\200\320\260\320\274\320\265\321\202\321\200\321\226\320\262/index.html" delete mode 100644 "files/uk/web/javascript/reference/functions/\321\201\321\202\321\200\321\226\320\273\320\272\320\276\320\262\321\226_\321\204\321\203\320\275\320\272\321\206\321\226\321\227/index.html" delete mode 100644 files/uk/web/javascript/reference/global_objects/array/prototype/index.html delete mode 100644 files/uk/web/javascript/reference/global_objects/asyncfunction/prototype/index.html delete mode 100644 files/uk/web/javascript/reference/global_objects/boolean/prototype/index.html delete mode 100644 files/uk/web/javascript/reference/global_objects/error/prototype/index.html delete mode 100644 files/uk/web/javascript/reference/global_objects/evalerror/prototype/index.html delete mode 100644 files/uk/web/javascript/reference/global_objects/function/prototype/index.html delete mode 100644 files/uk/web/javascript/reference/global_objects/generatorfunction/prototype/index.html delete mode 100644 files/uk/web/javascript/reference/global_objects/internalerror/prototype/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/round/index.html delete mode 100644 "files/uk/web/javascript/reference/global_objects/math/\320\267\320\260\320\276\320\272\321\200\321\203\320\263\320\265\320\273\320\275\320\275\321\217/index.html" create mode 100644 files/uk/web/javascript/reference/global_objects/number/epsilon/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/number/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/number/isfinite/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/number/isinteger/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/number/isnan/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/number/issafeinteger/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/number/max_safe_integer/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/number/max_value/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/number/min_safe_integer/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/number/min_value/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/number/nan/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/number/negative_infinity/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/number/number/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/number/parsefloat/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/number/parseint/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/number/positive_infinity/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/number/toexponential/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/number/tofixed/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/number/tolocalestring/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/number/toprecision/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/number/tosource/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/number/tostring/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/number/valueof/index.html delete mode 100644 files/uk/web/javascript/reference/global_objects/promise/prototype/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/promise/reject/index.html delete mode 100644 "files/uk/web/javascript/reference/global_objects/promise/\320\262\321\226\320\264\321\205\320\270\320\273\320\265\320\275\320\276/index.html" delete mode 100644 files/uk/web/javascript/reference/global_objects/rangeerror/prototype/index.html delete mode 100644 files/uk/web/javascript/reference/global_objects/referenceerror/prototype/index.html delete mode 100644 files/uk/web/javascript/reference/global_objects/syntaxerror/prototype/index.html delete mode 100644 files/uk/web/javascript/reference/global_objects/typeerror/prototype/index.html delete mode 100644 files/uk/web/javascript/reference/global_objects/urierror/prototype/index.html delete mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/epsilon/index.html" delete mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/index.html" delete mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/isfinite/index.html" delete mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/isinteger/index.html" delete mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/isnan/index.html" delete mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/issafeinteger/index.html" delete mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/max_safe_integer/index.html" delete mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/max_value/index.html" delete mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/min_safe_integer/index.html" delete mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/min_value/index.html" delete mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/nan/index.html" delete mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/negative_infinity/index.html" delete mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/number/index.html" delete mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/parsefloat/index.html" delete mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/parseint/index.html" delete mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/positive_infinity/index.html" delete mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/prototype/index.html" delete mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/toexponential/index.html" delete mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/tofixed/index.html" delete mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/tolocalestring/index.html" delete mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/toprecision/index.html" delete mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/tosource/index.html" delete mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/tostring/index.html" delete mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/valueof/index.html" create mode 100644 files/uk/web/javascript/reference/iteration_protocols/index.html delete mode 100644 files/uk/web/javascript/reference/operators/arithmetic_operators/index.html delete mode 100644 files/uk/web/javascript/reference/operators/bitwise_operators/index.html create mode 100644 files/uk/web/javascript/reference/operators/destructuring_assignment/index.html delete mode 100644 files/uk/web/javascript/reference/operators/logical_operators/index.html create mode 100644 files/uk/web/javascript/reference/operators/object_initializer/index.html delete mode 100644 "files/uk/web/javascript/reference/operators/\320\264\320\265\321\201\321\202\321\200\321\203\320\272\321\202\321\203\321\200\320\270\320\267\320\260\321\206\321\226\321\217/index.html" delete mode 100644 "files/uk/web/javascript/reference/operators/\320\276\320\277\320\265\321\200\320\260\321\202\320\276\321\200_\321\200\320\276\320\267\320\277\320\260\320\272\321\203\320\262\320\260\320\275\320\275\321\217/index.html" delete mode 100644 "files/uk/web/javascript/reference/operators/\320\276\320\277\320\265\321\200\320\260\321\202\320\276\321\200\320\270_\320\277\320\276\321\200\321\226\320\262\320\275\321\217\320\275\320\275\321\217/index.html" delete mode 100644 "files/uk/web/javascript/reference/operators/\320\276\320\277\320\265\321\200\320\260\321\202\320\276\321\200\320\270_\320\277\321\200\320\270\321\201\320\262\320\276\321\224\320\275\320\275\321\217/index.html" delete mode 100644 "files/uk/web/javascript/reference/operators/\321\226\320\275\321\226\321\206\321\226\320\260\320\273\321\226\320\267\320\260\321\206\321\226\321\217_\320\276\320\261\342\200\231\321\224\320\272\321\202\321\226\320\262/index.html" delete mode 100644 files/uk/web/javascript/reference/statements/default/index.html delete mode 100644 "files/uk/web/javascript/reference/\320\277\321\200\320\276\321\202\320\276\320\272\320\276\320\273\320\270_\320\277\320\265\321\200\320\265\320\261\320\276\321\200\321\203/index.html" delete mode 100644 "files/uk/web/javascript/\320\277\320\265\321\200\320\265\320\262\321\226\321\200\320\272\320\260_\320\275\320\260_\321\200\321\226\320\262\320\275\321\226\321\201\321\202\321\214_\321\202\320\260_\320\276\320\264\320\275\320\260\320\272\320\276\320\262\321\226\321\201\321\202\321\214/index.html" create mode 100644 files/uk/web/tutorials/index.html delete mode 100644 "files/uk/web/\320\263\321\203\320\264\321\226\320\275\321\226/index.html" delete mode 100644 "files/uk/web/\320\277\320\276\321\201\321\226\320\261\320\275\320\270\320\272\320\270/index.html" delete mode 100644 "files/uk/\321\226\320\275\321\201\321\202\321\200\321\203\320\274\320\265\320\275\321\202\320\270/index.html" delete mode 100644 "files/uk/\321\226\320\275\321\201\321\202\321\200\321\203\320\274\320\265\320\275\321\202\320\270/network_monitor/index.html" delete mode 100644 "files/uk/\321\226\320\275\321\201\321\202\321\200\321\203\320\274\320\265\320\275\321\202\320\270/network_monitor/performance_analysis/index.html" delete mode 100644 "files/uk/\321\226\320\275\321\201\321\202\321\200\321\203\320\274\320\265\320\275\321\202\320\270/network_monitor/recording/index.html" delete mode 100644 "files/uk/\321\226\320\275\321\201\321\202\321\200\321\203\320\274\320\265\320\275\321\202\320\270/network_monitor/request_details/index.html" delete mode 100644 "files/uk/\321\226\320\275\321\201\321\202\321\200\321\203\320\274\320\265\320\275\321\202\320\270/network_monitor/request_list/index.html" delete mode 100644 "files/uk/\321\226\320\275\321\201\321\202\321\200\321\203\320\274\320\265\320\275\321\202\320\270/network_monitor/throttling/index.html" delete mode 100644 "files/uk/\321\226\320\275\321\201\321\202\321\200\321\203\320\274\320\265\320\275\321\202\320\270/network_monitor/toolbar/index.html" delete mode 100644 "files/uk/\321\226\320\275\321\201\321\202\321\200\321\203\320\274\320\265\320\275\321\202\320\270/web_console/console_messages/index.html" delete mode 100644 "files/uk/\321\226\320\275\321\201\321\202\321\200\321\203\320\274\320\265\320\275\321\202\320\270/web_console/index.html" delete mode 100644 "files/uk/\321\226\320\275\321\201\321\202\321\200\321\203\320\274\320\265\320\275\321\202\320\270/web_console/opening_the_web_console/index.html" delete mode 100644 "files/uk/\321\226\320\275\321\201\321\202\321\200\321\203\320\274\320\265\320\275\321\202\320\270/web_console/split_console/index.html" (limited to 'files') diff --git a/files/uk/conflicting/glossary/doctype/index.html b/files/uk/conflicting/glossary/doctype/index.html new file mode 100644 index 0000000000..2106fd19d6 --- /dev/null +++ b/files/uk/conflicting/glossary/doctype/index.html @@ -0,0 +1,10 @@ +--- +title: DTD +slug: Glossary/DTD +tags: + - CodingScripting + - Глосарій +translation_of: Glossary/Doctype +translation_of_original: Glossary/DTD +--- +

{{page("/uk/docs/Glossary/Doctype")}}

diff --git a/files/uk/conflicting/learn/css/first_steps/index.html b/files/uk/conflicting/learn/css/first_steps/index.html new file mode 100644 index 0000000000..cedd782ad2 --- /dev/null +++ b/files/uk/conflicting/learn/css/first_steps/index.html @@ -0,0 +1,47 @@ +--- +title: Getting started with CSS +slug: Web/Guide/CSS/Getting_started +translation_of: Learn/CSS/First_steps +translation_of_original: Web/Guide/CSS/Getting_started +--- +

Це керівництво ознайомить Вас з основними функціями та мовою (синтаксисом) каскадних таблиць стилів (Cascading Style Sheets - CSS). Ви використовуєте CSS, щоб змінити зовнішній вигляд структурованого документу, такого як веб-сторінка. Урок також включає приклади вправ, які ви можете спробувати виконати на власному комп’ютері, щоб побачити ефекти CSS і функції, що реалізуються в сучасних браузерах.

+ +

Посібник призначений для початківців і будь-кого, хто б хотів повторити основи CSS. Якщо ви маєте більше досвіду з CSS, основна сторінка CSS містить списки більш просуненого рівня.

+ + + +

Що потрібно для початку роботи

+ + + +

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

+ +

На замітку: Керівництво розглядає тему як CSS працює з кольором. Буде простіше завершити ці секції з кольоровим дисплеєм та нормальним кольоровим зором.  

+ +

Як використовувати це керівництво

+ +

В опрацюванні цього керівництва читай сторінки уважно і в визначеній послідовності. Якщо ти пропустиш сторінку, надалі може бути важко зрозуміти наступні сторінки підручника. 

+ +

Частина І: основи CSS

+ +

На кожній сторінці переглянь відділ Інформація, щоб зрозуміти як працює CSS. Спробуй  секцію Дія, щоб випробувати CSS на власному комп’ютері.

+ +

To test your understanding, take the challenge at the end of each page. Solutions to the challenges are linked under the challenges, so you don't need to look at them if you don't want to.

+ +

Щоб глибше зрозуміти CSS, прочитай інформацію, яку ти знайдеш в блоці з заголовком Детальніше. Використай лінки у них, щоб знайти довідникову інформацію про CSS.

+ +

Частина II: Сфера CSS

+ +

Друга частина підручника надає приклади, які показують сферу CSS з іншими веб- і Mozilla технологіями.

+ +
    +
  1. JavaScript
    2. +
  2. SVG-графіка
    3. +
  3. XML дані
    4. +
  4. XBL сполучення
    5. +
  5. Користувацбкі інтерфейси ХUL
    6. +
diff --git a/files/uk/conflicting/web/api/windoworworkerglobalscope/index.html b/files/uk/conflicting/web/api/windoworworkerglobalscope/index.html new file mode 100644 index 0000000000..d28752bde7 --- /dev/null +++ b/files/uk/conflicting/web/api/windoworworkerglobalscope/index.html @@ -0,0 +1,126 @@ +--- +title: WindowTimers +slug: Web/API/WindowTimers +tags: + - API + - HTML DOM + - Interface + - Intervals + - Mixin + - NeedsTranslation + - Reference + - Timers + - TopicStub + - Workers +translation_of: Web/API/WindowOrWorkerGlobalScope +translation_of_original: Web/API/WindowTimers +--- +
{{APIRef("HTML DOM")}}
+ +

WindowTimers is a mixin used to provide utility methods which set and clear timers. No objects of this type exist; instead, its methods are available on {{domxref("Window")}} for the standard browsing scope, or on {{domxref("WorkerGlobalScope")}} for workers.

+ +

Properties

+ +

This interface neither inherits nor provides any properties.

+ +

Methods

+ +

This interface does not inherit any methods. It offers the following methods.

+ +
+
{{domxref("WindowTimers.clearInterval()")}}
+
Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.
+
{{domxref("WindowTimers.clearTimeout()")}}
+
Cancels the delayed execution set using {{domxref("WindowTimers.setTimeout()")}}.
+
{{domxref("WindowTimers.setInterval()")}}
+
Schedules a function to execute every time a given number of milliseconds elapses.
+
{{domxref("WindowTimers.setTimeout()")}}
+
Schedules a function to execute in a given amount of time.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#windowtimers', 'WindowTimers')}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#windowtimers', 'WindowTimers')}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName("HTML WHATWG")}}. No change.
{{SpecName("HTML5 W3C", "#windowtimers", "WindowTimers")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName("HTML WHATWG")}}. Creation of WindowBase64 (properties where on the target before it).
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop(1)}}1.04.04.01.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support{{CompatGeckoMobile(1)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

 

+ +

See also

+ + diff --git a/files/uk/conflicting/web/javascript/reference/global_objects/boolean/index.html b/files/uk/conflicting/web/javascript/reference/global_objects/boolean/index.html new file mode 100644 index 0000000000..dd69fe02f7 --- /dev/null +++ b/files/uk/conflicting/web/javascript/reference/global_objects/boolean/index.html @@ -0,0 +1,83 @@ +--- +title: Boolean.prototype +slug: Web/JavaScript/Reference/Global_Objects/Boolean/prototype +tags: + - Boolean + - JavaScript + - Властивість + - Поле + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Boolean +translation_of_original: Web/JavaScript/Reference/Global_Objects/Boolean/prototype +--- +
{{JSRef}}
+ +

Поле Boolean.prototype представляє прототип конструктора {{jsxref("Boolean")}}.

+ +
{{js_property_attributes(0, 0, 0)}}
+ +
{{EmbedInteractiveExample("pages/js/boolean-constructor.html")}}
+ + + +

Опис

+ +

Екземпляри {{jsxref("Boolean")}} наслідуються від Boolean.prototype. Ви можете використовувати об'єкт прототипа конструктора, щоб додавати свої поля та методи до всіх екземплярів {{jsxref("Boolean")}}.

+ +

Властивості

+ +
+
Boolean.prototype.constructor
+
Повертає функцію, що створила прототип екземпляра. За замовчування це функція {{jsxref("Boolean")}}.
+
+ +

Методи

+ +
+
{{jsxref("Boolean.prototype.toSource()")}} {{non-standard_inline}}
+
Повертає строку, що містить сирець об'єкту {{jsxref("Boolean")}}; використавши її ви можете створити еквівалентний об'єкт. Перевизначає метод {{jsxref("Object.prototype.toSource()")}}.
+
{{jsxref("Boolean.prototype.toString()")}}
+
Повертає строку "true" чи "false" залежно від значення об'єкту. Перевизначає метод {{jsxref("Object.prototype.toString()")}}.
+
{{jsxref("Boolean.prototype.valueOf()")}}
+
Повертає примітив значення об'єкту {{jsxref("Boolean")}}. Перевизначає метод {{jsxref("Object.prototype.valueOf()")}}.
+
+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусПримітка
{{SpecName('ES1')}}{{Spec2('ES1')}}Первинне визначення. Реалізовано у JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.6.3.1', 'Boolean.prototype')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-boolean.prototype', 'Boolean.prototype')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-boolean.prototype', 'Boolean.prototype')}}{{Spec2('ESDraft')}} 
+ +

Підтримка у браузерах

+ +
+ + +

{{Compat("javascript.builtins.Boolean.prototype")}}

+
diff --git a/files/uk/conflicting/web/javascript/reference/global_objects/error/index.html b/files/uk/conflicting/web/javascript/reference/global_objects/error/index.html new file mode 100644 index 0000000000..c0bcaf8739 --- /dev/null +++ b/files/uk/conflicting/web/javascript/reference/global_objects/error/index.html @@ -0,0 +1,115 @@ +--- +title: Error.prototype +slug: Web/JavaScript/Reference/Global_Objects/Error/prototype +tags: + - Error + - JavaScript + - Властивість + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Error +translation_of_original: Web/JavaScript/Reference/Global_Objects/Error/prototype +--- +
{{JSRef}}
+ +

Властивість Error.prototype є прототипом для конструктора {{jsxref("Error")}}.

+ +
{{js_property_attributes(0, 0, 0)}}
+ +

Опис

+ +

Всі екземпляри {{jsxref("Error")}} та екземпляри {{jsxref("Global_Objects/Error", "базових конструкторів помилок", "#Типи_помилок", 1)}} успадковуються від Error.prototype. Як в усіх функціях-конструкторах, ви можете використовувати прототип конструктора, щоб додавати властивості чи методи до усіх екземплярів, створених цим конструктором. 

+ +

Властивості

+ +

Стандартні властивості

+ +
+
Error.prototype.constructor
+
Функція, яка створила прототип екземпляра.
+
{{jsxref("Error.prototype.message")}}
+
Повідомлення помилки.
+
{{jsxref("Error.prototype.name")}}
+
Ім'я помилки.
+
+ +

Спеціальні розширення

+ +

{{non-standard_header}}

+ +

Microsoft

+ +
+
Error.description
+
Опис помилки. Властивість схожа на {{jsxref("Error.prototype.message", "message")}}.
+
Error.number
+
Номер помилки.
+
+ +

Mozilla

+ +
+
{{jsxref("Error.prototype.fileName")}}
+
Шлях до файлу, що спричинив помилку.
+
{{jsxref("Error.prototype.lineNumber")}}
+
Номер рядка у файлі, що спричинив помилку.
+
{{jsxref("Error.prototype.columnNumber")}}
+
Номер стовпця у файлі, де виникла помилка.
+
{{jsxref("Error.prototype.stack")}}
+
Трасування стеку.
+
+ +

Методи

+ +
+
{{jsxref("Error.prototype.toSource()")}} {{non-standard_inline}}
+
Повертає рядок з кодом, що спричинить створення заданого об'єкта {{jsxref("Error")}}; ви можете використати це значення, щоб створити новий об'єкт. Заміщує метод {{jsxref("Object.prototype.toSource()")}}.
+
{{jsxref("Error.prototype.toString()")}}
+
Повертає рядок, що представляє заданий об'єкт. Заміщує метод {{jsxref("Object.prototype.toString()")}}.
+
+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES1')}}{{Spec2('ES1')}}Початкове визначення Реалізовано у JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.11.3.1', 'Error')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-error.prototype', 'Error')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-error.prototype', 'Error')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Error.prototype")}}

+
+ +

Див. також

+ + diff --git a/files/uk/conflicting/web/javascript/reference/global_objects/evalerror/index.html b/files/uk/conflicting/web/javascript/reference/global_objects/evalerror/index.html new file mode 100644 index 0000000000..567dad0c0b --- /dev/null +++ b/files/uk/conflicting/web/javascript/reference/global_objects/evalerror/index.html @@ -0,0 +1,90 @@ +--- +title: EvalError.prototype +slug: Web/JavaScript/Reference/Global_Objects/EvalError/prototype +tags: + - Error + - EvalError + - JavaScript + - помилка +translation_of: Web/JavaScript/Reference/Global_Objects/EvalError +translation_of_original: Web/JavaScript/Reference/Global_Objects/EvalError/prototype +--- +
{{JSRef}}
+ +

Властивість EvalError.prototype є прототипом для конструктора {{jsxref("EvalError")}}.

+ +
{{js_property_attributes(0, 0, 0)}}
+ +

Опис

+ +

Всі екземпляри {{jsxref("EvalError")}} успадковуються від EvalError.prototype. Ви можете використати прототип, щоб додати властивості та методи до усіх екземплярів.

+ +

Властивості

+ +
+
EvalError.prototype.constructor
+
Функція, яка створила прототип об'єкта.
+
{{jsxref("Error.prototype.message", "EvalError.prototype.message")}}
+
Повідомлення помилки. Хоча ECMA-262 зазначає, що {{jsxref("EvalError")}} повинен мати власну властивість message, у SpiderMonkey він успадковує {{jsxref("Error.prototype.message")}}.
+
{{jsxref("Error.prototype.name", "EvalError.prototype.name")}}
+
Ім'я помилки. Успадковано від {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.fileName", "EvalError.prototype.fileName")}}
+
Шлях до файлу, що спричинив помилку. Успадковано від {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.lineNumber", "EvalError.prototype.lineNumber")}}
+
Номер рядка файлу, в якому виникла помилка. Успадковано від {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.columnNumber", "EvalError.prototype.columnNumber")}}
+
Номер стовпця у рядку, де виникла помилка. Успадковано від {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.stack", "EvalError.prototype.stack")}}
+
Трасування стеку. Успадковано від {{jsxref("Error")}}.
+
+ +

Методи

+ +

Хоча прототип {{jsxref("EvalError")}} не містить власних методів, екземпляри {{jsxref("EvalError")}} успадковують деякі методи через ланцюжок прототипів.

+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES3')}}{{Spec2('ES3')}}Початкове визначення.
{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}{{Spec2('ES5.1')}}Визначено як NativeError.prototype.
{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ES6')}}Визначено як NativeError.prototype.
{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ESDraft')}}Визначено як NativeError.prototype.
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.EvalError")}}

+
+ +

Див. також

+ + diff --git a/files/uk/conflicting/web/javascript/reference/global_objects/function/index.html b/files/uk/conflicting/web/javascript/reference/global_objects/function/index.html new file mode 100644 index 0000000000..aefa5cad6b --- /dev/null +++ b/files/uk/conflicting/web/javascript/reference/global_objects/function/index.html @@ -0,0 +1,100 @@ +--- +title: Function.prototype +slug: Web/JavaScript/Reference/Global_Objects/Function/prototype +tags: + - Function + - JavaScript + - Властивість + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/Function +translation_of_original: Web/JavaScript/Reference/Global_Objects/Function/prototype +--- +
{{JSRef}}
+ +

Властивість Function.prototype є об'єктом прототипу {{jsxref("Function")}}.

+ +

Опис

+ +

Об'єкти {{jsxref("Function")}} успадковуються від Function.prototype.  Function.prototype не можна змінити.

+ +

Властивості

+ +
+
{{jsxref("Function.prototype.arguments")}} {{deprecated_inline}}
+
Масив, що відповідає аргументам, переданим у функцію. Це застаріла властивість {{jsxref("Function")}}. Використовуйте натомість об'єкт {{jsxref("Functions/arguments", "arguments")}}, доступний всередині функції.
+
{{jsxref("Function.arity")}} {{obsolete_inline}}
+
Вказувала кількість аргументів, очікуваних функцією, але була видалена. Використовуйте натомість властивість {{jsxref("Function.length", "length")}}.
+
{{jsxref("Function.prototype.caller")}} {{non-standard_inline}}
+
Вказує функцію, що викликала функцію, яка виконується.
+
{{jsxref("Function.prototype.length")}}
+
Вказує кількість аргументів, очікуваних функцією.
+
{{jsxref("Function.prototype.name")}}
+
Ім'я функції.
+
{{jsxref("Function.displayName")}} {{non-standard_inline}}
+
Ім'я, що відображається для функції.
+
Function.prototype.constructor
+
Вказує функцію, яка створює прототип об'єкта. Більше інформації дивіться на сторінці {{jsxref("Object.prototype.constructor")}}.
+
+ +

Методи

+ +
+
{{jsxref("Function.prototype.apply()")}}
+
Викликає функцію та встановлює її this надане значення, аргументи можуть передаватися об'єктом {{jsxref("Array")}}.
+
{{jsxref("Function.prototype.bind()")}}
+
Створює нову функцію, в якої під час виклику this присвоєне надане значення, з заданою послідовністю аргументів, що передують будь-якім іншим наданим аргументам під час виклику нової функції.
+
{{jsxref("Function.prototype.call()")}}
+
Викликає (виконує) функцію та присвоює її this надане значення, аргументи можуть передаватися як є.
+
{{jsxref("Function.prototype.isGenerator()")}} {{non-standard_inline}}
+
Повертає true, якщо функція є генератором; інакше повертає false.
+
{{jsxref("Function.prototype.toSource()")}} {{non-standard_inline}}
+
Повертає рядкове представлення першокоду функції. Заміщує метод {{jsxref("Object.prototype.toSource")}}.
+
{{jsxref("Function.prototype.toString()")}}
+
Повертає рядкове представлення першокоду функції. Заміщує метод {{jsxref("Object.prototype.toString")}}.
+
+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES1')}}{{Spec2('ES1')}}Початкове визначення. Реалізоване у JavaScript 1.1
{{SpecName('ES5.1', '#sec-15.3.5.2', 'Function.prototype')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-function-instances-prototype', 'Function.prototype')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-function-instances-prototype', 'Function.prototype')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.Function.prototype")}}

+
+ +

Див. також

+ + diff --git a/files/uk/conflicting/web/javascript/reference/global_objects/generatorfunction/index.html b/files/uk/conflicting/web/javascript/reference/global_objects/generatorfunction/index.html new file mode 100644 index 0000000000..0c20812347 --- /dev/null +++ b/files/uk/conflicting/web/javascript/reference/global_objects/generatorfunction/index.html @@ -0,0 +1,66 @@ +--- +title: GeneratorFunction.prototype +slug: Web/JavaScript/Reference/Global_Objects/GeneratorFunction/prototype +tags: + - ECMAScript 2015 + - GeneratorFunction + - JavaScript + - Ітератор + - Властивість + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/GeneratorFunction +translation_of_original: Web/JavaScript/Reference/Global_Objects/GeneratorFunction/prototype +--- +
{{JSRef}}
+ +

Властивість GeneratorFunction.prototype відображає прототип {{jsxref("GeneratorFunction")}}.

+ +

Опис

+ +

Об'єкти {{jsxref("GeneratorFunction")}} успадковуються від GeneratorFunction.prototype. GeneratorFunction.prototype не можна змінювати.

+ +

Властивості

+ +
+
GeneratorFunction.constructor
+
Початковим значенням є {{jsxref("GeneratorFunction")}}.
+
GeneratorFunction.prototype.prototype
+
Значення дорівнює %GeneratorPrototype%.
+
+ +

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

+ + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES2015', '#sec-generatorfunction.prototype', 'GeneratorFunction.prototype')}}{{Spec2('ES2015')}}Початкове визначення.
{{SpecName('ESDraft', '#sec-generatorfunction.prototype', 'GeneratorFunction.prototype')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.GeneratorFunction.prototype")}}

+
+ +

Див. також

+ + diff --git a/files/uk/conflicting/web/javascript/reference/global_objects/internalerror/index.html b/files/uk/conflicting/web/javascript/reference/global_objects/internalerror/index.html new file mode 100644 index 0000000000..44dc74ec1a --- /dev/null +++ b/files/uk/conflicting/web/javascript/reference/global_objects/internalerror/index.html @@ -0,0 +1,63 @@ +--- +title: InternalError.prototype +slug: Web/JavaScript/Reference/Global_Objects/InternalError/prototype +tags: + - Error + - InternalError + - JavaScript + - Властивість + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/InternalError +translation_of_original: Web/JavaScript/Reference/Global_Objects/InternalError/prototype +--- +
{{JSRef}} {{non-standard_header}}
+ +

Властивість InternalError.prototype є прототипом конструктора {{jsxref("InternalError")}}.

+ +
{{js_property_attributes(0, 0, 0)}}
+ +

Опис

+ +

Всі екземпляри {{jsxref("InternalError")}} успадковуються від InternalError.prototype. Ви можете використати прототип, щоб додати властивості чи методи до усіх екземплярів.

+ +

Властивості

+ +
+
InternalError.prototype.constructor
+
Визначає функцію, яка створила прототип об'єкта.
+
{{jsxref("Error.prototype.message", "InternalError.prototype.message")}}
+
Повідомлення помилки. Успадковано від {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.name", "InternalError.prototype.name")}}
+
Ім'я помилки. Успадковано від {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.fileName", "InternalError.prototype.fileName")}}
+
Шлях до файлу, що спричинив помилку. Успадковано від {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.lineNumber", "InternalError.prototype.lineNumber")}}
+
Номер рядка файлу, в якому виникла помилка. Успаковано від {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.columnNumber", "InternalError.prototype.columnNumber")}}
+
Номер стовпця у рядку, де виникла помилка. Успаковано від {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.stack", "InternalError.prototype.stack")}}
+
Трасування стеку. Успаковано від {{jsxref("Error")}}.
+
+ +

Методи

+ +

Хоча прототип {{jsxref("InternalError")}} не має власних методів, екземпляри {{jsxref("InternalError")}} успадковують деякі методи через ланцюжок прототипів.

+ +

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

+ +

Не є частиною жодних специфікацій.

+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.InternalError")}}

+
+ +

Див. також

+ + diff --git a/files/uk/conflicting/web/javascript/reference/global_objects/number/index.html b/files/uk/conflicting/web/javascript/reference/global_objects/number/index.html new file mode 100644 index 0000000000..3cd9d811cc --- /dev/null +++ b/files/uk/conflicting/web/javascript/reference/global_objects/number/index.html @@ -0,0 +1,90 @@ +--- +title: Number.prototype +slug: Web/JavaScript/Reference/Global_Objects/Число/prototype +tags: + - JavaScript + - Number + - Property + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Number +translation_of_original: Web/JavaScript/Reference/Global_Objects/Number/prototype +--- +
{{JSRef}}
+ +

Властивість Number.prototype являє собою прототип для конструктора класу {{jsxref("Global_Objects/Number", "Number")}}.

+ +
{{js_property_attributes(0, 0, 0)}}
+ +

Опис

+ +

Кожен примірник класу {{jsxref("Global_Objects/Number", "Number")}} успадковує властивості й методи з Number.prototype. Зміни, внесені до прототипа, позначаться на всіх об'єктах, що є примірниками класу {{jsxref("Global_Objects/Number", "Number")}}.

+ +

Властивості

+ +
+
Number.prototype.constructor
+
Повертає функцію, що створила цей примірник об'єкта. Типово це об'єкт {{jsxref("Global_Objects/Number", "Number")}}, який водночас є і функцією.
+
+ +

Методи

+ +
+
{{jsxref("Number.prototype.toExponential()")}}
+
Повертає рядок, що містить експоненціальний запис числа.
+
{{jsxref("Number.prototype.toFixed()")}}
+
Повертає рядок, що містить запис числа у форматі з нерухомою комою.
+
{{jsxref("Number.prototype.toLocaleString()")}}
+
Повертає рядок, що містить узалежнений від мови запис числа. Перекриває метод {{jsxref("Object.prototype.toLocaleString()")}}.
+
{{jsxref("Number.prototype.toPrecision()")}}
+
Повертає рядок, що містить запис числа із зазначеною точністю у форматі з нерухомою комою чи експоненціальний.
+
{{jsxref("Number.prototype.toSource()")}} {{non-standard_inline}}
+
Повертає рядок, що містить код мовою JavaScript, який створює об'єкт класу {{jsxref("Global_Objects/Number", "Number")}} з відповідним значенням. Цей код можна використати для створення нового об'єкта. Перекриває метод {{jsxref("Object.prototype.toSource()")}}.
+
{{jsxref("Number.prototype.toString()")}}
+
Повертає рядок, що містить числовий запис значення об'єкта в зазначеній системі числення. Перекриває метод {{jsxref("Object.prototype.toString()")}}.
+
{{jsxref("Number.prototype.valueOf()")}}
+
Повертає {{Glossary("Primitive", "просте числове значення")}} об'єкта. Перекриває метод {{jsxref("Object.prototype.valueOf()")}}.
+
+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES1')}}{{Spec2('ES1')}}Первинне визначення. Реалізовано у JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.7.4', 'Number')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-properties-of-the-number-prototype-object', 'Number')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-properties-of-the-number-prototype-object', 'Number')}}{{Spec2('ESDraft')}} 
+ +

Підтримка веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Number.prototype")}}

+ +

Див. також

+ + diff --git a/files/uk/conflicting/web/javascript/reference/global_objects/promise/index.html b/files/uk/conflicting/web/javascript/reference/global_objects/promise/index.html new file mode 100644 index 0000000000..33bdd86562 --- /dev/null +++ b/files/uk/conflicting/web/javascript/reference/global_objects/promise/index.html @@ -0,0 +1,70 @@ +--- +title: Promise.prototype +slug: Web/JavaScript/Reference/Global_Objects/Promise/prototype +tags: + - JavaScript + - Promise + - ДжаваСкріпт + - Проміс +translation_of: Web/JavaScript/Reference/Global_Objects/Promise +translation_of_original: Web/JavaScript/Reference/Global_Objects/Promise/prototype +--- +
{{JSRef}}
+ +

Параметр Promise.prototype відображає прототип для конструктора {{jsxref("Promise")}} constructor.

+ +
{{js_property_attributes(0,0,0)}}
+ +

Опис

+ +

Екземпляри {{jsxref("Promise")}} успадковуються від {{jsxref("Promise.prototype")}}. Ви можете використовувати прототип конструктора, щоб добавляти параметри або методи до всіх екземплярів Promise.

+ +

Параметри

+ +
+
Promise.prototype.constructor
+
Повертає функцію, яка створила прототип екземпляра. Це є функція {{jsxref("Promise")}} по замовчуванню.
+
+ +

Методи

+ +
+
{{jsxref("Promise.catch", "Promise.prototype.catch(onRejected)")}}
+
Добавляє колбек обробник відхилення проміса, і повертає новий проміс, який вирішується значенням, яке повертається з функції колбеку, якщо вона була викликана, або його початковий результат виконання, якщо даний проміс був виконаний.
+
{{jsxref("Promise.then", "Promise.prototype.then(onFulfilled, onRejected)")}}
+
Добавляє до проміса функції колбеки для випадків, коли проміс був виконаний (onFulfilled) і відхилений (onRejected) і повертає новий проміс, який вирішується значенням, яке було повернуто з onFulfilled функції колбеку, або з початковим значенням, яке було вирішено, коли даний проміс не був оброблений (тобто коли обробники onFulfilled або onRejected не є функцією).
+
+ +

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

+ + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES6', '#sec-promise.prototype', 'Promise.prototype')}}{{Spec2('ES6')}}Початкове визначення.
{{SpecName('ESDraft', '#sec-promise.prototype', 'Promise.prototype')}}{{Spec2('ESDraft')}} 
+ +

Сумісність із браузерами

+ + + +

{{Compat("javascript/promise","Promise.prototype")}}

+ +

Дивитися також

+ + diff --git a/files/uk/conflicting/web/javascript/reference/global_objects/rangeerror/index.html b/files/uk/conflicting/web/javascript/reference/global_objects/rangeerror/index.html new file mode 100644 index 0000000000..8a836ddd56 --- /dev/null +++ b/files/uk/conflicting/web/javascript/reference/global_objects/rangeerror/index.html @@ -0,0 +1,90 @@ +--- +title: RangeError.prototype +slug: Web/JavaScript/Reference/Global_Objects/RangeError/prototype +tags: + - Error + - JavaScript + - RangeError + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/RangeError +translation_of_original: Web/JavaScript/Reference/Global_Objects/RangeError/prototype +--- +
{{JSRef}}
+ +

Властивість RangeError.prototype є прототипом для конструктора {{jsxref("RangeError")}}

+ +
{{js_property_attributes(0, 0, 0)}}
+ +

Опис

+ +

Всі екземпляри {{jsxref("RangeError")}} успадковуються від RangeError.prototype. Ви можете використати прототип, щоб додати властивості чи методи до усіх екземплярів.

+ +

Властивості

+ +
+
RangeError.prototype.constructor
+
Визначає функцію, яка створила прототип об'єкта.
+
{{jsxref("Error.prototype.message", "RangeError.prototype.message")}}
+
Повідомлення помилки. Хоча ECMA-262 зазначає, що {{jsxref("RangeError")}} має надавати власну властивість message, у SpiderMonkey, він успадковує {{jsxref("Error.prototype.message")}}.
+
{{jsxref("Error.prototype.name", "RangeError.prototype.name")}}
+
Ім'я помилки. Успаковано від {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.fileName", "RangeError.prototype.fileName")}}
+
Шлях до файлу, що спричинив помилку. Успаковано від {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.lineNumber", "RangeError.prototype.lineNumber")}}
+
Номер рядка файлу, в якому виникла помилка. Успаковано від {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.columnNumber", "RangeError.prototype.columnNumber")}}
+
Номер стовпця у рядку, де виникла помилка. Успаковано від {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.stack", "RangeError.prototype.stack")}}
+
Трасування стеку. Успаковано від {{jsxref("Error", "Error")}}.
+
+ +

Методи

+ +

Хоча прототип {{jsxref("RangeError")}} не містить власних методів, екземпляри {{jsxref("RangeError")}} успадковують деякі методи через ланцюжок прототипів.

+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES3')}}{{Spec2('ES3')}}Початкове визначення.
{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}{{Spec2('ES5.1')}}Визначено як NativeError.prototype.
{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ES6')}}Визначено як NativeError.prototype.
{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ESDraft')}}Визначено як NativeError.prototype.
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.RangeError")}}

+
+ +

Див. також

+ + diff --git a/files/uk/conflicting/web/javascript/reference/global_objects/referenceerror/index.html b/files/uk/conflicting/web/javascript/reference/global_objects/referenceerror/index.html new file mode 100644 index 0000000000..cacfaf2719 --- /dev/null +++ b/files/uk/conflicting/web/javascript/reference/global_objects/referenceerror/index.html @@ -0,0 +1,91 @@ +--- +title: ReferenceError.prototype +slug: Web/JavaScript/Reference/Global_Objects/ReferenceError/prototype +tags: + - Error + - JavaScript + - ReferenceError + - помилка + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/ReferenceError +translation_of_original: Web/JavaScript/Reference/Global_Objects/ReferenceError/prototype +--- +
{{JSRef}}
+ +

Властивість ReferenceError.prototype є прототипом для конструктора {{jsxref("ReferenceError")}}.

+ +
{{js_property_attributes(0, 0, 0)}}
+ +

Опис

+ +

Всі екземпляри {{jsxref("ReferenceError")}} успадковуються від ReferenceError.prototype. Ви можете використати прототип, щоб додати властивості чи методи до усіх екземплярів.

+ +

Властивості

+ +
+
ReferenceError.prototype.constructor
+
Визначає функцію, яка створила прототип об'єкта.
+
{{jsxref("Error.prototype.message", "ReferenceError.prototype.message")}}
+
Повідомлення помилки. Хоча ECMA-262 зазначає, що {{jsxref("ReferenceError")}} повинен мати власну властивість message, у SpiderMonkey він успадковує {{jsxref("Error.prototype.message")}}.
+
{{jsxref("Error.prototype.name", "ReferenceError.prototype.name")}}
+
Ім'я помилки. Успадковано від {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.fileName", "ReferenceError.prototype.fileName")}}
+
Шлях до файлу, що спричинив помилку. Успаковано від {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.lineNumber", "ReferenceError.prototype.lineNumber")}}
+
Номер рядка файлу, в якому виникла помилка. Успаковано від {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.columnNumber", "ReferenceError.prototype.columnNumber")}}
+
Номер стовпця у рядку, де виникла помилка. Успаковано від {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.stack", "ReferenceError.prototype.stack")}}
+
Трасування стеку. Успаковано від {{jsxref("Error")}}.
+
+ +

Методи

+ +

Хоча прототип {{jsxref("ReferenceError")}} не містить власних методів, екземпляри {{jsxref("ReferenceError")}} успадковують деякі методи через ланцюжок прототипів.

+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES3')}}{{Spec2('ES3')}}Початкове визначення.
{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}{{Spec2('ES5.1')}}Визначено як NativeError.prototype.
{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ES6')}}Визначено як NativeError.prototype.
{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ESDraft')}}Визначено як NativeError.prototype.
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.ReferenceError")}}

+
+ +

Див. також

+ + diff --git a/files/uk/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html b/files/uk/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html new file mode 100644 index 0000000000..b4d42f339c --- /dev/null +++ b/files/uk/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html @@ -0,0 +1,89 @@ +--- +title: SyntaxError.prototype +slug: Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype +tags: + - Error + - JavaScript + - Prototype + - SyntaxError + - помилка +translation_of: Web/JavaScript/Reference/Global_Objects/SyntaxError +translation_of_original: Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype +--- +
{{JSRef}}
+ +

Властивість SyntaxError.prototype є прототипом для конструктора {{jsxref("SyntaxError")}}.

+ +

Опис

+ +

Всі примірники {{jsxref("SyntaxError")}} успадковуються від SyntaxError.prototype, тож ви можете скористатися прототипом задля додавання властивостей чи методів до всіх примірників.

+ +

Властивості

+ +
+
SyntaxError.prototype.constructor
+
Функція, що створює прототип об'єкта.
+
{{jsxref("Error.prototype.message", "SyntaxError.prototype.message")}}
+
Повідомлення помилки. Попри те, що в ECMA-262 зазначено, що {{jsxref("SyntaxError")}} мусить мати свою властивість message, у SpiderMonkey він насправді успадковує {{jsxref("Error.prototype.message")}}.
+
{{jsxref("Error.prototype.name", "SyntaxError.prototype.name")}}
+
Ім'я помилки. Успадковано від {{jsxref("Global_Objects/Error", "Error")}}.
+
{{jsxref("Error.prototype.fileName", "SyntaxError.prototype.fileName")}}
+
Шлях до файла, де сталася ця помилка. Успадковано від {{jsxref("Global_Objects/Error", "Error")}}.
+
{{jsxref("Error.prototype.lineNumber", "SyntaxError.prototype.lineNumber")}}
+
Номер рядка у файлі, де сталася ця помилка. Успадковано від {{jsxref("Global_Objects/Error", "Error")}}.
+
{{jsxref("Error.prototype.columnNumber", "SyntaxError.prototype.columnNumber")}}
+
Номер символа у рядку, де сталася ця помилка. Успадковано від {{jsxref("Global_Objects/Error", "Error")}}.
+
{{jsxref("Error.prototype.stack", "SyntaxError.prototype.stack")}}
+
Стек викликів. Успадковано від {{jsxref("Global_Objects/Error", "Error")}}.
+
+ +

Методи

+ +

Хоча прототип {{jsxref("SyntaxError")}} не містить власних методів, примірники {{jsxref("SyntaxError")}} успадковують деякі методи від ланцюжка прототипів.

+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES3')}}{{Spec2('ES3')}}Первинне визначення.
{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}{{Spec2('ES5.1')}}Визначено як NativeError.prototype.
{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ES6')}}Визначено як NativeError.prototype.
{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ESDraft')}}Визначено як NativeError.prototype.
+ +

Підтримка веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.SyntaxError")}}

+
+ +

Див. також

+ + diff --git a/files/uk/conflicting/web/javascript/reference/global_objects/typeerror/index.html b/files/uk/conflicting/web/javascript/reference/global_objects/typeerror/index.html new file mode 100644 index 0000000000..7b9c55fc37 --- /dev/null +++ b/files/uk/conflicting/web/javascript/reference/global_objects/typeerror/index.html @@ -0,0 +1,88 @@ +--- +title: TypeError.prototype +slug: Web/JavaScript/Reference/Global_Objects/TypeError/prototype +tags: + - Error + - JavaScript + - TypeError + - помилка +translation_of: Web/JavaScript/Reference/Global_Objects/TypeError +translation_of_original: Web/JavaScript/Reference/Global_Objects/TypeError/prototype +--- +
{{JSRef}}
+ +

Властивість TypeError.prototype є прототипом для конструктора {{jsxref("TypeError")}}.

+ +

Опис

+ +

Всі екземпляри {{jsxref("TypeError")}} успадковуються від TypeError.prototype. Ви можете використати прототип, щоб додати властивості чи методи до усіх екземплярів.

+ +

Властивості

+ +
+
TypeError.prototype.constructor
+
Визначає функцію, яка створила прототип об'єкта.
+
{{jsxref("Error.prototype.message", "TypeError.prototype.message")}}
+
Повідомлення помилки. Хоча ECMA-262 зазначає, що {{jsxref("TypeError")}} повинен мати власну властивість message, у SpiderMonkey, він успадковує {{jsxref("Error.prototype.message")}}.
+
{{jsxref("Error.prototype.name", "TypeError.prototype.name")}}
+
Ім'я помилки. Успадковано від {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.fileName", "TypeError.prototype.fileName")}}
+
Шлях до файлу, що спричинив помилку. Успаковано від {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.lineNumber", "TypeError.prototype.lineNumber")}}
+
Номер рядка файлу, в якому виникла помилка. Успаковано від {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.columnNumber", "TypeError.prototype.columnNumber")}}
+
Номер стовпця у рядку, де виникла помилка. Успаковано від {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.stack", "TypeError.prototype.stack")}}
+
Трасування стеку. Успаковано від {{jsxref("Error")}}.
+
+ +

Методи

+ +

Хоча прототип {{jsxref("TypeError")}} не містить власних методів, екземпляри {{jsxref("TypeError")}} успадковують деякі методи через ланцюжок прототипів.

+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES3', '#sec-15.11.7.6', 'NativeError.prototype')}}{{Spec2('ES3')}}Початкове визначення.
{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}{{Spec2('ES5.1')}}Визначено як  NativeError.prototype.
{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ES6')}}Визначено як  NativeError.prototype.
{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ESDraft')}} 
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.TypeError")}}

+
+ +

Див. також

+ + diff --git a/files/uk/conflicting/web/javascript/reference/global_objects/urierror/index.html b/files/uk/conflicting/web/javascript/reference/global_objects/urierror/index.html new file mode 100644 index 0000000000..d8a4144790 --- /dev/null +++ b/files/uk/conflicting/web/javascript/reference/global_objects/urierror/index.html @@ -0,0 +1,89 @@ +--- +title: URIError.prototype +slug: Web/JavaScript/Reference/Global_Objects/URIError/prototype +tags: + - Error + - JavaScript + - URIError + - помилка + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/URIError +translation_of_original: Web/JavaScript/Reference/Global_Objects/URIError/prototype +--- +
{{JSRef}}
+ +

Властивість URIError.prototype є прототипом для конструктора {{jsxref("URIError")}}.

+ +

Опис

+ +

Всі екземпляри {{jsxref("URIError")}} успадковуються від URIError.prototype. Ви можете використати прототип, щоб додати властивості чи методи до усіх екземплярів.

+ +

Властивості

+ +
+
URIError.prototype.constructor
+
Визначає функцію, яка створила прототип об'єкта.
+
{{jsxref("Error.prototype.message", "URIError.prototype.message")}}
+
Повідомлення помилки. Хоча ECMA-262 зазначає, що {{jsxref("URIError")}} повинен мати власну властивість message, у SpiderMonkey, він успадковує {{jsxref("Error.prototype.message")}}.
+
{{jsxref("Error.prototype.name", "URIError.prototype.name")}}
+
Ім'я помилки. Успадковано від {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.fileName", "URIError.prototype.fileName")}}
+
Шлях до файлу, що спричинив помилку. Успаковано від {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.lineNumber", "URIError.prototype.lineNumber")}}
+
Номер рядка файлу, в якому виникла помилка. Успаковано від {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.columnNumber", "URIError.prototype.columnNumber")}}
+
Номер стовпця у рядку, де виникла помилка. Успаковано від {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.stack", "URIError.prototype.stack")}}
+
Трасування стеку. Успаковано від {{jsxref("Error")}}.
+
+ +

Методи

+ +

Хоча прототип {{jsxref("URIError")}} не містить власних методів, екземпляри {{jsxref("URIError")}} успадковують деякі методи через ланцюжок прототипів.

+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES3', '#sec-15.11.7.6', 'NativeError.prototype')}}{{Spec2('ES3')}}Початкове визначення.
{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}{{Spec2('ES5.1')}}Визначено як  NativeError.prototype.
{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ES6')}}Визначено як  NativeError.prototype.
{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ESDraft')}}Визначено як  NativeError.prototype.
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.URIError")}}

+
+ +

Див. також

+ + diff --git a/files/uk/conflicting/web/javascript/reference/operators/index.html b/files/uk/conflicting/web/javascript/reference/operators/index.html new file mode 100644 index 0000000000..88128f5d99 --- /dev/null +++ b/files/uk/conflicting/web/javascript/reference/operators/index.html @@ -0,0 +1,314 @@ +--- +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 +--- +
{{jsSidebar("Operators")}}
+ +

Арифметичні оператори приймають числові значення (або літерали, або змінні) в якості операндів та повертають єдине числове значення. Стандартними арифметичними операторами є додавання (+), віднімання (-), множення (*) та ділення (/).

+ +
{{EmbedInteractiveExample("pages/js/expressions-arithmetic.html")}}
+ + + +

Додавання (+)

+ +

Оператор додавання повертає суму числових операндів або об'єднання рядків.

+ +

Синтаксис

+ +
Оператор: x + y
+
+ +

Приклади

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

Віднімання (-)

+ +

Оператор віднімання проводить операцію віднімання між двома операндами, повертаючи різницю між ними.

+ +

Синтаксис

+ +
Оператор: x - y
+
+ +

Приклади

+ +
5 - 3 // 2
+3 - 5 // -2
+'foo' - 3 // NaN
+ +

Ділення (/)

+ +

Оператор ділення повертає частку своїх операндів, де лівий операнд є діленим, а правий операнд є дільником.

+ +

Синтаксис

+ +
Оператор: x / y
+
+ +

Приклади

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

Множення (*)

+ +

Оператор множення повертає добуток операндів.

+ +

Синтаксис

+ +
Оператор: x * y
+
+ +

Приклади

+ +
2 * 2 // 4
+-2 * 2 // -4
+Infinity * 0 // NaN
+Infinity * Infinity // Infinity
+'foo' * 2 // NaN
+
+ +

Остача (%)

+ +

Оператор остачі повертає остачу від ділення першого операнду на другий. Він завжди приймає знак діленого.

+ +

Синтаксис

+ +
Оператор: var1 % var2
+
+ +

Приклади

+ +
12 % 5 // 2
+-1 % 2 // -1
+1 % -2 // 1
+NaN % 2 // NaN
+1 % 2 // 1
+2 % 3 // 2
+-4 % 2 // -0
+5.5 % 2 // 1.5
+
+ +

Піднесення до степеня (**)

+ +

Оператор піднесення до степеня повертає результат піднесення першого операнду до показника степеня другого операнду. Тобто, var1var2 у наведеній інструкції, де var1 та var2 є змінними. Оператор піднесення до степеня правоасоціативний. a ** b ** c дорівнює a ** (b ** c).

+ +

Синтаксис

+ +
Оператор: var1 ** var2
+
+ +

Примітки

+ +

У більшості мов, таких як PHP, Python та інших, які мають оператор піднесення до степеня (**), оператор піднесення до степеня має вищий пріоритет, ніж унарні оператори, такі як унарний + та унарний -, але існує кілька винятків. Наприклад, у Bash оператор ** має нижчий пріоритет, ніж унарні оператори. У JavaScript неможливо написати неоднозначний вираз піднесення до степеня, тобто, ви не можете поставити унарний оператор (+/-/~/!/delete/void/typeof) одразу перед числом основи степеня.

+ +
-2 ** 2;
+// 4 у Bash, -4 у інших мовах.
+// Це помилка у JavaScript, оскільки операція неоднозначна.
+
+
+-(2 ** 2);
+// -4 у JavaScript, а наміри автора однозначні.
+
+ +

Приклади

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

Щоб поміняти знак результату виразу піднесення до степеня:

+ +
-(2 ** 2) // -4
+
+ +

Щоб зробити основу степеня у виразі від'ємним числом:

+ +
(-2) ** 2 // 4
+
+ +
+

Заувага: JavaScript також має бітовий оператор ^ (логічний XOR). ** та ^ відрізняються (наприклад: 2 ** 3 === 8, тоді як 2 ^ 3 === 1.)

+
+ +

Інкремент (++)

+ +

Оператор інкременту збільшує свій операнд (додає одиницю) та повертає його значення.

+ + + +

Синтаксис

+ +
Оператор: x++ або ++x
+
+ +

Приклади

+ +
// Постфіксний
+var x = 3;
+y = x++; // y = 3, x = 4
+
+// Префіксний
+var a = 2;
+b = ++a; // a = 3, b = 3
+
+ +

Декремент (--)

+ +

Оператор декременту зменшує свій операнд (віднімає одиницю) та повертає його значення.

+ + + +

Синтаксис

+ +
Оператор: x-- або --x
+
+ +

Приклади

+ +
// Постфіксний
+var x = 3;
+y = x--; // y = 3, x = 2
+
+// Префіксний
+var a = 2;
+b = --a; // a = 1, b = 1
+
+ +

Унарний мінус (-)

+ +

Унарний мінус ставиться перед своїм операндом та міняє його знак на протилежний.

+ +

Синтаксис

+ +
Оператор: -x
+
+ +

Приклади

+ +
var x = 3;
+y = -x; // y = -3, x = 3
+
+// Унарний мінус може перетворити нечислове значення на число
+var x = "4";
+y = -x; // y = -4
+
+ +

Унарний плюс (+)

+ +

Унарний плюс ставиться перед своїм операндом та повертає значення операнду, але намагається перетворити його на число, якщо він не є числом. Хоча унарний мінус (-) також вміє перетворювати нечислові значення, унарний плюс найшвидший та найкращий спосіб перетворити щось у число, тому що він не виконує ніяких інших операцій з числом. Він може перетворювати рядкові представлення цілих чисел та чисел з рухомою комою, а також нерядкові значення true, false та null. Підтримуються цілі числа у десятковому та шістнадцятковому форматах. Підтримуються від'ємні числа (хоча не у шістнадцятковому форматі). Якщо оператор не може розібрати певне значення, він поверне {{jsxref("NaN")}}.

+ +

Синтаксис

+ +
Оператор: +x
+
+ +

Приклади

+ +
+3     // 3
++'3'   // 3
++true  // 1
++false // 0
++null  // 0
++function(val){ return val } // NaN
+
+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ESDraft', '#sec-additive-operators')}}{{Spec2('ESDraft')}}
{{SpecName('ES2016', '#sec-postfix-expressions')}}{{Spec2('ES2016')}}Доданий Оператор піднесення до степеня.
{{SpecName('ES2017', '#sec-postfix-expressions')}}{{Spec2('ES2017')}}
{{SpecName('ES2015', '#sec-postfix-expressions')}}{{Spec2('ES2015')}}Визначені у кількох розділах специфікації: Адитивні оператори, мультиплікативні оператори, постфіксні вирази, унарні оператори.
{{SpecName('ES5.1', '#sec-11.3')}}{{Spec2('ES5.1')}}Визначені у кількох розділах специфікації: Адитивні оператори, мультиплікативні оператори, постфіксні вирази, унарні оператори.
{{SpecName('ES1')}}{{Spec2('ES1')}}Початкове визначення.
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.arithmetic")}}

+ +

Див. також

+ + diff --git a/files/uk/conflicting/web/javascript/reference/operators/spread_syntax/index.html b/files/uk/conflicting/web/javascript/reference/operators/spread_syntax/index.html new file mode 100644 index 0000000000..4e635569ae --- /dev/null +++ b/files/uk/conflicting/web/javascript/reference/operators/spread_syntax/index.html @@ -0,0 +1,283 @@ +--- +title: Оператор розпакування +slug: Web/JavaScript/Reference/Operators/Оператор_розпакування +tags: + - Iterator + - JavaScript + - Operator + - Ітератор + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Spread_syntax +translation_of_original: Web/JavaScript/Reference/Operators/Spread_operator +--- +
{{jsSidebar("Operators")}}
+ +

Оператор розпакування дозволяє розкласти колекцію в місця, де потрібні нуль чи декілька аргументів (як от виклики функцій), або декілька елементів (масиви), чи декілька змінних (деструктуризаційне присвоєння). Також можна розкласти об’єкт у місця де потрібні нуль чи більше пар ключ-значення (для оголошення об’єктів).

+ +

Синтаксис

+ +

Для виклику функцій:

+ +
myFunction(...iterableObj);
+
+ +

Для масивів:

+ +
[...iterableObj, 4, 5, 6];
+ +

Для об’єктів (нове в ECMAScript; чернетка в 3-ій стадії):

+ +
let objClone = { ...obj };
+ +

Приклади

+ +

Розпакування у викликах функції

+ +

Заміна apply

+ +

Приклад: {{jsxref( "Function.prototype.apply")}} прийнято використовувати у випадках, коли потрібно застосувати елементи масиву як аргументи функції.

+ +
function myFunction(x, y, z) { }
+var args = [0, 1, 2];
+myFunction.apply(null, args);
+ +

З розпакуванням тепер отак:

+ +
function myFunction(x, y, z) { }
+var args = [0, 1, 2];
+myFunction(...args);
+ +

Оператор розпакування може бути застосований до будь-якого аргументу та може бути застосований кілька разів.

+ +
function myFunction(v, w, x, y, z) { }
+var args = [0, 1];
+myFunction(-1, ...args, 2, ...[3]);
+ +

Apply для new

+ +

Викликаючи конструктор з new, неможливо напряму використовувати на ньому apply (apply робить [[Call]], а не [[Construct]]). Проте з оператором розпакування можна легко розкладати масив у аргументи конструктора:

+ +
var dateFields = [1970, 0, 1]; // 1 Січ 1970
+// var d = new Date.apply(dateFields) не спрацює. Викине TypeError
+var d = new Date(...dateFields); // вуаля
+ +

Розпакування в масивах

+ +

Ліпше оголошення масивів

+ +

Без розпакування, коли потрібно створити новий масив так, щоб якийсь існуючий був його частиною, старого синтаксису оголошення масиву не достатньо та необхідно використовувати комбінацію методів push, splice, concat, тощо. З оператором розпакування це стає значно лаконічніше:

+ +
var parts = ['shoulders', 'knees'];
+var lyrics = ['head', ...parts, 'and', 'toes'];
+// ["head", "shoulders", "knees", "and", "toes"]
+ +

Як і з розпакуванням списку аргументів, ... можна використовувати будь-де в оголошенні масиву та будь-яку кількість разів.

+ +

Копіювання масиву

+ +
var arr = [1, 2, 3];
+var arr2 = [...arr]; // так само як arr.slice()
+arr2.push(4);
+
+// arr2 стає [1, 2, 3, 4]
+// arr залишається незміненим
+ +

Зауваження: оператор розпакування при копіюванні масиву йде лише на один рівень вглиб. Таким чином він не придатний для копіювання багатовимірних масивів, що видно з наступного прикладу (те саме з {{jsxref("Object.assign()")}} та розпакуванням об’єктів).

+ +
var a = [[1], [2], [3]];
+var b = [...a];
+b.shift().shift(); // 1
+// Тепер масив a також змінено: [[], [2], [3]]
+ +

Ліпше злиття масивів

+ +

{{jsxref("Array.concat")}} часто використовується, щоб додати один масив у кінець іншого. Без розпакування це робиться так:

+ +
var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+// Доддати всі елементи з arr2 в arr1
+arr1 = arr1.concat(arr2);
+ +

З розпакуванням це стає:

+ +
var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+arr1 = [...arr1, ...arr2];
+ +

{{jsxref("Array.unshift")}} часто використовується для того, щоб вставити значення з одного масиву в початок іншого. Без розпакування це робиться так:

+ +
var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+// Вставити всі елементи з arr2 в початок arr1
+Array.prototype.unshift.apply(arr1, arr2) // arr1 тепер [3, 4, 5, 0, 1, 2]
+ +

З розпакуванням це стає:

+ +
var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+arr1 = [...arr2, ...arr1]; // arr1 тепер [3, 4, 5, 0, 1, 2]
+ +

Розпакування об’єктів

+ +

Пропозиція Rest/Spread Properties for ECMAScript (стадія 3) додає розпакування до об’єктів. It copies own enumerable properties from a provided object onto a new object.

+ +

Однорівневе клонування (без прототипу) чи злиття об’єктів тепер можливе використовуючи коротший запис ніж {{jsxref("Object.assign()")}}.

+ +
var obj1 = { foo: 'bar', x: 42 };
+var obj2 = { foo: 'baz', y: 13 };
+
+var clonedObj = { ...obj1 };
+// Object { foo: "bar", x: 42 }
+
+var mergedObj = { ...obj1, ...obj2 };
+// Object { foo: "baz", x: 42, y: 13 }
+ +

Зауваж, що {{jsxref("Object.assign()")}} викликає сетери, а оператор розпакування - ні.

+ +

Лише для ітерованих

+ +

Розпакування може бути застосоване лише для ітерованик об’єктів:

+ +
var obj = {'key1': 'value1'};
+var array = [...obj]; // TypeError: obj is not iterable
+ +

Зауваження: наразі (липень 2017) можна говорити про появу розпакування об’єктів у специфікації (дивись попередній підзаголовок). Але ще не до кінця зрозуміло як працюватиме вищенаведений приклад, адже ще немає конкретного рішення щодо цього у спецефікації. Тобто тепер ти можеш розпакувати об’єкт в об’єкт, але не зрозуміло, що станеться, якщо об’єкт розпаковувати у масив і навпаки, масив у об’єкт. Наприклад транспілятор babel вертає наступні результати:

+ +
var obj = {'key1': 'value1'};
+var array = [...obj]; // запише в array пустий масив []
+
+var arr = [1,1,1];
+var obj1 = {...arr}; // запише в obj1 {'0': 1, '1': 1, '2': 1}
+ +

Розпакування великих колекцій

+ +

Використовуючи розпакування зважай на можливість досягнення ліміту аргументів, встановленого у JavaScript рушії, адже оператор розпакування витягує всі елементи колекції в стек, скільки б їх не було. Дивись apply() щоб дізнатись більше.

+ +

Оператор решти

+ +

Оператор решти виглядає точно так само як і оператор розпакування. До певної міри, він протилежний оператору розпакування - оператор розпакування розкладає колекцію на елементи, а оператор решти, натомість, складає кілька елементів у колекцію. Дивись решта параметрів.

+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтанКоментар
{{SpecName('ES2015', '#sec-array-initializer')}}{{Spec2('ES2015')}}Визначено в деяких секціях специфікацій: Array Initializer, Argument Lists
{{SpecName('ESDraft', '#sec-array-initializer')}}{{Spec2('ESDraft')}}Без змін.
Rest/Spread Properties for ECMAScriptЧернеткаЧернетка в 3 стадії
+ +

Сумісність з браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Spread operation in array literals{{CompatChrome("46")}}{{ CompatGeckoDesktop("16") }}{{CompatIE("Edge/10240")}}{{CompatNo}}7.1
Spread operation in function calls{{CompatChrome("46")}}{{ CompatGeckoDesktop("27") }}{{CompatIE("Edge/10240")}}{{CompatNo}}7.1
Spread operation in destructuring{{CompatChrome("49")}}{{ CompatGeckoDesktop("34") }}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Spread operation in array literals{{CompatNo}}{{CompatChrome("46")}}{{ CompatGeckoMobile("16") }}{{CompatNo}}{{CompatNo}}8{{CompatChrome("46")}}
Spread operation in function calls{{CompatNo}}{{CompatChrome("46")}}{{ CompatGeckoMobile("27") }}{{CompatNo}}{{CompatNo}}8{{CompatChrome("46")}}
Spread operation in destructuring{{CompatNo}}{{CompatNo}}{{ CompatGeckoDesktop("34") }}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
+
+ +

See also

+ + diff --git a/files/uk/conflicting/web/javascript/reference/operators_1cd48548c16282df3883f99267726c3e/index.html b/files/uk/conflicting/web/javascript/reference/operators_1cd48548c16282df3883f99267726c3e/index.html new file mode 100644 index 0000000000..6c056272a1 --- /dev/null +++ b/files/uk/conflicting/web/javascript/reference/operators_1cd48548c16282df3883f99267726c3e/index.html @@ -0,0 +1,419 @@ +--- +title: Оператори присвоєння +slug: Web/JavaScript/Reference/Operators/Оператори_присвоєння +tags: + - JavaScript + - Оператор +translation_of: Web/JavaScript/Reference/Operators#Assignment_operators +translation_of_original: Web/JavaScript/Reference/Operators/Assignment_Operators +--- +
{{jsSidebar("Operators")}}
+ +

Оператор присвоєння присвоює своєму лівому операнду значення, на підставі значення правого операнду.

+ +

{{EmbedInteractiveExample("pages/js/expressions-assignment.html")}}

+ + + +

Огляд

+ +

Базовим оператором присвоєння є оператор дорівнює (=), який присвоює значення свого правого операнда лівому операнду. Таким чином, x = y присвоює змінній x значення змінної y. Інші оператори присвоєння у своїй більшості є скороченнями для стандарних операцій, як це вказано у наступній таблиці з визначеннями та прикладами.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
НазваОператор скороченого записуЗначення
Присвоєнняx = yx = y
Присвоєння з додаваннямx += yx = x + y
Присвоєння з відніманнямx -= yx = x - y
Присвоєння з множеннямx *= yx = x * y
Присвоєння з діленнямx /= yx = x / y
Присвоєння остачіx %= yx = x % y
Присвоєння з піднесенням до степеняx **= yx = x ** y
Присвоєння з лівим зсувомx <<= yx = x << y
Присвоєння з правим зсувомx >>= yx = x >> y
Присвоєння з беззнаковим правим зсувомx >>>= yx = x >>> y
Присвоєння з побітовим Іx &= yx = x & y
Присвоєння з виключним побітовим АБОx ^= yx = x ^ y
Присвоєння з побітовим АБОx |= yx = x | y
+ +

Присвоєння

+ +

Простий оператор присвоєння використовується для присвоєння змінній значення. Оператор присвоєння обчислює значення, що присвоюється. Можна використовувати ланцюжок присвоюваннь, щоб присвоїти одне значення декільком змінним. Дивіться приклад нижче.

+ +

Синтаксис

+ +
Оператор: x = y
+
+ +

Приклади

+ +
// Розглянемо такі змінні:
+//  x = 5
+//  y = 10
+//  z = 25
+
+x = y     // x дорівнює 10
+x = y = z // x, y та z усі дорівнюють 25
+
+ +

Присвоєння з додаванням

+ +

Оператор присвоєння з додаванням додає значення правого операнду до змінної (лівого перанду) та записує у неї отриманий результат. Типи двох операндів визначають поведінку оператора. Таким чином, його результатом може стати або додавання або конкатенація. Для більш детального огляду дивіться {{jsxref("Operators/Arithmetic_Operators", "оператор додавання", "#Addition", 1)}}.

+ +

Синтаксис

+ +
Оператор:  x += y
+Значення:  x  = x + y
+
+ +

Приклади

+ +
// Розглянемо такі змінні:
+//  foo = 'foo'
+//  bar = 5
+//  baz = true
+
+
+// число + число -> додавання
+bar += 2 // 7
+
+// булеве значення + число -> додавання
+baz += 1 // 2
+
+// булеве значення + булеве значення -> додавання
+baz += false // 1
+
+// число + рядок -> конкатенація
+bar += 'foo' // "5foo"
+
+// рядок + булеве значення -> конкатенація
+foo += false // "foofalse"
+
+// рядок + рядок -> конкатенація
+foo += 'bar' // "foobar"
+
+ +

Присвоєння з відніманням

+ +

Оператор присвоєння з відніманням віднімає значення правого операнду від змінної (лівого перанду) та записує у неї отриманий результат. Дивіться {{jsxref("Operators/Arithmetic_Operators", "оператор віднімання", "#Subtraction", 1)}} для більш детального огляду.

+ +

Синтаксис

+ +
Оператор:  x -= y
+Значення:  x  = x - y
+
+ +

Приклади

+ +
// Розглянемо такі змінні:
+//  bar = 5
+
+bar -= 2     // 3
+bar -= 'foo' // NaN
+
+ +

Присвоєння з множенням

+ +

Оператор присвоєння з множенням помножує змінну (лівий операнд) на значення правого операнду та записує отриманий результат у змінну. Дивіться {{jsxref("Operators/Arithmetic_Operators", "оператор множення", "#Multiplication", 1)}} для більш детального огляду.

+ +

Синтаксис

+ +
Оператор:  x *= y
+Значення:  x  = x * y
+
+ +

Приклади

+ +
// Розглянемо такі змінні:
+//  bar = 5
+
+bar *= 2     // 10
+bar *= 'foo' // NaN
+
+ +

Присвоєння з діленням

+ +

Оператор присвоєння з діленням ділить змінну (лівий операнд) на значення правого операнду та записує отриманий результат у змінну. Дивіться {{jsxref("Operators/Arithmetic_Operators", "оператор ділення", "#Division", 1)}} для більш детального огляду.

+ +

Синтаксис

+ +
Оператор:  x /= y
+Значення:  x  = x / y
+
+ +

Приклади

+ +
// Розглянемо такі змінні:
+//  bar = 5
+
+bar /= 2     // 2.5
+bar /= 'foo' // NaN
+bar /= 0     // Infinity
+
+ +

Присвоєння остачі

+ +

Оператор присвоєння остачі ділить змінну на значення правого операнду та присвоює остачу змінній. Дивіться {{jsxref("Operators/Arithmetic_Operators", "оператор остачі", "#Remainder", 1)}} для більш детального огляду.

+ +

Синтаксис

+ +
Оператор:  x %= y
+Значення:  x  = x % y
+
+ +

Приклади

+ +
// Розглянемо такі змінні:
+//  bar = 5
+
+bar %= 2     // 1
+bar %= 'foo' // NaN
+bar %= 0     // NaN
+
+ +

Присвоєння з піднесенням до степеня

+ +

Оператор присвоєння з піднесенням до степеня обчислює результат піднесення першого операнду до показника степеня другого операнду. Дивіться {{jsxref("Operators/Arithmetic_Operators", "оператор піднесення до степеня", "#Exponentiation", 1)}} для більш детального огляду.

+ +

Синтаксис

+ +
Оператор:  x **= y
+Значення:  x  = x ** y
+
+ +

Приклади

+ +
// Розглянемо такі змінні:
+//  bar = 5
+
+bar **= 2     // 25
+bar **= 'foo' // NaN
+ +

Присвоєння з лівим зсувом

+ +

Оператор присвоєння з лівим зсувом виконує зсув першого операнду на вказану кількість бітів ліворуч та присвоює результат у змінну. Дивіться {{jsxref("Operators/Bitwise_Operators", "оператор лівого зсуву", "#Left_shift", 1)}} для більш детального огляду.

+ +

Синтаксис

+ +
Оператор:  x <<= y
+Значення:  x   = x << y
+
+ +

Приклади

+ +
var bar = 5; //  (00000000000000000000000000000101)
+bar <<= 2; // 20 (00000000000000000000000000010100)
+
+ +

Присвоєння з правим зсувом

+ +

Оператор присвоєння з правим зсувом виконує зсув першого операнду на вказану кількість бітів праворуч та присвоює результат у змінну. Дивіться {{jsxref("Operators/Bitwise_Operators", "оператор правого зсуву", "#Right_shift", 1)}} для більш детального огляду.

+ +

Синтаксис

+ +
Оператор:  x >>= y
+Значення:  x   = x >> y
+
+ +

Приклади

+ +
var bar = 5; //   (00000000000000000000000000000101)
+bar >>= 2;   // 1 (00000000000000000000000000000001)
+
+var bar -5; //    (-00000000000000000000000000000101)
+bar >>= 2;  // -2 (-00000000000000000000000000000010)
+
+ +

Присвоєння з беззнаковим правим зсувом

+ +

Оператор присвоєння з беззнаковим правим зсувом виконує зсув першого операнду на вказану кількість бітів праворуч та присвоює результат змінній. Дивіться {{jsxref("Operators/Bitwise_Operators", " оператор беззнакового правого зсуву", "#Unsigned_right_shift", 1)}} для більш детального огляду.

+ +

Синтаксис

+ +
Оператор:  x >>>= y
+Значення:  x    = x >>> y
+
+ +

Приклади

+ +
var bar = 5; //   (00000000000000000000000000000101)
+bar >>>= 2;  // 1 (00000000000000000000000000000001)
+
+var bar = -5; // (-00000000000000000000000000000101)
+bar >>>= 2; // 1073741822 (00111111111111111111111111111110)
+ +

Присвоєння з побітовим І

+ +

Оператор присвоєння з побітовим І використовує двійкове представлення обох операндів, виконує над ними операцію побітового І та присвоює результат змінній. Дивіться {{jsxref("Operators/Bitwise_Operators", "оператор побітового І", "#Bitwise_AND", 1)}} для більш детального огляду.

+ +

Синтаксис

+ +
Оператор:  x &= y
+Значення:  x  = x & y
+
+ +

Приклади

+ +
var bar = 5;
+// 5:     00000000000000000000000000000101
+// 2:     00000000000000000000000000000010
+bar &= 2; // 0
+
+ +

Присвоєння з виключним побітовим АБО

+ +

Оператор присвоєння з виключним побітовим АБО використовує двійкове представлення обох операндів, виконує над ними операцію виключного побітового АБО (XOR) та присвоює результат змінній. Дивіться {{jsxref("Operators/Bitwise_Operators", "оператор виключного побітового АБО", "#Bitwise_XOR", 1)}} для більш детального огляду.

+ +

Синтаксис

+ +
Оператор:  x ^= y
+Значення:  x  = x ^ y
+
+ +

Приклади

+ +
var bar = 5;
+bar ^= 2; // 7
+// 5: 00000000000000000000000000000101
+// 2: 00000000000000000000000000000010
+// -----------------------------------
+// 7: 00000000000000000000000000000111
+
+ +

Присвоєння з побітовим АБО

+ +

Оператор присвоєння з побітовим АБО використовує двійкове представлення обох операндів, виконує над ними операцію побітового АБО та присвоює результат змінній. Дивіться {{jsxref("Operators/Bitwise_Operators", "оператор побітового АБО", "#Bitwise_OR", 1)}} для більш детального огляду.

+ +

Синтаксис

+ +
Оператор:  x |= y
+Значення:  x  = x | y
+
+ +

Приклади

+ +
var bar = 5;
+bar |= 2; // 7
+// 5: 00000000000000000000000000000101
+// 2: 00000000000000000000000000000010
+// -----------------------------------
+// 7: 00000000000000000000000000000111
+
+ +

Приклади

+ +

Лівий операнд з іншим оператором присвоєння

+ +

У незвичних ситуаціях оператор присвоєння (наприклад,  x += y) не є ідентичним виразу, який він означає (в даному випадку x = x + y). Коли лівий операнд оператора присвоєння сам містить оператор присвоєння, лівий операнд обчислюється лише один раз. Наприклад:

+ +
a[i++] += 5         // i обчислюється лише один раз
+a[i++] = a[i++] + 5 // i обчислюється двічі
+
+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}{{Spec2('ESDraft')}}
{{SpecName('ES2015', '#sec-assignment-operators', 'Assignment operators')}}{{Spec2('ES2015')}}
{{SpecName('ES5.1', '#sec-11.13', 'Assignment operators')}}{{Spec2('ES5.1')}}
{{SpecName('ES1', '#sec-11.13', 'Assignment operators')}}{{Spec2('ES1')}}Початкове визначення.
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.assignment")}}

+ +
+ +

Див. також

+ + diff --git a/files/uk/conflicting/web/javascript/reference/operators_7c8eb9475d97a4a734c5991857698560/index.html b/files/uk/conflicting/web/javascript/reference/operators_7c8eb9475d97a4a734c5991857698560/index.html new file mode 100644 index 0000000000..3107d5aa64 --- /dev/null +++ b/files/uk/conflicting/web/javascript/reference/operators_7c8eb9475d97a4a734c5991857698560/index.html @@ -0,0 +1,560 @@ +--- +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 +--- +
{{jsSidebar("Operators")}}
+ +

Бітові оператори опрацьовують свої операнди як послідовність 32-х бітів (нулів та одиниць), а не як десяткові, шістнадцяткові чи вісімкові числа. Наприклад, десяткове число дев'ять має бітове представлення 1001. Бітові оператори виконують операції над цими бітовими представленнями, але повертають стандартні числові значення JavaScript.

+ +
{{EmbedInteractiveExample("pages/js/expressions-bitwiseoperators.html")}}
+ + + +

Наступна таблиця наводить перелік бітових операторів JavaScript:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ОператорЗастосуванняОпис
Побітове І (AND)a & bПовертає 1 на кожній позиції, де відповідні біти обох операндів дорівнюють 1.
Побітове АБО (OR)a | bПовертає 1 на кожній позиції, де відповідні біти одного чи обох операндів дорівнюють 1.
Виключне побітове АБО (XOR)a ^ bПовертає 1 на кожній позиції, де відповідний біт одного з двох, але не обох, операндів дорівнює 1.
Побітове НЕ (NOT)~ aВиконує інверсію бітів операнду.
Лівий зсувa << bЗсуває a у двійковому представленні на b (< 32) бітів ліворуч, заповнюючи позиції справа нулями.
Правий зсув з розширенням знакуa >> bЗсуває a у двійковому представленні на b (< 32) бітів праворуч, відкидаючи зсунуті біти.
Правий зсув із заповненням нулямиa >>> b  Зсуває a у двійковому представленні на b (< 32) бітів праворуч, відкидаючи зсунуті біти та заповнюючи позиції зліва нулями.
+ +

32-бітні цілі числа зі знаком

+ +

Операнди усіх бітових операторів перетворюються на 32-бітні цілі числа зі знаком у форматі доповняльного коду, окрім оператора правого зсуву із заповненням нулями, який повертає беззнакове ціле 32-бітне число. Формат доповняльного коду означає, що від'ємний еквівалент числа (наприклад, 5 та -5) - це інвертовані біти числа (побітове НЕ, або обернений код числа) плюс один. Для прикладу, наступний код представляє ціле число 314:

+ +
00000000000000000000000100111010
+
+ +

Наступний код представляє ~314, тобто, обернений код числа 314:

+ +
11111111111111111111111011000101
+
+ +

Нарешті, наступний код представляє доповняльний код числа -314:

+ +
11111111111111111111111011000110
+
+ +

Доповняльний код гарантує, що лівий біт дорівнює 0, коли число є додатним, і 1, коли число є від'ємним. Тому він відомий як знаковий біт.

+ +

Число 0 є цілим числом, усі біти якого дорівнюють 0.

+ +
0 (основа 10) = 00000000000000000000000000000000 (основа 2)
+
+ +

Число -1 є цілим числом, усі біти якого дорівнюють 1.

+ +
-1 (основа 10) = 11111111111111111111111111111111 (основа 2)
+
+ +

Число -2147483648 (шістнадцяткове представлення: -0x80000000) є цілим числом, усі біти якого дорівнюють 0, окрім першого (старшого) біта.

+ +
-2147483648 (основа 10) = 10000000000000000000000000000000 (основа 2)
+
+ +

Число 2147483647 (шістнадцяткове представлення: 0x7fffffff) є цілим числом, усі біти якого дорівнюють 1, окрім першого (старшого) біта.

+ +
2147483647 (основа 10) = 01111111111111111111111111111111 (основа 2)
+
+ +

Числа -2147483648 та 2147483647 є мінімальним та максимальним цілими числами, які можуть бути представлені 32-бітним знаковим числом.

+ +

Побітові логічні оператори

+ +

Концептуально побітові логічні оператори працюють наступним чином:

+ + + +

& (Побітове І)

+ +

Виконує операцію І (AND) над кожною парою бітів. a І b дає 1 тільки якщо обидва, a та b, дорівнюють 1. Таблиця істинності для операції І наступна:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
aba AND b
000
010
100
111
+ +
.    9 (основа 10) = 00000000000000000000000000001001 (основа 2)
+    14 (основа 10) = 00000000000000000000000000001110 (основа 2)
+                   --------------------------------
+14 & 9 (основа 10) = 00000000000000000000000000001000 (основа 2) = 8 (основа 10)
+
+ +

Побітове І над будь-яким числом x та 0 дає 0.

+ +

| (Побітове АБО)

+ +

Виконує операцію АБО (OR) над кожною парою бітів. a АБО b дає 1, якщо або a, або b дорівнює 1. Таблиця істинності для операції АБО наступна:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
aba OR b
000
011
101
111
+ +
.    9 (основа 10) = 00000000000000000000000000001001 (основа 2)
+    14 (основа 10) = 00000000000000000000000000001110 (основа 2)
+                   --------------------------------
+14 | 9 (основа 10) = 00000000000000000000000000001111 (основа 2) = 15 (основа 10)
+
+ +

Побітове АБО над будь-яким числом x та 0 дає x.

+ +

^ (Виключне побітове АБО)

+ +

Виконує операцію виключного АБО (XOR) над кожною парою бітів. a викл. АБО b дає 1, якщо a та b є різними. Таблиця істинності для операції XOR наступна:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
aba XOR b
000
011
101
110
+ +
.    9 (основа 10) = 00000000000000000000000000001001 (основа 2)
+    14 (основа 10) = 00000000000000000000000000001110 (основа 2)
+                   --------------------------------
+14 ^ 9 (основа 10) = 00000000000000000000000000000111 (основа 2) = 7 (основа 10)
+
+ +

Виключне побітове АБО над будь-яким числом x та 0 дає x.

+ +

~ (Побітове НЕ)

+ +

Виконує операцію НЕ над кожним бітом. НЕ a повертає інвертоване значення (або обернений код) операнду a. Таблиця істинності для операції НЕ наступна:

+ + + + + + + + + + + + + + + + +
aNOT a
01
10
+ +
 9 (основа 10) = 00000000000000000000000000001001 (основа 2)
+               --------------------------------
+~9 (основа 10) = 11111111111111111111111111110110 (основа 2) = -10 (основа 10)
+
+ +

Побітове НЕ над будь-яким числом x дає -(x + 1). Наприклад, ~-5 дорівнює 4.

+ +

Зауважте, що через використання 32-бітного представлення чисел і ~-1, і ~4294967295 (232-1) повернуть 0.

+ +

Оператори бітового зсуву

+ +

Оператори бітового зсуву приймають два операнди: перший є величиною, в якій треба виконати зсув, а другий вказує кількість бітових позицій для зсуву. Напрямок операції зсуву контролюється застосованим оператором.

+ +

Оператори зсуву перетворюють свої операнди на 32-бітні цілі числа у порядку від старшого до молодшого байту та повертають результат того самого типу, до якого належить лівий операнд. Лише молодші п'ять бітів правого операнду будуть використані.

+ +

<< (Лівий зсув)

+ +

Цей оператор виконує зсув першого операнду на вказану кількість бітів ліворуч. Надлишкові біти, зсунуті ліворуч, відкидаються. Біти, додані справа, заповнюються нулями.

+ +

Наприклад, 9 << 2 дорівнює 36:

+ +
.    9 (основа 10): 00000000000000000000000000001001 (основа 2)
+                  --------------------------------
+9 << 2 (основа 10): 00000000000000000000000000100100 (основа 2) = 36 (основа 10)
+
+ +

Бітовий зсув будь-якого числа x ліворуч на y бітів дорівнює x * 2 ** y.
+ Отже, для прикладу: 9 << 3 можна перекласти як: 9 * (2 ** 3) = 9 * (8) = 72.

+ +

>> (Правий зсув з розширенням знаку)

+ +

Цей оператор виконує зсув першого операнду на вказану кількість бітів праворуч. Надлишкові біти, зсунуті праворуч, відкидаються. Біти, додані зліва, заповнюються значенням старшого біта. Оскільки новий старший біт матиме те саме значення, що й попередній старший біт, знаковий (старший) біт не змінюється. Звідси назва "з розширенням знаку".

+ +

Наприклад, 9 >> 2 дорівнює 2:

+ +
.    9 (основа 10): 00000000000000000000000000001001 (основа 2)
+                  --------------------------------
+9 >> 2 (основа 10): 00000000000000000000000000000010 (основа 2) = 2 (основа 10)
+
+ +

Аналогічно, -9 >> 2 дорівнює -3, оскільки знак зберігається:

+ +
.    -9 (основа 10): 11111111111111111111111111110111 (основа 2)
+                   --------------------------------
+-9 >> 2 (основа 10): 11111111111111111111111111111101 (основа 2) = -3 (основа 10)
+
+ +

>>> (Правий зсув із заповненням нулями)

+ +

Цей оператор виконує зсув першого операнду на вказану кількість бітів праворуч. Надлишкові біти, зсунуті праворуч, відкидаються. Біти, додані зліва, заповнюються нулями. Знаковий біт отримує значення 0, а отже, результат завжди невід'ємний. На відміну від інших бітових операторів, правий зсув із заповненням нулями повертає беззнакове ціле 32-бітне число.

+ +

Для невід'ємних чисел, правий зсув із заповненням нулями та правий зсув з розширенням знаку дають однаковий результат. Наприклад, 9 >>> 2 дорівнює 2, так само, як 9 >> 2:

+ +
.     9 (основа 10): 00000000000000000000000000001001 (основа 2)
+                   --------------------------------
+9 >>> 2 (основа 10): 00000000000000000000000000000010 (основа 2) = 2 (основа 10)
+
+ +

Однак, це не одне й те саме для від'ємних чисел. Наприклад, -9 >>> 2 поверне 1073741821, що відрізняється від -9 >> 2 (що дорівнює -3):

+ +
.     -9 (основа 10): 11111111111111111111111111110111 (основа 2)
+                    --------------------------------
+-9 >>> 2 (основа 10): 00111111111111111111111111111101 (основа 2) = 1073741821 (основа 10)
+
+ +

Приклади

+ +

Прапори та бітові маски

+ +

Побітові логічні оператори часто використовуються для створення, маніпулювання та читання послідовностей прапорів, які грають роль двійкових змінних. Замість цих послідовностей можуть використовуватись зміні, але двійкові прапори займають набагато менше пам'яті (у 32 рази).

+ +

Припустимо, є 4 прапори:

+ + + +

Ці прапори представлені послідовністю бітів: DCBA. Коли прапор встановлений, він має значення 1. Коли прапор очищений, він має значення 0. Припустимо, змінна flags має двійкове значення 0101:

+ +
var flags = 5;   // двійкове значення 0101
+
+ +

Це значення вказує:

+ + + +

Оскільки бітові операнди 32-бітні, 0101 насправді дорівнює 00000000000000000000000000000101, але нулями попереду можна знехтувати, оскільки вони не містять корисної інформації.

+ +

Бітова маска - це послідовність бітів, які можуть маніпулювати прапорами та/або читати їх. Зазвичай, визначається "примітивна" бітова маска для кожного прапора:

+ +
var FLAG_A = 1; // 0001
+var FLAG_B = 2; // 0010
+var FLAG_C = 4; // 0100
+var FLAG_D = 8; // 1000
+
+ +

Нові бітові маски можуть створюватись застовуванням побітових логічних операторів до цих примітивних бітових масок. Наприклад, бітова маска 1011 може бути створена операцією АБО з прапорів FLAG_A, FLAG_B та FLAG_D:

+ +
var mask = FLAG_A | FLAG_B | FLAG_D; // 0001 | 0010 | 1000 => 1011
+
+ +

Індивідуальні значення прапорів можна витягнути застосуванням операції І до них та бітової маски, де кожний біт, що має значення один, "витягне" відповідний прапор. Бітова маска маскує невідповідні прапори, об'єднуючи їх операцією І з нулями (звідси термін "бітова маска"). Наприклад, бітову маску 0100 можна використати, щоб побачити, чи встановлений прапор C:

+ +
// якщо ми маємо кота
+if (flags & FLAG_C) { // 0101 & 0100 => 0100 => true
+   // зробити щось
+}
+
+ +

Бітова маска з кількома встановленими прапорами діє як "або/або". Для прикладу, наступні два фрагменти еквівалентні:

+ +
// якщо ми маємо кажана або ми маємо кота
+// (0101 & 0010) || (0101 & 0100) => 0000 || 0100 => true
+if ((flags & FLAG_B) || (flags & FLAG_C)) {
+   // зробити щось
+}
+
+ +
// якщо ми маємо кажана або кота
+var mask = FLAG_B | FLAG_C; // 0010 | 0100 => 0110
+if (flags & mask) { // 0101 & 0110 => 0100 => true
+   // зробити щось
+}
+
+ +

Прапори можна встановити, об'єднавши їх операцією АБО з бітовою маскою, де кожний біт, що має значення один, встановить відповідний прапор, якщо прапор ще не встановлений. Наприклад, бітову маску 1100 можна використати, щоб встановити прапори C та D:

+ +
// так, ми маємо кота та качку
+var mask = FLAG_C | FLAG_D; // 0100 | 1000 => 1100
+flags |= mask;   // 0101 | 1100 => 1101
+
+ +

Прапори можна очистити, об'єднавши їх операцією І з бітовою маскою, де кожний біт, що має значення нуль, очистить відповідний прапор, якщо він ще не очищений. Ця бітова маска може бути створена застосуванням операції НЕ до примітивних бітових масок. Наприклад, бітову маску 1010 можна використати, щоб очистити прапори A та C:

+ +
// ні, ми не маємо проблеми з мурахами або кота
+var mask = ~(FLAG_A | FLAG_C); // ~0101 => 1010
+flags &= mask;   // 1101 & 1010 => 1000
+
+ +

Маску також можна створити за допомогою ~FLAG_A & ~FLAG_C (правило де Моргана):

+ +
// ні, ми не маємо проблеми з мурахами і ми не маємо кота
+var mask = ~FLAG_A & ~FLAG_C;
+flags &= mask;   // 1101 & 1010 => 1000
+
+ +

Прапори можна перемикати, об'єднуючи їх операцією виключне АБО з бітовою маскою, де кожний біт, що має значення один, переключить відповідний прапор. Наприклад, бітову маску 0110 можна використати, щоб переключити прапори B та C:

+ +
// якщо ми не мали кажана, тепер ми його маємо,
+// а якщо він в нас був, бувай, кажанчику
+// те саме для котів
+var mask = FLAG_B | FLAG_C;
+flags = flags ^ mask;   // 1100 ^ 0110 => 1010
+
+ +

Нарешті, усі прапори можна перевернути оператором НЕ:

+ +
// входимо у паралельний всесвіт...
+flags = ~flags;    // ~1010 => 0101
+
+ +

Перетворення типів

+ +

Перетворити двійковий рядок на десяткове число:

+ +
var sBinString = '1011';
+var nMyNumber = parseInt(sBinString, 2);
+alert(nMyNumber); // виводить 11, тобто 1011
+
+ +

Перетворити десяткове число на двійковий рядок:

+ +
var nMyNumber = 11;
+var sBinString = nMyNumber.toString(2);
+alert(sBinString); // виводить 1011, тобто 11
+
+ +

Автоматизація створення маски

+ +

Ви можете створювати маски з набору булевих значень наступним чином:

+ +
function createMask() {
+  var nMask = 0, nFlag = 0, nLen = arguments.length > 32 ? 32 : arguments.length;
+  for (nFlag; nFlag < nLen; nMask |= arguments[nFlag] << nFlag++);
+  return nMask;
+}
+var mask1 = createMask(true, true, false, true); // 11, тобто: 1011
+var mask2 = createMask(false, false, true); // 4, тобто: 0100
+var mask3 = createMask(true); // 1, тобто: 0001
+// і т.д.
+
+alert(mask1); // виводить 11, тобто: 1011
+
+ +

Зворотний алгоритм: отримання масиву булевих значень з маски

+ +

Якщо ви бажаєте створити масив булевих значень з маски, можете скористатись цим кодом:

+ +
function arrayFromMask(nMask) {
+  // Значенння nMask має бути між -2147483648 та 2147483647
+  if (nMask > 0x7fffffff || nMask < -0x80000000) {
+    throw new TypeError('arrayFromMask - out of range');
+  }
+  for (var nShifted = nMask, aFromMask = []; nShifted;
+       aFromMask.push(Boolean(nShifted & 1)), nShifted >>>= 1);
+  return aFromMask;
+}
+
+var array1 = arrayFromMask(11);
+var array2 = arrayFromMask(4);
+var array3 = arrayFromMask(1);
+
+alert('[' + array1.join(', ') + ']');
+// виводить "[true, true, false, true]", тобто: 11, тобто: 1011
+
+ +

Ви можете перевірити обидва алгоритми одночасно…

+ +
var nTest = 19; // наша користувацька маска
+var nResult = createMask.apply(this, arrayFromMask(nTest));
+
+alert(nResult); // 19
+
+ +

Суто з навчальною метою (оскільки існує метод Number.toString(2)) ми показуємо, як можна модифікувати алгоритм arrayFromMask для створення рядка, що містить двійкове представлення числа, а не масиву булевих значень:

+ +
function createBinaryString(nMask) {
+  // Значення nMask має бути між -2147483648 та 2147483647
+  for (var nFlag = 0, nShifted = nMask, sMask = ''; nFlag < 32;
+       nFlag++, sMask += String(nShifted >>> 31), nShifted <<= 1);
+  return sMask;
+}
+
+var string1 = createBinaryString(11);
+var string2 = createBinaryString(4);
+var string3 = createBinaryString(1);
+
+alert(string1);
+// виводить 00000000000000000000000000001011, тобто 11
+
+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES1')}}{{Spec2('ES1')}}Початкове визначення.
{{SpecName('ES5.1', '#sec-11.7')}}{{Spec2('ES5.1')}}Визначені у кількох розділах специфікації: Побітовий оператор НЕ, Бітові оператори зсуву, Двійкові побітові оператори
{{SpecName('ES6', '#sec-bitwise-shift-operators')}}{{Spec2('ES6')}}Визначені у кількох розділах специфікації: Побітовий оператор НЕ, Бітові оператори зсуву, Двійкові побітові оператори
{{SpecName('ESDraft', '#sec-bitwise-shift-operators')}}{{Spec2('ESDraft')}}Визначені у кількох розділах специфікації: Побітовий оператор НЕ, Бітові оператори зсуву, Двійкові побітові оператори
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.bitwise")}}

+ +

Див. також

+ + diff --git a/files/uk/conflicting/web/javascript/reference/operators_a8aa9ce42ce1749862961c61113d120b/index.html b/files/uk/conflicting/web/javascript/reference/operators_a8aa9ce42ce1749862961c61113d120b/index.html new file mode 100644 index 0000000000..9285c5dd5a --- /dev/null +++ b/files/uk/conflicting/web/javascript/reference/operators_a8aa9ce42ce1749862961c61113d120b/index.html @@ -0,0 +1,245 @@ +--- +title: Оператори порівняння +slug: Web/JavaScript/Reference/Operators/Оператори_порівняння +tags: + - JavaScript + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Operators +translation_of_original: Web/JavaScript/Reference/Operators/Comparison_Operators +--- +
{{jsSidebar("Operators")}}
+ +

JavaScript має як строге порівняння, так і порівняння з перетворенням типів. Строге порівняння (===) є істинним лише в тому випадку, якщо операнди мають однаковий тип, а їхній зміст співпадає. Найчастіше вживане абстрактне порівняння (==) приводить операнди до спільного типу перед виконанням порівняння. Для абстрактних порівнянь (наприклад, <=) операнди спочатку приводяться до простих типів, потім приводяться до спільного типу, а вже тоді порівнюються.

+ +

Рядки порівнюються на основі стандартного лексикографічного упорядкування, використовуючи значення Unicode.

+ +

{{EmbedInteractiveExample("pages/js/expressions-comparisonoperators.html")}}

+ + + +

Особливості порівнянь:

+ + + +

Оператори рівності

+ +

Рівність (==)

+ +

Оператор рівності перетворює операнди, якщо вони не однакового типу, і після цього застосовує строге порівняння. Якщо обидва операнди є об'єктами, JavaScript порівнює внутрішні посилання, які є рівними, якщо операнди посилаються на один і той самий об'єкт у пам'яті.

+ +

Синтаксис

+ +
x == y
+
+ +

Приклади

+ +
1    ==  1         // true
+'1'  ==  1         // true
+1    == '1'        // true
+0    == false      // true
+0    == null       // false
+var object1 = {'key': 'value'}, object2 = {'key': 'value'};
+object1.key == object2.key // true
+0    == undefined  // false
+null == undefined  // true
+
+ +

Нерівність (!=)

+ +

Оператор нерівності повертає true,  якщо операнди не є рівними. Якщо два операнда не належать до одного типу, JavaScript намагається привести операнди до відповідного типу для порівняння. Якщо обидва операнда є об'єктами, JavaScript порівнює внутрішні посилання, які є нерівними, якщо операнди посилаються на різні об'єкти у пам'яті.

+ +

Синтаксис

+ +
x != y
+ +

Приклади

+ +
1 !=   2     // true
+1 !=  '1'    // false
+1 !=  "1"    // false
+1 !=  true   // false
+0 !=  false  // false
+
+ +

Ідентичність / строга рівність (===)

+ +

Оператор ідентичності повертає true, якщо операнди строго рівні (див. вище) без приведення типів. 

+ +

Синтаксис

+ +
x === y
+ +

Приклади

+ +
3 === 3   // true
+3 === '3' // false
+var object1 = {'key': 'value'}, object2 = {'key': 'value'};
+object1 === object2 //false
+ +

Неідентичність / строга нерівність (!==)

+ +

Оператор неідентичності повертає true, якщо операнди не є рівними та/або не однакового типу.

+ +

Синтаксис

+ +
x !== y
+ +

Приклади

+ +
3 !== '3' // true
+4 !== 3   // true
+
+ +

Оператори відношення

+ +

Кожен з цих операторів буде примусово приведений до простої величини перед порівнянням. Якщо обидва перетворюються на рядки, вони порівнюються з використанням лексикографічного порядку, інакше вони будуть перетворені на числа для порівняння. Порівняння із NaN завжди поверне false.

+ +

Більше ніж (>)

+ +

Оператор більше ніж повертає true, якщо значення лівого операнда більше за значення правого операнда.

+ +

Синтаксис

+ +
x > y
+ +

Приклади

+ +
4 > 3 // true
+
+ +

Більше чи дорівнює (>=)

+ +

Оператор більше чи дорівнює повертає true, якщо значення лівого операнда більше, або дорівнює значенню правого операнда.

+ +

Синтаксис

+ +
 x >= y
+ +

Приклади

+ +
4 >= 3 // true
+3 >= 3 // true
+
+ +

Менше ніж (<)

+ +

Оператор менше ніж повертає true, якщо значення лівого операнда менше значення правого операнда.

+ +

Синтаксис

+ +
 x < y
+ +

Приклади

+ +
3 < 4 // true
+
+ +

Менше чи дорівнює (<=)

+ +

Оператор менше чи дорівнює повертає true, якщо значення лівого операнда менше або дорівнює значенню правого операнда.

+ +

Синтаксис

+ +
 x <= y
+ +

Приклади

+ +
3 <= 4 // true
+
+ +

Застосування операторів порівняння

+ +

Стандартні оператори рівності (== та !=) використовують алгоритм абстрактної рівності для порівняння двох операндів. Якщо операнди належать до різних типів, алгоритм спробує привести їх до спільного типу перед порівнянням; наприклад, у виразі 5 == '5', рядок праворуч буде приведений до {{jsxref("Число","числа")}} перед здійсненням порівняння.

+ +

Оператори строгої рівності (=== та !==) використовують алгоритм строгої рівності та призначені для виконання перевірки рівності операндів одного типу. Якщо операнди належать до різних типів, результат завжди буде false, тому 5 !== '5'.

+ +

Використовуйте оператори строгого порівняння, якщо операнди мають належати до вказаного типу, як і їх значення, або, якщо конкретний тип операндів має значення. Інакше, використовуйте стандартні оператори рівності, які дозволяють перевіряти ідентичність двох операндів, навіть якщо вони не належать до одного типу.

+ +

Коли в порівнянні застосовується перетворення типів (тобто, це не строге порівняння), JavaScript перетворює типи операндів {{jsxref ("String")}}, {{jsxref ("Число","Number")}}, {{jsxref ("Boolean" )}} або {{jsxref ("Object")}} наступним чином:

+ + + +
Заувага: Рядкові об'єкти є об'єктами типу Object, а не String! Об'єкти типу String використовуються рідко, а отже, наведені нижче результати можуть бути несподіваними:
+ +
// true, оскільки обидва операнди мають тип String (є рядковими примітивами):
+'foo' === 'foo'
+
+var a = new String('foo');
+var b = new String('foo');
+
+// false, оскільки a та b мають тип Object і посилаються на різні об'єкти
+a == b
+
+// false, оскільки a та b мають тип Object і посилаються на різні об'єкти
+a === b
+
+// true, оскільки a та 'foo' мають різні типи, але об'єкт (а)
+// перетворюється на рядок 'foo' перед порівнянням
+a == 'foo'
+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES1')}}{{Spec2('ES1')}}Початкове визначення. Реалізовано у JavaScript 1.0
{{SpecName('ES3')}}{{Spec2('ES3')}}Додані оператори === та !== . Реалізовано у JavaScript 1.3
{{SpecName('ES5.1', '#sec-11.8')}}{{Spec2('ES5.1')}}Дано визначення у декільках секціях специфікації: Оператори відношення, Оператори рівності
{{SpecName('ES6', '#sec-relational-operators')}}{{Spec2('ES6')}}Дано визначення у декільках секціях специфікації: Оператори відношення, Оператори рівності
{{SpecName('ESDraft', '#sec-relational-operators')}}{{Spec2('ESDraft')}}Дано визначення у декільках секціях специфікації: Оператори відношення, Оператори рівності
+ +

Підтримка веб-переглядачами

+ + + +

{{Compat("javascript.operators.comparison")}}

+ +

Див. також

+ + diff --git a/files/uk/conflicting/web/javascript/reference/operators_f71733c8e7001a29c3ec40d8522a4aca/index.html b/files/uk/conflicting/web/javascript/reference/operators_f71733c8e7001a29c3ec40d8522a4aca/index.html new file mode 100644 index 0000000000..ea1edb506a --- /dev/null +++ b/files/uk/conflicting/web/javascript/reference/operators_f71733c8e7001a29c3ec40d8522a4aca/index.html @@ -0,0 +1,253 @@ +--- +title: Логічні оператори +slug: Web/JavaScript/Reference/Operators/Logical_Operators +tags: + - JavaScript + - Оператор + - логічний +translation_of: Web/JavaScript/Reference/Operators +translation_of_original: Web/JavaScript/Reference/Operators/Logical_Operators +--- +
{{jsSidebar("Operators")}}
+ +

Логічні оператори зазвичай застосовуються до {{jsxref("Boolean", "булевих")}} (логічних) значень. В цьому випадку вони повертають значення типу Boolean. Однак, оператори && та || насправді повертають значення одного з заданих операндів, тому, якщо ці оператори використовуються зі значеннями не булевого типу, вони повернуть значення не булевого типу.

+ +
{{EmbedInteractiveExample("pages/js/expressions-logicaloperator.html")}}
+ + + +

Опис

+ +

Логічні оператори описані у наведеній нижче таблиці (вирази expr можуть належати до будь-якого типу, не лише булевого):

+ + + + + + + + + + + + + + + + + + + + + + + + +
ОператорСинтаксисОпис
Логічне І (&&)expr1 && expr2Якщо вираз expr1 може бути приведений до true, вертає expr2; інакше, вертає expr1.
Логічне АБО (||)expr1 || expr2Якщо вираз expr1 може бути приведений до true, вертає expr1; інакше, вертає expr2.
Логічне НЕ (!)!exprВертає false, якщо його єдиний операнд може бути приведений до true; інакше, вертає true.
+ +

Якщо значення може бути приведене до true, то воно називається {{Glossary("truthy","правдивим")}}. Якщо значення може бути приведене до false, воно називається {{Glossary("falsy","хибним")}}.

+ +

Приклади виразів, які можуть бути приведені до false:

+ + + +

Хоча оператори && та || можуть використовуватись з операндами не булевого (логічного) типу, вони все одно можуть вважатися логічними операторами, оскільки значення, які вони повертають, завжди можуть бути приведені до булевих примітивів. Щоб явно перетворити повернені значення (або, взагалі, будь-який вираз) до відповідного булевого значення, скористайтесь подвійним оператором НЕ або конструктором Boolean.

+ +

Коротке замикання обчислення

+ +

Оскільки логічні вирази обчислюються зліва направо, вони перевіряються на можливе "коротке замикання" обчислення за наступними правилами:

+ + + +

Коротке замикання означає, що наведені вирази expr не обчислюються, тому будь-які побічні ефекти від цього не відбудуться (наприклад, якщо expr є викликом функції, виклик не відбувається). Це відбувається тому, що значення оператора вже визначене після обчислення першого операнду. Дивіться приклад:

+ +
function A(){ console.log('викликано A'); return false; }
+function B(){ console.log('викликано B'); return true; }
+
+console.log( A() && B() );
+// виводить "викликано A" в результаті виклику функції,
+// потім виводить false (що є результатом виклику оператора)
+
+console.log( B() || A() );
+// виводить "викликано B" в результаті виклику функції,
+// потім виводить true (що є результатом виклику оператора)
+
+ +

Пріоритет операторів

+ +

Наступні вирази можуть виглядати еквівалентними, але це не так, оскільки оператор && виконується перед оператором || (дивіться Пріоритет операторів).

+ +
true || false && false      // вертає true, оскільки && виконується першим
+(true || false) && false    // вертає false, оскільки не можна застосувати пріоритет операторів
+ +

Логічне І (&&)

+ +

Наступний код наводить приклади оператора && (логічне І).

+ +
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 = 'Кіт' && 'Пес'      // t && t вертає "Пес"
+a6 = false && 'Кіт'      // f && t вертає false
+a7 = 'Кіт' && false      // t && f вертає false
+a8 = ''    && false      // f && f вертає ""
+a9 = false && ''         // f && f вертає false
+
+ +

Логічне АБО (||)

+ +

Наступний код наводить приклади оператора || (логічне АБО).

+ +
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 = 'Кіт' || 'Пес'      // t || t вертає "Кіт"
+o6 = false || 'Кіт'      // f || t вертає "Кіт"
+o7 = 'Кіт' || false      // t || f вертає "Кіт"
+o8 = ''    || false      // f || f вертає false
+o9 = false || ''         // f || f вертає ""
+o10 = false || varObject // f || object вертає varObject
+
+ +
+

Заувага: Якщо ви використовуєте цей оператор для присвоєння значення за замовчуванням якійсь змінній, пам'ятайте, що будь-яке хибне значення не буде використане. Якщо вам потрібно лише відфільтрувати {{jsxref("null")}} або {{jsxref("undefined")}}, розгляньте оператор null-об'єднання (однак, станом на листопад 2019 ця функціональність ще не була широко реалізована і має вважатися експериментальною, оскільки знаходиться на Стадії 3).

+
+ +

Логічне НЕ (!)

+ +

Наступний код демонструє приклади оператора ! (логічне НЕ).

+ +
n1 = !true               // !t вертає false
+n2 = !false              // !f вертає true
+n3 = !''                 // !f вертає true
+n4 = !'Cat'              // !t вертає false
+
+ +

Подвійне НЕ (!!)

+ +

Можна використовувати пару операторів НЕ поспіль, щоб явно викликати перетворення будь-якої величини на відповідний булевий примітив. Перетворення базується на "правдивості" або "хибності" значення (дивіться {{Glossary("truthy")}} та {{Glossary("falsy")}}).

+ +

Таке саме перетворення можна виконати функцією {{jsxref("Boolean")}}.

+ +
n1 = !!true                   // !!truthy вертає true
+n2 = !!{}                     // !!truthy вертає true: будь-який об'єкт є правдивим...
+n3 = !!(new Boolean(false))   // ...навіть об'єкти Boolean з false .valueOf()!
+n4 = !!false                  // !!falsy вертає false
+n5 = !!""                     // !!falsy вертає false
+n6 = !!Boolean(false)         // !!falsy вертає false
+
+ +

Правила перетворення для булевих значень

+ +

Перетворення І на АБО

+ +

Наступна операція з булевими значеннями:

+ +
умова1 && умова2
+ +

завжди дорівнює:

+ +
!(!умова1 || !умова2)
+ +

Перетворення АБО на І

+ +

Наступна операція з булевими значеннями:

+ +
умова1 || умова2
+ +

завжди дорівнює:

+ +
!(!умова1 && !умова2)
+ +

Перетворення НЕ

+ +

Наступна операція з булевими значеннями:

+ +
!!умова
+ +

завжди дорівнює:

+ +
умова
+ +

Прибирання вкладених дужок

+ +

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

+ +

Прибирання вкладеного І

+ +

Наступна складена операція з булевими значеннями:

+ +
умова1 || (умова2 && умова3)
+ +

завжди дорівнює:

+ +
умова1 || умова2 && умова3
+ +

Прибирання вкладеного АБО

+ +

Наступна складена операція з булевими значеннями:

+ +
умова1 && (умова2 || умова3)
+ +

завжди дорівнює:

+ +
!(!умова1 || !умова2 && !умова3)
+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES1')}}{{Spec2('ES1')}}Початкове визначення.
{{SpecName('ES5.1', '#sec-11.11')}}{{Spec2('ES5.1')}}Визначені у кількох розділах специфікації: Логічний оператор НЕ, Бінарні логічні оператори
{{SpecName('ES6', '#sec-binary-logical-operators')}}{{Spec2('ES6')}}Визначені у кількох розділах специфікації: Логічний оператор НЕ, Бінарні логічні оператори
{{SpecName('ESDraft', '#sec-binary-logical-operators')}}{{Spec2('ESDraft')}}Визначені у кількох розділах специфікації: Логічний оператор НЕ, Бінарні логічні оператори
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.operators.logical")}}

+ +

Див. також

+ + diff --git a/files/uk/conflicting/web/javascript/reference/statements/switch/index.html b/files/uk/conflicting/web/javascript/reference/statements/switch/index.html new file mode 100644 index 0000000000..c766150f22 --- /dev/null +++ b/files/uk/conflicting/web/javascript/reference/statements/switch/index.html @@ -0,0 +1,118 @@ +--- +title: default +slug: Web/JavaScript/Reference/Statements/default +translation_of: Web/JavaScript/Reference/Statements/switch +translation_of_original: Web/JavaScript/Reference/Statements/default +--- +
{{jsSidebar("Statements")}}
+ +

Ключове слово default може використовуватись у двох ситуаціях у JavaScript: у конструкції {{jsxref("Statements/switch", "switch")}} або з оператором {{jsxref("Statements/export", "export")}}.

+ +
{{EmbedInteractiveExample("pages/js/statement-default.html")}}
+ + + +

Синтаксис

+ +

У конструкції {{jsxref("Statements/switch", "switch")}}:

+ +
switch (expression) {
+  case value1:
+    //Інструкції, що виконуються, коли значення expression дорівнює value1
+    [break;]
+  default:
+    //Інструкції, що виконуються, коли жодне значення не дорівнює значенню expression
+    [break;]
+}
+ +

З оператором {{jsxref("Statements/export", "export")}}:

+ +
export default nameN
+ +

Опис

+ +

Більш детально дивіться на сторінках

+ + + +

Приклади

+ +

Використання default у конструкціях switch

+ +

У наступному прикладі, якщо expr оцінюється як "Апельсини" або "Яблука", програма зайде або у блок case "Апельсини", або у "Яблука" та виконає відповідну інструкцію. Ключове слово default допоможе у будь-якому іншому випадку та виконає пов'язану інструкцію.

+ +
switch (expr) {
+  case 'Апельсини':
+    console.log('Апельсини коштують $0.59 за кілограм.');
+    break;
+  case 'Яблука':
+    console.log('Яблука коштують $0.32 за кілограм.');
+    break;
+  default:
+    console.log('На жаль, в нас закінчились ' + expr + '.');
+}
+ +

Використання default з export

+ +

Якщо ви хочете експортувати єдине значення, або вам потрібне запасне значення модуля, можна використати default у export:

+ +
// module "my-module.js"
+let cube = function cube(x) {
+  return x * x * x;
+};
+export default cube;
+ +

Тоді у іншому скрипті буде прямий імпорт експорту за замовчуванням:

+ +
// module "another-module.js"
+import cube from 'my-module';  //default export gave us the liberty to say import cube, instead of import cube from 'my-module'
+console.log(cube(3)); // 27
+
+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES6', '#sec-switch-statement', 'switch statement')}}{{Spec2('ES6')}}
{{SpecName('ES6', '#sec-exports', 'Exports')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}{{Spec2('ESDraft')}}
{{SpecName('ESDraft', '#sec-exports', 'Exports')}}{{Spec2('ESDraft')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("javascript.statements.default")}}

+ +

Див. також

+ + diff --git a/files/uk/glossary/abstraction/index.html b/files/uk/glossary/abstraction/index.html new file mode 100644 index 0000000000..49517c4907 --- /dev/null +++ b/files/uk/glossary/abstraction/index.html @@ -0,0 +1,18 @@ +--- +title: Абстракція +slug: Glossary/Абстракція +tags: + - Абстракція + - Мова Програмування + - Словник +translation_of: Glossary/Abstraction +--- +

Абстрація у галузі {{Glossary("computer programming", "комп'ютерного програмування")}} є способом зменшення складності, що вможливлює підвищення ефективності розробки та втілення складних систем програмного забезпечення. Вона ховає технічну складність системи за простішими {{Glossary("API", "програмними інтерфейсами")}}.

+ +

Дізнатись більше

+ +

Загальні відомості

+ + diff --git a/files/uk/glossary/accessibility/index.html b/files/uk/glossary/accessibility/index.html new file mode 100644 index 0000000000..cbc90fead2 --- /dev/null +++ b/files/uk/glossary/accessibility/index.html @@ -0,0 +1,32 @@ +--- +title: Веб-доступність (Web Accessibility) +slug: Glossary/Веб_Доступність +tags: + - Доступність + - Словник +translation_of: Glossary/Accessibility +--- +

Веб-доступність, або Доступність веб-сайтів (Web Accesability, A11Y), відноситься до передового досвіду для використання веб-сайту, незважаючи на фізичні та технічні обмеження. Веб-доступність формально визначається й обговорюється на {{Glossary("W3C")}} з {{Glossary("WAI","Web Accessibility Initiative","Ініціатива веб-доступності")}} (WAI).

+ +

Дізнайтесь більше

+ +

Загальні поняття

+ + + +

Дізнайтесь про веб-доступність

+ + + +

Технічні посилання

+ + diff --git a/files/uk/glossary/algorithm/index.html b/files/uk/glossary/algorithm/index.html new file mode 100644 index 0000000000..6908966658 --- /dev/null +++ b/files/uk/glossary/algorithm/index.html @@ -0,0 +1,18 @@ +--- +title: Алгоритм +slug: Glossary/Алгоритм +tags: + - Словник +translation_of: Glossary/Algorithm +--- +

Алгоритм — це впорядкована послідовність дієвказів (інструкцій), що має на меті розв'язання певної задачі.

+ +

Зазвичай під цим поняттям мається на увазі саме стратегія розв'язання (алгоритм сортування, алгоритм пошуку). Натомість програмний код, що втілює ту чи ту стратегію, називають реалізацією алгоритму.

+ +

Дізнатись більше

+ +

Загальні відомості

+ + diff --git a/files/uk/glossary/argument/index.html b/files/uk/glossary/argument/index.html new file mode 100644 index 0000000000..1192ea1b6e --- /dev/null +++ b/files/uk/glossary/argument/index.html @@ -0,0 +1,27 @@ +--- +title: Арґумент +slug: Glossary/Арґумент +tags: + - JavaScript + - Словник +translation_of: Glossary/Argument +--- +

Арґумент — це своєрідний тип {{Glossary("Variable", "змінної")}}, що дозволяє передавати до {{Glossary("Function", "функції")}} ({{Glossary("Method", "метода")}}) необхідні {{Glossary("value", "значення")}}, {{Glossary("Scope", "область видимості")}} яких не виходитиме за її (функції) межі.

+ +

Поняття «арґумент» та «параметр» часто вживаються як взаємозамінні, а справжнє значення з'ясовується зі словесного оточення.

+ +

Втім слово параметр (чи то пак «формальний параметр») часто вживається на позначення змінних, наведених в самому оголошенні функції, а натомість слово арґумент (або ж «фактичний арґумент») частіше позначає {{Glossary("Primitive", "прості величини")}} або {{Glossary("Object", "об'єкти")}} які фактично було передано до функції під час її виклику.

+ +

Дізнатись більше

+ +

Загальні відомості

+ + + +

Технічна довідка

+ + diff --git a/files/uk/glossary/block/scripting/index.html b/files/uk/glossary/block/scripting/index.html new file mode 100644 index 0000000000..1a2a923252 --- /dev/null +++ b/files/uk/glossary/block/scripting/index.html @@ -0,0 +1,19 @@ +--- +title: Блок (Скриптинг) +slug: Glossary/Block/Скриптинг +tags: + - CodingScripting + - JavaScript + - Глосарій + - Словник +translation_of: Glossary/Block/Scripting +--- +

В {{glossary("JavaScript")}}, блок - це сукупність пов'язаних {{glossary("statement","інструкцій")}} що вкладені в фігурні дужки ("{}"). Наприклад, Ви можете помістити блок інструкцій після блоку  {{jsxref("Statements/if...else","if (condition)")}}, щоб інтепритатор виконав код в середині блоку, якщо умова правдива (true), або пропустив цілий клок, якщо умова хибна (false).

+ +

Дізнатись більше

+ +

Дізнайтеся про це

+ + diff --git "a/files/uk/glossary/block/\321\201\320\272\321\200\320\270\320\277\321\202\320\270\320\275\320\263/index.html" "b/files/uk/glossary/block/\321\201\320\272\321\200\320\270\320\277\321\202\320\270\320\275\320\263/index.html" deleted file mode 100644 index 1a2a923252..0000000000 --- "a/files/uk/glossary/block/\321\201\320\272\321\200\320\270\320\277\321\202\320\270\320\275\320\263/index.html" +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Блок (Скриптинг) -slug: Glossary/Block/Скриптинг -tags: - - CodingScripting - - JavaScript - - Глосарій - - Словник -translation_of: Glossary/Block/Scripting ---- -

В {{glossary("JavaScript")}}, блок - це сукупність пов'язаних {{glossary("statement","інструкцій")}} що вкладені в фігурні дужки ("{}"). Наприклад, Ви можете помістити блок інструкцій після блоку  {{jsxref("Statements/if...else","if (condition)")}}, щоб інтепритатор виконав код в середині блоку, якщо умова правдива (true), або пропустив цілий клок, якщо умова хибна (false).

- -

Дізнатись більше

- -

Дізнайтеся про це

- - diff --git a/files/uk/glossary/buffer/index.html b/files/uk/glossary/buffer/index.html new file mode 100644 index 0000000000..cba52b5844 --- /dev/null +++ b/files/uk/glossary/buffer/index.html @@ -0,0 +1,33 @@ +--- +title: Буфер +slug: Glossary/Буфер +tags: + - Буфер + - Кеш + - Словник +translation_of: Glossary/buffer +--- +

Буфер — це ділянка фізичної пам'яті (зазвичай, оперативної), що використовується для тимчасового зберігання даних на час їх передачі з одного місця (носія) в інше.

+ +

Попри те, що поняття буфер і кеш певною мірою схожі, їх призначення істотно відрізняється. Кеш передбачає пришвидшення обчислень завдяки розміщенню у швидкій пам'яті даних, над якими здіснюються повторювані операції (читання або запис). Натомість буфер використовується в дещо інший спосіб й може стати в нагоді навіть тоді, коли треба здійснити лише одну операцію читання/запису:

+ + + +

Дізнатись більше

+ +

Загальні відомості

+ + diff --git a/files/uk/glossary/cipher/index.html b/files/uk/glossary/cipher/index.html new file mode 100644 index 0000000000..b86fe31272 --- /dev/null +++ b/files/uk/glossary/cipher/index.html @@ -0,0 +1,33 @@ +--- +title: Шифр +slug: Glossary/Шифр +tags: + - Безпека + - Криптографія + - Приватність + - Словник +translation_of: Glossary/Cipher +--- +

В {{glossary("Криптографія","криптографії")}}, шифр це алгоритм, що спроможний {{glossary("encryption", "шифрувати")}} {{glossary("cleartext","відкритий текст")}} і зробити його нечитабельним, та {{glossary("decryption", "дешифрувати")}} його назад.

+ +

Шифри набули широкої росповсюдженості ще до інформаційної ери (наприклад, шифри підстановки, шифри транспозиції та шифри перестановки), але жоден з них не був криптографічно безпечним, окрім Шифра Вернама.

+ +

Сучасні шифри спроектовані щоб протистояти {{glossary("attack", "атакам")}} розробленим {{glossary("cryptanalysis", "криптоаналітиками")}}. Немає гарантій, що всі методи атак були відкриті, але кожен алгоритм заточений під відомі класи атак.

+ +

Шифри працюють двома шляхами: блочні шифри на послідовних блоках чи буферах дати, та потокові шифри на потоці даних, що є безперервним (часто це потоки звуку чи відеo).

+ +

Також існує класифікація за методами обробки їх {{glossary("key", "ключів")}}:

+ + + +

Довідатись більше

+ +

Загальні поняття

+ + diff --git a/files/uk/glossary/ciphertext/index.html b/files/uk/glossary/ciphertext/index.html new file mode 100644 index 0000000000..8e2561d57c --- /dev/null +++ b/files/uk/glossary/ciphertext/index.html @@ -0,0 +1,19 @@ +--- +title: Шифротекст +slug: Glossary/Шифротекст +tags: + - Безпека + - Криптографія + - Приватність + - Словник +translation_of: Glossary/Ciphertext +--- +

В {{glossary("Криптографія","криптографії")}}, шифротекст це зашифроване повідомлення, що передає інформацію, але воно є нерозбірливим до процесу {{glossary("decryption","дешифрування")}} правильно підібраним {{glossary("Шифр","шифром")}} і правильним секретом (зазвичай це {{glossary("key","ключ")}}), що дасть змогу відтворити оригінальний {{glossary("cleartext","відкритий текст")}}. Рівень захищеності шифротексту і секретність вміщеної інформації залежать від використання безпечного шифру та зберігання ключа в таємниці.

+ +

Довідатись більше

+ +

Загальні поняття

+ + diff --git a/files/uk/glossary/closure/index.html b/files/uk/glossary/closure/index.html new file mode 100644 index 0000000000..78ec73f7f8 --- /dev/null +++ b/files/uk/glossary/closure/index.html @@ -0,0 +1,46 @@ +--- +title: Замикання +slug: Glossary/Замикання +tags: + - JavaScript + - Словник +translation_of: Glossary/Closure +--- +

Замикання (англ. closure) — це певний різновид сполучення між {{glossary("scope", "областями видимості")}}, що уможливлює доступ до місцевих (локальних) змінних зовнішнього середовища виконання з новоствореного внутрішнього середовища. У {{glossary("JavaScript")}} всяка {{glossary("function", "функція")}} створює замикання.

+ +

Приклади

+ +

В наступному прикладі наведено безіменну функцію, що має доступ до місцевих змінних зовнішньої функції, що її створила:

+ +
function createSequenceGenerator(begin = 0) {
+  var value = begin;
+
+  return function() {
+    return value++;
+  };
+}
+ +

Місцева змінна value доступна зсередини безіменної функції навіть по завершенню виконання функції createSequenceGenerator, що її створила:

+ +
var seq1 = createSequenceGenerator();
+var seq2 = createSequenceGenerator(1000);
+
+console.log(seq1());  // виводить 0
+console.log(seq1());  // виводить 1
+console.log(seq2());  // виводить 1000
+console.log(seq2());  // виводить 1001
+console.log(seq1());  // виводить 2
+ +

Дізнатись більше

+ +

Загальні відомості

+ + + +

Технічна довідка

+ + diff --git a/files/uk/glossary/compile/index.html b/files/uk/glossary/compile/index.html new file mode 100644 index 0000000000..18cb2744e3 --- /dev/null +++ b/files/uk/glossary/compile/index.html @@ -0,0 +1,26 @@ +--- +title: Компіляція +slug: Glossary/Компіляція +translation_of: Glossary/Compile +--- +

Компіляція це процес перетворення комп'ютерної програми, написаної на {{Glossary("computer programming", "мові программування")}} у відповідний код на іншій мові програмування. Компілятор - це програмне забеспечення яке виконує це перетворення. Інколи цей процес називають "збирання" або "побудова", що як правило, означає бульше, ніж просто виконання компіляції, наприклад упакування його у двійковому форматі. 

+ +

Зазвичай компілятор перетворює мову високого рівня, таку як С чи  {{Glossary("Java")}}, яка зрозуміла людям, на машинну мову, таку як Ассемблер, яку розуміє процесор. Деякі компілятори перекладають на подібні за рівнем мови, їх називають транспайлер або крос-компілятор, наприклад компіляція з TypeScript на {{Glossary("JavaScript")}}. Це вважається інтрументами продуктивності.

+ +

Більшість компіляторів працюють або ahead-of-time (AOT) або just-in-time (JIT). Як програміст ти  зазвичай запускаєш компілятор з командного рядка або зі свого {{Glossary("IDE")}}. Як приклад, один з найпопулярніших "gcc".  JIT компілятор зазвичай виконується прозоро для вас.  Наприклад  браузер Firefox' SpiderMonkey JavaScript Engine має вбудований JIT компялітор, який перетворює JavaScript на сайті у машиний код під час перегляду, щоб він працював швидше. Такі проекти як  WebAssembly, працюють над тим щоб робити це ще краще.

+ +

Дізнатися більше

+ +

Загальна інформація

+ + + +

Посилання для вивчення

+ + diff --git a/files/uk/glossary/cryptanalysis/index.html b/files/uk/glossary/cryptanalysis/index.html new file mode 100644 index 0000000000..ed115fb471 --- /dev/null +++ b/files/uk/glossary/cryptanalysis/index.html @@ -0,0 +1,19 @@ +--- +title: Криптоаналіз +slug: Glossary/Криптоаналіз +tags: + - Безпека + - Криптографія + - Приватність + - Словник +translation_of: Glossary/Cryptanalysis +--- +

Криптоаналіз це галузь {{glossary("криптографія","криптографії")}}, що вивчає шляхи взлому кодів та криптосистем. Криптоаналіз створює техніки взлому {{glossary("cipher","шифру")}}, зокрема більш ефективними методами ніж метод "грубої сили". На додачу до традиціїних методів, як частотний аналіз та індекс збігів, криптоаналіз включає більш нові методи, такі як лінійний криптаналіз або диференціальний криптоаналіз, що можуть взламати прогресивніші шифри.

+ +

Довідатись більше

+ +

Загальні поняття

+ + diff --git a/files/uk/glossary/cryptographic_hash_function/index.html b/files/uk/glossary/cryptographic_hash_function/index.html new file mode 100644 index 0000000000..acba67d875 --- /dev/null +++ b/files/uk/glossary/cryptographic_hash_function/index.html @@ -0,0 +1,27 @@ +--- +title: Криптографічна геш-функція +slug: Glossary/Криптографічна_геш-функція +tags: + - Безпека + - Криптографія + - Словник +translation_of: Glossary/Cryptographic_hash_function +--- +

Криптографічна геш-функція, яка також іноді називається дайджест-функція, це одна з {{glossary("криптографія", "криптографічних")}} основ, на меті якої трансформація повідомлення довільного розміру в повідомлення фіксованого розміру, що називається {{glossary("digest","дайджест")}}. Криптографічні геш-функції використовуються для автентифікації, {{Glossary("digital signature", "цифрових підписів")}} та {{Glossary("HMAC", "кодів автентифікації повідомлень (МАС-підписів)")}}.

+ +

Щоб використовуватись у криптографії, геш-функція мусить мати такі якості:

+ + + +

Криптографічні геш-функції як MD5 і SHA-1 вважаються взломаними, бо знайшлись методи атак, що значно зменшили їх стійкість до суперечностей.

+ +

Довідатись більше

+ + diff --git a/files/uk/glossary/cryptography/index.html b/files/uk/glossary/cryptography/index.html new file mode 100644 index 0000000000..8d0ccaec9e --- /dev/null +++ b/files/uk/glossary/cryptography/index.html @@ -0,0 +1,22 @@ +--- +title: Криптографія +slug: Glossary/Криптографія +tags: + - Безпека + - Криптографія + - Приватність + - Словник +translation_of: Glossary/Cryptography +--- +

Криптографія (або криптологія) - це наука яка вивчає методи кодування і безпечної передачі повідомлень. Криптографія створює і вивчає алгоритми, що використовуються для шифрування і дешифрування повідомлень в незахищеному середовищі, і їх використання. Це не тільки конфіденційність даних, криптографія також вивчає ідентифікацію, аутентифікацію, невідмовність і цілісність даних. Тому вона також вивчає використання криптографічних методів в контексті, криптосистеми.

+ +

Довідатись більше

+ +

Загальні поняття

+ + diff --git a/files/uk/glossary/decryption/index.html b/files/uk/glossary/decryption/index.html new file mode 100644 index 0000000000..20cce95d6e --- /dev/null +++ b/files/uk/glossary/decryption/index.html @@ -0,0 +1,25 @@ +--- +title: Дешифрування +slug: Glossary/Дешифрування +tags: + - Безпека + - Криптографія + - Приватність + - Словник +translation_of: Glossary/Decryption +--- +

В {{glossary("Криптографія","криптографії")}}, дешифрування це трансформація {{glossary("Шифротекст","шифротексту")}} в {{glossary("cleartext","відкритий текст")}}.

+ +

Дешифрування це одна з криптографічних основ: цей процес перетворює повідомлення з шифротекстом в відкритий текст, використовуючи криптографічний алгоритм, що називається {{glossary("шифр")}}. Як і шифрування, дешифрування з використанням сучасних шифрів виконується за допомгою специфічних алгоритмів і секрету, який називають {{glossary("key","ключем")}}. Так як алгоритми часто є публічними, то ключ має зберігатись в таємниці, якщо шифрування має бути захищеним.

+ +

The decryption primitive.

+ +

Дешифрування це процес, протилежний процесу {{glossary("encryption","шифрування")}} і якщо ключ залишається в таємниці, то деширування без знання конкретного секрету є складним з математичної точки зору. Складність залежить від рівня захищеності обраного криптографічного алгоритму і розвивається разом з {{glossary("криптоаналіз","криптоаналізом")}}.

+ +

Довідатись більше

+ +

Teхнічна довідка

+ + diff --git a/files/uk/glossary/dtd/index.html b/files/uk/glossary/dtd/index.html deleted file mode 100644 index 2106fd19d6..0000000000 --- a/files/uk/glossary/dtd/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: DTD -slug: Glossary/DTD -tags: - - CodingScripting - - Глосарій -translation_of: Glossary/Doctype -translation_of_original: Glossary/DTD ---- -

{{page("/uk/docs/Glossary/Doctype")}}

diff --git a/files/uk/glossary/dynamic_programming_language/index.html b/files/uk/glossary/dynamic_programming_language/index.html new file mode 100644 index 0000000000..0417968273 --- /dev/null +++ b/files/uk/glossary/dynamic_programming_language/index.html @@ -0,0 +1,22 @@ +--- +title: Динамічна мова програмування +slug: Glossary/Динамічна_мова_програмування +tags: + - ДМП + - Динамічна мова програмування + - Словник +translation_of: Glossary/Dynamic_programming_language +--- +

 

+ +

Динамічна мова програмування, це мова програмування в якій операції, які в іншому разі обробляються в процесі компіляції, можуть здійснюватись в ході виконання коду. Наприклад, в JavaScript можливо змінювати тип змінної чи додавати нові властивості чи методи до об'єкта, коли програма запущена. 

+ +

Термін протиставляється, так званим, статичним мовам програмування, в яких такі зміни типово не можливі.

+ +

Learn more

+ +

General knowledge

+ + diff --git a/files/uk/glossary/function/index.html b/files/uk/glossary/function/index.html new file mode 100644 index 0000000000..b686ccc40c --- /dev/null +++ b/files/uk/glossary/function/index.html @@ -0,0 +1,89 @@ +--- +title: Функція +slug: Glossary/Функція +tags: + - IIFE + - JavaScript + - Словник + - Функція +translation_of: Glossary/Function +--- +

Функція - це фрагмент коду, що може бути викликаний іншим кодом чи сам собою, або {{Glossary("змінна")}} що відноситься до функцій. Коли функцію викликано, {{Glossary("арґументи")}} функція отримує як ввід, та може повертати вивід. Функції у {{glossary("JavaScript")}} це також {{glossary("Object","об'єкти")}}.

+ +

Ім'я функції це {{Glossary("identifier","ідентифікатор")}} оголошений як частина оголошення функції чи виразу функції. {{Glossary("scope", "Область видимості")}} залежить від того, є функція оголошеною чи описаною.

+ +

Різні види функцій

+ +

Анонімна функція, це функція без імені функції:

+ +
function () {};
+// або використовуючи ECMAScript 2015 запис зі стрілкою
+() => {};
+
+ +

Названа функція, це функція що має ім'я:

+ +
function foo() {};
+// або використовуючи ECMAScript 2015 запис зі стрілкою
+const foo = () => {};
+
+ +

Внутрішня функція,  це функція всередині іншої функції (square в цьому випадку). Зовнішня функція, це функція, що містить всередині інші функції (addSquares в цьому випадку):

+ +
function addSquares(a,b) {
+   function square(x) {
+      return x * x;
+   }
+   return square(a) + square(b);
+};
+// використовуючи ECMAScript 2015 запис зі стрілкою
+const addSquares = (a,b) => {
+   const square = x => x*x;
+   return square(a) + square(b);
+};
+
+ +

Рекурсивна функція, це функція, що викликає сама себе. Дивіться {{Glossary("Рекурсія", "рекурсія")}}.

+ +
function loop(x) {
+   if (x >= 10)
+      return;
+   loop(x + 1);
+};
+// використовуючи ECMAScript 2015 запис зі стрілкою
+const loop = x => {
+   if (x >= 10)
+      return;
+   loop(x + 1);
+};
+
+ +

Негайно виконуваний функціональний вираз (IIFE, Immediately Invoked Function Expression) — це вираз, що одночасно оголошує {{Glossary("Функція", "функцію")}} в {{Glossary("JavaScript")}} та здійснює її виклик. Позаяк подальший виклик безіменної функції, посилання на яку відсутнє, неможливий, головним призначенням такого виразу є створення окремої області видимості, щоб уникнути засмічення зовнішньої (зазвичай, глобальної). Створити НВФВ можна, додавши ліву та праву дужки в кінці оголошення функції.

+ +
// Error (https://en.wikipedia.org/wiki/Immediately-invoked_function_expression)
+/*
+​function foo() {
+    console.log('Hello Foo');
+}();
+*/
+
+(function foo() {
+    console.log("Hello Foo");
+}());
+
+(function food() {
+    console.log("Hello Food");
+})();
+
+
+ +

Якщо хочете дізнатись бульше про НВФВ, перегляньте сторінку на Wikipedia : Immediately Invoked Function Expression

+ +

Дізнатись більше

+ +

Технічна довідка

+ + diff --git a/files/uk/glossary/hyperlink/index.html b/files/uk/glossary/hyperlink/index.html new file mode 100644 index 0000000000..2aabe6f66d --- /dev/null +++ b/files/uk/glossary/hyperlink/index.html @@ -0,0 +1,26 @@ +--- +title: Гіперпосилання +slug: Glossary/Посилання +translation_of: Glossary/Hyperlink +--- +

Гіперпосилання підключають веб-сторінки чи елементи даних один до одного. HTML елементи {{HTMLElement ("a")}} визначають гіперпосилання з місця на веб-сторінці (як-от текстовий рядок або зображення) на місце на іншій або на тій же сторінці.

+ +

Дізнайся більше

+ +

Загальні знання

+ + + +

Технічна довідка

+ +

HTML5 a - hyperlink - W3C

+ +

Learn about it

+ + diff --git a/files/uk/glossary/identifier/index.html b/files/uk/glossary/identifier/index.html new file mode 100644 index 0000000000..5499efcc77 --- /dev/null +++ b/files/uk/glossary/identifier/index.html @@ -0,0 +1,19 @@ +--- +title: Ідентифікатор +slug: Glossary/ідентифікатор +tags: + - Початківець + - Словник +translation_of: Glossary/Identifier +--- +

Послідовність символів в коді, яка у недвозначний спосіб позначає (ідентифікує) {{glossary("variable", "змінну")}}, {{glossary("function", "функцію")}} або {{glossary("property", "властивість")}}, називається ідентифікатором.

+ +

У {{glossary("JavaScript")}}, ідентифікатори можуть містити лише алфавітно-цифрові символи (а також "$" або "_"), і не можуть починатися з цифри. Ідентифікатор відрізняється від рядків тим, що рядок являє собою дані, натомість ідентифікатор є частиною коду. В JavaScript, немає можливості перетворити ідентифікатори в рядки, але іноді є можливість перетворити рядки у ідентифікатори.

+ +

Дізнатись більше

+ +

Загальні відомості

+ + diff --git a/files/uk/glossary/internet/index.html b/files/uk/glossary/internet/index.html new file mode 100644 index 0000000000..6c4f91efff --- /dev/null +++ b/files/uk/glossary/internet/index.html @@ -0,0 +1,19 @@ +--- +title: Інтернет +slug: Glossary/Інтернет +tags: + - NeedsContent + - WWW + - Початківець + - Словник +translation_of: Glossary/Internet +--- +

Інтернет (також міжмере́жжя) — всесвітня мережа з мереж, яка використовує стіс {{glossary("protocol", "протоколів")}} {{glossary("TCP")}}/{{glossary("IPv6", "IP")}}.

+ +

Дізнатись більше

+ +

Навчання

+ + diff --git a/files/uk/glossary/method/index.html b/files/uk/glossary/method/index.html new file mode 100644 index 0000000000..1a2b3f8e99 --- /dev/null +++ b/files/uk/glossary/method/index.html @@ -0,0 +1,38 @@ +--- +title: Метод +slug: Glossary/Метод +tags: + - JavaScript + - Словник + - Функція +translation_of: Glossary/Method +--- +

Метод — це {{glossary("function", "функція")}}, яка є {{glossary("property", "властивістю")}} {{glossary("object", "об'єкта")}}. Існує два види методів: Примірниковий метод, який можна викликати лише за наявності об'єкта, або {{Glossary("static method", "Статичний метод")}}, який можна викликати безпосередньо на конструкторі об'єкта.

+ +
+

Заувага: У JavaScript сама функція є об'єктом, а тому метод, насправді є {{glossary("object reference", "посиланням на об'єкт")}} функції.

+
+ +

Дізнатись більше

+ +

Загальні відомості

+ + + +

Технічна довідка

+ + diff --git a/files/uk/glossary/oop/index.html b/files/uk/glossary/oop/index.html new file mode 100644 index 0000000000..6dfa1a3a8c --- /dev/null +++ b/files/uk/glossary/oop/index.html @@ -0,0 +1,21 @@ +--- +title: OOP (Об'єктно-орієнтоване програмування) +slug: Glossary/ООП +tags: + - Об'єкт + - Парадигма + - Програмування +translation_of: Glossary/OOP +--- +

OOP (об'єктно-орієнтоване програмування) є підходом у програмуванні, який передбачає, що дані сховано всередині об'єктів, а операції здійснюються радше над {{glossary("object", "об'єктами")}}, ніж над їх складовими.

+ +

{{glossary("JavaScript")}} є значною мірою об'єктно-орієнтованою мовою. Вона пропонує модель даних засновану на прототипах (на противагу моделі, заснованій на класах).

+ +

Дізнатись більше

+ +

Загальні відомості

+ + diff --git a/files/uk/glossary/operator/index.html b/files/uk/glossary/operator/index.html new file mode 100644 index 0000000000..9a55273f32 --- /dev/null +++ b/files/uk/glossary/operator/index.html @@ -0,0 +1,23 @@ +--- +title: Оператор +slug: Glossary/Оператор +tags: + - Оператори + - Словник +translation_of: Glossary/Operator +--- +

Зарезервований вираз, що позначається знаком пунктуації чи буквенно-цифровим символом, що забезпечує вбудований функціонал, що може варіюватись в залежності від мови. Наприклад, в JavaScript оператор додавання ("+") може додавати числа та, крім цього, виконувати конкатинацію(злиття) рядків; оператор "not" (позн. "!") надає виразу протилежного значення, наприклад, вираз зі значенням true повертатиме false.

+ +

Learn more

+ +

General knowledge

+ + + +

Technical reference

+ + diff --git a/files/uk/glossary/recursion/index.html b/files/uk/glossary/recursion/index.html new file mode 100644 index 0000000000..b69251d64b --- /dev/null +++ b/files/uk/glossary/recursion/index.html @@ -0,0 +1,42 @@ +--- +title: Рекурсія +slug: Glossary/Рекурсія +tags: + - Словник +translation_of: Glossary/Recursion +--- +

Рекурсія — це виклик функцією самої себе. Рекурсію застосовують, коли розв'язувана задача містить подібні до себе підзадачі. Залежно від вхідних даних розрізняють кінцевий виклик (розв'язує найпростішу задачу) та проміжний (має підзадачі, тож передбачає щонайменше один рекурсивний виклик).

+ +

Типовим прикладом застосування рекурсії є обчислення факторіалу:

+ +
function f(n) {
+  if (n > 1) {
+    return n * f(n - 1);
+  }
+  return 1;
+}
+ +

Слід завважити, що будь-який алгоритм можна втілити без застосування рекурсії, але для вирішення певних задач її застосування спрощує та увиразнює код. Для прикладу розгляньмо обчислення факторіалу без рекурсії:

+ +
function f(n) {
+  var value = 1;
+
+  while (n > 1) {
+    value *= n;
+    n--;
+  }
+
+  return value;
+}
+
+ +

Водночас для деяких алгоритмів перевага рекурсивного втілення буде навіть суттєвішою.

+ +

Дізнатись більше

+ +

Загальні відомості

+ + diff --git a/files/uk/glossary/statement/index.html b/files/uk/glossary/statement/index.html new file mode 100644 index 0000000000..6364c4093e --- /dev/null +++ b/files/uk/glossary/statement/index.html @@ -0,0 +1,33 @@ +--- +title: Інструкція +slug: Glossary/Інструкція +tags: + - Beginner + - CodingScripting + - Глосарій +translation_of: Glossary/Statement +--- +

В комп'ютерній мові програмування інструкція - це рядок коду, який виконує завдання. Кожна програма складається з послідовності інструкцій.

+ +

Дізнатись більше

+ +

Загальні знання

+ + + +

Технічна довідка

+ + + + + +
+
+ +
+
diff --git a/files/uk/glossary/symbol/index.html b/files/uk/glossary/symbol/index.html new file mode 100644 index 0000000000..5b0a3767a1 --- /dev/null +++ b/files/uk/glossary/symbol/index.html @@ -0,0 +1,108 @@ +--- +title: Символ +slug: Glossary/Символ +tags: + - ECMAScript2015 + - JavaScript + - Sharing + - Символ + - Словник + - Тип даних +translation_of: Glossary/Symbol +--- +

У {{Glossary("JavaScript")}}, символ (Symbol) є {{Glossary("Primitive", "простим типом даних")}}.

+ +

Значення типу символ також називають "Символьним значенням". У середовищі виконання JavaScript символьне значення створюється викликом функції {{jsxref("Symbol")}}, яка динамічно створює анонімне, унікальне значення. Символ можна використовувати як властивість об'єкта.

+ +

Символ може мати необов'язковий опис, але тільки для відлагодження.

+ +

Символьне значення є унікальним ідентифікатором. Наприклад,

+ +
// Ось два символи з однаковим описом,
+let Sym1 = Symbol("Sym");
+let Sym2 = Symbol("Sym");
+
+console.log(Sym1 == Sym2); // повертає "false"
+// Символи гарантовано є унікальними.
+// Навіть якщо ми створимо багато символів з тим самим описом,
+// вони будуть різними значеннями.
+ +
+

Заувага: Якщо ви знайомі з Ruby чи іншою мовою, що має свій аналог “символів” – будь ласка, не плутайте. Символи JavaScript інші.

+
+ +

Символьний тип - це новий функціонал у ECMAScript 2015, і він не має еквіваленту у ECMAScript 5.

+ +

У деяких мовах програмування символьний тип даних також називається "атом".

+ +

Символи не мають автоматичного перетворення у рядки

+ +

Більшість значень у JavaScript підтримують неявне перетворення у рядки. Наприклад, ми можемо викликати alert майже з будь-яким значенням, і це спрацює. Символи особливі. Вони не перетворюються автоматично.

+ +

Наприклад,

+ +
let Sym = Symbol("Sym");
+alert(Sym); // TypeError: Cannot convert a Symbol value to a string
+ +

Це “мовний захист” від плутанини, тому що рядки та символи є фундаментально різними, і не повинні випадково перетворюватись один на одного.

+ +

Якщо нам дуже потрібно вивести символ, треба викликати на ньому метод .toString().

+ +
let Sym = Symbol("Sym");
+
+alert(Sym.toString()); // Symbol(Sym), тепер це працює
+ +

Або ми можемо скористатись властивістю символу symbol.description, щоб дістати його опис, наприклад,

+ +
let _Sym = Symbol("Sym");
+
+alert(_Sym.description); // Sym
+ +

Добревідомі символи

+ +

Клас {{jsxref("Symbol")}} має константи для так званих добревідомих символів (well-known symbols). Ці символи дозволяють налаштовувати взаємодію JS з об'єктом, використовуючи їх в якості ключів.

+ +

Прикладами добревідомих символів є: {{jsxref("Symbol.iterator")}} для подібних до масивів об'єктів, або {{jsxref("Symbol.search")}} для рядкових об'єктів.

+ +

Вони наведені у таблиці специфікації Добревідомі символи:

+ + + +

Глобальний реєстр символів

+ +

Методами, що мають доступ до глобального реєстру символів, є {{jsxref("Symbol.for()")}} і {{jsxref("Symbol.keyFor()")}}; це посередники між глобальною таблицею (або "реєстром") символів та середовищем виконання. Реєстр символів переважно збудований інфраструктурою компілятора Javascript, а вміст реєстру символів не доступний для інфраструктури виконання Javascript, окрім як за допомогою цих методів.

+ +

Метод Symbol.for(tokenString) повертає символьне значенняз реєстру, а Symbol.keyFor(symbolValue) повертає рядковий токен з реєстру; ці функції зворотні одна одній, тому наступне є істиною:

+ +
Symbol.keyFor(Symbol.for("tokenString")) === "tokenString" // true
+ +

Дізнайтеся більше

+ +

Загальні знання

+ + + + diff --git a/files/uk/glossary/type/index.html b/files/uk/glossary/type/index.html new file mode 100644 index 0000000000..a426877aa6 --- /dev/null +++ b/files/uk/glossary/type/index.html @@ -0,0 +1,23 @@ +--- +title: Тип +slug: Glossary/Тип +tags: + - JavaScript + - Змінна + - Значення + - Словник + - Тип +translation_of: Glossary/Type +--- +

Тип (або тип даних) є характеристикою {{glossary("value", "значення")}}, що визначає формат його зберігання та способи обробки. Скажімо, ціле число можна помножити на дробове, але не на текстовий рядок.

+ +

Крім того, кожен тип даних передбачає обмежену форматом зберігання множину значень. Наприклад, тип {{domxref("Boolean")}} у JavaScript може містити лише значення true та false, натомість тип {{domxref("String")}} містить текстові рядки, а {{domxref("Number")}} — цілі числа та десяткові дроби тощо.

+ +

Дізнатись більше

+ +

Загальні відомості

+ + diff --git a/files/uk/glossary/ux/index.html b/files/uk/glossary/ux/index.html new file mode 100644 index 0000000000..eec0cb229d --- /dev/null +++ b/files/uk/glossary/ux/index.html @@ -0,0 +1,21 @@ +--- +title: ДК +slug: Glossary/ДК +tags: + - Дизайн + - Доступність + - Навігація + - Словник +translation_of: Glossary/UX +--- +

ДК — це акронім від слів досвід користування. Це дослідження взаємодії користувачів і системи. Його мета - зробити систему легкою в взаємодії з точки зору користувача.

+ +

Система може бути будь-яким продуктом або додатком, з яким кінцевий користувач має взаємодіяти. Наприклад, дослідження ДК, проведені на веб-сторінці, можуть продемонструвати, чи легко зрозуміти сторінку, перейти до різних областей та виконувати загальні завдання, а також, де такі процеси можуть мати менше труднощів.

+ +

Вчіть більше

+ +

Загальні знання

+ + diff --git a/files/uk/glossary/value/index.html b/files/uk/glossary/value/index.html new file mode 100644 index 0000000000..f9b6d2f9dd --- /dev/null +++ b/files/uk/glossary/value/index.html @@ -0,0 +1,35 @@ +--- +title: Значення +slug: Glossary/Значення +tags: + - Значення + - Посилання + - Проста величина + - Словник +translation_of: Glossary/Value +--- +

Кажучи про дані або {{Glossary("Wrapper", "обгортку")}} для тих даних, значення являє собою {{Glossary("Primitive","просту величину")}}, яка міститься в об'єкті-обгортці. Натомість, кажучи про {{Glossary("Variable","змінну")}} чи {{Glossary("Property","властивість")}}, значенням можуть називати як просту величину, так і {{Glossary("Object reference","посилання на об'єкт")}}.

+ +

Приклади

+ +
// Значенням змінної x є число 5
+var x = 5;
+
+// Значенням змінної y є рядок (проста величина) 'Затівка'
+var y = 'Затівка';
+
+// Значенням змінної z є посилання на об'єкт типу String, а значенням того об'єкта є рядок (проста величина) 'Затівка'
+var z = new String(y);
+
+console.log(x.valueOf() === 5);  // виводить true
+console.log(y.valueOf() === y);  // виводить true
+console.log(z.valueOf() === z);  // виводить false
+console.log(z.valueOf() === y);  // виводить true
+ +

Дізнатись більше

+ +

Загальні відомості

+ + diff --git a/files/uk/glossary/variable/index.html b/files/uk/glossary/variable/index.html new file mode 100644 index 0000000000..2c23a36c56 --- /dev/null +++ b/files/uk/glossary/variable/index.html @@ -0,0 +1,24 @@ +--- +title: Змінна +slug: Glossary/Змінна +tags: + - JavaScript + - Програмування +translation_of: Glossary/Variable +--- +

Змінна — це {{glossary("Identifier", "найменована")}} ділянка пам'яті, де зберігається {{Glossary("Value", "значення")}}. Таким чином заздалегідь відоме ім'я уможливлює доступ до значення, яке може бути довільним на момент доступу.

+ +

Дізнатись більше

+ +

Загальні відомості

+ + + +

Технічна довідка

+ + diff --git a/files/uk/glossary/viewport/index.html b/files/uk/glossary/viewport/index.html new file mode 100644 index 0000000000..2136266e89 --- /dev/null +++ b/files/uk/glossary/viewport/index.html @@ -0,0 +1,23 @@ +--- +title: Вікно перегляду +slug: Glossary/Вікно_перегляду +tags: + - Графіка + - Словник +translation_of: Glossary/Viewport +--- +

Вікном (або вікном перегляду) в царині комп'ютерної графіки називають многокутну (зазвичай прямокутну) область, яка в поточний момент переглядається. На прикладі веб-переглядача це та частина відкритого документа, яка в поточний момент видима у вікні переглядача (або на екрані, якщо документ відображено на повний екран). Вміст за межами вікна перегляду для користувача невидимий, тож користувач має можливість гортати той вміст, отримуючи у вікні перегляду щораз іншу частину документа.

+ +

Дізнатись більше

+ +

Загальні відомості

+ + + +

Технічна довідка

+ + diff --git a/files/uk/glossary/world_wide_web/index.html b/files/uk/glossary/world_wide_web/index.html new file mode 100644 index 0000000000..98cde6874d --- /dev/null +++ b/files/uk/glossary/world_wide_web/index.html @@ -0,0 +1,40 @@ +--- +title: Всесвітня мережа +slug: Glossary/Тенета +tags: + - WWW + - Інфраструктура + - Словник +translation_of: Glossary/World_Wide_Web +--- +

Всесві́тня мережа (англ. World Wide Web, скорочено: WWW, W3 чи просто Web), павутиння, тене́та, або веб — це всесвітня система відкритих документів і сторінок, доступних в мережі {{Glossary("Internet", "Інтернет")}}. Мережа — це не те саме, що й Інтернет: Мережа є лише одним із численних застосувань Інтернету та використовує останній як середовище передачі даних.

+ +

Тім Бернерз-Лі запропонував архітектуру, яка стала відома під назвою Всесвітня мережа. Саме він в 1990-му році створив найперший веб-{{Glossary("Server", "сервер")}}, {{Glossary("Browser", "переглядач")}} та веб-сторінку на власному комп'ютері в лабораторії фізичних досліджень у ЦЕРН. В 1991-му він оголосив про своє творіння в групі новин alt.hypertext, позначивши мить, коли Мережу вперше було оприлюднено.

+ +

Те, що нині відоме, як Тене́та або Мережа, має декілька складових:

+ + + +

Зв'язування сторінок за допомогою {{Glossary("Hyperlink", "гіперпосилань")}} є ключовою можливістю, яка власне і дає можливість називати Тенета множиною пов'язаних документів.

+ +

Невдовзі після створення Тенет, Тім Бернерз-Лі заснував об'єднання {{Glossary("W3C")}} (англ. World Wide Web Consortium — Консорціум World Wide Web) для стандартизації та подальшого розвитку мережі. Цей консорціум складається з основних цільових веб-груп, таких як розробники переглядачів, державні установи, дослідники та університети. Його місія включає освіту та поширення.

+ +

Дізнатись більше

+ +

Навчання

+ + + +

Загальні відомості

+ + diff --git a/files/uk/glossary/wrapper/index.html b/files/uk/glossary/wrapper/index.html new file mode 100644 index 0000000000..535edbec4f --- /dev/null +++ b/files/uk/glossary/wrapper/index.html @@ -0,0 +1,18 @@ +--- +title: Wrapper +slug: Glossary/Обгортка +tags: + - Обгортка + - Словник +translation_of: Glossary/Wrapper +--- +

У таких мовах програмування, як JavaScript, розрізняють два значення поняття обгортка: це або {{glossary("Function", "функція")}}, призначена викликати одну або кілька інших функцій (лише для зручності або задля пристосування їх до використання з дещо іншою метою, ніж передбачалося раніше), або {{glossary("Object", "об'єкт")}} (та {{glossary("Class", "клас")}}, до якого він належить), який містить (огортає) {{glossary("Primitive", "просту величину")}} та надає відповідні {{glossary("Method", "методи")}} для здійснення операцій над нею.

+ +

Дізнатись більше

+ +

Загальні відомості

+ + diff --git "a/files/uk/glossary/\320\260\320\261\321\201\321\202\321\200\320\260\320\272\321\206\321\226\321\217/index.html" "b/files/uk/glossary/\320\260\320\261\321\201\321\202\321\200\320\260\320\272\321\206\321\226\321\217/index.html" deleted file mode 100644 index 49517c4907..0000000000 --- "a/files/uk/glossary/\320\260\320\261\321\201\321\202\321\200\320\260\320\272\321\206\321\226\321\217/index.html" +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Абстракція -slug: Glossary/Абстракція -tags: - - Абстракція - - Мова Програмування - - Словник -translation_of: Glossary/Abstraction ---- -

Абстрація у галузі {{Glossary("computer programming", "комп'ютерного програмування")}} є способом зменшення складності, що вможливлює підвищення ефективності розробки та втілення складних систем програмного забезпечення. Вона ховає технічну складність системи за простішими {{Glossary("API", "програмними інтерфейсами")}}.

- -

Дізнатись більше

- -

Загальні відомості

- - diff --git "a/files/uk/glossary/\320\260\320\273\320\263\320\276\321\200\320\270\321\202\320\274/index.html" "b/files/uk/glossary/\320\260\320\273\320\263\320\276\321\200\320\270\321\202\320\274/index.html" deleted file mode 100644 index 6908966658..0000000000 --- "a/files/uk/glossary/\320\260\320\273\320\263\320\276\321\200\320\270\321\202\320\274/index.html" +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Алгоритм -slug: Glossary/Алгоритм -tags: - - Словник -translation_of: Glossary/Algorithm ---- -

Алгоритм — це впорядкована послідовність дієвказів (інструкцій), що має на меті розв'язання певної задачі.

- -

Зазвичай під цим поняттям мається на увазі саме стратегія розв'язання (алгоритм сортування, алгоритм пошуку). Натомість програмний код, що втілює ту чи ту стратегію, називають реалізацією алгоритму.

- -

Дізнатись більше

- -

Загальні відомості

- - diff --git "a/files/uk/glossary/\320\260\321\200\322\221\321\203\320\274\320\265\320\275\321\202/index.html" "b/files/uk/glossary/\320\260\321\200\322\221\321\203\320\274\320\265\320\275\321\202/index.html" deleted file mode 100644 index 1192ea1b6e..0000000000 --- "a/files/uk/glossary/\320\260\321\200\322\221\321\203\320\274\320\265\320\275\321\202/index.html" +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: Арґумент -slug: Glossary/Арґумент -tags: - - JavaScript - - Словник -translation_of: Glossary/Argument ---- -

Арґумент — це своєрідний тип {{Glossary("Variable", "змінної")}}, що дозволяє передавати до {{Glossary("Function", "функції")}} ({{Glossary("Method", "метода")}}) необхідні {{Glossary("value", "значення")}}, {{Glossary("Scope", "область видимості")}} яких не виходитиме за її (функції) межі.

- -

Поняття «арґумент» та «параметр» часто вживаються як взаємозамінні, а справжнє значення з'ясовується зі словесного оточення.

- -

Втім слово параметр (чи то пак «формальний параметр») часто вживається на позначення змінних, наведених в самому оголошенні функції, а натомість слово арґумент (або ж «фактичний арґумент») частіше позначає {{Glossary("Primitive", "прості величини")}} або {{Glossary("Object", "об'єкти")}} які фактично було передано до функції під час її виклику.

- -

Дізнатись більше

- -

Загальні відомості

- - - -

Технічна довідка

- - diff --git "a/files/uk/glossary/\320\261\321\203\321\204\320\265\321\200/index.html" "b/files/uk/glossary/\320\261\321\203\321\204\320\265\321\200/index.html" deleted file mode 100644 index cba52b5844..0000000000 --- "a/files/uk/glossary/\320\261\321\203\321\204\320\265\321\200/index.html" +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: Буфер -slug: Glossary/Буфер -tags: - - Буфер - - Кеш - - Словник -translation_of: Glossary/buffer ---- -

Буфер — це ділянка фізичної пам'яті (зазвичай, оперативної), що використовується для тимчасового зберігання даних на час їх передачі з одного місця (носія) в інше.

- -

Попри те, що поняття буфер і кеш певною мірою схожі, їх призначення істотно відрізняється. Кеш передбачає пришвидшення обчислень завдяки розміщенню у швидкій пам'яті даних, над якими здіснюються повторювані операції (читання або запис). Натомість буфер використовується в дещо інший спосіб й може стати в нагоді навіть тоді, коли треба здійснити лише одну операцію читання/запису:

- - - -

Дізнатись більше

- -

Загальні відомості

- - diff --git "a/files/uk/glossary/\320\262\320\265\320\261_\320\264\320\276\321\201\321\202\321\203\320\277\320\275\321\226\321\201\321\202\321\214/index.html" "b/files/uk/glossary/\320\262\320\265\320\261_\320\264\320\276\321\201\321\202\321\203\320\277\320\275\321\226\321\201\321\202\321\214/index.html" deleted file mode 100644 index cbc90fead2..0000000000 --- "a/files/uk/glossary/\320\262\320\265\320\261_\320\264\320\276\321\201\321\202\321\203\320\277\320\275\321\226\321\201\321\202\321\214/index.html" +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: Веб-доступність (Web Accessibility) -slug: Glossary/Веб_Доступність -tags: - - Доступність - - Словник -translation_of: Glossary/Accessibility ---- -

Веб-доступність, або Доступність веб-сайтів (Web Accesability, A11Y), відноситься до передового досвіду для використання веб-сайту, незважаючи на фізичні та технічні обмеження. Веб-доступність формально визначається й обговорюється на {{Glossary("W3C")}} з {{Glossary("WAI","Web Accessibility Initiative","Ініціатива веб-доступності")}} (WAI).

- -

Дізнайтесь більше

- -

Загальні поняття

- - - -

Дізнайтесь про веб-доступність

- - - -

Технічні посилання

- - diff --git "a/files/uk/glossary/\320\262\321\226\320\272\320\275\320\276_\320\277\320\265\321\200\320\265\320\263\320\273\321\217\320\264\321\203/index.html" "b/files/uk/glossary/\320\262\321\226\320\272\320\275\320\276_\320\277\320\265\321\200\320\265\320\263\320\273\321\217\320\264\321\203/index.html" deleted file mode 100644 index 2136266e89..0000000000 --- "a/files/uk/glossary/\320\262\321\226\320\272\320\275\320\276_\320\277\320\265\321\200\320\265\320\263\320\273\321\217\320\264\321\203/index.html" +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Вікно перегляду -slug: Glossary/Вікно_перегляду -tags: - - Графіка - - Словник -translation_of: Glossary/Viewport ---- -

Вікном (або вікном перегляду) в царині комп'ютерної графіки називають многокутну (зазвичай прямокутну) область, яка в поточний момент переглядається. На прикладі веб-переглядача це та частина відкритого документа, яка в поточний момент видима у вікні переглядача (або на екрані, якщо документ відображено на повний екран). Вміст за межами вікна перегляду для користувача невидимий, тож користувач має можливість гортати той вміст, отримуючи у вікні перегляду щораз іншу частину документа.

- -

Дізнатись більше

- -

Загальні відомості

- - - -

Технічна довідка

- - diff --git "a/files/uk/glossary/\320\264\320\265\321\210\320\270\321\204\321\200\321\203\320\262\320\260\320\275\320\275\321\217/index.html" "b/files/uk/glossary/\320\264\320\265\321\210\320\270\321\204\321\200\321\203\320\262\320\260\320\275\320\275\321\217/index.html" deleted file mode 100644 index 20cce95d6e..0000000000 --- "a/files/uk/glossary/\320\264\320\265\321\210\320\270\321\204\321\200\321\203\320\262\320\260\320\275\320\275\321\217/index.html" +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Дешифрування -slug: Glossary/Дешифрування -tags: - - Безпека - - Криптографія - - Приватність - - Словник -translation_of: Glossary/Decryption ---- -

В {{glossary("Криптографія","криптографії")}}, дешифрування це трансформація {{glossary("Шифротекст","шифротексту")}} в {{glossary("cleartext","відкритий текст")}}.

- -

Дешифрування це одна з криптографічних основ: цей процес перетворює повідомлення з шифротекстом в відкритий текст, використовуючи криптографічний алгоритм, що називається {{glossary("шифр")}}. Як і шифрування, дешифрування з використанням сучасних шифрів виконується за допомгою специфічних алгоритмів і секрету, який називають {{glossary("key","ключем")}}. Так як алгоритми часто є публічними, то ключ має зберігатись в таємниці, якщо шифрування має бути захищеним.

- -

The decryption primitive.

- -

Дешифрування це процес, протилежний процесу {{glossary("encryption","шифрування")}} і якщо ключ залишається в таємниці, то деширування без знання конкретного секрету є складним з математичної точки зору. Складність залежить від рівня захищеності обраного криптографічного алгоритму і розвивається разом з {{glossary("криптоаналіз","криптоаналізом")}}.

- -

Довідатись більше

- -

Teхнічна довідка

- - diff --git "a/files/uk/glossary/\320\264\320\270\320\275\320\260\320\274\321\226\321\207\320\275\320\260_\320\274\320\276\320\262\320\260_\320\277\321\200\320\276\320\263\321\200\320\260\320\274\321\203\320\262\320\260\320\275\320\275\321\217/index.html" "b/files/uk/glossary/\320\264\320\270\320\275\320\260\320\274\321\226\321\207\320\275\320\260_\320\274\320\276\320\262\320\260_\320\277\321\200\320\276\320\263\321\200\320\260\320\274\321\203\320\262\320\260\320\275\320\275\321\217/index.html" deleted file mode 100644 index 0417968273..0000000000 --- "a/files/uk/glossary/\320\264\320\270\320\275\320\260\320\274\321\226\321\207\320\275\320\260_\320\274\320\276\320\262\320\260_\320\277\321\200\320\276\320\263\321\200\320\260\320\274\321\203\320\262\320\260\320\275\320\275\321\217/index.html" +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: Динамічна мова програмування -slug: Glossary/Динамічна_мова_програмування -tags: - - ДМП - - Динамічна мова програмування - - Словник -translation_of: Glossary/Dynamic_programming_language ---- -

 

- -

Динамічна мова програмування, це мова програмування в якій операції, які в іншому разі обробляються в процесі компіляції, можуть здійснюватись в ході виконання коду. Наприклад, в JavaScript можливо змінювати тип змінної чи додавати нові властивості чи методи до об'єкта, коли програма запущена. 

- -

Термін протиставляється, так званим, статичним мовам програмування, в яких такі зміни типово не можливі.

- -

Learn more

- -

General knowledge

- - diff --git "a/files/uk/glossary/\320\264\320\272/index.html" "b/files/uk/glossary/\320\264\320\272/index.html" deleted file mode 100644 index eec0cb229d..0000000000 --- "a/files/uk/glossary/\320\264\320\272/index.html" +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: ДК -slug: Glossary/ДК -tags: - - Дизайн - - Доступність - - Навігація - - Словник -translation_of: Glossary/UX ---- -

ДК — це акронім від слів досвід користування. Це дослідження взаємодії користувачів і системи. Його мета - зробити систему легкою в взаємодії з точки зору користувача.

- -

Система може бути будь-яким продуктом або додатком, з яким кінцевий користувач має взаємодіяти. Наприклад, дослідження ДК, проведені на веб-сторінці, можуть продемонструвати, чи легко зрозуміти сторінку, перейти до різних областей та виконувати загальні завдання, а також, де такі процеси можуть мати менше труднощів.

- -

Вчіть більше

- -

Загальні знання

- - diff --git "a/files/uk/glossary/\320\267\320\260\320\274\320\270\320\272\320\260\320\275\320\275\321\217/index.html" "b/files/uk/glossary/\320\267\320\260\320\274\320\270\320\272\320\260\320\275\320\275\321\217/index.html" deleted file mode 100644 index 78ec73f7f8..0000000000 --- "a/files/uk/glossary/\320\267\320\260\320\274\320\270\320\272\320\260\320\275\320\275\321\217/index.html" +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Замикання -slug: Glossary/Замикання -tags: - - JavaScript - - Словник -translation_of: Glossary/Closure ---- -

Замикання (англ. closure) — це певний різновид сполучення між {{glossary("scope", "областями видимості")}}, що уможливлює доступ до місцевих (локальних) змінних зовнішнього середовища виконання з новоствореного внутрішнього середовища. У {{glossary("JavaScript")}} всяка {{glossary("function", "функція")}} створює замикання.

- -

Приклади

- -

В наступному прикладі наведено безіменну функцію, що має доступ до місцевих змінних зовнішньої функції, що її створила:

- -
function createSequenceGenerator(begin = 0) {
-  var value = begin;
-
-  return function() {
-    return value++;
-  };
-}
- -

Місцева змінна value доступна зсередини безіменної функції навіть по завершенню виконання функції createSequenceGenerator, що її створила:

- -
var seq1 = createSequenceGenerator();
-var seq2 = createSequenceGenerator(1000);
-
-console.log(seq1());  // виводить 0
-console.log(seq1());  // виводить 1
-console.log(seq2());  // виводить 1000
-console.log(seq2());  // виводить 1001
-console.log(seq1());  // виводить 2
- -

Дізнатись більше

- -

Загальні відомості

- - - -

Технічна довідка

- - diff --git "a/files/uk/glossary/\320\267\320\274\321\226\320\275\320\275\320\260/index.html" "b/files/uk/glossary/\320\267\320\274\321\226\320\275\320\275\320\260/index.html" deleted file mode 100644 index 2c23a36c56..0000000000 --- "a/files/uk/glossary/\320\267\320\274\321\226\320\275\320\275\320\260/index.html" +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Змінна -slug: Glossary/Змінна -tags: - - JavaScript - - Програмування -translation_of: Glossary/Variable ---- -

Змінна — це {{glossary("Identifier", "найменована")}} ділянка пам'яті, де зберігається {{Glossary("Value", "значення")}}. Таким чином заздалегідь відоме ім'я уможливлює доступ до значення, яке може бути довільним на момент доступу.

- -

Дізнатись більше

- -

Загальні відомості

- - - -

Технічна довідка

- - diff --git "a/files/uk/glossary/\320\267\320\275\320\260\321\207\320\265\320\275\320\275\321\217/index.html" "b/files/uk/glossary/\320\267\320\275\320\260\321\207\320\265\320\275\320\275\321\217/index.html" deleted file mode 100644 index f9b6d2f9dd..0000000000 --- "a/files/uk/glossary/\320\267\320\275\320\260\321\207\320\265\320\275\320\275\321\217/index.html" +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Значення -slug: Glossary/Значення -tags: - - Значення - - Посилання - - Проста величина - - Словник -translation_of: Glossary/Value ---- -

Кажучи про дані або {{Glossary("Wrapper", "обгортку")}} для тих даних, значення являє собою {{Glossary("Primitive","просту величину")}}, яка міститься в об'єкті-обгортці. Натомість, кажучи про {{Glossary("Variable","змінну")}} чи {{Glossary("Property","властивість")}}, значенням можуть називати як просту величину, так і {{Glossary("Object reference","посилання на об'єкт")}}.

- -

Приклади

- -
// Значенням змінної x є число 5
-var x = 5;
-
-// Значенням змінної y є рядок (проста величина) 'Затівка'
-var y = 'Затівка';
-
-// Значенням змінної z є посилання на об'єкт типу String, а значенням того об'єкта є рядок (проста величина) 'Затівка'
-var z = new String(y);
-
-console.log(x.valueOf() === 5);  // виводить true
-console.log(y.valueOf() === y);  // виводить true
-console.log(z.valueOf() === z);  // виводить false
-console.log(z.valueOf() === y);  // виводить true
- -

Дізнатись більше

- -

Загальні відомості

- - diff --git "a/files/uk/glossary/\320\272\320\276\320\274\320\277\321\226\320\273\321\217\321\206\321\226\321\217/index.html" "b/files/uk/glossary/\320\272\320\276\320\274\320\277\321\226\320\273\321\217\321\206\321\226\321\217/index.html" deleted file mode 100644 index 18cb2744e3..0000000000 --- "a/files/uk/glossary/\320\272\320\276\320\274\320\277\321\226\320\273\321\217\321\206\321\226\321\217/index.html" +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: Компіляція -slug: Glossary/Компіляція -translation_of: Glossary/Compile ---- -

Компіляція це процес перетворення комп'ютерної програми, написаної на {{Glossary("computer programming", "мові программування")}} у відповідний код на іншій мові програмування. Компілятор - це програмне забеспечення яке виконує це перетворення. Інколи цей процес називають "збирання" або "побудова", що як правило, означає бульше, ніж просто виконання компіляції, наприклад упакування його у двійковому форматі. 

- -

Зазвичай компілятор перетворює мову високого рівня, таку як С чи  {{Glossary("Java")}}, яка зрозуміла людям, на машинну мову, таку як Ассемблер, яку розуміє процесор. Деякі компілятори перекладають на подібні за рівнем мови, їх називають транспайлер або крос-компілятор, наприклад компіляція з TypeScript на {{Glossary("JavaScript")}}. Це вважається інтрументами продуктивності.

- -

Більшість компіляторів працюють або ahead-of-time (AOT) або just-in-time (JIT). Як програміст ти  зазвичай запускаєш компілятор з командного рядка або зі свого {{Glossary("IDE")}}. Як приклад, один з найпопулярніших "gcc".  JIT компілятор зазвичай виконується прозоро для вас.  Наприклад  браузер Firefox' SpiderMonkey JavaScript Engine має вбудований JIT компялітор, який перетворює JavaScript на сайті у машиний код під час перегляду, щоб він працював швидше. Такі проекти як  WebAssembly, працюють над тим щоб робити це ще краще.

- -

Дізнатися більше

- -

Загальна інформація

- - - -

Посилання для вивчення

- - diff --git "a/files/uk/glossary/\320\272\321\200\320\270\320\277\321\202\320\276\320\260\320\275\320\260\320\273\321\226\320\267/index.html" "b/files/uk/glossary/\320\272\321\200\320\270\320\277\321\202\320\276\320\260\320\275\320\260\320\273\321\226\320\267/index.html" deleted file mode 100644 index ed115fb471..0000000000 --- "a/files/uk/glossary/\320\272\321\200\320\270\320\277\321\202\320\276\320\260\320\275\320\260\320\273\321\226\320\267/index.html" +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Криптоаналіз -slug: Glossary/Криптоаналіз -tags: - - Безпека - - Криптографія - - Приватність - - Словник -translation_of: Glossary/Cryptanalysis ---- -

Криптоаналіз це галузь {{glossary("криптографія","криптографії")}}, що вивчає шляхи взлому кодів та криптосистем. Криптоаналіз створює техніки взлому {{glossary("cipher","шифру")}}, зокрема більш ефективними методами ніж метод "грубої сили". На додачу до традиціїних методів, як частотний аналіз та індекс збігів, криптоаналіз включає більш нові методи, такі як лінійний криптаналіз або диференціальний криптоаналіз, що можуть взламати прогресивніші шифри.

- -

Довідатись більше

- -

Загальні поняття

- - diff --git "a/files/uk/glossary/\320\272\321\200\320\270\320\277\321\202\320\276\320\263\321\200\320\260\321\204\321\226\321\207\320\275\320\260_\320\263\320\265\321\210-\321\204\321\203\320\275\320\272\321\206\321\226\321\217/index.html" "b/files/uk/glossary/\320\272\321\200\320\270\320\277\321\202\320\276\320\263\321\200\320\260\321\204\321\226\321\207\320\275\320\260_\320\263\320\265\321\210-\321\204\321\203\320\275\320\272\321\206\321\226\321\217/index.html" deleted file mode 100644 index acba67d875..0000000000 --- "a/files/uk/glossary/\320\272\321\200\320\270\320\277\321\202\320\276\320\263\321\200\320\260\321\204\321\226\321\207\320\275\320\260_\320\263\320\265\321\210-\321\204\321\203\320\275\320\272\321\206\321\226\321\217/index.html" +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: Криптографічна геш-функція -slug: Glossary/Криптографічна_геш-функція -tags: - - Безпека - - Криптографія - - Словник -translation_of: Glossary/Cryptographic_hash_function ---- -

Криптографічна геш-функція, яка також іноді називається дайджест-функція, це одна з {{glossary("криптографія", "криптографічних")}} основ, на меті якої трансформація повідомлення довільного розміру в повідомлення фіксованого розміру, що називається {{glossary("digest","дайджест")}}. Криптографічні геш-функції використовуються для автентифікації, {{Glossary("digital signature", "цифрових підписів")}} та {{Glossary("HMAC", "кодів автентифікації повідомлень (МАС-підписів)")}}.

- -

Щоб використовуватись у криптографії, геш-функція мусить мати такі якості:

- - - -

Криптографічні геш-функції як MD5 і SHA-1 вважаються взломаними, бо знайшлись методи атак, що значно зменшили їх стійкість до суперечностей.

- -

Довідатись більше

- - diff --git "a/files/uk/glossary/\320\272\321\200\320\270\320\277\321\202\320\276\320\263\321\200\320\260\321\204\321\226\321\217/index.html" "b/files/uk/glossary/\320\272\321\200\320\270\320\277\321\202\320\276\320\263\321\200\320\260\321\204\321\226\321\217/index.html" deleted file mode 100644 index 8d0ccaec9e..0000000000 --- "a/files/uk/glossary/\320\272\321\200\320\270\320\277\321\202\320\276\320\263\321\200\320\260\321\204\321\226\321\217/index.html" +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: Криптографія -slug: Glossary/Криптографія -tags: - - Безпека - - Криптографія - - Приватність - - Словник -translation_of: Glossary/Cryptography ---- -

Криптографія (або криптологія) - це наука яка вивчає методи кодування і безпечної передачі повідомлень. Криптографія створює і вивчає алгоритми, що використовуються для шифрування і дешифрування повідомлень в незахищеному середовищі, і їх використання. Це не тільки конфіденційність даних, криптографія також вивчає ідентифікацію, аутентифікацію, невідмовність і цілісність даних. Тому вона також вивчає використання криптографічних методів в контексті, криптосистеми.

- -

Довідатись більше

- -

Загальні поняття

- - diff --git "a/files/uk/glossary/\320\274\320\265\321\202\320\276\320\264/index.html" "b/files/uk/glossary/\320\274\320\265\321\202\320\276\320\264/index.html" deleted file mode 100644 index 1a2b3f8e99..0000000000 --- "a/files/uk/glossary/\320\274\320\265\321\202\320\276\320\264/index.html" +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: Метод -slug: Glossary/Метод -tags: - - JavaScript - - Словник - - Функція -translation_of: Glossary/Method ---- -

Метод — це {{glossary("function", "функція")}}, яка є {{glossary("property", "властивістю")}} {{glossary("object", "об'єкта")}}. Існує два види методів: Примірниковий метод, який можна викликати лише за наявності об'єкта, або {{Glossary("static method", "Статичний метод")}}, який можна викликати безпосередньо на конструкторі об'єкта.

- -
-

Заувага: У JavaScript сама функція є об'єктом, а тому метод, насправді є {{glossary("object reference", "посиланням на об'єкт")}} функції.

-
- -

Дізнатись більше

- -

Загальні відомості

- - - -

Технічна довідка

- - diff --git "a/files/uk/glossary/\320\276\320\261\320\263\320\276\321\200\321\202\320\272\320\260/index.html" "b/files/uk/glossary/\320\276\320\261\320\263\320\276\321\200\321\202\320\272\320\260/index.html" deleted file mode 100644 index 535edbec4f..0000000000 --- "a/files/uk/glossary/\320\276\320\261\320\263\320\276\321\200\321\202\320\272\320\260/index.html" +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Wrapper -slug: Glossary/Обгортка -tags: - - Обгортка - - Словник -translation_of: Glossary/Wrapper ---- -

У таких мовах програмування, як JavaScript, розрізняють два значення поняття обгортка: це або {{glossary("Function", "функція")}}, призначена викликати одну або кілька інших функцій (лише для зручності або задля пристосування їх до використання з дещо іншою метою, ніж передбачалося раніше), або {{glossary("Object", "об'єкт")}} (та {{glossary("Class", "клас")}}, до якого він належить), який містить (огортає) {{glossary("Primitive", "просту величину")}} та надає відповідні {{glossary("Method", "методи")}} для здійснення операцій над нею.

- -

Дізнатись більше

- -

Загальні відомості

- - diff --git "a/files/uk/glossary/\320\276\320\276\320\277/index.html" "b/files/uk/glossary/\320\276\320\276\320\277/index.html" deleted file mode 100644 index 6dfa1a3a8c..0000000000 --- "a/files/uk/glossary/\320\276\320\276\320\277/index.html" +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: OOP (Об'єктно-орієнтоване програмування) -slug: Glossary/ООП -tags: - - Об'єкт - - Парадигма - - Програмування -translation_of: Glossary/OOP ---- -

OOP (об'єктно-орієнтоване програмування) є підходом у програмуванні, який передбачає, що дані сховано всередині об'єктів, а операції здійснюються радше над {{glossary("object", "об'єктами")}}, ніж над їх складовими.

- -

{{glossary("JavaScript")}} є значною мірою об'єктно-орієнтованою мовою. Вона пропонує модель даних засновану на прототипах (на противагу моделі, заснованій на класах).

- -

Дізнатись більше

- -

Загальні відомості

- - diff --git "a/files/uk/glossary/\320\276\320\277\320\265\321\200\320\260\321\202\320\276\321\200/index.html" "b/files/uk/glossary/\320\276\320\277\320\265\321\200\320\260\321\202\320\276\321\200/index.html" deleted file mode 100644 index 9a55273f32..0000000000 --- "a/files/uk/glossary/\320\276\320\277\320\265\321\200\320\260\321\202\320\276\321\200/index.html" +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Оператор -slug: Glossary/Оператор -tags: - - Оператори - - Словник -translation_of: Glossary/Operator ---- -

Зарезервований вираз, що позначається знаком пунктуації чи буквенно-цифровим символом, що забезпечує вбудований функціонал, що може варіюватись в залежності від мови. Наприклад, в JavaScript оператор додавання ("+") може додавати числа та, крім цього, виконувати конкатинацію(злиття) рядків; оператор "not" (позн. "!") надає виразу протилежного значення, наприклад, вираз зі значенням true повертатиме false.

- -

Learn more

- -

General knowledge

- - - -

Technical reference

- - diff --git "a/files/uk/glossary/\320\277\320\276\321\201\320\270\320\273\320\260\320\275\320\275\321\217/index.html" "b/files/uk/glossary/\320\277\320\276\321\201\320\270\320\273\320\260\320\275\320\275\321\217/index.html" deleted file mode 100644 index 2aabe6f66d..0000000000 --- "a/files/uk/glossary/\320\277\320\276\321\201\320\270\320\273\320\260\320\275\320\275\321\217/index.html" +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: Гіперпосилання -slug: Glossary/Посилання -translation_of: Glossary/Hyperlink ---- -

Гіперпосилання підключають веб-сторінки чи елементи даних один до одного. HTML елементи {{HTMLElement ("a")}} визначають гіперпосилання з місця на веб-сторінці (як-от текстовий рядок або зображення) на місце на іншій або на тій же сторінці.

- -

Дізнайся більше

- -

Загальні знання

- - - -

Технічна довідка

- -

HTML5 a - hyperlink - W3C

- -

Learn about it

- - diff --git "a/files/uk/glossary/\321\200\320\265\320\272\321\203\321\200\321\201\321\226\321\217/index.html" "b/files/uk/glossary/\321\200\320\265\320\272\321\203\321\200\321\201\321\226\321\217/index.html" deleted file mode 100644 index b69251d64b..0000000000 --- "a/files/uk/glossary/\321\200\320\265\320\272\321\203\321\200\321\201\321\226\321\217/index.html" +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: Рекурсія -slug: Glossary/Рекурсія -tags: - - Словник -translation_of: Glossary/Recursion ---- -

Рекурсія — це виклик функцією самої себе. Рекурсію застосовують, коли розв'язувана задача містить подібні до себе підзадачі. Залежно від вхідних даних розрізняють кінцевий виклик (розв'язує найпростішу задачу) та проміжний (має підзадачі, тож передбачає щонайменше один рекурсивний виклик).

- -

Типовим прикладом застосування рекурсії є обчислення факторіалу:

- -
function f(n) {
-  if (n > 1) {
-    return n * f(n - 1);
-  }
-  return 1;
-}
- -

Слід завважити, що будь-який алгоритм можна втілити без застосування рекурсії, але для вирішення певних задач її застосування спрощує та увиразнює код. Для прикладу розгляньмо обчислення факторіалу без рекурсії:

- -
function f(n) {
-  var value = 1;
-
-  while (n > 1) {
-    value *= n;
-    n--;
-  }
-
-  return value;
-}
-
- -

Водночас для деяких алгоритмів перевага рекурсивного втілення буде навіть суттєвішою.

- -

Дізнатись більше

- -

Загальні відомості

- - diff --git "a/files/uk/glossary/\321\201\320\270\320\274\320\262\320\276\320\273/index.html" "b/files/uk/glossary/\321\201\320\270\320\274\320\262\320\276\320\273/index.html" deleted file mode 100644 index 5b0a3767a1..0000000000 --- "a/files/uk/glossary/\321\201\320\270\320\274\320\262\320\276\320\273/index.html" +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: Символ -slug: Glossary/Символ -tags: - - ECMAScript2015 - - JavaScript - - Sharing - - Символ - - Словник - - Тип даних -translation_of: Glossary/Symbol ---- -

У {{Glossary("JavaScript")}}, символ (Symbol) є {{Glossary("Primitive", "простим типом даних")}}.

- -

Значення типу символ також називають "Символьним значенням". У середовищі виконання JavaScript символьне значення створюється викликом функції {{jsxref("Symbol")}}, яка динамічно створює анонімне, унікальне значення. Символ можна використовувати як властивість об'єкта.

- -

Символ може мати необов'язковий опис, але тільки для відлагодження.

- -

Символьне значення є унікальним ідентифікатором. Наприклад,

- -
// Ось два символи з однаковим описом,
-let Sym1 = Symbol("Sym");
-let Sym2 = Symbol("Sym");
-
-console.log(Sym1 == Sym2); // повертає "false"
-// Символи гарантовано є унікальними.
-// Навіть якщо ми створимо багато символів з тим самим описом,
-// вони будуть різними значеннями.
- -
-

Заувага: Якщо ви знайомі з Ruby чи іншою мовою, що має свій аналог “символів” – будь ласка, не плутайте. Символи JavaScript інші.

-
- -

Символьний тип - це новий функціонал у ECMAScript 2015, і він не має еквіваленту у ECMAScript 5.

- -

У деяких мовах програмування символьний тип даних також називається "атом".

- -

Символи не мають автоматичного перетворення у рядки

- -

Більшість значень у JavaScript підтримують неявне перетворення у рядки. Наприклад, ми можемо викликати alert майже з будь-яким значенням, і це спрацює. Символи особливі. Вони не перетворюються автоматично.

- -

Наприклад,

- -
let Sym = Symbol("Sym");
-alert(Sym); // TypeError: Cannot convert a Symbol value to a string
- -

Це “мовний захист” від плутанини, тому що рядки та символи є фундаментально різними, і не повинні випадково перетворюватись один на одного.

- -

Якщо нам дуже потрібно вивести символ, треба викликати на ньому метод .toString().

- -
let Sym = Symbol("Sym");
-
-alert(Sym.toString()); // Symbol(Sym), тепер це працює
- -

Або ми можемо скористатись властивістю символу symbol.description, щоб дістати його опис, наприклад,

- -
let _Sym = Symbol("Sym");
-
-alert(_Sym.description); // Sym
- -

Добревідомі символи

- -

Клас {{jsxref("Symbol")}} має константи для так званих добревідомих символів (well-known symbols). Ці символи дозволяють налаштовувати взаємодію JS з об'єктом, використовуючи їх в якості ключів.

- -

Прикладами добревідомих символів є: {{jsxref("Symbol.iterator")}} для подібних до масивів об'єктів, або {{jsxref("Symbol.search")}} для рядкових об'єктів.

- -

Вони наведені у таблиці специфікації Добревідомі символи:

- - - -

Глобальний реєстр символів

- -

Методами, що мають доступ до глобального реєстру символів, є {{jsxref("Symbol.for()")}} і {{jsxref("Symbol.keyFor()")}}; це посередники між глобальною таблицею (або "реєстром") символів та середовищем виконання. Реєстр символів переважно збудований інфраструктурою компілятора Javascript, а вміст реєстру символів не доступний для інфраструктури виконання Javascript, окрім як за допомогою цих методів.

- -

Метод Symbol.for(tokenString) повертає символьне значенняз реєстру, а Symbol.keyFor(symbolValue) повертає рядковий токен з реєстру; ці функції зворотні одна одній, тому наступне є істиною:

- -
Symbol.keyFor(Symbol.for("tokenString")) === "tokenString" // true
- -

Дізнайтеся більше

- -

Загальні знання

- - - - diff --git "a/files/uk/glossary/\321\202\320\265\320\275\320\265\321\202\320\260/index.html" "b/files/uk/glossary/\321\202\320\265\320\275\320\265\321\202\320\260/index.html" deleted file mode 100644 index 98cde6874d..0000000000 --- "a/files/uk/glossary/\321\202\320\265\320\275\320\265\321\202\320\260/index.html" +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: Всесвітня мережа -slug: Glossary/Тенета -tags: - - WWW - - Інфраструктура - - Словник -translation_of: Glossary/World_Wide_Web ---- -

Всесві́тня мережа (англ. World Wide Web, скорочено: WWW, W3 чи просто Web), павутиння, тене́та, або веб — це всесвітня система відкритих документів і сторінок, доступних в мережі {{Glossary("Internet", "Інтернет")}}. Мережа — це не те саме, що й Інтернет: Мережа є лише одним із численних застосувань Інтернету та використовує останній як середовище передачі даних.

- -

Тім Бернерз-Лі запропонував архітектуру, яка стала відома під назвою Всесвітня мережа. Саме він в 1990-му році створив найперший веб-{{Glossary("Server", "сервер")}}, {{Glossary("Browser", "переглядач")}} та веб-сторінку на власному комп'ютері в лабораторії фізичних досліджень у ЦЕРН. В 1991-му він оголосив про своє творіння в групі новин alt.hypertext, позначивши мить, коли Мережу вперше було оприлюднено.

- -

Те, що нині відоме, як Тене́та або Мережа, має декілька складових:

- - - -

Зв'язування сторінок за допомогою {{Glossary("Hyperlink", "гіперпосилань")}} є ключовою можливістю, яка власне і дає можливість називати Тенета множиною пов'язаних документів.

- -

Невдовзі після створення Тенет, Тім Бернерз-Лі заснував об'єднання {{Glossary("W3C")}} (англ. World Wide Web Consortium — Консорціум World Wide Web) для стандартизації та подальшого розвитку мережі. Цей консорціум складається з основних цільових веб-груп, таких як розробники переглядачів, державні установи, дослідники та університети. Його місія включає освіту та поширення.

- -

Дізнатись більше

- -

Навчання

- - - -

Загальні відомості

- - diff --git "a/files/uk/glossary/\321\202\320\270\320\277/index.html" "b/files/uk/glossary/\321\202\320\270\320\277/index.html" deleted file mode 100644 index a426877aa6..0000000000 --- "a/files/uk/glossary/\321\202\320\270\320\277/index.html" +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Тип -slug: Glossary/Тип -tags: - - JavaScript - - Змінна - - Значення - - Словник - - Тип -translation_of: Glossary/Type ---- -

Тип (або тип даних) є характеристикою {{glossary("value", "значення")}}, що визначає формат його зберігання та способи обробки. Скажімо, ціле число можна помножити на дробове, але не на текстовий рядок.

- -

Крім того, кожен тип даних передбачає обмежену форматом зберігання множину значень. Наприклад, тип {{domxref("Boolean")}} у JavaScript може містити лише значення true та false, натомість тип {{domxref("String")}} містить текстові рядки, а {{domxref("Number")}} — цілі числа та десяткові дроби тощо.

- -

Дізнатись більше

- -

Загальні відомості

- - diff --git "a/files/uk/glossary/\321\204\321\203\320\275\320\272\321\206\321\226\321\217/index.html" "b/files/uk/glossary/\321\204\321\203\320\275\320\272\321\206\321\226\321\217/index.html" deleted file mode 100644 index b686ccc40c..0000000000 --- "a/files/uk/glossary/\321\204\321\203\320\275\320\272\321\206\321\226\321\217/index.html" +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: Функція -slug: Glossary/Функція -tags: - - IIFE - - JavaScript - - Словник - - Функція -translation_of: Glossary/Function ---- -

Функція - це фрагмент коду, що може бути викликаний іншим кодом чи сам собою, або {{Glossary("змінна")}} що відноситься до функцій. Коли функцію викликано, {{Glossary("арґументи")}} функція отримує як ввід, та може повертати вивід. Функції у {{glossary("JavaScript")}} це також {{glossary("Object","об'єкти")}}.

- -

Ім'я функції це {{Glossary("identifier","ідентифікатор")}} оголошений як частина оголошення функції чи виразу функції. {{Glossary("scope", "Область видимості")}} залежить від того, є функція оголошеною чи описаною.

- -

Різні види функцій

- -

Анонімна функція, це функція без імені функції:

- -
function () {};
-// або використовуючи ECMAScript 2015 запис зі стрілкою
-() => {};
-
- -

Названа функція, це функція що має ім'я:

- -
function foo() {};
-// або використовуючи ECMAScript 2015 запис зі стрілкою
-const foo = () => {};
-
- -

Внутрішня функція,  це функція всередині іншої функції (square в цьому випадку). Зовнішня функція, це функція, що містить всередині інші функції (addSquares в цьому випадку):

- -
function addSquares(a,b) {
-   function square(x) {
-      return x * x;
-   }
-   return square(a) + square(b);
-};
-// використовуючи ECMAScript 2015 запис зі стрілкою
-const addSquares = (a,b) => {
-   const square = x => x*x;
-   return square(a) + square(b);
-};
-
- -

Рекурсивна функція, це функція, що викликає сама себе. Дивіться {{Glossary("Рекурсія", "рекурсія")}}.

- -
function loop(x) {
-   if (x >= 10)
-      return;
-   loop(x + 1);
-};
-// використовуючи ECMAScript 2015 запис зі стрілкою
-const loop = x => {
-   if (x >= 10)
-      return;
-   loop(x + 1);
-};
-
- -

Негайно виконуваний функціональний вираз (IIFE, Immediately Invoked Function Expression) — це вираз, що одночасно оголошує {{Glossary("Функція", "функцію")}} в {{Glossary("JavaScript")}} та здійснює її виклик. Позаяк подальший виклик безіменної функції, посилання на яку відсутнє, неможливий, головним призначенням такого виразу є створення окремої області видимості, щоб уникнути засмічення зовнішньої (зазвичай, глобальної). Створити НВФВ можна, додавши ліву та праву дужки в кінці оголошення функції.

- -
// Error (https://en.wikipedia.org/wiki/Immediately-invoked_function_expression)
-/*
-​function foo() {
-    console.log('Hello Foo');
-}();
-*/
-
-(function foo() {
-    console.log("Hello Foo");
-}());
-
-(function food() {
-    console.log("Hello Food");
-})();
-
-
- -

Якщо хочете дізнатись бульше про НВФВ, перегляньте сторінку на Wikipedia : Immediately Invoked Function Expression

- -

Дізнатись більше

- -

Технічна довідка

- - diff --git "a/files/uk/glossary/\321\210\320\270\321\204\321\200/index.html" "b/files/uk/glossary/\321\210\320\270\321\204\321\200/index.html" deleted file mode 100644 index b86fe31272..0000000000 --- "a/files/uk/glossary/\321\210\320\270\321\204\321\200/index.html" +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: Шифр -slug: Glossary/Шифр -tags: - - Безпека - - Криптографія - - Приватність - - Словник -translation_of: Glossary/Cipher ---- -

В {{glossary("Криптографія","криптографії")}}, шифр це алгоритм, що спроможний {{glossary("encryption", "шифрувати")}} {{glossary("cleartext","відкритий текст")}} і зробити його нечитабельним, та {{glossary("decryption", "дешифрувати")}} його назад.

- -

Шифри набули широкої росповсюдженості ще до інформаційної ери (наприклад, шифри підстановки, шифри транспозиції та шифри перестановки), але жоден з них не був криптографічно безпечним, окрім Шифра Вернама.

- -

Сучасні шифри спроектовані щоб протистояти {{glossary("attack", "атакам")}} розробленим {{glossary("cryptanalysis", "криптоаналітиками")}}. Немає гарантій, що всі методи атак були відкриті, але кожен алгоритм заточений під відомі класи атак.

- -

Шифри працюють двома шляхами: блочні шифри на послідовних блоках чи буферах дати, та потокові шифри на потоці даних, що є безперервним (часто це потоки звуку чи відеo).

- -

Також існує класифікація за методами обробки їх {{glossary("key", "ключів")}}:

- - - -

Довідатись більше

- -

Загальні поняття

- - diff --git "a/files/uk/glossary/\321\210\320\270\321\204\321\200\320\276\321\202\320\265\320\272\321\201\321\202/index.html" "b/files/uk/glossary/\321\210\320\270\321\204\321\200\320\276\321\202\320\265\320\272\321\201\321\202/index.html" deleted file mode 100644 index 8e2561d57c..0000000000 --- "a/files/uk/glossary/\321\210\320\270\321\204\321\200\320\276\321\202\320\265\320\272\321\201\321\202/index.html" +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Шифротекст -slug: Glossary/Шифротекст -tags: - - Безпека - - Криптографія - - Приватність - - Словник -translation_of: Glossary/Ciphertext ---- -

В {{glossary("Криптографія","криптографії")}}, шифротекст це зашифроване повідомлення, що передає інформацію, але воно є нерозбірливим до процесу {{glossary("decryption","дешифрування")}} правильно підібраним {{glossary("Шифр","шифром")}} і правильним секретом (зазвичай це {{glossary("key","ключ")}}), що дасть змогу відтворити оригінальний {{glossary("cleartext","відкритий текст")}}. Рівень захищеності шифротексту і секретність вміщеної інформації залежать від використання безпечного шифру та зберігання ключа в таємниці.

- -

Довідатись більше

- -

Загальні поняття

- - diff --git "a/files/uk/glossary/\321\226\320\264\320\265\320\275\321\202\320\270\321\204\321\226\320\272\320\260\321\202\320\276\321\200/index.html" "b/files/uk/glossary/\321\226\320\264\320\265\320\275\321\202\320\270\321\204\321\226\320\272\320\260\321\202\320\276\321\200/index.html" deleted file mode 100644 index 5499efcc77..0000000000 --- "a/files/uk/glossary/\321\226\320\264\320\265\320\275\321\202\320\270\321\204\321\226\320\272\320\260\321\202\320\276\321\200/index.html" +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Ідентифікатор -slug: Glossary/ідентифікатор -tags: - - Початківець - - Словник -translation_of: Glossary/Identifier ---- -

Послідовність символів в коді, яка у недвозначний спосіб позначає (ідентифікує) {{glossary("variable", "змінну")}}, {{glossary("function", "функцію")}} або {{glossary("property", "властивість")}}, називається ідентифікатором.

- -

У {{glossary("JavaScript")}}, ідентифікатори можуть містити лише алфавітно-цифрові символи (а також "$" або "_"), і не можуть починатися з цифри. Ідентифікатор відрізняється від рядків тим, що рядок являє собою дані, натомість ідентифікатор є частиною коду. В JavaScript, немає можливості перетворити ідентифікатори в рядки, але іноді є можливість перетворити рядки у ідентифікатори.

- -

Дізнатись більше

- -

Загальні відомості

- - diff --git "a/files/uk/glossary/\321\226\320\275\321\201\321\202\321\200\321\203\320\272\321\206\321\226\321\217/index.html" "b/files/uk/glossary/\321\226\320\275\321\201\321\202\321\200\321\203\320\272\321\206\321\226\321\217/index.html" deleted file mode 100644 index 6364c4093e..0000000000 --- "a/files/uk/glossary/\321\226\320\275\321\201\321\202\321\200\321\203\320\272\321\206\321\226\321\217/index.html" +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: Інструкція -slug: Glossary/Інструкція -tags: - - Beginner - - CodingScripting - - Глосарій -translation_of: Glossary/Statement ---- -

В комп'ютерній мові програмування інструкція - це рядок коду, який виконує завдання. Кожна програма складається з послідовності інструкцій.

- -

Дізнатись більше

- -

Загальні знання

- - - -

Технічна довідка

- - - - - -
-
- -
-
diff --git "a/files/uk/glossary/\321\226\320\275\321\202\320\265\321\200\320\275\320\265\321\202/index.html" "b/files/uk/glossary/\321\226\320\275\321\202\320\265\321\200\320\275\320\265\321\202/index.html" deleted file mode 100644 index 6c4f91efff..0000000000 --- "a/files/uk/glossary/\321\226\320\275\321\202\320\265\321\200\320\275\320\265\321\202/index.html" +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Інтернет -slug: Glossary/Інтернет -tags: - - NeedsContent - - WWW - - Початківець - - Словник -translation_of: Glossary/Internet ---- -

Інтернет (також міжмере́жжя) — всесвітня мережа з мереж, яка використовує стіс {{glossary("protocol", "протоколів")}} {{glossary("TCP")}}/{{glossary("IPv6", "IP")}}.

- -

Дізнатись більше

- -

Навчання

- - diff --git a/files/uk/learn/accessibility/index.html b/files/uk/learn/accessibility/index.html new file mode 100644 index 0000000000..465926f459 --- /dev/null +++ b/files/uk/learn/accessibility/index.html @@ -0,0 +1,75 @@ +--- +title: Доступність +slug: Learn/Доступність +translation_of: Learn/Accessibility +--- +
{{LearnSidebar}}
+ +

Learning some HTML, CSS, and JavaScript is useful if you want to become a web developer. Beyond mechanical use, it's important to learn how to use these technologies responsibly so that all readers might use your creations on the web. To help you achieve this, this module will cover general best practices (which are demonstrated throughout the HTML, CSS, and JavaScript topics), cross browser testing, and some tips on enforcing accessibility from the start. We'll cover accessibility in special detail.

+ +

Overview

+ +

When someone describes a site as "accessible," they mean that any user can use all its features and content, regardless of how the user accesses the web — even and especially users with physical or mental impairments.

+ + + +

By default, HTML is accessible, if used correctly. Web accessibility involves ensuring that content remains accessible, regardless of who and how the web is accessed.

+ +

The Firefox Accessibility Inspector is a very useful tool for checking out accessibility issues on web pages. The following video provides a nice introduction to it:

+ +

{{EmbedYouTube("7mqqgIxX_NU")}}

+ +
+

Looking to become a front-end web developer?

+ +

We have put together a course that includes all the essential information you need to work towards your goal.

+ +

Get started

+
+ +

Prerequisites

+ +

To get the most out of this module, it would be a good idea to either work through at least the first two modules of the HTML, CSS, and JavaScript topics, or perhaps even better, work through the relevant parts of the accessibility module as you work through the related technology topics.

+ +
+

Note: If you are working on a computer/tablet/other devices where you don't have the ability to create your own files, you can try out most of the code examples in an online coding program such as JSBin or Glitch.

+
+ +

Guides

+ +
+
What is accessibility?
+
This article starts off the module with a good look at what accessibility is — this includes what groups of people we need to consider and why, what tools different people use to interact with the web, and how we can make accessibility part of our web development workflow.
+
HTML: A good basis for accessibility
+
A great deal of web content can be made accessible just by making sure the correct HTML elements are always used for the correct purpose . This article looks in detail at how HTML can be used to ensure maximum accessibility.
+
CSS and JavaScript accessibility best practices
+
CSS and JavaScript, when used properly, also have the potential to allow for accessible web experiences, but if misused they can significantly harm accessibility. This article outlines some CSS and JavaScript best practices that should be considered to ensure that even complex content is as accessible as possible.
+
WAI-ARIA basics
+
Following on from the previous article, sometimes making complex UI controls that involve unsemantic HTML and dynamic JavaScript-updated content can be difficult. WAI-ARIA is a technology that can help with such problems by adding in further semantics that browsers and assistive technologies can recognize and use to let users know what is going on. Here we'll show how to use it at a basic level to improve accessibility.
+
Accessible multimedia
+
Another category of content that can create accessibility problems is multimedia — video, audio, and image content need to be given proper textual alternatives, so they can be understood by assistive technologies and their users. This article shows how.
+
Mobile accessibility
+
With web access on mobile devices being so popular, and popular platforms such as iOS and Android having fully-fledged accessibility tools, it is important to consider the accessibility of your web content on these platforms. This article looks at mobile-specific accessibility considerations.
+
+ +

Assessments

+ +
+
Accessibility troubleshooting
+
+

In the assessment for this module, we present to you a simple site with several accessibility issues that you need to diagnose and fix.

+
+
+ +

See also

+ + diff --git a/files/uk/learn/css/css_layout/index.html b/files/uk/learn/css/css_layout/index.html new file mode 100644 index 0000000000..14ce8f9c63 --- /dev/null +++ b/files/uk/learn/css/css_layout/index.html @@ -0,0 +1,70 @@ +--- +title: CSS розмітка +slug: Learn/CSS/CSS_розмітка +translation_of: Learn/CSS/CSS_layout +--- +
{{LearnSidebar}}
+ +

At this point we've already looked at CSS fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. Now it's time to look at how to place your boxes in the right place in relation to the viewport, and one another. We have covered the necessary prerequisites so we can now dive deep into CSS layout, looking at different display settings, modern layout tools like flexbox, CSS grid, and positioning, and some of the legacy techniques you might still want to know about.

+ +
+

Looking to become a front-end web developer?

+ +

We have put together a course that includes all the essential information you need to work towards your goal.

+ +

Get started

+
+ +

Prerequisites

+ +

Before starting this module, you should already:

+ +
    +
  1. Have basic familiarity with HTML, as discussed in the Introduction to HTML module.
    2. +
  2. Be comfortable with CSS fundamentals, as discussed in Introduction to CSS.
    3. +
  3. Understand how to style boxes.
    4. +
+ +
+

Note: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as JSBin or Glitch.

+
+ +

Guides

+ +

These articles will provide instruction on the fundamental layout tools and techniques available in CSS. At the end of the lessons is an assessment to help you check your understanding of layout methods, by laying out a webpage.

+ +
+
Introduction to CSS layout
+
This article will recap some of the CSS layout features we've already touched upon in previous modules — such as different {{cssxref("display")}} values — and introduce some of the concepts we'll be covering throughout this module.
+
Normal flow
+
Elements on webpages lay themselves out according to normal flow - until we do something to change that. This article explains the basics of normal flow as a grounding for learning how to change it.
+
Flexbox
+
Flexbox is a one-dimensional layout method for laying out items in rows or columns. Items flex to fill additional space and shrink to fit into smaller spaces. This article explains all the fundamentals. After studying this guide you can test your flexbox skills to check your understanding before moving on.
+
Grids
+
CSS Grid Layout is a two-dimensional layout system for the web. It lets you lay content out in rows and columns, and has many features that make building complex layouts straightforward. This article will give you all you need to know to get started with page layout, then test your grid skills before moving on.
+
Floats
+
Originally for floating images inside blocks of text, the {{cssxref("float")}} property became one of the most commonly used tools for creating multiple column layouts on webpages. With the advent of Flexbox and Grid it has now returned to its original purpose, as this article explains.
+
Positioning
+
Positioning allows you to take elements out of the normal document layout flow, and make them behave differently, for example sitting on top of one another, or always remaining in the same place inside the browser viewport. This article explains the different {{cssxref("position")}} values, and how to use them.
+
Multiple-column layout
+
The multiple-column layout specification gives you a method of laying content out in columns, as you might see in a newspaper. This article explains how to use this feature.
+
Responsive design
+
As more diverse screen sizes have appeared on web-enabled devices, the concept of responsive web design (RWD) has appeared: a set of practices that allows web pages to alter their layout and appearance to suit different screen widths, resolutions, etc. It is an idea that changed the way we design for a multi-device web, and in this article we'll help you understand the main techniques you need to know to master it.
+
Beginner's guide to media queries
+
The CSS Media Query gives you a way to apply CSS only when the browser and device environment matches a rule that you specify, for example "viewport is wider than 480 pixels". Media queries are a key part of responsive web design, as they allow you to create different layouts depending on the size of the viewport, but they can also be used to detect other things about the environment your site is running on, for example whether the user is using a touchscreen rather than a mouse. In this lesson you will first learn about the syntax used in media queries, and then move on to use them in a worked example showing how a simple design might be made responsive.
+
Legacy layout methods
+
Grid systems are a very common feature used in CSS layouts, and before CSS Grid Layout they tended to be implemented using floats or other layout features. You imagine your layout as a set number of columns (e.g. 4, 6, or 12), and then fit your content columns inside these imaginary columns. In this article we'll explore how these older methods work, in order that you understand how they were used if you work on an older project.
+
Supporting older browsers
+
+

In this module we recommend using Flexbox and Grid as the main layout methods for your designs. However there will be visitors to your site who use older browsers, or browsers which do not support the methods you have used. This will always be the case on the web — as new features are developed, different browsers will prioritise different things. This article explains how to use modern web techniques without locking out users of older technology.

+
+
Assessment: Fundamental layout comprehension
+
An assessment to test your knowledge of different layout methods by laying out a webpage.
+
+ +

See also

+ +
+
Practical positioning examples
+
This article shows how to build some real world examples to illustrate what kinds of things you can do with positioning.
+
diff --git "a/files/uk/learn/css/css_\321\200\320\276\320\267\320\274\321\226\321\202\320\272\320\260/index.html" "b/files/uk/learn/css/css_\321\200\320\276\320\267\320\274\321\226\321\202\320\272\320\260/index.html" deleted file mode 100644 index 14ce8f9c63..0000000000 --- "a/files/uk/learn/css/css_\321\200\320\276\320\267\320\274\321\226\321\202\320\272\320\260/index.html" +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: CSS розмітка -slug: Learn/CSS/CSS_розмітка -translation_of: Learn/CSS/CSS_layout ---- -
{{LearnSidebar}}
- -

At this point we've already looked at CSS fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. Now it's time to look at how to place your boxes in the right place in relation to the viewport, and one another. We have covered the necessary prerequisites so we can now dive deep into CSS layout, looking at different display settings, modern layout tools like flexbox, CSS grid, and positioning, and some of the legacy techniques you might still want to know about.

- -
-

Looking to become a front-end web developer?

- -

We have put together a course that includes all the essential information you need to work towards your goal.

- -

Get started

-
- -

Prerequisites

- -

Before starting this module, you should already:

- -
    -
  1. Have basic familiarity with HTML, as discussed in the Introduction to HTML module.
    2. -
  2. Be comfortable with CSS fundamentals, as discussed in Introduction to CSS.
    3. -
  3. Understand how to style boxes.
    4. -
- -
-

Note: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as JSBin or Glitch.

-
- -

Guides

- -

These articles will provide instruction on the fundamental layout tools and techniques available in CSS. At the end of the lessons is an assessment to help you check your understanding of layout methods, by laying out a webpage.

- -
-
Introduction to CSS layout
-
This article will recap some of the CSS layout features we've already touched upon in previous modules — such as different {{cssxref("display")}} values — and introduce some of the concepts we'll be covering throughout this module.
-
Normal flow
-
Elements on webpages lay themselves out according to normal flow - until we do something to change that. This article explains the basics of normal flow as a grounding for learning how to change it.
-
Flexbox
-
Flexbox is a one-dimensional layout method for laying out items in rows or columns. Items flex to fill additional space and shrink to fit into smaller spaces. This article explains all the fundamentals. After studying this guide you can test your flexbox skills to check your understanding before moving on.
-
Grids
-
CSS Grid Layout is a two-dimensional layout system for the web. It lets you lay content out in rows and columns, and has many features that make building complex layouts straightforward. This article will give you all you need to know to get started with page layout, then test your grid skills before moving on.
-
Floats
-
Originally for floating images inside blocks of text, the {{cssxref("float")}} property became one of the most commonly used tools for creating multiple column layouts on webpages. With the advent of Flexbox and Grid it has now returned to its original purpose, as this article explains.
-
Positioning
-
Positioning allows you to take elements out of the normal document layout flow, and make them behave differently, for example sitting on top of one another, or always remaining in the same place inside the browser viewport. This article explains the different {{cssxref("position")}} values, and how to use them.
-
Multiple-column layout
-
The multiple-column layout specification gives you a method of laying content out in columns, as you might see in a newspaper. This article explains how to use this feature.
-
Responsive design
-
As more diverse screen sizes have appeared on web-enabled devices, the concept of responsive web design (RWD) has appeared: a set of practices that allows web pages to alter their layout and appearance to suit different screen widths, resolutions, etc. It is an idea that changed the way we design for a multi-device web, and in this article we'll help you understand the main techniques you need to know to master it.
-
Beginner's guide to media queries
-
The CSS Media Query gives you a way to apply CSS only when the browser and device environment matches a rule that you specify, for example "viewport is wider than 480 pixels". Media queries are a key part of responsive web design, as they allow you to create different layouts depending on the size of the viewport, but they can also be used to detect other things about the environment your site is running on, for example whether the user is using a touchscreen rather than a mouse. In this lesson you will first learn about the syntax used in media queries, and then move on to use them in a worked example showing how a simple design might be made responsive.
-
Legacy layout methods
-
Grid systems are a very common feature used in CSS layouts, and before CSS Grid Layout they tended to be implemented using floats or other layout features. You imagine your layout as a set number of columns (e.g. 4, 6, or 12), and then fit your content columns inside these imaginary columns. In this article we'll explore how these older methods work, in order that you understand how they were used if you work on an older project.
-
Supporting older browsers
-
-

In this module we recommend using Flexbox and Grid as the main layout methods for your designs. However there will be visitors to your site who use older browsers, or browsers which do not support the methods you have used. This will always be the case on the web — as new features are developed, different browsers will prioritise different things. This article explains how to use modern web techniques without locking out users of older technology.

-
-
Assessment: Fundamental layout comprehension
-
An assessment to test your knowledge of different layout methods by laying out a webpage.
-
- -

See also

- -
-
Practical positioning examples
-
This article shows how to build some real world examples to illustrate what kinds of things you can do with positioning.
-
diff --git a/files/uk/learn/css/first_steps/how_css_works/index.html b/files/uk/learn/css/first_steps/how_css_works/index.html new file mode 100644 index 0000000000..f1ee8b66b1 --- /dev/null +++ b/files/uk/learn/css/first_steps/how_css_works/index.html @@ -0,0 +1,114 @@ +--- +title: What is CSS? +slug: Web/Guide/CSS/Getting_started/What_is_CSS +translation_of: Learn/CSS/First_steps/How_CSS_works +translation_of_original: Web/Guide/CSS/Getting_started/What_is_CSS +--- +
{{CSSTutorialTOC}}
+ +

{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started", "Getting started")}} This first section of the CSS Getting Started tutorial briefly explains Cascading Style Sheets (CSS). You'll also create a simple document to use for CSS exercises in subsequent sections.

+ +

Інформація: Що таке CSS?

+ +

Каскадні таблиці стилів (англ. - Cascading Style Sheets  CSS) - мова, що визначає як вміст сторінки буде візуально офрмлений та представлений користувачам. Складові документу ж описують мовою розмітки, на зразок HTML.

+ +

Документ являє собою інформацію, структуровану для подання з використанням мови розмітки.

+ +

Presenting a document to a user means converting it into a usable form for your audience. Browsers, like Firefox, Chrome or Internet Explorer, are designed to present documents visually, for example, on a computer screen, projector or printer.

+ +
+

Приклади

+ + +
+ +

In this tutorial, boxes captioned Детальніше like the one below contain optional information and links to more resources on a concept or topic covered in a section. Read them as you see them, follow the links, or skip these boxes and return to read them later.

+ +
+
Детальніше
+ +

Документ- це не те ж саме, що і файл. Втім, ти можеш зберегти документ у файлі.

+ +

Документ, який ти зараз читаєш не збережений окремим файлом. Коли твій веб-браузер переходить на цю сторінку, сервер робить запит до бази данних та генерує документ, зібравши частини документу з різних фалів. Однак, в цьому уроці ти будеш працювати також і з  документами, збереженими у файлах.

+ +

Більше інформації про документи та мови розміток ти можеш знайти в фнших розділах цього веб-сайту:

+ + + + + + + + + + + + + + + + + + + + +
HTMLдля веб-сторінок
XMLдля структурованих документів в загальному
SVGдля графіки
XULдля інтерфейсів користувачів у браузері Mozilla
+ +

У другій частині ціього навчального посібника ти знайдеш приклади цих мов розміток.

+
+ +
+
Детальніше
+ +

In formal CSS terminology, the program that presents a document to a user is called a user agent (UA). A browser is just one kind of UA. CSS is not just for browsers or visual presentation, but for Part I of this tutorial, you'll only work with CSS in a browser.

+ +

For formal definitions of terminology relating to CSS, see Definitions in the CSS Specification from the World Wide Web Consortium (W3C), an international community that sets open standards for the web.

+
+ +

До роботи: Створення документу

+ +
    +
  1. Створи нову паку на своєму комп'ютері для того, щоб зберігати та упорядковувати вправи з наших уроків.
    2. +
  2. Open your text editor and create a new text file. This file will contain the document for the next few tutorial exercises.
    3. +
  3. Copy and paste the HTML shown below. Save the file using the name doc1.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>
    + +

    {{ LiveSampleLink('Action_Creating_a_document', 'View above Demo') }}

    +
    4. +
  4. Open a new tab or a new window in your browser, then open the file you just created. +

    You should see the text with the initial letters bold, like this:

    + + + + + + + +
    Cascading Style Sheets
    + +

    What you see in your browser might not look exactly the same because of settings in your browser and in this wiki. Some differences in the font, spacing and colors are not important.

    +
    5. +
+ +

Що далі?

+ +

{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Why use CSS?")}}Your document does not yet use CSS. In the next section you'll use CSS to style your document.

diff --git a/files/uk/learn/css/first_steps/what_is_css/index.html b/files/uk/learn/css/first_steps/what_is_css/index.html new file mode 100644 index 0000000000..a1ee6d30ea --- /dev/null +++ b/files/uk/learn/css/first_steps/what_is_css/index.html @@ -0,0 +1,129 @@ +--- +title: Що таке CSS? +slug: Learn/CSS/First_steps/Що_таке_CSS +tags: + - CSS + - Вступ до CSS + - Модулі + - Навчання + - Синтаксис + - Специфікація + - новачок +translation_of: Learn/CSS/First_steps/What_is_CSS +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}
+ +

{{Glossary("CSS")}} (Каскадні таблиці стилів) дозволяє створювати чудові веб-сторінки, але як це працює під кришкою? Ця стаття пояснює, що таке CSS, на прикладі простого синтаксису, а також висвітлює деякі ключові терміни про мову.

+ + + + + + + + + + + + +
Передумови:Основна комп'ютерна грамотність, встановлено базове програмне забезпечення, основні знання про робота з файлами, та HTML базовий (вивчыть Вступ до HTML)
+

Мета:

+ + + 		To learn what CSS is.
+ +

У вступі до модуля HTML ми розглянули, що таке HTML, і як він використовується для розмітки документів. Ці документи можна прочитати у веб-браузері. Заголовки виглядатимуть більше, ніж звичайний текст, абзаци перериваються на новий рядок і мають пробіл між ними. Посилання кольорові та підкреслені, щоб відрізняти їх від решти тексту. Що ви бачите, це стилі браузера за замовчуванням - дуже основні стилі, які браузер застосовує до HTML, щоб переконатися, що він буде в основному читабельним, навіть якщо автор сторінки не вказав явного стилю.

+ +

The default styles used by a browser

+ +

Однак Інтернет був би нудним місцем, якби всі веб-сайти виглядали так. За допомогою CSS ви можете точно контролювати, як виглядають елементи HTML у браузері, представляючи свою розмітку, використовуючи будь-який дизайн, який вам подобається.

+ +

Для чого CSS?

+ +

Як ми вже згадували раніше, CSS - це мова, яка визначає, як документи подаються користувачам - як вони оформляються, викладаються тощо.A document is usually a text file structured using a markup language — {{Glossary("HTML")}} is the most common markup language, but you may also come across other markup languages such as {{Glossary("SVG")}} or {{Glossary("XML")}}.

+ +

Подання документа користувачеві означає перетворення його в форму, яку можна використовувати вашій аудиторії. {{Глосарій ("браузер", "Браузери")}}, як {{Глосарій ("Mozilla Firefox", "Firefox")}}, {{Глосарій ("Google Chrome", "Chrome")}} або { {Глосарій ("Microsoft Edge", "Edge")}} призначений для візуального представлення документів, наприклад, на екрані комп'ютера, проекторі чи принтері.

+ +
+

Примітка: Іноді браузер називається {{Glossary ("Агент користувача", "Агент користувача")}}, що в основному означає комп'ютерну програму, яка представляє людину всередині комп'ютерної системи. Браузери - це основний тип агента користувача, про який ми думаємо, коли говоримо про CSS, однак, це не єдиний. Доступні й інші користувацькі агенти - такі, які перетворюють документи HTML та CSS у PDF-файли для друку.

+
+ +

CSS можна використовувати для дуже базового стилю тексту документа - наприклад, для зміни кольору та розміру заголовків та посилань. Його можна використовувати для створення макета - наприклад, перетворення одного стовпця тексту в макет з основною областю вмісту та бічною панеллю для пов'язаної інформації. Його навіть можна використовувати для таких ефектів, як анімація. Перегляньте посилання в цьому пункті для конкретних прикладів.

+ +

Синтаксис CSS

+ +

CSS є мовою на основі правил - ви визначаєте правила, що визначають групи стилів, які слід застосовувати до певних елементів або груп елементів на вашій веб-сторінці. Наприклад, "Я хочу, щоб основний заголовок на моїй сторінці відображався як великий червоний текст".

+ +

У наведеному нижче коді показано дуже просте правило CSS, яке дозволило б досягти описаного вище стилю:

+ +
h1 {
+    color: red;
+    font-size: 5em;
+}
+ +

Правило відкривається за допомогою {{Глосарій ("CSS Selector", "Selector")}}. Це вибирає HTML-елемент, який ми будемо стилювати. У цьому випадку ми створюємо заголовки рівня першого рівня ({{htmlelement ("h1")}}).

+ +

Потім у нас є набір фігурних брекетів { }. Всередині буде одна чи кілька декларацій, які мають форму властивостей і значень пар. Кожна пара визначає властивість елемента (-ів), який ми вибираємо, а потім значення, яке ми хотіли б надати властивості.

+ +

Перед двокрапкою ми маємо властивість, а після двокрапки - значення. CSS {{Глосарій ("властивість / CSS", "властивості")}} мають різні допустимі значення, залежно від того, яке властивість задано. У нашому прикладі ми маємо властивість кольору, яка може приймати різні значення кольорів. У нас також є  font-size влыстивість. Ця властивість може приймати різні розмір одиниць.

+ +

Таблиця стилів CSS міститиме багато таких правил, написаних один за одним.

+ +
h1 {
+    color: red;
+    font-size: 5em;
+}
+
+p {
+    color: black;
+}
+ +

Ви побачите, що швидко засвоюєте деякі значення, тоді як інші вам потрібно буде шукати. Окремі сторінки властивостей на MDN дають вам швидкий спосіб пошуку властивостей та їх значень, коли ви забудете, або хочете знати, що ще можна використовувати як значення.

+ +
+

Примітка: Ви можете знайти посилання на всі сторінки властивостей CSS (разом з іншими функціями CSS), перелічені в розділі MDN CSS reference. Крім того, вам слід звикнути до пошуку "mdn css-feature-name" у своїй улюбленій пошуковій системі, коли вам потрібно дізнатися більше інформації про функцію CSS. Наприклад, спробуйте шукати "mdn color" і "mdn font-size"!

+
+ +

CSS Модулі

+ +

Оскільки існує так багато речей, які можна стилювати за допомогою CSS, мова розбивається на модулі. Ви побачите посилання на ці модулі під час вивчення MDN та багато сторінок документації, організованих навколо певного модуля. Наприклад, ви можете ознайомитися з посиланням на MDN на модуль "Фони та межі", щоб дізнатися, яке його призначення, а також які різні властивості та інші особливості він містить. Ви також знайдете посилання на специфікацію CSS, яка визначає технологію (див. Нижче).

+ +

На цьому етапі вам не потрібно занадто хвилюватися про структурування CSS, однак це може полегшити пошук інформації, якщо, наприклад, ви знаєте, що певне властивість, можливо, знайдеться серед інших подібних речей і є тому, ймовірно, в тій же специфікації.

+ +

Для конкретного прикладу повернемося до модуля «Фони та межі» - ви можете подумати, що це має логічний сенс для background-color та border-color властивості, що визначаються в цьому модулі. І ти будеш прав.

+ +

CSS специфікація

+ +

Усі технології веб-стандартів (HTML, CSS, JavaScript тощо) визначені в гігантських документах, що називаються специфікаціями (або просто "специфікаціями"), які публікуються організаціями зі стандартів (наприклад, {{глосарій ("W3C")}}, {{глосарій ("WHATWG")}}, {{глосарій ("ECMA")}} або {{глосарій ("Хронос")}}) і точно визначте, як повинні поводитися ці технології.

+ +

CSS не відрізняється - він розроблений групою в межах W3C під назвою CSS Робоча група. Ця група складається з представників постачальників браузерів та інших компаній, які мають інтерес до CSS. Є й інші люди, відомі як запрошені експерти, які виступають незалежними голосами; вони не пов'язані з організацією-членом.

+ +

Робоча група CSS розробляє або уточнює нові функції CSS. Іноді тому, що конкретний браузер зацікавлений у певних можливостях, інший раз через те, що веб-дизайнери та розробники просять про функцію, а іноді тому, що сама Робоча група визначила вимогу. CSS постійно розвивається, доступні нові функції. Однак, головне в CSS - це те, що всі дуже наполегливо працюють, щоб ніколи не змінювати речі таким чином, щоб зламати старі веб-сайти. Веб-сайт, побудований у 2000 році, використовуючи доступний тоді обмежений CSS, і сьогодні повинен використовуватись у веб-переглядачі!

+ +

Як новачок у CSS, ймовірно, ви знайдете специфікації CSS непосильними - вони призначені для інженерів використовувати для впровадження підтримки функцій в агентах користувачів, а не для веб-розробників, які читають, щоб зрозуміти CSS. Багато досвідчених розробників швидше звертаються до документації MDN або інших навчальних посібників. Однак варто знати, що вони існують, розуміючи взаємозв'язок між CSS, який ви використовуєте, підтримкою браузера (див. Нижче) та специфікаціями.

+ +

Підтримка браузера

+ +

Після того, як CSS буде визначено, він може бути корисним для нас лише при розробці веб-сторінок, якщо один або кілька браузерів реалізували його. Це означає, що код написаний, щоб перетворити інструкцію з нашого CSS-файлу на щось, що може бути виведене на екран. Ми розглянемо цей процес докладніше на уроці Як працює CSS. Всі браузери незвично одночасно реалізовувати функцію, тому зазвичай існує розрив, де можна використовувати частину CSS в деяких браузерах, а не в інших. З цієї причини корисність перевірити стан реалізації. На кожній сторінці властивостей на MDN ви можете побачити статус об’єкта, який вас цікавить, тож ви можете сказати, чи зможете ви ним користуватися на веб-сайті.

+ +

Далі йде таблиця даних compat для властивості CSS font-family .

+ +

{{Compat("css.properties.font-family")}}

+ +

Що далі

+ +

Тепер, коли ви зрозуміли, що таке CSS, перейдемо до Початок роботи з CSS де ви можете почати самостійно писати деякі CSS.

+ +

{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}

+ +

In this module

+ +
    +
  1. Що таке CSS?
    2. +
  2. Початок роботи з CSS
    3. +
  3. Як структурується CSS
    4. +
  4. Як працює CSS
    5. +
  5. Використовуйте свої нові знання
    6. +
diff --git "a/files/uk/learn/css/first_steps/\321\211\320\276_\321\202\320\260\320\272\320\265_css/index.html" "b/files/uk/learn/css/first_steps/\321\211\320\276_\321\202\320\260\320\272\320\265_css/index.html" deleted file mode 100644 index a1ee6d30ea..0000000000 --- "a/files/uk/learn/css/first_steps/\321\211\320\276_\321\202\320\260\320\272\320\265_css/index.html" +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: Що таке CSS? -slug: Learn/CSS/First_steps/Що_таке_CSS -tags: - - CSS - - Вступ до CSS - - Модулі - - Навчання - - Синтаксис - - Специфікація - - новачок -translation_of: Learn/CSS/First_steps/What_is_CSS ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}
- -

{{Glossary("CSS")}} (Каскадні таблиці стилів) дозволяє створювати чудові веб-сторінки, але як це працює під кришкою? Ця стаття пояснює, що таке CSS, на прикладі простого синтаксису, а також висвітлює деякі ключові терміни про мову.

- - - - - - - - - - - - -
Передумови:Основна комп'ютерна грамотність, встановлено базове програмне забезпечення, основні знання про робота з файлами, та HTML базовий (вивчыть Вступ до HTML)
-

Мета:

- - - 		To learn what CSS is.
- -

У вступі до модуля HTML ми розглянули, що таке HTML, і як він використовується для розмітки документів. Ці документи можна прочитати у веб-браузері. Заголовки виглядатимуть більше, ніж звичайний текст, абзаци перериваються на новий рядок і мають пробіл між ними. Посилання кольорові та підкреслені, щоб відрізняти їх від решти тексту. Що ви бачите, це стилі браузера за замовчуванням - дуже основні стилі, які браузер застосовує до HTML, щоб переконатися, що він буде в основному читабельним, навіть якщо автор сторінки не вказав явного стилю.

- -

The default styles used by a browser

- -

Однак Інтернет був би нудним місцем, якби всі веб-сайти виглядали так. За допомогою CSS ви можете точно контролювати, як виглядають елементи HTML у браузері, представляючи свою розмітку, використовуючи будь-який дизайн, який вам подобається.

- -

Для чого CSS?

- -

Як ми вже згадували раніше, CSS - це мова, яка визначає, як документи подаються користувачам - як вони оформляються, викладаються тощо.A document is usually a text file structured using a markup language — {{Glossary("HTML")}} is the most common markup language, but you may also come across other markup languages such as {{Glossary("SVG")}} or {{Glossary("XML")}}.

- -

Подання документа користувачеві означає перетворення його в форму, яку можна використовувати вашій аудиторії. {{Глосарій ("браузер", "Браузери")}}, як {{Глосарій ("Mozilla Firefox", "Firefox")}}, {{Глосарій ("Google Chrome", "Chrome")}} або { {Глосарій ("Microsoft Edge", "Edge")}} призначений для візуального представлення документів, наприклад, на екрані комп'ютера, проекторі чи принтері.

- -
-

Примітка: Іноді браузер називається {{Glossary ("Агент користувача", "Агент користувача")}}, що в основному означає комп'ютерну програму, яка представляє людину всередині комп'ютерної системи. Браузери - це основний тип агента користувача, про який ми думаємо, коли говоримо про CSS, однак, це не єдиний. Доступні й інші користувацькі агенти - такі, які перетворюють документи HTML та CSS у PDF-файли для друку.

-
- -

CSS можна використовувати для дуже базового стилю тексту документа - наприклад, для зміни кольору та розміру заголовків та посилань. Його можна використовувати для створення макета - наприклад, перетворення одного стовпця тексту в макет з основною областю вмісту та бічною панеллю для пов'язаної інформації. Його навіть можна використовувати для таких ефектів, як анімація. Перегляньте посилання в цьому пункті для конкретних прикладів.

- -

Синтаксис CSS

- -

CSS є мовою на основі правил - ви визначаєте правила, що визначають групи стилів, які слід застосовувати до певних елементів або груп елементів на вашій веб-сторінці. Наприклад, "Я хочу, щоб основний заголовок на моїй сторінці відображався як великий червоний текст".

- -

У наведеному нижче коді показано дуже просте правило CSS, яке дозволило б досягти описаного вище стилю:

- -
h1 {
-    color: red;
-    font-size: 5em;
-}
- -

Правило відкривається за допомогою {{Глосарій ("CSS Selector", "Selector")}}. Це вибирає HTML-елемент, який ми будемо стилювати. У цьому випадку ми створюємо заголовки рівня першого рівня ({{htmlelement ("h1")}}).

- -

Потім у нас є набір фігурних брекетів { }. Всередині буде одна чи кілька декларацій, які мають форму властивостей і значень пар. Кожна пара визначає властивість елемента (-ів), який ми вибираємо, а потім значення, яке ми хотіли б надати властивості.

- -

Перед двокрапкою ми маємо властивість, а після двокрапки - значення. CSS {{Глосарій ("властивість / CSS", "властивості")}} мають різні допустимі значення, залежно від того, яке властивість задано. У нашому прикладі ми маємо властивість кольору, яка може приймати різні значення кольорів. У нас також є  font-size влыстивість. Ця властивість може приймати різні розмір одиниць.

- -

Таблиця стилів CSS міститиме багато таких правил, написаних один за одним.

- -
h1 {
-    color: red;
-    font-size: 5em;
-}
-
-p {
-    color: black;
-}
- -

Ви побачите, що швидко засвоюєте деякі значення, тоді як інші вам потрібно буде шукати. Окремі сторінки властивостей на MDN дають вам швидкий спосіб пошуку властивостей та їх значень, коли ви забудете, або хочете знати, що ще можна використовувати як значення.

- -
-

Примітка: Ви можете знайти посилання на всі сторінки властивостей CSS (разом з іншими функціями CSS), перелічені в розділі MDN CSS reference. Крім того, вам слід звикнути до пошуку "mdn css-feature-name" у своїй улюбленій пошуковій системі, коли вам потрібно дізнатися більше інформації про функцію CSS. Наприклад, спробуйте шукати "mdn color" і "mdn font-size"!

-
- -

CSS Модулі

- -

Оскільки існує так багато речей, які можна стилювати за допомогою CSS, мова розбивається на модулі. Ви побачите посилання на ці модулі під час вивчення MDN та багато сторінок документації, організованих навколо певного модуля. Наприклад, ви можете ознайомитися з посиланням на MDN на модуль "Фони та межі", щоб дізнатися, яке його призначення, а також які різні властивості та інші особливості він містить. Ви також знайдете посилання на специфікацію CSS, яка визначає технологію (див. Нижче).

- -

На цьому етапі вам не потрібно занадто хвилюватися про структурування CSS, однак це може полегшити пошук інформації, якщо, наприклад, ви знаєте, що певне властивість, можливо, знайдеться серед інших подібних речей і є тому, ймовірно, в тій же специфікації.

- -

Для конкретного прикладу повернемося до модуля «Фони та межі» - ви можете подумати, що це має логічний сенс для background-color та border-color властивості, що визначаються в цьому модулі. І ти будеш прав.

- -

CSS специфікація

- -

Усі технології веб-стандартів (HTML, CSS, JavaScript тощо) визначені в гігантських документах, що називаються специфікаціями (або просто "специфікаціями"), які публікуються організаціями зі стандартів (наприклад, {{глосарій ("W3C")}}, {{глосарій ("WHATWG")}}, {{глосарій ("ECMA")}} або {{глосарій ("Хронос")}}) і точно визначте, як повинні поводитися ці технології.

- -

CSS не відрізняється - він розроблений групою в межах W3C під назвою CSS Робоча група. Ця група складається з представників постачальників браузерів та інших компаній, які мають інтерес до CSS. Є й інші люди, відомі як запрошені експерти, які виступають незалежними голосами; вони не пов'язані з організацією-членом.

- -

Робоча група CSS розробляє або уточнює нові функції CSS. Іноді тому, що конкретний браузер зацікавлений у певних можливостях, інший раз через те, що веб-дизайнери та розробники просять про функцію, а іноді тому, що сама Робоча група визначила вимогу. CSS постійно розвивається, доступні нові функції. Однак, головне в CSS - це те, що всі дуже наполегливо працюють, щоб ніколи не змінювати речі таким чином, щоб зламати старі веб-сайти. Веб-сайт, побудований у 2000 році, використовуючи доступний тоді обмежений CSS, і сьогодні повинен використовуватись у веб-переглядачі!

- -

Як новачок у CSS, ймовірно, ви знайдете специфікації CSS непосильними - вони призначені для інженерів використовувати для впровадження підтримки функцій в агентах користувачів, а не для веб-розробників, які читають, щоб зрозуміти CSS. Багато досвідчених розробників швидше звертаються до документації MDN або інших навчальних посібників. Однак варто знати, що вони існують, розуміючи взаємозв'язок між CSS, який ви використовуєте, підтримкою браузера (див. Нижче) та специфікаціями.

- -

Підтримка браузера

- -

Після того, як CSS буде визначено, він може бути корисним для нас лише при розробці веб-сторінок, якщо один або кілька браузерів реалізували його. Це означає, що код написаний, щоб перетворити інструкцію з нашого CSS-файлу на щось, що може бути виведене на екран. Ми розглянемо цей процес докладніше на уроці Як працює CSS. Всі браузери незвично одночасно реалізовувати функцію, тому зазвичай існує розрив, де можна використовувати частину CSS в деяких браузерах, а не в інших. З цієї причини корисність перевірити стан реалізації. На кожній сторінці властивостей на MDN ви можете побачити статус об’єкта, який вас цікавить, тож ви можете сказати, чи зможете ви ним користуватися на веб-сайті.

- -

Далі йде таблиця даних compat для властивості CSS font-family .

- -

{{Compat("css.properties.font-family")}}

- -

Що далі

- -

Тепер, коли ви зрозуміли, що таке CSS, перейдемо до Початок роботи з CSS де ви можете почати самостійно писати деякі CSS.

- -

{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}

- -

In this module

- -
    -
  1. Що таке CSS?
    2. -
  2. Початок роботи з CSS
    3. -
  3. Як структурується CSS
    4. -
  4. Як працює CSS
    5. -
  5. Використовуйте свої нові знання
    6. -
diff --git a/files/uk/learn/css/styling_text/styling_lists/index.html b/files/uk/learn/css/styling_text/styling_lists/index.html new file mode 100644 index 0000000000..da8f62ab84 --- /dev/null +++ b/files/uk/learn/css/styling_text/styling_lists/index.html @@ -0,0 +1,394 @@ +--- +title: Стилі списків +slug: Learn/CSS/Styling_text/Стилі_списків +tags: + - CSS + - Початківець + - Спискі + - Стаття + - Стилі + - Текст +translation_of: Learn/CSS/Styling_text/Styling_lists +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}
+ +

Здебільшого Списки ведуть себе як будь-який інший текст, але є деякі властивості CSS, специфічні для списків, які вам потрібно знати, а також деякі найкращі способи розгляду. Ця стаття пояснює все.

+ + + + + + + + + + + + +
Передумови:Основна комп'ютерна грамотність, основи HTML (вивчення Вступу до HTML), основи CSS (вивчення Вступу до CSS), Основи тексту та шрифтів CSS.
Мета:Познайомитися з найкращими практиками та властивостями, пов'язаними зі списками стилів.
+ +

Простий приклад списку

+ +

Почнемо з того, давайте подивимося на приклад простого списку. У цій статті ми розглянемо списки неупорядкованих, упорядкованих та опису - у всіх є стилістичні функції, схожі на деякі,  що є характерними для їхнього типу списку. Неперевершений приклад доступний на Github ( також перевірте цей код)

+ +

Приклад HTML для нашого списку виглядає так:

+ +
<h2>Shopping (unordered) list</h2>
+
+<p>Paragraph for reference, paragraph for reference, paragraph for reference,
+paragraph for reference, paragraph for reference, paragraph for reference.</p>
+
+<ul>
+  <li>Humous</li>
+  <li>Pitta</li>
+  <li>Green salad</li>
+  <li>Halloumi</li>
+</ul>
+
+<h2>Recipe (ordered) list</h2>
+
+<p>Paragraph for reference, paragraph for reference, paragraph for reference,
+paragraph for reference, paragraph for reference, paragraph for reference.</p>
+
+<ol>
+  <li>Toast pitta, leave to cool, then slice down the edge.</li>
+  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
+  <li>Wash and chop the salad.</li>
+  <li>Fill pitta with salad, humous, and fried halloumi.</li>
+</ol>
+
+<h2>Ingredient description list</h2>
+
+<p>Paragraph for reference, paragraph for reference, paragraph for reference,
+paragraph for reference, paragraph for reference, paragraph for reference.</p>
+
+<dl>
+  <dt>Humous</dt>
+  <dd>A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.</dd>
+  <dt>Pitta</dt>
+  <dd>A soft, slightly leavened flatbread.</dd>
+  <dt>Halloumi</dt>
+  <dd>A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.</dd>
+  <dt>Green salad</dt>
+  <dd>That green healthy stuff that many of us just use to garnish kebabs.</dd>
+</dl>
+ +

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

+ + + +

Обробка списку інтервалів

+ +

При складанні списків стилів потрібно настроїти свої стилі, щоб вони мали однакові вертикальні відстані як їх оточуючі елементи (такі як абзаци та зображення, іноді їх називають вертикальним ритмом) і однакові між собою горизонтальні відстані (ви можете побачити  закінчений стиль приклад  в Github, і знайти вихідний код також.)

+ +

CSS, який використовується для стилізації тексту та інтервалу, виглядає наступним чином:

+ +
/* General styles */
+
+html {
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 10px;
+}
+
+h2 {
+  font-size: 2rem;
+}
+
+ul,ol,dl,p {
+  font-size: 1.5rem;
+}
+
+li, p {
+  line-height: 1.5;
+}
+
+/* Description list styles */
+
+
+dd, dt {
+  line-height: 1.5;
+}
+
+dt {
+  font-weight: bold;
+}
+
+dd {
+  margin-bottom: 1.5rem;
+}
+ + + +

List-specific styles

+ +

Now we've looked at general spacing techniques for lists, let's explore some list-specific properties. There are three properties you should know about to start with, which can be set on {{htmlelement("ul")}} or {{htmlelement("ol")}} elements:

+ + + +

Bullet styles

+ +

As mentioned above, the {{cssxref("list-style-type")}} property allows you to set what type of bullet to use for the bullet points. In our example, we've set the ordered list to use uppercase roman numerals, with:

+ +
ol {
+  list-style-type: upper-roman;
+}
+ +

Це дає нам такий вигляд:

+ +

an ordered list with the bullet points set to appear outside the list item text.

+ +

You can find a lot more options by checking out the {{cssxref("list-style-type")}} reference page.

+ +

Bullet position

+ +

The {{cssxref("list-style-position")}} property sets whether the bullets appear inside the list items, or outside them before the start of each item. The default value is outside, which causes the bullets to sit outside the list items, as seen above.

+ +

If you set the value to inside, the bullets will sit inside the lines:

+ +
ol {
+  list-style-type: upper-roman;
+  list-style-position: inside;
+}
+ +

an ordered list with the bullet points set to appear inside the list item text.

+ +

Using a custom bullet image

+ +

The {{cssxref("list-style-image")}} property allows you to use a custom image for your bullet. The syntax is pretty simple:

+ +
ul {
+  list-style-image: url(star.svg);
+}
+ +

However, this property is a bit limited in terms of controlling the position, size, etc. of the bullets. You are better off using the {{cssxref("background")}} family of properties, which you'll learn a lot more about in the Styling boxes module. For now, here's a taster!

+ +

In our finished example, we have styled the unordered list like so (on top of what you've already seen above):

+ +
ul {
+  padding-left: 2rem;
+  list-style-type: none;
+}
+
+ul li {
+  padding-left: 2rem;
+  background-image: url(star.svg);
+  background-position: 0 0;
+  background-size: 1.6rem 1.6rem;
+  background-repeat: no-repeat;
+}
+ +

Here we've done the following:

+ + + +

This gives us the following result:

+ +

an unordered list with the bullet points set as little star images

+ +

list-style shorthand

+ +

The three properties mentioned above can all be set using a single shorthand property, {{cssxref("list-style")}}. For example, the following CSS:

+ +
ul {
+  list-style-type: square;
+  list-style-image: url(example.png);
+  list-style-position: inside;
+}
+ +

Could be replaced by this:

+ +
ul {
+  list-style: square url(example.png) inside;
+}
+ +

The values can be listed in any order, and you can use one, two or all three (the default values used for the properties that are not included are disc, none, and outside). If both a type and an image are specified, the type is used as a fallback if the image can't be loaded for some reason.

+ +

Controlling list counting

+ +

Sometimes you might want to count differently on an ordered list — e.g. starting from a number other than 1, or counting backwards, or counting in steps of more than 1. HTML and CSS have some tools to help you here.

+ +

start

+ +

The {{htmlattrxref("start","ol")}} attribute allows you to start the list counting from a number other than 1. The following example:

+ +
<ol start="4">
+  <li>Toast pitta, leave to cool, then slice down the edge.</li>
+  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
+  <li>Wash and chop the salad.</li>
+  <li>Fill pitta with salad, humous, and fried halloumi.</li>
+</ol>
+ +

Gives you this output:

+ +

{{ EmbedLiveSample('start', '100%', 150) }}

+ +

reversed

+ +

The {{htmlattrxref("reversed","ol")}} attribute will start the list counting down instead of up. The following example:

+ +
<ol start="4" reversed>
+  <li>Toast pitta, leave to cool, then slice down the edge.</li>
+  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
+  <li>Wash and chop the salad.</li>
+  <li>Fill pitta with salad, humous, and fried halloumi.</li>
+</ol>
+ +

Gives you this output:

+ +

{{ EmbedLiveSample('reversed', '100%', 150) }}

+ +

value

+ +

The {{htmlattrxref("value","ol")}} attribute allows you to set your list items to specific numerical values. The following example:

+ +
<ol>
+  <li value="2">Toast pitta, leave to cool, then slice down the edge.</li>
+  <li value="4">Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
+  <li value="6">Wash and chop the salad.</li>
+  <li value="8">Fill pitta with salad, humous, and fried halloumi.</li>
+</ol>
+ +

Gives you this output:

+ +

{{ EmbedLiveSample('value', '100%', 150) }}

+ +
+

Note: Even if you are using a non-number {{cssxref("list-style-type")}}, you still need to use the equivalent numerical values in the value attribute.

+
+ +

Active learning: Styling a nested list

+ +

In this active learning session, we want you to take what you've learned above and have a go at styling a nested list. We've provided you with the HTML, and we want you to:

+ +
    +
  1. Give the unordered list square bullets.
    2. +
  2. Give the unordered list items and the ordered list items a line height of 1.5 of their font-size.
    3. +
  3. Give the ordered list lower alphabetical bullets.
    4. +
  4. Feel free to play with the list example as much as you like, experimenting with bullet types, spacing, or whatever else you can find.
    5. +
+ +

If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see a potential answer.

+ + + +

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

+ +

See also

+ +

CSS counters provide advanced tools for customizing list counting and styling, but they are quite complex. We recommend looking into these if you want to stretch yourself. See:

+ + + +

Summary

+ +

Lists are relatively easy to get the hang of styling once you know a few associated basic principles and specific properties. In the next article we'll get on to link styling techniques.

+ +

{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}

+ +

 

+ +

In this module

+ + + +

 

diff --git "a/files/uk/learn/css/styling_text/\321\201\321\202\320\270\320\273\321\226_\321\201\320\277\320\270\321\201\320\272\321\226\320\262/index.html" "b/files/uk/learn/css/styling_text/\321\201\321\202\320\270\320\273\321\226_\321\201\320\277\320\270\321\201\320\272\321\226\320\262/index.html" deleted file mode 100644 index da8f62ab84..0000000000 --- "a/files/uk/learn/css/styling_text/\321\201\321\202\320\270\320\273\321\226_\321\201\320\277\320\270\321\201\320\272\321\226\320\262/index.html" +++ /dev/null @@ -1,394 +0,0 @@ ---- -title: Стилі списків -slug: Learn/CSS/Styling_text/Стилі_списків -tags: - - CSS - - Початківець - - Спискі - - Стаття - - Стилі - - Текст -translation_of: Learn/CSS/Styling_text/Styling_lists ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}
- -

Здебільшого Списки ведуть себе як будь-який інший текст, але є деякі властивості CSS, специфічні для списків, які вам потрібно знати, а також деякі найкращі способи розгляду. Ця стаття пояснює все.

- - - - - - - - - - - - -
Передумови:Основна комп'ютерна грамотність, основи HTML (вивчення Вступу до HTML), основи CSS (вивчення Вступу до CSS), Основи тексту та шрифтів CSS.
Мета:Познайомитися з найкращими практиками та властивостями, пов'язаними зі списками стилів.
- -

Простий приклад списку

- -

Почнемо з того, давайте подивимося на приклад простого списку. У цій статті ми розглянемо списки неупорядкованих, упорядкованих та опису - у всіх є стилістичні функції, схожі на деякі,  що є характерними для їхнього типу списку. Неперевершений приклад доступний на Github ( також перевірте цей код)

- -

Приклад HTML для нашого списку виглядає так:

- -
<h2>Shopping (unordered) list</h2>
-
-<p>Paragraph for reference, paragraph for reference, paragraph for reference,
-paragraph for reference, paragraph for reference, paragraph for reference.</p>
-
-<ul>
-  <li>Humous</li>
-  <li>Pitta</li>
-  <li>Green salad</li>
-  <li>Halloumi</li>
-</ul>
-
-<h2>Recipe (ordered) list</h2>
-
-<p>Paragraph for reference, paragraph for reference, paragraph for reference,
-paragraph for reference, paragraph for reference, paragraph for reference.</p>
-
-<ol>
-  <li>Toast pitta, leave to cool, then slice down the edge.</li>
-  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
-  <li>Wash and chop the salad.</li>
-  <li>Fill pitta with salad, humous, and fried halloumi.</li>
-</ol>
-
-<h2>Ingredient description list</h2>
-
-<p>Paragraph for reference, paragraph for reference, paragraph for reference,
-paragraph for reference, paragraph for reference, paragraph for reference.</p>
-
-<dl>
-  <dt>Humous</dt>
-  <dd>A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.</dd>
-  <dt>Pitta</dt>
-  <dd>A soft, slightly leavened flatbread.</dd>
-  <dt>Halloumi</dt>
-  <dd>A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.</dd>
-  <dt>Green salad</dt>
-  <dd>That green healthy stuff that many of us just use to garnish kebabs.</dd>
-</dl>
- -

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

- - - -

Обробка списку інтервалів

- -

При складанні списків стилів потрібно настроїти свої стилі, щоб вони мали однакові вертикальні відстані як їх оточуючі елементи (такі як абзаци та зображення, іноді їх називають вертикальним ритмом) і однакові між собою горизонтальні відстані (ви можете побачити  закінчений стиль приклад  в Github, і знайти вихідний код також.)

- -

CSS, який використовується для стилізації тексту та інтервалу, виглядає наступним чином:

- -
/* General styles */
-
-html {
-  font-family: Helvetica, Arial, sans-serif;
-  font-size: 10px;
-}
-
-h2 {
-  font-size: 2rem;
-}
-
-ul,ol,dl,p {
-  font-size: 1.5rem;
-}
-
-li, p {
-  line-height: 1.5;
-}
-
-/* Description list styles */
-
-
-dd, dt {
-  line-height: 1.5;
-}
-
-dt {
-  font-weight: bold;
-}
-
-dd {
-  margin-bottom: 1.5rem;
-}
- - - -

List-specific styles

- -

Now we've looked at general spacing techniques for lists, let's explore some list-specific properties. There are three properties you should know about to start with, which can be set on {{htmlelement("ul")}} or {{htmlelement("ol")}} elements:

- - - -

Bullet styles

- -

As mentioned above, the {{cssxref("list-style-type")}} property allows you to set what type of bullet to use for the bullet points. In our example, we've set the ordered list to use uppercase roman numerals, with:

- -
ol {
-  list-style-type: upper-roman;
-}
- -

Це дає нам такий вигляд:

- -

an ordered list with the bullet points set to appear outside the list item text.

- -

You can find a lot more options by checking out the {{cssxref("list-style-type")}} reference page.

- -

Bullet position

- -

The {{cssxref("list-style-position")}} property sets whether the bullets appear inside the list items, or outside them before the start of each item. The default value is outside, which causes the bullets to sit outside the list items, as seen above.

- -

If you set the value to inside, the bullets will sit inside the lines:

- -
ol {
-  list-style-type: upper-roman;
-  list-style-position: inside;
-}
- -

an ordered list with the bullet points set to appear inside the list item text.

- -

Using a custom bullet image

- -

The {{cssxref("list-style-image")}} property allows you to use a custom image for your bullet. The syntax is pretty simple:

- -
ul {
-  list-style-image: url(star.svg);
-}
- -

However, this property is a bit limited in terms of controlling the position, size, etc. of the bullets. You are better off using the {{cssxref("background")}} family of properties, which you'll learn a lot more about in the Styling boxes module. For now, here's a taster!

- -

In our finished example, we have styled the unordered list like so (on top of what you've already seen above):

- -
ul {
-  padding-left: 2rem;
-  list-style-type: none;
-}
-
-ul li {
-  padding-left: 2rem;
-  background-image: url(star.svg);
-  background-position: 0 0;
-  background-size: 1.6rem 1.6rem;
-  background-repeat: no-repeat;
-}
- -

Here we've done the following:

- - - -

This gives us the following result:

- -

an unordered list with the bullet points set as little star images

- -

list-style shorthand

- -

The three properties mentioned above can all be set using a single shorthand property, {{cssxref("list-style")}}. For example, the following CSS:

- -
ul {
-  list-style-type: square;
-  list-style-image: url(example.png);
-  list-style-position: inside;
-}
- -

Could be replaced by this:

- -
ul {
-  list-style: square url(example.png) inside;
-}
- -

The values can be listed in any order, and you can use one, two or all three (the default values used for the properties that are not included are disc, none, and outside). If both a type and an image are specified, the type is used as a fallback if the image can't be loaded for some reason.

- -

Controlling list counting

- -

Sometimes you might want to count differently on an ordered list — e.g. starting from a number other than 1, or counting backwards, or counting in steps of more than 1. HTML and CSS have some tools to help you here.

- -

start

- -

The {{htmlattrxref("start","ol")}} attribute allows you to start the list counting from a number other than 1. The following example:

- -
<ol start="4">
-  <li>Toast pitta, leave to cool, then slice down the edge.</li>
-  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
-  <li>Wash and chop the salad.</li>
-  <li>Fill pitta with salad, humous, and fried halloumi.</li>
-</ol>
- -

Gives you this output:

- -

{{ EmbedLiveSample('start', '100%', 150) }}

- -

reversed

- -

The {{htmlattrxref("reversed","ol")}} attribute will start the list counting down instead of up. The following example:

- -
<ol start="4" reversed>
-  <li>Toast pitta, leave to cool, then slice down the edge.</li>
-  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
-  <li>Wash and chop the salad.</li>
-  <li>Fill pitta with salad, humous, and fried halloumi.</li>
-</ol>
- -

Gives you this output:

- -

{{ EmbedLiveSample('reversed', '100%', 150) }}

- -

value

- -

The {{htmlattrxref("value","ol")}} attribute allows you to set your list items to specific numerical values. The following example:

- -
<ol>
-  <li value="2">Toast pitta, leave to cool, then slice down the edge.</li>
-  <li value="4">Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
-  <li value="6">Wash and chop the salad.</li>
-  <li value="8">Fill pitta with salad, humous, and fried halloumi.</li>
-</ol>
- -

Gives you this output:

- -

{{ EmbedLiveSample('value', '100%', 150) }}

- -
-

Note: Even if you are using a non-number {{cssxref("list-style-type")}}, you still need to use the equivalent numerical values in the value attribute.

-
- -

Active learning: Styling a nested list

- -

In this active learning session, we want you to take what you've learned above and have a go at styling a nested list. We've provided you with the HTML, and we want you to:

- -
    -
  1. Give the unordered list square bullets.
    2. -
  2. Give the unordered list items and the ordered list items a line height of 1.5 of their font-size.
    3. -
  3. Give the ordered list lower alphabetical bullets.
    4. -
  4. Feel free to play with the list example as much as you like, experimenting with bullet types, spacing, or whatever else you can find.
    5. -
- -

If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see a potential answer.

- - - -

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

- -

See also

- -

CSS counters provide advanced tools for customizing list counting and styling, but they are quite complex. We recommend looking into these if you want to stretch yourself. See:

- - - -

Summary

- -

Lists are relatively easy to get the hang of styling once you know a few associated basic principles and specific properties. In the next article we'll get on to link styling techniques.

- -

{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}

- -

 

- -

In this module

- - - -

 

diff --git a/files/uk/learn/forms/index.html b/files/uk/learn/forms/index.html new file mode 100644 index 0000000000..be1e8bd595 --- /dev/null +++ b/files/uk/learn/forms/index.html @@ -0,0 +1,77 @@ +--- +title: Веб-форми +slug: Learn/HTML/Forms +translation_of: Learn/Forms +--- +
{{LearnSidebar}}
+ +

Цей модуль містить низку статей, що допоможуть Вам освоїти форми в  HTML. HTML форми  дуже потужний інструмент для взаємодії з користувачами, хоча з історичних та технічних проблем є не завжди очевидним, як повністю використовувати їхній потенціал.  В цьому путівнику ми розкриємо усі аспекти HTML форм, починаючи від структури до стилів, від обробки даних до віджетів користувачів.

+ +

Передумови

+ +

Перед початком цього модуля Вам необхідно щонайменше пройти Вступ до HTML.

+ +
+

Нотатка: Якщо Ви працюєте на компьютері/планшеті/іншому пристрої на якому Ви не маєте можливості створити власні файли, Ви можете спробувати онлайн редактори для написання коду такі як JSBin чи Thimble.

+
+ +

Основні інструкції

+ +

В наступних посібниках Ви зможете вивчити основи HTML форм і пізніше освоїти дещо складніші теми.

+ +

Ваша перша HTML форма

+ +

Перша стаття з нашої серії надасть Вам необхідний досвід в створенні HTML  форми, включаючи проектування простої форми, реалізацїю її використовуючи правильні HTML елементи, додавання деяких дуже простих стілів за допомогою CSS  і відправлення даних на сервер.

+ +

Як структурувати HTML форму

+ +

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

+ +
+
Рідні віджети форми
+
+
Тепер ми поглянемо на функціональність різних віджетів форм більш детально, розглянувши які налаштування доступні для одержання різних видів інформації.
+
+
Надсилання даних форми
+
В цій статті розглянемо, що відбувається, коли корисувач надсилає форму — куди надходить інформація, і як ми її обробляємо коли вона туди потрапляє? Ми також розглянемо деякі проблеми безпеки, пов'язані з надсиланням даних форми.
+
Підтвердження даних форми
+
Надсилання даних недостатньо — нам також потрібно впевнитися, що дані, надані користувачем у формі, коректні для їх успішної подальшої обробки і вони не нашкодять нашій програмі. Ми також хочемо допомогти нашим користувачам заповнити наші форми правильно і не розчаруватися під час спроби використання наших додатків. Відправлення форми забезпечує виконання поставлених перед нами цілей - ця стання донесе Вам те, що Ви маєте знати.
+
+ +

Розширені інструкції

+ +

Ці інструкції дозволять поглянути на більш розширені варіанти форм, які Ви знайдете корисними після освоєння основ застосування форм.

+ +
+
Як створювати користувацькі віджети форм
+
Ви стикнетесь з випадками, в яких стандартні віджети форм не зможуть забезпечити Вам всього, чого Ви потребуєте через невідповідний стиль чи недостатню функціональність. В таких випадках Вам потрібно буде створити власний віджет форми використовуючи чистий HTML. У цій статті пояснюється як Ви можете зробити це та що потрібно при цьому знати із практичними прикладами.
+
Надсилання форми використовуючи JavaScript
+
Ця стання покаже Вам шляхиThis article looks at ways to use a form to assemble an HTTP request and send it via custom JavaScript, rather than standard form submission. It also looks at why you'd want to do this, and the implications of doing so. (See also Using FormData objects.)
+
HTML forms in legacy browsers
+
Article covering feature detection, etc. This should be redirected to the cross browser testing module, as the same stuff is covered better there.
+
HTML5 form updates
+
This article provides a reference to the new additions we saw added to HTML forms by the HTML5 spec.
+
+ +

Form styling guides

+ +

These guides to styling forms with CSS really belong in the CSS Learning Area topic, but we are keeping them here for now until we find the time to move them.

+ +
+
Styling HTML forms
+
This article provides an introduction to styling forms with CSS, including all the basics you might need to know for basic styling tasks.
+
Advanced styling for HTML forms
+
Here we look at some more advanced form styling techniques that need to be used when trying to deal with some of the more difficult-to-style elements.
+
Property compatibility table for form widgets
+
This last article provides a handy reference allowing you to look up what CSS properties are compatible with what form elements.
+
+ +

Assessments

+ +

TBD

+ +

See also

+ + diff --git a/files/uk/learn/forms/your_first_form/index.html b/files/uk/learn/forms/your_first_form/index.html new file mode 100644 index 0000000000..e34ac6a346 --- /dev/null +++ b/files/uk/learn/forms/your_first_form/index.html @@ -0,0 +1,298 @@ +--- +title: Your first form +slug: Learn/HTML/Forms/Your_first_form +translation_of: Learn/Forms/Your_first_form +--- +
{{LearnSidebar}}{{NextMenu("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms")}}
+ +

Першa стаття в нашій серії допоможе вам у створенні власної першої інтернет-форми, включаючи розробку простої форми, реалізуючи її за допомогою використання елементів керування формою в HTML і інших HTML елементів, добавляючи деякі дуже прості стилі в CSS, і обписуючи як дані надсилаються на сервер. В цьому модулі ми розгорнемо кожну з вищенаведених тем.

+ + + + + + + + + + + + +
Вимоги:Загальна комп'ютерна грамотність, і базове розуміння HTML.
Мета:Зрозуміти, що таке інтернет-форми, для чого вони використовується, як обдумувати їхнє оформлення, і основні HTML елементи, які потрібні в нескладних випадках
+ +

Що таке інтернет-форми?

+ +

Web forms are one of the main points of interaction between a user and a web site or application. Forms allow users to enter data, which is generally sent to a web server for processing and storage (see Sending form data later in the module), or used on the client-side to immediately update the interface in some way (for example, add another item to a list, or show or hide a UI feature).

+ +

A web form's HTML is made up of one or more form controls (sometimes called widgets), plus some additional elements to help structure the overall form — they are often referred to as HTML forms. The controls can be single or multi-line text fields, dropdown boxes, buttons, checkboxes, or radio buttons, and are mostly created using the {{htmlelement("input")}} element, although there are some other elements to learn about too.

+ +

Form controls can also be programmed to enforce specific formats or values to be entered (form validation), and paired with text labels that describe their purpose to both sighted and blind users.

+ +

Designing your form

+ +

Before starting to code, it's always better to step back and take the time to think about your form. Designing a quick mockup will help you to define the right set of data you want to ask your user to enter. From a user experience (UX) point of view, it's important to remember that the bigger your form, the more you risk frustrating people and losing users. Keep it simple and stay focused: ask only for the data you absolutely need.

+ +

Designing forms is an important step when you are building a site or application. It's beyond the scope of this article to cover the user experience of forms, but if you want to dig into that topic you should read the following articles:

+ + + +

In this article, we'll build a simple contact form. Let's make a rough sketch.

+ +

The form to build, roughly sketch

+ +

Our form will contain three text fields and one button. We are asking the user for their name, their e-mail and the message they want to send. Hitting the button will send their data to a web server.

+ +

Active learning: Implementing our form HTML

+ +

Ok, let's have a go at creating the HTML for our form. We will use the following HTML elements: {{HTMLelement("form")}}, {{HTMLelement("label")}}, {{HTMLelement("input")}}, {{HTMLelement("textarea")}}, and {{HTMLelement("button")}}.

+ +

Before you go any further, make a local copy of our simple HTML template — you'll enter your form HTML into here.

+ +

The {{HTMLelement("form")}} element

+ +

All forms start with a {{HTMLelement("form")}} element, like this:

+ +
<form action="/my-handling-form-page" method="post">
+
+</form>
+ +

This element formally defines a form. It's a container element like a {{HTMLelement("section")}} or {{HTMLelement("footer")}} element, but specifically for containing forms; it also supports some specific attributes to configure the way the form behaves. All of its attributes are optional, but it's standard practice to always set at least the action and method attributes:

+ + + +
+

Note: We'll look at how those attributes work in our Sending form data article later on.

+
+ +

For now, add the above {{htmlelement("form")}} element into your HTML {{htmlelement("body")}}.

+ +

The {{HTMLelement("label")}}, {{HTMLelement("input")}}, and {{HTMLelement("textarea")}} elements

+ +

Our contact form is not complex: the data entry portion contains three text fields, each with a corresponding {{HTMLelement("label")}}:

+ + + +

In terms of HTML code we need something like the following to implement these form widgets:

+ +
<form action="/my-handling-form-page" method="post">
+ <ul>
+  <li>
+    <label for="name">Name:</label>
+    <input type="text" id="name" name="user_name">
+  </li>
+  <li>
+    <label for="mail">E-mail:</label>
+    <input type="email" id="mail" name="user_mail">
+  </li>
+  <li>
+    <label for="msg">Message:</label>
+    <textarea id="msg" name="user_message"></textarea>
+  </li>
+ </ul>
+</form>
+ +

Update your form code to look like the above.

+ +

The {{HTMLelement("li")}} elements are there to conveniently structure our code and make styling easier (see later in the article). For usability and accessibility, we include an explicit label for each form control. Note the use of the for attribute on all {{HTMLelement("label")}} elements, which takes as its value the id of the form control with which it is associated — this is how you associate a form with its label.

+ +

There is great benefit to doing this — it associates the label with the form control, enabling mouse, trackpad, and touch device users to click on the label to activate the corresponding control, and it also provides an accessible name for screen readers to read out to their users. You'll find further details of form labels in How to structure a web form.

+ +

On the {{HTMLelement("input")}} element, the most important attribute is the type attribute. This attribute is extremely important because it defines the way the {{HTMLelement("input")}} element appears and behaves. You'll find more about this in the Basic native form controls article later on.

+ + + +

Last but not least, note the syntax of <input> vs. <textarea></textarea>. This is one of the oddities of HTML. The <input> tag is an empty element, meaning that it doesn't need a closing tag. {{HTMLElement("textarea")}} is not an empty element, meaning it should be closed it with the proper ending tag. This has an impact on a specific feature of forms: the way you define the default value. To define the default value of an {{HTMLElement("input")}} element you have to use the value attribute like this:

+ +
<input type="text" value="by default this element is filled with this text">
+ +

On the other hand,  if you want to define a default value for a {{HTMLElement("textarea")}}, you put it between the opening and closing tags of the {{HTMLElement("textarea")}} element, like this:

+ +
<textarea>
+by default this element is filled with this text
+</textarea>
+ +

The {{HTMLelement("button")}} element

+ +

The markup for our form is almost complete; we just need to add a button to allow the user to send, or "submit", their data once they have filled out the form. This is done by using the {{HTMLelement("button")}} element; add the following just above the closing </form> tag:

+ +
<li class="button">
+  <button type="submit">Send your message</button>
+</li>
+ +

The {{htmlelement("button")}} element also accepts a type attribute — this accepts one of three values: submit, reset, or button.

+ + + +
+

Note: You can also use the {{HTMLElement("input")}} element with the corresponding type to produce a button, for example <input type="submit">. The main advantage of the {{HTMLelement("button")}} element is that the {{HTMLelement("input")}} element only allows plain text in its label whereas the {{HTMLelement("button")}} element allows full HTML content, allowing more complex, creative button content.

+
+ +

Basic form styling

+ +

Now that you have finished writing your form's HTML code, try saving it and looking at it in a browser. At the moment, you'll see that it looks rather ugly.

+ +
+

Note: If you don't think you've got the HTML code right, try comparing it with our finished example — see first-form.html (also see it live).

+
+ +

Forms are notoriously tricky to style nicely. It is beyond the scope of this article to teach you form styling in detail, so for the moment we will just get you to add some CSS to make it look OK.

+ +

First of all, add a {{htmlelement("style")}} element to your page, inside your HTML head. It should look like so:

+ +
<style>
+
+</style>
+ +

Inside the style tags, add the following CSS:

+ +
form {
+  /* Center the form on the page */
+  margin: 0 auto;
+  width: 400px;
+  /* Form outline */
+  padding: 1em;
+  border: 1px solid #CCC;
+  border-radius: 1em;
+}
+
+ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+form li + li {
+  margin-top: 1em;
+}
+
+label {
+  /* Uniform size & alignment */
+  display: inline-block;
+  width: 90px;
+  text-align: right;
+}
+
+input,
+textarea {
+  /* To make sure that all text fields have the same font settings
+     By default, textareas have a monospace font */
+  font: 1em sans-serif;
+
+  /* Uniform text field size */
+  width: 300px;
+  box-sizing: border-box;
+
+  /* Match form field borders */
+  border: 1px solid #999;
+}
+
+input:focus,
+textarea:focus {
+  /* Additional highlight for focused elements */
+  border-color: #000;
+}
+
+textarea {
+  /* Align multiline text fields with their labels */
+  vertical-align: top;
+
+  /* Provide space to type some text */
+  height: 5em;
+}
+
+.button {
+  /* Align buttons with the text fields */
+  padding-left: 90px; /* same size as the label elements */
+}
+
+button {
+  /* This extra margin represent roughly the same space as the space
+     between the labels and their text fields */
+  margin-left: .5em;
+}
+ +

Save and reload, and you'll see that your form should look much less ugly.

+ +
+

Note: You can find our version on GitHub at first-form-styled.html (also see it live).

+
+ +

Sending form data to your web server

+ +

The last part, and perhaps the trickiest, is to handle form data on the server side. The {{HTMLelement("form")}} element defines where and how to send the data thanks to the action and method attributes.

+ +

We provide a name to each form control. The names are important on both the client- and server-side; they tell the browser which name to give each piece of data and, on the server side, they let the server handle each piece of data by name. The form data is sent to the server as name/value pairs.

+ +

To name the data in a form you need to use the name attribute on each form widget that will collect a specific piece of data. Let's look at some of our form code again:

+ +
<form action="/my-handling-form-page" method="post">
+ <ul>
+  <li>
+    <label for="name">Name:</label>
+    <input type="text" id="name" name="user_name" />
+  </li>
+  <li>
+    <label for="mail">E-mail:</label>
+    <input type="email" id="mail" name="user_email" />
+  </li>
+  <li>
+    <label for="msg">Message:</label>
+    <textarea id="msg" name="user_message"></textarea>
+  </li>
+
+  ...
+
+ +

In our example, the form will send 3 pieces of data named "user_name", "user_email", and "user_message". That data will be sent to the URL "/my-handling-form-page" using the HTTP POST method.

+ +

On the server side, the script at the URL "/my-handling-form-page" will receive the data as a list of 3 key/value items contained in the HTTP request. The way this script will handle that data is up to you. Each server-side language (PHP, Python, Ruby, Java, C#, etc.) has its own mechanism of handling form data. It's beyond the scope of this guide to go deeply into that subject, but if you want to know more, we have provided some examples in our Sending form data article later on.

+ +

Summary

+ +

Congratulations, you've built your first web form. It looks like this live:

+ +

{{ EmbedLiveSample('A_simple_form', '100%', '240', '', 'Learn/Forms/Your_first_form/Example') }}

+ +

That's only the beginning, however — now it's time to take a deeper look. Forms have way more power than what we saw here and the other articles in this module will help you to master the rest.

+ +

{{NextMenu("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms")}}

+ +

In this module

+ + + +

Advanced Topics

+ + diff --git a/files/uk/learn/front-end_web_developer/index.html b/files/uk/learn/front-end_web_developer/index.html new file mode 100644 index 0000000000..c90cae476e --- /dev/null +++ b/files/uk/learn/front-end_web_developer/index.html @@ -0,0 +1,202 @@ +--- +title: Фронтенд веб-розробник +slug: Learn/Фронт-енд_веб-розробник +tags: + - CSS + - Front-end + - HTML + - JavaScript + - Web Standarts + - Інструментарій + - Навчання + - Початківець + - Стандарти + - Фронт-енд + - Фронтенд + - інструменти +translation_of: Learn/Front-end_web_developer +--- +

{{learnsidebar}}

+ +

Ласкаво просимо до нашого навчального шляху веб-розробника!

+ +

Ми представяємо вам структурований курс, який навчить вас усьому, що вам потрібно знати, аби стати передовим веб-розробником. Просто працюйте над кожним розділом, опановуючи нові або вдосконалюючи існуючі навички, рухаючись далі. Кожен розділ містить практичні завдання та оцінювання, щоб перевірити своє розуміння, перш ніж рухатися вперед.

+ +

Охоплена тематика

+ +

Досліджувані теми:

+ + + +

Ви можете працювати з розділами по порядку, проте кожен з них також є самостійним. Наприклад, якщо ви вже знаєте HTML, ви можете перейти до розділу CSS.

+ +

Передумови

+ +

Щоб почати цей курс, вам не потрібні попередні знання. Все, що вам потрібно, це комп’ютер, що може працювати із сучасними веб-браузерами, підключення до Інтернету та готовність вчитися.

+ +

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

+ +

Отримання допомоги

+ +

Ми намагалися зробити навчання фронт-енд веб-розробці якомога комфортним, але ви, ймовірно, все ж таки десь застрягнете, тому що чогось не розумієте або якийсь код просто не працює.

+ +

Не панікуйте. Ми всі застрягаємо, не зважаючи на те - ми початківці чи ми професійні веб-розробники. Стаття Навчання та отримання допомоги пропонує вам низку порад щодо пошуку інформації та надання допомоги самому собі. Якщо ви все ще не зрушили з мертвої точки, сміливо розміщуйте питання на нашому Дискурсному форумі.

+ +

Нумо починати. Щасти!

+ +

Шлях навчання

+ +

Початок

+ +

Час на виконання: 1,5–2 години

+ +

Передумови

+ +

Нічого, крім базової комп'ютерної грамотності.

+ +

Як мені дізнатися, що я можу рухатися далі?

+ +

В цій частині курсу немає оцінювання, проте не пропускайте її. Важливо, щоб ви налаштувались і були готові виконувати практичні завдання пізніше в процесі.

+ +

Посібники

+ + + +

Семантика та структура за допомогою HTML

+ +

Час на виконання: 35–50 годин

+ +

Передумови

+ +

Нічого, крім базової комп'ютерної грамотності та базового середовища для веб-розробки.

+ +

Як мені дізнатися, що я можу рухатися далі?

+ +

Оцінювання в кожному модулі розроблено для перевірки вашого знання теми. Вдалий результат оцінювання підтверджує, що ви готові перейти до наступного модуля.

+ +

Модулі

+ + + +

Стилізація та розмітка за допомогою CSS

+ +

Час на виконання: 90–120 гоодин

+ +

Передумови

+ +

Перед початком вивчення CSS рекомендується мати базові знання з HTML. Спершу слід вивчити Вступ до HTML.

+ +

Як мені дізнатися, що я можу рухатися далі?

+ +

Оцінювання в кожному модулі розроблено для перевірки вашого знання теми. Вдалий результат оцінювання підтверджує, що ви готові перейти до наступного модуля.

+ +

Модулі

+ + + +

Додаткові ресурси

+ + + +

Інтерактивність за допомогою JavaScript

+ +

Час на виконання: 135–185 годин

+ +

Передумови

+ +

Перед початком вивчення JavaScript рекомендується мати базові знання з HTML. Спершу слід вивчити Вступ до HTML.

+ +

Як мені дізнатися, що я можу рухатися далі?

+ +

Оцінювання в кожному модулі розроблено для перевірки вашого знання теми. Вдалий результат оцінювання підтверджує, що ви готові перейти до наступного модуля.

+ +

Модулі

+ + + +

Веб-форми — Робота з даними користувача

+ +

Час на виконання: 40–50 годин

+ +

Передумови

+ +

Вивчення форм вимагає знання з HTML, CSS та JavaScript. Враховуючи складність роботи з формами, це спеціальна тема.

+ +

Як мені дізнатися, що я можу рухатися далі?

+ +

Оцінювання в кожному модулі розроблено для перевірки вашого знання теми. Вдалий результат оцінювання підтверджує, що ви готові перейти до наступного модуля.

+ +

Модулі

+ + + +

Роблячи Інтернет доступним для кожного

+ +

Час на виконання: 60–75 годин

+ +

Передумови

+ +

Перед роботою з цим розділом було б незайвим знати HTML, CSS та JavaScript. Багато методів та найкращих практик стосуються декількох технологій.

+ +

Як мені дізнатися, що я можу рухатися далі?

+ +

Оцінювання в кожному модулі розроблено для перевірки вашого знання теми. Вдалий результат оцінювання підтверджує, що ви готові перейти до наступного модуля.

+ +

Модулі

+ + + +

Сучасний інструментарій

+ +

Час на виконання: 55–90 годин

+ +

Передумови

+ +

Перед роботою з цим розділом було б незайвим знати HTML, CSS та JavaScript, оскільки інструменти, що тут обговорюються, працюють вкупі із багатьма з цих технологій.

+ +

Як мені дізнатися, що я можу рухатися далі?

+ +

У цьому наборі модулів немає конкретних статей з оцінюванням. Навчальні посібники з прикладами в кінці другого та третього модулів готують вас до розуміння основ сучасного інструментарію.

+ +

Модулі

+ + diff --git a/files/uk/learn/getting_started_with_the_web/the_web_and_web_standards/index.html b/files/uk/learn/getting_started_with_the_web/the_web_and_web_standards/index.html new file mode 100644 index 0000000000..c25cffdea8 --- /dev/null +++ b/files/uk/learn/getting_started_with_the_web/the_web_and_web_standards/index.html @@ -0,0 +1,164 @@ +--- +title: Інтернет та веб-стандарти +slug: Learn/Getting_started_with_the_web/Інтернет_та_веб-стандарти +translation_of: Learn/Getting_started_with_the_web/The_web_and_web_standards +--- +

{{learnsidebar}}

+ +

This article provides some useful background on the Web — how it came about, what web standard technologies are, how they work together, why "web developer" is a great career to choose, and what kinds of best practices you'll learn about through the course.

+ +

Brief history of the web

+ +

We'll keep this very brief, as there are many (more) detailed accounts of the web's history out there, which we'll link to later on (also try searching for "history of the web" in your favorite search engine and see what you get, if you are interested in more detail.)

+ +

In the late 1960s, the US military developed a communication network called ARPANET. This can be considered a forerunner of the Web, as it worked on packet switching, and featured the first implementation of the TCP/IP protocol suite. These two technologies form the basis of the infrastructure that the internet is built on.

+ +

In 1980, Tim Berners-Lee (often referred to as TimBL) wrote a notebook program called ENQUIRE, which featured the concept of links between different nodes. Sound familiar?

+ +

Fast forward to 1989, and TimBL wrote Information Management: A Proposal and HyperText and CERN; these two publications together provided the background for how the web would work. They received a fair amount of interest, enough to convince TimBL's bosses to allow him to go ahead and create a global hypertext system.

+ +

By late 1990, TimBL had created all the things needed to run the first version of the web — HTTP, HTML, the first web browser, which was called WorldWideWeb, an HTTP server, and some web pages to look at.

+ +

In the next few years that followed, the web exploded, with multiple browsers being released, thousands of web servers being set up, and millions of web pages being created. OK, that's a very simple summary of what happened, but I did promise you a brief summary.

+ +

One last significant data point to share is that in 1994, TimBL founded the World Wide Web Consortium (W3C), an organization that brings together representatives from many different technology companies to work together on the creation of web technology specifications. After that other technologies followed such as CSS and JavaScript, and the web started to look more like the web we know today.

+ +

Web standards

+ +

Web standards are the technologies we use to build web sites. These standards exist as long technical documents called specifications, which detail exactly how the technology should work. These documents are not very useful for learning how to use the technologies they describe (this is why we have sites like MDN Web Docs), but instead are intended to be used by software engineers to implement these technologies (usually in web browsers).

+ +

For example, the HTML Living Standard describes exactly how HTML (all the HTML elements, and their associated APIs, and other surrounding technologies) should be implemented.

+ +

Web standards are created by standards bodies — institutions that invite groups of people from different technology companies to come together and agree on how the technologies should work in the best way to fulfill all of their use cases. The W3C is the best known web standards body, but there are others such as the WHATWG (who were responsible for the modernization of the HTML language), ECMA (who publish the standard for ECMAScript, which JavaScript is based on), Khronos (who publish technologies for 3D graphics, such as WebGL), and others.

+ +

"Open" standards

+ +

One of the key aspects of web standards, which TimBL and the W3C agreed on from the start, is that the web (and web technologies) should be free to both contribute and use, and not encumbered by patents/licensing. Therefore anyone can write the code to build a website for free, and anyone can contribute to the standards creation process, where the specs are written.

+ +

Because web technologies are created openly, in collaboration between many different companies, it means that no one company gets to control them, which is a really good thing. You wouldn't want a single company suddenly deciding to put the entire web behind a paywall, or releasing a new version of HTML that everyone has to buy to continue making web sites, or worse still, just deciding they aren't interested any more and just turning it off.

+ +

This allows the web to remain a freely-available public resource.

+ +

Don't break the web

+ +

Another phrase you'll hear around open web standards is "don't break the web" — the idea is that any new web technology that is introduced should be backwards compatible with what went before it (i.e. old web sites will still continue to work), and forwards compatible (future technologies in turn will be compatible with what we currently have). As you go through the learning material presented here, you'll start to learn how this is made possible with some very clever design and implementation work.

+ +

Being a web developer is good

+ +

The web industry is a very attractive market to enter if you are looking for a job. Recent published figures say that there are currently around 19 million web developers in the world, and that figure is set more than double in the next decade. And at the same time, there is a skill shortage in the industry — so what better time to learn web development?

+ +

It isn't all fun and games however — building web sites is a more complicated proposition than it used to be, and you'll have to put some time in to studying all the different technologies you need to use, all the techniques and best practices you need to know, and all the typical patterns you'll be called upon to implement. It'll take you a few months to really start to get into it, and then you'll need to keep learning so that your knowledge stays up-to-date with all the new tools and features that appear on the web platform, and keep practicing and refining your craft.

+ +

The only constant is change.

+ +

Does this sound hard? Don't worry — we aim to give you everything you need to know to get started, and things will get easier. Once you embrace the constant change and uncertainty of the web, you'll start to enjoy yourself. As a part of the web community, you'll have an entire web of contacts and useful material to help you, and you'll start to enjoy the creative possibilities it brings.

+ +

You're a digital creative now. Enjoy the experience, and the potential for earning a living.

+ +

Overview of modern web technologies

+ +

There are a number of technologies to learn if you want to be a front-end web developer. In this section we will describe them briefly. For a more detailed explanation of how some of them work together, read our article How the web works.

+ +

Browsers

+ +

You are probably reading these words inside a web browser in this very moment (unless you've printed it out, or are using assistive technology, such as a screenreader to read it out to you). Web browsers are the software programs people use to consume the web, and include Firefox, Chrome, Opera, Safari, and Edge.

+ +

HTTP

+ +

Hypertext Transfer Protocol, or HTTP, is a messaging protocol that allows web browsers to communicate with web servers (where web sites are stored). A typical conversation goes something like

+ +
"Hello web server. Can you give me the files I need to render bbc.co.uk"?
+
+"Sure thing web browser — here you go"
+
+[Downloads files and renders web page]
+ +

The actual syntax for HTTP messages (called requests and responses) is not that human-readable, but this gives you the basic idea.

+ +

HTML, CSS, and JavaScript

+ +

HTML, CSS, and JavaScript are the main three technologies you'll use to build a website:

+ + + +

Tooling

+ +

Once you've learned the "raw" technologies that can be used to build web pages (such as HTML, CSS, and JavaScript), you'll soon start to come across various tools that can be used to make your work easier or more efficient. Examples include:

+ + + +

Server-side languages and frameworks

+ +

HTML, CSS, and JavaScript are front-end (or client-side) languages, which means they are run by the browser to produce a website front-end that your users can use.

+ +

There are another class of languages called back-end (or server-side) languages, meaning that they are run on the server before the result is then sent to the browser to be displayed. A typical use for a server-side language is to get some data out of a database and generate some HTML to contain the data, before then sending the HTML over to the browser to display it to the user.

+ +

Example server-side languages include ASP.NET, Python, PHP, and NodeJS.

+ +

Web best practices

+ +

We have briefly talked about the technologies that you'll use to build websites. Now let's discuss the best practices you should employ to make sure you are using those technologies in the best way that you can.

+ +

When doing web development, the main cause of uncertainty comes from the fact that you don't know what combination of technology each user will use to view your web site:

+ + + +

Because you don't know exactly what your users will use, you need to design defensively — make your web site as flexible as possible, so that all of the above users can make use of it, even if they might not all get the same experience. In short, we are trying to make the web work for all, as much as possible.

+ +

You'll come across the below concepts at some point in your studies.

+ + + +

See also

+ + diff --git "a/files/uk/learn/getting_started_with_the_web/\321\226\320\275\321\202\320\265\321\200\320\275\320\265\321\202_\321\202\320\260_\320\262\320\265\320\261-\321\201\321\202\320\260\320\275\320\264\320\260\321\200\321\202\320\270/index.html" "b/files/uk/learn/getting_started_with_the_web/\321\226\320\275\321\202\320\265\321\200\320\275\320\265\321\202_\321\202\320\260_\320\262\320\265\320\261-\321\201\321\202\320\260\320\275\320\264\320\260\321\200\321\202\320\270/index.html" deleted file mode 100644 index c25cffdea8..0000000000 --- "a/files/uk/learn/getting_started_with_the_web/\321\226\320\275\321\202\320\265\321\200\320\275\320\265\321\202_\321\202\320\260_\320\262\320\265\320\261-\321\201\321\202\320\260\320\275\320\264\320\260\321\200\321\202\320\270/index.html" +++ /dev/null @@ -1,164 +0,0 @@ ---- -title: Інтернет та веб-стандарти -slug: Learn/Getting_started_with_the_web/Інтернет_та_веб-стандарти -translation_of: Learn/Getting_started_with_the_web/The_web_and_web_standards ---- -

{{learnsidebar}}

- -

This article provides some useful background on the Web — how it came about, what web standard technologies are, how they work together, why "web developer" is a great career to choose, and what kinds of best practices you'll learn about through the course.

- -

Brief history of the web

- -

We'll keep this very brief, as there are many (more) detailed accounts of the web's history out there, which we'll link to later on (also try searching for "history of the web" in your favorite search engine and see what you get, if you are interested in more detail.)

- -

In the late 1960s, the US military developed a communication network called ARPANET. This can be considered a forerunner of the Web, as it worked on packet switching, and featured the first implementation of the TCP/IP protocol suite. These two technologies form the basis of the infrastructure that the internet is built on.

- -

In 1980, Tim Berners-Lee (often referred to as TimBL) wrote a notebook program called ENQUIRE, which featured the concept of links between different nodes. Sound familiar?

- -

Fast forward to 1989, and TimBL wrote Information Management: A Proposal and HyperText and CERN; these two publications together provided the background for how the web would work. They received a fair amount of interest, enough to convince TimBL's bosses to allow him to go ahead and create a global hypertext system.

- -

By late 1990, TimBL had created all the things needed to run the first version of the web — HTTP, HTML, the first web browser, which was called WorldWideWeb, an HTTP server, and some web pages to look at.

- -

In the next few years that followed, the web exploded, with multiple browsers being released, thousands of web servers being set up, and millions of web pages being created. OK, that's a very simple summary of what happened, but I did promise you a brief summary.

- -

One last significant data point to share is that in 1994, TimBL founded the World Wide Web Consortium (W3C), an organization that brings together representatives from many different technology companies to work together on the creation of web technology specifications. After that other technologies followed such as CSS and JavaScript, and the web started to look more like the web we know today.

- -

Web standards

- -

Web standards are the technologies we use to build web sites. These standards exist as long technical documents called specifications, which detail exactly how the technology should work. These documents are not very useful for learning how to use the technologies they describe (this is why we have sites like MDN Web Docs), but instead are intended to be used by software engineers to implement these technologies (usually in web browsers).

- -

For example, the HTML Living Standard describes exactly how HTML (all the HTML elements, and their associated APIs, and other surrounding technologies) should be implemented.

- -

Web standards are created by standards bodies — institutions that invite groups of people from different technology companies to come together and agree on how the technologies should work in the best way to fulfill all of their use cases. The W3C is the best known web standards body, but there are others such as the WHATWG (who were responsible for the modernization of the HTML language), ECMA (who publish the standard for ECMAScript, which JavaScript is based on), Khronos (who publish technologies for 3D graphics, such as WebGL), and others.

- -

"Open" standards

- -

One of the key aspects of web standards, which TimBL and the W3C agreed on from the start, is that the web (and web technologies) should be free to both contribute and use, and not encumbered by patents/licensing. Therefore anyone can write the code to build a website for free, and anyone can contribute to the standards creation process, where the specs are written.

- -

Because web technologies are created openly, in collaboration between many different companies, it means that no one company gets to control them, which is a really good thing. You wouldn't want a single company suddenly deciding to put the entire web behind a paywall, or releasing a new version of HTML that everyone has to buy to continue making web sites, or worse still, just deciding they aren't interested any more and just turning it off.

- -

This allows the web to remain a freely-available public resource.

- -

Don't break the web

- -

Another phrase you'll hear around open web standards is "don't break the web" — the idea is that any new web technology that is introduced should be backwards compatible with what went before it (i.e. old web sites will still continue to work), and forwards compatible (future technologies in turn will be compatible with what we currently have). As you go through the learning material presented here, you'll start to learn how this is made possible with some very clever design and implementation work.

- -

Being a web developer is good

- -

The web industry is a very attractive market to enter if you are looking for a job. Recent published figures say that there are currently around 19 million web developers in the world, and that figure is set more than double in the next decade. And at the same time, there is a skill shortage in the industry — so what better time to learn web development?

- -

It isn't all fun and games however — building web sites is a more complicated proposition than it used to be, and you'll have to put some time in to studying all the different technologies you need to use, all the techniques and best practices you need to know, and all the typical patterns you'll be called upon to implement. It'll take you a few months to really start to get into it, and then you'll need to keep learning so that your knowledge stays up-to-date with all the new tools and features that appear on the web platform, and keep practicing and refining your craft.

- -

The only constant is change.

- -

Does this sound hard? Don't worry — we aim to give you everything you need to know to get started, and things will get easier. Once you embrace the constant change and uncertainty of the web, you'll start to enjoy yourself. As a part of the web community, you'll have an entire web of contacts and useful material to help you, and you'll start to enjoy the creative possibilities it brings.

- -

You're a digital creative now. Enjoy the experience, and the potential for earning a living.

- -

Overview of modern web technologies

- -

There are a number of technologies to learn if you want to be a front-end web developer. In this section we will describe them briefly. For a more detailed explanation of how some of them work together, read our article How the web works.

- -

Browsers

- -

You are probably reading these words inside a web browser in this very moment (unless you've printed it out, or are using assistive technology, such as a screenreader to read it out to you). Web browsers are the software programs people use to consume the web, and include Firefox, Chrome, Opera, Safari, and Edge.

- -

HTTP

- -

Hypertext Transfer Protocol, or HTTP, is a messaging protocol that allows web browsers to communicate with web servers (where web sites are stored). A typical conversation goes something like

- -
"Hello web server. Can you give me the files I need to render bbc.co.uk"?
-
-"Sure thing web browser — here you go"
-
-[Downloads files and renders web page]
- -

The actual syntax for HTTP messages (called requests and responses) is not that human-readable, but this gives you the basic idea.

- -

HTML, CSS, and JavaScript

- -

HTML, CSS, and JavaScript are the main three technologies you'll use to build a website:

- - - -

Tooling

- -

Once you've learned the "raw" technologies that can be used to build web pages (such as HTML, CSS, and JavaScript), you'll soon start to come across various tools that can be used to make your work easier or more efficient. Examples include:

- - - -

Server-side languages and frameworks

- -

HTML, CSS, and JavaScript are front-end (or client-side) languages, which means they are run by the browser to produce a website front-end that your users can use.

- -

There are another class of languages called back-end (or server-side) languages, meaning that they are run on the server before the result is then sent to the browser to be displayed. A typical use for a server-side language is to get some data out of a database and generate some HTML to contain the data, before then sending the HTML over to the browser to display it to the user.

- -

Example server-side languages include ASP.NET, Python, PHP, and NodeJS.

- -

Web best practices

- -

We have briefly talked about the technologies that you'll use to build websites. Now let's discuss the best practices you should employ to make sure you are using those technologies in the best way that you can.

- -

When doing web development, the main cause of uncertainty comes from the fact that you don't know what combination of technology each user will use to view your web site:

- - - -

Because you don't know exactly what your users will use, you need to design defensively — make your web site as flexible as possible, so that all of the above users can make use of it, even if they might not all get the same experience. In short, we are trying to make the web work for all, as much as possible.

- -

You'll come across the below concepts at some point in your studies.

- - - -

See also

- - diff --git a/files/uk/learn/how_to_contribute/index.html b/files/uk/learn/how_to_contribute/index.html deleted file mode 100644 index 9d73e3f192..0000000000 --- a/files/uk/learn/how_to_contribute/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: Як зробити внесок до навчальної бази MDN? -slug: Learn/How_to_contribute -translation_of: Learn/How_to_contribute ---- -
{{LearnSidebar}}
- -
Якщо ви тут вперше або після довгих пошуків, це можливо тому що ви зацікавлені зробити власний внесок до області навчання MDN. Це гарні новини!
- -

На цій сторінці ви знайдете все що вам потрібно для того щоб почати допомагати удосконалювати навчаний контент MDN. Є багато речей, які ви можете робити, залежно від кількості наявного часу та на якому етапі ви знаходитесь e початківець, веб розробник, або вчитель.

- -
-

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

-
- -

Знайдіть конкретні завдання

- -

Поширеним спосіб, яким люди роблять внески до навчальної бази є читання стеттей, виправлення друкарських помилок та пропозиція покращень. Ми також відаємо додавання прикладів до нашого GitHub сховища. Зв'яжіться з нами якщо ви хочете запитати що ще потрібно зробити. 

- -

Додавання внесків це чудовий спосіб розважитися під час вивчення нових речей. Якщо ви коли-небудь відчуваєте себе загубленим або маєте запитання, не соромтесь звернутися до нас в Навчальній темі для дискусій or IRC channel (see at the bottom of this page for details). Chris Mills is the topic driver for the Learning Area — you could also try pinging him directly.

- -

The following sections provide some general ideas of the types of tasks you can do.

- -

I'm a beginner

- -

That's awesome! Beginners are very important and valuable for creating and giving feedback on learning material. You have a unique perspective on these articles as a member of their target audience, which can make you an invaluable member of our team. Indeed, if you're using one of our articles to learn something and you get stuck, or find the article confusing in some way, you can either fix it or let us know about the problem so we can be sure it gets fixed.

- -

Here are some suggested ways you can contribute:

- -
-
Add tags to our articles (5 min)
-
Tagging MDN content is one of the easiest ways to contribute to MDN. As many of our features use tags to help present information in context, helping with tagging is a very valuable contribution. Take a look at the lists of glossary entries and learning articles without any tags to get started.
-
Read and review a glossary entry (5 min)
-
As a beginner, we need your fresh eyes looking at our content. If you find a glossary entry hard to understand, it means that entry needs to be improved. Feel free to make any changes you think are necessary. If you do not think you have the proper skill to edit the entry yourself, please bring it to our attention on our mailing list.
-
Write a new glossary entry (20 minutes)
-
This is the most effective way to learn something new. Pick a concept you want to understand, and as you learn about it, write a glossary entry about it. Explaining something to others is a great way to "cement" the knowledge in your brain, and to help you make sense of things yourself, all while helping other people. Everybody wins!
-
Read and review a learning article (2 hours)
-
This is very much like reviewing glossary entries (see above); it just takes more time, since these articles are typically quite a bit longer.
-
- -

I'm a web developer

- -

Fantastic! Your technical skills are just what we need to be sure we provide technically accurate content for beginners. As this specific part of MDN is dedicated to learning the Web, be sure your explanations are as simple as possible, without being so simple that they're not useful. It's often more important to be understandable than to be overly precise.

- -
-
Read and review a glossary entry (5 min)
-
As a web developer, we need you to make sure our content is technically accurate without being too pedantic. Feel free to make any changes you think are necessary. If you want to discuss the content before editing, ping us on our mailing list or IRC channel.
-
Write a new glossary entry (20 minutes)
-
Clarifying technical jargon is a very good way to learn and be both technically accurate and simple. Beginners will thank you for that. We have many undefined terms which need your attention. Pick one and you're good to go.
-
Read and review a learning article (2 hours)
-
This is the same thing as reviewing a glossary entry (see above); it just takes a bit more time as those articles are quite a bit longer.
-
Write a new learning article (4 hours or more)
-
MDN is lacking simple straightforward articles about using web technologies (HTML, CSS, JavaScript, etc). We also have old content on MDN that deserves to be reviewed and reshaped. Push your skills to the limit to make web technologies usable even by beginners.
-
Create exercises, code samples or interactive learning tools (? hours)
-
All our learning articles require what we call "active learning" materials, because people learn best by doing something themselves. Such materials are exercises or interactive content that help a user to apply and manipulate the concepts detailed in an article. There are many possible ways to make active learning content, from creating code samples with JSFiddle or similar, to building fully hackable interactive content with Thimble. Unleash your creativity!
-
- -

I'm a teacher

- -

MDN has a long history of technical excellence, but we lack depth of understanding of the best way to teach concepts to newcomers. This is where we need you, as a teacher or educator. You can help us ensure that our materials provide a good, practical educational track for our readers.

- -
-
Read and review a glossary entry (15 min)
-
Check out a glossary entry and feel free to make any changes you think are necessary. If you want to discuss the content before editing, ping us on our mailing list or IRC channel.
-
Write a new glossary entry (1 hour)
-
Clear, simple definitions of terms and basic overviews of concepts in the glossary are critical in meeting beginners' needs. Your experience as an educator can help create excellent glossary entries; we have many undefined terms which need your attention. Pick one and go for it.
-
Add illustrations and/or schematics to articles (1 hour)
-
As you might know, illustrations are an invaluable part of any learning content. This is something we often lack on MDN and your skills can make a difference in that area. Check out the articles that lack illustrative content and pick one you'd like to create graphics for.
-
Read and review a learning article (2 hours)
-
This is similar to reviewing glossary entries (see above), but it requires more time since the articles are typically quite a bit longer.
-
Write a new learning article (4 hours)
-
We need simple, straightforward articles about the Web ecosystem and other functional topics around it. Since these learning articles need to be educational rather than trying to literally cover everything there is to know, your experience in knowing what to cover and how will be a great asset.
-
Create exercises, quizzes or interactive learning tools (? hours)
-
All our learning articles require "active learning" materials. Such materials are exercises or interactive content which help a user learn to use and expand upon the concepts detailed in an article. There are lots of things you can do here, from creating quizzes to building fully hackable interactive content with Thimble. Unleash your creativity!
-
Create learning pathways (? hours)
-
In order to provide progressive and comprehensible tutorials, we need to shape our content into pathways. It's a way to gather existing content and figure out what is missing.
-
- -

See also

- - diff --git a/files/uk/learn/html/forms/index.html b/files/uk/learn/html/forms/index.html deleted file mode 100644 index be1e8bd595..0000000000 --- a/files/uk/learn/html/forms/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Веб-форми -slug: Learn/HTML/Forms -translation_of: Learn/Forms ---- -
{{LearnSidebar}}
- -

Цей модуль містить низку статей, що допоможуть Вам освоїти форми в  HTML. HTML форми  дуже потужний інструмент для взаємодії з користувачами, хоча з історичних та технічних проблем є не завжди очевидним, як повністю використовувати їхній потенціал.  В цьому путівнику ми розкриємо усі аспекти HTML форм, починаючи від структури до стилів, від обробки даних до віджетів користувачів.

- -

Передумови

- -

Перед початком цього модуля Вам необхідно щонайменше пройти Вступ до HTML.

- -
-

Нотатка: Якщо Ви працюєте на компьютері/планшеті/іншому пристрої на якому Ви не маєте можливості створити власні файли, Ви можете спробувати онлайн редактори для написання коду такі як JSBin чи Thimble.

-
- -

Основні інструкції

- -

В наступних посібниках Ви зможете вивчити основи HTML форм і пізніше освоїти дещо складніші теми.

- -

Ваша перша HTML форма

- -

Перша стаття з нашої серії надасть Вам необхідний досвід в створенні HTML  форми, включаючи проектування простої форми, реалізацїю її використовуючи правильні HTML елементи, додавання деяких дуже простих стілів за допомогою CSS  і відправлення даних на сервер.

- -

Як структурувати HTML форму

- -

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

- -
-
Рідні віджети форми
-
-
Тепер ми поглянемо на функціональність різних віджетів форм більш детально, розглянувши які налаштування доступні для одержання різних видів інформації.
-
-
Надсилання даних форми
-
В цій статті розглянемо, що відбувається, коли корисувач надсилає форму — куди надходить інформація, і як ми її обробляємо коли вона туди потрапляє? Ми також розглянемо деякі проблеми безпеки, пов'язані з надсиланням даних форми.
-
Підтвердження даних форми
-
Надсилання даних недостатньо — нам також потрібно впевнитися, що дані, надані користувачем у формі, коректні для їх успішної подальшої обробки і вони не нашкодять нашій програмі. Ми також хочемо допомогти нашим користувачам заповнити наші форми правильно і не розчаруватися під час спроби використання наших додатків. Відправлення форми забезпечує виконання поставлених перед нами цілей - ця стання донесе Вам те, що Ви маєте знати.
-
- -

Розширені інструкції

- -

Ці інструкції дозволять поглянути на більш розширені варіанти форм, які Ви знайдете корисними після освоєння основ застосування форм.

- -
-
Як створювати користувацькі віджети форм
-
Ви стикнетесь з випадками, в яких стандартні віджети форм не зможуть забезпечити Вам всього, чого Ви потребуєте через невідповідний стиль чи недостатню функціональність. В таких випадках Вам потрібно буде створити власний віджет форми використовуючи чистий HTML. У цій статті пояснюється як Ви можете зробити це та що потрібно при цьому знати із практичними прикладами.
-
Надсилання форми використовуючи JavaScript
-
Ця стання покаже Вам шляхиThis article looks at ways to use a form to assemble an HTTP request and send it via custom JavaScript, rather than standard form submission. It also looks at why you'd want to do this, and the implications of doing so. (See also Using FormData objects.)
-
HTML forms in legacy browsers
-
Article covering feature detection, etc. This should be redirected to the cross browser testing module, as the same stuff is covered better there.
-
HTML5 form updates
-
This article provides a reference to the new additions we saw added to HTML forms by the HTML5 spec.
-
- -

Form styling guides

- -

These guides to styling forms with CSS really belong in the CSS Learning Area topic, but we are keeping them here for now until we find the time to move them.

- -
-
Styling HTML forms
-
This article provides an introduction to styling forms with CSS, including all the basics you might need to know for basic styling tasks.
-
Advanced styling for HTML forms
-
Here we look at some more advanced form styling techniques that need to be used when trying to deal with some of the more difficult-to-style elements.
-
Property compatibility table for form widgets
-
This last article provides a handy reference allowing you to look up what CSS properties are compatible with what form elements.
-
- -

Assessments

- -

TBD

- -

See also

- - diff --git a/files/uk/learn/html/forms/your_first_form/index.html b/files/uk/learn/html/forms/your_first_form/index.html deleted file mode 100644 index e34ac6a346..0000000000 --- a/files/uk/learn/html/forms/your_first_form/index.html +++ /dev/null @@ -1,298 +0,0 @@ ---- -title: Your first form -slug: Learn/HTML/Forms/Your_first_form -translation_of: Learn/Forms/Your_first_form ---- -
{{LearnSidebar}}{{NextMenu("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms")}}
- -

Першa стаття в нашій серії допоможе вам у створенні власної першої інтернет-форми, включаючи розробку простої форми, реалізуючи її за допомогою використання елементів керування формою в HTML і інших HTML елементів, добавляючи деякі дуже прості стилі в CSS, і обписуючи як дані надсилаються на сервер. В цьому модулі ми розгорнемо кожну з вищенаведених тем.

- - - - - - - - - - - - -
Вимоги:Загальна комп'ютерна грамотність, і базове розуміння HTML.
Мета:Зрозуміти, що таке інтернет-форми, для чого вони використовується, як обдумувати їхнє оформлення, і основні HTML елементи, які потрібні в нескладних випадках
- -

Що таке інтернет-форми?

- -

Web forms are one of the main points of interaction between a user and a web site or application. Forms allow users to enter data, which is generally sent to a web server for processing and storage (see Sending form data later in the module), or used on the client-side to immediately update the interface in some way (for example, add another item to a list, or show or hide a UI feature).

- -

A web form's HTML is made up of one or more form controls (sometimes called widgets), plus some additional elements to help structure the overall form — they are often referred to as HTML forms. The controls can be single or multi-line text fields, dropdown boxes, buttons, checkboxes, or radio buttons, and are mostly created using the {{htmlelement("input")}} element, although there are some other elements to learn about too.

- -

Form controls can also be programmed to enforce specific formats or values to be entered (form validation), and paired with text labels that describe their purpose to both sighted and blind users.

- -

Designing your form

- -

Before starting to code, it's always better to step back and take the time to think about your form. Designing a quick mockup will help you to define the right set of data you want to ask your user to enter. From a user experience (UX) point of view, it's important to remember that the bigger your form, the more you risk frustrating people and losing users. Keep it simple and stay focused: ask only for the data you absolutely need.

- -

Designing forms is an important step when you are building a site or application. It's beyond the scope of this article to cover the user experience of forms, but if you want to dig into that topic you should read the following articles:

- - - -

In this article, we'll build a simple contact form. Let's make a rough sketch.

- -

The form to build, roughly sketch

- -

Our form will contain three text fields and one button. We are asking the user for their name, their e-mail and the message they want to send. Hitting the button will send their data to a web server.

- -

Active learning: Implementing our form HTML

- -

Ok, let's have a go at creating the HTML for our form. We will use the following HTML elements: {{HTMLelement("form")}}, {{HTMLelement("label")}}, {{HTMLelement("input")}}, {{HTMLelement("textarea")}}, and {{HTMLelement("button")}}.

- -

Before you go any further, make a local copy of our simple HTML template — you'll enter your form HTML into here.

- -

The {{HTMLelement("form")}} element

- -

All forms start with a {{HTMLelement("form")}} element, like this:

- -
<form action="/my-handling-form-page" method="post">
-
-</form>
- -

This element formally defines a form. It's a container element like a {{HTMLelement("section")}} or {{HTMLelement("footer")}} element, but specifically for containing forms; it also supports some specific attributes to configure the way the form behaves. All of its attributes are optional, but it's standard practice to always set at least the action and method attributes:

- - - -
-

Note: We'll look at how those attributes work in our Sending form data article later on.

-
- -

For now, add the above {{htmlelement("form")}} element into your HTML {{htmlelement("body")}}.

- -

The {{HTMLelement("label")}}, {{HTMLelement("input")}}, and {{HTMLelement("textarea")}} elements

- -

Our contact form is not complex: the data entry portion contains three text fields, each with a corresponding {{HTMLelement("label")}}:

- - - -

In terms of HTML code we need something like the following to implement these form widgets:

- -
<form action="/my-handling-form-page" method="post">
- <ul>
-  <li>
-    <label for="name">Name:</label>
-    <input type="text" id="name" name="user_name">
-  </li>
-  <li>
-    <label for="mail">E-mail:</label>
-    <input type="email" id="mail" name="user_mail">
-  </li>
-  <li>
-    <label for="msg">Message:</label>
-    <textarea id="msg" name="user_message"></textarea>
-  </li>
- </ul>
-</form>
- -

Update your form code to look like the above.

- -

The {{HTMLelement("li")}} elements are there to conveniently structure our code and make styling easier (see later in the article). For usability and accessibility, we include an explicit label for each form control. Note the use of the for attribute on all {{HTMLelement("label")}} elements, which takes as its value the id of the form control with which it is associated — this is how you associate a form with its label.

- -

There is great benefit to doing this — it associates the label with the form control, enabling mouse, trackpad, and touch device users to click on the label to activate the corresponding control, and it also provides an accessible name for screen readers to read out to their users. You'll find further details of form labels in How to structure a web form.

- -

On the {{HTMLelement("input")}} element, the most important attribute is the type attribute. This attribute is extremely important because it defines the way the {{HTMLelement("input")}} element appears and behaves. You'll find more about this in the Basic native form controls article later on.

- - - -

Last but not least, note the syntax of <input> vs. <textarea></textarea>. This is one of the oddities of HTML. The <input> tag is an empty element, meaning that it doesn't need a closing tag. {{HTMLElement("textarea")}} is not an empty element, meaning it should be closed it with the proper ending tag. This has an impact on a specific feature of forms: the way you define the default value. To define the default value of an {{HTMLElement("input")}} element you have to use the value attribute like this:

- -
<input type="text" value="by default this element is filled with this text">
- -

On the other hand,  if you want to define a default value for a {{HTMLElement("textarea")}}, you put it between the opening and closing tags of the {{HTMLElement("textarea")}} element, like this:

- -
<textarea>
-by default this element is filled with this text
-</textarea>
- -

The {{HTMLelement("button")}} element

- -

The markup for our form is almost complete; we just need to add a button to allow the user to send, or "submit", their data once they have filled out the form. This is done by using the {{HTMLelement("button")}} element; add the following just above the closing </form> tag:

- -
<li class="button">
-  <button type="submit">Send your message</button>
-</li>
- -

The {{htmlelement("button")}} element also accepts a type attribute — this accepts one of three values: submit, reset, or button.

- - - -
-

Note: You can also use the {{HTMLElement("input")}} element with the corresponding type to produce a button, for example <input type="submit">. The main advantage of the {{HTMLelement("button")}} element is that the {{HTMLelement("input")}} element only allows plain text in its label whereas the {{HTMLelement("button")}} element allows full HTML content, allowing more complex, creative button content.

-
- -

Basic form styling

- -

Now that you have finished writing your form's HTML code, try saving it and looking at it in a browser. At the moment, you'll see that it looks rather ugly.

- -
-

Note: If you don't think you've got the HTML code right, try comparing it with our finished example — see first-form.html (also see it live).

-
- -

Forms are notoriously tricky to style nicely. It is beyond the scope of this article to teach you form styling in detail, so for the moment we will just get you to add some CSS to make it look OK.

- -

First of all, add a {{htmlelement("style")}} element to your page, inside your HTML head. It should look like so:

- -
<style>
-
-</style>
- -

Inside the style tags, add the following CSS:

- -
form {
-  /* Center the form on the page */
-  margin: 0 auto;
-  width: 400px;
-  /* Form outline */
-  padding: 1em;
-  border: 1px solid #CCC;
-  border-radius: 1em;
-}
-
-ul {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-form li + li {
-  margin-top: 1em;
-}
-
-label {
-  /* Uniform size & alignment */
-  display: inline-block;
-  width: 90px;
-  text-align: right;
-}
-
-input,
-textarea {
-  /* To make sure that all text fields have the same font settings
-     By default, textareas have a monospace font */
-  font: 1em sans-serif;
-
-  /* Uniform text field size */
-  width: 300px;
-  box-sizing: border-box;
-
-  /* Match form field borders */
-  border: 1px solid #999;
-}
-
-input:focus,
-textarea:focus {
-  /* Additional highlight for focused elements */
-  border-color: #000;
-}
-
-textarea {
-  /* Align multiline text fields with their labels */
-  vertical-align: top;
-
-  /* Provide space to type some text */
-  height: 5em;
-}
-
-.button {
-  /* Align buttons with the text fields */
-  padding-left: 90px; /* same size as the label elements */
-}
-
-button {
-  /* This extra margin represent roughly the same space as the space
-     between the labels and their text fields */
-  margin-left: .5em;
-}
- -

Save and reload, and you'll see that your form should look much less ugly.

- -
-

Note: You can find our version on GitHub at first-form-styled.html (also see it live).

-
- -

Sending form data to your web server

- -

The last part, and perhaps the trickiest, is to handle form data on the server side. The {{HTMLelement("form")}} element defines where and how to send the data thanks to the action and method attributes.

- -

We provide a name to each form control. The names are important on both the client- and server-side; they tell the browser which name to give each piece of data and, on the server side, they let the server handle each piece of data by name. The form data is sent to the server as name/value pairs.

- -

To name the data in a form you need to use the name attribute on each form widget that will collect a specific piece of data. Let's look at some of our form code again:

- -
<form action="/my-handling-form-page" method="post">
- <ul>
-  <li>
-    <label for="name">Name:</label>
-    <input type="text" id="name" name="user_name" />
-  </li>
-  <li>
-    <label for="mail">E-mail:</label>
-    <input type="email" id="mail" name="user_email" />
-  </li>
-  <li>
-    <label for="msg">Message:</label>
-    <textarea id="msg" name="user_message"></textarea>
-  </li>
-
-  ...
-
- -

In our example, the form will send 3 pieces of data named "user_name", "user_email", and "user_message". That data will be sent to the URL "/my-handling-form-page" using the HTTP POST method.

- -

On the server side, the script at the URL "/my-handling-form-page" will receive the data as a list of 3 key/value items contained in the HTTP request. The way this script will handle that data is up to you. Each server-side language (PHP, Python, Ruby, Java, C#, etc.) has its own mechanism of handling form data. It's beyond the scope of this guide to go deeply into that subject, but if you want to know more, we have provided some examples in our Sending form data article later on.

- -

Summary

- -

Congratulations, you've built your first web form. It looks like this live:

- -

{{ EmbedLiveSample('A_simple_form', '100%', '240', '', 'Learn/Forms/Your_first_form/Example') }}

- -

That's only the beginning, however — now it's time to take a deeper look. Forms have way more power than what we saw here and the other articles in this module will help you to master the rest.

- -

{{NextMenu("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms")}}

- -

In this module

- - - -

Advanced Topics

- - diff --git a/files/uk/learn/html/introduction_to_html/scho_v_head_metadani_v_html/index.html b/files/uk/learn/html/introduction_to_html/scho_v_head_metadani_v_html/index.html deleted file mode 100644 index 63ac7a8cfa..0000000000 --- a/files/uk/learn/html/introduction_to_html/scho_v_head_metadani_v_html/index.html +++ /dev/null @@ -1,276 +0,0 @@ ---- -title: Що в head? Метадані в HTML -slug: Learn/HTML/Introduction_to_HTML/scho_v_head_metadani_v_HTML -tags: - - CSS - - HTML - - head - - Заголовок - - Мова - - Основи - - Розмітка - - веб-сторінки - - голова - - для початківців - - значки - - мета -translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}
- -

Елемент {{glossary("Head", "head")}} документа HTML - це частина, яка не відображається у веб-браузері під час завантаження сторінки. Він містить таку інформацію, як назва сторінки {{htmlelement("title")}}, посилання на файл стилів {{glossary("CSS")}} (якщо ви хочете стилізувати ваш HTML контент за допомогою CSS), посилання на  власні іконки та інші метадані (дані про HTML, наприклад, хто його написав, та важливі ключові слова, які описують документ.) У цій статті ми розглянемо все перераховане вище та інше, щоб дати вам гарну основу для роботи з розміткою.

- - - - - - - - - - - - -
Передумови:Знання основ HTML, як описано в Початок роботи з HTML.
Мета:Дізнатись про заголовок (head) в HTML, які в нього задачі, найважливіші елементи, які він може містити, і який вплив він може мати на HTML-документ.
- -

Що таке заголовок (head) HTML?

- -

Давайте перейдемо до простого HTML документу, який ми розглянули в попередній статті:

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>My test page</title>
-  </head>
-  <body>
-    <p>This is my page</p>
-  </body>
-</html>
- -

Заголовок HTML (head) - це вміст елементу {{htmlelement("head")}} — на відміну від вмісту елемента {{htmlelement("body")}} (яке відображається на сторінці при завантаженні в браузері), вміст head не відображається на сторінці. Головним завданням заголовку є містити {{glossary("Metadata", "метадані")}} про документ. У наведеному вище прикладі заголовок досить малий:

- -
<head>
-  <meta charset="utf-8">
-  <title>My test page</title>
-</head>
- -

Однак у більших сторінках заголовок може містити досить велику кількість інформації - спробуйте перейти на деякі з ваших улюблених веб-сайтів та за допомогою інструментів розробника перевірте вміст заголовку. Наша мета полягає не в тому, щоб показати вам, як використовувати все, що може бути поставлено в заголовок, а навчити вас використовувати найочевидніші речі, які ви хочете включити в заголовок і ознайомити з ними. Давайте розпочнемо.

- -

Додавання назви сторінки

- -

Ми вже бачили елемент елемент {{htmlelement("title")}} в дії — він може бути використаний для додавання назви (title) документа. Однак його можна зплутати з елементом {{htmlelement("h1")}}, який використовується для додавання заголовка верхнього рівня до вашого вмісту body - його також іноді називають заголовком сторінки. Але це різні речі!

- - - -

Активне навчання: перевірка простого прикладу

- -
    -
  1. Щоб розпочати це активне навчання, ми хотіли б, щоб ви перейшли на наш GitHub репозиторій та завантажили копію нашої title-example.html сторінки. Для цього також - -
      -
    1. Скопіюйте та вставте код із сторінки в новий текстовий файл у редакторі коду, а потім збережіть його в зручному місці.
      2. -
    2. Натисніть кнопку "Raw" на сторінці, яка призведе до появи вихідного коду на новій вкладці веб-браузера. Потім виберіть у меню вашого браузера  Файл > Зберегти як... а потім виберіть місце для збереження файлу.
      3. -
    -
    2. -
  2. Тепер відкрийте файл у своєму веб-браузері. Ви повинні побачити щось подібне: -

    A simple web page with the title set to <title> element, and the <h1> set to <h1> element. Тепер повинно бути абсолютно зрозуміло, в чому різниця між <h1> та <title>!

    -
    3. -
  3. Ви також маєте спробувати відкрити код в редакторі коду, відредагувати вміст цих елементів, а потім оновити сторінку у своєму веб-браузері. Поекспериментуйте з кодом, змінюючи його!
    4. -
- -

Зміст елементу <title> також використовується в інший спосіб. Наприклад, якщо ви спробуєте закласти сторінку (Закладки > Закласти цю сторінку або значок зірки в адресному рядку в Firefox), ви побачите зміст <title> заповнений як назва закладки.

- -

A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the <title> element

- -

Вміст <title> також використовується в результатах пошуку, як ви побачите нижче.

- -

Метадані: елемент <meta>

- -

Метадані - це дані, які описують дані, і HTML має "офіційний" спосіб додавання метаданих до документа - елемент {{htmlelement("meta")}}. Звичайно, інші речі, про які ми говоримо в цій статті, також можуть розглядатися як метадані. Існує багато різних типів елементів <meta> які можуть бути включені в <head> вашої сторінки, але не будемо намагатись пояснити їх усі на даному етапі, оскільки це може вас заплутати. Замість цього ми пояснимо декілька речей, які ви, можливо, зазвичай бачите, щоб розібратись, що до чого.

- -

Визначення кодування символів документа

- -

У прикладі, показаному вище, цей рядок також включений:

- -
<meta charset="utf-8">
- -

Цей елемент просто вказує кодування символів документа - набір символів, який документ може використовувати. utf-8 - це універсальний набір символів, що включає практично будь-які символи з будь-якої людської мови. Це означає, що ваша веб-сторінка зможе обробляти будь-яку мову; тому правильно встановити це кодування на кожній веб-сторінці, яку ви створюєте! Наприклад, ваша сторінка може чудово відображатись англійською та японською мовами:

- -

a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine, Якщо ви встановите кодування символів, наприклад, ISO-8859-1,  (набір символів для латинського алфавіту), виведенний текст сторінок буде зіпсованим:

- -

a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly

- -

Активне навчання: експеримент із кодуванням символів

- -

Щоб спробувати це, перегляньте простий шаблон HTML, який ви отримали в попередньому розділі <title> (the title-example.html page), спробуйте змінити значення мета-кодування на ISO-8859-1, і додайте японську мову на свою сторінку. Це текст, який ми використовували (до речі, там написано "рис гарячий"):

- -
<p>Japanese example: ご飯が熱い。</p>
- -

Додавання автора та опису

- -

Багато елементів <meta> містять атрибути name та content:

- - - -

Два таких мета-елемента, які корисні для включення в сторінку, визначають автора сторінки та надають стислий опис сторінки. Давайте подивимось на приклад:

- -
<meta name="author" content="Chris Mills">
-<meta name="description" content="Учбовий центр MDN спрямований на те,
-щоб надати всім новачкам в Інтернеті все, що їм необхідно знати,
-щоб приступити до розробки веб-сайтів і додатків.">
- -

Вказівка імені автора корисна по кількох причинах: корисно вміти розібратися, хто написав сторінку, якщо ви захочете зв'язатися з ним з питаннями про вміст. Деякі системи керування вмістом (CMS) мають можливості для автоматичного виявлення інформації про автора сторінок та надання доступу до них.

- -

Вказування опису, що містить ключові слова, що відносяться до вмісту вашої сторінки, є корисним, оскільки він може призвести до того, що ваша сторінка буде відображатися вище в результатах пошуку, що виконуються пошуковими системами (такі дії називаються Пошуковою оптимізацією, або {{glossary("SEO")}}.)

- -

Активне навчання: використання опису в пошукових системах

- -

Опис також використовується на сторінках результатів пошуку. Давайте пройдемо вправу, щоб вивчити це:

- -
    -
  1. Перейдіть на головну сторінку Mozilla Developer Network.
    2. -
  2. Перегляньте джерело сторінки (клікніть правою кнопкою миші на сторінці, виберіть Програмний код сторінки (View Page Source) із контекстного меню.
    3. -
  3. Знайдіть опис метатегів. Він буде виглядати так: - 
    <meta name="description" content="The Mozilla Developer Network (MDN) provides
-information about Open Web technologies including HTML, CSS, and APIs for both
-Web sites and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
    -
    4. -
  4. Тепер знайдіть "Mozilla Developer Network" у вашій улюбленій пошуковій системі (Ми використовуємо Yahoo.) Ви помітите опис елементів вмісту <meta> та <title>, що використовуються в результатах пошуку — безумовно їх варто вказувати! -

    A Yahoo search result for "Mozilla Developer Network"

    -
    5. -
- -
-

Примітка: В Google ви побачите деякі важливі субсторінки MDN під посиланням на головну сторінку MDN - вони називаються посилання на сайт (sitelinks) і налаштовуються в інструментах Google для веб-майстрів Google's webmaster tools — це спосіб зробити результати пошуку вашого сайту кращими в пошуковій системі Google.

-
- -
-

Примітка: Багато функцій <meta> більше не використовуються. Наприклад, ключове слово <meta> елемента (<meta name="keywords" content="заповнити, в, ваші, ключові, слова, тут">) — який повинен забезпечити ключові слова для пошукових систем, щоб визначити релевантність цієї сторінки для різних пошукових термінів - нині ігноруються пошуковими системами, оскільки спамери просто заповнювали список ключових слів на сторінці сотнями ключових слів, щоб їх сайти з'являлись в результатах пошуку якомога вище.

-
- -

Інші типи метаданих

- -

Мандруючи Інтернетом ви також можете знайти інші типи метаданих. Багато функцій, які ви бачитимете на веб-сайтах, є власне створеними, призначеними для надання деяким сайтам (наприклад, сайтам соціальних мереж) певної інформації, яку вони можуть використовувати.

- -

Наприклад, Open Graph Data є протоколом метаданих, який Facebook винайшов для надання більш багатих метаданих для веб-сайтів. У коді MDN ви знайдете це:

- -
<meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">
-<meta property="og:description" content="The Mozilla Developer Network (MDN) provides
-information about Open Web technologies including HTML, CSS, and APIs for both Web sites
-and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
-<meta property="og:title" content="Mozilla Developer Network">
- -

Одним з ефектів цього є те, що, коли ви посилаєтеся на MDN на Facebook, посилання з'являється разом із зображенням та описом: більш зручно для користувачів.

- -

Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description.Twitter також має власні аналогічні запатентовані метадані, що мають подібний ефект, коли URL-адреса сайту відображається на twitter.com. Наприклад:

- -
<meta name="twitter:title" content="Mozilla Developer Network">
- -

Додавання власних іконок на сайт

- -

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

- -

Цей скромний значок, який існує протягом багатьох років, був першою піктограмою такого типу, значок 16 x 16 пікселів, який використовується в багатьох місцях. Ви побачите значки, які відображатимуться на вкладці веб-переглядача, що містять кожна відкрита сторінка, а також поруч зі сторінками, закладеними на панелі закладок.

- -

Іконка може бути додана на сторінку за допомогою:

- -
    -
  1. Зберігаючи її в тому самому каталозі, що й індексна сторінка сайту (index), збережена у форматі .ico (більшість браузерів підтримуватиме функцію favicons у більш поширених форматах, наприклад .gif або .png, але за допомогою формату ICO це гарантує, що він буде працювати ще в Internet Explorer 6).
    2. -
  2. Додайте наступний рядок в <head> HTML документу, щоб вказати іконку: - 
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    -
    3. -
- -

Ось приклад піктограми на панелі закладок:

- -

The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it.

- -

Також існує безліч інших типів іконок. Наприклад, ви знайдете їх в вихідному коді домашньої сторінки MDN:

- -
<!-- third-generation iPad with high-resolution Retina display: -->
-<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png">
-<!-- iPhone with high-resolution Retina display: -->
-<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png">
-<!-- first- and second-generation iPad: -->
-<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png">
-<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
-<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png">
-<!-- basic favicon -->
-<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png">
- -

У коментарях пояснюється, для чого використовується кожна іконка, наприклад, при додаванні сторінки на головний екран iPad буде використана іконка високої роздільної здатності.

- -

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

- -

Застосування CSS та JavaScript в HTML

- -

Практично всі веб-сайти, якими ви користуєтесь на сьогоднішній день, використовують {{glossary("CSS")}} щоб виглядати класно та {{glossary("JavaScript")}} для роботи інтерактивних функцій, таких як відеоплеєри , карти, ігри тощо. Зазвичай пов'язані стилі додають на сторінку за допомогою елементу {{htmlelement("link")}}, а скрипти за допомогою елементу {{htmlelement("script")}} відповідно.

- - - -

Активне навчання: застосування CSS та JavaScript на сторінці

- -
    -
  1. Щоб розпочати це активне навчання, візьміть копії наших meta-example.html, script.js та style.css файлів, і збережіть їх на своєму комп'ютері в тій же директорії. Переконайтеся, що вони збережені з правильними іменами та розширеннями файлів.
    2. -
  2. Відкрийте файл HTML у вашому браузері та текстовий редактор.
    3. -
  3. Виконавши ці кроки, додайте до вашого HTML документу елементи {{htmlelement("link")}} та {{htmlelement("script")}}, щоб CSS та JavaScript застосувались до HTML-документу.
    4. -
- -

Якщо все правильно зроблено, коли ви збережете свій HTML-код і оновите свій браузер, то побачите, що на сторінці все змінилося:

- -

Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page.

- - - -
-

Примітка: Якщо ви застрягли в цій вправі і не можете застосувати CSS/JS на сторінці, то перегляньте нашу сторінку css-and-js.html з прикладом.

-
- -

Встановлення основної мови документа

- -

Нарешті, варто зазначити, що ви можете (і це необхідно) встановити мову своєї сторінки. Це можна зробити, додавши lang attribute (атрибут мови) до відкриваючого HTML-тегу (як показано в прикладі meta-example.html і показано нижче).

- -
<html lang="en-US">
- -

Це корисно в багатьох випадках. Ваш HTML-документ буде більш ефективно індексований пошуковими системами, які використовують це, щоб ефективніше індексувати сторінки — наприклад, показувати їх користувачам, які використовують відповідну мову (дозволяючи їй відображатися належним чином), і це корисно для людей з порушеннями зору, що використовують програми зчитування з екрана - скрінрідери (наприклад, слово "динозавр" говорять як українською, так й іншими мовами, але воно вимовляється по-різному).

- -

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

- -
<p>Japanese example: <span lang="jp">ご飯が熱い。</span>.</p>
- -

Ці коди визначаються стандартом ISO 639-1. Ви можете дізнатись більше про них в Language tags in HTML and XML.

- -

Підсумок

- -

На цьому закінчим наш короткий огляд заголовку HTML — там ще багато всього корисного, але зараз повний перелік буде нудним і заплутає вас. Ви вже маєте загальне уявлення про найпоширеніші і використовуваніші елементи. У наступній статті ми розглянемо основи розмітки тексту в HTML.

- -

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}

- -

 

- -

 

diff --git a/files/uk/learn/html/introduction_to_html/the_head_metadata_in_html/index.html b/files/uk/learn/html/introduction_to_html/the_head_metadata_in_html/index.html new file mode 100644 index 0000000000..63ac7a8cfa --- /dev/null +++ b/files/uk/learn/html/introduction_to_html/the_head_metadata_in_html/index.html @@ -0,0 +1,276 @@ +--- +title: Що в head? Метадані в HTML +slug: Learn/HTML/Introduction_to_HTML/scho_v_head_metadani_v_HTML +tags: + - CSS + - HTML + - head + - Заголовок + - Мова + - Основи + - Розмітка + - веб-сторінки + - голова + - для початківців + - значки + - мета +translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}
+ +

Елемент {{glossary("Head", "head")}} документа HTML - це частина, яка не відображається у веб-браузері під час завантаження сторінки. Він містить таку інформацію, як назва сторінки {{htmlelement("title")}}, посилання на файл стилів {{glossary("CSS")}} (якщо ви хочете стилізувати ваш HTML контент за допомогою CSS), посилання на  власні іконки та інші метадані (дані про HTML, наприклад, хто його написав, та важливі ключові слова, які описують документ.) У цій статті ми розглянемо все перераховане вище та інше, щоб дати вам гарну основу для роботи з розміткою.

+ + + + + + + + + + + + +
Передумови:Знання основ HTML, як описано в Початок роботи з HTML.
Мета:Дізнатись про заголовок (head) в HTML, які в нього задачі, найважливіші елементи, які він може містити, і який вплив він може мати на HTML-документ.
+ +

Що таке заголовок (head) HTML?

+ +

Давайте перейдемо до простого HTML документу, який ми розглянули в попередній статті:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>My test page</title>
+  </head>
+  <body>
+    <p>This is my page</p>
+  </body>
+</html>
+ +

Заголовок HTML (head) - це вміст елементу {{htmlelement("head")}} — на відміну від вмісту елемента {{htmlelement("body")}} (яке відображається на сторінці при завантаженні в браузері), вміст head не відображається на сторінці. Головним завданням заголовку є містити {{glossary("Metadata", "метадані")}} про документ. У наведеному вище прикладі заголовок досить малий:

+ +
<head>
+  <meta charset="utf-8">
+  <title>My test page</title>
+</head>
+ +

Однак у більших сторінках заголовок може містити досить велику кількість інформації - спробуйте перейти на деякі з ваших улюблених веб-сайтів та за допомогою інструментів розробника перевірте вміст заголовку. Наша мета полягає не в тому, щоб показати вам, як використовувати все, що може бути поставлено в заголовок, а навчити вас використовувати найочевидніші речі, які ви хочете включити в заголовок і ознайомити з ними. Давайте розпочнемо.

+ +

Додавання назви сторінки

+ +

Ми вже бачили елемент елемент {{htmlelement("title")}} в дії — він може бути використаний для додавання назви (title) документа. Однак його можна зплутати з елементом {{htmlelement("h1")}}, який використовується для додавання заголовка верхнього рівня до вашого вмісту body - його також іноді називають заголовком сторінки. Але це різні речі!

+ + + +

Активне навчання: перевірка простого прикладу

+ +
    +
  1. Щоб розпочати це активне навчання, ми хотіли б, щоб ви перейшли на наш GitHub репозиторій та завантажили копію нашої title-example.html сторінки. Для цього також + +
      +
    1. Скопіюйте та вставте код із сторінки в новий текстовий файл у редакторі коду, а потім збережіть його в зручному місці.
      2. +
    2. Натисніть кнопку "Raw" на сторінці, яка призведе до появи вихідного коду на новій вкладці веб-браузера. Потім виберіть у меню вашого браузера  Файл > Зберегти як... а потім виберіть місце для збереження файлу.
      3. +
    +
    2. +
  2. Тепер відкрийте файл у своєму веб-браузері. Ви повинні побачити щось подібне: +

    A simple web page with the title set to <title> element, and the <h1> set to <h1> element. Тепер повинно бути абсолютно зрозуміло, в чому різниця між <h1> та <title>!

    +
    3. +
  3. Ви також маєте спробувати відкрити код в редакторі коду, відредагувати вміст цих елементів, а потім оновити сторінку у своєму веб-браузері. Поекспериментуйте з кодом, змінюючи його!
    4. +
+ +

Зміст елементу <title> також використовується в інший спосіб. Наприклад, якщо ви спробуєте закласти сторінку (Закладки > Закласти цю сторінку або значок зірки в адресному рядку в Firefox), ви побачите зміст <title> заповнений як назва закладки.

+ +

A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the <title> element

+ +

Вміст <title> також використовується в результатах пошуку, як ви побачите нижче.

+ +

Метадані: елемент <meta>

+ +

Метадані - це дані, які описують дані, і HTML має "офіційний" спосіб додавання метаданих до документа - елемент {{htmlelement("meta")}}. Звичайно, інші речі, про які ми говоримо в цій статті, також можуть розглядатися як метадані. Існує багато різних типів елементів <meta> які можуть бути включені в <head> вашої сторінки, але не будемо намагатись пояснити їх усі на даному етапі, оскільки це може вас заплутати. Замість цього ми пояснимо декілька речей, які ви, можливо, зазвичай бачите, щоб розібратись, що до чого.

+ +

Визначення кодування символів документа

+ +

У прикладі, показаному вище, цей рядок також включений:

+ +
<meta charset="utf-8">
+ +

Цей елемент просто вказує кодування символів документа - набір символів, який документ може використовувати. utf-8 - це універсальний набір символів, що включає практично будь-які символи з будь-якої людської мови. Це означає, що ваша веб-сторінка зможе обробляти будь-яку мову; тому правильно встановити це кодування на кожній веб-сторінці, яку ви створюєте! Наприклад, ваша сторінка може чудово відображатись англійською та японською мовами:

+ +

a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine, Якщо ви встановите кодування символів, наприклад, ISO-8859-1,  (набір символів для латинського алфавіту), виведенний текст сторінок буде зіпсованим:

+ +

a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly

+ +

Активне навчання: експеримент із кодуванням символів

+ +

Щоб спробувати це, перегляньте простий шаблон HTML, який ви отримали в попередньому розділі <title> (the title-example.html page), спробуйте змінити значення мета-кодування на ISO-8859-1, і додайте японську мову на свою сторінку. Це текст, який ми використовували (до речі, там написано "рис гарячий"):

+ +
<p>Japanese example: ご飯が熱い。</p>
+ +

Додавання автора та опису

+ +

Багато елементів <meta> містять атрибути name та content:

+ + + +

Два таких мета-елемента, які корисні для включення в сторінку, визначають автора сторінки та надають стислий опис сторінки. Давайте подивимось на приклад:

+ +
<meta name="author" content="Chris Mills">
+<meta name="description" content="Учбовий центр MDN спрямований на те,
+щоб надати всім новачкам в Інтернеті все, що їм необхідно знати,
+щоб приступити до розробки веб-сайтів і додатків.">
+ +

Вказівка імені автора корисна по кількох причинах: корисно вміти розібратися, хто написав сторінку, якщо ви захочете зв'язатися з ним з питаннями про вміст. Деякі системи керування вмістом (CMS) мають можливості для автоматичного виявлення інформації про автора сторінок та надання доступу до них.

+ +

Вказування опису, що містить ключові слова, що відносяться до вмісту вашої сторінки, є корисним, оскільки він може призвести до того, що ваша сторінка буде відображатися вище в результатах пошуку, що виконуються пошуковими системами (такі дії називаються Пошуковою оптимізацією, або {{glossary("SEO")}}.)

+ +

Активне навчання: використання опису в пошукових системах

+ +

Опис також використовується на сторінках результатів пошуку. Давайте пройдемо вправу, щоб вивчити це:

+ +
    +
  1. Перейдіть на головну сторінку Mozilla Developer Network.
    2. +
  2. Перегляньте джерело сторінки (клікніть правою кнопкою миші на сторінці, виберіть Програмний код сторінки (View Page Source) із контекстного меню.
    3. +
  3. Знайдіть опис метатегів. Він буде виглядати так: + 
    <meta name="description" content="The Mozilla Developer Network (MDN) provides
+information about Open Web technologies including HTML, CSS, and APIs for both
+Web sites and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
    +
    4. +
  4. Тепер знайдіть "Mozilla Developer Network" у вашій улюбленій пошуковій системі (Ми використовуємо Yahoo.) Ви помітите опис елементів вмісту <meta> та <title>, що використовуються в результатах пошуку — безумовно їх варто вказувати! +

    A Yahoo search result for "Mozilla Developer Network"

    +
    5. +
+ +
+

Примітка: В Google ви побачите деякі важливі субсторінки MDN під посиланням на головну сторінку MDN - вони називаються посилання на сайт (sitelinks) і налаштовуються в інструментах Google для веб-майстрів Google's webmaster tools — це спосіб зробити результати пошуку вашого сайту кращими в пошуковій системі Google.

+
+ +
+

Примітка: Багато функцій <meta> більше не використовуються. Наприклад, ключове слово <meta> елемента (<meta name="keywords" content="заповнити, в, ваші, ключові, слова, тут">) — який повинен забезпечити ключові слова для пошукових систем, щоб визначити релевантність цієї сторінки для різних пошукових термінів - нині ігноруються пошуковими системами, оскільки спамери просто заповнювали список ключових слів на сторінці сотнями ключових слів, щоб їх сайти з'являлись в результатах пошуку якомога вище.

+
+ +

Інші типи метаданих

+ +

Мандруючи Інтернетом ви також можете знайти інші типи метаданих. Багато функцій, які ви бачитимете на веб-сайтах, є власне створеними, призначеними для надання деяким сайтам (наприклад, сайтам соціальних мереж) певної інформації, яку вони можуть використовувати.

+ +

Наприклад, Open Graph Data є протоколом метаданих, який Facebook винайшов для надання більш багатих метаданих для веб-сайтів. У коді MDN ви знайдете це:

+ +
<meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">
+<meta property="og:description" content="The Mozilla Developer Network (MDN) provides
+information about Open Web technologies including HTML, CSS, and APIs for both Web sites
+and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
+<meta property="og:title" content="Mozilla Developer Network">
+ +

Одним з ефектів цього є те, що, коли ви посилаєтеся на MDN на Facebook, посилання з'являється разом із зображенням та описом: більш зручно для користувачів.

+ +

Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description.Twitter також має власні аналогічні запатентовані метадані, що мають подібний ефект, коли URL-адреса сайту відображається на twitter.com. Наприклад:

+ +
<meta name="twitter:title" content="Mozilla Developer Network">
+ +

Додавання власних іконок на сайт

+ +

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

+ +

Цей скромний значок, який існує протягом багатьох років, був першою піктограмою такого типу, значок 16 x 16 пікселів, який використовується в багатьох місцях. Ви побачите значки, які відображатимуться на вкладці веб-переглядача, що містять кожна відкрита сторінка, а також поруч зі сторінками, закладеними на панелі закладок.

+ +

Іконка може бути додана на сторінку за допомогою:

+ +
    +
  1. Зберігаючи її в тому самому каталозі, що й індексна сторінка сайту (index), збережена у форматі .ico (більшість браузерів підтримуватиме функцію favicons у більш поширених форматах, наприклад .gif або .png, але за допомогою формату ICO це гарантує, що він буде працювати ще в Internet Explorer 6).
    2. +
  2. Додайте наступний рядок в <head> HTML документу, щоб вказати іконку: + 
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    +
    3. +
+ +

Ось приклад піктограми на панелі закладок:

+ +

The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it.

+ +

Також існує безліч інших типів іконок. Наприклад, ви знайдете їх в вихідному коді домашньої сторінки MDN:

+ +
<!-- third-generation iPad with high-resolution Retina display: -->
+<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png">
+<!-- iPhone with high-resolution Retina display: -->
+<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png">
+<!-- first- and second-generation iPad: -->
+<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png">
+<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
+<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png">
+<!-- basic favicon -->
+<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png">
+ +

У коментарях пояснюється, для чого використовується кожна іконка, наприклад, при додаванні сторінки на головний екран iPad буде використана іконка високої роздільної здатності.

+ +

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

+ +

Застосування CSS та JavaScript в HTML

+ +

Практично всі веб-сайти, якими ви користуєтесь на сьогоднішній день, використовують {{glossary("CSS")}} щоб виглядати класно та {{glossary("JavaScript")}} для роботи інтерактивних функцій, таких як відеоплеєри , карти, ігри тощо. Зазвичай пов'язані стилі додають на сторінку за допомогою елементу {{htmlelement("link")}}, а скрипти за допомогою елементу {{htmlelement("script")}} відповідно.

+ + + +

Активне навчання: застосування CSS та JavaScript на сторінці

+ +
    +
  1. Щоб розпочати це активне навчання, візьміть копії наших meta-example.html, script.js та style.css файлів, і збережіть їх на своєму комп'ютері в тій же директорії. Переконайтеся, що вони збережені з правильними іменами та розширеннями файлів.
    2. +
  2. Відкрийте файл HTML у вашому браузері та текстовий редактор.
    3. +
  3. Виконавши ці кроки, додайте до вашого HTML документу елементи {{htmlelement("link")}} та {{htmlelement("script")}}, щоб CSS та JavaScript застосувались до HTML-документу.
    4. +
+ +

Якщо все правильно зроблено, коли ви збережете свій HTML-код і оновите свій браузер, то побачите, що на сторінці все змінилося:

+ +

Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page.

+ + + +
+

Примітка: Якщо ви застрягли в цій вправі і не можете застосувати CSS/JS на сторінці, то перегляньте нашу сторінку css-and-js.html з прикладом.

+
+ +

Встановлення основної мови документа

+ +

Нарешті, варто зазначити, що ви можете (і це необхідно) встановити мову своєї сторінки. Це можна зробити, додавши lang attribute (атрибут мови) до відкриваючого HTML-тегу (як показано в прикладі meta-example.html і показано нижче).

+ +
<html lang="en-US">
+ +

Це корисно в багатьох випадках. Ваш HTML-документ буде більш ефективно індексований пошуковими системами, які використовують це, щоб ефективніше індексувати сторінки — наприклад, показувати їх користувачам, які використовують відповідну мову (дозволяючи їй відображатися належним чином), і це корисно для людей з порушеннями зору, що використовують програми зчитування з екрана - скрінрідери (наприклад, слово "динозавр" говорять як українською, так й іншими мовами, але воно вимовляється по-різному).

+ +

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

+ +
<p>Japanese example: <span lang="jp">ご飯が熱い。</span>.</p>
+ +

Ці коди визначаються стандартом ISO 639-1. Ви можете дізнатись більше про них в Language tags in HTML and XML.

+ +

Підсумок

+ +

На цьому закінчим наш короткий огляд заголовку HTML — там ще багато всього корисного, але зараз повний перелік буде нудним і заплутає вас. Ви вже маєте загальне уявлення про найпоширеніші і використовуваніші елементи. У наступній статті ми розглянемо основи розмітки тексту в HTML.

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}

+ +

 

+ +

 

diff --git a/files/uk/learn/javascript/asynchronous/index.html b/files/uk/learn/javascript/asynchronous/index.html new file mode 100644 index 0000000000..3167a1f55a --- /dev/null +++ b/files/uk/learn/javascript/asynchronous/index.html @@ -0,0 +1,51 @@ +--- +title: Асинхронний JavaScript +slug: Learn/JavaScript/Асинхронний +translation_of: Learn/JavaScript/Asynchronous +--- +
{{LearnSidebar}}
+ +

In this module we take a look at {{Glossary("asynchronous")}} {{Glossary("JavaScript")}}, why it is important, and how it can be used to effectively handle potential blocking operations such as fetching resources from a server.

+ +
+

Looking to become a front-end web developer?

+ +

We have put together a course that includes all the essential information you need to work towards your goal.

+ +

Get started

+
+ +

Prerequisites

+ +

Asynchronous JavaScript is a fairly advanced topic, and you are advised to work through JavaScript first steps and JavaScript building blocks modules before attempting this.

+ +

If you are not familiar with the concept of asynchronous programming, you should definitely start with the General asynchronous programming concepts article in this module. If you are, then you can probably skip to the Introducing asynchronous JavaScript module.

+ +
+

Note: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you can try out (most of) the code examples in an online coding program such as JSBin or Glitch.

+
+ +

Guides

+ +
+
General asynchronous programming concepts
+
+

In this article we'll run through a number of important concepts relating to asynchronous programming, and how this looks in web browsers and JavaScript. You should understand these concepts before working through the other articles in the module.

+
+
Introducing asynchronous JavaScript
+
In this article we briefly recap the problems associated with sychronous JavaScript, and take a first look at some of the different asynchronous JavaScript techniques you'll encounter, showing how they can help us solve such problems.
+
Cooperative asynchronous JavaScript: Timeouts and intervals
+
Here we look at the traditional methods JavaScript has available for running code asychronously after a set time period has elapsed, or at a regular interval (e.g. a set number of times per second), talk about what they are useful for, and look at their inherent issues.
+
Handling async operations gracefully with Promises
+
Promises are a comparatively new feature of the JavaScript language that allow you to defer further actions until after the previous action has completed, or respond to its failure. This is really useful for setting up a sequence of operations to work correctly. This article shows you how promises work, where you'll see them in use in WebAPIs, and how to write your own.
+
Making asynchronous programming easier with async and await
+
Promises can be somewhat complex to set up and understand, and so modern browsers have implemented async functions and the await operator. The former allows standard functions to implicitly behave asynchronously with promises, whereas the latter can be used inside async functions to wait for promises before the function continues. This makes chaining promises simpler and easier to read.
+
Choosing the right approach
+
To finish this module off, we'll consider the different coding techniques and features we've discussed throughout, looking at which ones you should use when, with recommendations and reminders of common pitfalls where appropriate.
+
+ +

See also

+ + diff --git a/files/uk/learn/javascript/building_blocks/index.html b/files/uk/learn/javascript/building_blocks/index.html new file mode 100644 index 0000000000..d4a6238d0f --- /dev/null +++ b/files/uk/learn/javascript/building_blocks/index.html @@ -0,0 +1,57 @@ +--- +title: Будівельні блоки JavaScript +slug: Learn/JavaScript/Будівельні_блоки +translation_of: Learn/JavaScript/Building_blocks +--- +
{{LearnSidebar}}
+ +

In this module, we continue our coverage of all JavaScript's key fundamental features, turning our attention to commonly-encountered types of code blocks such as conditional statements, loops, functions, and events. You've seen this stuff already in the course, but only in passing — here we'll discuss it all explicitly.

+ +
+

Looking to become a front-end web developer?

+ +

We have put together a course that includes all the essential information you need to work towards your goal.

+ +

Get started

+
+ +

Prerequisites

+ +

Before starting this module, you should have some familiarity with the basics of HTML and CSS, and you should have also worked through our previous module, JavaScript first steps.

+ +
+

Note: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as JSBin or Glitch.

+
+ +

Guides

+ +
+
Making decisions in your code — conditionals
+
In any programming language, code needs to make decisions and carry out actions accordingly depending on different inputs. For example, in a game, if the player's number of lives is 0, then it's game over. In a weather app, if it is being looked at in the morning, show a sunrise graphic; show stars and a moon if it is nighttime. In this article we'll explore how conditional structures work in JavaScript.
+
Looping code
+
Sometimes you need a task done more than once in a row. For example, looking through a list of names. In programming, loops perform this job very well. Here we will look at loop structures in JavaScript.
+
Functions — reusable blocks of code
+
Another essential concept in coding is functions. Functions allow you to store a piece of code that does a single task inside a defined block, and then call that code whenever you need it using a single short command — rather than having to type out the same code multiple times. In this article we'll explore fundamental concepts behind functions such as basic syntax, how to invoke and define functions, scope, and parameters.
+
Build your own function
+
With most of the essential theory dealt with previously, this article provides a practical experience. Here you'll get some practice with building up your own custom function. Along the way, we'll also explain some further useful details of dealing with functions.
+
Function return values
+
The last essential concept you must know about a function is return values. Some functions don't return a significant value after completion, but others do. It's important to understand what their values are, how to make use of them in your code, and how to make your own custom functions return useful values. 
+
Introduction to events
+
Events are actions or occurrences that happen in the system you are programming, which the system tells you about so you can respond to them in some way if desired. For example if the user clicks a button on a webpage, you might want to respond to that action by displaying an information box. In this final article we will discuss some important concepts surrounding events, and look at how they work in browsers.
+
+ +

Assessments

+ +

The following assessment will test your understanding of the JavaScript basics covered in the guides above.

+ +
+
Image gallery
+
Now that we've looked at the fundamental building blocks of JavaScript, we'll test your knowledge of loops, functions, conditionals and events by building a fairly common item you'll see on a lot of websites — a JavaScript-powered image gallery.
+
+ +

See also

+ +
+
Learn JavaScript
+
An excellent resource for aspiring web developers — Learn JavaScript in an interactive environment, with short lessons and interactive tests, guided by automated assessment. The first 40 lessons are free, and the complete course is available for a small one-time payment.
+
diff --git "a/files/uk/learn/javascript/\320\260\321\201\320\270\320\275\321\205\321\200\320\276\320\275\320\275\320\270\320\271/index.html" "b/files/uk/learn/javascript/\320\260\321\201\320\270\320\275\321\205\321\200\320\276\320\275\320\275\320\270\320\271/index.html" deleted file mode 100644 index 3167a1f55a..0000000000 --- "a/files/uk/learn/javascript/\320\260\321\201\320\270\320\275\321\205\321\200\320\276\320\275\320\275\320\270\320\271/index.html" +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: Асинхронний JavaScript -slug: Learn/JavaScript/Асинхронний -translation_of: Learn/JavaScript/Asynchronous ---- -
{{LearnSidebar}}
- -

In this module we take a look at {{Glossary("asynchronous")}} {{Glossary("JavaScript")}}, why it is important, and how it can be used to effectively handle potential blocking operations such as fetching resources from a server.

- -
-

Looking to become a front-end web developer?

- -

We have put together a course that includes all the essential information you need to work towards your goal.

- -

Get started

-
- -

Prerequisites

- -

Asynchronous JavaScript is a fairly advanced topic, and you are advised to work through JavaScript first steps and JavaScript building blocks modules before attempting this.

- -

If you are not familiar with the concept of asynchronous programming, you should definitely start with the General asynchronous programming concepts article in this module. If you are, then you can probably skip to the Introducing asynchronous JavaScript module.

- -
-

Note: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you can try out (most of) the code examples in an online coding program such as JSBin or Glitch.

-
- -

Guides

- -
-
General asynchronous programming concepts
-
-

In this article we'll run through a number of important concepts relating to asynchronous programming, and how this looks in web browsers and JavaScript. You should understand these concepts before working through the other articles in the module.

-
-
Introducing asynchronous JavaScript
-
In this article we briefly recap the problems associated with sychronous JavaScript, and take a first look at some of the different asynchronous JavaScript techniques you'll encounter, showing how they can help us solve such problems.
-
Cooperative asynchronous JavaScript: Timeouts and intervals
-
Here we look at the traditional methods JavaScript has available for running code asychronously after a set time period has elapsed, or at a regular interval (e.g. a set number of times per second), talk about what they are useful for, and look at their inherent issues.
-
Handling async operations gracefully with Promises
-
Promises are a comparatively new feature of the JavaScript language that allow you to defer further actions until after the previous action has completed, or respond to its failure. This is really useful for setting up a sequence of operations to work correctly. This article shows you how promises work, where you'll see them in use in WebAPIs, and how to write your own.
-
Making asynchronous programming easier with async and await
-
Promises can be somewhat complex to set up and understand, and so modern browsers have implemented async functions and the await operator. The former allows standard functions to implicitly behave asynchronously with promises, whereas the latter can be used inside async functions to wait for promises before the function continues. This makes chaining promises simpler and easier to read.
-
Choosing the right approach
-
To finish this module off, we'll consider the different coding techniques and features we've discussed throughout, looking at which ones you should use when, with recommendations and reminders of common pitfalls where appropriate.
-
- -

See also

- - diff --git "a/files/uk/learn/javascript/\320\261\321\203\320\264\321\226\320\262\320\265\320\273\321\214\320\275\321\226_\320\261\320\273\320\276\320\272\320\270/index.html" "b/files/uk/learn/javascript/\320\261\321\203\320\264\321\226\320\262\320\265\320\273\321\214\320\275\321\226_\320\261\320\273\320\276\320\272\320\270/index.html" deleted file mode 100644 index d4a6238d0f..0000000000 --- "a/files/uk/learn/javascript/\320\261\321\203\320\264\321\226\320\262\320\265\320\273\321\214\320\275\321\226_\320\261\320\273\320\276\320\272\320\270/index.html" +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: Будівельні блоки JavaScript -slug: Learn/JavaScript/Будівельні_блоки -translation_of: Learn/JavaScript/Building_blocks ---- -
{{LearnSidebar}}
- -

In this module, we continue our coverage of all JavaScript's key fundamental features, turning our attention to commonly-encountered types of code blocks such as conditional statements, loops, functions, and events. You've seen this stuff already in the course, but only in passing — here we'll discuss it all explicitly.

- -
-

Looking to become a front-end web developer?

- -

We have put together a course that includes all the essential information you need to work towards your goal.

- -

Get started

-
- -

Prerequisites

- -

Before starting this module, you should have some familiarity with the basics of HTML and CSS, and you should have also worked through our previous module, JavaScript first steps.

- -
-

Note: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as JSBin or Glitch.

-
- -

Guides

- -
-
Making decisions in your code — conditionals
-
In any programming language, code needs to make decisions and carry out actions accordingly depending on different inputs. For example, in a game, if the player's number of lives is 0, then it's game over. In a weather app, if it is being looked at in the morning, show a sunrise graphic; show stars and a moon if it is nighttime. In this article we'll explore how conditional structures work in JavaScript.
-
Looping code
-
Sometimes you need a task done more than once in a row. For example, looking through a list of names. In programming, loops perform this job very well. Here we will look at loop structures in JavaScript.
-
Functions — reusable blocks of code
-
Another essential concept in coding is functions. Functions allow you to store a piece of code that does a single task inside a defined block, and then call that code whenever you need it using a single short command — rather than having to type out the same code multiple times. In this article we'll explore fundamental concepts behind functions such as basic syntax, how to invoke and define functions, scope, and parameters.
-
Build your own function
-
With most of the essential theory dealt with previously, this article provides a practical experience. Here you'll get some practice with building up your own custom function. Along the way, we'll also explain some further useful details of dealing with functions.
-
Function return values
-
The last essential concept you must know about a function is return values. Some functions don't return a significant value after completion, but others do. It's important to understand what their values are, how to make use of them in your code, and how to make your own custom functions return useful values. 
-
Introduction to events
-
Events are actions or occurrences that happen in the system you are programming, which the system tells you about so you can respond to them in some way if desired. For example if the user clicks a button on a webpage, you might want to respond to that action by displaying an information box. In this final article we will discuss some important concepts surrounding events, and look at how they work in browsers.
-
- -

Assessments

- -

The following assessment will test your understanding of the JavaScript basics covered in the guides above.

- -
-
Image gallery
-
Now that we've looked at the fundamental building blocks of JavaScript, we'll test your knowledge of loops, functions, conditionals and events by building a fairly common item you'll see on a lot of websites — a JavaScript-powered image gallery.
-
- -

See also

- -
-
Learn JavaScript
-
An excellent resource for aspiring web developers — Learn JavaScript in an interactive environment, with short lessons and interactive tests, guided by automated assessment. The first 40 lessons are free, and the complete course is available for a small one-time payment.
-
diff --git a/files/uk/learn/learning_and_getting_help/index.html b/files/uk/learn/learning_and_getting_help/index.html new file mode 100644 index 0000000000..c1dad68ac9 --- /dev/null +++ b/files/uk/learn/learning_and_getting_help/index.html @@ -0,0 +1,315 @@ +--- +title: Навчання та отримання допомоги +slug: Learn/Навчання_та_отримання_допомоги +translation_of: Learn/Learning_and_getting_help +--- +

{{learnsidebar}}

+ +

It is great that you are putting some time into learning a new set of skills, but there are good practices to employ that will make your learning more effective. There are also are times when you'll get stuck and feel frustrated — even professional web developers feel like this regularly — and it pays to know about the most effective ways to try and get help so you can progress in your work. This article provides some hints and tips in both of these areas that will help you get more out of learning web development, as well as further reading so you can find out more information about each sub-topic should you wish..

+ +

Effective learning

+ +

Let's move straight on and think about effective learning.

+ +

Different learning methods

+ +

It is interesting to consider that there are two main ways in which your brain learns things — focused and diffuse learning:

+ + + +

From the studies that neuroscientists have done on brain activity, we have found out that you can't really engage in both ways of learning — or thinking — at once. So which one should you choose? You might think that focused learning is better for studying, but in reality, both are very important.

+ +

Focused thinking is great for concentrating hard on specific subjects, getting into deep problem solving, and improving your mastery of the techniques required — strengthening the neural pathways in your brain where that information is stored. It isn't however very good at getting an understanding of "the big picture", and unlocking new neural pathways when you are trying to understand new subjects or solve new problems that you haven't come across before. 

+ +

For that, you need diffuse thinking. This is the opposite of focus — you let your brain wander around the wider landscape, searching around for connections you didn't have before, touching on new things (or new combinations of things) that you can then focus on later, to strengthen them and start to really understand what they mean.

+ +

This is why it is usually good to read some introductory material first to get a high-level understanding of an area before you leap into the specific details.

+ +

It is also why you can sometimes get really stuck on a problem, but then figure out the answer when you go for a coffee break (or a walk). You might:

+ +
    +
  1. Know how to fix problem A with tool A.
    2. +
  2. Know how to fix problem B with tool B.
    3. +
  3. Not know how to fix problem C.
    4. +
+ +

Let's say you focus on problem C for a while and get frustrated because you can't think how to solve it. But then after going on a walk to get some fresh air, you may well find that as your mind wanders, you suddenly make a connection between tool A and tool B, and realize that you can use them together to fix problem C! It isn't always this simple, but it is also surprising how many times this does happen. This also highlights the importance of taking regular breaks when you are studying in front of the computer.

+ +

Different learning materials

+ +

It is also worth looking at the different types of learning materials that are available, to see which ones are most effective for you to learn with.

+ +

Textual articles

+ +

You'll find a lot of written articles on the web to teach you about web design. Like most of this course, for example. Some of the articles will be tutorials, to teach you a certain technique or important concept (such as "learn how to create a video player" or "Learn the CSS box model"), and some of the articles will be reference material, to allow you to look up details you may have forgotten (such as "what is the syntax of the CSS background property"?)

+ +

MDN Web Docs is very good for both types — the area you are currently in is great for learning techniques and concepts, and we also have several giant reference sections allowing you to look up any syntax you can't remember.

+ +

There are also several other great resources on the web, some of which we'll mention below.

+ +
+

Note: The above text should have given you an important fact — you aren't expected to remember everything! Professional web developers use tools like MDN Web Docs to look up things they have forgotten all the time. As you'll discover, learning web development is more about problem-solving and learning patterns than it is about learning lots of syntaxes.

+
+ +

Videos

+ +

There are also a number of sites that have video learning content on them. YouTube is an obvious one, with channels such as Mozilla Layout Land, MozillaDeveloper, and Google ChromeDevelopers providing many useful videos. Many people prefer textual articles for more in-depth learning and reference material, and videos for quick explanations of concepts and new features, but it is really up to you what you prefer to learn from. There is no right and wrong answer here.

+ +

Interactive code playgrounds

+ +

You might be the kind of person that prefers minimal instructions and would prefer to jump straight in and start playing with code. This is also a reasonable approach, and some learning sites tend to favor it. Codecademy for example is a learning site where the tutorials mainly consist of interactive code editors where you have to directly write code and see if the desired result was achieved.

+ +

Many MDN Web docs reference pages provide interactive examples too, where you can alter the code and see how the live result changes. And there is also nothing wrong with creating your own code examples on your computer, or in an online code editor like JSBin, Codepen, or Glitch. In fact, you'll be called to do so as part of this course when you are learning!

+ +
+

Note: Online code editors are also really useful for sharing code you've written, for example, if you are collaborating on learning with someone else who isn't in the same location, or are sending it someone to ask for help with it. You can share the web address of the example with them so they can see it.

+
+ +
+

Note: You might favor one learning method over the others, but realistically a hybrid approach is probably what you will end up with. And you'll probably come up with other methods than the three we covered above.

+
+ +

Making a plan

+ +

It is a good idea to create a plan to help you achieve what you want to achieve through your learning.

+ +

A goal statement

+ +

It sounds silly, but why not start with a single sentence that says what you want to achieve? The following have different scopes, but are all realistic and achievable:

+ + + +

The following are not quite as reasonable:

+ + + +

What do you need to get there?

+ +

Once you've worked out your goal, it is a good idea to research what you'll need to achieve the goal. For example:

+ +

Materials I need:

+ + + +

Knowledge I need:

+ + + +

How much time and money will it take?

+ +

Estimate the time and cost of getting these things. If you'll need to work to earn money to buy the materials required, then the time to do that will have to be factored in. Once you have a time estimate, you can start to build a plan around your life.

+ +

How many hours per week do I need to do?

+ +

Once you know what you need to do, and how long you think it'll take you, you can start writing out a plan to follow, to achieve your goal. It can be as simple as:

+ +

"It'll take me 500 hours to learn what I need to know, and I have a year to do it, so if I assume 2 weeks' holiday I'll need to do work on this for 10 hours per week. I am free on evenings and weekends, so I'll plan my time around those."

+ +

How much time you can spend on this of course depends on what your circumstances are. If you are at school, then you've got way more free time than if you have a job and children to provide for. It is still possible to achieve your goals, but you have to be realistic about how quickly you can do it.

+ +

If you are doing a university or college course to learn web development, then most of this planning is done for you — lucky you!

+ +

When you have worked out a weekly schedule, then you should keep a record of what you manage to do each week in a simple spreadsheet or even in a notebook!

+ +

Also, it might be a good idea to have some sub-goals worked out to allow you to keep track of where you are more easily, for example:

+ + + +

Keep thinking about how much progress you are making, and adjust your plan if needs be.

+ +

Staying motivated

+ +

It is hard to stay motivated, especially if you are trying to learn a complex skill like programming or web development. What follows are some tips to stay motivated and keep working:

+ + + +

Effective problem solving

+ +

There is no one effective way to solve all problems (and learn all things) associated with web design and development, but there are some general bits of advice that will serve you well in most cases.

+ +

Break things down into chunks

+ +

For a start, when you are trying to implement something specific and it seems really hard to get your head around, you should try to break it down into multiple smaller problems, or chunks.

+ +

For example, if you are looking at a task of "Build a simple two-column website", you could break it down as follows:

+ + + +

Then you could break it down further, for example, "Implement horizontal navigation menu" could be written out as:

+ + + +

Each of these problems doesn't seem nearly as difficult to solve as the one big problem you had initially. Now you've just got to go through and solve them all!

+ +

Learn and recognise the patterns

+ +

As we said before, web design/programming is mostly about problem solving and patterns. Once you have written out what you'll need to do to solve a specific problem, you can start to figure out what technology features to use to solve it. For example, professional web developers have created lots of horizontal navigation menus, so they'll immediately start thinking of a solution like this:

+ +

A nav menu is usually created from a list of links, something like:

+ +
<ul>
+  <li>First menu item</li>
+  <li>Second menu item</li>
+  <li>Third menu item</li>
+  <li>etc.</li>
+</ul>
+
+ +

To make all the items sit horizontally on a line, the easiest modern way is to use flexbox:

+ +
ul {
+  display: flex;
+}
+ +

To remove unneeded spacing and bullet points, we can do this:

+ +
ul {
+  list-style-type: none;
+  padding: 0;
+}
+ +

etc.

+ +

If you are a complete beginner to web development, you'll have to do some study and web searches and lookup solutions to such problems. If you are a professional web developer you'll probably remember the last time you solved a similar problem, and only have to look up a few bits of the syntax that you forgot since then.

+ +

When you find solutions to such problems, it is worth writing down notes on what you did, and keeping some minimal code examples in a directory somewhere so you can look back on previous work.

+ +

In addition, the web has developer tools that allow you to look at the code used to build any site on the web — if you don't have a solution to hand, one good research method is to find websites with similar features in the wild, and find out how they did it.

+ +
+

Note: Notice how above we talked about the problem we are trying to solve first, and the technology used to solve it second. This is pretty much always the best way round to do it — don't start with a cool new technology that you want to use, and try to shoehorn it into the use case.

+
+ +
+

Note: The simplest solution is often the best.

+
+ +

Getting practice

+ +

The more you practice solving a problem, the stronger your brain's neural pathways are in that area, and the easier it becomes to recall the details and the logic of that particular problem.

+ +

Keep tinkering with code, and getting more practice. If you run out of problems to solve, look up some tests online, do some more courses, or ask your friends and family (or local school or church) if there is anything they'd like you to build for them.

+ +

Getting help

+ +

Web development requires you to learn a complex set of skills — you are bound to get stuck sometimes and need help. As we said before, even professional developers need regular help working out issues.

+ +

There are a variety of ways to get help, and what follows are some tips for doing so more effectively.

+ +

Effective web searches

+ +

One important skill to learn is the art of effective web searches — what search terms do you need to use in your favorite search engine to find the articles you need? 

+ +

It is often fairly obvious what to search for. For example:

+ + + +

If you want to search for something that has less obvious buzzwords, you need to think about what is most likely to return what you want.

+ + + +

Error messages

+ +

If you are having a problem with some code and a specific error message is coming up, it is often a good idea to just copy the error message into your search engine and use it as the search term. If other people have had the same problem, there'll likely be some articles or blog posts about it in places like MDN or Stack Overflow.

+ +
+

Note: Stack Overflow is a really useful website — it is basically a huge database of curated questions and answers on various technologies and related techniques. You'll probably find an answer that answers your question. If not, you can ask a question and see if anyone can help you.

+
+ +

Browser testing

+ +

It is often a good idea to see if your problem is affecting all browsers, or whether it only occurs in one or a small number of browsers. If it is only affecting one browser, for example, you can use that browser to narrow down the search. Example searches might look like:

+ + + +

Using MDN

+ +

The site you are already on has a wealth of information available to you — both reference material for looking up code syntax, and guides/tutorials for learning techniques.

+ +

We've provided most of the answers to the questions you'll have about web development fundamentals in this part of MDN. If you are stuck, then it is good to re-read the associated articles to see if you missed anything.

+ +

If you are not sure which article to read, then try searching MDN for some related keywords (as indicated above), or try a general web search. To search on MDN, you can either use the site's in-built search functionality or better still, use your favorite search engine and put "mdn" in front of the search term, for example, "mdn responsive web design" or "mdn background-color".

+ +

Other online resources

+ +

We already mentioned Stack Overflow, but there are other online resources that can help.

+ +

It is good to find a community to be part of, and you'll get a lot of respect if you try to help others answer their questions as well as asking your own. Other good examples include:

+ + + +

However, it also makes sense to find useful groups on social networking sites such as Twitter or Facebook. Look for groups that discuss web development subjects you are interested in, and join up. Follow people on twitter you know are influential, smart, or just plain seem to share lots of useful tips.

+ +

Physical meetups

+ +

Lastly, you should try attending some physical meetups to meet other like-minded people, especially ones that cater to beginners. meetup.com is a good place to find local physical meetups, and you could also try your local press/what's on sites.

+ +

You could also try attending full-fledged web conferences. While these can be expensive, you could try volunteering at them, and many conferences offer reduced rate tickets, for example, student or diversity tickets.

+ +

See also

+ + diff --git a/files/uk/learn/tools_and_testing/client-side_javascript_frameworks/index.html b/files/uk/learn/tools_and_testing/client-side_javascript_frameworks/index.html new file mode 100644 index 0000000000..4380250538 --- /dev/null +++ b/files/uk/learn/tools_and_testing/client-side_javascript_frameworks/index.html @@ -0,0 +1,138 @@ +--- +title: Розуміння JavaScript-фреймворків на стороні клієнта +slug: Learn/Tools_and_testing/Розуміння_JavaScript-фреймворків_на_стороні_клієнта +translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks +--- +
{{LearnSidebar}}
+ +

JavaScript frameworks are an essential part of modern front-end web development, providing developers with tried and tested tools for building scalable, interactive web applications. Many modern companies use frameworks as a standard part of their tooling, so many front-end development jobs now require framework experience.

+ +

As an aspiring front-end developer, it can be hard to work out where to begin when learning frameworks — there are so many different frameworks to choose from, new ones appear all the time, they mostly work in a similar way but do some things differently, and there are some specific things to be careful about when using frameworks.

+ +

In this set of articles, we are aiming to give you a comfortable starting point to help you begin learning frameworks. We are not aiming to exhaustively teach you everything you need to know about React/ReactDOM, or Vue, or some other specific framework; the framework teams' own docs do that job already. Instead, we want to back up and first answer more fundamental questions such as:

+ + + +

After that, we'll provide some tutorials covering the essentials of some of the major frameworks, to provide you with enough context and familiarity to start going into greater depth yourself. We want you to go forward and learn about frameworks in a pragmatic way that doesn't forget about web platform fundamental best practices such as accessibility.

+ +

Get started now, with "Introduction to client-side frameworks"

+ +

Prerequisites

+ +

You should really learn the basics of the core web languages first before attempting to move on to learning client-side frameworks — HTML, CSS, and especially JavaScript.

+ +

Your code will be richer and more professional as a result, and you'll be able to troubleshoot problems with more confidence if you understand the fundamental web platform features that the frameworks are building on top of.

+ +
+

Looking to become a front-end web developer?

+ +

We have put together a course that includes all the essential information you need to work towards your goal.

+ +

Get started

+
+ +

Introductory guides

+ +
+
1. Introduction to client-side frameworks
+
We begin our look at frameworks with a general overview of the area, looking at a brief history of JavaScript and frameworks, why frameworks exist and what they give us, how to start thinking about choosing a framework to learn, and what alternatives there are to client-side frameworks.
+
2. Framework main features
+
Each major JavaScript framework has a different approach to updating the DOM, handling browser events, and providing an enjoyable developer experience. This article will explore the main features of “the big 4” frameworks, looking at how frameworks tend to work from a high level and the differences between them.
+
+ +

React tutorials

+ +
+

Note: React tutorials last tested in May 2020, with React/ReactDOM 16.13.1 and create-react-app 3.4.1.

+ +

If you need to check your code against our version, you can find a finished version of the sample React app code in our todo-react repository. For a running live version, see https://mdn.github.io/todo-react-build/.

+
+ +
+
1. Getting started with React
+
In this article we will say hello to React. We'll discover a little bit of detail about its background and use cases, set up a basic React toolchain on our local computer, and create and play with a simple starter app, learning a bit about how React works in the process.
+
2. Beginning our React todo list
+
Let's say that we’ve been tasked with creating a proof-of-concept in React – an app that allows users to add, edit, and delete tasks they want to work on, and also mark tasks as complete without deleting them. This article will walk you through putting the basic App component structure and styling in place, ready for individual component definition and interactivity, which we'll add later.
+
3. Componentizing our React app
+
At this point, our app is a monolith. Before we can make it do things, we need to break it apart into manageable, descriptive components. React doesn’t have any hard rules for what is and isn’t a component – that’s up to you! In this article, we will show you a sensible way to break our app up into components.
+
4. React interactivity: Events and state
+
With our component plan worked out, it's now time to start updating our app from a completely static UI to one that actually allows us to interact and change things. In this article we'll do this, digging into events and state along the way.
+
5. React interactivity: Editing, filtering, conditional rendering
+
As we near the end of our React journey (for now at least), we'll add the finishing touches to the main areas of functionality in our Todo list app. This includes allowing you to edit existing tasks and filtering the list of tasks between all, completed, and incomplete tasks. We'll look at conditional UI rendering along the way.
+
6. Accessibility in React
+
In our final tutorial article, we'll focus on (pun intended) accessibility, including focus management in React, which can improve usability and reduce confusion for both keyboard-only and screen reader users.
+
7. React resources
+
Our final article provides you with a list of React resources that you can use to go further in your learning.
+
+ +

Ember tutorials

+ +
+

Note: Ember tutorials last tested in May 2020, with Ember/Ember CLI version 3.18.0.

+ +

If you need to check your code against our version, you can find a finished version of the sample Ember app code in the ember-todomvc-tutorial repository. For a running live version, see https://nullvoxpopuli.github.io/ember-todomvc-tutorial/ (this also includes a few additional features not covered in the tutorial).

+
+ +
+
1. Getting started with Ember
+
In our first Ember article we will look at how Ember works and what it's useful for, install the Ember toolchain locally, create a sample app, and then do some initial setup to get it ready for development.
+
2. Ember app structure and componentization
+
In this article we'll get right on with planning out the structure of our TodoMVC Ember app, adding in the HTML for it, and then breaking that HTML structure into components.
+
3. Ember interactivity: Events, classes and state
+
At this point we'll start adding some interactivity to our app, providing the ability to add and display new todo items. Along the way, we'll look at using events in Ember, creating component classes to contain JavaScript code to control interactive features, and setting up a service to keep track of the data state of our app.
+
4. Ember Interactivity: Footer functionality, conditional rendering
+
Now it's time to start tackling the footer functionality in our app. Here we'll get the todo counter to update to show the correct number of todos still to complete, and correctly apply styling to completed todos (i.e. where the checkbox has been checked). We'll also wire up our "Clear completed" button. Along the way, we'll learn about using conditional rendering in our templates.
+
5. Routing in Ember
+
In this article we learn about routing or URL-based filtering as it is sometimes referred to. We'll use it to provide a unique URL for each of the three todo views — "All", "Active", and "Completed".
+
6. Ember resources and troubleshooting
+
Our final Ember article provides you with a list of resources that you can use to go further in your learning, plus some useful troubleshooting and other information.
+
+ +

Vue tutorials

+ +
+

Note: Vue tutorials last tested in May 2020, with Vue 2.6.11.

+ +

If you need to check your code against our version, you can find a finished version of the sample Vue app code in our todo-vue repository. For a running live version, see https://mdn.github.io/todo-vue/dist/.

+
+ +
+
1. Getting started with Vue
+
Now let's introduce Vue, the third of our frameworks. In this article, we'll look at a little bit of Vue background, learn how to install it and create a new project, study the high-level structure of the whole project and an individual component, see how to run the project locally, and get it prepared to start building our example.
+
2. Creating our first Vue component
+
Now it's time to dive deeper into Vue, and create our own custom component — we'll start by creating a component to represent each item in the todo list. Along the way, we'll learn about a few important concepts such as calling components inside other components, passing data to them via props and saving data state.
+
3. Rendering a list of Vue components
+
At this point we've got a fully working component; we're now ready to add multiple ToDoItem components to our App. In this article we'll look at adding a set of todo item data to our App.vue component, which we'll then loop through and display inside ToDoItem components using the v-for directive.
+
4. Adding a new todo form: Vue events, methods, and models
+
We now have sample data in place and a loop that takes each bit of data and renders it inside a ToDoItem in our app. What we really need next is the ability to allow our users to enter their own todo items into the app, and for that, we'll need a text <input>, an event to fire when the data is submitted, a method to fire upon submission to add the data and rerender the list, and a model to control the data. This is what we'll cover in this article.
+
5. Styling Vue components with CSS
+
The time has finally come to make our app look a bit nicer. In this article, we'll explore the different ways of styling Vue components with CSS.
+
6. Using Vue computed properties
+
In this article we'll add a counter that displays the number of completed todo items, using a feature of Vue called computed properties. These work similarly to methods but only re-run when one of their dependencies changes.
+
7. Vue conditional rendering: editing existing todos
+
Now it is time to add one of the major parts of functionality that we're still missing — the ability to edit existing todo items. To do this, we will take advantage of Vue's conditional rendering capabilities — namely v-if and v-else — to allow us to toggle between the existing todo item view and an edit view where you can update todo item labels. We'll also look at adding functionality to delete todo items.
+
8. Focus management with Vue refs
+
We are nearly done with Vue. The last bit of functionality to look at is focus management, or put another way, how we can improve our app's keyboard accessibility. We'll look at using Vue refs to handle this — an advanced feature that allows you to have direct access to the underlying DOM nodes below the virtual DOM, or direct access from one component to the internal DOM structure of a child component.
+
9. Vue resources
+
Now we'll round off our study of Vue by giving you a list of resources that you can use to go further in your learning, plus some other useful tips.
+
+ +

Which frameworks did we choose?

+ +

We are publishing our initial set of articles with guides focusing on three of the major frameworks out there — React/ReactDOM, Ember, and Vue. There is a variety of reasons for this:

+ + + +

We want to say this upfront — we've not chosen the frameworks we are focusing on because we think they are the best, or because we endorse them in any way. We just think they score highly on the above criteria.

+ +

Note that we were hoping to have more frameworks included upon initial publication, but we decided to release the content and then add more framework guides later, rather than delay it longer. If your favourite framework is not represented in this content and you'd like to help change that, feel free to discuss it with us! Get in touch with us via Matrix, or Discourse, or drop us a mail on the mdn-admins list.

diff --git a/files/uk/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.html b/files/uk/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.html new file mode 100644 index 0000000000..ba73b81f2b --- /dev/null +++ b/files/uk/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.html @@ -0,0 +1,536 @@ +--- +title: Знайомимось зі Свелт +slug: >- + Learn/Tools_and_testing/Розуміння_JavaScript-фреймворків_на_стороні_клієнта/znayomymos_zi_svelte +translation_of: >- + Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started +--- +
{{LearnSidebar}}
+{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
+ +

У цій статті ми коротко ознайомимося з фреймворком Свелт. Ми побачимо як Свелт працює і що виокремлює його від інших фреймворків та інструментів, які ми вже бачили. Далі ми навчимося налаштовувати наше середовище розробки, створимо простий додаток, зрозуміємо структуру проекту, та побачимо як його запускати локально і збирати для продакшна.

+ + + + + + + + + + + + +
Передумови:Для початку, рекомендуємо ознайомитись з основними мовами – HTML, CSS та JavaScript, та володіти терміналом/командним рядком. +


+ Свелт – компілятор, який генерує маленький та високооптимізований JavaScript код з нашого; вам знадобиться термінал з Нодою та NPM – для компіляції та збирання вашої програми.

+
Мета: +

Налаштувати локальне середовище розробки Svelte, створити та зібрати перший додаток, зрозуміти основи того, як це працює.

+
+ +

Свелт: новий підхід до створення складних інтерфейсів

+ +

Светл пропонує інший підхід до створення веб-додатків, ніж деякі інші фреймворки у цьому модулі. Тоді як Реакт або В'ю виконують основну частину своєї роботи в браузері користувача, під час роботи програми, Свелт зміщує цю роботу на етап компіляції, який відбувається лише під час збирання програми, створюючи високооптимізований ванільний JavaScript.
+
+ Результатом такого підходу є не тільки менші бандли та краща швидкість додатків, але й приємнішний досвід розробки – більш доступний для людей, які мають обмежений досвід роботи з екосистемою сучасних інструментів.
+
+ Свелт тісно притримується класичної моделі веб-розробки HTML, CSS та JS, лише додаючи кілька розширень до HTML та JavaScript. Напевно, в ньому є менше понять та інструментів для вивчення, ніж в деякі інших фреймворках.
+
+ Головними нинішніми недоліками є те, що це молодий фреймворк – тому його екосистема є більш обмеженою щодо інструментарію, підтримки, плагінів, чітких моделей використання тощо, ніж у більш зрілих фреймворків, а також є менше вакансій. Але його переваг повинно бути достатньо, щоб зацікавити вас дослідити його.

+ +
+

Примітка: нещодавно Свелт додав офіційну підтримку TypeScript, одну з найочікуваніших можливостей. Ми розглянемо її згодом у цій серії уроків.

+
+ +

Перед тим, як повернутися до цієї серії уроків, ми рекомендуємо вам прочитати навчальний посібник Свелт, щоб по-справжньому швидко познайомитися з основними поняттями, а потім навчитися будувати щось більш глибоке. Це займе близько 30 хвилин.

+ +

Use cases

+ +

Svelte can be used to develop small pieces of an interface or whole applications. You can either start from scratch letting Svelte drive your UI or you can incrementally integrate it into an existing application.

+ +

Nevertheless, Svelte is particularly appropriate to tackle the following situations:

+ + + +

Moreover, with the help of Sapper (a framework based on Svelte), you can also develop applications with advanced features like server-side rendering, code splitting, file-based routing and offline support. And then there's also Svelte Native, which lets you build native mobile applications.

+ +

How does Svelte work?

+ +

Being a compiler, Svelte can extend HTML, CSS, and JavaScript, generating optimal JavaScript code without any runtime overhead. To achieve this, Svelte extends vanilla web technologies in the following ways:

+ + + +

The compiler only intervenes in very specific situations and only in the context of Svelte components. Extensions to the JavaScript language are minimal and carefully picked in order to not break JavaScript syntax nor alienate developers. In fact, you will be mostly working with vanilla JavaScript.

+ +

First steps with Svelte

+ +

Being a compiler, you can't just add a <script src="svelte.js"> tag to your page and import it into your app. You'll have to set up your development environment in order to let the compiler do its job.

+ +

Requirements

+ +

In order to work with Svelte you need to have Node.js installed. It's recommended that you use the long-term support (LTS) version. Node includes npm (the node package manager), and npx (the node package runner). Note that you can also use the Yarn package manager in place of npm, but we'll assume you are using npm in this set of tutorials. See Package management basics for more information on npm and yarn.

+ +

If you're using Windows, you will need to install some software to give you parity with Unix/macOS terminal in order to use the terminal commands mentioned in this tutorial. Gitbash (which comes as part of the git for Windows toolset) or Windows Subsystem for Linux (WSL) are both suitable. Cmder is another very good and complete alternative. See Command line crash course for more information on these, and on terminal commands in general.

+ +

Also see the following for more information:

+ + + +

Creating your first Svelte app

+ +

The easiest way to create a starter app template is to just download the starter template application. You can do that by visiting sveltejs/template on GitHub or you can avoid having to download and unzip it and just use degit.

+ +

To create your starter app template, run the following terminal commands:

+ +
npx degit sveltejs/template moz-todo-svelte
+cd moz-todo-svelte
+npm install
+npm run dev
+ +
+

Note: degit doesn't do any kind of magic — it just lets you download and unzip the latest version of a git repo's contents. This is much quicker than using git clone because it will not download all the history of the repo, or create a complete local clone.

+
+ +

After running npm run dev, Svelte will compile and build your application. It will start a local server at localhost:5000. Svelte will watch for file updates, and automatically recompile and refresh the app for you when changes are made to the source files. Your browser will display something like this:

+ +

A simple start page that says hello world, and gives a link to the official svelte tutorials

+ +

Application structure

+ +

The starter template comes with the following structure:

+ +
moz-todo-svelte
+├── readme.md
+├── package.json
+├── package-lock.json
+├── rollup.config.js
+├── .gitignore
+├── node_modules
+├── public
+│   ├── favicon.ico
+│   ├── index.html
+│   ├── global.css
+│   └── build
+│       ├── bundle.css
+│       ├── bundle.css.map
+│       ├── bundle.js
+│       └── bundle.js.map
+└── src
+    ├── App.svelte
+    └── main.js
+ +

The contents are as follows:

+ + + +

Having a look at our first Svelte component

+ +

Components are the building blocks of Svelte applications. They are written into .svelte files using a superset of HTML.

+ +

All three sections — <script>, <styles>, and markup — are optional, and can appear in any order you like.

+ +
<script>
+  // logic goes here
+</script>
+
+<style>
+  /* styles go here */
+</style>
+
+<!-- markup (zero or more HTML elements) goes here -->
+ +
+

Note: For more information on the component format, have a look at the svelte documentation.

+
+ +

With this in mind, let's have a look at the src/App.svelte file that came with the starter template. You should see something like the following:

+ +
<script>
+  export let name;
+</script>
+
+<main>
+  <h1>Hello {name}!</h1>
+  <p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
+</main>
+
+<style>
+  main {
+    text-align: center;
+    padding: 1em;
+    max-width: 240px;
+    margin: 0 auto;
+  }
+
+  h1 {
+    color: #ff3e00;
+    text-transform: uppercase;
+    font-size: 4em;
+    font-weight: 100;
+  }
+
+  @media (min-width: 640px) {
+    main {
+      max-width: none;
+    }
+  }
+</style>
+ +

The <script> section

+ +

The <script> block contains JavaScript that runs when a component instance is created. Variables declared (or imported) at the top level are 'visible' from the component's markup. Top-level variables is the way Svelte handles the component state, and they are reactive by default. We will explain in detail what this means later on.

+ +
<script>
+  export let name;
+</script>
+ +

Svelte uses the export keyword to mark a variable declaration as a property (or prop), which means it becomes accessible to consumers of the component (e.g. other components). This is one example of Svelte extending JavaScript syntax to make it more useful, while keeping it familiar.

+ +

The markup section

+ +

In the markup section you can insert any HTML you like, and in addition you can insert valid JavaScript expression inside single curly brackets ({}). In this case we are embedding the value of the name prop right after the Hello text.

+ +
<main>
+  <h1>Hello {name}!</h1>
+  <p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
+</main>
+ +

Svelte also supports tags like {#if...}, {#each...}, and {#await...} — these examples allow you to conditionally render a portion of the markup, iterate through a list of elements, and work with async values, respectively.

+ +

The <style> section

+ +

If you have experience working with CSS, the following snippet should make sense:

+ +
<style>
+  main {
+    text-align: center;
+    padding: 1em;
+    max-width: 240px;
+    margin: 0 auto;
+  }
+
+  h1 {
+    color: #ff3e00;
+    text-transform: uppercase;
+    font-size: 4em;
+    font-weight: 100;
+  }
+
+  @media (min-width: 640px) {
+    main {
+      max-width: none;
+    }
+  }
+</style>
+ +

We are applying a style to our <h1> element. What will happen other components with <h1> elements in them?

+ +

In Svelte, CSS inside a component's <style> block will be scoped only to that component. This works by adding a class to selected elements, which is based on a hash of the component styles.

+ +

You can see this in action by opening localhost:5000 in a new browser tab, right/Ctrl-clicking on the HELLO WORLD! label, and choosing Inspect:

+ +

Svelte starter app with devtools open, showing classes for scoped styles

+ +

When compiling the app, Svelte changes our h1 styles definition to h1.svelte-1tky8bj, and then modifies every <h1> element in our component to <h1 class="svelte-1tky8bj">, so that it picks up the styles as required.

+ +
+

Note: You can override this behavior and apply styles to a selector globally using the :global(...) modifier (see the Svelte <style> docs for more information).

+
+ +

Making a couple of changes

+ +

Now that we have a general idea of how it all fits together, we can start making a few changes.
+ At this point you can try updating your App.svelte component — for example change the <h1> element on line 6 of App.svelte so that it reads like this:

+ +
<h1>Hello {name} from MDN!</h1>
+ +

Just save your changes and the app running at localhost:5000 will be automatically updated.

+ +

A first look at Svelte reactivity

+ +

In the context of a UI framework, reactivity means that the framework can automatically update the DOM when the state of any component is changed.

+ +

In Svelte, reactivity is triggered simply by assigning a new value to any top level variable in a component. For example, we could include a toggleName() function in our App component, and a button to run it.

+ +

Try updating your <script> and markup sections like so:

+ +
<script>
+  export let name;
+
+  function toggleName() {
+    if (name === 'world') {
+      name = 'svelte'
+    } else {
+      name = 'world'
+    }
+  }
+</script>
+
+<main>
+  <h1>Hello {name}!</h1>
+  <button on:click={toggleName}>Toggle name</button>
+  <p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
+</main>
+ +

Whenever the button is clicked, Svelte executes the toggleName() function, which in turn updates the value of the name variable.

+ +

As you can see, the <h1> label is automatically updated. Behind the scenes, Svelte created the JavaScript code to update the DOM whenever the value of the name variable changes, without using any virtual DOM or other complex reconciliation mechanism.

+ +

Note the use of : in on:click. That's Svelte's syntax for listening to DOM events.

+ +

Inspecting main.js: the entry point of our app

+ +

Let’s open src/main.js, which is where the App component is being imported and used. This file is the entry point for our app, and it initially looks like this:

+ +
import App from './App.svelte';
+
+const app = new App({
+  target: document.body,
+  props: {
+    name: 'world'
+  }
+});
+
+export default app;
+ +

main.js starts by importing the Svelte component that we are going to use. Then in line 3 it instantiates it, passing an option object with the following properties:

+ + + +

A look under the hood

+ +

How does Svelte manage to make all these files work together nicely?

+ +

The Svelte compiler processes the <style> section of every component and compiles them into the public/build/bundle.css file.

+ +

It also compiles the markup and <script> section of every component and stores the result in public/build/bundle.js. It also adds the code in src/main.js to reference the features of each component.

+ +

Finally the file public/index.html includes the generated bundle.css and bundle.js files:

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset='utf-8'>
+  <meta name='viewport' content='width=device-width,initial-scale=1'>
+
+  <title>Svelte app</title>
+
+  <link rel='icon' type='image/png' href='/favicon.png'>
+  <link rel='stylesheet' href='/global.css'>
+  <link rel='stylesheet' href='/build/bundle.css'>
+
+  <script defer src='/build/bundle.js'></script>
+</head>
+
+<body>
+</body>
+</html>
+ +

The minified version of bundle.js weighs a little more than 3KB, which includes the "Svelte runtime" (just 300 lines of JavaScript code) and the App.svelte compiled component. As you can see, bundle.js is the only JavaScript file referenced by index.html. There are no other libraries loaded into the web page.

+ +

This is a much smaller footprint than compiled bundles from other frameworks. Take into account that, in the case of code bundles, it's not just the size of the files you have to download that matter. This is executable code that needs to be parsed, executed, and kept in memory. So this really makes a difference, especially in low-powered devices or CPU-intensive applications.

+ +

Following this tutorial

+ +

In this tutorial series you will be building a complete web application. We'll learn all the basics about Svelte and also quite a few advanced topics.

+ +

You can just read the content to get a good understanding of Svelte features, but you'll get the most out of this tutorial if you follow along coding the app with us as you go. To make it easier for you to follow each article, we provide a GitHub repository with a folder containing the source for the app as it is at the start of each tutorial.

+ +

Svelte also provides an online repl, which is a playground for live-coding Svelte apps on the web without having to install anything on your machine. We provide a repl for each article so you can start coding along right away. Let's talk a bit more about how to use these tools.

+ +

Using Git

+ +

The most popular version control system is Git, along with GitHub, a site that provides hosting for your repositories and several tools for working with them.

+ +

We'll be using GitHub so that you can easily download the source code for each article. You will also be able to get the code as it should be after completing the article, just in case you get lost.

+ +

After installing git, to clone the repository you should execute:

+ +
git clone https://github.com/opensas/mdn-svelte-tutorial.git
+ +

Then at the beginning of each article, you can just cd into the corresponding folder and start the app in dev mode to see what its current state should be, like this:

+ +
cd 02-starting-our-todo-app
+npm install
+npm run dev
+ +

If you want lo learn more about git and GitHub, we've compiled a list of links to useful guides — see Git and GitHub.

+ +
+

Note: If you just want to download the files without cloning the git repo, you can use the degit tool like this — npx degit opensas/mdn-svelte-tutorial. You can also download a specific folder with npx degit opensas/mdn-svelte-tutorial/01-getting-started. Degit won't create a local git repo, it will just download the files of the specified folder.

+
+ +

Using the Svelte REPL

+ +

A REPL (read–eval–print loop) is an interactive environment that allows you to enter commands and immediately see the results — many programming languages provide a REPL.

+ +

Svelte's REPL is much more than that. It's an online tool that allows you to create complete apps, save them online, and share with others.

+ +

It's the easiest way to start playing with Svelte from any machine, without having to install anything. It is also widely used by Svelte community. If you want to share an idea, ask for help, or report an issue, it's always extremely useful to create a REPL instance demomstrating the issue.

+ +

Let's have a quick look at the Svelte REPL and how you'd use it. It looks like so:

+ +

the svelte repl in action, showing component code on the left, and output on the right

+ +

To start a REPL, open your browser and navigate to https://svelte.dev/repl.

+ + + +

Whenever you change any file on the REPL, Svelte will recompile the app and update the Result tab. To share your app simply share the url. For example, here's the link for a REPL running our complete app: https://svelte.dev/repl/378dd79e0dfe4486a8f10823f3813190?version=3.23.2.

+ +
+

Note: Notice how you can specify Svelte's version in the URL. This is useful when reporting issues related to a specific version of Svelte.

+
+ +

We will provide a REPL at the beginning and end of each article so that you can start coding with us right away.

+ +
+

Note: at the moment the REPL can't handle folder names properly. If you are following the tutorial on the REPL, just create all your components inside the root folder. Then when you see a path in the code, for example import Todos from './components/Todos.svelte', just replace it with a flat URL, e.g. import Todos from './Todos.svelte'.

+
+ +

The code so far

+ +

Git

+ +

Clone the github repo (if you haven't already done it) with:

+ +
git clone https://github.com/opensas/mdn-svelte-tutorial.git
+ +

Then to get to the current app state, run

+ +
cd mdn-svelte-tutorial/01-getting-started
+ +

Or directly download the folder's content:

+ +
npx degit opensas/mdn-svelte-tutorial/01-getting-started
+ +

Remember to run npm install && npm run dev to start your app in development mode.

+ +

REPL

+ +

To code along with us using the REPL, start at

+ +

https://svelte.dev/repl/fc68b4f059d34b9c84fa042d1cce586c?version=3.23.2

+ +

Summary

+ +

This brings us to the end of our initial look at Svelte, including how to install it locally, create a starter app, and how the basics work. In the next article we'll start building our first proper application — a todo list. Before we do that, however, let's recap some of the things we’ve learned.

+ +

In Svelte:

+ + + +

{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}

+ +

In this module

+ + diff --git a/files/uk/learn/tools_and_testing/cross_browser_testing/index.html b/files/uk/learn/tools_and_testing/cross_browser_testing/index.html new file mode 100644 index 0000000000..e13df10951 --- /dev/null +++ b/files/uk/learn/tools_and_testing/cross_browser_testing/index.html @@ -0,0 +1,41 @@ +--- +title: Тестування кросбраузерності +slug: Learn/Tools_and_testing/Тестування_кросбраузерності +translation_of: Learn/Tools_and_testing/Cross_browser_testing +--- +
{{LearnSidebar}}
+ +

This module focuses on testing web projects across different browsers. We look at identifying your target audience (e.g. what users, browsers, and devices do you most need to worry about?), how to go about doing testing, the main issues that you'll face with different types of code and how to mitigate them, what tools are most useful in helping you test and fix problems, and how to use automation to speed up testing.

+ +
+

Looking to become a front-end web developer?

+ +

We have put together a course that includes all the essential information you need to work towards your goal.

+ +

Get started

+
+ +

Prerequisites

+ +

You should really learn the basics of the core HTML, CSS, and JavaScript languages first before attempting to use the tools detailed here.

+ +

Guides

+ +
+
Introduction to cross browser testing
+
This article starts the module off by providing an overview of the topic of cross browser testing, answering questions such as "what is cross browser testing?", "what are the most common types of problems you'll encounter?", and "what are the main approaches for testing, identifying, and fixing problems?"
+
Strategies for carrying out testing
+
Next, we drill down into carrying out testing, looking at identifying a target audience (e.g. what browsers, devices, and other segments should you make sure are tested), lo-fi testing strategies (get yourself a range of devices and some virtual machines and do ad-hoc tests when needed), higher tech strategies (automation, using dedicated testing apps), and testing with user groups.
+
Handling common HTML and CSS problems
+
With the scene set, we'll now look specifically at the common cross-browser problems you will come across in HTML and CSS code, and what tools can be used to prevent problems from happening, or fix problems that occur. This includes linting code, handing CSS prefixes, using browser dev tools to track down problems, using polyfills to add support into browsers, tackling responsive design problems, and more.
+
Handling common JavaScript problems
+
Now we'll look at common cross-browser JavaScript problems and how to fix them. This includes information on using browser dev tools to track down and fix problems, using polyfills and libraries to work around problems, getting modern JavaScript features working in older browsers, and more.
+
Handling common accessibility problems
+
Next we turn our attention to accessibility, providing information on common problems, how to do simple testing, and how to make use of auditing/automation tools for finding accessibility issues.
+
Implementing feature detection
+
Feature detection involves working out whether a browser supports a certain block of code, and running different code dependent on whether it does (or doesn't), so that the browser can always provide a working experience rather than crashing/erroring in some browsers. This article details how to write your own simple feature detection, how to use a library to speed up implementation, and native features for feature detection such as @supports.
+
Introduction to automated testing
+
Manually running tests on several browsers and devices, several times per day, can get tedious and time-consuming. To handle this efficiently, you should become familiar with automation tools. In this article, we look at what is available, how to use task runners, and the basics of how to use commercial browser test automation apps such as Sauce Labs and Browser Stack.
+
Setting up your own test automation environment
+
In this article, we will teach you how to install your own automation environment and run your own tests using Selenium/WebDriver and a testing library such as selenium-webdriver for Node. We will also look at how to integrate your local testing environment with commercial apps like the ones discussed in the previous article.
+
diff --git "a/files/uk/learn/tools_and_testing/git_\321\202\320\260_github/index.html" "b/files/uk/learn/tools_and_testing/git_\321\202\320\260_github/index.html" deleted file mode 100644 index 6797857c6e..0000000000 --- "a/files/uk/learn/tools_and_testing/git_\321\202\320\260_github/index.html" +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: Git та GitHub -slug: Learn/Tools_and_testing/Git_та_GitHub -translation_of: Learn/Tools_and_testing/GitHub ---- -
{{LearnSidebar}}
- -

All developers will use some kind of version control system (VCS), a tool to allow them to collaborate with other developers on a project without danger of them overwriting each other's work, and roll back to previous versions of the code base if a problem is discovered later on. The most popular VCS (at least among web developers) is Git, along with GitHub, a site that provides hosting for your repositories and several tools for working with them. This module aims to teach you what you need to know about both of them.

- -

Overview

- -

VCSes are essential for software development:

- - - -

VCSes provide tools to meet the above needs. Git is an example of a VCS, and GitHub is a web site + infrastructure that provides a Git server plus a number of really useful tools for working with git repositories individually or in teams, such as reporting issues with the code, reviewing tools, project management features such as assigning tasks and task statuses, and more.

- -
-

Note: Git is actually a distributed version control system, meaning that a complete copy of the repository containing the codebase is made on your computer (and everyone else's). You make changes to your own copy, and then push those changes back up to the server, where an administrator will decide whether to merge your changes with the master copy.

-
- -
-

Looking to become a front-end web developer?

- -

We have put together a course that includes all the essential information you need to work towards your goal.

- -

Get started

-
- -

Prerequisites

- -

To use Git and GitHub, you need:

- - - -

In terms of prerequisite knowledge, you don't need to know anything about web development, Git/GitHub or VCSes to start this module. However, it is recommended that you know some coding so that you have reasonable computer literacy, and some code to store in your repositories!

- -

It is also preferrable that you have some basic terminal knowledge, so for example moving between directories, creating files, and modifying the system PATH.

- -
-

Note: Github is not the only site/toolset you can use with Git. There are other alternatives such as GitLab that you could try, and you could also try setting your own Git server up and using it instead of GitHub. We've only stuck with GitHub in this course to provide a single way that works.

-
- -

Guides

- -

Note that the links below take you to resources on external sites. Eventually we will are aiming to have our own dedicated Git/GitHub course, but for now, these will help you get to grips with the subject in hand.

- -
-
Hello World (from GitHub)
-
This is a good place to start — this practical guide gets you to jump right into using GitHub, learning the basics of Git such as creating repositories and branches, making commits, and opening and merging pull requests.
-
Git Handbook (from GitHub)
-
This Git Handbook goes into a little more depth, explaining what a VCS is, what a repository is, how the basic GitHub model works, Git commands and examples, and more.
-
Forking Projects (from GitHub)
-
Forking projects is essential when you want to contribute to someone else's code. This guide explains how.
-
About Pull Requests (from GitHub)
-
A useful guide to managing pull requests, the way that your suggested code changes are delivered to people's repositories for consideration.
-
Mastering issues (from GitHub)
-
Issues are like a forum for your GitHub project, where people can ask questions and report problems, and you can manage updates (for example assigning people to fix issues, clarifying the issue, letting people know things are fixed). This articles gives you what you need to know about issues.
-
- -
-

Note: There is a lot more that you can do with Git and GitHub, but we feel that the above represents the minimum you need to know to start using Git effectively. As you get deeper into Git, you'll start to realise that it is easy to go wrong when you start using more complicated commands. Don't worry, even professional web developers find Git confusing sometimes, and often solve problems by searching for solutions on the web, or consulting sites like Flight rules for Git and Dangit, git!

-
- -

See also

- - diff --git a/files/uk/learn/tools_and_testing/github/index.html b/files/uk/learn/tools_and_testing/github/index.html new file mode 100644 index 0000000000..6797857c6e --- /dev/null +++ b/files/uk/learn/tools_and_testing/github/index.html @@ -0,0 +1,86 @@ +--- +title: Git та GitHub +slug: Learn/Tools_and_testing/Git_та_GitHub +translation_of: Learn/Tools_and_testing/GitHub +--- +
{{LearnSidebar}}
+ +

All developers will use some kind of version control system (VCS), a tool to allow them to collaborate with other developers on a project without danger of them overwriting each other's work, and roll back to previous versions of the code base if a problem is discovered later on. The most popular VCS (at least among web developers) is Git, along with GitHub, a site that provides hosting for your repositories and several tools for working with them. This module aims to teach you what you need to know about both of them.

+ +

Overview

+ +

VCSes are essential for software development:

+ + + +

VCSes provide tools to meet the above needs. Git is an example of a VCS, and GitHub is a web site + infrastructure that provides a Git server plus a number of really useful tools for working with git repositories individually or in teams, such as reporting issues with the code, reviewing tools, project management features such as assigning tasks and task statuses, and more.

+ +
+

Note: Git is actually a distributed version control system, meaning that a complete copy of the repository containing the codebase is made on your computer (and everyone else's). You make changes to your own copy, and then push those changes back up to the server, where an administrator will decide whether to merge your changes with the master copy.

+
+ +
+

Looking to become a front-end web developer?

+ +

We have put together a course that includes all the essential information you need to work towards your goal.

+ +

Get started

+
+ +

Prerequisites

+ +

To use Git and GitHub, you need:

+ + + +

In terms of prerequisite knowledge, you don't need to know anything about web development, Git/GitHub or VCSes to start this module. However, it is recommended that you know some coding so that you have reasonable computer literacy, and some code to store in your repositories!

+ +

It is also preferrable that you have some basic terminal knowledge, so for example moving between directories, creating files, and modifying the system PATH.

+ +
+

Note: Github is not the only site/toolset you can use with Git. There are other alternatives such as GitLab that you could try, and you could also try setting your own Git server up and using it instead of GitHub. We've only stuck with GitHub in this course to provide a single way that works.

+
+ +

Guides

+ +

Note that the links below take you to resources on external sites. Eventually we will are aiming to have our own dedicated Git/GitHub course, but for now, these will help you get to grips with the subject in hand.

+ +
+
Hello World (from GitHub)
+
This is a good place to start — this practical guide gets you to jump right into using GitHub, learning the basics of Git such as creating repositories and branches, making commits, and opening and merging pull requests.
+
Git Handbook (from GitHub)
+
This Git Handbook goes into a little more depth, explaining what a VCS is, what a repository is, how the basic GitHub model works, Git commands and examples, and more.
+
Forking Projects (from GitHub)
+
Forking projects is essential when you want to contribute to someone else's code. This guide explains how.
+
About Pull Requests (from GitHub)
+
A useful guide to managing pull requests, the way that your suggested code changes are delivered to people's repositories for consideration.
+
Mastering issues (from GitHub)
+
Issues are like a forum for your GitHub project, where people can ask questions and report problems, and you can manage updates (for example assigning people to fix issues, clarifying the issue, letting people know things are fixed). This articles gives you what you need to know about issues.
+
+ +
+

Note: There is a lot more that you can do with Git and GitHub, but we feel that the above represents the minimum you need to know to start using Git effectively. As you get deeper into Git, you'll start to realise that it is easy to go wrong when you start using more complicated commands. Don't worry, even professional web developers find Git confusing sometimes, and often solve problems by searching for solutions on the web, or consulting sites like Flight rules for Git and Dangit, git!

+
+ +

See also

+ + diff --git a/files/uk/learn/tools_and_testing/understanding_client-side_tools/index.html b/files/uk/learn/tools_and_testing/understanding_client-side_tools/index.html new file mode 100644 index 0000000000..faa5717122 --- /dev/null +++ b/files/uk/learn/tools_and_testing/understanding_client-side_tools/index.html @@ -0,0 +1,37 @@ +--- +title: Розуміння інструментів веб-розробки на стороні клієнта +slug: Learn/Tools_and_testing/Розуміння_інструментів_веб-розробки_на_стороні_клієнта +translation_of: Learn/Tools_and_testing/Understanding_client-side_tools +--- +
{{LearnSidebar}}
+ +

Client-side tooling can be intimidating, but this series of articles aims to illustrate the purpose of some of the most common client-side tool types, explain the tools you can chain together, how to install them using package managers, and control them using the command line. We finish up by providing a complete toolchain example showing you how to get productive.

+ +

Get started now, with our "Client-side tooling overview"

+ +

Prerequisites

+ +

You should really learn the basics of the core HTML, CSS, and JavaScript languages first before attempting to use the tools detailed here.

+ +
+

Looking to become a front-end web developer?

+ +

We have put together a course that includes all the essential information you need to work towards your goal.

+ +

Get started

+
+ +

Guides

+ +
+
1. Client-side tooling overview
+
In this article we provide an overview of modern web tooling, what kinds of tools are available and where you’ll meet them in the lifecycle of web app development, and how to find help with individual tools.
+
2. Command line crash course
+
In your development process you'll undoubtedly be required to run some command in the terminal (or on the "command line" — these are effectively the same thing). This article provides an introduction to the terminal, the essential commands you'll need to enter into it, how to chain commands together, and how to add your own command line interface (CLI) tools.
+
3. Package management basics
+
In this article we'll look at package managers in some detail to understand how we can use them in our own projects — to install project tool dependencies, keep them up-to-date, and more.
+
4. Introducing a complete toolchain
+
In the final couple of articles in the series we will solidify your tooling knowledge by walking you through the process of building up a sample case study toolchain. We'll go all the way from setting up a sensible development environment and putting transformation tools in place to actually deploying your app on Netlify. In this article we'll introduce the case study, set up our development environment, and set up our code transformation tools.
+
5. Deploying our app
+
In the final article in our series, we take the example toolchain we built up in the previous article and add to it so that we can deploy our sample app. We push the code to GitHub, deploy it using Netlify, and even show you how to add a simple test into the process.
+
diff --git "a/files/uk/learn/tools_and_testing/\321\200\320\276\320\267\321\203\320\274\321\226\320\275\320\275\321\217_javascript-\321\204\321\200\320\265\320\271\320\274\320\262\320\276\321\200\320\272\321\226\320\262_\320\275\320\260_\321\201\321\202\320\276\321\200\320\276\320\275\321\226_\320\272\320\273\321\226\321\224\320\275\321\202\320\260/index.html" "b/files/uk/learn/tools_and_testing/\321\200\320\276\320\267\321\203\320\274\321\226\320\275\320\275\321\217_javascript-\321\204\321\200\320\265\320\271\320\274\320\262\320\276\321\200\320\272\321\226\320\262_\320\275\320\260_\321\201\321\202\320\276\321\200\320\276\320\275\321\226_\320\272\320\273\321\226\321\224\320\275\321\202\320\260/index.html" deleted file mode 100644 index 4380250538..0000000000 --- "a/files/uk/learn/tools_and_testing/\321\200\320\276\320\267\321\203\320\274\321\226\320\275\320\275\321\217_javascript-\321\204\321\200\320\265\320\271\320\274\320\262\320\276\321\200\320\272\321\226\320\262_\320\275\320\260_\321\201\321\202\320\276\321\200\320\276\320\275\321\226_\320\272\320\273\321\226\321\224\320\275\321\202\320\260/index.html" +++ /dev/null @@ -1,138 +0,0 @@ ---- -title: Розуміння JavaScript-фреймворків на стороні клієнта -slug: Learn/Tools_and_testing/Розуміння_JavaScript-фреймворків_на_стороні_клієнта -translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks ---- -
{{LearnSidebar}}
- -

JavaScript frameworks are an essential part of modern front-end web development, providing developers with tried and tested tools for building scalable, interactive web applications. Many modern companies use frameworks as a standard part of their tooling, so many front-end development jobs now require framework experience.

- -

As an aspiring front-end developer, it can be hard to work out where to begin when learning frameworks — there are so many different frameworks to choose from, new ones appear all the time, they mostly work in a similar way but do some things differently, and there are some specific things to be careful about when using frameworks.

- -

In this set of articles, we are aiming to give you a comfortable starting point to help you begin learning frameworks. We are not aiming to exhaustively teach you everything you need to know about React/ReactDOM, or Vue, or some other specific framework; the framework teams' own docs do that job already. Instead, we want to back up and first answer more fundamental questions such as:

- - - -

After that, we'll provide some tutorials covering the essentials of some of the major frameworks, to provide you with enough context and familiarity to start going into greater depth yourself. We want you to go forward and learn about frameworks in a pragmatic way that doesn't forget about web platform fundamental best practices such as accessibility.

- -

Get started now, with "Introduction to client-side frameworks"

- -

Prerequisites

- -

You should really learn the basics of the core web languages first before attempting to move on to learning client-side frameworks — HTML, CSS, and especially JavaScript.

- -

Your code will be richer and more professional as a result, and you'll be able to troubleshoot problems with more confidence if you understand the fundamental web platform features that the frameworks are building on top of.

- -
-

Looking to become a front-end web developer?

- -

We have put together a course that includes all the essential information you need to work towards your goal.

- -

Get started

-
- -

Introductory guides

- -
-
1. Introduction to client-side frameworks
-
We begin our look at frameworks with a general overview of the area, looking at a brief history of JavaScript and frameworks, why frameworks exist and what they give us, how to start thinking about choosing a framework to learn, and what alternatives there are to client-side frameworks.
-
2. Framework main features
-
Each major JavaScript framework has a different approach to updating the DOM, handling browser events, and providing an enjoyable developer experience. This article will explore the main features of “the big 4” frameworks, looking at how frameworks tend to work from a high level and the differences between them.
-
- -

React tutorials

- -
-

Note: React tutorials last tested in May 2020, with React/ReactDOM 16.13.1 and create-react-app 3.4.1.

- -

If you need to check your code against our version, you can find a finished version of the sample React app code in our todo-react repository. For a running live version, see https://mdn.github.io/todo-react-build/.

-
- -
-
1. Getting started with React
-
In this article we will say hello to React. We'll discover a little bit of detail about its background and use cases, set up a basic React toolchain on our local computer, and create and play with a simple starter app, learning a bit about how React works in the process.
-
2. Beginning our React todo list
-
Let's say that we’ve been tasked with creating a proof-of-concept in React – an app that allows users to add, edit, and delete tasks they want to work on, and also mark tasks as complete without deleting them. This article will walk you through putting the basic App component structure and styling in place, ready for individual component definition and interactivity, which we'll add later.
-
3. Componentizing our React app
-
At this point, our app is a monolith. Before we can make it do things, we need to break it apart into manageable, descriptive components. React doesn’t have any hard rules for what is and isn’t a component – that’s up to you! In this article, we will show you a sensible way to break our app up into components.
-
4. React interactivity: Events and state
-
With our component plan worked out, it's now time to start updating our app from a completely static UI to one that actually allows us to interact and change things. In this article we'll do this, digging into events and state along the way.
-
5. React interactivity: Editing, filtering, conditional rendering
-
As we near the end of our React journey (for now at least), we'll add the finishing touches to the main areas of functionality in our Todo list app. This includes allowing you to edit existing tasks and filtering the list of tasks between all, completed, and incomplete tasks. We'll look at conditional UI rendering along the way.
-
6. Accessibility in React
-
In our final tutorial article, we'll focus on (pun intended) accessibility, including focus management in React, which can improve usability and reduce confusion for both keyboard-only and screen reader users.
-
7. React resources
-
Our final article provides you with a list of React resources that you can use to go further in your learning.
-
- -

Ember tutorials

- -
-

Note: Ember tutorials last tested in May 2020, with Ember/Ember CLI version 3.18.0.

- -

If you need to check your code against our version, you can find a finished version of the sample Ember app code in the ember-todomvc-tutorial repository. For a running live version, see https://nullvoxpopuli.github.io/ember-todomvc-tutorial/ (this also includes a few additional features not covered in the tutorial).

-
- -
-
1. Getting started with Ember
-
In our first Ember article we will look at how Ember works and what it's useful for, install the Ember toolchain locally, create a sample app, and then do some initial setup to get it ready for development.
-
2. Ember app structure and componentization
-
In this article we'll get right on with planning out the structure of our TodoMVC Ember app, adding in the HTML for it, and then breaking that HTML structure into components.
-
3. Ember interactivity: Events, classes and state
-
At this point we'll start adding some interactivity to our app, providing the ability to add and display new todo items. Along the way, we'll look at using events in Ember, creating component classes to contain JavaScript code to control interactive features, and setting up a service to keep track of the data state of our app.
-
4. Ember Interactivity: Footer functionality, conditional rendering
-
Now it's time to start tackling the footer functionality in our app. Here we'll get the todo counter to update to show the correct number of todos still to complete, and correctly apply styling to completed todos (i.e. where the checkbox has been checked). We'll also wire up our "Clear completed" button. Along the way, we'll learn about using conditional rendering in our templates.
-
5. Routing in Ember
-
In this article we learn about routing or URL-based filtering as it is sometimes referred to. We'll use it to provide a unique URL for each of the three todo views — "All", "Active", and "Completed".
-
6. Ember resources and troubleshooting
-
Our final Ember article provides you with a list of resources that you can use to go further in your learning, plus some useful troubleshooting and other information.
-
- -

Vue tutorials

- -
-

Note: Vue tutorials last tested in May 2020, with Vue 2.6.11.

- -

If you need to check your code against our version, you can find a finished version of the sample Vue app code in our todo-vue repository. For a running live version, see https://mdn.github.io/todo-vue/dist/.

-
- -
-
1. Getting started with Vue
-
Now let's introduce Vue, the third of our frameworks. In this article, we'll look at a little bit of Vue background, learn how to install it and create a new project, study the high-level structure of the whole project and an individual component, see how to run the project locally, and get it prepared to start building our example.
-
2. Creating our first Vue component
-
Now it's time to dive deeper into Vue, and create our own custom component — we'll start by creating a component to represent each item in the todo list. Along the way, we'll learn about a few important concepts such as calling components inside other components, passing data to them via props and saving data state.
-
3. Rendering a list of Vue components
-
At this point we've got a fully working component; we're now ready to add multiple ToDoItem components to our App. In this article we'll look at adding a set of todo item data to our App.vue component, which we'll then loop through and display inside ToDoItem components using the v-for directive.
-
4. Adding a new todo form: Vue events, methods, and models
-
We now have sample data in place and a loop that takes each bit of data and renders it inside a ToDoItem in our app. What we really need next is the ability to allow our users to enter their own todo items into the app, and for that, we'll need a text <input>, an event to fire when the data is submitted, a method to fire upon submission to add the data and rerender the list, and a model to control the data. This is what we'll cover in this article.
-
5. Styling Vue components with CSS
-
The time has finally come to make our app look a bit nicer. In this article, we'll explore the different ways of styling Vue components with CSS.
-
6. Using Vue computed properties
-
In this article we'll add a counter that displays the number of completed todo items, using a feature of Vue called computed properties. These work similarly to methods but only re-run when one of their dependencies changes.
-
7. Vue conditional rendering: editing existing todos
-
Now it is time to add one of the major parts of functionality that we're still missing — the ability to edit existing todo items. To do this, we will take advantage of Vue's conditional rendering capabilities — namely v-if and v-else — to allow us to toggle between the existing todo item view and an edit view where you can update todo item labels. We'll also look at adding functionality to delete todo items.
-
8. Focus management with Vue refs
-
We are nearly done with Vue. The last bit of functionality to look at is focus management, or put another way, how we can improve our app's keyboard accessibility. We'll look at using Vue refs to handle this — an advanced feature that allows you to have direct access to the underlying DOM nodes below the virtual DOM, or direct access from one component to the internal DOM structure of a child component.
-
9. Vue resources
-
Now we'll round off our study of Vue by giving you a list of resources that you can use to go further in your learning, plus some other useful tips.
-
- -

Which frameworks did we choose?

- -

We are publishing our initial set of articles with guides focusing on three of the major frameworks out there — React/ReactDOM, Ember, and Vue. There is a variety of reasons for this:

- - - -

We want to say this upfront — we've not chosen the frameworks we are focusing on because we think they are the best, or because we endorse them in any way. We just think they score highly on the above criteria.

- -

Note that we were hoping to have more frameworks included upon initial publication, but we decided to release the content and then add more framework guides later, rather than delay it longer. If your favourite framework is not represented in this content and you'd like to help change that, feel free to discuss it with us! Get in touch with us via Matrix, or Discourse, or drop us a mail on the mdn-admins list.

diff --git "a/files/uk/learn/tools_and_testing/\321\200\320\276\320\267\321\203\320\274\321\226\320\275\320\275\321\217_javascript-\321\204\321\200\320\265\320\271\320\274\320\262\320\276\321\200\320\272\321\226\320\262_\320\275\320\260_\321\201\321\202\320\276\321\200\320\276\320\275\321\226_\320\272\320\273\321\226\321\224\320\275\321\202\320\260/znayomymos_zi_svelte/index.html" "b/files/uk/learn/tools_and_testing/\321\200\320\276\320\267\321\203\320\274\321\226\320\275\320\275\321\217_javascript-\321\204\321\200\320\265\320\271\320\274\320\262\320\276\321\200\320\272\321\226\320\262_\320\275\320\260_\321\201\321\202\320\276\321\200\320\276\320\275\321\226_\320\272\320\273\321\226\321\224\320\275\321\202\320\260/znayomymos_zi_svelte/index.html" deleted file mode 100644 index ba73b81f2b..0000000000 --- "a/files/uk/learn/tools_and_testing/\321\200\320\276\320\267\321\203\320\274\321\226\320\275\320\275\321\217_javascript-\321\204\321\200\320\265\320\271\320\274\320\262\320\276\321\200\320\272\321\226\320\262_\320\275\320\260_\321\201\321\202\320\276\321\200\320\276\320\275\321\226_\320\272\320\273\321\226\321\224\320\275\321\202\320\260/znayomymos_zi_svelte/index.html" +++ /dev/null @@ -1,536 +0,0 @@ ---- -title: Знайомимось зі Свелт -slug: >- - Learn/Tools_and_testing/Розуміння_JavaScript-фреймворків_на_стороні_клієнта/znayomymos_zi_svelte -translation_of: >- - Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started ---- -
{{LearnSidebar}}
-{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
- -

У цій статті ми коротко ознайомимося з фреймворком Свелт. Ми побачимо як Свелт працює і що виокремлює його від інших фреймворків та інструментів, які ми вже бачили. Далі ми навчимося налаштовувати наше середовище розробки, створимо простий додаток, зрозуміємо структуру проекту, та побачимо як його запускати локально і збирати для продакшна.

- - - - - - - - - - - - -
Передумови:Для початку, рекомендуємо ознайомитись з основними мовами – HTML, CSS та JavaScript, та володіти терміналом/командним рядком. -


- Свелт – компілятор, який генерує маленький та високооптимізований JavaScript код з нашого; вам знадобиться термінал з Нодою та NPM – для компіляції та збирання вашої програми.

-
Мета: -

Налаштувати локальне середовище розробки Svelte, створити та зібрати перший додаток, зрозуміти основи того, як це працює.

-
- -

Свелт: новий підхід до створення складних інтерфейсів

- -

Светл пропонує інший підхід до створення веб-додатків, ніж деякі інші фреймворки у цьому модулі. Тоді як Реакт або В'ю виконують основну частину своєї роботи в браузері користувача, під час роботи програми, Свелт зміщує цю роботу на етап компіляції, який відбувається лише під час збирання програми, створюючи високооптимізований ванільний JavaScript.
-
- Результатом такого підходу є не тільки менші бандли та краща швидкість додатків, але й приємнішний досвід розробки – більш доступний для людей, які мають обмежений досвід роботи з екосистемою сучасних інструментів.
-
- Свелт тісно притримується класичної моделі веб-розробки HTML, CSS та JS, лише додаючи кілька розширень до HTML та JavaScript. Напевно, в ньому є менше понять та інструментів для вивчення, ніж в деякі інших фреймворках.
-
- Головними нинішніми недоліками є те, що це молодий фреймворк – тому його екосистема є більш обмеженою щодо інструментарію, підтримки, плагінів, чітких моделей використання тощо, ніж у більш зрілих фреймворків, а також є менше вакансій. Але його переваг повинно бути достатньо, щоб зацікавити вас дослідити його.

- -
-

Примітка: нещодавно Свелт додав офіційну підтримку TypeScript, одну з найочікуваніших можливостей. Ми розглянемо її згодом у цій серії уроків.

-
- -

Перед тим, як повернутися до цієї серії уроків, ми рекомендуємо вам прочитати навчальний посібник Свелт, щоб по-справжньому швидко познайомитися з основними поняттями, а потім навчитися будувати щось більш глибоке. Це займе близько 30 хвилин.

- -

Use cases

- -

Svelte can be used to develop small pieces of an interface or whole applications. You can either start from scratch letting Svelte drive your UI or you can incrementally integrate it into an existing application.

- -

Nevertheless, Svelte is particularly appropriate to tackle the following situations:

- - - -

Moreover, with the help of Sapper (a framework based on Svelte), you can also develop applications with advanced features like server-side rendering, code splitting, file-based routing and offline support. And then there's also Svelte Native, which lets you build native mobile applications.

- -

How does Svelte work?

- -

Being a compiler, Svelte can extend HTML, CSS, and JavaScript, generating optimal JavaScript code without any runtime overhead. To achieve this, Svelte extends vanilla web technologies in the following ways:

- - - -

The compiler only intervenes in very specific situations and only in the context of Svelte components. Extensions to the JavaScript language are minimal and carefully picked in order to not break JavaScript syntax nor alienate developers. In fact, you will be mostly working with vanilla JavaScript.

- -

First steps with Svelte

- -

Being a compiler, you can't just add a <script src="svelte.js"> tag to your page and import it into your app. You'll have to set up your development environment in order to let the compiler do its job.

- -

Requirements

- -

In order to work with Svelte you need to have Node.js installed. It's recommended that you use the long-term support (LTS) version. Node includes npm (the node package manager), and npx (the node package runner). Note that you can also use the Yarn package manager in place of npm, but we'll assume you are using npm in this set of tutorials. See Package management basics for more information on npm and yarn.

- -

If you're using Windows, you will need to install some software to give you parity with Unix/macOS terminal in order to use the terminal commands mentioned in this tutorial. Gitbash (which comes as part of the git for Windows toolset) or Windows Subsystem for Linux (WSL) are both suitable. Cmder is another very good and complete alternative. See Command line crash course for more information on these, and on terminal commands in general.

- -

Also see the following for more information:

- - - -

Creating your first Svelte app

- -

The easiest way to create a starter app template is to just download the starter template application. You can do that by visiting sveltejs/template on GitHub or you can avoid having to download and unzip it and just use degit.

- -

To create your starter app template, run the following terminal commands:

- -
npx degit sveltejs/template moz-todo-svelte
-cd moz-todo-svelte
-npm install
-npm run dev
- -
-

Note: degit doesn't do any kind of magic — it just lets you download and unzip the latest version of a git repo's contents. This is much quicker than using git clone because it will not download all the history of the repo, or create a complete local clone.

-
- -

After running npm run dev, Svelte will compile and build your application. It will start a local server at localhost:5000. Svelte will watch for file updates, and automatically recompile and refresh the app for you when changes are made to the source files. Your browser will display something like this:

- -

A simple start page that says hello world, and gives a link to the official svelte tutorials

- -

Application structure

- -

The starter template comes with the following structure:

- -
moz-todo-svelte
-├── readme.md
-├── package.json
-├── package-lock.json
-├── rollup.config.js
-├── .gitignore
-├── node_modules
-├── public
-│   ├── favicon.ico
-│   ├── index.html
-│   ├── global.css
-│   └── build
-│       ├── bundle.css
-│       ├── bundle.css.map
-│       ├── bundle.js
-│       └── bundle.js.map
-└── src
-    ├── App.svelte
-    └── main.js
- -

The contents are as follows:

- - - -

Having a look at our first Svelte component

- -

Components are the building blocks of Svelte applications. They are written into .svelte files using a superset of HTML.

- -

All three sections — <script>, <styles>, and markup — are optional, and can appear in any order you like.

- -
<script>
-  // logic goes here
-</script>
-
-<style>
-  /* styles go here */
-</style>
-
-<!-- markup (zero or more HTML elements) goes here -->
- -
-

Note: For more information on the component format, have a look at the svelte documentation.

-
- -

With this in mind, let's have a look at the src/App.svelte file that came with the starter template. You should see something like the following:

- -
<script>
-  export let name;
-</script>
-
-<main>
-  <h1>Hello {name}!</h1>
-  <p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
-</main>
-
-<style>
-  main {
-    text-align: center;
-    padding: 1em;
-    max-width: 240px;
-    margin: 0 auto;
-  }
-
-  h1 {
-    color: #ff3e00;
-    text-transform: uppercase;
-    font-size: 4em;
-    font-weight: 100;
-  }
-
-  @media (min-width: 640px) {
-    main {
-      max-width: none;
-    }
-  }
-</style>
- -

The <script> section

- -

The <script> block contains JavaScript that runs when a component instance is created. Variables declared (or imported) at the top level are 'visible' from the component's markup. Top-level variables is the way Svelte handles the component state, and they are reactive by default. We will explain in detail what this means later on.

- -
<script>
-  export let name;
-</script>
- -

Svelte uses the export keyword to mark a variable declaration as a property (or prop), which means it becomes accessible to consumers of the component (e.g. other components). This is one example of Svelte extending JavaScript syntax to make it more useful, while keeping it familiar.

- -

The markup section

- -

In the markup section you can insert any HTML you like, and in addition you can insert valid JavaScript expression inside single curly brackets ({}). In this case we are embedding the value of the name prop right after the Hello text.

- -
<main>
-  <h1>Hello {name}!</h1>
-  <p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
-</main>
- -

Svelte also supports tags like {#if...}, {#each...}, and {#await...} — these examples allow you to conditionally render a portion of the markup, iterate through a list of elements, and work with async values, respectively.

- -

The <style> section

- -

If you have experience working with CSS, the following snippet should make sense:

- -
<style>
-  main {
-    text-align: center;
-    padding: 1em;
-    max-width: 240px;
-    margin: 0 auto;
-  }
-
-  h1 {
-    color: #ff3e00;
-    text-transform: uppercase;
-    font-size: 4em;
-    font-weight: 100;
-  }
-
-  @media (min-width: 640px) {
-    main {
-      max-width: none;
-    }
-  }
-</style>
- -

We are applying a style to our <h1> element. What will happen other components with <h1> elements in them?

- -

In Svelte, CSS inside a component's <style> block will be scoped only to that component. This works by adding a class to selected elements, which is based on a hash of the component styles.

- -

You can see this in action by opening localhost:5000 in a new browser tab, right/Ctrl-clicking on the HELLO WORLD! label, and choosing Inspect:

- -

Svelte starter app with devtools open, showing classes for scoped styles

- -

When compiling the app, Svelte changes our h1 styles definition to h1.svelte-1tky8bj, and then modifies every <h1> element in our component to <h1 class="svelte-1tky8bj">, so that it picks up the styles as required.

- -
-

Note: You can override this behavior and apply styles to a selector globally using the :global(...) modifier (see the Svelte <style> docs for more information).

-
- -

Making a couple of changes

- -

Now that we have a general idea of how it all fits together, we can start making a few changes.
- At this point you can try updating your App.svelte component — for example change the <h1> element on line 6 of App.svelte so that it reads like this:

- -
<h1>Hello {name} from MDN!</h1>
- -

Just save your changes and the app running at localhost:5000 will be automatically updated.

- -

A first look at Svelte reactivity

- -

In the context of a UI framework, reactivity means that the framework can automatically update the DOM when the state of any component is changed.

- -

In Svelte, reactivity is triggered simply by assigning a new value to any top level variable in a component. For example, we could include a toggleName() function in our App component, and a button to run it.

- -

Try updating your <script> and markup sections like so:

- -
<script>
-  export let name;
-
-  function toggleName() {
-    if (name === 'world') {
-      name = 'svelte'
-    } else {
-      name = 'world'
-    }
-  }
-</script>
-
-<main>
-  <h1>Hello {name}!</h1>
-  <button on:click={toggleName}>Toggle name</button>
-  <p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
-</main>
- -

Whenever the button is clicked, Svelte executes the toggleName() function, which in turn updates the value of the name variable.

- -

As you can see, the <h1> label is automatically updated. Behind the scenes, Svelte created the JavaScript code to update the DOM whenever the value of the name variable changes, without using any virtual DOM or other complex reconciliation mechanism.

- -

Note the use of : in on:click. That's Svelte's syntax for listening to DOM events.

- -

Inspecting main.js: the entry point of our app

- -

Let’s open src/main.js, which is where the App component is being imported and used. This file is the entry point for our app, and it initially looks like this:

- -
import App from './App.svelte';
-
-const app = new App({
-  target: document.body,
-  props: {
-    name: 'world'
-  }
-});
-
-export default app;
- -

main.js starts by importing the Svelte component that we are going to use. Then in line 3 it instantiates it, passing an option object with the following properties:

- - - -

A look under the hood

- -

How does Svelte manage to make all these files work together nicely?

- -

The Svelte compiler processes the <style> section of every component and compiles them into the public/build/bundle.css file.

- -

It also compiles the markup and <script> section of every component and stores the result in public/build/bundle.js. It also adds the code in src/main.js to reference the features of each component.

- -

Finally the file public/index.html includes the generated bundle.css and bundle.js files:

- -
<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset='utf-8'>
-  <meta name='viewport' content='width=device-width,initial-scale=1'>
-
-  <title>Svelte app</title>
-
-  <link rel='icon' type='image/png' href='/favicon.png'>
-  <link rel='stylesheet' href='/global.css'>
-  <link rel='stylesheet' href='/build/bundle.css'>
-
-  <script defer src='/build/bundle.js'></script>
-</head>
-
-<body>
-</body>
-</html>
- -

The minified version of bundle.js weighs a little more than 3KB, which includes the "Svelte runtime" (just 300 lines of JavaScript code) and the App.svelte compiled component. As you can see, bundle.js is the only JavaScript file referenced by index.html. There are no other libraries loaded into the web page.

- -

This is a much smaller footprint than compiled bundles from other frameworks. Take into account that, in the case of code bundles, it's not just the size of the files you have to download that matter. This is executable code that needs to be parsed, executed, and kept in memory. So this really makes a difference, especially in low-powered devices or CPU-intensive applications.

- -

Following this tutorial

- -

In this tutorial series you will be building a complete web application. We'll learn all the basics about Svelte and also quite a few advanced topics.

- -

You can just read the content to get a good understanding of Svelte features, but you'll get the most out of this tutorial if you follow along coding the app with us as you go. To make it easier for you to follow each article, we provide a GitHub repository with a folder containing the source for the app as it is at the start of each tutorial.

- -

Svelte also provides an online repl, which is a playground for live-coding Svelte apps on the web without having to install anything on your machine. We provide a repl for each article so you can start coding along right away. Let's talk a bit more about how to use these tools.

- -

Using Git

- -

The most popular version control system is Git, along with GitHub, a site that provides hosting for your repositories and several tools for working with them.

- -

We'll be using GitHub so that you can easily download the source code for each article. You will also be able to get the code as it should be after completing the article, just in case you get lost.

- -

After installing git, to clone the repository you should execute:

- -
git clone https://github.com/opensas/mdn-svelte-tutorial.git
- -

Then at the beginning of each article, you can just cd into the corresponding folder and start the app in dev mode to see what its current state should be, like this:

- -
cd 02-starting-our-todo-app
-npm install
-npm run dev
- -

If you want lo learn more about git and GitHub, we've compiled a list of links to useful guides — see Git and GitHub.

- -
-

Note: If you just want to download the files without cloning the git repo, you can use the degit tool like this — npx degit opensas/mdn-svelte-tutorial. You can also download a specific folder with npx degit opensas/mdn-svelte-tutorial/01-getting-started. Degit won't create a local git repo, it will just download the files of the specified folder.

-
- -

Using the Svelte REPL

- -

A REPL (read–eval–print loop) is an interactive environment that allows you to enter commands and immediately see the results — many programming languages provide a REPL.

- -

Svelte's REPL is much more than that. It's an online tool that allows you to create complete apps, save them online, and share with others.

- -

It's the easiest way to start playing with Svelte from any machine, without having to install anything. It is also widely used by Svelte community. If you want to share an idea, ask for help, or report an issue, it's always extremely useful to create a REPL instance demomstrating the issue.

- -

Let's have a quick look at the Svelte REPL and how you'd use it. It looks like so:

- -

the svelte repl in action, showing component code on the left, and output on the right

- -

To start a REPL, open your browser and navigate to https://svelte.dev/repl.

- - - -

Whenever you change any file on the REPL, Svelte will recompile the app and update the Result tab. To share your app simply share the url. For example, here's the link for a REPL running our complete app: https://svelte.dev/repl/378dd79e0dfe4486a8f10823f3813190?version=3.23.2.

- -
-

Note: Notice how you can specify Svelte's version in the URL. This is useful when reporting issues related to a specific version of Svelte.

-
- -

We will provide a REPL at the beginning and end of each article so that you can start coding with us right away.

- -
-

Note: at the moment the REPL can't handle folder names properly. If you are following the tutorial on the REPL, just create all your components inside the root folder. Then when you see a path in the code, for example import Todos from './components/Todos.svelte', just replace it with a flat URL, e.g. import Todos from './Todos.svelte'.

-
- -

The code so far

- -

Git

- -

Clone the github repo (if you haven't already done it) with:

- -
git clone https://github.com/opensas/mdn-svelte-tutorial.git
- -

Then to get to the current app state, run

- -
cd mdn-svelte-tutorial/01-getting-started
- -

Or directly download the folder's content:

- -
npx degit opensas/mdn-svelte-tutorial/01-getting-started
- -

Remember to run npm install && npm run dev to start your app in development mode.

- -

REPL

- -

To code along with us using the REPL, start at

- -

https://svelte.dev/repl/fc68b4f059d34b9c84fa042d1cce586c?version=3.23.2

- -

Summary

- -

This brings us to the end of our initial look at Svelte, including how to install it locally, create a starter app, and how the basics work. In the next article we'll start building our first proper application — a todo list. Before we do that, however, let's recap some of the things we’ve learned.

- -

In Svelte:

- - - -

{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}

- -

In this module

- - diff --git "a/files/uk/learn/tools_and_testing/\321\200\320\276\320\267\321\203\320\274\321\226\320\275\320\275\321\217_\321\226\320\275\321\201\321\202\321\200\321\203\320\274\320\265\320\275\321\202\321\226\320\262_\320\262\320\265\320\261-\321\200\320\276\320\267\321\200\320\276\320\261\320\272\320\270_\320\275\320\260_\321\201\321\202\320\276\321\200\320\276\320\275\321\226_\320\272\320\273\321\226\321\224\320\275\321\202\320\260/index.html" "b/files/uk/learn/tools_and_testing/\321\200\320\276\320\267\321\203\320\274\321\226\320\275\320\275\321\217_\321\226\320\275\321\201\321\202\321\200\321\203\320\274\320\265\320\275\321\202\321\226\320\262_\320\262\320\265\320\261-\321\200\320\276\320\267\321\200\320\276\320\261\320\272\320\270_\320\275\320\260_\321\201\321\202\320\276\321\200\320\276\320\275\321\226_\320\272\320\273\321\226\321\224\320\275\321\202\320\260/index.html" deleted file mode 100644 index faa5717122..0000000000 --- "a/files/uk/learn/tools_and_testing/\321\200\320\276\320\267\321\203\320\274\321\226\320\275\320\275\321\217_\321\226\320\275\321\201\321\202\321\200\321\203\320\274\320\265\320\275\321\202\321\226\320\262_\320\262\320\265\320\261-\321\200\320\276\320\267\321\200\320\276\320\261\320\272\320\270_\320\275\320\260_\321\201\321\202\320\276\321\200\320\276\320\275\321\226_\320\272\320\273\321\226\321\224\320\275\321\202\320\260/index.html" +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: Розуміння інструментів веб-розробки на стороні клієнта -slug: Learn/Tools_and_testing/Розуміння_інструментів_веб-розробки_на_стороні_клієнта -translation_of: Learn/Tools_and_testing/Understanding_client-side_tools ---- -
{{LearnSidebar}}
- -

Client-side tooling can be intimidating, but this series of articles aims to illustrate the purpose of some of the most common client-side tool types, explain the tools you can chain together, how to install them using package managers, and control them using the command line. We finish up by providing a complete toolchain example showing you how to get productive.

- -

Get started now, with our "Client-side tooling overview"

- -

Prerequisites

- -

You should really learn the basics of the core HTML, CSS, and JavaScript languages first before attempting to use the tools detailed here.

- -
-

Looking to become a front-end web developer?

- -

We have put together a course that includes all the essential information you need to work towards your goal.

- -

Get started

-
- -

Guides

- -
-
1. Client-side tooling overview
-
In this article we provide an overview of modern web tooling, what kinds of tools are available and where you’ll meet them in the lifecycle of web app development, and how to find help with individual tools.
-
2. Command line crash course
-
In your development process you'll undoubtedly be required to run some command in the terminal (or on the "command line" — these are effectively the same thing). This article provides an introduction to the terminal, the essential commands you'll need to enter into it, how to chain commands together, and how to add your own command line interface (CLI) tools.
-
3. Package management basics
-
In this article we'll look at package managers in some detail to understand how we can use them in our own projects — to install project tool dependencies, keep them up-to-date, and more.
-
4. Introducing a complete toolchain
-
In the final couple of articles in the series we will solidify your tooling knowledge by walking you through the process of building up a sample case study toolchain. We'll go all the way from setting up a sensible development environment and putting transformation tools in place to actually deploying your app on Netlify. In this article we'll introduce the case study, set up our development environment, and set up our code transformation tools.
-
5. Deploying our app
-
In the final article in our series, we take the example toolchain we built up in the previous article and add to it so that we can deploy our sample app. We push the code to GitHub, deploy it using Netlify, and even show you how to add a simple test into the process.
-
diff --git "a/files/uk/learn/tools_and_testing/\321\202\320\265\321\201\321\202\321\203\320\262\320\260\320\275\320\275\321\217_\320\272\321\200\320\276\321\201\320\261\321\200\320\260\321\203\320\267\320\265\321\200\320\275\320\276\321\201\321\202\321\226/index.html" "b/files/uk/learn/tools_and_testing/\321\202\320\265\321\201\321\202\321\203\320\262\320\260\320\275\320\275\321\217_\320\272\321\200\320\276\321\201\320\261\321\200\320\260\321\203\320\267\320\265\321\200\320\275\320\276\321\201\321\202\321\226/index.html" deleted file mode 100644 index e13df10951..0000000000 --- "a/files/uk/learn/tools_and_testing/\321\202\320\265\321\201\321\202\321\203\320\262\320\260\320\275\320\275\321\217_\320\272\321\200\320\276\321\201\320\261\321\200\320\260\321\203\320\267\320\265\321\200\320\275\320\276\321\201\321\202\321\226/index.html" +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: Тестування кросбраузерності -slug: Learn/Tools_and_testing/Тестування_кросбраузерності -translation_of: Learn/Tools_and_testing/Cross_browser_testing ---- -
{{LearnSidebar}}
- -

This module focuses on testing web projects across different browsers. We look at identifying your target audience (e.g. what users, browsers, and devices do you most need to worry about?), how to go about doing testing, the main issues that you'll face with different types of code and how to mitigate them, what tools are most useful in helping you test and fix problems, and how to use automation to speed up testing.

- -
-

Looking to become a front-end web developer?

- -

We have put together a course that includes all the essential information you need to work towards your goal.

- -

Get started

-
- -

Prerequisites

- -

You should really learn the basics of the core HTML, CSS, and JavaScript languages first before attempting to use the tools detailed here.

- -

Guides

- -
-
Introduction to cross browser testing
-
This article starts the module off by providing an overview of the topic of cross browser testing, answering questions such as "what is cross browser testing?", "what are the most common types of problems you'll encounter?", and "what are the main approaches for testing, identifying, and fixing problems?"
-
Strategies for carrying out testing
-
Next, we drill down into carrying out testing, looking at identifying a target audience (e.g. what browsers, devices, and other segments should you make sure are tested), lo-fi testing strategies (get yourself a range of devices and some virtual machines and do ad-hoc tests when needed), higher tech strategies (automation, using dedicated testing apps), and testing with user groups.
-
Handling common HTML and CSS problems
-
With the scene set, we'll now look specifically at the common cross-browser problems you will come across in HTML and CSS code, and what tools can be used to prevent problems from happening, or fix problems that occur. This includes linting code, handing CSS prefixes, using browser dev tools to track down problems, using polyfills to add support into browsers, tackling responsive design problems, and more.
-
Handling common JavaScript problems
-
Now we'll look at common cross-browser JavaScript problems and how to fix them. This includes information on using browser dev tools to track down and fix problems, using polyfills and libraries to work around problems, getting modern JavaScript features working in older browsers, and more.
-
Handling common accessibility problems
-
Next we turn our attention to accessibility, providing information on common problems, how to do simple testing, and how to make use of auditing/automation tools for finding accessibility issues.
-
Implementing feature detection
-
Feature detection involves working out whether a browser supports a certain block of code, and running different code dependent on whether it does (or doesn't), so that the browser can always provide a working experience rather than crashing/erroring in some browsers. This article details how to write your own simple feature detection, how to use a library to speed up implementation, and native features for feature detection such as @supports.
-
Introduction to automated testing
-
Manually running tests on several browsers and devices, several times per day, can get tedious and time-consuming. To handle this efficiently, you should become familiar with automation tools. In this article, we look at what is available, how to use task runners, and the basics of how to use commercial browser test automation apps such as Sauce Labs and Browser Stack.
-
Setting up your own test automation environment
-
In this article, we will teach you how to install your own automation environment and run your own tests using Selenium/WebDriver and a testing library such as selenium-webdriver for Node. We will also look at how to integrate your local testing environment with commercial apps like the ones discussed in the previous article.
-
diff --git "a/files/uk/learn/\320\264\320\276\321\201\321\202\321\203\320\277\320\275\321\226\321\201\321\202\321\214/index.html" "b/files/uk/learn/\320\264\320\276\321\201\321\202\321\203\320\277\320\275\321\226\321\201\321\202\321\214/index.html" deleted file mode 100644 index 465926f459..0000000000 --- "a/files/uk/learn/\320\264\320\276\321\201\321\202\321\203\320\277\320\275\321\226\321\201\321\202\321\214/index.html" +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Доступність -slug: Learn/Доступність -translation_of: Learn/Accessibility ---- -
{{LearnSidebar}}
- -

Learning some HTML, CSS, and JavaScript is useful if you want to become a web developer. Beyond mechanical use, it's important to learn how to use these technologies responsibly so that all readers might use your creations on the web. To help you achieve this, this module will cover general best practices (which are demonstrated throughout the HTML, CSS, and JavaScript topics), cross browser testing, and some tips on enforcing accessibility from the start. We'll cover accessibility in special detail.

- -

Overview

- -

When someone describes a site as "accessible," they mean that any user can use all its features and content, regardless of how the user accesses the web — even and especially users with physical or mental impairments.

- - - -

By default, HTML is accessible, if used correctly. Web accessibility involves ensuring that content remains accessible, regardless of who and how the web is accessed.

- -

The Firefox Accessibility Inspector is a very useful tool for checking out accessibility issues on web pages. The following video provides a nice introduction to it:

- -

{{EmbedYouTube("7mqqgIxX_NU")}}

- -
-

Looking to become a front-end web developer?

- -

We have put together a course that includes all the essential information you need to work towards your goal.

- -

Get started

-
- -

Prerequisites

- -

To get the most out of this module, it would be a good idea to either work through at least the first two modules of the HTML, CSS, and JavaScript topics, or perhaps even better, work through the relevant parts of the accessibility module as you work through the related technology topics.

- -
-

Note: If you are working on a computer/tablet/other devices where you don't have the ability to create your own files, you can try out most of the code examples in an online coding program such as JSBin or Glitch.

-
- -

Guides

- -
-
What is accessibility?
-
This article starts off the module with a good look at what accessibility is — this includes what groups of people we need to consider and why, what tools different people use to interact with the web, and how we can make accessibility part of our web development workflow.
-
HTML: A good basis for accessibility
-
A great deal of web content can be made accessible just by making sure the correct HTML elements are always used for the correct purpose . This article looks in detail at how HTML can be used to ensure maximum accessibility.
-
CSS and JavaScript accessibility best practices
-
CSS and JavaScript, when used properly, also have the potential to allow for accessible web experiences, but if misused they can significantly harm accessibility. This article outlines some CSS and JavaScript best practices that should be considered to ensure that even complex content is as accessible as possible.
-
WAI-ARIA basics
-
Following on from the previous article, sometimes making complex UI controls that involve unsemantic HTML and dynamic JavaScript-updated content can be difficult. WAI-ARIA is a technology that can help with such problems by adding in further semantics that browsers and assistive technologies can recognize and use to let users know what is going on. Here we'll show how to use it at a basic level to improve accessibility.
-
Accessible multimedia
-
Another category of content that can create accessibility problems is multimedia — video, audio, and image content need to be given proper textual alternatives, so they can be understood by assistive technologies and their users. This article shows how.
-
Mobile accessibility
-
With web access on mobile devices being so popular, and popular platforms such as iOS and Android having fully-fledged accessibility tools, it is important to consider the accessibility of your web content on these platforms. This article looks at mobile-specific accessibility considerations.
-
- -

Assessments

- -
-
Accessibility troubleshooting
-
-

In the assessment for this module, we present to you a simple site with several accessibility issues that you need to diagnose and fix.

-
-
- -

See also

- - diff --git "a/files/uk/learn/\320\275\320\260\320\262\321\207\320\260\320\275\320\275\321\217_\321\202\320\260_\320\276\321\202\321\200\320\270\320\274\320\260\320\275\320\275\321\217_\320\264\320\276\320\277\320\276\320\274\320\276\320\263\320\270/index.html" "b/files/uk/learn/\320\275\320\260\320\262\321\207\320\260\320\275\320\275\321\217_\321\202\320\260_\320\276\321\202\321\200\320\270\320\274\320\260\320\275\320\275\321\217_\320\264\320\276\320\277\320\276\320\274\320\276\320\263\320\270/index.html" deleted file mode 100644 index c1dad68ac9..0000000000 --- "a/files/uk/learn/\320\275\320\260\320\262\321\207\320\260\320\275\320\275\321\217_\321\202\320\260_\320\276\321\202\321\200\320\270\320\274\320\260\320\275\320\275\321\217_\320\264\320\276\320\277\320\276\320\274\320\276\320\263\320\270/index.html" +++ /dev/null @@ -1,315 +0,0 @@ ---- -title: Навчання та отримання допомоги -slug: Learn/Навчання_та_отримання_допомоги -translation_of: Learn/Learning_and_getting_help ---- -

{{learnsidebar}}

- -

It is great that you are putting some time into learning a new set of skills, but there are good practices to employ that will make your learning more effective. There are also are times when you'll get stuck and feel frustrated — even professional web developers feel like this regularly — and it pays to know about the most effective ways to try and get help so you can progress in your work. This article provides some hints and tips in both of these areas that will help you get more out of learning web development, as well as further reading so you can find out more information about each sub-topic should you wish..

- -

Effective learning

- -

Let's move straight on and think about effective learning.

- -

Different learning methods

- -

It is interesting to consider that there are two main ways in which your brain learns things — focused and diffuse learning:

- - - -

From the studies that neuroscientists have done on brain activity, we have found out that you can't really engage in both ways of learning — or thinking — at once. So which one should you choose? You might think that focused learning is better for studying, but in reality, both are very important.

- -

Focused thinking is great for concentrating hard on specific subjects, getting into deep problem solving, and improving your mastery of the techniques required — strengthening the neural pathways in your brain where that information is stored. It isn't however very good at getting an understanding of "the big picture", and unlocking new neural pathways when you are trying to understand new subjects or solve new problems that you haven't come across before. 

- -

For that, you need diffuse thinking. This is the opposite of focus — you let your brain wander around the wider landscape, searching around for connections you didn't have before, touching on new things (or new combinations of things) that you can then focus on later, to strengthen them and start to really understand what they mean.

- -

This is why it is usually good to read some introductory material first to get a high-level understanding of an area before you leap into the specific details.

- -

It is also why you can sometimes get really stuck on a problem, but then figure out the answer when you go for a coffee break (or a walk). You might:

- -
    -
  1. Know how to fix problem A with tool A.
    2. -
  2. Know how to fix problem B with tool B.
    3. -
  3. Not know how to fix problem C.
    4. -
- -

Let's say you focus on problem C for a while and get frustrated because you can't think how to solve it. But then after going on a walk to get some fresh air, you may well find that as your mind wanders, you suddenly make a connection between tool A and tool B, and realize that you can use them together to fix problem C! It isn't always this simple, but it is also surprising how many times this does happen. This also highlights the importance of taking regular breaks when you are studying in front of the computer.

- -

Different learning materials

- -

It is also worth looking at the different types of learning materials that are available, to see which ones are most effective for you to learn with.

- -

Textual articles

- -

You'll find a lot of written articles on the web to teach you about web design. Like most of this course, for example. Some of the articles will be tutorials, to teach you a certain technique or important concept (such as "learn how to create a video player" or "Learn the CSS box model"), and some of the articles will be reference material, to allow you to look up details you may have forgotten (such as "what is the syntax of the CSS background property"?)

- -

MDN Web Docs is very good for both types — the area you are currently in is great for learning techniques and concepts, and we also have several giant reference sections allowing you to look up any syntax you can't remember.

- -

There are also several other great resources on the web, some of which we'll mention below.

- -
-

Note: The above text should have given you an important fact — you aren't expected to remember everything! Professional web developers use tools like MDN Web Docs to look up things they have forgotten all the time. As you'll discover, learning web development is more about problem-solving and learning patterns than it is about learning lots of syntaxes.

-
- -

Videos

- -

There are also a number of sites that have video learning content on them. YouTube is an obvious one, with channels such as Mozilla Layout Land, MozillaDeveloper, and Google ChromeDevelopers providing many useful videos. Many people prefer textual articles for more in-depth learning and reference material, and videos for quick explanations of concepts and new features, but it is really up to you what you prefer to learn from. There is no right and wrong answer here.

- -

Interactive code playgrounds

- -

You might be the kind of person that prefers minimal instructions and would prefer to jump straight in and start playing with code. This is also a reasonable approach, and some learning sites tend to favor it. Codecademy for example is a learning site where the tutorials mainly consist of interactive code editors where you have to directly write code and see if the desired result was achieved.

- -

Many MDN Web docs reference pages provide interactive examples too, where you can alter the code and see how the live result changes. And there is also nothing wrong with creating your own code examples on your computer, or in an online code editor like JSBin, Codepen, or Glitch. In fact, you'll be called to do so as part of this course when you are learning!

- -
-

Note: Online code editors are also really useful for sharing code you've written, for example, if you are collaborating on learning with someone else who isn't in the same location, or are sending it someone to ask for help with it. You can share the web address of the example with them so they can see it.

-
- -
-

Note: You might favor one learning method over the others, but realistically a hybrid approach is probably what you will end up with. And you'll probably come up with other methods than the three we covered above.

-
- -

Making a plan

- -

It is a good idea to create a plan to help you achieve what you want to achieve through your learning.

- -

A goal statement

- -

It sounds silly, but why not start with a single sentence that says what you want to achieve? The following have different scopes, but are all realistic and achievable:

- - - -

The following are not quite as reasonable:

- - - -

What do you need to get there?

- -

Once you've worked out your goal, it is a good idea to research what you'll need to achieve the goal. For example:

- -

Materials I need:

- - - -

Knowledge I need:

- - - -

How much time and money will it take?

- -

Estimate the time and cost of getting these things. If you'll need to work to earn money to buy the materials required, then the time to do that will have to be factored in. Once you have a time estimate, you can start to build a plan around your life.

- -

How many hours per week do I need to do?

- -

Once you know what you need to do, and how long you think it'll take you, you can start writing out a plan to follow, to achieve your goal. It can be as simple as:

- -

"It'll take me 500 hours to learn what I need to know, and I have a year to do it, so if I assume 2 weeks' holiday I'll need to do work on this for 10 hours per week. I am free on evenings and weekends, so I'll plan my time around those."

- -

How much time you can spend on this of course depends on what your circumstances are. If you are at school, then you've got way more free time than if you have a job and children to provide for. It is still possible to achieve your goals, but you have to be realistic about how quickly you can do it.

- -

If you are doing a university or college course to learn web development, then most of this planning is done for you — lucky you!

- -

When you have worked out a weekly schedule, then you should keep a record of what you manage to do each week in a simple spreadsheet or even in a notebook!

- -

Also, it might be a good idea to have some sub-goals worked out to allow you to keep track of where you are more easily, for example:

- - - -

Keep thinking about how much progress you are making, and adjust your plan if needs be.

- -

Staying motivated

- -

It is hard to stay motivated, especially if you are trying to learn a complex skill like programming or web development. What follows are some tips to stay motivated and keep working:

- - - -

Effective problem solving

- -

There is no one effective way to solve all problems (and learn all things) associated with web design and development, but there are some general bits of advice that will serve you well in most cases.

- -

Break things down into chunks

- -

For a start, when you are trying to implement something specific and it seems really hard to get your head around, you should try to break it down into multiple smaller problems, or chunks.

- -

For example, if you are looking at a task of "Build a simple two-column website", you could break it down as follows:

- - - -

Then you could break it down further, for example, "Implement horizontal navigation menu" could be written out as:

- - - -

Each of these problems doesn't seem nearly as difficult to solve as the one big problem you had initially. Now you've just got to go through and solve them all!

- -

Learn and recognise the patterns

- -

As we said before, web design/programming is mostly about problem solving and patterns. Once you have written out what you'll need to do to solve a specific problem, you can start to figure out what technology features to use to solve it. For example, professional web developers have created lots of horizontal navigation menus, so they'll immediately start thinking of a solution like this:

- -

A nav menu is usually created from a list of links, something like:

- -
<ul>
-  <li>First menu item</li>
-  <li>Second menu item</li>
-  <li>Third menu item</li>
-  <li>etc.</li>
-</ul>
-
- -

To make all the items sit horizontally on a line, the easiest modern way is to use flexbox:

- -
ul {
-  display: flex;
-}
- -

To remove unneeded spacing and bullet points, we can do this:

- -
ul {
-  list-style-type: none;
-  padding: 0;
-}
- -

etc.

- -

If you are a complete beginner to web development, you'll have to do some study and web searches and lookup solutions to such problems. If you are a professional web developer you'll probably remember the last time you solved a similar problem, and only have to look up a few bits of the syntax that you forgot since then.

- -

When you find solutions to such problems, it is worth writing down notes on what you did, and keeping some minimal code examples in a directory somewhere so you can look back on previous work.

- -

In addition, the web has developer tools that allow you to look at the code used to build any site on the web — if you don't have a solution to hand, one good research method is to find websites with similar features in the wild, and find out how they did it.

- -
-

Note: Notice how above we talked about the problem we are trying to solve first, and the technology used to solve it second. This is pretty much always the best way round to do it — don't start with a cool new technology that you want to use, and try to shoehorn it into the use case.

-
- -
-

Note: The simplest solution is often the best.

-
- -

Getting practice

- -

The more you practice solving a problem, the stronger your brain's neural pathways are in that area, and the easier it becomes to recall the details and the logic of that particular problem.

- -

Keep tinkering with code, and getting more practice. If you run out of problems to solve, look up some tests online, do some more courses, or ask your friends and family (or local school or church) if there is anything they'd like you to build for them.

- -

Getting help

- -

Web development requires you to learn a complex set of skills — you are bound to get stuck sometimes and need help. As we said before, even professional developers need regular help working out issues.

- -

There are a variety of ways to get help, and what follows are some tips for doing so more effectively.

- -

Effective web searches

- -

One important skill to learn is the art of effective web searches — what search terms do you need to use in your favorite search engine to find the articles you need? 

- -

It is often fairly obvious what to search for. For example:

- - - -

If you want to search for something that has less obvious buzzwords, you need to think about what is most likely to return what you want.

- - - -

Error messages

- -

If you are having a problem with some code and a specific error message is coming up, it is often a good idea to just copy the error message into your search engine and use it as the search term. If other people have had the same problem, there'll likely be some articles or blog posts about it in places like MDN or Stack Overflow.

- -
-

Note: Stack Overflow is a really useful website — it is basically a huge database of curated questions and answers on various technologies and related techniques. You'll probably find an answer that answers your question. If not, you can ask a question and see if anyone can help you.

-
- -

Browser testing

- -

It is often a good idea to see if your problem is affecting all browsers, or whether it only occurs in one or a small number of browsers. If it is only affecting one browser, for example, you can use that browser to narrow down the search. Example searches might look like:

- - - -

Using MDN

- -

The site you are already on has a wealth of information available to you — both reference material for looking up code syntax, and guides/tutorials for learning techniques.

- -

We've provided most of the answers to the questions you'll have about web development fundamentals in this part of MDN. If you are stuck, then it is good to re-read the associated articles to see if you missed anything.

- -

If you are not sure which article to read, then try searching MDN for some related keywords (as indicated above), or try a general web search. To search on MDN, you can either use the site's in-built search functionality or better still, use your favorite search engine and put "mdn" in front of the search term, for example, "mdn responsive web design" or "mdn background-color".

- -

Other online resources

- -

We already mentioned Stack Overflow, but there are other online resources that can help.

- -

It is good to find a community to be part of, and you'll get a lot of respect if you try to help others answer their questions as well as asking your own. Other good examples include:

- - - -

However, it also makes sense to find useful groups on social networking sites such as Twitter or Facebook. Look for groups that discuss web development subjects you are interested in, and join up. Follow people on twitter you know are influential, smart, or just plain seem to share lots of useful tips.

- -

Physical meetups

- -

Lastly, you should try attending some physical meetups to meet other like-minded people, especially ones that cater to beginners. meetup.com is a good place to find local physical meetups, and you could also try your local press/what's on sites.

- -

You could also try attending full-fledged web conferences. While these can be expensive, you could try volunteering at them, and many conferences offer reduced rate tickets, for example, student or diversity tickets.

- -

See also

- - diff --git "a/files/uk/learn/\321\204\321\200\320\276\320\275\321\202-\320\265\320\275\320\264_\320\262\320\265\320\261-\321\200\320\276\320\267\321\200\320\276\320\261\320\275\320\270\320\272/index.html" "b/files/uk/learn/\321\204\321\200\320\276\320\275\321\202-\320\265\320\275\320\264_\320\262\320\265\320\261-\321\200\320\276\320\267\321\200\320\276\320\261\320\275\320\270\320\272/index.html" deleted file mode 100644 index c90cae476e..0000000000 --- "a/files/uk/learn/\321\204\321\200\320\276\320\275\321\202-\320\265\320\275\320\264_\320\262\320\265\320\261-\321\200\320\276\320\267\321\200\320\276\320\261\320\275\320\270\320\272/index.html" +++ /dev/null @@ -1,202 +0,0 @@ ---- -title: Фронтенд веб-розробник -slug: Learn/Фронт-енд_веб-розробник -tags: - - CSS - - Front-end - - HTML - - JavaScript - - Web Standarts - - Інструментарій - - Навчання - - Початківець - - Стандарти - - Фронт-енд - - Фронтенд - - інструменти -translation_of: Learn/Front-end_web_developer ---- -

{{learnsidebar}}

- -

Ласкаво просимо до нашого навчального шляху веб-розробника!

- -

Ми представяємо вам структурований курс, який навчить вас усьому, що вам потрібно знати, аби стати передовим веб-розробником. Просто працюйте над кожним розділом, опановуючи нові або вдосконалюючи існуючі навички, рухаючись далі. Кожен розділ містить практичні завдання та оцінювання, щоб перевірити своє розуміння, перш ніж рухатися вперед.

- -

Охоплена тематика

- -

Досліджувані теми:

- - - -

Ви можете працювати з розділами по порядку, проте кожен з них також є самостійним. Наприклад, якщо ви вже знаєте HTML, ви можете перейти до розділу CSS.

- -

Передумови

- -

Щоб почати цей курс, вам не потрібні попередні знання. Все, що вам потрібно, це комп’ютер, що може працювати із сучасними веб-браузерами, підключення до Інтернету та готовність вчитися.

- -

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

- -

Отримання допомоги

- -

Ми намагалися зробити навчання фронт-енд веб-розробці якомога комфортним, але ви, ймовірно, все ж таки десь застрягнете, тому що чогось не розумієте або якийсь код просто не працює.

- -

Не панікуйте. Ми всі застрягаємо, не зважаючи на те - ми початківці чи ми професійні веб-розробники. Стаття Навчання та отримання допомоги пропонує вам низку порад щодо пошуку інформації та надання допомоги самому собі. Якщо ви все ще не зрушили з мертвої точки, сміливо розміщуйте питання на нашому Дискурсному форумі.

- -

Нумо починати. Щасти!

- -

Шлях навчання

- -

Початок

- -

Час на виконання: 1,5–2 години

- -

Передумови

- -

Нічого, крім базової комп'ютерної грамотності.

- -

Як мені дізнатися, що я можу рухатися далі?

- -

В цій частині курсу немає оцінювання, проте не пропускайте її. Важливо, щоб ви налаштувались і були готові виконувати практичні завдання пізніше в процесі.

- -

Посібники

- - - -

Семантика та структура за допомогою HTML

- -

Час на виконання: 35–50 годин

- -

Передумови

- -

Нічого, крім базової комп'ютерної грамотності та базового середовища для веб-розробки.

- -

Як мені дізнатися, що я можу рухатися далі?

- -

Оцінювання в кожному модулі розроблено для перевірки вашого знання теми. Вдалий результат оцінювання підтверджує, що ви готові перейти до наступного модуля.

- -

Модулі

- - - -

Стилізація та розмітка за допомогою CSS

- -

Час на виконання: 90–120 гоодин

- -

Передумови

- -

Перед початком вивчення CSS рекомендується мати базові знання з HTML. Спершу слід вивчити Вступ до HTML.

- -

Як мені дізнатися, що я можу рухатися далі?

- -

Оцінювання в кожному модулі розроблено для перевірки вашого знання теми. Вдалий результат оцінювання підтверджує, що ви готові перейти до наступного модуля.

- -

Модулі

- - - -

Додаткові ресурси

- - - -

Інтерактивність за допомогою JavaScript

- -

Час на виконання: 135–185 годин

- -

Передумови

- -

Перед початком вивчення JavaScript рекомендується мати базові знання з HTML. Спершу слід вивчити Вступ до HTML.

- -

Як мені дізнатися, що я можу рухатися далі?

- -

Оцінювання в кожному модулі розроблено для перевірки вашого знання теми. Вдалий результат оцінювання підтверджує, що ви готові перейти до наступного модуля.

- -

Модулі

- - - -

Веб-форми — Робота з даними користувача

- -

Час на виконання: 40–50 годин

- -

Передумови

- -

Вивчення форм вимагає знання з HTML, CSS та JavaScript. Враховуючи складність роботи з формами, це спеціальна тема.

- -

Як мені дізнатися, що я можу рухатися далі?

- -

Оцінювання в кожному модулі розроблено для перевірки вашого знання теми. Вдалий результат оцінювання підтверджує, що ви готові перейти до наступного модуля.

- -

Модулі

- - - -

Роблячи Інтернет доступним для кожного

- -

Час на виконання: 60–75 годин

- -

Передумови

- -

Перед роботою з цим розділом було б незайвим знати HTML, CSS та JavaScript. Багато методів та найкращих практик стосуються декількох технологій.

- -

Як мені дізнатися, що я можу рухатися далі?

- -

Оцінювання в кожному модулі розроблено для перевірки вашого знання теми. Вдалий результат оцінювання підтверджує, що ви готові перейти до наступного модуля.

- -

Модулі

- - - -

Сучасний інструментарій

- -

Час на виконання: 55–90 годин

- -

Передумови

- -

Перед роботою з цим розділом було б незайвим знати HTML, CSS та JavaScript, оскільки інструменти, що тут обговорюються, працюють вкупі із багатьма з цих технологій.

- -

Як мені дізнатися, що я можу рухатися далі?

- -

У цьому наборі модулів немає конкретних статей з оцінюванням. Навчальні посібники з прикладами в кінці другого та третього модулів готують вас до розуміння основ сучасного інструментарію.

- -

Модулі

- - diff --git a/files/uk/mdn/about/index.html b/files/uk/mdn/about/index.html new file mode 100644 index 0000000000..c8643e0e51 --- /dev/null +++ b/files/uk/mdn/about/index.html @@ -0,0 +1,115 @@ +--- +title: Про MDN +slug: MDN/Про +tags: + - MDN Meta + - Путівник + - Спільнота +translation_of: MDN/About +--- +
{{MDNSidebar}}
+ +
{{IncludeSubNav ("/uk/docs/MDN")}}
+ +

MDN Web Docs — це постійно оновлюваний навчальний майданчик з веб-технологій та програмного забезпечення, яке живить {{Glossary("Тенета", "всесвітнє павутиння")}}, зокрема:

+ + + +

Наша мета

+ +

Мета MDN дуже проста: надати розробникам всі необхідні відомості для створення проектів у всесвітній мережі. Якщо є відкрита технологія, доступна для тенет, ми маємо її задокументувати.

+ +

Ми також надаємо документацію продуктів Mozilla і відомості те, як складати проекти Mozilla та брати участь у їх розробці.

+ +

Якщо ви не впевнені, чи слід висвітлювати на MDN якусь тему, прочитайте: чи належить це MDN?

+ +

Як можна допомогти?

+ +

Допомога MDN не конче потребує фахових навичок з написання коду чи письменницького хисту! Існує чимало різних способів допомоги: від загальної пере́вірки статей на змістовність та легкочитність до набору тексту та додавання зразків коду. Насправді, шляхів допомоги так багато, що ми цьому присвятили окрему сторінку «Початок роботи», яка допоможе вам обрати завдання залежно від того, що вам цікаво та скільки часу ви готові приділити цій справі.

+ +

Ви також можете допомогти розповівши про MDN у власному блозі чи веб-сайті.

+ +

Спільнота MDN

+ +

Наша спільнота є всесвітньою! До неї належать люди з усього світу, носії низки різних мов. Якщо ви хочете дізнатись про нас більше, чи вам потрібна якась допомога з MDN, не соромтеся звернутись до нашого форуму або каналу IRC! Крім того, ми маємо обліковий запис @MozDevNet у Twitter. Там можна стежити за нашою діяльністю або навіть надсилати нам повідомлення, якщо раптом щось не так, або ви хочете лишити відгук (чи то пак щиру подяку) нашим учасникам та укладачам!

+ +

Використання вмісту MDN

+ +

Вміст MDN є безкоштовним та поширюється на умовах ліцензії відкритого доступу.

+ +

Авторські права та ліцензії

+ +

Вміст MDN повністю доступний під різними ліцензіями відкритого доступу. Цей розділ охоплює різновиди вмісту, який ми надаємо, та ліцензії, що на нього поширюються.

+ +

Документація та статті

+ +

Вікі-документи MDN було укладено за участю багатьох авторів, як у межах Mozilla Foundation, так і поза ними. Якщо не зазначено інше, вміст доступний на умовах ліцензії Creative Commons Attribution-ShareAlike (CC-BY-SA), v2.5 або будь-якої пізнішої версії. Будь ласка, наводьте «Mozilla Contributors» та посилання (якщо в мережі) або URL (якщо для друку) на відповідну вікі-сторінку, яку мали за джерело. Наприклад, передруковуючи цю статтю, можна написати таке:

+ +
Про MDN від Mozilla Contributors ліцензовано під CC-BY-SA 2.5.
+ +

Зверніть увагу, що в наведеному прикладі «Mozilla Contributors» є посиланням на історію цитованої сторінки. Докладніше див. у статті Поради щодо ліцензійних позначок.

+ +
+

Див. вміст MDN на WebPlatform.org для отримання відомостей про передрук та ліцензійні позначки статей MDN на сторінках webplatform.org.

+
+ +

Приклади й уривки коду

+ +

Зразки коду, додані 20 серпня 2010 року чи пізніше, перебувають у відкритому доступі (CC0). Загалом згадка про ліцензію не потрібна, та якщо ви хочете, можете зазначити таке: "Всі авторські права передаються у суспільне надбання. http://creativecommons.org/publicdomain/zero/1.0/".

+ +

На зразки коду, додані раніше 20 серпня 2010 року, поширюються умови ліцензії MIT; ви маєте лише доповнити шаблон ліцензації MIT таким рядком: "© <дата останньої версії вікі-сторінки> <ім'я особи, що додала її до вікі>".

+ +

Внесок

+ +

Якщо ви хочете взяти участь в укладанні документації, вам доведеться погодитись на поширення вашого внеску на умовах ліцензії Attribution-ShareAlike (або іншої ліцензії, що може бути зазначена на сторінці, яку ви редагуєте) та зразків коду на умовах Creative Commons CC-0 (суспільне надбання). Будь-який внесок у документацію MDN означає вашу згоду на поширення власного доробку на умовах цих ліцензій.

+ +

Деякі старі статті використовують інші ліцензії, про що свідчить відповідна позначка Alternate License Block наприкінці кожної такої сторінки.

+ +
+

Для створення нових сторінок вживати інші ліцензії не дозволено.

+
+ +

Авторське право на кожен внесок належить авторові, якщо він не передавав його іншій особі.

+ +

Якщо маєте сумніви чи запитання щодо викладеного тут, зв'яжіться з очільниками MDN.

+ +

Товарні знаки й логотипи

+ +
+

Дія ліцензії Creative Commons не поширюється на товарні знаки й логотипи Mozilla Foundation, як і на вигляд та оздоблення цього сайту. Вони, як витвір окремого авторства, не є частиною вмісту MDN, та ліцензовані на інших умовах. Якщо деякі з них ви хочете використати разом із текстом статей, чи маєте якісь питання щодо ліцензійних умов, ви мусите звернутись до Mozilla Foundation за адресою licensing@mozilla.org.

+ +

Посилання на MDN

+ +

Різні види посилань та відповідні поради див. у статті посилання на MDN.

+ +

Завантаження вмісту

+ +

Ви можете завантажити повне дзеркало MDN (2,1 Гб на лютий 2017 року).

+ +

Окремі сторінки

+ +

Ви можете завантажити вміст окремої сторінки MDN, додавши до URL-адреси відповідні параметри, що вказують бажаний формат.

+ +

Сторонні засоби

+ +

Ви можете переглядати вміст MDN за допомогою сторонніх засобів, як-от Dash (для macOS) та Zeal (для Linux та Windows).

+ +

Поза тим, Kapeli поширює офлайнові документи MDN що охоплюють HTML, CSS, JavaScript, SVG та XSLT.

+ +

Негаразди з MDN Web Docs

+ +

Про те, куди і як звертатися з повідомленням про помилки в роботі чи на сторінках документації MDN, див. у статті як повідомити про помилку в MDN.

+ +

Історія MDN Web Docs

+ +

MDN Web Docs (раніше Mozilla Developer Network (MDN), а до того Mozilla Developer Center (MDC), також відомий як Devmo) з'явився на початку 2005 року, коли Mozilla Foundation отримала від AOL ліцензію на використання вмісту Netscape DevEdge. Вміст DevEdge опрацювали і все, що становило цінність, добровольці згодом перенесли до MDN.

+ +

Докладнішу історію MDN, зокрема оповідки декого з причетних осіб, викладено в статті про наше святкування десятої річниці.

+ +

Про Mozilla

+ +

Якщо вас цікавить хто ми є і як бути частиною Mozilla, чи просто де нас шукати, — ви прийшли куди треба. Дізнайтеся, що нас спонукає і що робить особливими, на сторінці нашої місії.

diff --git a/files/uk/mdn/community/index.html b/files/uk/mdn/community/index.html deleted file mode 100644 index a0265bb09c..0000000000 --- a/files/uk/mdn/community/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: Приєднуйтесь до спільноти MDN -slug: MDN/Community -tags: - - Внесок - - Керівництво - - Спільнота -translation_of: MDN/Community ---- -
{{MDNSidebar}}
- -
{{IncludeSubnav("/uk/docs/MDN")}}
- -
-

Мережа Розробників Mozilla (англ. Mozilla Developer Network, скорочено MDN) — це дещо більше, ніж просто вікі: це товариство, що спільними зусиллями створює якісний ресурс для розробників, які використовують відкриті веб-технології.

-
- -

Ми були б вдячні вам за ваш внесок у розвиток MDN, та навіть більш вдячні ми були б за вашу участь в житті спільноти MDN. Долучитися можна у три прості кроки:

- -
    -
  1. Створіть обліковий запис MDN.
    2. -
  2. Приєднайтесь до обговорень.
    3. -
  3. Стежте за тим, що відбувається.
    4. -
- -

Як працює спільнота

- -

Нижче наведено статті, які описують та пояснюють роботу спільноти MDN.

- -
-
-
-
Ролі спільноти
-
Існує низка ролей у спільноті MDN, кожна з яких має певні обов'язки.
-
Спринти з документування
-
Це керівництво з організації спринтів з документування. Воно містить поради та настанови від людей, які організовували такі спринти, тож може допомогти вам організувати власні.
-
Стежте за тим, що відбувається
-
MDN надано вам спільнотою Мережі Розробників Mozilla. Тут наведено декілька шляхів поширення інформації про те, що ми робимо.
-
- -
-
-
- -
-
-
Беріть участь в обговореннях
-
Життя спільноти відбувається переважно на сайті MDN, проте "спільнота" існує також завдяки обговоренням (асинхронно) та онлайн чатам і зустрічам (синхронно).
-
Працюйте у спільноті
-
Запорукою будь-якого дійсно вагомого внеску до документації MDN є розуміння того, як бути частиною спільноти і працювати злагоджено. Ця стаття надає поради, що допоможуть налагодити взаємодію як з іншими редакторами, так і з командами розробників.
-
-
-
diff --git a/files/uk/mdn/contribute/howto/create_an_mdn_account/index.html b/files/uk/mdn/contribute/howto/create_an_mdn_account/index.html deleted file mode 100644 index 52d901c525..0000000000 --- a/files/uk/mdn/contribute/howto/create_an_mdn_account/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: Як створити обліковий запис MDN -slug: MDN/Contribute/Howto/Create_an_MDN_account -tags: - - MDN Мета - - MDN профіль - - Документація - - Керівництво - - Початківець -translation_of: MDN/Contribute/Howto/Create_an_MDN_account ---- -
{{MDNSidebar}}

Щоб редагувати вміст у MDN, вам потрібен профіль MDN. Вам не потрібен профіль, якщо ви хочете лише читати і знайти документи MDN. Цей посібник допоможе вам налаштувати профіль MDN.

- -
-
Чому в MDN потрібна моя електронна адреса?
-
-Вашу електронну адресу використовують для відновлення облікового запису та, якщо потрібно, адміністратори MDN, щоб зв'язатися з вами про ваш обліковий запис або вашу активність на сайті.
-
-Крім того, ви можете зареєструватися для отримання сповіщень (як от коли конкретні сторінки змінюються) і повідомлення (наприклад, якщо ви вирішите приєднатися до нашої бета-тестової групи, ви можете отримувати електронні листи про нові функції, які потребують тестування).
-
-Ваша електронна адреса ніколи не відображається в MDN і буде використовуватися тільки відповідно до нашої політики конфіденційності.
- -
Якщо ви входите в MDN через GitHub, і ви використовуєте електронну адресу "noreply" на GitHub, ви не отримуватимете повідомлення від MDN (включаючи сповіщення, підписавшись на сторінки).
-
-
- -
    -
  1. У верхній частині кожної сторінки MDN ви знайдете кнопку, яка називається Увійти. Наведіть курсор (або натисніть на неї, якщо ви відвідуєте з мобільного пристрою), щоб відобразити список служб автентифікації, які ми підтримуємо для входу в MDN.
    2. -
  2. Виберіть службу, з якою ви ввійдете. На даний момент доступно лише GitHub. Зверніть увагу: якщо ви виберете GitHub, посилання на ваш профіль GitHub буде включено на вашу загальнодоступну сторінку профілю MDN.
    3. -
  3. Дотримуйтесь інструкцій GitHub, щоб підключити свій обліковий запис до MDN.
    4. -
  4. Після того, як служба автентифікації поверне вас до MDN, вам буде запропоновано ввести ім'я користувача та адресу електронної пошти. Ваше ім'я користувача буде відображатися публічно, щоб відмітити вас за виконану вами роботу. Не використовуйте свою електронну адресу як своє ім'я користувача.
    5. -
  5. НатиснітьСтворити свій профіль MDN.
    6. -
  6. Якщо адреса електронної пошти, вказана на кроці 4, не співпадає з вашою службою автентифікації, перевірте свою електронну пошту та натисніть посилання в електронному листі з підтвердженням, яке ми надішлемо вам.
    7. -
- -

Це воно! У вас є обліковий запис MDN, і ви можете відразу редагувати сторінки!

- -

Ви можете натиснути ваше ім'я у верхній частині будь-якої сторінки MDN, щоб переглянути свій загальнодоступний профіль. Звідти ви можете натиснути Редагувати щоб внести зміни або доповнення до вашого профілю.

- -
-

Нові імена користувачів не можуть містити пробіли або символ "@". Пам'ятайте, що ваше ім'я користувача буде відображатися публічно, щоб відзначити виконану вами роботу.

-
diff --git a/files/uk/mdn/contribute/howto/create_and_edit_pages/index.html b/files/uk/mdn/contribute/howto/create_and_edit_pages/index.html new file mode 100644 index 0000000000..5a4112ce39 --- /dev/null +++ b/files/uk/mdn/contribute/howto/create_and_edit_pages/index.html @@ -0,0 +1,180 @@ +--- +title: Як створювати й редагувати сторінки +slug: MDN/Contribute/Howto/Як_створювати_й_редагувати_сторінки +tags: + - Вступ + - Початківець + - Путівник +translation_of: MDN/Contribute/Howto/Create_and_edit_pages +--- +
{{MDNSidebar}}
+ +

Ця стаття знайомить новачків із тим, як здійснюється редагування наявних сторінок та створення нових.

+ +

Редагування наявних сторінок

+ +

Редагування сторінки:

+ + + +

Попередній перегляд змін

+ +

Щоб продивитись, як ваші зміни будуть відображатись:

+ + + +

Будьте уважні! Попередній перегляд сторінки не зберігає ваші зміни, тому не закривайте вкладку з редактором, поки не збережете свою роботу.

+ +

Коментар до ревізії

+ +

Після попереднього перегляду змін ви захочете зберегти вашу ревізію (версію). Перед тим, як зберегти, подивіться на текстовий блок з коментарями до ревізії, що знаходиться внизу сторінки і залиште коментар, щоб пояснити іншим учасникам, чому ви зробили будь-які зміни. Наприклад, ви можливо, додали новий розділ, змінили деякі слова, щоб зробити термінологію більш послідовною, переписали абзац для уточнення мови або видалили інформацію, оскільки вона була зайвою.

+ +

Зміст

+ +

В розділі "У цій статті" знаходиться автоматично створений список посилань до заголовків на сторінці. Формулювання цих посилань можна змінювати, редагуючи заголовки. Також можна видалити вміст секції або зменшити кількість посилань в ній, вибравши "Редагувати назву сторінки та властивості" і змінити значення спадного списку пункту "зміст".

+ +

Мітки

+ +

Ви можете додавати або видаляти теги, які описують вміст сторінки і функцію під розділом редагування сторінки. Дивіться розділ Як правильно поставити теги сторінок для отримання інформації про теги.

+ +

Потрібна перевірка?

+ +

Якщо експерт або досвідчений дописувач повинен переглянути ваші зміни, ви можете надіслати запит на технічний огляд (для коду, API чи технологій), редакційний огляд (прозу, граматику та вміст), переконавшись, що відповідний прапорець встановлено перед збереженням.

+ +

Вкладення файлів

+ +

Якщо ви хочете долучити файл до існуючої сторінки або додати ілюстрацію для подальшого роз'яснення, його можна ввести внизу сторінки. Завантажуючи зображення, будь ласка, використовуйте інструмент для оптимізації зображень, щоб зробити файл якомога меншим для завантаження. Це покращує час завантаження сторінки та сприяє загальній продуктивності MDN. Ви можете скористатись улюбленим інструментом, якщо він у вас є. В іншому випадку ми пропонуємо TinyPNG, зручний веб-інструмент.

+ +

Оприлюднити, скасувати чи продовжити редагування

+ +

Коли ви закінчите редагування і будете задоволені своїм попереднім переглядом, ви ви можете опублікувати свою роботу та коментарі, натиснувши зелену кнопку Оприлюднити праворуч від заголовка сторінки або внизу сторінки. Якщо ви хочете продовжувати працювати, натисніть кнопку Оприлюднити та продовжити редагування, що публікує ваші зміни, зберігаючи інтерфейс редагування відкритим.

+ +

Якщо ви передумали, ви можете скасувати свої зміни, натиснувши червону кнопку Відхилити. Зауважте, що відкидання змін назавжди відкидає їх.

+ +

Натискання Enter в полі редагування коментарів еквівалентне натисканню Оприлюднити та продовжити редагування.

+ +
+

Якщо ви намагаєтесь зберегти свою сторінку і ваші зміни відхиляються як недійсні, коли ви намагаєтесь зберегти їх, але вміст насправді підходить для MDN, вам слід звернутися на email the MDN admin team, щоб допомогли розмістити ваш контент.

+
+ +

Отримання дозволу на створення сторінки

+ +

For security reasons, newly-created accounts don't have the ability to create new pages. If you try to do so, you'll see a page instructing you how to go about getting the page created. There are two options:

+ + + +

Створення нової сторінки

+ +

Once you have page-creation permission, you can start creating new pages.

+ +

If you do not know where to put a new article, do not worry about it! Put it anywhere and we will find it and move it to where it belongs or merge it into existing content if that makes the most sense. You also do not need to worry about making it perfect. We have happy helper gnomes that will help make your content clean and luscious.

+ +

There are a few ways to create a new page:

+ + + +
+
+ +

Посилання на відсутню сторінку

+ +

As with most wikis, on MDN it is possible to create a link to a page that doesn't yet exist. For example, an author might create a list of all the members of an API, before creating the pages for those members. On MDN, links to non-existent pages are typically displayed in red.

+ +

To create a page from a "missing page" link:

+ +
    +
  1. Make sure that you are logged into MDN, and have page-creation permission. (If you aren't logged in, clicking a "missing page" link gives a 404 (page not found) error.)
    2. +
  2. Click the "missing page" link. If you have page creation permission, the MDN Editor UI opens, ready for you to create the missing page.
    3. +
  3. Write the content of the page, and save it.
    4. +
+ +

Нова сторінка без посилань

+ +

To create a new page without linking from another page, enter a unique page name in the URL field of your browser. For example, if you enter:

+ +
https://developer.mozilla.org/uk/docs/FooBar
+ +

MDN creates a new page with the title "FooBar" and opens the editor so you can add content to the new page. Refer to the Editing an existing page section of this article for how to use the editor mode.

+ +

To create a new page without linking from another page:

+ +
    +
  1. Make sure that you are logged in, and have page-creation permission.
    2. +
  2. Enter the following in the URL field of your browser.
    3. +
+ +
https://developer.mozilla.org/uk/docs/new
+ +

MDN creates a new page with a place for a title and opens the editor so you can add content to the new page. Refer to the Editing an existing page section of this article for how to use the editor mode.

+ +

Підстаття наявної статті

+ +

To create a page that you want to be below an existing page in the page hierarchy:

+ +
    +
  1. On the "parent" page, click the Advanced menu (the gear icon in the toolbar), and click New sub-page. An editor view opens for creating a new document.
    2. +
  2. Type a title for the document in the Title field.
    3. +
  3. Change the Slug field if needed (for example, if the title is very long and you want a shorter URL). This field is automatically filled by the editor, by substituting underscores for spaces in the title. In this case, you can change only the last part of the URL of the document.
    4. +
  4. In the TOC field, select the heading levels you want to be automatically displayed in the table of contents for the page, or "No table of contents" if the page doesn't need one.
    5. +
  5. Write content of the page in the editor pane, and save your changes. Refer to the Editing an existing page section of this article for how to use the editor mode.
    6. +
+ +

Створення клона наявної сторінки

+ +

If there is an existing page whose format you want to use for your new page, you can "clone" that page and then change the content.

+ +
    +
  1. On the original page, click the Advanced menu (the gear icon in the toolbar), and click Clone this page. An editor view opens for creating a new document.
    2. +
  2. Change the Title of the page as appropriate for the new content. The Slug field is updated automatically as you change the Title field.
    3. +
  3. If needed, change the path portion of the Slug field, to put the new document in a different part of the document hierarchy. (In most cases, this is not needed, because the cloned page has similar content to the original, and therefore should be located in a similar place.)
    4. +
  4. In the TOC field, select the heading levels you want to be automatically displayed in the table of contents for the page, or "No table of contents" if the page doesn't need one.
    5. +
  5. Write content of the page in the editor pane, and save your changes. Refer to the Editing an existing page section of this article for how to use the editor mode.
    6. +
+ +

Посилання з наявної сторінки

+ +

This method is a bit of a hybrid. You can create a link on another page, and then click the link you just inserted, to create the new page.

+ +
    +
  1. Enter the name of the new page anywhere (that makes sense) in the text of an existing page.
    2. +
  2. Highlight the name and click the Link icon () in the editor's toolbar. The "Update Link" dialog opens, with the highlighted text in the "Link To" field.
    3. +
  3. "/en-US/docs/" is inserted by default at the beginning of the URL field. Enter the name of the page after "/en-US/docs/". (The page name doesn't have to be the same as the link text.)
    4. +
  4. Click OK to create and insert the link.
    5. +
+ +

If the page does not already exist, the link is displayed in red. If the page does already exist, the link is displayed in blue. If you want to create a new page but the page title you want is already taken, check first if it makes more sense to help edit and improve the page that is already there. Otherwise, think of a different title for your new page and create a link for it. Refer to the page naming guide for guidelines.

+ +

To add content to your new page, click on the red link you just created (after saving and closing the editor). The new page opens in editor mode, so you can start writing. Refer to the Editing an existing page section of this article for how to use the editor mode.

+ +

Оновлення вмісту сторінки

+ +

MDN's support for KumaScript macros and transclusion of content from one page into another can sometimes be hampered slightly by the need for caching of generated pages for performance reasons. Pages are built from their source, and that output is cached for future requests. From then on, any macros (templates) or transclusions (using the macroPage on that page will not reflect changes made to the macro, the macro's output, or the contents of the transcluded material.

+ + + +

Див. також

+ + diff --git a/files/uk/mdn/contribute/howto/do_an_editorial_review/index.html b/files/uk/mdn/contribute/howto/do_an_editorial_review/index.html deleted file mode 100644 index 1867df663c..0000000000 --- a/files/uk/mdn/contribute/howto/do_an_editorial_review/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: Як робити редакційний огляд -slug: MDN/Contribute/Howto/Do_an_editorial_review -tags: - - MDN Meta - - Документація - - Путівник - - Редакційний огляд -translation_of: MDN/Contribute/Howto/Do_an_editorial_review ---- -
{{MDNSidebar}}
- -
{{IncludeSubnav("/uk/docs/MDN")}}
- -

Редакційний огляд полягає у виправленні одруків, помилок граматики й правопису, слововживання або фразеології. Не всі, хто творить MDN, є фахівцями мовознавства, та попри це вони можуть робити надзвичайно важливий змістовний внесок до статей, що відтак потребують перевірки на охайність та редактури. Саме це й має на меті редакційний огляд.

- -

Ця стаття пояснює, як здійснювати редакційний огляд, щоб забезпечити охайність, точність та зрозумілість вмісту MDN.

- -
-
В чому полягає задача?
-
Перевірка на охайність та редактура статей, що відповідним чином позначені.
-
- -
-
Де саме це треба робити?
-
В окремих статтях, що позначені як такі, що потребують редакційного огляду.
-
- -
-
Які знання є необхідними для виконання цієї задачі?
-
Належне знання граматики й правопису. Ви маєте пересвідчитися, що текст викладено зрозуміло та недвозначно, що він відповідає чинним граматиці й правопису, а також настановам Путівника зі стилю MDN.
-
- -
-
Які кроки задля цього потрібно зробити?
-
-
    -
  1. Оберіть статтю для перевірки: -
      -
    1. Відкрийте перелік статей, що потребують редакційної перевірки. Це список сторінок, що мають відповідні позначки.
      2. -
    2. Клацніть на посилання, щоб відкрити відповідну статтю.
      - Заувага: цей перелік оновлюється автоматично, але нечасто, тож він може містити деякі статті, що вже не потребують перевірки. Якщо обрана вами стаття не містить відповідного повідомлення, лишіть її та оберіть іншу.
      3. -
    -
    2. -
  2. Перечитайте статтю, звертаючи увагу на можливі одруки, помилки правопису, граматики та слововживання. Можете обрати іншу статтю, якщо обрана вам з будь-яких причин не до вподоби.
    3. -
  3. Якщо жодної помилки немає, не потрібно відкривати редактор статті, щоб прибрати позначку про необхідність огляду. Натомість зверніться до меню «швидкий огляд» по лівий бік статті:
    -
    4. -
  4. Приберіть відповідну позначку та натисніть Зберегти.
    5. -
  5. Якщо ви знайшли помилки, які слід виправити: -
      -
    1. Відкрийте редактор MDN, натиснувши кнопку {{FontAwesomeIcon("icon-pencil")}} Редагувати на сторінці згори.
      2. -
    2. Виправте знайдені одруки, пунктуацію та слововживання. Щоб допомогти, вам не конче потрібно виправити все. Проте не забудьте лишити належний коментар до редакції, якщо ви не цілком певні, що виконали вичерпний огляд усієї статті.
      3. -
    3. Лишіть коментар до редакції наприкінці сторінки — щось на кшталт «Редакційний огляд: виправлено одруки, граматичні помилки та правопис». Це допоможе іншим членам спільноти дізнатись, що ви зробили й нащо.
      4. -
    4. Приберіть позначку Редакційна під заголовком Потрібна перевірка? — це розташовано просто над розділом Коментар до редакції.
      5. -
    5. Натисніть кнопку {{FontAwesomeIcon("icon-check")}} Оприлюднити.
      6. -
    -
    6. -
- -
-

Заувага: Внесені вами зміни можуть не з'явитися одразу після збереження — подекуди їх обробка може тривати деякий час.

-
-
-
diff --git a/files/uk/mdn/contribute/howto/set_the_summary_for_a_page/index.html b/files/uk/mdn/contribute/howto/set_the_summary_for_a_page/index.html deleted file mode 100644 index 36266220ba..0000000000 --- a/files/uk/mdn/contribute/howto/set_the_summary_for_a_page/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Як зробити опис сторінки -slug: MDN/Contribute/Howto/Set_the_summary_for_a_page -tags: - - MDN Meta - - Посібник - - Як -translation_of: MDN/Contribute/Howto/Set_the_summary_for_a_page ---- -
{{MDNSidebar}}

Ви можете створити опис сторінки на MDN, які будуть використані у різний спосіб, у тому числі в результатах пошукової системи, на інших сторінках MDN, таких як актуальні цільові сторінки та підказки. Це має бути текст, який має сенс як в змісті сторінки, так і при відображенні в інших контекстах, без решти вмісту сторінки.

- -

Опис має бути чітко визначено на сторінці. Якщо це не чітко визначено, то зазвичай використовується перше речення, яке не завжди є найкращим текстом для цієї мети.

- -
-
У чому полягає завдання?
-
Позначення тексту в межах сторінки, який можна використати як його опис в інших контекстах; це завдання може включати в себе написання відповідного тексту, якщо це необхідно.
-
Де це потрібно зробити?
-
На сторінках, які не мають опису або не дуже чудовий опис.
-
Що потрібно знати аби виконати завдання?
-
Спроможність використання редактора MDN; хороші навички англійського письма; достатнє знайомство з темою сторінки, щоб написати гарне резюме.
-
Як це зробити покроково?
-
-
    -
  1. Виберіть сторінку, для якої потрібно створити опис: -
      -
    1. На сторінці статусу документації MDN, натисніть на посилання під Секціями для теми, про яку ви щось знаєте (наприклад, HTML):
      -
      2. -
    2. На сторінці стану документації теми натисніть заголовок Сторінки в таблиці Описи. Це приведе вас до переліку всіх сторінок розділу цієї теми; він показує посилання на сторінки в лівій колонці, та на теги та описи у правій колонці:
      -
      3. -
    3. Виберіть сторінку, на якій відсутній або поганий опис:
      -
      4. -
    4. Натисність на посилання аби перейти на сторінку.
      5. -
    -
    2. -
  2. Натисніть Редагувати, щоб відкрити цю сторінку у редакторі MDN.
    3. -
  3. Шукайте одне-два речення, котрі будуть слугувати описом вмісту сторінки. Якщо необхідно, відредагуйте наявний вміст, щоб створити гарний опис або змініть його.
    4. -
  4. Виберіть текст, який слугуватиме описом.
    5. -
  5. У віджеті Стилі на панелі інструментів редактора виберіть SEO Опис. (У джерелі сторінки це створює елемент {{HTMLElement("span")}} з класом "seoSummary" навколо обраного тексту.)
    -
    6. -
  6. Збережіть свої зміни з коментарем до редакції. Коментар є необов'язковими, але ми радимо вам надати його. Це полегшить іншим людям роботу по відслідковуванню змін.
    7. -
- -

 

-
-
- -

 

diff --git "a/files/uk/mdn/contribute/howto/\320\261\320\265\321\202\320\260_\321\202\320\265\321\201\321\202\321\203\320\262\320\260\320\275\320\275\321\217/index.html" "b/files/uk/mdn/contribute/howto/\320\261\320\265\321\202\320\260_\321\202\320\265\321\201\321\202\321\203\320\262\320\260\320\275\320\275\321\217/index.html" deleted file mode 100644 index f642230d3c..0000000000 --- "a/files/uk/mdn/contribute/howto/\320\261\320\265\321\202\320\260_\321\202\320\265\321\201\321\202\321\203\320\262\320\260\320\275\320\275\321\217/index.html" +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: Як взяти учать в бета-тестуванні -slug: MDN/Contribute/Howto/Бета_тестування -tags: - - MDN Meta -translation_of: MDN/Contribute/Howto/Be_a_beta_tester ---- -
{{MDNSidebar}}

Час від часу, коли розробники Kuma (платформа MDN) впроваджують якість зміни, ми завчасно надаємо доступ до останніх оновлень тим членам спільноти, що погодились брати участь в бета-тестуванні. Певно, що в режимі бета-тестування щось може не працювати як слід.

- -

Як розпочати тестування

- -
    -
  1. Увійдіть до MDN (для цього вам потрібен обліковий запис);
    2. -
  2. Відкрийте випадне меню нагорі під зображенням вашого профілю наведенням вказівника миші;
    3. -
  3. Натисніть кнопку «Редагувати профіль» , щоб потрапити на сторінку редагування облікового запису:
    -
    4. -
  4. Встановіть прапорець «Бета-тестувальник» нагорі сторінки:
    - Shows the location of the Beta Tester checkbox
    5. -
  5. Та не забудьте застосувати зміни, натиснувши кнопку «Оприлюднити» наприкінці сторінки.
    6. -
- -

Як припинити тестування

- -
    -
  1. Увійдіть до MDN, відкрийте сторінку редагування облікового запису;
    2. -
  2. Приберіть прапорець «Бета-тестувальник»;
    3. -
  3. Збережіть зміни, натиснувши кнопку «Оприлюднити» наприкінці сторінки.
    4. -
- -

Як лишити відгук щодо тестування

- -

Є два способи залишити свій відгук щодо бета-тестування:

- - diff --git "a/files/uk/mdn/contribute/howto/\321\217\320\272_\321\201\321\202\320\262\320\276\321\200\321\216\320\262\320\260\321\202\320\270_\320\271_\321\200\320\265\320\264\320\260\320\263\321\203\320\262\320\260\321\202\320\270_\321\201\321\202\320\276\321\200\321\226\320\275\320\272\320\270/index.html" "b/files/uk/mdn/contribute/howto/\321\217\320\272_\321\201\321\202\320\262\320\276\321\200\321\216\320\262\320\260\321\202\320\270_\320\271_\321\200\320\265\320\264\320\260\320\263\321\203\320\262\320\260\321\202\320\270_\321\201\321\202\320\276\321\200\321\226\320\275\320\272\320\270/index.html" deleted file mode 100644 index 5a4112ce39..0000000000 --- "a/files/uk/mdn/contribute/howto/\321\217\320\272_\321\201\321\202\320\262\320\276\321\200\321\216\320\262\320\260\321\202\320\270_\320\271_\321\200\320\265\320\264\320\260\320\263\321\203\320\262\320\260\321\202\320\270_\321\201\321\202\320\276\321\200\321\226\320\275\320\272\320\270/index.html" +++ /dev/null @@ -1,180 +0,0 @@ ---- -title: Як створювати й редагувати сторінки -slug: MDN/Contribute/Howto/Як_створювати_й_редагувати_сторінки -tags: - - Вступ - - Початківець - - Путівник -translation_of: MDN/Contribute/Howto/Create_and_edit_pages ---- -
{{MDNSidebar}}
- -

Ця стаття знайомить новачків із тим, як здійснюється редагування наявних сторінок та створення нових.

- -

Редагування наявних сторінок

- -

Редагування сторінки:

- - - -

Попередній перегляд змін

- -

Щоб продивитись, як ваші зміни будуть відображатись:

- - - -

Будьте уважні! Попередній перегляд сторінки не зберігає ваші зміни, тому не закривайте вкладку з редактором, поки не збережете свою роботу.

- -

Коментар до ревізії

- -

Після попереднього перегляду змін ви захочете зберегти вашу ревізію (версію). Перед тим, як зберегти, подивіться на текстовий блок з коментарями до ревізії, що знаходиться внизу сторінки і залиште коментар, щоб пояснити іншим учасникам, чому ви зробили будь-які зміни. Наприклад, ви можливо, додали новий розділ, змінили деякі слова, щоб зробити термінологію більш послідовною, переписали абзац для уточнення мови або видалили інформацію, оскільки вона була зайвою.

- -

Зміст

- -

В розділі "У цій статті" знаходиться автоматично створений список посилань до заголовків на сторінці. Формулювання цих посилань можна змінювати, редагуючи заголовки. Також можна видалити вміст секції або зменшити кількість посилань в ній, вибравши "Редагувати назву сторінки та властивості" і змінити значення спадного списку пункту "зміст".

- -

Мітки

- -

Ви можете додавати або видаляти теги, які описують вміст сторінки і функцію під розділом редагування сторінки. Дивіться розділ Як правильно поставити теги сторінок для отримання інформації про теги.

- -

Потрібна перевірка?

- -

Якщо експерт або досвідчений дописувач повинен переглянути ваші зміни, ви можете надіслати запит на технічний огляд (для коду, API чи технологій), редакційний огляд (прозу, граматику та вміст), переконавшись, що відповідний прапорець встановлено перед збереженням.

- -

Вкладення файлів

- -

Якщо ви хочете долучити файл до існуючої сторінки або додати ілюстрацію для подальшого роз'яснення, його можна ввести внизу сторінки. Завантажуючи зображення, будь ласка, використовуйте інструмент для оптимізації зображень, щоб зробити файл якомога меншим для завантаження. Це покращує час завантаження сторінки та сприяє загальній продуктивності MDN. Ви можете скористатись улюбленим інструментом, якщо він у вас є. В іншому випадку ми пропонуємо TinyPNG, зручний веб-інструмент.

- -

Оприлюднити, скасувати чи продовжити редагування

- -

Коли ви закінчите редагування і будете задоволені своїм попереднім переглядом, ви ви можете опублікувати свою роботу та коментарі, натиснувши зелену кнопку Оприлюднити праворуч від заголовка сторінки або внизу сторінки. Якщо ви хочете продовжувати працювати, натисніть кнопку Оприлюднити та продовжити редагування, що публікує ваші зміни, зберігаючи інтерфейс редагування відкритим.

- -

Якщо ви передумали, ви можете скасувати свої зміни, натиснувши червону кнопку Відхилити. Зауважте, що відкидання змін назавжди відкидає їх.

- -

Натискання Enter в полі редагування коментарів еквівалентне натисканню Оприлюднити та продовжити редагування.

- -
-

Якщо ви намагаєтесь зберегти свою сторінку і ваші зміни відхиляються як недійсні, коли ви намагаєтесь зберегти їх, але вміст насправді підходить для MDN, вам слід звернутися на email the MDN admin team, щоб допомогли розмістити ваш контент.

-
- -

Отримання дозволу на створення сторінки

- -

For security reasons, newly-created accounts don't have the ability to create new pages. If you try to do so, you'll see a page instructing you how to go about getting the page created. There are two options:

- - - -

Створення нової сторінки

- -

Once you have page-creation permission, you can start creating new pages.

- -

If you do not know where to put a new article, do not worry about it! Put it anywhere and we will find it and move it to where it belongs or merge it into existing content if that makes the most sense. You also do not need to worry about making it perfect. We have happy helper gnomes that will help make your content clean and luscious.

- -

There are a few ways to create a new page:

- - - -
-
- -

Посилання на відсутню сторінку

- -

As with most wikis, on MDN it is possible to create a link to a page that doesn't yet exist. For example, an author might create a list of all the members of an API, before creating the pages for those members. On MDN, links to non-existent pages are typically displayed in red.

- -

To create a page from a "missing page" link:

- -
    -
  1. Make sure that you are logged into MDN, and have page-creation permission. (If you aren't logged in, clicking a "missing page" link gives a 404 (page not found) error.)
    2. -
  2. Click the "missing page" link. If you have page creation permission, the MDN Editor UI opens, ready for you to create the missing page.
    3. -
  3. Write the content of the page, and save it.
    4. -
- -

Нова сторінка без посилань

- -

To create a new page without linking from another page, enter a unique page name in the URL field of your browser. For example, if you enter:

- -
https://developer.mozilla.org/uk/docs/FooBar
- -

MDN creates a new page with the title "FooBar" and opens the editor so you can add content to the new page. Refer to the Editing an existing page section of this article for how to use the editor mode.

- -

To create a new page without linking from another page:

- -
    -
  1. Make sure that you are logged in, and have page-creation permission.
    2. -
  2. Enter the following in the URL field of your browser.
    3. -
- -
https://developer.mozilla.org/uk/docs/new
- -

MDN creates a new page with a place for a title and opens the editor so you can add content to the new page. Refer to the Editing an existing page section of this article for how to use the editor mode.

- -

Підстаття наявної статті

- -

To create a page that you want to be below an existing page in the page hierarchy:

- -
    -
  1. On the "parent" page, click the Advanced menu (the gear icon in the toolbar), and click New sub-page. An editor view opens for creating a new document.
    2. -
  2. Type a title for the document in the Title field.
    3. -
  3. Change the Slug field if needed (for example, if the title is very long and you want a shorter URL). This field is automatically filled by the editor, by substituting underscores for spaces in the title. In this case, you can change only the last part of the URL of the document.
    4. -
  4. In the TOC field, select the heading levels you want to be automatically displayed in the table of contents for the page, or "No table of contents" if the page doesn't need one.
    5. -
  5. Write content of the page in the editor pane, and save your changes. Refer to the Editing an existing page section of this article for how to use the editor mode.
    6. -
- -

Створення клона наявної сторінки

- -

If there is an existing page whose format you want to use for your new page, you can "clone" that page and then change the content.

- -
    -
  1. On the original page, click the Advanced menu (the gear icon in the toolbar), and click Clone this page. An editor view opens for creating a new document.
    2. -
  2. Change the Title of the page as appropriate for the new content. The Slug field is updated automatically as you change the Title field.
    3. -
  3. If needed, change the path portion of the Slug field, to put the new document in a different part of the document hierarchy. (In most cases, this is not needed, because the cloned page has similar content to the original, and therefore should be located in a similar place.)
    4. -
  4. In the TOC field, select the heading levels you want to be automatically displayed in the table of contents for the page, or "No table of contents" if the page doesn't need one.
    5. -
  5. Write content of the page in the editor pane, and save your changes. Refer to the Editing an existing page section of this article for how to use the editor mode.
    6. -
- -

Посилання з наявної сторінки

- -

This method is a bit of a hybrid. You can create a link on another page, and then click the link you just inserted, to create the new page.

- -
    -
  1. Enter the name of the new page anywhere (that makes sense) in the text of an existing page.
    2. -
  2. Highlight the name and click the Link icon () in the editor's toolbar. The "Update Link" dialog opens, with the highlighted text in the "Link To" field.
    3. -
  3. "/en-US/docs/" is inserted by default at the beginning of the URL field. Enter the name of the page after "/en-US/docs/". (The page name doesn't have to be the same as the link text.)
    4. -
  4. Click OK to create and insert the link.
    5. -
- -

If the page does not already exist, the link is displayed in red. If the page does already exist, the link is displayed in blue. If you want to create a new page but the page title you want is already taken, check first if it makes more sense to help edit and improve the page that is already there. Otherwise, think of a different title for your new page and create a link for it. Refer to the page naming guide for guidelines.

- -

To add content to your new page, click on the red link you just created (after saving and closing the editor). The new page opens in editor mode, so you can start writing. Refer to the Editing an existing page section of this article for how to use the editor mode.

- -

Оновлення вмісту сторінки

- -

MDN's support for KumaScript macros and transclusion of content from one page into another can sometimes be hampered slightly by the need for caching of generated pages for performance reasons. Pages are built from their source, and that output is cached for future requests. From then on, any macros (templates) or transclusions (using the macroPage on that page will not reflect changes made to the macro, the macro's output, or the contents of the transcluded material.

- - - -

Див. також

- - diff --git a/files/uk/mdn/guidelines/writing_style_guide/index.html b/files/uk/mdn/guidelines/writing_style_guide/index.html new file mode 100644 index 0000000000..f8b14615da --- /dev/null +++ b/files/uk/mdn/guidelines/writing_style_guide/index.html @@ -0,0 +1,726 @@ +--- +title: Настанови зі стилю +slug: MDN/Guidelines/Настанови_зі_стилю +tags: + - MDN Meta + - Style guide + - Настанови зі стилю + - Путівник +translation_of: MDN/Guidelines/Writing_style_guide +--- +
{{MDNSidebar}}
+ +
{{IncludeSubnav("/uk/docs/MDN")}}
+ +

Щоб зробити викладення документації на MDN Web Docs однорідним, виразним та легкочитним, в цих настановах зазначено, як слід писати, форматувати й упорядковувати текст. Втім, це радше посібник, аніж перелік суворих вимог. Звісно, нас більше цікавить вміст, аніж форма викладення, тож не переймайтесь надмірно докладним вивченням настанов зі стилю. Але й не дивуйтесь, якщо хтось із сумлінних добровольців згодом виправить ваш доробок задля дотримання наведених тут правил.

+ +

Мовознавчі настанови цього посібника стосуються здебільшого англійської мови. Для інших мов можна й варто створювати окремі стильові посібники. Їх слід оприлюднювати як підстатті основної сторінки перекладацької команди.

+ +

Стандарти стилю, що стосуються вмісту на інших (окрім MDN) сайтах, наведено у Єдиному посібнику зі стилю Mozilla.

+ +

Основи

+ +

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

+ +

Назви сторінок

+ +

Назви сторінок використовуються в результатах пошуку, а також для структурування ієрархії сторінок у списку "хлібних крихт" зверху сторінки. Назви сторінок (які відображаються зверху сторінки, а також у результатах пошуку) можуть відрізнятись від "slug" (унікальний ідентифікатор) соторінки, яка є частиною URL адреси після "<locale>/docs/".

+ +

Регістр заголовків сторінок та розділів

+ +

Заголовки сторінок та заголовки розділів мають починатись з великої літери (використовується лише для першого слова в реченні та власних імен), але не кожне слово:

+ + + +

У нас є багато старих сторінок, які було написано до встановлення цього правила. За бажанням ви можете оновити їх, аби вони стали більш читабильними. Поступово ми доберемось до їх редагування.

+ +

Вибір заголовків та коротких заголовків.

+ +

Унікальний ідентифікатор має бути коротким; коли створюєте новий рівень ієрархії, компонент нового рівня у вигляді "slug" ідентифікатора має складатись із одного-двох слів.

+ +

Заголовки сторінок, з іншої сторони, можуть бути такими довгими на скільки це потрібно і мають описувати суть статті.

+ +

Створення нових піддерев

+ +

Коли вам потрібно додати якісь статті до певної теми чи області обговорення, ви можете зробити це створивши цільову сторінку, після цього додавайте підсторінки для кожної окремої статті. Цільова сторінка має описуватись за допомогою одного або двох абзаців, які розкривають тему чи технологію, потім відобразіть список підсторінок з поясненням до кожної з них. Ви можете автоматизувати вставку сторінок в список, використовуючи макроси, які ми створили.

+ +

For example, consider the JavaScript guide, which is structured as follows:

+ + + +

Try to avoid putting your article at the top of the hierarchy, which slows the site down and makes search and site navigation less effective.

+ +

General article content guidelines

+ +

When writing any document, it's important to know how much to say. If you ramble on too long, the article becomes tedious to read and nobody will use it. Getting the amount of coverage right is important for several reasons. Among those reasons: to ensure that the reader finds the information they truly need, and to provide enough quality material for search engines to adequately analyze and rank the article. We'll discuss the former (providing the information the reader may need) here. To learn a little about ensuring that pages are properly classified and ranked by search engines, see the article How to write for SEO on MDN.

+ +

The goal is to write pages that include all the information that readers may need without going on too long about it all. We have a few recommendations in this area.

+ +

Consider your audience

+ +

Keep in mind that these are guidelines. Some of these tips may not apply in every case. Certainly keep your article's audience in mind. An article on advanced network techniques likely doesn't need to go into as much detail about basic networking concepts as the typical article on networking code, for instance.

+ +

Provide a useful summary

+ +

Make sure the article's summary—that is, the opening paragraph or paragraphs before the first heading—provides enough information for the reader to understand if the article is likely to be covering what they're interested in reading about. In guide or tutorial content, the summary should let the reader know what topics will be covered and what they're already expected to know, if anything. It should mention the technology, technologies, and/or APIs that are being documented or discussed, with links to those, and it should offer hints as to the situations in which the article's contents might be useful.

+ +
Example: Too short!
+ +

This example of a summary is far too short. It leaves out too much information, such as what it means exactly to "stroke" text, where the text is drawn, and so forth.

+ +
+

CanvasRenderingContext2D.strokeText() draws a string.

+
+ +
Example: Too long!
+ +

Here, we've updated the summary, but now it's far too long. Too much detail is included, and the text gets far too much into other methods and properties. Instead, the summary should focus on the strokeText() method, and should refer to the appropriate guide where the other details are offered.

+ +
+

When called, the Canvas 2D API method CanvasRenderingContext2D.strokeText() strokes the characters in the specified string beginning at the coordinates specified, using the current pen color. In the terminology of computer graphics, "stroking" text means to draw the outlines of the glyphs in the string without filling in the contents of each character with color.

+ +

The text is drawn using the context's current font as specified in the context's {{domxref("CanvasRenderingContext2D.font", "font")}} property.

+ +

The placement of the text relative to the specified coordinates are determined by the context's textAlign, textBaseline, and direction properties. textAlign controls the placement of the string relative to the X coordinate specified; if the value is "center", then the string is drawn starting at x - (stringWidth / 2), placing the specified X-coordinate in the middle of the string. If the value is "left", the string is drawn starting at the specified value of x. And if textAlign is "right", the text is drawn such that it ends at the specified X-coordinate.

+ +

(etc etc etc...)

+ +

You can, optionally, provide a fourth parameter that lets you specify a maximum width for the string, in pixels. If you provide this parameter, the text is compressed horizontally or scaled (or otherwise adjusted) to fit inside a space that wide when being drawn.

+ +

You can call the fillText() method to draw a string's characters as filled with color instead of only drawing the outlines of the characters.

+
+ +
Example: Much better!
+ +

Here we see a much better overview for the strokeText() method.

+ +
+

The {{domxref("CanvasRenderingContext2D")}} method strokeText(), part of the Canvas 2D API, strokes—that is, draws the outlines of—the characters of a specified string, anchored at the position indicated by the given X and Y coordinates. The text is drawn using the context's current {{domxref("CanvasRenderingContext2D.font", "font")}}, and is justified and aligned according to the {{domxref("CanvasRenderingContext2D.textAlign", "textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline")}}, and {{domxref("CanvasRenderingContext2D.direction", "direction")}} properties.

+ +

For more details and further examples, see {{SectionOnPage("/uk/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Text")}} in the Learning Area as well as our main article on the subject, Drawing text.

+
+ +

Include all relevant examples

+ +

More pages should have examples than should not have them. The majority of pages most likely deserve multiple examples, in fact. It's important to ensure that you use examples to clarify what every parameter is used for, and to clarify any edge cases that may exist. You should also use examples to demonstrate solutions for common tasks, and you should use examples to demonstrate solutions to problems that may arise.

+ +

Each example should be preceded by text explaining what the example does and anything the reader should know before beginning to read or try out the example.

+ +

In addition, each piece of code should include an explanation of how it works. Keep in mind that it may make sense to break up a large piece of code into smaller portions so they can be described individually. The text following each piece of code should explain anything relevant, using an appropriate level of detail. If the code is very simple and doesn't really feature anything directly related to the API being documented, you may only give a quick summary of what it is and why it's there. If the code is intricate, uses the API being documented, or is technically creative, you should provide a more detailed explanation.

+ +

When using the live sample system, it's helpful to be aware that all of the {{HTMLElement("pre")}} blocks in the area that contains the sample are concatenated together before running the example, which lets you break any or all of the HTML, CSS, and JavaScript into multiple segments, each optionally with its own descriptions, headings, and so forth. This makes documenting code incredibly powerful and flexible.

+ +

Overly-short articles are hard to find

+ +

If an article is "thin"—that is, too short—it may not be indexed properly (or at all) by search engines. As a rule of thumb, the article's body text should be at least 250-300 words. Don't artificially inflate a page that simply can't reasonably be made longer than that, but treat this guideline as a target to shoot for as a minimum when possible.

+ +

Sections, paragraphs, and newlines

+ +

Use heading levels in decreasing order: {{HTMLElement("h2")}} then {{HTMLElement("h3")}} then {{HTMLElement("h4")}}, without skipping levels. H2 is the highest level allowed because H1 is reserved for the page title. If you need more than three or four levels of headers you should consider breaking up the article into several smaller articles with a landing page, linking them together using the {{TemplateLink("Next")}}, {{TemplateLink("Previous")}}, and {{TemplateLink("PreviousNext")}} macros.

+ +

The Enter (or Return) key on your keyboard starts a new paragraph. To insert a newline without a space, hold down the Shift key while pressing Enter.

+ +

Don't create single subsections — you don't subdivide a topic into one. It's either two subheadings or more or none at all.

+ +

Don't have bumping heads, which are headings followed immediately by headings. Aside from looking horrible, it's helpful to readers if every heading has at least a brief intro after it to introduce the subsections beneath.

+ +

Lists

+ +

Lists should be written in a similar format across all contributions. Correct procedures should include suitable punctuation and sentence structure regardless of the list format. However dependent on the type of list you are writing, you must adjust your format accordingly. Refer to the documentation below to understand the differences of each.

+ +

Bulleted Lists

+ +

Bulleted lists should be used for grouping purposes to create concise but effective pieces of information. Each new piece of information must start with a '•' to signify a new piece. Bulleted lists must follow standard punctuation usage, pay attention to the use of full stops; they must be included at the end of each sentence just like standard writing practice.

+ +

An example of a correctly structured bulleted list:

+ +
+

In this example we should include:

+ + +
+ +

Note how the format remains the same from bullet to bullet. Create a bullet point, state a condition that has relevence to your indented topic and add some pausing punctuation in order to follow up the condition with a concise explanation.

+ +

Numbered Lists

+ +

Instruction lists must follow suitable numbering and format. It is important to include these attributes as with instructions, being clear is a key priority. Create the list in a similar style to a bulleted list, however numbered or instruction lists can be extensive where necessary, meaning correct punctuation is vital as you will be forming complex sentences.

+ +

An example of a correctly structured numbered list:

+ +
+

In order for you to structure a correct numbered list you must:

+ +

1. Begin with creating an introductory heading to lead into the instructions. This way we can provide the user with context before beginning the instructions.

+ +

2. Start creating your instructions, listing your instructions with numbers. This is a standard format of a numbered list that is easily recognizable by the user. Your instructions may be quite extensive, so it is important to write effectively and use correct punctuation where necessary.

+ +

3. After you have finished your instructions, close off the numbered list with a brief explanation of the outcome upon completion.

+ +

This is an example of writing your closing explanation. We have created a short numbered list which provides instructive steps to produce a numbered list with the correct formatting.

+
+ +

Numbered lists are almost exclusive for instructive purposes, so before writing consider your approach based on the context of the information you are trying to relay.

+ +

Text formatting and styles

+ +

Use the "Formatting Styles" drop-down list to apply predefined styles to selected content.

+ +
The "Note" style is used to call out important notes, like this one.
+ +
Similarly, the "Warning" style creates warning boxes like this.
+ +

Unless specifically instructed to do so, do not use the HTML style attribute to manually style content. If you can't do it using a predefined class, drop into {{IRCLink("mdn")}} and ask for help.

+ +

Code sample style and formatting

+ +
+

Note: This section deals with the styling/formatting of code as it appears on an MDN article. If you want guidelines on actually writing code examples, see our Code sample guidelines.

+
+ +

Tabs and line breaks

+ +

Use two spaces per tab in all code examples. Indent the code cleanly, with open-brace ("{") characters on the same line as the statement that opens the block. For example:

+ +
if (condition) {
+  /* handle the condition */
+} else {
+  /* handle the "else" case */
+}
+
+ +

Long lines shouldn't be allowed to stretch off horizontally to the extent that they require horizontal scrolling to read. Instead, break at natural breaking points. Some examples follow:

+ +
if (class.CONDITION || class.OTHER_CONDITION || class.SOME_OTHER_CONDITION
+       || class.YET_ANOTHER_CONDITION ) {
+  /* something */
+}
+
+var toolkitProfileService = Components.classes["@mozilla.org/toolkit/profile-service;1"]
+                           .createInstance(Components.interfaces.nsIToolkitProfileService);
+
+ +

Inline code formatting

+ +

Use the "Code" button (labeled with two angle brackets "<>") to apply inline code-style formatting to function names, variable names, and method names (this uses the {{HTMLElement("code")}} element). For example, "the frenchText() function".

+ +

Method names should be followed by a pair of parentheses: doSomethingUseful(). The parentheses help differentiate methods from other code terms.

+ +

Syntax highlighting

+ +

Screenshot of the 'Syntax Highlighter' menu.Entire lines (or multiple lines) of code should be formatted using syntax highlighting rather than the {{HTMLElement("code")}} element. Select the appropriate language from the language list button (the one with the two code blocks), as seen in the screenshot to the right. This will insert a preformatted code box with line numbers and syntax highlighting for the chosen language.

+ +

The following example shows text with JavaScript formatting:

+ +
+
for (var i = 0, j = 9; i <= 9; i++, j--)
+  document.writeln("a[" + i + "][" + j + "]= " + a[i][j]);
+
+ +

If no appropriate language is available, use ("No Highlight" in the language menu). This will result in code without syntax highlighting:

+ +
x = 42;
+ +

Syntax definitions

+ +

If you want to insert a syntax definition, you can choose the "Syntax Box" option from the "Styles" drop-down menu in the editor toolbar. This will give the syntax definition a special formatting distinguishing it from normal code.

+ +

Blocks not referring to code

+ +

There are a few use cases where a <pre> block does not refer to code and doesn't have syntax highlighting nor line numbers. In such cases you should add a <pre> without class. Those cases include things like tree structures:

+ +
root/
+
+    folder1/
+        file1
+
+    folder2/
+        file2
+        file3
+
+ +

To create preformatted content without syntax highlighting and line numbers click the "pre" button in the toolbar. Then start to type the text.

+ +

Styling HTML element references

+ +

There are specific rules to follow when writing about HTML elements. These rules produce consistent descriptions of elements and their components. They also ensure correct linking to detailed documentation.

+ +
+
Element names
+
Use the {{TemplateLink("HTMLElement")}} macro, which creates a link to the page for that element. For example, writing \{{HTMLElement("title")}} produces "{{HTMLElement("title")}}". If you don't want to create a link, enclose the name in angle brackets and use "Code (inline)" style (e.g., <title>).
+
Attribute names
+
Use bold face.
+
Attribute definitions
+
Use the {{TemplateLink("htmlattrdef")}} macro (e.g., \{{htmlattrdef("type")}}) for the definition term, so that it can be linked to from other pages, then use the {{TemplateLink("htmlattrxref")}} macro (e.g., \{{htmlattrxref("attr","element")}}) to reference attribute definitions.
+
Attribute values
+
Use "Code (inline)" style, and do not use quotation marks around strings, unless needed by the syntax of a code sample. For example: When the type attribute of an <input> element is set to email or tel ...
+
Labeling attributes
+
Use labels like {{HTMLVersionInline(5)}} thoughtfully. For example, use them next to the bold attribute name but not for every occurrence in your body text.
+
+ +

Latin abbreviations

+ +

In notes and parentheses

+ + + +

In running text

+ + + +

Meanings and English equivalents of Latin abbreviations

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AbbrevLatinEnglish
cf.confercompare
e.g.exempli gratiafor example
et al.et aliiand others
etc.et ceteraand so forth, and so on
i.e.id estthat is, in other words
N.B.nota benenote well
P.S.post scriptumpostscript
+ +
+

Always consider whether it's truly beneficial to use a Latin abbreviation. Some of these are used so rarely that many readers won't understand the meaning, and others are often confused with one another. And be sure that you use them correctly, if you choose to do so. For example, be careful not to confuse "e.g." with "i.e.", which is a common error.

+
+ +

Acronyms and abbreviations

+ +

Capitalization and periods

+ +

Use full capitals and delete periods in all acronyms and abbreviations, including organizations such as "US" and "UN".

+ + + +

Expansion

+ +

On the first mention of a term on a page, expand acronyms likely to be unfamiliar to users. When in doubt, expand it, or, better, link it to the article or glossary entry describing the technology.

+ + + +

Plurals of acronyms and abbreviations

+ +

For plurals of acronyms or abbreviations, add s. Don't use an apostrophe. Ever. Please.

+ + + +

"Versus", "vs.", and "v."

+ +

The contraction "vs." is preferred.

+ + + +

Capitalization

+ +

Use standard English capitalization rules in body text, and capitalize "World Wide Web." It is acceptable to use lower case for "web" (used alone or as a modifier) and "internet;" this guideline is a change from a previous version of this guide, so you may find many instances of "Web" and "Internet" on MDN. Feel free to change these as you are making other changes, but editing an article just to change capitalization is not necessary.

+ +

Keyboard keys should use sentence-style capitalization, not all-caps capitalization. For example, "Enter" not "ENTER."

+ +

Contractions

+ +

Our writing style tends to be casual, so you should feel free to use contractions (e.g., "don't", "can't", "shouldn't") if you prefer.

+ +

Pluralization

+ +

Use English-style plurals, not the Latin- or Greek-influenced forms.

+ + + +

Hyphenation

+ +

Hyphenate compounds when the last letter of the prefix is a vowel and is the same as the first letter of the root.

+ + + +

Gender-neutral language

+ +

It is a good idea to use gender-neutral language in any writing where gender is irrelevant to the subject matter, to make the text as inclusive as possible. So for example, if you are talking about the actions of a specific man, usage of he/his would be fine, but if the subject is a person of either gender, he/his isn't appropriate.
+
+ Let's take the following example:

+ +
+

A confirmation dialog appears, asking the user if he allows the Web page to make use of his Web cam.

+
+ +
+

A confirmation dialog appears, asking the user if she allows the Web page to make use of her Web cam.

+
+ +

Both versions are gender-specific. To fix this, use gender-neutral pronouns:

+ +
+

A confirmation dialog appears, asking the user if they allow the Web page to make use of their Web cam.

+
+ +
+

MDN allows the use of this very common syntax (which is controversial among usage authorities), to make up for the lack of a neutral gender in English. The use of the third-person plural as a gender neutral pronoun (that is, using "they," "them", "their," and "theirs") is an accepted practice, commonly known as "singular 'they.'"

+
+ +

You can use both genders:

+ +
+

A confirmation dialog appears, asking the user if he or she allows the web page to make use of his/her web cam.

+
+ +

making the users plural:

+ +
+

A confirmation dialog appears, asking the users if they allow the web page to make use of their web cams.

+
+ +

The best solution, of course, is to rewrite and eliminate the pronouns:

+ +
+

A confirmation dialog appears, requesting the user's permission for web cam access.

+
+ +
+

A confirmation dialog box appears, which asks the user for permission to use the web cam.

+
+ +

The last way of dealing with the problem is arguably better, as it is not only grammatically more correct but removes some of the complexity associated with dealing with genders across different languages that may have wildly varying gender rules. This solution can make translation easier for both readers and localizers.

+ +

Numbers and numerals

+ +

Dates

+ +

For dates (not including dates in code samples) use the format "January 1, 1990".

+ + + +

Alternately, you can use the YYYY/MM/DD format.

+ + + +

Decades

+ +

For decades, use the format "1990s". Don't use an apostrophe.

+ + + +

Plurals of numerals

+ +

For plurals of numerals add "s". Don't use an apostrophe.

+ + + +

Commas

+ +

In running text, use commas only in five-digit and larger numbers.

+ + + +

Punctuation

+ +

Serial comma

+ +

Use the serial comma. The serial (also known as "Oxford") comma is the comma that appears before the conjunction in a series of three or more items.

+ + + +
+

This is in contrast to the One Mozilla style guide, which specifies that the serial comma is not to be used. MDN is an exception to this rule.

+
+ +

Spelling

+ +

For words with variant spellings, always use their American English spelling. In general, use the first entry at Dictionary.com, unless that entry is listed as a variant spelling or as being primarily used in a non-American form of English; for example, if you look up "honour", you find the phrase "Chiefly British" followed by a link to the American standard form, "honor". Do not use variant spellings.

+ + + +

Terminology

+ +
+
+ +

HTML elements

+ +

Use "elements" to refer to HTML and XML elements, rather than "tags". In addition, they should almost always be wrapped in "<>", and should be in the {{HTMLElement("code")}} style. When you reference a given element for the first time in a section, you should use the {{TemplateLink("HTMLElement")}} macro to create a link to the documentation for the element (unless you're writing within that element's reference document page).

+ + + +

Parameters vs. arguments

+ +

The preferred term on MDN is parameters. Please avoid the term "arguments" for consistency if at all possible.

+ +

User interface actions

+ +

In task sequences, describe user interface actions using the imperative mood. Identify the user interface element by its label and type.

+ + + +

Voice

+ +

While the active voice is preferred, the passive voice is also acceptable, given the informal feel of our content. Try to be consistent, though.

+ +

Wiki markup and usage

+ + + +

Links are a large part of what makes a wiki a powerful learning and teaching tool. Below you'll find some basic information, but you can find a complete guide to creating and editing links on MDN in our editor guide.

+ +

We encourage you to create appropriate links among articles; they help improve navigation and discoverability of content. You can easily create links not only among pages on MDN (internal links) but also to pages outside MDN (external links).

+ +

There are two ways to create links: you explicitly create a link using the Link button in the editor's toolbar—or by pressing Ctrl+K (Cmd-K on the Mac)—or you can use MDN's powerful macro system to generate links automatically or based on an input value.

+ +

When deciding what text to use as a link, there are a few guidelines you can follow:

+ + + +

URL schemes

+ +

For security reasons, you should only create links that use the following schemes:

+ + + +

Others may or may not work, but are not supported and will probably be removed by editorial staff.

+ +
+

In particular, be sure not to use the about: or chrome:// schemes, as they will not work. Similarly, the javascript: scheme is blocked by most modern browsers, as is jar:.

+
+ +

Page tags

+ +

Tags provide meta information about a page and/or indicate that a page has specific improvements needed to its content. Every page in the wiki should have tags. You can find details on tagging in our How to properly tag pages guide.

+ +

The tagging interface lives at the bottom of a page while you're in edit mode, and looks something like this:

+ +

Screenshot of the UX for adding and removing tags on MDN

+ +

To add a tag, click in the edit box at the end of the tag list and type the tag name you wish to add. Tags will autocomplete as you type. Press enter (or return) to submit the new tag. Each article may have as many tags as needed. For example, an article about using JavaScript in AJAX programming might have both "JavaScript" and "AJAX" as tags.

+ +

To remove a tag, just click the little "X" icon in the tag.

+ +

Tagging pages that need work

+ +

In addition to using tags to track information about the documentation's quality and content, we also use them to mark articles as needing specific types of work.

+ +

Tagging obsolete pages

+ +

Use the following tags for pages that are not current:

+ + + +

SEO summary

+ +

The SEO summary provides a short description of a page. It will be reported as a summary of the article to robots crawling the site, and will then appear in search results for the page. It is also used by macros that automate the construction of landing pages inside MDN itself.

+ +

By default, the first paragraph of the page is used as the SEO summary. However, you can override this behavior by marking a section with the "SEO summary" style in the WYSIWYG editor.

+ +

Landing pages

+ +

Landing pages are pages at the root of a topic area of the site, such as the main CSS or HTML pages. They have a standard format that consists of three areas:

+ +
    +
  1. A brief (typically one paragraph) overview of what the technology is and how it's used. See {{anch("Writing a landing page overview")}} for tips.
    2. +
  2. A two-column list of links with appropriate headings. See {{anch("Creating a page link list")}} for guidelines.
    3. +
  3. An optional "Browser compatibility" section at the bottom of the page.
    4. +
+ +

Creating a page link list

+ +

The link list section of an MDN landing page consists of two columns. These are created using the following HTML:

+ +
<div class="row topicpage-table">
+  <div class="section">
+    ... left column contents ...
+  </div>
+  <div class="section">
+    ... right column contents ...
+  </div>
+</div>
+ +

The left column should be a list of articles, with an <h2> header at the top of the left column explaining that it's a list of articles about the topic (e.g., "Documentation and tutorials about foo"); this header should use the CSS class "Documentation". Below that is a <dl> list of articles with each article's link in a <dt> block and a brief one-or-two sentence summary of the article in the corresponding <dd> block.

+ +

The right column should contain one or more of the following sections, in order:

+ +
+
Getting help from the community
+
This should provide information on Matrix chat rooms and mailing lists available on the topic. The heading should use the class "Community".
+
Tools
+
A list of tools the user can look at to help with the use of the technology described in this section of MDN. The heading should use the class "Tools".
+
Related topics
+
A list of links to landing pages for other, related, technologies of relevance. The heading should use the class "Related_Topics".
+
+ +

<<<finish this once we finalize the landing page standards>>>

+ +

Using, inserting images

+ +

It's sometimes helpful to provide an image in an article you create or modify, especially if the article is very technical. To include an image:

+ +
    +
  1. Attach the desired image file to the article (at the bottom of every article in edit mode)
    2. +
  2. Create an image in the WYSIWYG editor
    3. +
  3. In the WYSIWYG editor, in the drop-down list of attachments, select the newly created attachment that is your image
    4. +
  4. Press OK.
    5. +
+ +

Other references

+ +

Preferred style guides

+ +

If you have questions about usage and style not covered here, we recommend referring to the Economist style guide or, failing that, the Chicago Manual of Style.

+ +

Preferred dictionary

+ +

For questions of spelling, please refer to Dictionary.com. The spelling checker for this site uses American English. Please do not use variant spellings (e.g., use color rather than colour).

+ +

We will be expanding the guide over time, so if you have specific questions that aren't covered in this document, please send them to the MDC mailing list or project lead so we know what should be added.

+ +

MDN-specific

+ + + +

Лексика, граматика й правопис

+ +

If you're interested in improving your writing and editing skills, you may find the following resources to be helpful.

+ + diff --git "a/files/uk/mdn/guidelines/\320\275\320\260\321\201\321\202\320\260\320\275\320\276\320\262\320\270_\320\267\321\226_\321\201\321\202\320\270\320\273\321\216/index.html" "b/files/uk/mdn/guidelines/\320\275\320\260\321\201\321\202\320\260\320\275\320\276\320\262\320\270_\320\267\321\226_\321\201\321\202\320\270\320\273\321\216/index.html" deleted file mode 100644 index f8b14615da..0000000000 --- "a/files/uk/mdn/guidelines/\320\275\320\260\321\201\321\202\320\260\320\275\320\276\320\262\320\270_\320\267\321\226_\321\201\321\202\320\270\320\273\321\216/index.html" +++ /dev/null @@ -1,726 +0,0 @@ ---- -title: Настанови зі стилю -slug: MDN/Guidelines/Настанови_зі_стилю -tags: - - MDN Meta - - Style guide - - Настанови зі стилю - - Путівник -translation_of: MDN/Guidelines/Writing_style_guide ---- -
{{MDNSidebar}}
- -
{{IncludeSubnav("/uk/docs/MDN")}}
- -

Щоб зробити викладення документації на MDN Web Docs однорідним, виразним та легкочитним, в цих настановах зазначено, як слід писати, форматувати й упорядковувати текст. Втім, це радше посібник, аніж перелік суворих вимог. Звісно, нас більше цікавить вміст, аніж форма викладення, тож не переймайтесь надмірно докладним вивченням настанов зі стилю. Але й не дивуйтесь, якщо хтось із сумлінних добровольців згодом виправить ваш доробок задля дотримання наведених тут правил.

- -

Мовознавчі настанови цього посібника стосуються здебільшого англійської мови. Для інших мов можна й варто створювати окремі стильові посібники. Їх слід оприлюднювати як підстатті основної сторінки перекладацької команди.

- -

Стандарти стилю, що стосуються вмісту на інших (окрім MDN) сайтах, наведено у Єдиному посібнику зі стилю Mozilla.

- -

Основи

- -

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

- -

Назви сторінок

- -

Назви сторінок використовуються в результатах пошуку, а також для структурування ієрархії сторінок у списку "хлібних крихт" зверху сторінки. Назви сторінок (які відображаються зверху сторінки, а також у результатах пошуку) можуть відрізнятись від "slug" (унікальний ідентифікатор) соторінки, яка є частиною URL адреси після "<locale>/docs/".

- -

Регістр заголовків сторінок та розділів

- -

Заголовки сторінок та заголовки розділів мають починатись з великої літери (використовується лише для першого слова в реченні та власних імен), але не кожне слово:

- - - -

У нас є багато старих сторінок, які було написано до встановлення цього правила. За бажанням ви можете оновити їх, аби вони стали більш читабильними. Поступово ми доберемось до їх редагування.

- -

Вибір заголовків та коротких заголовків.

- -

Унікальний ідентифікатор має бути коротким; коли створюєте новий рівень ієрархії, компонент нового рівня у вигляді "slug" ідентифікатора має складатись із одного-двох слів.

- -

Заголовки сторінок, з іншої сторони, можуть бути такими довгими на скільки це потрібно і мають описувати суть статті.

- -

Створення нових піддерев

- -

Коли вам потрібно додати якісь статті до певної теми чи області обговорення, ви можете зробити це створивши цільову сторінку, після цього додавайте підсторінки для кожної окремої статті. Цільова сторінка має описуватись за допомогою одного або двох абзаців, які розкривають тему чи технологію, потім відобразіть список підсторінок з поясненням до кожної з них. Ви можете автоматизувати вставку сторінок в список, використовуючи макроси, які ми створили.

- -

For example, consider the JavaScript guide, which is structured as follows:

- - - -

Try to avoid putting your article at the top of the hierarchy, which slows the site down and makes search and site navigation less effective.

- -

General article content guidelines

- -

When writing any document, it's important to know how much to say. If you ramble on too long, the article becomes tedious to read and nobody will use it. Getting the amount of coverage right is important for several reasons. Among those reasons: to ensure that the reader finds the information they truly need, and to provide enough quality material for search engines to adequately analyze and rank the article. We'll discuss the former (providing the information the reader may need) here. To learn a little about ensuring that pages are properly classified and ranked by search engines, see the article How to write for SEO on MDN.

- -

The goal is to write pages that include all the information that readers may need without going on too long about it all. We have a few recommendations in this area.

- -

Consider your audience

- -

Keep in mind that these are guidelines. Some of these tips may not apply in every case. Certainly keep your article's audience in mind. An article on advanced network techniques likely doesn't need to go into as much detail about basic networking concepts as the typical article on networking code, for instance.

- -

Provide a useful summary

- -

Make sure the article's summary—that is, the opening paragraph or paragraphs before the first heading—provides enough information for the reader to understand if the article is likely to be covering what they're interested in reading about. In guide or tutorial content, the summary should let the reader know what topics will be covered and what they're already expected to know, if anything. It should mention the technology, technologies, and/or APIs that are being documented or discussed, with links to those, and it should offer hints as to the situations in which the article's contents might be useful.

- -
Example: Too short!
- -

This example of a summary is far too short. It leaves out too much information, such as what it means exactly to "stroke" text, where the text is drawn, and so forth.

- -
-

CanvasRenderingContext2D.strokeText() draws a string.

-
- -
Example: Too long!
- -

Here, we've updated the summary, but now it's far too long. Too much detail is included, and the text gets far too much into other methods and properties. Instead, the summary should focus on the strokeText() method, and should refer to the appropriate guide where the other details are offered.

- -
-

When called, the Canvas 2D API method CanvasRenderingContext2D.strokeText() strokes the characters in the specified string beginning at the coordinates specified, using the current pen color. In the terminology of computer graphics, "stroking" text means to draw the outlines of the glyphs in the string without filling in the contents of each character with color.

- -

The text is drawn using the context's current font as specified in the context's {{domxref("CanvasRenderingContext2D.font", "font")}} property.

- -

The placement of the text relative to the specified coordinates are determined by the context's textAlign, textBaseline, and direction properties. textAlign controls the placement of the string relative to the X coordinate specified; if the value is "center", then the string is drawn starting at x - (stringWidth / 2), placing the specified X-coordinate in the middle of the string. If the value is "left", the string is drawn starting at the specified value of x. And if textAlign is "right", the text is drawn such that it ends at the specified X-coordinate.

- -

(etc etc etc...)

- -

You can, optionally, provide a fourth parameter that lets you specify a maximum width for the string, in pixels. If you provide this parameter, the text is compressed horizontally or scaled (or otherwise adjusted) to fit inside a space that wide when being drawn.

- -

You can call the fillText() method to draw a string's characters as filled with color instead of only drawing the outlines of the characters.

-
- -
Example: Much better!
- -

Here we see a much better overview for the strokeText() method.

- -
-

The {{domxref("CanvasRenderingContext2D")}} method strokeText(), part of the Canvas 2D API, strokes—that is, draws the outlines of—the characters of a specified string, anchored at the position indicated by the given X and Y coordinates. The text is drawn using the context's current {{domxref("CanvasRenderingContext2D.font", "font")}}, and is justified and aligned according to the {{domxref("CanvasRenderingContext2D.textAlign", "textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline")}}, and {{domxref("CanvasRenderingContext2D.direction", "direction")}} properties.

- -

For more details and further examples, see {{SectionOnPage("/uk/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Text")}} in the Learning Area as well as our main article on the subject, Drawing text.

-
- -

Include all relevant examples

- -

More pages should have examples than should not have them. The majority of pages most likely deserve multiple examples, in fact. It's important to ensure that you use examples to clarify what every parameter is used for, and to clarify any edge cases that may exist. You should also use examples to demonstrate solutions for common tasks, and you should use examples to demonstrate solutions to problems that may arise.

- -

Each example should be preceded by text explaining what the example does and anything the reader should know before beginning to read or try out the example.

- -

In addition, each piece of code should include an explanation of how it works. Keep in mind that it may make sense to break up a large piece of code into smaller portions so they can be described individually. The text following each piece of code should explain anything relevant, using an appropriate level of detail. If the code is very simple and doesn't really feature anything directly related to the API being documented, you may only give a quick summary of what it is and why it's there. If the code is intricate, uses the API being documented, or is technically creative, you should provide a more detailed explanation.

- -

When using the live sample system, it's helpful to be aware that all of the {{HTMLElement("pre")}} blocks in the area that contains the sample are concatenated together before running the example, which lets you break any or all of the HTML, CSS, and JavaScript into multiple segments, each optionally with its own descriptions, headings, and so forth. This makes documenting code incredibly powerful and flexible.

- -

Overly-short articles are hard to find

- -

If an article is "thin"—that is, too short—it may not be indexed properly (or at all) by search engines. As a rule of thumb, the article's body text should be at least 250-300 words. Don't artificially inflate a page that simply can't reasonably be made longer than that, but treat this guideline as a target to shoot for as a minimum when possible.

- -

Sections, paragraphs, and newlines

- -

Use heading levels in decreasing order: {{HTMLElement("h2")}} then {{HTMLElement("h3")}} then {{HTMLElement("h4")}}, without skipping levels. H2 is the highest level allowed because H1 is reserved for the page title. If you need more than three or four levels of headers you should consider breaking up the article into several smaller articles with a landing page, linking them together using the {{TemplateLink("Next")}}, {{TemplateLink("Previous")}}, and {{TemplateLink("PreviousNext")}} macros.

- -

The Enter (or Return) key on your keyboard starts a new paragraph. To insert a newline without a space, hold down the Shift key while pressing Enter.

- -

Don't create single subsections — you don't subdivide a topic into one. It's either two subheadings or more or none at all.

- -

Don't have bumping heads, which are headings followed immediately by headings. Aside from looking horrible, it's helpful to readers if every heading has at least a brief intro after it to introduce the subsections beneath.

- -

Lists

- -

Lists should be written in a similar format across all contributions. Correct procedures should include suitable punctuation and sentence structure regardless of the list format. However dependent on the type of list you are writing, you must adjust your format accordingly. Refer to the documentation below to understand the differences of each.

- -

Bulleted Lists

- -

Bulleted lists should be used for grouping purposes to create concise but effective pieces of information. Each new piece of information must start with a '•' to signify a new piece. Bulleted lists must follow standard punctuation usage, pay attention to the use of full stops; they must be included at the end of each sentence just like standard writing practice.

- -

An example of a correctly structured bulleted list:

- -
-

In this example we should include:

- - -
- -

Note how the format remains the same from bullet to bullet. Create a bullet point, state a condition that has relevence to your indented topic and add some pausing punctuation in order to follow up the condition with a concise explanation.

- -

Numbered Lists

- -

Instruction lists must follow suitable numbering and format. It is important to include these attributes as with instructions, being clear is a key priority. Create the list in a similar style to a bulleted list, however numbered or instruction lists can be extensive where necessary, meaning correct punctuation is vital as you will be forming complex sentences.

- -

An example of a correctly structured numbered list:

- -
-

In order for you to structure a correct numbered list you must:

- -

1. Begin with creating an introductory heading to lead into the instructions. This way we can provide the user with context before beginning the instructions.

- -

2. Start creating your instructions, listing your instructions with numbers. This is a standard format of a numbered list that is easily recognizable by the user. Your instructions may be quite extensive, so it is important to write effectively and use correct punctuation where necessary.

- -

3. After you have finished your instructions, close off the numbered list with a brief explanation of the outcome upon completion.

- -

This is an example of writing your closing explanation. We have created a short numbered list which provides instructive steps to produce a numbered list with the correct formatting.

-
- -

Numbered lists are almost exclusive for instructive purposes, so before writing consider your approach based on the context of the information you are trying to relay.

- -

Text formatting and styles

- -

Use the "Formatting Styles" drop-down list to apply predefined styles to selected content.

- -
The "Note" style is used to call out important notes, like this one.
- -
Similarly, the "Warning" style creates warning boxes like this.
- -

Unless specifically instructed to do so, do not use the HTML style attribute to manually style content. If you can't do it using a predefined class, drop into {{IRCLink("mdn")}} and ask for help.

- -

Code sample style and formatting

- -
-

Note: This section deals with the styling/formatting of code as it appears on an MDN article. If you want guidelines on actually writing code examples, see our Code sample guidelines.

-
- -

Tabs and line breaks

- -

Use two spaces per tab in all code examples. Indent the code cleanly, with open-brace ("{") characters on the same line as the statement that opens the block. For example:

- -
if (condition) {
-  /* handle the condition */
-} else {
-  /* handle the "else" case */
-}
-
- -

Long lines shouldn't be allowed to stretch off horizontally to the extent that they require horizontal scrolling to read. Instead, break at natural breaking points. Some examples follow:

- -
if (class.CONDITION || class.OTHER_CONDITION || class.SOME_OTHER_CONDITION
-       || class.YET_ANOTHER_CONDITION ) {
-  /* something */
-}
-
-var toolkitProfileService = Components.classes["@mozilla.org/toolkit/profile-service;1"]
-                           .createInstance(Components.interfaces.nsIToolkitProfileService);
-
- -

Inline code formatting

- -

Use the "Code" button (labeled with two angle brackets "<>") to apply inline code-style formatting to function names, variable names, and method names (this uses the {{HTMLElement("code")}} element). For example, "the frenchText() function".

- -

Method names should be followed by a pair of parentheses: doSomethingUseful(). The parentheses help differentiate methods from other code terms.

- -

Syntax highlighting

- -

Screenshot of the 'Syntax Highlighter' menu.Entire lines (or multiple lines) of code should be formatted using syntax highlighting rather than the {{HTMLElement("code")}} element. Select the appropriate language from the language list button (the one with the two code blocks), as seen in the screenshot to the right. This will insert a preformatted code box with line numbers and syntax highlighting for the chosen language.

- -

The following example shows text with JavaScript formatting:

- -
-
for (var i = 0, j = 9; i <= 9; i++, j--)
-  document.writeln("a[" + i + "][" + j + "]= " + a[i][j]);
-
- -

If no appropriate language is available, use ("No Highlight" in the language menu). This will result in code without syntax highlighting:

- -
x = 42;
- -

Syntax definitions

- -

If you want to insert a syntax definition, you can choose the "Syntax Box" option from the "Styles" drop-down menu in the editor toolbar. This will give the syntax definition a special formatting distinguishing it from normal code.

- -

Blocks not referring to code

- -

There are a few use cases where a <pre> block does not refer to code and doesn't have syntax highlighting nor line numbers. In such cases you should add a <pre> without class. Those cases include things like tree structures:

- -
root/
-
-    folder1/
-        file1
-
-    folder2/
-        file2
-        file3
-
- -

To create preformatted content without syntax highlighting and line numbers click the "pre" button in the toolbar. Then start to type the text.

- -

Styling HTML element references

- -

There are specific rules to follow when writing about HTML elements. These rules produce consistent descriptions of elements and their components. They also ensure correct linking to detailed documentation.

- -
-
Element names
-
Use the {{TemplateLink("HTMLElement")}} macro, which creates a link to the page for that element. For example, writing \{{HTMLElement("title")}} produces "{{HTMLElement("title")}}". If you don't want to create a link, enclose the name in angle brackets and use "Code (inline)" style (e.g., <title>).
-
Attribute names
-
Use bold face.
-
Attribute definitions
-
Use the {{TemplateLink("htmlattrdef")}} macro (e.g., \{{htmlattrdef("type")}}) for the definition term, so that it can be linked to from other pages, then use the {{TemplateLink("htmlattrxref")}} macro (e.g., \{{htmlattrxref("attr","element")}}) to reference attribute definitions.
-
Attribute values
-
Use "Code (inline)" style, and do not use quotation marks around strings, unless needed by the syntax of a code sample. For example: When the type attribute of an <input> element is set to email or tel ...
-
Labeling attributes
-
Use labels like {{HTMLVersionInline(5)}} thoughtfully. For example, use them next to the bold attribute name but not for every occurrence in your body text.
-
- -

Latin abbreviations

- -

In notes and parentheses

- - - -

In running text

- - - -

Meanings and English equivalents of Latin abbreviations

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
AbbrevLatinEnglish
cf.confercompare
e.g.exempli gratiafor example
et al.et aliiand others
etc.et ceteraand so forth, and so on
i.e.id estthat is, in other words
N.B.nota benenote well
P.S.post scriptumpostscript
- -
-

Always consider whether it's truly beneficial to use a Latin abbreviation. Some of these are used so rarely that many readers won't understand the meaning, and others are often confused with one another. And be sure that you use them correctly, if you choose to do so. For example, be careful not to confuse "e.g." with "i.e.", which is a common error.

-
- -

Acronyms and abbreviations

- -

Capitalization and periods

- -

Use full capitals and delete periods in all acronyms and abbreviations, including organizations such as "US" and "UN".

- - - -

Expansion

- -

On the first mention of a term on a page, expand acronyms likely to be unfamiliar to users. When in doubt, expand it, or, better, link it to the article or glossary entry describing the technology.

- - - -

Plurals of acronyms and abbreviations

- -

For plurals of acronyms or abbreviations, add s. Don't use an apostrophe. Ever. Please.

- - - -

"Versus", "vs.", and "v."

- -

The contraction "vs." is preferred.

- - - -

Capitalization

- -

Use standard English capitalization rules in body text, and capitalize "World Wide Web." It is acceptable to use lower case for "web" (used alone or as a modifier) and "internet;" this guideline is a change from a previous version of this guide, so you may find many instances of "Web" and "Internet" on MDN. Feel free to change these as you are making other changes, but editing an article just to change capitalization is not necessary.

- -

Keyboard keys should use sentence-style capitalization, not all-caps capitalization. For example, "Enter" not "ENTER."

- -

Contractions

- -

Our writing style tends to be casual, so you should feel free to use contractions (e.g., "don't", "can't", "shouldn't") if you prefer.

- -

Pluralization

- -

Use English-style plurals, not the Latin- or Greek-influenced forms.

- - - -

Hyphenation

- -

Hyphenate compounds when the last letter of the prefix is a vowel and is the same as the first letter of the root.

- - - -

Gender-neutral language

- -

It is a good idea to use gender-neutral language in any writing where gender is irrelevant to the subject matter, to make the text as inclusive as possible. So for example, if you are talking about the actions of a specific man, usage of he/his would be fine, but if the subject is a person of either gender, he/his isn't appropriate.
-
- Let's take the following example:

- -
-

A confirmation dialog appears, asking the user if he allows the Web page to make use of his Web cam.

-
- -
-

A confirmation dialog appears, asking the user if she allows the Web page to make use of her Web cam.

-
- -

Both versions are gender-specific. To fix this, use gender-neutral pronouns:

- -
-

A confirmation dialog appears, asking the user if they allow the Web page to make use of their Web cam.

-
- -
-

MDN allows the use of this very common syntax (which is controversial among usage authorities), to make up for the lack of a neutral gender in English. The use of the third-person plural as a gender neutral pronoun (that is, using "they," "them", "their," and "theirs") is an accepted practice, commonly known as "singular 'they.'"

-
- -

You can use both genders:

- -
-

A confirmation dialog appears, asking the user if he or she allows the web page to make use of his/her web cam.

-
- -

making the users plural:

- -
-

A confirmation dialog appears, asking the users if they allow the web page to make use of their web cams.

-
- -

The best solution, of course, is to rewrite and eliminate the pronouns:

- -
-

A confirmation dialog appears, requesting the user's permission for web cam access.

-
- -
-

A confirmation dialog box appears, which asks the user for permission to use the web cam.

-
- -

The last way of dealing with the problem is arguably better, as it is not only grammatically more correct but removes some of the complexity associated with dealing with genders across different languages that may have wildly varying gender rules. This solution can make translation easier for both readers and localizers.

- -

Numbers and numerals

- -

Dates

- -

For dates (not including dates in code samples) use the format "January 1, 1990".

- - - -

Alternately, you can use the YYYY/MM/DD format.

- - - -

Decades

- -

For decades, use the format "1990s". Don't use an apostrophe.

- - - -

Plurals of numerals

- -

For plurals of numerals add "s". Don't use an apostrophe.

- - - -

Commas

- -

In running text, use commas only in five-digit and larger numbers.

- - - -

Punctuation

- -

Serial comma

- -

Use the serial comma. The serial (also known as "Oxford") comma is the comma that appears before the conjunction in a series of three or more items.

- - - -
-

This is in contrast to the One Mozilla style guide, which specifies that the serial comma is not to be used. MDN is an exception to this rule.

-
- -

Spelling

- -

For words with variant spellings, always use their American English spelling. In general, use the first entry at Dictionary.com, unless that entry is listed as a variant spelling or as being primarily used in a non-American form of English; for example, if you look up "honour", you find the phrase "Chiefly British" followed by a link to the American standard form, "honor". Do not use variant spellings.

- - - -

Terminology

- -
-
- -

HTML elements

- -

Use "elements" to refer to HTML and XML elements, rather than "tags". In addition, they should almost always be wrapped in "<>", and should be in the {{HTMLElement("code")}} style. When you reference a given element for the first time in a section, you should use the {{TemplateLink("HTMLElement")}} macro to create a link to the documentation for the element (unless you're writing within that element's reference document page).

- - - -

Parameters vs. arguments

- -

The preferred term on MDN is parameters. Please avoid the term "arguments" for consistency if at all possible.

- -

User interface actions

- -

In task sequences, describe user interface actions using the imperative mood. Identify the user interface element by its label and type.

- - - -

Voice

- -

While the active voice is preferred, the passive voice is also acceptable, given the informal feel of our content. Try to be consistent, though.

- -

Wiki markup and usage

- - - -

Links are a large part of what makes a wiki a powerful learning and teaching tool. Below you'll find some basic information, but you can find a complete guide to creating and editing links on MDN in our editor guide.

- -

We encourage you to create appropriate links among articles; they help improve navigation and discoverability of content. You can easily create links not only among pages on MDN (internal links) but also to pages outside MDN (external links).

- -

There are two ways to create links: you explicitly create a link using the Link button in the editor's toolbar—or by pressing Ctrl+K (Cmd-K on the Mac)—or you can use MDN's powerful macro system to generate links automatically or based on an input value.

- -

When deciding what text to use as a link, there are a few guidelines you can follow:

- - - -

URL schemes

- -

For security reasons, you should only create links that use the following schemes:

- - - -

Others may or may not work, but are not supported and will probably be removed by editorial staff.

- -
-

In particular, be sure not to use the about: or chrome:// schemes, as they will not work. Similarly, the javascript: scheme is blocked by most modern browsers, as is jar:.

-
- -

Page tags

- -

Tags provide meta information about a page and/or indicate that a page has specific improvements needed to its content. Every page in the wiki should have tags. You can find details on tagging in our How to properly tag pages guide.

- -

The tagging interface lives at the bottom of a page while you're in edit mode, and looks something like this:

- -

Screenshot of the UX for adding and removing tags on MDN

- -

To add a tag, click in the edit box at the end of the tag list and type the tag name you wish to add. Tags will autocomplete as you type. Press enter (or return) to submit the new tag. Each article may have as many tags as needed. For example, an article about using JavaScript in AJAX programming might have both "JavaScript" and "AJAX" as tags.

- -

To remove a tag, just click the little "X" icon in the tag.

- -

Tagging pages that need work

- -

In addition to using tags to track information about the documentation's quality and content, we also use them to mark articles as needing specific types of work.

- -

Tagging obsolete pages

- -

Use the following tags for pages that are not current:

- - - -

SEO summary

- -

The SEO summary provides a short description of a page. It will be reported as a summary of the article to robots crawling the site, and will then appear in search results for the page. It is also used by macros that automate the construction of landing pages inside MDN itself.

- -

By default, the first paragraph of the page is used as the SEO summary. However, you can override this behavior by marking a section with the "SEO summary" style in the WYSIWYG editor.

- -

Landing pages

- -

Landing pages are pages at the root of a topic area of the site, such as the main CSS or HTML pages. They have a standard format that consists of three areas:

- -
    -
  1. A brief (typically one paragraph) overview of what the technology is and how it's used. See {{anch("Writing a landing page overview")}} for tips.
    2. -
  2. A two-column list of links with appropriate headings. See {{anch("Creating a page link list")}} for guidelines.
    3. -
  3. An optional "Browser compatibility" section at the bottom of the page.
    4. -
- -

Creating a page link list

- -

The link list section of an MDN landing page consists of two columns. These are created using the following HTML:

- -
<div class="row topicpage-table">
-  <div class="section">
-    ... left column contents ...
-  </div>
-  <div class="section">
-    ... right column contents ...
-  </div>
-</div>
- -

The left column should be a list of articles, with an <h2> header at the top of the left column explaining that it's a list of articles about the topic (e.g., "Documentation and tutorials about foo"); this header should use the CSS class "Documentation". Below that is a <dl> list of articles with each article's link in a <dt> block and a brief one-or-two sentence summary of the article in the corresponding <dd> block.

- -

The right column should contain one or more of the following sections, in order:

- -
-
Getting help from the community
-
This should provide information on Matrix chat rooms and mailing lists available on the topic. The heading should use the class "Community".
-
Tools
-
A list of tools the user can look at to help with the use of the technology described in this section of MDN. The heading should use the class "Tools".
-
Related topics
-
A list of links to landing pages for other, related, technologies of relevance. The heading should use the class "Related_Topics".
-
- -

<<<finish this once we finalize the landing page standards>>>

- -

Using, inserting images

- -

It's sometimes helpful to provide an image in an article you create or modify, especially if the article is very technical. To include an image:

- -
    -
  1. Attach the desired image file to the article (at the bottom of every article in edit mode)
    2. -
  2. Create an image in the WYSIWYG editor
    3. -
  3. In the WYSIWYG editor, in the drop-down list of attachments, select the newly created attachment that is your image
    4. -
  4. Press OK.
    5. -
- -

Other references

- -

Preferred style guides

- -

If you have questions about usage and style not covered here, we recommend referring to the Economist style guide or, failing that, the Chicago Manual of Style.

- -

Preferred dictionary

- -

For questions of spelling, please refer to Dictionary.com. The spelling checker for this site uses American English. Please do not use variant spellings (e.g., use color rather than colour).

- -

We will be expanding the guide over time, so if you have specific questions that aren't covered in this document, please send them to the MDC mailing list or project lead so we know what should be added.

- -

MDN-specific

- - - -

Лексика, граматика й правопис

- -

If you're interested in improving your writing and editing skills, you may find the following resources to be helpful.

- - diff --git a/files/uk/mdn/kuma/index.html b/files/uk/mdn/kuma/index.html deleted file mode 100644 index af18465d4f..0000000000 --- a/files/uk/mdn/kuma/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: 'Kuma: wiki-платформа MDN' -slug: MDN/Kuma -tags: - - Kuma - - MDN Meta -translation_of: MDN/Kuma ---- -
{{MDNSidebar}}
- -
{{IncludeSubnav("/uk/docs/MDN")}}
- -

Платформа Kuma — це код, що ґрунтується на Django та вможливлює роботу MDN Web Docs.

- -

{{SubpagesWithSummaries}}

- -

Ознайомлення з Kuma

- -

Щоб ознайомитися з Kuma:

- - diff --git a/files/uk/mdn/structures/macros/commonly-used_macros/index.html b/files/uk/mdn/structures/macros/commonly-used_macros/index.html new file mode 100644 index 0000000000..da18bfcaa1 --- /dev/null +++ b/files/uk/mdn/structures/macros/commonly-used_macros/index.html @@ -0,0 +1,233 @@ +--- +title: Загальновживані шаблони +slug: MDN/Structures/Шаблони/Загальновживані_шаблони +tags: + - Structures + - Довідка + - Макрос +translation_of: MDN/Structures/Macros/Commonly-used_macros +--- +
{{MDNSidebar}}
+ +
+ +

На цій сторінці подано багато макросів загального призначення, які створені для використання на платформі MDN. Інформацію про використання цих макросів дивіться в розділі Використання макросів, а також Використання посилань макросів. Подивіться Інші макроси для інформації про макроси, які рідко використовуються, використовуються тільки в особливих контекстах або важаються застарілими. Також є повний список всіх макросів для MDN. 

+ +

Див. також CSS посібник стилів для стилів, які можуть бути доступні для вашого використання.

+ +

Посилання

+ +

Створення єдиного гіперпосилання

+ +

Зазвичай немає необхідності використовувати макроси для створення посилань довільної форми. Для створення посилань використовуйте кнопку Link (Вставити / Редагувати посилання) в інтерфейсі редактора.

+ + + +

Посилання на сторінки в довіднику

+ +

Існують різноманітні макроси для з'єднання зі сторінками в певних довідкових областях MDN.

+ + + +

Посилання на помилки і IRC

+ + + +

Навігаційні інструменти для багатосторінкових довідників

+ +

{{TemplateLink("Previous")}}, {{TemplateLink("Next")}}, або {{TemplateLink("PreviousNext")}} забезпечує управління навігацією для елементів, що входять в послідовність. Для односпрямованих шаблонів єдиним необхідним параметром є розташування wiki попередньої і наступної статті в послідовності. Для {{TemplateLink("PreviousNext")}}, два параметра, які потрібні, - це розташування відповідних статей в wiki-каталозі. Перший параметр відноситься до попередньої статті, а другий - до наступної.

+ +

Зразки коду

+ +

Зразки наживо

+ + + +

Файли з прикріпленими прикладами

+ + + +

Створення бічної панелі

+ +

Існують шаблони практично для кожної великої бібліотеки сторінок. Зазвичай вони посилаються на головну сторінку довідника / керівництва / підручника (це часто необхідно, тому що наші хлібні крихти іноді не можуть цього зробити) і поміщають статтю в відповідну категорію.

+ + + +

Загальне форматування

+ +

Вбудовані індикатори для документації API

+ +

{{TemplateLink("optional_inline")}} та {{TemplateLink("ReadOnlyInline")}} використовуються в документації API, зазвичай при описі списку властивостей об'єкта або параметрів функції.

+ +

Використання: \{{optional_inline()}} або \{{ReadOnlyInline()}}. Наприклад: 

+ +
+
isCustomObject {{ReadOnlyInline()}}
+
Вказує, якщо true, що об'єкт є призначеним для користувача.
+
parameterX {{ optional_inline() }}
+
Бла-бла-бла...
+
+ +

Позначки про статус та сумісність

+ +

Вбудовані індикатори без додаткових параметрів

+ +

Нетипові

+ +

{{TemplateLink("non-standard_inline")}} вставляє в рядок мітку, яка вказує на те, що API ні стандартизований і не перебуває на стандартній платформі.

+ +
Синтаксис
+ +

\{{non-standard_inline}}

+ +
Приклади
+ + + +

Експериментальний

+ +

{{TemplateLink("experimental_inline")}} вставляє позначку в рядку, що вказує на те, що API застосовується недостатньо широко і може змінитися в майбутньому.

+ +
Синтаксис
+ +

\{{Experimental_Inline}}

+ +
Приклади
+ + + +

Вбудовані індикатори, що підтримують вказівку технології

+ +

У таких макросах параметром (при зазначенні) повинен бути будь-який з рядків "html", "js", "css" або "gecko" з подальшим номером версії.

+ +

Вилучені елементи

+ +

{{TemplateLink("deprecated_inline")}} поміщає в рядок маркування вилучений, щоб запобігти використанню офіційно застарілого API. Зауваження: "Deprecated" означає, що елемент більше не повинен використовуватися, але все одно повинен функціонувати. Якщо ви маєте на увазі, що він більше не працює, використовуйте термін "obsolete."

+ +

Не використовуйте параметр в будь-якій незалежній від браузера області (HTML, API, JS, CSS, ...).

+ +
Синтаксис
+ +

\{{deprecated_inline}} or \{{deprecated_inline("gecko5")}}

+ +
Приклади
+ + + +

Застарілі елементи

+ +

{{TemplateLink("obsolete_inline")}} поміщає в рядок маркування застарілий, щоб запобігти використанню, наприклад, функції, методу чи властивості, які офіційно застаріли.

+ +

Не використовуйте параметр в будь-якій незалежній від браузера області (HTML, API, JS, CSS, ...).

+ +
Синтаксис
+ +

\{{obsolete_inline}} or \{{obsolete_inline("js1.8.5")}}

+ +
Приклади
+ + + +

Шаблонні значки

+ +

Ці макроси в переважно застосовуються на WebAPI сторінках. Перегляньте {{anch("Creating new badges")}} для інформації про створення нового значка.

+ +

Індикатори заголовків сторінок або розділів

+ +

Ці шаблони мають ту ж семантику, що і їх вбудовані аналоги, описані вище. Шаблони повинні бути розміщені безпосередньо під заголовком головної сторінки або під навігатором по хлібним крихтам, якщо такий доступен, на сторінці лінків. Вони також можуть бути використані для розмітки розділів на сторінці.

+ + + +

Зазначення того, що функція доступна у web workers

+ +

The {{TemplateLink("AvailableInWorkers")}} макрос вставляє відповідне поле для приміток, що вказує на те, що функція є доступною у Web worker контекст.

+ +

Інформація про версії макросів

+ +

Ці макроси використовуються для зазначення того, що вміст стосується тільки певних версій продукту.

+ + + +

Ці макроси не відображаються, якщо зазначена версія нижче поточної gecko версії.

+ + + +
    +
+ +
    +
diff --git a/files/uk/mdn/structures/macros/index.html b/files/uk/mdn/structures/macros/index.html new file mode 100644 index 0000000000..41c1461950 --- /dev/null +++ b/files/uk/mdn/structures/macros/index.html @@ -0,0 +1,46 @@ +--- +title: Шаблони +slug: MDN/Structures/Шаблони +tags: + - Kuma + - KumaScript + - MDN Meta + - Structures + - Путівник +translation_of: MDN/Structures/Macros +--- +
{{MDNSidebar}}

Платформа Kuma, що на ній працює MDN, має потужний механізм шаблонів (макросів), KumaScript, який уможливлює автоматизацію чималої кількості речей. Ця сторінка надає інформацію про вжиток шаблонів MDN всередині статей.

+ +

Путівник з KumaScript пропонує поглиблені знання з ужитку шаблонів на MDN, тож ця стаття є радше оглядовою.

+ +

Як працюють шаблони

+ +

Шаблони MDN написані мовою JavaScript та виконуються у серверному середовищі Node.js. Задля уможливлення взаємодії шаблонів із вікі-платформою та її вмістом ми створили низку бібліотек, що надають відповідні можливості та служби. Як хочете дізнатись більше, зверніться до Путівника з KumaScript.

+ +

Вжиток шаблонів

+ +

Власне для того, аби використати шаблон, ви просто оточуєте його ім'я разом із параметрами в круглих дужках (якщо є) парою подвійних фігурних дужок:

+ +
\{{macroname(перелік-параметрів)}}
+ +

Кілька зауважень щодо викликів шаблонів:

+ + + +

Для шаблонів діє окремий кеш: для кожної множини вхідних даних (вказаних параметрів та значень з середовища, як-от адреса сторінки, де ужито шаблон) результат одноразово обчислюється та зберігається для подальшого використання. Отже шаблон насправді викликається лише тоді, коли змінюються вхідні дані.

+ +
+

Заувага: Ви можете здійснити примусове обчислення всіх шаблонів на сторінці, перезавантаживши сторінку у веб-переглядачі зі скиданням кешів (зазвичай Ctrl + F5 або Shift + F5).

+
+ +

Шаблони можуть бути як простими (наприклад, вставка великого шматка тексту чи залучення вмісту з іншої частини MDN), так і вельми складними (як-от пошук по різних частинах сайту й побудова цілого покажчика за знайденим вмістом із належним оформленням та додаванням посилань).

+ +

Про найпоширеніші шаблони ви можете довідатись на сторінці Загальновживані шаблони. Також є і повний їх перелік. Багато шаблонів має вбудовану документацію (коментарі у коді на початку файлу).

+ +

{{EditorGuideQuicklinks}}

diff --git "a/files/uk/mdn/structures/\321\210\320\260\320\261\320\273\320\276\320\275\320\270/index.html" "b/files/uk/mdn/structures/\321\210\320\260\320\261\320\273\320\276\320\275\320\270/index.html" deleted file mode 100644 index 41c1461950..0000000000 --- "a/files/uk/mdn/structures/\321\210\320\260\320\261\320\273\320\276\320\275\320\270/index.html" +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Шаблони -slug: MDN/Structures/Шаблони -tags: - - Kuma - - KumaScript - - MDN Meta - - Structures - - Путівник -translation_of: MDN/Structures/Macros ---- -
{{MDNSidebar}}

Платформа Kuma, що на ній працює MDN, має потужний механізм шаблонів (макросів), KumaScript, який уможливлює автоматизацію чималої кількості речей. Ця сторінка надає інформацію про вжиток шаблонів MDN всередині статей.

- -

Путівник з KumaScript пропонує поглиблені знання з ужитку шаблонів на MDN, тож ця стаття є радше оглядовою.

- -

Як працюють шаблони

- -

Шаблони MDN написані мовою JavaScript та виконуються у серверному середовищі Node.js. Задля уможливлення взаємодії шаблонів із вікі-платформою та її вмістом ми створили низку бібліотек, що надають відповідні можливості та служби. Як хочете дізнатись більше, зверніться до Путівника з KumaScript.

- -

Вжиток шаблонів

- -

Власне для того, аби використати шаблон, ви просто оточуєте його ім'я разом із параметрами в круглих дужках (якщо є) парою подвійних фігурних дужок:

- -
\{{macroname(перелік-параметрів)}}
- -

Кілька зауважень щодо викликів шаблонів:

- - - -

Для шаблонів діє окремий кеш: для кожної множини вхідних даних (вказаних параметрів та значень з середовища, як-от адреса сторінки, де ужито шаблон) результат одноразово обчислюється та зберігається для подальшого використання. Отже шаблон насправді викликається лише тоді, коли змінюються вхідні дані.

- -
-

Заувага: Ви можете здійснити примусове обчислення всіх шаблонів на сторінці, перезавантаживши сторінку у веб-переглядачі зі скиданням кешів (зазвичай Ctrl + F5 або Shift + F5).

-
- -

Шаблони можуть бути як простими (наприклад, вставка великого шматка тексту чи залучення вмісту з іншої частини MDN), так і вельми складними (як-от пошук по різних частинах сайту й побудова цілого покажчика за знайденим вмістом із належним оформленням та додаванням посилань).

- -

Про найпоширеніші шаблони ви можете довідатись на сторінці Загальновживані шаблони. Також є і повний їх перелік. Багато шаблонів має вбудовану документацію (коментарі у коді на початку файлу).

- -

{{EditorGuideQuicklinks}}

diff --git "a/files/uk/mdn/structures/\321\210\320\260\320\261\320\273\320\276\320\275\320\270/\320\267\320\260\320\263\320\260\320\273\321\214\320\275\320\276\320\262\320\266\320\270\320\262\320\260\320\275\321\226_\321\210\320\260\320\261\320\273\320\276\320\275\320\270/index.html" "b/files/uk/mdn/structures/\321\210\320\260\320\261\320\273\320\276\320\275\320\270/\320\267\320\260\320\263\320\260\320\273\321\214\320\275\320\276\320\262\320\266\320\270\320\262\320\260\320\275\321\226_\321\210\320\260\320\261\320\273\320\276\320\275\320\270/index.html" deleted file mode 100644 index da18bfcaa1..0000000000 --- "a/files/uk/mdn/structures/\321\210\320\260\320\261\320\273\320\276\320\275\320\270/\320\267\320\260\320\263\320\260\320\273\321\214\320\275\320\276\320\262\320\266\320\270\320\262\320\260\320\275\321\226_\321\210\320\260\320\261\320\273\320\276\320\275\320\270/index.html" +++ /dev/null @@ -1,233 +0,0 @@ ---- -title: Загальновживані шаблони -slug: MDN/Structures/Шаблони/Загальновживані_шаблони -tags: - - Structures - - Довідка - - Макрос -translation_of: MDN/Structures/Macros/Commonly-used_macros ---- -
{{MDNSidebar}}
- -
- -

На цій сторінці подано багато макросів загального призначення, які створені для використання на платформі MDN. Інформацію про використання цих макросів дивіться в розділі Використання макросів, а також Використання посилань макросів. Подивіться Інші макроси для інформації про макроси, які рідко використовуються, використовуються тільки в особливих контекстах або важаються застарілими. Також є повний список всіх макросів для MDN. 

- -

Див. також CSS посібник стилів для стилів, які можуть бути доступні для вашого використання.

- -

Посилання

- -

Створення єдиного гіперпосилання

- -

Зазвичай немає необхідності використовувати макроси для створення посилань довільної форми. Для створення посилань використовуйте кнопку Link (Вставити / Редагувати посилання) в інтерфейсі редактора.

- - - -

Посилання на сторінки в довіднику

- -

Існують різноманітні макроси для з'єднання зі сторінками в певних довідкових областях MDN.

- - - -

Посилання на помилки і IRC

- - - -

Навігаційні інструменти для багатосторінкових довідників

- -

{{TemplateLink("Previous")}}, {{TemplateLink("Next")}}, або {{TemplateLink("PreviousNext")}} забезпечує управління навігацією для елементів, що входять в послідовність. Для односпрямованих шаблонів єдиним необхідним параметром є розташування wiki попередньої і наступної статті в послідовності. Для {{TemplateLink("PreviousNext")}}, два параметра, які потрібні, - це розташування відповідних статей в wiki-каталозі. Перший параметр відноситься до попередньої статті, а другий - до наступної.

- -

Зразки коду

- -

Зразки наживо

- - - -

Файли з прикріпленими прикладами

- - - -

Створення бічної панелі

- -

Існують шаблони практично для кожної великої бібліотеки сторінок. Зазвичай вони посилаються на головну сторінку довідника / керівництва / підручника (це часто необхідно, тому що наші хлібні крихти іноді не можуть цього зробити) і поміщають статтю в відповідну категорію.

- - - -

Загальне форматування

- -

Вбудовані індикатори для документації API

- -

{{TemplateLink("optional_inline")}} та {{TemplateLink("ReadOnlyInline")}} використовуються в документації API, зазвичай при описі списку властивостей об'єкта або параметрів функції.

- -

Використання: \{{optional_inline()}} або \{{ReadOnlyInline()}}. Наприклад: 

- -
-
isCustomObject {{ReadOnlyInline()}}
-
Вказує, якщо true, що об'єкт є призначеним для користувача.
-
parameterX {{ optional_inline() }}
-
Бла-бла-бла...
-
- -

Позначки про статус та сумісність

- -

Вбудовані індикатори без додаткових параметрів

- -

Нетипові

- -

{{TemplateLink("non-standard_inline")}} вставляє в рядок мітку, яка вказує на те, що API ні стандартизований і не перебуває на стандартній платформі.

- -
Синтаксис
- -

\{{non-standard_inline}}

- -
Приклади
- - - -

Експериментальний

- -

{{TemplateLink("experimental_inline")}} вставляє позначку в рядку, що вказує на те, що API застосовується недостатньо широко і може змінитися в майбутньому.

- -
Синтаксис
- -

\{{Experimental_Inline}}

- -
Приклади
- - - -

Вбудовані індикатори, що підтримують вказівку технології

- -

У таких макросах параметром (при зазначенні) повинен бути будь-який з рядків "html", "js", "css" або "gecko" з подальшим номером версії.

- -

Вилучені елементи

- -

{{TemplateLink("deprecated_inline")}} поміщає в рядок маркування вилучений, щоб запобігти використанню офіційно застарілого API. Зауваження: "Deprecated" означає, що елемент більше не повинен використовуватися, але все одно повинен функціонувати. Якщо ви маєте на увазі, що він більше не працює, використовуйте термін "obsolete."

- -

Не використовуйте параметр в будь-якій незалежній від браузера області (HTML, API, JS, CSS, ...).

- -
Синтаксис
- -

\{{deprecated_inline}} or \{{deprecated_inline("gecko5")}}

- -
Приклади
- - - -

Застарілі елементи

- -

{{TemplateLink("obsolete_inline")}} поміщає в рядок маркування застарілий, щоб запобігти використанню, наприклад, функції, методу чи властивості, які офіційно застаріли.

- -

Не використовуйте параметр в будь-якій незалежній від браузера області (HTML, API, JS, CSS, ...).

- -
Синтаксис
- -

\{{obsolete_inline}} or \{{obsolete_inline("js1.8.5")}}

- -
Приклади
- - - -

Шаблонні значки

- -

Ці макроси в переважно застосовуються на WebAPI сторінках. Перегляньте {{anch("Creating new badges")}} для інформації про створення нового значка.

- -

Індикатори заголовків сторінок або розділів

- -

Ці шаблони мають ту ж семантику, що і їх вбудовані аналоги, описані вище. Шаблони повинні бути розміщені безпосередньо під заголовком головної сторінки або під навігатором по хлібним крихтам, якщо такий доступен, на сторінці лінків. Вони також можуть бути використані для розмітки розділів на сторінці.

- - - -

Зазначення того, що функція доступна у web workers

- -

The {{TemplateLink("AvailableInWorkers")}} макрос вставляє відповідне поле для приміток, що вказує на те, що функція є доступною у Web worker контекст.

- -

Інформація про версії макросів

- -

Ці макроси використовуються для зазначення того, що вміст стосується тільки певних версій продукту.

- - - -

Ці макроси не відображаються, якщо зазначена версія нижче поточної gecko версії.

- - - -
    -
- -
    -
diff --git a/files/uk/mdn/tools/kumascript/troubleshooting/index.html b/files/uk/mdn/tools/kumascript/troubleshooting/index.html new file mode 100644 index 0000000000..b7cadc39f4 --- /dev/null +++ b/files/uk/mdn/tools/kumascript/troubleshooting/index.html @@ -0,0 +1,61 @@ +--- +title: Усунення помилок KumaScript +slug: MDN/Tools/KumaScript/Усунення_помилок_KumaScript +tags: + - KumaScript + - MDN Meta + - Tools + - Помилки + - Путівник +translation_of: MDN/Tools/KumaScript/Troubleshooting +--- +
{{MDNSidebar}}
+

Помилки KumaScript, ці моторошні червоні прямокутники, що часом муляють око на сторінках, можуть відлякувати деяких читачів. Але, на щастя, кожен, хто має облікового записа MDN, може відредагувати статтю й виправити такі помилки. Якщо сторінка містить помилки, вона одразу потрапляє у перелік документів з помилками. Редактори сайту постійно переглядають той перелік й виправляють помилки. Ця сторінка наводить чотири різновиди помилок KumaScript та деякі можливі кроки для їх усунення.

+
+ +

Помилка розбору документа (DocumentParsingError)

+ +

Помилка DocumentParsingError трапляється тоді, коли в KumaScript виникає проблема з розбором самого документа. Зазвичай це синтаксична помилка в шаблоні.

+ +

Слід перевірити:

+ +
+
Ужиток фігурних дужок там, де не здійснюється виклик шаблону;
+
Якщо вам в документі потрібна фігурна дужка, але це не виклик шаблону, можна її заекранувати за допомогою \ ось так: \\{.
+
Ужиток особливих символів у параметрі шаблону;
+
Якщо вам потрібен символ " або \ всередині параметра шаблону, його необхідно заекранувати за допомогою \ ось так: \".
+
Відсутність ком між параметрами шаблону;
+
Параметри шаблону мають бути відокремлені одне від одного комою ось так: \{\{anch("top", "Нагору")}}.
+
Використання теґів HTML всередині шаблону;
+
Застосування стилів до шаблону може зламати його. Наприклад, кінцевий теґ </code> може виявитися всередині породженого шаблоном вмісту. Перевірте код сторінки, щоб це з'ясувати, та видаліть непотрібне оформлення.
+
+ + + +

Помилка завантаження шаблону (TemplateLoadingError)

+ +

Помилка TemplateLoadingError трапляється тоді, коли в KumaScript виникає проблема з пошуком відповідного шаблону за іменем.

+ +

Слід перевірити:

+ +
+
Помилково написане ім'я або ужиток перейменованого шаблону.
+
Повний перелік наявних шаблонів ви можете знайти у репозиторії на GitHub.
+
+ +
+

Порада: Ви можете зробити пошук шаблонів швидшим й зручнішим, скориставшись механізмом search keyword у Firefox (або відповідним у іншому переглядачі). Дивіться покроковий путівник в розділі {{SectionOnPage("/uk/docs/MDN/Contribute/Tools/KumaScript", "Використання пошуку за ключовими словами задля відкриття сторінок шаблонів")}}.

+
+ +

Помилка TemplateExecutionError трапляється тоді, коли KumaScript натрапляє на помилку під час виконання самого шаблону. Такі помилки можуть виправити лише адміністратори, тож вам слід лише надіслати відповідний звіт.

+ +

Перед тим, як надсилати звіт про помилки, переконайтеся, що їх досі не виправлено. Для цього ви можете змусити KumaScript надати вам останню версію сторінки, перезавантаживши її зі скиданням кешів (Shift + Ctrl + R у Linux/Windows, Shift + Cmd + R на Mac).

+ +

Якщо проблема лишається, повідомте про ваду, додавши URL-посилання на сторінку й текст помилки.

+ +

Невідома помилка (Error & Unknown)

+ +

Так позначаються помилки, які не належать до жодного з наведених різновидів.

+ +

Переконайтеся, що виправлень досі немає, а тоді повідомте про вади так само, як у випадку з TemplateExecutionError.

diff --git "a/files/uk/mdn/tools/kumascript/\321\203\321\201\321\203\320\275\320\265\320\275\320\275\321\217_\320\277\320\276\320\274\320\270\320\273\320\276\320\272_kumascript/index.html" "b/files/uk/mdn/tools/kumascript/\321\203\321\201\321\203\320\275\320\265\320\275\320\275\321\217_\320\277\320\276\320\274\320\270\320\273\320\276\320\272_kumascript/index.html" deleted file mode 100644 index b7cadc39f4..0000000000 --- "a/files/uk/mdn/tools/kumascript/\321\203\321\201\321\203\320\275\320\265\320\275\320\275\321\217_\320\277\320\276\320\274\320\270\320\273\320\276\320\272_kumascript/index.html" +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: Усунення помилок KumaScript -slug: MDN/Tools/KumaScript/Усунення_помилок_KumaScript -tags: - - KumaScript - - MDN Meta - - Tools - - Помилки - - Путівник -translation_of: MDN/Tools/KumaScript/Troubleshooting ---- -
{{MDNSidebar}}
-

Помилки KumaScript, ці моторошні червоні прямокутники, що часом муляють око на сторінках, можуть відлякувати деяких читачів. Але, на щастя, кожен, хто має облікового записа MDN, може відредагувати статтю й виправити такі помилки. Якщо сторінка містить помилки, вона одразу потрапляє у перелік документів з помилками. Редактори сайту постійно переглядають той перелік й виправляють помилки. Ця сторінка наводить чотири різновиди помилок KumaScript та деякі можливі кроки для їх усунення.

-
- -

Помилка розбору документа (DocumentParsingError)

- -

Помилка DocumentParsingError трапляється тоді, коли в KumaScript виникає проблема з розбором самого документа. Зазвичай це синтаксична помилка в шаблоні.

- -

Слід перевірити:

- -
-
Ужиток фігурних дужок там, де не здійснюється виклик шаблону;
-
Якщо вам в документі потрібна фігурна дужка, але це не виклик шаблону, можна її заекранувати за допомогою \ ось так: \\{.
-
Ужиток особливих символів у параметрі шаблону;
-
Якщо вам потрібен символ " або \ всередині параметра шаблону, його необхідно заекранувати за допомогою \ ось так: \".
-
Відсутність ком між параметрами шаблону;
-
Параметри шаблону мають бути відокремлені одне від одного комою ось так: \{\{anch("top", "Нагору")}}.
-
Використання теґів HTML всередині шаблону;
-
Застосування стилів до шаблону може зламати його. Наприклад, кінцевий теґ </code> може виявитися всередині породженого шаблоном вмісту. Перевірте код сторінки, щоб це з'ясувати, та видаліть непотрібне оформлення.
-
- - - -

Помилка завантаження шаблону (TemplateLoadingError)

- -

Помилка TemplateLoadingError трапляється тоді, коли в KumaScript виникає проблема з пошуком відповідного шаблону за іменем.

- -

Слід перевірити:

- -
-
Помилково написане ім'я або ужиток перейменованого шаблону.
-
Повний перелік наявних шаблонів ви можете знайти у репозиторії на GitHub.
-
- -
-

Порада: Ви можете зробити пошук шаблонів швидшим й зручнішим, скориставшись механізмом search keyword у Firefox (або відповідним у іншому переглядачі). Дивіться покроковий путівник в розділі {{SectionOnPage("/uk/docs/MDN/Contribute/Tools/KumaScript", "Використання пошуку за ключовими словами задля відкриття сторінок шаблонів")}}.

-
- -

Помилка TemplateExecutionError трапляється тоді, коли KumaScript натрапляє на помилку під час виконання самого шаблону. Такі помилки можуть виправити лише адміністратори, тож вам слід лише надіслати відповідний звіт.

- -

Перед тим, як надсилати звіт про помилки, переконайтеся, що їх досі не виправлено. Для цього ви можете змусити KumaScript надати вам останню версію сторінки, перезавантаживши її зі скиданням кешів (Shift + Ctrl + R у Linux/Windows, Shift + Cmd + R на Mac).

- -

Якщо проблема лишається, повідомте про ваду, додавши URL-посилання на сторінку й текст помилки.

- -

Невідома помилка (Error & Unknown)

- -

Так позначаються помилки, які не належать до жодного з наведених різновидів.

- -

Переконайтеся, що виправлень досі немає, а тоді повідомте про вади так само, як у випадку з TemplateExecutionError.

diff --git a/files/uk/mdn/yari/index.html b/files/uk/mdn/yari/index.html new file mode 100644 index 0000000000..af18465d4f --- /dev/null +++ b/files/uk/mdn/yari/index.html @@ -0,0 +1,25 @@ +--- +title: 'Kuma: wiki-платформа MDN' +slug: MDN/Kuma +tags: + - Kuma + - MDN Meta +translation_of: MDN/Kuma +--- +
{{MDNSidebar}}
+ +
{{IncludeSubnav("/uk/docs/MDN")}}
+ +

Платформа Kuma — це код, що ґрунтується на Django та вможливлює роботу MDN Web Docs.

+ +

{{SubpagesWithSummaries}}

+ +

Ознайомлення з Kuma

+ +

Щоб ознайомитися з Kuma:

+ + diff --git "a/files/uk/mdn/\320\277\321\200\320\276/index.html" "b/files/uk/mdn/\320\277\321\200\320\276/index.html" deleted file mode 100644 index c8643e0e51..0000000000 --- "a/files/uk/mdn/\320\277\321\200\320\276/index.html" +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Про MDN -slug: MDN/Про -tags: - - MDN Meta - - Путівник - - Спільнота -translation_of: MDN/About ---- -
{{MDNSidebar}}
- -
{{IncludeSubNav ("/uk/docs/MDN")}}
- -

MDN Web Docs — це постійно оновлюваний навчальний майданчик з веб-технологій та програмного забезпечення, яке живить {{Glossary("Тенета", "всесвітнє павутиння")}}, зокрема:

- - - -

Наша мета

- -

Мета MDN дуже проста: надати розробникам всі необхідні відомості для створення проектів у всесвітній мережі. Якщо є відкрита технологія, доступна для тенет, ми маємо її задокументувати.

- -

Ми також надаємо документацію продуктів Mozilla і відомості те, як складати проекти Mozilla та брати участь у їх розробці.

- -

Якщо ви не впевнені, чи слід висвітлювати на MDN якусь тему, прочитайте: чи належить це MDN?

- -

Як можна допомогти?

- -

Допомога MDN не конче потребує фахових навичок з написання коду чи письменницького хисту! Існує чимало різних способів допомоги: від загальної пере́вірки статей на змістовність та легкочитність до набору тексту та додавання зразків коду. Насправді, шляхів допомоги так багато, що ми цьому присвятили окрему сторінку «Початок роботи», яка допоможе вам обрати завдання залежно від того, що вам цікаво та скільки часу ви готові приділити цій справі.

- -

Ви також можете допомогти розповівши про MDN у власному блозі чи веб-сайті.

- -

Спільнота MDN

- -

Наша спільнота є всесвітньою! До неї належать люди з усього світу, носії низки різних мов. Якщо ви хочете дізнатись про нас більше, чи вам потрібна якась допомога з MDN, не соромтеся звернутись до нашого форуму або каналу IRC! Крім того, ми маємо обліковий запис @MozDevNet у Twitter. Там можна стежити за нашою діяльністю або навіть надсилати нам повідомлення, якщо раптом щось не так, або ви хочете лишити відгук (чи то пак щиру подяку) нашим учасникам та укладачам!

- -

Використання вмісту MDN

- -

Вміст MDN є безкоштовним та поширюється на умовах ліцензії відкритого доступу.

- -

Авторські права та ліцензії

- -

Вміст MDN повністю доступний під різними ліцензіями відкритого доступу. Цей розділ охоплює різновиди вмісту, який ми надаємо, та ліцензії, що на нього поширюються.

- -

Документація та статті

- -

Вікі-документи MDN було укладено за участю багатьох авторів, як у межах Mozilla Foundation, так і поза ними. Якщо не зазначено інше, вміст доступний на умовах ліцензії Creative Commons Attribution-ShareAlike (CC-BY-SA), v2.5 або будь-якої пізнішої версії. Будь ласка, наводьте «Mozilla Contributors» та посилання (якщо в мережі) або URL (якщо для друку) на відповідну вікі-сторінку, яку мали за джерело. Наприклад, передруковуючи цю статтю, можна написати таке:

- -
Про MDN від Mozilla Contributors ліцензовано під CC-BY-SA 2.5.
- -

Зверніть увагу, що в наведеному прикладі «Mozilla Contributors» є посиланням на історію цитованої сторінки. Докладніше див. у статті Поради щодо ліцензійних позначок.

- -
-

Див. вміст MDN на WebPlatform.org для отримання відомостей про передрук та ліцензійні позначки статей MDN на сторінках webplatform.org.

-
- -

Приклади й уривки коду

- -

Зразки коду, додані 20 серпня 2010 року чи пізніше, перебувають у відкритому доступі (CC0). Загалом згадка про ліцензію не потрібна, та якщо ви хочете, можете зазначити таке: "Всі авторські права передаються у суспільне надбання. http://creativecommons.org/publicdomain/zero/1.0/".

- -

На зразки коду, додані раніше 20 серпня 2010 року, поширюються умови ліцензії MIT; ви маєте лише доповнити шаблон ліцензації MIT таким рядком: "© <дата останньої версії вікі-сторінки> <ім'я особи, що додала її до вікі>".

- -

Внесок

- -

Якщо ви хочете взяти участь в укладанні документації, вам доведеться погодитись на поширення вашого внеску на умовах ліцензії Attribution-ShareAlike (або іншої ліцензії, що може бути зазначена на сторінці, яку ви редагуєте) та зразків коду на умовах Creative Commons CC-0 (суспільне надбання). Будь-який внесок у документацію MDN означає вашу згоду на поширення власного доробку на умовах цих ліцензій.

- -

Деякі старі статті використовують інші ліцензії, про що свідчить відповідна позначка Alternate License Block наприкінці кожної такої сторінки.

- -
-

Для створення нових сторінок вживати інші ліцензії не дозволено.

-
- -

Авторське право на кожен внесок належить авторові, якщо він не передавав його іншій особі.

- -

Якщо маєте сумніви чи запитання щодо викладеного тут, зв'яжіться з очільниками MDN.

- -

Товарні знаки й логотипи

- -
-

Дія ліцензії Creative Commons не поширюється на товарні знаки й логотипи Mozilla Foundation, як і на вигляд та оздоблення цього сайту. Вони, як витвір окремого авторства, не є частиною вмісту MDN, та ліцензовані на інших умовах. Якщо деякі з них ви хочете використати разом із текстом статей, чи маєте якісь питання щодо ліцензійних умов, ви мусите звернутись до Mozilla Foundation за адресою licensing@mozilla.org.

- -

Посилання на MDN

- -

Різні види посилань та відповідні поради див. у статті посилання на MDN.

- -

Завантаження вмісту

- -

Ви можете завантажити повне дзеркало MDN (2,1 Гб на лютий 2017 року).

- -

Окремі сторінки

- -

Ви можете завантажити вміст окремої сторінки MDN, додавши до URL-адреси відповідні параметри, що вказують бажаний формат.

- -

Сторонні засоби

- -

Ви можете переглядати вміст MDN за допомогою сторонніх засобів, як-от Dash (для macOS) та Zeal (для Linux та Windows).

- -

Поза тим, Kapeli поширює офлайнові документи MDN що охоплюють HTML, CSS, JavaScript, SVG та XSLT.

- -

Негаразди з MDN Web Docs

- -

Про те, куди і як звертатися з повідомленням про помилки в роботі чи на сторінках документації MDN, див. у статті як повідомити про помилку в MDN.

- -

Історія MDN Web Docs

- -

MDN Web Docs (раніше Mozilla Developer Network (MDN), а до того Mozilla Developer Center (MDC), також відомий як Devmo) з'явився на початку 2005 року, коли Mozilla Foundation отримала від AOL ліцензію на використання вмісту Netscape DevEdge. Вміст DevEdge опрацювали і все, що становило цінність, добровольці згодом перенесли до MDN.

- -

Докладнішу історію MDN, зокрема оповідки декого з причетних осіб, викладено в статті про наше святкування десятої річниці.

- -

Про Mozilla

- -

Якщо вас цікавить хто ми є і як бути частиною Mozilla, чи просто де нас шукати, — ви прийшли куди треба. Дізнайтеся, що нас спонукає і що робить особливими, на сторінці нашої місії.

diff --git a/files/uk/mozilla/add-ons/webextensions/what_are_webextensions/index.html b/files/uk/mozilla/add-ons/webextensions/what_are_webextensions/index.html new file mode 100644 index 0000000000..2a9bc1da15 --- /dev/null +++ b/files/uk/mozilla/add-ons/webextensions/what_are_webextensions/index.html @@ -0,0 +1,25 @@ +--- +title: Що таке розширення? +slug: Mozilla/Add-ons/WebExtensions/Що_таке_Web_Розширення +tags: + - Web-Розширення + - Розширення +translation_of: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions +--- +
{{AddonSidebar}}
+ +

Розширення є частинками коду, які змінюють функціонування web-браузера. Вони написані з використанням стандартних web-технологій - JavaScript, HTML і CSS - плюс деяких спеціальних JavaScript API. Крім того, розширення можуть додавати нові функції до браузера або змінювати зовнішній вигляд або вміст конкретних web-сайтів.

+ +

Розширення для Firefox створені з використанням API Web-розширень, крос-браузерної системи для розробки розширень. Значною мірою API сумісний з API розширенням, яке підтримується Google Chrome і Opera. Розширення написані для цих браузерів в більшості випадків запускатимуться у Firefox або Microsoft Edge з лише кількома змінами. API також повністю сумісний з багатопроцесовим Firefox.

+ +

В минулому, ви могли розробляти розширення Firefox використовуючи одне з трьох різних систем: XUL/XPCOM overlays, bootstrapped extensions, або Add-on SDK. По закінченню Листопада 2017-го, API Web-розширення будуть єдиним способом розробки розширень Firefox, і інші системи не будуть підтримуватися.

+ +

Якщо ви маєте ідеї або питання, чи вам потрібна допомога міграції успадкованого додатку на API Web-розширень, то ви можете зв'язатися з нами на dev-addons списку листування або в #extdev на IRC.

+ +

Що далі?

+ + diff --git "a/files/uk/mozilla/add-ons/webextensions/\321\211\320\276_\321\202\320\260\320\272\320\265_web_\321\200\320\276\320\267\321\210\320\270\321\200\320\265\320\275\320\275\321\217/index.html" "b/files/uk/mozilla/add-ons/webextensions/\321\211\320\276_\321\202\320\260\320\272\320\265_web_\321\200\320\276\320\267\321\210\320\270\321\200\320\265\320\275\320\275\321\217/index.html" deleted file mode 100644 index 2a9bc1da15..0000000000 --- "a/files/uk/mozilla/add-ons/webextensions/\321\211\320\276_\321\202\320\260\320\272\320\265_web_\321\200\320\276\320\267\321\210\320\270\321\200\320\265\320\275\320\275\321\217/index.html" +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Що таке розширення? -slug: Mozilla/Add-ons/WebExtensions/Що_таке_Web_Розширення -tags: - - Web-Розширення - - Розширення -translation_of: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions ---- -
{{AddonSidebar}}
- -

Розширення є частинками коду, які змінюють функціонування web-браузера. Вони написані з використанням стандартних web-технологій - JavaScript, HTML і CSS - плюс деяких спеціальних JavaScript API. Крім того, розширення можуть додавати нові функції до браузера або змінювати зовнішній вигляд або вміст конкретних web-сайтів.

- -

Розширення для Firefox створені з використанням API Web-розширень, крос-браузерної системи для розробки розширень. Значною мірою API сумісний з API розширенням, яке підтримується Google Chrome і Opera. Розширення написані для цих браузерів в більшості випадків запускатимуться у Firefox або Microsoft Edge з лише кількома змінами. API також повністю сумісний з багатопроцесовим Firefox.

- -

В минулому, ви могли розробляти розширення Firefox використовуючи одне з трьох різних систем: XUL/XPCOM overlays, bootstrapped extensions, або Add-on SDK. По закінченню Листопада 2017-го, API Web-розширення будуть єдиним способом розробки розширень Firefox, і інші системи не будуть підтримуватися.

- -

Якщо ви маєте ідеї або питання, чи вам потрібна допомога міграції успадкованого додатку на API Web-розширень, то ви можете зв'язатися з нами на dev-addons списку листування або в #extdev на IRC.

- -

Що далі?

- - diff --git a/files/uk/orphaned/learn/how_to_contribute/index.html b/files/uk/orphaned/learn/how_to_contribute/index.html new file mode 100644 index 0000000000..9d73e3f192 --- /dev/null +++ b/files/uk/orphaned/learn/how_to_contribute/index.html @@ -0,0 +1,83 @@ +--- +title: Як зробити внесок до навчальної бази MDN? +slug: Learn/How_to_contribute +translation_of: Learn/How_to_contribute +--- +
{{LearnSidebar}}
+ +
Якщо ви тут вперше або після довгих пошуків, це можливо тому що ви зацікавлені зробити власний внесок до області навчання MDN. Це гарні новини!
+ +

На цій сторінці ви знайдете все що вам потрібно для того щоб почати допомагати удосконалювати навчаний контент MDN. Є багато речей, які ви можете робити, залежно від кількості наявного часу та на якому етапі ви знаходитесь e початківець, веб розробник, або вчитель.

+ +
+

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

+
+ +

Знайдіть конкретні завдання

+ +

Поширеним спосіб, яким люди роблять внески до навчальної бази є читання стеттей, виправлення друкарських помилок та пропозиція покращень. Ми також відаємо додавання прикладів до нашого GitHub сховища. Зв'яжіться з нами якщо ви хочете запитати що ще потрібно зробити. 

+ +

Додавання внесків це чудовий спосіб розважитися під час вивчення нових речей. Якщо ви коли-небудь відчуваєте себе загубленим або маєте запитання, не соромтесь звернутися до нас в Навчальній темі для дискусій or IRC channel (see at the bottom of this page for details). Chris Mills is the topic driver for the Learning Area — you could also try pinging him directly.

+ +

The following sections provide some general ideas of the types of tasks you can do.

+ +

I'm a beginner

+ +

That's awesome! Beginners are very important and valuable for creating and giving feedback on learning material. You have a unique perspective on these articles as a member of their target audience, which can make you an invaluable member of our team. Indeed, if you're using one of our articles to learn something and you get stuck, or find the article confusing in some way, you can either fix it or let us know about the problem so we can be sure it gets fixed.

+ +

Here are some suggested ways you can contribute:

+ +
+
Add tags to our articles (5 min)
+
Tagging MDN content is one of the easiest ways to contribute to MDN. As many of our features use tags to help present information in context, helping with tagging is a very valuable contribution. Take a look at the lists of glossary entries and learning articles without any tags to get started.
+
Read and review a glossary entry (5 min)
+
As a beginner, we need your fresh eyes looking at our content. If you find a glossary entry hard to understand, it means that entry needs to be improved. Feel free to make any changes you think are necessary. If you do not think you have the proper skill to edit the entry yourself, please bring it to our attention on our mailing list.
+
Write a new glossary entry (20 minutes)
+
This is the most effective way to learn something new. Pick a concept you want to understand, and as you learn about it, write a glossary entry about it. Explaining something to others is a great way to "cement" the knowledge in your brain, and to help you make sense of things yourself, all while helping other people. Everybody wins!
+
Read and review a learning article (2 hours)
+
This is very much like reviewing glossary entries (see above); it just takes more time, since these articles are typically quite a bit longer.
+
+ +

I'm a web developer

+ +

Fantastic! Your technical skills are just what we need to be sure we provide technically accurate content for beginners. As this specific part of MDN is dedicated to learning the Web, be sure your explanations are as simple as possible, without being so simple that they're not useful. It's often more important to be understandable than to be overly precise.

+ +
+
Read and review a glossary entry (5 min)
+
As a web developer, we need you to make sure our content is technically accurate without being too pedantic. Feel free to make any changes you think are necessary. If you want to discuss the content before editing, ping us on our mailing list or IRC channel.
+
Write a new glossary entry (20 minutes)
+
Clarifying technical jargon is a very good way to learn and be both technically accurate and simple. Beginners will thank you for that. We have many undefined terms which need your attention. Pick one and you're good to go.
+
Read and review a learning article (2 hours)
+
This is the same thing as reviewing a glossary entry (see above); it just takes a bit more time as those articles are quite a bit longer.
+
Write a new learning article (4 hours or more)
+
MDN is lacking simple straightforward articles about using web technologies (HTML, CSS, JavaScript, etc). We also have old content on MDN that deserves to be reviewed and reshaped. Push your skills to the limit to make web technologies usable even by beginners.
+
Create exercises, code samples or interactive learning tools (? hours)
+
All our learning articles require what we call "active learning" materials, because people learn best by doing something themselves. Such materials are exercises or interactive content that help a user to apply and manipulate the concepts detailed in an article. There are many possible ways to make active learning content, from creating code samples with JSFiddle or similar, to building fully hackable interactive content with Thimble. Unleash your creativity!
+
+ +

I'm a teacher

+ +

MDN has a long history of technical excellence, but we lack depth of understanding of the best way to teach concepts to newcomers. This is where we need you, as a teacher or educator. You can help us ensure that our materials provide a good, practical educational track for our readers.

+ +
+
Read and review a glossary entry (15 min)
+
Check out a glossary entry and feel free to make any changes you think are necessary. If you want to discuss the content before editing, ping us on our mailing list or IRC channel.
+
Write a new glossary entry (1 hour)
+
Clear, simple definitions of terms and basic overviews of concepts in the glossary are critical in meeting beginners' needs. Your experience as an educator can help create excellent glossary entries; we have many undefined terms which need your attention. Pick one and go for it.
+
Add illustrations and/or schematics to articles (1 hour)
+
As you might know, illustrations are an invaluable part of any learning content. This is something we often lack on MDN and your skills can make a difference in that area. Check out the articles that lack illustrative content and pick one you'd like to create graphics for.
+
Read and review a learning article (2 hours)
+
This is similar to reviewing glossary entries (see above), but it requires more time since the articles are typically quite a bit longer.
+
Write a new learning article (4 hours)
+
We need simple, straightforward articles about the Web ecosystem and other functional topics around it. Since these learning articles need to be educational rather than trying to literally cover everything there is to know, your experience in knowing what to cover and how will be a great asset.
+
Create exercises, quizzes or interactive learning tools (? hours)
+
All our learning articles require "active learning" materials. Such materials are exercises or interactive content which help a user learn to use and expand upon the concepts detailed in an article. There are lots of things you can do here, from creating quizzes to building fully hackable interactive content with Thimble. Unleash your creativity!
+
Create learning pathways (? hours)
+
In order to provide progressive and comprehensible tutorials, we need to shape our content into pathways. It's a way to gather existing content and figure out what is missing.
+
+ +

See also

+ + diff --git a/files/uk/orphaned/mdn/community/index.html b/files/uk/orphaned/mdn/community/index.html new file mode 100644 index 0000000000..a0265bb09c --- /dev/null +++ b/files/uk/orphaned/mdn/community/index.html @@ -0,0 +1,53 @@ +--- +title: Приєднуйтесь до спільноти MDN +slug: MDN/Community +tags: + - Внесок + - Керівництво + - Спільнота +translation_of: MDN/Community +--- +
{{MDNSidebar}}
+ +
{{IncludeSubnav("/uk/docs/MDN")}}
+ +
+

Мережа Розробників Mozilla (англ. Mozilla Developer Network, скорочено MDN) — це дещо більше, ніж просто вікі: це товариство, що спільними зусиллями створює якісний ресурс для розробників, які використовують відкриті веб-технології.

+
+ +

Ми були б вдячні вам за ваш внесок у розвиток MDN, та навіть більш вдячні ми були б за вашу участь в житті спільноти MDN. Долучитися можна у три прості кроки:

+ +
    +
  1. Створіть обліковий запис MDN.
    2. +
  2. Приєднайтесь до обговорень.
    3. +
  3. Стежте за тим, що відбувається.
    4. +
+ +

Як працює спільнота

+ +

Нижче наведено статті, які описують та пояснюють роботу спільноти MDN.

+ +
+
+
+
Ролі спільноти
+
Існує низка ролей у спільноті MDN, кожна з яких має певні обов'язки.
+
Спринти з документування
+
Це керівництво з організації спринтів з документування. Воно містить поради та настанови від людей, які організовували такі спринти, тож може допомогти вам організувати власні.
+
Стежте за тим, що відбувається
+
MDN надано вам спільнотою Мережі Розробників Mozilla. Тут наведено декілька шляхів поширення інформації про те, що ми робимо.
+
+ +
+
+
+ +
+
+
Беріть участь в обговореннях
+
Життя спільноти відбувається переважно на сайті MDN, проте "спільнота" існує також завдяки обговоренням (асинхронно) та онлайн чатам і зустрічам (синхронно).
+
Працюйте у спільноті
+
Запорукою будь-якого дійсно вагомого внеску до документації MDN є розуміння того, як бути частиною спільноти і працювати злагоджено. Ця стаття надає поради, що допоможуть налагодити взаємодію як з іншими редакторами, так і з командами розробників.
+
+
+
diff --git a/files/uk/orphaned/mdn/contribute/howto/be_a_beta_tester/index.html b/files/uk/orphaned/mdn/contribute/howto/be_a_beta_tester/index.html new file mode 100644 index 0000000000..f642230d3c --- /dev/null +++ b/files/uk/orphaned/mdn/contribute/howto/be_a_beta_tester/index.html @@ -0,0 +1,45 @@ +--- +title: Як взяти учать в бета-тестуванні +slug: MDN/Contribute/Howto/Бета_тестування +tags: + - MDN Meta +translation_of: MDN/Contribute/Howto/Be_a_beta_tester +--- +
{{MDNSidebar}}

Час від часу, коли розробники Kuma (платформа MDN) впроваджують якість зміни, ми завчасно надаємо доступ до останніх оновлень тим членам спільноти, що погодились брати участь в бета-тестуванні. Певно, що в режимі бета-тестування щось може не працювати як слід.

+ +

Як розпочати тестування

+ +
    +
  1. Увійдіть до MDN (для цього вам потрібен обліковий запис);
    2. +
  2. Відкрийте випадне меню нагорі під зображенням вашого профілю наведенням вказівника миші;
    3. +
  3. Натисніть кнопку «Редагувати профіль» , щоб потрапити на сторінку редагування облікового запису:
    +
    4. +
  4. Встановіть прапорець «Бета-тестувальник» нагорі сторінки:
    + Shows the location of the Beta Tester checkbox
    5. +
  5. Та не забудьте застосувати зміни, натиснувши кнопку «Оприлюднити» наприкінці сторінки.
    6. +
+ +

Як припинити тестування

+ +
    +
  1. Увійдіть до MDN, відкрийте сторінку редагування облікового запису;
    2. +
  2. Приберіть прапорець «Бета-тестувальник»;
    3. +
  3. Збережіть зміни, натиснувши кнопку «Оприлюднити» наприкінці сторінки.
    4. +
+ +

Як лишити відгук щодо тестування

+ +

Є два способи залишити свій відгук щодо бета-тестування:

+ + diff --git a/files/uk/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html b/files/uk/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html new file mode 100644 index 0000000000..52d901c525 --- /dev/null +++ b/files/uk/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html @@ -0,0 +1,42 @@ +--- +title: Як створити обліковий запис MDN +slug: MDN/Contribute/Howto/Create_an_MDN_account +tags: + - MDN Мета + - MDN профіль + - Документація + - Керівництво + - Початківець +translation_of: MDN/Contribute/Howto/Create_an_MDN_account +--- +
{{MDNSidebar}}

Щоб редагувати вміст у MDN, вам потрібен профіль MDN. Вам не потрібен профіль, якщо ви хочете лише читати і знайти документи MDN. Цей посібник допоможе вам налаштувати профіль MDN.

+ +
+
Чому в MDN потрібна моя електронна адреса?
+
+Вашу електронну адресу використовують для відновлення облікового запису та, якщо потрібно, адміністратори MDN, щоб зв'язатися з вами про ваш обліковий запис або вашу активність на сайті.
+
+Крім того, ви можете зареєструватися для отримання сповіщень (як от коли конкретні сторінки змінюються) і повідомлення (наприклад, якщо ви вирішите приєднатися до нашої бета-тестової групи, ви можете отримувати електронні листи про нові функції, які потребують тестування).
+
+Ваша електронна адреса ніколи не відображається в MDN і буде використовуватися тільки відповідно до нашої політики конфіденційності.
+ +
Якщо ви входите в MDN через GitHub, і ви використовуєте електронну адресу "noreply" на GitHub, ви не отримуватимете повідомлення від MDN (включаючи сповіщення, підписавшись на сторінки).
+
+
+ +
    +
  1. У верхній частині кожної сторінки MDN ви знайдете кнопку, яка називається Увійти. Наведіть курсор (або натисніть на неї, якщо ви відвідуєте з мобільного пристрою), щоб відобразити список служб автентифікації, які ми підтримуємо для входу в MDN.
    2. +
  2. Виберіть службу, з якою ви ввійдете. На даний момент доступно лише GitHub. Зверніть увагу: якщо ви виберете GitHub, посилання на ваш профіль GitHub буде включено на вашу загальнодоступну сторінку профілю MDN.
    3. +
  3. Дотримуйтесь інструкцій GitHub, щоб підключити свій обліковий запис до MDN.
    4. +
  4. Після того, як служба автентифікації поверне вас до MDN, вам буде запропоновано ввести ім'я користувача та адресу електронної пошти. Ваше ім'я користувача буде відображатися публічно, щоб відмітити вас за виконану вами роботу. Не використовуйте свою електронну адресу як своє ім'я користувача.
    5. +
  5. НатиснітьСтворити свій профіль MDN.
    6. +
  6. Якщо адреса електронної пошти, вказана на кроці 4, не співпадає з вашою службою автентифікації, перевірте свою електронну пошту та натисніть посилання в електронному листі з підтвердженням, яке ми надішлемо вам.
    7. +
+ +

Це воно! У вас є обліковий запис MDN, і ви можете відразу редагувати сторінки!

+ +

Ви можете натиснути ваше ім'я у верхній частині будь-якої сторінки MDN, щоб переглянути свій загальнодоступний профіль. Звідти ви можете натиснути Редагувати щоб внести зміни або доповнення до вашого профілю.

+ +
+

Нові імена користувачів не можуть містити пробіли або символ "@". Пам'ятайте, що ваше ім'я користувача буде відображатися публічно, щоб відзначити виконану вами роботу.

+
diff --git a/files/uk/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html b/files/uk/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html new file mode 100644 index 0000000000..1867df663c --- /dev/null +++ b/files/uk/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html @@ -0,0 +1,64 @@ +--- +title: Як робити редакційний огляд +slug: MDN/Contribute/Howto/Do_an_editorial_review +tags: + - MDN Meta + - Документація + - Путівник + - Редакційний огляд +translation_of: MDN/Contribute/Howto/Do_an_editorial_review +--- +
{{MDNSidebar}}
+ +
{{IncludeSubnav("/uk/docs/MDN")}}
+ +

Редакційний огляд полягає у виправленні одруків, помилок граматики й правопису, слововживання або фразеології. Не всі, хто творить MDN, є фахівцями мовознавства, та попри це вони можуть робити надзвичайно важливий змістовний внесок до статей, що відтак потребують перевірки на охайність та редактури. Саме це й має на меті редакційний огляд.

+ +

Ця стаття пояснює, як здійснювати редакційний огляд, щоб забезпечити охайність, точність та зрозумілість вмісту MDN.

+ +
+
В чому полягає задача?
+
Перевірка на охайність та редактура статей, що відповідним чином позначені.
+
+ +
+
Де саме це треба робити?
+
В окремих статтях, що позначені як такі, що потребують редакційного огляду.
+
+ +
+
Які знання є необхідними для виконання цієї задачі?
+
Належне знання граматики й правопису. Ви маєте пересвідчитися, що текст викладено зрозуміло та недвозначно, що він відповідає чинним граматиці й правопису, а також настановам Путівника зі стилю MDN.
+
+ +
+
Які кроки задля цього потрібно зробити?
+
+
    +
  1. Оберіть статтю для перевірки: +
      +
    1. Відкрийте перелік статей, що потребують редакційної перевірки. Це список сторінок, що мають відповідні позначки.
      2. +
    2. Клацніть на посилання, щоб відкрити відповідну статтю.
      + Заувага: цей перелік оновлюється автоматично, але нечасто, тож він може містити деякі статті, що вже не потребують перевірки. Якщо обрана вами стаття не містить відповідного повідомлення, лишіть її та оберіть іншу.
      3. +
    +
    2. +
  2. Перечитайте статтю, звертаючи увагу на можливі одруки, помилки правопису, граматики та слововживання. Можете обрати іншу статтю, якщо обрана вам з будь-яких причин не до вподоби.
    3. +
  3. Якщо жодної помилки немає, не потрібно відкривати редактор статті, щоб прибрати позначку про необхідність огляду. Натомість зверніться до меню «швидкий огляд» по лівий бік статті:
    +
    4. +
  4. Приберіть відповідну позначку та натисніть Зберегти.
    5. +
  5. Якщо ви знайшли помилки, які слід виправити: +
      +
    1. Відкрийте редактор MDN, натиснувши кнопку {{FontAwesomeIcon("icon-pencil")}} Редагувати на сторінці згори.
      2. +
    2. Виправте знайдені одруки, пунктуацію та слововживання. Щоб допомогти, вам не конче потрібно виправити все. Проте не забудьте лишити належний коментар до редакції, якщо ви не цілком певні, що виконали вичерпний огляд усієї статті.
      3. +
    3. Лишіть коментар до редакції наприкінці сторінки — щось на кшталт «Редакційний огляд: виправлено одруки, граматичні помилки та правопис». Це допоможе іншим членам спільноти дізнатись, що ви зробили й нащо.
      4. +
    4. Приберіть позначку Редакційна під заголовком Потрібна перевірка? — це розташовано просто над розділом Коментар до редакції.
      5. +
    5. Натисніть кнопку {{FontAwesomeIcon("icon-check")}} Оприлюднити.
      6. +
    +
    6. +
+ +
+

Заувага: Внесені вами зміни можуть не з'явитися одразу після збереження — подекуди їх обробка може тривати деякий час.

+
+
+
diff --git a/files/uk/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html b/files/uk/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html new file mode 100644 index 0000000000..36266220ba --- /dev/null +++ b/files/uk/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html @@ -0,0 +1,47 @@ +--- +title: Як зробити опис сторінки +slug: MDN/Contribute/Howto/Set_the_summary_for_a_page +tags: + - MDN Meta + - Посібник + - Як +translation_of: MDN/Contribute/Howto/Set_the_summary_for_a_page +--- +
{{MDNSidebar}}

Ви можете створити опис сторінки на MDN, які будуть використані у різний спосіб, у тому числі в результатах пошукової системи, на інших сторінках MDN, таких як актуальні цільові сторінки та підказки. Це має бути текст, який має сенс як в змісті сторінки, так і при відображенні в інших контекстах, без решти вмісту сторінки.

+ +

Опис має бути чітко визначено на сторінці. Якщо це не чітко визначено, то зазвичай використовується перше речення, яке не завжди є найкращим текстом для цієї мети.

+ +
+
У чому полягає завдання?
+
Позначення тексту в межах сторінки, який можна використати як його опис в інших контекстах; це завдання може включати в себе написання відповідного тексту, якщо це необхідно.
+
Де це потрібно зробити?
+
На сторінках, які не мають опису або не дуже чудовий опис.
+
Що потрібно знати аби виконати завдання?
+
Спроможність використання редактора MDN; хороші навички англійського письма; достатнє знайомство з темою сторінки, щоб написати гарне резюме.
+
Як це зробити покроково?
+
+
    +
  1. Виберіть сторінку, для якої потрібно створити опис: +
      +
    1. На сторінці статусу документації MDN, натисніть на посилання під Секціями для теми, про яку ви щось знаєте (наприклад, HTML):
      +
      2. +
    2. На сторінці стану документації теми натисніть заголовок Сторінки в таблиці Описи. Це приведе вас до переліку всіх сторінок розділу цієї теми; він показує посилання на сторінки в лівій колонці, та на теги та описи у правій колонці:
      +
      3. +
    3. Виберіть сторінку, на якій відсутній або поганий опис:
      +
      4. +
    4. Натисність на посилання аби перейти на сторінку.
      5. +
    +
    2. +
  2. Натисніть Редагувати, щоб відкрити цю сторінку у редакторі MDN.
    3. +
  3. Шукайте одне-два речення, котрі будуть слугувати описом вмісту сторінки. Якщо необхідно, відредагуйте наявний вміст, щоб створити гарний опис або змініть його.
    4. +
  4. Виберіть текст, який слугуватиме описом.
    5. +
  5. У віджеті Стилі на панелі інструментів редактора виберіть SEO Опис. (У джерелі сторінки це створює елемент {{HTMLElement("span")}} з класом "seoSummary" навколо обраного тексту.)
    +
    6. +
  6. Збережіть свої зміни з коментарем до редакції. Коментар є необов'язковими, але ми радимо вам надати його. Це полегшить іншим людям роботу по відслідковуванню змін.
    7. +
+ +

 

+
+
+ +

 

diff --git a/files/uk/orphaned/web/javascript/reference/global_objects/array/prototype/index.html b/files/uk/orphaned/web/javascript/reference/global_objects/array/prototype/index.html new file mode 100644 index 0000000000..a4af191650 --- /dev/null +++ b/files/uk/orphaned/web/javascript/reference/global_objects/array/prototype/index.html @@ -0,0 +1,185 @@ +--- +title: Array.prototype +slug: Web/JavaScript/Reference/Global_Objects/Array/prototype +tags: + - Array + - JavaScript + - Property + - Джава Скріпт + - Масив + - Поле +translation_of: Web/JavaScript/Reference/Global_Objects/Array/prototype +--- +
{{JSRef}}
+ +

Поле Array.prototype представляє собою прототип для конструктора {{jsxref("Array")}} і дозволяє вам додавати нові поля і методи до всіх об'єктів-масивів (Array).

+ +
// Якщо JavaScript не реалізовує метод first() початково,
+// додайте новий метод, який буде повертати перший елемент масиву.
+
+if (!Array.prototype.first) {
+  Array.prototype.first = function() {
+    return this[0];
+  }
+}
+
+ +

Опис

+ +

Екземпляри {{jsxref("Array")}} успадковуються від Array.prototype. Як і з всіх конструкторів, ви можете змінити прототип конструктора об'єкта, щоб внести зміни у всі екземпляри {{jsxref("Array")}}. Для прикладу, це використовується для {{Glossary("Polyfill", "polyfilling")}}.

+ +

Маловідомий факт: Array.prototype сам є масивом {{jsxref("Array")}}:

+ +
Array.isArray(Array.prototype); // true
+
+ +

{{js_property_attributes(0, 0, 0)}}

+ +

Властивості

+ +
+
Array.prototype.constructor
+
Визначає функцію, що створює прототип об'єкта.
+
{{jsxref("Array.prototype.length")}}
+
Відображає кількість елементів в масиві.
+
{{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}
+
Символ, який містить назви властивостей, які повинні бути виключені з області зв'язування with.
+
+ +

Методи

+ +

Методи модифікації

+ +

Ці методи модифікують масив:

+ +
+
{{jsxref("Array.prototype.copyWithin()")}}
+
Копіює послідовність елементів масиву всередині масиву.
+
{{jsxref("Array.prototype.fill()")}}
+
Заповнює всі елементи масиву від початкового індексу до кінцевого статичними значеннями.
+
{{jsxref("Array.prototype.pop()")}}
+
Видаляє та повертає останній елемент масиву.
+
{{jsxref("Array.prototype.push()")}}
+
Додає один чи більше елементів  в кінець масиву та повертає нову довжину масиву.
+
{{jsxref("Array.prototype.reverse()")}}
+
Змінює порядок елементів масиву на протилежний, викорустовуючи той самий масив — перший стає останнім, а останній - першим.
+
{{jsxref("Array.prototype.shift()")}}
+
Видаляє та повертає перший елемент масиву.
+
{{jsxref("Array.prototype.sort()")}}
+
Сортує елементи всередині масиву, та повертає цей масив.
+
{{jsxref("Array.prototype.splice()")}}
+
Добавляє і/або видаляє елементи з масиву.
+
{{jsxref("Array.prototype.unshift()")}}
+
Добавляє один або більше елементів у початок масиву та повертає нову довжину масиву.
+
+ +

Методи доступу

+ +

Ці методи не модифікують масив та повертають якесь його представлення.

+ +
+
{{jsxref("Array.prototype.concat()")}}
+
Повертає новий масив, який складається з цього масиву, об'єднаного з іншим(и) масив(ом/ами) та/або іншими значеннями.
+
{{jsxref("Array.prototype.includes()")}} {{experimental_inline}}
+
Визначає, чи масив містить певний елемент,  повертаючи, відповідно, true або false.
+
{{jsxref("Array.prototype.indexOf()")}}
+
Повертає перший (останній) індекс елемента всередині даного масиву, який дорівнює вказаному значенню, або -1 якщо нічого не було знайдено.
+
{{jsxref("Array.prototype.join()")}}
+
Об'єднує всі елементи масиву у рядок.
+
{{jsxref("Array.prototype.lastIndexOf()")}}
+
Повертає останній (найбільший) індекс елемента всередині даного масиву, який рівний вказаному значенню, або -1 якщо нічого не було знайдено.
+
{{jsxref("Array.prototype.slice()")}}
+
Витягує частину масиву та повертає новий масив.
+
{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}}
+
Повертає літерал масиву, який відображає вказаний масив; ви можете використовувати це значення для створення нового масиву. Перевизначає метод {{jsxref("Object.prototype.toSource()")}}.
+
{{jsxref("Array.prototype.toString()")}}
+
Повертає рядок, яка відображає даний масив та його елементи. Перевизначає метод {{jsxref("Object.prototype.toString()")}}.
+
{{jsxref("Array.prototype.toLocaleString()")}}
+
Повертає локалізований рядок, яка відображає даний масив та його елементи. Перевизначає метод {{jsxref("Object.prototype.toLocaleString()")}}.
+
+ +

Методи  перебору

+ +

Декілька методів приймають у якості аргументів функції, які будуть викликані у процесі обробки масиву. Коли ці методи викликаються, довжина поля length вибраного масиву запам'ятовується, і будь-які елементи, додані поза цією довжиною зсередини функції зворотнього виклику (callback), не будуть обходитися. Інші зміни до масиву (встановлення значення елементу або його видалення) можуть впливати на результат операції, якщо метод після цього звертається до зміненого елемента. Хоча специфічна поведінка цих методів у даних випадках є добре визначеною, не варто на неї надто покладатися, щоб не заплутати тих, хто може прочитати ваш код. Якщо вам необхідно змінити даний масив, краще скопіюйте його у новий масив.

+ +
+
{{jsxref("Array.prototype.entries()")}}
+
Повертає новий об'єкт Array Iterator, який містить пари ключ/значення для кожного індекса в даному масиві.
+
{{jsxref("Array.prototype.every()")}}
+
Повертає true, якщо кожен елемент у цьому масиві виконує умови переданої тест-функції.
+
{{jsxref("Array.prototype.filter()")}}
+
Створює новий масив зі всіма елементами цього масиву, для яких передана функція фільтрації повертае true.
+
{{jsxref("Array.prototype.find()")}}
+
Повертає знайдене у масиві значення, якщо елемент у цьому масиві виконує умови переданої тест-функції або undefined якщо елемента не знайдено.
+
{{jsxref("Array.prototype.findIndex()")}}
+
Повертає знайдений у масиві індекс, якщо елемент у цьому масиві виконує умови переданої тест-функції або -1 якщо елемента не знайдено.
+
{{jsxref("Array.prototype.forEach()")}}
+
Викликає функцію для кожного елементу масиву.
+
{{jsxref("Array.prototype.keys()")}}
+
Повертає новий об'єкт Array Iterator, який містить ключі для кожного індекса в даному масиві.
+
{{jsxref("Array.prototype.map()")}}
+
Створює новий масив з результатами виклику на кожному елементі масиву переданої функції.
+
{{jsxref("Array.prototype.reduce()")}}
+
Застосовує функцію над акумулятором та кожним значенням даного масиву (зліва направо), щоб скоротити його до єдиного значення.
+
{{jsxref("Array.prototype.reduceRight()")}}
+
Застосовує функцію над акумулятором та кожним значенням даного масиву (справа наліво), щоб скоротити його до єдиного значення.
+
{{jsxref("Array.prototype.some()")}}
+
Повертає true, якщо принаймні один елемент у цьому масиві виконує умови переданої тест-функції.
+
{{jsxref("Array.prototype.values()")}}
+
Повертає новий об'єкт Array Iterator, який містить значення для кожного індекса в масиві.
+
{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}}
+
Повертає новий об'єкт Array Iterator, який містить значення для кожного індекса в масиві.
+
+ +

Загальні методи (нестандартні)

+ +

Багато методів на JavaScript об'єкті Array спроектовані таким чином, щоб їх можна було застосувати на всіх об'ектах, які "виглядають як" масиви. Таким чином, вони можуть бути використані на будь-якому об'єкті, у якого є поле length, а також тих об'єктах, доступ до яких можна отримати завдяки числовим назвам полів (як з індексацією масиву array[5]). Деякі методи, такі як {{jsxref("Array.join", "join")}}, лише зчитують довжину (length) і числові поля об'єктів, на яких вони викликаються. Інші, такі як {{jsxref("Array.reverse", "reverse")}}, вимагають, щоб числові поля об'єкту та поле length були доступні для редагування; тому ці методи можуть не викликатися на об'єктах типу {{jsxref("String")}}, який не дозволяє редагувати його поле length або синтезовані числові поля.

+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ES1')}}{{Spec2('ES1')}}Початкове визначення
{{SpecName('ES5.1', '#sec-15.4.3.1', 'Array.prototype')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-array.prototype', 'Array.prototype')}}{{Spec2('ES6')}}Додані методи copyWithin(), fill(), entries(), keys(), values(), find(), findIndex().
{{SpecName('ESDraft', '#sec-array.prototype', 'Array.prototype')}}{{Spec2('ESDraft')}}Доданий метод includes().
+ +

Сумісність із веб-переглядачами

+ + + +

{{Compat("javascript.builtins.Array.prototype")}}

+ +
+ +

Дивіться також

+ + diff --git a/files/uk/orphaned/web/javascript/reference/global_objects/asyncfunction/prototype/index.html b/files/uk/orphaned/web/javascript/reference/global_objects/asyncfunction/prototype/index.html new file mode 100644 index 0000000000..c2df6c31db --- /dev/null +++ b/files/uk/orphaned/web/javascript/reference/global_objects/asyncfunction/prototype/index.html @@ -0,0 +1,59 @@ +--- +title: AsyncFunction.prototype +slug: Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype +tags: + - JavaScript + - Властивість + - прототип +translation_of: Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype +--- +
{{JSRef}}
+ +

Властивість AsyncFunction.prototype відображає прототип об'єкта {{jsxref("AsyncFunction")}}.

+ +

Опис

+ +

Об'єкти {{jsxref("AsyncFunction")}} успадковуються від AsyncFunction.prototype. AsyncFunction.prototype не може бути змінений.

+ +

Властивості

+ +
+
AsyncFunction.constructor
+
Початковим значенням є {{jsxref("AsyncFunction")}}.
+
AsyncFunction.prototype[@@toStringTag]
+
Вертає "AsyncFunction".
+
+ +

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

+ + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('ESDraft', '#sec-async-function-constructor-prototype', 'AsyncFunction.prototype')}}{{Spec2('ESDraft')}}Початкове визначення у ES2017.
+ +

Сумісність з веб-переглядачами

+ +
+ + +

{{Compat("javascript.builtins.AsyncFunction.prototype")}}

+
+ +

Див. також

+ + diff --git a/files/uk/tools/index.html b/files/uk/tools/index.html new file mode 100644 index 0000000000..71cbf1cf97 --- /dev/null +++ b/files/uk/tools/index.html @@ -0,0 +1,309 @@ +--- +title: Firefox інструменти для розробників +slug: Інструменти +translation_of: Tools +--- +

{{ToolsSidebar}}

+ +

Переглядайте, редагуйте та налагоджуйте HTML, CSS, JavaScript на десктопах та на мобільних пристроях. Щоб отримати останні оновлення інструментів розробника, завантажте Firefox Developer Edition.

+ +

Якщо ви шукаєте інформацію про використання інструментів веб-розробників, доступних у Firefox, ви підійшли до потрібного місця - на цій сторінці ви знайдете посилання на детальну інформацію про всі основні інструменти та додаткові інструменти та додаткову інформацію, як, наприклад, підключити та налаштувати Firefox для Android, як розширити devtools та як налагодити браузер у цілому.

+ +

Будь ласка, ознайомтеся з посиланнями, що знаходяться на бічній панелі, та далі вниз на сторінці. Якщо у вас є відгуки або запитання до розробників, надсилайте нам повідомлення в нашому списку розсилки або на каналі IRC (дивіться посилання на спільноту внизу сторінки) Якщо у вас є будь-які відгуки або запитання конкретно щодо документації, MDN discourse - це гарне місце для публікації.

+ +

Примітка: Якщо ви тільки починаєте розробку веб-сторінок та використовуєте інструменти для розробників, то наші документи з вивчення веб-розробки допоможуть вам — дивіться Початок роботи з Інтернетом та Що таке інструменти для розробників в браузері? для гарного старту.

+ +

Основні інструменти

+ +

Ви можете відкрити Firefox Developer Tools (Інструменти для розробників) із меню, обравши Tools > Web Developer > Toggle Tools або використовуючи комбінацію клавіш  Ctrl + Shift + I або F12 на Windows та Linux, або Cmd + Opt + I на macOS.

+ +

Меню еліпсиса в правій частині Developer Tools, містить кілька команд, які дозволяють виконувати дії або змінювати налаштування інструменту.

+ +

+ + + + + + + + + + + + + + + + + + + + + + + + +
Ця кнопка з’являється лише тоді, коли на сторінці є кілька фреймів. Клікніть її, щоб відобразити список фреймів на поточній сторінці та виберіть той, з яким потрібно працювати.
Натисніть цю кнопку, щоб зробити знімок екрана поточної сторінки. (Примітка. Ця функція не вмикається за замовчуванням і повинна бути включена в налаштуваннях, перш ніж з'явиться значок.)
Вмикає режим адаптивного дизайну.
Відкриває меню, що включає параметри стикування, можливість показу або приховування розділеної консолі та налаштування Інструментів для розробників. Меню також містить посилання на документацію для веб-інструментів Firefox та спільноти Mozilla.
Закриває Інструменти для розробників
+ +
+
+

Інспектор сторінки

+ +

The all-new Inspector panel in Firefox 57.

+ +

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

+
+ +
+

Веб-консоль

+ +

The all-new Console in Firefox 57.

+ +

Переглядайте повідомлення, зареєстровані веб-сторінкою, та взаємодійте зі сторінкою за допомогою JavaScript.

+
+
+ +
+
+

JavaScript Налагоджувач

+ +

The all-new Firefox 57 Debugger.html

+ +

Зупиніть, перегляньте, вивчіть та змініть JavaScript, який працює на сторінці.

+
+ +
+

Мережевий монітор

+ +

The Network panel in Firefox 57 DevTools.

+ +

Дивіться мережеві запити, зроблені під час завантаження сторінки.

+
+
+ +
+
+

Інструменти продуктивності

+ +

Performance Tools in Firefox 57 Developer Tools

+ +

Проаналізуйте загальну чуйність, ефективність роботи JavaScript та компонування вашого сайту.

+
+ +
+

Режим адаптивного дизайну

+ +

Responsive Design mode in Firefox 57.

+ +

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

+
+
+ +
+
+

Інспектор доступності

+ +

Performance Tools in Firefox 57 Developer Tools

+ +

Забезпечує засіб доступу до дерева доступності сторінки, що дозволяє перевірити, чого немає або потребує іншої уваги.

+
+
+ +
+

Примітка: Колективний термін для інтерфейсу, всередині якого живе DevTools, - це Панель інструментів.

+
+ +

+ +
+
+

Створення

+ +

Інструменти для створення веб-сайтів і веб-додатків.

+ +
+
Scratchpad
+
Текстовий редактор, вбудований у Firefox, який дозволяє писати та виконувати JavaScript.
+
Style Editor
+
Переглядайте та редагуйте стилі CSS для поточної сторінки.
+
Shader EditorMobile
+
Перегляд і редагування вершинних і фрагментних шейдерів, які використовуються WebGL.
+
Web Audio Editor
+
Вивчіть графік звукових вузлів у звуковому контексті та змініть їх параметри.
+
+
+ +
+

Вивчення та налагодження

+ +

Examine, explore, and debug websites and web apps.

+ +
+
Панель інструментів (Toolbox)
+
The Toolbox provides a single home for most of the developer tools that are built into Firefox.
+
Консоль (Console)
+
Переглядайте повідомлення, зареєстровані веб-сторінкою, і взаємодійте зі сторінкою за допомогою JavaScript.
+
Інспектор сторінки (Page Inspector)
+
Переглядайте та змінюйте сторінку в HTML і CSS.
+
Зневаджувач JavaScript (Debugger)
+
Зупиніть, пройдіть, вивчіть і змініть JavaScript, запущений на сторінці.
+
Монітор мережі (Network Monitor)
+
Переглядайте мережеві запити, зроблені під час завантаження сторінки.
+
Інспектор сховища (Storage Inspector)
+
Перевірте файли cookie, локальне сховище, індексованеБД і сховище сеансу, присутнє на сторінці.
+
Інспектор DOM і стилю (DOM Inspector)
+
Inspect the page's DOM properties, functions, etc.
+
Developer Toolbar
+
Інтерфейс командного рядка для інструментів розробника.
+
Remote Debugging
+
Підключіть інструменти розробника до Firefox з віддаленого комп'ютера.
+
Eyedropper
+
Виберіть колір на сторінці.
+
about:debugging
+
Інформаційна панель для налагодження додаткових компонентів і робочих
+
Working with iframes
+
Як націлити певний фрейм.
+
+
+
+ +
+
+
+

Мобільний

+ +

Інструменти для мобільного розвитку.

+ +
+
Responsive Design Mode
+
Перегляньте, як ваш веб-сайт або програма виглядатимуть на різних розмірах екрана, не змінюючи розмірів вікна веб-переглядача.
+
App Manager
+
Менеджер програм замінено на WebIDE.
+
WebIDE
+
Створювати, редагувати, запускати та налагоджувати веб-програми за допомогою Firefox OS Simulator або реальний пристрій Firefox OS. WebIDE є заміною для Менеджера програм, доступного від Firefox 33 і далі.
+
Firefox OS Simulator
+
Запускайте та налагоджуйте додаток Firefox OS на робочому столі, не потребуючи реального пристрою Firefox OS.
+
Debugging on Firefox for Android
+
Підключіть інструменти розробника до Firefox для Android.
+
Debugging Firefox for Android with WebIDE
+
Для робочого столу Firefox 36+ / Android Firefox 35+ існує більш простий процес.
+
Valence
+
Підключіть інструменти розробника до Chrome на Android і Safari на iOS
+
+
+ +
+

Продуктивність

+ +

Діагностика та усунення проблем із продуктивністю.

+ +
+
Performance Tool
+
Проаналізуйте загальну чутливість вашого сайту, JavaScript і продуктивність макета.
+
Memory
+
Визначте, які об'єкти зберігають пам'ять.
+
Frame rate graph
+
Перегляньте частоту кадрів для вашого сайту.
+
Waterfall
+
Визначте, що робить браузер, коли він запускає ваш сайт.
+
Call Tree
+
З'ясуйте, де ваш код JavaScript витрачає свій час.
+
Flame Chart
+
Подивіться, які функції знаходяться в стеку протягом процесу виконання.
+
Paint Flashing Tool
+
Виділяє частини сторінки, які перефарбовані у відповідь на події.
+
Reflow Event Logging
+
Див. Події перекомпонування в веб-консолі.
+
Network Performance
+
Подивіться, як довго завантажуються частини вашого сайту.
+
+
+
+ +
+
+
+

Debugging the browser

+ +

За замовчуванням інструменти розробника додаються до веб-сторінки або веб-програми. Але ви також можете підключити їх до браузера в цілому. Це корисно для розробки браузера та додаткових компонентів.

+ +
+
Browser Console
+
Переглядайте повідомлення, зареєстровані самим браузером та додатками, а також запустіть JavaScript-код у сфері браузера.
+
Browser Toolbox
+
Приєднайте Інструменти розробника до самого веб-переглядача.
+
+
+ +
+

Розширення devtools

+ +

Інструменти розробника розроблені для розширення. Додатки Firefox можуть отримати доступ до інструментів розробників і компонентів, які вони використовують для розширення існуючих інструментів і додавання нових інструментів. За допомогою віддаленого протоколу налагодження ви можете реалізовувати власні клієнти та сервери відлагодження, дозволяючи налагоджувати веб-сайти, використовуючи власні інструменти або налагоджувати різні цілі за допомогою інструментів Firefox.

+ +
+
Add a new panel to the devtools
+
Напишіть додатковий компонент, який додасть нову панель до панелі інструментів.
+
Remote Debugging Protocol
+
Протокол, який використовується для підключення інструментів для розробників Firefox до цільової налагодження, наприклад екземпляра Firefox або пристрою Firefox OS.
+
Source Editor
+
Редактор коду, вбудований у Firefox, який може бути вбудований у ваш додаток.
+
The Debugger Interface
+
API, який дозволяє коду JavaScript спостерігати за виконанням іншого коду JavaScript. Інструменти розробників Firefox використовують цей API для реалізації відладчика JavaScript.
+
Web Console custom output
+
Як розширити і налаштувати висновок Web Console та Browser Console.
+
Example devtools add-ons
+
Використовуйте ці приклади, щоб зрозуміти, як реалізувати надбудову devtools.
+
+
+
+ +
+

Внесок

+ +

Якщо ви хочете допомогти поліпшити інструменти розробника, є кілька ресурсів, щоб почати.

+ +
+
+
+
Get Involved
+
Вікі-сторінку Mozilla, що пояснює, як взяти участь.
+
+
+ +
+
+
firefox-dev.tools
+
Інструмент, який допомагає знайти помилки для роботи.
+
+
+
+ +
+

Більше ресурсів

+ +

У цьому розділі перелічено ресурси, які наразі не підтримуються командою розробників інструментів розробників Mozilla, але які широко використовуються веб-розробниками. Ми включили декілька додатків Firefox у цей список, але для повного списку див “Web Development” category on addons.mozilla.org.

+ +
+
+
+
Firebug
+
Дуже популярний і потужний інструмент веб-розробки, включаючи відладчик JavaScript, переглядач і редактор HTML і CSS, а також мережний монітор.
+
DOM Inspector
+
Перевірте, перегляньте та відредагуйте DOM веб-сторінок або вікон XUL.
+
Web Developer
+
Додає до браузера меню та панель інструментів з різними інструментами веб-розробника.
+
+
+ +
+
+
Webmaker Tools
+
Набір інструментів, розроблених Mozilla, спрямований на людей, які починають роботу з веб-розробкою.
+
W3C Validators
+
Веб-сайт W3C містить ряд інструментів для перевірки правильності вашого веб-сайту, включаючи його HTML та CSS.
+
ESLint
+
JavaScript linting and code analysis tool.
+
+
+
diff --git a/files/uk/tools/network_monitor/index.html b/files/uk/tools/network_monitor/index.html new file mode 100644 index 0000000000..7f3fb7d1f7 --- /dev/null +++ b/files/uk/tools/network_monitor/index.html @@ -0,0 +1,53 @@ +--- +title: Монітор мережі +slug: Інструменти/Network_Monitor +translation_of: Tools/Network_Monitor +--- +
{{ToolsSidebar}}
+ +
Монітор мережі показує всі мережні запити Firefox (наприклад, коли він завантажує сторінку або виконується XMLHttpRequests), тривалість і деталі кожного запиту.
+ +

Відкривання Монітору мережі

+ +

Є декілька способів відкрити Монітор мережі:

+ + + +

У нижній частині вікна браузера з'явиться Монітор мережі. Щоб побачити запити, перезавантажте сторінку:

+ +

+ +

Поки панель інструментів відкрита, Монітор мережі записує мережні запити, навіть якщо він сам не вибраний. Це значить, що Ви можете почати налагодження сторінки, наприклад, у Веб-консолі, а потім перейти до Монітора мережі, щоб побачити мережну активність без перезавантаження сторінки.

+ +

Огляд користувацького інтерфейсу (UI)

+ +

Користувацький інтерфейс складається з чотирьох основних частин :

+ + + +

+ + + +

Performance analysis view

+ +

Робота з Монітором мережі

+ +

Наступні статті охоплюють різні аспекти використання Монітора мережі:

+ + diff --git a/files/uk/tools/network_monitor/performance_analysis/index.html b/files/uk/tools/network_monitor/performance_analysis/index.html new file mode 100644 index 0000000000..0ead428209 --- /dev/null +++ b/files/uk/tools/network_monitor/performance_analysis/index.html @@ -0,0 +1,36 @@ +--- +title: Аналіз швидкодії +slug: Інструменти/Network_Monitor/Performance_Analysis +translation_of: Tools/Network_Monitor/Performance_Analysis +--- +

{{ToolsSidebar}}

+ +

Монітор мережі містить інструмент Аналізу швидкодії, який допоможе Вам показати, скільки часу необхідно потратити браузеру для завантаження різних частин Вашого сайту.

+ +

Використання інструменту Аналізу швидкодії

+ +

Для запуску інструменту Аналізу швидкодії, натисніть значок секундоміра на панелі інструментів.

+ +

(Крім того, якщо Ви тільки що відкрили Монітор мережі, і він ще не заповнений списком запитів, у головному вікні з'явиться значок секундоміра.)

+ +

Після цього Монітор мережі завантажує сайт двічі: один раз з пустим кешем браузера і один раз із запущеним кешем браузера. Це імітує роботу першого разу, коли користувач відвідує ваш сайт, і наступні відвідування. Інструмент відображає результати для кожного запуску поруч, або вертикально, якщо вікно веб-переглядача звужене:

+ +

+ +

Результати для кожного виконання підсумовуються в таблиці та круговій діаграмі. Таблиці групують ресурси за типом і показують загальний розмір кожного ресурсу і загальний час, необхідний для їх завантаження. Супровідна до таблиць кругова діаграма показує відносний розмір кожного типу ресурсу.

+ +

Щоб повернутися до списку мережних запитів Монітору мережі натисніть кнопку "Назад", що знаходиться ліворуч.

+ +

Якщо натиснути на фрагмент "пирога", Ви перейдете до Монітора мережі для цього запуску, а фільтр автоматично буде застосовано для перегляду лише цього типу ресурсу.

+ +

Можливості Монітору мережі

+ +

У наступних статтях розглядаються різні аспекти використання Монітору мережі :

+ + diff --git a/files/uk/tools/network_monitor/recording/index.html b/files/uk/tools/network_monitor/recording/index.html new file mode 100644 index 0000000000..223fa5291b --- /dev/null +++ b/files/uk/tools/network_monitor/recording/index.html @@ -0,0 +1,32 @@ +--- +title: Записування мережного трафіку +slug: Інструменти/Network_Monitor/recording +translation_of: Tools/Network_Monitor/recording +--- +

{{ToolsSidebar}}

+ +

Можна призупинити та відновити моніторинг мережного трафіку за допомогою кнопки паузи.

+ +

Призупинення та продожвення запису журналу мережі

+ +

У Монітора мережі є кнопка, яка призупиняє та відновлює запис мережного трафіку поточної сторінки. Це корисно в ситуаціях, коли, наприклад, Ви намагаєтеся отримати стабільний вигляд сторінки для цілей налагодження, але за нормальних обставин список продовжує наповнюватися внаслідок  постійних мережних запитів. Кнопка паузи дозволяє переглядати певний знімок.

+ +

Цю кнопку можна знайти в лівій частині головної панелі інструментів Монітору мережі. Вона виглядає як типова кнопка паузи — .

+ +

Ви можете побачити її тут у контексті:

+ +

+ +

Натиснувши цю кнопку, вона змінюється на піктограму відтворення. Продовжити запис мережного трафіку можна шляхом повторного її натискання.

+ +

Можливості Монітору мережі

+ +

У наступних статтях розглядаються різні аспекти використання Монітору мережі:

+ + diff --git a/files/uk/tools/network_monitor/request_details/index.html b/files/uk/tools/network_monitor/request_details/index.html new file mode 100644 index 0000000000..61e496cc72 --- /dev/null +++ b/files/uk/tools/network_monitor/request_details/index.html @@ -0,0 +1,188 @@ +--- +title: Подробиці мережних запитів +slug: Інструменти/Network_Monitor/request_details +translation_of: Tools/Network_Monitor/request_details +--- +

{{ToolsSidebar}}

+ +

Панель подробиць мережних запитів викликається при виборі (натисканні) мережного запиту у списку. Ця панель надає більш детальну інформацію про запит.

+ +

Подробиці мережних запитів

+ +

Натискання на рядку відображає нову панель у правій частині Монітора мережі, яка надає більш детальну інформацію про запит.

+ +

+ +

Вкладки у верхній частині цієї області дозволяють переключатися між наступними сторінками:

+ + + +

Натискання крайньої правої піктограми на панелі інструментів  ховає панель подробиць.

+ +

Заголовки (Headers)

+ +

На цій вкладці наведено основну інформацію про запит:

+ +

+ +

Ця інформація містить:

+ + + +

Ви можете відфільтрувати відображені заголовки:

+ +

+ +

Поруч із кожним заголовком у рядку коду статусу з'явиться піктограма знаку питання - це посилання на додаткову інформацію про цей код статусу в документації MDN заголовків HTTP.

+ +

Куки (Cookies)

+ +

На цій вкладці наведено повну інформацію про всі файли cookie, надіслані разом із запитом або відповіддю:

+ +

+ +

Як і у заголовках, тут можна відфільтрувати список файлів куків, що потрібно показати. Відображається повний список атрибутів кука (див. Наведений нижче знімок екрана з прикладів cookie Response з додатковими атрибутами).

+ +

cookies panel in firefox devtools network monitor, showing a number of cookie attributes including samesite

+ +

Атрибут samesite доступний починаючи з Firefox 62 ({{bug("1452715")}}).

+ +

Параметри (Params)

+ +

На цій вкладці відображаються параметри GET і дані POST запиту:

+ +

+ +

Відповідь (Response)

+ +

Повний зміст відповіді. Якщо відповідь - HTML, JS або CSS, вона буде показана як текст:

+ +

+ +

Якщо відповідь у форматі JSON, вона буде відображатися як об'єкт:

+ +

+ +

Якщо відповідь - це зображення, на вкладці відображається попередній перегляд:

+ +

+ +

Кеш (Cache)

+ +

Якщо відповідь буде кешованою (тобто 304), на вкладці Кеш буде показано відомості про цей кешований ресурс.

+ +

+ +

Ці деталі містять:

+ + + +

HTML перегляд (preview)

+ +

Якщо відповідь є HTML, на вкладці "Відповідь" ("Response"), вище "Корисного навантаження на відповідь" (response payload), з'являється попередній візуальний перегляд HTML.

+ +

+ +

Розклад (Timings)

+ +

Вкладка «Розклад» (Timings) розбиває мережний запит на наступний набір етапів, означених у специфікації Архіву HTTP :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
НазваОпис
Заблоковано (Blocked) +

Час, проведений в черзі в очікуванні мережного підключення.

+ +

Браузер накладає обмеження на кількість одночасних з'єднань, які можуть бути зроблені до одного серверу. Типово, у Firefox це значення рівне 6, але його можна змінити за допомогою налаштувань  network.http.max-persistent-connections-per-server . Якщо використовуються всі підключення, браузер не може завантажувати більше ресурсів, доки з'єднання не буде вивільнено.

+
Розв'язання DNS (DNS resolution)Час, що потребувався для розв'язання імені хоста.
З'єднання (Connecting)Час, що потребувався для створення з'єднання TCP.
Надсилання (Sending)Час, що потребувався для передачі HTTP-запиту на сервер.
Очікування (Waiting)Очікування відповіді від сервера.
Одержання (Receiving)Час, що потребувався для читання всієї відповіді від сервера (або кешу).
+ +

Ця вкладка   представляє більш детальний, анотований, перегляд смуги часу для цього запиту, що показує, як загальний час очікування розділяється на різні етапи:

+ +

+ +

Безпека (Security)

+ +

Якщо сайт обслуговується через HTTPS, Ви отримуєте додаткову вкладку під назвою "Безпека" ("Security"). Вона містить відомості про захищене з'єднання, що використовується, включно з назвою протоколу, набору шифрів і деталями сертифікату:

+ +

+ +

На вкладці "Безпека" відображається попередження про слабкі місця безпеки. Наразі він попереджає про два слабкі місця:

+ +
    +
  1. Використання SSLv3 замість TLS
    2. +
  2. Використання шифру RC4
    3. +
+ +

+ +

Трасування стека (Stack trace)

+ +

На цій вкладці відображається трасування стеків для відповідей, які мають стекові сліди.

+ +

+ +

Можливості Монітору мережі

+ +

У наступних статтях розглядаються різні аспекти використання Монітору мережі:

+ + diff --git a/files/uk/tools/network_monitor/request_list/index.html b/files/uk/tools/network_monitor/request_list/index.html new file mode 100644 index 0000000000..5225de12df --- /dev/null +++ b/files/uk/tools/network_monitor/request_list/index.html @@ -0,0 +1,345 @@ +--- +title: Список мережних запитів +slug: Інструменти/Network_Monitor/request_list +translation_of: Tools/Network_Monitor/request_list +--- +

{{ToolsSidebar}}

+ +

Тут відображається список всіх запитів мережі, зроблених під час завантаження сторінки.

+ +

Список мережних запитів

+ +

Типово, Монітор мережі показує список всіх мережних запитів, зроблених під час завантаження сторінки. Кожен запит відображається у своєму рядку:

+ +

Типово, кожного разу, як Ви переходите до нової сторінки або перезавантажуєте поточну сторінку, мережний монітор очищається. Ви можете змінити цю поведінку, встановивши прапорець "Постійне журналювання" ("Enable persistent logs") в Налаштуваннях.

+ +

Стовпці для мережних запитів

+ +

Ви можете показувати/приховувати потрібні стовпці шляхом їх вибору в контекстному меню (викликається правою кнопкою миші над заголовком) . Пункт контекстного меню "Скинути стовпці" ("Reset Columns") призначений для скидання переліку стовпців в початкову конфігурацію. Нижче наведено перелік усіх доступних стовпців:

+ + + +

Кожен стовпець панелі інструментів у верхній частині має мітку, натискання на якій за даним стовпцем сортуються всі запити.

+ +

Ескізи зображень

+ +

Якщо запит стосується зображення, наведення на назву файлу показує в підказці попередній перегляд зображення :

+ +

+ +

Піктограми безпеки

+ +

У стовпці "Домен" Монітору мережі відображаються піктограми:

+ +

+ +

Це надає додаткову інформацію про стан безпеки запиту: 

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ПіктограмаЗначення
HTTPS
Слабкий HTTPS (наприклад, було використано слабке шифрування)
Помилковий HTTPS (наприклад, сертифікат є недійсним)
HTTP
Localhost
Вказує на те, що URL належить до відомого трекера, тому буде заблокований, якщо ввімкнено блокування вмісту.
+ +

Для слабких і помилкових запитів HTTPS більш детальну інформацію про проблему можна побачити у  вкладці "Безпека".

+ +

Стовпець "Причина"

+ +

У стовпці "Причина" вказано причину запиту. Зазвичай це значення досить очевидне, і воно корелюється зі стовпцем "Тип". Найпоширенішими значеннями є:

+ + + +

Шкала часу (Timeline)

+ +

У списку запитів також відображається шкала часу для різних частин кожного запиту.

+ +

+ +

Кожній часовій шкалі надається горизонтальне положення у своєму рядку відносно інших мережних запитів. Таким чином, можна побачити загальний час, необхідний для завантаження сторінки. Більш детальну інформацію про кольорове кодування, що використовується тут, див. у розділі Часові діаграми.

+ +

Починаючи з Firefox 45, шкала часу також містить дві вертикальні лінії:

+ + + +

Фільтрація запитів

+ +

Можна фільтрувати запити за типом вмісту, за типом запитів XMLHttpRequests або WebSocket, за URL, або за властивостями запиту. 

+ +

Фільтрація за типом вмісту

+ +

Щоб відфільтрувати за типом вмісту, використовуйте відповідні кнопки з панелі інструментів.

+ +

Фільтрація XHR

+ +

Для відображення виключно запитів {{Glossary("XHR (XMLHttpRequest)", "XHR")}}, використовується кнопка "XHR" з панелі інструментів.

+ +

Фільтрація WebSockets

+ +

Для відображення виключно з'єднань WebSocket, використовується кнопка "WS" з панелі інструментів.

+ +

Крім того, може бути корисним додатковий компонент WebSocket Sniffer. 

+ +

Фільтрація за URL

+ +

Для фільтрації за URL, використовуйте пошукове поле з панелі інструментів.  Клацніть в межах пошукового поля, або натисніть Ctrl + F (або Cmd + F в Mac),  почніть введення. Список мережних запитів буде відфільтровано для включення лише тих запитів, які містять рядок фільтра в полях "Домен" або "Файл". 

+ +

Починаючи з Firefox 45, можна фільтрувати запити, що не містять означені рядки фільтрів, заповнивши запит оператором "-". Наприклад, запит "-google.com" покаже всі запити, що не містять "google.com" у своїй URL-адресі. 

+ +

Фільтрація за властивістю

+ +

Щоб відфільтрувати за певними властивостями запиту, скористайтеся  пошуковим полем з панелі інструментів. Пошукове поле розпізнає вказані ключові слова, які можна використовувати для фільтрації запитів за вказаними властивостями запиту. За цими ключовими словами слідують двокрапка та відповідне значення фільтра. Значення фільтра нечутливе до регістру. Встановлення мінуса (-) скасовує фільтр. Ви можете комбінувати різні фільтри, розділяючи їх пробілами.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Ключове словоЗначенняПриклад
status-codeПоказує ресурси з вказаним кодом статусу HTTP. status-code:304
methodПоказує ресурси з вказаним методом запиту HTTP.method:post
domainПоказує ресурси, що надходять з вказаного домену.domain:mozilla.org
remote-ipПоказує ресурси, що надходять з сервера зі вказаним IP.remote-ip:63.245.215.53
+ remote-ip:[2400:cb00:2048:1::6810:2802]
causeПоказує ресурси, що відповідають вказаному типу причини. Типи можна знайти в описі стовпця "Причина" cause:js
+ cause:stylesheet
+ cause:img
transferredПоказує ресурси, що мають вказаний, або з близьким до вказаного розмір переданих даних. Як суфікс для кілобайт використовується літера k , мегабайт - m. Наприклад значення 1k еквівалентно 1024.transferred:1k
sizeПоказує ресурси, що мають вказаний розмір (після розпакування) або розмір, близький до вказаного. Як суфікс для кілобайт використовується літера k , мегабайт - m. Наприклад значення 1k еквівалентно 1024.size:2m
larger-than +

Показує ресурси, які перевищують вказаний розмір у байтах. Як суфікс для кілобайт використовується літера k , мегабайт - m. Наприклад значення 1k еквівалентно 1024.

+ 		larger-than:2000
+ -larger-than:4k
mime-typeПоказує ресурси, які відповідають вказаному типу MIME.mime-type:text/html
+ mime-type:image/png
+ mime-type:application/javascript
isis:cached і is:from-cache показує лише ресурси, що надходять з кешу.
+ is:running показує лише ресурси, які зараз передаються.		is:cached
+ -is:running
schemeПоказує ресурси, передані за вказаною схемою.scheme:http
has-response-headerПоказує ресурси, які містять вказаний заголовок відповіді HTTP.has-response-header:cache-control
+ has-response-header:X-Firefox-Spdy
set-cookie-domainПоказує ресурси, які мають заголовок Set-Cookie з атрибутом Domain, що відповідає вказаному значенню.set-cookie-domain:.mozilla.org
set-cookie-nameПоказує ресурси, які мають заголовок Set-Cookie з ім'ям, що відповідає вказаному значенню.set-cookie-name:_ga
set-cookie-valueПоказує ресурси, які мають заголовок Set-Cookie зі значенням, що відповідає вказаному.set-cookie-value:true
regexpПоказує ресурси, що мають URL, що відповідає вказаному {{Glossary("regular expression")}}.regexp:\d{5}
+ regexp:mdn|mozilla
+ +

Контекстне меню

+ +

Контекстне меню рядка містить наступні пункти:

+ + + +

Редагувати і надіслати заново (Edit and Resend)

+ +

Відкриває редактор, що дозволяє редагувати метод, URL-адресу, параметри та заголовки для запиту та повторно його надіслати. 

+ +

Відкрити в новій вкладці (Open in New Tab)

+ +

Відправляє запит у новій вкладці - дуже корисно для налагодження асинхронних запитів.

+ +

Копіювати як cURL (Copy as cURL)

+ +

Вибір цього пункту меню приводить до копіювання мережного запиту в буфер обміну як команди cURL, після чого можна виконати його з командного рядка. Команда може містити такі параметри:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
-X [METHOD]Якщо не використовується метод GET та POST
--dataДля параметрів запиту, закодованих URL-адресами
--data-binaryДля багатокомпонентних параметрів запиту
--http/VERSIONЯкщо HTTP не є версією 1.1
-IЯкщо використовується метод HEAD
-H +

По одному для кожного заголовка запиту.

+ +

Починаючи з Firefox 34, якщо вказаний заголовок "Accept-Encoding", команда cURL буде містити  --compressed замість -H "Accept-Encoding: gzip, deflate". Це значить, що відповідь буде автоматично розпаковуватися.

+
+ +

Копіювати/зберегти все як HAR (Copy/Save All As HAR)

+ +

Ці пункти створюють HTTP Archive (HAR) для всіх запитів списку. Формат HAR дозволяє експортувати детальну інформацію про мережні запити. "Копіювати все як HAR" ("Copy All As HAR") копіює дані в буфер обміну. "Зберегти все як HAR"("Save All As HAR") відкриває діалогове вікно, за допомогою якого можна зберегти архів на диск.

+ +

У новому випадаючому меню "HAR" також містяться команди "Копіювати все як HAR" та "Зберегти все як HAR", а також пункт "Імпортувати ...".

+ +

+ +

Можливості Монітору мережі

+ +

У наступних статтях розглядаються різні аспекти використання Монітору мережі :

+ + diff --git a/files/uk/tools/network_monitor/throttling/index.html b/files/uk/tools/network_monitor/throttling/index.html new file mode 100644 index 0000000000..6c1136ce82 --- /dev/null +++ b/files/uk/tools/network_monitor/throttling/index.html @@ -0,0 +1,97 @@ +--- +title: Обмеження швидкості передачі +slug: Інструменти/Network_Monitor/Throttling +translation_of: Tools/Network_Monitor/Throttling +--- +

{{ToolsSidebar}}

+ +

Монітор мережі дозволяє обмежити швидкість мережі, щоб емулювати різні швидкості з'єднання. Це зроблено з метою приблизної оцінки того, як Ваша програма буде поводитися з різними типами підключень.

+ +

Обмеження швидкості передачі (Throttling)

+ +

Панель інструментів містить випадаюче меню Throttling, за допомогою якого Ви можете зменшити швидкість мережі, щоб емулювати різні умови. Просто виберіть опцію з меню, і вона буде зберігатися після  перезавантаження.

+ +

+ +

Емульовані характеристики:

+ + + +

У таблиці нижче перераховані значення, пов'язані з кожним типом мережі. Однак, слід відмітити, що не варто покладатися на цю функцію для точних вимірювань продуктивності; вона призначена для приблизного уявлення про роботу користувача в різних умовах.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ВибірШвидкість завантаженняШвидксть вивантаженняМінімальна затримка (ms)
GPRS50 KB/s20 KB/s500
Regular 2G250 KB/s50 KB/s300
Good 2G450 KB/s150 KB/s150
Regular 3G750 KB/s250 KB/s100
Good 3G1.5 MB/s750 KB/s40
Regular 4G/LTE4 MB/s3 MB/s20
DSL2 MB/s1 MB/s5
Wi-Fi30 MB/s15 MB/s2
+ +

Можливості Монітору мережі

+ +

У наступних статтях розглядаються різні аспекти використання Монітору мережі :

+ + diff --git a/files/uk/tools/network_monitor/toolbar/index.html b/files/uk/tools/network_monitor/toolbar/index.html new file mode 100644 index 0000000000..17d1e32a47 --- /dev/null +++ b/files/uk/tools/network_monitor/toolbar/index.html @@ -0,0 +1,53 @@ +--- +title: Панель інструментів Монітору мережі +slug: Інструменти/Network_Monitor/toolbar +translation_of: Tools/Network_Monitor/toolbar +--- +

{{ToolsSidebar}}

+ +

Монітор мережі надає дві області панелей інструментів: одну над основним розділом, а іншу під ним.

+ +

Панель інструментів

+ +

Панель інструментів знаходиться у верхній частині головного вікна Монітора мережі.

+ +

+ +

На ній знаходяться:

+ + + +

+ +

Друга область панелі інструментів, що знаходиться нижче Монітора мережі, містить:

+ + + +

Можливості Монітору мережі

+ +

У наступних статтях розглядаються різні аспекти використання Монітору мережі:

+ + diff --git a/files/uk/tools/web_console/console_messages/index.html b/files/uk/tools/web_console/console_messages/index.html new file mode 100644 index 0000000000..8ec5ba7826 --- /dev/null +++ b/files/uk/tools/web_console/console_messages/index.html @@ -0,0 +1,385 @@ +--- +title: Повідомлення консолі +slug: Інструменти/Web_Console/Console_messages +translation_of: Tools/Web_Console/Console_messages +--- +
{{ToolsSidebar}}
+ +

Більшіу частину Веб-консолі займає область відображення повідомлень:

+ +

+ +

Кожне повідомлення відображається окремим рядком:

+ +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TimeЧас, коли повідомлення було записане. Це поле за замовченням не відображається: Ви можете керувати опцією "Увімкнути відбитки часу" використовуючи налаштування панелі інструментів.
Category +

Категорія: показує на те, що це за повідомлення:

+ +
    +
  • Чорний: Мережний запит
    • +
  • Синій: попередження/помилка/повідомлення CSS
    • +
  • Помаранчевий: попередження/помилка JavaScript
    • +
  • Червоний: попередження/помилка безпеки
    • +
  • Зелений: повідомлення журналу серверу
    • +
  • Світло-сірий : повідомлення API Консолі
    • +
  • Темно-сірий: вхід/вихід інтерактивного інтерпретатору командного рядку
    • +
+
TypeДля всіх повідомлень, за винятком мережних запитів і інтерактивних входів/виходів, піктограма вказує на тип повідомлення: помилка (X), попередження (!) або інфомаційне повідомлення (i).
MessageТекст повідомлення.
Number of occurrencesЯкщо рядок, який генерує попередження або помилку, виконується більше одного разу, то він реєструється тільки один раз. Цей лічильник показує, скільки разів генерується дане повідомлення.
Filename and line number +

Для повідомлень JavaScript, CSS і API консолі повідомлення можна простежити до рядку коду, що повязаний з ним. Консоль надає посилання на ім'я файлу та номер рядку, що генерує повідомлення.

+ +

Починаючи з Firefox 36, це поле також показує номер стовпчика.

+
+ +

За замовчуванням консоль очищається кожного разу, коли ви переходите до нової сторінки або перезавантажуєте поточну сторінку. Щоб змінити цю поведінку, позначте пункт "Постійне журналювання" в Налаштуваннях.

+ +

Категорії повідомлень

+ +

Мережні

+ +
+

Network log messages are not shown by default. Use the filtering feature to show them.

+
+ +

Network requests are logged with a line that looks like this:

+ +

+ + + + + + + + + + + + + + + + + + + + + + + + +
TimeThe time the message was recorded.
CategoryIndicates that the message is an HTTP request.
Method +

The specific HTTP request method.

+ +

If the request was made as an XMLHttpRequest, there's an additional note indicating this:

+ +

+
URIThe target URI.
SummaryThe HTTP version, status code, and time taken to complete.
+ +

Viewing network request details

+ +

If you click on the message, you'll be redirected to the Network panel where the request is selected and more request and response details are shown within the side panel at the right side. In versions prior to Firefox 43 this information was shown in a separate popup.

+ +

Starting in Firefox 48, you can access much of this detail inline, without leaving the Web Console. Network request entries get a disclosure arrow next to them. Click this to see:

+ + + +

{{EmbedYouTube("cFlcWzJ9j4I")}}

+ +

JS

+ +

JavaScript messages look like this:

+ +

+ + + +
New in Firefox 49
+ +

JavaScript errors contain a "Learn more" link that takes you to the JavaScript error reference containing additional advice for fixing issues:

+ +

{{EmbedYouTube("OabJc2QR6o0")}}

+ +

Source maps

+ +
New in Firefox 55
+ +

From Firefox 55, the Web Console understands source maps. This means that if your JavaScript sources are compressed, you can supply a source map for them. Then any messages or errors your source generates will show up in the Web Console with a link back to the original source, not the compressed version.

+ +

CSS

+ +
+

Note: CSS warnings and reflow messages are not shown by default, for performance reasons (see {{bug(1452143)}}). Use the filtering feature to show them.

+
+ +

CSS messages look like this:

+ +

+ +

Reflow events

+ +

The Web Console also logs reflow events under the CSS category. A reflow is the name given to the operation in which the browser calculates the layout of all or part of the page. Reflows occur when a change has happened to a page that the browser thinks affects the layout. Many events can trigger reflows, including: resizing the browser window, activating pseudoclasses like :hover, or manipulating the DOM in JavaScript.

+ +

Because reflows can be computationally expensive and directly affect the user interface, they can have a big impact on the responsiveness of a website or web app. By logging reflow events the Web Console can give you insight into when reflow events are being triggered, how long they take to execute and, if the reflows are synchronous reflows triggered from JavaScript, which code triggered them.

+ +

Reflow events are logged as "Reflow" messages, as distinct from CSS errors or warnings. By default, they are disabled. You can enable them by clicking the "CSS" button in the toolbar and selecting "Reflows".

+ +

Each message is labeled "reflow" and shows the time taken to execute the reflow:

+ +

If the reflow is a synchronous reflow triggered from JavaScript, it also shows a link to the line of code that triggered the reflow:

+ +

Click the link to open the file in the Debugger.

+ +

Synchronous and asynchronous reflows

+ +

If a change is made that invalidates the current layout - for example, the browser window is resized or some JavaScript modifies an element's CSS - the layout is not recalculated immediately. Instead, the reflow happens asynchronously, the next time the browser decides it needs to be done (generally, the next time the browser repaints). In this way the browser can save up a collection of invalidating changes and recalculate their effect at once.

+ +

However, if some JavaScript code reads a style that has been modified, then the browser must perform a synchronous reflow in order to calculate the computed style to return. For example, code like this will cause an immediate, synchronous, reflow, when it calls window.getComputedStyle(thing).height:

+ +
var thing = document.getElementById("the-thing");
+thing.style.display = "inline-block";
+var thingHeight = window.getComputedStyle(thing).height;
+ +

Because of this, it's a good idea to avoid interleaving write and read calls to an element's styles when manipulating the DOM, because every time you read back a style that has been invalidated by a previous write call, you force a synchronous reflow.

+ +

Безпеки

+ +

Security warnings and errors look like this:

+ +

The security messages shown in the Web Console help developers find potential or actual vulnerabilities in their sites. Additionally, many of these messages help educate developers because they end with a “Learn More” link that takes you to a page with background information and advice for mitigating the issue.

+ +

The complete list of security messages is as follows:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MessageDetails
Blocked loading mixed active contentThe page contained mixed active content: that is, the main page was served over HTTPS, but asked the browser to load "active content", such as scripts, over HTTP. The browser blocked this active content. See Mixed Content for more details.
Blocked loading mixed display contentThe page contained mixed display content: that is, the main page was served over HTTPS, but asked the browser to load "display content", such as images, over HTTP. The browser blocked this display content. See Mixed Content for more details.
Loading mixed (insecure) active content on a secure pageThe page contained mixed active content: that is, the main page was served over HTTPS, but asked the browser to load "active content", such as scripts, over HTTP. The browser loaded this active content. See Mixed Content for more details.
Loading mixed (insecure) display content on a secure pageThe page contained mixed display content: that is, the main page was served over HTTPS, but asked the browser to load "display content", such as images, over HTTP. The browser loaded this display content. See Mixed Content for more details.
This site specified both an X-Content-Security-Policy/Report-Only header and a Content-Security-Policy/Report-Only header. The X-Content-Security-Policy/Report-Only header(s) will be ignored.See Content Security Policy for more details.
The X-Content-Security-Policy and X-Content-Security-Report-Only headers will be deprecated in the future. Please use the Content-Security-Policy and Content-Security-Report-Only headers with CSP spec compliant syntax instead.See Content Security Policy for more details.
Password fields present on an insecure (http://) page. This is a security risk that allows user login credentials to be stolen.Pages containing login forms must be served over HTTPS, not HTTP.
Password fields present in a form with an insecure (http://) form action. This is a security risk that allows user login credentials to be stolen.Forms containing password fields must submit them over HTTPS, not HTTP.
Password fields present on an insecure (http://) iframe. This is a security risk that allows user login credentials to be stolen.iframes containing login forms must be served over HTTPS, not HTTP.
The site specified an invalid Strict-Transport-Security header.See HTTP Strict Transport Security for more details.
+

This site makes use of a SHA-1 Certificate; it's recommended you use certificates with signature algorithms that use hash functions stronger than SHA-1.

+ 		+

The site uses a certificate whose signature uses the SHA-1 hash algorithm.

+ +

SHA-1 is still still widely used in certificates, but it is starting to show its age. Web sites and Certification Authorities are encouraged to switch to stronger hash algorithms in future. See the Weak Signature Algorithm article for more details.

+ +

Note that the SHA-1 certificate may not be your site's own certificate, but may be the certificate belonging to a Certification Authority that was used to sign your site's certificate.

+
+ +

Bug 863874 is the meta-bug for logging relevant security messages to the Web Console. If you have more ideas for useful features like the ones discussed here, or are interested in contributing, check out the metabug and its dependencies.

+ +

Інформаційні

+ +
+

Messages logged from Shared Workers, Service Workers, add-ons, and Chrome Workers are not shown by default. Use the filtering feature to show them.

+
+ +

The Logging category includes messages logged using the Console API.
+

+ +

The Web console supports the following Console API messages:

+ + + +

The console prints a stack trace for all error messages, like this:

+ +
function foo() {
+  console.error("it explodes");
+}
+
+function bar() {
+  foo();
+}
+
+function doStuff() {
+ bar();
+}
+
+doStuff();
+ +

+ +

Серверні

+ +
+

Server-side log messages was introduced in Firefox 43, but removed in Firefox 56. You can install the Chrome Logger extension to (re)-enable the feature.

+
+ +

With the Chrome Logger extension, Web Console can display messages sent from the server. This enables you to use the Web Console to debug server-side code.

+ +

It uses the Chrome Logger protocol. Briefly, the way it works is:

+ + + +

To find a suitable library for your server code, see the Chrome Logger documentation.

+ +

Входи/виходи командного рядку

+ +

Commands sent to the browser using the Web Console's command line, and the corresponding responses, are logged using lines like this:

+ +

The dark gray bar indicates that these are input/output messages, while the direction of the arrow discriminates between input and output.

+ +

Filtering and searching

+ +

Filtering by category

+ +

You can use the toolbar along the top to constrain the results displayed.

+ +

To see only messages of particular categories, click the button labeled with that category ("Net", "CSS", and so on). Clicking the main part of the button toggles that category on or off, while clicking the arrow on the right gives you more fine-grained filter options within that category:

+ + + +

Filtering by text

+ +

To see only messages that contain a specific string, type in the text box labeled "Filter output".

+ +

Clearing the log

+ +

Finally, you can use this toolbar to clear the log. Before Firefox 48, this is a button labeled "Clear" on the right of the toolbar. From Firefox 48 it's a trashcan icon on the left.

diff --git a/files/uk/tools/web_console/index.html b/files/uk/tools/web_console/index.html new file mode 100644 index 0000000000..4af03a5978 --- /dev/null +++ b/files/uk/tools/web_console/index.html @@ -0,0 +1,37 @@ +--- +title: Веб-консоль - Web Console +slug: Інструменти/Web_Console +translation_of: Tools/Web_Console +--- +

Веб-консоль:

+ +
    +
  1. Реєструє інформацію, пов'язану з веб-сторінкою: мережні запити, JavaScript, CSS, помилки та попередження безпеки, а також повідомлення про помилки, попередження та інформаційні повідомлення, явно ввімкнені за допомогою коду JavaScript, запущеного в контексті сторінки
    2. +
  2. Дозволяє взаємодіяти з веб-сторінкою, виконуючи вирази JavaScript у контексті сторінки
    3. +
+ +

{{EmbedYouTube("C6Cyrpkb25k")}}

+ +
+
+
+
Відкриття Веб-консолі
+
Як запустити Веб-консоль.
+
Інтерпретатор командного рядку
+
Як взаємодіяти з документом, використовуючи Консоль.
+
Розділенння консолі
+
Використання Консолі разом з іншими інструментами.
+
+
+ +
+
+
Повідомлення консолі
+
Докладна інформація про реєетрацію повідомлень Консолі.
+
Збагачення виведення
+
Переглядайте та взаємодійте з об'єктами, що реєструються Консоллю.
+
Комбінації клавіш
+
Посилання на довідку.
+
+
+
diff --git a/files/uk/tools/web_console/split_console/index.html b/files/uk/tools/web_console/split_console/index.html new file mode 100644 index 0000000000..35f6ed06ab --- /dev/null +++ b/files/uk/tools/web_console/split_console/index.html @@ -0,0 +1,22 @@ +--- +title: Розділення консолі +slug: Інструменти/Web_Console/Split_console +translation_of: Tools/Web_Console/Split_console +--- +
{{ToolsSidebar}}
+ +
Консоль можна використовувати поряд з іншими інструментами. Поки ви перебуваєте в іншому інструменті на панелі інструментів, просто натисніть клавішу Esc або виберіть команду "Показати розділену консоль" в меню панелі інструментів. Панель інструментів тепер з'явиться розділеною частиною, на ній буде розміщено оригінальний інструмент і веб-консоль.
+ +

+

Ви можете закрити розділення консолі повторним натисканням Esc, або вибравши команду меню "Сховати розділення консолі".

+

+ +

+ +

{{EmbedYouTube("G2hyxhPHyXo")}}

+ +

В якості скорочення назви елемента, вибраного в інспекторі, як завжди використовується $0:

+ +

Якщо Ви використовуєте розділену консоль з відладчиком, область видимості консолі - це поточний кадр стека. Отже, якщо Ви потрапили до точки переривання у функції, область видимості буде визначатися цією функцією. Ви отримаєте автозаповнення для об'єктів, означених у функції, і можете легко змінювати їх на льоту:

+ +

diff --git a/files/uk/tools/web_console/ui_tour/index.html b/files/uk/tools/web_console/ui_tour/index.html new file mode 100644 index 0000000000..dc99cde6fc --- /dev/null +++ b/files/uk/tools/web_console/ui_tour/index.html @@ -0,0 +1,25 @@ +--- +title: Відкриття Веб-консолі +slug: Інструменти/Web_Console/Opening_the_Web_Console +translation_of: Tools/Web_Console/UI_Tour +--- +
{{ToolsSidebar}}
+ +

Для відкриття Веб-консолі:

+ + + +

В нижній частині вікна веб-переглядача з'явиться Панель інструментів з активованою веб-консоллю (на панелі інструментів DevTools вона просто називається "консоль"):

+ +

+ +

Інтерфейс Веб-консолі розділяється на три горизонтальні секції:

+ + diff --git "a/files/uk/web/api/api_\320\262\321\226\320\264\320\276\320\261\321\200\320\260\320\266\320\265\320\275\320\275\321\217_\321\201\321\202\320\276\321\200\321\226\320\275\320\272\320\270/index.html" "b/files/uk/web/api/api_\320\262\321\226\320\264\320\276\320\261\321\200\320\260\320\266\320\265\320\275\320\275\321\217_\321\201\321\202\320\276\321\200\321\226\320\275\320\272\320\270/index.html" deleted file mode 100644 index 6675a3783b..0000000000 --- "a/files/uk/web/api/api_\320\262\321\226\320\264\320\276\320\261\321\200\320\260\320\266\320\265\320\275\320\275\321\217_\321\201\321\202\320\276\321\200\321\226\320\275\320\272\320\270/index.html" +++ /dev/null @@ -1,201 +0,0 @@ ---- -title: API відображення сторінки -slug: Web/API/API_відображення_сторінки -tags: - - API - - API відображення сторінки - - visibilityState - - visibilitychange - - відображення сторінки - - процеси скритої закладки - - фоновий режим -translation_of: Web/API/Page_Visibility_API ---- -
{{DefaultAPISidebar("Page Visibility API")}}
- -
- -

При перегляді сайту за допомогою вкладок існує ймовірність того, що будь-яка з веб-сторінок знаходиться в фоновому режимі і тому користувач її не бачить. API відображення сторінки надає події, які ви можете відстежити, щоб дізнатися, коли документ стає видимим або прихованим, а також дозволяє отримати поточний стан прихованості/видимості сторінки.

- -
-

Примітка: API відображення сторінки є особливо корисним для економії ресурсів та підвищення продуктивності, дозволяючи сторінці уникнути виконання непотрібних завдань, коли документ не є видимим.

-
- -

Коли користувач згортає вікно або перемикається на іншу вкладку, API посилає подію {{event("visibilitychange")}}, щоб передати слухачам інформацію про зміну стану сторінки. Ви можете виявити подію і виконати деякі дії або нічого не виконувати. Наприклад, якщо ваш веб-додаток програє відео, він може поставити відео на паузу, коли користувач переміщує вкладку у фоновий режим, і відновити відтворення, коли користувач повернеться до цієї вкладки. Користувач не втрачає миті у відео, звук відео не заважає аудіо в новій вкладці на передньому плані, і користувач не пропустить жодного моменту в них.

- -

Стан видимості {{HTMLElement ("iframe")}} збігаються зі станом батьківського документа. Приховування <iframe> за допомогою властивостей CSS (таких як {{cssxref ("display", "display: none;")}}) не викликає подій видимості і не змінює стан документа, що міститься в кадрі.

- -

Випадки використання

- -

Розглянемо декілька прикладів використання API видимості сторінки.

- - - -

Розробники у минулому використовували недосконалі проксі для виявлення цього. Наприклад, перегляд {{event("blur")}} і {{event("focus")}} подій на вікні допомагає зрозуміти, коли ваша сторінка не є активною, але не говорить про те, що ваша сторінка насправді прихована для користувача. API Видимість сторінки вирішує цю проблему.

- -
-

Примітка: У той час як {{domxref ("GlobalEventHandlers.onblur", "onblur")}} та {{domxref ("GlobalEventHandlers.onfocus", "onfocus")}} скажуть вам, коли користувач перемикає вікно, але це не обов'язково означає, що воно приховано. Сторінки стають прихованими тільки тоді, коли користувач перемикає вкладки або згортає вікно браузера, що містить вкладку.

-
- -

Політика позиціонування, як сприяння продуктивності фонової сторінки

- -

Окремо від API відображення сторінки агенти  користувача зазвичай мають ряд власних політик для зниження впливу продуктивності фонових або прихованих вкладок. Вони можуть включати в себе:

- - - -

Деякі процеси виключені з цього гасящего режиму. У цих випадках ви також можете використовувати API видимості сторінки, щоб зменшити вплив на продуктивність.

- - - -

Приклад

- -

Подивіться живий приклад (відео зі звуком).

- -

Приклад, який призупиняє перегляд відео під час перемиканні на іншу вкладку і відтворює його знову при поверненні на цю вкладку, був створений за таким кодом:

- -
   // Встановіть ім'я властивості hidden і події зміни для видимості.
-
-var hidden, visibilityChange;
-if (typeof document.hidden !== "undefined") { // Opera 12.10 і Firefox 18 і більше пізніша підтримка
-  hidden = "hidden";
-  visibilityChange = "visibilitychange";
-} else if (typeof document.msHidden !== "undefined") {
-  hidden = "msHidden";
-  visibilityChange = "msvisibilitychange";
-} else if (typeof document.webkitHidden !== "undefined") {
-  hidden = "webkitHidden";
-  visibilityChange = "webkitvisibilitychange";
-}
-
-var videoElement = document.getElementById("videoElement");
-
-// Якщо сторінка прихована, зупиніть відео;
-// Якщо сторінка відображається, відтворіть відеозображення;
-
-function handleVisibilityChange() {
-  if (document[hidden]) {
-    videoElement.pause();
-  } else {
-    videoElement.play();
-  }
-}
-
-      // Попереджаємо, якщо браузер не підтримує addEventListener або Page Visibility API
-if (typeof document.addEventListener === "undefined" || hidden === undefined) {
-  console.log("Для цього демонстрування потрібен браузер, наприклад, Google Chrome або Firefox, який підтримує API для перегляду сторінок.");
-} else {
-      // Зміна видимості сторінки
-  document.addEventListener(visibilityChange, handleVisibilityChange, false);
-
-     // Коли відео призупиняється, встановлюємо назву.
-     // Це свідчитеме про паузу.
-  videoElement.addEventListener("pause", function(){
-      document.title = 'Paused';
-  }, false);
-
-  // Коли відео відтворюється, встановлюємо назву.
-  videoElement.addEventListener("play", function(){
-      document.title = 'Playing';
-  }, false);
-
-}
-
- -

Властивості, використані в інтерфейсі документа

- -

API Видимість сторінки додає наступні властивості до інтерфейсу {{domxref("Document")}} :

- -
-
{{domxref("Document.hidden")}} {{ReadOnlyInline}}
-
Повертає true , якщо сторінка знаходиться в стані, яке вважається прихованим для користувача, і false якщо навпаки.
-
{{domxref("Document.visibilityState")}} {{ReadOnlyInline}}
-
 {{domxref ("DOMString")}} вказує на поточний стан видимості документа. Можливі значення: -
-
visible
-
Зміст сторінки може бути, принаймні, частково видимим. На практиці це означає, що сторінка є закладкою на передньому плані немінімізірованного вікна.
-
hidden
-
Вміст сторінки не видно користувачеві або через те, що вкладка документа знаходиться в фоновому режимі, або через те, що частина вікна прихована, або через те, що екран пристрою вимкнений.
-
prerender
-
Вміст сторінки є попередніми і невидимим для користувача. Документ може буті в стані попереднього завантаження. -
Примітка: Не всі браузери підтримують попереднє завантаження.
-
-
unloaded
-
Сторінка перебуває в процесі вивантаження з пам'яті. -
Примітка: Не всі браузери підтримують це значення.
-
-
-
-
{{domxref("Document.onvisibilitychange")}}
-
 {{domxref("EventListener")}} задає код, який буде викликатися при виникненні події {{event("visibilitychange")}} .
-
- -
//startSimulation та pauseSimulation визначені в іншому місці
-function handleVisibilityChange() {
-  if (document.hidden) {
-    pauseSimulation();
-  } else  {
-    startSimulation();
-  }
-}
-
-document.addEventListener("visibilitychange", handleVisibilityChange, false);
-
- -

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

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Page Visibility API')}}{{Spec2('Page Visibility API')}}Початкове значення.
- -

Працює з браузерами

- -
-

Document.visibilityState

- -
- - -

{{Compat("api.Document.visibilityState")}}

-
-
- -

Дивись також

- - diff --git a/files/uk/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html b/files/uk/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html new file mode 100644 index 0000000000..cb7b8b615b --- /dev/null +++ b/files/uk/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html @@ -0,0 +1,108 @@ +--- +title: Чутливі ділянки та доступність +slug: Web/API/Canvas_API/Tutorial/Чутливі_ділянки_та_доступність +tags: + - Canvas + - Графіка + - Полотно + - Підручник +translation_of: Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility +--- +
{{CanvasSidebar}} {{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}
+ +
Власне HTML-елемент {{HTMLElement("canvas")}} являє собою лише множину кольорових точок і не містить жодних відомостей про намальовані об'єкти. Вміст полотна жодним чином не розкривається інструментам доступності, як це передбачено для семантичного HTML. Тож загалом, слід уникати використання полотен в застосунках або сайтах, від яких вимагається підтримка доступності. Проте наведені нижче настанови допоможуть все ж дещо уприступнити вміст полотен.
+ +

Запасний вміст

+ +

Вміст між тегами <canvas> … </canvas> може відігравати роль запасного варіанту для тих {{glossary("Browser", "переглядачів")}}, що не мають підтримки полотен. Він також вельми корисний тоді, коли користувач потребує допоміжних засобів (як-от екранний диктор), які можуть читати дерево DOM всередині. Чудовий приклад з html5accessibility.com показує, як це можна здійснити:

+ +
<canvas>
+  <h2>Shapes</h2>
+  <p>A rectangle with a black border.
+   In the background is a pink circle.
+   Partially overlaying the <a href="http://en.wikipedia.org/wiki/Circle" onfocus="drawCircle();" onblur="drawPicture();">circle</a>.
+   Partially overlaying the circle is a green
+   <a href="http://en.wikipedia.org/wiki/Square" onfocus="drawSquare();" onblur="drawPicture();">square</a>
+   and a purple <a href="http://en.wikipedia.org/wiki/Triangle" onfocus="drawTriangle();" onblur="drawPicture();">triangle</a>,
+   both of which are semi-opaque, so the full circle can be seen underneath.</p>
+</canvas>
+ +

Перегляньте відео від Стіва Фолкнера про те, як екранний диктор NVDA читає цей приклад.

+ +

Правила ARIA

+ +

Accessible Rich Internet Applications (ARIA) визначає способи того, як зробити веб-застосунки та вміст доступнішими для людей з певними вадами. Можна вжити ARIA-атрибути для описання поведінки й призначення HTML-елемента полотна:

+ +
<canvas id="button" tabindex="0" role="button" aria-pressed="false" aria-label="Start game"></canvas>
+
+ +

Дивіться ARIA та Використання ARIA, щоб дізнатись більше.

+ +

Чутливі ділянки

+ +

Однією з поширених задач є з'ясування того, чи належать координати миші до певної ділянки на полотні. Відповідний API уможливлює створення певних чутливих ділянок на полотні та дає інші можливості розкрити взаємодіяльний вміст полотна інструментам доступності. Він дозволяє полегшити виявлення влучень (належності координат миші певній ділянці) та доправити відповідні події до елементів DOM. Цей API має такі три методи (досі лишаються дослідними в сучасних переглядачах, тож перевіряйте таблиці сумісності):

+ +
+
{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}
+
Створює чутливу ділянку на полотні.
+
{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}
+
Видаляє з полотна чутливу ділянку із зазначеним id .
+
{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}
+
Видаляє з полотна всі чутливі ділянки.
+
+ +

Створюючи новий контур з допомогою {{domxref("CanvasRenderingContext2D.beginPath()")}} можна перетворити його на чутливу ділянку, а тоді, перевіряючи значення властивості {{domxref("MouseEvent.region")}}, з'ясовувати, чи влучає миша у вказану область:

+ +

HTML

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

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.arc(70, 80, 10, 0, 2 * Math.PI, false);
+ctx.fill();
+ctx.addHitRegion({id: 'circle'});
+
+canvas.addEventListener('mousemove', function(event) {
+  if (event.region) {
+    console.log('Влучив у ділянку: ' + event.region);  // Влучив у ділянку: circle
+  }
+});
+
+ +

Крім того, метод addHitRegion() може також приймати параметр control, що вказує елемент (має бути нащадком елемента canvas), до якого доправлятимуться події:

+ +
ctx.addHitRegion({control: element});
+ +

Наприклад, це може стати в нагоді для доправлення подій до елементів {{HTMLElement("input")}}.

+ +

Облямівки фокуса

+ +

Для роботи з клавіатури, облямівки фокуса є зручними індикаторами, що полегшують пересування сторінкою. Щоб намалювати облямівку фокуса навколо малюнка (контура) на полотні, можна скористатися методом drawFocusIfNeeded().

+ +
+
{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}} {{experimental_inline}}
+
Якщо відповідний елемент перебуває у фокусі, цей метод намалює облямівку навколо контура.
+
+ +

Крім того, можна використати метод scrollPathIntoView(), щоб зробити елемент видимим на екрані, якщо він перебуває у фокусі, наприклад.

+ +
+
{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}} {{experimental_inline}}
+
Гортає поточний чи вказаний контур до видимої області.
+
+ +

Див. також

+ + + +
{{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}
diff --git "a/files/uk/web/api/canvas_api/tutorial/\321\207\321\203\321\202\320\273\320\270\320\262\321\226_\320\264\321\226\320\273\321\217\320\275\320\272\320\270_\321\202\320\260_\320\264\320\276\321\201\321\202\321\203\320\277\320\275\321\226\321\201\321\202\321\214/index.html" "b/files/uk/web/api/canvas_api/tutorial/\321\207\321\203\321\202\320\273\320\270\320\262\321\226_\320\264\321\226\320\273\321\217\320\275\320\272\320\270_\321\202\320\260_\320\264\320\276\321\201\321\202\321\203\320\277\320\275\321\226\321\201\321\202\321\214/index.html" deleted file mode 100644 index cb7b8b615b..0000000000 --- "a/files/uk/web/api/canvas_api/tutorial/\321\207\321\203\321\202\320\273\320\270\320\262\321\226_\320\264\321\226\320\273\321\217\320\275\320\272\320\270_\321\202\320\260_\320\264\320\276\321\201\321\202\321\203\320\277\320\275\321\226\321\201\321\202\321\214/index.html" +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: Чутливі ділянки та доступність -slug: Web/API/Canvas_API/Tutorial/Чутливі_ділянки_та_доступність -tags: - - Canvas - - Графіка - - Полотно - - Підручник -translation_of: Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility ---- -
{{CanvasSidebar}} {{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}
- -
Власне HTML-елемент {{HTMLElement("canvas")}} являє собою лише множину кольорових точок і не містить жодних відомостей про намальовані об'єкти. Вміст полотна жодним чином не розкривається інструментам доступності, як це передбачено для семантичного HTML. Тож загалом, слід уникати використання полотен в застосунках або сайтах, від яких вимагається підтримка доступності. Проте наведені нижче настанови допоможуть все ж дещо уприступнити вміст полотен.
- -

Запасний вміст

- -

Вміст між тегами <canvas> … </canvas> може відігравати роль запасного варіанту для тих {{glossary("Browser", "переглядачів")}}, що не мають підтримки полотен. Він також вельми корисний тоді, коли користувач потребує допоміжних засобів (як-от екранний диктор), які можуть читати дерево DOM всередині. Чудовий приклад з html5accessibility.com показує, як це можна здійснити:

- -
<canvas>
-  <h2>Shapes</h2>
-  <p>A rectangle with a black border.
-   In the background is a pink circle.
-   Partially overlaying the <a href="http://en.wikipedia.org/wiki/Circle" onfocus="drawCircle();" onblur="drawPicture();">circle</a>.
-   Partially overlaying the circle is a green
-   <a href="http://en.wikipedia.org/wiki/Square" onfocus="drawSquare();" onblur="drawPicture();">square</a>
-   and a purple <a href="http://en.wikipedia.org/wiki/Triangle" onfocus="drawTriangle();" onblur="drawPicture();">triangle</a>,
-   both of which are semi-opaque, so the full circle can be seen underneath.</p>
-</canvas>
- -

Перегляньте відео від Стіва Фолкнера про те, як екранний диктор NVDA читає цей приклад.

- -

Правила ARIA

- -

Accessible Rich Internet Applications (ARIA) визначає способи того, як зробити веб-застосунки та вміст доступнішими для людей з певними вадами. Можна вжити ARIA-атрибути для описання поведінки й призначення HTML-елемента полотна:

- -
<canvas id="button" tabindex="0" role="button" aria-pressed="false" aria-label="Start game"></canvas>
-
- -

Дивіться ARIA та Використання ARIA, щоб дізнатись більше.

- -

Чутливі ділянки

- -

Однією з поширених задач є з'ясування того, чи належать координати миші до певної ділянки на полотні. Відповідний API уможливлює створення певних чутливих ділянок на полотні та дає інші можливості розкрити взаємодіяльний вміст полотна інструментам доступності. Він дозволяє полегшити виявлення влучень (належності координат миші певній ділянці) та доправити відповідні події до елементів DOM. Цей API має такі три методи (досі лишаються дослідними в сучасних переглядачах, тож перевіряйте таблиці сумісності):

- -
-
{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}
-
Створює чутливу ділянку на полотні.
-
{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}
-
Видаляє з полотна чутливу ділянку із зазначеним id .
-
{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}
-
Видаляє з полотна всі чутливі ділянки.
-
- -

Створюючи новий контур з допомогою {{domxref("CanvasRenderingContext2D.beginPath()")}} можна перетворити його на чутливу ділянку, а тоді, перевіряючи значення властивості {{domxref("MouseEvent.region")}}, з'ясовувати, чи влучає миша у вказану область:

- -

HTML

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

JavaScript

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-
-ctx.beginPath();
-ctx.arc(70, 80, 10, 0, 2 * Math.PI, false);
-ctx.fill();
-ctx.addHitRegion({id: 'circle'});
-
-canvas.addEventListener('mousemove', function(event) {
-  if (event.region) {
-    console.log('Влучив у ділянку: ' + event.region);  // Влучив у ділянку: circle
-  }
-});
-
- -

Крім того, метод addHitRegion() може також приймати параметр control, що вказує елемент (має бути нащадком елемента canvas), до якого доправлятимуться події:

- -
ctx.addHitRegion({control: element});
- -

Наприклад, це може стати в нагоді для доправлення подій до елементів {{HTMLElement("input")}}.

- -

Облямівки фокуса

- -

Для роботи з клавіатури, облямівки фокуса є зручними індикаторами, що полегшують пересування сторінкою. Щоб намалювати облямівку фокуса навколо малюнка (контура) на полотні, можна скористатися методом drawFocusIfNeeded().

- -
-
{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}} {{experimental_inline}}
-
Якщо відповідний елемент перебуває у фокусі, цей метод намалює облямівку навколо контура.
-
- -

Крім того, можна використати метод scrollPathIntoView(), щоб зробити елемент видимим на екрані, якщо він перебуває у фокусі, наприклад.

- -
-
{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}} {{experimental_inline}}
-
Гортає поточний чи вказаний контур до видимої області.
-
- -

Див. також

- - - -
{{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}
diff --git a/files/uk/web/api/event/index.html b/files/uk/web/api/event/index.html new file mode 100644 index 0000000000..e1aab3dfde --- /dev/null +++ b/files/uk/web/api/event/index.html @@ -0,0 +1,188 @@ +--- +title: Подія +slug: Web/API/Подія +translation_of: Web/API/Event +--- +

{{APIRef("DOM")}}

+ +

Event інтерфейс представляє подію, що відбувається в DOM. Подія може бути ініційована дією користувача, наприклад, кліком мишки або натисканням клавіши на клавіатурі, або згенерована API, щоб показати прогрес асинхронного завдання, тощо. Це може бути також ініційовано програмно викликом HTMLElement.click() методу елемента, або створенням екземпляру події, потім відправленням його до вказаного цільового елементу, використовуючи EventTarget.dispatchEvent().

+ +

Існує багато різновидів подій, деякі з котрих використовують інші інтерфейси, основані на головному інтерфейсі Event. Сам по собі Event вміщає можливості та методи, спільні для всіх подій.

+ +

Багато елементів DOM можуть бути налаштовані прийняти (або "почути") ці події та виконати код у відповідь на процес їхньої обробки. Хендлери подій звичайно пов'язані або додаються до різноманітних HTML elements (таких як <button>, <div>, <span>, і т.п.) при використанні EventTarget.addEventListener(), а це, як правило, замінює використання атрибутів хендлера подій старого HTML. Надалі за необхідності додавання, такі хендлери також можна відключати, якщо потрібно, використовуючи removeEventListener().  

+ +

Примітка: один елемент може мати декілька таких хендлерів, навіть для однієї й тієї ж події - особливо якщо окремо, незалежні модулі коду прикріплять їх, кожний для власних незалежних цілей. (Наприклад, вебсторінка з рекламним модулем та статичним модулем, обидва з яких забезпечують моніторинг перегляду відео.) 

+ +

Коли є багато вкладених елементів, кожний зі своїм особистим хендлером (хендлерами), обробка подій може стати дуже складною - особливо там, де батьківський елемент отримує ту ж саму подію, що й її дочірній елемент, тому що "просторово" вони перетинаються і таким чином подія технічно з'являється в них обох, а порядок обробки таких подій залежить від параметрів вспливаючих подій та захоплення кожного обробника.

+ +

Інтерфейси на основі Event

+ +

Нижче надано список інтерфейсів, які існують на основі головного Event інтерфейсу, із ссилками на відповідну документацію в довіднику MDN API.

+ +

Зверніть увагу, що всі інтерфейси подій мають назви із закінченням "Event".

+ + + +
+ +
+ +

Конструктор

+ +
+
{{domxref("Event.Event", "Event()")}}
+
Створює  Event об'єкт та повертає його абоненту.
+
+ +

Властивості

+ +
+
{{domxref("Event.bubbles")}} {{readonlyinline}}
+
Булевий вираз вказує на те, чи вспливає подія через DOM.
+
{{domxref("Event.cancelBubble")}}
+
Історичний псевдонім {{domxref("Event.stopPropagation()")}}. Встановлення його значення true  перед поверненням з обробника події запобігає поширенню події.
+
{{domxref("Event.cancelable")}} {{readonlyinline}}
+
Булевий вираз вказує на те, чи скасовується подія.
+
{{domxref("Event.composed")}} {{ReadOnlyInline}}
+
Булевий вираз вказує на те, чи може подія всплити через межу між  тінню DOM та черговим DOM.
+
{{domxref("Event.currentTarget")}} {{readonlyinline}}
+
Посилання на зареєстровану зараз ціль події. Це об'єкт, на котрий наразі планується відіслати подію. Можливо, це змінилося по дорозі через retargeting.
+
{{domxref("Event.deepPath")}} {{non-standard_inline}}
+
 {{jsxref("Array")}} of DOM {{domxref("Node")}}, через який всплила подія.
+
{{domxref("Event.defaultPrevented")}} {{readonlyinline}}
+
Вказує, чи виклик {{domxref("event.preventDefault()")}}  скасував подію.
+
{{domxref("Event.eventPhase")}} {{readonlyinline}}
+
Вказує, яка фаза потоку подій обробляється.
+
{{domxref("Event.explicitOriginalTarget")}} {{non-standard_inline}} {{readonlyinline}}
+
Явна оригінальна мета події (Mozilla-specific).
+
{{domxref("Event.originalTarget")}} {{non-standard_inline}} {{readonlyinline}}
+
Початкова ціль події перед будь-якими ретаргетингами. (Mozilla-specific).
+
{{domxref("Event.returnValue")}}
+
Історична властивість, представлена Internet Explorer і згодом прийнята в специфікацію DOM для того, щоб забезпечити продовження  роботи існуючих сайтів. В ідеалі, вам слід спробувати використати {{domxref(''Event.preventDefault()")}} та {{domxref("Event.defaultPrevented")}} замість нього, але ви можете використовувати returnValue, якщо ви  вирішите це зробити.
+
{{domxref("Event.returnValue")}} {{non-standard_inline}}
+
Нестандартний псевдонім (зі старої версії Microsoft Internet Explorer) для {{domxref("Event.target")}}. Деякі інші браузери починають підтримувати його для веб-сумісності.
+
{{domxref("Event.target")}} {{readonlyinline}}
+
Посилання на ціль, до якої спочатку була відправлена подія.
+
{{domxref("Event.timeStamp")}} {{readonlyinline}}
+
Час, коли було створено подію (в мілісекундах).  За специфікацією, це значення - час з епохи - але насправді визначення браузерів різняться.Крім того, ведеться робота, щоб змінити його на {{domxref("DOMHighResTimeStamp")}} .
+
{{domxref("Event.isTrusted")}} {{readonlyinline}}
+
Вказує, чи  була подія ініційована браузером (наприклад, після натискання клавіши на клавіатурі користувачем) або за сценарієм (використовуючи метод створення подій, наприклад {{domxref("Event.initEvent")}}).
+
Застарілі властивості
+
+ +

{{domxref("Event.scoped")}} {{readonlyinline}} {{obsolete_inline}}

+ +

Застарілі; використовуйте замість них {{domxref("Event.composed", "composed")}}. ({{jsxref("Boolean")}} вказує, чи вспливе дана подія через тіньовий корінь у стандарт DOM.)

+ +

Методи

+ +
+
{{domxref("Event.createEvent()")}} {{deprecated_inline}}
+
Створює нову подію, котра повинна бути ініційована викликом її  initEvent() методу.
+
{{domxref("Event.composedPath()")}}
+
Повертає шлях події (об'єкти, на які слухачі будуть викликані). Це не включає вузли через тіньові дерева, якщо тіньовий корінь було створено із закритим {{domxref("ShadowRootmode")}}.
+
{{domxref("Event.preventDefault()")}}
+
Скасовує подію, (якщо її можливо скасувати).
+
{{domxref("Event.stopImmediatePropagation()")}}
+
Для цієї конкретної події не дозволяйте викликати всіх інших слухачів. Сюди входять слухачі, приєднані до одного й того ж елемента, а також ті, що додаються до елементів, які буде прищеплено пізніше (наприклад, під час фази введення).
+
{{domxref("Event.stopPropagation()")}}
+
Зупиняє розповсюдження подій далі у DOM.
+
Застарілі методи
+
{{domxref("Event.getPreventDefault()")}} {{non-standard_inline}}
+
Нестандартний. Використовуйте замість нього {{domxref("Event.defaultPrevented")}}.  (Повертає значення {{domxref("Event.defaultPrevented")}}.)
+
{{domxref("Event.preventBubble()"}} {{non-standard_inline}} {{Obsolete_inline(24)}}
+
Застарілий; використовуйте замість нього {{domxref("event.stopPropagation")}}. (Захищає подію від вспливання).
+
{{domxref("Event.preventcapture()"}} {{non-standard_inline}} {{Obsolete_inline(24)}}
+
Застарілий; використовуйте замість нього {{domxref("event.stopPropagation"}}.
+
+ +

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

+ + + + + + + + + + + + + + +
ХарактеристикаСтатусКоментар
{{SpecName('DOM WHATWG', '#interface-event', 'Event')}}{{Spec2('DOM WHATWG')}}
+ +

Сумісність з браузером

+ +

приховано

+ +

Таблиця сумісності на цій сторінці формується із структурованих даних. Якщо ви захочете побачити її, будь ласка, перевірте та відправте нам запит https://github/com/mdn/browser-compat-data

+ + + +

Дивіться також

+ + diff --git a/files/uk/web/api/event/target/index.html b/files/uk/web/api/event/target/index.html new file mode 100644 index 0000000000..20c17f2d31 --- /dev/null +++ b/files/uk/web/api/event/target/index.html @@ -0,0 +1,134 @@ +--- +title: Event.target +slug: Web/API/Подія/target +translation_of: Web/API/Event/target +--- +

{{ApiRef("DOM")}}

+ +

Властивість target інтерфейсу {{domxref("Event")}} є посиланням на об'єкт який відправив подію. Він відрізняється від {{domxref("Event.currentTarget")}} коли обробник події викликається в фазі спливання або фіксації події.

+ +

Синтаксис

+ +
var theTarget = event.target;
+ +

Приклад

+ +

Властивість event.target може бути використана для реалізації делегування події.

+ +
// Зробити список
+var ul = document.createElement('ul');
+document.body.appendChild(ul);
+
+var li1 = document.createElement('li');
+var li2 = document.createElement('li');
+ul.appendChild(li1);
+ul.appendChild(li2);
+
+function hide(e){
+  // e.target вказує на елемент <li> на якому було натиснуто
+  // Це відрізняється від e.currentTarget який буде посилатися на батьківський <ul> в даному контексті
+  e.target.style.visibility = 'hidden';
+}
+
+// Приєднання слухача подій до списка
+// Він запуститься при натисканні кожного <li>
+ul.addEventListener('click', hide, false);
+
+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("DOM WHATWG", "#dom-event-target", "Event.target")}}{{Spec2("DOM WHATWG")}}
{{SpecName("DOM4", "#dom-event-target", "Event.target")}}{{Spec2("DOM4")}}
{{SpecName("DOM2 Events", "#Events-Event-target", "Event.target")}}{{Spec2("DOM2 Events")}}Initial definition
+ +

Сумісність з браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Нотатки про сумісність

+ +

В браузерах IE 6-8 використовується інша модель подій. Слухачі подій приєднуються з використанням нестандартного методу {{domxref('EventTarget.attachEvent')}}. В цій моделі, об'єкт події має {{domxref('Event.srcElement')}} властивість, замість властивості target, і воно має ту ж саму семантику як event.target.

+ +
function hide(e) {
+  // Підтримка IE6-8
+  var target = e.target || e.srcElement;
+  target.style.visibility = 'hidden';
+}
+
+ +

Читати також

+ + diff --git a/files/uk/web/api/htmlmediaelement/abort_event/index.html b/files/uk/web/api/htmlmediaelement/abort_event/index.html new file mode 100644 index 0000000000..40a9e144fc --- /dev/null +++ b/files/uk/web/api/htmlmediaelement/abort_event/index.html @@ -0,0 +1,68 @@ +--- +title: abort +slug: Web/Events/abort +translation_of: Web/API/HTMLMediaElement/abort_event +translation_of_original: Web/Events/abort +--- +

Подія abort спрацьовує коли завантаження ресурсу було перервано.

+ +

Загальна інформація

+ +
+
Специфікація
+
DOM L3
+
Interface
+
UIEvent if generated from a user interface, Event otherwise.
+
Bubbles
+
No
+
Cancelable
+
No
+
Target
+
Element
+
Default Action
+
None
+
+ +

Властивості

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe event target (the topmost target in the DOM tree).
type {{readonlyInline}}DOMStringThe type of event.
bubbles {{readonlyInline}}BooleanWhether the event normally bubbles or not.
cancelable {{readonlyInline}}BooleanWhether the event is cancellable or not.
view {{readonlyInline}}WindowProxydocument.defaultView (window of the document)
detail {{readonlyInline}}long (float)0.
diff --git a/files/uk/web/api/page_visibility_api/index.html b/files/uk/web/api/page_visibility_api/index.html new file mode 100644 index 0000000000..6675a3783b --- /dev/null +++ b/files/uk/web/api/page_visibility_api/index.html @@ -0,0 +1,201 @@ +--- +title: API відображення сторінки +slug: Web/API/API_відображення_сторінки +tags: + - API + - API відображення сторінки + - visibilityState + - visibilitychange + - відображення сторінки + - процеси скритої закладки + - фоновий режим +translation_of: Web/API/Page_Visibility_API +--- +
{{DefaultAPISidebar("Page Visibility API")}}
+ +
+ +

При перегляді сайту за допомогою вкладок існує ймовірність того, що будь-яка з веб-сторінок знаходиться в фоновому режимі і тому користувач її не бачить. API відображення сторінки надає події, які ви можете відстежити, щоб дізнатися, коли документ стає видимим або прихованим, а також дозволяє отримати поточний стан прихованості/видимості сторінки.

+ +
+

Примітка: API відображення сторінки є особливо корисним для економії ресурсів та підвищення продуктивності, дозволяючи сторінці уникнути виконання непотрібних завдань, коли документ не є видимим.

+
+ +

Коли користувач згортає вікно або перемикається на іншу вкладку, API посилає подію {{event("visibilitychange")}}, щоб передати слухачам інформацію про зміну стану сторінки. Ви можете виявити подію і виконати деякі дії або нічого не виконувати. Наприклад, якщо ваш веб-додаток програє відео, він може поставити відео на паузу, коли користувач переміщує вкладку у фоновий режим, і відновити відтворення, коли користувач повернеться до цієї вкладки. Користувач не втрачає миті у відео, звук відео не заважає аудіо в новій вкладці на передньому плані, і користувач не пропустить жодного моменту в них.

+ +

Стан видимості {{HTMLElement ("iframe")}} збігаються зі станом батьківського документа. Приховування <iframe> за допомогою властивостей CSS (таких як {{cssxref ("display", "display: none;")}}) не викликає подій видимості і не змінює стан документа, що міститься в кадрі.

+ +

Випадки використання

+ +

Розглянемо декілька прикладів використання API видимості сторінки.

+ + + +

Розробники у минулому використовували недосконалі проксі для виявлення цього. Наприклад, перегляд {{event("blur")}} і {{event("focus")}} подій на вікні допомагає зрозуміти, коли ваша сторінка не є активною, але не говорить про те, що ваша сторінка насправді прихована для користувача. API Видимість сторінки вирішує цю проблему.

+ +
+

Примітка: У той час як {{domxref ("GlobalEventHandlers.onblur", "onblur")}} та {{domxref ("GlobalEventHandlers.onfocus", "onfocus")}} скажуть вам, коли користувач перемикає вікно, але це не обов'язково означає, що воно приховано. Сторінки стають прихованими тільки тоді, коли користувач перемикає вкладки або згортає вікно браузера, що містить вкладку.

+
+ +

Політика позиціонування, як сприяння продуктивності фонової сторінки

+ +

Окремо від API відображення сторінки агенти  користувача зазвичай мають ряд власних політик для зниження впливу продуктивності фонових або прихованих вкладок. Вони можуть включати в себе:

+ + + +

Деякі процеси виключені з цього гасящего режиму. У цих випадках ви також можете використовувати API видимості сторінки, щоб зменшити вплив на продуктивність.

+ + + +

Приклад

+ +

Подивіться живий приклад (відео зі звуком).

+ +

Приклад, який призупиняє перегляд відео під час перемиканні на іншу вкладку і відтворює його знову при поверненні на цю вкладку, був створений за таким кодом:

+ +
   // Встановіть ім'я властивості hidden і події зміни для видимості.
+
+var hidden, visibilityChange;
+if (typeof document.hidden !== "undefined") { // Opera 12.10 і Firefox 18 і більше пізніша підтримка
+  hidden = "hidden";
+  visibilityChange = "visibilitychange";
+} else if (typeof document.msHidden !== "undefined") {
+  hidden = "msHidden";
+  visibilityChange = "msvisibilitychange";
+} else if (typeof document.webkitHidden !== "undefined") {
+  hidden = "webkitHidden";
+  visibilityChange = "webkitvisibilitychange";
+}
+
+var videoElement = document.getElementById("videoElement");
+
+// Якщо сторінка прихована, зупиніть відео;
+// Якщо сторінка відображається, відтворіть відеозображення;
+
+function handleVisibilityChange() {
+  if (document[hidden]) {
+    videoElement.pause();
+  } else {
+    videoElement.play();
+  }
+}
+
+      // Попереджаємо, якщо браузер не підтримує addEventListener або Page Visibility API
+if (typeof document.addEventListener === "undefined" || hidden === undefined) {
+  console.log("Для цього демонстрування потрібен браузер, наприклад, Google Chrome або Firefox, який підтримує API для перегляду сторінок.");
+} else {
+      // Зміна видимості сторінки
+  document.addEventListener(visibilityChange, handleVisibilityChange, false);
+
+     // Коли відео призупиняється, встановлюємо назву.
+     // Це свідчитеме про паузу.
+  videoElement.addEventListener("pause", function(){
+      document.title = 'Paused';
+  }, false);
+
+  // Коли відео відтворюється, встановлюємо назву.
+  videoElement.addEventListener("play", function(){
+      document.title = 'Playing';
+  }, false);
+
+}
+
+ +

Властивості, використані в інтерфейсі документа

+ +

API Видимість сторінки додає наступні властивості до інтерфейсу {{domxref("Document")}} :

+ +
+
{{domxref("Document.hidden")}} {{ReadOnlyInline}}
+
Повертає true , якщо сторінка знаходиться в стані, яке вважається прихованим для користувача, і false якщо навпаки.
+
{{domxref("Document.visibilityState")}} {{ReadOnlyInline}}
+
 {{domxref ("DOMString")}} вказує на поточний стан видимості документа. Можливі значення: +
+
visible
+
Зміст сторінки може бути, принаймні, частково видимим. На практиці це означає, що сторінка є закладкою на передньому плані немінімізірованного вікна.
+
hidden
+
Вміст сторінки не видно користувачеві або через те, що вкладка документа знаходиться в фоновому режимі, або через те, що частина вікна прихована, або через те, що екран пристрою вимкнений.
+
prerender
+
Вміст сторінки є попередніми і невидимим для користувача. Документ може буті в стані попереднього завантаження. +
Примітка: Не всі браузери підтримують попереднє завантаження.
+
+
unloaded
+
Сторінка перебуває в процесі вивантаження з пам'яті. +
Примітка: Не всі браузери підтримують це значення.
+
+
+
+
{{domxref("Document.onvisibilitychange")}}
+
 {{domxref("EventListener")}} задає код, який буде викликатися при виникненні події {{event("visibilitychange")}} .
+
+ +
//startSimulation та pauseSimulation визначені в іншому місці
+function handleVisibilityChange() {
+  if (document.hidden) {
+    pauseSimulation();
+  } else  {
+    startSimulation();
+  }
+}
+
+document.addEventListener("visibilitychange", handleVisibilityChange, false);
+
+ +

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

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Page Visibility API')}}{{Spec2('Page Visibility API')}}Початкове значення.
+ +

Працює з браузерами

+ +
+

Document.visibilityState

+ +
+ + +

{{Compat("api.Document.visibilityState")}}

+
+
+ +

Дивись також

+ + diff --git a/files/uk/web/api/window/domcontentloaded_event/index.html b/files/uk/web/api/window/domcontentloaded_event/index.html new file mode 100644 index 0000000000..96ca54cfb0 --- /dev/null +++ b/files/uk/web/api/window/domcontentloaded_event/index.html @@ -0,0 +1,152 @@ +--- +title: DOMContentLoaded +slug: Web/Events/DOMContentLoaded +translation_of: Web/API/Window/DOMContentLoaded_event +--- +

Подія DOMContentLoaded викликається, коли вихідний HTML документ повністю завантажився та був розібраний (parse), без очікування повного завантаження стилів, зображень, сабфреймів (subframes). Зовсім інша подія - load - має використовуватися лише для того, щоб визначити повне завантаження сторінки. Використання load там, де застосування DOMContentLoaded є більш доречним, є дуже поширеною помилкою, тому будьте уважними.

+ +

{{Note("Синхронний Javascript затримує парсинг DOM.")}}

+ +

{{Note("Існує безліч універсальних та автономних бібліотек, які  попонують кроссбраузерні методи для визначення готовності DOM.")}}

+ +

Прискорення

+ +

Якщо ви хочете, щоб DOM був розібраним (got parsed) якомога швидше після того, як користувач зробив запит сторінки, ви можете зробити ваш JavaScript асинхронним та оптимізувати завантаження стилів. Якщо цього не зробити, це сповільнить завантаження сторінки через те, що воно буде відбуватися паралельно і марнувати трафік у головного html документа.

+ +

Основна інформація

+ +
+
Специфікація
+
HTML5
+
Інтерфейс
+
Подія
+
Спливання
+
Так
+
Можливість скасування
+
Так (однак скасування як простої події скасувати не можна)
+
 
+
 
+
 
+
 
+
Ціль
+
Документ
+
Типова дія
+
Немає.
+
+ +

Властивості

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ВластивістьТипОпис
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
+ +

Приклад

+ +
<script>
+  document.addEventListener("DOMContentLoaded", function(event) {
+    console.log("DOM fully loaded and parsed");
+  });
+</script>
+
+ +
<script>
+  document.addEventListener("DOMContentLoaded", function(event) {
+    console.log("DOM fully loaded and parsed");
+  });
+
+for(var i=0; i<1000000000; i++)
+{} // this synchronous script is going to delay parsing of the DOM. So the DOMContentLoaded event is going to launch later.
+</script>
+
+ +

Сумісність з браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0[1]{{CompatGeckoDesktop("1")}}[1]9.0[2]9.03.1[1]
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}[1]{{CompatGeckoMobile("1")}}[1]{{CompatUnknown}}[2]{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]
+
+ +

[1] Bubbling для цієї події підтримується принаймні Gecko 1.9.2, Chrome 6, and Safari 4.

+ +

[2] Internet Explorer 8 підтримує подію readystatechange , яка може використовуватися для того, щоб визначити чи готовий DOM. У більш ранніх версіях Internet Explorer цей стан може бути визначений повторними спробами виконання document.documentElement.doScroll("left");,  так як цей фрагмент коду буде генерувати помилку, поки DOM не буде готовий.

+ +

Подібні події

+ + diff --git a/files/uk/web/api/windoworworkerglobalscope/settimeout/index.html b/files/uk/web/api/windoworworkerglobalscope/settimeout/index.html new file mode 100644 index 0000000000..19c90148ce --- /dev/null +++ b/files/uk/web/api/windoworworkerglobalscope/settimeout/index.html @@ -0,0 +1,428 @@ +--- +title: WindowTimers.setTimeout() +slug: Web/API/WindowTimers/setTimeout +translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout +--- +
{{APIRef("HTML DOM")}}
+ +
 
+ +
Метод setTimeout(), що належить об'єкту {{domxref("WindowOrWorkerGlobalScope")}}, та наслідується від window.setTimeout,  встановлює таймер, що виконує функцію або вказаний фрагмент коду один раз, щойно спливе заданий час.
+ +
 
+ +

Синтаксис

+ +
var timeoutID = window.setTimeout(func[, delay, param1, param2, ...]);
+var timeoutID = window.setTimeout(code[, delay]);
+
+ +

Параметри

+ +
+
func
+
{{jsxref("function")}} котру необхідно виконати після того, як вийде заданий час.
+
code
+
Опційний синтаксис, котрий дозволяє задавати рядок замість функції, котра компілюється і виконується при спрацюванні таймера. Використання цього синтаксису не рекомендовано з тих же ж причин, котрі роблять застосування {{jsxref("eval()")}} загрозою безпеці.
+
delay {{optional_inline}}
+
 
+
Час у мілісекундах (тисячних секунди), котрий таймер має зачекати перед тим, як виконати вказану функцію або код. Якщо цей параметр пропустити, буде використано значення 0. Варто зазначити, що справжній час затримки, може бути довшим. Дивіться розділ {{anch("Reasons for delays longer than specified","Причини, з яких затримка є фактично довшою ніж задано")}}
+
param1, ..., paramN {{optional_inline}}
+
Додаткові параметри, що передаються до func або code, щойно час таймера спливе.
+
+ +
+

Зверніть увагу:  Internet Explorer 9 та більш ранні версії не підтримують додаткові параметри. Застосовуйте поліфіл, щобл уможливити цей функціонал (див. розділ Callback arguments).  

+
+ +

Значення, що повертається

+ +


+ Після виклику setTimeout(), повертається timeoutID  - це не нульове цифрове значення, що використовується для ідентифікації створеного таймера. Цей ідентифікатор можна передати як параметр до {{domxref("Window.clearTimeout()")}} щоб відмінити таймер.

+ +

Корисно знати, що setTimeout() та {{domxref("WindowTimers.setInterval", "setInterval()")}} використовують спільну колекцію ID ідентифікаторів, а також що  clearTimeout() та {{domxref("WindowTimers.clearInterval", "clearInterval()")}} технічно можуть бути взаємозамінними. Тим не менше, задля ясності, варто завжди зіставляти їх, аби не допускати помилок під час розробки коду. 

+ +

Приклад

+ +

У наступному прикладі створено дві кнопки на веб сторінці, що прив'язані до setTimeout() та clearTimeout() процесів. Після натискання на першу кнопку встановлюється таймер, що викликає діалогове вікно alert через дві секунди та зберігає ID таймера для подальшого використання у clearTimeout(). За бажанням ви можете відмінити цей таймер, якщо натисните другу кнопку.

+ +

HTML код

+ +
<p>Live Example</p>
+<button onclick="delayedAlert();">Відобразити діалогове вікно alert через дві секунди.</button>
+<p></p>
+<button onclick="clearAlert();">Відмінити відображення діалогового вікна.</button>
+
+ +

JavaScript код

+ +
var timeoutID;
+
+function delayedAlert() {
+  timeoutID = window.setTimeout(slowAlert, 2000);
+}
+
+function slowAlert() {
+  alert("Це було дійсно повільно!");
+}
+
+function clearAlert() {
+  window.clearTimeout(timeoutID);
+}
+
+ +

Результат

+ +

{{EmbedLiveSample('Example', 'Приклад')}}

+ +

Дивіться також clearTimeout() example.

+ +

Поліфіл

+ +

Якщо вам необхідно передати один чи декілька аргументів до колбек функції, а також потрібно, щоб цей функціонал працював у браузерах, що не підтримують передачу додаткових аргументів для setTimeout() чи setInterval() (наприклад, версії Internet Explorer 9 чи нижче), ви можете застосувати цей поліфіл, який активує стандартну HTML5 функціональність. Просто додайте цей код на початку вашого скрипта: 

+ +
/*\
+|*|
+|*|  Polyfill which enables the passage of arbitrary arguments to the
+|*|  callback functions of JavaScript timers (HTML5 standard syntax).
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/window.setInterval
+|*|
+|*|  Syntax:
+|*|  var timeoutID = window.setTimeout(func, delay[, param1, param2, ...]);
+|*|  var timeoutID = window.setTimeout(code, delay);
+|*|  var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
+|*|  var intervalID = window.setInterval(code, delay);
+|*|
+\*/
+
+(function() {
+  setTimeout(function(arg1) {
+    if (arg1 === 'test') {
+      // feature test is passed, no need for polyfill
+      return;
+    }
+    var __nativeST__ = window.setTimeout;
+    window.setTimeout = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) {
+      var aArgs = Array.prototype.slice.call(arguments, 2);
+      return __nativeST__(vCallback instanceof Function ? function() {
+        vCallback.apply(null, aArgs);
+      } : vCallback, nDelay);
+    };
+  }, 0, 'test');
+
+  var interval = setInterval(function(arg1) {
+    clearInterval(interval);
+    if (arg1 === 'test') {
+      // feature test is passed, no need for polyfill
+      return;
+    }
+    var __nativeSI__ = window.setInterval;
+    window.setInterval = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) {
+      var aArgs = Array.prototype.slice.call(arguments, 2);
+      return __nativeSI__(vCallback instanceof Function ? function() {
+        vCallback.apply(null, aArgs);
+      } : vCallback, nDelay);
+    };
+  }, 0, 'test');
+}())
+
+ +

Фікс для IE

+ +

Якщо вам потрібен фікс, який не впливатиме на роботу жодного іншого мобільного чи десктопного браузера, окрім IE9 та нижче, ви можете скористатись умовними коментарями JavaScript:

+ +
/*@cc_on
+  // conditional IE < 9 only fix
+  @if (@_jscript_version <= 9)
+  (function(f){
+     window.setTimeout=f(window.setTimeout);
+     window.setInterval=f(window.setInterval);
+  })(function(f){return function(c,t){var a=[].slice.call(arguments,2);return f(function(){c instanceof Function?c.apply(this,a):eval(c)},t)}});
+  @end
+@*/
+
+ +

Або використати умовні коментарі HTML для IE9 та нижче:

+ +
<!--[if lte IE 9]><script>
+(function(f){
+window.setTimeout=f(window.setTimeout);
+window.setInterval=f(window.setInterval);
+})(function(f){return function(c,t){
+var a=[].slice.call(arguments,2);return f(function(){c instanceof Function?c.apply(this,a):eval(c)},t)}
+});
+</script><![endif]-->
+
+ +

Тимчасові рішення

+ +

Ще одне можливе рішення - використання анонімної функції для виклику колбека, але це вартісне рішення. Приклад:

+ +
var intervalID = setTimeout(function() { myFunc("one", "two", "three"); }, 1000);
+
+ +

Приклад, наведений вище, може бути також написаний за допомогою   arrow function:

+ +
var intervalID = setTimeout(() => { myFunc("one", "two", "three"); }, 1000);
+
+ +

Ще одне рішення - використання   function's bind. Приклад:

+ +
setTimeout(function(arg1){}.bind(undefined, 10), 1000);
+
+ +

Проблема "this"

+ +

Коли ви передаєте до setTimeout() метод або будь-яку іншу функцію, ймовірно вона буде викликана не з тим значенням this, на яке ви очікуєте. Ця проблема детально описана у JavaScript reference.

+ +

Пояснення

+ +

Код, що виконується всередині setTimeout(), викликається із  іншого контекста виконання (execution context), ніж у функції, яка викликала setTimeout. До функції, яку викликають всередині setTimeout застосовуються звичайні правила призначення this. І, якщо ви не встановили this під час виклику або за допомогою bind, його значенням за замовчуванням буде об'єкт  global (або window) у нестрогому режимі, або undefined у строгому режимі. Значення this буде іншим, аніж у функції, яка викликала setTimeout. Розгляньте наступний приклад:

+ +
myArray = ["zero", "one", "two"];
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length > 0 ? this[sProperty] : this);
+};
+
+myArray.myMethod(); // prints "zero,one,two"
+myArray.myMethod(1); // prints "one"
+ +

Приклад вище працює тому, що myMethod викликано, як метод масиву myArray. Тому його this дорівнює myArray, а значення this[sProperty] всередині метода дорівнює myArray[sProperty]. Тим не менше, у наступному прикладі:

+ +
setTimeout(myArray.myMethod, 1000); // prints "[object Window]" after 1 second
+setTimeout(myArray.myMethod, 1500, "1"); // prints "undefined" after 1.5 seconds
+ +

Метод myArray.myMethod передано до setTimeout, як звичайну функцію, якій не задано значення this. І коли вона викликається, її this за замовчуванням дорівнює об'єкту window. У  setTimeout неможливо передати this аргументом, як, наприклад, у методи Array (forEach, reduce, тощо), або через використання  call, як показано у прикладі нижче:

+ +
setTimeout.call(myArray, myArray.myMethod, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // same error
+
+ +

Можливі рішення

+ +

Типовий спосіб вирішення цієї проблеми - використання функції обгортки, яка встановлює this із необхідним значенням: 

+ +
setTimeout(function(){myArray.myMethod()}, 2000); // prints "zero,one,two" after 2 seconds
+setTimeout(function(){myArray.myMethod('1')}, 2500); // prints "one" after 2.5 seconds
+ +

Стрілочна функція також є прийнятною альтернативою:

+ +
setTimeout(() => {myArray.myMethod()}, 2000); // prints "zero,one,two" after 2 seconds
+setTimeout(() => {myArray.myMethod('1')}, 2500); // prints "one" after 2.5 seconds
+ +

Ще одне можливе рішення проблеми this - замінити нативні глобальні функції setTimeout() та setInterval() кастомними функціями, які можуть приймати об'єкт this і застосовувати його у колбек функції, використовуючи  Function.prototype.call. Наприклад: 

+ +
// Enable setting 'this' in JavaScript timers
+
+var __nativeST__ = window.setTimeout,
+    __nativeSI__ = window.setInterval;
+
+window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this,
+      aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeST__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};
+
+window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this,
+      aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeSI__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};
+ +
Зверніть увагу:  Подібний підхід дозволяє передавати будь-яку кількість аргументів у колбек функцію таймерів навіть для IE. Таким чином, цей спосіб може також бути використаний як поліфіл. Перегляньте параграф Callback arguments .
+ +

Випробування нового підхода:

+ +
myArray = ["zero", "one", "two"];
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length > 0 ? this[sProperty] : this);
+};
+
+setTimeout(alert, 1500, "Hello world!"); // the standard use of setTimeout and setInterval is preserved, but...
+setTimeout.call(myArray, myArray.myMethod, 2000); // prints "zero,one,two" after 2 seconds
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // prints "two" after 2.5 seconds
+
+ +
Зверніть увагу:  JavaScript 1.8.5 впровадив метод   Function.prototype.bind(), який встановлює значення this для кожного виклику вказаної функції. Це допомагає уникнути використання функції обгортки для призначення this колбека.
+ +

Приклад використання bind():

+ +
myArray = ["zero", "one", "two"];
+myBoundMethod = (function (sProperty) {
+    console.log(arguments.length > 0 ? this[sProperty] : this);
+}).bind(myArray);
+
+myBoundMethod(); // prints "zero,one,two" because 'this' is bound to myArray in the function
+myBoundMethod(1); // prints "one"
+setTimeout(myBoundMethod, 1000); // still prints "zero,one,two" after 1 second because of the binding
+setTimeout(myBoundMethod, 1500, "1"); // prints "one" after 1.5 seconds
+
+ +

Примітки

+ +

Таймер можна скасувати за допомогою {{domxref("Window.clearTimeout()")}}. Щоб викликати функцію повторно (наприклад, через кожні N мілісекунди), використовуйте  {{domxref("Window.setInterval()")}}.

+ +

Важливо пам'ятати, що функція або фрагмент коду не можуть бути виконані, допоки не буде завершено поток функції, яка викликала setTimeout(). Наприклад. 

+ +
function foo(){
+  console.log('foo has been called');
+}
+setTimeout(foo, 0);
+console.log('After setTimeout');
+ +

Виведе в консоль:

+ +
After setTimeout
+foo has been called
+ +

Тому що, навіть не зважаючи на те, що setTimeout було викликано із нульовою затримкою, вона переміщується у чергу і її виконання відбудеться у найближчому наступному циклі, тобто не відразу. Код, що в данний момент виконується, повинен бути завершений. Тільки після цього функції, переміщені в чергу, будуть виконані. Тому порядок виконання може бути іншим, аніж очікувалось.

+ +

Passing string literals

+ +

Passing a string instead of a function to setTimeout() suffers from the same hazards as using eval.

+ +
// Recommended
+window.setTimeout(function() {
+    alert("Hello World!");
+}, 500);
+
+// Not recommended
+window.setTimeout("alert('Hello World!');", 500);
+
+ +

A string passed to setTimeout is evaluated in the global context, so local symbols in the context where setTimeout() was called will not be available when the string is evaluated as code.

+ +

Причини чому затримка є фактично довшою ніж вказано

+ +

There are a number of reasons why a timeout may take longer to fire than anticipated. This section describes the most common reasons.

+ +

Nested timeouts forced to >=4ms

+ +

Historically browsers implement setTimeout() "clamping": successive setTimeout() calls with delay smaller than the "minimum delay" limit are forced to use at least the minimum delay. The minimum delay, DOM_MIN_TIMEOUT_VALUE, is 4 ms (stored in a preference in Firefox: dom.min_timeout_value), with a DOM_CLAMP_TIMEOUT_NESTING_LEVEL of 5.

+ +

In fact, 4 ms is specified by the HTML5 spec and is consistent across browsers released in 2010 and onward. Prior to {{geckoRelease("5.0")}}, the minimum timeout value for nested timeouts was 10 ms.

+ +

To implement a 0 ms timeout in a modern browser, you can use {{domxref("window.postMessage()")}} as described here.

+ +

Timeouts in inactive tabs clamped to >=1000ms

+ +

To reduce the load (and associated battery usage) from background tabs, timeouts are often clamped to firing no more often than once per second (1000 ms) in inactive tabs.

+ +

Firefox implements this behavior since version 5 (see {{bug(633421)}}, the 1000ms constant can be tweaked through the dom.min_background_timeout_value preference). Chrome implements this behavior since version 11 (crbug.com/66078).

+ +

Firefox for Android uses a timeout value of 15 minutes for background tabs since {{bug(736602)}} in Firefox 14, and background tabs can also be unloaded entirely.

+ +
+

Firefox 50 no longer throttles background tabs if a Web Audio API {{domxref("AudioContext")}} is actively playing sound. Firefox 51 further amends this such that background tabs are no longer throttled if an {{domxref("AudioContext")}} is present in the tab at all, even if no sound is being played. These resolve a number of issues with apps which play note-based music not being able to time or synchronize the music properly when the tab is in the background.

+
+ +

Late timeouts

+ +

In addition to "clamping", the timeout can also fire later when the page (or the OS/browser itself) is busy with other tasks

+ +

Maximum delay value

+ +

Browsers including Internet Explorer, Chrome, Safari, and Firefox store the delay as a 32-bit signed integer internally. This causes an integer overflow when using delays larger than 2147483647, resulting in the timeout being executed immediately.

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "webappapis.html#dom-settimeout", "WindowTimers.setTimeout()")}}{{Spec2("HTML WHATWG")}}Initial definition (DOM Level 0)
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1")}}4.04.01.0
Supports parameters for callback[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}10.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.01.0{{CompatGeckoMobile("1")}}6.06.01.0
Supports parameters for callback[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Whether it supports the optional parameters when in its first form or not.

+ +

See also

+ + diff --git a/files/uk/web/api/windowtimers/index.html b/files/uk/web/api/windowtimers/index.html deleted file mode 100644 index d28752bde7..0000000000 --- a/files/uk/web/api/windowtimers/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: WindowTimers -slug: Web/API/WindowTimers -tags: - - API - - HTML DOM - - Interface - - Intervals - - Mixin - - NeedsTranslation - - Reference - - Timers - - TopicStub - - Workers -translation_of: Web/API/WindowOrWorkerGlobalScope -translation_of_original: Web/API/WindowTimers ---- -
{{APIRef("HTML DOM")}}
- -

WindowTimers is a mixin used to provide utility methods which set and clear timers. No objects of this type exist; instead, its methods are available on {{domxref("Window")}} for the standard browsing scope, or on {{domxref("WorkerGlobalScope")}} for workers.

- -

Properties

- -

This interface neither inherits nor provides any properties.

- -

Methods

- -

This interface does not inherit any methods. It offers the following methods.

- -
-
{{domxref("WindowTimers.clearInterval()")}}
-
Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.
-
{{domxref("WindowTimers.clearTimeout()")}}
-
Cancels the delayed execution set using {{domxref("WindowTimers.setTimeout()")}}.
-
{{domxref("WindowTimers.setInterval()")}}
-
Schedules a function to execute every time a given number of milliseconds elapses.
-
{{domxref("WindowTimers.setTimeout()")}}
-
Schedules a function to execute in a given amount of time.
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#windowtimers', 'WindowTimers')}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#windowtimers', 'WindowTimers')}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName("HTML WHATWG")}}. No change.
{{SpecName("HTML5 W3C", "#windowtimers", "WindowTimers")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName("HTML WHATWG")}}. Creation of WindowBase64 (properties where on the target before it).
- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop(1)}}1.04.04.01.0
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support{{CompatGeckoMobile(1)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

 

- -

See also

- - diff --git a/files/uk/web/api/windowtimers/settimeout/index.html b/files/uk/web/api/windowtimers/settimeout/index.html deleted file mode 100644 index 19c90148ce..0000000000 --- a/files/uk/web/api/windowtimers/settimeout/index.html +++ /dev/null @@ -1,428 +0,0 @@ ---- -title: WindowTimers.setTimeout() -slug: Web/API/WindowTimers/setTimeout -translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout ---- -
{{APIRef("HTML DOM")}}
- -
 
- -
Метод setTimeout(), що належить об'єкту {{domxref("WindowOrWorkerGlobalScope")}}, та наслідується від window.setTimeout,  встановлює таймер, що виконує функцію або вказаний фрагмент коду один раз, щойно спливе заданий час.
- -
 
- -

Синтаксис

- -
var timeoutID = window.setTimeout(func[, delay, param1, param2, ...]);
-var timeoutID = window.setTimeout(code[, delay]);
-
- -

Параметри

- -
-
func
-
{{jsxref("function")}} котру необхідно виконати після того, як вийде заданий час.
-
code
-
Опційний синтаксис, котрий дозволяє задавати рядок замість функції, котра компілюється і виконується при спрацюванні таймера. Використання цього синтаксису не рекомендовано з тих же ж причин, котрі роблять застосування {{jsxref("eval()")}} загрозою безпеці.
-
delay {{optional_inline}}
-
 
-
Час у мілісекундах (тисячних секунди), котрий таймер має зачекати перед тим, як виконати вказану функцію або код. Якщо цей параметр пропустити, буде використано значення 0. Варто зазначити, що справжній час затримки, може бути довшим. Дивіться розділ {{anch("Reasons for delays longer than specified","Причини, з яких затримка є фактично довшою ніж задано")}}
-
param1, ..., paramN {{optional_inline}}
-
Додаткові параметри, що передаються до func або code, щойно час таймера спливе.
-
- -
-

Зверніть увагу:  Internet Explorer 9 та більш ранні версії не підтримують додаткові параметри. Застосовуйте поліфіл, щобл уможливити цей функціонал (див. розділ Callback arguments).  

-
- -

Значення, що повертається

- -


- Після виклику setTimeout(), повертається timeoutID  - це не нульове цифрове значення, що використовується для ідентифікації створеного таймера. Цей ідентифікатор можна передати як параметр до {{domxref("Window.clearTimeout()")}} щоб відмінити таймер.

- -

Корисно знати, що setTimeout() та {{domxref("WindowTimers.setInterval", "setInterval()")}} використовують спільну колекцію ID ідентифікаторів, а також що  clearTimeout() та {{domxref("WindowTimers.clearInterval", "clearInterval()")}} технічно можуть бути взаємозамінними. Тим не менше, задля ясності, варто завжди зіставляти їх, аби не допускати помилок під час розробки коду. 

- -

Приклад

- -

У наступному прикладі створено дві кнопки на веб сторінці, що прив'язані до setTimeout() та clearTimeout() процесів. Після натискання на першу кнопку встановлюється таймер, що викликає діалогове вікно alert через дві секунди та зберігає ID таймера для подальшого використання у clearTimeout(). За бажанням ви можете відмінити цей таймер, якщо натисните другу кнопку.

- -

HTML код

- -
<p>Live Example</p>
-<button onclick="delayedAlert();">Відобразити діалогове вікно alert через дві секунди.</button>
-<p></p>
-<button onclick="clearAlert();">Відмінити відображення діалогового вікна.</button>
-
- -

JavaScript код

- -
var timeoutID;
-
-function delayedAlert() {
-  timeoutID = window.setTimeout(slowAlert, 2000);
-}
-
-function slowAlert() {
-  alert("Це було дійсно повільно!");
-}
-
-function clearAlert() {
-  window.clearTimeout(timeoutID);
-}
-
- -

Результат

- -

{{EmbedLiveSample('Example', 'Приклад')}}

- -

Дивіться також clearTimeout() example.

- -

Поліфіл

- -

Якщо вам необхідно передати один чи декілька аргументів до колбек функції, а також потрібно, щоб цей функціонал працював у браузерах, що не підтримують передачу додаткових аргументів для setTimeout() чи setInterval() (наприклад, версії Internet Explorer 9 чи нижче), ви можете застосувати цей поліфіл, який активує стандартну HTML5 функціональність. Просто додайте цей код на початку вашого скрипта: 

- -
/*\
-|*|
-|*|  Polyfill which enables the passage of arbitrary arguments to the
-|*|  callback functions of JavaScript timers (HTML5 standard syntax).
-|*|
-|*|  https://developer.mozilla.org/en-US/docs/DOM/window.setInterval
-|*|
-|*|  Syntax:
-|*|  var timeoutID = window.setTimeout(func, delay[, param1, param2, ...]);
-|*|  var timeoutID = window.setTimeout(code, delay);
-|*|  var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
-|*|  var intervalID = window.setInterval(code, delay);
-|*|
-\*/
-
-(function() {
-  setTimeout(function(arg1) {
-    if (arg1 === 'test') {
-      // feature test is passed, no need for polyfill
-      return;
-    }
-    var __nativeST__ = window.setTimeout;
-    window.setTimeout = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) {
-      var aArgs = Array.prototype.slice.call(arguments, 2);
-      return __nativeST__(vCallback instanceof Function ? function() {
-        vCallback.apply(null, aArgs);
-      } : vCallback, nDelay);
-    };
-  }, 0, 'test');
-
-  var interval = setInterval(function(arg1) {
-    clearInterval(interval);
-    if (arg1 === 'test') {
-      // feature test is passed, no need for polyfill
-      return;
-    }
-    var __nativeSI__ = window.setInterval;
-    window.setInterval = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) {
-      var aArgs = Array.prototype.slice.call(arguments, 2);
-      return __nativeSI__(vCallback instanceof Function ? function() {
-        vCallback.apply(null, aArgs);
-      } : vCallback, nDelay);
-    };
-  }, 0, 'test');
-}())
-
- -

Фікс для IE

- -

Якщо вам потрібен фікс, який не впливатиме на роботу жодного іншого мобільного чи десктопного браузера, окрім IE9 та нижче, ви можете скористатись умовними коментарями JavaScript:

- -
/*@cc_on
-  // conditional IE < 9 only fix
-  @if (@_jscript_version <= 9)
-  (function(f){
-     window.setTimeout=f(window.setTimeout);
-     window.setInterval=f(window.setInterval);
-  })(function(f){return function(c,t){var a=[].slice.call(arguments,2);return f(function(){c instanceof Function?c.apply(this,a):eval(c)},t)}});
-  @end
-@*/
-
- -

Або використати умовні коментарі HTML для IE9 та нижче:

- -
<!--[if lte IE 9]><script>
-(function(f){
-window.setTimeout=f(window.setTimeout);
-window.setInterval=f(window.setInterval);
-})(function(f){return function(c,t){
-var a=[].slice.call(arguments,2);return f(function(){c instanceof Function?c.apply(this,a):eval(c)},t)}
-});
-</script><![endif]-->
-
- -

Тимчасові рішення

- -

Ще одне можливе рішення - використання анонімної функції для виклику колбека, але це вартісне рішення. Приклад:

- -
var intervalID = setTimeout(function() { myFunc("one", "two", "three"); }, 1000);
-
- -

Приклад, наведений вище, може бути також написаний за допомогою   arrow function:

- -
var intervalID = setTimeout(() => { myFunc("one", "two", "three"); }, 1000);
-
- -

Ще одне рішення - використання   function's bind. Приклад:

- -
setTimeout(function(arg1){}.bind(undefined, 10), 1000);
-
- -

Проблема "this"

- -

Коли ви передаєте до setTimeout() метод або будь-яку іншу функцію, ймовірно вона буде викликана не з тим значенням this, на яке ви очікуєте. Ця проблема детально описана у JavaScript reference.

- -

Пояснення

- -

Код, що виконується всередині setTimeout(), викликається із  іншого контекста виконання (execution context), ніж у функції, яка викликала setTimeout. До функції, яку викликають всередині setTimeout застосовуються звичайні правила призначення this. І, якщо ви не встановили this під час виклику або за допомогою bind, його значенням за замовчуванням буде об'єкт  global (або window) у нестрогому режимі, або undefined у строгому режимі. Значення this буде іншим, аніж у функції, яка викликала setTimeout. Розгляньте наступний приклад:

- -
myArray = ["zero", "one", "two"];
-myArray.myMethod = function (sProperty) {
-    alert(arguments.length > 0 ? this[sProperty] : this);
-};
-
-myArray.myMethod(); // prints "zero,one,two"
-myArray.myMethod(1); // prints "one"
- -

Приклад вище працює тому, що myMethod викликано, як метод масиву myArray. Тому його this дорівнює myArray, а значення this[sProperty] всередині метода дорівнює myArray[sProperty]. Тим не менше, у наступному прикладі:

- -
setTimeout(myArray.myMethod, 1000); // prints "[object Window]" after 1 second
-setTimeout(myArray.myMethod, 1500, "1"); // prints "undefined" after 1.5 seconds
- -

Метод myArray.myMethod передано до setTimeout, як звичайну функцію, якій не задано значення this. І коли вона викликається, її this за замовчуванням дорівнює об'єкту window. У  setTimeout неможливо передати this аргументом, як, наприклад, у методи Array (forEach, reduce, тощо), або через використання  call, як показано у прикладі нижче:

- -
setTimeout.call(myArray, myArray.myMethod, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
-setTimeout.call(myArray, myArray.myMethod, 2500, 2); // same error
-
- -

Можливі рішення

- -

Типовий спосіб вирішення цієї проблеми - використання функції обгортки, яка встановлює this із необхідним значенням: 

- -
setTimeout(function(){myArray.myMethod()}, 2000); // prints "zero,one,two" after 2 seconds
-setTimeout(function(){myArray.myMethod('1')}, 2500); // prints "one" after 2.5 seconds
- -

Стрілочна функція також є прийнятною альтернативою:

- -
setTimeout(() => {myArray.myMethod()}, 2000); // prints "zero,one,two" after 2 seconds
-setTimeout(() => {myArray.myMethod('1')}, 2500); // prints "one" after 2.5 seconds
- -

Ще одне можливе рішення проблеми this - замінити нативні глобальні функції setTimeout() та setInterval() кастомними функціями, які можуть приймати об'єкт this і застосовувати його у колбек функції, використовуючи  Function.prototype.call. Наприклад: 

- -
// Enable setting 'this' in JavaScript timers
-
-var __nativeST__ = window.setTimeout,
-    __nativeSI__ = window.setInterval;
-
-window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-  var oThis = this,
-      aArgs = Array.prototype.slice.call(arguments, 2);
-  return __nativeST__(vCallback instanceof Function ? function () {
-    vCallback.apply(oThis, aArgs);
-  } : vCallback, nDelay);
-};
-
-window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-  var oThis = this,
-      aArgs = Array.prototype.slice.call(arguments, 2);
-  return __nativeSI__(vCallback instanceof Function ? function () {
-    vCallback.apply(oThis, aArgs);
-  } : vCallback, nDelay);
-};
- -
Зверніть увагу:  Подібний підхід дозволяє передавати будь-яку кількість аргументів у колбек функцію таймерів навіть для IE. Таким чином, цей спосіб може також бути використаний як поліфіл. Перегляньте параграф Callback arguments .
- -

Випробування нового підхода:

- -
myArray = ["zero", "one", "two"];
-myArray.myMethod = function (sProperty) {
-    alert(arguments.length > 0 ? this[sProperty] : this);
-};
-
-setTimeout(alert, 1500, "Hello world!"); // the standard use of setTimeout and setInterval is preserved, but...
-setTimeout.call(myArray, myArray.myMethod, 2000); // prints "zero,one,two" after 2 seconds
-setTimeout.call(myArray, myArray.myMethod, 2500, 2); // prints "two" after 2.5 seconds
-
- -
Зверніть увагу:  JavaScript 1.8.5 впровадив метод   Function.prototype.bind(), який встановлює значення this для кожного виклику вказаної функції. Це допомагає уникнути використання функції обгортки для призначення this колбека.
- -

Приклад використання bind():

- -
myArray = ["zero", "one", "two"];
-myBoundMethod = (function (sProperty) {
-    console.log(arguments.length > 0 ? this[sProperty] : this);
-}).bind(myArray);
-
-myBoundMethod(); // prints "zero,one,two" because 'this' is bound to myArray in the function
-myBoundMethod(1); // prints "one"
-setTimeout(myBoundMethod, 1000); // still prints "zero,one,two" after 1 second because of the binding
-setTimeout(myBoundMethod, 1500, "1"); // prints "one" after 1.5 seconds
-
- -

Примітки

- -

Таймер можна скасувати за допомогою {{domxref("Window.clearTimeout()")}}. Щоб викликати функцію повторно (наприклад, через кожні N мілісекунди), використовуйте  {{domxref("Window.setInterval()")}}.

- -

Важливо пам'ятати, що функція або фрагмент коду не можуть бути виконані, допоки не буде завершено поток функції, яка викликала setTimeout(). Наприклад. 

- -
function foo(){
-  console.log('foo has been called');
-}
-setTimeout(foo, 0);
-console.log('After setTimeout');
- -

Виведе в консоль:

- -
After setTimeout
-foo has been called
- -

Тому що, навіть не зважаючи на те, що setTimeout було викликано із нульовою затримкою, вона переміщується у чергу і її виконання відбудеться у найближчому наступному циклі, тобто не відразу. Код, що в данний момент виконується, повинен бути завершений. Тільки після цього функції, переміщені в чергу, будуть виконані. Тому порядок виконання може бути іншим, аніж очікувалось.

- -

Passing string literals

- -

Passing a string instead of a function to setTimeout() suffers from the same hazards as using eval.

- -
// Recommended
-window.setTimeout(function() {
-    alert("Hello World!");
-}, 500);
-
-// Not recommended
-window.setTimeout("alert('Hello World!');", 500);
-
- -

A string passed to setTimeout is evaluated in the global context, so local symbols in the context where setTimeout() was called will not be available when the string is evaluated as code.

- -

Причини чому затримка є фактично довшою ніж вказано

- -

There are a number of reasons why a timeout may take longer to fire than anticipated. This section describes the most common reasons.

- -

Nested timeouts forced to >=4ms

- -

Historically browsers implement setTimeout() "clamping": successive setTimeout() calls with delay smaller than the "minimum delay" limit are forced to use at least the minimum delay. The minimum delay, DOM_MIN_TIMEOUT_VALUE, is 4 ms (stored in a preference in Firefox: dom.min_timeout_value), with a DOM_CLAMP_TIMEOUT_NESTING_LEVEL of 5.

- -

In fact, 4 ms is specified by the HTML5 spec and is consistent across browsers released in 2010 and onward. Prior to {{geckoRelease("5.0")}}, the minimum timeout value for nested timeouts was 10 ms.

- -

To implement a 0 ms timeout in a modern browser, you can use {{domxref("window.postMessage()")}} as described here.

- -

Timeouts in inactive tabs clamped to >=1000ms

- -

To reduce the load (and associated battery usage) from background tabs, timeouts are often clamped to firing no more often than once per second (1000 ms) in inactive tabs.

- -

Firefox implements this behavior since version 5 (see {{bug(633421)}}, the 1000ms constant can be tweaked through the dom.min_background_timeout_value preference). Chrome implements this behavior since version 11 (crbug.com/66078).

- -

Firefox for Android uses a timeout value of 15 minutes for background tabs since {{bug(736602)}} in Firefox 14, and background tabs can also be unloaded entirely.

- -
-

Firefox 50 no longer throttles background tabs if a Web Audio API {{domxref("AudioContext")}} is actively playing sound. Firefox 51 further amends this such that background tabs are no longer throttled if an {{domxref("AudioContext")}} is present in the tab at all, even if no sound is being played. These resolve a number of issues with apps which play note-based music not being able to time or synchronize the music properly when the tab is in the background.

-
- -

Late timeouts

- -

In addition to "clamping", the timeout can also fire later when the page (or the OS/browser itself) is busy with other tasks

- -

Maximum delay value

- -

Browsers including Internet Explorer, Chrome, Safari, and Firefox store the delay as a 32-bit signed integer internally. This causes an integer overflow when using delays larger than 2147483647, resulting in the timeout being executed immediately.

- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("HTML WHATWG", "webappapis.html#dom-settimeout", "WindowTimers.setTimeout()")}}{{Spec2("HTML WHATWG")}}Initial definition (DOM Level 0)
- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1")}}4.04.01.0
Supports parameters for callback[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}10.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.01.0{{CompatGeckoMobile("1")}}6.06.01.0
Supports parameters for callback[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

[1] Whether it supports the optional parameters when in its first form or not.

- -

See also

- - diff --git "a/files/uk/web/api/\320\277\320\276\320\264\321\226\321\217/index.html" "b/files/uk/web/api/\320\277\320\276\320\264\321\226\321\217/index.html" deleted file mode 100644 index e1aab3dfde..0000000000 --- "a/files/uk/web/api/\320\277\320\276\320\264\321\226\321\217/index.html" +++ /dev/null @@ -1,188 +0,0 @@ ---- -title: Подія -slug: Web/API/Подія -translation_of: Web/API/Event ---- -

{{APIRef("DOM")}}

- -

Event інтерфейс представляє подію, що відбувається в DOM. Подія може бути ініційована дією користувача, наприклад, кліком мишки або натисканням клавіши на клавіатурі, або згенерована API, щоб показати прогрес асинхронного завдання, тощо. Це може бути також ініційовано програмно викликом HTMLElement.click() методу елемента, або створенням екземпляру події, потім відправленням його до вказаного цільового елементу, використовуючи EventTarget.dispatchEvent().

- -

Існує багато різновидів подій, деякі з котрих використовують інші інтерфейси, основані на головному інтерфейсі Event. Сам по собі Event вміщає можливості та методи, спільні для всіх подій.

- -

Багато елементів DOM можуть бути налаштовані прийняти (або "почути") ці події та виконати код у відповідь на процес їхньої обробки. Хендлери подій звичайно пов'язані або додаються до різноманітних HTML elements (таких як <button>, <div>, <span>, і т.п.) при використанні EventTarget.addEventListener(), а це, як правило, замінює використання атрибутів хендлера подій старого HTML. Надалі за необхідності додавання, такі хендлери також можна відключати, якщо потрібно, використовуючи removeEventListener().  

- -

Примітка: один елемент може мати декілька таких хендлерів, навіть для однієї й тієї ж події - особливо якщо окремо, незалежні модулі коду прикріплять їх, кожний для власних незалежних цілей. (Наприклад, вебсторінка з рекламним модулем та статичним модулем, обидва з яких забезпечують моніторинг перегляду відео.) 

- -

Коли є багато вкладених елементів, кожний зі своїм особистим хендлером (хендлерами), обробка подій може стати дуже складною - особливо там, де батьківський елемент отримує ту ж саму подію, що й її дочірній елемент, тому що "просторово" вони перетинаються і таким чином подія технічно з'являється в них обох, а порядок обробки таких подій залежить від параметрів вспливаючих подій та захоплення кожного обробника.

- -

Інтерфейси на основі Event

- -

Нижче надано список інтерфейсів, які існують на основі головного Event інтерфейсу, із ссилками на відповідну документацію в довіднику MDN API.

- -

Зверніть увагу, що всі інтерфейси подій мають назви із закінченням "Event".

- - - -
- -
- -

Конструктор

- -
-
{{domxref("Event.Event", "Event()")}}
-
Створює  Event об'єкт та повертає його абоненту.
-
- -

Властивості

- -
-
{{domxref("Event.bubbles")}} {{readonlyinline}}
-
Булевий вираз вказує на те, чи вспливає подія через DOM.
-
{{domxref("Event.cancelBubble")}}
-
Історичний псевдонім {{domxref("Event.stopPropagation()")}}. Встановлення його значення true  перед поверненням з обробника події запобігає поширенню події.
-
{{domxref("Event.cancelable")}} {{readonlyinline}}
-
Булевий вираз вказує на те, чи скасовується подія.
-
{{domxref("Event.composed")}} {{ReadOnlyInline}}
-
Булевий вираз вказує на те, чи може подія всплити через межу між  тінню DOM та черговим DOM.
-
{{domxref("Event.currentTarget")}} {{readonlyinline}}
-
Посилання на зареєстровану зараз ціль події. Це об'єкт, на котрий наразі планується відіслати подію. Можливо, це змінилося по дорозі через retargeting.
-
{{domxref("Event.deepPath")}} {{non-standard_inline}}
-
 {{jsxref("Array")}} of DOM {{domxref("Node")}}, через який всплила подія.
-
{{domxref("Event.defaultPrevented")}} {{readonlyinline}}
-
Вказує, чи виклик {{domxref("event.preventDefault()")}}  скасував подію.
-
{{domxref("Event.eventPhase")}} {{readonlyinline}}
-
Вказує, яка фаза потоку подій обробляється.
-
{{domxref("Event.explicitOriginalTarget")}} {{non-standard_inline}} {{readonlyinline}}
-
Явна оригінальна мета події (Mozilla-specific).
-
{{domxref("Event.originalTarget")}} {{non-standard_inline}} {{readonlyinline}}
-
Початкова ціль події перед будь-якими ретаргетингами. (Mozilla-specific).
-
{{domxref("Event.returnValue")}}
-
Історична властивість, представлена Internet Explorer і згодом прийнята в специфікацію DOM для того, щоб забезпечити продовження  роботи існуючих сайтів. В ідеалі, вам слід спробувати використати {{domxref(''Event.preventDefault()")}} та {{domxref("Event.defaultPrevented")}} замість нього, але ви можете використовувати returnValue, якщо ви  вирішите це зробити.
-
{{domxref("Event.returnValue")}} {{non-standard_inline}}
-
Нестандартний псевдонім (зі старої версії Microsoft Internet Explorer) для {{domxref("Event.target")}}. Деякі інші браузери починають підтримувати його для веб-сумісності.
-
{{domxref("Event.target")}} {{readonlyinline}}
-
Посилання на ціль, до якої спочатку була відправлена подія.
-
{{domxref("Event.timeStamp")}} {{readonlyinline}}
-
Час, коли було створено подію (в мілісекундах).  За специфікацією, це значення - час з епохи - але насправді визначення браузерів різняться.Крім того, ведеться робота, щоб змінити його на {{domxref("DOMHighResTimeStamp")}} .
-
{{domxref("Event.isTrusted")}} {{readonlyinline}}
-
Вказує, чи  була подія ініційована браузером (наприклад, після натискання клавіши на клавіатурі користувачем) або за сценарієм (використовуючи метод створення подій, наприклад {{domxref("Event.initEvent")}}).
-
Застарілі властивості
-
- -

{{domxref("Event.scoped")}} {{readonlyinline}} {{obsolete_inline}}

- -

Застарілі; використовуйте замість них {{domxref("Event.composed", "composed")}}. ({{jsxref("Boolean")}} вказує, чи вспливе дана подія через тіньовий корінь у стандарт DOM.)

- -

Методи

- -
-
{{domxref("Event.createEvent()")}} {{deprecated_inline}}
-
Створює нову подію, котра повинна бути ініційована викликом її  initEvent() методу.
-
{{domxref("Event.composedPath()")}}
-
Повертає шлях події (об'єкти, на які слухачі будуть викликані). Це не включає вузли через тіньові дерева, якщо тіньовий корінь було створено із закритим {{domxref("ShadowRootmode")}}.
-
{{domxref("Event.preventDefault()")}}
-
Скасовує подію, (якщо її можливо скасувати).
-
{{domxref("Event.stopImmediatePropagation()")}}
-
Для цієї конкретної події не дозволяйте викликати всіх інших слухачів. Сюди входять слухачі, приєднані до одного й того ж елемента, а також ті, що додаються до елементів, які буде прищеплено пізніше (наприклад, під час фази введення).
-
{{domxref("Event.stopPropagation()")}}
-
Зупиняє розповсюдження подій далі у DOM.
-
Застарілі методи
-
{{domxref("Event.getPreventDefault()")}} {{non-standard_inline}}
-
Нестандартний. Використовуйте замість нього {{domxref("Event.defaultPrevented")}}.  (Повертає значення {{domxref("Event.defaultPrevented")}}.)
-
{{domxref("Event.preventBubble()"}} {{non-standard_inline}} {{Obsolete_inline(24)}}
-
Застарілий; використовуйте замість нього {{domxref("event.stopPropagation")}}. (Захищає подію від вспливання).
-
{{domxref("Event.preventcapture()"}} {{non-standard_inline}} {{Obsolete_inline(24)}}
-
Застарілий; використовуйте замість нього {{domxref("event.stopPropagation"}}.
-
- -

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

- - - - - - - - - - - - - - -
ХарактеристикаСтатусКоментар
{{SpecName('DOM WHATWG', '#interface-event', 'Event')}}{{Spec2('DOM WHATWG')}}
- -

Сумісність з браузером

- -

приховано

- -

Таблиця сумісності на цій сторінці формується із структурованих даних. Якщо ви захочете побачити її, будь ласка, перевірте та відправте нам запит https://github/com/mdn/browser-compat-data

- - - -

Дивіться також

- - diff --git "a/files/uk/web/api/\320\277\320\276\320\264\321\226\321\217/target/index.html" "b/files/uk/web/api/\320\277\320\276\320\264\321\226\321\217/target/index.html" deleted file mode 100644 index 20c17f2d31..0000000000 --- "a/files/uk/web/api/\320\277\320\276\320\264\321\226\321\217/target/index.html" +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: Event.target -slug: Web/API/Подія/target -translation_of: Web/API/Event/target ---- -

{{ApiRef("DOM")}}

- -

Властивість target інтерфейсу {{domxref("Event")}} є посиланням на об'єкт який відправив подію. Він відрізняється від {{domxref("Event.currentTarget")}} коли обробник події викликається в фазі спливання або фіксації події.

- -

Синтаксис

- -
var theTarget = event.target;
- -

Приклад

- -

Властивість event.target може бути використана для реалізації делегування події.

- -
// Зробити список
-var ul = document.createElement('ul');
-document.body.appendChild(ul);
-
-var li1 = document.createElement('li');
-var li2 = document.createElement('li');
-ul.appendChild(li1);
-ul.appendChild(li2);
-
-function hide(e){
-  // e.target вказує на елемент <li> на якому було натиснуто
-  // Це відрізняється від e.currentTarget який буде посилатися на батьківський <ul> в даному контексті
-  e.target.style.visibility = 'hidden';
-}
-
-// Приєднання слухача подій до списка
-// Він запуститься при натисканні кожного <li>
-ul.addEventListener('click', hide, false);
-
- -

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

- - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("DOM WHATWG", "#dom-event-target", "Event.target")}}{{Spec2("DOM WHATWG")}}
{{SpecName("DOM4", "#dom-event-target", "Event.target")}}{{Spec2("DOM4")}}
{{SpecName("DOM2 Events", "#Events-Event-target", "Event.target")}}{{Spec2("DOM2 Events")}}Initial definition
- -

Сумісність з браузерами

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Нотатки про сумісність

- -

В браузерах IE 6-8 використовується інша модель подій. Слухачі подій приєднуються з використанням нестандартного методу {{domxref('EventTarget.attachEvent')}}. В цій моделі, об'єкт події має {{domxref('Event.srcElement')}} властивість, замість властивості target, і воно має ту ж саму семантику як event.target.

- -
function hide(e) {
-  // Підтримка IE6-8
-  var target = e.target || e.srcElement;
-  target.style.visibility = 'hidden';
-}
-
- -

Читати також

- - diff --git a/files/uk/web/css/alternative_style_sheets/index.html b/files/uk/web/css/alternative_style_sheets/index.html new file mode 100644 index 0000000000..1dd1b5a510 --- /dev/null +++ b/files/uk/web/css/alternative_style_sheets/index.html @@ -0,0 +1,80 @@ +--- +title: Альтернативні таблиці стилів +slug: Web/CSS/Альтернативні_таблиці_стилів +tags: + - Стилі + - Теми +translation_of: Web/CSS/Alternative_style_sheets +--- +

Specifying alternative style sheets in a web page provides a way for users to see multiple versions of a page, based on their needs or preferences.

+ +

Firefox lets the user select the stylesheet using the View > Page Style submenu, Internet Explorer also supports this feature (beginning with IE 8), also accessed from View > Page Style (at least as of IE 11), but Chrome requires an extension to use the feature (as of version 48). The web page can also provide its own user interface to let the user switch styles.

+ +

An example: specifying the alternative stylesheets

+ +

The alternate stylesheets are commonly specified using a {{HTMLElement("link")}} element with rel="stylesheet alternate" and title="..." attributes, for example:

+ +
<link href="reset.css" rel="stylesheet" type="text/css">
+
+<link href="default.css" rel="stylesheet" type="text/css" title="Default Style">
+<link href="fancy.css" rel="alternate stylesheet" type="text/css" title="Fancy">
+<link href="basic.css" rel="alternate stylesheet" type="text/css" title="Basic">
+
+ +

In this example, the styles "Default Style", "Fancy", and "Basic" will be listed in the Page Style submenu, with the Default Style pre-selected. When the user selects a different style, the page will immediately be re-rendered using that style sheet.

+ +

No matter what style is selected, the rules from the reset.css stylesheet will always be applied.

+ +

Try it out

+ +

Click here for a working example you can try out.

+ +

Details

+ +

Any stylesheet in a document falls into one of the following categories:

+ + + +

When style sheets are referenced with a title attribute on the {{HTMLElement("link", "<link rel=\"stylesheet\">")}} or {{HTMLElement("style")}} element, the title becomes one of the choices offered to the user. Style sheets linked with the same title are part of the same choice. Style sheets linked without a title attribute are always applied.

+ +

Use rel="stylesheet" to link to the default style, and rel="alternate stylesheet" to link to alternative style sheets. This tells the browser which style sheet title should be selected by default, and makes that default selection apply in browsers that do not support alternate style sheets.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSSOM', '#css-style-sheet-collections', 'CSS Style Sheet Collections')}}{{Spec2('CSSOM')}}The CSS OM specification defines the concepts of the style sheet set name, its disabled flag, and the preferred CSS style sheet set name.
+ It defines how these are determined, and lets the HTML specification define the HTML-specific behaviors by requiring it to define when to create a CSS style sheet.
+

{{SpecName('HTML WHATWG', 'semantics.html#link-type-stylesheet', 'Link type "stylesheet"')}}
+ {{SpecName('HTML WHATWG', 'semantics.html#attr-style-title', 'The style element')}}
+ {{SpecName('HTML WHATWG', 'semantics.html#attr-meta-http-equiv-default-style', 'Default style state (http-equiv="default-style")')}}

+ 		{{Spec2('HTML WHATWG')}}The HTML specification defines when and how the create a CSS style sheet algorithm is invoked while handling <link> and <style> elements, and also defines the behavior of <meta http-equiv="default-style">.
{{SpecName("HTML4.01", "present/styles.html#h-14.3", "Alternative style sheets")}}{{Spec2("HTML4.01")}}Earlier, the HTML specification itself defined the concept of preferred and alternate stylesheets.
+ +

 

diff --git a/files/uk/web/css/css_animations/using_css_animations/index.html b/files/uk/web/css/css_animations/using_css_animations/index.html new file mode 100644 index 0000000000..f8b8466ef4 --- /dev/null +++ b/files/uk/web/css/css_animations/using_css_animations/index.html @@ -0,0 +1,357 @@ +--- +title: Використання CSS анімацій +slug: Web/CSS/CSS_Animations/Використання_CSS_анімацій +tags: + - CSS Animations + - Довідка +translation_of: Web/CSS/CSS_Animations/Using_CSS_animations +--- +

{{SeeCompatTable}}{{CSSRef}}

+ +

CSS анімації роблять можливим анімацію переходів (transitions) з однєї конфігурації CSS стилю до іншої. Анімації складаються з двох компонентів, а власне - стилю, котрий описує CSS анімацію та набір ключових кадрів (keyframes), які задають початковий та кінцевий стан стилю анімації, а також є можливим задання точок проміжного стану.

+ +

В CSS анімацій є три ключові переваги перед традиційними скриптовими техніками анімації:

+ +
    +
  1. Вони легкі у використанні для простих анімацій; ви можете створити їх навіть без знань JavaScript.
    2. +
  2. Анімації добре функціонують, навіть при помірному навантаженні на систему. Прості анімації на JavaScript можуть працювати не дуже добре (в разі, якщо вони не ідеально зроблені). Движок рендера може використовувати техніку пропуску кадрів та інші засоби для підтримки гладкої анімації.
    3. +
  3. Надаючи таким чином браузеру контроль над послідовністю анімації ви надаєте можливість брауцзеру оптимізувати свою роботу та ефективність, наприклад, завдяки зупинці анімації у вкладках, які не є відкриті для перегляду.
    4. +
+ +

Конфігурування анімації

+ +

Щоб створити CSS-анімаційну послідвність, ви стилізуєте анімований елемент {{ cssxref("animation") }} властивістю чи її підвластивостями. Це дозвоялє вам коригувати таймінг, тривалість та інші деталі анімації згідно з вашими потребами. Це не конфігурує актуальний вигляд анімації, яка здійснюється проходом через {{ cssxref("@keyframes") }} at-правила, як це описано в {{ anch("Визначення послідовності анімації через ключові кадри") }} нижче.

+ +

Підвластивостями властивості {{ cssxref("animation") }} є:

+ +
+
{{ cssxref("animation-delay") }}
+
Змінює час затримки між часом з моменту завантаження елемента та початком анімаційної послідовності.
+
{{ cssxref("animation-direction") }}
+
Визначає зміну напрямку анімації та його чергування в залежності від кількості проходів анімації, а також може задавати повернення в початковий стан і починати прохід заново.
+
{{ cssxref("animation-duration") }}
+
Визначає тривалість циклу анімації.
+
{{ cssxref("animation-iteration-count") }}
+
Визначає кількість проходів (повторів) анімації; ви можете також обрати значення infinite для нескінченного повтору анімації.
+
{{ cssxref("animation-name") }}
+
Задає ім'я для анімації {{ cssxref("@keyframes") }} через at-правило, яке описує анімаційні ключові кадри.
+
{{ cssxref("animation-play-state") }}
+
Дозволяє вам призупиняти та відновлювати анімацію.
+
{{ cssxref("animation-timing-function") }}
+
Задає конфігурацію таймінгу анімації; інакше кажучи, як саме буде анімація робити прохід через ключові кадри, це можливо завдяки кривим прискорення.
+
{{ cssxref("animation-fill-mode") }}
+
Визначає, які значення будуть застосовані для анімації перед початком та після її закінчення.
+
+ +

Визначення послідовності анімації через ключові кадри

+ +

Опісля того, як ви задали анімації таймінг, вам потрібно задати вигляд анімації. Це робиться завдяки одному чи більше  ключовому кадру шляхом застосування at-правила {{ cssxref("@keyframes") }}. Кожен ключовий кадр описує, як саме повинен відображатися анімований елемент у певний момент під час проходження анімаційної послідовності.

+ +

Після того, як таймінг анімації був заданий в CSS стилі, який конгфігурує анімацію, ключові кадри використовують {{ cssxref("percentage") }} для відображення моменту під час анімації, в якому буде розміщений той чи інший ключовий кадр. 0% вказує на сам початок анімаціїйної послідовності, тоді як 100% вказує на завершальний етап анімації. Оскільки ці два моменти є такими важливими, вони мають свої спеціальні імена: from і to відповідно. Обидва ці імені є необов'язковими. Якщо from/0% чи to/100% не є задано, то браузер починає чи зупиняє анімацію використовуючи середньообраховані значення всіх атрибутів.

+ +

Ви також можете на свій розсуд додавати проміжні кадри до анімації, аби описати стан анімації в проміжні періоди.

+ +

Приклади

+ +
Примітка: Подані приклади не використовують вендорних префіксів. WebKit-браузери та старіші версії інших браузерів можуть потребувати цих префіксів; приклади, на які ви можете клацнути для перегляду у вашому браузері також включають -webkit-префіксовані версії.
+ +

Текст, що ковзає у вікні браузера

+ +

Цей простий приклад стилізує елемент {{ HTMLElement("p") }} так, що текст "зісковзує" в вікно браузера з-поза його правого краю.

+ +

Майте на увазі, що такі анімації можуть робити сторінку ширшою, аніж вікно браузера. Аби уникнути такої проблеми, потрібно помістити анімований елемент в контейнер і встановити для останнього {{cssxref("overflow")}}:hidden.

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+}
+
+@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+
+ +

В цьому прикладі стиль для {{ HTMLElement("p") }}-елемента визначає, що тривалість анімації становить 3 секунди від початку до кінця, використовуючи властивість {{ cssxref("animation-duration") }}, а також присвоює ім'я цій анімації, яке використано у ключових кадрах {{ cssxref("@keyframes") }} . Їхні at-правила визначили, що це ключові кадри для анімації, яка називається “slidein”.

+ +

Якщо нам потрібно ще якусь додаткову стилізацію елемента {{ HTMLElement("p") }} для відобаження в браузерах, які не підтримують CSS анімацій, то ми б її включили туди ж; однак, в цьому випадку ми не потребуємо додаткової стилізації, крім анімації елемента.

+ +

Ключові кадри визначені через  at-правила {{ cssxref("@keyframes") }}. В даному випадку є лише два ключових кадри. Перший ключовий кадр наступає в 0% (вжито спеціальне ім'я from). Тут, ми змінюємо лівий маргін елемента як 100% (тобто це відраховується, як відстань від правого краю контейнера), і встановили 300% ширини для елемента (Втричі ширше за контейнер). Завдяки цьому на першому ключовому кадрі анімований елемент буде знаходитися поза межами контейнера (вікна браузера).

+ +

Другий ключовий кадр (він же завершальний) розміщений на завершенні анімації, 100% (спеціальне ім'я to). Лівий маргін встановлено як 0% і ширину елемента ми встановили як 100%. Це спричиняє "приклеювання" елемента до лівого краю вікна браузера.

+ +
<p>The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.</p>
+
+ +

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

+ +

{{EmbedLiveSample("Making_text_slide_across_the_browser_window","100%","250")}}

+ +

Додавання інших ключових кадрів

+ +

Давайте додамо ще один ключовий кадр до анімації з попереднього прикладу. Припустимо, нам потрібно трішки збільшити шрифт, коли текст рухається вліво, а потім ми його повертаємо до попередніх параметрів. Це просто, як додавання ось такого ключового кадру:

+ +
75% {
+  font-size: 300%;
+  margin-left: 25%;
+  width: 150%;
+}
+
+ + + + + +

Це повідомляє браузеру, що елемент, при виконанні 75% анімації, повинен мати лівий маргін 25% і ширину 150%.

+ +

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

+ +

{{EmbedLiveSample("Adding_another_keyframe","100%","250")}}

+ +

Making it repeat

+ +

Якщо вам потрібно, аби анімація повторювалась, просто використайте властивість  {{ cssxref("animation-iteration-count") }} , щоб зазначити, скільки разів повинна повторитися анімація. В даному випадку давайте використаємо значення infinite для отримання постійної анімації:

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+}
+
+ + + + + +

{{EmbedLiveSample("Making_it_repeat","100%","250")}}

+ +

Змінюємо напрямки анімації

+ +

Отже, анімація повторювана, але це виглядає дивно: текст по завершенню циклу, з початком нового знову стрибає вбік. Отже нам треба зробити, аби текст плавно повертався назад, на початкову позицію. Це просто: прописуємо у {{ cssxref("animation-direction") }} значення alternate:

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+
+ + + + + +

{{EmbedLiveSample("Making_it_move_back_and_forth","100%","250")}}

+ +

Використання скорочень для правил анімації

+ +

{{ cssxref("animation") }} скорочення є вигідним для економії місця. От, для прикладу, правила анімації, які ми вже використали в статті:

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+
+ +

Їх можна замінити ось таким чином

+ +
p {
+  animation: 3s infinite alternate slideIn;
+}
+ +
+

Примітка: Ви можете дізнатися про це більше на сторінці довідки {{ cssxref("animation") }} :

+
+ +

Задання множинних значень властивостей анімації

+ +

Нескорочені значення CSS анімації можуть приймати множинні значення, розділені комами — таку особливість можна використати, якщо вам потрібно задати множинні анімації єдиним набором правил і відповідно задати різні тривалості, повтори і так далі для різних анімацій. Давайте глянемо на кілька швидких прикладів, аби пояснити різні зміни:

+ +

В першому прикладі у нас є набір з трьох різних імен анімації, але одна й та ж тривалість і кількість повторів:

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

В другому прикладі в нас є набір з 3х значень для кожної властивості. В цьому випадку кожна анімація буде здійснюватися з відповідними значеннями, згідно з їх розміщенням у властивостях, то ж, приміром, fadeInOut має тривалість в 2.5s і кількість повторів 2,  і т.д..

+ +
animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 2.5s, 5s, 1s;
+animation-iteration-count: 2, 1, 5;
+ +

У цьому третьому випадку є три різні анімації, але лише дві різні тривалості та кількості повторів. У таких випадках наборів значень недостатньо, то ж кожна анімація отримає свій набір значень шляхом перебору від початку до кінця. Наприклад, fadeInOut отримає тривалість в 2.5s і moveLeft300px матиме тривалість 5s. Набори значень на цьому закінчились, тому все починається з початку і третя анімація bounce отримає тривалість знову в 2.5s. Кількість повторів (та й будь-які інші значення властивостей, які ви задасте) будуть присвоєні такими самим чином.

+ +
animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 2.5s, 5s;
+animation-iteration-count: 2, 1;
+ +

Використання подій анімації

+ +

Ви можете отримати додатковий контроль над анімаціями, як і корисну інформацію про них шляхом використання подій анімації. Ці події, представлені об'єктом {{ domxref("AnimationEvent") }}, можуть бути використані, аби визначити, коли починаються, закінчуються і починають новий повтор різні анімації. Кожна подія містить час, о котрій вона сталась та ім'я анімації, яка її запустила.

+ +

Зараз ми змінимо приклад з ковзаючим текстом, аби вивести певну інформацію про кожну анімаційну подію, тобто її час, то ж ми можемо розібратися, як вони працюють.

+ +

Додавання CSS

+ +

Починаємо зі створення CSS для анімації. Дана анімація триватиме 3 секунди, назвемо її “slidein”, задамо повтор 3 рази, і напрям анімації alternate кожного разу. В {{ cssxref("@keyframes") }}, ширина і лівий маргін змінюються, щоб текст ковзав по екрану.

+ +
.slidein {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: 3;
+  animation-direction: alternate;
+}
+
+@keyframes slidein {
+  from {
+    margin-left:100%;
+    width:300%
+  }
+
+  to {
+    margin-left:0%;
+    width:100%;
+  }
+}
+ +

Встановлення animation event listeners - прослуховування подій анімації

+ +

Ми використаємо код JavaScript для прослуховування всіх трьох можливих подій анімації. Даний код задає наші event listeners; ми викликаємо його, коли документ вперше завантажений, для того, щоб отримати впорядковані дані.

+ +
var e = document.getElementById("watchme");
+e.addEventListener("animationstart", listener, false);
+e.addEventListener("animationend", listener, false);
+e.addEventListener("animationiteration", listener, false);
+
+e.className = "slidein";
+
+ +

Це цілком звичайний код, аби дізнатися більше, ви можете звіритися з документацією {{ domxref("eventTarget.addEventListener()") }}. Останнє, що робить код - він задає клас анімованого елемента як “slidein”; це нам потрібно для запуску анімації.

+ +

Чому? Тому що подія animationstart запускається одразу ж, як стартує анімація; в даному випадку це стається до того, як починає діяти наш код. То ж ми починаємо анімацію самі, задаючи клас елементу для стиля, котрий буде анімований по факту.

+ +

Отримання подій

+ +

Події надсилаються до функції listener(), як це показано нижче.

+ +
function listener(e) {
+  var l = document.createElement("li");
+  switch(e.type) {
+    case "animationstart":
+      l.innerHTML = "Started: elapsed time is " + e.elapsedTime;
+      break;
+    case "animationend":
+      l.innerHTML = "Ended: elapsed time is " + e.elapsedTime;
+      break;
+    case "animationiteration":
+      l.innerHTML = "New loop started at time " + e.elapsedTime;
+      break;
+  }
+  document.getElementById("output").appendChild(l);
+}
+
+ +

Даний код також дуже простий. Він просто дивиться в {{ domxref("event.type") }}, аби визначити, який власне тип події анімації трапився, тоді додає відповідну примітку в {{ HTMLElement("ul") }} (невпорядкований список), який ми використовуємо для виводу звіту про ці події.

+ +

Звіт після завершення роботи буде виглядати якось от так:

+ + + +

Зауважте, що часи подій досить точні щодо тих, які ми очікували відповідно до таймінгу, який ми задали, коли створювали анімацію. Візьміть до уваги також і те, що після завершального проходу анімації подія animationiteration не була надіслана; натомість надіслало подію animationend.

+ +

HTML

+ +

Чисто для повної завершеності огляду ось код, який відображає контент сторіки, включно зі списком звіту про події анімації, який створився завдяки вищеописаному скрипту:

+ +
<h1 id="watchme">Watch me move</h1>
+<p>
+  This example shows how to use CSS animations to make <code>H1</code>
+  elements move across the page.
+</p>
+<p>
+  In addition, we output some text each time an animation event fires,
+  so you can see them in action.
+</p>
+<ul id="output">
+</ul>
+</body>
+
+ +

{{EmbedLiveSample('Using_animation_events', '600', '300')}}

+ +

Дивіться також

+ + diff --git "a/files/uk/web/css/css_animations/\320\262\320\270\320\272\320\276\321\200\320\270\321\201\321\202\320\260\320\275\320\275\321\217_css_\320\260\320\275\321\226\320\274\320\260\321\206\321\226\320\271/index.html" "b/files/uk/web/css/css_animations/\320\262\320\270\320\272\320\276\321\200\320\270\321\201\321\202\320\260\320\275\320\275\321\217_css_\320\260\320\275\321\226\320\274\320\260\321\206\321\226\320\271/index.html" deleted file mode 100644 index f8b8466ef4..0000000000 --- "a/files/uk/web/css/css_animations/\320\262\320\270\320\272\320\276\321\200\320\270\321\201\321\202\320\260\320\275\320\275\321\217_css_\320\260\320\275\321\226\320\274\320\260\321\206\321\226\320\271/index.html" +++ /dev/null @@ -1,357 +0,0 @@ ---- -title: Використання CSS анімацій -slug: Web/CSS/CSS_Animations/Використання_CSS_анімацій -tags: - - CSS Animations - - Довідка -translation_of: Web/CSS/CSS_Animations/Using_CSS_animations ---- -

{{SeeCompatTable}}{{CSSRef}}

- -

CSS анімації роблять можливим анімацію переходів (transitions) з однєї конфігурації CSS стилю до іншої. Анімації складаються з двох компонентів, а власне - стилю, котрий описує CSS анімацію та набір ключових кадрів (keyframes), які задають початковий та кінцевий стан стилю анімації, а також є можливим задання точок проміжного стану.

- -

В CSS анімацій є три ключові переваги перед традиційними скриптовими техніками анімації:

- -
    -
  1. Вони легкі у використанні для простих анімацій; ви можете створити їх навіть без знань JavaScript.
    2. -
  2. Анімації добре функціонують, навіть при помірному навантаженні на систему. Прості анімації на JavaScript можуть працювати не дуже добре (в разі, якщо вони не ідеально зроблені). Движок рендера може використовувати техніку пропуску кадрів та інші засоби для підтримки гладкої анімації.
    3. -
  3. Надаючи таким чином браузеру контроль над послідовністю анімації ви надаєте можливість брауцзеру оптимізувати свою роботу та ефективність, наприклад, завдяки зупинці анімації у вкладках, які не є відкриті для перегляду.
    4. -
- -

Конфігурування анімації

- -

Щоб створити CSS-анімаційну послідвність, ви стилізуєте анімований елемент {{ cssxref("animation") }} властивістю чи її підвластивостями. Це дозвоялє вам коригувати таймінг, тривалість та інші деталі анімації згідно з вашими потребами. Це не конфігурує актуальний вигляд анімації, яка здійснюється проходом через {{ cssxref("@keyframes") }} at-правила, як це описано в {{ anch("Визначення послідовності анімації через ключові кадри") }} нижче.

- -

Підвластивостями властивості {{ cssxref("animation") }} є:

- -
-
{{ cssxref("animation-delay") }}
-
Змінює час затримки між часом з моменту завантаження елемента та початком анімаційної послідовності.
-
{{ cssxref("animation-direction") }}
-
Визначає зміну напрямку анімації та його чергування в залежності від кількості проходів анімації, а також може задавати повернення в початковий стан і починати прохід заново.
-
{{ cssxref("animation-duration") }}
-
Визначає тривалість циклу анімації.
-
{{ cssxref("animation-iteration-count") }}
-
Визначає кількість проходів (повторів) анімації; ви можете також обрати значення infinite для нескінченного повтору анімації.
-
{{ cssxref("animation-name") }}
-
Задає ім'я для анімації {{ cssxref("@keyframes") }} через at-правило, яке описує анімаційні ключові кадри.
-
{{ cssxref("animation-play-state") }}
-
Дозволяє вам призупиняти та відновлювати анімацію.
-
{{ cssxref("animation-timing-function") }}
-
Задає конфігурацію таймінгу анімації; інакше кажучи, як саме буде анімація робити прохід через ключові кадри, це можливо завдяки кривим прискорення.
-
{{ cssxref("animation-fill-mode") }}
-
Визначає, які значення будуть застосовані для анімації перед початком та після її закінчення.
-
- -

Визначення послідовності анімації через ключові кадри

- -

Опісля того, як ви задали анімації таймінг, вам потрібно задати вигляд анімації. Це робиться завдяки одному чи більше  ключовому кадру шляхом застосування at-правила {{ cssxref("@keyframes") }}. Кожен ключовий кадр описує, як саме повинен відображатися анімований елемент у певний момент під час проходження анімаційної послідовності.

- -

Після того, як таймінг анімації був заданий в CSS стилі, який конгфігурує анімацію, ключові кадри використовують {{ cssxref("percentage") }} для відображення моменту під час анімації, в якому буде розміщений той чи інший ключовий кадр. 0% вказує на сам початок анімаціїйної послідовності, тоді як 100% вказує на завершальний етап анімації. Оскільки ці два моменти є такими важливими, вони мають свої спеціальні імена: from і to відповідно. Обидва ці імені є необов'язковими. Якщо from/0% чи to/100% не є задано, то браузер починає чи зупиняє анімацію використовуючи середньообраховані значення всіх атрибутів.

- -

Ви також можете на свій розсуд додавати проміжні кадри до анімації, аби описати стан анімації в проміжні періоди.

- -

Приклади

- -
Примітка: Подані приклади не використовують вендорних префіксів. WebKit-браузери та старіші версії інших браузерів можуть потребувати цих префіксів; приклади, на які ви можете клацнути для перегляду у вашому браузері також включають -webkit-префіксовані версії.
- -

Текст, що ковзає у вікні браузера

- -

Цей простий приклад стилізує елемент {{ HTMLElement("p") }} так, що текст "зісковзує" в вікно браузера з-поза його правого краю.

- -

Майте на увазі, що такі анімації можуть робити сторінку ширшою, аніж вікно браузера. Аби уникнути такої проблеми, потрібно помістити анімований елемент в контейнер і встановити для останнього {{cssxref("overflow")}}:hidden.

- -
p {
-  animation-duration: 3s;
-  animation-name: slidein;
-}
-
-@keyframes slidein {
-  from {
-    margin-left: 100%;
-    width: 300%;
-  }
-
-  to {
-    margin-left: 0%;
-    width: 100%;
-  }
-}
-
- -

В цьому прикладі стиль для {{ HTMLElement("p") }}-елемента визначає, що тривалість анімації становить 3 секунди від початку до кінця, використовуючи властивість {{ cssxref("animation-duration") }}, а також присвоює ім'я цій анімації, яке використано у ключових кадрах {{ cssxref("@keyframes") }} . Їхні at-правила визначили, що це ключові кадри для анімації, яка називається “slidein”.

- -

Якщо нам потрібно ще якусь додаткову стилізацію елемента {{ HTMLElement("p") }} для відобаження в браузерах, які не підтримують CSS анімацій, то ми б її включили туди ж; однак, в цьому випадку ми не потребуємо додаткової стилізації, крім анімації елемента.

- -

Ключові кадри визначені через  at-правила {{ cssxref("@keyframes") }}. В даному випадку є лише два ключових кадри. Перший ключовий кадр наступає в 0% (вжито спеціальне ім'я from). Тут, ми змінюємо лівий маргін елемента як 100% (тобто це відраховується, як відстань від правого краю контейнера), і встановили 300% ширини для елемента (Втричі ширше за контейнер). Завдяки цьому на першому ключовому кадрі анімований елемент буде знаходитися поза межами контейнера (вікна браузера).

- -

Другий ключовий кадр (він же завершальний) розміщений на завершенні анімації, 100% (спеціальне ім'я to). Лівий маргін встановлено як 0% і ширину елемента ми встановили як 100%. Це спричиняє "приклеювання" елемента до лівого краю вікна браузера.

- -
<p>The Caterpillar and Alice looked at each other for some time in silence:
-at last the Caterpillar took the hookah out of its mouth, and addressed
-her in a languid, sleepy voice.</p>
-
- -

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

- -

{{EmbedLiveSample("Making_text_slide_across_the_browser_window","100%","250")}}

- -

Додавання інших ключових кадрів

- -

Давайте додамо ще один ключовий кадр до анімації з попереднього прикладу. Припустимо, нам потрібно трішки збільшити шрифт, коли текст рухається вліво, а потім ми його повертаємо до попередніх параметрів. Це просто, як додавання ось такого ключового кадру:

- -
75% {
-  font-size: 300%;
-  margin-left: 25%;
-  width: 150%;
-}
-
- - - - - -

Це повідомляє браузеру, що елемент, при виконанні 75% анімації, повинен мати лівий маргін 25% і ширину 150%.

- -

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

- -

{{EmbedLiveSample("Adding_another_keyframe","100%","250")}}

- -

Making it repeat

- -

Якщо вам потрібно, аби анімація повторювалась, просто використайте властивість  {{ cssxref("animation-iteration-count") }} , щоб зазначити, скільки разів повинна повторитися анімація. В даному випадку давайте використаємо значення infinite для отримання постійної анімації:

- -
p {
-  animation-duration: 3s;
-  animation-name: slidein;
-  animation-iteration-count: infinite;
-}
-
- - - - - -

{{EmbedLiveSample("Making_it_repeat","100%","250")}}

- -

Змінюємо напрямки анімації

- -

Отже, анімація повторювана, але це виглядає дивно: текст по завершенню циклу, з початком нового знову стрибає вбік. Отже нам треба зробити, аби текст плавно повертався назад, на початкову позицію. Це просто: прописуємо у {{ cssxref("animation-direction") }} значення alternate:

- -
p {
-  animation-duration: 3s;
-  animation-name: slidein;
-  animation-iteration-count: infinite;
-  animation-direction: alternate;
-}
-
- - - - - -

{{EmbedLiveSample("Making_it_move_back_and_forth","100%","250")}}

- -

Використання скорочень для правил анімації

- -

{{ cssxref("animation") }} скорочення є вигідним для економії місця. От, для прикладу, правила анімації, які ми вже використали в статті:

- -
p {
-  animation-duration: 3s;
-  animation-name: slidein;
-  animation-iteration-count: infinite;
-  animation-direction: alternate;
-}
-
- -

Їх можна замінити ось таким чином

- -
p {
-  animation: 3s infinite alternate slideIn;
-}
- -
-

Примітка: Ви можете дізнатися про це більше на сторінці довідки {{ cssxref("animation") }} :

-
- -

Задання множинних значень властивостей анімації

- -

Нескорочені значення CSS анімації можуть приймати множинні значення, розділені комами — таку особливість можна використати, якщо вам потрібно задати множинні анімації єдиним набором правил і відповідно задати різні тривалості, повтори і так далі для різних анімацій. Давайте глянемо на кілька швидких прикладів, аби пояснити різні зміни:

- -

В першому прикладі у нас є набір з трьох різних імен анімації, але одна й та ж тривалість і кількість повторів:

- -
animation-name: fadeInOut, moveLeft300px, bounce;
-animation-duration: 3s;
-animation-iteration-count: 1;
- -

В другому прикладі в нас є набір з 3х значень для кожної властивості. В цьому випадку кожна анімація буде здійснюватися з відповідними значеннями, згідно з їх розміщенням у властивостях, то ж, приміром, fadeInOut має тривалість в 2.5s і кількість повторів 2,  і т.д..

- -
animation-name: fadeInOut, moveLeft300px, bounce;
-animation-duration: 2.5s, 5s, 1s;
-animation-iteration-count: 2, 1, 5;
- -

У цьому третьому випадку є три різні анімації, але лише дві різні тривалості та кількості повторів. У таких випадках наборів значень недостатньо, то ж кожна анімація отримає свій набір значень шляхом перебору від початку до кінця. Наприклад, fadeInOut отримає тривалість в 2.5s і moveLeft300px матиме тривалість 5s. Набори значень на цьому закінчились, тому все починається з початку і третя анімація bounce отримає тривалість знову в 2.5s. Кількість повторів (та й будь-які інші значення властивостей, які ви задасте) будуть присвоєні такими самим чином.

- -
animation-name: fadeInOut, moveLeft300px, bounce;
-animation-duration: 2.5s, 5s;
-animation-iteration-count: 2, 1;
- -

Використання подій анімації

- -

Ви можете отримати додатковий контроль над анімаціями, як і корисну інформацію про них шляхом використання подій анімації. Ці події, представлені об'єктом {{ domxref("AnimationEvent") }}, можуть бути використані, аби визначити, коли починаються, закінчуються і починають новий повтор різні анімації. Кожна подія містить час, о котрій вона сталась та ім'я анімації, яка її запустила.

- -

Зараз ми змінимо приклад з ковзаючим текстом, аби вивести певну інформацію про кожну анімаційну подію, тобто її час, то ж ми можемо розібратися, як вони працюють.

- -

Додавання CSS

- -

Починаємо зі створення CSS для анімації. Дана анімація триватиме 3 секунди, назвемо її “slidein”, задамо повтор 3 рази, і напрям анімації alternate кожного разу. В {{ cssxref("@keyframes") }}, ширина і лівий маргін змінюються, щоб текст ковзав по екрану.

- -
.slidein {
-  animation-duration: 3s;
-  animation-name: slidein;
-  animation-iteration-count: 3;
-  animation-direction: alternate;
-}
-
-@keyframes slidein {
-  from {
-    margin-left:100%;
-    width:300%
-  }
-
-  to {
-    margin-left:0%;
-    width:100%;
-  }
-}
- -

Встановлення animation event listeners - прослуховування подій анімації

- -

Ми використаємо код JavaScript для прослуховування всіх трьох можливих подій анімації. Даний код задає наші event listeners; ми викликаємо його, коли документ вперше завантажений, для того, щоб отримати впорядковані дані.

- -
var e = document.getElementById("watchme");
-e.addEventListener("animationstart", listener, false);
-e.addEventListener("animationend", listener, false);
-e.addEventListener("animationiteration", listener, false);
-
-e.className = "slidein";
-
- -

Це цілком звичайний код, аби дізнатися більше, ви можете звіритися з документацією {{ domxref("eventTarget.addEventListener()") }}. Останнє, що робить код - він задає клас анімованого елемента як “slidein”; це нам потрібно для запуску анімації.

- -

Чому? Тому що подія animationstart запускається одразу ж, як стартує анімація; в даному випадку це стається до того, як починає діяти наш код. То ж ми починаємо анімацію самі, задаючи клас елементу для стиля, котрий буде анімований по факту.

- -

Отримання подій

- -

Події надсилаються до функції listener(), як це показано нижче.

- -
function listener(e) {
-  var l = document.createElement("li");
-  switch(e.type) {
-    case "animationstart":
-      l.innerHTML = "Started: elapsed time is " + e.elapsedTime;
-      break;
-    case "animationend":
-      l.innerHTML = "Ended: elapsed time is " + e.elapsedTime;
-      break;
-    case "animationiteration":
-      l.innerHTML = "New loop started at time " + e.elapsedTime;
-      break;
-  }
-  document.getElementById("output").appendChild(l);
-}
-
- -

Даний код також дуже простий. Він просто дивиться в {{ domxref("event.type") }}, аби визначити, який власне тип події анімації трапився, тоді додає відповідну примітку в {{ HTMLElement("ul") }} (невпорядкований список), який ми використовуємо для виводу звіту про ці події.

- -

Звіт після завершення роботи буде виглядати якось от так:

- - - -

Зауважте, що часи подій досить точні щодо тих, які ми очікували відповідно до таймінгу, який ми задали, коли створювали анімацію. Візьміть до уваги також і те, що після завершального проходу анімації подія animationiteration не була надіслана; натомість надіслало подію animationend.

- -

HTML

- -

Чисто для повної завершеності огляду ось код, який відображає контент сторіки, включно зі списком звіту про події анімації, який створився завдяки вищеописаному скрипту:

- -
<h1 id="watchme">Watch me move</h1>
-<p>
-  This example shows how to use CSS animations to make <code>H1</code>
-  elements move across the page.
-</p>
-<p>
-  In addition, we output some text each time an animation event fires,
-  so you can see them in action.
-</p>
-<ul id="output">
-</ul>
-</body>
-
- -

{{EmbedLiveSample('Using_animation_events', '600', '300')}}

- -

Дивіться також

- - diff --git a/files/uk/web/css/css_box_model/index.html b/files/uk/web/css/css_box_model/index.html new file mode 100644 index 0000000000..4920b7ceb9 --- /dev/null +++ b/files/uk/web/css/css_box_model/index.html @@ -0,0 +1,161 @@ +--- +title: Коробчаста модель CSS +slug: Web/CSS/Коробчаста_модель_CSS +tags: + - CSS + - Довідка + - Коробчаста модель CSS +translation_of: Web/CSS/CSS_Box_Model +--- +
Коробчаста модель (box model) — це алгоритм CSS, що подає елементи (включно з їх {{cssxref("margin", "відступами")}} та {{cssxref("padding", "полями")}}) у вигляді прямокутних «коробок» та компонує їх відповідно до {{cssxref("Visual_formatting_model", "моделі візуального формування")}}.
+ +

Довідка

+ +

Властивості

+ +

Властивості, що визначають потік (flow) вмісту

+ +
+ +
+ +

Властивості, що визначають розміри

+ +
+ +
+ +

Властивості, що визначають відступи

+ +
+ +
+ +

Властивості, що визначають поля

+ +
+ +
+ +

Інші властивості

+ +
+ +
+ +

Посібники

+ +
+
Вступ до коробчастої моделі CSS
+
Описує та пояснює одне з ґрунтовних понять в CSS — коробчасту модель. Ця модель визначає, як CSS розташовує елементи, їх вміст, {{cssxref("padding", "поля")}}, {{cssxref("border", "обрамок")}} та {{cssxref("margin", "відступи")}}.
+
Згортання відступів
+
Два прилеглі відступи інколи згортаються в один. Ця стаття наводить правила, за якими це відбувається, та пояснює, як цим керувати.
+
Модель візуального формування
+
Описує та пояснює модель візуального формування.
+
+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName("CSS3 Box")}}{{Spec2("CSS3 Box")}} 
{{SpecName("CSS2.1", "box.html")}}{{Spec2("CSS2.1")}} 
{{SpecName("CSS1")}}{{Spec2("CSS1")}}Первинне визначення
+ +

Підтримка веб-переглядачами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatGeckoDesktop("1")}}3.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.0{{CompatGeckoMobile("1")}}6.06.01.0
+
diff --git a/files/uk/web/css/css_box_model/mastering_margin_collapsing/index.html b/files/uk/web/css/css_box_model/mastering_margin_collapsing/index.html new file mode 100644 index 0000000000..b47325c5bf --- /dev/null +++ b/files/uk/web/css/css_box_model/mastering_margin_collapsing/index.html @@ -0,0 +1,90 @@ +--- +title: Згортання відступів +slug: Web/CSS/CSS_Box_Model/Згортання_відступів +tags: + - CSS + - Коробчаста модель CSS + - Посібник +translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing +--- +
{{CSSRef}}
+ +

The top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them, if they are equal), a behavior known as margin collapsing. Note that the margins of floating and absolutely positioned elements never collapse.

+ +

Margin collapsing occurs in three basic cases:

+ +
+
Безпосередні (прилеглі) сусіди
+
The margins of adjacent siblings are collapsed (except when the latter sibling needs to be cleared past floats).
+
Батько та перший/останній дочірній елемент
+
If there is no border, padding, inline part, {{cssxref("Block_formatting_context")}} created, or clearance to separate the {{cssxref("margin-top")}} of a block from the {{cssxref("margin-top")}} of its first child block; or no border, padding, inline content, {{cssxref("height")}}, {{cssxref("min-height")}}, or {{cssxref("max-height")}} to separate the {{cssxref("margin-bottom")}} of a block from the {{cssxref("margin-bottom")}} of its last child, then those margins collapse. The collapsed margin ends up outside the parent.
+
+ +
+
Порожні блоки
+
If there is no border, padding, inline content, {{cssxref("height")}}, or {{cssxref("min-height")}} to separate a block's {{cssxref("margin-top")}} from its {{cssxref("margin-bottom")}}, then its top and bottom margins collapse.
+
+ +

More complex margin collapsing (of more than two margins) occurs when these cases are combined.

+ +

These rules apply even to margins that are zero, so the margin of a first/last child ends up outside its parent (according to the rules above) whether or not the parent's margin is zero.

+ +

When negative margins are involved, the size of the collapsed margin is the sum of the largest positive margin and the smallest (most negative) negative margin.

+ +

When all margins are negative, the size of the collapsed margin is the smallest (most negative) margin. This applies to both adjacent elements and nested elements.

+ +

Приклади

+ +

HTML

+ +
<p>The bottom margin of this paragraph is collapsed...</p>
+<p>...with the top margin of this paragraph, yielding a margin of <code>1.2rem</code> in between.</p>
+
+<div>This parent element contains two paragraphs!
+  <p>This paragraph has a <code>.4rem</code> margin between it and the text above.</p>
+  <p>My bottom margin collapses with my parent, yielding a bottom margin of <code>2rem</code>.</p>
+</div>
+
+<p>Blah blah blah.</p>
+ +

CSS

+ +
div {
+  margin: 2rem 0;
+  background: lavender;
+}
+
+p {
+  margin: .4rem 0 1.2rem 0;
+  background: yellow;
+}
+ +

Результат

+ +

{{EmbedLiveSample('Examples','100%',250)}}

+ +

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

+ + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}{{Spec2("CSS2.1")}}Первинне визначення
+ +

Див. також

+ + diff --git "a/files/uk/web/css/css_box_model/\320\267\320\263\320\276\321\200\321\202\320\260\320\275\320\275\321\217_\320\262\321\226\320\264\321\201\321\202\321\203\320\277\321\226\320\262/index.html" "b/files/uk/web/css/css_box_model/\320\267\320\263\320\276\321\200\321\202\320\260\320\275\320\275\321\217_\320\262\321\226\320\264\321\201\321\202\321\203\320\277\321\226\320\262/index.html" deleted file mode 100644 index b47325c5bf..0000000000 --- "a/files/uk/web/css/css_box_model/\320\267\320\263\320\276\321\200\321\202\320\260\320\275\320\275\321\217_\320\262\321\226\320\264\321\201\321\202\321\203\320\277\321\226\320\262/index.html" +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: Згортання відступів -slug: Web/CSS/CSS_Box_Model/Згортання_відступів -tags: - - CSS - - Коробчаста модель CSS - - Посібник -translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing ---- -
{{CSSRef}}
- -

The top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them, if they are equal), a behavior known as margin collapsing. Note that the margins of floating and absolutely positioned elements never collapse.

- -

Margin collapsing occurs in three basic cases:

- -
-
Безпосередні (прилеглі) сусіди
-
The margins of adjacent siblings are collapsed (except when the latter sibling needs to be cleared past floats).
-
Батько та перший/останній дочірній елемент
-
If there is no border, padding, inline part, {{cssxref("Block_formatting_context")}} created, or clearance to separate the {{cssxref("margin-top")}} of a block from the {{cssxref("margin-top")}} of its first child block; or no border, padding, inline content, {{cssxref("height")}}, {{cssxref("min-height")}}, or {{cssxref("max-height")}} to separate the {{cssxref("margin-bottom")}} of a block from the {{cssxref("margin-bottom")}} of its last child, then those margins collapse. The collapsed margin ends up outside the parent.
-
- -
-
Порожні блоки
-
If there is no border, padding, inline content, {{cssxref("height")}}, or {{cssxref("min-height")}} to separate a block's {{cssxref("margin-top")}} from its {{cssxref("margin-bottom")}}, then its top and bottom margins collapse.
-
- -

More complex margin collapsing (of more than two margins) occurs when these cases are combined.

- -

These rules apply even to margins that are zero, so the margin of a first/last child ends up outside its parent (according to the rules above) whether or not the parent's margin is zero.

- -

When negative margins are involved, the size of the collapsed margin is the sum of the largest positive margin and the smallest (most negative) negative margin.

- -

When all margins are negative, the size of the collapsed margin is the smallest (most negative) margin. This applies to both adjacent elements and nested elements.

- -

Приклади

- -

HTML

- -
<p>The bottom margin of this paragraph is collapsed...</p>
-<p>...with the top margin of this paragraph, yielding a margin of <code>1.2rem</code> in between.</p>
-
-<div>This parent element contains two paragraphs!
-  <p>This paragraph has a <code>.4rem</code> margin between it and the text above.</p>
-  <p>My bottom margin collapses with my parent, yielding a bottom margin of <code>2rem</code>.</p>
-</div>
-
-<p>Blah blah blah.</p>
- -

CSS

- -
div {
-  margin: 2rem 0;
-  background: lavender;
-}
-
-p {
-  margin: .4rem 0 1.2rem 0;
-  background: yellow;
-}
- -

Результат

- -

{{EmbedLiveSample('Examples','100%',250)}}

- -

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

- - - - - - - - - - - - - - - - -
СпецифікаціяСтатусКоментар
{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}{{Spec2("CSS2.1")}}Первинне визначення
- -

Див. також

- - diff --git a/files/uk/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html b/files/uk/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html new file mode 100644 index 0000000000..e111a70633 --- /dev/null +++ b/files/uk/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html @@ -0,0 +1,391 @@ +--- +title: Використання CSS flexible-боксів +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 +--- +
{{CSSRef}}
+ +

CSS3 flex-бокс, або flexbox, це режим розмітки створений для упорядкування елементів на сторінці таким чином, щоб вони поводилися передбачувано у випадках, коли розмітка сторінки адаптована під різні розміри екрану і різні девайси.  В багатьох випадках flexible box є вдосконаленням блокової моделі розмітки, яка не використовує обтікання (floats) і не виконує схлопування відступів flex контейнера і  його контенту (margins collapse).

+ +

Для багатьох дизайнерів модель використання flex-боксів буде більш простою для застосування. Дочірні елементи всередині flex-боксу можуть розміщуватись у будь-якому напрямку і можуть мати змінні виміри щоб адаптовуватись до різних розмірів дисплею. Позиціонування елементів у такому разі є простішим і комплексна розмітка досягається значно легше і з чистішим кодом, оскільки порядок відображення елементів не пов'язаний із їх порядком в коді. Ця незалежність навмисне стосується лише візуального рендерингу, залишаючи порядок інтерпритації і навігацію залежними від порядку у сорсі.

+ +
Увага: Де-які броузери все ще можуть частково або повністю не підтримувати flex боксів. Ознайомтесь із  таблицею сумісності для flex боксів
+ +

Концепція flex-боксів

+ +

Головною концепцією flex-боксів є можливість зміни висоти та/або ширини його елементів шоб найкраше заповнювати простір будь-якого дисплею. Flex-контейнер збільшує елементи, щоб заповнити доступний простір чи зменшує щоб запобігти перекриванню.

+ +

Алгоритм розмітки flex-боксами є напрямно-агностичним на противагу блоковій розмітці, яка вертикально-орієнтована, чи горизонтально-орієнтованій інлайн-розмітці. Не зважаючи на те що розмітка блоками добре підходить для сторінки, їй не вистачає об'єктивного механізму для підтримки компонентів, що повинні змінювати орієнтацію, розміри а також розтягуватись чи стискатись при змінах юзер-агента, змінах з вертикальної на горизонтальну орієнтацію і таке інше. Розмітка flex-боксами найбільш бажана для компонентів додатку і шаблонів, що мало масштабуються, тоді як grid-розмітка створена для великих шаблонів, що масштабуються. Обидві технології є частиною розробки CSS Working Group яка має сприяти сумісності web-аплікацій з різними юзер-агентами, режимами а також більшій гнучкості.

+ +

Словник Flexible box термінів  

+ +

Оскільки опис flexible-боксів не включає таких словосполучень, як горизонтальна/інлайн і вертикальна/блокова осі, пояснення моделі передбачає нову термінологію. Використовуйте наступну діаграму під час перегляду словника термінів. Вона зображає flex-контейнер, що має  flex-напрямок ряду, що означає, що кожен flex item розміщений горизонтально, один за одним по головній осі (main axis) відповідно до встановленного режиму написання, напрямку тексту елементу. Зліва-направо у данному випадку.

+ +

flex_terms.png

+ +
+
Flex-контейнер
+
Батьківський елемент, у якому містяться flex-айтеми. Flex-контейнер визначається flex або inline-flex значеннями {{Cssxref("display")}} властивості.
+
Flex-айтем
+
+

Кожен дочірній елемент flex-контейнеру стає flex-айтемом. Текст, що напряму міститься в flex-контейнері обгортається анонімним flex-айтемом.

+
+
Осі
+
+

Кожен flexible-бокс шаблон будується по двох осях. Головна вісь (main axis) - вісь, вздовж якої flex-айтеми слідують один за одним. Перехресна вісь (cross axis) вісь, що перпендикулярна до main axis.

+ +
    +
  • Властивість flex-direction встановлює main axis.
    • +
  • Властивість justify-content визначає як flex-айтеми розташовані вздовж main axis на поточній лінії.
    • +
  • Властивість align-items визначає замовчування для розташування flex-айтемів вздовж cross axis на поточній лінії.
    • +
  • Властивість align-self встановлює, як кожен окремий flex-айтем вирівняний по cross axis і переписує замовчування, встановлене за допомогою align-items.
    • +
+
+
Напрямки
+
+

Головний початок/головний кінець(main start/main end) і перехресний початок/перехресний кінець(cross start/cross end) це сторони flex-контейнера, що визначають початок і закінчення потоку flex-айтемів. Вони слідують за головною і перехресною осями flex-контейнера у векторі, встановленому режимом написання (зліва-направо, зправа-наліво і т.д.).

+ +
    +
  • Властивість order присвоює елементи порядковим групам і визначає, який елемент є першим.
    • +
  • Властивість flex-flow це скорочена форма для flex-direction та flex-wrap властивостей.
    • +
+
+
Лінії
+
+

Flex-айтеми можуть бути розміщені на одній чи кількох лініях відповідно до flex-wrap властивості, яка контролює напрямок перехресних ліній і напрямок у якому складаються нові лінії.

+
+
Виміри
+
Еквівалентами для height і width для flex-айтемів є main size та cross size, які відповідно стосуються main axis і cross axis flex-контейнера.
+
+
    +
  • Початковим значенням для min-height і min-width є 0.
    • +
  • Властивість flex виступає скороченням для flex-grow, flex-shrink, а також flex-basis властивостей для встановлення гнучкості flex-айтема.
    • +
+
+
+ +

Робимо елемент flexible-боксом

+ +

Щоб зробити елемент flexible-боксом, вкажіт занчення display властивості наступним чином:

+ +
display : flex
+ +

або

+ +
display : inline-flex
+ +

Роблячи таким чином, ми визначаєм елемент як flexible-бокс, а його нащадків- як flexible-айтеми. Значення flex робить контейнер блоковим елементом. А inline-flex значення перетворює його на інлайн-елемент.

+ +
Увага: Для вказання префіксу вендора, додайте рядок до значення атрибуту, а не до самого атрибуту. Наприклад, display : -webkit-flex.
+ +

Характеристики flex-айтема

+ +

Текст, що напряму поміщений до flex-контейнера автоматично обгортається в анонімний flex-айтем. Тим не менше анонімний flex-айтем, що містить лише пробільні симфоли не рендериться, так ніби йому було встановлене правило display: none.

+ +

Абсолютно-позиціоновані дочірні елементи flex-контейнера позиціонуються так, що іхня статична позиція визначається відносно головного стартового кута контент-боксу їхнього flex-контейнера.

+ +

У сусідніх flex-айтемів марджіни не накладаються один на інший. Використовуючи auto марджіни можна поглинути зайві відстані у вертикальному чи горизонтальному напрямках тим самим досягнувши вирівнювання чи розмежування сусідніх flex-айтемів.  Для детальної інформації прочитайте  вирівнювання з допомогою 'auto' марджінів у W3C специфікації "модель Flexible-бокс розмітки" (англ.).

+ +

Для забезпечення адекватного замовчування мінімальних розмірів flex-айтема, використовуйте min-width:auto і/або min-height:auto. Для flex-айтемів, значення атрибуту auto вираховує мінімальну ширину/висоту айтема щоб не були меншими за ширину/висоту їхнього контенту, гарантуючи, що айтем відрендерений достатньо великим, для того, щоб вмістити контент. Дивіться {{cssxref("min-width")}} і {{cssxref("min-height")}} для більш детальної інформації.

+ +

Атрибути вирівнювання flex-боксів виконують справжнє центрування, на відміну від інших методів центрування у CSS. Це означає, що flex-айтеми залишаться відцентрованими навіть коли вони виходять за межі flex-контейнера. Хоча така ситуація де-коли можи бути проблемою, оскільки якщо вони виходять за межі верхнього чи лівого (для LTR мов , таких, як англійська чи українська; проблема актуальна для правого краю для RTL мов, таких, як арабська) країв сторінки, вам не вдасться проскролити до цієї частини, не зважаючи на те, що там є контент! В майбутньому релізі властивості вирівнювання мають бути розширені для підтримаки безпечного режиму також. Зараз, якщо це проблема, Ви можете використовувати відступи (margin), щоб досягнути центрування.

+ +

For now, if this is a concern, you can instead use margins to achieve centering, as they'll respond in a "safe" way and stop centering if they overflow. Instead of using the align- properties, just put auto margins on the flex items you wish to center. Instead of the justify- properties, put auto margins on the outside edges of the first and last flex items in the flex container. The auto margins will "flex" and assume the leftover space, centering the flex items when there is leftover space, and switching to normal alignment when not. However, if you're trying to replace justify-content with margin-based centering in a multi-line flexbox, you're probably out of luck, as you need to put the margins on the first and last flex item on each line. Unless you can predict ahead of time which items will end up on which line, you can't reliably use margin-based centering in the main axis to replace the justify-content property.

+ +

Recall that while the display order of the elements is independent of their order in the source code, this independence affects only the visual rendering, leaving speech order and navigation based on the source order. Even the {{cssxref("order")}} property does not affect speech or navigation sequence. Thus developers must take care to order elements properly in the source so as not to damage the document's accessibility.

+ +

Flexible box properties

+ +

Properties not affecting flexible boxes

+ +

Because flexible boxes use a different layout algorithm, some properties do not make sense on a flex container:

+ + + +

Examples

+ +

Basic flex example

+ +

This basic example shows how to apply "flexibility" to an element and how sibling elements behave in a flexible state.

+ +
​<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <style>
+
+   .flex
+   {
+      /* basic styling */
+      width: 350px;
+      height: 200px;
+      border: 1px solid #555;
+      font: 14px Arial;
+
+      /* flexbox setup */
+      display: -webkit-flex;
+      -webkit-flex-direction: row;
+
+      display: flex;
+      flex-direction: row;
+   }
+
+   .flex > div
+   {
+      -webkit-flex: 1 1 auto;
+      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.) */
+
+      -webkit-transition: width 0.7s ease-out;
+      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>
+ +

Holy Grail Layout example

+ +

This example demonstrates how flexbox provides the ability to dynamically change the layout for different screen resolutions. The following diagram illustrates the transformation.

+ +

HolyGrailLayout.png

+ +

Illustrated here is the case where the page layout suited to a browser window must be optimized for a smart phone window. Not only must the elements reduce in size, but the order in which they are presented must change. Flexbox makes this very simple.

+ +
​<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <style>
+
+  body {
+   font: 24px Helvetica;
+   background: #999999;
+  }
+
+  #main {
+   min-height: 800px;
+   margin: 0px;
+   padding: 0px;
+   display: -webkit-flex;
+   display:         flex;
+   -webkit-flex-flow: row;
+           flex-flow: row;
+   }
+
+  #main > article {
+   margin: 4px;
+   padding: 5px;
+   border: 1px solid #cccc33;
+   border-radius: 7pt;
+   background: #dddd88;
+   -webkit-flex: 3 1 60%;
+           flex: 3 1 60%;
+   -webkit-order: 2;
+           order: 2;
+   }
+
+  #main > nav {
+   margin: 4px;
+   padding: 5px;
+   border: 1px solid #8888bb;
+   border-radius: 7pt;
+   background: #ccccff;
+   -webkit-flex: 1 6 20%;
+           flex: 1 6 20%;
+   -webkit-order: 1;
+           order: 1;
+   }
+
+  #main > aside {
+   margin: 4px;
+   padding: 5px;
+   border: 1px solid #8888bb;
+   border-radius: 7pt;
+   background: #ccccff;
+   -webkit-flex: 1 6 20%;
+           flex: 1 6 20%;
+   -webkit-order: 3;
+           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 {
+    -webkit-flex-flow: column;
+            flex-direction: column;
+   }
+
+   #main > article, #main > nav, #main > aside {
+    /* Return them to document order */
+    -webkit-order: 0;
+            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>
+ +

Playground

+ +

There are a few flexbox playgrounds available online for experimenting:

+ + + +

Things to keep in mind

+ +

The algorithm describing how flex items are laid out can be pretty tricky at times. Here are a few things to consider to avoid bad surprises when designing using flexible boxes.

+ +

Flexible boxes are laid out in conformance of the writing mode, which means that main start and main end are laid out according to the position of start and end.

+ +

cross start and cross end rely on the definition of the start or before position that depends on the value of direction.

+ +

Page breaks are possible in flexible boxes layout as long as break- property allows it. CSS3 break-after, break-before, and break-inside as well as CSS 2.1 page-break-before, page-break-after, and page-break-inside properties are accepted on a flex container, flex items, and inside flex items.

+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support (single-line flexbox){{CompatGeckoDesktop("18.0")}}[6]{{property_prefix("-moz")}}[2]
+ {{CompatGeckoDesktop("22.0")}}		21.0{{property_prefix("-webkit")}}
+ 29.0		11[3]12.10{{property_prefix("-webkit")}}[5]6.1{{property_prefix("-webkit")}}[1]
Multi-line flexbox{{CompatGeckoDesktop("28.0")}}21.0{{property_prefix("-webkit")}}
+ 29.0		11[3]12.10[5]
+ 15 {{property_prefix("-webkit")}}		6.1{{property_prefix("-webkit")}}[1]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)Firefox OSAndroidIE PhoneOpera MobileSafari Mobile
Basic support (single-line flexbox){{CompatGeckoMobile("18.0")}}{{property_prefix("-moz")}}[2]
+ {{CompatGeckoMobile("22.0")}}		 +

1.0{{property_prefix("-moz")}}[2]
+ 1.1

+ 		2.1{{property_prefix("-webkit")}}[4]
+ 4.4		1112.10[5]
+ 15{{property_prefix("-webkit")}}		7{{property_prefix("-webkit")}}[1]
Multi-line flexbox{{CompatGeckoMobile("28.0")}}1.32.1{{property_prefix("-webkit")}}[4]
+ 4.4		1112.10[5]
+ 15{{property_prefix("-webkit")}}		7{{property_prefix("-webkit")}}[1]
+
+ +

[1] Safari up to version  6.0 (iOS.1) supported an old incompatible draft version of the specification. Safari 6.1 (and Safari on iOS 7) has been updated to support the final version.

+ +

[2] Up to Firefox 22, to activate flexbox support, the user has to change the about:config preference layout.css.flexbox.enabled to true. From Firefox 22 to Firefox 27, the preference is true by default, but the preference has been removed in Firefox 28.

+ +

[3] Internet Explorer 10 supports an old incompatible draft version of the specification; Internet Explorer 11 has been updated to support the final version.

+ +

[4] Android browser up to 4.3 supported an old incompatible draft version of the specification. Android 4.4 has been updated to support the final version.

+ +

[5] While in the initial implementation in Opera 12.10 flexbox was not prefixed, it got prefixed in versions 15 to 16 of Opera and 15 to 19 of Opera Mobile with {{property_prefix("-webkit")}}. The prefix was removed again in Opera 17 and Opera Mobile 24.

+ +

[6] Up to Firefox 29, specifying visibility: collapse on a flex item causes it to be treated as if it were display: none instead of the intended behavior, treating it as if it were visibility: hidden. The suggested workaround is to use visibility:hidden for flex items that should behave as if they were designated visibility:collapse. For more information, see {{bug(783470)}}

diff --git a/files/uk/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html b/files/uk/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html deleted file mode 100644 index e111a70633..0000000000 --- a/files/uk/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html +++ /dev/null @@ -1,391 +0,0 @@ ---- -title: Використання CSS flexible-боксів -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 ---- -
{{CSSRef}}
- -

CSS3 flex-бокс, або flexbox, це режим розмітки створений для упорядкування елементів на сторінці таким чином, щоб вони поводилися передбачувано у випадках, коли розмітка сторінки адаптована під різні розміри екрану і різні девайси.  В багатьох випадках flexible box є вдосконаленням блокової моделі розмітки, яка не використовує обтікання (floats) і не виконує схлопування відступів flex контейнера і  його контенту (margins collapse).

- -

Для багатьох дизайнерів модель використання flex-боксів буде більш простою для застосування. Дочірні елементи всередині flex-боксу можуть розміщуватись у будь-якому напрямку і можуть мати змінні виміри щоб адаптовуватись до різних розмірів дисплею. Позиціонування елементів у такому разі є простішим і комплексна розмітка досягається значно легше і з чистішим кодом, оскільки порядок відображення елементів не пов'язаний із їх порядком в коді. Ця незалежність навмисне стосується лише візуального рендерингу, залишаючи порядок інтерпритації і навігацію залежними від порядку у сорсі.

- -
Увага: Де-які броузери все ще можуть частково або повністю не підтримувати flex боксів. Ознайомтесь із  таблицею сумісності для flex боксів
- -

Концепція flex-боксів

- -

Головною концепцією flex-боксів є можливість зміни висоти та/або ширини його елементів шоб найкраше заповнювати простір будь-якого дисплею. Flex-контейнер збільшує елементи, щоб заповнити доступний простір чи зменшує щоб запобігти перекриванню.

- -

Алгоритм розмітки flex-боксами є напрямно-агностичним на противагу блоковій розмітці, яка вертикально-орієнтована, чи горизонтально-орієнтованій інлайн-розмітці. Не зважаючи на те що розмітка блоками добре підходить для сторінки, їй не вистачає об'єктивного механізму для підтримки компонентів, що повинні змінювати орієнтацію, розміри а також розтягуватись чи стискатись при змінах юзер-агента, змінах з вертикальної на горизонтальну орієнтацію і таке інше. Розмітка flex-боксами найбільш бажана для компонентів додатку і шаблонів, що мало масштабуються, тоді як grid-розмітка створена для великих шаблонів, що масштабуються. Обидві технології є частиною розробки CSS Working Group яка має сприяти сумісності web-аплікацій з різними юзер-агентами, режимами а також більшій гнучкості.

- -

Словник Flexible box термінів  

- -

Оскільки опис flexible-боксів не включає таких словосполучень, як горизонтальна/інлайн і вертикальна/блокова осі, пояснення моделі передбачає нову термінологію. Використовуйте наступну діаграму під час перегляду словника термінів. Вона зображає flex-контейнер, що має  flex-напрямок ряду, що означає, що кожен flex item розміщений горизонтально, один за одним по головній осі (main axis) відповідно до встановленного режиму написання, напрямку тексту елементу. Зліва-направо у данному випадку.

- -

flex_terms.png

- -
-
Flex-контейнер
-
Батьківський елемент, у якому містяться flex-айтеми. Flex-контейнер визначається flex або inline-flex значеннями {{Cssxref("display")}} властивості.
-
Flex-айтем
-
-

Кожен дочірній елемент flex-контейнеру стає flex-айтемом. Текст, що напряму міститься в flex-контейнері обгортається анонімним flex-айтемом.

-
-
Осі
-
-

Кожен flexible-бокс шаблон будується по двох осях. Головна вісь (main axis) - вісь, вздовж якої flex-айтеми слідують один за одним. Перехресна вісь (cross axis) вісь, що перпендикулярна до main axis.

- -
    -
  • Властивість flex-direction встановлює main axis.
    • -
  • Властивість justify-content визначає як flex-айтеми розташовані вздовж main axis на поточній лінії.
    • -
  • Властивість align-items визначає замовчування для розташування flex-айтемів вздовж cross axis на поточній лінії.
    • -
  • Властивість align-self встановлює, як кожен окремий flex-айтем вирівняний по cross axis і переписує замовчування, встановлене за допомогою align-items.
    • -
-
-
Напрямки
-
-

Головний початок/головний кінець(main start/main end) і перехресний початок/перехресний кінець(cross start/cross end) це сторони flex-контейнера, що визначають початок і закінчення потоку flex-айтемів. Вони слідують за головною і перехресною осями flex-контейнера у векторі, встановленому режимом написання (зліва-направо, зправа-наліво і т.д.).

- -
    -
  • Властивість order присвоює елементи порядковим групам і визначає, який елемент є першим.
    • -
  • Властивість flex-flow це скорочена форма для flex-direction та flex-wrap властивостей.
    • -
-
-
Лінії
-
-

Flex-айтеми можуть бути розміщені на одній чи кількох лініях відповідно до flex-wrap властивості, яка контролює напрямок перехресних ліній і напрямок у якому складаються нові лінії.

-
-
Виміри
-
Еквівалентами для height і width для flex-айтемів є main size та cross size, які відповідно стосуються main axis і cross axis flex-контейнера.
-
-
    -
  • Початковим значенням для min-height і min-width є 0.
    • -
  • Властивість flex виступає скороченням для flex-grow, flex-shrink, а також flex-basis властивостей для встановлення гнучкості flex-айтема.
    • -
-
-
- -

Робимо елемент flexible-боксом

- -

Щоб зробити елемент flexible-боксом, вкажіт занчення display властивості наступним чином:

- -
display : flex
- -

або

- -
display : inline-flex
- -

Роблячи таким чином, ми визначаєм елемент як flexible-бокс, а його нащадків- як flexible-айтеми. Значення flex робить контейнер блоковим елементом. А inline-flex значення перетворює його на інлайн-елемент.

- -
Увага: Для вказання префіксу вендора, додайте рядок до значення атрибуту, а не до самого атрибуту. Наприклад, display : -webkit-flex.
- -

Характеристики flex-айтема

- -

Текст, що напряму поміщений до flex-контейнера автоматично обгортається в анонімний flex-айтем. Тим не менше анонімний flex-айтем, що містить лише пробільні симфоли не рендериться, так ніби йому було встановлене правило display: none.

- -

Абсолютно-позиціоновані дочірні елементи flex-контейнера позиціонуються так, що іхня статична позиція визначається відносно головного стартового кута контент-боксу їхнього flex-контейнера.

- -

У сусідніх flex-айтемів марджіни не накладаються один на інший. Використовуючи auto марджіни можна поглинути зайві відстані у вертикальному чи горизонтальному напрямках тим самим досягнувши вирівнювання чи розмежування сусідніх flex-айтемів.  Для детальної інформації прочитайте  вирівнювання з допомогою 'auto' марджінів у W3C специфікації "модель Flexible-бокс розмітки" (англ.).

- -

Для забезпечення адекватного замовчування мінімальних розмірів flex-айтема, використовуйте min-width:auto і/або min-height:auto. Для flex-айтемів, значення атрибуту auto вираховує мінімальну ширину/висоту айтема щоб не були меншими за ширину/висоту їхнього контенту, гарантуючи, що айтем відрендерений достатньо великим, для того, щоб вмістити контент. Дивіться {{cssxref("min-width")}} і {{cssxref("min-height")}} для більш детальної інформації.

- -

Атрибути вирівнювання flex-боксів виконують справжнє центрування, на відміну від інших методів центрування у CSS. Це означає, що flex-айтеми залишаться відцентрованими навіть коли вони виходять за межі flex-контейнера. Хоча така ситуація де-коли можи бути проблемою, оскільки якщо вони виходять за межі верхнього чи лівого (для LTR мов , таких, як англійська чи українська; проблема актуальна для правого краю для RTL мов, таких, як арабська) країв сторінки, вам не вдасться проскролити до цієї частини, не зважаючи на те, що там є контент! В майбутньому релізі властивості вирівнювання мають бути розширені для підтримаки безпечного режиму також. Зараз, якщо це проблема, Ви можете використовувати відступи (margin), щоб досягнути центрування.

- -

For now, if this is a concern, you can instead use margins to achieve centering, as they'll respond in a "safe" way and stop centering if they overflow. Instead of using the align- properties, just put auto margins on the flex items you wish to center. Instead of the justify- properties, put auto margins on the outside edges of the first and last flex items in the flex container. The auto margins will "flex" and assume the leftover space, centering the flex items when there is leftover space, and switching to normal alignment when not. However, if you're trying to replace justify-content with margin-based centering in a multi-line flexbox, you're probably out of luck, as you need to put the margins on the first and last flex item on each line. Unless you can predict ahead of time which items will end up on which line, you can't reliably use margin-based centering in the main axis to replace the justify-content property.

- -

Recall that while the display order of the elements is independent of their order in the source code, this independence affects only the visual rendering, leaving speech order and navigation based on the source order. Even the {{cssxref("order")}} property does not affect speech or navigation sequence. Thus developers must take care to order elements properly in the source so as not to damage the document's accessibility.

- -

Flexible box properties

- -

Properties not affecting flexible boxes

- -

Because flexible boxes use a different layout algorithm, some properties do not make sense on a flex container:

- - - -

Examples

- -

Basic flex example

- -

This basic example shows how to apply "flexibility" to an element and how sibling elements behave in a flexible state.

- -
​<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <style>
-
-   .flex
-   {
-      /* basic styling */
-      width: 350px;
-      height: 200px;
-      border: 1px solid #555;
-      font: 14px Arial;
-
-      /* flexbox setup */
-      display: -webkit-flex;
-      -webkit-flex-direction: row;
-
-      display: flex;
-      flex-direction: row;
-   }
-
-   .flex > div
-   {
-      -webkit-flex: 1 1 auto;
-      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.) */
-
-      -webkit-transition: width 0.7s ease-out;
-      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>
- -

Holy Grail Layout example

- -

This example demonstrates how flexbox provides the ability to dynamically change the layout for different screen resolutions. The following diagram illustrates the transformation.

- -

HolyGrailLayout.png

- -

Illustrated here is the case where the page layout suited to a browser window must be optimized for a smart phone window. Not only must the elements reduce in size, but the order in which they are presented must change. Flexbox makes this very simple.

- -
​<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <style>
-
-  body {
-   font: 24px Helvetica;
-   background: #999999;
-  }
-
-  #main {
-   min-height: 800px;
-   margin: 0px;
-   padding: 0px;
-   display: -webkit-flex;
-   display:         flex;
-   -webkit-flex-flow: row;
-           flex-flow: row;
-   }
-
-  #main > article {
-   margin: 4px;
-   padding: 5px;
-   border: 1px solid #cccc33;
-   border-radius: 7pt;
-   background: #dddd88;
-   -webkit-flex: 3 1 60%;
-           flex: 3 1 60%;
-   -webkit-order: 2;
-           order: 2;
-   }
-
-  #main > nav {
-   margin: 4px;
-   padding: 5px;
-   border: 1px solid #8888bb;
-   border-radius: 7pt;
-   background: #ccccff;
-   -webkit-flex: 1 6 20%;
-           flex: 1 6 20%;
-   -webkit-order: 1;
-           order: 1;
-   }
-
-  #main > aside {
-   margin: 4px;
-   padding: 5px;
-   border: 1px solid #8888bb;
-   border-radius: 7pt;
-   background: #ccccff;
-   -webkit-flex: 1 6 20%;
-           flex: 1 6 20%;
-   -webkit-order: 3;
-           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 {
-    -webkit-flex-flow: column;
-            flex-direction: column;
-   }
-
-   #main > article, #main > nav, #main > aside {
-    /* Return them to document order */
-    -webkit-order: 0;
-            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>
- -

Playground

- -

There are a few flexbox playgrounds available online for experimenting:

- - - -

Things to keep in mind

- -

The algorithm describing how flex items are laid out can be pretty tricky at times. Here are a few things to consider to avoid bad surprises when designing using flexible boxes.

- -

Flexible boxes are laid out in conformance of the writing mode, which means that main start and main end are laid out according to the position of start and end.

- -

cross start and cross end rely on the definition of the start or before position that depends on the value of direction.

- -

Page breaks are possible in flexible boxes layout as long as break- property allows it. CSS3 break-after, break-before, and break-inside as well as CSS 2.1 page-break-before, page-break-after, and page-break-inside properties are accepted on a flex container, flex items, and inside flex items.

- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support (single-line flexbox){{CompatGeckoDesktop("18.0")}}[6]{{property_prefix("-moz")}}[2]
- {{CompatGeckoDesktop("22.0")}}		21.0{{property_prefix("-webkit")}}
- 29.0		11[3]12.10{{property_prefix("-webkit")}}[5]6.1{{property_prefix("-webkit")}}[1]
Multi-line flexbox{{CompatGeckoDesktop("28.0")}}21.0{{property_prefix("-webkit")}}
- 29.0		11[3]12.10[5]
- 15 {{property_prefix("-webkit")}}		6.1{{property_prefix("-webkit")}}[1]
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureFirefox Mobile (Gecko)Firefox OSAndroidIE PhoneOpera MobileSafari Mobile
Basic support (single-line flexbox){{CompatGeckoMobile("18.0")}}{{property_prefix("-moz")}}[2]
- {{CompatGeckoMobile("22.0")}}		 -

1.0{{property_prefix("-moz")}}[2]
- 1.1

- 		2.1{{property_prefix("-webkit")}}[4]
- 4.4		1112.10[5]
- 15{{property_prefix("-webkit")}}		7{{property_prefix("-webkit")}}[1]
Multi-line flexbox{{CompatGeckoMobile("28.0")}}1.32.1{{property_prefix("-webkit")}}[4]
- 4.4		1112.10[5]
- 15{{property_prefix("-webkit")}}		7{{property_prefix("-webkit")}}[1]
-
- -

[1] Safari up to version  6.0 (iOS.1) supported an old incompatible draft version of the specification. Safari 6.1 (and Safari on iOS 7) has been updated to support the final version.

- -

[2] Up to Firefox 22, to activate flexbox support, the user has to change the about:config preference layout.css.flexbox.enabled to true. From Firefox 22 to Firefox 27, the preference is true by default, but the preference has been removed in Firefox 28.

- -

[3] Internet Explorer 10 supports an old incompatible draft version of the specification; Internet Explorer 11 has been updated to support the final version.

- -

[4] Android browser up to 4.3 supported an old incompatible draft version of the specification. Android 4.4 has been updated to support the final version.

- -

[5] While in the initial implementation in Opera 12.10 flexbox was not prefixed, it got prefixed in versions 15 to 16 of Opera and 15 to 19 of Opera Mobile with {{property_prefix("-webkit")}}. The prefix was removed again in Opera 17 and Opera Mobile 24.

- -

[6] Up to Firefox 29, specifying visibility: collapse on a flex item causes it to be treated as if it were display: none instead of the intended behavior, treating it as if it were visibility: hidden. The suggested workaround is to use visibility:hidden for flex items that should behave as if they were designated visibility:collapse. For more information, see {{bug(783470)}}

diff --git a/files/uk/web/css/layout_cookbook/index.html b/files/uk/web/css/layout_cookbook/index.html new file mode 100644 index 0000000000..e6d7f61135 --- /dev/null +++ b/files/uk/web/css/layout_cookbook/index.html @@ -0,0 +1,80 @@ +--- +title: Кулінарна книга з CSS розмітки +slug: Web/CSS/Розмітка_кулінарна-книга +translation_of: Web/CSS/Layout_cookbook +--- +
{{CSSRef}}
+ +

The CSS layout cookbook aims to bring together recipes for common layout patterns, things you might need to implement in your own sites. In addition to providing code you can use as a starting point in your projects, these recipes highlight the different ways layout specifications can be used, and the choices you can make as a developer.

+ +
+

Note: If you are new to CSS layout then you might first like to take a look at our CSS layout learning module, as this will give you the basic grounding you need to make use of the recipes here.

+
+ +

The Recipes

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
RecipeDescriptionLayout Methods
Media objectsA two-column box with an image on one side and descriptive text on the other, e.g. a facebook post or tweet.CSS Grid, {{cssxref("float")}} fallback, {{cssxref("fit-content")}} sizing
ColumnsWhen to choose multi-column layout, flexbox or grid for your columns.CSS Grid, Multicol, Flexbox
Center an elementHow to center an item horizontally and vertically.Flexbox, Box Alignment
Sticky footersCreating a footer which sits at the bottom of the container or viewport when the content is shorter. CSS Grid, Flexbox
Split navigationA navigation pattern where some links are visually separated from the others.Flexbox, {{cssxref("margin")}}
Breadcrumb navigationCreating a list of links to allow the visitor to navigate back up through the page hierarchy.Flexbox
List group with badgesA list of items with a badge to display a count.Flexbox, Box Alignment
PaginationLinks to pages of content (such as search results).Flexbox, Box Alignment
CardA card component, which displays in a grid of cards.Grid Layout
Grid wrapperFor aligning grid content within a central wrapper, while also allowing items to break out.CSS Grid
+ +

Contribute a Recipe

+ +

As with all of MDN we would love you to contribute a recipe in the same format as the ones shown above. See this page for a template and guidelines for writing your own example.

diff --git a/files/uk/web/css/layout_mode/index.html b/files/uk/web/css/layout_mode/index.html new file mode 100644 index 0000000000..5794b4c397 --- /dev/null +++ b/files/uk/web/css/layout_mode/index.html @@ -0,0 +1,30 @@ +--- +title: Схема компонування +slug: Web/CSS/Схема_компонування +tags: + - CSS + - Компонування + - Розмітка + - Розташування +translation_of: Web/CSS/Layout_mode +--- +
Схема компонування (layout mode) в CSS являє собою алгоритм, який визначає розташування та розміри елементів залежно від того, як вони взаємодіють із сусідніми та батьківськими елементами. Існує декілька таких схем:
+ + + +
+

Зауваження: Не всі властивості CSS застосовні до всіх схем компонування. Більшість із них вживаються разом з однією-двома схемами і жодним чином не діють, якщо відповідний елемент компонується за іншою схемою.

+
+ +

Див. також

+ + diff --git a/files/uk/web/css/reference/index.html b/files/uk/web/css/reference/index.html new file mode 100644 index 0000000000..ba325fe7da --- /dev/null +++ b/files/uk/web/css/reference/index.html @@ -0,0 +1,188 @@ +--- +title: CSS довідник +slug: Web/CSS/Довідник +translation_of: Web/CSS/Reference +--- +

This CSS Reference shows the basic syntax of a CSS rule; lists all standard CSS properties, pseudo-classes and pseudo-elements, @-rules, units, and selectors, all together in alphabetical order, as well as just the selectors by type; and allows you to quickly access detailed information for each of them. It not only lists the CSS 1 and CSS 2.1 properties, but also is a CSS3 reference that links to any CSS3 property and concept standardized, or already stabilized.  Also included is a brief DOM-CSS / CSSOM reference.

+ +

Note that CSS rule-definitions are entirely (ASCII) text-based, whereas DOM-CSS / CSSOM, the rule-management system, is object-based.

+ +

See also Mozilla CSS Extensions for Gecko-specific properties prefixed with -moz; and WebKit CSS Extensions for WebKit-specific properties. See Vendor-prefixed CSS Property Overview by Peter Beverloo for all prefixed properties.

+ +

Basic rule syntax

+ +

Be warned that any syntax error in a rule definition will invalidate the entire rule.

+ +

Style rules

+ +
selectorlist { property: value; [more property:value; pairs] }
+
+...where selectorlist is: selector[:pseudo-class] [::pseudo-element] [, more selectorlists]
+
+See selector, pseudo-element, pseudo-class lists below.
+
+ +

Examples

+ +
strong { color: red;}
+div.menu-bar li:hover > ul { display: block; }
+
+ +

More about examples: #1, #2

+ +

@rules

+ +

As these have so many different structure-formats, see the desired At-rule for syntax.

+ +

Keyword index

+ +
{{CSS_Ref}}
+ +
+
+

Selectors

+ +
    +
  • Basic Selectors + +
    • +
  • Combinators    (more info) + +
    • +
  • Pseudo-elements    (more info) +
      +
    • {{ Cssxref("::after") }}
      • +
    • {{ Cssxref("::before") }}
      • +
    • {{ Cssxref("::first-letter") }}
      • +
    • {{ Cssxref("::first-line") }}
      • +
    • {{ Cssxref("::selection") }}
      • +
    • {{ Cssxref("::backdrop") }}
      • +
    • {{ Cssxref("::placeholder") }} {{experimental_inline}}
      • +
    • {{ Cssxref("::marker") }} {{experimental_inline}}
      • +
    • {{ Cssxref("::spelling-error") }} {{experimental_inline}}
      • +
    • {{ Cssxref("::grammar-error") }} {{experimental_inline}}
      • +
    +
    • +
  • Standard pseudo-classes    (more info) +
    +
      +
    • {{ Cssxref(":active") }}
      • +
    • {{ cssxref(':any')}}
      • +
    • {{ Cssxref(":checked") }}
      • +
    • {{ Cssxref(":default") }}
      • +
    • {{ Cssxref(":dir", ":dir()")}}
      • +
    • {{ Cssxref(":disabled") }}
      • +
    • {{ Cssxref(":empty") }}
      • +
    • {{ Cssxref(":enabled") }}
      • +
    • {{ Cssxref(":first") }}
      • +
    • {{ Cssxref(":first-child") }}
      • +
    • {{ Cssxref(":first-of-type") }}
      • +
    • {{ Cssxref(":fullscreen") }}
      • +
    • {{ Cssxref(":focus") }}
      • +
    • {{ Cssxref(":hover") }}
      • +
    • {{ Cssxref(":indeterminate") }}
      • +
    • {{ Cssxref(":in-range") }}
      • +
    • {{ Cssxref(":invalid") }}
      • +
    • {{ Cssxref(":lang", ":lang()") }}
      • +
    • {{ Cssxref(":last-child") }}
      • +
    • {{ Cssxref(":last-of-type") }}
      • +
    • {{ Cssxref(":left") }}
      • +
    • {{ Cssxref(":link") }}
      • +
    • {{ Cssxref(":not", ":not()") }}
      • +
    • {{ Cssxref(":nth-child", ":nth-child()") }}
      • +
    • {{ Cssxref(":nth-last-child", ":nth-last-child()") }}
      • +
    • {{ Cssxref(":nth-last-of-type", ":nth-last-of-type()") }}
      • +
    • {{ Cssxref(":nth-of-type", ":nth-of-type()") }}
      • +
    • {{ Cssxref(":only-child") }}
      • +
    • {{ Cssxref(":only-of-type") }}
      • +
    • {{ Cssxref(":optional") }}
      • +
    • {{ Cssxref(":out-of-range") }}
      • +
    • {{ Cssxref(":read-only") }}
      • +
    • {{ Cssxref(":read-write") }}
      • +
    • {{ Cssxref(":required") }}
      • +
    • {{ Cssxref(":right") }}
      • +
    • {{ Cssxref(":root") }}
      • +
    • {{ Cssxref(":scope") }}
      • +
    • {{ Cssxref(":target") }}
      • +
    • {{ Cssxref(":valid") }}
      • +
    • {{ Cssxref(":visited") }}
      • +
    +
    +
    • +
+ +

A complete list of selectors in the Selectors Level 3 specification.

+ +

CSS3 Tutorials

+ +

These small how-to pages describe new technologies appeared in CSS3, or in CSS2.1 but with low support until recently:

+ + + +

Concepts

+ + + +

DOM-CSS / CSSOM

+ +

Major object types:

+ + + +

Important methods:

+ +
    +
  • {{domxref("CSSStyleSheet.insertRule")}}
    • +
  • {{domxref("CSSStyleSheet.deleteRule")}}
    • +
+
+
diff --git a/files/uk/web/css/visual_formatting_model/index.html b/files/uk/web/css/visual_formatting_model/index.html new file mode 100644 index 0000000000..fb25e2d60a --- /dev/null +++ b/files/uk/web/css/visual_formatting_model/index.html @@ -0,0 +1,225 @@ +--- +title: Модель візуального формування +slug: Web/CSS/Модель_візуального_формування +tags: + - CSS + - NeedsUpdate + - Коробчаста модель CSS +translation_of: Web/CSS/Visual_formatting_model +--- +

Модель візуального форматування (visual formatting model) у CSS являє собою алгоритм, що обробляє документ та подає його на візуальному носії. Ця модель є основним поняттям CSS.

+ +

Кожен елемент в документі зазнає перетворення згідно з моделлю візуального формування і породжує нуль (жодного), один або кілька прямокутників відповідно до {{cssxref("CSS_Box_Model/Introduction_to_the_CSS_box_model", "коробчастої моделі")}} CSS. Компонування кожного такого прямокутника визначається низкою чинників:

+ + + +

Відповідно до моделі, прямокутник розміщується й малюється відносно краю блока, всередині якого він міститься. Зазвичай прямокутник утворює такий блок для своїх нащадків. Втім, розмір прямокутника не обмежено розмірами блока, що його містить; коли компонування прямокутника передбачає вихід за межі блока, це зветься {{cssxref("overflow", "переповненням")}}.

+ +

Утворення прямокутників

+ +

Генерація блоків, це частина візуального форматування CSS, що створює прямокутники з елементів документу. Сгенеровані блоки є різних типів, що вплиає на те, як виконується візуальне формування. Тип згенерованого блоку залежить від значення CSS {{ cssxref("display") }}.

+ +

Block-level elements and block boxes

+ +

Елемент  називається блочним, коли його вираховане значення  {{ cssxref("display") }} CSS property is: block, list-item, or table. Елемент рівня блоку візуально форматується, як блок (наприклад абзац), приздачений для вертикальної компановки.

+ +

Each block-level box participates in a block formatting context. Each block-level element generates at least one block-level box, called the principal block-level box. Some elements, like a list-item element, generating further boxes to handle bullets and other typographic elements introducing the list item, may generate more boxes. Most generate only the principal, block-level box.

+ +

The principal block-level box contains descendant-generated boxes and generated content. It is also the box involved in the positioning scheme.

+ +

venn_blocks.pngA block-level box may also be a block container box. A block container box is a box that contains only other block-level boxes, or creates an inline formatting context, thus containing only inline boxes.

+ +

It is important to note that the notions of a block-level box and block container box are disjoined. The first, describes how the box behaves with its parents and sibling. The second, how it interacts with its descendants. Some block-level boxes, like tables, aren't block container boxes. Reciprocally, some block container boxes, like non-replaced inline blocks and non-replaced table cells, aren't block-level boxes.

+ +

Block-level boxes that also are block container boxes are called block boxes.

+ +

Anonymous block boxes

+ +

In some cases, the visual formatting algorithm needs to add supplementary boxes. Because CSS selectors cannot style or name these boxes, they are called anonymous boxes.

+ +

Because selectors do not work with anonymous boxes, they cannot be styled via a stylesheet. This means that all inheritable CSS properties have the inherit value, and all non-inheritable CSS properties, have the initial value.

+ +

Block containing boxes contain only inline-level boxes, or only block-level boxes. But often the document contains a mix of both. In that case, anonymous block boxes are created around adjacent inline-level boxes.

+ +

Example

+ +

If we take the following HTML code (with default styling applied to it, that is {{ HTMLElement("div") }} and {{ HTMLElement("p") }} elements have display:block :

+ +
<div>Some inline text <p>followed by a paragraph</p> followed by more inline text.</div>
+ +

Two anonymous block boxes are created: one for the text before the paragraph (Some inline text), and another for the text after it (followed by more inline text). This builds the following block structure:

+ +

anonymous_block-level_boxes.png

+ +

Leading to:

+ +
Some inline text
+followed by a paragraph
+followed by more inline text.
+
+ +

Unlike the {{ HTMLElement("p") }} element's box, Web developers cannot control the style of the two anonymous boxes. Inheritable properties take the value from the {{ HTMLElement("div") }}'s property value, like {{ cssxref("color") }} to define the color of the text, and set the others to the initial value. For example, they won't have a specific {{ cssxref("background-color") }}, it is always transparent, the initial value for that property, and thus the background of the <div> is visible. A specific background color can be applied to the <p> box. Similarly, the two anonymous boxes always use the same color for their text.

+ +

Another case that leads to the creation of anonymous block boxes, is an inline box that contains one or several block boxes. In that case, the box containing the block box is split into two inline boxes: one before, and one after the block box. All the inline boxes before the block box are then enclosed into an anonymous block box, so are the inline boxes following the block box. Therefore, the block box becomes the sibling of the two anonymous block boxes containing the inline elements.

+ +

If there are several block boxes, without inline content in-between, the anonymous block boxes are created before, and after the set of boxes.

+ +

Example

+ +

If we take the following HTML code, with {{ HTMLElement("p") }} have display:inline and {{ HTMLElement("span") }} have display:block :

+ +
<p>Some <em>inline</em> text <span>followed by a paragraph</span> followed by more inline text.</p>
+ +

Two anonymous block boxes are created, one for the text before the span Element (Some inline text) and one for the text after it (followed by more inline text), which gives the following block structure:

+ +

+ +

Which leads to:

+ +
Some inline text
+followed by a paragraph
+followed by more inline text.
+
+ +

Inline-level elements and inline boxes

+ +

An element is said to be inline-level when the calculated value of its {{ cssxref("display") }} CSS property is: inline, inline-block or inline-table. Visually, it doesn't constitute blocks of contents, but is distributed in lines with other inline-level content. Typically, the content of a paragraph with different formatting, like emphasis or images, is made from inline-level elements.

+ +

venn_inlines.png

+ +
+

This diagram uses outdated terminology; see note below. Besides that, it is incorrect because the yellow ellipsis on the right side is per definition either identical to the one on the left side, or bigger than that (it could be a mathematical superset), because the spec says "Inline-level elements generate inline-level boxes, which are boxes that participate in an inline formatting context", see CSS 2.2, chapter 9.2.2

+
+ +

Inline-level elements generate inline-level boxes that are defined as boxes participating to an inline formatting context. Inline boxes are both inline-level boxes and boxes, whose contents participate in their container's inline formatting context. This is the case, for example, for all non-replaced boxes with display:inline. Inline-level boxes, whose contents do not participate in an inline formatting context, are called atomic inline-level boxes. These boxes, generated by replaced inline-level elements or by elements with a calculated {{ cssxref("display") }} value of inline-block or inline-table, are never split into several boxes, as is possible with inline boxes.

+ +
Note: Initially, atomic inline-level boxes were called atomic inline boxes. This was unfortunate, as they are not inline boxes. This was corrected in an erratum to the spec. Nevertheless, you can harmlessly read atomic inline-level box each time you meet atomic inline box in the literature, as this is only a name change.
+ +
Atomic inline boxes cannot be split into several lines in an inline formatting context. +
+
<style>
+  span {
+    display:inline; /* default value*/
+  }
+</style>
+<div style="width:20em;">
+   The text in the span <span>can be split in several
+   lines as it</span> is an inline box.
+</div>
+
+ +

which leads to:

+ +
The text in the span can be split into several lines as it is an inline box.
+ +
<style>
+  span {
+    display:inline-block;
+  }
+</style>
+<div style="width:20em;">
+   The text in the span <span>cannot be split in several
+   lines as it</span> is an inline-block box.
+</div>
+
+ +

which leads to:

+ +
The text in the span cannot be split into several lines as it is an inline-block box.
+
+
+ +

Anonymous inline boxes

+ +

As for block boxes, there are a few cases where inline boxes are created automatically by the CSS engine. These inline boxes are also anonymous as they cannot be named by selectors; they inherit the value of all inheritable properties, setting it to initial for all others.

+ +

The most common case where an anonymous inline box is created, is when some text is found as a direct child of a block box creating an inline formatting context. In that case, this text is included in the largest possible anonymous inline box. Also, space content, which would be removed by the behavior set in the {{ cssxref("white-space") }} CSS property, does not generate anonymous inline boxes because they would end empty.

+ +
Example TBD
+ +

Other types of boxes

+ +

Line boxes

+ +

Line boxes are generated by the inline formatting context to represent a line of text. Inside a block box, a line box extends from one border of the box to the other. When there are floats, the line box starts at the rightmost border of the left floats and ends at the leftmost border of the right floats.

+ +

These boxes are technical, and Web authors do not usually have to bother with them.

+ +

Run-in boxes

+ +

Run-in boxes, defined using display:run-in, are boxes that are either block boxes or inline boxes, depending on the type of the following box. They can be used to create a title that runs inside its first paragraph when possible.

+ +
Note: Run-in boxes were removed from the CSS 2.1 standard, as they were insufficiently specified to allow for interoperable implementation. They may reappear in CSS3, but meanwhile, are considered experimental. They should not be used in production.
+ +

Model-induced boxes

+ +

Besides the inline and block formatting contexts, CSS specifies several additional content models that may be applied to elements. These additional models, used to describe specific layouts, may define additional box types:

+ + + +

Positioning schemes

+ +

Once boxes are generated, the CSS engine needs to position them on the layout. To do that, it uses one of the following algorithms:

+ + + +

Normal flow

+ +

In the normal flow, boxes are laid out one after the other. In a block formatting context, they are laid out vertically; in an inline formatting context, they are laid out horizontally. The normal flow is triggered when the CSS {{ cssxref("position") }} is set to the value static or relative, and if the CSS {{ cssxref("float") }} is set to the value none.

+ +

Example

+ +
When in the normal flow, in a block formatting context, boxes are laid vertically one after the other out:
+
+[image]
+
+When in the normal flow, in an inline formatting context, boxes are laid horizontally one after the other out:
+
+[image]
+ +

There are two sub-cases of the normal flow: static positioning and relative positioning:

+ + + +

Floats

+ +

In the float positioning scheme, specific boxes (called floating boxes or simply floats) are positioned at the beginning, or end of the current line. This leads to the property that text (and more generally anything within the normal flow) flows along the edge of the floating boxes, except if told differently by the {{ cssxref("clear") }} CSS property.

+ +

The float positioning scheme for a box is selected, by setting the {{ cssxref("float") }} CSS property on that box to a value different than none and {{ cssxref("position") }} to static or relative. If {{ cssxref("float") }} is set to left, the float is positioned at the beginning of the line box. If set to right, the float is positioned at the end of the line box. In either case, the line box is shrunk to fit alongside the float.

+ +

[image]

+ +

Absolute positioning

+ +

In the absolute positioning scheme, boxes are entirely removed from the flow and don't interact with it at all. They are positioned relative to their containing block using the {{ cssxref("top") }}, {{ cssxref("bottom") }}, {{ cssxref("left") }} and {{ cssxref("right") }} CSS properties.

+ +

An element is absolutely positioned if the {{ cssxref("position") }} is set to absolute or fixed.

+ +

With a fixed positioned element, the containing block is the viewport. The position of the element is absolute within the viewport. Scrolling does not change the position of the element.

+ +

Див. також

+ + diff --git "a/files/uk/web/css/\320\260\320\273\321\214\321\202\320\265\321\200\320\275\320\260\321\202\320\270\320\262\320\275\321\226_\321\202\320\260\320\261\320\273\320\270\321\206\321\226_\321\201\321\202\320\270\320\273\321\226\320\262/index.html" "b/files/uk/web/css/\320\260\320\273\321\214\321\202\320\265\321\200\320\275\320\260\321\202\320\270\320\262\320\275\321\226_\321\202\320\260\320\261\320\273\320\270\321\206\321\226_\321\201\321\202\320\270\320\273\321\226\320\262/index.html" deleted file mode 100644 index 1dd1b5a510..0000000000 --- "a/files/uk/web/css/\320\260\320\273\321\214\321\202\320\265\321\200\320\275\320\260\321\202\320\270\320\262\320\275\321\226_\321\202\320\260\320\261\320\273\320\270\321\206\321\226_\321\201\321\202\320\270\320\273\321\226\320\262/index.html" +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: Альтернативні таблиці стилів -slug: Web/CSS/Альтернативні_таблиці_стилів -tags: - - Стилі - - Теми -translation_of: Web/CSS/Alternative_style_sheets ---- -

Specifying alternative style sheets in a web page provides a way for users to see multiple versions of a page, based on their needs or preferences.

- -

Firefox lets the user select the stylesheet using the View > Page Style submenu, Internet Explorer also supports this feature (beginning with IE 8), also accessed from View > Page Style (at least as of IE 11), but Chrome requires an extension to use the feature (as of version 48). The web page can also provide its own user interface to let the user switch styles.

- -

An example: specifying the alternative stylesheets

- -

The alternate stylesheets are commonly specified using a {{HTMLElement("link")}} element with rel="stylesheet alternate" and title="..." attributes, for example:

- -
<link href="reset.css" rel="stylesheet" type="text/css">
-
-<link href="default.css" rel="stylesheet" type="text/css" title="Default Style">
-<link href="fancy.css" rel="alternate stylesheet" type="text/css" title="Fancy">
-<link href="basic.css" rel="alternate stylesheet" type="text/css" title="Basic">
-
- -

In this example, the styles "Default Style", "Fancy", and "Basic" will be listed in the Page Style submenu, with the Default Style pre-selected. When the user selects a different style, the page will immediately be re-rendered using that style sheet.

- -

No matter what style is selected, the rules from the reset.css stylesheet will always be applied.

- -

Try it out

- -

Click here for a working example you can try out.

- -

Details

- -

Any stylesheet in a document falls into one of the following categories:

- - - -

When style sheets are referenced with a title attribute on the {{HTMLElement("link", "<link rel=\"stylesheet\">")}} or {{HTMLElement("style")}} element, the title becomes one of the choices offered to the user. Style sheets linked with the same title are part of the same choice. Style sheets linked without a title attribute are always applied.

- -

Use rel="stylesheet" to link to the default style, and rel="alternate stylesheet" to link to alternative style sheets. This tells the browser which style sheet title should be selected by default, and makes that default selection apply in browsers that do not support alternate style sheets.

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSSOM', '#css-style-sheet-collections', 'CSS Style Sheet Collections')}}{{Spec2('CSSOM')}}The CSS OM specification defines the concepts of the style sheet set name, its disabled flag, and the preferred CSS style sheet set name.
- It defines how these are determined, and lets the HTML specification define the HTML-specific behaviors by requiring it to define when to create a CSS style sheet.
-

{{SpecName('HTML WHATWG', 'semantics.html#link-type-stylesheet', 'Link type "stylesheet"')}}
- {{SpecName('HTML WHATWG', 'semantics.html#attr-style-title', 'The style element')}}
- {{SpecName('HTML WHATWG', 'semantics.html#attr-meta-http-equiv-default-style', 'Default style state (http-equiv="default-style")')}}

- 		{{Spec2('HTML WHATWG')}}The HTML specification defines when and how the create a CSS style sheet algorithm is invoked while handling <link> and <style> elements, and also defines the behavior of <meta http-equiv="default-style">.
{{SpecName("HTML4.01", "present/styles.html#h-14.3", "Alternative style sheets")}}{{Spec2("HTML4.01")}}Earlier, the HTML specification itself defined the concept of preferred and alternate stylesheets.
- -

 

diff --git "a/files/uk/web/css/\320\264\320\276\320\262\321\226\320\264\320\275\320\270\320\272/index.html" "b/files/uk/web/css/\320\264\320\276\320\262\321\226\320\264\320\275\320\270\320\272/index.html" deleted file mode 100644 index ba325fe7da..0000000000 --- "a/files/uk/web/css/\320\264\320\276\320\262\321\226\320\264\320\275\320\270\320\272/index.html" +++ /dev/null @@ -1,188 +0,0 @@ ---- -title: CSS довідник -slug: Web/CSS/Довідник -translation_of: Web/CSS/Reference ---- -

This CSS Reference shows the basic syntax of a CSS rule; lists all standard CSS properties, pseudo-classes and pseudo-elements, @-rules, units, and selectors, all together in alphabetical order, as well as just the selectors by type; and allows you to quickly access detailed information for each of them. It not only lists the CSS 1 and CSS 2.1 properties, but also is a CSS3 reference that links to any CSS3 property and concept standardized, or already stabilized.  Also included is a brief DOM-CSS / CSSOM reference.

- -

Note that CSS rule-definitions are entirely (ASCII) text-based, whereas DOM-CSS / CSSOM, the rule-management system, is object-based.

- -

See also Mozilla CSS Extensions for Gecko-specific properties prefixed with -moz; and WebKit CSS Extensions for WebKit-specific properties. See Vendor-prefixed CSS Property Overview by Peter Beverloo for all prefixed properties.

- -

Basic rule syntax

- -

Be warned that any syntax error in a rule definition will invalidate the entire rule.

- -

Style rules

- -
selectorlist { property: value; [more property:value; pairs] }
-
-...where selectorlist is: selector[:pseudo-class] [::pseudo-element] [, more selectorlists]
-
-See selector, pseudo-element, pseudo-class lists below.
-
- -

Examples

- -
strong { color: red;}
-div.menu-bar li:hover > ul { display: block; }
-
- -

More about examples: #1, #2

- -

@rules

- -

As these have so many different structure-formats, see the desired At-rule for syntax.

- -

Keyword index

- -
{{CSS_Ref}}
- -
-
-

Selectors

- -
    -
  • Basic Selectors - -
    • -
  • Combinators    (more info) - -
    • -
  • Pseudo-elements    (more info) -
      -
    • {{ Cssxref("::after") }}
      • -
    • {{ Cssxref("::before") }}
      • -
    • {{ Cssxref("::first-letter") }}
      • -
    • {{ Cssxref("::first-line") }}
      • -
    • {{ Cssxref("::selection") }}
      • -
    • {{ Cssxref("::backdrop") }}
      • -
    • {{ Cssxref("::placeholder") }} {{experimental_inline}}
      • -
    • {{ Cssxref("::marker") }} {{experimental_inline}}
      • -
    • {{ Cssxref("::spelling-error") }} {{experimental_inline}}
      • -
    • {{ Cssxref("::grammar-error") }} {{experimental_inline}}
      • -
    -
    • -
  • Standard pseudo-classes    (more info) -
    -
      -
    • {{ Cssxref(":active") }}
      • -
    • {{ cssxref(':any')}}
      • -
    • {{ Cssxref(":checked") }}
      • -
    • {{ Cssxref(":default") }}
      • -
    • {{ Cssxref(":dir", ":dir()")}}
      • -
    • {{ Cssxref(":disabled") }}
      • -
    • {{ Cssxref(":empty") }}
      • -
    • {{ Cssxref(":enabled") }}
      • -
    • {{ Cssxref(":first") }}
      • -
    • {{ Cssxref(":first-child") }}
      • -
    • {{ Cssxref(":first-of-type") }}
      • -
    • {{ Cssxref(":fullscreen") }}
      • -
    • {{ Cssxref(":focus") }}
      • -
    • {{ Cssxref(":hover") }}
      • -
    • {{ Cssxref(":indeterminate") }}
      • -
    • {{ Cssxref(":in-range") }}
      • -
    • {{ Cssxref(":invalid") }}
      • -
    • {{ Cssxref(":lang", ":lang()") }}
      • -
    • {{ Cssxref(":last-child") }}
      • -
    • {{ Cssxref(":last-of-type") }}
      • -
    • {{ Cssxref(":left") }}
      • -
    • {{ Cssxref(":link") }}
      • -
    • {{ Cssxref(":not", ":not()") }}
      • -
    • {{ Cssxref(":nth-child", ":nth-child()") }}
      • -
    • {{ Cssxref(":nth-last-child", ":nth-last-child()") }}
      • -
    • {{ Cssxref(":nth-last-of-type", ":nth-last-of-type()") }}
      • -
    • {{ Cssxref(":nth-of-type", ":nth-of-type()") }}
      • -
    • {{ Cssxref(":only-child") }}
      • -
    • {{ Cssxref(":only-of-type") }}
      • -
    • {{ Cssxref(":optional") }}
      • -
    • {{ Cssxref(":out-of-range") }}
      • -
    • {{ Cssxref(":read-only") }}
      • -
    • {{ Cssxref(":read-write") }}
      • -
    • {{ Cssxref(":required") }}
      • -
    • {{ Cssxref(":right") }}
      • -
    • {{ Cssxref(":root") }}
      • -
    • {{ Cssxref(":scope") }}
      • -
    • {{ Cssxref(":target") }}
      • -
    • {{ Cssxref(":valid") }}
      • -
    • {{ Cssxref(":visited") }}
      • -
    -
    -
    • -
- -

A complete list of selectors in the Selectors Level 3 specification.

- -

CSS3 Tutorials

- -

These small how-to pages describe new technologies appeared in CSS3, or in CSS2.1 but with low support until recently:

- - - -

Concepts

- - - -

DOM-CSS / CSSOM

- -

Major object types:

- - - -

Important methods:

- -
    -
  • {{domxref("CSSStyleSheet.insertRule")}}
    • -
  • {{domxref("CSSStyleSheet.deleteRule")}}
    • -
-
-
diff --git "a/files/uk/web/css/\320\272\320\276\321\200\320\276\320\261\321\207\320\260\321\201\321\202\320\260_\320\274\320\276\320\264\320\265\320\273\321\214_css/index.html" "b/files/uk/web/css/\320\272\320\276\321\200\320\276\320\261\321\207\320\260\321\201\321\202\320\260_\320\274\320\276\320\264\320\265\320\273\321\214_css/index.html" deleted file mode 100644 index 4920b7ceb9..0000000000 --- "a/files/uk/web/css/\320\272\320\276\321\200\320\276\320\261\321\207\320\260\321\201\321\202\320\260_\320\274\320\276\320\264\320\265\320\273\321\214_css/index.html" +++ /dev/null @@ -1,161 +0,0 @@ ---- -title: Коробчаста модель CSS -slug: Web/CSS/Коробчаста_модель_CSS -tags: - - CSS - - Довідка - - Коробчаста модель CSS -translation_of: Web/CSS/CSS_Box_Model ---- -
Коробчаста модель (box model) — це алгоритм CSS, що подає елементи (включно з їх {{cssxref("margin", "відступами")}} та {{cssxref("padding", "полями")}}) у вигляді прямокутних «коробок» та компонує їх відповідно до {{cssxref("Visual_formatting_model", "моделі візуального формування")}}.
- -

Довідка

- -

Властивості

- -

Властивості, що визначають потік (flow) вмісту

- -
- -
- -

Властивості, що визначають розміри

- -
- -
- -

Властивості, що визначають відступи

- -
- -
- -

Властивості, що визначають поля

- -
- -
- -

Інші властивості

- -
- -
- -

Посібники

- -
-
Вступ до коробчастої моделі CSS
-
Описує та пояснює одне з ґрунтовних понять в CSS — коробчасту модель. Ця модель визначає, як CSS розташовує елементи, їх вміст, {{cssxref("padding", "поля")}}, {{cssxref("border", "обрамок")}} та {{cssxref("margin", "відступи")}}.
-
Згортання відступів
-
Два прилеглі відступи інколи згортаються в один. Ця стаття наводить правила, за якими це відбувається, та пояснює, як цим керувати.
-
Модель візуального формування
-
Описує та пояснює модель візуального формування.
-
- -

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

- - - - - - - - - - - - - - - - - - - - - - - - - - -
СпецифікаціяСтатусКоментар
{{SpecName("CSS3 Box")}}{{Spec2("CSS3 Box")}} 
{{SpecName("CSS2.1", "box.html")}}{{Spec2("CSS2.1")}} 
{{SpecName("CSS1")}}{{Spec2("CSS1")}}Первинне визначення
- -

Підтримка веб-переглядачами

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatGeckoDesktop("1")}}3.03.51.0 (85)
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.0{{CompatGeckoMobile("1")}}6.06.01.0
-
diff --git "a/files/uk/web/css/\320\274\320\276\320\264\320\265\320\273\321\214_\320\262\321\226\320\267\321\203\320\260\320\273\321\214\320\275\320\276\320\263\320\276_\321\204\320\276\321\200\320\274\321\203\320\262\320\260\320\275\320\275\321\217/index.html" "b/files/uk/web/css/\320\274\320\276\320\264\320\265\320\273\321\214_\320\262\321\226\320\267\321\203\320\260\320\273\321\214\320\275\320\276\320\263\320\276_\321\204\320\276\321\200\320\274\321\203\320\262\320\260\320\275\320\275\321\217/index.html" deleted file mode 100644 index fb25e2d60a..0000000000 --- "a/files/uk/web/css/\320\274\320\276\320\264\320\265\320\273\321\214_\320\262\321\226\320\267\321\203\320\260\320\273\321\214\320\275\320\276\320\263\320\276_\321\204\320\276\321\200\320\274\321\203\320\262\320\260\320\275\320\275\321\217/index.html" +++ /dev/null @@ -1,225 +0,0 @@ ---- -title: Модель візуального формування -slug: Web/CSS/Модель_візуального_формування -tags: - - CSS - - NeedsUpdate - - Коробчаста модель CSS -translation_of: Web/CSS/Visual_formatting_model ---- -

Модель візуального форматування (visual formatting model) у CSS являє собою алгоритм, що обробляє документ та подає його на візуальному носії. Ця модель є основним поняттям CSS.

- -

Кожен елемент в документі зазнає перетворення згідно з моделлю візуального формування і породжує нуль (жодного), один або кілька прямокутників відповідно до {{cssxref("CSS_Box_Model/Introduction_to_the_CSS_box_model", "коробчастої моделі")}} CSS. Компонування кожного такого прямокутника визначається низкою чинників:

- - - -

Відповідно до моделі, прямокутник розміщується й малюється відносно краю блока, всередині якого він міститься. Зазвичай прямокутник утворює такий блок для своїх нащадків. Втім, розмір прямокутника не обмежено розмірами блока, що його містить; коли компонування прямокутника передбачає вихід за межі блока, це зветься {{cssxref("overflow", "переповненням")}}.

- -

Утворення прямокутників

- -

Генерація блоків, це частина візуального форматування CSS, що створює прямокутники з елементів документу. Сгенеровані блоки є різних типів, що вплиає на те, як виконується візуальне формування. Тип згенерованого блоку залежить від значення CSS {{ cssxref("display") }}.

- -

Block-level elements and block boxes

- -

Елемент  називається блочним, коли його вираховане значення  {{ cssxref("display") }} CSS property is: block, list-item, or table. Елемент рівня блоку візуально форматується, як блок (наприклад абзац), приздачений для вертикальної компановки.

- -

Each block-level box participates in a block formatting context. Each block-level element generates at least one block-level box, called the principal block-level box. Some elements, like a list-item element, generating further boxes to handle bullets and other typographic elements introducing the list item, may generate more boxes. Most generate only the principal, block-level box.

- -

The principal block-level box contains descendant-generated boxes and generated content. It is also the box involved in the positioning scheme.

- -

venn_blocks.pngA block-level box may also be a block container box. A block container box is a box that contains only other block-level boxes, or creates an inline formatting context, thus containing only inline boxes.

- -

It is important to note that the notions of a block-level box and block container box are disjoined. The first, describes how the box behaves with its parents and sibling. The second, how it interacts with its descendants. Some block-level boxes, like tables, aren't block container boxes. Reciprocally, some block container boxes, like non-replaced inline blocks and non-replaced table cells, aren't block-level boxes.

- -

Block-level boxes that also are block container boxes are called block boxes.

- -

Anonymous block boxes

- -

In some cases, the visual formatting algorithm needs to add supplementary boxes. Because CSS selectors cannot style or name these boxes, they are called anonymous boxes.

- -

Because selectors do not work with anonymous boxes, they cannot be styled via a stylesheet. This means that all inheritable CSS properties have the inherit value, and all non-inheritable CSS properties, have the initial value.

- -

Block containing boxes contain only inline-level boxes, or only block-level boxes. But often the document contains a mix of both. In that case, anonymous block boxes are created around adjacent inline-level boxes.

- -

Example

- -

If we take the following HTML code (with default styling applied to it, that is {{ HTMLElement("div") }} and {{ HTMLElement("p") }} elements have display:block :

- -
<div>Some inline text <p>followed by a paragraph</p> followed by more inline text.</div>
- -

Two anonymous block boxes are created: one for the text before the paragraph (Some inline text), and another for the text after it (followed by more inline text). This builds the following block structure:

- -

anonymous_block-level_boxes.png

- -

Leading to:

- -
Some inline text
-followed by a paragraph
-followed by more inline text.
-
- -

Unlike the {{ HTMLElement("p") }} element's box, Web developers cannot control the style of the two anonymous boxes. Inheritable properties take the value from the {{ HTMLElement("div") }}'s property value, like {{ cssxref("color") }} to define the color of the text, and set the others to the initial value. For example, they won't have a specific {{ cssxref("background-color") }}, it is always transparent, the initial value for that property, and thus the background of the <div> is visible. A specific background color can be applied to the <p> box. Similarly, the two anonymous boxes always use the same color for their text.

- -

Another case that leads to the creation of anonymous block boxes, is an inline box that contains one or several block boxes. In that case, the box containing the block box is split into two inline boxes: one before, and one after the block box. All the inline boxes before the block box are then enclosed into an anonymous block box, so are the inline boxes following the block box. Therefore, the block box becomes the sibling of the two anonymous block boxes containing the inline elements.

- -

If there are several block boxes, without inline content in-between, the anonymous block boxes are created before, and after the set of boxes.

- -

Example

- -

If we take the following HTML code, with {{ HTMLElement("p") }} have display:inline and {{ HTMLElement("span") }} have display:block :

- -
<p>Some <em>inline</em> text <span>followed by a paragraph</span> followed by more inline text.</p>
- -

Two anonymous block boxes are created, one for the text before the span Element (Some inline text) and one for the text after it (followed by more inline text), which gives the following block structure:

- -

- -

Which leads to:

- -
Some inline text
-followed by a paragraph
-followed by more inline text.
-
- -

Inline-level elements and inline boxes

- -

An element is said to be inline-level when the calculated value of its {{ cssxref("display") }} CSS property is: inline, inline-block or inline-table. Visually, it doesn't constitute blocks of contents, but is distributed in lines with other inline-level content. Typically, the content of a paragraph with different formatting, like emphasis or images, is made from inline-level elements.

- -

venn_inlines.png

- -
-

This diagram uses outdated terminology; see note below. Besides that, it is incorrect because the yellow ellipsis on the right side is per definition either identical to the one on the left side, or bigger than that (it could be a mathematical superset), because the spec says "Inline-level elements generate inline-level boxes, which are boxes that participate in an inline formatting context", see CSS 2.2, chapter 9.2.2

-
- -

Inline-level elements generate inline-level boxes that are defined as boxes participating to an inline formatting context. Inline boxes are both inline-level boxes and boxes, whose contents participate in their container's inline formatting context. This is the case, for example, for all non-replaced boxes with display:inline. Inline-level boxes, whose contents do not participate in an inline formatting context, are called atomic inline-level boxes. These boxes, generated by replaced inline-level elements or by elements with a calculated {{ cssxref("display") }} value of inline-block or inline-table, are never split into several boxes, as is possible with inline boxes.

- -
Note: Initially, atomic inline-level boxes were called atomic inline boxes. This was unfortunate, as they are not inline boxes. This was corrected in an erratum to the spec. Nevertheless, you can harmlessly read atomic inline-level box each time you meet atomic inline box in the literature, as this is only a name change.
- -
Atomic inline boxes cannot be split into several lines in an inline formatting context. -
-
<style>
-  span {
-    display:inline; /* default value*/
-  }
-</style>
-<div style="width:20em;">
-   The text in the span <span>can be split in several
-   lines as it</span> is an inline box.
-</div>
-
- -

which leads to:

- -
The text in the span can be split into several lines as it is an inline box.
- -
<style>
-  span {
-    display:inline-block;
-  }
-</style>
-<div style="width:20em;">
-   The text in the span <span>cannot be split in several
-   lines as it</span> is an inline-block box.
-</div>
-
- -

which leads to:

- -
The text in the span cannot be split into several lines as it is an inline-block box.
-
-
- -

Anonymous inline boxes

- -

As for block boxes, there are a few cases where inline boxes are created automatically by the CSS engine. These inline boxes are also anonymous as they cannot be named by selectors; they inherit the value of all inheritable properties, setting it to initial for all others.

- -

The most common case where an anonymous inline box is created, is when some text is found as a direct child of a block box creating an inline formatting context. In that case, this text is included in the largest possible anonymous inline box. Also, space content, which would be removed by the behavior set in the {{ cssxref("white-space") }} CSS property, does not generate anonymous inline boxes because they would end empty.

- -
Example TBD
- -

Other types of boxes

- -

Line boxes

- -

Line boxes are generated by the inline formatting context to represent a line of text. Inside a block box, a line box extends from one border of the box to the other. When there are floats, the line box starts at the rightmost border of the left floats and ends at the leftmost border of the right floats.

- -

These boxes are technical, and Web authors do not usually have to bother with them.

- -

Run-in boxes

- -

Run-in boxes, defined using display:run-in, are boxes that are either block boxes or inline boxes, depending on the type of the following box. They can be used to create a title that runs inside its first paragraph when possible.

- -
Note: Run-in boxes were removed from the CSS 2.1 standard, as they were insufficiently specified to allow for interoperable implementation. They may reappear in CSS3, but meanwhile, are considered experimental. They should not be used in production.
- -

Model-induced boxes

- -

Besides the inline and block formatting contexts, CSS specifies several additional content models that may be applied to elements. These additional models, used to describe specific layouts, may define additional box types:

- - - -

Positioning schemes

- -

Once boxes are generated, the CSS engine needs to position them on the layout. To do that, it uses one of the following algorithms:

- - - -

Normal flow

- -

In the normal flow, boxes are laid out one after the other. In a block formatting context, they are laid out vertically; in an inline formatting context, they are laid out horizontally. The normal flow is triggered when the CSS {{ cssxref("position") }} is set to the value static or relative, and if the CSS {{ cssxref("float") }} is set to the value none.

- -

Example

- -
When in the normal flow, in a block formatting context, boxes are laid vertically one after the other out:
-
-[image]
-
-When in the normal flow, in an inline formatting context, boxes are laid horizontally one after the other out:
-
-[image]
- -

There are two sub-cases of the normal flow: static positioning and relative positioning:

- - - -

Floats

- -

In the float positioning scheme, specific boxes (called floating boxes or simply floats) are positioned at the beginning, or end of the current line. This leads to the property that text (and more generally anything within the normal flow) flows along the edge of the floating boxes, except if told differently by the {{ cssxref("clear") }} CSS property.

- -

The float positioning scheme for a box is selected, by setting the {{ cssxref("float") }} CSS property on that box to a value different than none and {{ cssxref("position") }} to static or relative. If {{ cssxref("float") }} is set to left, the float is positioned at the beginning of the line box. If set to right, the float is positioned at the end of the line box. In either case, the line box is shrunk to fit alongside the float.

- -

[image]

- -

Absolute positioning

- -

In the absolute positioning scheme, boxes are entirely removed from the flow and don't interact with it at all. They are positioned relative to their containing block using the {{ cssxref("top") }}, {{ cssxref("bottom") }}, {{ cssxref("left") }} and {{ cssxref("right") }} CSS properties.

- -

An element is absolutely positioned if the {{ cssxref("position") }} is set to absolute or fixed.

- -

With a fixed positioned element, the containing block is the viewport. The position of the element is absolute within the viewport. Scrolling does not change the position of the element.

- -

Див. також

- - diff --git "a/files/uk/web/css/\321\200\320\276\320\267\320\274\321\226\321\202\320\272\320\260_\320\272\321\203\320\273\321\226\320\275\320\260\321\200\320\275\320\260-\320\272\320\275\320\270\320\263\320\260/index.html" "b/files/uk/web/css/\321\200\320\276\320\267\320\274\321\226\321\202\320\272\320\260_\320\272\321\203\320\273\321\226\320\275\320\260\321\200\320\275\320\260-\320\272\320\275\320\270\320\263\320\260/index.html" deleted file mode 100644 index e6d7f61135..0000000000 --- "a/files/uk/web/css/\321\200\320\276\320\267\320\274\321\226\321\202\320\272\320\260_\320\272\321\203\320\273\321\226\320\275\320\260\321\200\320\275\320\260-\320\272\320\275\320\270\320\263\320\260/index.html" +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: Кулінарна книга з CSS розмітки -slug: Web/CSS/Розмітка_кулінарна-книга -translation_of: Web/CSS/Layout_cookbook ---- -
{{CSSRef}}
- -

The CSS layout cookbook aims to bring together recipes for common layout patterns, things you might need to implement in your own sites. In addition to providing code you can use as a starting point in your projects, these recipes highlight the different ways layout specifications can be used, and the choices you can make as a developer.

- -
-

Note: If you are new to CSS layout then you might first like to take a look at our CSS layout learning module, as this will give you the basic grounding you need to make use of the recipes here.

-
- -

The Recipes

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
RecipeDescriptionLayout Methods
Media objectsA two-column box with an image on one side and descriptive text on the other, e.g. a facebook post or tweet.CSS Grid, {{cssxref("float")}} fallback, {{cssxref("fit-content")}} sizing
ColumnsWhen to choose multi-column layout, flexbox or grid for your columns.CSS Grid, Multicol, Flexbox
Center an elementHow to center an item horizontally and vertically.Flexbox, Box Alignment
Sticky footersCreating a footer which sits at the bottom of the container or viewport when the content is shorter. CSS Grid, Flexbox
Split navigationA navigation pattern where some links are visually separated from the others.Flexbox, {{cssxref("margin")}}
Breadcrumb navigationCreating a list of links to allow the visitor to navigate back up through the page hierarchy.Flexbox
List group with badgesA list of items with a badge to display a count.Flexbox, Box Alignment
PaginationLinks to pages of content (such as search results).Flexbox, Box Alignment
CardA card component, which displays in a grid of cards.Grid Layout
Grid wrapperFor aligning grid content within a central wrapper, while also allowing items to break out.CSS Grid
- -

Contribute a Recipe

- -

As with all of MDN we would love you to contribute a recipe in the same format as the ones shown above. See this page for a template and guidelines for writing your own example.

diff --git "a/files/uk/web/css/\321\201\321\205\320\265\320\274\320\260_\320\272\320\276\320\274\320\277\320\276\320\275\321\203\320\262\320\260\320\275\320\275\321\217/index.html" "b/files/uk/web/css/\321\201\321\205\320\265\320\274\320\260_\320\272\320\276\320\274\320\277\320\276\320\275\321\203\320\262\320\260\320\275\320\275\321\217/index.html" deleted file mode 100644 index 5794b4c397..0000000000 --- "a/files/uk/web/css/\321\201\321\205\320\265\320\274\320\260_\320\272\320\276\320\274\320\277\320\276\320\275\321\203\320\262\320\260\320\275\320\275\321\217/index.html" +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Схема компонування -slug: Web/CSS/Схема_компонування -tags: - - CSS - - Компонування - - Розмітка - - Розташування -translation_of: Web/CSS/Layout_mode ---- -
Схема компонування (layout mode) в CSS являє собою алгоритм, який визначає розташування та розміри елементів залежно від того, як вони взаємодіють із сусідніми та батьківськими елементами. Існує декілька таких схем:
- - - -
-

Зауваження: Не всі властивості CSS застосовні до всіх схем компонування. Більшість із них вживаються разом з однією-двома схемами і жодним чином не діють, якщо відповідний елемент компонується за іншою схемою.

-
- -

Див. також

- - diff --git a/files/uk/web/events/abort/index.html b/files/uk/web/events/abort/index.html deleted file mode 100644 index 40a9e144fc..0000000000 --- a/files/uk/web/events/abort/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: abort -slug: Web/Events/abort -translation_of: Web/API/HTMLMediaElement/abort_event -translation_of_original: Web/Events/abort ---- -

Подія abort спрацьовує коли завантаження ресурсу було перервано.

- -

Загальна інформація

- -
-
Специфікація
-
DOM L3
-
Interface
-
UIEvent if generated from a user interface, Event otherwise.
-
Bubbles
-
No
-
Cancelable
-
No
-
Target
-
Element
-
Default Action
-
None
-
- -

Властивості

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe event target (the topmost target in the DOM tree).
type {{readonlyInline}}DOMStringThe type of event.
bubbles {{readonlyInline}}BooleanWhether the event normally bubbles or not.
cancelable {{readonlyInline}}BooleanWhether the event is cancellable or not.
view {{readonlyInline}}WindowProxydocument.defaultView (window of the document)
detail {{readonlyInline}}long (float)0.
diff --git a/files/uk/web/events/domcontentloaded/index.html b/files/uk/web/events/domcontentloaded/index.html deleted file mode 100644 index 96ca54cfb0..0000000000 --- a/files/uk/web/events/domcontentloaded/index.html +++ /dev/null @@ -1,152 +0,0 @@ ---- -title: DOMContentLoaded -slug: Web/Events/DOMContentLoaded -translation_of: Web/API/Window/DOMContentLoaded_event ---- -

Подія DOMContentLoaded викликається, коли вихідний HTML документ повністю завантажився та був розібраний (parse), без очікування повного завантаження стилів, зображень, сабфреймів (subframes). Зовсім інша подія - load - має використовуватися лише для того, щоб визначити повне завантаження сторінки. Використання load там, де застосування DOMContentLoaded є більш доречним, є дуже поширеною помилкою, тому будьте уважними.

- -

{{Note("Синхронний Javascript затримує парсинг DOM.")}}

- -

{{Note("Існує безліч універсальних та автономних бібліотек, які  попонують кроссбраузерні методи для визначення готовності DOM.")}}

- -

Прискорення

- -

Якщо ви хочете, щоб DOM був розібраним (got parsed) якомога швидше після того, як користувач зробив запит сторінки, ви можете зробити ваш JavaScript асинхронним та оптимізувати завантаження стилів. Якщо цього не зробити, це сповільнить завантаження сторінки через те, що воно буде відбуватися паралельно і марнувати трафік у головного html документа.

- -

Основна інформація

- -
-
Специфікація
-
HTML5
-
Інтерфейс
-
Подія
-
Спливання
-
Так
-
Можливість скасування
-
Так (однак скасування як простої події скасувати не можна)
-
 
-
 
-
 
-
 
-
Ціль
-
Документ
-
Типова дія
-
Немає.
-
- -

Властивості

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ВластивістьТипОпис
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
- -

Приклад

- -
<script>
-  document.addEventListener("DOMContentLoaded", function(event) {
-    console.log("DOM fully loaded and parsed");
-  });
-</script>
-
- -
<script>
-  document.addEventListener("DOMContentLoaded", function(event) {
-    console.log("DOM fully loaded and parsed");
-  });
-
-for(var i=0; i<1000000000; i++)
-{} // this synchronous script is going to delay parsing of the DOM. So the DOMContentLoaded event is going to launch later.
-</script>
-
- -

Сумісність з браузерами

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0[1]{{CompatGeckoDesktop("1")}}[1]9.0[2]9.03.1[1]
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}[1]{{CompatGeckoMobile("1")}}[1]{{CompatUnknown}}[2]{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]
-
- -

[1] Bubbling для цієї події підтримується принаймні Gecko 1.9.2, Chrome 6, and Safari 4.

- -

[2] Internet Explorer 8 підтримує подію readystatechange , яка може використовуватися для того, щоб визначити чи готовий DOM. У більш ранніх версіях Internet Explorer цей стан може бути визначений повторними спробами виконання document.documentElement.doScroll("left");,  так як цей фрагмент коду буде генерувати помилку, поки DOM не буде готовий.

- -

Подібні події

- - diff --git a/files/uk/web/guide/css/getting_started/index.html b/files/uk/web/guide/css/getting_started/index.html deleted file mode 100644 index cedd782ad2..0000000000 --- a/files/uk/web/guide/css/getting_started/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Getting started with CSS -slug: Web/Guide/CSS/Getting_started -translation_of: Learn/CSS/First_steps -translation_of_original: Web/Guide/CSS/Getting_started ---- -

Це керівництво ознайомить Вас з основними функціями та мовою (синтаксисом) каскадних таблиць стилів (Cascading Style Sheets - CSS). Ви використовуєте CSS, щоб змінити зовнішній вигляд структурованого документу, такого як веб-сторінка. Урок також включає приклади вправ, які ви можете спробувати виконати на власному комп’ютері, щоб побачити ефекти CSS і функції, що реалізуються в сучасних браузерах.

- -

Посібник призначений для початківців і будь-кого, хто б хотів повторити основи CSS. Якщо ви маєте більше досвіду з CSS, основна сторінка CSS містить списки більш просуненого рівня.

- - - -

Що потрібно для початку роботи

- - - -

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

- -

На замітку: Керівництво розглядає тему як CSS працює з кольором. Буде простіше завершити ці секції з кольоровим дисплеєм та нормальним кольоровим зором.  

- -

Як використовувати це керівництво

- -

В опрацюванні цього керівництва читай сторінки уважно і в визначеній послідовності. Якщо ти пропустиш сторінку, надалі може бути важко зрозуміти наступні сторінки підручника. 

- -

Частина І: основи CSS

- -

На кожній сторінці переглянь відділ Інформація, щоб зрозуміти як працює CSS. Спробуй  секцію Дія, щоб випробувати CSS на власному комп’ютері.

- -

To test your understanding, take the challenge at the end of each page. Solutions to the challenges are linked under the challenges, so you don't need to look at them if you don't want to.

- -

Щоб глибше зрозуміти CSS, прочитай інформацію, яку ти знайдеш в блоці з заголовком Детальніше. Використай лінки у них, щоб знайти довідникову інформацію про CSS.

- -

Частина II: Сфера CSS

- -

Друга частина підручника надає приклади, які показують сферу CSS з іншими веб- і Mozilla технологіями.

- -
    -
  1. JavaScript
    2. -
  2. SVG-графіка
    3. -
  3. XML дані
    4. -
  4. XBL сполучення
    5. -
  5. Користувацбкі інтерфейси ХUL
    6. -
diff --git a/files/uk/web/guide/css/getting_started/what_is_css/index.html b/files/uk/web/guide/css/getting_started/what_is_css/index.html deleted file mode 100644 index f1ee8b66b1..0000000000 --- a/files/uk/web/guide/css/getting_started/what_is_css/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: What is CSS? -slug: Web/Guide/CSS/Getting_started/What_is_CSS -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/What_is_CSS ---- -
{{CSSTutorialTOC}}
- -

{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started", "Getting started")}} This first section of the CSS Getting Started tutorial briefly explains Cascading Style Sheets (CSS). You'll also create a simple document to use for CSS exercises in subsequent sections.

- -

Інформація: Що таке CSS?

- -

Каскадні таблиці стилів (англ. - Cascading Style Sheets  CSS) - мова, що визначає як вміст сторінки буде візуально офрмлений та представлений користувачам. Складові документу ж описують мовою розмітки, на зразок HTML.

- -

Документ являє собою інформацію, структуровану для подання з використанням мови розмітки.

- -

Presenting a document to a user means converting it into a usable form for your audience. Browsers, like Firefox, Chrome or Internet Explorer, are designed to present documents visually, for example, on a computer screen, projector or printer.

- -
-

Приклади

- - -
- -

In this tutorial, boxes captioned Детальніше like the one below contain optional information and links to more resources on a concept or topic covered in a section. Read them as you see them, follow the links, or skip these boxes and return to read them later.

- -
-
Детальніше
- -

Документ- це не те ж саме, що і файл. Втім, ти можеш зберегти документ у файлі.

- -

Документ, який ти зараз читаєш не збережений окремим файлом. Коли твій веб-браузер переходить на цю сторінку, сервер робить запит до бази данних та генерує документ, зібравши частини документу з різних фалів. Однак, в цьому уроці ти будеш працювати також і з  документами, збереженими у файлах.

- -

Більше інформації про документи та мови розміток ти можеш знайти в фнших розділах цього веб-сайту:

- - - - - - - - - - - - - - - - - - - - -
HTMLдля веб-сторінок
XMLдля структурованих документів в загальному
SVGдля графіки
XULдля інтерфейсів користувачів у браузері Mozilla
- -

У другій частині ціього навчального посібника ти знайдеш приклади цих мов розміток.

-
- -
-
Детальніше
- -

In formal CSS terminology, the program that presents a document to a user is called a user agent (UA). A browser is just one kind of UA. CSS is not just for browsers or visual presentation, but for Part I of this tutorial, you'll only work with CSS in a browser.

- -

For formal definitions of terminology relating to CSS, see Definitions in the CSS Specification from the World Wide Web Consortium (W3C), an international community that sets open standards for the web.

-
- -

До роботи: Створення документу

- -
    -
  1. Створи нову паку на своєму комп'ютері для того, щоб зберігати та упорядковувати вправи з наших уроків.
    2. -
  2. Open your text editor and create a new text file. This file will contain the document for the next few tutorial exercises.
    3. -
  3. Copy and paste the HTML shown below. Save the file using the name doc1.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>
    - -

    {{ LiveSampleLink('Action_Creating_a_document', 'View above Demo') }}

    -
    4. -
  4. Open a new tab or a new window in your browser, then open the file you just created. -

    You should see the text with the initial letters bold, like this:

    - - - - - - - -
    Cascading Style Sheets
    - -

    What you see in your browser might not look exactly the same because of settings in your browser and in this wiki. Some differences in the font, spacing and colors are not important.

    -
    5. -
- -

Що далі?

- -

{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Why use CSS?")}}Your document does not yet use CSS. In the next section you'll use CSS to style your document.

diff --git a/files/uk/web/guide/graphics/index.html b/files/uk/web/guide/graphics/index.html new file mode 100644 index 0000000000..57af0fdbc3 --- /dev/null +++ b/files/uk/web/guide/graphics/index.html @@ -0,0 +1,49 @@ +--- +title: Графіка для Web +slug: Web/Guide/Графіка +tags: + - 2D + - 3D + - Canvas + - HTML5 + - SVG + - WebGL + - WebRTC + - Веб + - Графіка +translation_of: Web/Guide/Graphics +--- +

Сучасним сайтам і веб-додаткам потрібне відображення графіки. Статичні зображення легко зобразити використовуючи елемент {{HTMLElement("img")}}, чи налаштувати фон HTML елементів використовуючи властивість {{cssxref("background-image")}}. Ви також можете конструювати графіку на льоту, або модифікувати її після. В статтях далі сказано як це можна зробити.

+ +
+
+

2D Графіка

+ +
+
Canvas
+
Елемент {{HTMLElement("canvas")}} надає зручні API для малювання 2D графіки використовуючи JavaScript.
+
SVG
+
Scalable Vector Graphics (SVG) дозволяє використовувати лінії, криві, та інші геометричні фігури для рендерингу графіки. З векторів, ви можете створювати зображення які не втрачають якості при маштабуванні.
+
+ +

Переглянути все...

+
+ +
+

3D Графіка

+ +
+
WebGL
+
Посібник для початку роботи з WebGL, API для роботи з 3D графікою в веб. Ця технологія дає вам можливість використовувати стандартний OpenGL ES в Web контенті.
+
+ +

Відео

+ +
+
Використання HTML5 аудіо і відео
+
Вбудовування відео і/або аудіо в веб-сторінки і керування відтворенням.
+
WebRTC
+
RTC в WebRTC означає Real-Time Communications (комунікація в реальному часі), технологія яка дозволяє передавати потокове аудіо/відео і дані між кліентами браузера (пірами).
+
+
+
diff --git a/files/uk/web/guide/html/using_html_sections_and_outlines/index.html b/files/uk/web/guide/html/using_html_sections_and_outlines/index.html new file mode 100644 index 0000000000..84db2e6a76 --- /dev/null +++ b/files/uk/web/guide/html/using_html_sections_and_outlines/index.html @@ -0,0 +1,337 @@ +--- +title: Використання HTML-секцій та структура документу +slug: Web/Guide/HTML/Використання_HTML-секцій_та_структура_документу +translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines +--- +
+

 В перекладі наводяться терміни схема документу та алгоритм схематизації у відповідності до англійських outline та outline algorithm, оскільки на думку перекладача найбільш точно відповідають змісту, вкладеному в поняття на мові оригінлу.

+ +

Також у відповідності до section та subsection використано розділ та підрозділ, так як в змісті даного документу йдеться більше про великі веб-сторінки, порівнювані із книжками.

+
+ +
+

Зверніть увагу: На даний момент немає відомих реалізацій алгоритму побудови схеми документа в браузерах чи інших агентах користувачів (assistive technology user agents), проте алгоритм реалізований в  ішому програмному забезпеченні, наприклад, в засобах перевірки стандартів (conformance checkers). Therefore the outline algorithm cannot be relied upon to convey document structure to users. Автори рекомендують використовувати ранг заголовку (h1-h6) для опису структури документу.

+
+ +

Специфікація HTML 5 вводить ряд нових елементів, що дозволяють веб-розробникам краще описувати структуру веб-документу використовуючи стандартну семантику. Даний документ описує ці елементи та способи їх використання для створення бажаної схеми документу.

+ +

Структура документу в HTML 4

+ +

Структура документу, тобто семантична структура, що знаходиться між <body> і </body>, — основа представлення сторінки. В HTML4 для опису структури документу використовується форма запису із розділів та підрозділів. Розділ визначається за допомогою елемента ({{HTMLElement("div")}}), в який включаються елементи заголовків ({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, або {{HTMLElement("h6")}}), які, власне, і слугують заголовками секцій чи підсекцій. Взаєморозміщення даних елементів утворює структуру документу та будує його схему.

+ +

Таким чином наступна розмітка:

+ +
+
<div class="section" id="forest-elephants" >
+  <h1>Forest elephants</h1>
+  <p>In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  <div class="subsection" id="forest-habitat" >
+    <h2>Habitat</h2>
+    <p>Forest elephants do not live in trees but among them.
+     ...this subsection continues...
+  </div>
+</div>
+
+
+ +

зводиться до наступної схеми:

+ +
1. Forest elephants
+   1.1 Habitat
+
+ +

Елемент {{HTMLElement("div")}} не оголошує нову секцію. Для цього достатньо наявності тегу заголовка. Таким чином фрамент:

+ +
<h1>Forest elephants</h1>
+  <p>In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  <h2>Habitat</h2>
+  <p>Forest elephants do not live in trees but among them.
+    ...this subsection continues...
+  <h2>Diet</h2>
+<h1>Mongolian gerbils</h1>
+
+ +

зумовлює наступну схему:

+ +
1. Forest elephants
+   1.1 Habitat
+   1.2 Diet
+2. Mongolian gerbils
+
+ +

Проблеми, розв'зані за допомогою HTML5

+ +

Спосіб визначення структури документу в HTML 4 та обробка її алгоритмом схематизації є досить складнм та зумовлює наступні проблеми:

+ +
    +
  1. Використання елементу {{HTMLElement("div")}}  для оголошення секцій (розділів) без використання спеціальних класів (значень атрибуту class) робить неможливим застосування алгоритму схематизації ("Цей {{HTMLElement("div")}} — частина схеми сторінки, що визначає секцію чи підсекцію?" Чи "це звичайний {{HTMLElement("div")}}-елемент, використаний для стилізації?"). Іншими словами, специфікація HTML 4 дуже неточно визначає межі початку та закінчення розділів. Автоматична генерація схеми документу досить важлива, зокрема для реабілітаційних технологій, які адаптують та доносять інформацію до людей (від перекл.: як правило, з обмеженими можливостями) базуючись на структурі документу. HTML 5 усуває труднощі обробки елементу {{HTMLElement("div")}} алгоритмом схематизації, оскільки вводить новий елемент для розділів, {{HTMLElement("section")}}, HTML Section Element.
    2. +
  2. Merging several documents is hard: inclusion of a sub-document in a main document means changing the level of the HTML Headings Element so that the outline is kept. This is solved in HTML5 as the newly introduced sectioning elements ({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} and {{HTMLElement("aside")}}) are always subsections of their nearest ancestor section, regardless of what sections are created by internal headings.
    3. +
  3. In HTML4, every section is part of the document outline. But documents are often not that linear. A document can have special sections containing information that is not part of, though it is related to, the main flow, like an advertisement block or an explanation box. HTML5 introduces the {{HTMLElement("aside")}} element allowing such sections to not be part of the main outline.
    4. +
  4. Again, in HTML4, because every section is part of the document outline, there is no way to have sections containing information related not to the document but to the whole site, like logos, menus, table of contents, or copyright information and legal notices. For that purpose, HTML5 introduces three new elements: {{HTMLElement("nav")}} for collections of links, such as a table of contents, {{HTMLElement("footer")}} and {{HTMLElement("header")}} for site-related information. Note that {{HTMLElement("header")}} and {{HTMLElement("footer")}} are not sectioning content like {{HTMLElement("section")}}, rather, they exist to semantically mark up parts of a section.
    5. +
+ +

More generally, HTML5 brings precision to the sectioning and heading features, allowing document outlines to be predictable and used by the browser to improve the user experience.

+ +

Алгоритм схематизації HTML 5

+ +

Let's consider the algorithms  underlying the way HTML handles sections and outlines.

+ +

Defining sections

+ +

All content lying inside the {{HTMLElement("body")}} element is part of a section. Sections in HTML5 can be nested. Beside the main section, defined by the {{HTMLElement("body")}} element, section limits are defined either explicitly or implicitly. Explicitly-defined sections are the content within {{HTMLElement("body")}},  {{HTMLElement("section")}},  {{HTMLElement("article")}},  {{HTMLElement("aside")}}, and {{HTMLElement("nav")}} tags. 

+ +
Each section can have its own heading hierarchy. Therefore, even a nested section can have an {{HTMLElement("h1")}}. See {{anch("Defining headings")}}
+ +

Let's look at an example — here we have a document with a top level section and a footer defined. Inside the top level section we have three subsections, defined by two {{htmlelement("section")}} elements and an {{htmlelement("aside")}} element:

+ +
<section>
+
+  <h1>Forest elephants</h1>
+
+  <section>
+    <h1>Introduction</h1>
+    <p>In this section, we discuss the lesser known forest elephants.</p>
+  </section>
+
+  <section>
+    <h1>Habitat</h1>
+    <p>Forest elephants do not live in trees but among them.</p>
+  </section>
+
+  <aside>
+    <p>advertising block</p>
+  </aside>
+
+</section>
+
+<footer>
+  <p>(c) 2010 The Example company</p>
+</footer>
+ +

This leads to the following outline:

+ +
1. Forest elephants
+   1.1 Introduction
+   1.2 Habitat
+
+ +

Defining headings

+ +

While the HTML Sectioning elements define the structure of the document, an outline also needs headings to be useful. The basic rule is simple: the first HTML heading element (one of {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}) defines the heading of the current section.

+ +

The heading elements have a rank given by the number in the element name, where {{HTMLElement("h1")}} has the highest rank, and {{HTMLElement("h6")}} has the lowest rank. Relative ranking matters only within a section; the structure of the sections determines the outline, not the heading rank of the sections. For example, consider this code:

+ +
<section>
+  <h1>Forest elephants</h1>
+  <p>In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  <section>
+    <h2>Habitat</h2>
+    <p>Forest elephants do not live in trees but among them.
+        ...this subsection continues...
+  </section>
+</section>
+<section>
+  <h3>Mongolian gerbils</h3>
+  <p>In this section, we discuss the famous mongolian gerbils.
+     ...this section continues...
+</section>
+ +

This creates the following outline:

+ +
1. Forest elephants
+   1.1 Habitat
+2. Mongolian gerbils
+ +

Note that the rank of the heading element (in the example {{HTMLElement("h1")}} for the first top-level section, {{HTMLElement("h2")}} for the subsection and {{HTMLElement("h3")}} for the second top-level section) is not important. (Any rank can be used as the heading of an explicitly-defined section, although this practice is not recommended.)

+ +

Implicit sectioning

+ +

Because the HTML5 Sectioning Elements aren't mandatory to define an outline, to keep compatibility with the existing web dominated by HTML4, there is a way to define sections without them. This is called implicit sectioning.

+ +

The heading elements ({{HTMLElement("h1")}} to {{HTMLElement("h6")}}) define a new, implicit, section when they aren't the first heading of their parent, explicit, sections. The way this implicit section is positioned in the outline is defined by its relative rank with the previous heading in their parent section. If it is of a lower rank than the previous heading, it opens an implicit sub-section of the section. This code:

+ +
<section>
+  <h1>Forest elephants</h1>
+  <p>In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  <h3 class="implicit subsection">Habitat</h3>
+  <p>Forest elephants do not live in trees but among them.
+    ...this subsection continues...
+</section>
+ +

leading to the following outline:

+ +
1. Forest elephants
+   1.1 Habitat (implicitly defined by the h3 element)
+
+ +

If it is of the same rank as the previous heading, it closes the previous section (which may have been explicit!) and opens a new implicit one at the same level: 

+ +
<section>
+  <h1>Forest elephants</h1>
+  <p>In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  <h1 class="implicit section">Mongolian gerbils</h1>
+  <p>Mongolian gerbils are cute little mammals.
+    ...this section continues...
+</section>
+ +

leading to the following outline: 

+ +
1. Forest elephants
+2. Mongolian gerbils (implicitly defined by the h1 element, which closed the previous section at the same time)
+
+ +

If it is of a higher rank than the previous heading, it closes the previous section and opens a new implicit one at the higher level:

+ +
<body>
+  <h1>Mammals</h1>
+  <h2>Whales</h2>
+  <p>In this section, we discuss the swimming whales.
+    ...this section continues...
+  <section>
+    <h3>Forest elephants</h3>
+    <p>In this section, we discuss the lesser known forest elephants.
+      ...this section continues...
+    <h3>Mongolian gerbils</h3>
+      <p>Hordes of gerbils have spread their range far beyond Mongolia.
+         ...this subsection continues...
+    <h2>Reptiles</h2>
+      <p>Reptiles are animals with cold blood.
+          ...this section continues...
+  </section>
+</body>
+ +

leading to the following outline:

+ +
1. Mammals
+   1.1 Whales (implicitly defined by the h2 element)
+   1.2 Forest elephants (explicitly defined by the section element)
+   1.3 Mongolian gerbils (implicitly defined by the h3 element, which closes the previous section at the same time)
+2. Reptiles (implicitly defined by the h2 element, which closes the previous section at the same time)
+
+ +

This is not the outline that one might expect by quickly glancing at the heading tags. To make your markup human-understandable, it is a good practice to use explicit tags for opening and closing sections, and to match the heading rank to the intended section nesting level. However, this is not required by the HTML5 specification. If you find that browsers are rendering your document outline in unexpected ways, check whether you have sections that are implicitly closed by heading elements.

+ +

An exception to the rule of thumb that heading rank should match the section nesting level is for sections that may be reused in multiple documents. For example, a section might be stored in a content-management system and assembled into documents at run time. In this case, a good practice is to start at {{HTMLElement("h1")}} for the top heading level of the reusable section. The nesting level of the reusable section will be determined by the section hierarchy of the document in which it appears. Explicit section tags are still helpful in this case.

+ +

Sectioning roots

+ +

 A sectioning root is an HTML element that can have its own outline, but the sections and headings inside it does not contribute to the outline of its ancestor. Beside {{HTMLElement("body")}} which is the logical sectioning root of a document, these are often elements that introduce external content to the page: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} and {{HTMLElement("td")}}.

+ +

Example:

+ +
<section>
+  <h1>Forest elephants</h1>
+  <section>
+    <h2>Introduction</h2>
+    <p>In this section, we discuss the lesser known forest elephants</p>
+  </section>
+  <section>
+    <h2>Habitat</h2>
+    <p>Forest elephants do not live in trees but among them. Let's
+       look what scientists are saying in "<cite>The Forest Elephant in Borneo</cite>":</p>
+    <blockquote>
+       <h1>Borneo</h1>
+       <p>The forest element lives in Borneo...</p>
+    </blockquote>
+  </section>
+</section>
+
+ +

This example results in the following outline:

+ +
1. Forest elephants
+   1.1 Introduction
+   1.2 Habitat
+ +

This outline doesn't contain the internal outline of the {{HTMLElement("blockquote")}} element, which, being an external citation, is a sectioning root and isolates its internal outline.

+ +

Sections outside the outline

+ +

 HTML5 introduces two new elements that allow defining sections that don't belong to the main outline of a web document:

+ +
    +
  1. The HTML Aside Section Element ({{HTMLElement("aside")}}) defines a section that, though related to the main element, doesn't belong to the main flow, like an explanation box or an advertisement. It has its own outline, but doesn't belong to the main one.
    2. +
  2. The HTML Navigational Section Element ({{HTMLElement("nav")}}) defines a section that contains navigation links. There can be several of them in a document, for example one with page internal links like a table of contents, and another with site navigational links. These links are not part of the main document flow and outline, and are generally not initially rendered by screen readers and similar assistive technologies.
    3. +
+ +

Headers and Footers

+ +

HTML5 also introduces two new elements that can be used to mark up the header and the footer of a section:

+ +
    +
  1. The HTML Header Element ({{HTMLElement("header")}}) defines a page header — typically containing the logo and name of the site and possibly a horizontal menu — or section header, containing perhaps the section's heading, author name, etc. {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, and {{HTMLElement("nav")}} can have their own {{HTMLElement("header")}}. Despite its name, it is not necessarily positioned at the beginning of the page or section.
    2. +
  2. The HTML Footer Element ({{HTMLElement("footer")}}) defines a page footer — typically containing the copyright and legal notices and sometimes some links — or section footer, containing perhaps the section's publication date, license information, etc. {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, and {{HTMLElement("nav")}} can have their own {{HTMLElement("footer")}}. Despite its name, it is not necessarily positioned at the end of the page or section.
    3. +
+ +

These do not create new sections in the outline, rather, they mark up content inside sections of the page.

+ +

Addresses in sectioning elements

+ +

The author of a document often wants to publish some contact information, such as the author's name and address. HTML4 allowed this via the {{HTMLElement("address")}} element, which has been extended in HTML5.

+ +

A document can be made of different sections from different authors. A section from another author than the one of the main page is defined using the {{HTMLElement("article")}} element. Consequently, the {{HTMLElement("address")}} element is now linked to its nearest {{HTMLElement("body")}} or {{HTMLElement("article")}} ancestor.

+ +

Using HTML5 elements in non-HTML5 browsers

+ +

Sections and headings elements should work in most non-HTML5 browsers. Though unsupported, they don't need a special DOM interface and they only need a specific CSS styling as unknown elements are styled as display:inline by default:

+ +
section, article, aside, footer, header, nav, hgroup {
+  display:block;
+}
+
+ +

Of course the web developer can style them differently, but keep in mind that in a non-HTML5 browser, the default styling is different from what is expected for such elements. Also note that the {{HTMLElement("time")}} element has not been included, because the default styling for it in a non-HTML5 browser is the same as the one in an HTML5-compatible one.

+ +

This method has its limitation though, as some browsers do not allow styling of unsupported elements. That is the case of the Internet Explorer (version 8 and earlier), which need a specific script to allow this:

+ +
<!--[if lt IE 9]>
+  <script>
+    document.createElement("header" );
+    document.createElement("footer" );
+    document.createElement("section");
+    document.createElement("aside"  );
+    document.createElement("nav"    );
+    document.createElement("article");
+    document.createElement("hgroup" );
+    document.createElement("time"   );
+  </script>
+<![endif]-->
+ +

This script means that, in the case of Internet Explorer (8 and earlier), scripting should be enabled in order to display HTML5 sectioning and headings elements properly. If not, they won't be displayed, which may be problematic as these elements are likely defining the structure of the whole page. That's why an explicit {{HTMLElement("noscript")}} element should be added for this case:

+ +
<noscript>
+   <strong>Warning !</strong>
+   Because your browser does not support HTML5, some elements are simulated using JScript.
+   Unfortunately your browser has disabled scripting. Please enable it in order to display this page.
+</noscript>
+ +

This leads to the following code to allow the support of the HTML5 sections and headings elements in non-HTML5 browsers, even for Internet Explorer (8 and older), with a proper fallback for the case where this latter browser is configured not to use scripting:

+ +
<!--[if lt IE 9]>
+  <script>
+    document.createElement("header" );
+    document.createElement("footer" );
+    document.createElement("section");
+    document.createElement("aside"  );
+    document.createElement("nav"    );
+    document.createElement("article");
+    document.createElement("hgroup" );
+    document.createElement("time"   );
+  </script>
+  <noscript>
+     <strong>Warning !</strong>
+     Because your browser does not support HTML5, some elements are created using JavaScript.
+     Unfortunately your browser has disabled scripting. Please enable it in order to display this page.
+  </noscript>
+<![endif]-->
+ +

Підсумок

+ +

Нові семантичні елементи, що були введені стандартом HTML5 забезпечили можливість описувати структуру документу єдиним стандартеризованим способом. They bring a big advantage for people having HTML5 browsers and needing the structure to help them understand the page, for instance people needing the help of some assistive technology. These new semantic elements are simple to use and, with very few burdens, can be made to work also in non-HTML5 browsers. Therefore they should be used without restrictions.

+ +
{{HTML5ArticleTOC()}}
diff --git "a/files/uk/web/guide/html/\320\262\320\270\320\272\320\276\321\200\320\270\321\201\321\202\320\260\320\275\320\275\321\217_html-\321\201\320\265\320\272\321\206\321\226\320\271_\321\202\320\260_\321\201\321\202\321\200\321\203\320\272\321\202\321\203\321\200\320\260_\320\264\320\276\320\272\321\203\320\274\320\265\320\275\321\202\321\203/index.html" "b/files/uk/web/guide/html/\320\262\320\270\320\272\320\276\321\200\320\270\321\201\321\202\320\260\320\275\320\275\321\217_html-\321\201\320\265\320\272\321\206\321\226\320\271_\321\202\320\260_\321\201\321\202\321\200\321\203\320\272\321\202\321\203\321\200\320\260_\320\264\320\276\320\272\321\203\320\274\320\265\320\275\321\202\321\203/index.html" deleted file mode 100644 index 84db2e6a76..0000000000 --- "a/files/uk/web/guide/html/\320\262\320\270\320\272\320\276\321\200\320\270\321\201\321\202\320\260\320\275\320\275\321\217_html-\321\201\320\265\320\272\321\206\321\226\320\271_\321\202\320\260_\321\201\321\202\321\200\321\203\320\272\321\202\321\203\321\200\320\260_\320\264\320\276\320\272\321\203\320\274\320\265\320\275\321\202\321\203/index.html" +++ /dev/null @@ -1,337 +0,0 @@ ---- -title: Використання HTML-секцій та структура документу -slug: Web/Guide/HTML/Використання_HTML-секцій_та_структура_документу -translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines ---- -
-

 В перекладі наводяться терміни схема документу та алгоритм схематизації у відповідності до англійських outline та outline algorithm, оскільки на думку перекладача найбільш точно відповідають змісту, вкладеному в поняття на мові оригінлу.

- -

Також у відповідності до section та subsection використано розділ та підрозділ, так як в змісті даного документу йдеться більше про великі веб-сторінки, порівнювані із книжками.

-
- -
-

Зверніть увагу: На даний момент немає відомих реалізацій алгоритму побудови схеми документа в браузерах чи інших агентах користувачів (assistive technology user agents), проте алгоритм реалізований в  ішому програмному забезпеченні, наприклад, в засобах перевірки стандартів (conformance checkers). Therefore the outline algorithm cannot be relied upon to convey document structure to users. Автори рекомендують використовувати ранг заголовку (h1-h6) для опису структури документу.

-
- -

Специфікація HTML 5 вводить ряд нових елементів, що дозволяють веб-розробникам краще описувати структуру веб-документу використовуючи стандартну семантику. Даний документ описує ці елементи та способи їх використання для створення бажаної схеми документу.

- -

Структура документу в HTML 4

- -

Структура документу, тобто семантична структура, що знаходиться між <body> і </body>, — основа представлення сторінки. В HTML4 для опису структури документу використовується форма запису із розділів та підрозділів. Розділ визначається за допомогою елемента ({{HTMLElement("div")}}), в який включаються елементи заголовків ({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, або {{HTMLElement("h6")}}), які, власне, і слугують заголовками секцій чи підсекцій. Взаєморозміщення даних елементів утворює структуру документу та будує його схему.

- -

Таким чином наступна розмітка:

- -
-
<div class="section" id="forest-elephants" >
-  <h1>Forest elephants</h1>
-  <p>In this section, we discuss the lesser known forest elephants.
-    ...this section continues...
-  <div class="subsection" id="forest-habitat" >
-    <h2>Habitat</h2>
-    <p>Forest elephants do not live in trees but among them.
-     ...this subsection continues...
-  </div>
-</div>
-
-
- -

зводиться до наступної схеми:

- -
1. Forest elephants
-   1.1 Habitat
-
- -

Елемент {{HTMLElement("div")}} не оголошує нову секцію. Для цього достатньо наявності тегу заголовка. Таким чином фрамент:

- -
<h1>Forest elephants</h1>
-  <p>In this section, we discuss the lesser known forest elephants.
-    ...this section continues...
-  <h2>Habitat</h2>
-  <p>Forest elephants do not live in trees but among them.
-    ...this subsection continues...
-  <h2>Diet</h2>
-<h1>Mongolian gerbils</h1>
-
- -

зумовлює наступну схему:

- -
1. Forest elephants
-   1.1 Habitat
-   1.2 Diet
-2. Mongolian gerbils
-
- -

Проблеми, розв'зані за допомогою HTML5

- -

Спосіб визначення структури документу в HTML 4 та обробка її алгоритмом схематизації є досить складнм та зумовлює наступні проблеми:

- -
    -
  1. Використання елементу {{HTMLElement("div")}}  для оголошення секцій (розділів) без використання спеціальних класів (значень атрибуту class) робить неможливим застосування алгоритму схематизації ("Цей {{HTMLElement("div")}} — частина схеми сторінки, що визначає секцію чи підсекцію?" Чи "це звичайний {{HTMLElement("div")}}-елемент, використаний для стилізації?"). Іншими словами, специфікація HTML 4 дуже неточно визначає межі початку та закінчення розділів. Автоматична генерація схеми документу досить важлива, зокрема для реабілітаційних технологій, які адаптують та доносять інформацію до людей (від перекл.: як правило, з обмеженими можливостями) базуючись на структурі документу. HTML 5 усуває труднощі обробки елементу {{HTMLElement("div")}} алгоритмом схематизації, оскільки вводить новий елемент для розділів, {{HTMLElement("section")}}, HTML Section Element.
    2. -
  2. Merging several documents is hard: inclusion of a sub-document in a main document means changing the level of the HTML Headings Element so that the outline is kept. This is solved in HTML5 as the newly introduced sectioning elements ({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} and {{HTMLElement("aside")}}) are always subsections of their nearest ancestor section, regardless of what sections are created by internal headings.
    3. -
  3. In HTML4, every section is part of the document outline. But documents are often not that linear. A document can have special sections containing information that is not part of, though it is related to, the main flow, like an advertisement block or an explanation box. HTML5 introduces the {{HTMLElement("aside")}} element allowing such sections to not be part of the main outline.
    4. -
  4. Again, in HTML4, because every section is part of the document outline, there is no way to have sections containing information related not to the document but to the whole site, like logos, menus, table of contents, or copyright information and legal notices. For that purpose, HTML5 introduces three new elements: {{HTMLElement("nav")}} for collections of links, such as a table of contents, {{HTMLElement("footer")}} and {{HTMLElement("header")}} for site-related information. Note that {{HTMLElement("header")}} and {{HTMLElement("footer")}} are not sectioning content like {{HTMLElement("section")}}, rather, they exist to semantically mark up parts of a section.
    5. -
- -

More generally, HTML5 brings precision to the sectioning and heading features, allowing document outlines to be predictable and used by the browser to improve the user experience.

- -

Алгоритм схематизації HTML 5

- -

Let's consider the algorithms  underlying the way HTML handles sections and outlines.

- -

Defining sections

- -

All content lying inside the {{HTMLElement("body")}} element is part of a section. Sections in HTML5 can be nested. Beside the main section, defined by the {{HTMLElement("body")}} element, section limits are defined either explicitly or implicitly. Explicitly-defined sections are the content within {{HTMLElement("body")}},  {{HTMLElement("section")}},  {{HTMLElement("article")}},  {{HTMLElement("aside")}}, and {{HTMLElement("nav")}} tags. 

- -
Each section can have its own heading hierarchy. Therefore, even a nested section can have an {{HTMLElement("h1")}}. See {{anch("Defining headings")}}
- -

Let's look at an example — here we have a document with a top level section and a footer defined. Inside the top level section we have three subsections, defined by two {{htmlelement("section")}} elements and an {{htmlelement("aside")}} element:

- -
<section>
-
-  <h1>Forest elephants</h1>
-
-  <section>
-    <h1>Introduction</h1>
-    <p>In this section, we discuss the lesser known forest elephants.</p>
-  </section>
-
-  <section>
-    <h1>Habitat</h1>
-    <p>Forest elephants do not live in trees but among them.</p>
-  </section>
-
-  <aside>
-    <p>advertising block</p>
-  </aside>
-
-</section>
-
-<footer>
-  <p>(c) 2010 The Example company</p>
-</footer>
- -

This leads to the following outline:

- -
1. Forest elephants
-   1.1 Introduction
-   1.2 Habitat
-
- -

Defining headings

- -

While the HTML Sectioning elements define the structure of the document, an outline also needs headings to be useful. The basic rule is simple: the first HTML heading element (one of {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}) defines the heading of the current section.

- -

The heading elements have a rank given by the number in the element name, where {{HTMLElement("h1")}} has the highest rank, and {{HTMLElement("h6")}} has the lowest rank. Relative ranking matters only within a section; the structure of the sections determines the outline, not the heading rank of the sections. For example, consider this code:

- -
<section>
-  <h1>Forest elephants</h1>
-  <p>In this section, we discuss the lesser known forest elephants.
-    ...this section continues...
-  <section>
-    <h2>Habitat</h2>
-    <p>Forest elephants do not live in trees but among them.
-        ...this subsection continues...
-  </section>
-</section>
-<section>
-  <h3>Mongolian gerbils</h3>
-  <p>In this section, we discuss the famous mongolian gerbils.
-     ...this section continues...
-</section>
- -

This creates the following outline:

- -
1. Forest elephants
-   1.1 Habitat
-2. Mongolian gerbils
- -

Note that the rank of the heading element (in the example {{HTMLElement("h1")}} for the first top-level section, {{HTMLElement("h2")}} for the subsection and {{HTMLElement("h3")}} for the second top-level section) is not important. (Any rank can be used as the heading of an explicitly-defined section, although this practice is not recommended.)

- -

Implicit sectioning

- -

Because the HTML5 Sectioning Elements aren't mandatory to define an outline, to keep compatibility with the existing web dominated by HTML4, there is a way to define sections without them. This is called implicit sectioning.

- -

The heading elements ({{HTMLElement("h1")}} to {{HTMLElement("h6")}}) define a new, implicit, section when they aren't the first heading of their parent, explicit, sections. The way this implicit section is positioned in the outline is defined by its relative rank with the previous heading in their parent section. If it is of a lower rank than the previous heading, it opens an implicit sub-section of the section. This code:

- -
<section>
-  <h1>Forest elephants</h1>
-  <p>In this section, we discuss the lesser known forest elephants.
-    ...this section continues...
-  <h3 class="implicit subsection">Habitat</h3>
-  <p>Forest elephants do not live in trees but among them.
-    ...this subsection continues...
-</section>
- -

leading to the following outline:

- -
1. Forest elephants
-   1.1 Habitat (implicitly defined by the h3 element)
-
- -

If it is of the same rank as the previous heading, it closes the previous section (which may have been explicit!) and opens a new implicit one at the same level: 

- -
<section>
-  <h1>Forest elephants</h1>
-  <p>In this section, we discuss the lesser known forest elephants.
-    ...this section continues...
-  <h1 class="implicit section">Mongolian gerbils</h1>
-  <p>Mongolian gerbils are cute little mammals.
-    ...this section continues...
-</section>
- -

leading to the following outline: 

- -
1. Forest elephants
-2. Mongolian gerbils (implicitly defined by the h1 element, which closed the previous section at the same time)
-
- -

If it is of a higher rank than the previous heading, it closes the previous section and opens a new implicit one at the higher level:

- -
<body>
-  <h1>Mammals</h1>
-  <h2>Whales</h2>
-  <p>In this section, we discuss the swimming whales.
-    ...this section continues...
-  <section>
-    <h3>Forest elephants</h3>
-    <p>In this section, we discuss the lesser known forest elephants.
-      ...this section continues...
-    <h3>Mongolian gerbils</h3>
-      <p>Hordes of gerbils have spread their range far beyond Mongolia.
-         ...this subsection continues...
-    <h2>Reptiles</h2>
-      <p>Reptiles are animals with cold blood.
-          ...this section continues...
-  </section>
-</body>
- -

leading to the following outline:

- -
1. Mammals
-   1.1 Whales (implicitly defined by the h2 element)
-   1.2 Forest elephants (explicitly defined by the section element)
-   1.3 Mongolian gerbils (implicitly defined by the h3 element, which closes the previous section at the same time)
-2. Reptiles (implicitly defined by the h2 element, which closes the previous section at the same time)
-
- -

This is not the outline that one might expect by quickly glancing at the heading tags. To make your markup human-understandable, it is a good practice to use explicit tags for opening and closing sections, and to match the heading rank to the intended section nesting level. However, this is not required by the HTML5 specification. If you find that browsers are rendering your document outline in unexpected ways, check whether you have sections that are implicitly closed by heading elements.

- -

An exception to the rule of thumb that heading rank should match the section nesting level is for sections that may be reused in multiple documents. For example, a section might be stored in a content-management system and assembled into documents at run time. In this case, a good practice is to start at {{HTMLElement("h1")}} for the top heading level of the reusable section. The nesting level of the reusable section will be determined by the section hierarchy of the document in which it appears. Explicit section tags are still helpful in this case.

- -

Sectioning roots

- -

 A sectioning root is an HTML element that can have its own outline, but the sections and headings inside it does not contribute to the outline of its ancestor. Beside {{HTMLElement("body")}} which is the logical sectioning root of a document, these are often elements that introduce external content to the page: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} and {{HTMLElement("td")}}.

- -

Example:

- -
<section>
-  <h1>Forest elephants</h1>
-  <section>
-    <h2>Introduction</h2>
-    <p>In this section, we discuss the lesser known forest elephants</p>
-  </section>
-  <section>
-    <h2>Habitat</h2>
-    <p>Forest elephants do not live in trees but among them. Let's
-       look what scientists are saying in "<cite>The Forest Elephant in Borneo</cite>":</p>
-    <blockquote>
-       <h1>Borneo</h1>
-       <p>The forest element lives in Borneo...</p>
-    </blockquote>
-  </section>
-</section>
-
- -

This example results in the following outline:

- -
1. Forest elephants
-   1.1 Introduction
-   1.2 Habitat
- -

This outline doesn't contain the internal outline of the {{HTMLElement("blockquote")}} element, which, being an external citation, is a sectioning root and isolates its internal outline.

- -

Sections outside the outline

- -

 HTML5 introduces two new elements that allow defining sections that don't belong to the main outline of a web document:

- -
    -
  1. The HTML Aside Section Element ({{HTMLElement("aside")}}) defines a section that, though related to the main element, doesn't belong to the main flow, like an explanation box or an advertisement. It has its own outline, but doesn't belong to the main one.
    2. -
  2. The HTML Navigational Section Element ({{HTMLElement("nav")}}) defines a section that contains navigation links. There can be several of them in a document, for example one with page internal links like a table of contents, and another with site navigational links. These links are not part of the main document flow and outline, and are generally not initially rendered by screen readers and similar assistive technologies.
    3. -
- -

Headers and Footers

- -

HTML5 also introduces two new elements that can be used to mark up the header and the footer of a section:

- -
    -
  1. The HTML Header Element ({{HTMLElement("header")}}) defines a page header — typically containing the logo and name of the site and possibly a horizontal menu — or section header, containing perhaps the section's heading, author name, etc. {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, and {{HTMLElement("nav")}} can have their own {{HTMLElement("header")}}. Despite its name, it is not necessarily positioned at the beginning of the page or section.
    2. -
  2. The HTML Footer Element ({{HTMLElement("footer")}}) defines a page footer — typically containing the copyright and legal notices and sometimes some links — or section footer, containing perhaps the section's publication date, license information, etc. {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, and {{HTMLElement("nav")}} can have their own {{HTMLElement("footer")}}. Despite its name, it is not necessarily positioned at the end of the page or section.
    3. -
- -

These do not create new sections in the outline, rather, they mark up content inside sections of the page.

- -

Addresses in sectioning elements

- -

The author of a document often wants to publish some contact information, such as the author's name and address. HTML4 allowed this via the {{HTMLElement("address")}} element, which has been extended in HTML5.

- -

A document can be made of different sections from different authors. A section from another author than the one of the main page is defined using the {{HTMLElement("article")}} element. Consequently, the {{HTMLElement("address")}} element is now linked to its nearest {{HTMLElement("body")}} or {{HTMLElement("article")}} ancestor.

- -

Using HTML5 elements in non-HTML5 browsers

- -

Sections and headings elements should work in most non-HTML5 browsers. Though unsupported, they don't need a special DOM interface and they only need a specific CSS styling as unknown elements are styled as display:inline by default:

- -
section, article, aside, footer, header, nav, hgroup {
-  display:block;
-}
-
- -

Of course the web developer can style them differently, but keep in mind that in a non-HTML5 browser, the default styling is different from what is expected for such elements. Also note that the {{HTMLElement("time")}} element has not been included, because the default styling for it in a non-HTML5 browser is the same as the one in an HTML5-compatible one.

- -

This method has its limitation though, as some browsers do not allow styling of unsupported elements. That is the case of the Internet Explorer (version 8 and earlier), which need a specific script to allow this:

- -
<!--[if lt IE 9]>
-  <script>
-    document.createElement("header" );
-    document.createElement("footer" );
-    document.createElement("section");
-    document.createElement("aside"  );
-    document.createElement("nav"    );
-    document.createElement("article");
-    document.createElement("hgroup" );
-    document.createElement("time"   );
-  </script>
-<![endif]-->
- -

This script means that, in the case of Internet Explorer (8 and earlier), scripting should be enabled in order to display HTML5 sectioning and headings elements properly. If not, they won't be displayed, which may be problematic as these elements are likely defining the structure of the whole page. That's why an explicit {{HTMLElement("noscript")}} element should be added for this case:

- -
<noscript>
-   <strong>Warning !</strong>
-   Because your browser does not support HTML5, some elements are simulated using JScript.
-   Unfortunately your browser has disabled scripting. Please enable it in order to display this page.
-</noscript>
- -

This leads to the following code to allow the support of the HTML5 sections and headings elements in non-HTML5 browsers, even for Internet Explorer (8 and older), with a proper fallback for the case where this latter browser is configured not to use scripting:

- -
<!--[if lt IE 9]>
-  <script>
-    document.createElement("header" );
-    document.createElement("footer" );
-    document.createElement("section");
-    document.createElement("aside"  );
-    document.createElement("nav"    );
-    document.createElement("article");
-    document.createElement("hgroup" );
-    document.createElement("time"   );
-  </script>
-  <noscript>
-     <strong>Warning !</strong>
-     Because your browser does not support HTML5, some elements are created using JavaScript.
-     Unfortunately your browser has disabled scripting. Please enable it in order to display this page.
-  </noscript>
-<![endif]-->
- -

Підсумок

- -

Нові семантичні елементи, що були введені стандартом HTML5 забезпечили можливість описувати структуру документу єдиним стандартеризованим способом. They bring a big advantage for people having HTML5 browsers and needing the structure to help them understand the page, for instance people needing the help of some assistive technology. These new semantic elements are simple to use and, with very few burdens, can be made to work also in non-HTML5 browsers. Therefore they should be used without restrictions.

- -
{{HTML5ArticleTOC()}}
diff --git "a/files/uk/web/guide/\320\263\321\200\320\260\321\204\321\226\320\272\320\260/index.html" "b/files/uk/web/guide/\320\263\321\200\320\260\321\204\321\226\320\272\320\260/index.html" deleted file mode 100644 index 57af0fdbc3..0000000000 --- "a/files/uk/web/guide/\320\263\321\200\320\260\321\204\321\226\320\272\320\260/index.html" +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Графіка для Web -slug: Web/Guide/Графіка -tags: - - 2D - - 3D - - Canvas - - HTML5 - - SVG - - WebGL - - WebRTC - - Веб - - Графіка -translation_of: Web/Guide/Graphics ---- -

Сучасним сайтам і веб-додаткам потрібне відображення графіки. Статичні зображення легко зобразити використовуючи елемент {{HTMLElement("img")}}, чи налаштувати фон HTML елементів використовуючи властивість {{cssxref("background-image")}}. Ви також можете конструювати графіку на льоту, або модифікувати її після. В статтях далі сказано як це можна зробити.

- -
-
-

2D Графіка

- -
-
Canvas
-
Елемент {{HTMLElement("canvas")}} надає зручні API для малювання 2D графіки використовуючи JavaScript.
-
SVG
-
Scalable Vector Graphics (SVG) дозволяє використовувати лінії, криві, та інші геометричні фігури для рендерингу графіки. З векторів, ви можете створювати зображення які не втрачають якості при маштабуванні.
-
- -

Переглянути все...

-
- -
-

3D Графіка

- -
-
WebGL
-
Посібник для початку роботи з WebGL, API для роботи з 3D графікою в веб. Ця технологія дає вам можливість використовувати стандартний OpenGL ES в Web контенті.
-
- -

Відео

- -
-
Використання HTML5 аудіо і відео
-
Вбудовування відео і/або аудіо в веб-сторінки і керування відтворенням.
-
WebRTC
-
RTC в WebRTC означає Real-Time Communications (комунікація в реальному часі), технологія яка дозволяє передавати потокове аудіо/відео і дані між кліентами браузера (пірами).
-
-
-
diff --git a/files/uk/web/houdini/index.html b/files/uk/web/houdini/index.html new file mode 100644 index 0000000000..92be6ef3cc --- /dev/null +++ b/files/uk/web/houdini/index.html @@ -0,0 +1,87 @@ +--- +title: CSS Гудіні +slug: Web/Гудіні +translation_of: Web/Houdini +--- +

Гудіні - це набір низькорівневих API, які надають доступ до СSS движка, даючи розробникам змогу розширити СSS підключаючись до процесу створення макету та застосування стилів в процесі роботи браузерного движка. Гудіні - набір API, які дають розробникам прямий доступ  CSS Object Model (CSSOM), дозволяючи розробникам писати код який браузер може розібрати як CSS, таким чином створюючи нові СSS властивості не чекаючи щоб вони були реалізовані в браузерах.

+ +

Переваги Гудіні

+ +

Гудіні дозволяє швидше змінювати стилі  ніж при використанні JavaScript .style. Браузер розбирає CSSOM, включаючи макет, процеси відмальовування і компонування, перед застосування будьяких змін знайдених в скрипті. Крім того всі ці процеси повторюються для застосування змін з JavaScript. Гудіні не очікує на завершення першого циклу рендерингу, він включений в цей цикл, створюючи відмальовані зрозумілі стилі. Гудіні надає Гудіні дозволяє швидше змінювати стилі  ніж при використанні JavaScript .style. Браузер розбирає CSSOM, включаючи макет, процеси відмальовування і компонування, перед застосування будьяких змін знайдених в скрипті. Крім того всі ці процеси повторюються для застосування змін з JavaScript. Гудіні не очікує на завершення першого циклу рендерингу, він включений в цей цикл, створюючи відмальовані зрозумілі стилі. Гудіні надає об'єктно-орієнтований API для роботи з  CSS значеннями в JavaScript.

+ +

Гудіні CSS Типізована OM є a CSS Об'єктвною моделю з типами і методами,  показуючи значення як JavaScript об'єкт, це робить Гудіні бульш інтуїтивним ніж  HTMLElement.style маніпуляції. Кожний елемент і таблиця стилів мають карту стилів, до якої можна доступитись через його значення  StylePropertyMap.

+ +

Особливістю СSS Гудіні є  Worklet. З ворклетами, ви можете створювати модульний CSS, це потребує однієї лінійки JavaScript для імпорту налаштовуваних компоненів: без пре-процесорів, пост-процесорів або JavaScript фреймворків.

+ +
<script>
+  CSS.paintWorklet.addModule('csscomponent.js');
+</script>
+
+ +

Цей доданий модуль містить registerPaint() фунцкію, яка реєструє  повністю налаштовувані ворклетів.

+ +

 Функція CSS paint() включає в себе ім'я ворклета а також можливі додаткові параметри. Ворклет також має доступ до звичайних значеннь елемента, їх не потрібно передавати як параметри функції.

+ +
li {
+	background-image: paint(myComponent, stroke, 10px);
+    --hilights: blue;
+    --lowlights: green;
+}
+ +
+

Примітка: З великою силою приходить велика відповідальність! З Гудіні ви можете придумати свій власний макет, сітку, або реалізацію регіонів, але робити це не завжди найкраща ідея. Робоча група CSS робить багато роботи щоб упевнетись, що всі функції є продуктивними, розглядає всі можливі країні випадки і забезпечує безпеку, конфіденційність і доступність.  Коли ви почнете з СSS Гудіні, упевніться що ви дотримуєтесь цих стандартів і починайте з малого перш ніж перейти до більш амбітних проектів.

+
+ +

Гудіні API

+ +

Ніжче ви можете знайти посилання на основну довідку про API, які знаходяться під егідою Гудіні, а також посилання на туторіали.

+ + + +
+
CSS Парсер API
+
API використовуючи  CSS парсер, для парсингу CSS-подібних мов в слабо типізовані.
+
+ Для цього АPI ще не написано туторіалу чи довідки.
+
API CSS властивостей і значеннь
+
Визначає API для нових CSS властивостей. Властивості зареєстровані з цим API забезпечені синтаксисом синтаксичного аналізу, який визначає тип, поведінкою успадкування, і початкове значення.
+
+ CSS Properties and Values API reference
+ CSS Properties and Values API guide
+
+
CSS Typed OM
+
Перетворює CSSOM в значно типізований JavaScript перетворення може значно вплинути на продуктивність. CSS типізована ОМ виставляє CSS значення як JavaScript об'єкти та дозволяє ефективно керувати ним.
+
+ CSS Typed OM reference
+ CSS Typed OM guide
+
CSS Layout API 
+
+

Призначений для поліпшення розтяжності CSS, це API дозволяє розробникам створювати свої власні алгоритми компонування, такі як макет або лінії прив'язки. Це ще не доступно спочатку.

+ +

Для цього АPI ще не написано туторіалу чи довідки.

+
+
CSS Painting API
+
+

Призначений для поліпшення розтяжності CSS — дозволяє розробникам писати  JavaScript функції що доволяють рисувати прямо в задній фон, границі, або зміст елементу за допомогою CSS функції paint() .
+
+ CSS Painting API reference
+ CSS Painting API guide

+
+
Worklets 
+
+

API для запуску скриптів на різних етапах потоку рендерингу незалежно від головного JavaScript середовища. Worklets концептуально схожі на Web Workers, і застосовуються для розширення движка рендерину.

+ +


+ Worklets reference

+
+
+ +

Інші теми

+ +

Схожі теми, які можуть юути цікаві, так як вони можуть бути використані в поєднанні з API Гудіні цікавими способами.

+ +
+
Composite Scrolling and Animation 
+
diff --git a/files/uk/web/html/element/header/index.html b/files/uk/web/html/element/header/index.html new file mode 100644 index 0000000000..9ed3c75dfa --- /dev/null +++ b/files/uk/web/html/element/header/index.html @@ -0,0 +1,145 @@ +--- +title:
+slug: Web/HTML/Елемент/Заголовок +tags: + - HTML + - HTML елементи +translation_of: Web/HTML/Element/header +--- +
{{HTMLRef}}
+ +

HTML <header> елемент представляє групу вступних або навігаційних елементів. Він може містити елементи заголовків, а також інші елементи, такі як логотип, форма пошуку та інше.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Content categoriesFlow content, palpable content.
Permitted contentFlow content, but with no <header> or {{HTMLElement("footer")}} descendant.
Tag omission{{no_tag_omission}}
Permitted parentsAny element that accepts flow content. Note that a <header> element must not be a descendant of an {{HTMLElement("address")}}, {{HTMLElement("footer")}} or another {{HTMLElement("header")}} element.
Permitted ARIA roles{{ARIARole("group")}}, {{ARIARole("presentation")}}
DOM interface{{domxref("HTMLElement")}}
+ +

Зауваження до використання

+ +

The <header> element is not sectioning content and therefore does not introduce a new section in the outline. That said, a header element is intended to usually contain the surrounding section's heading (an h1–h6 element), but this is not required.

+ +

Атрибути

+ +

This element only includes the global attributes.

+ +

Приклад

+ +
<header>
+  <h1>Main Page Title</h1>
+  <img src="mdn-logo-sm.png" alt="MDN logo">
+</header>
+
+ +

Main Page Title

+ +

MDN

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'semantics.html#the-header-element', '<header>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'sections.html#the-header-element', '<header>')}}{{Spec2('HTML5 W3C')}} 
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support5{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}9.011.104.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support2.2{{CompatVersionUnknown}}{{CompatGeckoMobile("2.0")}}9.011.05.0
+
+ +

See also

+ + diff --git a/files/uk/web/html/element/html/index.html b/files/uk/web/html/element/html/index.html new file mode 100644 index 0000000000..22489d772f --- /dev/null +++ b/files/uk/web/html/element/html/index.html @@ -0,0 +1,169 @@ +--- +title: +slug: Web/HTML/Елемент/html +tags: + - Корінь + - Структура +translation_of: Web/HTML/Element/html +--- +

{{HTMLRef}}

+ +

HTML-елемент <html> являє собою корінь HTML-документа. Решта елементів мають бути його нащадками.

+ +

Оскільки <html> є першим (за винятком коментарів) елементом документа, він зветься кореневим елементом. І хоча цей тег може бути відсутнім для {{glossary("HTML")}}, в {{glossary("XHTML")}} він має бути відкритий і закритий явно.

+ + + + + + + + + + + + + + + + + + + + + + + + +
Категорії вмістуВідсутні.
Дозволений вмістОдин елемент {{HTMLElement("head")}} та один (наступний за ним) елемент {{HTMLElement("body")}}.
Обов'язковість тегів +

Початковий тег можна опустити, якщо перша річ всередині елементу <html> — не коментар. Кінцевий тег можна опустити тоді, коли одразу після елементу <html> немає коментаря, і він містить елемент {{HTMLElement("body")}}, що має або вміст (непустий), або початковий тег.

+
Дозволені пращуриЯк кореневий елемент документа, або як піддокумент складного документа там, де це дозволено.
Інтерфейс DOM{{domxref("HTMLHtmlElement")}}
+ +

Атрибути

+ +

Цей елемент має глобальні атрибути.

+ +
+
{{htmlattrdef("manifest")}} {{obsolete_inline}}
+
Вказує URI manifest-файлу, що позначає ресурси, які підлягають локальному кешуванню. Детальніше див. Using the application cache.
+
{{htmlattrdef("version")}} {{obsolete_inline}}
+
Вказує версію HTML {{glossary("DTD", "Document Type Definition")}}  цього документа. Цей атрибут визнано застарілим, вживайте !DOCTYPE замість нього.
+
{{htmlattrdef("xmlns")}} 
+
Вказує простір імен (XML) документа. Типове значення "http://www.w3.org/1999/xhtml". Для XHTML то обов'язковий атрибут, а для HTML може бути відсутнім.
+
+ +

Приклад

+ +
+

Використаний в прикладі  {{glossary("DOCTYPE")}} вказує на {{glossary("HTML5")}}.

+
+ +
<!DOCTYPE html>
+<html>
+  <head>...</head>
+  <body>...</body>
+</html>
+
+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'semantics.html#the-html-element', '<html>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'semantics.html#the-html-element', '<html>')}}{{Spec2('HTML5 W3C')}}Додано підтримку атрибута manifest (згодом визнаний застарілим).
+ Атрибут version визнано застарілим.
{{SpecName('HTML4.01', 'struct/global.html#h-7.3', '<html>')}}{{Spec2('HTML4.01')}}Атрибут version визнано застарілим.
+ +

Підтримка браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
manifest{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
manifest{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Див. також

+ + diff --git a/files/uk/web/html/element/iframe/index.html b/files/uk/web/html/element/iframe/index.html new file mode 100644 index 0000000000..fc5b06a037 --- /dev/null +++ b/files/uk/web/html/element/iframe/index.html @@ -0,0 +1,260 @@ +--- +title: '