From 95aca4b4d8fa62815d4bd412fff1a364f842814a Mon Sep 17 00:00:00 2001 From: Ryan Johnson Date: Thu, 29 Apr 2021 16:16:42 -0700 Subject: remove retired locales (#699) --- files/tr/web/accessibility/index.html | 77 - .../accessibility/understanding_wcag/index.html | 59 - .../understanding_wcag/keyboard/index.html | 87 - files/tr/web/api/beforeunloadevent/index.html | 90 - files/tr/web/api/canvas_api/index.html | 174 -- files/tr/web/api/comment/comment/index.html | 56 - files/tr/web/api/comment/index.html | 75 - files/tr/web/api/css_object_model/index.html | 204 -- .../managing_screen_orientation/index.html | 179 -- files/tr/web/api/document_object_model/index.html | 476 ---- .../document_object_model/introduction/index.html | 245 -- files/tr/web/api/event/index.html | 202 -- .../api/eventtarget/addeventlistener/index.html | 774 ------ files/tr/web/api/eventtarget/index.html | 169 -- .../api/eventtarget/removeeventlistener/index.html | 274 -- files/tr/web/api/filereader/index.html | 162 -- files/tr/web/api/filesystem/index.html | 116 - files/tr/web/api/htmlelement/click/index.html | 45 - files/tr/web/api/htmlelement/index.html | 183 -- files/tr/web/api/htmlimageelement/image/index.html | 119 - files/tr/web/api/htmlimageelement/index.html | 417 --- files/tr/web/api/idbindex/getall/index.html | 164 -- files/tr/web/api/idbindex/index.html | 337 --- files/tr/web/api/index.html | 15 - files/tr/web/api/mutationobserver/index.html | 250 -- files/tr/web/api/node/index.html | 383 --- files/tr/web/api/storage/index.html | 164 -- files/tr/web/api/webgl_api/index.html | 294 -- files/tr/web/api/websocket/binarytype/index.html | 55 - files/tr/web/api/websocket/close/index.html | 66 - files/tr/web/api/websocket/extensions/index.html | 46 - files/tr/web/api/websocket/index.html | 138 - files/tr/web/api/websocket/onclose/index.html | 42 - files/tr/web/api/websocket/onerror/index.html | 48 - files/tr/web/api/websocket/onmessage/index.html | 48 - files/tr/web/api/websocket/onopen/index.html | 48 - files/tr/web/api/websocket/protocol/index.html | 46 - files/tr/web/api/websocket/readystate/index.html | 76 - files/tr/web/api/websocket/url/index.html | 48 - files/tr/web/api/websocket/websocket/index.html | 56 - files/tr/web/api/window/index.html | 462 ---- files/tr/web/api/window/opener/index.html | 40 - files/tr/web/css/@import/index.html | 125 - files/tr/web/css/_colon_active/index.html | 96 - files/tr/web/css/_colon_first-of-type/index.html | 156 -- files/tr/web/css/_colon_focus/index.html | 117 - files/tr/web/css/_colon_last-child/index.html | 147 - files/tr/web/css/_colon_link/index.html | 106 - files/tr/web/css/_colon_not/index.html | 145 - files/tr/web/css/_colon_root/index.html | 60 - .../web/css/_doublecolon_first-letter/index.html | 160 -- files/tr/web/css/background-color/index.html | 154 -- files/tr/web/css/background/index.html | 153 -- files/tr/web/css/class_selectors/index.html | 125 - .../box-shadow_generator/index.html | 2882 -------------------- .../introduction_to_the_css_box_model/index.html | 68 - .../using_css_counters/index.html | 103 - files/tr/web/css/css_selectors/index.html | 233 -- files/tr/web/css/display/index.html | 446 --- files/tr/web/css/font-size/index.html | 239 -- files/tr/web/css/index.html | 123 - files/tr/web/css/margin/index.html | 225 -- files/tr/web/css/reference/index.html | 73 - files/tr/web/css/right/index.html | 157 -- files/tr/web/css/shape-outside/index.html | 208 -- files/tr/web/css/type_selectors/index.html | 126 - .../web/demos_of_open_web_technologies/index.html | 147 - files/tr/web/guide/ajax/index.html | 121 - files/tr/web/guide/graphics/index.html | 54 - files/tr/web/guide/html/html5/index.html | 255 -- files/tr/web/guide/index.html | 29 - files/tr/web/html/element/aside/index.html | 155 -- files/tr/web/html/element/head/index.html | 139 - files/tr/web/html/element/hgroup/index.html | 136 - files/tr/web/html/element/index.html | 242 -- files/tr/web/html/element/li/index.html | 206 -- files/tr/web/html/element/link/index.html | 403 --- files/tr/web/html/index.html | 109 - files/tr/web/http/content_negotiation/index.html | 141 - files/tr/web/http/cookies/index.html | 251 -- .../http/cors/errors/corsrequestnothttp/index.html | 31 - files/tr/web/http/cors/errors/index.html | 76 - files/tr/web/http/cors/index.html | 556 ---- .../tr/web/http/headers/accept-language/index.html | 97 - files/tr/web/http/headers/accept/index.html | 99 - files/tr/web/http/headers/cookie/index.html | 71 - files/tr/web/http/headers/index.html | 370 --- .../web/http/headers/x-xss-protection/index.html | 77 - files/tr/web/http/index.html | 85 - files/tr/web/http/methods/index.html | 73 - files/tr/web/http/session/index.html | 174 -- files/tr/web/http/status/200/index.html | 53 - files/tr/web/http/status/205/index.html | 39 - files/tr/web/http/status/301/index.html | 55 - files/tr/web/http/status/302/index.html | 47 - files/tr/web/http/status/400/index.html | 37 - files/tr/web/http/status/401/index.html | 54 - files/tr/web/http/status/402/index.html | 49 - files/tr/web/http/status/403/index.html | 52 - files/tr/web/http/status/404/index.html | 61 - files/tr/web/http/status/405/index.html | 42 - files/tr/web/http/status/418/index.html | 45 - files/tr/web/http/status/500/index.html | 39 - files/tr/web/http/status/index.html | 193 -- files/tr/web/index.html | 94 - .../a_re-introduction_to_javascript/index.html | 931 ------- files/tr/web/javascript/data_structures/index.html | 299 -- .../control_flow_and_error_handling/index.html | 420 --- .../guide/details_of_the_object_model/index.html | 758 ----- files/tr/web/javascript/guide/functions/index.html | 663 ----- .../javascript/guide/grammar_and_types/index.html | 640 ----- files/tr/web/javascript/guide/index.html | 122 - .../web/javascript/guide/introduction/index.html | 134 - .../guide/loops_and_iteration/index.html | 331 --- .../guide/working_with_objects/index.html | 505 ---- files/tr/web/javascript/index.html | 106 - .../inheritance_and_the_prototype_chain/index.html | 561 ---- .../web/javascript/language_resources/index.html | 157 -- .../tr/web/javascript/memory_management/index.html | 199 -- .../tr/web/javascript/reference/classes/index.html | 276 -- .../javascript/reference/classes/static/index.html | 127 - .../tr/web/javascript/reference/errors/index.html | 31 - .../missing_semicolon_before_statement/index.html | 71 - .../reference/functions/arrow_functions/index.html | 359 --- .../web/javascript/reference/functions/index.html | 596 ---- .../global_objects/array/concat/index.html | 167 -- .../global_objects/array/entries/index.html | 129 - .../global_objects/array/every/index.html | 189 -- .../global_objects/array/filter/index.html | 243 -- .../reference/global_objects/array/find/index.html | 205 -- .../global_objects/array/findindex/index.html | 177 -- .../global_objects/array/foreach/index.html | 308 --- .../reference/global_objects/array/from/index.html | 258 -- .../global_objects/array/includes/index.html | 176 -- .../reference/global_objects/array/index.html | 371 --- .../global_objects/array/indexof/index.html | 246 -- .../global_objects/array/isarray/index.html | 154 -- .../reference/global_objects/array/join/index.html | 107 - .../global_objects/array/length/index.html | 145 - .../reference/global_objects/array/map/index.html | 307 --- .../reference/global_objects/array/of/index.html | 98 - .../reference/global_objects/array/pop/index.html | 117 - .../reference/global_objects/array/push/index.html | 152 -- .../global_objects/array/reverse/index.html | 107 - .../global_objects/array/shift/index.html | 112 - .../reference/global_objects/array/sort/index.html | 251 -- .../global_objects/array/splice/index.html | 149 - .../global_objects/array/unshift/index.html | 114 - .../global_objects/array/values/index.html | 86 - .../global_objects/arraybuffer/index.html | 222 -- .../reference/global_objects/boolean/index.html | 159 -- .../global_objects/boolean/tosource/index.html | 51 - .../reference/global_objects/eval/index.html | 318 --- .../global_objects/function/apply/index.html | 262 -- .../reference/global_objects/function/index.html | 189 -- .../javascript/reference/global_objects/index.html | 178 -- .../reference/global_objects/isfinite/index.html | 138 - .../reference/global_objects/isnan/index.html | 170 -- .../reference/global_objects/json/index.html | 205 -- .../global_objects/json/stringify/index.html | 313 --- .../reference/global_objects/map/index.html | 207 -- .../reference/global_objects/math/index.html | 191 -- .../reference/global_objects/math/sign/index.html | 110 - .../global_objects/object/assign/index.html | 311 --- .../object/defineproperty/index.html | 391 --- .../global_objects/object/entries/index.html | 141 - .../global_objects/object/freeze/index.html | 234 -- .../object/getprototypeof/index.html | 134 - .../reference/global_objects/object/index.html | 213 -- .../global_objects/object/tostring/index.html | 161 -- .../global_objects/object/values/index.html | 96 - .../global_objects/promise/all/index.html | 234 -- .../global_objects/promise/catch/index.html | 201 -- .../reference/global_objects/promise/index.html | 317 --- .../reference/global_objects/regexp/index.html | 606 ---- .../reference/global_objects/string/index.html | 316 --- .../global_objects/string/substring/index.html | 149 - files/tr/web/javascript/reference/index.html | 48 - .../reference/lexical_grammar/index.html | 374 --- .../reference/operators/function_star_/index.html | 85 - .../web/javascript/reference/operators/index.html | 278 -- .../reference/operators/instanceof/index.html | 208 -- .../reference/operators/super/index.html | 166 -- .../javascript/reference/operators/this/index.html | 348 --- .../reference/operators/typeof/index.html | 260 -- .../reference/statements/block/index.html | 179 -- .../reference/statements/break/index.html | 117 - .../reference/statements/const/index.html | 149 - .../reference/statements/export/index.html | 186 -- .../web/javascript/reference/statements/index.html | 141 - .../reference/statements/return/index.html | 195 -- .../reference/statements/throw/index.html | 201 -- .../reference/statements/while/index.html | 79 - .../javascript/reference/strict_mode/index.html | 363 --- files/tr/web/manifest/index.html | 94 - files/tr/web/mathml/index.html | 71 - files/tr/web/progressive_web_apps/index.html | 80 - .../offline_service_workers/index.html | 201 -- files/tr/web/reference/index.html | 28 - files/tr/web/security/index.html | 17 - files/tr/web/security/mixed_content/index.html | 45 - .../security/transport_layer_security/index.html | 116 - .../security/weak_signature_algorithm/index.html | 19 - files/tr/web/tutorials/index.html | 155 -- 204 files changed, 40467 deletions(-) delete mode 100644 files/tr/web/accessibility/index.html delete mode 100644 files/tr/web/accessibility/understanding_wcag/index.html delete mode 100644 files/tr/web/accessibility/understanding_wcag/keyboard/index.html delete mode 100644 files/tr/web/api/beforeunloadevent/index.html delete mode 100644 files/tr/web/api/canvas_api/index.html delete mode 100644 files/tr/web/api/comment/comment/index.html delete mode 100644 files/tr/web/api/comment/index.html delete mode 100644 files/tr/web/api/css_object_model/index.html delete mode 100644 files/tr/web/api/css_object_model/managing_screen_orientation/index.html delete mode 100644 files/tr/web/api/document_object_model/index.html delete mode 100644 files/tr/web/api/document_object_model/introduction/index.html delete mode 100644 files/tr/web/api/event/index.html delete mode 100644 files/tr/web/api/eventtarget/addeventlistener/index.html delete mode 100644 files/tr/web/api/eventtarget/index.html delete mode 100644 files/tr/web/api/eventtarget/removeeventlistener/index.html delete mode 100644 files/tr/web/api/filereader/index.html delete mode 100644 files/tr/web/api/filesystem/index.html delete mode 100644 files/tr/web/api/htmlelement/click/index.html delete mode 100644 files/tr/web/api/htmlelement/index.html delete mode 100644 files/tr/web/api/htmlimageelement/image/index.html delete mode 100644 files/tr/web/api/htmlimageelement/index.html delete mode 100644 files/tr/web/api/idbindex/getall/index.html delete mode 100644 files/tr/web/api/idbindex/index.html delete mode 100644 files/tr/web/api/index.html delete mode 100644 files/tr/web/api/mutationobserver/index.html delete mode 100644 files/tr/web/api/node/index.html delete mode 100644 files/tr/web/api/storage/index.html delete mode 100644 files/tr/web/api/webgl_api/index.html delete mode 100644 files/tr/web/api/websocket/binarytype/index.html delete mode 100644 files/tr/web/api/websocket/close/index.html delete mode 100644 files/tr/web/api/websocket/extensions/index.html delete mode 100644 files/tr/web/api/websocket/index.html delete mode 100644 files/tr/web/api/websocket/onclose/index.html delete mode 100644 files/tr/web/api/websocket/onerror/index.html delete mode 100644 files/tr/web/api/websocket/onmessage/index.html delete mode 100644 files/tr/web/api/websocket/onopen/index.html delete mode 100644 files/tr/web/api/websocket/protocol/index.html delete mode 100644 files/tr/web/api/websocket/readystate/index.html delete mode 100644 files/tr/web/api/websocket/url/index.html delete mode 100644 files/tr/web/api/websocket/websocket/index.html delete mode 100644 files/tr/web/api/window/index.html delete mode 100644 files/tr/web/api/window/opener/index.html delete mode 100644 files/tr/web/css/@import/index.html delete mode 100644 files/tr/web/css/_colon_active/index.html delete mode 100644 files/tr/web/css/_colon_first-of-type/index.html delete mode 100644 files/tr/web/css/_colon_focus/index.html delete mode 100644 files/tr/web/css/_colon_last-child/index.html delete mode 100644 files/tr/web/css/_colon_link/index.html delete mode 100644 files/tr/web/css/_colon_not/index.html delete mode 100644 files/tr/web/css/_colon_root/index.html delete mode 100644 files/tr/web/css/_doublecolon_first-letter/index.html delete mode 100644 files/tr/web/css/background-color/index.html delete mode 100644 files/tr/web/css/background/index.html delete mode 100644 files/tr/web/css/class_selectors/index.html delete mode 100644 files/tr/web/css/css_background_and_borders/box-shadow_generator/index.html delete mode 100644 files/tr/web/css/css_box_model/introduction_to_the_css_box_model/index.html delete mode 100644 files/tr/web/css/css_lists_and_counters/using_css_counters/index.html delete mode 100644 files/tr/web/css/css_selectors/index.html delete mode 100644 files/tr/web/css/display/index.html delete mode 100644 files/tr/web/css/font-size/index.html delete mode 100644 files/tr/web/css/index.html delete mode 100644 files/tr/web/css/margin/index.html delete mode 100644 files/tr/web/css/reference/index.html delete mode 100644 files/tr/web/css/right/index.html delete mode 100644 files/tr/web/css/shape-outside/index.html delete mode 100644 files/tr/web/css/type_selectors/index.html delete mode 100644 files/tr/web/demos_of_open_web_technologies/index.html delete mode 100644 files/tr/web/guide/ajax/index.html delete mode 100644 files/tr/web/guide/graphics/index.html delete mode 100644 files/tr/web/guide/html/html5/index.html delete mode 100644 files/tr/web/guide/index.html delete mode 100644 files/tr/web/html/element/aside/index.html delete mode 100644 files/tr/web/html/element/head/index.html delete mode 100644 files/tr/web/html/element/hgroup/index.html delete mode 100644 files/tr/web/html/element/index.html delete mode 100644 files/tr/web/html/element/li/index.html delete mode 100644 files/tr/web/html/element/link/index.html delete mode 100644 files/tr/web/html/index.html delete mode 100644 files/tr/web/http/content_negotiation/index.html delete mode 100644 files/tr/web/http/cookies/index.html delete mode 100644 files/tr/web/http/cors/errors/corsrequestnothttp/index.html delete mode 100644 files/tr/web/http/cors/errors/index.html delete mode 100644 files/tr/web/http/cors/index.html delete mode 100644 files/tr/web/http/headers/accept-language/index.html delete mode 100644 files/tr/web/http/headers/accept/index.html delete mode 100644 files/tr/web/http/headers/cookie/index.html delete mode 100644 files/tr/web/http/headers/index.html delete mode 100644 files/tr/web/http/headers/x-xss-protection/index.html delete mode 100644 files/tr/web/http/index.html delete mode 100644 files/tr/web/http/methods/index.html delete mode 100644 files/tr/web/http/session/index.html delete mode 100644 files/tr/web/http/status/200/index.html delete mode 100644 files/tr/web/http/status/205/index.html delete mode 100644 files/tr/web/http/status/301/index.html delete mode 100644 files/tr/web/http/status/302/index.html delete mode 100644 files/tr/web/http/status/400/index.html delete mode 100644 files/tr/web/http/status/401/index.html delete mode 100644 files/tr/web/http/status/402/index.html delete mode 100644 files/tr/web/http/status/403/index.html delete mode 100644 files/tr/web/http/status/404/index.html delete mode 100644 files/tr/web/http/status/405/index.html delete mode 100644 files/tr/web/http/status/418/index.html delete mode 100644 files/tr/web/http/status/500/index.html delete mode 100644 files/tr/web/http/status/index.html delete mode 100644 files/tr/web/index.html delete mode 100644 files/tr/web/javascript/a_re-introduction_to_javascript/index.html delete mode 100644 files/tr/web/javascript/data_structures/index.html delete mode 100644 files/tr/web/javascript/guide/control_flow_and_error_handling/index.html delete mode 100644 files/tr/web/javascript/guide/details_of_the_object_model/index.html delete mode 100644 files/tr/web/javascript/guide/functions/index.html delete mode 100644 files/tr/web/javascript/guide/grammar_and_types/index.html delete mode 100644 files/tr/web/javascript/guide/index.html delete mode 100644 files/tr/web/javascript/guide/introduction/index.html delete mode 100644 files/tr/web/javascript/guide/loops_and_iteration/index.html delete mode 100644 files/tr/web/javascript/guide/working_with_objects/index.html delete mode 100644 files/tr/web/javascript/index.html delete mode 100644 files/tr/web/javascript/inheritance_and_the_prototype_chain/index.html delete mode 100644 files/tr/web/javascript/language_resources/index.html delete mode 100644 files/tr/web/javascript/memory_management/index.html delete mode 100644 files/tr/web/javascript/reference/classes/index.html delete mode 100644 files/tr/web/javascript/reference/classes/static/index.html delete mode 100644 files/tr/web/javascript/reference/errors/index.html delete mode 100644 files/tr/web/javascript/reference/errors/missing_semicolon_before_statement/index.html delete mode 100644 files/tr/web/javascript/reference/functions/arrow_functions/index.html delete mode 100644 files/tr/web/javascript/reference/functions/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/array/concat/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/array/entries/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/array/every/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/array/filter/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/array/find/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/array/findindex/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/array/foreach/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/array/from/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/array/includes/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/array/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/array/indexof/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/array/isarray/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/array/join/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/array/length/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/array/map/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/array/of/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/array/pop/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/array/push/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/array/reverse/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/array/shift/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/array/sort/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/array/splice/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/array/unshift/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/array/values/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/arraybuffer/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/boolean/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/boolean/tosource/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/eval/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/function/apply/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/function/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/isfinite/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/isnan/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/json/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/json/stringify/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/map/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/math/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/math/sign/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/object/assign/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/object/defineproperty/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/object/entries/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/object/freeze/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/object/getprototypeof/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/object/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/object/tostring/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/object/values/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/promise/all/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/promise/catch/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/promise/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/regexp/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/string/index.html delete mode 100644 files/tr/web/javascript/reference/global_objects/string/substring/index.html delete mode 100644 files/tr/web/javascript/reference/index.html delete mode 100644 files/tr/web/javascript/reference/lexical_grammar/index.html delete mode 100644 files/tr/web/javascript/reference/operators/function_star_/index.html delete mode 100644 files/tr/web/javascript/reference/operators/index.html delete mode 100644 files/tr/web/javascript/reference/operators/instanceof/index.html delete mode 100644 files/tr/web/javascript/reference/operators/super/index.html delete mode 100644 files/tr/web/javascript/reference/operators/this/index.html delete mode 100644 files/tr/web/javascript/reference/operators/typeof/index.html delete mode 100644 files/tr/web/javascript/reference/statements/block/index.html delete mode 100644 files/tr/web/javascript/reference/statements/break/index.html delete mode 100644 files/tr/web/javascript/reference/statements/const/index.html delete mode 100644 files/tr/web/javascript/reference/statements/export/index.html delete mode 100644 files/tr/web/javascript/reference/statements/index.html delete mode 100644 files/tr/web/javascript/reference/statements/return/index.html delete mode 100644 files/tr/web/javascript/reference/statements/throw/index.html delete mode 100644 files/tr/web/javascript/reference/statements/while/index.html delete mode 100644 files/tr/web/javascript/reference/strict_mode/index.html delete mode 100644 files/tr/web/manifest/index.html delete mode 100644 files/tr/web/mathml/index.html delete mode 100644 files/tr/web/progressive_web_apps/index.html delete mode 100644 files/tr/web/progressive_web_apps/offline_service_workers/index.html delete mode 100644 files/tr/web/reference/index.html delete mode 100644 files/tr/web/security/index.html delete mode 100644 files/tr/web/security/mixed_content/index.html delete mode 100644 files/tr/web/security/transport_layer_security/index.html delete mode 100644 files/tr/web/security/weak_signature_algorithm/index.html delete mode 100644 files/tr/web/tutorials/index.html (limited to 'files/tr/web') diff --git a/files/tr/web/accessibility/index.html b/files/tr/web/accessibility/index.html deleted file mode 100644 index ff844f6a40..0000000000 --- a/files/tr/web/accessibility/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Accessibility -slug: Web/Accessibility -translation_of: Web/Accessibility ---- -

Accessibility (often abbreviated to A11y—as in "a" then 11 characters then "y") in Web development means enabling as many people as possible to use Web sites, even when those people's abilities are limited in some way.

- -

For many people, iş fikirleri technology makes things easier. For people with disabilities, technology makes things possible. Accessibility means developing content to be as accessible as possible no matter an individual's physical and cognitive abilities and no matter how they access the web.

- -

"The Web is fundamentally designed to work for all people, whatever their hardware, software, language, culture, location, or physical or mental ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability." {{ Ref(1) }}

- -
-
-

Key tutorials

- -

The MDN Accessibility Learning Area contains modern, up-to-date tutorials covering accessibility essentials:

- -
-
What is accessibility?
-
This article starts off the module with a good look at what accessibility actually is — this includes what  Türk telekom bayiliği almak 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 used for the correct purpose at all times. 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 ... or they can significantly harm accessibility if misused. This article outlines some CSS and JavaScript best practices that should be considered to ensure 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.
-
-
- -
-

Other documentation

- -
-
Understanding the Web Content Accessibility Guidelines
-
-

This set of articles provides quick explanations to help you understand the steps that need to be taken to conform to the recommendations outlined in the W3C Web Content Accessibility Guidelines 2.0 (WCAG 2.0 or just WCAG, for the purposes of this writing).

-
-
Keyboard-navigable JavaScript widgets
-
Until now, web developers who want to make their styled <div> and <span> based widgets  have lacked the proper techniques. Keyboard accessibility is part of the minimum accessibility requirements which a developer should be aware of.
-
ARIA
-
A collection of articles to learn how to use ARIA to make your HTML documents more accessible.
-
Assistive technology (AT) development
-
A collection of articles intended for AT developers
-
Mobile accessibility checklist
-
This document provides a concise checklist of accessibility requirements for mobile app developers.
-
Cognitive accessibility
-
When creating web content, be aware of how you can ensure that it is accessible to people cognitive impairments.
-
Accessibility for seizure disorders
-
Some types of visual web content can induce seizures in people with certain brain disorders. Understand the types of content that can be problematic, and find tools and strategies to help you avoid them.
-
-
- -

View all articles about Accessibility...

-
- - -


-  

-
- -

{{ endnote(1) }} W3C - Accessibility

- -

See also

- - - - diff --git a/files/tr/web/accessibility/understanding_wcag/index.html b/files/tr/web/accessibility/understanding_wcag/index.html deleted file mode 100644 index fe71b20ebc..0000000000 --- a/files/tr/web/accessibility/understanding_wcag/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: Understanding the Web Content Accessibility Guidelines -slug: Web/Accessibility/Understanding_WCAG -tags: - - NeedsTranslation - - TopicStub - - WCAG - - Web Content Accessibility Guidelines -translation_of: Web/Accessibility/Understanding_WCAG ---- -

This set of articles provides quick explanations to help you understand the steps that need to be taken to conform to the recommendations outlined in the W3C Web Content Accessibility Guidelines 2.0 or 2.1 (or just WCAG, for the purposes of this writing).

- -

The WCAG 2.0 and 2.1 provide a detailed set of guidelines for making web content more accessible to people with a wide variety of disabilities. It is comprehensive but incredibly detailed, and quite difficult to gain a rapid understanding of. For this reason, we have summarised the practical steps you need to take to satisfy the different recommendations, with further links to more details where required.

- -

The four principles

- -

WCAG is broadly broken down into four principles — major things that web content must be to be considered accessible (see Understanding the Four Principles of Accessibility for the WCAG definitions).

- -

Each of the links below will take you to pages that further expand on these areas, giving you practical advice on how to write your web content so it conforms to the success criteria outlined in each of the WCAG 2.0 and 2.1 guidelines that further sub-divides each principle.

- - - -

Should I use WCAG 2.0 or 2.1?

- -

WCAG 2.1 is the most recent and relevant accessibility standard. Use WCAG 2.1 to help more people with disabilities and reduce the future legal risk for web site owners. Target WCAG 2.0 first when allocating resources. Then step up to WCAG 2.1. 

- -

What is WCAG 2.1?

- -

WCAG 2.1 was published as an official recommendation on 05 June 2018. The European Union (EU) adopted WCAG 2.1 as the digital accessibility standard in September 2018. W3C published a press release WCAG 2.1 Adoption in Europe. 

- -

WCAG 2.1 includes:

- - - - - -

This guide is intended to provide practical information to help you build better, more accessible websites. However, we are not lawyers, and none of this constitutes legal advice. If you are worried about the legal implications of web accessibility, we'd recommend that you check the specific legislation governing accessibility for the web/public resources in your country or locale, and seek the advice of a qualified lawyer.

- -

What is accessibility? and particularity the Accessibility guidelines and the law section provide more related information.

diff --git a/files/tr/web/accessibility/understanding_wcag/keyboard/index.html b/files/tr/web/accessibility/understanding_wcag/keyboard/index.html deleted file mode 100644 index 32705d664f..0000000000 --- a/files/tr/web/accessibility/understanding_wcag/keyboard/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: Keyboard -slug: Web/Accessibility/Understanding_WCAG/Keyboard -translation_of: Web/Accessibility/Understanding_WCAG/Keyboard ---- -
To be fully accessible, a web page must be operable by someone using only a keyboard to access and control it. This includes users of screen readers, but can also include users who have trouble operating a pointing device such as a mouse or trackball, or whose mouse is not working at the moment, or who simply prefer to use a keyboard for input whenever possible.
- -

Focusable elements should have interactive semantics

- -

If an element can be focused using the keyboard, then it should be interactive; that is, the user should be able to do something to it and produce a change of some kind (for example, activating a link or changing an option).

- -
-

Note: One important exception to this rule is if the element has role="document" applied to it, inside an interactive context (such as role="application"). In such a case, focusing the nested document is the only way of returning assistive technology to a non-interactive state (often called "browse mode").

-
- -

Most interactive elements are focusable by default; you can make an element focusable by adding a tabindex=0 attribute value to it. However, you should only add tabindex if you have also made the element interactive, for example, by defining appropriate event handlers keyboard events.

- -

See also

- - - -

Avoid using tabindex attribute greater than zero

- -

The tabindex attribute indicates that an element is focusable using the keyboard. A value of zero indicates that the element is part of the default focus order, which is based on the ordering of elements in the HTML document. A positive value puts the element ahead of those in the default ordering; elements with positive values are focused in the order of their tabindex values (1, then 2, then 3, etc.).

- -

This creates confusion for keyboard-only users when the focus order differs from the logical order of the page. A better strategy is to structure the HTML document so that focusable elements are in a logical order, without the need to re-order them with positive tabindex values.

- -

See also

- - - -

Clickable elements must be focusable and should have interactive semantics

- -

If an element can be clicked with a pointing device, such as a mouse, then it should also be focusable using the keyboard, and the user should be able to do something by interacting with it.

- -

An element is clickable if it has an onclick event handler defined. You can make it focusable by adding a tabindex=0 attribute value to it. You can make it operable with the keyboard by defining an onkeydown event handler; in most cases, the action taken by event handler should be the same for both types of events.

- -

See also

- - - -

Interactive elements must be able to be activated using a keyboard

- -

If the user can interact with an element using touch or a pointing device, then the element should also support interacting using the keyboard. That is, if you have defined event handlers for touch or click events, you should also define them for keyboard events. The keyboard event handlers should enable the effectively the same interaction as the touch or click handlers.

- -

See also

- - - -

Interactive elements must be focusable

- -

If the user can interact with an element (for example, using touch or a pointing device), then it should be focusable using the keyboard. You can make it focusable by adding a tabindex=0 attribute value to it. That will add the element to the list of elements that can be focused by pressing the Tab key, in the sequence of such elements as defined in the HTML document.

- -

See also

- - - -

Focusable element must have focus styling

- -

Any element that can receive keyboard focus should have visible styling that indicates when the element is focused. You can do this with the :focus CSS pseudo-class.

- -

Standard focusable elements such as links and input fields are given special styling by the browser by default, so you might not need to specify focus styling for such elements, unless you want the focus styling to be more distinctive.

- -

If you create your own focusable components, be sure that you also define focus styling for them.

- -

See also

- - diff --git a/files/tr/web/api/beforeunloadevent/index.html b/files/tr/web/api/beforeunloadevent/index.html deleted file mode 100644 index ee2bfefa82..0000000000 --- a/files/tr/web/api/beforeunloadevent/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: BeforeUnloadEvent -slug: Web/API/BeforeUnloadEvent -tags: - - Boşaltma Olayından Önce -translation_of: Web/API/BeforeUnloadEvent ---- -

Beforeunload olayı, pencere, belge ve kaynakları kaldırılmak üzereyken tetiklenir.

- -

ReturnValue Event özelliğine boş olmayan bir dize atandığında, kullanıcılardan sayfadan ayrılmak için onay isteyen bir iletişim kutusu belirir (aşağıdaki örneğe bakın). Değer belirtilmediğinde, olay sessizce işlenir. Bazı uygulamalar, yalnızca çerçeve veya herhangi bir gömülü çerçeve bir kullanıcı hareketi veya kullanıcı etkileşimi alırsa iletişim kutusunu gösterir. Daha fazla bilgi için bkz. {{Anch ("Tarayıcı uyumluluğu")}}.

- -

{{InheritanceDiagram(600, 120)}}

- - - - - - - - - - - - - - - - - - - - -
KabarcıklarHayır
İptal edilebilirEvet
Hedef nesnelervarsayılan görünüm
Arayüz{{domxref("Event")}}
- -

Örnekler

- -
window.addEventListener("beforeunload", function( event ) {
-  event.returnValue = "\o/";
-});
-
-// Eşdeğerdir
-window.addEventListener("beforeunload", function( event ) {
-  event.preventDefault();
-});
- -

WebKit'ten türetilmiş tarayıcılar, iletişim kutusunun teknik özelliklerine uymaz. Neredeyse çapraz tarayıcıda çalışan bir örnek aşağıdaki örneğe yakın olacaktır.

- -
window.addEventListener("beforeunload", function (e) {
-  var confirmationMessage = "\o/";
-
-  (e || window.event).returnValue = confirmationMessage;     // Gecko + IE
-  return confirmationMessage;                                /* Safari, Chrome ve diğerleri
-                                                              * WebKit'ten türetilmiş tarayıcılar */
-});
- -

Teknik Özellikler

- - - - - - - - - - - - - - -
Teknik ÖzelliklerDurumYorum
{{SpecName("HTML WHATWG", "browsing-the-web.html#the-beforeunloadevent-interface", "BeforeUnloadEvent")}}{{Spec2("HTML WHATWG")}}Initial definition
- -

Tarayıcı Uyumluluğu

- -
- - -

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

-
- -

Ayrıca bakınız

- - diff --git a/files/tr/web/api/canvas_api/index.html b/files/tr/web/api/canvas_api/index.html deleted file mode 100644 index 32842f3676..0000000000 --- a/files/tr/web/api/canvas_api/index.html +++ /dev/null @@ -1,174 +0,0 @@ ---- -title: Tuval Arabirimi -slug: Web/API/Canvas_API -tags: - - Arabirim - - Canvas - - Genel Bakış - - JavaScript - - Kaynak - - Tuval -translation_of: Web/API/Canvas_API -original_slug: Web/API/Tuval_Arabirimi ---- -
{{CanvasSidebar}}
- -

Tuval anlamına gelen canvas, HTML5 de eklenmiştir, {{HTMLElement("canvas")}} adlı HTML ögesi JavaScript betikleriyle birlikte, çizge çizmek için kullanılabilir. Örneğin görsel işleyebilir, görselleri canlandırabilir, gerçek zamanlı izleti bile işleyebilirsiniz. 

- -

Mozilla uygulamaları Gecko 1.8 (bkz. Firefox 1.5) ile birlikte <canvas> desteği kazanmıştır. Öge, asıl olarak Apple tarafından OSX  gösterge yüzeyinde ve Safari'de kullanılmıştır. Internet Explorer ise 9. sürümden sonra <canvas> desteklemeye başlamıştır; önceki sürümleri için Google'ın geliştirdiği Explorer Canvas tasarısı <canvas> 'ın etkin kullanımına olanak tanıyordu. Google Chrome ve Opera 9'un da <canvas> desteği vardır.

- -

WebGL de donanım tarafından hızlandırılmış 3 Boyutlu Web Çizgeleri çizmek için <canvas> ögesini kullanır. 

- -

Örnek

- -

 {{domxref("CanvasRenderingContext2D.fillRect()")}} yöntemini kullanan ufak bir kod parçacığı:

- -

HTML

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

JavaScript

- -
var tuval = document.getElementById('tuval');
-var bağlam = tuval.getContext('2d');
-
-bağlam.fillStyle = 'green';
-bağlam.fillRect(10, 10, 100, 100);
-
- -

Aşağıdaki kodla oynayın ve tuvaldeki değişimleri canlı olarak görün.

- - - -

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

- -

Atıflar

- -
- -
- -

WebGLRenderingContext ile ilgili atıflar WebGL altında verilmiştir.

- -

{{domxref("CanvasCaptureMediaStream")}} de ilgilidir.

- -

Kılavuz ve yönergeler

- -
-
Canvas kılavuzu
-
<canvas> ın hem temel hem de gelişmiş özelliklerini anlatan kapsayıcı bir kılavuz.
-
Kod Parçacıkları: Canvas
-
<canvas> ile ilgili yazılmış kod parçacıkları...
-
Gösteri: Yalın ışıklandırma
-
Tuval kullanarak geliştirilmiş 3B ortamda görüş alanına göre ışıklandırma...
-
Tuval üzerine DOM ögeleri çizmek
-
Belgede bulunan DOM ögeleri tuval üzerine çizimi.
-
canvas kullanarak görüntü işleme
-
{{HTMLElement("video")}} ve {{HTMLElement("canvas")}} ögelerini kullanarak izletideki görüntüyü canlı olarak işleme/değiştirme
-
- -

Kaynaklar

- -

Kapsamlı

- - - -

Kütüphaneler

- - - -

Tanımlamalar

- - - - - - - - - - - - - - - - -
TanımDurumYorum
{{SpecName('HTML WHATWG', 'scripting.html#the-canvas-element', '<canvas>')}}{{Spec2('HTML WHATWG')}} 
- -

Ayrıca bkz.

- - diff --git a/files/tr/web/api/comment/comment/index.html b/files/tr/web/api/comment/comment/index.html deleted file mode 100644 index 41109af106..0000000000 --- a/files/tr/web/api/comment/comment/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Comment() -slug: Web/API/Comment/Comment -translation_of: Web/API/Comment/Comment ---- -

{{ApiRef ("DOM")}} {{seeCompatTable}}

- -

Comment () konstruktoru yeni yaradılmış {{domxref ("Comment")}} obyektini mətn məzmunu olaraq parametrdə verilən isteğe bağlı {{domxref ("DOMString")}} qaytarır.

- -

Syntax

- -
comment1 = new Comment(); // Create an empty comment
-comment2 = new Comment("This is a comment");
- -

ax

- -
comment1 = new Comment(); // Create an empty comment
-comment2 = new Comment("This is a comment");
-
- -

Example

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

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-comment-comment', 'Comment: Comment')}}{{Spec2('DOM WHATWG')}}Initial definition
- -

Browser compatibility

- - - -

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

- -
-

Note: For browsers where this constructor is not supported, {{domxref("Document.createComment()")}} may be suitable.

-
- -

See also

- - diff --git a/files/tr/web/api/comment/index.html b/files/tr/web/api/comment/index.html deleted file mode 100644 index 416930c567..0000000000 --- a/files/tr/web/api/comment/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Comment -slug: Web/API/Comment -tags: - - API - - DOM - - NeedsTranslation - - Reference - - TopicStub -translation_of: Web/API/Comment ---- -
{{ ApiRef("DOM") }}
- -

The Comment interface represents textual notations within markup; although it is generally not visually shown, such comments are available to be read in the source view. Comments are represented in HTML and XML as content between '<!--' and '-->'. In XML, the character sequence '--' cannot be used within a comment.

- -

{{InheritanceDiagram}}

- -

Properties

- -

This interface has no specific property, but inherits those of its parent, {{domxref("CharacterData")}}, and indirectly those of {{domxref("Node")}}.

- -

Constructor

- -
-
{{ domxref("Comment.Comment()", "Comment()") }} {{experimental_inline}}
-
Returns a Comment object with the parameter as its textual content.
-
- -

Methods

- -

This interface has no specific method, but inherits those of its parent, {{domxref("CharacterData")}}, and indirectly those of {{domxref("Node")}}.

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#comment', 'Comment')}}{{Spec2('DOM WHATWG')}}Added the constructor.
{{SpecName('DOM3 Core', 'core.html#ID-1728279322', 'Comment')}}{{Spec2('DOM3 Core')}}No change from {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-1728279322', 'Comment')}}{{Spec2('DOM2 Core')}}No change from {{SpecName('DOM1')}}
{{SpecName('DOM1', 'level-one-core.html#ID-1728279322', 'Comment')}}{{Spec2('DOM1')}}Initial definition
- -

Browser compatibility

- - - -

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

- -

See also

- - diff --git a/files/tr/web/api/css_object_model/index.html b/files/tr/web/api/css_object_model/index.html deleted file mode 100644 index e799a59ee4..0000000000 --- a/files/tr/web/api/css_object_model/index.html +++ /dev/null @@ -1,204 +0,0 @@ ---- -title: CSS Object Model (CSSOM) -slug: Web/API/CSS_Object_Model -tags: - - API - - CSSOM -translation_of: Web/API/CSS_Object_Model ---- -
{{DefaultAPISidebar('CSSOM')}}
- -

CSS Object Model, CSS'in JavaScript ile yönetilmesine imkan tanıyan bir API setidir. DOM ile oldukça benzerdir. Ancak CSSOM, HTML'den ziyade CSS içindir. CSSOM ile kullanıcılar CSS'i okuyabilir ya da dinamik olarak değiştirebilirler.

- -

Referanslar

- -
- -
- -

Several other interfaces are also extended by the CSSOM-related specifications: {{domxref("Document")}}, {{domxref("Window")}}, {{domxref("Element")}}, {{domxref("HTMLElement")}}, {{domxref("HTMLImageElement")}}, {{domxref("Range")}}, {{domxref("MouseEvent")}}, and {{domxref("SVGElement")}}.

- -

CSS Typed Object Model {{experimental_inline}}

- -

{{SeeCompatTable}}

- -
- -
- -

Eski CSSOM Arayüzleri {{obsolete_inline}}

- -

{{obsolete_header}}

- -
- -
- -

Öğretici Materyaller

- - - -

Özellikler

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("CSS Typed OM")}}{{Spec2("CSS Typed OM")}} 
{{SpecName("CSS Painting API")}}{{Spec2("CSS Painting API")}}Extended the {{DOMxRef("CSS")}} interface with the {{DOMxRef("CSS.paintWorklet","paintWorklet")}} static property.
{{SpecName("CSSOM View")}}{{Spec2("CSSOM View")}}Defined the {{DOMxRef("Screen")}} and {{DOMxRef("MediaQueryList")}} interfaces and the {{DOMxRef("MediaQueryListEvent")}} event and {{DOMxRef("MediaQueryListListener")}} event listener.
{{SpecName("CSSOM")}}{{Spec2("CSSOM")}}Extended the {{DOMxRef("CSS")}} interface and provides the base for the modern CSSOM specification.
{{SpecName("Screen Orientation")}}{{Spec2("Screen Orientation")}} 
{{SpecName("CSS3 Fonts")}}{{Spec2("CSS3 Fonts")}} 
{{SpecName("CSS3 Animations")}}{{Spec2("CSS3 Animations")}} 
{{SpecName("CSS3 Transitions")}}{{Spec2("CSS3 Transitions")}} 
{{SpecName("CSS3 Variables")}}{{Spec2("CSS3 Variables")}} 
{{SpecName("CSS3 Conditional")}}{{Spec2("CSS3 Conditional")}}{{DOMxRef("CSS")}} arayüzü tanımlandı.
{{SpecName("CSS3 Device")}}{{Spec2("CSS3 Device")}} 
{{SpecName("CSS3 Counter Styles")}}{{Spec2("CSS3 Counter Styles")}} 
{{SpecName("DOM2 Style")}}{{Spec2("DOM2 Style")}}İlk tanımlama.
- -

Tarayıcı Uyumluluğu

- -

Tüm bu özellikler yıllar içinde azar azar farklı tarayıcılara eklendi: Basit bir tabloyla özetlenemeyecek kadar karmaşık bir süreç olduğundan lütfen kullanılabilirlik için belirli arayüzlere bakın.

- -

Ayrıca Bkz.

- - diff --git a/files/tr/web/api/css_object_model/managing_screen_orientation/index.html b/files/tr/web/api/css_object_model/managing_screen_orientation/index.html deleted file mode 100644 index c02e0c1215..0000000000 --- a/files/tr/web/api/css_object_model/managing_screen_orientation/index.html +++ /dev/null @@ -1,179 +0,0 @@ ---- -title: Ekran Oryantasyonunu Yönetmek -slug: Web/API/CSS_Object_Model/Managing_screen_orientation -tags: - - API - - CSSOM - - Ekran Konumu - - Ekran Oryantasyonu - - Oryantasyon - - Uzman -translation_of: Web/API/CSS_Object_Model/Managing_screen_orientation ---- -
{{DefaultAPISidebar("CSSOM View")}}{{SeeCompatTable}}
- -

Özet

- -

Ekran oryantasyonu cihaz oryantasyonundan bir miktar farklı bir terim. Cihazın kendi oryantasyonunu tespit etme yeteneği olmasa bile ekranının her zaman bir oryantasyonu vardır. Eğer cihaz bu yeteneğe sahip ise web uygulamasının arayüzünü korumak veya uyarlamak için ekranı yönetme yeteneğine sahip olması faydalı bir özellik.

- -

Ekran oryantasyonunu yönetebilek için hem CSS'e hem Javascript'e dayanan çeşitli yöntemler mevcut. Bu yöntemlerden ilki orientation media query CSS kullanarak tarayıcının yatay modda (genişliğin yükseklikten uzun olduğu mod) veya dikey modda (yüksekliğin genişlikten uzun olduğu mod) içeriğin ekrandaki yerleşimini ayarlamasını sağlamak.

- -

İkinci yöntem ise Javascript Screen orientation API kullanılarak ekranın mevcut oryantasyonun alınması ve sabitlenmesi.

- -

Oryantasyona göre yerleşim planını ayarlamak

- -

Cihazın oryantasyonu değiştiğinde içeriğin ekrandaki yerleşiminin de değişmesi en çok istenilen durumlardan biri. Örneğin buton çubuğunun cihazın oryantasyonu bounca uzamasını istiyoruz. Media query kullanarak kolay ve otomatik bir şekilde yapabiliriz.

- -

Aşağıdaki HTML kodu üzerinden bir örnek yapalım.

- -
<ul id="toolbar">
-  <li>A</li>
-  <li>B</li>
-  <li>C</li>
-</ul>
-
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia nisi nec sem viverra vitae fringilla nulla ultricies. In ac est dolor, quis tincidunt leo. Cras commodo quam non tortor consectetur eget rutrum dolor ultricies. Ut interdum tristique dapibus. Nullam quis malesuada est.</p>
-
- -

CSS ekranın oryatasyonuna göre çalışacak özel stiller için media query'lere güveniyor.

- -
/* Önce ortak stiller tanımlayalım */
-
-html, body {
-  width : 100%;
-  height: 100%;
-}
-
-body {
-  border: 1px solid black;
-
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-p {
-  font   : 1em sans-serif;
-  margin : 0;
-  padding: .5em;
-}
-
-ul {
-  list-style: none;
-
-  font   : 1em monospace;
-  margin : 0;
-  padding: .5em;
-
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-
-  background: black;
-}
-
-li {
-  display: inline-block;
-  margin : 0;
-  padding: 0.5em;
-  background: white;
-}
-
- -

Ortak stillerimiz hazır olduğuna göre oryantasyona göre çalışacak özel durumları tanımlamaya başlayabiliriz.

- -
/* Dikey modda buton çubuğunun üstte olmasını istiyoruz */
-
-@media screen and (orientation: portrait) {
-  #toolbar {
-    width: 100%;
-  }
-}
-
-/* Yatay modda buton çubuğunun solda durmasını istiyoruz */
-
-@media screen and (orientation: landscape) {
-  #toolbar {
-    position: fixed;
-    width: 2.65em;
-    height: 100%;
-  }
-
-  p {
-    margin-left: 2em;
-  }
-
-  li + li {
-    margin-top: .5em;
-  }
-}
-
- -

Ve sonuç:

- - - - - - - - - - - - - - -
PortraitLandscape
{{ EmbedLiveSample('Adjusting_layout_based_on_the_orientation', 180, 350) }}{{ EmbedLiveSample('Adjusting_layout_based_on_the_orientation', 350, 180) }}
- -
-

Not: Oryantasyon media query'si  tarayıcı penceresinin(veya iframe'in) oryantasyonuna göre bu stilleri çalıştırıyor cihazın oryantasyonuna göre değil.

-
- -

Ekran oryantasyonunu sabitlemek

- -
-

Warning: Bu API şu anda deneysel bir çalışma ve Firefox OS ile Firefox for Android 'de  moz önekiyle, Windows 8.1 ve üstünde Internet Explorer'larda ise ms önekiyle kullanılabilir durumda.

-
- -

Bazı cihazlar (genellikle mobil cihazlar) kullanıcının kendi ekranındakileri her zaman okuyabileceğine garanti vererek ekran oryantasyonunu kendi oryantasyonuna göre dinamik olarak değiştirebiliyor. Bu davranış içerik metinlerden oluşuyorken çok iyi çalışmasına rağmen oryantasyona bağlı oyun gibi içeriklerde uygulamayı tamamen kullanılmaz hale getirebiliyor.

- -

Screen Orientation API bu şekilde negatif etkisi olan değişimlerin engellenmesi için geliştirildi.

- -

Oryantasyon değişikliğini dinleme

- -

Cihaz oryantasyonunu her değiştirdiğinde {{event("orientationchange")}} event'i tetiklenir ve  o anki oryantasyonu {{domxref("Screen.orientation")}} özelliğiyle okunabilir.

- -
screen.addEventListener("orientationchange", function () {
-  console.log("Ekranın oryantasyonu: " + screen.orientation);
-});
-
- -

Oryantasyon değişikliğini engelleme

- -

Bir web uygulaması ekranın oryantasyonunu kendi ihityaçlarına uyacak şekilde sabitleyebilir. Ekranın oryantasyonunu sabitlemek için {{domxref("Screen.lockOrientation()")}}  metodu kullanılırken sabitlemeyi kaldırmak için ise {{domxref("Screen.unlockOrientation()")}} metodu kullanılabilir.

- -

{{domxref("Screen.lockOrientation()")}} parametre olarak ekranın nasıl sabitlenmesi gerektiğine göre String (veya birden çok string) parametre alır. Geçerli parametre değerleri: portrait-primary, portrait-secondary, landscape-primary, landscape-secondary, portrait, landscape . (Bu değerler hakkında detaylı bilgi için Bkz: {{domxref("Screen.lockOrientation")}}).

- -
screen.lockOrientation('landscape');
- -
-

Not:Ekranı sabitlemek web uygulaması bağımlıdır. Eğer uygulama A yatay moda sabitlenmiş ve uygulama B dkey moda sabitlenmiş ise A'dan B'ye ya da B'den A'ya geçildiğinde {{event("orientationchange")}} event'i tetiklenmez. Çünkü ikisi de kendi oryantasyonlarını korumaktadır.

- -

Ancak oryantasyonu sabitlerken istenen mevcut oryantasyon değişerek sabitlenen oryantasyona geçildiyse {{event("orientationchange")}} event'i tetiklenir.

-
- -

Firefox OS ve Android: Manifest ile oryantasyonu sabitleme

- -

Firefox OS ve Firefox Android (yakında Firefox masaüstü de) için oryantasyonu sabitlemenin özel bir yolu uygulamanın manifest dosyasının orientation alanına istenen oryantasyon modunu yazmak. Örneğin dikey mod için:

- -
"orientation": "portrait"
- -

Ayrıca bakınız

- - diff --git a/files/tr/web/api/document_object_model/index.html b/files/tr/web/api/document_object_model/index.html deleted file mode 100644 index 813aac4a2c..0000000000 --- a/files/tr/web/api/document_object_model/index.html +++ /dev/null @@ -1,476 +0,0 @@ ---- -title: Document Object Model (DOM) -slug: Web/API/Document_Object_Model -tags: - - API - - DOM - - NeedsTranslation - - Overview - - Reference - - TopicStub -translation_of: Web/API/Document_Object_Model ---- -
{{DefaultAPISidebar("DOM")}}
- -

The Document Object Model (DOM) connects web pages to scripts or programming languages. Usually that means JavaScript, although modelling HTML, SVG, or XML documents as objects is not part of the JavaScript language, as such.

- -

The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree; with them you can change the document's structure, style, or content. Nodes can also have event handlers attached to them; once an event is triggered, the event handlers get executed.

- -

An introduction to the DOM is available.

- -

DOM interfaces

- -
- -
- -

Obsolete DOM interfaces

- -

The Document Object Model has been highly simplified. To achieve this, the following interfaces present in the different DOM level 3 or earlier specifications have been removed. It is uncertain whether some may be reintroduced in the future or not, but for the time being they should be considered obsolete and should be avoided:

- -
- -
- -

HTML interfaces

- -

A document containing HTML is described using the {{DOMxRef("Document")}} interface, which is extended by the HTML specification to include various HTML-specific features.

- -

An HTML document object also gives access to various features of browsers like the tab or the window, in which a page is drawn using the {{DOMxRef("Window")}} interface, the {{DOMxRef("window.style", "Style")}} associated to it (usually CSS), the history of the browser relative to the context, {{DOMxRef("window.history", "History")}}. Eventually, {{DOMxRef("Selection")}} is done on the document.

- -

HTML element interfaces

- -
- -
- -

Other interfaces

- -
- -
- -

Obsolete HTML interfaces

- -
- -
- -

SVG interfaces

- -

SVG element interfaces

- -
- -
- -

SVG data type interfaces

- -

Here are the DOM APIs for data types used in the definitions of SVG properties and attributes.

- -
-

Note: Starting in {{Gecko("5.0")}}, the following SVG-related DOM interfaces representing lists of objects are now indexable and can be accessed; in addition, they have a length property indicating the number of items in the lists: {{DOMxRef("SVGLengthList")}}, {{DOMxRef("SVGNumberList")}}, {{DOMxRef("SVGPathSegList")}}, and {{DOMxRef("SVGPointList")}}.

-
- -

Static type

- -
- -
- -

Animated type

- -
- -
- - - -
- -
- -

Other SVG interfaces

- -
- -
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("DOM WHATWG")}}{{Spec2("DOM WHATWG")}} 
{{SpecName("DOM4")}}{{Spec2("DOM4")}} 
{{SpecName("DOM3 Core")}}{{Spec2("DOM3 Core")}} 
{{SpecName("DOM2 Core")}}{{Spec2("DOM2 Core")}}g
{{SpecName("DOM1")}}{{Spec2("DOM1")}}Initial definition
- -

See also

- - diff --git a/files/tr/web/api/document_object_model/introduction/index.html b/files/tr/web/api/document_object_model/introduction/index.html deleted file mode 100644 index ace5f3c84b..0000000000 --- a/files/tr/web/api/document_object_model/introduction/index.html +++ /dev/null @@ -1,245 +0,0 @@ ---- -title: DOM giriş -slug: Web/API/Document_Object_Model/Introduction -translation_of: Web/API/Document_Object_Model/Introduction ---- -

Document Object Model (DOM) web dökümanında oluşturulan içerik ve yapılar gibi nesnelerin veri gösterimidir.Bu klavuzda,DOM' u kısaca göstereceğiz.O halde DOM hafızada nasıl  HTML ya da XML dökümanını temsil eder ve web içerik ve uygulamaları için API nasıl kullanılır bakalım.

- -

DOM nedir ?

- -

Document Object Model (DOM) , HTML ve XML için programlama arayüzüdür. Sayfayı temsil eder ve böylece program döküman yapısını, stilini ve içeriğini değiştirebilir. DOM dökümanı nodes(düğümler) ve objects(nesneler) şeklinde temsil eder. Bu sayede programlama dili sayfayla bağlantı kurabilir.

- -

Web sayfası bir dökümandır. Bu döküman tarayıcı penceresinde ya da HTML kaynağı gibi görüntülenebilir. Ama her iki durumda da aynı belge vardır. DOM aynı belgeyi temsil eder bu yüzden değiştirilebilir. DOM web sayfasında nesne yönelimli temsilidir, ki javascript gibi script dilleri ile modifiye edilebilir.

- -

W3C DOM ve WHATWG DOM standartları çoğu modern tarayıcıda uygulanmaktadır.

- -

For example, the standard DOM specifies that the getElementsByTagName method in the code below must return a list of all the <p> elements in the document:

- -
const paragraphs = document.getElementsByTagName("p");
-// paragraphs[0] is the first <p> element
-// paragraphs[1] is the second <p> element, etc.
-alert(paragraphs[0].nodeName);
-
- -

All of the properties, methods, and events available for manipulating and creating web pages are organized into objects (for example, the document object that represents the document itself, the table object that implements the special {{domxref("HTMLTableElement")}} DOM interface for accessing HTML tables, and so forth). This documentation provides an object-by-object reference to the DOM.

- -

The modern DOM is built using multiple APIs that work together. The core DOM defines the objects that fundamentally describe a document and the objects within it. This is expanded upon as needed by other APIs that add new features and capabilities to the DOM. For example, the HTML DOM API adds support for representing HTML documents to the core DOM.

- -

DOM and JavaScript

- -

The short example above, like nearly all of the examples in this reference, is {{glossary("JavaScript")}}. That is to say, it's written in JavaScript, but it uses the DOM to access the document and its elements. The DOM is not a programming language, but without it, the JavaScript language wouldn't have any model or notion of web pages, HTML documents, XML documents, and their component parts (e.g. elements). Every element in a document—the document as a whole, the head, tables within the document, table headers, text within the table cells—is part of the document object model for that document, so they can all be accessed and manipulated using the DOM and a scripting language like JavaScript.

- -

In the beginning, JavaScript and the DOM were tightly intertwined, but eventually, they evolved into separate entities. The page content is stored in the DOM and may be accessed and manipulated via JavaScript, so that we may write this approximative equation:

- -

API = DOM + JavaScript

- -

The DOM was designed to be independent of any particular programming language, making the structural representation of the document available from a single, consistent API. Though we focus exclusively on JavaScript in this reference documentation, implementations of the DOM can be built for any language, as this Python example demonstrates:

- -
# Python DOM example
-import xml.dom.minidom as m
-doc = m.parse(r"C:\Projects\Py\chap1.xml")
-doc.nodeName # DOM property of document object
-p_list = doc.getElementsByTagName("para")
-
- -

For more information on what technologies are involved in writing JavaScript on the web, see JavaScript technologies overview.

- -

Accessing the DOM

- -

You don't have to do anything special to begin using the DOM. Different browsers have different implementations of the DOM, and these implementations exhibit varying degrees of conformance to the actual DOM standard (a subject we try to avoid in this documentation), but every web browser uses some document object model to make web pages accessible via JavaScript.

- -

When you create a script–whether it's inline in a <script> element or included in the web page by means of a script loading instruction–you can immediately begin using the API for the {{domxref("document")}} or {{domxref("Window", "window")}} elements to manipulate the document itself or to get at the children of that document, which are the various elements in the web page. Your DOM programming may be something as simple as the following, which displays an alert message by using the {{domxref("window.alert", "alert()")}} function from the {{domxref("Window", "window")}} object, or it may use more sophisticated DOM methods to actually create new content, as in the longer example below.

- -

This following JavaScript will display an alert when the document is loaded (and when the whole DOM is available for use):

- -
<body onload="window.alert('Welcome to my home page!');">
-
- -

Another example. This function creates a new H1 element, adds text to that element, and then adds the H1 to the tree for this document:

- -
<html>
-  <head>
-    <script>
-       // run this function when the document is loaded
-       window.onload = function() {
-
-         // create a couple of elements in an otherwise empty HTML page
-         const heading = document.createElement("h1");
-         const heading_text = document.createTextNode("Big Head!");
-         heading.appendChild(heading_text);
-         document.body.appendChild(heading);
-      }
-    </script>
-  </head>
-  <body>
-  </body>
-</html>
-
- -

Fundamental data types

- -

This reference tries to describe the various objects and types in simple terms. But there are a number of different data types being passed around the API that you should be aware of.

- -
-

Note: Because the vast majority of code that uses the DOM revolves around manipulating HTML documents, it's common to refer to the nodes in the DOM as elements, although strictly speaking not every node is an element.

-
- -

The following table briefly describes these data types.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Data type (Interface)Description
{{domxref("Document")}}When a member returns an object of type document (e.g., the ownerDocument property of an element returns the document to which it belongs), this object is the root document object itself. The DOM document Reference chapter describes the document object.
{{domxref("Node")}}Every object located within a document is a node of some kind. In an HTML document, an object can be an element node but also a text node or attribute node.
{{domxref("Element")}}The element type is based on node. It refers to an element or a node of type element returned by a member of the DOM API. Rather than saying, for example, that the {{domxref("document.createElement()")}} method returns an object reference to a node, we just say that this method returns the element that has just been created in the DOM. element objects implement the DOM Element interface and also the more basic Node interface, both of which are included together in this reference. In an HTML document, elements are further enhanced by the HTML DOM API's {{domxref("HTMLElement")}} interface as well as other interfaces describing capabilities of specific kinds of elements (for instance, {{domxref("HTMLTableElement")}} for {{HTMLElement("table")}} elements).
{{domxref("NodeList")}}A nodeList is an array of elements, like the kind that is returned by the method {{domxref("document.getElementsByTagName()")}}. Items in a nodeList are accessed by index in either of two ways: -
    -
  • list.item(1)
    • -
  • list[1]
    • -
- These two are equivalent. In the first, item() is the single method on the nodeList object. The latter uses the typical array syntax to fetch the second item in the list.
{{domxref("Attribute")}}When an attribute is returned by a member (e.g., by the createAttribute() method), it is an object reference that exposes a special (albeit small) interface for attributes. Attributes are nodes in the DOM just like elements are, though you may rarely use them as such.
{{domxref("NamedNodeMap")}}A namedNodeMap is like an array, but the items are accessed by name or index, though this latter case is merely a convenience for enumeration, as they are in no particular order in the list. A namedNodeMap has an item() method for this purpose, and you can also add and remove items from a namedNodeMap.
- -

There are also some common terminology considerations to keep in mind. It's common to refer to any {{domxref("Attribute")}} node as simply an attribute, for example, and to refer to an array of DOM nodes as a nodeList. You'll find these terms and others to be introduced and used throughout the documentation.

- -

DOM interfaces

- -

This guide is about the objects and the actual things you can use to manipulate the DOM hierarchy. There are many points where understanding how these work can be confusing. For example, the object representing the HTML form element gets its name property from the HTMLFormElement interface but its className property from the HTMLElement interface. In both cases, the property you want is simply in that form object.

- -

But the relationship between objects and the interfaces that they implement in the DOM can be confusing, and so this section attempts to say a little something about the actual interfaces in the DOM specification and how they are made available.

- -

Interfaces and Objects

- -

Many objects borrow from several different interfaces. The table object, for example, implements a specialized {{domxref("HTMLTableElement")}} interface, which includes such methods as createCaption and insertRow. But since it's also an HTML element, table implements the Element interface described in the DOM {{domxref("Element")}} Reference chapter. And finally, since an HTML element is also, as far as the DOM is concerned, a node in the tree of nodes that make up the object model for an HTML or XML page, the table object also implements the more basic Node interface, from which Element derives.

- -

When you get a reference to a table object, as in the following example, you routinely use all three of these interfaces interchangeably on the object, perhaps without knowing it.

- -
const table = document.getElementById("table");
-const tableAttrs = table.attributes; // Node/Element interface
-for (let i = 0; i < tableAttrs.length; i++) {
-  // HTMLTableElement interface: border attribute
-  if(tableAttrs[i].nodeName.toLowerCase() == "border")
-    table.border = "1";
-}
-// HTMLTableElement interface: summary attribute
-table.summary = "note: increased border";
-
- -

Core Interfaces in the DOM

- -

This section lists some of the most commonly-used interfaces in the DOM. The idea is not to describe what these APIs do here but to give you an idea of the sorts of methods and properties you will see very often as you use the DOM. These common APIs are used in the longer examples in the DOM Examples chapter at the end of this book.

- -

The document and window objects are the objects whose interfaces you generally use most often in DOM programming. In simple terms, the window object represents something like the browser, and the document object is the root of the document itself. Element inherits from the generic Node interface, and together these two interfaces provide many of the methods and properties you use on individual elements. These elements may also have specific interfaces for dealing with the kind of data those elements hold, as in the table object example in the previous section.

- -

The following is a brief list of common APIs in web and XML page scripting using the DOM.

- - - -

Testing the DOM API

- -

This document provides samples for every interface that you can use in your own web development. In some cases, the samples are complete HTML pages, with the DOM access in a <script> element, the interface (e.g, buttons) necessary to fire up the script in a form, and the HTML elements upon which the DOM operates listed as well. When this is the case, you can cut and paste the example into a new HTML document, save it, and run the example from the browser.

- -

There are some cases, however, when the examples are more concise. To run examples that only demonstrate the basic relationship of the interface to the HTML elements, you may want to set up a test page in which interfaces can be easily accessed from scripts. The following very simple web page provides a <script> element in the header in which you can place functions that test the interface, a few HTML elements with attributes that you can retrieve, set, or otherwise manipulate, and the web user interface necessary to call those functions from the browser.

- -

You can use this test page or create a similar one to test the DOM interfaces you are interested in and see how they work on the browser platform. You can update the contents of the test() function as needed, create more buttons, or add elements as necessary.

- -
<html>
-<head>
-  <title>DOM Tests</title>
-  <script>
-    function setBodyAttr(attr, value) {
-      if (document.body) document.body[attr] = value;
-      else throw new Error("no support");
-    }
-  </script>
-</head>
-<body>
-  <div style="margin: .5in; height: 400px;">
-    <p><b><tt>text</tt></b></p>
-    <form>
-      <select onChange="setBodyAttr('text',
-        this.options[this.selectedIndex].value);">
-        <option value="black">black</option>
-        <option value="red">red</option>
-      </select>
-      <p><b><tt>bgColor</tt></b></p>
-      <select onChange="setBodyAttr('bgColor',
-        this.options[this.selectedIndex].value);">
-        <option value="white">white</option>
-        <option value="lightgrey">gray</option>
-      </select>
-      <p><b><tt>link</tt></b></p>
-      <select onChange="setBodyAttr('link',
-        this.options[this.selectedIndex].value);">
-        <option value="blue">blue</option>
-        <option value="green">green</option>
-      </select>
-      <small>
-        <a href="http://some.website.tld/page.html" id="sample">
-          (sample link)
-        </a>
-      </small><br />
-      <input type="button" value="version" onclick="ver()" />
-    </form>
-  </div>
-</body>
-</html>
-
- -

To test a lot of interfaces in a single page—for example, a "suite" of properties that affect the colors of a web page—you can create a similar test page with a whole console of buttons, textfields, and other HTML elements. The following screenshot gives you some idea of how interfaces can be grouped together for testing.

- -
-
Figure 0.1 Sample DOM Test Page
-Image:DOM_Ref_Introduction_to_the_DOM.gif
- -

In this example, the drop-down menus dynamically update such DOM—accessible aspects of the web page as its background color (bgColor), the color of the hyperlinks (aLink), and color of the text (text). However, you design your test pages, testing the interfaces as you read about them is an important part of learning how to use the DOM effectively.

- - - - - -
{{DefaultAPISidebar("DOM")}}
diff --git a/files/tr/web/api/event/index.html b/files/tr/web/api/event/index.html deleted file mode 100644 index 5b9e58046e..0000000000 --- a/files/tr/web/api/event/index.html +++ /dev/null @@ -1,202 +0,0 @@ ---- -title: Event -slug: Web/API/Event -tags: - - API - - DOM - - Event - - Interface - - NeedsTranslation - - Reference - - TopicStub - - UI - - listener -translation_of: Web/API/Event ---- -

{{APIRef("DOM")}}

- -

The Event interface represents any event which takes place in the DOM; some are user-generated (such as mouse or keyboard events), while others are generated by APIs (such as events that indicate an animation has finished running, a video has been paused, and so forth). While events are usually triggered by such "external" sources, they can also be triggered programmatically, such as by calling the HTMLElement.click() method of an element, or by defining the event, then sending it to a specified target using EventTarget.dispatchEvent(). There are many types of events, some of which use other interfaces based on the main Event interface. Event itself contains the properties and methods which are common to all events.

- -

Many DOM elements can be set up to accept (or "listen" for) these events, and execute code in response to process (or "handle") them. Event-handlers are usually connected (or "attached") to various HTML elements (such as <button>, <div>, <span>, etc.) using EventTarget.addEventListener(), and this generally replaces using the old HTML event handler attributes. Further, when properly added, such handlers can also be disconnected if needed using removeEventListener(). Note that one element can have several such handlers, even for the exact same event, particularly if separate, independent code modules attach them, each for its own independent purposes (for example, a webpage with an advertising-module and statistics-module both monitoring video-watching). When there are many nested elements, each with its own handler(s), event processing can become very complicated -- especially where a parent element receives the very same event as its child elements because "spatially" they overlap so the event technically occurs in both, and the processing order of such events depends on the Event bubbling and capture settings of each handler triggered.

- -

Interfaces based on Event

- -

Below is a list of interfaces which are based on the main Event interface, with links to their respective documentation in the MDN API reference. Note that all event interfaces have names which end in "Event".

- -
- -
- -

Constructor

- -
-
{{domxref("Event.Event", "Event()")}}
-
Creates an Event object, returning it to the caller.
-
- -

Properties

- -
-
{{domxref("Event.bubbles")}} {{readonlyinline}}
-
A Boolean indicating whether the event bubbles up through the DOM or not.
-
{{domxref("Event.cancelBubble")}}
-
A historical alias to {{domxref("Event.stopPropagation()")}}. Setting its value to true before returning from an event handler prevents propagation of the event.
-
{{domxref("Event.cancelable")}} {{readonlyinline}}
-
A Boolean indicating whether the event is cancelable.
-
{{domxref("Event.composed")}} {{ReadOnlyInline}}
-
A Boolean value indicating whether or not the event can bubble across the boundary between the shadow DOM and the regular DOM.
-
{{domxref("Event.currentTarget")}} {{readonlyinline}}
-
A reference to the currently registered target for the event. This is the object to which the event is currently slated to be sent; it's possible this has been changed along the way through retargeting.
-
{{domxref("Event.deepPath")}} {{non-standard_inline}}
-
An {{jsxref("Array")}} of DOM {{domxref("Node")}}s through which the event has bubbled.
-
{{domxref("Event.defaultPrevented")}} {{readonlyinline}}
-
Indicates whether or not {{domxref("event.preventDefault()")}} has been called on the event.
-
{{domxref("Event.eventPhase")}} {{readonlyinline}}
-
Indicates which phase of the event flow is being processed.
-
{{domxref("Event.explicitOriginalTarget")}} {{non-standard_inline}} {{readonlyinline}}
-
The explicit original target of the event (Mozilla-specific).
-
{{domxref("Event.originalTarget")}} {{non-standard_inline}} {{readonlyinline}}
-
The original target of the event, before any retargetings (Mozilla-specific).
-
{{domxref("Event.returnValue")}}
-
A historical property introduced by Internet Explorer and eventually adopted into the DOM specification in order to ensure existing sites continue to work. Ideally, you should try to use {{domxref("Event.preventDefault()")}} and {{domxref("Event.defaultPrevented")}} instead, but you can use returnValue if you choose to do so.
-
{{domxref("Event.srcElement")}} {{non-standard_inline}}
-
A non-standard alias (from old versions of Microsoft Internet Explorer) for {{domxref("Event.target")}}, which is starting to be supported in some other browsers for web compatibility purposes.
-
{{domxref("Event.target")}} {{readonlyinline}}
-
A reference to the target to which the event was originally dispatched.
-
{{domxref("Event.timeStamp")}} {{readonlyinline}}
-
The time at which the event was created (in milliseconds). By specification, this value is time since epoch, but in reality browsers' definitions vary; in addition, work is underway to change this to be a {{domxref("DOMHighResTimeStamp")}} instead.
-
{{domxref("Event.type")}} {{readonlyinline}}
-
The name of the event (case-insensitive).
-
{{domxref("Event.isTrusted")}} {{readonlyinline}}
-
Indicates whether or not the event was initiated by the browser (after a user click for instance) or by a script (using an event creation method, like event.initEvent).
-
- -

Obsolete properties

- -
-
{{domxref("Event.scoped")}} {{readonlyinline}} {{obsolete_inline}}
-
A {{jsxref("Boolean")}} indicating whether the given event will bubble across through the shadow root into the standard DOM. This property has been renamed to {{domxref("Event.composed", "composed")}}.
-
- -

Methods

- -
-
{{domxref("Event.createEvent()")}} {{deprecated_inline}}
-
-

Creates a new event, which must then be initialized by calling its initEvent() method.

-
-
{{domxref("Event.composedPath()")}}
-
Returns the event’s path (objects on which listeners will be invoked). This does not include nodes in shadow trees if the shadow root was created with its {{domxref("ShadowRoot.mode")}} closed.
-
- -
-
{{domxref("Event.initEvent()")}} {{deprecated_inline}}
-
Initializes the value of an Event created. If the event has already being dispatched, this method does nothing.
-
{{domxref("Event.preventDefault()")}}
-
Cancels the event (if it is cancelable).
-
{{domxref("Event.stopImmediatePropagation()")}}
-
For this particular event, no other listener will be called. Neither those attached on the same element, nor those attached on elements which will be traversed later (in capture phase, for instance)
-
{{domxref("Event.stopPropagation()")}}
-
Stops the propagation of events further along in the DOM.
-
- -

Obsolete methods

- -
-
{{domxref("Event.getPreventDefault()")}} {{non-standard_inline}}
-
Non-standard. Returns the value of {{domxref("Event.defaultPrevented")}}. Use {{domxref("Event.defaultPrevented")}} instead.
-
{{domxref("Event.preventBubble()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}
-
Prevents the event from bubbling. Obsolete, use {{domxref("event.stopPropagation")}} instead.
-
{{domxref("Event.preventCapture()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}
-
Obsolete, use {{domxref("event.stopPropagation")}} instead.
-
- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#interface-event', 'Event')}}{{Spec2('DOM WHATWG')}} 
- -

Browser compatibility

- - - -

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

- -

See also

- - diff --git a/files/tr/web/api/eventtarget/addeventlistener/index.html b/files/tr/web/api/eventtarget/addeventlistener/index.html deleted file mode 100644 index 10d3da4d1a..0000000000 --- a/files/tr/web/api/eventtarget/addeventlistener/index.html +++ /dev/null @@ -1,774 +0,0 @@ ---- -title: EventTarget.addEventListener() -slug: Web/API/EventTarget/addEventListener -translation_of: Web/API/EventTarget/addEventListener ---- -
{{APIRef("DOM Events")}}
- -

{{domxref("EventTarget")}} yöntemi olan addEventListener(), belli bir olay hedefteki elemana ulaştığında çağırılmak üzere bir fonksiyon ayarlar. {{domxref("Element")}}, {{domxref("Document")}}, ve {{domxref("Window")}} en yaygın hedefler olmakla beraber, olayları destekleyen diğer nesneler de olabilir (mesela {{domxref("XMLHttpRequest")}}).

- -

addEventListener() belirli bir olayın dinleyicileri listesine,  {{domxref("EventListener")}}'i uygulayabilecek bir fonksiyon ya da nesne ekleyerek çalışır. Olay gerçekleştiğinde bu fonksiyon ya da nese çağırılır.

- -

Syntax

- -
target.addEventListener(type, listener [, options]);
-target.addEventListener(type, listener [, useCapture]);
-target.addEventListener(type, listener [, useCapture, wantsUntrusted {{Non-standard_inline}}]); // Sadece Gecko/Mozilla
- -

Parametreler

- -
-
type
-
Dinlenecek olan olay tipini belirten, büyük küçük harfe duyarlı dizi
-
listener
-
The object that receives a notification (an object that implements the {{domxref("Event")}} interface) when an event of the specified type occurs. This must be an object implementing the {{domxref("EventListener")}} interface, or a JavaScript function. See {{anch("The event listener callback")}} for details on the callback itself.
-
options {{optional_inline}}
-
-

An options object specifies characteristics about the event listener. The available options are:

- -
-
capture
-
A {{jsxref("Boolean")}} indicating that events of this type will be dispatched to the registered listener before being dispatched to any EventTarget beneath it in the DOM tree.
-
once
-
A {{jsxref("Boolean")}} indicating that the listener should be invoked at most once after being added. If true, the listener would be automatically removed when invoked.
-
passive
-
A {{jsxref("Boolean")}} that, if true, indicates that the function specified by listener will never call {{domxref("Event.preventDefault", "preventDefault()")}}. If a passive listener does call preventDefault(), the user agent will do nothing other than generate a console warning. See {{anch("Improving scrolling performance with passive listeners")}} to learn more.
-
{{non-standard_inline}} mozSystemGroup
-
A {{jsxref("Boolean")}} indicating that the listener should be added to the system group. Available only in code running in XBL or in the {{glossary("chrome")}} of the Firefox browser.
-
-
-
useCapture {{optional_inline}}
-
A {{jsxref("Boolean")}} indicating whether events of this type will be dispatched to the registered listener before being dispatched to any EventTarget beneath it in the DOM tree. Events that are bubbling upward through the tree will not trigger a listener designated to use capture. Event bubbling and capturing are two ways of propagating events that occur in an element that is nested within another element, when both elements have registered a handle for that event. The event propagation mode determines the order in which elements receive the event. See DOM Level 3 Events and JavaScript Event order for a detailed explanation. If not specified, useCapture defaults to false.
-
-
Note: For event listeners attached to the event target, the event is in the target phase, rather than the capturing and bubbling phases. Events in the target phase will trigger all listeners on an element in the order they were registered, regardless of the useCapture parameter.
- -
Note: useCapture has not always been optional. Ideally, you should include it for the widest possible browser compatibility.
-
-
wantsUntrusted {{Non-standard_inline}}
-
A Firefox (Gecko)-specific parameter. If true, the listener receives synthetic events dispatched by web content (the default is false for browser {{glossary("chrome")}} and true for regular web pages). This parameter is useful for code found in add-ons, as well as the browser itself.
-
- -

Döndürülen değer

- -

undefined

- -

Kullanım Notları

- -

Olay dinleyicisi callback'i

- -

The event listener can be specified as either a callback function or an object that implements {{domxref("EventListener")}}, whose {{domxref("EventListener.handleEvent()", "handleEvent()")}} method serves as the callback function.

- -

The callback function itself has the same parameters and return value as the handleEvent() method; that is, the callback accepts a single parameter: an object based on {{domxref("Event")}} describing the event that has occurred, and it returns nothing.

- -

For example, an event handler callback that can be used to handle both {{event("fullscreenchange")}} and {{event("fullscreenerror")}} might look like this:

- -
function eventHandler(event) {
-  if (event.type == 'fullscreenchange') {
-    /* handle a full screen toggle */
-  } else /* fullscreenerror */ {
-    /* handle a full screen toggle error */
-  }
-}
- -

Güvenli bir şekilde option desteğini fark etmek

- -

In older versions of the DOM specification, the third parameter of addEventListener() was a Boolean value indicating whether or not to use capture. Over time, it became clear that more options were needed. Rather than adding more parameters to the function (complicating things enormously when dealing with optional values), the third parameter was changed to an object that can contain various properties defining the values of options to configure the process of removing the event listener.

- -

Because older browsers (as well as some not-too-old browsers) still assume the third parameter is a Boolean, you need to build your code to handle this scenario intelligently. You can do this by using feature detection for each of the options you're interested in.

- -

For example, if you want to check for the passive option:

- -
let passiveSupported = false;
-
-try {
-  const options = {
-    get passive() { // This function will be called when the browser
-                    //   attempts to access the passive property.
-      passiveSupported = true;
-      return false;
-    }
-  };
-
-  window.addEventListener("test", null, options);
-  window.removeEventListener("test", null, options);
-} catch(err) {
-  passiveSupported = false;
-}
-
- -

This creates an options object with a getter function for the passive property; the getter sets a flag, passiveSupported, to true if it gets called. That means that if the browser checks the value of the passive property on the options object, passiveSupported will be set to true; otherwise, it will remain false. We then call addEventListener() to set up a fake event handler, specifying those options, so that the options will be checked if the browser recognizes an object as the third parameter. Then, we call removeEventListener() to clean up after ourselves. (Note that handleEvent() is ignored on event listeners that aren't called.)

- -

You can check whether any option is supported this way. Just add a getter for that option using code similar to what is shown above.

- -

Then, when you want to create an actual event listener that uses the options in question, you can do something like this:

- -
someElement.addEventListener("mouseup", handleMouseUp, passiveSupported
-                               ? { passive: true } : false);
- -

Here we're adding a listener for the {{event("mouseup")}} event on the element someElement. For the third parameter, if passiveSupported is true, we're specifying an options object with passive set to true; otherwise, we know that we need to pass a Boolean, and we pass false as the value of the useCapture parameter.

- -

If you'd prefer, you can use a third-party library like Modernizr or Detect It to do this test for you.

- -

You can learn more from the article about EventListenerOptions from the Web Incubator Community Group.

- -

Örnekler

- -

Basit bir dinleyici ekleme

- -

This example demonstrates how to use addEventListener() to watch for mouse clicks on an element.

- -

HTML

- -
<table id="outside">
-  <tr><td id="t1">one</td></tr>
-  <tr><td id="t2">two</td></tr>
-</table>
-
- -

JavaScript

- -
// t2'nin içeriğini değiştirme fonksiyonu
-function modifyText() {
-  const t2 = document.getElementById("t2");
-  if (t2.firstChild.nodeValue == "three") {
-    t2.firstChild.nodeValue = "two";
-  } else {
-    t2.firstChild.nodeValue = "three";
-  }
-}
-
-// Tabloya olay dinleyicisi ekleme
-const el = document.getElementById("outside");
-el.addEventListener("click", modifyText, false);
-
- -

In this code, modifyText() is a listener for click events registered using addEventListener(). A click anywhere in the table bubbles up to the handler and runs modifyText().

- -

Sonuç

- -

{{EmbedLiveSample('Add_a_simple_listener')}}

- -

Anonim fonksiyonlu olay dinleyicisi

- -

Here, we'll take a look at how to use an anonymous function to pass parameters into the event listener.

- -

HTML

- -
<table id="outside">
-  <tr><td id="t1">one</td></tr>
-  <tr><td id="t2">two</td></tr>
-</table>
- -

JavaScript

- -
// t2'nin içeriğini değiştirme fonksiyonu
-function modifyText(new_text) {
-  const t2 = document.getElementById("t2");
-  t2.firstChild.nodeValue = new_text;
-}
-
-// Tabloya olay dinleyicisi ekleme fonksiyonu
-const el = document.getElementById("outside");
-el.addEventListener("click", function(){modifyText("four")}, false);
-
- -

Notice that the listener is an anonymous function that encapsulates code that is then, in turn, able to send parameters to the modifyText() function, which is responsible for actually responding to the event.

- -

Sonuç

- -

{{EmbedLiveSample('Event_listener_with_anonymous_function')}}

- -

Oklu fonksiyon ile olay dinleyicisi

- -

This example demonstrates a simple event listener implemented using arrow function notation.

- -

HTML

- -
<table id="outside">
-  <tr><td id="t1">one</td></tr>
-  <tr><td id="t2">two</td></tr>
-</table>
-
- -

JavaScript

- -
// t2'nin içeriğini değiştirme fonksiyonu
-function modifyText(new_text) {
-  const t2 = document.getElementById("t2");
-  t2.firstChild.nodeValue = new_text;
-}
-
-// Oklu fonksiyon ile tabloya olay dinleyicisi ekleme
-const el = document.getElementById("outside");
-el.addEventListener("click", () => { modifyText("four"); }, false);
-
- -

Sonuç

- -

{{EmbedLiveSample('Event_listener_with_an_arrow_function')}}

- -

Please note that while anonymous and arrow functions are similar, they have different this bindings. While anonymous (and all traditional JavaScript functions) create their own this bindings, arrow functions inherit the this binding of the containing function.

- -

That means that the variables and constants available to the containing function are also available to the event handler when using an arrow function.

- -

Options kullanma örnekleri

- -

HTML

- -
<div class="outer">
-  outer, once & none-once
-  <div class="middle" target="_blank">
-    middle, capture & none-capture
-    <a class="inner1" href="https://www.mozilla.org" target="_blank">
-      inner1, passive & preventDefault(which is not allowed)
-    </a>
-    <a class="inner2" href="https://developer.mozilla.org/" target="_blank">
-      inner2, none-passive & preventDefault(not open new page)
-    </a>
-  </div>
-</div>
-
- -

CSS

- -
.outer, .middle, .inner1, .inner2 {
-  display: block;
-  width:   520px;
-  padding: 15px;
-  margin:  15px;
-  text-decoration: none;
-}
-.outer {
-  border: 1px solid red;
-  color:  red;
-}
-.middle {
-  border: 1px solid green;
-  color:  green;
-  width:  460px;
-}
-.inner1, .inner2 {
-  border: 1px solid purple;
-  color:  purple;
-  width:  400px;
-}
-
- -

JavaScript

- -
const outer  = document.querySelector('.outer');
-const middle = document.querySelector('.middle');
-const inner1 = document.querySelector('.inner1');
-const inner2 = document.querySelector('.inner2');
-
-const capture = {
-  capture : true
-};
-const noneCapture = {
-  capture : false
-};
-const once = {
-  once : true
-};
-const noneOnce = {
-  once : false
-};
-const passive = {
-  passive : true
-};
-const nonePassive = {
-  passive : false
-};
-
-outer.addEventListener('click', onceHandler, once);
-outer.addEventListener('click', noneOnceHandler, noneOnce);
-middle.addEventListener('click', captureHandler, capture);
-middle.addEventListener('click', noneCaptureHandler, noneCapture);
-inner1.addEventListener('click', passiveHandler, passive);
-inner2.addEventListener('click', nonePassiveHandler, nonePassive);
-
-function onceHandler(event) {
-  alert('outer, once');
-}
-function noneOnceHandler(event) {
-  alert('outer, none-once, default');
-}
-function captureHandler(event) {
-  //event.stopImmediatePropagation();
-  alert('middle, capture');
-}
-function noneCaptureHandler(event) {
-  alert('middle, none-capture, default');
-}
-function passiveHandler(event) {
-  // Unable to preventDefault inside passive event listener invocation.
-  event.preventDefault();
-  alert('inner1, passive, open new page');
-}
-function nonePassiveHandler(event) {
-  event.preventDefault();
-  //event.stopPropagation();
-  alert('inner2, none-passive, default, not open new page');
-}
-
- -

Sonuç

- -

Click the outer, middle, inner containers respectively to see how the options work.

- -

{{ EmbedLiveSample('Example_of_options_usage', 600, 310, '', 'Web/API/EventTarget/addEventListener') }}

- -

Before using a particular value in the options object, it's a good idea to ensure that the user's browser supports it, since these are an addition that not all browsers have supported historically. See {{anch("Safely detecting option support")}} for details.

- -

Diğer notlar

- -

Neden addEventListener() kullanalım?

- -

addEventListener() is the way to register an event listener as specified in W3C DOM. The benefits are as follows:

- - - -

The alternative, older way to register event listeners, is described below.

- -

Olay servisi anında dinleyici eklemek

- -

Eğer bir {{domxref("EventListener")}} {{domxref("EventTarget")}}'a olayı işlerken eklenirse, o dinleyici o olaydan dolay tetiklenmez. Ancak, yeni eklenen bu dinleyici, olayın servisinin ileriki bir sürecinde tetiklenebilir, mesela 'bubbling phase' (olay dinleyicisinin alt elemanlardan üst elemanlara doğru ilerlediği durum).

- -

Birden fazla aynı olay dinleyicisi

- -

If multiple identical EventListeners are registered on the same EventTarget with the same parameters, the duplicate instances are discarded. They do not cause the EventListener to be called twice, and they do not need to be removed manually with the {{domxref("EventTarget.removeEventListener()", "removeEventListener()")}} method.

- -

Note, however that when using an anonymous function as the handler, such listeners will NOT be identical, because anonymous functions are not identical even if defined using the SAME unchanging source-code simply called repeatedly, even if in a loop.

- -

However, repeatedly defining the same named function in such cases can be more problematic. (See Memory issues, below.)

- -

Olay giderici içinde this 'in değeri

- -

It is often desirable to reference the element on which the event handler was fired, such as when using a generic handler for a set of similar elements.

- -

If attaching a handler function to an element using addEventListener(), the value of {{jsxref("Operators/this","this")}}> inside the handler is a reference to the element. It is the same as the value of the currentTarget property of the event argument that is passed to the handler.

- -
my_element.addEventListener('click', function (e) {
-  console.log(this.className)           // logs the className of my_element
-  console.log(e.currentTarget === this) // logs `true`
-})
-
- -

As a reminder, arrow functions do not have their own this context.

- -
my_element.addEventListener('click', (e) => {
-  console.log(this.className)           // WARNING: `this` is not `my_element`
-  console.log(e.currentTarget === this) // logs `false`
-})
- -

If an event handler (for example, {{domxref("Element.onclick", "onclick")}}) is specified on an element in the HTML source, the JavaScript code in the attribute value is effectively wrapped in a handler function that binds the value of this in a manner consistent with the addEventListener(); an occurrence of this within the code represents a reference to the element.

- -
<table id="my_table" onclick="console.log(this.id);"><!-- `this` refers to the table; logs 'my_table' -->
-  ...
-</table>
-
- -

Note that the value of this inside a function, called by the code in the attribute value, behaves as per standard rules. This is shown in the following example:

- -
<script>
-  function logID() { console.log(this.id); }
-</script>
-<table id="my_table" onclick="logID();"><!-- when called, `this` will refer to the global object -->
-  ...
-</table>
-
- -

The value of this within logID() is a reference to the global object {{domxref("Window")}} (or undefined in the case of {{jsxref("Reference/Strict_mode", "strict mode")}}.

- -

 this 'i bind() kullanarak belirtmek

- -

The {{jsxref("Function.prototype.bind()")}}> method lets you specify the value that should be used as this for all calls to a given function. This lets you easily bypass problems where it's unclear what this will be, depending on the context from which your function was called. Note, however, that you'll need to keep a reference to the listener around so you can remove it later.

- -

This is an example with and without bind():

- -
const Something = function(element) {
-  // |this| is a newly created object
-  this.name = 'Something Good';
-  this.onclick1 = function(event) {
-    console.log(this.name); // undefined, as |this| is the element
-  };
-  this.onclick2 = function(event) {
-    console.log(this.name); // 'Something Good', as |this| is bound to newly created object
-  };
-  element.addEventListener('click', this.onclick1, false);
-  element.addEventListener('click', this.onclick2.bind(this), false); // Trick
-}
-const s = new Something(document.body);
-
- -

Another solution is using a special function called handleEvent() to catch any events:

- -
const Something = function(element) {
-  // |this| is a newly created object
-  this.name = 'Something Good';
-  this.handleEvent = function(event) {
-    console.log(this.name); // 'Something Good', as this is bound to newly created object
-    switch(event.type) {
-      case 'click':
-        // some code here...
-        break;
-      case 'dblclick':
-        // some code here...
-        break;
-    }
-  };
-
-  // Note that the listeners in this case are |this|, not this.handleEvent
-  element.addEventListener('click', this, false);
-  element.addEventListener('dblclick', this, false);
-
-  // You can properly remove the listeners
-  element.removeEventListener('click', this, false);
-  element.removeEventListener('dblclick', this, false);
-}
-const s = new Something(document.body);
-
- -

Another way of handling the reference to this is to pass to the EventListener a function that calls the method of the object that contains the fields that need to be accessed:

- -
class SomeClass {
-
-  constructor() {
-    this.name = 'Something Good';
-  }
-
-  register() {
-    const that = this;
-    window.addEventListener('keydown', function(e) { that.someMethod(e); });
-  }
-
-  someMethod(e) {
-    console.log(this.name);
-    switch(e.keyCode) {
-      case 5:
-        // some code here...
-        break;
-      case 6:
-        // some code here...
-        break;
-    }
-  }
-
-}
-
-const myObject = new SomeClass();
-myObject.register();
- -

Olay dinleyicisinde data giriş çıkışı

- -

It may seem that event listeners are like islands, and that it is extremely difficult to pass them any data, much less to get any data back from them after they execute. Event listeners only take one argument, the Event Object, which is automatically passed to the listener, and the return value is ignored. So how can we get data in and back out of them again? There are a number of good methods for doing this.

- -

Datayı this kullanarak dinleyiciye iletmek

- -

As mentioned above, you can use Function.prototype.bind() to pass a value to an event listener via the this reference variable.

- -
const myButton = document.getElementById('my-button-id');
-const someString = 'Data';
-
-myButton.addEventListener('click', function () {
-  console.log(this);  // Expected Value: 'Data'
-}.bind(someString));
-
- -

This method is suitable when you don't need to know which HTML element the event listener fired on programmatically from within the event listener. The primary benefit to doing this is that the event listener receives the data in much the same way that it would if you were to actually pass it through its argument list.

- -

Getting Data Into an Event Listener Using the Outer Scope Property

- -

When an outer scope contains a variable declaration (with const, let), all the inner functions declared in that scope have access to that variable (look here for information on outer/inner functions, and here for information on variable scope). Therefore, one of the simplest ways to access data from outside of an event listener is to make it accessible to the scope in which the event listener is declared.

- -
const myButton = document.getElementById('my-button-id');
-const someString = 'Data';
-
-myButton.addEventListener('click', function() {
-  console.log(someString);  // Expected Value: 'Data'
-
-  someString = 'Data Again';
-});
-
-console.log(someString);  // Expected Value: 'Data' (will never output 'Data Again')
-
- -
-

Note: Although inner scopes have access to const, let variables from outer scopes, you cannot expect any changes to these variables to be accessible after the event listener definition, within the same outer scope. Why? Simply because by the time the event listener would execute, the scope in which it was defined would have already finished executing.

-
- -

Getting Data Into and Out of an Event Listener Using Objects

- -

Unlike most functions in JavaScript, objects are retained in memory as long as a variable referencing them exists in memory. This, and the fact that objects can have properties, and that they can be passed around by reference, makes them likely candidates for sharing data among scopes. Let's explore this.

- -
-

Note: Functions in JavaScript are actually objects. (Hence they too can have properties, and will be retained in memory even after they finish executing if assigned to a variable that persists in memory.)

-
- -

Because object properties can be used to store data in memory as long as a variable referencing the object exists in memory, you can actually use them to get data into an event listener, and any changes to the data back out after an event handler executes. Consider this example.

- -
const myButton = document.getElementById('my-button-id');
-const someObject = {aProperty: 'Data'};
-
-myButton.addEventListener('click', function() {
-  console.log(someObject.aProperty);  // Expected Value: 'Data'
-
-  someObject.aProperty = 'Data Again';  // Change the value
-});
-
-window.setInterval(function() {
-  if (someObject.aProperty === 'Data Again') {
-    console.log('Data Again: True');
-    someObject.aProperty = 'Data';  // Reset value to wait for next event execution
-  }
-}, 5000);
-
- -

In this example, even though the scope in which both the event listener and the interval function are defined would have finished executing before the original value of someObject.aProperty would have changed, because someObject persists in memory (by reference) in both the event listener and interval function, both have access to the same data (i.e. when one changes the data, the other can respond to the change).

- -
-

Note: Objects are stored in variables by reference, meaning only the memory location of the actual data is stored in the variable. Among other things, this means variables that "store" objects can actually affect other variables that get assigned ("store") the same object reference. When two variables reference the same object (e.g., let a = b = {aProperty: 'Yeah'};), changing the data in either variable will affect the other.

-
- -
-

Note: Because objects are stored in variables by reference, you can return an object from a function to keep it alive (preserve it in memory so you don't lose the data) after that function stops executing.

-
- -

Internet Explorer'dan miras kalan attachEvent

- -

In Internet Explorer versions before IE 9, you have to use {{domxref("EventTarget.attachEvent", "attachEvent()")}}, rather than the standard addEventListener(). For IE, we modify the preceding example to:

- -
if (el.addEventListener) {
-  el.addEventListener('click', modifyText, false);
-} else if (el.attachEvent)  {
-  el.attachEvent('onclick', modifyText);
-}
-
- -

There is a drawback to attachEvent(): The value of this will be a reference to the window object, instead of the element on which it was fired.

- -

The attachEvent() method could be paired with the onresize event to detect when certain elements in a web page were resized. The proprietary mselementresize event, when paired with the addEventListener method of registering event handlers, provides similar functionality as onresize, firing when certain HTML elements are resized.

- -

Uyumluluk

- -

You can work around addEventListener(), removeEventListener(), {{domxref("Event.preventDefault()")}}, and {{domxref("Event.stopPropagation()")}} not being supported by Internet Explorer 8 by using the following code at the beginning of your script. The code supports the use of handleEvent() and also the {{event("DOMContentLoaded")}} event.

- -
-

Note: useCapture is not supported, as IE 8 does not have any alternative method. The following code only adds IE 8 support. This IE 8 polyfill only works in standards mode: a doctype declaration is required.

-
- -
(function() {
-  if (!Event.prototype.preventDefault) {
-    Event.prototype.preventDefault=function() {
-      this.returnValue=false;
-    };
-  }
-  if (!Event.prototype.stopPropagation) {
-    Event.prototype.stopPropagation=function() {
-      this.cancelBubble=true;
-    };
-  }
-  if (!Element.prototype.addEventListener) {
-    var eventListeners=[];
-
-    var addEventListener=function(type,listener /*, useCapture (will be ignored) */) {
-      var self=this;
-      var wrapper=function(e) {
-        e.target=e.srcElement;
-        e.currentTarget=self;
-        if (typeof listener.handleEvent != 'undefined') {
-          listener.handleEvent(e);
-        } else {
-          listener.call(self,e);
-        }
-      };
-      if (type=="DOMContentLoaded") {
-        var wrapper2=function(e) {
-          if (document.readyState=="complete") {
-            wrapper(e);
-          }
-        };
-        document.attachEvent("onreadystatechange",wrapper2);
-        eventListeners.push({object:this,type:type,listener:listener,wrapper:wrapper2});
-
-        if (document.readyState=="complete") {
-          var e=new Event();
-          e.srcElement=window;
-          wrapper2(e);
-        }
-      } else {
-        this.attachEvent("on"+type,wrapper);
-        eventListeners.push({object:this,type:type,listener:listener,wrapper:wrapper});
-      }
-    };
-    var removeEventListener=function(type,listener /*, useCapture (will be ignored) */) {
-      var counter=0;
-      while (counter<eventListeners.length) {
-        var eventListener=eventListeners[counter];
-        if (eventListener.object==this && eventListener.type==type && eventListener.listener==listener) {
-          if (type=="DOMContentLoaded") {
-            this.detachEvent("onreadystatechange",eventListener.wrapper);
-          } else {
-            this.detachEvent("on"+type,eventListener.wrapper);
-          }
-          eventListeners.splice(counter, 1);
-          break;
-        }
-        ++counter;
-      }
-    };
-    Element.prototype.addEventListener=addEventListener;
-    Element.prototype.removeEventListener=removeEventListener;
-    if (HTMLDocument) {
-      HTMLDocument.prototype.addEventListener=addEventListener;
-      HTMLDocument.prototype.removeEventListener=removeEventListener;
-    }
-    if (Window) {
-      Window.prototype.addEventListener=addEventListener;
-      Window.prototype.removeEventListener=removeEventListener;
-    }
-  }
-})();
- -

Eski bir olay dinleyicisini ekleme yolu 

- -

addEventListener() was introduced with the DOM 2 Events specification. Before then, event listeners were registered as follows:

- -
// Passing a function reference — do not add '()' after it, which would call the function!
-el.onclick = modifyText;
-
-// Using a function expression
-element.onclick = function() {
-  // ... function logic ...
-};
-
- -

This method replaces the existing click event listener(s) on the element if there are any. Other events and associated event handlers such as blur (onblur) and keypress (onkeypress) behave similarly.

- -

Because it was essentially part of {{glossary("DOM", "DOM 0")}}, this technique for adding event listeners is very widely supported and requires no special cross-browser code. It is used to register event listeners dynamically when very old browsers (like IE <=8) must be supported; see the table below for details on browser support for addEventListener.

- -

Hafıza sorunları

- -
const els = document.getElementsByTagName('*');
-
-
-// Case 1
-for(let i=0 ; i < els.length; i++){
-  els[i].addEventListener("click", function(e){/*do something*/}, false);
-}
-
-
-// Case 2
-function processEvent(e){
-  /* do something */
-}
-
-for(let i=0 ; i < els.length; i++){
-  els[i].addEventListener("click", processEvent, false);
-}
-
- -

In the first case above, a new (anonymous) handler function is created with each iteration of the loop. In the second case, the same previously declared function is used as an event handler, which results in smaller memory consumption because there is only one handler function created. Moreover, in the first case, it is not possible to call {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} because no reference to the anonymous function is kept (or here, not kept to any of the multiple anonymous functions the loop might create.) In the second case, it's possible to do myElement.removeEventListener("click", processEvent, false) because processEvent is the function reference.

- -

Actually, regarding memory consumption, the lack of keeping a function reference is not the real issue; rather it is the lack of keeping a STATIC function reference. In both problem-cases below, a function reference is kept, but since it is redefined on each iteration, it is not static. In the third case, the reference to the anonymous function is being reassigned with each iteration. In the fourth case, the entire function definition is unchanging, but it is still being repeatedly defined as if new (unless it was [[promoted]] by the compiler) and so is not static. Therefore, though appearing to be simply [[Multiple identical event listeners]], in both cases each iteration will instead create a new listener with its own unique reference to the handler function. However, since the function definition itself does not change, the SAME function may still be called for every duplicate listener (especially if the code gets optimized.)

- -

Also in both cases, because the function reference was kept but repeatedly redefined with each add, the remove-statement from above can still remove a listener, but now only the last one added.

- -
// For illustration only: Note "MISTAKE" of [j] for [i] thus causing desired events to all attach to SAME element
-
-// Case 3
-for(let i=0, j=0 ; i<els.length ; i++){
-  /* do lots of stuff with j */
-  els[j].addEventListener("click", processEvent = function(e){/*do something*/}, false);
-}
-
-// Case 4
-for(let i=0, j=0 ; i<els.length ; i++){
-  /* do lots of stuff with j */
-  function processEvent(e){/*do something*/};
-  els[j].addEventListener("click", processEvent, false);
-}
- -

Sayfa kaydırma performansını pasif dinleyiciler ile iyileştirmek

- -

According to the specification, the default value for the passive option is always false. However, this introduces the potential for event listeners handling certain touch events (among others) to block the browser's main thread while it is attempting to handle scrolling, resulting in possibly enormous reduction in performance during scroll handling.

- -

To prevent this problem, some browsers (specifically, Chrome and Firefox) have changed the default value of the passive option to true for the {{event("touchstart")}} and {{event("touchmove")}} events on the document-level nodes {{domxref("Window")}}, {{domxref("Document")}}, and {{domxref("Document.body")}}. This prevents the event listener from being called, so it can't block page rendering while the user is scrolling.

- -
-

Note: See the compatibility table below if you need to know which browsers (and/or which versions of those browsers) implement this altered behavior.

-
- -

You can override this behavior by explicitly setting the value of passive to false, as shown here:

- -
/* Feature detection */
-let passiveIfSupported = false;
-
-try {
-  window.addEventListener("test", null,
-    Object.defineProperty(
-      {},
-      "passive",
-      {
-        get: function() { passiveIfSupported = { passive: false }; }
-      }
-    )
-  );
-} catch(err) {}
-
-window.addEventListener('scroll', function(event) {
-  /* do something */
-  // can't use event.preventDefault();
-}, passiveIfSupported );
-
- -

On older browsers that don't support the options parameter to addEventListener(), attempting to use it prevents the use of the useCapture argument without proper use of feature detection.

- -

You don't need to worry about the value of passive for the basic {{event("scroll")}} event. Since it can't be canceled, event listeners can't block page rendering anyway.

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("DOM WHATWG", "#dom-eventtarget-addeventlistener", "EventTarget.addEventListener()")}}{{Spec2("DOM WHATWG")}}
{{SpecName("DOM4", "#dom-eventtarget-addeventlistener", "EventTarget.addEventListener()")}}{{Spec2("DOM4")}}
{{SpecName("DOM2 Events", "#Events-EventTarget-addEventListener", "EventTarget.addEventListener()")}}{{Spec2("DOM2 Events")}}Initial definition
- -

Tarayıcı Uyumluluğu

- - - -

{{Compat("api.EventTarget.addEventListener", 3)}}

- -

Ek olarak

- - diff --git a/files/tr/web/api/eventtarget/index.html b/files/tr/web/api/eventtarget/index.html deleted file mode 100644 index a5872453c9..0000000000 --- a/files/tr/web/api/eventtarget/index.html +++ /dev/null @@ -1,169 +0,0 @@ ---- -title: EventTarget -slug: Web/API/EventTarget -tags: - - API - - DOM - - DOM Events - - Interface - - NeedsTranslation - - TopicStub -translation_of: Web/API/EventTarget ---- -

{{ApiRef("DOM Events")}}

- -

EventTarget is an interface implemented by objects that can receive events and may have listeners for them.

- -

{{domxref("Element")}}, {{domxref("document")}}, and {{domxref("window")}} are the most common event targets, but other objects can be event targets too, for example {{domxref("XMLHttpRequest")}}, {{domxref("AudioNode")}}, {{domxref("AudioContext")}}, and others.

- -

Many event targets (including elements, documents, and windows) also support setting event handlers via on... properties and attributes.

- -

Methods

- -
-
{{domxref("EventTarget.addEventListener()")}}
-
Register an event handler of a specific event type on the EventTarget.
-
{{domxref("EventTarget.removeEventListener()")}}
-
Removes an event listener from the EventTarget.
-
{{domxref("EventTarget.dispatchEvent()")}}
-
Dispatch an event to this EventTarget.
-
- -

Additional methods for Mozilla chrome code

- -

Mozilla extensions for use by JS-implemented event targets to implement on* properties. See also WebIDL bindings.

- - - -

Example:

- -

Simple implementation of EventTarget

- -
var EventTarget = function() {
-  this.listeners = {};
-};
-
-EventTarget.prototype.listeners = null;
-EventTarget.prototype.addEventListener = function(type, callback) {
-  if(!(type in this.listeners)) {
-    this.listeners[type] = [];
-  }
-  this.listeners[type].push(callback);
-};
-
-EventTarget.prototype.removeEventListener = function(type, callback) {
-  if(!(type in this.listeners)) {
-    return;
-  }
-  var stack = this.listeners[type];
-  for(var i = 0, l = stack.length; i < l; i++) {
-    if(stack[i] === callback){
-      stack.splice(i, 1);
-      return this.removeEventListener(type, callback);
-    }
-  }
-};
-
-EventTarget.prototype.dispatchEvent = function(event) {
-  if(!(event.type in this.listeners)) {
-    return;
-  }
-  var stack = this.listeners[event.type];
-  event.target = this;
-  for(var i = 0, l = stack.length; i < l; i++) {
-      stack[i].call(this, event);
-  }
-};
-
- -{{ EmbedLiveSample('_Simple_implementation_of_EventTarget') }} - -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#interface-eventtarget', 'EventTarget')}}{{Spec2('DOM WHATWG')}}No change.
{{SpecName('DOM3 Events', 'DOM3-Events.html#interface-EventTarget', 'EventTarget')}}{{Spec2('DOM3 Events')}}A few parameters are now optional (listener), or accepts the null value (useCapture).
{{SpecName('DOM2 Events', 'events.html#Events-EventTarget', 'EventTarget')}}{{Spec2('DOM2 Events')}}Initial definition.
- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatGeckoDesktop("1")}}9.071.0[1]
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.0{{CompatGeckoMobile("1")}}9.06.01.0
-
- -

[1] window.EventTarget does not exist.

- -

See Also

- - diff --git a/files/tr/web/api/eventtarget/removeeventlistener/index.html b/files/tr/web/api/eventtarget/removeeventlistener/index.html deleted file mode 100644 index 36617f7d0c..0000000000 --- a/files/tr/web/api/eventtarget/removeeventlistener/index.html +++ /dev/null @@ -1,274 +0,0 @@ ---- -title: EventTarget.removeEventListener() -slug: Web/API/EventTarget/removeEventListener -translation_of: Web/API/EventTarget/removeEventListener ---- -

{{APIRef("DOM Events")}}

- -

The EventTarget.removeEventListener() methodu daha önce  {{domxref("EventTarget.addEventListener()")}} ile kaydedilmiş olan {{domxref("EventListener")}}'i kaldırır.

- -

Yazım

- -
target.removeEventListener(type, listener[, options]);
-target.removeEventListener(type, listener[, useCapture]);
-
- -

Parametreler

- -
-
type
-
Kaldırılacak olan eventListener'in türünü belirten String.
-
listener
-
Kaldırılacak olan {{domxref("EventListener")}} fonksiyonu.
-
options {{optional_inline}}
-
{{domxref("EventListener")}} objesinin karakteristliğini belirten seçenek. Kullanılabilecek seçenekler: -
    -
  • capture: {{jsxref("Boolean")}}.Bu, benzer türdeki olayların DOM ağacında altında kalan herhangi bir EventTarget'tan önce kayıtlı dinleyiciye iletileceği anlamına gelir. 
    • -
  • passive: {{jsxref("Boolean")}}. Dinleyicinin asla preventDefault( ) fonksiyonunu çağıramayacağını belirten {{jsxref("Boolean")}}. Dinleyici çağırsa bile "user-agent" bunu dikkate almayacaktır ve bu konuda bşr konsol uyarısında bulunacaktır.
    • -
  • {{non-standard_inline}} mozSystemGroup: Sadece XBL ya da Firefox' chrome da çalışan kodta geçerlidir.Belirtilen olay dinleyicisinin sistem gurubuna atanıp atanmadığını gösteren {{jsxref("Boolean")}} dır.
    • -
-
-
useCapture {{optional_inline}}
-
Kaldırılacak olan {{domxref("EventListener")}}'in capturing EventListener olup olmadığını belirtir. Eğer bu alan kullanılmazsa varsayılan deferi "false" olarak kabul edilir.
-
Eğer bir olay dinleyici bir defa yakalayıcı bir defa yakalayıcı olmayacak şekilde iki defa kayıt edilmişse her birini ayrı ayrı kaldırın. Kaydedici olan olay dinleyicinin kaldırılması diğer olay dinleyici etkilemez.
-
- -
Note: useCapture çoğu eski tarayıcılarda gerekli bir alandır. Eğer geniş uyumluluğu hedefliyorsanız bu parametreyi sağlamanız önerilir.
- -

Return Value

- -

Void.

- -

Notlar

- -

Eğer bir {{domxref("EventListener")}} , {{domxref("EventTarget")}}'tan bir olayı işlerken kaldırılmışsa en son yapılan aksiyonlardan bir daha çağrılamaz. Ama tekrar atanabilir.

- -

removeEventListener() fonksiyonunun argümanlarla çağırılması EventTarget üzerinde herhangi bir {{domxref("EventListener")}}'in olup olmadığını kontrol etmede kullanılamaz.

- -

Örnek

- -

Bu örnekte nasıl fareye basma tabanlı olay dinleyicisi eklemeyi ve üzerine fareyle üzerine gelme tabanlı olay dinleyicisinin kaldırmanın nasıl yapılacağını göstermektedir.

- -
var body =
-        document.querySelector('body'),
-    clickTarget =
-        document.getElementById('click-target'),
-    mouseOverTarget =
-        document.getElementById('mouse-over-target'),
-    toggle = false;
-
-function makeBackgroundYellow() {
-    'use strict';
-
-    if (toggle) {
-        body.style.backgroundColor = 'white';
-    } else {
-        body.style.backgroundColor = 'yellow';
-    }
-
-    toggle = !toggle;
-}
-
-clickTarget.addEventListener('click',
-    makeBackgroundYellow,
-    false
-);
-
-mouseOverTarget.addEventListener('mouseover', function () {
-    'use strict';
-
-    clickTarget.removeEventListener('click',
-        makeBackgroundYellow,
-        false
-    );
-});
-
- -

Özellikler

- - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("DOM WHATWG", "#dom-eventtarget-removeeventlistener", "EventTarget.removeEventListener()")}}{{Spec2("DOM WHATWG")}} 
{{SpecName("DOM4", "#dom-eventtarget-removeeventlistener", "EventTarget.removeEventListener()")}}{{Spec2("DOM4")}} 
{{SpecName("DOM2 Events", "#Events-EventTarget-removeEventListener", "EventTarget.removeEventListener()")}}{{Spec2("DOM2 Events")}}Initial definition
- -

Tarayıcı Desteği

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0[1][2]{{CompatGeckoDesktop("1")}}[3]9.07[4]1.0[1]
useCapture made optional{{CompatVersionUnknown}}6.09.011.60{{CompatVersionUnknown}}
options parameter{{CompatChrome(49.0)}}    
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support1.0[1]{{CompatVersionUnknown}}[2]{{CompatGeckoMobile("1")}}[3]9.06.0[4]1.0[1]{{CompatVersionUnknown}}[2]
useCapture made optional{{CompatUnknown}}{{CompatVersionUnknown}}    {{CompatVersionUnknown}}
options parameter{{CompatNo}}{{CompatChrome(49.0)}}    {{CompatChrome(49.0)}}
-
- -

[1] Although WebKit explicitly added "[optional]" to the useCapture parameter for Safari 5.1 and Chrome 13, it had been working before the change.

- -

[2] Before Chrome 49, the type and listener parameters were optional.

- -

[2] Prior to Firefox 6, the browser would throw an exception if the useCapture parameter was not explicitly false. Prior to Gecko 9.0 {{geckoRelease("9.0")}}, addEventListener() would throw an exception if the listener parameter was null; now the method returns without error, but without doing anything.

- -

[4] Opera 11.60 made the useCapture parameter optional (source).

- -

[5] For backwards compatibility, browsers that support options allow the third parameter to be either options or Boolean.

- -

Eski Tarayıcılara Polyfill Desteği

- -

addEventListener() ve removeEventListener() eski tarayıcılarda bulunmaz. Onun yerine aşağıdaki kodu scriptlerinizin başına ekleyerek bu fonksiyonların kullanımını sağlayabilirsiniz. Ne yazık ki bu methot Internet Explorer 7 ya da öncesinde Element.prototype'ı extend etme desteğinin Explorer 8 gelene kadar sağlanmadığı için çalışmaz.

- -
if (!Element.prototype.addEventListener) {
-  var oListeners = {};
-  function runListeners(oEvent) {
-    if (!oEvent) { oEvent = window.event; }
-    for (var iLstId = 0, iElId = 0, oEvtListeners = oListeners[oEvent.type]; iElId < oEvtListeners.aEls.length; iElId++) {
-      if (oEvtListeners.aEls[iElId] === this) {
-        for (iLstId; iLstId < oEvtListeners.aEvts[iElId].length; iLstId++) { oEvtListeners.aEvts[iElId][iLstId].call(this, oEvent); }
-        break;
-      }
-    }
-  }
-  Element.prototype.addEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) {
-    if (oListeners.hasOwnProperty(sEventType)) {
-      var oEvtListeners = oListeners[sEventType];
-      for (var nElIdx = -1, iElId = 0; iElId < oEvtListeners.aEls.length; iElId++) {
-        if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; }
-      }
-      if (nElIdx === -1) {
-        oEvtListeners.aEls.push(this);
-        oEvtListeners.aEvts.push([fListener]);
-        this["on" + sEventType] = runListeners;
-      } else {
-        var aElListeners = oEvtListeners.aEvts[nElIdx];
-        if (this["on" + sEventType] !== runListeners) {
-          aElListeners.splice(0);
-          this["on" + sEventType] = runListeners;
-        }
-        for (var iLstId = 0; iLstId < aElListeners.length; iLstId++) {
-          if (aElListeners[iLstId] === fListener) { return; }
-        }
-        aElListeners.push(fListener);
-      }
-    } else {
-      oListeners[sEventType] = { aEls: [this], aEvts: [ [fListener] ] };
-      this["on" + sEventType] = runListeners;
-    }
-  };
-  Element.prototype.removeEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) {
-    if (!oListeners.hasOwnProperty(sEventType)) { return; }
-    var oEvtListeners = oListeners[sEventType];
-    for (var nElIdx = -1, iElId = 0; iElId < oEvtListeners.aEls.length; iElId++) {
-      if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; }
-    }
-    if (nElIdx === -1) { return; }
-    for (var iLstId = 0, aElListeners = oEvtListeners.aEvts[nElIdx]; iLstId < aElListeners.length; iLstId++) {
-      if (aElListeners[iLstId] === fListener) { aElListeners.splice(iLstId, 1); }
-    }
-  };
-}
-
- -

Ayrıca Bakın

- - diff --git a/files/tr/web/api/filereader/index.html b/files/tr/web/api/filereader/index.html deleted file mode 100644 index 6a9742f8d1..0000000000 --- a/files/tr/web/api/filereader/index.html +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: FileReader -slug: Web/API/FileReader -tags: - - API - - DOM - - File API - - Files - - NeedsTranslation - - Reference - - TopicStub - - WebAPI -translation_of: Web/API/FileReader ---- -
{{APIRef("File API")}}
- -

The FileReader object lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using {{domxref("File")}} or {{domxref("Blob")}} objects to specify the file or data to read.

- -

File objects may be obtained from a {{domxref("FileList")}} object returned as a result of a user selecting files using the {{HTMLElement("input")}} element, from a drag and drop operation's DataTransfer object, or from the mozGetAsFile() API on an {{domxref("HTMLCanvasElement")}}.

- -

Constructor

- -
FileReader FileReader();
- -

See Using files from web applications for details and examples.

- -

Properties

- -
-
{{domxref("FileReader.error")}} {{readonlyinline}}
-
A {{domxref("DOMError")}} representing the error that occurred while reading the file.
-
{{domxref("FileReader.readyState")}} {{readonlyinline}}
-
A number indicating the state of the FileReader. This will be one of the {{anch("State constants")}}.
-
{{domxref("FileReader.result")}} {{readonlyinline}}
-
The file's contents. This property is only valid after the read operation is complete, and the format of the data depends on which of the methods was used to initiate the read operation.
-
- -

Event handlers

- -
-
{{domxref("FileReader.onabort")}}
-
A handler for the {{event("abort")}} event. This event is triggered each time the reading operation is aborted.
-
{{domxref("FileReader.onerror")}}
-
A handler for the {{event("error")}} event. This event is triggered each time the reading operation encounter an error.
-
{{domxref("FileReader.onload")}}
-
A handler for the {{event("load")}} event. This event is triggered each time the reading operation is successfully completed.
-
{{domxref("FileReader.onloadstart")}}
-
A handler for the {{event("loadstart")}} event. This event is triggered each time the reading is starting.
-
{{domxref("FileReader.onloadend")}}
-
A handler for the {{event("loadend")}} event. This event is triggered each time the reading operation is completed (either in success or failure).
-
{{domxref("FileReader.onprogress")}}
-
A handler for the {{event("progress")}} event. This event is triggered while reading a {{domxref("Blob")}} content.
-
- -
-

Note: As FileReader inherits from {{domxref("EventTarget")}}, all those events can also be listened for by using the {{domxref("EventTarget.addEventListener()","addEventListener")}} method.

-
- -

State constants

- - - -

Methods

- -
-
{{domxref("FileReader.abort()")}}
-
Aborts the read operation. Upon return, the readyState will be DONE.
-
{{domxref("FileReader.readAsArrayBuffer()")}} {{gecko_minversion_inline("7.0")}}
-
Starts reading the contents of the specified {{domxref("Blob")}}, once finished, the result attribute contains an {{domxref("ArrayBuffer")}} representing the file's data.
-
{{domxref("FileReader.readAsBinaryString()")}}
-
Starts reading the contents of the specified {{domxref("Blob")}}, once finished, the result attribute contains the raw binary data from the file as a string.
-
{{domxref("FileReader.readAsDataURL()")}}
-
Starts reading the contents of the specified {{domxref("Blob")}}, once finished, the result attribute contains a data: URL representing the file's data.
-
{{domxref("FileReader.readAsText()")}}
-
Starts reading the contents of the specified {{domxref("Blob")}}, once finished, the result attribute contains the contents of the file as a text string.
-
- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("File API", "#FileReader-interface", "FileReader")}}{{Spec2("File API")}}Initial definition
- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop("1.9.2")}}[1]710[2]12.02[3]6.0.2
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support3231011.56.1
-
- -

[1] Prior to Gecko 2.0 beta 7 (Firefox 4.0 beta 7), all {{domxref("Blob")}} parameters below were {{domxref("File")}} parameters; this has since been updated to match the specification correctly. Prior to Gecko 13.0 {{geckoRelease("13.0")}} the FileReader.error property returned a {{domxref("FileError")}} object. This interface has been removed and FileReader.error is now returning the {{domxref("DOMError")}} object as defined in the latest FileAPI draft.

- -

[2] IE9 has a File API Lab.

- -

[3] Opera has partial support in 11.1.

- -

See also

- - diff --git a/files/tr/web/api/filesystem/index.html b/files/tr/web/api/filesystem/index.html deleted file mode 100644 index d7a9d4fe9a..0000000000 --- a/files/tr/web/api/filesystem/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: FileSystem -slug: Web/API/FileSystem -translation_of: Web/API/FileSystem ---- -

{{APIRef("File System API")}} {{non-standard_header}}

- -

Dosya ve Dizin API arabirimi FileSystem bir dosya sistemini temsil etmek için kullanılır. Bu nesneler herhangi bir dosya sistemi girişinde yer alan  {{domxref("FileSystemEntry.filesystem", "filesystem")}} özelliğinden edinilebilir. Bazı tarayıcılar dosya sistemlerini oluşturma ve yönetmek için ek API'lar sunarlar, Chrome'un {{domxref("LocalFileSystem.requestFileSystem", "requestFileSystem()")}} metodu gibi.

- -
-

Bu standart olmayan bir API, çünkü özellikleri henüz gelecek standartlar içerisinde yer almıyor, tüm tarayıcıların bunu desteklemediğini ve bu API'nin sadece bir bölümünün kullanılabilir olacağını unutmamak gerekir. Detaylar için {{anch("Browser compatibility")}} bölümüne bakınız.

-
- -

Temel Kavramlar

- -

Bir FileSystem nesnesine erişmenin iki yolu vardır:

- -
    -
  1. Web uygulamanız için oluşturulan korumalı bir dosya sistemini temsil eden dosyayı doğrudan window.requestFileSystem() öğesini çağırarak isteyebilirsiniz..  Eğer bu çağrı başarılı olursa, callback handler çalıştırılır. Bu da dosya sistemi tanımlayıcısı olan FileSystem nesnesini parametre olarak alır.
    2. -
  2. Bir dosya sistemi giriş nesnesinden, {{domxref("FileSystemEntry.filesystem", "filesystem")}} özelliği sayesinde erişim sağlayabilirsiniz.
    3. -
- -

Özellikler

- -
-
{{domxref("FileSystem.name")}} {{ReadOnlyInline}}
-
Dosya sisteminin adını temsil eden bir {{domxref("USVString")}}. Bu isim tüm açık dosya sistemlerinde benzersizdir.
-
{{domxref("FileSystem.root")}} {{ReadOnlyInline}}
-
Dosya sisteminin kök dizinini temsil eden bir {{domxref("FileSystemDirectoryEntry")}} nesnesi. Bu nesneyi kullanarak dosya sisteminde yer alan tüm nesne ve dizinlere erişebilirsiniz.
-
- -

Tanımlama

- - - - - - - - - - - - - - - - -
TanımDurumAçıklama
{{SpecName('File System API')}}{{Spec2('File System API')}}Draft of proposed API
- -

Bu API W3C ya da WHATWG üzerinde resmi bir tanımlamaya sahip değil.

- -

Tarayıcı Uyumluluğu

- -

{{ CompatibilityTable }}

- -
- - - - - - - - - - - - - - - - - - - - - -
ÖzellikChromeFirefox (Gecko)Internet ExplorerMicrosoft EdgeOperaSafari (WebKit)
Basic support13{{ property_prefix("webkit") }}{{ CompatGeckoDesktop(50) }}{{ CompatNo }}{{CompatVersionUnknown}}[1]{{ CompatNo }}{{ CompatNo }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
ÖzellikAndroidAndroid için ChromeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatNo }}0.16{{ property_prefix("webkit") }}{{ CompatGeckoMobile(50) }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
-
- -

[1] Microsoft Edge bu arabirimi sadece WebKitFileSystem adı altında kullanır ve yalnızca sürükle-bırak senaryolarında {{domxref("DataTransferItem.webkitGetAsEntry()")}} metodunu kullanır. Dosya ve klasör seçici panellerde kullanılabilir değildir (tıpkı {{HTMLElement("input")}} elementini {{domxref("HTMLInputElement.webkitdirectory")}} özelliğiyle kullandığınız zaman gibi).

- -

Ayrıca bkz.

- - diff --git a/files/tr/web/api/htmlelement/click/index.html b/files/tr/web/api/htmlelement/click/index.html deleted file mode 100644 index 5c8b295944..0000000000 --- a/files/tr/web/api/htmlelement/click/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: HTMLElement.click() -slug: Web/API/HTMLElement/click -translation_of: Web/API/HTMLElement/click ---- -
-
{{ APIRef("HTML DOM") }}
-
- -

 

- -

HTMLElement.click() metodu element üzerinde tıklama olayını simule eder.

- -

click() geçerli elamanlar üzerinde kullanıldığında ({{HTMLElement("input")}} gibi), o elementin tıklama olayını (click event) tetikler. Bu olay döküman ağacındaki (veya olay zinciri) daha yüksek elemanlara ulaşır ve onların tıklama olaylarını tetikler.

- -

 

- -

Syntax

- -
element.click()
- -

Specification

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('DOM2 HTML', 'html.html#ID-2651361')}}{{Spec2('DOM2 HTML')}}Initial definition.
- -

Browser compatibility

- - - -

{{Compat("api.HTMLElement.click")}}

diff --git a/files/tr/web/api/htmlelement/index.html b/files/tr/web/api/htmlelement/index.html deleted file mode 100644 index 9239cd8f6f..0000000000 --- a/files/tr/web/api/htmlelement/index.html +++ /dev/null @@ -1,183 +0,0 @@ ---- -title: HTMLElement -slug: Web/API/HTMLElement -tags: - - API - - HTML DOM - - Interface - - NeedsNewLayout - - NeedsTranslation - - Reference - - TopicStub -translation_of: Web/API/HTMLElement ---- -
{{ APIRef("HTML DOM") }}
- -

The HTMLElement interface represents any HTML element. Some elements directly implement this interface, while others implement it via an interface that inherits it.

- -

{{InheritanceDiagram}}

- -

Properties

- -

Inherits properties from its parent, {{domxref("Element")}}, and implements those from {{domxref("GlobalEventHandlers")}} and {{domxref("TouchEventHandlers")}}.

- -
-
{{domxref("HTMLElement.accessKey")}}
-
Is a {{domxref("DOMString")}} representing the access key assigned to the element.
-
{{domxref("HTMLElement.accessKeyLabel")}} {{readonlyInline}}
-
Returns a {{domxref("DOMString")}} containing the element's assigned access key.
-
{{domxref("HTMLElement.contentEditable")}}
-
Is a {{domxref("DOMString")}}, where a value of "true" means the element is editable and a value of "false" means it isn't.
-
{{domxref("HTMLElement.isContentEditable")}} {{readonlyInline}}
-
Returns a {{domxref("Boolean")}} that indicates whether or not the content of the element can be edited.
-
{{domxref("HTMLElement.contextMenu")}} {{deprecated_inline}}
-
Is a {{domxref("HTMLMenuElement")}} representing the contextual menu associated with the element. It may be null.
-
{{domxref("HTMLElement.dataset")}} {{readonlyInline}}
-
Returns a {{domxref("DOMStringMap")}} with which script can read and write the element's custom data attributes (data-*) .
-
{{domxref("HTMLElement.dir")}}
-
Is a {{domxref("DOMString")}}, reflecting the dir global attribute, representing the directionality of the element. Possible values are "ltr", "rtl", and "auto".
-
{{domxref("HTMLElement.draggable")}}
-
Is a {{jsxref("Boolean")}} indicating if the element can be dragged.
-
{{domxref("HTMLElement.dropzone")}} {{readonlyInline}}
-
Returns a {{domxref("DOMSettableTokenList")}} reflecting the dropzone global attribute and describing the behavior of the element regarding a drop operation.
-
{{domxref("HTMLElement.hidden")}}
-
Is a {{jsxref("Boolean")}} indicating if the element is hidden or not.
-
{{domxref("HTMLElement.inert")}}
-
Is a {{jsxref("Boolean")}} indicating whether the user agent must act as though the given node is absent for the purposes of user interaction events, in-page text searches ("find in page"), and text selection.
-
{{domxref("HTMLElement.innerText")}}
-
Represents the "rendered" text content of a node and its descendants. As a getter, it approximates the text the user would get if they highlighted the contents of the element with the cursor and then copied it to the clipboard.
-
{{domxref("HTMLElement.itemScope")}} {{experimental_inline}}
-
Is a {{jsxref("Boolean")}} representing the item scope.
-
{{domxref("HTMLElement.itemType")}} {{readonlyInline}}{{experimental_inline}}
-
Returns a {{domxref("DOMSettableTokenList")}}…
-
{{domxref("HTMLElement.itemId")}} {{experimental_inline}}
-
Is a {{domxref("DOMString")}} representing the item ID.
-
{{domxref("HTMLElement.itemRef")}} {{readonlyInline}}{{experimental_inline}}
-
Returns a {{domxref("DOMSettableTokenList")}}…
-
{{domxref("HTMLElement.itemProp")}} {{readonlyInline}}{{experimental_inline}}
-
Returns a {{domxref("DOMSettableTokenList")}}…
-
{{domxref("HTMLElement.itemValue")}} {{experimental_inline}}
-
Returns a {{jsxref("Object")}} representing the item value.
-
{{domxref("HTMLElement.lang")}}
-
Is a {{domxref("DOMString")}} representing the language of an element's attributes, text, and element contents.
-
{{domxref("HTMLElement.noModule")}}
-
Is a {{jsxref("Boolean")}} indicating wether an import script can be executed in user agents that support module scripts.
-
{{domxref("HTMLElement.nonce")}}
-
Returns the cryptographic number used once that is used by Content Security Policy to determine whether a given fetch will be allowed to proceed.
-
{{domxref("HTMLElement.offsetHeight")}} {{readonlyInline}}{{experimental_inline}}
-
Returns a double containing the height of an element, relative to the layout.
-
{{domxref("HTMLElement.offsetLeft")}}{{readonlyInline}}{{experimental_inline}}
-
Returns a double, the distance from this element's left border to its offsetParent's left border.
-
{{domxref("HTMLElement.offsetParent")}}{{readonlyInline}}{{experimental_inline}}
-
Returns a {{domxref("Element")}} that is the element from which all offset calculations are currently computed.
-
{{domxref("HTMLElement.offsetTop")}}{{readonlyInline}}{{experimental_inline}}
-
Returns a double, the distance from this element's top border to its offsetParent's top border.
-
{{domxref("HTMLElement.offsetWidth")}}{{readonlyInline}}{{experimental_inline}}
-
Returns a double containing the width of an element, relative to the layout.
-
{{domxref("HTMLElement.properties")}} {{readonlyInline}}{{experimental_inline}}
-
Returns a {{domxref("HTMLPropertiesCollection")}}…
-
{{domxref("HTMLElement.spellcheck")}}{{ gecko_minversion_inline("1.9")}}
-
Is a {{jsxref("Boolean")}} that controls spell-checking. It is present on all HTML elements, though it doesn't have an effect on all of them.
-
{{domxref("HTMLElement.style")}}
-
Is a {{domxref("CSSStyleDeclaration")}}, an object representing the declarations of an element's style attributes.
-
{{domxref("HTMLElement.tabIndex")}}
-
Is a long representing the position of the element in the tabbing order.
-
{{domxref("HTMLElement.title")}}
-
Is a {{domxref("DOMString")}} containing the text that appears in a popup box when mouse is over the element.
-
{{domxref("HTMLElement.translate")}} {{experimental_inline}}
-
Is a {{jsxref("Boolean")}} representing the translation.
-
- -

Event handlers

- -

Most event handler properties, of the form onXYZ, are defined on the {{domxref("GlobalEventHandlers")}} or {{domxref("TouchEventHandlers")}} interfaces and implemented by HTMLElement. In addition, the following handlers are specific to HTMLElement.

- -
-
{{ domxref("HTMLElement.oncopy") }} {{ non-standard_inline() }}
-
Returns the event handling code for the copy event ({{bug("280959")}}).
-
{{ domxref("HTMLElement.oncut") }} {{ non-standard_inline() }}
-
Returns the event handling code for the cut event ({{bug("280959")}}).
-
{{ domxref("HTMLElement.onpaste") }} {{ non-standard_inline() }}
-
Returns the event handling code for the paste event ({{bug("280959")}}).
-
{{domxref("TouchEventHandlers.ontouchstart")}} {{non-standard_inline}}
-
Returns the event handling code for the {{event("touchstart")}} event.
-
{{domxref("TouchEventHandlers.ontouchend")}} {{non-standard_inline}}
-
Returns the event handling code for the {{event("touchend")}} event.
-
{{domxref("TouchEventHandlers.ontouchmove")}} {{non-standard_inline}}
-
Returns the event handling code for the {{event("touchmove")}} event.
-
{{domxref("TouchEventHandlers.ontouchenter")}} {{non-standard_inline}}
-
Returns the event handling code for the {{event("touchenter")}} event.
-
{{domxref("TouchEventHandlers.ontouchleave")}} {{non-standard_inline}}
-
Returns the event handling code for the {{event("touchleave")}} event.
-
{{domxref("TouchEventHandlers.ontouchcancel")}} {{non-standard_inline}}
-
Returns the event handling code for the {{event("touchcancel")}} event.
-
- -

Methods

- -

Inherits methods from its parent, {{domxref("Element")}}.

- -
-
{{domxref("HTMLElement.blur()")}}
-
Removes keyboard focus from the currently focused element.
-
{{domxref("HTMLElement.click()")}}
-
Sends a mouse click event to the element.
-
{{domxref("HTMLElement.focus()")}}
-
Makes the element the current keyboard focus.
-
{{domxref("HTMLElement.forceSpellCheck()")}} {{experimental_inline}}
-
Runs the spell checker on the element's contents.
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSSOM View', '#extensions-to-the-htmlelement-interface', 'HTMLElement')}}{{Spec2('CSSOM View')}}Added the following properties: offsetParent, offsetTop, offsetLeft, offsetWidth, and offsetHeight.
{{SpecName('HTML WHATWG', 'elements.html#htmlelement', 'HTMLElement')}}{{Spec2('HTML WHATWG')}}Added the following properties: translate, itemScope, itemType, itemId, itemRef, itemProp, properties, and itemValue.
- Added the following method: forceSpellcheck().
- Moved the onXYZ attributes to the {{domxref("GlobalEventHandlers")}} interface and added an inheritance from it.
{{SpecName('HTML5 W3C', 'dom.html#htmlelement', 'HTMLElement')}}{{Spec2('HTML5 W3C')}}Added the following properties: dataset, hidden, tabindex, accessKey, accessKeyLabel, draggable, dropzone, contentEditable, isContentEditable, contextMenu, spellcheck, commandType, commandLabel, commandIcon, commandHidden, commandDisabled, commandChecked, style, and all the onXYZ properties.
- Moved the id and className properties to the {{domxref("Element")}} interface.
{{SpecName('DOM2 HTML', 'html.html#ID-011100101', 'HTMLElement')}}{{Spec2('DOM2 HTML')}}No change from {{SpecName('DOM2 HTML')}}
{{SpecName('DOM1', 'level-one-html.html#ID-011100101', 'HTMLElement')}}{{Spec2('DOM1')}}Initial definition.
- -

Browser compatibility

- - - -

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

- -

See also

- - diff --git a/files/tr/web/api/htmlimageelement/image/index.html b/files/tr/web/api/htmlimageelement/image/index.html deleted file mode 100644 index 9bbad76f33..0000000000 --- a/files/tr/web/api/htmlimageelement/image/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: Image() -slug: Web/API/HTMLImageElement/Image -tags: - - API - - Constructor - - DOM - - HTML DOM - - HTMLImageElement - - HTMLImageElement Kullanımı - - Reference -translation_of: Web/API/HTMLImageElement/Image ---- -
{{ APIRef("HTML DOM") }}
- -

Image() constructor'ı yeni bir {{domxref("HTMLImageElement")}} örneği oluşturur.

- -

İşlevsellik olarak {{domxref("Document.createElement()", "document.createElement('img')")}} ile aynıdır.

- -

Sözdizim

- -
Image(genişlik, yükseklik)
- -

Parametreler

- -
-
genişlik
-
Resmin genişliği (yani {{htmlattrxref("width", "img")}} özelliğinin değeri).
-
yükseklik
-
Resmin yüksekliği (yani {{htmlattrxref("height", "img")}} özelliğinin değeri).
-
- -

Örnekler

- -
var myImage = new Image(100, 200);
-myImage.src = 'picture.jpg';
-document.body.appendChild(myImage);
- -
Yukarıdaki örnek {{htmlelement("body")}} etiketi içerisine aşağıdaki HTML elementini tanımlamakla aynı olacaktır.
- -
<img width="100" height="200" src="picture.jpg">
-
- -
-

Not: Constructor'da belirtilen değerlere bakılmaksızın tüm bitmap yüklenir. Eğer constructor'da herhangi bir genişlik ya da yükseklik değeri tanımlanmamışsa {{domxref("HTMLImageElement.width")}} ve {{domxref("HTMLImageElement.height")}} değerleri üzerinden varsayılan atamalar yapılacaktır. CSS piksellerindeki resmin orjinal yüksekliği ve genişliği {{domxref("HTMLImageElement.naturalWidth")}} ve {{domxref("HTMLImageElement.naturalHeight")}} özellikleri ile yansıtılır. Eğer constructor'da herhangi bir değer tanımlı değilse bu özelliklerin her ikisinin de çiftleri aynı değerlere sahip olacaktır.

-
- -

Tanımlamalar

- - - - - - - - - - - - - - -
TanımlamaDurumYorum
{{SpecName("HTML WHATWG", "embedded-content.html#dom-image", "Image()")}}{{spec2("HTML WHATWG")}} 
- -

Tarayıcı Uyumluluğu

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
ÖzellikChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Temel destek{{compatversionunknown}}{{compatversionunknown}}{{compatversionunknown}}{{compatversionunknown}}{{compatversionunknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
ÖzelikAndroidAndroid WebviewFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Temel destek{{compatversionunknown}}{{compatversionunknown}}{{compatversionunknown}}{{compatversionunknown}}{{compatversionunknown}}{{compatversionunknown}}{{compatversionunknown}}
-
- -

 

diff --git a/files/tr/web/api/htmlimageelement/index.html b/files/tr/web/api/htmlimageelement/index.html deleted file mode 100644 index 65a25d2e38..0000000000 --- a/files/tr/web/api/htmlimageelement/index.html +++ /dev/null @@ -1,417 +0,0 @@ ---- -title: HTMLImageElement -slug: Web/API/HTMLImageElement -tags: - - API - - HTML DOM - - HTMLImageElement - - Interface - - NeedsTranslation - - Reference - - TopicStub - - img -translation_of: Web/API/HTMLImageElement ---- -
{{APIRef("HTML DOM")}}
- -

The HTMLImageElement interface provides special properties and methods  for manipulating the layout and presentation of {{HTMLElement("img")}} elements.

- -

{{InheritanceDiagram(600,120)}}

- -

Properties

- -

Inherits properties from its parent, {{domxref("HTMLElement")}}.

- -
-
{{domxref("HTMLImageElement.align")}} {{obsolete_inline}}
-
Is a {{domxref("DOMString")}} indicating the alignment of the image with respect to the surrounding context. The possible values are "left", "right", "justify", and "center".
-
{{domxref("HTMLImageElement.alt")}}
-
Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("alt", "img")}} HTML attribute,  thus indicating fallback context for the image.
-
{{domxref("HTMLImageElement.border")}} {{obsolete_inline}}
-
Is a {{domxref("DOMString")}} that is responsible for the width of the border surrounding the image. This is now deprecated and the CSS {{cssxref("border")}} property should be used instead.
-
{{domxref("HTMLImageElement.complete")}} {{readonlyInline}}
-
Returns a {{domxref("Boolean")}} that is true if the browser has finished fetching the image, whether successful or not. It also shows true, if the image has no {{domxref("HTMLImageElement.src", "src")}} value.
-
{{domxref("HTMLImageElement.crossOrigin")}}
-
Is a {{domxref("DOMString")}} representing the CORS setting for this image element. See CORS settings attributes for further details.
-
{{domxref("HTMLImageElement.currentSrc")}} {{readonlyInline}}{{experimental_inline}}
-
Returns a {{domxref("DOMString")}} representing the URL to the currently displayed image (which may change, for example in response to media queries).
-
{{domxref("HTMLImageElement.height")}}
-
Is a unsigned long that reflects the {{htmlattrxref("height", "img")}} HTML attribute, indicating the rendered height of the image in CSS pixels.
-
{{domxref("HTMLImageElement.hspace")}} {{obsolete_inline}}
-
Is a long representing the space on either side of the image.
-
{{domxref("HTMLImageElement.isMap")}}
-
Is a {{domxref("Boolean")}} that reflects the {{htmlattrxref("ismap", "img")}} HTML attribute, indicating that the image is part of a server-side image map.
-
{{domxref("HTMLImageElement.longDesc")}} {{obsolete_inline}}
-
Is a {{domxref("DOMString")}} representing the URI of a long description of the image.
-
{{domxref("HTMLImageElement.lowSrc")}} {{obsolete_inline}}
-
Is a {{domxref("DOMString")}} that refers to a low-quality (but faster to load) copy of the image.
-
{{domxref("HTMLImageElement.name")}} {{obsolete_inline}}
-
Is a {{domxref("DOMString")}} representing the name of the element.
-
{{domxref("HTMLImageElement.naturalHeight")}} {{readonlyInline}}
-
Returns a unsigned long representing the intrinsic height of the image in CSS pixels, if it is available; else, it shows 0.
-
{{domxref("HTMLImageElement.naturalWidth")}} {{readonlyInline}}
-
Returns a unsigned long representing the intrinsic width of the image in CSS pixels, if it is available; otherwise, it will show 0.
-
{{domxref("HTMLImageElement.referrerPolicy")}} {{experimental_inline}}
-
Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("referrerpolicy", "img")}} HTML attribute indicating which referrer to use in order to fetch the image.
-
{{domxref("HTMLImageElement.src")}}
-
Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("src", "img")}} HTML attribute, containing the full URL of the image including base URI.
-
{{domxref("HTMLImageElement.sizes")}} {{experimental_inline}}
-
Is a {{domxref("DOMString")}} reflecting the {{htmlattrxref("sizes", "img")}} HTML attribute.
-
{{domxref("HTMLImageElement.srcset")}} {{experimental_inline}}
-
Is a {{domxref("DOMString")}} reflecting the {{htmlattrxref("srcset", "img")}} HTML attribute, containing a list of candidate images, separated by a comma (',', U+002C COMMA). A candidate image is a URL followed by a 'w' with the width of the images, or an 'x' followed by the pixel density.
-
{{domxref("HTMLImageElement.useMap")}}
-
Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("usemap", "img")}} HTML attribute, containing a partial URL of a map element.
-
{{domxref("HTMLImageElement.vspace")}} {{obsolete_inline}}
-
Is a long representing the space above and below the image.
-
{{domxref("HTMLImageElement.width")}}
-
Is a unsigned long that reflects the {{htmlattrxref("width", "img")}} HTML attribute, indicating the rendered width of the image in CSS pixels.
-
{{domxref("HTMLImageElement.x")}} {{readonlyInline}}{{experimental_inline}}
-
Returns a long representing the horizontal offset from the nearest layer. This property mimics an old Netscape 4 behavior.
-
{{domxref("HTMLImageElement.y")}} {{readonlyInline}} {{experimental_inline}}
-
Returns a long representing the vertical offset from the nearest layer. This property is also similar to behavior of an old Netscape 4.
-
- -

Methods

- -

Inherits properties from its parent, {{domxref("HTMLElement")}}.

- -
-
{{domxref("HTMLImageElement.Image()", "Image()")}}
-
The Image() constructor, taking two optional unsigned long, which are the width and the height of the resource, creates an instance of HTMLImageElement , not inserted in a DOM tree.
-
- -

Errors

- -

If an error occurs while trying to load or render the image, and an {{htmlattrxref("onerror")}} event handler has been configured to handle the {{event("error")}} event, that event handler will get called. This can happen in a number of situations, including:

- - - -

Example

- -
var img1 = new Image(); // HTML5 Constructor
-img1.src = 'image1.png';
-img1.alt = 'alt';
-document.body.appendChild(img1);
-
-var img2 = document.createElement('img'); // use DOM HTMLImageElement
-img2.src = 'image2.jpg';
-img2.alt = 'alt text';
-document.body.appendChild(img2);
-
-// using first image in the document
-alert(document.images[0].src);
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}{{Spec2('Referrer Policy')}}Added the referrerPolicy property.
{{SpecName("CSSOM View", "#excensions-to-the-htmlimageelement-interface", "Extensions to HTMLImageElement")}}{{Spec2('CSSOM View')}}Added the x and y properties.
{{SpecName('HTML WHATWG', "embedded-content.html#the-img-element", "HTMLImageElement")}}{{Spec2('HTML WHATWG')}}The following properties have been added: srcset, currentSrc and sizes.
{{SpecName('HTML5 W3C', "embedded-content-0.html#the-img-element", "HTMLImageElement")}}{{Spec2('HTML5 W3C')}}A constructor (with 2 optional parameters) has been added.
- The following properties are now obsolete: name, border, align, hspace, vspace, and longdesc.
- The following properties are now unsigned long, instead of long: height, and width.
- The following properties have been added: crossorigin, naturalWidth, naturalHeight, and complete.
{{SpecName('DOM2 HTML', 'html.html#ID-17701901', 'HTMLImgElement')}}{{Spec2('DOM2 HTML')}}The lowSrc property has been removed.
- The following properties are now long, instead of DOMString: height, width, hspace, and vspace.
{{SpecName('DOM1', 'level-one-html.html#ID-17701901', 'HTMLImgElement')}}{{Spec2('DOM1')}}Initial definition.
- -

Browser compatibility

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
lowSrc{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
naturalWidth, naturalHeight{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}9{{CompatVersionUnknown}}{{CompatVersionUnknown}}
crossorigin{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}9{{CompatVersionUnknown}}{{CompatVersionUnknown}}
complete{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}5[4]{{CompatVersionUnknown}}{{CompatVersionUnknown}}
srcset {{experimental_inline}}{{CompatChrome(34)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(32)}}[2]{{CompatNo}}21{{CompatSafari(7.1)}}
currentSrc {{experimental_inline}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(32)}}[2]{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
sizes {{experimental_inline}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(33)}}[3]{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
x and y{{CompatVersionUnknown}}{{CompatVersionUnknown}}14[1]{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
referrerPolicy {{experimental_inline}}{{CompatChrome(51)}}{{CompatNo}}{{CompatGeckoDesktop(50)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
onerror event handler{{CompatNo}}{{CompatUnknown}}{{CompatGeckoDesktop(51)}}[5]{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(1.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
lowSrc{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
naturalWidth, naturalHeight{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}9{{CompatUnknown}}{{CompatVersionUnknown}}
crossorigin{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
complete{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
srcset {{experimental_inline}}{{CompatChrome(34)}}{{CompatChrome(34)}}{{CompatVersionUnknown}}{{CompatGeckoMobile(32)}}[2]{{CompatNo}}{{CompatNo}}iOS 8
currentSrc {{experimental_inline}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(32)}}[2]{{CompatNo}}{{CompatNo}}{{CompatNo}}
sizes {{experimental_inline}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(33)}}[3]{{CompatNo}}{{CompatNo}}{{CompatNo}}
x and y{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}14[1]{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
referrerPolicy {{experimental_inline}}{{CompatChrome(51)}}{{CompatChrome(51)}}{{CompatNo}}{{CompatGeckoMobile(50)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
onerror event handler{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatGeckoMobile(51)}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

[1] Though, these x and y properties were removed in Gecko 7.0 {{geckoRelease("7.0")}} but later, they were restored in Gecko 14.0 {{geckoRelease("14.0")}} for compatibility reasons.

- -

[2] This feature is behind the dom.image.srcset.enabled preference, defaulting to false.

- -

[3] This feature is behind the dom.image.picture.enabled preference, defaulting to false.

- -

[4] IE reports false for broken images.

- -

[5] May also be supported in earlier versions.

- -

See also

- - diff --git a/files/tr/web/api/idbindex/getall/index.html b/files/tr/web/api/idbindex/getall/index.html deleted file mode 100644 index dfbd31c48d..0000000000 --- a/files/tr/web/api/idbindex/getall/index.html +++ /dev/null @@ -1,164 +0,0 @@ ---- -title: IDBIndex.getAll() -slug: Web/API/IDBIndex/getAll -translation_of: Web/API/IDBIndex/getAll ---- -

{{ APIRef("IndexedDB") }}

- -
-

getAll() metodu {{domxref("IDBIndex")}} Arabirimi, dizinin içindeki tüm nesneleri alır.

-
- -

Nesne tembel olarak oluşturulduğundan, bir imlecin value özelliğine bakmakla ilişkili bir performans maliyeti söz konusudur. GetAll () gibi bir özellik kullanmak için, tarayıcının tüm nesneleri aynı anda oluşturması gerekir. Örneğin sadece anahtarların her birine bakmak istiyorsanız, bir imleci kullanmak daha etkilidir. Ancak, bir nesne deposundaki tüm nesnelerin bir dizisini almaya çalışıyorsanız, getAll () kullanmalısınız.

- -

Syntax

- -
var getAllKeysRequest = IDBIndex.getAll();
-var getAllKeysRequest = IDBIndex.getAll(query);
-var getAllKeysRequest = IDBIndex.getAll(query, count);
- -

Parametreler

- -
-
query {{optional_inline}}
-
A key or an {{domxref("IDBKeyRange")}} identifying the records to retrieve. If this value is null or missing, the browser will use an unbound key range.
-
count {{optional_inline}}
-
The number records to return. If this value exceeds the number of records in the query, the browser will only retrieve the first item. If it is lower than 0 or greater than 232-1 a {{jsxref("TypeError")}} exception will be thrown.
-
- -

Return value

- -

An {{domxref("IDBRequest")}} object on which subsequent events related to this operation are fired.

- -

Exceptions

- -

This method may raise a {{domxref("DOMException")}} of the following types:

- - - - - - - - - - - - - - - - - - -
ExceptionDescription
TransactionInactiveErrorThis {{domxref("IDBIndex")}}'s transaction is inactive.
InvalidStateErrorThe {{domxref("IDBIndex")}} has been deleted or removed.
- -

A {{jsxref("TypeError")}} exception is thrown if the count parameter is not between 0 and 232-1 included.

- -

Example

- -
var myIndex = objectStore.index('index');
-var getAllKeysRequest = myIndex.getAllKeys();
-getAllKeysRequest.onsuccess = function() {
-  console.log(getAllKeysRequest.result);
-}
- -

Specification

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('IndexedDB 2', '#dom-idbindex-getall', 'getAll()')}}{{Spec2('IndexedDB 2')}}Initial definition.
- -

Browser compatibility

- -

{{ CompatibilityTable }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{ CompatChrome(48) }}{{ CompatGeckoDesktop("44.0") }} [1]{{ CompatNo }}{{CompatOpera(35)}}{{ CompatNo}}
Indexed Database 2.0{{CompatChrome(58)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOpera(45)}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatChrome(48) }}{{ CompatChrome(48) }}{{ CompatGeckoDesktop("44.0") }} [1]{{ CompatNo}}{{CompatOperaMobile(35)}}{{ CompatNo}}
Indexed Database 2.0{{CompatChrome(58)}}{{CompatChrome(58)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOperaMobile(45)}}{{CompatUnknown}}
-
- -

 [1] This feature was available since Firefox 24, but behind the dom.indexedDB.experimental  pref, off by default

- -

See also

- - diff --git a/files/tr/web/api/idbindex/index.html b/files/tr/web/api/idbindex/index.html deleted file mode 100644 index a14089a7f3..0000000000 --- a/files/tr/web/api/idbindex/index.html +++ /dev/null @@ -1,337 +0,0 @@ ---- -title: IDBIndex -slug: Web/API/IDBIndex -tags: - - API - - Database - - IDBIndex - - IndexedDB - - Interface - - NeedsTranslation - - Reference - - Storage - - TopicStub -translation_of: Web/API/IDBIndex ---- -

{{APIRef("IndexedDB")}}

- -

IDBIndex interface of the IndexedDB API provides asynchronous access to an index in a database. An index is a kind of object store for looking up records in another object store, called the referenced object store. You use this interface to retrieve data.

- -

You can retrieve records in an object store through the primary key or by using an index. An index lets you look up records in an object store using properties of the values in the object stores records other than the primary key

- -

The index is a persistent key-value storage where the value part of its records is the key part of a record in the referenced object store. The records in an index are automatically populated whenever records in the referenced object store are inserted, updated, or deleted. Each record in an index can point to only one record in its referenced object store, but several indexes can reference the same object store. When the object store changes, all indexes that refers to the object store are automatically updated.

- -

You can grab a set of keys within a range. To learn more, see {{domxref("IDBKeyRange")}}.

- -

{{AvailableInWorkers}}

- -

Properties

- -
-
{{domxref("IDBIndex.isAutoLocale")}} {{readonlyInline}} {{ Non-Standard_inline() }}
-
Returns a {{domxref("Boolean")}} indicating whether the index had a locale value of auto specified upon its creation (see createIndex()'s optionalParameters.)
-
{{domxref("IDBIndex.locale")}} {{readonlyInline}} {{ Non-Standard_inline() }}
-
Returns the locale of the index (for example en-US, or pl) if it had a locale value specified upon its creation (see createIndex()'s optionalParameters.)
-
{{domxref("IDBIndex.name")}}
-
The name of this index.
-
{{domxref("IDBIndex.objectStore")}} {{readonlyInline}}
-
The name of the object store referenced by this index.
-
{{domxref("IDBIndex.keyPath")}} {{readonlyInline}}
-
The key path of this index. If null, this index is not auto-populated.
-
{{domxref("IDBIndex.multiEntry")}} {{readonlyInline}}
-
Affects how the index behaves when the result of evaluating the index's key path yields an array. If true, there is one record in the index for each item in an array of keys. If false, then there is one record for each key that is an array.
-
{{domxref("IDBIndex.unique")}} {{readonlyInline}}
-
If true, this index does not allow duplicate values for a key.
-
- -

Methods

- -

Inherits from: EventTarget

- -
-
{{domxref("IDBIndex.count()")}}
-
Returns an {{domxref("IDBRequest")}} object, and in a separate thread, returns the number of records within a key range.
-
{{domxref("IDBIndex.get()")}}
-
Returns an {{domxref("IDBRequest")}} object, and, in a separate thread, finds either the value in the referenced object store that corresponds to the given key or the first corresponding value, if key is an {{domxref("IDBKeyRange")}}.
-
{{domxref("IDBIndex.getKey()")}}
-
Returns an {{domxref("IDBRequest")}} object, and, in a separate thread, finds either the given key or the primary key, if key is an {{domxref("IDBKeyRange")}}.
-
{{domxref("IDBIndex.getAll()")}}
-
Returns an {{domxref("IDBRequest")}} object, in a separate thread, finds all matching values in the referenced object store that correspond to the given key or are in range, if key is an {{domxref("IDBKeyRange")}}.
-
{{domxref("IDBIndex.getAllKeys()")}}
-
Returns an {{domxref("IDBRequest")}} object, in a separate thread, finds all matching keys in the referenced object store that correspond to the given key or are in range, if key is an {{domxref("IDBKeyRange")}}.
-
{{domxref("IDBIndex.openCursor()")}}
-
Returns an {{domxref("IDBRequest")}} object, and, in a separate thread, creates a cursor over the specified key range.
-
{{domxref("IDBIndex.openKeyCursor()")}}
-
Returns an {{domxref("IDBRequest")}} object, and, in a separate thread, creates a cursor over the specified key range, as arranged by this index.
-
- -

Example

- -

In the following example we open a transaction and an object store, then get the index lName from a simple contacts database. We then open a basic cursor on the index using {{domxref("IDBIndex.openCursor")}} — this works the same as opening a cursor directly on an ObjectStore using {{domxref("IDBObjectStore.openCursor")}} except that the returned records are sorted based on the index, not the primary key.

- -

Finally, we iterate through each record, and insert the data into an HTML table. For a complete working example, see our IDBIndex-example demo repo (View the example live.)

- -
function displayDataByIndex() {
-  tableEntry.innerHTML = '';
-  var transaction = db.transaction(['contactsList'], 'readonly');
-  var objectStore = transaction.objectStore('contactsList');
-
-  var myIndex = objectStore.index('lName');
-  myIndex.openCursor().onsuccess = function(event) {
-    var cursor = event.target.result;
-    if(cursor) {
-      var tableRow = document.createElement('tr');
-      tableRow.innerHTML =   '<td>' + cursor.value.id + '</td>'
-                           + '<td>' + cursor.value.lName + '</td>'
-                           + '<td>' + cursor.value.fName + '</td>'
-                           + '<td>' + cursor.value.jTitle + '</td>'
-                           + '<td>' + cursor.value.company + '</td>'
-                           + '<td>' + cursor.value.eMail + '</td>'
-                           + '<td>' + cursor.value.phone + '</td>'
-                           + '<td>' + cursor.value.age + '</td>';
-      tableEntry.appendChild(tableRow);
-
-      cursor.continue();
-    } else {
-      console.log('Entries all displayed.');
-    }
-  };
-};
- -

Specification

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('IndexedDB', '#idl-def-IDBIndex', 'IDBIndex')}}{{Spec2('IndexedDB')}} 
{{SpecName("IndexedDB 2", "#index-interface", "IDBIndex")}}{{Spec2("IndexedDB 2")}} 
- -

Browser compatibility

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(23.0)}}{{property_prefix("webkit")}}
- {{CompatChrome(24.0)}} (unprefixed)
- {{CompatChrome(38)}} (prefixes deprecated)
- {{CompatChrome(57)}} (prefixes removed)		{{CompatVersionUnknown}}10 {{property_prefix("moz")}}
- {{CompatGeckoDesktop("16.0")}}		10, partial{{CompatOpera(15)}}
- {{CompatOpera(44)}} (prefixes removed)		7.1
count(){{CompatChrome(23.0)}}{{CompatVersionUnknown}}{{ CompatGeckoDesktop("22.0") }}10, partial{{CompatOpera(15)}}7.1
getAll() and getAllKeys(){{CompatChrome(48.0)}}{{CompatNo}}{{ CompatGeckoDesktop("24.0") }}
- behind dom.indexedDB.experimental  pref		{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
Available in workers{{CompatVersionUnknown}} (unprefixed)
- {{CompatChrome(38)}} (prefixes deprecated)
- {{CompatChrome(57)}} (prefixes removed)		{{CompatVersionUnknown}}{{CompatGeckoDesktop("37.0")}}{{CompatUnknown}}{{CompatVersionUnknown}}
- {{CompatOpera(44)}} (prefixes removed)		{{CompatUnknown}}
isAutoLocale and locale{{ CompatNo() }}{{CompatNo}} -

{{CompatGeckoDesktop("43.0")}}
- behind dom.indexedDB.experimental  pref

- 		{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
name setter available{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(49)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Indexed Database 2.0{{CompatChrome(58)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOpera(45)}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroid WebviewChrome for Android EdgeFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}
- {{CompatChrome(38)}} (prefixes deprecated)
- {{CompatChrome(57)}} (prefixes removed)		{{CompatVersionUnknown}}
- {{CompatChrome(38)}} (prefixes deprecated)
- {{CompatChrome(57)}} (prefixes removed)		{{CompatVersionUnknown}}{{ CompatGeckoMobile("22.0") }}1.0.110{{CompatOperaMobile(22)}}
- {{CompatOperaMobile(44)}} (prefixes removed)		{{ CompatNo() }}
count(){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{ CompatGeckoMobile("22.0") }}1.0.110{{CompatOperaMobile(22)}}{{ CompatNo() }}
getAll() and getAllKeys(){{CompatChrome(48.0)}} {{CompatNo}}{{ CompatGeckoMobile("24.0") }}
- behind dom.indexedDB.experimental  pref		1.1 behind
- dom.indexedDB.experimental  pref		{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
Available in workers{{CompatVersionUnknown}} (unprefixed)
- {{CompatChrome(38)}} (prefixes deprecated)
- {{CompatChrome(57)}} (prefixes removed)		{{CompatVersionUnknown}} (unprefixed)
- {{CompatChrome(38)}} (prefixes deprecated)
- {{CompatChrome(57)}} (prefixes removed)		{{CompatVersionUnknown}}{{CompatGeckoMobile("37.0")}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
- {{CompatOperaMobile(44)}} (prefixes removed)		{{CompatUnknown}}
isAutoLocale and locale{{ CompatNo()}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("43.0")}}
- behind dom.indexedDB.experimental  pref		2.5
- behind dom.indexedDB.experimental  pref		{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
name setter available{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(49)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
Indexed Database 2.0{{CompatChrome(58)}}{{CompatChrome(58)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOperaMobile(45)}}{{CompatUnknown}}
-
- -

See also

- - diff --git a/files/tr/web/api/index.html b/files/tr/web/api/index.html deleted file mode 100644 index d3c6aa02e3..0000000000 --- a/files/tr/web/api/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: Web API Nesne Tipleri -slug: Web/API -tags: - - JavaScript - - Referans - - Türkçe JavaScript - - Uygulamalar - - Web - - dolap.com -translation_of: Web/API ---- -

JavaScript ile Web için kod yazarken kullanılabilecek çok fazla API vardır. Aşağıdaki listede Web uygulamanızı veya sitenizi geliştirirken kullanabileceğiniz tüm nesne tiplerini bulabilirsiniz.

- -
{{APIListAlpha}}
diff --git a/files/tr/web/api/mutationobserver/index.html b/files/tr/web/api/mutationobserver/index.html deleted file mode 100644 index 33b181344b..0000000000 --- a/files/tr/web/api/mutationobserver/index.html +++ /dev/null @@ -1,250 +0,0 @@ ---- -title: MutationObserver -slug: Web/API/MutationObserver -tags: - - API - - DOM - - Dönüşüm Gözlemcisi -translation_of: Web/API/MutationObserver ---- -

{{APIRef("DOM")}}

- -

MutationObserver, geliştiricilere DOM'da gerçekleşen değişimleri yakalanması ve bir tepki üretilmesi için bir yol sunar. Dönüşüm (Mutasyon) Olayları'nın yerini almak üzere tasarlanmış, DOM3 Events (Olaylar) belirlemesinde tanımlanmıştır.

- -

Kurucu İşlerlik (İşlev)

- -

MutationObserver()

- -

DOM dönüşüm gözlemcilerini (mutation observer) yaratmak için kullanılır.

- -
new MutationObserver(
-  function geriyeCagri
-);
-
- -
Yönergeler (Parametreler)
- -
-
geriyeCagri
-
Her DOM dönüşümünde çağrılacak işlerliktir. Gözlemci, bu işlerliği iki yönergeyle çağıracaktır. İlki, {{domxref("MutationRecord")}} cinsinden nesneleri barındıran bir dizi; ikincisi MutationObserver'ın geçerli olan örneğidir.
-
- -

Nesne İşlerlikleri

- - - - - - - - - - - - - -
void observe( {{domxref("Node")}} hedef, MutationObserverInit ayarlar );
void disconnect();
Array takeRecords();
- -
-

Anımsatma: Hedefin {{domxref("Node")}} diye belirtilen cinsi,  NodeJS ile karıştırılmamalıdır..

-
- -

observe()

- -

Belirtilen DOM düğüm noktasının (node) yapısında meydana gelen değişimlerin bildirilebilmesi için MutationObserver nesnesini kaydettirir.

- -
void observe(
-  {{domxref("Node")}} hedef,
-  MutationObserverInit ayarlar
-);
-
- -
Yönergeler
- -
-
hedef
-
DOM yapısındaki dönüşümlerin gözleneceği, {{domxref("Node")}} sınıfında bir DOM düğüm noktasıdır.
-
ayarlar
-
Hangi dönüşümlerin bildirileceğini belirten bir MutationObserverInit sınıfı nesnesidir.
-
- -
Anımsatma: Bir DOM ögesine (element) gözlemci atamak tıpkı addEventListener ile bir olay belirtmek gibidir. Eğer aynı gözlemciyi aynı geriye çağrı (callback) işlerliğiyle birden fazla kez aynı ögeye atarsanız dönüşümlerde işlerlik ikişer-üçer kez çağrılmaz. Tek bir kez gerçekleşir. Fakat aynı gözlemciyi aynı ögeye farklı geriye çağrı işlerlikleriyle atarsanız bu durumda her dönüşümde belirtilen tüm geriye çağrı işlerlikleri yürütülür.
- -

disconnect()

- -

MutationObserver nesnesinin DOM dönüşümlerinden haber almasını durdurur.  observe() işlerliği çağrılıncaya dek, nesnenin geriye çağrı (callback) işlerliği, DOM dönüşümlerinde çağrılmaz.

- -
void disconnect();
-
- -

takeRecords()

- -

MutationObserver nesnesinin kayıt kuyruğunda tuttuğu kayıtları elde etmeye ve kuyruğu boşaltmaya yarar.

- -
Array takeRecords();
-
- -
Döndürülen değer
- -

{{domxref("MutationRecord")}} nesnelerinden oluşmuş bir dizidir.

- -

MutationObserverInit

- -

MutationObserverInit aşağıdaki niteliklerin tanımlandığı nesnedir.

- -
Anımsatma: En azından childList, attributes veyâ characterData nitelikleri true olarak belirtilmelidir. Tersi durumda, "Geçersiz veyâ hatalı bir metin belirtildi. (An invalid or illegal string was specified)" hatasıyla karşılaşılabilir.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NitelikAçıklama
childListEğer true olarak belirtilirse DOM öğesinde gerçekleştirilen öge veyâ düğüm noktası eklemeler-çıkarmalar gözlenir. Metin düğüm noktaları (text node) da bunun içerisindedir.
attributesEğer true olarak belirtilirse hedef ögenin niteliklerinde ortaya çıkan değişiklikler gözlenir.
characterDataEğer true olarak belirtilirse hedef ögenin verisindeki değişimler gözlenir.
subtreeEğer true olarak belirtilirse hedef ögenin ve altögelerinin dönüşümleri gözlenir.
attributeOldValueEğer true olarak belirtilirse niteliğin değişimden önceki değeri de kayıt altına alınır.
characterDataOldValueEğer true olarak belirtilirse ögenin verisinin değişimden önceki değeri de kaydedilir.
attributeFilterEğer tüm niteliklerin gözlenmesi gerekmiyorsa gözlenmesi istenen niteliklerin adlarının bir dizisi bu niteliğe atanır.
- -

Örnek Kullanım

- -

Aşağıdaki örnek bu blog gönderisinden alınmıştır. Ancak açıklamalar ve değişken adları değiştirilmiştir.

- -
// Hedef DOM ögesini seç.
-var nHedef = document.getElementById('bir-kimlik-degeri');
-
-// Bir gözlemci yarat.
-var nGozlemci = new MutationObserver(function(nDonusumler) {
-
-  // Öge dönüştüğünde, tüm dönüşümleri dolaş.
-  nDonusumler.forEach(function(nDonusum) {
-
-    // Sıradaki dönüşümü komut satırı ekranına yazdır.
-    console.log(nDonusum.type);
-
-  });
-
-});
-
-// Gözlemcinin ayarlarını belirle.
-var nAyarlar = { attributes: true, childList: true, characterData: true };
-
-// Gözlemciyi belirlenen ayarlarla belirtilen ögeye ata.
-nGozlemci.observe(nHedef, nAyarlar);
-
-// Daha sonraları, aşağıdaki komutla gözlemleme durdurulabilir.
-nGozlemci.disconnect();
-
- -

Ayrıca Okuyunuz

- - - -

Belirlemeler

- - - - - - - - - - - - - - - - -
BelirlemeDurumYorum
{{SpecName('DOM WHATWG', '#mutationobserver', 'MutationObserver')}}{{ Spec2('DOM WHATWG') }} 
- -

Tarayıcı Desteği

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
DurumChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Temel destek18 {{property_prefix("-webkit")}}
- 26		{{CompatVersionUnknown}}{{CompatGeckoDesktop(14)}}11156.0 {{property_prefix("-webkit")}}
- 7
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
DurumAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Temel destek4.418 {{property_prefix("-webkit")}}
- 26		{{CompatVersionUnknown}}{{CompatGeckoMobile(14)}}11 (8.1)156 {{property_prefix("-webkit")}}
- 7
-
diff --git a/files/tr/web/api/node/index.html b/files/tr/web/api/node/index.html deleted file mode 100644 index 481eb416b0..0000000000 --- a/files/tr/web/api/node/index.html +++ /dev/null @@ -1,383 +0,0 @@ ---- -title: Node -slug: Web/API/Node -tags: - - API - - DOM - - Interface - - NeedsTranslation - - Node - - Reference - - TopicStub -translation_of: Web/API/Node ---- -

{{APIRef("DOM")}}

- -

Node is an interface from which various types of DOM API objects inherit, allowing those types to be treated similarly; for example, inheriting the same set of methods, or being testable in the same way.

- -

All of the following interfaces inherit the Node interface's methods and properties: {{DOMxRef("Document")}}, {{DOMxRef("Element")}}, {{DOMxRef("Attr")}}, {{DOMxRef("CharacterData")}} (which {{DOMxRef("Text")}}, {{DOMxRef("Comment")}}, and {{DOMxRef("CDATASection")}} inherit), {{DOMxRef("ProcessingInstruction")}}, {{DOMxRef("DocumentFragment")}}, {{DOMxRef("DocumentType")}}, {{DOMxRef("Notation")}}, {{DOMxRef("Entity")}}, {{DOMxRef("EntityReference")}}

- -

Those interfaces may return null in certain cases where the methods and properties are not relevant. They may throw an exception — for example when adding children to a node type for which no children can exist.

- -

{{InheritanceDiagram}}

- -

Properties

- -

Inherits properties from its parent, {{DOMxRef("EventTarget")}}.[1]

- -
-
{{DOMxRef("Node.baseURI")}}{{ReadOnlyInline}}
-
Returns a {{DOMxRef("DOMString")}} representing the base URL of the document containing the Node.
-
{{DOMxRef("Node.baseURIObject")}} {{Non-standard_inline}} {{ReadOnlyInline}}
-
(Not available to web content.) The {{ Interface("nsIURI") }} object representing the base URI for the element.
-
{{DOMxRef("Node.childNodes")}}{{ReadOnlyInline}}
-
Returns a live {{DOMxRef("NodeList")}} containing all the children of this node. {{DOMxRef("NodeList")}} being live means that if the children of the Node change, the {{DOMxRef("NodeList")}} object is automatically updated.
-
{{DOMxRef("Node.firstChild")}}{{ReadOnlyInline}}
-
Returns a {{DOMxRef("Node")}} representing the first direct child node of the node, or null if the node has no child.
-
{{DOMxRef("Node.isConnected")}}{{ReadOnlyInline}}
-
A boolean indicating whether or not the Node is connected (directly or indirectly) to the context object, e.g. the {{DOMxRef("Document")}} object in the case of the normal DOM, or the {{DOMxRef("ShadowRoot")}} in the case of a shadow DOM.
-
{{DOMxRef("Node.lastChild")}}{{ReadOnlyInline}}
-
Returns a {{DOMxRef("Node")}} representing the last direct child node of the node, or null if the node has no child.
-
{{DOMxRef("Node.nextSibling")}}{{ReadOnlyInline}}
-
Returns a {{DOMxRef("Node")}} representing the next node in the tree, or null if there isn't such node.
-
{{DOMxRef("Node.nodeName")}}{{ReadOnlyInline}}
-
Returns a {{DOMxRef("DOMString")}} containing the name of the Node. The structure of the name will differ with the node type. E.g. An {{DOMxRef("HTMLElement")}} will contain the name of the corresponding tag, like 'audio' for an {{DOMxRef("HTMLAudioElement")}}, a {{DOMxRef("Text")}} node will have the '#text' string, or a {{DOMxRef("Document")}} node will have the '#document' string.
-
{{DOMxRef("Node.nodeType")}}{{ReadOnlyInline}}
-
Returns an unsigned short representing the type of the node. Possible values are: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameValue
ELEMENT_NODE1
ATTRIBUTE_NODE {{Deprecated_Inline}}2
TEXT_NODE3
CDATA_SECTION_NODE4
ENTITY_REFERENCE_NODE {{Deprecated_Inline}}5
ENTITY_NODE {{Deprecated_Inline}}6
PROCESSING_INSTRUCTION_NODE7
COMMENT_NODE8
DOCUMENT_NODE9
DOCUMENT_TYPE_NODE10
DOCUMENT_FRAGMENT_NODE11
NOTATION_NODE {{Deprecated_Inline}}12
-
-
{{DOMxRef("Node.nodeValue")}}
-
Returns / Sets the value of the current node.
-
{{DOMxRef("Node.ownerDocument")}}{{ReadOnlyInline}}
-
Returns the {{DOMxRef("Document")}} that this node belongs to. If the node is itself a document, returns null.
-
{{DOMxRef("Node.parentNode")}}{{ReadOnlyInline}}
-
Returns a {{DOMxRef("Node")}} that is the parent of this node. If there is no such node, like if this node is the top of the tree or if doesn't participate in a tree, this property returns null.
-
{{DOMxRef("Node.parentElement")}}{{ReadOnlyInline}}
-
Returns an {{DOMxRef("Element")}} that is the parent of this node. If the node has no parent, or if that parent is not an {{DOMxRef("Element")}}, this property returns null.
-
{{DOMxRef("Node.previousSibling")}}{{ReadOnlyInline}}
-
Returns a {{DOMxRef("Node")}} representing the previous node in the tree, or null if there isn't such node.
-
{{DOMxRef("Node.textContent")}}
-
Returns / Sets the textual content of an element and all its descendants.
-
- -

Obsolete properties

- -
-
{{DOMxRef("Node.localName")}} {{Obsolete_Inline}}{{ReadOnlyInline}}
-
Returns a {{DOMxRef("DOMString")}} representing the local part of the qualified name of an element. -
-

Note: In Firefox 3.5 and earlier, the property upper-cases the local name for HTML elements (but not XHTML elements). In later versions, this does not happen, so the property is in lower case for both HTML and XHTML.

-
-
-
{{DOMxRef("Node.namespaceURI")}} {{Obsolete_Inline}}{{ReadOnlyInline}}
-
The namespace URI of this node, or null if it is no namespace. -
-

Note: In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the http://www.w3.org/1999/xhtml/ namespace in both HTML and XML trees.

-
-
-
{{DOMxRef("Node.nodePrincipal")}} {{Non-standard_inline}}{{Obsolete_Inline("gecko46")}}
-
A {{Interface("nsIPrincipal")}} representing the node principal.
-
{{DOMxRef("Node.prefix")}} {{Obsolete_Inline}}{{ReadOnlyInline}}
-
Is a {{DOMxRef("DOMString")}} representing the namespace prefix of the node, or null if no prefix is specified.
-
{{DOMxRef("Node.rootNode")}} {{Obsolete_Inline}}{{ReadOnlyInline}}
-
Returns a {{DOMxRef("Node")}} object representing the topmost node in the tree, or the current node if it's the topmost node in the tree. This has been replaced by {{DOMxRef("Node.getRootNode()")}}.
-
- -

Methods

- -

Inherits methods from its parent, {{DOMxRef("EventTarget")}}.[1]

- -
-
{{DOMxRef("Node.appendChild()", "Node.appendChild(childNode)")}}
-
Adds the specified childNode argument as the last child to the current node.
- If the argument referenced an existing node on the DOM tree, the node will be detached from its current position and attached at the new position.
-
{{DOMxRef("Node.cloneNode()")}}
-
Clone a {{DOMxRef("Node")}}, and optionally, all of its contents. By default, it clones the content of the node.
-
{{DOMxRef("Node.compareDocumentPosition()")}}
-
Compares the position of the current node against another node in any other document.
-
{{DOMxRef("Node.contains()")}}
-
Returns a {{jsxref("Boolean")}} value indicating whether or not a node is a descendant of the calling node.
-
{{domxref("Node.getBoxQuads()")}} {{experimental_inline}}
-
Returns a list of the node's CSS boxes relative to another node.
-
{{DOMxRef("Node.getRootNode()")}}
-
Returns the context object's root which optionally includes the shadow root if it is available. 
-
{{DOMxRef("Node.hasChildNodes()")}}
-
Returns a {{jsxref("Boolean")}} indicating whether or not the element has any child nodes.
-
{{DOMxRef("Node.insertBefore()")}}
-
Inserts a {{DOMxRef("Node")}} before the reference node as a child of a specified parent node.
-
{{DOMxRef("Node.isDefaultNamespace()")}}
-
Accepts a namespace URI as an argument and returns a {{jsxref("Boolean")}} with a value of true if the namespace is the default namespace on the given node or false if not.
-
{{DOMxRef("Node.isEqualNode()")}}
-
Returns a {{jsxref("Boolean")}} which indicates whether or not two nodes are of the same type and all their defining data points match.
-
{{DOMxRef("Node.isSameNode()")}}
-
Returns a {{jsxref("Boolean")}} value indicating whether or not the two nodes are the same (that is, they reference the same object).
-
{{DOMxRef("Node.lookupPrefix()")}}
-
Returns a {{DOMxRef("DOMString")}} containing the prefix for a given namespace URI, if present, and null if not. When multiple prefixes are possible, the result is implementation-dependent.
-
{{DOMxRef("Node.lookupNamespaceURI()")}}
-
Accepts a prefix and returns the namespace URI associated with it on the given node if found (and null if not). Supplying null for the prefix will return the default namespace.
-
{{DOMxRef("Node.normalize()")}}
-
Clean up all the text nodes under this element (merge adjacent, remove empty).
-
{{DOMxRef("Node.removeChild()")}}
-
Removes a child node from the current element, which must be a child of the current node.
-
{{DOMxRef("Node.replaceChild()")}}
-
Replaces one child {{DOMxRef("Node")}} of the current one with the second one given in parameter.
-
- -

Obsolete methods

- -
-
{{DOMxRef("Node.getFeature()")}} {{Obsolete_Inline}}
-
-
{{DOMxRef("Node.getUserData()")}} {{Obsolete_Inline}}
-
Allows a user to get some {{DOMxRef("DOMUserData")}} from the node.
-
{{DOMxRef("Node.hasAttributes()")}} {{Obsolete_Inline}}
-
Returns a {{jsxref("Boolean")}} indicating if the element has any attributes, or not.
-
{{DOMxRef("Node.isSupported()")}} {{Obsolete_Inline}}
-
Returns a {{jsxref("Boolean")}} flag containing the result of a test whether the DOM implementation implements a specific feature and this feature is supported by the specific node.
-
{{DOMxRef("Node.setUserData()")}} {{Obsolete_Inline}}
-
Allows a user to attach, or remove, {{DOMxRef("DOMUserData")}} to the node.
-
- -

Examples

- -

Remove all children nested within a node

- -
function removeAllChildren(element) {
-  while (element.firstChild) {
-    element.removeChild(element.firstChild)
-  }
-}
- -

Sample usage

- -
/* ... an alternative to document.body.innerHTML = "" ... */
-removeAllChildren(document.body)
- -

Recurse through child nodes

- -

The following function recursively calls a callback function for each node contained by a root node (including the root itself):

- -
function eachNode(rootNode, callback) {
-	if (!callback) {
-		const nodes = []
-		eachNode(rootNode, function(node) {
-			nodes.push(node)
-		})
-		return nodes
-	}
-
-	if (false === callback(rootNode)) {
-		return false
-    }
-
-	if (rootNode.hasChildNodes()) {
-		const nodes = rootNode.childNodes
-		for (let i = 0, l = nodes.length; i < l; ++i) {
-			if (false === eachNode(nodes[i], callback)) {
-				return
-            }
-        }
-	}
-}
-
- -

Syntax

- -
eachNode(rootNode, callback)
- -

Description

- -

Recursively calls a function for each descendant node of rootNode (including the root itself).

- -

If callback is omitted, the function returns an {{jsxref("Array")}} instead, which contains rootNode and all nodes contained within.

- -

If callback is provided, and it returns {{jsxref("Boolean")}} false when called, the current recursion level is aborted, and the function resumes execution at the last parent's level. This can be used to abort loops once a node has been found (such as searching for a text node which contains a certain string).

- -

Parameters

- -
-
rootNode
-
The Node object whose descendants will be recursed through.
-
callback {{optional_inline}}
-
An optional callback function that receives a Node as its only argument. If omitted, eachNode returns an {{jsxref("Array")}} of every node contained within rootNode (including the root itself).
-
- -

Sample usage

- -

The following example prints the textContent properties of each <span> tag in a <div> element named "box":

- -
<div id="box">
-  <span>Foo</span>
-  <span>Bar</span>
-  <span>Baz</span>
-</div>
- -
const box = document.getElementById("box")
-eachNode(box, function(node) {
-  if (null != node.textContent) {
-    console.log(node.textContent)
-  }
-})
- -

The above will result in the following strings printing to the user's console:

- -
"\n\t", "Foo", "\n\t", "Bar", "\n\t", "Baz"
- -
-

Note: Whitespace forms part of a {{DOMxRef("Text")}} node, meaning indentation and newlines form separate Text between the Element nodes.

-
- -

Realistic usage

- -

The following demonstrates a real-world use of the eachNode() function: searching for text on a web-page.

- -

We use a wrapper function named grep to do the searching:

- -
function grep(parentNode, pattern) {
-	const matches = []
-	let endScan = false
-
-	eachNode(parentNode, function(node){
-		if (endScan) {
-			return false
-        }
-
-		// Ignore anything which isn't a text node
-		if (node.nodeType !== Node.TEXT_NODE) {
-			return
-        }
-
-		if (typeof pattern === "string") {
-			if (-1 !== node.textContent.indexOf(pattern)) {
-				matches.push(node)
-            }
-		}
-		else if (pattern.test(node.textContent)) {
-			if (!pattern.global) {
-				endScan = true
-				matches = node
-			}
-			else {
-                matches.push(node)
-            }
-		}
-	})
-
-	return matches
-}
- -

For example, to find {{DOMxRef("Text")}} nodes that contain typos:

- -
const typos = ["teh", "adn", "btu", "adress", "youre", "msitakes"]
-const pattern = new RegExp("\\b(" + typos.join("|") + ")\\b", "gi")
-const mistakes = grep(document.body, pattern)
-console.log(mistakes)
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("DOM WHATWG", "#interface-node", "Node")}}{{Spec2("DOM WHATWG")}}Added the following methods: getRootNode()
{{SpecName("DOM4", "#interface-node", "Node")}}{{Spec2("DOM4")}}Removed the following properties: attributes, namespaceURI, prefix, and localName.
- Removed the following methods: isSupported(), hasAttributes(), getFeature(), setUserData(), and getUserData().
{{SpecName("DOM3 Core", "core.html#ID-1950641247", "Node")}}{{Spec2("DOM3 Core")}}The methods insertBefore(), replaceChild(), removeChild(), and appendChild() returns one more kind of error (NOT_SUPPORTED_ERR) if called on a {{DOMxRef("Document")}}.
- The normalize() method has been modified so that {{DOMxRef("Text")}} node can also be normalized if the proper {{DOMxRef("DOMConfiguration")}} flag is set.
- Added the following methods: compareDocumentPosition(), isSameNode(), lookupPrefix(), isDefaultNamespace(), lookupNamespaceURI(), isEqualNode(), getFeature(), setUserData(), and getUserData().
- Added the following properties: baseURI and textContent.
{{SpecName("DOM2 Core", "core.html#ID-1950641247", "Node")}}{{Spec2("DOM2 Core")}}The ownerDocument property was slightly modified so that {{DOMxRef("DocumentFragment")}} also returns null.
- Added the following properties: namespaceURI, prefix, and localName.
- Added the following methods: normalize(), isSupported() and hasAttributes().
{{SpecName("DOM1", "level-one-core.html#ID-1950641247", "Node")}}{{Spec2("DOM1")}}Initial definition.
- -

Browser compatibility

- - - -

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

diff --git a/files/tr/web/api/storage/index.html b/files/tr/web/api/storage/index.html deleted file mode 100644 index e351674887..0000000000 --- a/files/tr/web/api/storage/index.html +++ /dev/null @@ -1,164 +0,0 @@ ---- -title: Saklama -slug: Web/API/Storage -tags: - - API - - Arayüz - - Başvuru - - Depolama - - Referans - - Saklama - - Veri - - Web Depolama - - Web Saklama -translation_of: Web/API/Storage ---- -

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

- -

Web Saklama API'nin Storage arayüzü belirli bir alan için oturum belleğine ya da yerel belleğe erişim sağlar, örneğin saklanmış veri öğelerini ekleme, değiştirme ya da silme izni verir.

- -

Bir alan için oturum belleğini değiştirmek istiyorsanız, {{domxref("Window.sessionStorage")}} yöntemini çağırın; bir alan için yerel belleğini değiştirmek istiyorsanız, {{domxref("Window.localStorage")}} çağırın.

- -

Özellikler

- -
-
{{domxref("Storage.length")}} {{readonlyInline}}
-
Storage nesnesinde saklanan veri öğelerinin sayısını belirten bir tamsayı döndürür.
-
- -

Yöntemler

- -
-
{{domxref("Storage.key()")}}
-
Bir n numarası olduğunda, bu yöntem bellekte n. anahtarın ismini döndürecektir.
-
- -
-
{{domxref("Storage.getItem()")}}
-
Bir anahtar numarası olduğunda, bu anahtarın değerini döndürecektir.
-
{{domxref("Storage.setItem()")}}
-
Bir anahtarın ismi ile değeri olduğunda, bu anahtarı belleğe ekler ya da bu anahtarın değeri önceden varsa günceller.
-
{{domxref("Storage.removeItem()")}}
-
Bir anahtarın ismi olduğunda, bu anahtarı bellekten siler.
-
{{domxref("Storage.clear()")}}
-
Çağrıldığında, bütün anahtarları belleğin dışına boşaltacaktır.
-
- -

Örnekler

- -

Bir Storage nesnesini localStorage yolu ile çağırıyoruz. Here we access a Storage object by calling localStorage. Yerel belleğin !localStorage.getItem('bgcolor') kullanarak veri içerip içermediğini sınıyoruz. Olursa, {{domxref("localStorage.getItem()")}} kullanarak veri öğesi alan setStyles() isminde bir fonksiyon çağırıyoruz ve şu değerleri kullanarak sayfa biçimlerini güncelliyoruz. Olmazsa, diğer populateStorage() fonksiyonu çağrılır, {{domxref("localStorage.setItem()")}} kullanarak öğelerinin değerlerini belirlemek için ardından setStyles() çağrılır.

- -
if(!localStorage.getItem('bgcolor')) {
-  populateStorage();
-} else {
-  setStyles();
-}
-
-function populateStorage() {
-  localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
-  localStorage.setItem('font', document.getElementById('font').value);
-  localStorage.setItem('image', document.getElementById('image').value);
-
-  setStyles();
-}
-
-function setStyles() {
-  var currentColor = localStorage.getItem('bgcolor');
-  var currentFont = localStorage.getItem('font');
-  var currentImage = localStorage.getItem('image');
-
-  document.getElementById('bgcolor').value = currentColor;
-  document.getElementById('font').value = currentFont;
-  document.getElementById('image').value = currentImage;
-
-  htmlElem.style.backgroundColor = '#' + currentColor;
-  pElem.style.fontFamily = currentFont;
-  imgElem.setAttribute('src', currentImage);
-}
- -
-

Not: Tam bir çalışma örneği olarak çalışanı görmek için, Web Bellek Tanıtımınıza bakınız.

-
- -

Tanımlamalar

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Web Storage', '#the-storage-interface', 'Storage')}}{{Spec2('Web Storage')}} 
- -

Tarayıcı Uyumluluğu

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{ CompatUnknown }}8113.2[1]
-
- -

[1] iOS 5.1'ten beri, Safari Mobile localStorage verisini önbellek dizinine kaydeder, genelde boş yer kısa ise zaman zaman bağlı olan işletim sistemi buyruğu ile temizlenir.

- -

Bütün tarayıcılar localStorage ile sessionStorage için değişen seviyede hacim sahiptirler. Burada çeşitli tarayıcılar için bütün bellek hacimlerinin ayrıntılı özeti.

- -

Ayrıca Bakınız

- -

Web Belleği API'sini Kullanma

diff --git a/files/tr/web/api/webgl_api/index.html b/files/tr/web/api/webgl_api/index.html deleted file mode 100644 index e72bde0ec7..0000000000 --- a/files/tr/web/api/webgl_api/index.html +++ /dev/null @@ -1,294 +0,0 @@ ---- -title: 'WebGL_API: Web için 2D ve 3D grafikler' -slug: Web/API/WebGL_API -translation_of: Web/API/WebGL_API ---- -
{{WebGLSidebar}}
- -
-

WebGL (Web Grafik Kütüphanesi) herhangi bir plug-in kullanmadan, uyumlu bütün tarayıcılarda 3D ve 2D grafikler oluşturabilen bir JavaScript API'sidir. WebGL bunu, HTML5 {{HTMLElement ("canvas")}} öğelerinde kullanılabilen OpenGL ES 2.0'a yakın bir API'yi sunarak yapar.

-
- -

WebGL desteği şuan için şu tarayıcılarda mevcuttur: Firefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+, Internet Explorer 11+, and Microsoft Edge build 10240+; ancak, kullanıcının kullandığı cihazın donanımı da bu özellikleri desteklemesi gerekmektedir.

- -

{{HTMLElement("canvas")}} öğesi ayrıca Canvas 2D tarafından web sayfalarında 2D grafikler oluşturmak için de kullanılır.

- -

Referans

- -

Standart arayüzler

- -
- -
- -

Uzantılar

- -
- -
- -

Events

- - - -

Sabitler ve tipleri

- - - -

WebGL 2

- -

WebGL 2 is a major update to WebGL which is provided through the {{domxref("WebGL2RenderingContext")}} interface. It is based on OpenGL ES 3.0 and new features include:

- - - -

See also the blog post "WebGL 2 lands in Firefox" and webglsamples.org/WebGL2Samples for a few demos.

- -

Guides and tutorials

- -

Below, you'll find an assortment of guides to help you learn WebGL concepts and tutorials that offer step-by-step lessons and examples.

- -

Guides

- -
-
Data in WebGL
-
A guide to variables, buffers, and other types of data used when writing WebGL code.
-
WebGL best practices
-
Tips and suggestions to help you improve the quality, performance, and reliability of your WebGL content.
-
Using extensions
-
A guide to using WebGL extensions.
-
- -

Tutorials

- -
-
WebGL tutorial
-
A beginner's guide to WebGL core concepts. A good place to start if you don't have previous WebGL experience.
-
- -

Examples

- -
-
A basic 2D WebGL animation example
-
This example demonstrates the simple animation of a one-color shape. Topics examined are adapting to aspect ratio differences, a function to build shader programs from sets of multiple shaders, and the basics of drawing in WebGL.
-
- -

Advanced tutorials

- -
-
WebGL model view projection
-
A detailed explanation of the three core matrices that are typically used to represent a 3D object view: the model, view and projection matrices.
-
Matrix math for the web
-
A useful guide to how 3D transform matrices work, and can be used on the web — both for WebGL calculations and in CSS3 transforms.
-
- -

Resources

- - - -

Libraries

- - - -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('WebGL')}}{{Spec2('WebGL')}}Initial definition. Based on OpenGL ES 2.0
{{SpecName('WebGL2')}}{{Spec2('WebGL2')}}Builds on top of WebGL 1. Based on OpenGL ES 3.0.
{{SpecName('OpenGL ES 2.0')}}{{Spec2('OpenGL ES 2.0')}} 
{{SpecName('OpenGL ES 3.0')}}{{Spec2('OpenGL ES 3.0')}} 
- -

Browser compatibility

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support9{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}11125.1
WebGL 256{{CompatNo}}{{CompatGeckoDesktop("51")}}{{CompatNo}}43{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support25{{CompatVersionUnknown}}4{{CompatNo}}128.1
WebGL 2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

Compatibility notes

- -

In addition to the browser, the GPU itself also needs to support the feature. So, for example, S3 Texture Compression (S3TC) is only available on Tegra-based tablets. Most browsers make the WebGL context available through the webgl context name, but older ones need experimental-webgl as well. In addition, the upcoming WebGL 2 is fully backwards-compatible and will have the context name webgl2.

- -

Gecko notes

- -

WebGL debugging and testing

- -

Starting with Gecko 10.0 {{geckoRelease("10.0")}}, there are two preferences available which let you control the capabilities of WebGL for testing purposes:

- -
-
webgl.min_capability_mode
-
A Boolean property that, when true, enables a minimum capability mode. When in this mode, WebGL is configured to only support the bare minimum feature set and capabilities required by the WebGL specification. This lets you ensure that your WebGL code will work on any device or browser, regardless of their capabilities. This is false by default.
-
webgl.disable_extensions
-
A Boolean property that, when true, disables all WebGL extensions. This is false by default.
-
- -

See also

- - diff --git a/files/tr/web/api/websocket/binarytype/index.html b/files/tr/web/api/websocket/binarytype/index.html deleted file mode 100644 index cb354a0dfb..0000000000 --- a/files/tr/web/api/websocket/binarytype/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: WebSocket.binaryType -slug: Web/API/WebSocket/binaryType -tags: - - API - - Web API - - WebSocket - - Özellik -translation_of: Web/API/WebSocket/binaryType ---- -

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

- -

WebSocket.binaryType özelliği, bağlantıda iletilen verinin ikilik veri tipini verir.

- -

Sözdizim

- -
var binaryType = aWebSocket.binaryType;
- -

Değer

- -

Bir {{DOMXref("DOMString")}}:

- -
-
"blob"
-
Eğer {{domxref("Blob")}} objeleri kullanıldıysa.
-
"arraybuffer"
-
Eğer {{jsxref("ArrayBuffer")}} objeleri kullanıldıysa. -

 

-
-
- -

Belirtimler

- - - - - - - - - - - - - - - - -
BelirtimDurumYorum
{{SpecName('HTML WHATWG', '#dom-websocket-binarytype', 'WebSocket: binaryType')}}{{Spec2('HTML WHATWG')}}İlk tanım
- -

Tarayıcı desteği

- - - -

{{Compat("api.WebSocket.binaryType")}}

diff --git a/files/tr/web/api/websocket/close/index.html b/files/tr/web/api/websocket/close/index.html deleted file mode 100644 index 44d935c025..0000000000 --- a/files/tr/web/api/websocket/close/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: WebSocket.close() -slug: Web/API/WebSocket/close -tags: - - API - - Web API - - WebSocket - - Yöntem -translation_of: Web/API/WebSocket/close ---- -

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

- -

WebSocket.close() yöntemi, eğer varsa, {{domxref("WebSocket")}} bağlantısını kapatır. Eğer bağlantı zaten CLOSED ise, hiç bir şey yapmaz.

- -

Sözdizim

- -
WebSocket.close();
- -

Parametreler

- -
-
code {{optional_inline}}
-
Bir bağlantının neden kapandığını açıklayan durum kodunu belirten bir sayısal değerdir. Eğer parametre belirtilmediyse, varsayılan değer olan 1005 kullanılır. Ayrıca {{domxref("CloseEvent")}} için izin verilen durum kodu listesine bakınız.
-
- -
-
reason {{optional_inline}}
-
Neden bağlantının kapandığını belirten okunabilir bir dizidir. Bu dizi 123 byte boyutunda UTF-8 yazısından daha uzun olmamalıdır. (karakterler değil)
-
- -

Olağandışı durumlar

- -
-
INVALID_ACCESS_ERR
-
code parametresine geçersiz bir durum kodu girildi.
-
SYNTAX_ERR
-
reason dizisi çok uzun ya da eşleştirilmemiş naipler içeriyor.
-
- -
-

Not: Gecko'da, bu yöntem 8.0'dan önce hiç bir parametreyi desteklemiyor. {{geckoRelease("8.0")}}.

-
- -

Belirtimler

- - - - - - - - - - - - - - -
BelirtimDurumYorum
HTML Living Standard
- The definition of 'WebSocket.close()' in that specification.		Living Standardİlk tanım
- -

Tarayıcı desteği

- - - -

{{Compat("api.WebSocket.close")}}

diff --git a/files/tr/web/api/websocket/extensions/index.html b/files/tr/web/api/websocket/extensions/index.html deleted file mode 100644 index 55b7cbb914..0000000000 --- a/files/tr/web/api/websocket/extensions/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: WebSocket.extensions -slug: Web/API/WebSocket/extensions -tags: - - API - - Web API - - WebSocket - - Özellik -translation_of: Web/API/WebSocket/extensions ---- -

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

- -

Salt-okunur WebSocket.extensions özelliği, sunucunun seçtiği uzantıları verir. Şu anlık boş bir dizi ya da bağlantı tarafından uzlaşılan uzantıların listesidir.

- -

Sözdizim

- -
var extensions = aWebSocket.extensions;
- -

Değer

- -

Bir {{domxref("DOMString")}}.

- -

Belirtimler

- - - - - - - - - - - - - - - - -
BelirtimDurumYorum
{{SpecName('HTML WHATWG', '#dom-websocket-extensions', 'WebSocket: extensions')}}{{Spec2('HTML WHATWG')}}İlk tanım
- -

Tarayıcı desteği

- - - -

{{Compat("api.WebSocket.extensions")}}

diff --git a/files/tr/web/api/websocket/index.html b/files/tr/web/api/websocket/index.html deleted file mode 100644 index ce8a030def..0000000000 --- a/files/tr/web/api/websocket/index.html +++ /dev/null @@ -1,138 +0,0 @@ ---- -title: WebSocket -slug: Web/API/WebSocket -tags: - - API - - WebSocket - - WebSockets -translation_of: Web/API/WebSocket ---- -
{{APIRef("Web Sockets API")}}
- -

WebSocket, bir WebSocket sunucusuyla bağlantı kurmak ve bağlantıyı yönetmek için bir uygulama programlama arayüzü (API) sunar.

- -

WebSocket'i kurmak için WebSocket() yapısını kullanın.

- -

Yapılar

- -
-
{{domxref("WebSocket.WebSocket", "WebSocket(url[, protocols])")}}
-
Yeni oluşturulmuş bir WebSocket objesi verir.
-
- -

Sabitler

- - - - - - - - - - - - - - - - - - - - - - - - -
SabitDeğer
WebSocket.CONNECTING0
WebSocket.OPEN1
WebSocket.CLOSING2
WebSocket.CLOSED3
- -

Özellikler

- -
-
{{domxref("WebSocket.binaryType")}}
-
Bağlantıda kurulan ikilik veri tipi.
-
{{domxref("WebSocket.bufferedAmount")}} {{readonlyinline}}
-
Kuyruktaki değerlerin byte sayıları.
-
{{domxref("WebSocket.extensions")}} {{readonlyinline}}
-
Sunucu tarafından seçilmiş uzantılar.
-
{{domxref("WebSocket.onclose")}}
-
Bağlantı kapandığında çağırılan olay dinleyicisi.
-
{{domxref("WebSocket.onerror")}}
-
Hata oluştuğunda çağırılan olay dinleyicisi.
-
{{domxref("WebSocket.onmessage")}}
-
Sunucudan mesaj alındığında çağırılan olay dinleyicisi.
-
{{domxref("WebSocket.onopen")}}
-
Bağlantı kurulduğunda çağırılan olay dinleyicisi.
-
{{domxref("WebSocket.protocol")}} {{readonlyinline}}
-
Sunucu tarafından seçilmiş alt-protokol.
-
{{domxref("WebSocket.readyState")}} {{readonlyinline}}
-
Bağlantının şimdiki durumu.
-
{{domxref("WebSocket.url")}} {{readonlyinline}}
-
WebSocket'in mutlak URL'si.
-
- -

Yöntemler

- -
-
{{domxref("WebSocket.close", "WebSocket.close([code[, reason]])")}}
-
Bağlantıyı kapatır.
-
{{domxref("WebSocket.send", "WebSocket.send(data)")}}
-
İletilmek üzere veriyi kuyruğa ekler.
-
- -

Örnek

- -

 

- -
// WebSocket bağlantısı kur
-const socket = new WebSocket('ws://localhost:8080');
-
-// Bağlantı kurulduğunda
-socket.addEventListener('open', function (event) {
-    socket.send('Sunucuya bağlanıldı.');
-});
-
-// Mesaj alındığında
-socket.addEventListener('message', function (event) {
-    console.log('Mesaj alındı: ', event.data);
-});
-
-// Mesaj gönder
-socket.send('Merhaba!');
-
-// Bağlantıyı bitir
-socket.close(1000, 'Güle güle.');
- -

 

- -

Belirtimler

- - - - - - - - - - - - - - -
BelirtimDurumYorum
{{SpecName("HTML WHATWG", "web-sockets.html#the-websocket-interface", "WebSocket")}}{{Spec2("HTML WHATWG")}}İlk tanım
- -

Tarayıcı desteği

- -
- - -

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

-
- -

Ayrıca bakınız

- - diff --git a/files/tr/web/api/websocket/onclose/index.html b/files/tr/web/api/websocket/onclose/index.html deleted file mode 100644 index 5df92f3634..0000000000 --- a/files/tr/web/api/websocket/onclose/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: WebSocket.onclose -slug: Web/API/WebSocket/onclose -tags: - - API - - Web API - - WebSocket - - Özellik -translation_of: Web/API/WebSocket/onclose ---- -

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

- -

WebSocket.onclose özelliği bağlantının {{domxref("WebSocket.readyState","readyState")}} özelliği {{domxref("WebSocket.readyState","CLOSED")}} olduğunda çağırılan bir {{domxref("EventHandler")}}'dır. {{domxref("CloseEvent")}} ile birlikte çağırılır.

- -

Sözdizim

- -
aWebSocket.onclose = function(event) {
-  console.log("WebSocket is closed now.");
-};
- -

Değer

- -

Bir {{domxref("EventListener")}}.

- -

Belirtimler

- - - - - - - - - - - - - - - - -
BelirtimDurumYorum
{{SpecName('HTML WHATWG', '#handler-websocket-onclose', 'WebSocket: onclose')}}{{Spec2('HTML WHATWG')}}İlk tanım
diff --git a/files/tr/web/api/websocket/onerror/index.html b/files/tr/web/api/websocket/onerror/index.html deleted file mode 100644 index 62cc321a79..0000000000 --- a/files/tr/web/api/websocket/onerror/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: WebSocket.onerror -slug: Web/API/WebSocket/onerror -tags: - - API - - Web API - - WebSocket - - Özellik -translation_of: Web/API/WebSocket/onerror ---- -

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

- -

WebSocket.onerror özelliği hata oluştuğunda çağırılan bir {{domxref("EventHandler")}}'dır. {{domxref("Event")}} ile birlikte çağırılır.

- -

Sözdizim

- -
aWebSocket.onerror = function(event) {
-  console.error("WebSocket error observed:", event);
-};
- -

Değer

- -

Bir {{domxref("EventListener")}}.

- -

Belirtimler

- - - - - - - - - - - - - - - - -
BelirtimDurumYorum
{{SpecName('HTML WHATWG', '#handler-websocket-onerror', 'WebSocket: onerror')}}{{Spec2('HTML WHATWG')}}İlk tanım
- -

Tarayıcı desteği

- - - -

{{Compat("api.WebSocket.onerror")}}

diff --git a/files/tr/web/api/websocket/onmessage/index.html b/files/tr/web/api/websocket/onmessage/index.html deleted file mode 100644 index 0ea1dd34c8..0000000000 --- a/files/tr/web/api/websocket/onmessage/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: WebSocket.onmessage -slug: Web/API/WebSocket/onmessage -tags: - - API - - Web API - - WebSocket - - Özellik -translation_of: Web/API/WebSocket/onmessage ---- -

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

- -

WebSocket.onmessage özelliği sunucu tarafından mesaj iletildiğinde çağırılan bir {{domxref("EventHandler")}}'dir. {{domxref("MessageEvent")}} ile çağırılır..

- -

Sözdizim

- -
aWebSocket.onmessage = function(event) {
-  console.debug("WebSocket message received:", event);
-};
- -

Değer

- -

Bir {{domxref("EventListener")}}.

- -

Belirtimler

- - - - - - - - - - - - - - - - -
BelirtimDurumYorum
{{SpecName('HTML WHATWG', '#handler-websocket-onmessage', 'WebSocket: onmessage')}}{{Spec2('HTML WHATWG')}}İlk tanım
- -

Tarayıcı desteği

- - - -

{{Compat("api.WebSocket.onmessage")}}

diff --git a/files/tr/web/api/websocket/onopen/index.html b/files/tr/web/api/websocket/onopen/index.html deleted file mode 100644 index 6ce9a90f75..0000000000 --- a/files/tr/web/api/websocket/onopen/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: WebSocket.onopen -slug: Web/API/WebSocket/onopen -tags: - - API - - Web API - - WebSocket - - Özellik -translation_of: Web/API/WebSocket/onopen ---- -

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

- -

WebSocket.onopen özelliği bağlantının {{domxref("WebSocket.readyState","readyState")}} özelliği  {{domxref("WebSocket.readyState","1")}} olduğunda çağırılan bir {{domxref("EventHandler")}}'dir. Bu bağlantının veri alışverişine hazır olduğunu belirtir. {{domxref("Event")}} ile birlikte çağırılır.

- -

Sözdizim

- -
aWebSocket.onopen = function(event) {
-  console.log("WebSocket ile bağlantı kuruldu.");
-};
- -

Değer

- -

Bir {{domxref("EventListener")}}.

- -

Belirtimler

- - - - - - - - - - - - - - - - -
BelirtimDurumYorum
{{SpecName('HTML WHATWG', '#handler-websocket-onopen', 'WebSocket: onopen')}}{{Spec2('HTML WHATWG')}}İlk tanım
- -

Tarayıcı desteği

- - - -

{{Compat("api.WebSocket.onopen")}}

diff --git a/files/tr/web/api/websocket/protocol/index.html b/files/tr/web/api/websocket/protocol/index.html deleted file mode 100644 index d3a466d14b..0000000000 --- a/files/tr/web/api/websocket/protocol/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: WebSocket.protocol -slug: Web/API/WebSocket/protocol -tags: - - API - - Web API - - WebSocket - - Özellik -translation_of: Web/API/WebSocket/protocol ---- -

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

- -

Salt-okunur WebSocket.protocol özelliği sunucunun seçtiği alt-protokolü verir. Bu değer {{domxref("WebSocket")}} objesi oluşturulurken belirtilen protocols dizisidir.

- -

Sözdizim

- -
var protocol = aWebSocket.protocol;
- -

Değer

- -

Bir DOMString.

- -

Belirtimler

- - - - - - - - - - - - - - - - -
BelirtimDurumYorum
{{SpecName('HTML WHATWG', '#dom-websocket-protocol', 'WebSocket: protocol')}}{{Spec2('HTML WHATWG')}}İlk tanım
- -

Tarayıcı desteği

- - - -

{{Compat("api.WebSocket.protocol")}}

diff --git a/files/tr/web/api/websocket/readystate/index.html b/files/tr/web/api/websocket/readystate/index.html deleted file mode 100644 index 1f657428d5..0000000000 --- a/files/tr/web/api/websocket/readystate/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: WebSocket.readyState -slug: Web/API/WebSocket/readyState -tags: - - API - - Web API - - WebSocket - - Özellik -translation_of: Web/API/WebSocket/readyState ---- -

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

- -

Salt-okunur WebSocket.readyState özelliği {{domxref("WebSocket")}} bağlantısının durumunu verir.

- -

Sözdizim

- -
var readyState = aWebSocket.readyState;
- -

Değer

- -

Aşağıdaki herhangi bir unsigned short değeri:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
DeğerDurumAçıklama
0CONNECTINGSoket oluşuturuldu ama henüz bağlanmadı.
1OPENBağlantı kuruldu ve iletişime hazır.
2CLOSINGBağlantı kapatılıyor.
3CLOSEDBağlantı kapatıldı ya da açılamadı.
- -

Belirtimler

- - - - - - - - - - - - - - - - -
BelirtimDurumYorum
{{SpecName('HTML WHATWG', '#dom-websocket-readystate', 'WebSocket: readyState')}}{{Spec2('HTML WHATWG')}}İlk tanım
- -

Tarayıcı desteği

- - - -

{{Compat("api.WebSocket.readyState")}}

diff --git a/files/tr/web/api/websocket/url/index.html b/files/tr/web/api/websocket/url/index.html deleted file mode 100644 index b824519c09..0000000000 --- a/files/tr/web/api/websocket/url/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: WebSocket.url -slug: Web/API/WebSocket/url -tags: - - API - - Web API - - WebSocket - - Özellik -translation_of: Web/API/WebSocket/url ---- -

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

- -

Salt-okunur WebSocket.url özelliği {{domxref("WebSocket")}} yapısının mutlak URL'sini verir.

- -

Sözdizim

- -
var url = aWebSocket.url;
- -

 

- -

Değer

- -

Bir DOMString.

- -

Belirtimler

- - - - - - - - - - - - - - - - -
BelirtimDurumYorum
{{SpecName('HTML WHATWG', '#dom-websocket-url', 'WebSocket: url')}}{{Spec2('HTML WHATWG')}}İlk tanım
- -

Tarayıcı desteği

- - - -

{{Compat("api.WebSocket.url")}}

diff --git a/files/tr/web/api/websocket/websocket/index.html b/files/tr/web/api/websocket/websocket/index.html deleted file mode 100644 index f609e96743..0000000000 --- a/files/tr/web/api/websocket/websocket/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: WebSocket() -slug: Web/API/WebSocket/WebSocket -tags: - - API - - Web API - - WebSocket - - Yapı -translation_of: Web/API/WebSocket/WebSocket ---- -

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

- -

WebSocket() yapısı bir {{domxref("WebSocket")}} objesi verir.

- -

Sözdizim

- -
var aWebSocket = new WebSocket(uri [, protocols]);
- -

Parametreler

- -
-
url
-
Bağlanılacak sunucunun URL'si.
-
protocols {{optional_inline}}
-
Tek bir protokol dizisi ya da protokol dizilerinin bulunduğu bir küme. Bu diziler alt-protokol olarak belirtilmek amacıyla kullanılır, yani tek bir sunucu çoklu alt-protokoller uygulayabilir (örnek olarak bir sunucunun başka türlü etkileşimleri belirli protokola bağlı olarak idare edebilmek isteyebilirsiniz.). Eğer bir protokol dizisi belirtmediyseniz boş bir dizi kullanılır.
-
- -

Olağandışı durumlar

- -
-
SECURITY_ERR
-
Bağlanılmaya çalışılan port engellenmiş.
-
- -

Belirtimler

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#dom-websocket', 'the WebSocket constructor')}}{{Spec2('HTML WHATWG')}} 
- -

Tarayıcı desteği

- - - -

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

diff --git a/files/tr/web/api/window/index.html b/files/tr/web/api/window/index.html deleted file mode 100644 index 078b27a9ad..0000000000 --- a/files/tr/web/api/window/index.html +++ /dev/null @@ -1,462 +0,0 @@ ---- -title: Window -slug: Web/API/Window -tags: - - API - - DOM - - Interface - - JavaScript - - NeedsTranslation - - Reference - - TopicStub - - Window -translation_of: Web/API/Window ---- -

{{APIRef}}

- -

The window object represents a window containing a DOM document; the document property points to the DOM document loaded in that window. A window for a given document can be obtained using the {{Domxref("document.defaultView")}} property.

- -

This section provides a brief reference for all of the methods, properties, and events available through the DOM window object. The window object implements the Window interface, which in turn inherits from the AbstractView interface. Some additional global functions, namespaces, objects, interfaces, and constructors, not typically associated with the window, but available on it, are listed in the JavaScript Reference and DOM Reference.

- -

In a tabbed browser, such as Firefox, each tab contains its own window object (and if you're writing an extension, the browser window itself is a separate window too - see Working with windows in chrome code for more information). That is, the window object is not shared between tabs in the same window. Some methods, namely {{Domxref("window.resizeTo")}} and {{Domxref("window.resizeBy")}} apply to the whole window and not to the specific tab the window object belongs to. Generally, anything that can't reasonably pertain to a tab pertains to the window instead.

- -

{{InheritanceDiagram}}

- -

Properties

- -

This interface inherits properties from the {{domxref("EventTarget")}} interface and implements properties from the {{domxref("WindowOrWorkerGlobalScope")}} and {{domxref("WindowEventHandlers")}} mixins.

- -

Note that properties which are objects (e.g.,. for overriding the prototype of built-in elements) are listed in a separate section below.

- -
-
{{domxref("Window.applicationCache")}}  {{readOnlyInline}} {{gecko_minversion_inline("1.9")}}
-
An {{domxref("OfflineResourceList")}} object providing access to the offline resources for the window.
-
{{domxref("Window.closed")}} {{Non-standard_inline}}{{readOnlyInline}}
-
This property indicates whether the current window is closed or not.
-
{{domxref("Window.Components")}} {{Non-standard_inline}}
-
The entry point to many XPCOM features. Some properties, e.g. classes, are only available to sufficiently privileged code. Web code should not use this property.
-
{{domxref("Window.console")}} {{ReadOnlyInline}}
-
Returns a reference to the console object which provides access to the browser's debugging console.
-
{{domxref("Window.content")}} and Window._content {{Non-standard_inline}} {{obsolete_inline}}{{ReadOnlyInline}}
-
Returns a reference to the content element in the current window. The obsolete variant with underscore is no longer available from Web content.
-
{{domxref("Window.controllers")}}{{non-standard_inline}}{{ReadOnlyInline}}
-
Returns the XUL controller objects for the current chrome window.
-
{{domxref("Window.crypto")}} {{readOnlyInline}}
-
Returns the browser crypto object.
-
{{domxref("Window.defaultStatus")}} {{Obsolete_inline("gecko23")}}
-
Gets/sets the status bar text for the given window.
-
{{domxref("Window.devicePixelRatio")}} {{non-standard_inline}}{{ReadOnlyInline}}
-
Returns the ratio between physical pixels and device independent pixels in the current display.
-
{{domxref("Window.dialogArguments")}} {{ReadOnlyInline}}
-
Gets the arguments passed to the window (if it's a dialog box) at the time {{domxref("window.showModalDialog()")}} was called. This is an {{Interface("nsIArray")}}.
-
{{domxref("Window.directories")}} {{obsolete_inline}}
-
Synonym of {{domxref("window.personalbar")}}
-
{{domxref("Window.document")}} {{ReadOnlyInline}}
-
Returns a reference to the document that the window contains.
-
{{domxref("Window.frameElement")}} {{readOnlyInline}}
-
Returns the element in which the window is embedded, or null if the window is not embedded.
-
{{domxref("Window.frames")}} {{readOnlyInline}}
-
Returns an array of the subframes in the current window.
-
{{domxref("Window.fullScreen")}} {{gecko_minversion_inline("1.9")}}
-
This property indicates whether the window is displayed in full screen or not.
-
{{domxref("Window.globalStorage")}} {{gecko_minversion_inline("1.8.1")}} {{Non-standard_inline}} {{Obsolete_inline("gecko13")}}
-
Unsupported since Gecko 13 (Firefox 13). Use {{domxref("Window.localStorage")}} instead.
- Was: Multiple storage objects that are used for storing data across multiple pages.
-
{{domxref("Window.history")}} {{ReadOnlyInline}}
-
Returns a reference to the history object.
-
{{domxref("Window.innerHeight")}} {{readOnlyInline}}
-
Gets the height of the content area of the browser window including, if rendered, the horizontal scrollbar.
-
{{domxref("Window.innerWidth")}} {{readOnlyInline}}
-
Gets the width of the content area of the browser window including, if rendered, the vertical scrollbar.
-
{{domxref("Window.isSecureContext")}} {{readOnlyInline}}
-
Indicates whether a context is capable of using features that require secure contexts.
-
{{domxref("Window.length")}} {{readOnlyInline}}
-
Returns the number of frames in the window. See also {{domxref("window.frames")}}.
-
{{domxref("Window.location")}}
-
Gets/sets the location, or current URL, of the window object.
-
{{domxref("Window.locationbar")}} {{ReadOnlyInline}}
-
Returns the locationbar object, whose visibility can be toggled in the window.
-
{{domxref("Window.localStorage")}} {{readOnlyInline}}{{gecko_minversion_inline("1.9.1")}}
-
Returns a reference to the local storage object used to store data that may only be accessed by the origin that created it.
-
{{domxref("Window.menubar")}} {{ReadOnlyInline}}
-
Returns the menubar object, whose visibility can be toggled in the window.
-
{{domxref("Window.messageManager")}} {{gecko_minversion_inline("2.0")}}
-
Returns the message manager object for this window.
-
{{domxref("Window.mozAnimationStartTime")}} {{ReadOnlyInline}}{{gecko_minversion_inline("2.0")}}
-
The time in milliseconds since epoch at which the current animation cycle began.
-
{{domxref("Window.mozInnerScreenX")}} {{ReadOnlyInline}}{{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}
-
Returns the horizontal (X) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See mozScreenPixelsPerCSSPixel in {{interface("nsIDOMWindowUtils")}} for a conversion factor to adapt to screen pixels if needed.
-
{{domxref("Window.mozInnerScreenY")}} {{ReadOnlyInline}} {{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}
-
Returns the vertical (Y) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See mozScreenPixelsPerCSSPixel for a conversion factor to adapt to screen pixels if needed.
-
{{domxref("Window.mozPaintCount")}} {{non-standard_inline}}{{ReadOnlyInline}} {{gecko_minversion_inline("2.0")}}
-
Returns the number of times the current document has been rendered to the screen in this window. This can be used to compute rendering performance.
-
{{domxref("Window.name")}}
-
Gets/sets the name of the window.
-
{{domxref("Window.navigator")}} {{readOnlyInline}}
-
Returns a reference to the navigator object.
-
{{domxref("Window.opener")}}
-
Returns a reference to the window that opened this current window.
-
{{domxref("Window.orientation")}}{{non-standard_inline}}{{deprecated_inline}}{{readOnlyInline}}
-
Returns the orientation in degrees (in 90 degree increments) of the viewport relative to the device's natural orientation.
-
{{domxref("Window.outerHeight")}} {{readOnlyInline}}
-
Gets the height of the outside of the browser window.
-
{{domxref("Window.outerWidth")}} {{readOnlyInline}}
-
Gets the width of the outside of the browser window.
-
{{domxref("Window.scrollX","Window.pageXOffset")}} {{readOnlyInline}}
-
An alias for {{domxref("window.scrollX")}}.
-
{{domxref("Window.scrollY","Window.pageYOffset")}}{{readOnlyInline}}
-
An alias for {{domxref("window.scrollY")}}
-
{{domxref("Window.sessionStorage")}} {{readOnlyInline}}
-
Returns a reference to the session storage object used to store data that may only be accessed by the origin that created it.
-
{{domxref("Window.parent")}} {{readOnlyInline}}
-
Returns a reference to the parent of the current window or subframe.
-
{{domxref("Window.performance")}} {{readOnlyInline}}
-
Provides a hosting area for performance related attributes.
-
{{domxref("Window.personalbar")}} {{readOnlyInline}}
-
Returns the personalbar object, whose visibility can be toggled in the window.
-
{{domxref("Window.pkcs11")}} {{obsolete_inline(29)}}
-
Formerly provided access to install and remove PKCS11 modules.
-
{{domxref("Window.returnValue")}}
-
The return value to be returned to the function that called {{domxref("window.showModalDialog()")}} to display the window as a modal dialog.
-
{{domxref("Window.screen")}} {{readOnlyInline}}
-
Returns a reference to the screen object associated with the window.
- -
{{domxref("Window.screenX")}} {{readOnlyInline}}
-
Returns the horizontal distance of the left border of the user's browser from the left side of the screen.
-
{{domxref("Window.screenY")}} {{readOnlyInline}}
-
Returns the vertical distance of the top border of the user's browser from the top side of the screen.
-
{{domxref("Window.scrollbars")}} {{readOnlyInline}}
-
Returns the scrollbars object, whose visibility can be toggled in the window.
-
{{domxref("Window.scrollMaxX")}}{{non-standard_inline}}{{ReadOnlyInline}}
-
The maximum offset that the window can be scrolled to horizontally, that is the document width minus the viewport width.
-
{{domxref("Window.scrollMaxY")}}{{non-standard_inline}}{{ReadOnlyInline}}
-
The maximum offset that the window can be scrolled to vertically (i.e., the document height minus the viewport height).
-
{{domxref("Window.scrollX")}} {{readOnlyInline}}
-
Returns the number of pixels that the document has already been scrolled horizontally.
-
{{domxref("Window.scrollY")}} {{readOnlyInline}}
-
Returns the number of pixels that the document has already been scrolled vertically.
-
{{domxref("Window.self")}} {{ReadOnlyInline}}
-
Returns an object reference to the window object itself.
-
{{domxref("Window.sessionStorage")}}
-
Returns a storage object for storing data within a single page session.
-
{{domxref("Window.sidebar")}} {{non-standard_inline}}{{ReadOnlyInline}}
-
Returns a reference to the window object of the sidebar.
-
{{domxref("Window.speechSynthesis")}} {{ReadOnlyInline}}
-
Returns a {{domxref("SpeechSynthesis")}} object, which is the entry point into using Web Speech API speech synthesis functionality.
-
{{domxref("Window.status")}}
-
Gets/sets the text in the statusbar at the bottom of the browser.
-
{{domxref("Window.statusbar")}} {{readOnlyInline}}
-
Returns the statusbar object, whose visibility can be toggled in the window.
-
{{domxref("Window.toolbar")}} {{readOnlyInline}}
-
Returns the toolbar object, whose visibility can be toggled in the window.
-
{{domxref("Window.top")}} {{readOnlyInline}}
-
Returns a reference to the topmost window in the window hierarchy. This property is read only.
-
{{domxref("Window.window")}} {{ReadOnlyInline}}
-
Returns a reference to the current window.
-
window[0], window[1], etc.
-
Returns a reference to the window object in the frames. See {{domxref("Window.frames")}} for more details.
-
- -

Properties implemented from elsewhere

- -
-
{{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}
-
Returns the {{domxref("CacheStorage")}} object associated with the current context. This object enables functionality such as storing assets for offline use, and generating custom responses to requests.
-
{{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}
-
Provides a mechanism for applications to asynchronously access capabilities of indexed databases; returns an {{domxref("IDBFactory")}} object.
-
{{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}
-
Returns a boolean indicating whether the current context is secure (true) or not (false).
-
{{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}
-
Returns the global object's origin, serialized as a string. (This does not yet appear to be implemented in any browser.)
-
- -

Methods

- -

This interface inherits methods from the {{domxref("EventTarget")}} interface and implements methods from {{domxref("WindowOrWorkerGlobalScope")}} and {{domxref("EventTarget")}}.

- -
-
{{domxref("Window.alert()")}}
-
Displays an alert dialog.
- -
{{domxref("Window.back()")}} {{Non-standard_inline}} {{obsolete_inline}}
-
Moves back one in the window history.
-
{{domxref("Window.blur()")}}
-
Sets focus away from the window.
-
{{domxref("Window.cancelIdleCallback()")}} {{experimental_inline}}
-
Enables you to cancel a callback previously scheduled with {{domxref("Window.requestIdleCallback")}}.
-
{{domxref("Window.captureEvents()")}} {{Deprecated_inline}}
-
Registers the window to capture all events of the specified type.
-
{{domxref("Window.clearImmediate()")}}
-
Cancels the repeated execution set using setImmediate.
-
{{domxref("Window.close()")}}
-
Closes the current window.
-
{{domxref("Window.confirm()")}}
-
Displays a dialog with a message that the user needs to respond to.
-
{{domxref("Window.disableExternalCapture()")}} {{obsolete_inline(24)}}
-
{{todo("NeedsContents")}}
-
{{domxref("Window.dispatchEvent()")}}
-
Used to trigger an event.
-
{{domxref("Window.dump()")}}
-
Writes a message to the console.
-
{{domxref("Window.enableExternalCapture()")}} {{obsolete_inline(24)}}
-
{{todo("NeedsContents")}}
-
{{domxref("Window.find()")}}
-
Searches for a given string in a window.
-
{{domxref("Window.focus()")}}
-
Sets focus on the current window.
-
{{domxref("Window.forward()")}} {{Non-standard_inline}} {{obsolete_inline}}
-
Moves the window one document forward in the history.
-
{{domxref("Window.getAttention()")}}
-
Flashes the application icon.
-
{{domxref("Window.getAttentionWithCycleCount()")}}
-
{{todo("NeedsContents")}}
-
{{domxref("Window.getComputedStyle()")}}
-
Gets computed style for the specified element. Computed style indicates the computed values of all CSS properties of the element.
-
{{domxref("Window.getDefaultComputedStyle()")}} {{Non-standard_inline}}
-
Gets default computed style for the specified element, ignoring author stylesheets.
-
{{domxref("Window.getSelection()")}}
-
Returns the selection object representing the selected item(s).
-
{{domxref("Window.home()")}} {{Non-standard_inline}} {{obsolete_inline}}
-
Returns the browser to the home page.
-
{{domxref("Window.matchMedia()")}} {{gecko_minversion_inline("6.0")}}
-
Returns a {{domxref("MediaQueryList")}} object representing the specified media query string.
-
{{domxref("Window.maximize()")}}
-
{{todo("NeedsContents")}}
-
{{domxref("Window.minimize()")}} (top-level XUL windows only)
-
Minimizes the window.
-
{{domxref("Window.moveBy()")}}
-
Moves the current window by a specified amount.
-
{{domxref("Window.moveTo()")}}
-
Moves the window to the specified coordinates.
-
{{domxref("Window.mozRequestAnimationFrame()")}} {{gecko_minversion_inline("2.0")}}
-
Tells the browser that an animation is in progress, requesting that the browser schedule a repaint of the window for the next animation frame. This will cause a MozBeforePaint event to fire before that repaint occurs.
-
{{domxref("Window.open()")}}
-
Opens a new window.
-
{{domxref("Window.openDialog()")}}
-
Opens a new dialog window.
-
{{domxref("Window.postMessage()")}}
-
Provides a secure means for one window to send a string of data to another window, which need not be within the same domain as the first.
-
{{domxref("Window.print()")}}
-
Opens the Print Dialog to print the current document.
-
{{domxref("Window.prompt()")}}
-
Returns the text entered by the user in a prompt dialog.
-
{{domxref("Window.releaseEvents()")}} {{Deprecated_inline}}
-
Releases the window from trapping events of a specific type.
-
{{domxref("Window.requestIdleCallback()")}}  {{experimental_inline}}
-
Enables the scheduling of tasks during a browser's idle periods.
-
{{domxref("Window.resizeBy()")}}
-
Resizes the current window by a certain amount.
-
{{domxref("Window.resizeTo()")}}
-
Dynamically resizes window.
-
{{domxref("Window.restore()")}}
-
{{todo("NeedsContents")}}
-
{{domxref("Window.routeEvent()")}} {{obsolete_inline(24)}}
-
{{todo("NeedsContents")}}
-
{{domxref("Window.scroll()")}}
-
Scrolls the window to a particular place in the document.
-
{{domxref("Window.scrollBy()")}}
-
Scrolls the document in the window by the given amount.
-
{{domxref("Window.scrollByLines()")}}
-
Scrolls the document by the given number of lines.
-
{{domxref("Window.scrollByPages()")}}
-
Scrolls the current document by the specified number of pages.
-
{{domxref("Window.scrollTo()")}}
-
Scrolls to a particular set of coordinates in the document.
-
{{domxref("Window.setCursor()")}}
-
Changes the cursor for the current window
-
{{domxref("Window.setImmediate()")}}
-
Executes a function after the browser has finished other heavy tasks
-
{{domxref("Window.setResizable()")}}
-
Toggles a user's ability to resize a window.
-
{{domxref("Window.showModalDialog()")}} {{obsolete_inline}}
-
Displays a modal dialog.
-
{{domxref("Window.sizeToContent()")}}
-
Sizes the window according to its content.
-
{{domxref("Window.stop()")}}
-
This method stops window loading.
-
{{domxref("Window.updateCommands()")}}
-
Updates the state of commands of the current chrome window (UI).
-
- -

Methods implemented from elsewhere

- -
-
{{domxref("EventTarget.addEventListener()")}}
-
Register an event handler to a specific event type on the window.
-
{{domxref("WindowOrWorkerGlobalScope.atob()")}}
-
Decodes a string of data which has been encoded using base-64 encoding.
-
{{domxref("WindowOrWorkerGlobalScope.btoa()")}}
-
Creates a base-64 encoded ASCII string from a string of binary data.
-
{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}
-
Cancels the repeated execution set using {{domxref("WindowOrWorkerGlobalScope.setInterval()")}}.
-
{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}
-
Cancels the delayed execution set using {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.
-
{{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}
-
Accepts a variety of different image sources, and returns a {{domxref("Promise")}} which resolves to an {{domxref("ImageBitmap")}}. Optionally the source is cropped to the rectangle of pixels originating at (sx, sy) with width sw, and height sh.
-
{{domxref("WindowOrWorkerGlobalScope.fetch()")}}
-
Starts the process of fetching a resource from the network.
-
{{domxref("EventTarget.removeEventListener")}}
-
Removes an event listener from the window.
-
{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}
-
Schedules a function to execute every time a given number of milliseconds elapses.
-
{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}
-
Schedules a function to execute in a given amount of time.
-
- -

Event handlers

- -

These are properties of the window object that can be set to establish event handlers for the various things that can happen in the window that might be of interest.

- -

This interface inherits event handlers from the {{domxref("EventTarget")}} interface and implements event handlers from {{domxref("WindowEventHandlers")}}.

- -
-

Note: Starting in {{Gecko("9.0")}}, you can now use the syntax if ("onabort" in window) to determine whether or not a given event handler property exists. This is because event handler interfaces have been updated to be proper web IDL interfaces. See DOM event handlers for details.

-
- -
-
{{domxref("GlobalEventHandlers.onabort")}}
-
Called when the loading of a resource has been aborted, such as by a user canceling the load while it is still in progress
-
{{domxref("WindowEventHandlers.onafterprint")}}
-
Called when the print dialog box is closed. See {{event("afterprint")}} event.
-
{{domxref("WindowEventHandlers.onbeforeprint")}}
-
Called when the print dialog box is opened. See {{event("beforeprint")}} event.
-
{{domxref("Window.onbeforeinstallprompt")}}
-
An event handler property dispatched before a user is prompted to save a web site to a home screen on mobile.
-
{{domxref("WindowEventHandlers.onbeforeunload")}}
-
An event handler property for before-unload events on the window.
-
{{domxref("GlobalEventHandlers.onblur")}}
-
Called after the window loses focus, such as due to a popup.
-
{{domxref("GlobalEventHandlers.onchange")}}
-
An event handler property for change events on the window.
-
{{domxref("GlobalEventHandlers.onclick")}}
-
Called after the ANY mouse button is pressed & released
-
{{domxref("GlobalEventHandlers.ondblclick")}}
-
Called when a double click is made with ANY mouse button.
-
{{domxref("GlobalEventHandlers.onclose")}}
-
Called after the window is closed
-
{{domxref("GlobalEventHandlers.oncontextmenu")}}
-
Called when the RIGHT mouse button is pressed
-
{{domxref("Window.ondevicelight")}}
-
An event handler property for any ambient light levels changes
-
{{domxref("Window.ondevicemotion")}} {{gecko_minversion_inline("6.0")}}
-
Called if accelerometer detects a change (For mobile devices)
-
{{domxref("Window.ondeviceorientation")}} {{gecko_minversion_inline("6.0")}}
-
Called when the orientation is changed (For mobile devices)
-
{{domxref("Window.ondeviceorientationabsolute")}} {{non-standard_inline}} Chrome only
-
An event handler property for any device orientation changes.
-
{{domxref("Window.ondeviceproximity")}}
-
An event handler property for device proximity event
-
{{domxref("GlobalEventHandlers.onerror")}}
-
Called when a resource fails to load OR when an error occurs at runtime. See {{event("error")}} event.
-
{{domxref("GlobalEventHandlers.onfocus")}}
-
Called after the window receives or regains focus. See {{event("focus")}} events.
-
{{domxref("WindowEventHandlers.onhashchange")}} {{gecko_minversion_inline("1.9.2")}}
-
An event handler property for {{event('hashchange')}} events on the window; called when the part of the URL after the hash mark ("#") changes.
-
{{domxref("Window.onappinstalled")}}
-
Called when the page is installed as a webapp. See {{event('appinstalled')}} event.
-
{{domxref("Window.oninput")}}
-
Called when the value of an <input> element changes
-
{{domxref("GlobalEventHandlers.onkeydown")}}
-
Called when you begin pressing ANY key. See {{event("keydown")}} event.
-
{{domxref("GlobalEventHandlers.onkeypress")}}
-
Called when a key (except Shift, Fn, and CapsLock) is in pressed position. See {{event("keypress")}} event.
-
{{domxref("GlobalEventHandlers.onkeyup")}}
-
Called when you finish releasing ANY key. See {{event("keyup")}} event.
-
{{domxref("WindowEventHandlers.onlanguagechange")}}
-
An event handler property for {{event("languagechange")}} events on the window.
-
{{domxref("GlobalEventHandlers.onload")}}
-
Called after all resources and the DOM are fully loaded. WILL NOT get called when the page is loaded from cache, such as with back button.
-
{{domxref("WindowEventHandlers.onmessage")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("message")}} event is raised.
-
{{domxref("GlobalEventHandlers.onmousedown")}}
-
Called when ANY mouse button is pressed.
-
{{domxref("GlobalEventHandlers.onmousemove")}}
-
Called continously when the mouse is moved inside the window.
-
{{domxref("GlobalEventHandlers.onmouseout")}}
-
Called when the pointer leaves the window.
-
{{domxref("GlobalEventHandlers.onmouseover")}}
-
Called when the pointer enters the window
-
{{domxref("GlobalEventHandlers.onmouseup")}}
-
Called when ANY mouse button is released
-
{{domxref("Window.onmozbeforepaint")}} {{gecko_minversion_inline("2.0")}}
-
An event handler property for the MozBeforePaint event, which is sent before repainting the window if the event has been requested by a call to the {{domxref("Window.mozRequestAnimationFrame()")}} method.
-
{{domxref("WindowEventHandlers.onoffline")}}
-
Called when network connection is lost. See {{event("offline")}} event.
-
{{domxref("WindowEventHandlers.ononline")}}
-
Called when network connection is established. See {{event("online")}} event.
-
{{domxref("WindowEventHandlers.onpagehide")}}
-
Called when the user navigates away from the page, before the onunload event. See {{event("pagehide")}} event.
-
{{domxref("WindowEventHandlers.onpageshow")}}
-
Called after all resources and the DOM are fully loaded. See {{event("pageshow")}} event.
-
{{domxref("Window.onpaint")}}
-
An event handler property for paint events on the window.
-
{{domxref("WindowEventHandlers.onpopstate")}} {{gecko_minversion_inline("2.0")}}
-
Called when a back putton is pressed.
-
{{domxref("Window.onrejectionhandled")}} {{experimental_inline}}
-
An event handler for handled {{jsxref("Promise")}} rejection events.
-
{{domxref("GlobalEventHandlers.onreset")}}
-
Called when a form is reset
-
{{domxref("GlobalEventHandlers.onresize")}}
-
Called continuously as you are resizing the window.
-
{{domxref("GlobalEventHandlers.onscroll")}}
-
Called when the scroll bar is moved via ANY means. If the resource fully fits in the window, then this event cannot be invoked
-
{{domxref("GlobalEventHandlers.onwheel")}}
-
Called when the mouse wheel is rotated around any axis
-
{{domxref("GlobalEventHandlers.onselect")}}
-
Called after text in an input field is selected
-
{{domxref("GlobalEventHandlers.onselectionchange")}}
-
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised.
-
{{domxref("WindowEventHandlers.onstorage")}}
-
Called when there is a change in session storage or local storage. See {{event("storage")}} event
-
{{domxref("GlobalEventHandlers.onsubmit")}}
-
Called when a form is submitted
-
{{domxref("WindowEventHandlers.onunhandledrejection")}} {{experimental_inline}}
-
An event handler for unhandled {{jsxref("Promise")}} rejection events.
-
{{domxref("WindowEventHandlers.onunload")}}
-
Called when the user navigates away from the page.
-
{{domxref("Window.onuserproximity")}}
-
An event handler property for user proximity events.
-
{{domxref("Window.onvrdisplayconnected")}} {{experimental_inline}}
-
Represents an event handler that will run when a compatible VR device has been connected to the computer (when the {{event("vrdisplayconnected")}} event fires).
-
{{domxref("Window.onvrdisplaydisconnected")}} {{experimental_inline}}
-
Represents an event handler that will run when a compatible VR device has been disconnected from the computer (when the {{event("vrdisplaydisconnected")}} event fires).
-
{{domxref("Window.onvrdisplaypresentchange")}} {{experimental_inline}}
-
represents an event handler that will run when the presenting state of a VR device changes — i.e. goes from presenting to not presenting, or vice versa (when the {{event("onvrdisplaypresentchange")}} event fires).
-
- -

Constructors

- -

See also the DOM Interfaces.

- -
-
{{domxref("Window.ConstantSourceNode")}}
-
Creates an instance of {{domxref("ConstantSourceNode")}}
-
{{domxref("Window.DOMParser")}}
-
{{todo("NeedsContents")}}
-
{{domxref("Window.GeckoActiveXObject")}}
-
{{todo("NeedsContents")}}
-
{{domxref("Image")}}
-
Used for creating an {{domxref("HTMLImageElement")}}.
-
{{domxref("Option")}}
-
Used for creating an {{domxref("HTMLOptionElement")}}
-
{{domxref("Window.QueryInterface")}}
-
{{todo("NeedsContents")}}
-
{{domxref("Window.XMLSerializer")}}
-
{{todo("NeedsContents")}}
-
{{domxref("Worker")}}
-
Used for creating a Web worker
-
{{domxref("Window.XPCNativeWrapper")}}
-
{{todo("NeedsContents")}}
-
{{domxref("Window.XPCSafeJSObjectWrapper")}}
-
{{todo("NeedsContents")}}
-
- -

Interfaces

- -

See DOM Reference

- -

See also

- - diff --git a/files/tr/web/api/window/opener/index.html b/files/tr/web/api/window/opener/index.html deleted file mode 100644 index 5345325459..0000000000 --- a/files/tr/web/api/window/opener/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: Window.opener -slug: Web/API/Window/opener -tags: - - Pencere -translation_of: Web/API/Window/opener ---- -
{{APIRef("HTML DOM")}}
- -

{{domxref("Window")}} arabiriminin opener özelliği, {{domxref("Window.open", "open()")}} kullanarak bu pencereyi açmış olan diğer pencereye bir referans döndürür.

- -

Başka bir deyişle, eğer A penceresi B penceresini açmışsa, B.opener geriye A döndürür.

- -

Sözdizimi

- -
openerWindow = window.opener;
-
- -

Değeri

- -

Şimdiki pencereyi açmak için  open() metodunu çağırmış olan pencereye referans veren bir {{domxref("Window")}} , ya da bu pencere başka bir pencere tarafından bağlantılı olarak açılmadı veya yaratılmadıysa null 'dır.

- -

Bazı tarayıcılarda, kaynak olan {{HTMLElement("a")}} öğesindeki bir rel="noopener" özniteliği, window.opener referansının ayarlanmasını engeller, bu durumda bu özellik null döndürür.

- -

Örnek

- -
if (window.opener != indexWin) {
-  referToTop(window.opener);
-}
-
- -

Kullanım notları

- -

Bir pencere başka bir pencereden açıldığında ({{domxref("Window.open")}} metodu veya {{htmlattrxref("target", "a")}} özniteliği belirtilmiş olan bir bağlantı kullanılarak), window.opener ile bu ilk pencereye işaret eden bir referans tutar. Eğer şimdiki pencereyi açan bir pencere yoksa, bu metot null döndürür.

- -

Tarayıcı uyumluluğu

- - - -

{{Compat("api.Window.opener")}}

diff --git a/files/tr/web/css/@import/index.html b/files/tr/web/css/@import/index.html deleted file mode 100644 index 130d0b186d..0000000000 --- a/files/tr/web/css/@import/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: '@import' -slug: Web/CSS/@import -translation_of: Web/CSS/@import ---- -
{{CSSRef}}
- -

CSS @-kurallarıdan olan @import diğer stil dosyalarından stil kurallarını mevcut sayfamıza dahil etmek için kullanılır. These rules must precede all other types of rules, except {{cssxref("@charset")}} rules; as it is not a nested statement, @import cannot be used inside conditional group at-rules.

- -
@import url("fineprint.css") print;
-@import url("bluish.css") projection, tv;
-@import 'custom.css';
-@import url("chrome://communicator/skin/");
-@import "common.css" screen, projection;
-@import url('landscape.css') screen and (orientation:landscape);
- -

So that {{glossary("user agent")}}s can avoid retrieving resources for unsupported media types, authors may specify media-dependent @import rules. These conditional imports specify comma-separated media queries after the URL. In the absence of any media query, the import is unconditional. Specifying all for the medium has the same effect.

- -

Syntax

- -
@import url;
-@import url list-of-media-queries;
-
- -

where:

- -
-
url
-
Is a {{cssxref("<string>")}} or a {{cssxref("<url>")}} representing the location of the resource to import. The URL may be absolute or relative. Note that the URL need not actually specify a file; it can just specify the package name and part, and the appropriate file is chosen automatically (e.g. chrome://communicator/skin/). See here for more information.
-
list-of-media-queries
-
Is a comma-separated list of media queries conditioning the application of the CSS rules defined in the linked URL. If the browser does not support any these queries, it does not load the linked resource.
-
- -

Formal syntax

- -{{csssyntax}} - -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS3 Cascade', '#at-ruledef-import', '@import')}}{{Spec2('CSS3 Cascade')}} 
{{SpecName('CSS3 Media Queries', '#media0', '@import')}}{{Spec2('CSS3 Media Queries')}}Extended the syntax to support any media query and not only simple media types.
{{SpecName('CSS2.1', 'cascade.html#at-import', '@import')}}{{Spec2('CSS2.1')}}Added support for {{cssxref("<string>")}} to denote the url of a stylesheet,
- and requirement to insert the @import rule at the beginning of the CSS document.
{{SpecName('CSS1', '#the-cascade', '@import')}}{{Spec2('CSS1')}}Initial definition
- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}5.5{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}5.5{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
diff --git a/files/tr/web/css/_colon_active/index.html b/files/tr/web/css/_colon_active/index.html deleted file mode 100644 index fe5563e036..0000000000 --- a/files/tr/web/css/_colon_active/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: ':active' -slug: 'Web/CSS/:active' -translation_of: 'Web/CSS/:active' ---- -
{{CSSRef}}
- -

:active CSS pseudo-class'ı kullanıcı tarafından o an kullanılan (buton gibi) elementleri temsil eder. Bu seçicinin etkinliği, fare ile gezinirken, sol tuşa bastığınızda aktifleşir ve bıraktığınızda son bulur.  :active seçicisi genellikle {{HTMLElement("a")}} ve {{HTMLElement("button")}} buton elementleri için kullanılmaktadır ancak diğer elementler için de tercih edilebilir.

- -
/* Aktif edilmiş bir <a> elementinin seçicisidir. */
-a:active {
-  color: red;
-}
- -

:active pseudo-class'ı ({{cssxref(":link")}}, {{cssxref(":hover")}}, veya {{cssxref(":visited")}}) değerleri tanımlı ise aktif olmayacaktır. Linkleri uygun bir şekilde stillendirebilmek için,  :active kuralını linklerle alakalı tüm kurallar arasında LVHA order olarak bilinen sırada, en sonda kullanın.
-
- LVHA-order: :link — :visited — :hover — :active.

- -
Note: On systems with multi-button mice, CSS3 specifies that the :active pseudo-class must only apply to the primary button; on right-handed mice, this is typically the leftmost button.
- -

Syntax

- -{{csssyntax}} - -

Example

- -
-

HTML

- -
<a href="#">This link will turn lime while you click on it.</a>
-
- -

CSS

- -
a:link { color: blue; }          /* Unvisited links */
-a:visited { color: purple; }     /* Visited links */
-a:hover { background: yellow; }  /* User hovers */
-a:active { color: lime; }        /* Active links */
-
- -

Result

- -
{{EmbedLiveSample('Example')}}
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'scripting.html#selector-active', ':active')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}{{Spec2('CSS4 Selectors')}}No change.
{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}{{Spec2('CSS3 Selectors')}}No change.
{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}{{Spec2('CSS2.1')}}No change.
{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}{{Spec2('CSS1')}}Initial definition.
- -

Browser compatibility

- -
- - -

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

-
- -

See also

- - diff --git a/files/tr/web/css/_colon_first-of-type/index.html b/files/tr/web/css/_colon_first-of-type/index.html deleted file mode 100644 index ad4ee056d6..0000000000 --- a/files/tr/web/css/_colon_first-of-type/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -title: ':first-of-type' -slug: 'Web/CSS/:first-of-type' -translation_of: 'Web/CSS/:first-of-type' ---- -
{{CSSRef}}
- -

The :first-of-type CSS pseudo-class represents the first element of its type among a group of sibling elements.

- -
/* Selects the first <p> to appear inside a parent element
-   regardless of its position inside the siblings */
-p:first-of-type {
-  color: red;
-}
- -
-

Not: Orijinal tanımında seçili elemanın bir üst seçicisi (parent) olması gerekliliği vardı. Seçiciler Seviye 4'ten itibaren artık gerekmiyor.

-
- -

Sözdizimi

- -{{csssyntax}} - -

Örnekler

- -

Örnek 1: Temel ilk paragraf

- -

Aşağıdaki HTML'i baz alalım:

- -
<h2>Başlık</h2>
-
-<p>Paragraf</p>
-
-<p>Paragraf</p>
- -

Ve CSS:

- -
p:first-of-type {
-  color: red;
-}
- -

Bu bize aşağıdaki sonucu verecek — sadece body içerisinde görünecek ilk paragraf elemanı olarak görünecek ilk paragrafın rengini kırmızı yapar:

- -

{{EmbedLiveSample('Example_1_Simple_first_paragraph')}}

- -

Örnek 2: Evrensel seçici olarak..

- -

This example shows how the universal selector is assumed when no simple selector is written.

- -

Önce biraz HTML:

- -
<div>
-  <span>Bu ilk `span`!</span>
-  <span>Ama bu `span` değil.</span>
-  <span>Bu <em>element içinde `em`</em>!</span>
-  <span>Ve bu da <span>element içinde `span`</span>!</span>
-  <b>Bu `b` niteliği!</b>
-  <span>This final `span` does not.</span>
-</div>
-
- -

Şimdi de CSS:

- -
div :first-of-type {
-  background-color: lime;
-}
- -

Sonuç şöyle görünecek:

- -

{{EmbedLiveSample('Example_2_Assumed_universal_selector','100%', '120')}}

- -

Özellikler

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#first-of-type-pseudo', ':first-of-type')}}{{Spec2('CSS4 Selectors')}}Matching elements are not required to have a parent.
{{SpecName('CSS3 Selectors', '#first-of-type-pseudo', ':first-of-type')}}{{Spec2('CSS3 Selectors')}}Initial definition.
- -

Tarayıcı uyumluluğu

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
ÖzellikChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Temel destek1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}9.09.53.2
-
- -
- - - - - - - - - - - - - - - - - - - - - -
ÖzellikAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Temel destek2.1{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.1")}}9.010.03.2
-
- -

Şunlar da var

- - diff --git a/files/tr/web/css/_colon_focus/index.html b/files/tr/web/css/_colon_focus/index.html deleted file mode 100644 index 05ebc35ead..0000000000 --- a/files/tr/web/css/_colon_focus/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: ':focus' -slug: 'Web/CSS/:focus' -tags: - - ':focus' - - CSS - - Layout - - Pseudo-class - - Reference - - Selector - - Web -translation_of: 'Web/CSS/:focus' ---- -
{{CSSRef}}
- -

The :focus CSS pseudo-class represents an element (such as a form input) that has received focus. It is generally triggered when the user clicks or taps on an element or selects it with the keyboard's Tab key.

- -
/* Selects any <input> when focused */
-input:focus {
-  color: red;
-}
- -
-

Note: This pseudo-class applies only to the focused element itself. Use {{CSSxRef(":focus-within")}} if you want to select an element that contains a focused element.

-
- -

Syntax

- -{{CSSSyntax}} - -

Examples

- -

HTML

- -
<input class="red-input" value="I'll be red when focused."><br>
-<input class="blue-input" value="I'll be blue when focused.">
- -

CSS

- -
.red-input:focus {
-  background: yellow;
-  color: red;
-}
-
-.blue-input:focus {
-  background: yellow;
-  color: blue;
-}
- -

Result

- -

{{EmbedLiveSample("Examples")}}

- -

Accessibility concerns

- -

Make sure the visual focus indicator can be seen by people with low vision.  This will also benefit anyone use a screen in a brightly lit space (like outside in the sun). WCAG 2.1 SC 1.4.11 Non-Text Contrast requires that the visual focus indicator be at least 3 to 1.

- - - -

:focus { outline: none; }

- -

Never just remove the focus outline (visible focus indicator) without replacing it with a focus outline that will pass WCAG 2.1 SC 1.4.11 Non-Text Contrast.

- - - -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("HTML WHATWG", "scripting.html#selector-focus", ":focus")}}{{Spec2("HTML WHATWG")}}Defines HTML-specific semantics.
{{SpecName("CSS4 Selectors", "#focus-pseudo", ":focus")}}{{Spec2("CSS4 Selectors")}}No change.
{{SpecName("CSS3 Selectors", "#the-user-action-pseudo-classes-hover-act", ":focus")}}{{Spec2("CSS3 Selectors")}}No change.
{{SpecName("CSS2.1", "selector.html#dynamic-pseudo-classes", ":focus")}}{{Spec2("CSS2.1")}}Initial definition.
- -

Browser compatibility

- -
- - -

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

-
- -

See also

- - diff --git a/files/tr/web/css/_colon_last-child/index.html b/files/tr/web/css/_colon_last-child/index.html deleted file mode 100644 index b068bb7de8..0000000000 --- a/files/tr/web/css/_colon_last-child/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: ':last-child' -slug: 'Web/CSS/:last-child' -tags: - - CSS S - - CSS Sozde-sınıflar - - Yerleşim -translation_of: 'Web/CSS/:last-child' ---- -
{{CSSRef}}
- -

Özet

- -

:last-child CSS pseudo-class bir grup çocuğun sonuncusunu temsil eder.

- -
-

Kullanım Notu: İlk tanımda belirtildiği üzere seçilen elemanın atası olması gerekiyordu. CSS4'le beraber artık gerekmiyor.

-
- -

Yazım Şekli

- -{{csssyntax}} - -

Örnek

- -

HTML İçerik

- -
<ul>
-  <li>Bu kısım yeşermedi</li>
-  <li>Bu da yeşermedi.</li>
-  <li>Burası yeşerdi :)</li>
-</ul>
- -

CSS İçerik

- -
li:last-child {
-  background-color: green;
-}
- -

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

- -

Detaylar

- - - - - - - - - - - - - - - - - - - - - -
DetayDurumYorum
{{SpecName('CSS4 Selectors', '#last-child', ':last-child')}}{{Spec2('CSS4 Selectors')}}Eşleşen elemanların atası olması zorunlu değil.
{{SpecName('CSS3 Selectors', '#last-child', ':last-child')}}{{Spec2('CSS3 Selectors')}}İlk tanımlama.
- -

Tarayıcı Uyumluluğu

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ÖzellikChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Temel Seviyede Destek1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}9.0{{CompatOpera(9.5)}}3.2
Ata zorunlu değil{{CompatChrome(57)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOpera(44)}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ÖzellikAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Temel Seviyede Destek{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1")}}9.0{{CompatOperaMobile(10)}}3.2
Ata zorunlu değil{{CompatChrome(57)}}{{CompatChrome(57)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOperaMobile(44)}}{{CompatUnknown}}
-
- -

Ayrıca Bakınız

- - diff --git a/files/tr/web/css/_colon_link/index.html b/files/tr/web/css/_colon_link/index.html deleted file mode 100644 index d9cd1502eb..0000000000 --- a/files/tr/web/css/_colon_link/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: ':link' -slug: 'Web/CSS/:link' -tags: - - CSS - - Layout - - Pseudo-class - - Reference - - Selector - - Web -translation_of: 'Web/CSS/:link' ---- -
{{ CSSRef }}
- -

The :link CSS pseudo-class represents an element that has not yet been visited. It matches every unvisited {{HTMLElement("a")}}, {{HTMLElement("area")}}, or {{HTMLElement("link")}} element that has an href attribute.

- -
/* Selects any <a> that has not been visited yet */
-a:link {
-  color: red;
-}
- -

Styles defined by the :link pseudo-class will be overridden by any subsequent link-related pseudo-class ({{cssxref(":active")}}, {{cssxref(":hover")}}, or {{cssxref(":visited")}}) that has at least equal specificity. To style links appropriately, put the :link rule before all other link-related rules, as defined by the LVHA-order: :link — :visited — :hover — :active.

- -
-

Note: Use {{cssxref(":any-link")}} to select an element independent of whether it has been visited or not.

-
- -

Syntax

- -{{csssyntax}} - -

Examples

- -

By default, most browsers apply a special {{cssxref("color")}} value to visited links. Thus, the links in this example will probably have special font colors only before you visit them. (After that, you'll need to clear your browser history to see them again.) However, the {{cssxref("background-color")}} values are likely to remain, as most browsers do not set that property on visited links by default.

- -

HTML

- -
<a href="#ordinary-target">This is an ordinary link.</a><br>
-<a href="">You've already visited this link.</a><br>
-<a>Placeholder link (won't get styled)</a>
-
- -

CSS

- -
a:link {
-  background-color: gold;
-  color: green;
-}
-
- -

Result

- -

{{EmbedLiveSample("Examples")}}

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('HTML WHATWG', 'scripting.html#selector-link', ':link') }}{{ Spec2('HTML WHATWG') }}
{{ SpecName('CSS4 Selectors', '#link', ':link') }}{{ Spec2('CSS4 Selectors') }}No change.
{{ SpecName('CSS3 Selectors', '#link', ':link') }}{{ Spec2('CSS3 Selectors') }}No change.
{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':link') }}{{ Spec2('CSS2.1') }}Lift the restriction to only apply it for {{ HTMLElement("a") }} element.
{{ SpecName('CSS1', '#anchor-pseudo-classes', ':link') }}{{ Spec2('CSS1') }}Initial definition.
- -

Browser compatibility

- -
- - -

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

-
- -

See also

- - diff --git a/files/tr/web/css/_colon_not/index.html b/files/tr/web/css/_colon_not/index.html deleted file mode 100644 index e4eb3e5d93..0000000000 --- a/files/tr/web/css/_colon_not/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: 'CSS :not() Seçicisi' -slug: 'Web/CSS/:not' -tags: - - ':not() seçicisi' - - CSS - - CSS Pseudo-class - - Web -translation_of: 'Web/CSS/:not' ---- -
{{CSSRef}}
- -

Özet

- -

Olumsuzluk CSS pseudo-class seçicisi, :not(X), seçilmek istenen öğelerde bulunması istenmeyen sınıfları, kimlik değerleri vb CSS seçicilerini tanımlamak için kullanılır. Girdi olarak X yerine girilen tanımlamalara sahip olmayan öğeleri sayfa içerisinde uygular.

- -

Fakat X ifadesi içerisinde başka olumsuzluk özelliği barındırmamalıdır.

- -
Notlar: - - -
- -

Syntax

- -{{csssyntax}} - -

Örnek

- -

HTML

- -
<p>Bu bir paragraf.</p>
-<p class="classy">İşte sihir burada!</p>
-<div>Burası yeşil olacak </div>
- -

CSS

- -
.classy { text-shadow: 1px 1px 2px gold; }
-p:not(.classy) { color: red; }
-body :not(p) { color: green; }
- -

Sonuç

- -

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

- -

Özelleştirmeler

- - - - - - - - - - - - - - - - - - - - - -
ÖzelleştirmeDurumAçıklama
{{SpecName('CSS4 Selectors', '#negation', ':not()')}}{{Spec2('CSS4 Selectors')}}Çeşitli karışık seçiciler için ifadeyi genişletir.
{{SpecName('CSS3 Selectors', '#negation', ':not()')}}{{Spec2('CSS3 Selectors')}}Standart Tanımlama.
- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ÖzellikChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Temel Özellikler1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}9.09.53.2
Gelişmiş Çzellikler{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ÖzellikAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Temel Özellikler2.1{{CompatVersionUnknown}}{{CompatGeckoMobile("1")}}9.010.03.2
Gelişmiş Çzellikler{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
diff --git a/files/tr/web/css/_colon_root/index.html b/files/tr/web/css/_colon_root/index.html deleted file mode 100644 index de77ef2a6a..0000000000 --- a/files/tr/web/css/_colon_root/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: ':root' -slug: 'Web/CSS/:root' -tags: - - CSS -translation_of: 'Web/CSS/:root' ---- -
{{CSSRef}}
- -

:root CSS sözde-sınıfı dökümanda bulunan kök elemanı yerine geçer (yani onu temel alır). Örneğin HTML'de :root dökümanı oluşturan {{HTMLElement("html")}} öğesini temsil eder ve html seçicisi ile aynıdır, ancak önceliği daha yüksektir.

- -
/* Dökümandaki kök elemanı seçer:
-   Bu HTML'de <html> oluyor. */
-:root {
-  background: royalblue;
-}
- -

Sözdizimi

- -{{csssyntax}} - -

Örnek

- -

:root global CSS değişkenleri tanımlarken kullanışlı olabilir:

- -
:root {
-  --ana-renk: green;
-  --paragraf-boslugu: 5px 0;
-}
-
- -

Tanımlamalar

- - - - - - - - - - - - - - - - - - - - - -
TanımlamaDurumAçıklama
{{SpecName('CSS4 Selectors', '#root-pseudo', ':root')}}{{Spec2('CSS4 Selectors')}}Değişiklik yok.
{{SpecName('CSS3 Selectors', '#root-pseudo', ':root')}}{{Spec2('CSS3 Selectors')}}Başlangıç ​​tanımı.
- -

Tarayıcı Uyumluluğu

- - - -

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

diff --git a/files/tr/web/css/_doublecolon_first-letter/index.html b/files/tr/web/css/_doublecolon_first-letter/index.html deleted file mode 100644 index 8cf9b5be47..0000000000 --- a/files/tr/web/css/_doublecolon_first-letter/index.html +++ /dev/null @@ -1,160 +0,0 @@ ---- -title: '::first-letter (:first-letter)' -slug: 'Web/CSS/::first-letter' -translation_of: 'Web/CSS/::first-letter' ---- -
{{CSSRef}}
- -

 ::first-letter CSS sözde-elementi bir blok seviyeli elementin ilk satırındaki ilk harfe stil uygulamak için kullanılır, tabii o harften önce başka bir içerik gelmiyorsa (örneğin resimler ya da satır içi tablolar).

- -
/* Bir <p> elementinin ilk harfini seçiyoruz. */
-p::first-letter {
-  font-size: 130%;
-}
- -

Bir elementin ilk harfini belirlemek her zaman kolay değildir:

- - - -
-

CSS3 ile birlikte, sözde-sınıfları sözde-elementlerden ayırmak amacıyla iki noktalı ::first-letter gösterimi tanıtıldı. Tarayıcılar, CSS2 ile tanıtılan, :first-letter yazımını da kabul ediyorlar.

-
- -

İzin verilen nitelikler

- -

::first-letter pseudo-elementi ile birlikte CSS niteliklerinin yalnızca küçük bir bölümü kullanılabilir:

- - - -

Söz dizimi(Syntax)

- -{{csssyntax}} - -

Örnekler

- -

Basit drop-cap(Satırdan taşan büyük harf)

- -

Bu örneğimizde <h2> elementinden hemen sonra gelen paragrafın ilk harfine basit bir drop-cap efekti uygulamak için ::first-letter sözde elementini kullanacağız

- -

HTML

- -
<h2>My heading</h2>
-<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
-  ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
-  dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>
-<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
- -

CSS

- -
p {
-  width: 500px;
-  line-height: 1.5;
-}
-
-h2 + p::first-letter {
-  color: white;
-  background-color: black;
-  border-radius: 2px;
-  box-shadow: 3px 3px 0 red;
-  font-size: 250%;
-  padding: 6px 3px;
-  margin-right: 6px;
-  float: left;
-}
- -

Sonuç

- -

{{ EmbedLiveSample('Simple_drop_cap', '100%', 350) }}

- -

Özel noktalama işaretleri ve Latin alfabesinde bulunmayan karakterler üzerindeki etki

- -

Aşağıdaki örnek, ::first-letter sözde elementinin özel noktalama işaretleri ve Latin alfabesinde olmayan karakterler üzerindeki etkisini gösteriyor. 

- -

HTML

- -
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
-<p>-The beginning of a special punctuation mark.</p>
-<p>_The beginning of a special punctuation mark.</p>
-<p>"The beginning of a special punctuation mark.</p>
-<p>'The beginning of a special punctuation mark.</p>
-<p>*The beginning of a special punctuation mark.</p>
-<p>#The beginning of a special punctuation mark.</p>
-<p>「特殊的汉字标点符号开头。</p>
-<p>《特殊的汉字标点符号开头。</p>
-<p>“特殊的汉字标点符号开头。</p>
- -

CSS

- -
p::first-letter {
-  color: red;
-  font-size: 150%;
-}
- -

Sonuç

- -

{{ EmbedLiveSample('Effect_on_special_punctuation_and_non-Latin_characters', '100%', 350) }}

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('CSS4 Pseudo-Elements', '#first-letter-pseudo', '::first-letter')}}{{ Spec2('CSS4 Pseudo-Elements')}}Generalizes allowed properties to typesetting, text decoration, inline layout properties, {{ cssxref("opacity") }}, and {{ cssxref("box-shadow") }}.
{{ SpecName('CSS3 Text Decoration', '#text-shadow-property', 'text-shadow with ::first-letter')}}{{ Spec2('CSS3 Text Decoration')}}Allows the use of {{cssxref("text-shadow")}} with ::first-letter.
{{ SpecName('CSS3 Selectors', '#first-letter', '::first-letter') }}{{ Spec2('CSS3 Selectors') }}Introduction of the two-colon syntax. Definition of edge-case behavior, such as in list items or with specific languages (e.g., the Dutch digraph IJ).
{{ SpecName('CSS2.1', 'selector.html#first-letter', '::first-letter') }}{{ Spec2('CSS2.1') }}No change.
{{ SpecName('CSS1', '#the-first-letter-pseudo-element', '::first-letter') }}{{ Spec2('CSS1') }}Initial definition, using the one-colon syntax.
- -

Tarayıcı Uyumluluğu

- -
- - -

{{Compat("css.selectors.first-letter")}}

-
- -

Ayrıca göz at

- - diff --git a/files/tr/web/css/background-color/index.html b/files/tr/web/css/background-color/index.html deleted file mode 100644 index a8e0b081d1..0000000000 --- a/files/tr/web/css/background-color/index.html +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: Arka plan rengi -slug: Web/CSS/background-color -tags: - - CSS - - CSS arka plan - - CSS özellikler - - arka plan rengi -translation_of: Web/CSS/background-color ---- -
{{CSSRef}}
- -

The background-color CSS özellik, bir ögenin arkaplan rengini ayarlar.

- -
{{EmbedInteractiveExample("pages/css/background-color.html")}}
- - - -

Syntax

- -
/* Anahtar Kelime Değerler */
-background-color: red;
-background-color: indigo;
-
-/* Onaltılık Değer */
-background-color: #bbff00;    /* Tamamen opak */
-background-color: #11ffee00;  /* Tamamen şeffaf */
-background-color: #11ffeeff;  /* Tamamen opak */
-
-/* RGB Değer */
-background-color: rgb(255, 255, 128);        /* Tamamen opak */
-background-color: rgba(117, 190, 218, 0.5);  /* 50% şeffaf */
-
-/* HSL Değer */
-background-color: hsl(50, 33%, 25%);         /* Tamamen opak */
-background-color: hsla(50, 33%, 25%, 0.75);  /* 75% şeffaf */
-
-/* Özel Anahtar  Değerler */
-background-color: currentcolor;
-background-color: transparent;
-
-/* Evrensel values */
-background-color: inherit;
-background-color: initial;
-background-color: unset;
- -

arka plan rengi özellik tek olarak belirtilir <renk>  değer.

- -

Değerler

- -
-
{{cssxref("<renk>")}}
-
Arka planın tek tip rengi. Herhangi bir belirtilen  {{cssxref("arka plan - resmi")}} arkasından işlenir , Rengin görüntüdeki herhangi bir saydamlıkta görünmeye devam etmesine rağmen..
-
- -

Resmi sözdizimi

- -{{csssyntax}} - -

Örnekler

- -

HTML

- -
<div class="exampleone">
-  Lorem ipsum dolor sit amet, consectetuer
-</div>
-
-<div class="exampletwo">
-  Lorem ipsum dolor sit amet, consectetuer
-</div>
-
-<div class="examplethree">
-  Lorem ipsum dolor sit amet, consectetuer
-</div>
- -

CSS

- -
.exampleone {
-  background-color: teal;
-  color: white;
-}
-
-.exampletwo {
-  background-color: rgb(153,102,153);
-  color: rgb(255,255,204);
-}
-
-.examplethree {
-  background-color: #777799;
-  color: #FFFFFF;
-}
-
- -

Sonuç

- -

{{EmbedLiveSample("Examples", 200, 150)}}

- -

Erişilebilirlik endişeleri

- -

Arka plan rengi ile üzerine yerleştirilen metnin rengi arasındaki kontrast oranının, düşük görme koşullarına sahip kişilerin sayfanın içeriğini okuyabilecek kadar yüksek olmasını sağlamak önemlidir..

- -

Renk kontrast oranı, metnin parlaklığı ve arka plan rengi değerlerinin karşılaştırılmasıyla belirlenir. Güncel karşılamak için Web Content Accessibility Guidelines (WCAG), metin içeriği için 4,5: 1, başlıklar gibi daha büyük metinler için ise 3: 1 oranında bir oran gereklidir. Büyük metin 18.66 piksel ve kalın veya daha büyük veya 24 piksel veya daha büyük olarak tanımlanır.

- - - -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#background-color', 'background-color')}}{{Spec2('CSS3 Backgrounds')}}Though technically removing the transparent keyword, this doesn't change anything as it has been incorporated as a true {{cssxref("<color>")}}
{{SpecName('CSS2.1', 'colors.html#propdef-background-color', 'background-color')}}{{Spec2('CSS2.1')}}No change
{{SpecName('CSS1', '#background-color', 'background-color')}}{{Spec2('CSS1')}}Initial definition
- -
{{cssinfo}}
- -

Browser compatibility

- - - -

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

- -

See also

- - diff --git a/files/tr/web/css/background/index.html b/files/tr/web/css/background/index.html deleted file mode 100644 index 8bfef1e9fb..0000000000 --- a/files/tr/web/css/background/index.html +++ /dev/null @@ -1,153 +0,0 @@ ---- -title: background -slug: Web/CSS/background -translation_of: Web/CSS/background ---- -
{{CSSRef("CSS Background")}}
- -

background kısayolu arka plan stillerini - örneğin renk, imaj, kaynak ve boyut ya da tekrarlama metodu- tek seferde vermeye yarayan bir CSS özelliğidir.

- -
{{EmbedInteractiveExample("pages/css/background.html")}}
- - - -

Bu özellik aşağıdaki stilleri tek satırda vermeyi sağlayan bir  shorthand 'dir: {{cssxref("background-clip")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}, ve {{cssxref("background-attachment")}}.

- -

Diğer tüm shorthand özelliklerinde olduğu gibi eklenmemiş tüm stiller ilk değerlerini almaya devam eder.

- -

Syntax

- -
/* Using a <background-color> */
-background: green;
-
-/* Using a <bg-image> and <repeat-style> */
-background: url("test.jpg") repeat-y;
-
-/* Using a <box> and <background-color> */
-background: border-box red;
-
-/* A single image, centered and scaled */
-background: no-repeat center/80% url("../img/image.png");
-
- -

background özelliği bir ya da daha fazla arka plan katmanının virgülle ayrılmış hali olarak tanımlanır.

- -

Her katmanın sentaksı aşağıdaki gibidir:

- - - -

Values(Değerler)

- -
-
<attachment>
-
See {{cssxref("background-attachment")}}
-
<box>
-
See {{cssxref("background-clip")}} and {{cssxref("background-origin")}}
-
<background-color>
-
See {{cssxref("background-color")}}
-
<bg-image>
-
See {{Cssxref("background-image")}}
-
<position>
-
See {{cssxref("background-position")}}
-
<repeat-style>
-
See {{cssxref("background-repeat")}}
-
<bg-size>
-
See {{cssxref("background-size")}}.
-
- -

Formal syntax

- -{{csssyntax}} - -

Örnekler

- -

HTML

- -
<p class="topbanner">
-  Starry sky<br/>
-  Twinkle twinkle<br/>
-  Starry sky
-</p>
-<p class="warning">Here is a paragraph<p>
- -

CSS

- -
.warning {
-  background: pink;
-}
-
-.topbanner {
-  background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #99f repeat-y fixed;
-}
-
- -

Sonuç

- -

{{EmbedLiveSample("Examples")}}

- -

Accessibility concerns

- -

Assistive technology cannot parse background images. If the image contains information critical to understanding the page's overall purpose, it is better to describe it semantically in the document.

- - - -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#the-background', 'background')}}{{Spec2('CSS3 Backgrounds')}}The shorthand property has been extended to support multiple backgrounds and the new {{cssxref("background-size")}}, {{cssxref("background-origin")}} and {{cssxref("background-clip")}} properties.
{{SpecName('CSS2.1', 'colors.html#propdef-background', 'background')}}{{Spec2('CSS2.1')}}No significant changes
{{SpecName('CSS1', '#background', 'background')}}{{Spec2('CSS1')}}Initial definition
- -

{{cssinfo}}

- -

Browser compatibility

- - - -

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

- -

See also

- - diff --git a/files/tr/web/css/class_selectors/index.html b/files/tr/web/css/class_selectors/index.html deleted file mode 100644 index 7db7988ab8..0000000000 --- a/files/tr/web/css/class_selectors/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: Sınıf seçicileri -slug: Web/CSS/Class_selectors -tags: - - CSS - - CSS Referans - - Yeni başlayan - - seçiciler -translation_of: Web/CSS/Class_selectors -original_slug: Web/CSS/Sınıf_seçicileri ---- -
{{CSSRef("Selectors")}}
- -

Sınıf (class) seçicisi, bir HTML belgesindeki elementin {{htmlattrxref("class")}} özniteliğinin içeriği ile eşleşir. {{htmlattrxref("class")}} özniteliği boşlukla ayrılmış değerler listesi olarak tanımlanabilir, bu durumda stil ataması yapılabilmesi için seçicinin özniteliğe verilen değerlerden biri ile birebir eşleşmesi gerekir.

- -

Sözdizimi

- -
.sınıfismi { style properties }
- -

Note this is equivalent to the following {{Cssxref("Attribute_selectors", "attribute selector")}}:

- -
[class~=sınıfismi] { style properties }
- -

Örnek

- -

CSS

- -
span.classy {
-  background-color: DodgerBlue;
-}
-
- -

HTML

- -
<span class="classy">Here's a span with some text.</span>
-<span>Here's another.</span>
-
- -

{{EmbedLiveSample('Example', 200, 50)}}

- -

Spesifikasyon

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#class-html', 'class selectors')}}{{Spec2('CSS4 Selectors')}}No changes
{{SpecName('CSS3 Selectors', '#class-html', 'class selectors')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#class-html', 'child selectors')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#class-as-selector', 'child selectors')}}{{Spec2('CSS1')}}Initial definition
- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
diff --git a/files/tr/web/css/css_background_and_borders/box-shadow_generator/index.html b/files/tr/web/css/css_background_and_borders/box-shadow_generator/index.html deleted file mode 100644 index 0e3e4b1b25..0000000000 --- a/files/tr/web/css/css_background_and_borders/box-shadow_generator/index.html +++ /dev/null @@ -1,2882 +0,0 @@ ---- -title: Box-shadow Oluşturucu -slug: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator -tags: - - box-shadow oluşturucu -translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator ---- -

Bu araç {{cssxref("box-shadow")}}  CSS yapısı oluşturarak, CSS objelerinize box-shadow efekti vermenizi sağlar.

- - - -
{{ EmbedLiveSample('box-shadow_generator', '100%', '1100px', '') }}
- -

Related Tool: Box Shadow CSS Generator

diff --git a/files/tr/web/css/css_box_model/introduction_to_the_css_box_model/index.html b/files/tr/web/css/css_box_model/introduction_to_the_css_box_model/index.html deleted file mode 100644 index f93bbe1292..0000000000 --- a/files/tr/web/css/css_box_model/introduction_to_the_css_box_model/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: Kutu modeli -slug: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model -tags: - - CSS - - Kutu Modeli -translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model -original_slug: Web/CSS/box_model ---- -

Özet

- -

Bir döküman içerisinde, her eleman bir dikdörtgen kutu şeklinde sunulur. Bu kutuların boyutları, özellikleri — örneğin renkleri, arkaplanı, border görünümü — ve pozisyonlarını belirlemek, rendering motorunun görevidir.

- -

CSS içinde, tüm bu dikdörtgen kutular tanımlanırken standart kutu modeli (box model) olarak tanımlanırlar Bu model, elemanın içeriğinin kaplayacağı alanı tanımlar. Her kutunun dört kenarı bulunur: margin kenarı, border kenarı, padding kenarı ve içerik kenarı.

- -

CSS Box model

- -

İçerik alanı, gerçekten elemanın içeriğinin kapladığı alandır. Sıklıkla bir backgroundu, rengi veya imajı bulunur ve içerik kenarından iç kısımda yer alır, ebatları içerik genişliği veya içerik-kutu genişliği ve içerik yüksekliği veya içerik-kutu yüksekliğidir.

- -

Eğer CSS'in  {{ cssxref("box-sizing") }} özelliği varsayılan olarak ayarlandıysa, CSS özellikleri {{ cssxref("width") }}, {{ cssxref("min-width") }}, {{ cssxref("max-width") }}, {{ cssxref("height") }}, {{ cssxref("min-height") }} ve {{ cssxref("max-height") }} içerik boyutunu kontrol eder.

- -

Padding alanı borderın etrafını içeriden çevreleyen bir dolgu şeklinde genişler. İçerik alanı background, renk ya da imaj barındırıyorsa bunlar da padding'in içine doğru genişler, bu sayede paddingin içeriği genişleten bir olgu olduğunu düşünebilirsiniz. Padding, padding kenarının içinde yer alır ve ebatları padding-box genişliği ve padding-box yüksekliğidir.

- -

Padding kenarı ve içerik arasındaki boşluk {{ cssxref("padding-top") }}, {{ cssxref("padding-right") }}, {{ cssxref("padding-bottom") }}, {{ cssxref("padding-left") }} CSS özellikleri ve {{ cssxref("padding") }} CSS kısa yazım biçimi ile kontrol edilir.

- -

Border alanı padding alanını border içeren alanı kullanarak genişlerit. Border kenarı içindeki alandır ve ebatları border-box genişliği ve border-box yüksekliği olarak tanımlanır. Bu alan borderın {{ cssxref("border-width") }} özelliği veya {{ cssxref("border") }} kısa yazımı kullanılarak belirlenir.

- -

Margin alanı border alanını boş alana doğru genişletir ve elemanları komşu elemanlardan ayırmak için kullanılır. Bu alan margin kenarı içindeki alandır, ve ebatları margin-box genişliği ve margin-box yüksekliğidir.

- -

Margin alanının boyutları  {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }}, {{ cssxref("margin-left") }} ve {{ cssxref("margin") }} kısa yazımı CSS özellikleri kullanılarak kontrol edilir.

- -

margin collapsing oluştuğunda, margin alanları kutular arasında paylaştırılmadıkça düzgün bir şekilde tanımlanmış olmaz.

- -

Son olarak, unutmayın ki, özelliği değiştirilmemiş inline elemanlar için, içeriğin etrafında görsel olarak border ve padding görünse bile, kaplanacak alan miktarını (satırın yüksekliğine destek olarak) belirleyen özellik CSS'in {{ cssxref('line-height') }} özelliğidir.

- -

Özellikleri

- - - - - - - - - - - - - - - - - - - - - -
ÖzellikDurumComment
{{ SpecName("CSS2.1","box.html#box-dimensions")}}{{ Spec2('CSS2.1') }} -

Tamamen daha fazla tanımlaması bulunsa da pratikte değişiklik bulunmuyor

-
{{ SpecName("CSS1","#formatting-model")}}{{ Spec2('CSS1') }} 
- -

Bunlara da bakın

- - diff --git a/files/tr/web/css/css_lists_and_counters/using_css_counters/index.html b/files/tr/web/css/css_lists_and_counters/using_css_counters/index.html deleted file mode 100644 index bc33ddb4dd..0000000000 --- a/files/tr/web/css/css_lists_and_counters/using_css_counters/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: CSS Sayaçlarını Kullanmak -slug: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters -tags: - - CSS - - CSS Counter - - CSS Sayaçlar - - MDN - - Sayaçlar -translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters -original_slug: Web/Guide/CSS/Sayaçlar ---- -

{{CSSRef}}

-

CSS counters are, in essence, variables maintained by CSS whose values may be incremented by CSS rules to track how many times they're used. This lets you adjust the appearance of content based on its placement in the document. CSS counters are an implementation of Automatic counters and numbering in CSS 2.1.

-

The value of a counter is manipulated through the use of {{cssxref("counter-reset")}} and {{cssxref("counter-increment")}} can be displayed on a page using the counter() or counters() function of the content property.

-

Sayaçları kullanmak

-

To use a CSS counter, it must first be reset to a value, 0 by default. To add the value of a counter to an element, use the counter() function. The following CSS adds to the beginning of each h3 element "Section <the value of the counter>:".

-
body {
-  counter-reset: bolum;                   /* bolum adlı sayacın değerini 0 olarak ayarla */
-}
-h3:before {
-  counter-increment: bolum;               /* bolum adlı sayacı arttır */
-  content: "Bölüm" counter(bolum) ": ";   /* Sayacı görüntüle */
-}
-
-

Örnek:

-
<h3>Giriş</h3>
-<h3>Gövde</h3>
-<h3>Sonuç</h3>
-

{{ EmbedLiveSample('Using_counters', 300,200) }}

-

Nesting counters

-

A CSS counter can be especially useful to make outlined lists because a new instance of a CSS counter is automatically created in child elements. Using the counters() function, a string can be inserted between different levels of nested counters. For example this CSS:

-
ol {
-  counter-reset: section;                /* Creates a new instance of the
-                                            section counter with each ol
-                                            element */
-  list-style-type: none;
-}
-li:before {
-  counter-increment: section;            /* Increments only this instance
-                                            of the section counter */
-  content: counters(section,".") " ";    /* Adds the value of all instances
-                                            of the section counter separated
-                                            by a ".". */
-                                         /* if you need to support < IE8 then
-                                            make sure there is no space after
-                                            the ','
-}
-
-

Combined with the following HTML:

-
<ol>
-  <li>item</li>          <!-- 1     -->
-  <li>item               <!-- 2     -->
-    <ol>
-      <li>item</li>      <!-- 2.1   -->
-      <li>item</li>      <!-- 2.2   -->
-      <li>item           <!-- 2.3   -->
-        <ol>
-          <li>item</li>  <!-- 2.3.1 -->
-          <li>item</li>  <!-- 2.3.2 -->
-        </ol>
-        <ol>
-          <li>item</li>  <!-- 2.3.1 -->
-          <li>item</li>  <!-- 2.3.2 -->
-          <li>item</li>  <!-- 2.3.3 -->
-        </ol>
-      </li>
-      <li>item</li>      <!-- 2.4   -->
-    </ol>
-  </li>
-  <li>item</li>          <!-- 3     -->
-  <li>item</li>          <!-- 4     -->
-</ol>
-<ol>
-  <li>item</li>          <!-- 1     -->
-  <li>item</li>          <!-- 2     -->
-</ol>
-

Yields this result:

-

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

-

Specifications

- - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS2.1', 'generate.html#generate.html#counters', 'counter-reset')}}{{Spec2('CSS2.1')}} 
-

See also

- -

There is an additional example available at http://www.mezzoblue.com/archives/20.../counter_intu/. This blog entry was posted on November 01, 2006, but appears to be accurate.

-

 

diff --git a/files/tr/web/css/css_selectors/index.html b/files/tr/web/css/css_selectors/index.html deleted file mode 100644 index af5308fe63..0000000000 --- a/files/tr/web/css/css_selectors/index.html +++ /dev/null @@ -1,233 +0,0 @@ ---- -title: CSS seçiciler -slug: Web/CSS/CSS_Selectors -tags: - - Başlangıç - - CSS - - Nitelik - - Sozde - - id - - oğrenin - - seçiciler - - sınıf -translation_of: Web/CSS/CSS_Selectors -original_slug: Öğren/CSS/CSS_yapi_taslari/Selectors ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}
- -

Biz {{Glossary("CSS")}}'i, HTML'de şekillendirmek istediğimiz elemanları hedeflemek için kullanırız. Şekillendireceğimiz elemanları seçmek için CSS'de kullanabileceğimiz bir çok seçeneği olan CSS seçicileri vardır. Bu makale ve alt makalelerinde, nasıl çalıştıklarını görerek farklı türleri ayrıntılı olarak ele alacağız

- - - - - - - - - - - - -
Ön koşullar:Giriş seviyesi bilgisayar kullanımı, gerekli yazılımların yüklenmesi, dosyalarla çalışma konusunda yeterli seviyede bilgiler ve  HTML temelleri (IHTML'ye Giriş bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(CSS ilk adım)
Amaç:CSS seçicilerin nasıl çalıştığını ayrıntılı olarak öğrenmek
- -

Seçici nedir?

- -

Zaten tanıştınız. Bir CSS seçici, bir CSS kuralının ilk kısmıdır. Bu, tarayacıya, kural içindeki CSS özellik değerlerinin uygulanabilmesi için hangi HTML elemanlarının seçilmesi gerektiğini söyleyen etiketlerden ve diğer terimlerden oluşan bir kalıptır. Seçici tarafından seçilen eleman veya elemanlar, seçicinin konusu olarak anılır.

- -

Some code with the h1 highlighted.

- -

Daha önceki makalelerde, bazı farklı seçicilerle tanıştınız ve belgeyi farklı şekillerde hedefleyen seçiciler olduğunu öğrendiniz — örneğin, bir eleman seçici h1 veya sınıf seçici .special gibi.

- -

CSS'de, seçiciler CSS Seçiciler spesifikasyonunda tanımlanır; CSS'in herhangi bir parçasının çalışabilmesi için tarayıcılarda destekleniyor olması gerekir. karşılaşacağınız seçicilerin çoğu, olgun bir özellik olan Seviye 3 Seçiciler spesifikasyonunda tanımlanmıştır, bu nedenle bu seçiciler için mükemmel tarayıcı desteği bulacaksınız.

- -

Seçici listeleri

- -

Aynı CSS kurallarını kullanan birden fazla elemana sahipseniz, bunları ayrı ayrı seçicilerle yazabileceğiniz gibi,  bir seçici listesinde birleştirebilirsiniz. Örneğin, aynı CSS'i kullanan h1 eleman seçicim ve .special sınıf seçicim olsun. Bunu iki ayrı kural olarak yazabilirim.

- -
h1 {
-  color: blue;
-}
-
-.special {
-  color: blue;
-}
- -

Ayrıca aralarına virgül ekleyerek bunları bir seçim listesinde birleştirebilirim.

- -
h1, .special {
-  color: blue;
-}
- -

Beyaz boşluk virgülden önce veya sonra gelebilir. Ayrıca, her birini ayrı satırlarda yazarsanız, seçicileri daha okunaklı bulabilirsiniz. Bu tamamen sizin tercihiniz CSS her iki şekildeki kullanımı aynı yorumlayacaktır.

- -
h1,
-.special {
-  color: blue;
-}
- -

Aşağıdaki canlı örnekte, aynı bildirimlere sahip iki seçiciyi birleştirmeyi deneyin. Görsel sunum birleştirildikten sonra aynı olmalıdır.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} 

- -

Seçicileri bu şekilde gruplandığınızda, herhangi bir seçici geçersizse, kuralın tamamı yok sayılacaktır.

- -

Aşağıdaki örnekte, geçersiz sınıf seçici kuralı yok sayılacak, oysa h1 şekillendirmesi hala uygulanacaktır.

- -
h1 {
-  color: blue;
-}
-
-..special {
-  color: blue;
-}
- -

Ancak birleştirildiğinde, kuralın tamamı geçersiz sayıldığı için ne sınıf ne de h1 elemanı biçimlendirilmez

- -
h1, ..special {
-  color: blue;
-}
- -

Seçici türleri

- -

Birkaç farklı seçici grubu vardır ve hangi tür seçiciye ihtiyacınız olabileceğini bilmek, iş için doğru aracı bulmanıza yardımcı olacaktır..

- -

Tür, sınıf ve kimlik seçicileri

- -

Bu grup, bir HTML nesnesini hedefleyen seçiciler içerir <h1>:

- -
h1 { }
- -

Ayrıca bir sınıfı hedefleyen seçicileri de içerir class:

- -
.box { }
- -

veya bir kimlik id:

- -
#unique { }
- -

Nitelik seçiciler

- -

Bu seçici grubu, bir elemandaki belirli bir niteğin varlığına bağlı olarak elemanları seçmemiz için bize farklı yollar sunar:

- -
a[title] { }
- -

Veya belirli bir değere sahip bir niteliğin varlığına göre bir seçim yapabiliriz:

- -
a[href="https://example.com"] { }
- -

Sözde sınıflar ve sözde elemanlar

- -

Bu seçici grubu, bir elemanın belirli durumlarını biçimlendiren sözde sınıfları içerir. Örneğin :hover sözde sınıfı bir elemanın üzerine fare imleci ile gelindiğinde elemanın nasıl şekillendirileceğini seçer:

- -
a:hover { }
- -

Ayrıca, elemanın kendisinden ziyade bir öğenin belirli bir bölümünü seçen sözde elemanları da içerir. Örneğin ::first-line her zaman bir elemanın içindeki ilk metin satırını seçer (<p> şağıdaki durumda, sanki ilk satırın etrafı <span> etiketiyle sarılmış ve sonra seçilmiş gibi davranır.

- -
p::first-line { }
- -

Birleştiriciler

- -

Son seçici grubu, belgelerimizdeki öğeleri hedeflemek için diğer seçicileri birleştirir. Öreğin, aşağıdaki <article> eleman etiketi  (>) ile kullanılarak doğrudan çocukları olan paragraf elemanlarını seçer:

- -
article > p { }
- -

Sonraki adımlar

- -

Bu makale böllümündeki veya genel olarak MDN'deki çeşitli seçici türlerine doğrudan bağlantılar için aşağıdaki seçiciler referan tablosuna bakabilir veya tür, sınıf ve kimlik seçicileri makalesine devam ederek yolculuğunuza başlayabilirsiniz.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}

- -

Seçicilerin referans tablosu

- -

Aşağıdaki tablo, her bir seçici türünü nasıl kullanacağınızı gösteren bu kılavuzdaki sayfalara bağlantılarla birlikte, kullanabileceğiniz seçicilere genel bir bakış sunar. Ayrıca, tarayıcı destek bilgilerini kontrol edebileceğiniz her seçici için MDN sayfasına bir bağlantı ekledim. Bunu, geliştirme aşamasında yada css ile denemeler yaparken başvuracağınız bir kaynak olarak kullanabilirsiniz.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SeçiciÖrnekCSS makaleleri
Tür seçicih1 {  }Tür seçiciler
Evrensel seçici* {  }Evrensel seçici
Sınıf seçici.box {  }Sınıf seçici
Kimlik seçici#unique { }Kimlik seçici
Nitelik seçicia[title] {  }Nitelik seçiciler
Sözde sınıf seçicip:first-child { }Sözde sınıflar
Sözde elelman seçicip::first-line { }Sözde eleman
Torun birleştiricisiarticle pTorun birleştirici
Çocuk birleştiricisiarticle > pÇocuk birleştirici
Bitişik kardeş birleştiricisih1 + pBitişik kardeş
Genel kardeş birleştiricisih1 ~ pGenel kardeş
- -

Bu kısımda

- -
    -
  1. Kaynak sırası ve miras
    2. -
  2. CSS seçicileri - -
    3. -
  3. Kutu modeli
    4. -
  4. Arka planlar ve kenarlıklar
    5. -
  5. Farklı metin yönleri kullanma
    6. -
  6. Taşan içerik
    7. -
  7. Değerler ve birimler
    8. -
  8. CSS'de elemanların boyutları
    9. -
  9. Görseller, medya ve form öğeleri
    10. -
  10. Tabloları şekillendirme
    11. -
  11. CSS'de hata ayıklama
    12. -
  12. CSS'inizi düzenleme
    13. -
diff --git a/files/tr/web/css/display/index.html b/files/tr/web/css/display/index.html deleted file mode 100644 index 2b26ff1cd5..0000000000 --- a/files/tr/web/css/display/index.html +++ /dev/null @@ -1,446 +0,0 @@ ---- -title: display -slug: Web/CSS/display -tags: - - CSS - - CSS özelliği - - Referans -translation_of: Web/CSS/display ---- -
{{CSSRef}}
- -

Özet

- -

display özelliği, bir eleman için kullanılan kutu görüntüleme türünü belirler. HTML'de, varsayılan display değeri, daha önceden belirlenmiş HTML spesifikasyonlarından ya da tarayıcı/kullanıcı varsayılan stil şablonundan alınır. XML'de varsayılan display değeri inline'dır.

- -

Bir çok farklı kutu görüntüleme tipi olmasıyla birlikte, none değeri bir elementi görüntülemeye kapatır, bu değeri kullandığınızda, bütün alt elemanlar da görüntülenmezler. Belge, o eleman yokmuş gibi görüntülenir.

- -

{{cssinfo}}

- -

Sözdizimi kuralları

- -
display: none;
-display: inline;
-display: block;
-display: inline-block;
-display: contents;
-display: list-item;
-display: inline-list-item;
-display: table;
-display: inline-table;
-display: table-cell;
-display: table-column;
-display: table-column-group;
-display: table-footer-group;
-display: table-header-group;
-display: table-row;
-display: table-row-group;
-display: table-caption;
-display: flex;
-display: inline-flex;
-display: grid;
-display: inline-grid;
-display: ruby;
-display: ruby-base;
-display: ruby-text;
-display: ruby-base-container;
-display: ruby-text-container;
-display: run-in;
-
-/* Global values */
-display: inherit;
-display: initial;
-display: unset;
-
- -

Değerler

- -

display-value bir elementin görüntülenme biçimini tanımlamak için kullanılan bir değerdir.

- -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Değer kümesiDeğerTanım
Basic values (CSS 1)none -

Elementi görüntülemeye kapatır.(Tasarım değişikliğe uğramaz.);bütün alt elementler de görüntülenmez. Belge, bu element yokmuş gibi davranır.

- -

Görüntülemeye kapadığınız elementin kutu boyutlarının halen tasarımda var olmasını istiyorsanız {{cssxref("visibility")}} özelliğine gözatın.

-
inlinebir veya daha fazla satıriçi kutusu oluşturur.
blockblok element kutusu oluşturur.
list-itemElement içerik için bir blok kutusu oluşturur, ve içeriği listeye ayırır.
Gelişletilmiş değerler (CSS 2.1)inline-blockinline-block değeri, kendisini çevreleyen bir block element alanı oluşturur.
Table model değerler (CSS 2.1)inline-tableinline-table  değeri HTML üzerinde direkt olarak bir mapping'e sahip değildir.  {{HTMLElement("table")}} HTML elementi gibi davranır ancak farklı olarak, block elementi değil, inline-block özelliklerini taşır.
tableBu elementler block {{HTMLElement("table")}} gibi davranır.
table-captionBu elementler {{HTMLElement("caption")}} HTML elementler gibi davranır.
table-cellBu elementler {{HTMLElement("td")}} gibi davranır..
table-columnBu elementler {{HTMLElement("col")}} gibi davranır.
table-column-groupBu elementler {{HTMLElement("colgroup")}} gibi davranır.
table-footer-groupBu elementler {{HTMLElement("tfoot")}} gibi davranır.
table-header-groupBu elementler {{HTMLElement("thead")}} gibi davranır.
table-rowBu elementler {{HTMLElement("tr")}} gibi davranır.
table-row-groupBu elementler {{HTMLElement("tbody")}} gibi davranır.
CSS3 liste değerleri (CSS3)inline-list-itemThe inline-list-item display value makes the element a list item, with the effects described above. Additionally, the outside value of list-style-position computes to inside on this element. Otherwise, this display value is treated identically to inline.
Flexbox model değerleri (CSS3)flexElement, block elementi gibi davranır ve flexbox modeline uygun olarak görünür.
inline-flexElement inline element gibi davranır ve flexbox modeline uygun olarak görünür.
Grid box model değerleri (CSS3) {{experimental_inline}}grid -

Element, block elementi gibi davranır ve
- grid modeline uygun olarak görünür.

- -
Deneyimlenebileceği üzere, çoğu tarayıcı henüz desteklememektedir. Özellikle -moz-grid 'in display:grid'e ait bir prefix olmadığını belirtmeliyiz. -moz-grid XUL layout model 'de belirtilen ve kullanmamanız gereken bir prefix'tir.
-
inline-gridElement inline element gibi davranır ve grid modeline bağlı olarak içeriği kapsar.
Ruby formatting model values (CSS3){{experimental_inline}}rubyElement inline element gibi davranır ve
- içeriği ruby format modelinde kapsar {{HTMLElement("ruby")}} gibi davranır.
ruby-baseBu elementler {{HTMLElement("rb")}} gibi davranır.
ruby-textBu elementler {{HTMLElement("rt")}} gibi davranır
ruby-base-containerThese elements behave like {{HTMLElement("rbc")}} elements generated as anonymous boxes.
ruby-text-containerThese elements behave like {{HTMLElement("rtc")}} elements.
Experimental values {{experimental_inline}}run-in -
    -
  • If the run-in box contains a block box, same as block.
    • -
  • If a block box follows the run-in box, the run-in box becomes the first inline box of the block box.
    • -
  • If an inline box follows, the run-in box becomes a block box.
    • -
-
contentsThese elements don't produce a specific box by themselves. They are replaced by their pseudo-box and their child boxes.
-
-
- -

Formal syntax

- -{{csssyntax}} - -

Examples

- -

View Live Examples

- -
p.secret  { display: none }
-<p style="display:none"> invisible text </p>
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS3 Lists', '#valdef-display-inline-list-item', 'display')}}{{Spec2('CSS3 Lists')}}Added the inline-list-item values.
{{SpecName('CSS3 Display', '#the-display-properties', 'display')}}{{Spec2('CSS3 Display')}}Added the run-in and contents values.
{{SpecName('CSS3 Ruby', '#ruby-display', 'display')}}{{Spec2('CSS3 Ruby')}}Added the ruby, ruby-base, ruby-text, ruby-base-container, and ruby-text-container
{{SpecName('CSS3 Grid', '#grid-containers', 'display')}}{{Spec2('CSS3 Grid')}}Added the grid box model values.
{{SpecName('CSS3 Flexbox', '#flex-containers', 'display')}}{{Spec2('CSS3 Flexbox')}}Added the flexible box model values.
{{SpecName('CSS2.1', 'visuren.html#display-prop', 'display')}}{{Spec2('CSS2.1')}}Added the table model values and inline-block.
{{SpecName('CSS1', '#display', 'display')}}{{Spec2('CSS1')}}Initial definition. Basic values: none, block, inline, and list-item.
- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
none, inline and block1.0{{CompatGeckoDesktop("1.0")}}4.07.01.0 (85)
inline-block1.0{{CompatGeckoDesktop("1.9")}}5.5 [4]7.01.0 (85)
list-item1.0{{CompatGeckoDesktop("1.0")}}6.07.01.0 (85)
inline-list-item{{CompatNo}}{{CompatNo}} [6]{{CompatNo}}{{CompatNo}}{{CompatNo}}
run-in {{experimental_inline}}1.0 [5]{{CompatNo}}8.07.01.0 (85) [5]
-

4.0

- -

Removed in 32

- 		-

5.0 (532.5)

- -

Removed in 8.0

-
inline-table1.0{{CompatGeckoDesktop("1.9")}}8.07.01.0 (85)
table, table-cell, table-column, table-column-group, table-header-group, table-row-group, table-footer-group, table-row, and table-caption1.0{{CompatGeckoDesktop("1.0")}}8.07.01.0 (85)
flex21.0{{property_prefix("-webkit")}}{{CompatGeckoDesktop("18.0")}} [1]
- {{CompatGeckoDesktop("20.0")}}		1112.506.1{{property_prefix("-webkit")}}
inline-flex21.0{{property_prefix("-webkit")}}{{CompatGeckoDesktop("18.0")}} [1]
- {{CompatGeckoDesktop("20.0")}}		1112.506.1{{property_prefix("-webkit")}}
grid {{experimental_inline}}{{CompatUnknown}}{{CompatNo}}10.0{{property_prefix("-ms")}}{{CompatUnknown}}{{CompatUnknown}}
inline-grid {{experimental_inline}}{{CompatUnknown}}{{CompatNo}}10.0{{property_prefix("-ms")}}{{CompatUnknown}}{{CompatUnknown}}
ruby, ruby-base, ruby-text, ruby-base-container, ruby-text-container {{experimental_inline}}{{CompatUnknown}}{{CompatGeckoDesktop("34.0")}} [3]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
contents {{experimental_inline}}{{CompatNo}}{{CompatGeckoDesktop("37")}} [2]{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support4.4{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}7.0{{property_prefix("-webkit")}}
-
- -

[1] To activate flexbox support, for Firefox 18 and 19, the user has to change the about:config preference "layout.css.flexbox.enabled" to true. Multi-line flexbox are supported since Firefox 28.

- -

[2] In Firefox 36, it the preference governing this feature was off by default.

- -

[3] CSS Ruby support is behind pref "layout.css.ruby.enabled". The user has to change this pref to true to activate this.

- -

[4] Natural inline elements only

- -

[5] Not before inline-elements

- -

[6] See {{bug(1105868)}}

- -

See also

- - diff --git a/files/tr/web/css/font-size/index.html b/files/tr/web/css/font-size/index.html deleted file mode 100644 index 89ce88d475..0000000000 --- a/files/tr/web/css/font-size/index.html +++ /dev/null @@ -1,239 +0,0 @@ ---- -title: font-size -slug: Web/CSS/font-size -tags: - - CSS Fontlar - - CSS özelliği - - Referans -translation_of: Web/CSS/font-size ---- -
{{CSSRef}}
- -

font-size CSS'in bir özelliği olup yazı boyutunu ayarlar. This property is also used to compute the size of em, ex, and other relative {{cssxref("<length>")}} units.

- -
{{EmbedInteractiveExample("pages/css/font-size.html")}}
- - - -

Syntax

- -
/* <absolute-size> values */
-font-size: xx-small;
-font-size: x-small;
-font-size: small;
-font-size: medium;
-font-size: large;
-font-size: x-large;
-font-size: xx-large;
-font-size: xxx-large;
-
-/* <relative-size> values */
-font-size: smaller;
-font-size: larger;
-
-/* <length> values */
-font-size: 12px;
-font-size: 0.8em;
-
-/* <percentage> values */
-font-size: 80%;
-
-/* Global values */
-font-size: inherit;
-font-size: initial;
-font-size: unset;
-
- -

The font-size property is specified in one of the following ways:

- - - -

Değerler

- -
-
xx-small, x-small, small, medium, large, x-large, xx-large, xxx-large
-
Absolute-size keywords, based on the user's default font size (which is medium).
-
larger, smaller
-
Relative-size keywords. The font will be larger or smaller relative to the parent element's font size, roughly by the ratio used to separate the absolute-size keywords above.
-
{{cssxref("<length>")}}
-
-

A positive {{cssxref("<length>")}} value. For most font-relative units (such as em and ex), the font size is relative to the parent element's font size.

- -

For font-relative units that are root-based (such as rem), the font size is relative to the size of the font used by the {{HTMLElement("html")}} (root) element.

-
-
{{cssxref("<percentage>")}}
-
-

A positive {{cssxref("<percentage>")}} value, relative to the parent element's font size.

-
-
- -
-

Note: To maximize accessibility, it is generally best to use values that are relative to the user's default font size.

-
- -

Formal syntax

- -{{csssyntax}} - -

Açıklama

- -

There are several ways to specify the font size, including with keywords or numerical values for pixels or ems. Choose the appropriate method based on the needs for the particular web page.

- -

Anahtar Kelimeler

- -

Keywords are a good way to set the size of fonts on the web. By setting a keyword font size on the {{HTMLElement("body")}} element, you can set relative font-sizing everywhere else on the page, giving you the ability to easily scale the font up or down on the entire page accordingly.

- -

Pixels

- -

Setting the font size in pixel values (px) is a good choice when you need pixel accuracy. A px value is static. This is an OS-independent and cross-browser way of literally telling the browsers to render the letters at exactly the number of pixels in height that you specified. The results may vary slightly across browsers, as they may use different algorithms to achieve a similar effect.

- -

Font sizing settings can also be used in combination. For example, if a parent element is set to 16px and its child element is set to larger, the child element displays larger than the parent element in the page.

- -
Note: Defining font sizes in px is not accessible, because the user cannot change the font size in some browsers. For example, users with limited vision may wish to set the font size much larger than the size chosen by a web designer. Avoid using them for font sizes if you wish to create an inclusive design.
- -

Ems

- -

Another way of setting the font size is with em values. The size of an em value is dynamic. When defining the font-size property, an em is equal to the font size of the element on which the em is used. If you haven't set the font size anywhere on the page, then it is the browser default, which is often 16px. So, by default 1em = 16px, and 2em = 32px. If you set a font-size of 20px on the body element, then 1em = 20px and 2em = 40px. Note that the value 2 is essentially a multiplier of the current em size.

- -

In order to calculate the em equivalent for any pixel value required, you can use this formula:

- -
em = desired element pixel value / parent element font-size in pixels
- -

For example, suppose the font-size of the body of the page is set to 16px. If the font-size you want is 12px, then you should specify 0.75em (because 12/16 = 0.75). Similarly, if you want a font size of 10px, then specify 0.625em (10/16 = 0.625); for 22px, specify 1.375em (22/16).

- -

The em is a very useful unit in CSS, since it automatically adapts its length relative to the font that the reader chooses to use.

- -

One important fact to keep in mind: em values compound. Take the following HTML and CSS:

- -
html {
-  font-size: 62.5%; /* font-size 1em = 10px on default browser settings */
-}
-span {
-  font-size: 1.6em;
-}
- -
<div>
-<span>Outer <span>inner</span> outer</span>
-</div>
-
- -

The result is:

- -

{{EmbedLiveSample("Ems", 400, 40)}}

- -

Assuming that the browser's default font-size is 16px, the words “outer” would be rendered at 16px, but the word “inner” would be rendered at 25.6px. This is because the inner {{HTMLElement("span")}}'s font-size is 1.6em which is relative to its parent's font-size, which is in turn relative to its parent's font-size. This is often called compounding.

- -

Rems

- -

rem values were invented in order to sidestep the compounding problem. rem values are relative to the root html element, not the parent element. In other words, it lets you specify a font size in a relative fashion without being affected by the size of the parent, thereby eliminating compounding.

- -

The CSS below is nearly identical to the previous example. The only exception is that the unit has been changed to rem.

- -
html {
-  font-size: 62.5%; /* font-size 1em = 10px on default browser settings */
-}
-span {
-  font-size: 1.6rem;
-}
-
- -

Then we apply this CSS to the same HTML, which looks like this:

- -
<span>Outer <span>inner</span> outer</span>
- -

{{EmbedLiveSample("Rems", 400, 40)}}

- -

In this example, the words “outer inner outer” are all displayed at 16px (assuming that the browser's font-size has been left at the default value of 10px).

- -

Örnekler

- -

Örnek 1

- -
/* Paragraf boyutunu çok büyük yapar */
-p { font-size: xx-large; }
-
-/* <h1> etiketininin boyutunu kendisini kaplayan
-   etikete göre 2.5 kat daha büyük yapar */
-h1 { font-size: 250%; }
-
-/* span etiketiyle çevrelenmiş yazının boyutu 16px yapar */
-span { font-size: 16px; }
-
- -

Örnek 2

- -

CSS

- -
.small {
-  font-size: xx-small;
-}
-.larger {
-  font-size: larger;
-}
-.point {
-  font-size: 24pt;
-}
-.percent {
-  font-size: 200%;
-}
-
- -

HTML

- -
<h1 class="small">Small H1</h1>
-<h1 class="larger">Larger H1</h1>
-<h1 class="point">24 point H1</h1>
-<h1 class="percent">200% H1</h1>
- -

Sonuç

- -

{{EmbedLiveSample('Example_2','600','200')}}

- -

Notlar

- -

em and ex units on the {{cssxref("font-size")}} property are relative to the parent element's font size (unlike all other properties, where they're relative to the font size on the element). This means em units and percentages do the same thing for {{cssxref("font-size")}}.

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS4 Fonts', '#font-size-prop', 'font-size')}}{{Spec2('CSS4 Fonts')}}Adds xxx-large keyword.
{{SpecName('CSS3 Fonts', '#font-size-prop', 'font-size')}}{{Spec2('CSS3 Fonts')}}No change.
{{SpecName('CSS2.1', 'fonts.html#propdef-font-size', 'font-size')}}{{Spec2('CSS2.1')}}No change.
{{SpecName('CSS1', '#font-size', 'font-size')}}{{Spec2('CSS1')}}Initial definition.
- -

{{cssinfo}}

- -

Tarayıcı uyumluluğu

- - - -

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

diff --git a/files/tr/web/css/index.html b/files/tr/web/css/index.html deleted file mode 100644 index f1cd50e15c..0000000000 --- a/files/tr/web/css/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: 'CSS: Cascading Style Sheets (Basamaklı Stil Sayfaları)' -slug: Web/CSS -tags: - - CSS - - CSS3 - - HTML - - Referans - - Stil - - Stil Sayfası - - Tasarım - - Yerleşim -translation_of: Web/CSS ---- -

{{CSSRef}}

- -

Bir stylesheet (şablon-stil) dili olup, çoğu zaman CSS olarak kısaltılan Cascading Style Sheets,  HTML ya da XML ile yazılmış  (SVG ya da XHTML gibi çeşitli XML dillerini içeren) belgelerin sunumları tanımlamak için kullanılır. CSS,  yapılandırılmış elemanların ekranda, kağıt üzerinde, konuşmada yahut diğer medya aygıtlarında nasıl ifade edileceğini belirler. 

- -

CSS, open web'in temel dillerinden biridir ve  W3C standartlarına sahiptir. CSS1, CSS2.1, CSS3 hakkında bir şeyler duymuş olabilirsiniz. Ancak CSS4 hiçbir zaman resmi bir sürüm haline gelmedi.

- -

CSS3'ün, kapsamı önemli ölçüde arttı ve farklı CSS modüllerindeki ilerleme o kadar farklı olmaya başladı ki, önerileri modül başına ayrı ayrı geliştirmek ve yayınlamak daha etkili hale geldi. W3C, CSS spesifikasyonunu veriyonlama yerine periyodik olarak CSS spesifikasyonunun en son kararlı sürümünün anlık görüntüsünü alıyor..

- -
- - -
-

Bir front-end(Arayüz) geliştiricisimi olmak istiyorsunuz?

- -

Hedefinize ulaşabilmeniz için ihtiyacınız olan tüm temel bilgileri içeren bir kurs hazırladık.

- -

Buradan Başlayın

-
- -
-
-

Eğitim Aşamaları

- -

Bu CSS Eğitimi CSS'i sıfırdan öğreten birden fazla modül içerir — önceden bilmeniz gerekmez.

- -
-
CSS'ye ilk adım
-
CSS (Cascading Style Sheets), Web sayfalarını biçimlendirmek ve düzenlemek için kullanılır. Örneğin: içeriğinizin yazı tipini, rengini, boyutunu ve aralığını değiştirmek, birden çok sütuna bölmek veya animasyonlar ve diğer dekoratif özellikler eklemek için kullanılır.
-
Bu adımda CSS'in nasıl çalıştığı, sözdiziminin neye benzediği ve bunu HTML sayfalarına stil ekleyebilmek için nasıl kullanmaya başlayabileceğinizle ilgili temel bilgiler verir.  
-
CSS'in yapı taşları
-
-

Bu adım ilk adımın kaldığı yerden devam ediyor — artık dile ve sözdizimine aşına oldunuz ve onu kullanma konusunda biraz temel deyim kazandınız, biraz daha derine dalma zamanı. Bu adım, kalıtıma, sahip oluduğunuz tüm seçici türlerine, birimlere, boyutlandırmaya, arka planların ve kenarlıkların stilini belirleme, hata ayıklama ve çok daha fazlasını inceler.

- -

Buradaki amak, size daha etkili CSS yazmak için bir araç seti sağlamak ve  metin şekillendirme ve CSS düzeni gibi daha özgül kurallara geçmeden önce tüm temel kavramları anlamanıza yardımcı olmaktır.

-
-
Metin stilini belirleme
-
CSS dilinin temelleri ele alındığında, odaklanmanız gereken bir sonraki CSS konusu, CSS ile yapacağınız en yaygın şeylerden biri olan metnin stilini oluşturmaktır. Burada yazı tipi, kalınlık, italik, satır ve harf aralığı, alt gölgeler ve diğer metin özelliklerini ayarlama dahil olmak üzere metin şekillendirme temellerine bakıyoruz. Sayfanıza özel yazı tiplerini, listeleri ve bağlantıları şekillendirmeye bakarak bu konuyu tamamlıyoruz.
-
CSS düzeni
-
Bu noktaya kadar CSS'in temellerini, metnin nasıl stilize edileceğini ve içeriğinizin içinde bulunduğu kutuları nasıl biçimlendirip değiştireceğinizi inceledik. Bundan sonra, kutularınızı görüntü alanındaki diğer bileşenler ile doğru yere nasıl yerleştireceğinize bakmanın zamanı geldi. Burada CSS düzenine derinlemesine dalabilmemiz, farklı görüntü ayarlarına, flexbox, CSS ızgarası ve konumlandırma gibi modern düzen araçlarına ve hala bilmek isteyebileceğiniz bazı eski teknikleri kullanabilmemiz için gerekli ön koşulları ele alacağız.
-
Yaygın sorunları çözmek için CSS kullanın
-
Bu adım, bir websayfası oluştururken yaygın sorunları çözmek için CSS'si nasıl kullanılacağını açıklayan içerik bölümlerine bağlantılar sağlar.
-
-
- -
-

Kaynaklar

- - - -

Tarifler kitabı

- -

CSS düzen tarifleri kitabı sitelerinize uygulamanız gerekebilecek ortak düzen kalıpları için tarifleri bir araya getirmeyi amaçlamaktadır. Projelerinizde başlangıç noktası olarak kullanabileceğiniz kod sağlamanın yına sıra, bu tarifler yerleşim özelliklerinin kullanılabileceği farklı yolları ve bir geliştirici olarak uygulayabileceğiniz seçimleri irdeler.

- -

CSS geliştirme araçları

- - - -

Meta bugs

- -
    -
  • Firefox: {{bug(1323667)}}
    • -
-
-
-
- -

Ayrıca Bakınız

- - diff --git a/files/tr/web/css/margin/index.html b/files/tr/web/css/margin/index.html deleted file mode 100644 index e226907d8a..0000000000 --- a/files/tr/web/css/margin/index.html +++ /dev/null @@ -1,225 +0,0 @@ ---- -title: marjin -slug: Web/CSS/margin -tags: - - CSS - - CSS özelliği - - Referans -translation_of: Web/CSS/margin -translation_of_original: Web/CSS/margin-new -original_slug: Web/CSS/marjin ---- -
{{CSSRef}}
- -

Özet

- -

 

- -

Marjin CSS özelliği her dört kenarın kenar boşluğunu düzenler. Kısayol olarak diğer marjin özellikleri ile tek tek düzenlemenin önüne geçilir : {{ Cssxref("margin-top") }}, {{ Cssxref("margin-right") }}, {{ Cssxref("margin-bottom") }} ve {{ Cssxref("margin-left") }}.

- -

Eksi değerlere müsade edilir.

- -

{{cssinfo}}

- -

Sözdizimi

- -
/* Her dört kenara uygulanır */
-margin: 1em;
-
-/* dikey | yatay */
-margin: 5% auto;
-
-/* üst | yatay | alt */
-margin: 1em auto 2em;
-
-/* üst | sağ | alt | sol */
-margin: 2px 1em 0 auto;
-
-/* Genel değerler */
-margin: inherit;
-margin: initial;
-margin: unset;
-
- -

Değer Atamaları

- -

Aşağıdaki gibi bir, iki, üç yada dörtlü değer atama:

- -
-
<length>
-
Sabit değerleri ifade eder. Eksi değer alabilir. Örnek ölçü birimleri için bakınız {{cssxref("<length>")}} .
-
<percentage>
-
{{cssxref("<percentage>")}} içinde bulunduğu bloğun width özelliğine orantılıdır. Eksi değerlere müsade edilir.
-
auto
-
auto kullanıldığında değerleri otomatik atanır. Blok elementleri merkeze konumlandırmada kullanılır.
- div { width:50%;  margin:0 auto; } div bloğunu yatay olarak merkeze konumlandırır.
-
- - - -

Formel sözdizimi

- -{{csssyntax}} - -

Örnekler

- -

Basit bir örnek

- -

HTML

- -
<div class="ex1">
-  margin:     auto;
-  background: gold;
-  width:      66%;
-</div>
-<div class="ex2">
-  margin:     20px 0 0 -20px;
-  background: gold;
-  width:      66%;
-</div>
- -

CSS

- -
.ex1 {
-  margin: auto;
-  background: gold;
-  width: 66%;
-}
-.ex2 {
-  margin: 20px 0px 0 -20px;
-  background: gold;
-  width: 66%;
-}
- -

{{ EmbedLiveSample('Simple_example') }}

- -

başka bir örnek daha

- -
margin: 5%;                /* tüm kenarlar 5% marjinli */
-
-margin: 10px;              /* tüm kenarlar 10px marjinli */
-
-margin: 1.6em 20px;        /* üst ve alt 1.6em, sağ ve sol 20px marjinli */
-
-margin: 10px 3% 1em;       /* üst 10px, sağ ve sol 3%, alt 1em marjinli */
-
-margin: 10px 3px 30px 5px; /* üst 10px, sağ 3px, alt 30px, sol 5px marjinli */
-
-margin: 1em auto;          /* 1em marjin üst ve altta, çerçeve yatay olarak merkezde */
-
-margin: auto;              /* çerçeve yatay olarak merkezde üst ve alt marjin 0 */
-
- -

Yatay olarak merkeze konumlama margin: 0 auto;

- -

Modern tarayıcılarda yatay merkez konumlandırma için display: flex; justify-content: center; kullanınız.

- -

Bununla birlikte, eski tarayıcılarda IE8-9 gibi,  bu tanımlama kullanılamaz. Yatay merkez konumlama için elementi kapsayan elemente  margin: 0 auto; kullanınız.

- -

Spesifikasyonlar

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('CSS3 Box', '#margin', 'margin') }}{{ Spec2('CSS3 Box') }}Belirgin değişiklik yok
{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin') }}{{ Spec2('CSS3 Transitions') }}"margin" transitions ta animasyon özellikiği kullanılabilir
{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin') }}{{ Spec2('CSS2.1') }}Inline elementeki efekleri kaldırıldı
{{ SpecName('CSS1', '#margin', 'margin') }}{{ Spec2('CSS1') }}başlangic değeri atandı
- -

Tarayıcı Uyumluluğu

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatVersionUnknown}}{{ CompatGeckoDesktop("1") }}3.03.51.0 (85)
auto value1.0{{CompatUnknown}}{{ CompatGeckoDesktop("1") }}6.0 (strict mode)3.51.0 (85)
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.0{{CompatVersionUnknown}}{{ CompatGeckoMobile("1") }}6.06.01.0
-
- -

Ayrıca bakınız

- - diff --git a/files/tr/web/css/reference/index.html b/files/tr/web/css/reference/index.html deleted file mode 100644 index 4d415d65a6..0000000000 --- a/files/tr/web/css/reference/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: CSS Referansı -slug: Web/CSS/Reference -tags: - - CSS - - CSS Referans -translation_of: Web/CSS/Reference ---- -

Bu CSS Referansı, bütün standart CSS özelliklerini, pseudo sınıflarını, pseudo elementlerini, @-kurallarını, birimleri* ve seçicileri alfabetik olarak sıralar. Bunların her biri için hızlı ve detaylı bilgiye ulaşabilirsiniz. Sadece CSS1 ve CSS2 özellikleri değil, aynı zamanda konsept standartlı veya stabil her CSS3 ile bağlantılı özellik için de bir referans niteliğindedir.

- -

Ayrıca -moz prefix'i aracılığıyla Gecko-spesifik olarak tanımlanan Mozilla CSS Eklentileri sayfasını ziyaret edebilir veya dilerseniz Webkit-spesifik olarak tanımlanan  WebKit CSS Eklentileri sayfasını ziyaret edebilirsiniz. Tüm prefixed özellikleri incelemek için Vendor-prefixed CSS Property Overview ismi ile Peter Beverloo tarafından hazırlanan sayfayı ziyaret edebilirsiniz.

- -
{{CSS_Ref}}
- -

Seçiciler

- - - -

CSS3 özelleştirmeleri için tüm seçicilerin listesi.

- -

CSS3 Kullanımı

- -

Küçük boyutlu sayfalar oluşturmak için yeni bir teknoloji ortaya çıktı CSS3, ancak yakın zamana kadar düşük destekli olan CCS2.1 kullanılıyordu.

- - - -

Kavramlar

- - diff --git a/files/tr/web/css/right/index.html b/files/tr/web/css/right/index.html deleted file mode 100644 index 3c5c003132..0000000000 --- a/files/tr/web/css/right/index.html +++ /dev/null @@ -1,157 +0,0 @@ ---- -title: right -slug: Web/CSS/right -translation_of: Web/CSS/right ---- -
{{CSSRef}}
- -

Özet

- -

Bu CSS değeri pozisyonlanan elemanların yerleştirilmesinde rol alır.

- -

{{Cssxref("position")}}: absolute or position: fixed olarak yerleştirilmiş elemanların sağ marjin kenarı ile bu elemanı barındıran elemanın sağ kenarı arasındaki mesafeyi belirler.

- -

right değerinin pozisyonlanmamış elemanlar üzerinde etkisi yoktur.

- -

Hem right hem de {{cssxref("left")}} değerleri tanımlanmış ise, elemanın pozisyonu gereğinden daha detaylı tanımlanmış olarak kabul edilir. Bu durumda, barındıran elemanın metin yerleşimi soldan sağa ise {{cssxref("left")}} değeri, sağdan sola ise right değeri geçerli kabul edilir. Soldan sağa yerleşimlerde right değeri -left, sağdan sola yerleşimlerde left değeri -right olarak tekrar hesaplanır.

- -

{{cssinfo}}

- -

Yazım

- -
Formal syntax: {{csssyntax("right")}}
-
- -
right: 3px         /* <uzunluk> değeri */
-right: 2.4em
-
-right: 10%         /* barındıran bloğun yüzdesi olarak */
-
-right: auto
-
-right: inherit
-
- -

Değerler

- -
-
<uzunluk>
-
Negatif, null veya pozitif {{cssxref("<length>")}} değerdir. -
    -
  • Kesin yerleştirilen elemanlar için barındıran bloğun sağ kenarına olan mesafeyi belirler;
    • -
  • Göreceli yerleştirilen elemanlar için, elemanın normal akış içerisinde yerleşim değeri uygulanmazken bulunacağı pozisyondan sağa doğru öteleneceği mesafeyi belirler.
    • -
-
-
<yüzde>
-
Uzunluk değerinin barındıran bloğun yüzdesi olarak ifadesidir. {{cssxref("<percentage>")}}. 
-
auto
-
Is a keyword that represents: -
    -
  • for absolutely positioned elements, the position the element based on the {{Cssxref("left")}} property and treat width: auto as a width based on the content.
    • -
  • for relatively positioned elements, the right offset the element from its original position based on the {{Cssxref("left")}} property, or if left is also auto, do not offset it at all.
    • -
-
-
inherit
-
Is a keyword indicating that the value is the same than the computed value from its parent element (which may not be its containing block). This computed value is then handled like it was a {{cssxref("<length>")}}, {{cssxref("<percentage>")}} or the auto keyword.
-
- -

Examples

- - -
#example_3 {
-  width: 600px;
-  height: 400px;
-  background-color: #FFC7E4;
-  position: relative;
-  top: 20px;
-  left: 20px;
-}
-
-#example_4 {
-  width:200px;
-  height:200px;
-  background-color: #FFD7C2;
-  position:absolute;
-  bottom:10px;
-  right: 20px;
-}
- -
 <div id="example_3">Example 3</div>
- <div id="example_4">Example 4</div>
-
- -

{{LiveSampleLink('Examples', 'Example Demo Link')}}

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS3 Transitions', '#animatable-css', 'right')}}{{Spec2('CSS3 Transitions')}}Defines right as animatable.
{{SpecName('CSS2.1', 'visuren.html#propdef-right', 'right')}}{{Spec2('CSS2.1')}} 
- -

Browser compatibility

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1")}}5.55.01.0
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support1.0{{CompatGeckoMobile("1")}}6.06.01.0
-
diff --git a/files/tr/web/css/shape-outside/index.html b/files/tr/web/css/shape-outside/index.html deleted file mode 100644 index 4a05560e8a..0000000000 --- a/files/tr/web/css/shape-outside/index.html +++ /dev/null @@ -1,208 +0,0 @@ ---- -title: shape-outside -slug: Web/CSS/shape-outside -tags: - - Boundaries - - CSS - - CSS Property - - CSS Shapes - - Float Area - - Property - - Reference - - Shape - - margin - - 'recipe:css-property' - - shape-outside - - wrapping -translation_of: Web/CSS/shape-outside ---- -
{{CSSRef}}
- -

The shape-outside CSS property defines a shape—which may be non-rectangular—around which adjacent inline content should wrap. By default, inline content wraps around its margin box; shape-outside provides a way to customize this wrapping, making it possible to wrap text around complex objects rather than simple boxes.

- -
{{EmbedInteractiveExample("pages/css/shape-outside.html")}}
- - - -

Syntax

- -
/* Keyword values */
-shape-outside: none;
-shape-outside: margin-box;
-shape-outside: content-box;
-shape-outside: border-box;
-shape-outside: padding-box;
-
-/* Function values */
-shape-outside: circle();
-shape-outside: ellipse();
-shape-outside: inset(10px 10px 10px 10px);
-shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);
-shape-outside: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z');
-
-/* <url> value */
-shape-outside: url(image.png);
-
-/* <gradient> value */
-shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px);
-
-/* Global values */
-shape-outside: initial;
-shape-outside: inherit;
-shape-outside: unset;
-
- -

The shape-outside property is specified using the values from the list below, which define the float area for float elements. The float area determines the shape around which inline content (float elements) wrap.

- -

Values

- -
-
none
-
The float area is unaffected. Inline content wraps around the element's margin box, like usual.
-
<shape-box>
-
The float area is computed according to the shape of a float element's edges (as defined by the CSS box model). This can be margin-box, border-box, padding-box, or content-box. The shape includes any curvature created by the {{cssxref("border-radius")}} property (behavior which is similar to {{cssxref("background-clip")}}).
-
-
-
margin-box
-
Defines the shape enclosed by the outside margin edge. The corner radii of this shape are determined by the corresponding {{cssxref("border-radius")}} and {{cssxref("margin")}} values. If the border-radius / margin ratio is 1 or more, then the margin box corner radius is border-radius + margin. If the ratio is less than 1, then the margin box corner radius is border-radius + (margin * (1 + (ratio-1)^3)).
-
border-box
-
-

Defines the shape enclosed by the outside border edge. The shape follows the normal border radius shaping rules for the outside of the border.

-
-
padding-box
-
-

Defines the shape enclosed by the outside padding edge. The shape follows the normal border radius shaping rules for the inside of the border.

-
-
content-box
-
-

Defines the shape enclosed by the outside content edge. Each corner radius of this box is the larger of 0 or border-radius - border-width - padding.

-
-
-
-
{{cssxref("<basic-shape>")}}
-
The float area is computed based on the shape created by of one of inset(), circle(), ellipse(),  polygon(), or as added in the level 2 specification path(). If a <shape-box> is also supplied, it defines the reference box for the <basic-shape> function. Otherwise, the reference box defaults to margin-box.
-
{{cssxref("<image>")}}
-
The float area is extracted and computed based on the alpha channel of the specified {{cssxref("<image>")}} as defined by {{cssxref("shape-image-threshold")}}.
-
-
Note: {{glossary("User agent", "User agents")}} must use the potentially CORS-enabled fetch method defined by the HTML5 specification for all URLs in a shape-outside value. When fetching, user agents must use "Anonymous" mode, set the referrer source to the stylesheet's URL, and set the origin to the URL of the containing document. If this results in network errors such that there is no valid fallback image, the effect is as if the value none had been specified.
-
-
- -

Interpolation

- -

When animating between one <basic-shape> and a second, the rules below are applied. The values in the shape functions interpolate as a simple list. The list values interpolate as {{cssxref("<length>")}}, {{cssxref("<percentage>")}}, or {{cssxref("calc")}} where possible. If list values are not one of those types but are identical (such as finding nonzero in the same list position in both lists), those values do interpolate.

- - - -

Formal definition

- -

{{CSSInfo}}

- -

Formal syntax

- -{{csssyntax}} - -

Examples

- -

Funneling text

- -

HTML

- -
<div class="main">
-  <div class="left"></div>
-  <div class="right"></div>
-  <p>
-    Sometimes a web page's text content appears to be
-    funneling your attention towards a spot on the page
-    to drive you to follow a particular link. Sometimes
-    you don't notice.
-  </p>
-</div>
- -

CSS

- -
.main {
-  width: 530px;
-}
-
-.left,
-.right {
-  width: 40%;
-  height: 12ex;
-  background-color: lightgray;
-}
-
-.left {
-  -webkit-shape-outside: polygon(0 0, 100% 100%, 0 100%);
-  shape-outside: polygon(0 0, 100% 100%, 0 100%);
-  float: left;
-  -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
-  clip-path: polygon(0 0, 100% 100%, 0 100%);
-}
-
-.right {
-  -webkit-shape-outside: polygon(100% 0, 100% 100%, 0 100%);
-  shape-outside: polygon(100% 0, 100% 100%, 0 100%);
-  float: right;
-  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
-  clip-path: polygon(100% 0, 100% 100%, 0 100%);
-}
-
-p {
-  text-align: center;
-}
- -

Result

- -

{{EmbedLiveSample("Funneling_text", "100%", 130)}}

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS Shapes', '#shape-outside-property', 'shape-outside')}}{{Spec2('CSS Shapes')}}Initial definition.
{{SpecName('CSS Shapes 2', '#shape-outside-property', 'shape-outside')}}{{Spec2('CSS Shapes 2')}}Adds the path() value
- -

Browser compatibility

- -
- - -

{{Compat("css.properties.shape-outside")}}

-
- -

See also

- - diff --git a/files/tr/web/css/type_selectors/index.html b/files/tr/web/css/type_selectors/index.html deleted file mode 100644 index 8c375757ba..0000000000 --- a/files/tr/web/css/type_selectors/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: Tip Seçicileri -slug: Web/CSS/Type_selectors -tags: - - CSS - - CSS referansı - - Yeni başlayan - - seçiciler -translation_of: Web/CSS/Type_selectors -original_slug: Web/CSS/Tip_secicileri ---- -
{{CSSRef("Selectors")}}
- -

Tanım

- -

Tip (type) seçicisi, HTML içerisinde tanımlanmış elementin tipi ile eşleşir. HTML elementinden HTML tags diye de bahsedilebilir. Örneğin, HTML'de <h1>, <a>, <p> tag'leri birer elementtir. Bu seçicinin kullanımı oldukça sadedir. Sadece elementin isminin belirtilmesi yeterlidir.

- -

Sözdizim

- -
element { stil özellikleri }
-
- -

Örnek

- -

CSS

- -
span {
-  background-color: DodgerBlue;
-  color: #ffffff;
-}
- -

HTML

- -
<span>span elementi</span>
-<p>p (paragraf) elementi</p>
-<span>tekrar span elementi</span>
- -

{{ EmbedLiveSample('Örnek', 200, 150) }}

- -

 

- -

Spesifikasyonlar

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpesifikasyonDurumYorum
{{SpecName('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}}{{Spec2('CSS4 Selectors')}}Değişiklik yok
{{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}}{{Spec2('CSS3 Selectors')}}Değişiklik yok
{{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#basic-concepts', 'type selectors')}}{{Spec2('CSS1')}}Baştaki tanım
- -

Tarayıcı uyumluluğu

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
ÖzellikChromeFirefox (Gecko)Internet ExplorerOperaSafari
Temel destek{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
ÖzellikAndroidAndroid için ChromeFirefox Mobil (Gecko)IE MobilOpera MobilSafari Mobil
Temel destek{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
diff --git a/files/tr/web/demos_of_open_web_technologies/index.html b/files/tr/web/demos_of_open_web_technologies/index.html deleted file mode 100644 index aea815dff2..0000000000 --- a/files/tr/web/demos_of_open_web_technologies/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: Demos of open web technologies -slug: Web/Demos_of_open_web_technologies -translation_of: Web/Demos_of_open_web_technologies ---- -

Mozilla supports a wide range of open web technologies and we encourage them to use these technologies. This page provides links to demos of popular technologies, including some of the demo studios that have been active in the past. A good application or presentation about open web technologies If you know, please add the application or promotion you know here as a link to an appropriate section.

- -

2D Graphics

- -

APNG

- - - -

Canvas

- - - -

SVG

- - - -

Video

- - - -

3D Graphics

- -

WebGL

- - - -

Virtual Reality

- - - -

CSS

- - - -

Transformations

- - - -

Games

- - - -

HTML

- - - -

Web APIs

- - - -

Notifications API

- - - - - -

Web Audio API

- - - -

Web Workers

- - diff --git a/files/tr/web/guide/ajax/index.html b/files/tr/web/guide/ajax/index.html deleted file mode 100644 index 7aece12816..0000000000 --- a/files/tr/web/guide/ajax/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: Ajax -slug: Web/Guide/AJAX -translation_of: Web/Guide/AJAX ---- -
Başlarken
-Ajax'a giriş.
- -
-

Asenkronize JavaScript + XML, aslında bir teknoloji değil, 2005 yılında Jesse James tarafından geliştirilmiştir. AJAX,  HTML , XHTML , Cascading Style Sheets, JavaScript, The Document Object Model, XML, XSLT ve  en önemlisi  XMLHttpRequest object gibi mevcut birçok teknolojinin bir arada kullanılmasıyla tanımlanır.

- -

Web uygulamaları Ajax modelinde bu teknolojilerle birleştirildiğinde, tarayıcının sayfayı yeniden yükleme olmadan kullanıcı arayüzü hızlı, eklenmiş güncelleştirmeler yapmak mümkün. Böylece uygulama daha hızlı ve daha iyi olarak kullanıcı eylemlerine yanıt verir.

- -

Although X in Ajax stands for XML, JSON is used more than XML nowadays because of its many advantages such as being lighter and a part of JavaScript. Both JSON and XML are used for packaging information in Ajax model.

-
- -
-
-

Documentation

- -
-
Getting Started
-
This article guides you through the Ajax basics and gives you two simple hands-on examples to get you started.
-
Using the XMLHttpRequest API
-
The XMLHttpRequest API is the core of Ajax. This article will explain you how to use some Ajax techniques, like: - -
-
Server-sent events
-
Traditionally, a web page has to send a request to the server to receive new data; that is, the page requests data from the server. With server-sent events, it's possible for a server to send new data to a web page at any time, by pushing messages to the web page. These incoming messages can be treated as Events + data inside the web page. See also:  Using server-sent events.
-
Pure-Ajax navigation example
-
This article provides a working (minimalist) example of a pure-Ajax web site composed only of three pages.
-
Sending and Receiving Binary Data
-
The responseType property of the XMLHttpRequest object can be set to change the expected response type from the server. Possible values are the empty string (default), "arraybuffer", "blob", "document", "json", and "text". The response property will contain the entity body according to responseType, as an ArrayBuffer, Blob, Document, JSON, or string. This article will show some Ajax I/O techniques.
-
XML
-
The Extensible Markup Language (XML) is a W3C-recommended general-purpose markup language for creating special-purpose markup languages. It is a simplified subset of SGML, capable of describing many different kinds of data. Its primary purpose is to facilitate the sharing of data across different systems, particularly systems connected via the Internet.
-
JXON
-
JXON stands for lossless Javascript XML Object Notation, it is a generic name by which is defined the representation of Javascript object trees (JSON) using XML.
-
Parsing and serializing XML
-
How to parse an XML document from a string, a file or via javascript and how to serialize XML documents to strings, Javascript Object trees (JXON) or files.
-
XPath
-
XPath stands for XML Path Language, it uses a non-XML syntax that provides a flexible way of addressing (pointing to) different parts of an XML document. As well as this, it can also be used to test addressed nodes within a document to determine whether they match a pattern or not.
-
The FileReader API
-
The FileReader API lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using File or Blob objects to specify the file or data to read. File objects may be obtained from a FileList object returned as a result of a user selecting files using the <input> element, from a drag and drop operation's DataTransfer object, or from the mozGetAsFile() API on an HTMLCanvasElement.
-
HTML in XMLHttpRequest
-
The W3C XMLHttpRequest specification adds HTML parsing support to XMLHttpRequest, which originally supported only XML parsing. This feature allows Web apps to obtain an HTML resource as a parsed DOM using XMLHttpRequest.
-
Other resources
-
Other Ajax resources you may find useful.
-
- -

View All...

- -

See also

- -
-
Alternate Ajax Techniques
-
Most articles on Ajax have focused on using XMLHttp as the means to achieving such communication, but Ajax techniques are not limited to just XMLHttp. There are several other methods.
-
Ajax: A New Approach to Web Applications
-
Jesse James Garrett, of adaptive path, wrote this article in February 2005, introducing Ajax and its related concepts.
-
A Simpler Ajax Path
-
"As it turns out, it's pretty easy to take advantage of the XMLHttpRequest object to make a web app act more like a desktop app while still using traditional tools like web forms for collecting user input."
-
Fixing the Back Button and Enabling Bookmarking for Ajax Apps
-
Mike Stenhouse has penned this article, detailing some methods you can use to fix back button and bookmarking issues when developing Ajax applications.
-
Ajax Mistakes
-
Alex Bosworth has written this article outlining some of the mistakes Ajax application developers can make.
-
Tutorial with examples.
-
-
XMLHttpRequest specification
-
W3C Working draft
-
-
- -
-

Community

- -
    -
  • View Mozilla forums...
    • -
- -
{{ DiscussionList("dev-ajax", "mozilla.dev.ajax") }}
- - - -

Tools

- - - -

View All...

- -

Examples

- - - - - -

HTML, XHTML, CSS, DOM, JavaScript, XML, XMLHttpRequest, XSLT, DHTML, Same Origin Policy

-
-
- -

{{ListSubpages}}

diff --git a/files/tr/web/guide/graphics/index.html b/files/tr/web/guide/graphics/index.html deleted file mode 100644 index 52179a8951..0000000000 --- a/files/tr/web/guide/graphics/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Web Çizgeleri -slug: Web/Guide/Graphics -tags: - - 2B - - 3B - - Canvas - - Gerçek Zamanlı İletişim - - HTML5 - - SVG - - Tuval - - Web Grafik - - Web Çizgeleri - - WebGL - - WebRTC - - Çizge - - Ölçeklenebilir Görüntü -translation_of: Web/Guide/Graphics -original_slug: Web/Guide/Çizgeler ---- -

Web siteleri ve uygulamaların bazen çizge göstermeleri gerekir.Durağan görseller {{HTMLElement("img")}} ögesi kullanılarak kolayca gösterilebilir, ya da ögenin ardalan görseli CSS {{cssxref("background-image")}} özelliğiyle belirlenebilir. Oluşturulmuş çizgelerin üzerinde de anlık oynamalar yapabilirsiniz. Buradaki gönderiler sizler bunları nasıl yapacağınızı anlatır.

- -
-
-

2B Çizgeler

- -
-
Canvas(Tuval)
-
{{HTMLElement("canvas")}} adlı HTML ögesi JavaScript ile 2 Boyutlu çizgeler oluşturabilmeniz için arabirim sunar.
-
SVG
-
Scalable Vector Graphics (Ölçeklenebilir Vektör Çizgeleri); çizge işlemeniz için, çizgi, kıvrım, dikdörtgen gibi geometrik biçimleri kullanabilmenizi sağlar. Vektörel çizim ile herhangi bir ölçekte temiz görüntüler elde edebilirsiniz.
-
- -

Tümünü Görüntüle...

-
- -
-

3B Çizgeler

- -
-
WebGL
-
Web'in 3 Boyutlu çizge arabirimi WEBGL'e başlamak için bir kılavuz. Bu uygu(teknoloji) web üzerinde OpenGL kullanmanıza olanak tanır.
-
- -

Video

- -
-
HTML5 izleti ve sesleri kullanmak
-
Bir web sayfasına izleti ya da ses gömüp oynatımını denetlemek.
-
WebRTC
-
WebRTC'deki RTC Gerçek Zamanlı İletişim anlamına gelir. Bu uygu(teknoloji) tarayıcı istemcileri arasında anlık olarak görüntü ve ses akışına ve veri paylaşımına olanak tanır.
-
-
-
diff --git a/files/tr/web/guide/html/html5/index.html b/files/tr/web/guide/html/html5/index.html deleted file mode 100644 index c59a8bd86f..0000000000 --- a/files/tr/web/guide/html/html5/index.html +++ /dev/null @@ -1,255 +0,0 @@ ---- -title: HTML5 -slug: Web/Guide/HTML/HTML5 -tags: - - HTML - - HTML5 - - html kaynak - - html5 firefox - - html5 kaynak - - html5 komutlar - - html5 mozilla - - html5 nedir - - html5 türkçe - - html5 türkçe açıklama - - web geliştirici -translation_of: Web/Guide/HTML/HTML5 -original_slug: Web/HTML/HTML5 ---- -

HTML5 , html standartlarının son halidir. Anlam olarak iki farklı kavramı temsil eder:

- - - -

Tüm web geliştiriciler için kullanılabilir olmasına yönelik tasarlanmış olup; bu referans sayfası, fonksiyonlarına göre çeşitli sınıflara ayrılmış HTML5 teknolojileri hakkında bağlantıları barındırır, bunlar:

- - - -
-
-

semantik (Kurgulama)

- -
-
HTML5 Bölüm ve Anahatlar
-
HTML5 bölüm ve anahatlarını belirleyen {{ HTMLElement("section") }}, {{ HTMLElement("article") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("aside") }} ve {{ HTMLElement("hgroup") }} adlı yeni HTML5 elemanlarına bakış.
-
HTML5 Video ve Ses Elemanlarının Kullanılması 
-
{{ HTMLElement("audio") }} ve {{ HTMLElement("video") }} elemanlarının yerleştirilmesi ve yeni multimedya içeriğinin şekilllendirilmesi.
-
HTML5 Formlar
-
API doğrulamayla kısıtlanmış yeni özellikler,  {{ HTMLElement("input") }} kullanım tipi (English: {{ htmlattrxref("type", "input") }}) için yeni değerler ve yeni bir {{ HTMLElement("output") }} elemanı için  HTML5' de web formlarındaki iyileştirmelere bir bakış.
-
Yeni Kurgu (Semantic) Elemanları
-
Bölümlerin, medya ve form elemanlarının yanında {{ HTMLElement("mark") }}, {{ HTMLElement("figure") }}, {{ HTMLElement("figcaption") }}, {{ HTMLElement("data") }}, {{ HTMLElement("time") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }} veya {{ HTMLElement("meter") }}, {{HTMLElement("main")}} gibi geçerli HTML5 elemanları  içerisine dahil edilen yeni birçok eleman vardır.
-
{{HTMLElement("iframe")}} İyileştirmesi
-
Şimdi {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}} ve {{htmlattrxref("srcdoc", "iframe") }}  komutlarının kullanılmasıyla artık programcılar güvenlik düzeyi ve bir {{HTMLElement("iframe")}} elementi için umulan iyi renderi oluşturma konusunda emin olabilirler. 
-
 MathML 
-
Direkt matematiksel formülleri embed etmeye (gömmeye) imkan verir.
-
HTML5' e Giriş
-
Bu makale, web dizayn ve web uygulamalarınızda kullandığınız HTML5' in tarayıcılarda (browser) nasıl şekillendirileceğini açıklar.
-
HTML5 -Compliant Parser (HTML5 - Uyumlu Ayrıştırıcılar) 
-
Bir HTML dökümanının DOM (İngilizce: Document Object Model yani Dökümanın Nesnesel Modeli) baytlarını döndüren ayrıştırıcı, şimdi geçersiz HTML ile karşı karşıya kalındığı taktirde bile genişletilmiş ve tam olarak her durumdaki davranışı tanımlayabilmektedir.
-
- -

CONNECTİVİTY (BAğlanılabilirlik)

- -
-
Web Soketleri
-
Sayfa ve sunucu arasında kalıcı bağlantı kurulmasına ve bilinen HTML tarzına uymayan veri alışverişini de sağlar.
-
Sunucu - Gönderim Olayları
-
Sunucunun yanlızca istemcinin beklentilerine yanıt olarak gönderebileceği klasikleşmiş verilerden ziyade, sunucuya istemci için olayları daha da öteleme imkanı tanır.
-
WebRTC (Real-Time Communication) 
-
Bu teknoloji, bir eklenti ve bir harici uygulamaya gerek duymaksızın, diğer kişilerle iletişime ve direkt tarayıcı içinde video konferans kontrolüne imkan tanıyan, gerçek zamanlı iletişim diğer adıyla
- RTC (Real-Time Communication) olarak hizmet verir.
-
- -

OFFLİNE & STORAGE (çevrimdışılık ve depolama)

- -
-
Çevrim Dışı Kaynaklar: Uygulama Önbelleği
-
Firefox tümüyle çevrimdışı HTML5 kaynak özelliğini desteklediği gibi çevrimdışı diğer birçok kaynak desteği bulunmaktadır.
-
Çevrimiçi ve Çevrimdışı Olaylar
-
Firefox 3, bağlantının bittiğinin yahut devam ettiğinin tespiti kadar etkili bir şekilde uygulama ve eklentilere, aktif internet bağlantısının olup olmadığını tespit edebilecekleri çevrimiçi ve çevrimdışı WHATWG yani Web Hypertext Aplication Tecnology Working Group
- ( Web Köprü Uygulamaları Teknoloji Gurubu) olaylarını (events) destekler.
-
WHATWG İstemci Oturumu ve Kalıcı Depolama (aka DOM Depolama)
-
İstemci atarafı oturumunda ve kalıcı depolamada, web uygulamalarına istemci tarafında veri depolayabilmelerine izin verir.
-
IndexedDB (İndexlenmiş Veri Tabanı)
-
Tarayıcıda önemli miktarda yapılandırılmış verinin depolanması ve bu veri indeksini kullanarak yüksek performanslı erişimin sağlanabileceği bir weeb standardıdır.
-
Web Uygulamalarında Dosyaların Kullanılması
-
Dosya API desteğinin yeni HTML5 için gecko'ya eklenmesi web uygulamalrı için kullanıcının seçtiği yerel dosyalara ulaşmasının mümkün kılmıştır. Bu içerik HTML elemanlarının çoklu ve yeni özelliklerle {{ HTMLElement("input") }}  şeklinin (type) kullanılarak çoklu dosya seçilmesini destekler. O da FileReader
- (Dosya okuyucu) olarak bilinir. 
-
- -

 

- -

MULTIMEDIA (çoklu ortam)

- -
-
HTML5 Ses ve Videonun Kullanılması
-
HTML5 için {{ HTMLElement("audio") }} ve {{ HTMLElement("video") }} elemanları gömülebilir ve yeni multimedya içeriğinin üzerinde manipülasyon yapılabilmesine izin verir.
-
- -
-
WebRTC
-
RTC (Real Time Communication) "Gerçek zamanlı iletişim" olarak sunulan bu teknoloji, eklenti ve harici uygulamaya gerek duymaksızın diğer kişilerle direkt olarak iletişime ve tarayıcı içinde video konferansın kontrol edilmesine imkan verir.
-
Kamera API Kullanımı 
-
API Nedir: İngilizce Aplication Programming Interface  kelimelerinin kısaltılmış hali olup anlam olarak, "Uygulamaları programlamak için kullanılan arayüz." manasına karşılık gelir.
-
- Bu API sayesinde bilgisayar kamerasından bir görüntü alınabilir ve üzerinde değişiklik yapılabilir.
-
Traklar ve WebVTT
-
WebVTT demek Web Video Text Tracks yani  Webdeki videoların yazı formudur. {{HTMLElement("track")}} elemanı videolarda altyazı ve bölümlere izin verir. WebVTT bir yazı formatıdır.
-
- -

 

- -

3d (ÜÇ BOYUTLU) grafikler ve efektler

- -
-
Canvas Elemanının Kullanımına Örnekler
-
Firefox' da yeni {{ HTMLElement("canvas") }} elemanı, nesneleri ve diğer grafikleri nasıl çizer öğrenin.
-
<canvas> elemanı için HTML5 Yazı API' leri 
-
Artık HTML5 yazı API' lerini {{ HTMLElement("canvas") }} elemanı tarafından desteklenmektedir.
-
WebGL (Web Graphic Library)
-
WebGL, Web Grafik Kütüphanesi anlamındadır. WebGL, web platformuna, HTML5 {{ HTMLElement("canvas") }}  elemanları içinde kullanılabilecek OpenGL ES 2.0 ile yakından uyumlu bir API sunarak, Üç boyutlu grafik kullanım imkanı sunmuştur.
-
SVG (Scalable Vector Graphics)
-
Doğrudan HTML içine gömülebilecek vektörel görüntülerin XML tabanlı şeklidir.
-
-
- -
-

performans ve entegrasyon

- -
-
Webte Çalışanlar
-
İnteraktif olayları yavaşlatan arkaplan örgüsünün önüne geçmek için javascript kodlama kümesine izin verir.
-
2.Seviye XMLHttpRequest
- Sayfanın bazı bölümlerinden, zaman bağlı kalmadan bilgi çekmek mümkündür. Bu da değişken olan zaman ve kullanıcı eylemlerine göre dinamik içeriği görüntülemeye imkan verir. Bu  Ajax
- arkasındaki teknolojidir.
-
JavaScript Motorunun Anında Derlenmesi  ( JIT-Compiling ) 
-
Yeni nesil javascript motorları JIT (Just in Time) ile büyük performansa imkan verecek derecede çok güçlüdür.
-
 Tarayıcı Geçmiş Bilgisi API' si
-
Tarayıcının belleğinde kalmış bilgiler üzerinde manipülasyon yapmaya imkan verir. Bu özellikle web sayfaları için etkileşimli bilgileri yüklemek için yararlıdır.
-
contentEditable elemanı:Web Sitenizi Bir Wiki Kaynağına Dönüştürme
-
HTML5, contentEditable özelliğini standart hale getirmiştir. Bu yenilik hakkında daha fazla bilgi edinin.
-
Drag ve Drop (Sürükle-Bırak) Özelliği 
-
HTML5, sürükle-bırak özelliği web siteleri içi ve web sayfaları arasında öğeleri sürükleme özelliğini destekler. Bu aynı zamanda daha basit API' lerin uzantılar ve mozilla tabanlı uygulamalar için kullanılabilmesini sağlar.
-
HTML Focus Yönetimi (Odaklama)
-
Yeni HTML5, activeElement ve hasFocus() özelliklerini desteklemektedir.
-
Web Tabanlı Protokol İşleyicileri
-
Şimdi web uygulamalarını,
-  navigator.registerProtocolHandler()
- metodunu kullanarak protokol işleyicisi olarak kaydedebilirsiniz.
-
requestAnimationFrame
-
En iyi performansı almak için animasyonların render kontrolüne imkan tanır.
-
Tam Ekran API'si
-
Tarayıcı UI (User Interface) yani kullanıcı arabirimi olmaksızın bir web sayfası yahut uygulama için ekranın bütününü denetler.
-
İşaretçi Kilitlenme (Lock) API' si
-
İşaretçinin pencere sınırını aşabileceği durumlarda, çoğu oyun ve benzeri uygulamaların bütünlüğünü kaybetmemesi için işaretçinin web sayfasının içeriğine kilitlenmesine (Ya kısıtlanmasına yahut hareketinin sınırlandırılmasına) imkan verir.
-
Çevrimiçi ve Çevrimdışı Olaylar
-
Çevrimdışı özelliği barındıran iyi bir web uygulaması oluşturabilmeniz için uygulamanın ne zaman çevrimdışı olduğunu bunun yanında uygulamanızın ne zaman tekrar çevrim içi duruma döndüğünü bilmeniz gerekir.
-
- -

cihaz erişimi

- -
-
 Kamera API'sinin Kullanımı
-
Bilgisayarınızın kamerasından bir resim yada bir video yakalayıp üzerinde değişiklik yapmaya ve bunları depolayabilemeye imkan tanır.
-
Dokunmatik Olaylar
-
Dokunmatik ekrana basarak kullanıcılar, bir başkası tarafından oluşturulan olaylara yanıt verebilirler.
-
Konum Bilgisinin (GeoLocation) Kullanılması
-
Tarayıcılara kullanıcının konum bilgisini kullanarak yerinin belirlenmesi imkanını verir.
-
Cihaz Yönünü Saptama
-
Cihazın çalıştığı tarayıcıyla ilgili yön değişiklikleri hakkında bilgi alınabilir. Bu bir giriş cihazı olarak (örneğin cihazın yer değiştirmesine bağlı oyunlar yapmak) veya ekranın yönünün sayfanın düzenine bağlı olarak (yatay ve dikey) olarak adapte edilebilmesi için kullanışlıdır.
-
İşaretçi (Kilitleme-Sabitleme) API'si
-
İşaretçi ekranın dışına ulaştığında birçok oyun ve benzeri uygulamaların merkezinin kaybolmaması amacıyla işaretçinin içerik için sabitlenmesine olanak verir.
-
- -

Stİller

- -

CSS çok kopleks yollarla elemanları şekillendirmek için genişletilmiştir. CSS3 olarak önerilmiştir ki CSS3 artık farklı modülleri içinde barındıran kalıplaşmış bir 3. CSS versiyonu olarak bilinmez; 
- 1. versiyon ve 4. versiyona kadar bütün şekillendirme komutlarını bünyesinde toplamıştır.

- -
-
Yeni Arkaplan Stil Özellikleri
-
{{ cssxref("box-shadow") }} komutuyla bir kutuya gölge efekti vermek ve çoklu arkaplan ayarlamaya izin vermiştir.
-
Daha Süslü Çerçeveler
-
Sadece {{ cssxref("border-image") }} ve bunlara ait kişisel tercihler çerçeve şekillendirilmesinde kullanılmamaktadır.
- {{ cssxref("border-radius") }} özelliği sayesinde çerçeveleri ovalleştirmek de mümkündür.
-
Stillerinizin Animasyonlaştırılması
-
Farklı konumlar arasında hiçbir tetikleyici olmadan yahut sayfanın bir bölümünde CSS animasyonları kullanarak animasyon yapmada CSS Transitions (CSS Geçiş Efekleri) kullanılmaktadır. Şimdi Mobil elemanlarını da sayfanızda kontrol edebilirsiniz  
-
Tipoğrafi İyileştirmeleri
-
Web tasarımcıları mükemmel tipoğrafiye (Ekrana Basma) ulaşmak için güçlü kontrole sahip olurlar. Bu kontroller için {{ cssxref("text-overflow") }} ve hyphenation, shadow (gölge) ekleyerek veya daha detaylı şekillendirmelerde  decorations (şekillendirme) komutlarını kullanabilirler. Bu iyileştirme varsayılan yazı tiplerini içerir bu na da {{ cssxref("@font-face") }} kurallar topluluğuyla imkan tanır. 
-
Yeni Sunum Düzenleri
-
Tasarım etkinliğini arttırmak için,  CSS multi-column layout 
- (CSS Çoklu Satır Düzenleri) ve CSS flexible box layout (CSS Esnek Kutu Düzenleri) adında iki yeni düzenleme eklendi.
-
-
-
- -

 

- -
- - - - -
-
-
- - - - - - - - - - - - - - - - - - -
-
 
- 		  -
 
- 		-
 
- 		-
 
- -
 
- 		-
 
- 		  -
 
-
-
-
- -
 
- -
 
- -
Text-to-speech function is limited to 100 characters
- -
 
- - -
-
diff --git a/files/tr/web/guide/index.html b/files/tr/web/guide/index.html deleted file mode 100644 index ca1aeaaa1c..0000000000 --- a/files/tr/web/guide/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: Geliştirici kılavuzları -slug: Web/Guide -tags: - - Guide - - Landing - - NeedsTranslation - - TopicStub - - Web -translation_of: Web/Guide ---- -

Bu makaleler belirli teknolojileri ve API'ler faydalanmak nasıl yapılır yardımına bilgi sağlarlar.

- -
-

Not: Bu sayfa, içeriği göç tamamlayana kadar bir süre için bir karışıklık olacak. Özürlerimizi!

-
- -
{{LandingPageListSubpages}}
- -
-
JavaScript
-
JavaScript Web için uygulamalar oluşturmak için kullanılan güçlü bir betik dilidir.
-
- -

Ayrıca bakınız

- - diff --git a/files/tr/web/html/element/aside/index.html b/files/tr/web/html/element/aside/index.html deleted file mode 100644 index 0086628d72..0000000000 --- a/files/tr/web/html/element/aside/index.html +++ /dev/null @@ -1,155 +0,0 @@ ---- -title: