From 4ab365b110f2f1f2b736326b7059244a32115089 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:45:38 +0100 Subject: unslug de: move --- .../index.html | 232 ++ .../aria/aria_live_regions/index.html | 89 + .../accessibility/aria/aria_techniques/index.html | 168 + files/de/web/accessibility/aria/index.html | 137 + files/de/web/accessibility/index.html | 78 + .../index.html | 145 + .../api/audiocontext/decodeaudiodata/index.html | 218 -- .../baseaudiocontext/decodeaudiodata/index.html | 218 ++ files/de/web/api/canvas_api/index.html | 120 + .../tutorial/advanced_animations/index.html | 380 +++ .../tutorial/applying_styles_and_colors/index.html | 785 +++++ .../tutorial/basic_animations/index.html | 307 ++ .../api/canvas_api/tutorial/basic_usage/index.html | 154 + .../canvas_api/tutorial/drawing_shapes/index.html | 453 +++ .../canvas_api/tutorial/drawing_text/index.html | 165 + files/de/web/api/canvas_api/tutorial/index.html | 51 + .../tutorial/optimizing_canvas/index.html | 118 + .../canvas_api/tutorial/using_images/index.html | 324 ++ .../api/document/readystatechange_event/index.html | 86 + files/de/web/api/document_object_model/index.html | 66 + files/de/web/api/file/typ/index.html | 65 - files/de/web/api/file/type/index.html | 65 + .../using_files_from_web_applications/index.html | 512 ++++ .../index.html | 512 ---- files/de/web/api/fullscreen_api/index.html | 305 ++ files/de/web/api/geolocation_api/index.html | 291 ++ files/de/web/api/history_api/index.html | 227 ++ files/de/web/api/html_drag_and_drop_api/index.html | 11 + .../de/web/api/htmlelement/change_event/index.html | 109 + files/de/web/api/htmlelement/innertext/index.html | 90 + files/de/web/api/htmlheadelement/index.html | 28 + .../basic_concepts_behind_indexeddb/index.html | 194 ++ .../grundkonzepte_hinter_indexeddb/index.html | 194 -- .../indexeddb_api/indexeddb_verwenden/index.html | 1180 ------- .../api/indexeddb_api/using_indexeddb/index.html | 1180 +++++++ .../web-based_protocol_handlers/index.html | 127 + .../webbasierte_protokoll-handler/index.html | 127 - files/de/web/api/node/innertext/index.html | 90 - files/de/web/api/vollbild_api/index.html | 305 -- .../3d-objekte_mit_webgl_erstellen/index.html | 126 - .../index.html | 238 ++ .../animating_objects_with_webgl/index.html | 118 + .../animating_textures_in_webgl/index.html | 89 + .../animierte_texturen_in_webgl/index.html | 89 - .../tutorial/beleuchtung_in_webgl/index.html | 172 -- .../creating_3d_objects_using_webgl/index.html | 126 + .../einf\303\274hrung_in_webgl/index.html" | 73 - .../index.html" | 97 - .../tutorial/getting_started_with_webgl/index.html | 73 + .../index.html" | 238 -- .../tutorial/lighting_in_webgl/index.html | 172 ++ .../objekte_mit_webgl_animieren/index.html | 118 - .../texturen_in_webgl_verwenden/index.html | 159 - .../index.html | 97 + .../tutorial/using_textures_in_webgl/index.html | 159 + files/de/web/api/websockets_api/index.html | 193 ++ .../writing_websocket_servers/index.html | 250 ++ .../api/window/domcontentloaded_event/index.html | 156 + files/de/web/api/window/load_event/index.html | 88 + files/de/web/api/windowbase64/btoa/index.html | 145 - files/de/web/api/windowbase64/index.html | 121 - .../api/windoworworkerglobalscope/btoa/index.html | 145 + .../web/api/windoworworkerglobalscope/index.html | 121 + .../settimeout/index.html | 329 ++ files/de/web/api/windowtimers/index.html | 125 - .../de/web/api/windowtimers/settimeout/index.html | 329 -- .../index.html | 232 -- .../aria/aria_live_regionen/index.html | 89 - .../aria/aria_techniken/index.html | 168 - files/de/web/barrierefreiheit/aria/index.html | 137 - files/de/web/barrierefreiheit/index.html | 78 - .../index.html | 145 - .../web/barrierefreiheit/webentwicklung/index.html | 59 - files/de/web/css/-moz-box-flex/index.html | 103 - files/de/web/css/-moz-box-ordinal-group/index.html | 67 - files/de/web/css/-moz-box-pack/index.html | 136 - files/de/web/css/-moz-cell/index.html | 12 - files/de/web/css/-moz-user-modify/index.html | 133 - files/de/web/css/-moz-user-select/index.html | 55 - files/de/web/css/-webkit-mask-origin/index.html | 101 - files/de/web/css/-webkit-mask-repeat/index.html | 128 - files/de/web/css/@media/aural/index.html | 17 + .../de/web/css/_colon_-moz-placeholder/index.html | 121 - files/de/web/css/_colon_-moz-ui-invalid/index.html | 94 - .../de/web/css/_colon_-webkit-autofill/index.html | 80 - files/de/web/css/_colon_autofill/index.html | 80 + .../de/web/css/_colon_placeholder-shown/index.html | 121 + files/de/web/css/_colon_user-invalid/index.html | 94 + .../css/_doublecolon_-moz-placeholder/index.html | 108 - files/de/web/css/actual_value/index.html | 36 + .../web/css/adjacent_sibling_combinator/index.html | 88 + files/de/web/css/alias/index.html | 11 - .../angrenzende_geschwisterselektoren/index.html | 88 - files/de/web/css/attribute_selectors/index.html | 122 + files/de/web/css/attributselektoren/index.html | 122 - files/de/web/css/aural/index.html | 17 - files/de/web/css/auto/index.html | 27 - files/de/web/css/berechneter_wert/index.html | 32 - files/de/web/css/box-flex/index.html | 103 + files/de/web/css/box-ordinal-group/index.html | 67 + files/de/web/css/box-pack/index.html | 136 + files/de/web/css/child_combinator/index.html | 90 + files/de/web/css/class_selectors/index.html | 76 + files/de/web/css/color_value/index.html | 1285 ++++++++ .../de/web/css/compositing_and_blending/index.html | 99 + files/de/web/css/computed_value/index.html | 32 + .../css_animationen_nutzen/index.html | 365 --- .../css_animations/using_css_animations/index.html | 365 +++ .../box-shadow_generator/index.html | 2884 +++++++++++++++++ .../web/css/css_background_and_borders/index.html | 155 - .../index.html" | 70 - .../web/css/css_backgrounds_and_borders/index.html | 155 + .../resizing_background_images/index.html | 112 + .../using_multiple_backgrounds/index.html | 70 + files/de/web/css/css_box_model/index.html | 165 + .../introduction_to_the_css_box_model/index.html | 52 + .../mastering_margin_collapsing/index.html | 60 + .../css_boxmodell/box-shadow_generator/index.html | 2884 ----------------- .../index.html" | 52 - files/de/web/css/css_boxmodell/index.html | 165 - .../index.html" | 60 - files/de/web/css/css_color/index.html | 118 + .../css/css_colors/color_picker_tool/index.html | 3225 ++++++++++++++++++++ .../css/css_colors/farbauswahl_werkzeug/index.html | 3225 -------------------- files/de/web/css/css_colors/index.html | 118 - .../using_multi-column_layouts/index.html | 63 + .../css/css_compositing_and_blending/index.html | 99 - .../basic_concepts_of_flexbox/index.html | 230 ++ .../flex_elemente_sortieren/index.html | 138 - .../grundlegende_konzepte_der_flexbox/index.html | 230 -- .../ordering_flex_items/index.html | 138 + .../using_css_flexible_boxes/index.html | 398 --- .../css/css_images/using_css_gradients/index.html | 408 +++ .../consistent_list_indentation/index.html | 104 + .../css_z\303\244hler_verwenden/index.html" | 126 - .../index.html" | 104 - .../using_css_counters/index.html | 126 + files/de/web/css/css_masken/index.html | 55 - files/de/web/css/css_masking/index.html | 55 + files/de/web/css/css_motion_path/index.html | 104 + .../de/web/css/css_namensr\303\244ume/index.html" | 51 - files/de/web/css/css_namespaces/index.html | 51 + files/de/web/css/css_referenz/index.html | 211 -- files/de/web/css/css_text_decoration/index.html | 65 + files/de/web/css/css_textdekoration/index.html | 65 - .../css_transformationen_verwenden/index.html | 82 - .../css_transforms/using_css_transforms/index.html | 82 + files/de/web/css/css_typen/index.html | 59 - files/de/web/css/css_types/index.html | 59 + files/de/web/css/css_user_interface/index.html | 117 - files/de/web/css/ersetztes_element/index.html | 23 - files/de/web/css/farben/index.html | 1285 -------- files/de/web/css/gap/index.html | 178 ++ files/de/web/css/grid-gap/index.html | 178 -- files/de/web/css/id-selektoren/index.html | 72 - files/de/web/css/id_selectors/index.html | 72 + files/de/web/css/index/index.html | 8 - files/de/web/css/inheritance/index.html | 33 + files/de/web/css/initial_value/index.html | 20 + files/de/web/css/initialwert/index.html | 20 - files/de/web/css/kindselektoren/index.html | 90 - files/de/web/css/klassenselektoren/index.html | 76 - files/de/web/css/kurzformat_eigenschaft/index.html | 158 - files/de/web/css/mask-origin/index.html | 101 + files/de/web/css/mask-repeat/index.html | 128 + files/de/web/css/motion_path/index.html | 104 - files/de/web/css/none/index.html | 26 - files/de/web/css/normal/index.html | 28 - files/de/web/css/overflow-wrap/index.html | 83 + files/de/web/css/property_template/index.html | 165 - files/de/web/css/reference/index.html | 211 ++ files/de/web/css/replaced_element/index.html | 23 + files/de/web/css/shorthand_properties/index.html | 158 + files/de/web/css/specificity/index.html | 197 ++ "files/de/web/css/spezifit\303\244t/index.html" | 197 -- .../web/css/tats\303\244chlicher_wert/index.html" | 36 - files/de/web/css/url()/index.html | 85 + files/de/web/css/url/index.html | 85 - files/de/web/css/user-modify/index.html | 133 + files/de/web/css/user-select/index.html | 55 + .../de/web/css/value_definition_syntax/index.html | 405 +++ files/de/web/css/vererbung/index.html | 33 - files/de/web/css/wertdefinitionssyntax/index.html | 405 --- files/de/web/css/word-wrap/index.html | 83 - files/de/web/events/change/index.html | 109 - files/de/web/events/domcontentloaded/index.html | 156 - files/de/web/events/load/index.html | 88 - files/de/web/events/readystatechange/index.html | 86 - files/de/web/guide/ajax/erste_schritte/index.html | 338 -- files/de/web/guide/ajax/getting_started/index.html | 338 ++ .../web/guide/css/getting_started/farbe/index.html | 333 -- files/de/web/guide/css/getting_started/index.html | 60 - .../kaskadierung_und_vererbung/index.html | 160 - .../css/getting_started/lesbares_css/index.html | 166 - .../css/getting_started/selektoren/index.html | 430 --- .../css/getting_started/textstyles/index.html | 152 - .../css/getting_started/was_ist_css/index.html | 113 - .../css/getting_started/why_use_css/index.html | 106 - .../wie_css_funktioniert/index.html | 123 - .../guide/css/scaling_background_images/index.html | 112 - files/de/web/guide/dom/index.html | 22 - .../manipulating_the_browser_history/index.html | 227 -- .../canvas_tutorial/advanced_animations/index.html | 380 --- .../applying_styles_and_colors/index.html | 785 ----- .../canvas_tutorial/basic_animations/index.html | 307 -- .../guide/html/canvas_tutorial/bilder/index.html | 324 -- .../canvas_tutorial/canvas_optimieren/index.html | 118 - .../html/canvas_tutorial/drawing_text/index.html | 165 - .../canvas_tutorial/formen_zeichnen/index.html | 453 --- .../html/canvas_tutorial/grundlagen/index.html | 154 - files/de/web/guide/html/canvas_tutorial/index.html | 51 - .../web/guide/html/content_categories/index.html | 153 + .../de/web/guide/html/content_editable/index.html | 52 - .../de/web/guide/html/editable_content/index.html | 52 + files/de/web/guide/html/html5/index.html | 174 ++ .../de/web/guide/html/inhaltskategorien/index.html | 153 - .../index.html | 351 --- .../using_html_sections_and_outlines/index.html | 351 +++ files/de/web/guide/mobile/index.html | 18 + files/de/web/html/block-level_elemente/index.html | 108 - files/de/web/html/block-level_elements/index.html | 108 + files/de/web/html/canvas/index.html | 120 - files/de/web/html/element/h1-h6/index.html | 72 - files/de/web/html/element/head/index.html | 28 - .../web/html/element/heading_elements/index.html | 72 + .../html/global_attributes/accesskey/index.html | 116 + .../global_attributes/autocapitalize/index.html | 46 + .../de/web/html/global_attributes/class/index.html | 109 + .../global_attributes/contenteditable/index.html | 114 + .../html/global_attributes/contextmenu/index.html | 169 + files/de/web/html/global_attributes/dir/index.html | 85 + .../html/global_attributes/draggable/index.html | 104 + .../web/html/global_attributes/hidden/index.html | 56 + files/de/web/html/global_attributes/id/index.html | 109 + files/de/web/html/global_attributes/index.html | 205 ++ .../html/global_attributes/inputmode/index.html | 76 + files/de/web/html/global_attributes/is/index.html | 62 + .../de/web/html/global_attributes/lang/index.html | 60 + .../de/web/html/global_attributes/style/index.html | 107 + .../web/html/global_attributes/tabindex/index.html | 130 + .../de/web/html/global_attributes/title/index.html | 164 + .../html/global_attributes/translate/index.html | 30 + .../html/globale_attribute/accesskey/index.html | 116 - .../globale_attribute/autocapitalize/index.html | 46 - .../de/web/html/globale_attribute/class/index.html | 109 - .../globale_attribute/contenteditable/index.html | 114 - files/de/web/html/globale_attribute/dir/index.html | 85 - .../html/globale_attribute/draggable/index.html | 104 - .../web/html/globale_attribute/dropzone/index.html | 45 - .../web/html/globale_attribute/hidden/index.html | 56 - files/de/web/html/globale_attribute/id/index.html | 109 - files/de/web/html/globale_attribute/index.html | 205 -- .../html/globale_attribute/inputmode/index.html | 76 - files/de/web/html/globale_attribute/is/index.html | 62 - .../html/globale_attribute/kontextmenu/index.html | 169 - .../de/web/html/globale_attribute/lang/index.html | 60 - .../de/web/html/globale_attribute/style/index.html | 107 - .../web/html/globale_attribute/tabindex/index.html | 130 - .../de/web/html/globale_attribute/title/index.html | 164 - .../html/globale_attribute/translate/index.html | 30 - .../web/html/html5/html5_element_list/index.html | 587 ---- files/de/web/html/html5/index.html | 174 -- files/de/web/html/inline_elemente/index.html | 32 - files/de/web/html/inline_elements/index.html | 32 + files/de/web/html/reference/index.html | 29 + files/de/web/html/referenz/index.html | 29 - files/de/web/http/caching/index.html | 73 + files/de/web/http/caching_faq/index.html | 73 - .../index.html | 37 - .../cors/errors/corsfehltquelleerlauben/index.html | 59 - .../corsmissingallowheaderfrompreflight/index.html | 37 + .../cors/errors/corsmissingalloworigin/index.html | 59 + files/de/web/http/public_key_pinning/index.html | 147 + .../a_re-introduction_to_javascript/index.html | 909 ++++++ .../index.html" | 340 --- files/de/web/javascript/data_structures/index.html | 271 ++ files/de/web/javascript/datenstrukturen/index.html | 271 -- .../index.html | 909 ------ .../index.html" | 411 --- .../index.html | 340 +++ .../equality_comparisons_and_sameness/index.html | 424 +++ .../guide/ausdruecke_und_operatoren/index.html | 965 ------ .../control_flow_and_error_handling/index.html | 430 +++ .../guide/details_of_the_object_model/index.html | 721 +++++ .../javascript/guide/einf\303\274hrung/index.html" | 140 - .../guide/expressions_and_operators/index.html | 965 ++++++ .../guide/feinheiten_des_objektmodells/index.html | 721 ----- files/de/web/javascript/guide/functions/index.html | 657 ++++ .../de/web/javascript/guide/funktionen/index.html | 657 ---- .../javascript/guide/grammar_and_types/index.html | 699 +++++ .../guide/grammatik_und_typen/index.html | 699 ----- .../web/javascript/guide/introduction/index.html | 140 + .../kontrollfluss_und_fehlerbehandlung/index.html | 430 --- .../guide/loops_and_iteration/index.html | 337 ++ .../guide/mit_objekten_arbeiten/index.html | 506 --- .../guide/schleifen_und_iterationen/index.html | 337 -- .../javascript/guide/text_formatting/index.html | 257 ++ .../javascript/guide/textformatierung/index.html | 257 -- .../guide/working_with_objects/index.html | 506 +++ .../index.html | 390 --- .../javascript_technologies_overview/index.html | 87 + .../javascript_technologieuebersicht/index.html | 87 - .../de/web/javascript/memory_management/index.html | 184 ++ .../reference/classes/constructor/index.html | 165 + .../reference/classes/extends/index.html | 172 ++ .../de/web/javascript/reference/classes/index.html | 376 +++ .../javascript/reference/classes/static/index.html | 136 + .../deprecated_and_obsolete_features/index.html | 291 ++ .../the_legacy_iterator_protocol/index.html | 78 + .../reference/errors/already_has_pragma/index.html | 42 + .../errors/array_sort_argument/index.html | 47 + .../reference/errors/bad_octal/index.html | 54 + .../reference/errors/bad_radix/index.html | 61 + .../reference/errors/bad_regexp_flag/index.html | 105 + .../errors/bad_return_or_yield/index.html | 55 + .../errors/called_on_incompatible_type/index.html | 64 + .../index.html | 60 + .../errors/cant_access_property/index.html | 59 + .../index.html | 64 + .../reference/errors/cant_delete/index.html | 58 + .../errors/cant_redefine_property/index.html | 51 + .../errors/cyclic_object_value/index.html | 67 + .../reference/errors/dead_object/index.html | 50 + .../errors/delete_in_strict_mode/index.html | 70 + .../index.html | 75 + .../deprecated_expression_closures/index.html | 78 + .../reference/errors/deprecated_octal/index.html | 67 + .../errors/deprecated_source_map_pragma/index.html | 58 + .../errors/deprecated_string_generics/index.html | 104 + .../errors/deprecated_tolocaleformat/index.html | 90 + .../reference/errors/equal_as_assign/index.html | 54 + .../for-each-in_loops_are_deprecated/index.html | 168 + .../reference/errors/getter_only/index.html | 83 + .../errors/identifier_after_number/index.html | 53 + .../reference/errors/illegal_character/index.html | 80 + .../errors/in_operator_no_object/index.html | 72 + .../de/web/javascript/reference/errors/index.html | 29 + .../errors/invalid_array_length/index.html | 77 + .../invalid_assignment_left-hand_side/index.html | 53 + .../errors/invalid_const_assignment/index.html | 90 + .../reference/errors/invalid_date/index.html | 54 + .../errors/invalid_for-in_initializer/index.html | 74 + .../errors/invalid_for-of_initializer/index.html | 63 + .../index.html | 62 + .../reference/errors/is_not_iterable/index.html | 103 + .../reference/errors/json_bad_parse/index.html | 112 + .../errors/malformed_formal_parameter/index.html | 61 + .../reference/errors/malformed_uri/index.html | 66 + .../errors/missing_bracket_after_list/index.html | 56 + .../missing_colon_after_property_id/index.html | 77 + .../missing_curly_after_function_body/index.html | 67 + .../missing_curly_after_property_list/index.html | 51 + .../errors/missing_formal_parameter/index.html | 80 + .../errors/missing_initializer_in_const/index.html | 58 + .../missing_name_after_dot_operator/index.html | 68 + .../index.html | 42 + .../missing_parenthesis_after_condition/index.html | 70 + .../missing_semicolon_before_statement/index.html | 67 + .../errors/more_arguments_needed/index.html | 48 + .../errors/negative_repetition_count/index.html | 44 + .../reference/errors/no_non-null_object/index.html | 66 + .../reference/errors/no_properties/index.html | 40 + .../reference/errors/no_variable_name/index.html | 84 + .../non_configurable_array_element/index.html | 83 + .../reference/errors/not_a_codepoint/index.html | 55 + .../reference/errors/not_a_constructor/index.html | 97 + .../reference/errors/not_a_function/index.html | 124 + .../reference/errors/not_defined/index.html | 70 + .../reference/errors/precision_range/index.html | 96 + .../errors/property_access_denied/index.html | 47 + .../reference/errors/read-only/index.html | 78 + .../errors/redeclared_parameter/index.html | 61 + .../index.html | 88 + .../errors/reserved_identifier/index.html | 80 + .../errors/resulting_string_too_large/index.html | 49 + .../reference/errors/stmt_after_return/index.html | 77 + .../errors/strict_non_simple_params/index.html | 111 + .../reference/errors/too_much_recursion/index.html | 54 + .../typed_array_invalid_arguments/index.html | 77 + .../reference/errors/undeclared_var/index.html | 67 + .../reference/errors/undefined_prop/index.html | 63 + .../reference/errors/unexpected_token/index.html | 47 + .../reference/errors/unexpected_type/index.html | 67 + .../errors/unnamed_function_statement/index.html | 115 + .../errors/unterminated_string_literal/index.html | 67 + .../reference/errors/var_hides_argument/index.html | 56 + .../reference/fehler/already_has_pragma/index.html | 42 - .../fehler/array_sort_argument/index.html | 47 - .../reference/fehler/bad_octal/index.html | 54 - .../reference/fehler/bad_radix/index.html | 61 - .../reference/fehler/bad_regexp_flag/index.html | 105 - .../fehler/bad_return_or_yield/index.html | 55 - .../fehler/called_on_incompatible_type/index.html | 64 - .../index.html | 60 - .../fehler/cant_access_property/index.html | 59 - .../index.html | 64 - .../reference/fehler/cant_delete/index.html | 58 - .../fehler/cant_redefine_property/index.html | 51 - .../fehler/cyclic_object_value/index.html | 67 - .../reference/fehler/dead_object/index.html | 50 - .../fehler/delete_in_strict_mode/index.html | 70 - .../index.html | 75 - .../deprecated_expression_closures/index.html | 78 - .../reference/fehler/deprecated_octal/index.html | 67 - .../fehler/deprecated_source_map_pragma/index.html | 58 - .../fehler/deprecated_string_generics/index.html | 104 - .../fehler/deprecated_tolocaleformat/index.html | 90 - .../reference/fehler/equal_as_assign/index.html | 54 - .../for-each-in_loops_are_deprecated/index.html | 168 - .../reference/fehler/getter_only/index.html | 83 - .../fehler/identifier_after_number/index.html | 53 - .../reference/fehler/illegal_character/index.html | 80 - .../fehler/in_operator_no_object/index.html | 72 - .../de/web/javascript/reference/fehler/index.html | 29 - .../fehler/invalid_array_length/index.html | 77 - .../invalid_assignment_left-hand_side/index.html | 53 - .../fehler/invalid_const_assignment/index.html | 90 - .../reference/fehler/invalid_date/index.html | 54 - .../fehler/invalid_for-in_initializer/index.html | 74 - .../fehler/invalid_for-of_initializer/index.html | 63 - .../index.html | 62 - .../reference/fehler/is_not_iterable/index.html | 103 - .../reference/fehler/json_bad_parse/index.html | 112 - .../fehler/malformed_formal_parameter/index.html | 61 - .../reference/fehler/malformed_uri/index.html | 66 - .../fehler/missing_bracket_after_list/index.html | 56 - .../missing_colon_after_property_id/index.html | 77 - .../missing_curly_after_function_body/index.html | 67 - .../missing_curly_after_property_list/index.html | 51 - .../fehler/missing_formal_parameter/index.html | 80 - .../fehler/missing_initializer_in_const/index.html | 58 - .../missing_name_after_dot_operator/index.html | 68 - .../index.html | 42 - .../missing_parenthesis_after_condition/index.html | 70 - .../missing_semicolon_before_statement/index.html | 67 - .../fehler/more_arguments_needed/index.html | 48 - .../fehler/negative_repetition_count/index.html | 44 - .../reference/fehler/no_non-null_object/index.html | 66 - .../reference/fehler/no_properties/index.html | 40 - .../reference/fehler/no_variable_name/index.html | 84 - .../non_configurable_array_element/index.html | 83 - .../reference/fehler/not_a_codepoint/index.html | 55 - .../reference/fehler/not_a_constructor/index.html | 97 - .../reference/fehler/not_a_function/index.html | 124 - .../reference/fehler/not_defined/index.html | 70 - .../reference/fehler/precision_range/index.html | 96 - .../fehler/property_access_denied/index.html | 47 - .../reference/fehler/read-only/index.html | 78 - .../fehler/redeclared_parameter/index.html | 61 - .../index.html | 88 - .../fehler/reserved_identifier/index.html | 80 - .../fehler/resulting_string_too_large/index.html | 49 - .../reference/fehler/stmt_after_return/index.html | 77 - .../fehler/strict_non_simple_params/index.html | 111 - .../reference/fehler/too_much_recursion/index.html | 54 - .../typed_array_invalid_arguments/index.html | 77 - .../reference/fehler/undeclared_var/index.html | 67 - .../reference/fehler/undefined_prop/index.html | 63 - .../reference/fehler/unexpected_token/index.html | 47 - .../reference/fehler/unexpected_type/index.html | 67 - .../fehler/unnamed_function_statement/index.html | 115 - .../fehler/unterminated_string_literal/index.html | 67 - .../reference/fehler/var_hides_argument/index.html | 56 - .../reference/functions/arrow_functions/index.html | 360 +++ .../functions/method_definitions/index.html | 230 ++ .../functions/methoden_definitionen/index.html | 230 -- .../reference/functions/pfeilfunktionen/index.html | 360 --- .../reference/functions/rest_parameter/index.html | 167 - .../reference/functions/rest_parameters/index.html | 167 + .../global_objects/array/prototypen/index.html | 183 -- .../arraybuffer/prototype/index.html | 69 - .../asyncfunction/prototype/index.html | 61 - .../global_objects/atomics/notify/index.html | 93 + .../global_objects/atomics/wake/index.html | 93 - .../global_objects/boolean/prototype/index.html | 84 - .../global_objects/dataview/prototype/index.html | 110 - .../global_objects/date/prototype/index.html | 183 -- .../global_objects/error/prototype/index.html | 114 - .../global_objects/evalerror/prototype/index.html | 90 - .../global_objects/function/prototype/index.html | 100 - .../generatorfunction/prototype/index.html | 67 - .../internalerror/prototype/index.html | 62 - .../intl/collator/prototype/index.html | 80 - .../intl/datetimeformat/prototype/index.html | 84 - .../intl/numberformat/prototype/index.html | 82 - .../global_objects/map/prototype/index.html | 87 - .../global_objects/math/math.random/index.html | 112 - .../global_objects/math/random/index.html | 112 + .../global_objects/number/prototype/index.html | 90 - .../global_objects/object/prototype/index.html | 220 -- .../global_objects/rangeerror/prototype/index.html | 129 - .../global_objects/string/prototype/index.html | 190 -- .../global_objects/string/search/index.html | 105 + .../global_objects/string/suchen/index.html | 105 - .../global_objects/string/trimend/index.html | 58 + .../global_objects/string/trimleft/index.html | 58 - .../global_objects/string/trimright/index.html | 58 - .../global_objects/string/trimstart/index.html | 58 + .../syntaxerror/prototype/index.html | 89 - .../global_objects/typeerror/prototype/index.html | 89 - .../reference/klassen/constructor/index.html | 165 - .../reference/klassen/extends/index.html | 172 -- .../de/web/javascript/reference/klassen/index.html | 376 --- .../javascript/reference/klassen/static/index.html | 136 - .../operators/bitwise_operatoren/index.html | 575 ---- .../reference/operators/decrement/index.html | 82 + .../reference/operators/dekrement/index.html | 82 - .../operators/destructuring_assignment/index.html | 404 +++ .../destrukturierende_zuweisung/index.html | 404 --- .../reference/operators/increment/index.html | 80 + .../reference/operators/inkrement/index.html | 80 - .../operators/logische_operatoren/index.html | 247 -- .../reference/operators/modulo/index.html | 78 - .../operators/object_initializer/index.html | 315 ++ .../operators/objekt_initialisierer/index.html | 315 -- .../operators/optional_chaining/index.html | 194 ++ .../operators/optionale_verkettung/index.html | 194 -- .../reference/operators/remainder/index.html | 78 + .../reference/operators/spread_operator/index.html | 220 -- .../operators/vergleichsoperatoren/index.html | 244 -- .../operators/zuweisungsoperator/index.html | 413 --- .../reference/statements/default/index.html | 121 - .../reference/statements/function/index.html | 190 ++ .../reference/statements/funktion/index.html | 190 -- .../reference/template_literals/index.html | 219 ++ .../reference/template_strings/index.html | 219 -- .../veraltete_und_abgeschaffte_features/index.html | 291 -- .../the_legacy_iterator_protocol/index.html | 78 - .../web/javascript/speicherverwaltung/index.html | 184 -- .../index.html | 424 --- files/de/web/mathml/attribute/values/index.html | 146 + files/de/web/mathml/attribute/werte/index.html | 146 - files/de/web/mathml/beispiele/index.html | 19 - .../mathml_satz_des_pythagoras/index.html | 85 - .../beispiele/quadratische_gleichung/index.html | 106 - .../deriving_the_quadratic_formula/index.html | 106 + files/de/web/mathml/examples/index.html | 19 + .../examples/mathml_pythagorean_theorem/index.html | 85 + files/de/web/opensearch/index.html | 161 + .../de/web/security/public_key_pinning/index.html | 147 - .../web/svg/tutorial/einf\303\274hrung/index.html" | 21 - files/de/web/svg/tutorial/introduction/index.html | 21 + files/de/web/svg/tutorial/paths/index.html | 239 ++ files/de/web/svg/tutorial/pfade/index.html | 239 -- files/de/web/svg/tutorial/svg_fonts/index.html | 99 + .../web/svg/tutorial/svg_schriftarten/index.html | 99 - .../web/web_components/custom_elements/index.html | 259 -- files/de/web/webapi/index.html | 134 - .../webapi/verwenden_von_geolocation/index.html | 291 -- .../de/web/xml/xml_einf\303\274hrung/index.html" | 63 - files/de/web/xml/xml_introduction/index.html | 63 + .../index.html | 411 +++ 552 files changed, 43593 insertions(+), 50670 deletions(-) create mode 100644 files/de/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html create mode 100644 files/de/web/accessibility/aria/aria_live_regions/index.html create mode 100644 files/de/web/accessibility/aria/aria_techniques/index.html create mode 100644 files/de/web/accessibility/aria/index.html create mode 100644 files/de/web/accessibility/index.html create mode 100644 files/de/web/accessibility/keyboard-navigable_javascript_widgets/index.html delete mode 100644 files/de/web/api/audiocontext/decodeaudiodata/index.html create mode 100644 files/de/web/api/baseaudiocontext/decodeaudiodata/index.html create mode 100644 files/de/web/api/canvas_api/index.html create mode 100644 files/de/web/api/canvas_api/tutorial/advanced_animations/index.html create mode 100644 files/de/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html create mode 100644 files/de/web/api/canvas_api/tutorial/basic_animations/index.html create mode 100644 files/de/web/api/canvas_api/tutorial/basic_usage/index.html create mode 100644 files/de/web/api/canvas_api/tutorial/drawing_shapes/index.html create mode 100644 files/de/web/api/canvas_api/tutorial/drawing_text/index.html create mode 100644 files/de/web/api/canvas_api/tutorial/index.html create mode 100644 files/de/web/api/canvas_api/tutorial/optimizing_canvas/index.html create mode 100644 files/de/web/api/canvas_api/tutorial/using_images/index.html create mode 100644 files/de/web/api/document/readystatechange_event/index.html create mode 100644 files/de/web/api/document_object_model/index.html delete mode 100644 files/de/web/api/file/typ/index.html create mode 100644 files/de/web/api/file/type/index.html create mode 100644 files/de/web/api/file/using_files_from_web_applications/index.html delete mode 100644 files/de/web/api/file/zugriff_auf_dateien_von_webapplikationen/index.html create mode 100644 files/de/web/api/fullscreen_api/index.html create mode 100644 files/de/web/api/geolocation_api/index.html create mode 100644 files/de/web/api/history_api/index.html create mode 100644 files/de/web/api/html_drag_and_drop_api/index.html create mode 100644 files/de/web/api/htmlelement/change_event/index.html create mode 100644 files/de/web/api/htmlelement/innertext/index.html create mode 100644 files/de/web/api/htmlheadelement/index.html create mode 100644 files/de/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html delete mode 100644 files/de/web/api/indexeddb_api/grundkonzepte_hinter_indexeddb/index.html delete mode 100644 files/de/web/api/indexeddb_api/indexeddb_verwenden/index.html create mode 100644 files/de/web/api/indexeddb_api/using_indexeddb/index.html create mode 100644 files/de/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.html delete mode 100644 files/de/web/api/navigator/registerprotocolhandler/webbasierte_protokoll-handler/index.html delete mode 100644 files/de/web/api/node/innertext/index.html delete mode 100644 files/de/web/api/vollbild_api/index.html delete mode 100644 files/de/web/api/webgl_api/tutorial/3d-objekte_mit_webgl_erstellen/index.html create mode 100644 files/de/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html create mode 100644 files/de/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html create mode 100644 files/de/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.html delete mode 100644 files/de/web/api/webgl_api/tutorial/animierte_texturen_in_webgl/index.html delete mode 100644 files/de/web/api/webgl_api/tutorial/beleuchtung_in_webgl/index.html create mode 100644 files/de/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html delete mode 100644 "files/de/web/api/webgl_api/tutorial/einf\303\274hrung_in_webgl/index.html" delete mode 100644 "files/de/web/api/webgl_api/tutorial/farben_mittels_shader_in_einen_webgl-kontext_hinzuf\303\274gen/index.html" create mode 100644 files/de/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html delete mode 100644 "files/de/web/api/webgl_api/tutorial/hinzuf\303\274gen_von_2d_inhalten_in_einen_webgl-kontext/index.html" create mode 100644 files/de/web/api/webgl_api/tutorial/lighting_in_webgl/index.html delete mode 100644 files/de/web/api/webgl_api/tutorial/objekte_mit_webgl_animieren/index.html delete mode 100644 files/de/web/api/webgl_api/tutorial/texturen_in_webgl_verwenden/index.html create mode 100644 files/de/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html create mode 100644 files/de/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html create mode 100644 files/de/web/api/websockets_api/index.html create mode 100644 files/de/web/api/websockets_api/writing_websocket_servers/index.html create mode 100644 files/de/web/api/window/domcontentloaded_event/index.html create mode 100644 files/de/web/api/window/load_event/index.html delete mode 100644 files/de/web/api/windowbase64/btoa/index.html delete mode 100644 files/de/web/api/windowbase64/index.html create mode 100644 files/de/web/api/windoworworkerglobalscope/btoa/index.html create mode 100644 files/de/web/api/windoworworkerglobalscope/index.html create mode 100644 files/de/web/api/windoworworkerglobalscope/settimeout/index.html delete mode 100644 files/de/web/api/windowtimers/index.html delete mode 100644 files/de/web/api/windowtimers/settimeout/index.html delete mode 100644 files/de/web/barrierefreiheit/an_overview_of_accessible_web_applications_and_widgets/index.html delete mode 100644 files/de/web/barrierefreiheit/aria/aria_live_regionen/index.html delete mode 100644 files/de/web/barrierefreiheit/aria/aria_techniken/index.html delete mode 100644 files/de/web/barrierefreiheit/aria/index.html delete mode 100644 files/de/web/barrierefreiheit/index.html delete mode 100644 files/de/web/barrierefreiheit/tastaturgesteuerte_javascript_komponenten/index.html delete mode 100644 files/de/web/barrierefreiheit/webentwicklung/index.html delete mode 100644 files/de/web/css/-moz-box-flex/index.html delete mode 100644 files/de/web/css/-moz-box-ordinal-group/index.html delete mode 100644 files/de/web/css/-moz-box-pack/index.html delete mode 100644 files/de/web/css/-moz-cell/index.html delete mode 100644 files/de/web/css/-moz-user-modify/index.html delete mode 100644 files/de/web/css/-moz-user-select/index.html delete mode 100644 files/de/web/css/-webkit-mask-origin/index.html delete mode 100644 files/de/web/css/-webkit-mask-repeat/index.html create mode 100644 files/de/web/css/@media/aural/index.html delete mode 100644 files/de/web/css/_colon_-moz-placeholder/index.html delete mode 100644 files/de/web/css/_colon_-moz-ui-invalid/index.html delete mode 100644 files/de/web/css/_colon_-webkit-autofill/index.html create mode 100644 files/de/web/css/_colon_autofill/index.html create mode 100644 files/de/web/css/_colon_placeholder-shown/index.html create mode 100644 files/de/web/css/_colon_user-invalid/index.html delete mode 100644 files/de/web/css/_doublecolon_-moz-placeholder/index.html create mode 100644 files/de/web/css/actual_value/index.html create mode 100644 files/de/web/css/adjacent_sibling_combinator/index.html delete mode 100644 files/de/web/css/alias/index.html delete mode 100644 files/de/web/css/angrenzende_geschwisterselektoren/index.html create mode 100644 files/de/web/css/attribute_selectors/index.html delete mode 100644 files/de/web/css/attributselektoren/index.html delete mode 100644 files/de/web/css/aural/index.html delete mode 100644 files/de/web/css/auto/index.html delete mode 100644 files/de/web/css/berechneter_wert/index.html create mode 100644 files/de/web/css/box-flex/index.html create mode 100644 files/de/web/css/box-ordinal-group/index.html create mode 100644 files/de/web/css/box-pack/index.html create mode 100644 files/de/web/css/child_combinator/index.html create mode 100644 files/de/web/css/class_selectors/index.html create mode 100644 files/de/web/css/color_value/index.html create mode 100644 files/de/web/css/compositing_and_blending/index.html create mode 100644 files/de/web/css/computed_value/index.html delete mode 100644 files/de/web/css/css_animations/css_animationen_nutzen/index.html create mode 100644 files/de/web/css/css_animations/using_css_animations/index.html create mode 100644 files/de/web/css/css_background_and_borders/box-shadow_generator/index.html delete mode 100644 files/de/web/css/css_background_and_borders/index.html delete mode 100644 "files/de/web/css/css_background_and_borders/mehrere_hintergr\303\274nde_in_css_verwenden/index.html" create mode 100644 files/de/web/css/css_backgrounds_and_borders/index.html create mode 100644 files/de/web/css/css_backgrounds_and_borders/resizing_background_images/index.html create mode 100644 files/de/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html create mode 100644 files/de/web/css/css_box_model/index.html create mode 100644 files/de/web/css/css_box_model/introduction_to_the_css_box_model/index.html create mode 100644 files/de/web/css/css_box_model/mastering_margin_collapsing/index.html delete mode 100644 files/de/web/css/css_boxmodell/box-shadow_generator/index.html delete mode 100644 "files/de/web/css/css_boxmodell/einf\303\274hrung_in_das_css_boxmodell/index.html" delete mode 100644 files/de/web/css/css_boxmodell/index.html delete mode 100644 "files/de/web/css/css_boxmodell/zusammenfallen_von_au\303\237enabst\303\244nden_meistern/index.html" create mode 100644 files/de/web/css/css_color/index.html create mode 100644 files/de/web/css/css_colors/color_picker_tool/index.html delete mode 100644 files/de/web/css/css_colors/farbauswahl_werkzeug/index.html delete mode 100644 files/de/web/css/css_colors/index.html create mode 100644 files/de/web/css/css_columns/using_multi-column_layouts/index.html delete mode 100644 files/de/web/css/css_compositing_and_blending/index.html create mode 100644 files/de/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html delete mode 100644 files/de/web/css/css_flexible_box_layout/flex_elemente_sortieren/index.html delete mode 100644 files/de/web/css/css_flexible_box_layout/grundlegende_konzepte_der_flexbox/index.html create mode 100644 files/de/web/css/css_flexible_box_layout/ordering_flex_items/index.html delete mode 100644 files/de/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html create mode 100644 files/de/web/css/css_images/using_css_gradients/index.html create mode 100644 files/de/web/css/css_lists_and_counters/consistent_list_indentation/index.html delete mode 100644 "files/de/web/css/css_lists_and_counters/css_z\303\244hler_verwenden/index.html" delete mode 100644 "files/de/web/css/css_lists_and_counters/konsistente_listeneinr\303\274ckung/index.html" create mode 100644 files/de/web/css/css_lists_and_counters/using_css_counters/index.html delete mode 100644 files/de/web/css/css_masken/index.html create mode 100644 files/de/web/css/css_masking/index.html create mode 100644 files/de/web/css/css_motion_path/index.html delete mode 100644 "files/de/web/css/css_namensr\303\244ume/index.html" create mode 100644 files/de/web/css/css_namespaces/index.html delete mode 100644 files/de/web/css/css_referenz/index.html create mode 100644 files/de/web/css/css_text_decoration/index.html delete mode 100644 files/de/web/css/css_textdekoration/index.html delete mode 100644 files/de/web/css/css_transforms/css_transformationen_verwenden/index.html create mode 100644 files/de/web/css/css_transforms/using_css_transforms/index.html delete mode 100644 files/de/web/css/css_typen/index.html create mode 100644 files/de/web/css/css_types/index.html delete mode 100644 files/de/web/css/css_user_interface/index.html delete mode 100644 files/de/web/css/ersetztes_element/index.html delete mode 100644 files/de/web/css/farben/index.html create mode 100644 files/de/web/css/gap/index.html delete mode 100644 files/de/web/css/grid-gap/index.html delete mode 100644 files/de/web/css/id-selektoren/index.html create mode 100644 files/de/web/css/id_selectors/index.html delete mode 100644 files/de/web/css/index/index.html create mode 100644 files/de/web/css/inheritance/index.html create mode 100644 files/de/web/css/initial_value/index.html delete mode 100644 files/de/web/css/initialwert/index.html delete mode 100644 files/de/web/css/kindselektoren/index.html delete mode 100644 files/de/web/css/klassenselektoren/index.html delete mode 100644 files/de/web/css/kurzformat_eigenschaft/index.html create mode 100644 files/de/web/css/mask-origin/index.html create mode 100644 files/de/web/css/mask-repeat/index.html delete mode 100644 files/de/web/css/motion_path/index.html delete mode 100644 files/de/web/css/none/index.html delete mode 100644 files/de/web/css/normal/index.html create mode 100644 files/de/web/css/overflow-wrap/index.html delete mode 100644 files/de/web/css/property_template/index.html create mode 100644 files/de/web/css/reference/index.html create mode 100644 files/de/web/css/replaced_element/index.html create mode 100644 files/de/web/css/shorthand_properties/index.html create mode 100644 files/de/web/css/specificity/index.html delete mode 100644 "files/de/web/css/spezifit\303\244t/index.html" delete mode 100644 "files/de/web/css/tats\303\244chlicher_wert/index.html" create mode 100644 files/de/web/css/url()/index.html delete mode 100644 files/de/web/css/url/index.html create mode 100644 files/de/web/css/user-modify/index.html create mode 100644 files/de/web/css/user-select/index.html create mode 100644 files/de/web/css/value_definition_syntax/index.html delete mode 100644 files/de/web/css/vererbung/index.html delete mode 100644 files/de/web/css/wertdefinitionssyntax/index.html delete mode 100644 files/de/web/css/word-wrap/index.html delete mode 100644 files/de/web/events/change/index.html delete mode 100644 files/de/web/events/domcontentloaded/index.html delete mode 100644 files/de/web/events/load/index.html delete mode 100644 files/de/web/events/readystatechange/index.html delete mode 100644 files/de/web/guide/ajax/erste_schritte/index.html create mode 100644 files/de/web/guide/ajax/getting_started/index.html delete mode 100644 files/de/web/guide/css/getting_started/farbe/index.html delete mode 100644 files/de/web/guide/css/getting_started/index.html delete mode 100644 files/de/web/guide/css/getting_started/kaskadierung_und_vererbung/index.html delete mode 100644 files/de/web/guide/css/getting_started/lesbares_css/index.html delete mode 100644 files/de/web/guide/css/getting_started/selektoren/index.html delete mode 100644 files/de/web/guide/css/getting_started/textstyles/index.html delete mode 100644 files/de/web/guide/css/getting_started/was_ist_css/index.html delete mode 100644 files/de/web/guide/css/getting_started/why_use_css/index.html delete mode 100644 files/de/web/guide/css/getting_started/wie_css_funktioniert/index.html delete mode 100644 files/de/web/guide/css/scaling_background_images/index.html delete mode 100644 files/de/web/guide/dom/index.html delete mode 100644 files/de/web/guide/dom/manipulating_the_browser_history/index.html delete mode 100644 files/de/web/guide/html/canvas_tutorial/advanced_animations/index.html delete mode 100644 files/de/web/guide/html/canvas_tutorial/applying_styles_and_colors/index.html delete mode 100644 files/de/web/guide/html/canvas_tutorial/basic_animations/index.html delete mode 100644 files/de/web/guide/html/canvas_tutorial/bilder/index.html delete mode 100644 files/de/web/guide/html/canvas_tutorial/canvas_optimieren/index.html delete mode 100644 files/de/web/guide/html/canvas_tutorial/drawing_text/index.html delete mode 100644 files/de/web/guide/html/canvas_tutorial/formen_zeichnen/index.html delete mode 100644 files/de/web/guide/html/canvas_tutorial/grundlagen/index.html delete mode 100644 files/de/web/guide/html/canvas_tutorial/index.html create mode 100644 files/de/web/guide/html/content_categories/index.html delete mode 100644 files/de/web/guide/html/content_editable/index.html create mode 100644 files/de/web/guide/html/editable_content/index.html create mode 100644 files/de/web/guide/html/html5/index.html delete mode 100644 files/de/web/guide/html/inhaltskategorien/index.html delete mode 100644 files/de/web/guide/html/sections_and_outlines_of_an_html5_document/index.html create mode 100644 files/de/web/guide/html/using_html_sections_and_outlines/index.html create mode 100644 files/de/web/guide/mobile/index.html delete mode 100644 files/de/web/html/block-level_elemente/index.html create mode 100644 files/de/web/html/block-level_elements/index.html delete mode 100644 files/de/web/html/canvas/index.html delete mode 100644 files/de/web/html/element/h1-h6/index.html delete mode 100644 files/de/web/html/element/head/index.html create mode 100644 files/de/web/html/element/heading_elements/index.html create mode 100644 files/de/web/html/global_attributes/accesskey/index.html create mode 100644 files/de/web/html/global_attributes/autocapitalize/index.html create mode 100644 files/de/web/html/global_attributes/class/index.html create mode 100644 files/de/web/html/global_attributes/contenteditable/index.html create mode 100644 files/de/web/html/global_attributes/contextmenu/index.html create mode 100644 files/de/web/html/global_attributes/dir/index.html create mode 100644 files/de/web/html/global_attributes/draggable/index.html create mode 100644 files/de/web/html/global_attributes/hidden/index.html create mode 100644 files/de/web/html/global_attributes/id/index.html create mode 100644 files/de/web/html/global_attributes/index.html create mode 100644 files/de/web/html/global_attributes/inputmode/index.html create mode 100644 files/de/web/html/global_attributes/is/index.html create mode 100644 files/de/web/html/global_attributes/lang/index.html create mode 100644 files/de/web/html/global_attributes/style/index.html create mode 100644 files/de/web/html/global_attributes/tabindex/index.html create mode 100644 files/de/web/html/global_attributes/title/index.html create mode 100644 files/de/web/html/global_attributes/translate/index.html delete mode 100644 files/de/web/html/globale_attribute/accesskey/index.html delete mode 100644 files/de/web/html/globale_attribute/autocapitalize/index.html delete mode 100644 files/de/web/html/globale_attribute/class/index.html delete mode 100644 files/de/web/html/globale_attribute/contenteditable/index.html delete mode 100644 files/de/web/html/globale_attribute/dir/index.html delete mode 100644 files/de/web/html/globale_attribute/draggable/index.html delete mode 100644 files/de/web/html/globale_attribute/dropzone/index.html delete mode 100644 files/de/web/html/globale_attribute/hidden/index.html delete mode 100644 files/de/web/html/globale_attribute/id/index.html delete mode 100644 files/de/web/html/globale_attribute/index.html delete mode 100644 files/de/web/html/globale_attribute/inputmode/index.html delete mode 100644 files/de/web/html/globale_attribute/is/index.html delete mode 100644 files/de/web/html/globale_attribute/kontextmenu/index.html delete mode 100644 files/de/web/html/globale_attribute/lang/index.html delete mode 100644 files/de/web/html/globale_attribute/style/index.html delete mode 100644 files/de/web/html/globale_attribute/tabindex/index.html delete mode 100644 files/de/web/html/globale_attribute/title/index.html delete mode 100644 files/de/web/html/globale_attribute/translate/index.html delete mode 100644 files/de/web/html/html5/html5_element_list/index.html delete mode 100644 files/de/web/html/html5/index.html delete mode 100644 files/de/web/html/inline_elemente/index.html create mode 100644 files/de/web/html/inline_elements/index.html create mode 100644 files/de/web/html/reference/index.html delete mode 100644 files/de/web/html/referenz/index.html create mode 100644 files/de/web/http/caching/index.html delete mode 100644 files/de/web/http/caching_faq/index.html delete mode 100644 files/de/web/http/cors/errors/corsfehlenderallowheaderauspreflight/index.html delete mode 100644 files/de/web/http/cors/errors/corsfehltquelleerlauben/index.html create mode 100644 files/de/web/http/cors/errors/corsmissingallowheaderfrompreflight/index.html create mode 100644 files/de/web/http/cors/errors/corsmissingalloworigin/index.html create mode 100644 files/de/web/http/public_key_pinning/index.html create mode 100644 files/de/web/javascript/a_re-introduction_to_javascript/index.html delete mode 100644 "files/de/web/javascript/aufz\303\244hlbarkeit_und_zugeh\303\266rigkeit_von_eigenschaften/index.html" create mode 100644 files/de/web/javascript/data_structures/index.html delete mode 100644 files/de/web/javascript/datenstrukturen/index.html delete mode 100644 files/de/web/javascript/eine_wiedereinfuehrung_in_javascript/index.html delete mode 100644 "files/de/web/javascript/einf\303\274hrung_in_den_gebrauch_von_xpath_in_javascript/index.html" create mode 100644 files/de/web/javascript/enumerability_and_ownership_of_properties/index.html create mode 100644 files/de/web/javascript/equality_comparisons_and_sameness/index.html delete mode 100644 files/de/web/javascript/guide/ausdruecke_und_operatoren/index.html create mode 100644 files/de/web/javascript/guide/control_flow_and_error_handling/index.html create mode 100644 files/de/web/javascript/guide/details_of_the_object_model/index.html delete mode 100644 "files/de/web/javascript/guide/einf\303\274hrung/index.html" create mode 100644 files/de/web/javascript/guide/expressions_and_operators/index.html delete mode 100644 files/de/web/javascript/guide/feinheiten_des_objektmodells/index.html create mode 100644 files/de/web/javascript/guide/functions/index.html delete mode 100644 files/de/web/javascript/guide/funktionen/index.html create mode 100644 files/de/web/javascript/guide/grammar_and_types/index.html delete mode 100644 files/de/web/javascript/guide/grammatik_und_typen/index.html create mode 100644 files/de/web/javascript/guide/introduction/index.html delete mode 100644 files/de/web/javascript/guide/kontrollfluss_und_fehlerbehandlung/index.html create mode 100644 files/de/web/javascript/guide/loops_and_iteration/index.html delete mode 100644 files/de/web/javascript/guide/mit_objekten_arbeiten/index.html delete mode 100644 files/de/web/javascript/guide/schleifen_und_iterationen/index.html create mode 100644 files/de/web/javascript/guide/text_formatting/index.html delete mode 100644 files/de/web/javascript/guide/textformatierung/index.html create mode 100644 files/de/web/javascript/guide/working_with_objects/index.html delete mode 100644 files/de/web/javascript/introduction_to_object-oriented_javascript/index.html create mode 100644 files/de/web/javascript/javascript_technologies_overview/index.html delete mode 100644 files/de/web/javascript/javascript_technologieuebersicht/index.html create mode 100644 files/de/web/javascript/memory_management/index.html create mode 100644 files/de/web/javascript/reference/classes/constructor/index.html create mode 100644 files/de/web/javascript/reference/classes/extends/index.html create mode 100644 files/de/web/javascript/reference/classes/index.html create mode 100644 files/de/web/javascript/reference/classes/static/index.html create mode 100644 files/de/web/javascript/reference/deprecated_and_obsolete_features/index.html create mode 100644 files/de/web/javascript/reference/deprecated_and_obsolete_features/the_legacy_iterator_protocol/index.html create mode 100644 files/de/web/javascript/reference/errors/already_has_pragma/index.html create mode 100644 files/de/web/javascript/reference/errors/array_sort_argument/index.html create mode 100644 files/de/web/javascript/reference/errors/bad_octal/index.html create mode 100644 files/de/web/javascript/reference/errors/bad_radix/index.html create mode 100644 files/de/web/javascript/reference/errors/bad_regexp_flag/index.html create mode 100644 files/de/web/javascript/reference/errors/bad_return_or_yield/index.html create mode 100644 files/de/web/javascript/reference/errors/called_on_incompatible_type/index.html create mode 100644 files/de/web/javascript/reference/errors/cant_access_lexical_declaration_before_init/index.html create mode 100644 files/de/web/javascript/reference/errors/cant_access_property/index.html create mode 100644 files/de/web/javascript/reference/errors/cant_define_property_object_not_extensible/index.html create mode 100644 files/de/web/javascript/reference/errors/cant_delete/index.html create mode 100644 files/de/web/javascript/reference/errors/cant_redefine_property/index.html create mode 100644 files/de/web/javascript/reference/errors/cyclic_object_value/index.html create mode 100644 files/de/web/javascript/reference/errors/dead_object/index.html create mode 100644 files/de/web/javascript/reference/errors/delete_in_strict_mode/index.html create mode 100644 files/de/web/javascript/reference/errors/deprecated_caller_or_arguments_usage/index.html create mode 100644 files/de/web/javascript/reference/errors/deprecated_expression_closures/index.html create mode 100644 files/de/web/javascript/reference/errors/deprecated_octal/index.html create mode 100644 files/de/web/javascript/reference/errors/deprecated_source_map_pragma/index.html create mode 100644 files/de/web/javascript/reference/errors/deprecated_string_generics/index.html create mode 100644 files/de/web/javascript/reference/errors/deprecated_tolocaleformat/index.html create mode 100644 files/de/web/javascript/reference/errors/equal_as_assign/index.html create mode 100644 files/de/web/javascript/reference/errors/for-each-in_loops_are_deprecated/index.html create mode 100644 files/de/web/javascript/reference/errors/getter_only/index.html create mode 100644 files/de/web/javascript/reference/errors/identifier_after_number/index.html create mode 100644 files/de/web/javascript/reference/errors/illegal_character/index.html create mode 100644 files/de/web/javascript/reference/errors/in_operator_no_object/index.html create mode 100644 files/de/web/javascript/reference/errors/index.html create mode 100644 files/de/web/javascript/reference/errors/invalid_array_length/index.html create mode 100644 files/de/web/javascript/reference/errors/invalid_assignment_left-hand_side/index.html create mode 100644 files/de/web/javascript/reference/errors/invalid_const_assignment/index.html create mode 100644 files/de/web/javascript/reference/errors/invalid_date/index.html create mode 100644 files/de/web/javascript/reference/errors/invalid_for-in_initializer/index.html create mode 100644 files/de/web/javascript/reference/errors/invalid_for-of_initializer/index.html create mode 100644 files/de/web/javascript/reference/errors/invalid_right_hand_side_instanceof_operand/index.html create mode 100644 files/de/web/javascript/reference/errors/is_not_iterable/index.html create mode 100644 files/de/web/javascript/reference/errors/json_bad_parse/index.html create mode 100644 files/de/web/javascript/reference/errors/malformed_formal_parameter/index.html create mode 100644 files/de/web/javascript/reference/errors/malformed_uri/index.html create mode 100644 files/de/web/javascript/reference/errors/missing_bracket_after_list/index.html create mode 100644 files/de/web/javascript/reference/errors/missing_colon_after_property_id/index.html create mode 100644 files/de/web/javascript/reference/errors/missing_curly_after_function_body/index.html create mode 100644 files/de/web/javascript/reference/errors/missing_curly_after_property_list/index.html create mode 100644 files/de/web/javascript/reference/errors/missing_formal_parameter/index.html create mode 100644 files/de/web/javascript/reference/errors/missing_initializer_in_const/index.html create mode 100644 files/de/web/javascript/reference/errors/missing_name_after_dot_operator/index.html create mode 100644 files/de/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html create mode 100644 files/de/web/javascript/reference/errors/missing_parenthesis_after_condition/index.html create mode 100644 files/de/web/javascript/reference/errors/missing_semicolon_before_statement/index.html create mode 100644 files/de/web/javascript/reference/errors/more_arguments_needed/index.html create mode 100644 files/de/web/javascript/reference/errors/negative_repetition_count/index.html create mode 100644 files/de/web/javascript/reference/errors/no_non-null_object/index.html create mode 100644 files/de/web/javascript/reference/errors/no_properties/index.html create mode 100644 files/de/web/javascript/reference/errors/no_variable_name/index.html create mode 100644 files/de/web/javascript/reference/errors/non_configurable_array_element/index.html create mode 100644 files/de/web/javascript/reference/errors/not_a_codepoint/index.html create mode 100644 files/de/web/javascript/reference/errors/not_a_constructor/index.html create mode 100644 files/de/web/javascript/reference/errors/not_a_function/index.html create mode 100644 files/de/web/javascript/reference/errors/not_defined/index.html create mode 100644 files/de/web/javascript/reference/errors/precision_range/index.html create mode 100644 files/de/web/javascript/reference/errors/property_access_denied/index.html create mode 100644 files/de/web/javascript/reference/errors/read-only/index.html create mode 100644 files/de/web/javascript/reference/errors/redeclared_parameter/index.html create mode 100644 files/de/web/javascript/reference/errors/reduce_of_empty_array_with_no_initial_value/index.html create mode 100644 files/de/web/javascript/reference/errors/reserved_identifier/index.html create mode 100644 files/de/web/javascript/reference/errors/resulting_string_too_large/index.html create mode 100644 files/de/web/javascript/reference/errors/stmt_after_return/index.html create mode 100644 files/de/web/javascript/reference/errors/strict_non_simple_params/index.html create mode 100644 files/de/web/javascript/reference/errors/too_much_recursion/index.html create mode 100644 files/de/web/javascript/reference/errors/typed_array_invalid_arguments/index.html create mode 100644 files/de/web/javascript/reference/errors/undeclared_var/index.html create mode 100644 files/de/web/javascript/reference/errors/undefined_prop/index.html create mode 100644 files/de/web/javascript/reference/errors/unexpected_token/index.html create mode 100644 files/de/web/javascript/reference/errors/unexpected_type/index.html create mode 100644 files/de/web/javascript/reference/errors/unnamed_function_statement/index.html create mode 100644 files/de/web/javascript/reference/errors/unterminated_string_literal/index.html create mode 100644 files/de/web/javascript/reference/errors/var_hides_argument/index.html delete mode 100644 files/de/web/javascript/reference/fehler/already_has_pragma/index.html delete mode 100644 files/de/web/javascript/reference/fehler/array_sort_argument/index.html delete mode 100644 files/de/web/javascript/reference/fehler/bad_octal/index.html delete mode 100644 files/de/web/javascript/reference/fehler/bad_radix/index.html delete mode 100644 files/de/web/javascript/reference/fehler/bad_regexp_flag/index.html delete mode 100644 files/de/web/javascript/reference/fehler/bad_return_or_yield/index.html delete mode 100644 files/de/web/javascript/reference/fehler/called_on_incompatible_type/index.html delete mode 100644 files/de/web/javascript/reference/fehler/cant_access_lexical_declaration_before_init/index.html delete mode 100644 files/de/web/javascript/reference/fehler/cant_access_property/index.html delete mode 100644 files/de/web/javascript/reference/fehler/cant_define_property_object_not_extensible/index.html delete mode 100644 files/de/web/javascript/reference/fehler/cant_delete/index.html delete mode 100644 files/de/web/javascript/reference/fehler/cant_redefine_property/index.html delete mode 100644 files/de/web/javascript/reference/fehler/cyclic_object_value/index.html delete mode 100644 files/de/web/javascript/reference/fehler/dead_object/index.html delete mode 100644 files/de/web/javascript/reference/fehler/delete_in_strict_mode/index.html delete mode 100644 files/de/web/javascript/reference/fehler/deprecated_caller_or_arguments_usage/index.html delete mode 100644 files/de/web/javascript/reference/fehler/deprecated_expression_closures/index.html delete mode 100644 files/de/web/javascript/reference/fehler/deprecated_octal/index.html delete mode 100644 files/de/web/javascript/reference/fehler/deprecated_source_map_pragma/index.html delete mode 100644 files/de/web/javascript/reference/fehler/deprecated_string_generics/index.html delete mode 100644 files/de/web/javascript/reference/fehler/deprecated_tolocaleformat/index.html delete mode 100644 files/de/web/javascript/reference/fehler/equal_as_assign/index.html delete mode 100644 files/de/web/javascript/reference/fehler/for-each-in_loops_are_deprecated/index.html delete mode 100644 files/de/web/javascript/reference/fehler/getter_only/index.html delete mode 100644 files/de/web/javascript/reference/fehler/identifier_after_number/index.html delete mode 100644 files/de/web/javascript/reference/fehler/illegal_character/index.html delete mode 100644 files/de/web/javascript/reference/fehler/in_operator_no_object/index.html delete mode 100644 files/de/web/javascript/reference/fehler/index.html delete mode 100644 files/de/web/javascript/reference/fehler/invalid_array_length/index.html delete mode 100644 files/de/web/javascript/reference/fehler/invalid_assignment_left-hand_side/index.html delete mode 100644 files/de/web/javascript/reference/fehler/invalid_const_assignment/index.html delete mode 100644 files/de/web/javascript/reference/fehler/invalid_date/index.html delete mode 100644 files/de/web/javascript/reference/fehler/invalid_for-in_initializer/index.html delete mode 100644 files/de/web/javascript/reference/fehler/invalid_for-of_initializer/index.html delete mode 100644 files/de/web/javascript/reference/fehler/invalid_right_hand_side_instanceof_operand/index.html delete mode 100644 files/de/web/javascript/reference/fehler/is_not_iterable/index.html delete mode 100644 files/de/web/javascript/reference/fehler/json_bad_parse/index.html delete mode 100644 files/de/web/javascript/reference/fehler/malformed_formal_parameter/index.html delete mode 100644 files/de/web/javascript/reference/fehler/malformed_uri/index.html delete mode 100644 files/de/web/javascript/reference/fehler/missing_bracket_after_list/index.html delete mode 100644 files/de/web/javascript/reference/fehler/missing_colon_after_property_id/index.html delete mode 100644 files/de/web/javascript/reference/fehler/missing_curly_after_function_body/index.html delete mode 100644 files/de/web/javascript/reference/fehler/missing_curly_after_property_list/index.html delete mode 100644 files/de/web/javascript/reference/fehler/missing_formal_parameter/index.html delete mode 100644 files/de/web/javascript/reference/fehler/missing_initializer_in_const/index.html delete mode 100644 files/de/web/javascript/reference/fehler/missing_name_after_dot_operator/index.html delete mode 100644 files/de/web/javascript/reference/fehler/missing_parenthesis_after_argument_list/index.html delete mode 100644 files/de/web/javascript/reference/fehler/missing_parenthesis_after_condition/index.html delete mode 100644 files/de/web/javascript/reference/fehler/missing_semicolon_before_statement/index.html delete mode 100644 files/de/web/javascript/reference/fehler/more_arguments_needed/index.html delete mode 100644 files/de/web/javascript/reference/fehler/negative_repetition_count/index.html delete mode 100644 files/de/web/javascript/reference/fehler/no_non-null_object/index.html delete mode 100644 files/de/web/javascript/reference/fehler/no_properties/index.html delete mode 100644 files/de/web/javascript/reference/fehler/no_variable_name/index.html delete mode 100644 files/de/web/javascript/reference/fehler/non_configurable_array_element/index.html delete mode 100644 files/de/web/javascript/reference/fehler/not_a_codepoint/index.html delete mode 100644 files/de/web/javascript/reference/fehler/not_a_constructor/index.html delete mode 100644 files/de/web/javascript/reference/fehler/not_a_function/index.html delete mode 100644 files/de/web/javascript/reference/fehler/not_defined/index.html delete mode 100644 files/de/web/javascript/reference/fehler/precision_range/index.html delete mode 100644 files/de/web/javascript/reference/fehler/property_access_denied/index.html delete mode 100644 files/de/web/javascript/reference/fehler/read-only/index.html delete mode 100644 files/de/web/javascript/reference/fehler/redeclared_parameter/index.html delete mode 100644 files/de/web/javascript/reference/fehler/reduce_of_empty_array_with_no_initial_value/index.html delete mode 100644 files/de/web/javascript/reference/fehler/reserved_identifier/index.html delete mode 100644 files/de/web/javascript/reference/fehler/resulting_string_too_large/index.html delete mode 100644 files/de/web/javascript/reference/fehler/stmt_after_return/index.html delete mode 100644 files/de/web/javascript/reference/fehler/strict_non_simple_params/index.html delete mode 100644 files/de/web/javascript/reference/fehler/too_much_recursion/index.html delete mode 100644 files/de/web/javascript/reference/fehler/typed_array_invalid_arguments/index.html delete mode 100644 files/de/web/javascript/reference/fehler/undeclared_var/index.html delete mode 100644 files/de/web/javascript/reference/fehler/undefined_prop/index.html delete mode 100644 files/de/web/javascript/reference/fehler/unexpected_token/index.html delete mode 100644 files/de/web/javascript/reference/fehler/unexpected_type/index.html delete mode 100644 files/de/web/javascript/reference/fehler/unnamed_function_statement/index.html delete mode 100644 files/de/web/javascript/reference/fehler/unterminated_string_literal/index.html delete mode 100644 files/de/web/javascript/reference/fehler/var_hides_argument/index.html create mode 100644 files/de/web/javascript/reference/functions/arrow_functions/index.html create mode 100644 files/de/web/javascript/reference/functions/method_definitions/index.html delete mode 100644 files/de/web/javascript/reference/functions/methoden_definitionen/index.html delete mode 100644 files/de/web/javascript/reference/functions/pfeilfunktionen/index.html delete mode 100644 files/de/web/javascript/reference/functions/rest_parameter/index.html create mode 100644 files/de/web/javascript/reference/functions/rest_parameters/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/array/prototypen/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/arraybuffer/prototype/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/asyncfunction/prototype/index.html create mode 100644 files/de/web/javascript/reference/global_objects/atomics/notify/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/atomics/wake/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/boolean/prototype/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/dataview/prototype/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/date/prototype/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/error/prototype/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/evalerror/prototype/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/function/prototype/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/generatorfunction/prototype/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/internalerror/prototype/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/intl/collator/prototype/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/intl/datetimeformat/prototype/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/intl/numberformat/prototype/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/map/prototype/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/math/math.random/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/random/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/number/prototype/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/object/prototype/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/rangeerror/prototype/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/string/prototype/index.html create mode 100644 files/de/web/javascript/reference/global_objects/string/search/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/string/suchen/index.html create mode 100644 files/de/web/javascript/reference/global_objects/string/trimend/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/string/trimleft/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/string/trimright/index.html create mode 100644 files/de/web/javascript/reference/global_objects/string/trimstart/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/syntaxerror/prototype/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/typeerror/prototype/index.html delete mode 100644 files/de/web/javascript/reference/klassen/constructor/index.html delete mode 100644 files/de/web/javascript/reference/klassen/extends/index.html delete mode 100644 files/de/web/javascript/reference/klassen/index.html delete mode 100644 files/de/web/javascript/reference/klassen/static/index.html delete mode 100644 files/de/web/javascript/reference/operators/bitwise_operatoren/index.html create mode 100644 files/de/web/javascript/reference/operators/decrement/index.html delete mode 100644 files/de/web/javascript/reference/operators/dekrement/index.html create mode 100644 files/de/web/javascript/reference/operators/destructuring_assignment/index.html delete mode 100644 files/de/web/javascript/reference/operators/destrukturierende_zuweisung/index.html create mode 100644 files/de/web/javascript/reference/operators/increment/index.html delete mode 100644 files/de/web/javascript/reference/operators/inkrement/index.html delete mode 100644 files/de/web/javascript/reference/operators/logische_operatoren/index.html delete mode 100644 files/de/web/javascript/reference/operators/modulo/index.html create mode 100644 files/de/web/javascript/reference/operators/object_initializer/index.html delete mode 100644 files/de/web/javascript/reference/operators/objekt_initialisierer/index.html create mode 100644 files/de/web/javascript/reference/operators/optional_chaining/index.html delete mode 100644 files/de/web/javascript/reference/operators/optionale_verkettung/index.html create mode 100644 files/de/web/javascript/reference/operators/remainder/index.html delete mode 100644 files/de/web/javascript/reference/operators/spread_operator/index.html delete mode 100644 files/de/web/javascript/reference/operators/vergleichsoperatoren/index.html delete mode 100644 files/de/web/javascript/reference/operators/zuweisungsoperator/index.html delete mode 100644 files/de/web/javascript/reference/statements/default/index.html create mode 100644 files/de/web/javascript/reference/statements/function/index.html delete mode 100644 files/de/web/javascript/reference/statements/funktion/index.html create mode 100644 files/de/web/javascript/reference/template_literals/index.html delete mode 100644 files/de/web/javascript/reference/template_strings/index.html delete mode 100644 files/de/web/javascript/reference/veraltete_und_abgeschaffte_features/index.html delete mode 100644 files/de/web/javascript/reference/veraltete_und_abgeschaffte_features/the_legacy_iterator_protocol/index.html delete mode 100644 files/de/web/javascript/speicherverwaltung/index.html delete mode 100644 files/de/web/javascript/vergleiche_auf_gleichheit_und_deren_verwendung/index.html create mode 100644 files/de/web/mathml/attribute/values/index.html delete mode 100644 files/de/web/mathml/attribute/werte/index.html delete mode 100644 files/de/web/mathml/beispiele/index.html delete mode 100644 files/de/web/mathml/beispiele/mathml_satz_des_pythagoras/index.html delete mode 100644 files/de/web/mathml/beispiele/quadratische_gleichung/index.html create mode 100644 files/de/web/mathml/examples/deriving_the_quadratic_formula/index.html create mode 100644 files/de/web/mathml/examples/index.html create mode 100644 files/de/web/mathml/examples/mathml_pythagorean_theorem/index.html create mode 100644 files/de/web/opensearch/index.html delete mode 100644 files/de/web/security/public_key_pinning/index.html delete mode 100644 "files/de/web/svg/tutorial/einf\303\274hrung/index.html" create mode 100644 files/de/web/svg/tutorial/introduction/index.html create mode 100644 files/de/web/svg/tutorial/paths/index.html delete mode 100644 files/de/web/svg/tutorial/pfade/index.html create mode 100644 files/de/web/svg/tutorial/svg_fonts/index.html delete mode 100644 files/de/web/svg/tutorial/svg_schriftarten/index.html delete mode 100644 files/de/web/web_components/custom_elements/index.html delete mode 100644 files/de/web/webapi/index.html delete mode 100644 files/de/web/webapi/verwenden_von_geolocation/index.html delete mode 100644 "files/de/web/xml/xml_einf\303\274hrung/index.html" create mode 100644 files/de/web/xml/xml_introduction/index.html create mode 100644 files/de/web/xpath/introduction_to_using_xpath_in_javascript/index.html (limited to 'files/de/web') diff --git a/files/de/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html b/files/de/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html new file mode 100644 index 0000000000..3aa0530a35 --- /dev/null +++ b/files/de/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html @@ -0,0 +1,232 @@ +--- +title: Übersicht zu barrierefreien Web-Applikationen und Komponenten +slug: Web/Barrierefreiheit/An_overview_of_accessible_web_applications_and_widgets +tags: + - ARIA + - Accessibility + - Guide + - Handbuch + - Komponente + - Web apps +translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets +--- +

Das Web entwickelt sich weiter: Statische seitenbasierte Websites werden zunehmend durch dynamische, desktopartige Web-Applikationen ersetzt, die mit JavaScript und AJAX arbeiten. Designer erstellen allein durch die Kombination von JavaScript, HTML und CSS beeindruckende neue Benutzeroberflächen und Steuerungsmechanismen. Dieser Wandel hat das Potential, durch responsives Design die Benutzerfreundlichkeit enorm zu verbessern, doch besteht für viele Benutzer die Gefahr wegen Zugänglichkeitsbarrieren ausgeschlossen zu werden. JavaScript hat keinen sehr guten Ruf, was die Barrierefreiheit anbelangt, da JavaScript-Techniken oft Probleme in Kombination mit Unterstützungstechnologie wie z.B. Screenreadern verursachen. Es gibt jedoch andere Möglichkeiten, dynamische Oberflächen zu erstellen, damit diese auch für Menschen mit Behinderungen ohne Einschränkungen benutzbar sind.

+ +

Das Problem

+ +

Die meisten JavaScript-Toolkits stellen eine Bibliothek für clientseitige Komponenten bereit, welche den Benutzeroberflächen von bekannten Desktopumgebungen nachempfunden sind. Slider, Menüleisten, Dateisystem-Bäume usw. lassen sich mit einer Kombination von JavaScript, CSS und HTML erstellen. In der HTML4-Spezifikation werden keine Tags festgelegt, welche diese Komponenten semantisch beschreiben und Entwickler greifen daher üblicherweise auf Tags wie <div> und <span> zurück. Die so entwickelten Oberflächen sehen Desktop-Applikation sehr ähnlich, enthalten jedoch in der Regel nicht genügend semantische Informationen, um die korrekte Funktion unterstützender Technologie zu gewährleisten. So können dynamische Inhalte einer Webseite von Benutzern, die z.B. eine Website (aus welchen Gründen auch immer) nicht sehen können, nicht vollständlig erfasst werden. Börsenticker, Updates von Twitter-Feeds, Fortschrittsanzeigen und ähnliche Komponenten manipulieren das DOM auf eine Weise, die von Unterstützungstechnologie nicht erkannt werden kann. An dieser Stelle kommt ARIA zum Einsatz.

+ +

Beispiel 1: Markup für eine Tabs-Komponente mit ARIA-Labeln. Im Markup sind keine Informationen enthalten, welche die Form und Funktion der Komponente beschreiben.

+ +
<!-- Dies ist eine Komponente für Tabs. Wie könnten Sie das wissen, würden sie nur das Markup betrachten? -->
+<ol>
+  <li id="ch1Tab">
+    <a href="#ch1Panel">Chapter 1</a>
+  </li>
+  <li id="ch2Tab">
+    <a href="#ch2Panel">Chapter 2</a>
+  </li>
+  <li id="quizTab">
+    <a href="#quizPanel">Quiz</a>
+  </li>
+</ol>
+
+<div>
+  <div id="ch1Panel">Chapter 1 content goes here</div>
+  <div id="ch2Panel">Chapter 2 content goes here</div>
+  <div id="quizPanel">Quiz content goes here</div>
+</div>
+ +

Beispiel 2: Die Tabs-Komponente könnte z.B. wie folgt aussehen. Bei der visuellen Betrachtung lässt sich dies erkennen, es gibt jedoch keine maschinenlesbare Beschreibungen für Unterstützungstechnologie.
+ Screenshot of the tabs widget

+ +

ARIA

+ +

WAI-ARIA, die Spezifikation für Accessible Rich Internet Applications der Web Accessibility Initiative des W3C beschreibt, wie fehlende semantischen Informationen hinzugefügt werden können, die für das Erfassen der Inhalte bei der Benutzung von Unterstützungstechnologie, wie z.B. Screen Readern, benötigt werden. ARIA ermöglicht Entwicklern, ihre Komponenten genauer zu beschreiben, indem dem Markup spezielle Attribute hinzugefügt werden. ARIA wurde entwickelt, um die Lücke zwischen Standard-HTML-Tags und desktopartigen Komponenten von dynamischen Web-Applikationen zu schließen und legt Rollen- und Zustansbeschreibungen für verbreitete UI-Komponenten fest.

+ +

Die ARIA-Spezifikation beschreibt drei verschiedene Arten von Attributen: Rollen, Zustände und Eigenschaften. Rollen werden Komponenten zugewiesen, die bei HTML4 nicht vorhanden sind, wie z.B. Slider, Menüleisten, Tabs und Dialoge. Eigenschaften beschreiben Charakteristiken dieser Komponenten, wie z.B. ob sie per Drag & Drop ziehbar sind, ein benötigtes Element besitzen oder ein Popup mit ihnen verbunden ist. Zustände beschreiben den aktuellen Interaktionsstatus eines Elements - so wird der Unterstützungstechnologie mitgeteilt, ob das Element gerade beschäftigt, deaktiviert, selektiert oder versteckt ist.

+ +

ARIA-Attribute sind dafür geschaffen, automatisch vom Browser interpretiert und für die nativen Barrierefreiheit-APIs des jeweiligen Betriebssystems übersetzt zu werden. Wenn ARIA vorhanden ist, kann die Unterstützungstechnologie JavaScript-Komponenten erkennen und mit diesen interagieren, auf dieselbe Weise wie bei Desktop-Software. Hierdurch kann eine konsistentere Benutzerführung ermöglicht werden, als noch bei älteren Generationen von Web-Applkationen, da Benutzer von Unterstützungstechnologie auch bei webbasierten Applikationen auf ihre Kenntnisse über Desktop-Software zurückgreifen können.

+ +

Beispiel 3: Markup für die Tabs-Komponente mit hinzugefügten ARIA-Attributen.

+ +
<!-- Durch die zugeteilte Rolle sind die Tabs erkennbar! -->
+<!-- role-Attribute wurden der Liste und den einzelnen Elementen hinzugefügt. -->
+<ol role="tablist">
+  <li id="ch1Tab" role="tab">
+    <a href="#ch1Panel">Chapter 1</a>
+  </li>
+  <li id="ch2Tab" role="tab">
+    <a href="#ch2Panel">Chapter 2</a>
+  </li>
+  <li id="quizTab" role="tab">
+    <a href="#quizPanel">Quiz</a>
+  </li>
+</ol>
+
+<div>
+  <!-- Beachten Sie die Attribute 'role' und 'aria-labelledby', welche die Tab-Panels beschreiben. -->
+  <div id="ch1Panel" role=”tabpanel” aria-labelledby="ch1Tab">Chapter 1 content goes here</div>
+  <div id="ch2Panel" role=”tabpanel” aria-labelledby="ch2Tab">Chapter 2 content goes here</div>
+  <div id="quizPanel" role=”tabpanel” aria-labelledby="quizTab">Quiz content goes here</div>
+</div>
+
+ +

ARIA wird von allen aktuellen Versionen der bekannten Browser unterstützt, einschließlich Firefox, Safari, Opera, Chrome und Internet Explorer. Viele Unterstützungstechnologien, wie z.B. die Open-Source-Screenreader NVDA und Orca, unterstützen ARIA ebenfalls. Auch JavaScript-Biblitheken wie jQuery UI, YUI, Google Closure und Dojo Dijit setzen ARIA-Markup ein.

+ +

Darstellungänderungen

+ +

Dynamische Änderungen der Darstellung sind zum Beispiel die Veränderung der Elementeigenschaften mit CSS (wie z.B. ein roter Rand um ein Feld, das fehlerhafte Daten enthält oder eine Farbänderung bei einer aktivierten Checkbox) oder das Anzeigen und Verstecken von Inhalten.

+ +

Zustandsänderungen

+ +

ARIA stellt Attribute zur Deklaration des aktuellen Zustands von Komponenten bereit. Die Beispiele in dieser Einführung werden die folgenden Attribute verwendet (es gibt allerdings noch einige mehr):

+ + + +

(Eine komplette Liste aller Zustände finden Sie in der Liste zu ARIA-Zuständen und Eigenschaften)

+ +

Entwickler sollten ARIA-Zustände einsetzen, um den Zustand von Komponenten zu deklarieren und mit CSS-Attribut-Selektoren die visuelle Darstellung je nach Zustand entsprechend verändern (anstatt per Skript den Klassennamen des Elements zu ändern).

+ +

Die Website der Open Ajax Alliance stellt Beispiel zu CSS-Attributseletoren in Verbindung mit ARIA bereit. Das Beispiel zeigt die Oberfläche eines WYSIWYG-Editors mit einem dynamischen Menü-System. Elemente, die gerade selektiert sind, unterscheiden sich visuell von anderen Elementen. Relevant sind hier besonders die unten beschriebenen Teile.

+ +

Bei diesem Beispiel wird für des Menüs der HTML-Code aus Beispiel 1a verwendet. In Zeile 7 und 13 wird die Eigenschaft aria-checked eingesetzt, um den Zustand der Selektion anzuzeigen.

+ +

Beispiel 1a. HTML für ein selektierbares Menü (übernommen von http://www.oaa-accessibility.org/example/25/).

+ +
<ul id="fontMenu" class="menu" role="menu" aria-hidden="true">
+  <li id="sans-serif"
+      class="menu-item"
+      role="menuitemradio"
+      tabindex="-1"
+      aria-controls="st1"
+      aria-checked="true">Sans-serif</li>
+  <li id="serif"
+      class="menu-item"
+      role="menuitemradio"
+      tabindex="-1"
+      aria-controls="st1"
+      aria-checked="false">Serif</li>
+  ...
+
+ +

Für die Änderung der visuellen Darstellung des selektierten Elements wird der CSS-Code aus Beispiel 1b verwendet. Beachten Sie, dass keine Klassennamen benutzt werden, einzig der Zustand des aria-checked-Attribute in Zeile 1 entscheidet also über die Darstellung des Elements.

+ +

Beispiel 1b. Attribute-basierte Selektoren zum Anzeigen des Zustands (übernommen von http://www.oaa-accessibility.org/example/25/).

+ +
li[aria-checked="true"] {
+  font-weight: bold;
+  background-image: url('images/dot.png');
+  background-repeat: no-repeat;
+  background-position: 5px 10px;
+}
+
+ +

Zur Aktualisierung der Eigenschaft aria-checked wird der JavaScript-Code aus Beispiel 1c verwendet. Auch das Skript ändert nur den Wert der Attribute (Zeile 3 und 8) und es wird kein Klassenname hinzugefügt oder entfernt.

+ +

Beispiel 1c. JavaScript zur Aktualisierung des Attributs aria-checked (übernommen von http://www.oaa-accessibility.org/example/25/).

+ +
var processMenuChoice = function(item) {
+  // 'check' the selected item
+  item.setAttribute('aria-checked', 'true');
+  // 'un-check' the other menu items
+  var sib = item.parentNode.firstChild;
+  for (; sib; sib = sib.nextSibling ) {
+    if ( sib.nodeType === 1 && sib !== item ) {
+      sib.setAttribute('aria-checked', 'false');
+    }
+  }
+};
+
+ +

Änderung der Sichtbarkeit

+ +

Bei Änderungen der Sichtbarkeit von Elementen (verstecken oder sichtbar machen von Elementen) sollten Entwickler nur den Wert der Eigenschaft aria-hidden verändern. Dabei sollte die oben beschreibene Technik angewendet und CSS (display:none) eingesetzt werden, um das Element zu verstecken.

+ +

Auf der Website der Open Ajax Alliance findet man hierzu ein Beispiel mit einem Tooltip bei dem das Attribut aria-hidden eingesetzt wird, um die Sichtbarkeit des Tooltips zu verändern. Das Beispiel zeigt ein einfaches Formular, bei dem Anweisungen zu den einzelnen Feldern eingeblendet werden. Auf die wichtigsten Details wird im Folgenden genauer eingegangen.

+ +

Beispiel 2a zeigt den HTML-Code für einen Tooltip. In Zeile 9 wird der Zustand von aria-hidden auf true gesetzt.

+ +

Beispiel 2a. HTML für ein Tooltip (übernommen von http://www.oaa-accessibility.org/example/39/).

+ +
<div class="text">
+    <label id="tp1-label" for="first">First Name:</label>
+    <input type="text" id="first" name="first" size="20"
+           aria-labelledby="tp1-label"
+           aria-describedby="tp1"
+           aria-required="false" />
+    <div id="tp1" class="tooltip"
+         role="tooltip"
+         aria-hidden="true">Your first name is a optional</div>
+</div>
+
+ +

Das Beispiel 2b unten zeigt den CSS-Code für das Markup. Wie schon beim ersten Beispiel wird auch hier kein Klassenname benutzt, sondern nur der Wert der Attribute aria-hidden geändert.

+ +

Beispiel 2b. Attributbasierte Selektoren zur Anzeige des Zustands (übernommen von
+ http://www.oaa-accessibility.org/example/39/).

+ +
div.tooltip[aria-hidden="true"] {
+  display: none;
+}
+
+ +

Beispiel 2c zeigt den JavaScript-Code zur Aktulisierung der Eigenschaft aria-hidden. Wieder wird per Skript nur die Attribute aria-hidden in Zeile 2 verändert und kein Klassenname hinzugefügt oder entfernt.

+ +

Beispiel 2c. JavaScript zur Aktualisierung des Attributs aria-checked (übernommen von http://www.oaa-accessibility.org/example/39/).

+ +
var showTip = function(el) {
+  el.setAttribute('aria-hidden', 'false');
+}
+ +

Role changes

+ +
+
In Bearbeitung
+
+ +

Mit ARIA können Entwicklern solchen Elementen, bei denen wichtige semantische Informationen fehlen, eine Rolle zuweisen. Wenn z.B. eine ungeordnete Liste für die Erstellung eines Menüs benutzt wird, sollte dem ul-Elemente die Rolle menubar zugeteilt werden und jedem untergeordneten li-Listenelement die Rolle menuitem.

+ +

Die Rolle eines Elements sollte nicht verändert werden. Stattdessen sollte das bestehende Element entfernt und ein neues Element mit neuer Rolle hinzugefügt werden.

+ +

Wenn man z.B. eine Texteditor-Komponente mit einem Ansichtsmodus und einem Editiermodus erstellen möchte, dann kommt ein Entwickler vielleicht auf die Idee für das Textfeld ein schreibgeschütztes input-Element einzusetzen, diesem für den Ansichtsmodus die Rolle button zuzuweisen und beim Wechsel in den Editiermodus die Rolle und den Schreibschutz zu entfernen (da input-Elemente eigene Rollen zugewiesen werden können).

+ +

Diese Vorgehensweise ist keine gute Idee. Stattdessen sollte für den Ansichtsmodus ein anderes Element, wie z.B. ein div- oder span-Element mit der Rolle button verwendet werden und für den Editiermodus ein input-Textelement.

+ +

Asynchrone Inhaltsänderungen

+ +
In Bearbeitung. Siehe auch Live Regions
+ +

Tastaturnavigation

+ +

Von Entwicklern wird oft wenig darauf geachtet, ob Oberflächenkomponenten auch mit der Tastatur bedienbar sind. Damit die Kompnenten für möglichst viele Benutzer zugänglich sind, sollte für alle Funktionen der Komponenten einer Web-Applikation überprüft werden, ob sie auch ausschließlich mit Tastatur und ohne Maus bedient werden können. Für die praktische Umsetzung sollten die üblichen Konventionen für Desktop-Komponenten befolgt werden, also die Benutzung von Tab-, Enter-, Leertaste und Pfeiltasten ermöglicht werden.

+ +

Traditionell ist die Tastaturnavigation im Web auf die Tab-Taste begrenzt. Der Nutzer drückt Tab um jeden Link, Button oder Formular auf der Seite nacheinander zu fukussieren, Shift-Tab um zum letzten Element zu springen. Das ist eine eindimensionale Form der Navigation—vor und zurück, ein Element pro Schritt. Auf sehr umfangreichen Seiten muss ein Nutzer der Tastaturnavigation oft dutzende Male die Tab-Taste drücken, um zu dem gewünschten Bereich zu kommen. Die Implementierung von Navigationskonventionen von Desktop-Programmen im Web hat das Potential die Navigation für viele Nutzer zu beschleunigen.

+ +

Hier eine Zusammenfassung wie Tastaturnavigation in einer ARIA-unterstützten Web-Applikation funktionieren sollte:

+ + + +

In dem Beispiel der Tab-Komponente oben sollte der Nutzer also in der Lage sein mit den Tab- und Shift-Tab Tasten in und aus dem Komponenten-Container (<ol> in unserem Beispiel) zu navigieren. Sobald der Fokus innerhalb des Containers liegt, sollten die Pfeiltasten dem Nutzer erlauben zwischen den einzelnen Tabs (die <li> Elemente) zu navigieren. Ab hier variieren die Konventionen je nach Plattform. Unter Windows wird der nächste Tab automatisch aktivieren, wenn der Nutzer die Pfeiltasten drückt. Unter macOS, kann der Nutzer entweder die Enter- oder die Leertaste drücken, um den nächsten Tab zu aktivieren. Ein umfangreiches Tutorial zur Erstellung von Tastaturnavigation in JavaScript Komponenten beschreibt wie man diese Funktionsweise mit JavaScript implementieren kann.

+ +

Für mehr Details zu Koventionen bei desktopartiger Tastaturnavigation gibt es einen umfangreichen DHTML style guide. Dieser stellt einen Überblick darüber bereit, wie Tastaturnavigation in jeder von ARIA unterstützten Komponente funktionieren sollte. Die W3C bietet ebenfalls ein hilfreiches ARIA Best Practices Dokument, das Konventionen für Tastaturnavigation und Shortcuts für eine Vielzahl von Komponenten beinhaltet.

+ + + + diff --git a/files/de/web/accessibility/aria/aria_live_regions/index.html b/files/de/web/accessibility/aria/aria_live_regions/index.html new file mode 100644 index 0000000000..4e1f22e0b5 --- /dev/null +++ b/files/de/web/accessibility/aria/aria_live_regions/index.html @@ -0,0 +1,89 @@ +--- +title: ARIA Live-Regionen +slug: Web/Barrierefreiheit/ARIA/ARIA_Live_Regionen +translation_of: Web/Accessibility/ARIA/ARIA_Live_Regions +--- +

Einführung

+

In der Vergangenheit konnten Änderungen bei Webseiten nur so von einem Screenreader kommuniziert werden, dass der komplette Inhalt vorgelesen oder nur sehr wenig bis gar nichts über die Inhaltsänderungen berichtet wurde. Dies führte dazu, dass einige oder sogar alle Informationen unzugänglich waren. Bisher waren Screenreader nicht in der Lage, diese Situation zu verbessern, weil es keine standardisierte Methode gab, um Screenreader per Markup über Veränderungen zu informieren. ARIA-Live-Regionen sollen diese Lücke schließen. Über Live-Regionen erhalten Screenreader Anweisungen, wonach entschieden werden kann, ob und wann Benutzer unterbrochen werden sollen, um sie über Veränderungen des Inhalts in Kenntnis zu setzen.

+

Einfache Live-Regionen

+

 

+

Dynamische Inhalte, die ohne das Neuladen einer Webseite nachgeladen werden, sind im Allgemeinen entweder eine Region oder eine Komponente. Einfache Inhaltsänderungen, die nicht interaktiv sind, sollten als Live-Regionen gekennzeichnet werden. In der folgenden Liste werden die unterschiedlichen Eigenschaften für ARIA-Live-Regionen mit einer Beschreibung aufgeführt.

+
    +
  1. aria-live: Mit aria-live=POLITENESS_SETTING wird die Priorität für die Behandlung von Aktualisierungen von Live-Regionen festgelegt - die möglichen Werte für diese Einstellung sind: off/polite/assertive, wobei "off" der Default-Wert ist. Diese Eigenschaft ist mit Abstand die Wichtigste.
    2. +
  2. +

    aria-controls: Mit aria-controls=[IDLIST] wird ein Steuerungselement mit der Region verknüpft, die es kontrollieren soll. Regionen werden ähnlich wie div-Elemente anhand einer ID identifiziert. Wenn mehrere Regionen mit einer Steuerung verknüpft werden sollen, können diese einfach getrennt durch ein Leerzeichen angegeben werden, z.B. aria-controls="myRegionID1 myRegionsID2".

    +
    + Not known if the aria-controls aspect of live regions is implemented in current ATs, or which. Needs research.
    +
    3. +
+

In der Regel wird ausschließlich aria-live="polite" verwendet. Alle Regionen, die mit Informationen aktualisiert werden, die zwar wichtig sind, jedoch nicht so dringend, dass der Benutzer sofort unterbrochen und darüber informiert werden sollte, sollten dieses Attribut erhalten. Der Screenreader setzt den Benutzer dann über die Änderungen in Kenntnis, sobald er nicht mehr beschäftigt ist.

+

Regionen, die unrelevant sind oder z.B. wegen ständiger Aktualisierungen störend wirken könnten, sollten mit aria-live="off" stillgeschaltet werden.

+

Einfaches Einsatzszenario: Eine Combobox aktualisiert nützliche On-Screen-Informationen

+

Angenommen eine Website, die Informationen über Vogelarten bereitstellt, bietet ein Dropdown-Menü zur Auswahl einer der Vogelarten an und bei der Auswahl werden in einer Region Informationen über diese Vogelart angezeigt.

+

<select size="1" id="bird-selector" aria-controls="bird-info"><option> .... </select>

+

<div role="region" id="bird-info" aria-live="polite">

+

Sobald der Benutzer eine Vogelart selektiert, wird die Information vorgelesen. Da für die Region "polite" eingestellt ist, wartet der Screenreader, bis der Benutzer nicht mehr beschäftigt ist. Folglich wird bei der Bewegung nach unten in der Liste nicht jede Vogelart vorgelesen, sondern nur die ausgewählte.

+

Bevorzugung von spezialisierten Live-Region-Rollen

+

Für die folgenden bekannten vordefinierten Situationen sollte bevorzugt eine entsprechende "Live-Region-Rolle" eingesetzt werden:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
RolleBeschreibungHinweise zur Kompatibilität
logChat, Fehler, Spiel oder andere LogsZur Maximierung der Kompatiblität sollte ein redundantes aria-live="polite" hinzugefügt werden, wenn diese Rolle verwendet wird.
statusEine Statusleiste oder Bildschirmbereich, der einen aktualisierbaren Status anzeigt. Screenreader-Benutzer können mit einem speziellen Befehl den aktuellen Status abfragen.Zur Maximierung der Kompatiblität sollte ein redundantes aria-live="polite" hinzugefügt werden, wenn diese Rolle verwendet wird.
alertEine Fehler- oder Warnungmeldung, die auf dem Bildschirm eingeblendet wird. Alarmmeldungen sind  insbesondere bei der clentseitige Validierungsmeldungen für Benutzer wichtig. (TBD: link to ARIA form tutorial with aria info)Zur Maximierung der Kompatiblität sollte ein redundantes aria-live="assertive" hinzugefügt werden, wenn diese Rolle verwendet wird.  (TBD: check to see if this is necessary or causes double speaking issues.)
progressbarEine Kombination aus einer Komponente und einer Live-Region.  Verwenden Sie diese Rolle mit aria-valuemin, aria-valuenow und aria-valuemax. (TBD: add more info here). 
marqueeFür scrollenden Text, wie z.B. ein Börsenticker. 
timerJede Art von Zeitschaltung oder Uhr, wie z.B. ein Countdown-Timer oder eine Stoppuhr. 
+

Fortgeschrittene Live-Regionen

+

(TBD: what is supported where?)

+
    +
  1. aria-atomic: Das Attribut aria-atomic=BOOLEAN wird eingesetzt, um festzulegen, ob der Screenreader die Live-Regionen als Ganzes präsentieren soll, auch wenn sich nur ein Teil dieser Region ändert. Die möglichen Werte sind false oder true, wobei false der Default-Wert ist.
    2. +
  2. aria-relevant: Mit aria-relevant=[LIST_OF_CHANGES] wird bestimmt, welche Art von Veränderungen relevant für eine Live-Region sind - die möglichen Werte sind additions/removals/text/all. Der Default-Wert ist "additions text".
    3. +
  3. aria-labelledby: Mit aria-labelledby=[IDLIST] wird eine Region mit seinen Labels verknüpft. Die Technik ist dieselbe wie bei aria-controls, nur dass hier Labels statt Steuerungselemente mit der Region verknüpft werden. Mehrere Bezeichner können durch Leerzeichen getrennt angegeben werden.
    4. +
  4. aria-describedby: Das Attribut aria-describedby=[IDLIST] wird verwendet, um eine Region mit einer Beschreibung zu verknüpfen. Auch hier ist die Technik dieselbe, wie bei aria-controls, nur dass eine Beschreibung statt einer Steuerung verknüpft wird. Mehrere Bezeichner für Beschreibungen können durch Leerzeichen getrennt angegeben werden.
    5. +
+

Fortgeschrittenes Einsatzszenario: Roster

+

Auf einer Chat-Webseite soll eine Liste von Benutzern angezeigt werden, die zum aktuellen Zeitpunkt eingeloggt sind. Der Status der Benutzer soll dabei dynamisch (ohne Aktualisierung der Webseite) auf dem neusten Stand gehalten werden.

+
<ul id="roster" aria-live="polite" aria-relevant="additions removals">
+	<!-- Hier wird JavaScript zum Hinzufügen und Entfernen von Benutzern eingesetzt -->
+</ul>
+
+

Zusammenfassende Beschreibung von ARIA-Live-Eigenschaften:

+ +

TBD: Realistic use case for aria-atomic="true"

diff --git a/files/de/web/accessibility/aria/aria_techniques/index.html b/files/de/web/accessibility/aria/aria_techniques/index.html new file mode 100644 index 0000000000..85059df7a2 --- /dev/null +++ b/files/de/web/accessibility/aria/aria_techniques/index.html @@ -0,0 +1,168 @@ +--- +title: ARIA Techniken +slug: Web/Barrierefreiheit/ARIA/ARIA_Techniken +tags: + - ARIA + - Accessibility +translation_of: Web/Accessibility/ARIA/ARIA_Techniques +--- +

 

+ +

 Rollen

+ +

 

+ +

Widget Rollen

+ +
+ +
+ +

Zusammengesetzte Rollen

+ +

Diese Techniken beschreiben jede zusammengesetzte Rolle, sowie deren benötigte und optinale Kind-Rollen.

+ + +
+ +
+ +

Dokumentstruktur Rollen

+ +
+ +
+ +

Grenzrollen

+ +
+ +
+ +

Zustände und Eigenschaften

+ +

 

+ +

Widget Eigenschaften

+ +
+ +
+ +

Live Region Attribute

+ +
+ +
+ +

Drag & drop Attribute

+ +
+ +
+ +

Beziehungs Attribute

+ +
+ +
diff --git a/files/de/web/accessibility/aria/index.html b/files/de/web/accessibility/aria/index.html new file mode 100644 index 0000000000..c282ef8f95 --- /dev/null +++ b/files/de/web/accessibility/aria/index.html @@ -0,0 +1,137 @@ +--- +title: ARIA +slug: Web/Barrierefreiheit/ARIA +translation_of: Web/Accessibility/ARIA +--- +

Accessible Rich Internet Applications (ARIA) ermöglichen Webentwicklern Webinhalte und Web-Applikationen (insbesondere solche mit Ajax und JavaScript) besser zugänglich für Menschen mit Behinderungen und anderen Einschränkungen zu machen. Zum Beispiel lassen sich mit ARIA Navigations-Landmarken, JavaScript-Widgets, Formular-Hinweise und Fehlermeldungen hinzufügen und Live-Content-Aktualisierungen barrierefrei gestalten.

+ +

ARIA ist ein Satz von speziellen Attributen, die beliebigem Markup-Content hinzugefügt werden können, wurde jedoch vorwiegend für HTML entwickelt. Das Attribut role definiert, um welche Art von Element es sich bei einem Objekt handelt (z. B. article, alert, oder slider). Andere ARIA-Attribute erweitern den Inhalt einer Website um nützliche Hilfsfunktionen, wie z. B. Formularbeschreibungen und Anzeigen für den aktuellen Wert bei Fortschrittsanzeigen.

+ +

ARIA ist bei den meisten Browsern und Screen-Readern implementiert. Die Implementierungen weichen jedoch teilweise voneinander ab. Bei älterer Technologie ist die Unterstützung oft nicht vollständig (oder gar nicht vorhanden), daher sollte am besten "sicheres" ARIA eingesetzt werden, das bei schlechter Unterstützung keine Probleme verursacht, oder der Benutzer aufgefordert werden, neuere Technologie zu benutzen.

+ +

Bitte helfen Sie uns, ARIA zu verbessern! Falls sie nicht genügend Zeit haben, fügen sie ihre Vorschläge einfach auf der Diskussionsseite hinzu.

+ + + + + + + + + + + + + +
+

Einführung in ARIA

+ +
+
Einführung in ARIA
+
Eine schnelle Einführung, die beschreibt, wie dynamische Inhalte mit ARIA barrierefrei gestaltet werden können. Lesen Sie auch die klassische Einführung von Gez Lemon von 2008.
+
Web-Applikationen und ARIA-FAQ
+
Antworten für die häufigsten Fragen rund um WAI-ARIA und warum es nötig ist, Web-Applikationen barrierefrei zu gestalten.
+
Videos von Screen-Readern mit ARIA
+
Schauen sie sich vereinfachte Beispiele und Praxisbeispiele zu ARIA an. Auch "davor und danach"-Beispiele sind hier zu finden.
+
Benutzung von ARIA mit HTML
+
Hier finden Sie praxisorientierte Empfehlungen für Entwickler. Zum Beispiel welche Attribute mit welchen HTML-Elementen eingesetzt werden sollten.
+
+ +

Einfache Verbesserungen mit ARIA

+ +
+
Enhancing Page Navigation with ARIA Landmarks
+
Eine Einführung zur Verbesserung der Seitennavigation für Benutzer von Screen Readern mit ARIA-Landmarken. Lesen Sie auch den Artikel zur Impelemtierung von ARIA-Landmarken und schauen Sie sich bereits existierende Websites mit ARIA-Landmarken an (letze Aktualisierung: Juli 2011).
+
Verbesserung der Zugänglichkeit von Formularen
+
ARIA ist nicht nur für dynamische Inhalte! Lernen Sie, wie die Zugänglichkeit von HTML-Formularen mit Hilfe von ARIA-Attributen verbessert werden kann.
+
Live-Regions (work-in-progress)
+
Live-Regionen liefern Screen Readern Hinweise über den Umgang mit Inhaltsänderungen bei Webseiten.
+
Using ARIA Live Regions to Announce Content Changes
+
Eine kurze Übersicht über Live-Regionen von den Machern  der Screen-Reader Software JAWS. Live Regions werden auch von NVDA in Firefox und VoiceOver bei Safari unterstüzt (ab OS X Lion und iOS 5).
+
+ +

ARIA für JavaScript-Widgets

+ +
+
Tastaturgesteuerte JavaScript-Komponenten
+
Der erste Schritt bei der Erstellung eines berrierefreien JavaScript-Widget ist, es mit der Tastatur navigierbar zu machen. Deiser Artikel zeigt die Arbeitsschritte auf, die hierfür nötig sind. Der Artikel von Yahoo! zum Focus Management liefert ebenfalls eine gute Beschreibung.
+
Style-Guide für die Tastaturnavigation
+
Es stellt eine Herausforderung bei ARIA dar, Entwickler zur konsistenten Implementierung zu bringen, was für die Benutzer natürlich am besten wäre. Dieser Style-Guide beschreibt die Tastaturfunktionen bei bekannten Widgets.
+
+ +

Weitere Informationen zu ARIA

+ +
+
Widget-Techniken, Tutorials und Beispiele
+
Benötigen sie einen Slider, ein Menü oder eine andere Art von Widget? Hier finden Sie weiterführende Informationen.
+
ARIA-erweiterte JavaScript UI-Libraries
+
Falls Sie ein neues Projekt starten, setzen Sie eine UI-Widget-Llibrary mit ARIA-Unterstützung ein!  Achtung: Der Artikel ist von 2009 - der Inhalt sollte auf eine MDN-Seite kopiert werden, damit er aktualisiert werden kann.
+
Barrierefreiheit von HTML5 und Rich Internet Applications - CSUN 2012 Workshop Materialen
+
Beinhaltet auch Präsentationen und Beispiele.
+
+ 		+

Mailing-Liste

+ +
+
Free ARIA Google Group
+
Hier können Fragen zu ARIA gestellt und Vorschläge gemacht werden, um diese ARIA-Dokumentation zu verbessern.
+
+ +

Blogs

+ +

ARIA-Information von Blogs sind meist schnell veraltet. Dennoch gibt es einige hilfreiche Informationen von anderen Entwicklern, die mit ARIA arbeiten.

+ +

Paciello Group

+ +

Accessible Culture

+ +

Yahoo! Accessibility

+ +

Fehler melden

+ +

Schreiben Sie ARIA-Fehlerberichte zu Browsern, Screen-Readern und JavaScript-Libraries.

+ +

Beispiele

+ +
+
Verzeichnis für ARIA-Beispiele
+
Einige Beispieldateien mit Grundstruktur von denen man lernen kann.
+
Beispiele für zugängliche JS-Widget-Libraries
+
Dojo, jQuery, Fluid, YUI
+
+ +
+
Yahoo! Mail
+
Yahoo! hat bei Yahoo! Mail sehr gute Arbeit geleistet. Einer Web-App, die beinahe wie eine native App aussieht und sehr gut funktioniert, wie ein Review über Yahoo! Mail des Screen-Reader-Benutzers Marco Zehe zeigt. Sein Kommentar: "Keep up the good work!".
+
+ +
+
Yahoo! Search
+
Yahoo! hat hier ebenfalls sehr gute Arbeit geleistet, die Möglichkeiten mit ARIA voll ausgeschöpft und die Technik ausführlich dokumentiert. Bei Yahoo! Search kommt eine Kombination von ARIA-Landmarken, Live-Regionen und Widgets zum Einsatz.
+
+ +

Bemühungen zur Standardisierung

+ +
+
Übersicht zu den WAI-ARIA Aktivitäten des W3C
+
Übersicht zu den Bemühungen für die Standardisierung von AI-ARIA der Web Accessibility Initiative (WAI).
+
WAI-ARIA Spezifikation
+
Die Spezifikation des W3C ist als Referenz sehr nützlich. In diesem Stadium unbedingt Kompatibilitätstest durchgeführt werden, da die Implematierungen noch immer voneinader abweichen.
+
WAI-ARIA Authoring Practices
+
Wie bei der WAI-ARIA-Spezifikation des W3C stellen die offiziellen best-practices ein Ideal für die Zukunft dar - den Zeitpunkt, an dem davon ausgegangen werden kann, dass die ARIA-Überstützung bei allen Browsern und Screen-Readern konsistent implemetiert ist. Die W3C-Dokumente erlauben die tiefgehende Einsicht in die Struktur von ARIA.
+
+ Für jetzt gilt, dass Webentwickler, die ARIA implementieren, die Kompatibiliät maximieren sollten und hierfür auf die Dokumentation von Best-Practices und Beispielen zurückgreifen.
+
Open AJAX Accessibility Task Force
+
Die Open AJAX Effort Centers zu Themen wie Entwicklerwerkzeugen, Beispieldateien und automatisierte Tests für ARIA.
+
In der Entwicklung: WCAG 2.0 ARIA Techniken
+
Die Community benötigt einen kompletten Satz von WCAG-Techniken für WAI-ARIA + HTML, damit Organisationen davon ausgehen können, dass ihre ARIA-erweiterten Inhalte WCAG-konform sind. Das ist vor allem dann wichtig, wenn Regulierungen und Vorschriften auf WCAG basieren.
+
+
+ + +
+
Accessibility, AJAX, JavaScript
+
+
+ +

 

diff --git a/files/de/web/accessibility/index.html b/files/de/web/accessibility/index.html new file mode 100644 index 0000000000..417c160fd0 --- /dev/null +++ b/files/de/web/accessibility/index.html @@ -0,0 +1,78 @@ +--- +title: Barrierefreiheit +slug: Web/Barrierefreiheit +tags: + - Accessibility + - Barrierefreiheit +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, 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."

+ +
+
+

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

+
+ + +
+ +

W3C - Accessibility

+ +

See also

+ + + + diff --git a/files/de/web/accessibility/keyboard-navigable_javascript_widgets/index.html b/files/de/web/accessibility/keyboard-navigable_javascript_widgets/index.html new file mode 100644 index 0000000000..2dedfc7aab --- /dev/null +++ b/files/de/web/accessibility/keyboard-navigable_javascript_widgets/index.html @@ -0,0 +1,145 @@ +--- +title: Tastaturgesteuerte JavaScript-Komponenten +slug: Web/Barrierefreiheit/Tastaturgesteuerte_JavaScript_Komponenten +translation_of: Web/Accessibility/Keyboard-navigable_JavaScript_widgets +--- +

Tastaturgesteuerte JavaScript-Komponenten

+

Übersicht

+

Bei der Erstellung von Desktopkomponenten für Web-Applikationen, wie z.B. Menüs, Baumansichten, Richtext-Felder und Tab-Panels kommt in der Regel JavaScript zum Einsatz. Die Komponenten bestehen üblicherweise aus {{ HTMLElement("div") }}- und {{ HTMLElement("span") }}-Elementen, die von Haus aus nicht die gleiche Funktionalität wie echte Desktopkomponenten besitzen. Dieses Dokument beschreibt Techniken, die eingesetzt werden können, um JavaScript-Komponenten über die Tastatur zugänglich zu machen.

+

Benutzung von tabindex

+

Das tabindex-Attribut wurde zu Beginn als Teil von HTML 4 eingeführt, um Entwicklern zu ermöglichen, die Reihenfolge für die Fokussierung von Elementen festzulegen, die vom Benutzer mit der Tastatur angesteuert werden. Das genaue Verhalten von tabindex wurde später etwas abgeändert. Diese Änderungen sind in der HTML 5-Spezifikation beschrieben. Alle bekannten Browser implementieren fortan das neue Design.

+

Die folgende Tabelle beschreibt das Verhalten von tabindex in modernen Browsern:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
tabindex-AttributFokussierbar mit der Maus oder JavaScript über element.focus()Tab-navigierbar
Nicht vorhandenFolgt der Festlegung für das Element für die Plattform ("Ja" bei Formularsteuerungen, Links, etc.).Folgt der Festlegung für das Element für die Plattform.
Negativ (z.B. tabindex="-1")JaNein; Entwickler muss auf Tasteneingaben reagieren und das Element über focus() fokussieren.
Null (z.B. tabindex="0")JaIn der Tab-Ordnung relativ zur Position des Elements im Dokument.
Positiv (z.B. tabindex="33")JaWert von tabindex bestimmt die Position des Elements in der Tab-Ordnung: Im Allgemeinen werden Elemente vor solchen positioniert, bei denen tabindex="0" gesetzt ist oder die von Natur aus per Tab steuerbar sind; Elemente mit kleinere Werten werden vor solchen mit größeren Werten positioniert (ein Element mit tabindex="7" wird z.B. vor tabindex="11" positioniert)
+

Einfache Steuerungen

+

Damit z.B. eine einfache Tab-Komponente über die Tastatur bedient werden kann, wird dem entsprechenden {{ HTMLElement("div") }}- oder {{ HTMLElement("span") }}-Element das tabindex-Attribut hinzugefügt. Beim folgenden Beispiel wird diese Technik für eine Checkbox angewendet, die auf einem span-Element basiert.

+

Beispiel 1: Eine einfache Checkbox-Komponente mit einem Bild, welche um das tabindex="0" erweitert wurde und so auch über die Tastatur gesteuert werden kann.

+
<!-- Ohne die tabindex-Attribute könnten die <span>-Elemente nicht mit der Tastatur fokussiert werden -->
+<div>
+    <span role="checkbox" aria-checked="true" tabindex="0">
+        <img src="checked.gif" role="presentation" alt="" />
+        Include decorative fruit basket
+    </span>
+</div>
+<div>
+    <span role="checkbox" aria-checked="true" tabindex="0">
+        <img src="checked.gif" role="presentation" alt="" />
+        Include singing telegram
+    </span>
+</div>
+<div>
+    <span role="checkbox" aria-checked="false" tabindex="0">
+        <img src="unchecked.gif" role="presentation" alt="" />
+        Require payment before delivery
+    </span>
+</div>
+
+

Gruppieren von Steuerungselementen

+

Für die Gruppierung von Komponenten, wie z.B. Menüs, Tableisten, Grids oder Baumansichten, sollte das Elternelement in die Tab-Ordnung aufgenommen werden (tabindex="0"). Außerdem sollte jede(s) untergeordnete Auswahl/Tab/Zelle/Reihe aus der Tabordnung entfernt werden (tabindex="-1"). Die untergeordneten Elemente sollten vom Benutzer über die Pfeiltasten angesteuert werden können (Eine ausführliche Beschreibung der Tastaturunterstützung, die im Allgemeinen für bestimmte Komponenten erwartet wird, finden Sie im DHTML Style Guide).

+

Beim nächsten Beispiel wird diese Technik bei einer Menüsteuerung eingesetzt. Sobald der Fokus der Tastatur das <ul>-Element erreicht, muss der JavaScript-Entwickler den Fokus programmatisch steuern und auf das Drücken der Pfeiltasten reagieren. Techniken für die Steuerung des Fokus innerhalb von Komponenten, sind im Abschnitt "Steuerung des Fokus innerhalb von Gruppen" weiter unten beschrieben.

+

Beispiel 2: Eine Menüsteuerung bei der mit tabindex die Tastaturnavigation gesteuert wird.

+
<ul id="mb1" tabindex="0">
+  <li id="mb1_menu1" tabindex="-1"> Font
+    <ul id="fontMenu" title="Font" tabindex="-1">
+      <li id="sans-serif" tabindex="-1">Sans-serif</li>
+      <li id="serif" tabindex="-1">Serif</li>
+      <li id="monospace" tabindex="-1">Monospace</li>
+      <li id="fantasy" tabindex="-1">Fantasy</li>
+    </ul>
+  </li>
+  <li id="mb1_menu2" tabindex="-1"> Style
+    <ul id="styleMenu" title="Style" tabindex="-1">
+      <li id="italic" tabindex="-1">Italics</li>
+      <li id="bold" tabindex="-1">Bold</li>
+      <li id="underline" tabindex="-1">Underlined</li>
+    </ul>
+  </li>
+  <li id="mb1_menu3" tabindex="-1"> Justification
+    <ul id="justificationMenu" title="Justication" tabindex="-1">
+      <li id="left" tabindex="-1">Left</li>
+      <li id="center" tabindex="-1">Centered</li>
+      <li id="right" tabindex="-1">Right</li>
+      <li id="justify" tabindex="-1">Justify</li>
+    </ul>
+  </li>
+</ul>
+

Deaktivierte Steuerungen

+

Wenn Sie ein Steuerelement deaktivieren, sollte dieses aus der Tab-Ordnung entfernt werden, indem tabindex="-1" gesetzt wird. Elemente, die Teil einer Komponentengruppe (wie z.B. Menüpunkte in einem Menü) sind, sollten über die Tastatur ansprechbar bleiben.

+

Steuerung des Fokus innerhalb von Gruppen

+

Wenn ein Benutzer den Fokus per Tab von einem Element wegbewegt, sollte der Fokus zu dem Element, das zuvor fokussiert war - z.B. einer Baumkomponente oder Gridzelle - zurückkehren. Es existieren zwei verschiedene Techniken, um dies zu bewirken:

+
    +
  1. Verschiebung von tabindex: Programmatische Bewegung des Fokus
    2. +
  2. aria-activedescendent: Verwaltung eines "virtuellen" Fokus
    3. +
+

Technik 1: Verschiebung von tabindex

+

Setzt man tabindex für das fokussierte Element auf "0", wird das ausgewählte Element innerhalb der Gruppe erneut fokussiert, wenn der Benutzer den Fokus per Tab fortbewegt und dann zu diesem Element zurückkehrt. Beachten Sie, dass bei der Aktualisierung von tabindex auf 0 für des zuvor selektierte Element tabindex="-1" gesetzt werden muss. Diese Technik wird auch verwendet, wenn auf Tastendrücke reagiert und der Fokus programmatisch weiterbewegt wird. Der tabindex wird dann entspechend aktualisiert, um das aktuell fokussierte Element anzuzeigen. Dies lässt sich wie folgt umsetzen:

+

Jeweils ein keydown-Hander wird mit einem Element der Gruppe verknüpft. Wenn der Benutzer eine Pfeiltaste drückt, um ein anderes Element anzusteuern, passiert Folgendes:

+
    +
  1. Das neue Element wird codegesteuert fokussiert.
    2. +
  2. Der tabindex des fokussierten Elements wird auf "0" gesetzt.
    3. +
  3. Der tabindex des zuvor fokussierte Elements wird auf "-1" gesetzt.
    4. +
+

Hier finden Sie ein Beispiel für eine WAI-ARIA Baumansicht bei der diese Technik eingesetzt wird.

+
Tipps
+
Mit element.focus() den Fokus setzen
+

Benutzen Sie nicht die Funktionen createEvent(), initEvent() und dispatchEvent() um ein Element zu fokussieren. DOM-Focus-Events arbeiten nur informell: Sie werden vom System erzeugt, wenn ein Element fokussiert wird, aber nicht verwendet, um den Fokus zu setzen. Greifen Sie stattdessen auf element.focus() zurück.

+
Mit onfocus den Fokus überprüfen
+

Gehen Sie nicht davon aus, dass Fokusänderungen allein über die Tastatur oder Maus initiiert werden: Assistierende Technologien, wie z.B. Screenreader, sind in der Lage den Fokus für jedes fokussierbare Element zu setzen. Benutzen Sie daher onfocus und onblur um Fokusänderungen zu verfolgen.

+

onfocus und onblur können nun mit jedem beliebigen Element verwendet werden. Es existiert jedoch kein Standard-DOM-Interface, um den aktuellen Fokus im Dokument abzufragen. Wenn man den Fokus verfolgen möchte, muss der aktuelle Zustand in einer JavaScript-Variablen hinterlegt werden.

+

Technik 2: aria-activedescendant

+

Bei dieser Technik wird ein einzelner Event-Handler mit der Container-Komponente verknüpft und aria-activedescendant dazu benutzt, um einen "virtuellen" Fokus zu verwalten. (Mehr Informationen über ARIA finden Sie indieser Übersicht).

+

The aria-activedescendant property identifies the ID of the descendent element that currently has the virtual focus. The event handler on the container must respond to key and mouse events by updating the value of aria-activedescendant and ensuring that the current item is styled appropriately (for example, with a border or background color). See the source code of this ARIA radiogroup example for a direct illustration of how this works.

+

Die Eigenschaft aria-activedescendent enthält die ID des untergeordneten Elements, das aktuell fokussiert ist. Der Event-Handler des Containers muss auf Tastatur- und Mauseingaben reagieren, den Wert von aria-activedescendent aktualisieren und sicherstellen, dass die Darstellung des Elements entsprechend angepasst wird (z.B. Rahmen oder Hintergrundfarbe). Ein konkretes Beispiel für diese Technik liefert der Quellcode des ARIA-Radiogruppen-Beispiels.

+
Tipps
+
scrollIntoView
+

Note that the use of this pattern requires the author to ensure that the current focused widget is scrolled into view. You should be able to use the {{ domxref("element.scrollIntoView()") }} function, but we recommend confirming this works for you in your target browsers using the quirksmode test.Bei der Benutzung dieses Musters muss der Entwickler sicherstellen, dass das aktuell fokussierte Element in Sichtweite gescrollt wird. Für diesen Zweck kann die Funktion element.scrollIntoView() eingesetzt werden. Überprüfen Sie jedoch unbedingt mit dem Quirksmode-Test, ob dies für ihre Browser, die unterstützt werden sollen, fehlerfrei funktioniert.

+
Probleme
+ +

Allgemeine Richtlinien

+

Benutzung von onkeydown, um auf Tastendrücke zu reagieren (nicht onkeypress)

+

Der Internet Explorer führt keypress-Events für nicht-alpahnumerische Zeichen nicht aus. Benutzen Sie stattdessen das onkeydown-Event.

+

Tastatur- und Mausbedienung sollte konsistent sein

+

Um sicherzustellen, dass Benutzereingaben unabhängig vom Eingabegerät konstistent sind, sollten Tastatur- und Maus-Eventhandler denselben Code verwenden. Zum Beispiel sollte der Code, womit der tabindex oder das Aussehen festgelegt wird, wenn die Pfeiltasten benutzt werden, auch für die Mausklick-Handler verwendet werden, damit dieselben Änderungen stattfinden.

+

Aktivierung von Elementen per Tastatur

+

Damit die Tastatur für die Aktivierung von Elementen benutzt werden kann, sollte alle Handler, die mit der Mausevents verknüpft sind, auch mit Tastaturevents verknüpft werden. Soll z.B. mit der Enter-Taste ein Element aktiviert werden können, welches über einen Maushandler onclick="doSomething()" mit der Maus verknüpft ist, dann sollte die Funktion doSomething() auch über ein keydown-Event mit der Tastatur verknüpft werden: onkeydown="return event.keyCode != 13 || doSomething();".

+

Verwenden Sie nicht :focus für das Styling (falls Kompatibilität mit IE 7 und ältereren Browsern notwendig)

+

Der Internet Explorer 7 und ältere Versionen unterstützen den Pseudoselektor :focus nicht. Aus diesem Grund sollte er für die Gestaltung von fokussierten Elementen nicht verwendet werden. Stattdessen kann die Darstellung über einen onfucus-Eventhander verändert werden, z.B. indem ein CSS-Style Name dem class-Attribut hinzugefügt wird.

+

Kontinuierliches Anzeigen des Fokus für Elemente mit tabindex="-1", die programmatisch fokussiert werden

+

Der Internet Explorer zeigt die Fokusumrandung für Elemente nicht automatisch an. Die Hervorhebung des fokussierten Elementes muss daher per JavaScript, entweder durch die Änderung der Hintergrundfarbe (z.B. this.style.backgroundColor = "gray") oder Anzeige eines gepunkteten Rahmen (z.B. this.style.border = "1px dotted invert") erfolgen. Entscheiden Sie sich für die zweite Vorgehensweise, sollten die Elementen von Anfang an einen unsichtbaren 1px-Rahmen besitzen, damit sie nicht größer werden, wenn der Rahmen angezeigt wird (Rahmen nehmen Platz in Anspruch und beim IE sind CSS-Outlines nicht implementiert).

+

Verwendete Tastendrücke sollten keine Browserfunktionen auslösen

+

Wenn eine Komponente auf Tastendrücke reagiert, sollte verhindert werden, dass der Browser diese Tastendrücke verarbeitet (z.B. Scrollen mit den Pfeiltasten), indem bei Event-Handlern ein Return-Code angegeben wird. Der Rückgabewert false verhindert, dass das Event an den Browser weitergereicht wird.

+

Hierzu ein Beispiel:

+
<span tabindex="-1" onkeydown="return handleKeyDown();">
+

Gibt die Funktion handleKeyDown() den Wert false zurück, wird das Event übernommen und der Browser so davon abgehalten auf den Tastendruck zu reagieren.

+

Abweichendes Verhalten bei wiederholten Tastendrücken

+

Je nach Betriebssystem kann es leider vorkommen, dass bei wiederholten Tastendrücken onkeydown-Events wiederholt ausgeführt werden oder auch nicht.

diff --git a/files/de/web/api/audiocontext/decodeaudiodata/index.html b/files/de/web/api/audiocontext/decodeaudiodata/index.html deleted file mode 100644 index 32cfda28eb..0000000000 --- a/files/de/web/api/audiocontext/decodeaudiodata/index.html +++ /dev/null @@ -1,218 +0,0 @@ ---- -title: AudioContext.decodeAudioData() -slug: Web/API/AudioContext/decodeAudioData -translation_of: Web/API/BaseAudioContext/decodeAudioData ---- -

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

- -
-

Die Methode decodeAudioData() im Interface {{ domxref("AudioContext") }} wird dazu benutzt um in einem {{ domxref("ArrayBuffer")}} enthaltene Audiodaten asynchron zu dekodieren. Im Normalfall wird der ArrayBuffer mit der  {{domxref("XMLHttpRequest")}} response Eigenschaft befüllt, nachdem der responseType auf arraybuffer gesetzt wurde. Der dekodierte AudioBuffer wird auf die Samplerate des AudioContextes angepasst und anschließend an ein Callback oder Promise weitergegeben.

-
- -

Dies ist die bevorzugte Methode im eine Audioquelle für die Web Audio API aus einem Audiotrack zu generieren.

- -

Syntax

- -

Alte Callbacksyntax:

- -
audioCtx.decodeAudioData(audioData, function(decodedData) {
-  // use the dec​oded data here
-});
- -

Neue Promise basierte Syntax:

- -
audioCtx.decodeAudioData(audioData).then(function(decodedData) {
-  // use the decoded data here
-});
- -

Beispiel

- -

In diesem Abschnitt wird zuerst die ältere Callback basierte Syntax und anschließend die neue Promise basierte Syntax behandelt.

- -

Ältere Callbacksyntax

- -

In diesem Beispiel nutzt die getData() Funktion XHR um einen Audiotrack zu laden, indem sie die responseType Eigenschaft setzt um einen ArrayBuffer als Antwort zu erhalten, welcher anschließend in der audioData variable gespeichert wird. Dieser Buffer wird nun an die decodeAudioData() Funktion übergeben; Das success Callback nutzt die erfolgreich dekodierten PCM Daten, erstellt einen {{ domxref("AudioBufferSourceNode") }} mit Hilfe von {{ domxref("AudioContext.createBufferSource()") }}, verbindet diese Quelle mit {{domxref("AudioContext.destination") }} und setzt den Schleifenmodus.

- -

Die Buttons in diesem Beispiel rufen lediglich getData() um die Daten zu laden und die Wiedergabe zu starten, sowie stop() um die Wiedergabe anzuhalten auf. Wenn die stop() Methode der Quelle aufgerufen wird die Quelle geleert.

- -
-

Note: You can run the example live (or view the source.)

-
- -
// Variablen definieren
-
-var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
-var source;
-
-var pre = document.querySelector('pre');
-var myScript = document.querySelector('script');
-var play = document.querySelector('.play');
-var stop = document.querySelector('.stop');
-
-// Benutzt XHR um einen Track zu laden und
-// decodeAudioData um diesen zu dekodieren und in einen Buffer zu kopieren.
-// Anschließend wird der Buffer in eine Quelle kopiert.
-
-function getData() {
-  source = audioCtx.createBufferSource();
-  var request = new XMLHttpRequest();
-
-  request.open('GET', 'viper.ogg', true);
-
-  request.responseType = 'arraybuffer';
-
-
-  request.onload = function() {
-    var audioData = request.response;
-
-    audioCtx.decodeAudioData(audioData, function(buffer) {
-        source.buffer = buffer;
-
-        source.connect(audioCtx.destination);
-        source.loop = true;
-      },
-
-      function(e){"Error with decoding audio data" + e.err});
-
-  }
-
-  request.send();
-}
-
-// Buttons setzen um Wiedergabe zu starten und stoppen
-
-play.onclick = function() {
-  getData();
-  source.start(0);
-  play.setAttribute('disabled', 'disabled');
-}
-
-stop.onclick = function() {
-  source.stop(0);
-  play.removeAttribute('disabled');
-}
-
-
-// Script ausgeben
-
-pre.innerHTML = myScript.innerHTML;
- -

Neue Promise basierte Syntax

- -
ctx.decodeAudioData(compressedBuffer).then(function(decodedData) {
- // Die dekodierten PCM Daten können hier verwendet werden
-});
- -

Parameter

- -
-
ArrayBuffer
-
Ein ArrayBuffer der die zu dekodierenden Daten enthält. Dieser wird normalerweise durch einen {{domxref("XMLHttpRequest")}} befüllt nachdem der responseType auf arraybuffer gesetzt wurde.
-
DecodeSuccessCallback
-
Ein Callback das aufgerufen wird wenn die Dekodierung erfolgreich abgeschlossen wird. Der einzige Parameter der an diese Funktion übergeben wird stellt einen AudioBuffer dar, der die dekodierten Audiodaten enthält. Normalerweise wird dieser Buffer an einen {{domxref("AudioBufferSourceNode")}} übergeben, von wo er wiedergeben und verändert werden kann.
-
DecodeErrorCallback
-
Ein optionales Callback das bei einem Fehler während der Dekodierung aufgerufen wird.
-
- -

Rückgabewerte

- -

Ein {{domxref("AudioBuffer") }} der die dekodierten Audiodaten enthällt.

- -

Spezifikationen

- - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('Web Audio API', '#widl-AudioContext-decodeAudioData-Promise-AudioBuffer--ArrayBuffer-audioData-DecodeSuccessCallback-successCallback-DecodeErrorCallback-errorCallback', 'decodeAudioData()')}}{{Spec2('Web Audio API')}} 
- -

Browserunterstützung

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
- 22 (unprefixed)		6.0{{property_prefix("webkit")}}
Promise-based syntax{{CompatChrome(49.0)}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(33.0)}}
Promise-based syntax{{CompatUnknown}}{{CompatChrome(49.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(49.0)}}
-
- -

Siehe auch

- - diff --git a/files/de/web/api/baseaudiocontext/decodeaudiodata/index.html b/files/de/web/api/baseaudiocontext/decodeaudiodata/index.html new file mode 100644 index 0000000000..32cfda28eb --- /dev/null +++ b/files/de/web/api/baseaudiocontext/decodeaudiodata/index.html @@ -0,0 +1,218 @@ +--- +title: AudioContext.decodeAudioData() +slug: Web/API/AudioContext/decodeAudioData +translation_of: Web/API/BaseAudioContext/decodeAudioData +--- +

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

+ +
+

Die Methode decodeAudioData() im Interface {{ domxref("AudioContext") }} wird dazu benutzt um in einem {{ domxref("ArrayBuffer")}} enthaltene Audiodaten asynchron zu dekodieren. Im Normalfall wird der ArrayBuffer mit der  {{domxref("XMLHttpRequest")}} response Eigenschaft befüllt, nachdem der responseType auf arraybuffer gesetzt wurde. Der dekodierte AudioBuffer wird auf die Samplerate des AudioContextes angepasst und anschließend an ein Callback oder Promise weitergegeben.

+
+ +

Dies ist die bevorzugte Methode im eine Audioquelle für die Web Audio API aus einem Audiotrack zu generieren.

+ +

Syntax

+ +

Alte Callbacksyntax:

+ +
audioCtx.decodeAudioData(audioData, function(decodedData) {
+  // use the dec​oded data here
+});
+ +

Neue Promise basierte Syntax:

+ +
audioCtx.decodeAudioData(audioData).then(function(decodedData) {
+  // use the decoded data here
+});
+ +

Beispiel

+ +

In diesem Abschnitt wird zuerst die ältere Callback basierte Syntax und anschließend die neue Promise basierte Syntax behandelt.

+ +

Ältere Callbacksyntax

+ +

In diesem Beispiel nutzt die getData() Funktion XHR um einen Audiotrack zu laden, indem sie die responseType Eigenschaft setzt um einen ArrayBuffer als Antwort zu erhalten, welcher anschließend in der audioData variable gespeichert wird. Dieser Buffer wird nun an die decodeAudioData() Funktion übergeben; Das success Callback nutzt die erfolgreich dekodierten PCM Daten, erstellt einen {{ domxref("AudioBufferSourceNode") }} mit Hilfe von {{ domxref("AudioContext.createBufferSource()") }}, verbindet diese Quelle mit {{domxref("AudioContext.destination") }} und setzt den Schleifenmodus.

+ +

Die Buttons in diesem Beispiel rufen lediglich getData() um die Daten zu laden und die Wiedergabe zu starten, sowie stop() um die Wiedergabe anzuhalten auf. Wenn die stop() Methode der Quelle aufgerufen wird die Quelle geleert.

+ +
+

Note: You can run the example live (or view the source.)

+
+ +
// Variablen definieren
+
+var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var source;
+
+var pre = document.querySelector('pre');
+var myScript = document.querySelector('script');
+var play = document.querySelector('.play');
+var stop = document.querySelector('.stop');
+
+// Benutzt XHR um einen Track zu laden und
+// decodeAudioData um diesen zu dekodieren und in einen Buffer zu kopieren.
+// Anschließend wird der Buffer in eine Quelle kopiert.
+
+function getData() {
+  source = audioCtx.createBufferSource();
+  var request = new XMLHttpRequest();
+
+  request.open('GET', 'viper.ogg', true);
+
+  request.responseType = 'arraybuffer';
+
+
+  request.onload = function() {
+    var audioData = request.response;
+
+    audioCtx.decodeAudioData(audioData, function(buffer) {
+        source.buffer = buffer;
+
+        source.connect(audioCtx.destination);
+        source.loop = true;
+      },
+
+      function(e){"Error with decoding audio data" + e.err});
+
+  }
+
+  request.send();
+}
+
+// Buttons setzen um Wiedergabe zu starten und stoppen
+
+play.onclick = function() {
+  getData();
+  source.start(0);
+  play.setAttribute('disabled', 'disabled');
+}
+
+stop.onclick = function() {
+  source.stop(0);
+  play.removeAttribute('disabled');
+}
+
+
+// Script ausgeben
+
+pre.innerHTML = myScript.innerHTML;
+ +

Neue Promise basierte Syntax

+ +
ctx.decodeAudioData(compressedBuffer).then(function(decodedData) {
+ // Die dekodierten PCM Daten können hier verwendet werden
+});
+ +

Parameter

+ +
+
ArrayBuffer
+
Ein ArrayBuffer der die zu dekodierenden Daten enthält. Dieser wird normalerweise durch einen {{domxref("XMLHttpRequest")}} befüllt nachdem der responseType auf arraybuffer gesetzt wurde.
+
DecodeSuccessCallback
+
Ein Callback das aufgerufen wird wenn die Dekodierung erfolgreich abgeschlossen wird. Der einzige Parameter der an diese Funktion übergeben wird stellt einen AudioBuffer dar, der die dekodierten Audiodaten enthält. Normalerweise wird dieser Buffer an einen {{domxref("AudioBufferSourceNode")}} übergeben, von wo er wiedergeben und verändert werden kann.
+
DecodeErrorCallback
+
Ein optionales Callback das bei einem Fehler während der Dekodierung aufgerufen wird.
+
+ +

Rückgabewerte

+ +

Ein {{domxref("AudioBuffer") }} der die dekodierten Audiodaten enthällt.

+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('Web Audio API', '#widl-AudioContext-decodeAudioData-Promise-AudioBuffer--ArrayBuffer-audioData-DecodeSuccessCallback-successCallback-DecodeErrorCallback-errorCallback', 'decodeAudioData()')}}{{Spec2('Web Audio API')}} 
+ +

Browserunterstützung

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22 (unprefixed)		6.0{{property_prefix("webkit")}}
Promise-based syntax{{CompatChrome(49.0)}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(33.0)}}
Promise-based syntax{{CompatUnknown}}{{CompatChrome(49.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(49.0)}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/canvas_api/index.html b/files/de/web/api/canvas_api/index.html new file mode 100644 index 0000000000..50e6da1aae --- /dev/null +++ b/files/de/web/api/canvas_api/index.html @@ -0,0 +1,120 @@ +--- +title: Canvas +slug: Web/HTML/Canvas +tags: + - API + - Canvas + - HTML5 +translation_of: Web/API/Canvas_API +--- +
{{CanvasSidebar}}
+ +

Mit der Einführung von HTML5 wurde ein neues "Leinwand" Element zum Zeichnen von Grafiken mittels JavaScript-API vorgestellt: {{HTMLElement("canvas")}}. Die Anwendungsgebiete sind äußerst flexibel, so ist es möglich, mit Canvas Diagramme zu zeichnen, Bilder zu bearbeiten, Animationen zu erstellen oder sogar Videos zu bearbeiten und zu rendern.

+ +

Der Support für <canvas> in Mozilla-Anwendungen wurde ab Gecko 1.8 (sprich ab Firefox 1.5) implementiert. Canvas stammt ursprünglich von Apple und wurde für das OS X Dashboard und den Safari-browser entwickelt. Der Internet Explorer unterstützt Canvas ab Version 9, wobei es durch ein Skript von Google's Explorer Canvas Projekt auch in früheren Versionen des IE lauffähig ist. Google Chrome und Opera ab Version 9 unterstützen <canvas> ebenfalls problemlos.

+ +

Das <canvas> Element wird zudem von WebGL für die hardwarebeschleunigte Darstellung von 3D-Grafiken auf Webseiten eingesetzt.

+ +

Beispiel

+ +

Dies ist ein einfacher Code-Ausschnitt mit der {{domxref("CanvasRenderingContext2D.fillRect()")}} Methode.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.fillStyle = "green";
+ctx.fillRect(10, 10, 100, 100);
+
+ +

Bearbeite den untenstehenden Code und sieh live Updates im Canvas: (Funktion kaputt auf Deutsch, die Englische Seite funktioniert, bitte oben umschalten auf Englisch )

+ +

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

+ +

Referenzen

+ +
+ +
+ +

Die Schnittstellen, die sich auf WebGLRenderingContext beziehen, werden unter WebGL zusammengefasst.

+ +

Leitfäden und Anleitungen

+ +
+
Canvas Tutorial
+
Eine ausführliche Anleitung, die sowohl grundlegende Nutzung als auch fortgeschrittene Funktionen umfasst
+
Code-Ausschnitte: Canvas
+
Einige Entwickler-orientierte Code-Ausschnitte, die <canvas> enthalten.
+
Demo: A basic ray-caster
+
A demo of ray-tracing animation using canvas.
+
DOM-Objekte in ein canvas zeichnen
+
Wie man DOM Inhalt, wie zum Beispiel HTML-Elemente, in ein canvas zeichnet.
+
Videos mit canvas manipulieren
+
{{HTMLElement("video")}} und {{HTMLElement("canvas")}} kombinieren, um Videos in Echtzeit zu manipulieren.
+
+ +

Quellen

+ +

Allgemeines

+ + + +

Libraries

+ + + +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', "the-canvas-element.html", "Canvas")}}{{Spec2('HTML WHATWG')}} 
+ +

Siehe auch

+ + diff --git a/files/de/web/api/canvas_api/tutorial/advanced_animations/index.html b/files/de/web/api/canvas_api/tutorial/advanced_animations/index.html new file mode 100644 index 0000000000..10c4a7650c --- /dev/null +++ b/files/de/web/api/canvas_api/tutorial/advanced_animations/index.html @@ -0,0 +1,380 @@ +--- +title: Fortgeschrittene Animationen +slug: Web/Guide/HTML/Canvas_Tutorial/Advanced_animations +tags: + - Canvas + - Graphics + - Tutoria +translation_of: Web/API/Canvas_API/Tutorial/Advanced_animations +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}
+ +
+

In dem vorherigem Kapitel machten wir einige Basisanimationen und lernten Möglichkeiten, Dinge zu bewegen. In diesem Kapitel werden wir uns die Bewegung selbst anschauen und werden etwas Physik einfügen um unsere Animationen fortgeschrittener zu machen.

+
+ +

Einen Ball zeichnen

+ +

Wir werden einen Ball für unsere Animationen benutzen, deshalb zeichnen wir zuerst einen Ball mit dem folgendem Code in die Canvas.

+ +
<canvas id="canvas" width="600" height="300"></canvas>
+
+ +

Wie gewöhnlich brauchen wir zuerst ein draw context. Um den Ball zu zeichnen, werden wir ein ball - Objekt erstellen, welches Eigenschaften und eine draw() - Methode enthält, um es in die Canvas zu zeichnen.

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+var ball = {
+  x: 100,
+  y: 100,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+ball.draw();
+ +

Nichts Besonderes hier, der Ball ist momentan ein einfacher Kreis und wird mit der {{domxref("CanvasRenderingContext2D.arc()", "arc()")}} - Methode gezeichnet.

+ +

Geschwindigkeit hinzufügen

+ +

Nun haben wir einen Ball und sind bereit, eine Basisanimation hinzuzufügen, wie wir es im vorherigen Kapitel von diesem Tutorial lernten. Wieder hilft uns {{domxref("window.requestAnimationFrame()")}}, die Animation zu kontrollieren. Der Ball bewegt sich durch Hinzufügen von einem Geschwindigkeitsvektor zu der Position. Für jedes Frame {{domxref("CanvasRenderingContext2D.clearRect", "clean", "", 1)}} wir die Canvas, um alte Kreise zu entfernen.

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 2,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function draw() {
+  ctx.clearRect(0,0, canvas.width, canvas.height);
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mouseover', function(e){
+  raf = window.requestAnimationFrame(draw);
+});
+
+canvas.addEventListener("mouseout",function(e){
+  window.cancelAnimationFrame(raf);
+});
+
+ball.draw();
+
+ +

Gebundenheit

+ +

Ohne jede gebundene Kollisionsüberprüfung fliegt unser Ball schnell aus dem Canvas. Wir müssen die x - und yposition von dem Ball überprüfen und wenn der Ball außerhalb des Canvas ist, die Richtung der Geschwindigkeitsvektoren umkehren.

+ +
if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
+  ball.vy = -ball.vy;
+}
+if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
+  ball.vx = -ball.vx;
+}
+ +

Erste Demo

+ +

Lass uns sehen, wie das in Aktion aussieht. Bewegen Sie die Maus in die Canvas, um die Animation zu starten.

+ + + +

{{EmbedLiveSample("Erste_Demo", "610", "310")}}

+ +

Acceleration

+ +

Um die Bewegung realistischer zu machen, können Sie mit Geschwindigkeit spielen, zum Beispiel:

+ +
ball.vy *= .99;
+ball.vy += .25;
+ +

Dies verlangsamt die vertikale Geschwindigkeit in jedem Frame, sodass der Ball am Ende nur noch am Boden hüpft.

+ + + +

{{EmbedLiveSample("Acceleration", "610", "310")}}

+ +

Spureneffekt

+ +

Bis jetzt haben wir die {{domxref("CanvasRenderingContext2D.clearRect", "clearRect")}}  - Methode benutzt, wenn wir Frames clearten. Wenn Sie diese Methode durch {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}} ersetzen, können Sie einfach einen Spureneffekt erzeugen.

+ +
ctx.fillStyle = 'rgba(255,255,255,0.3)';
+ctx.fillRect(0,0,canvas.width,canvas.height);
+ + + +

{{EmbedLiveSample("Spureneffekt", "610", "310")}}

+ +

Mauskontrolle hinzufügen

+ +

Um etwas Kontrolle über den Ball zu bekommen, können wir machen, dass er die Maus verfolgt, indem wir beispielsweise das mousemove - Ereignis benutzen. Das click - Ereignis lässt den Ball wieder hüpfen.

+ + + +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+var running = false;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 1,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function clear() {
+  ctx.fillStyle = 'rgba(255,255,255,0.3)';
+  ctx.fillRect(0,0,canvas.width,canvas.height);
+}
+
+function draw() {
+  clear();
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+
+  if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
+    ball.vy = -ball.vy;
+  }
+  if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
+    ball.vx = -ball.vx;
+  }
+
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mousemove', function(e){
+  if (!running) {
+    clear();
+    ball.x = e.clientX;
+    ball.y = e.clientY;
+    ball.draw();
+  }
+});
+
+canvas.addEventListener("click",function(e){
+  if (!running) {
+    raf = window.requestAnimationFrame(draw);
+    running = true;
+  }
+});
+
+canvas.addEventListener("mouseout",function(e){
+  window.cancelAnimationFrame(raf);
+  running = false;
+});
+
+ball.draw();
+
+ +

Bewegen Sie den Ball mit der Maus und klicken Sie, um ihn loszulassen.

+ +

{{EmbedLiveSample("Mauskontrolle_hinzuf%C3%BCgen", "610", "310")}}

+ +

Breakout

+ +

Dieses kurze Kapitel erklärt nur einige Möglichkeiten, fortgeschrittene Animationen zu erstellen. Es gibt viel mehr! Was darüber, ein Brett und einige Blöcke hizuzufügen und diese Demo in ein Breakout - Spiel zu verwandeln? Schauen Sie sich unseren Spieleentwickelungsbereich an für mehr auf Spiele bezogene Artikel.

+ +

Siehe auch

+ + + +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}

diff --git a/files/de/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html b/files/de/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html new file mode 100644 index 0000000000..6caa27b3ef --- /dev/null +++ b/files/de/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html @@ -0,0 +1,785 @@ +--- +title: Stile und Farben verwenden +slug: Web/Guide/HTML/Canvas_Tutorial/Applying_styles_and_colors +translation_of: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}
+ +
+

Im Kapitel über das Zeichnen von Formen haben wir zum Einstieg nur die Standard-Stile für Linien und Füllungen benutzt. Nun möchten wir uns etwas näher mit Möglichkeiten beschäftigen, unsere Zeichnungen etwas attraktiver zu gestalten. Wir werden lernen, unterschiedliche Farben, Linienstile, Verläufe, Muster und Schatten in unseren Zeichnungen anzuwenden.

+
+ +

Farben

+ +

Bis jetzt haben wir nur Methoden im unmittelbaren Zusammenhang mit dem Zeichnen gelernt. Möchten wir einer Form eine Farbe zuordnen, stehen uns folgenden zwei Eigenschaften zur Verfügung: fillStyle und strokeStyle.

+ +
+
{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle = color")}}
+
+

 Bestimmt den Stil in dem die Form gefüllt wird.

+
+
{{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle = color")}}
+
+

Bestimmt den Stil der Umrandungslinien.

+
+
+ +

color steht entweder für einen CSS {{cssxref("<color>")}} Farbwert, ein Gradienten-Objekt, oder ein Muster-Objekt. Auf letztere gehen wir später noch ein. Standardmäßig sind Strich- und Füllfarbe auf Schwarz eingestellt (CSS-Farbwert #000000).

+ +
+

Anmerkung: Nach dem Setzen von strokeStyle und/oder fillStyle wird der neue Wert zum Standardwert für alle nachfolgend gezeichneten Formen. Für jede in einer abweichenden Farbe gewünschte Form müssen fillStyle bzw. strokeStyle neu definiert werden.

+
+ +

Der String color sollte, entsprechend der Spezifikation, ein gültiger CSS {{cssxref("<color>")}} -Wert sein. Alle folgenden Beispiele definieren die selbe Farbe.

+ +
// these all set the fillStyle to 'orange'
+
+ctx.fillStyle = "orange";
+ctx.fillStyle = "#FFA500";
+ctx.fillStyle = "rgb(255,165,0)";
+ctx.fillStyle = "rgba(255,165,0,1)";
+
+ +

Beispiel für fillStyle

+ +

In diesem Beispiel nutzen wir wieder zwei Schleifen um ein Gitter aus gefüllten Quadraten zu zeichnen, jedes in einer anderen Farbe. Das resultierende Bild sollte etwa dem Screenshot unten entsprechen. Außergewöhnliches passiert hier nicht, wir nutzen einfach die beiden Variablen i und j um jedem Quadrat eine eigene Farbe zu geben, wobei wir nur die Werte für den Rot- und Grünanteil ändern; der Blauwert bleibt unverändert. Durch Modifikation der Farbkanäle können Sie verschiedene Paletten erzeugen; eine Erhöhung der Schrittweite erzeugt z.B. ein Muster, das an die Farbpaletten in Photoshop erinnert.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  for (var i=0;i<6;i++){
+    for (var j=0;j<6;j++){
+      ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' +
+                       Math.floor(255-42.5*j) + ',0)';
+      ctx.fillRect(j*25,i*25,25,25);
+    }
+  }
+}
+ + + +

Das Ergebnis:

+ +

{{EmbedLiveSample("A_fillStyle_example", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}

+ +

Beispiel für strokeStyle

+ +

Dieses Beispiel ähnelt dem vorangegangenen, nutzt aber die strokeStyle Eigenschaft, um die Farben der Umrisslinien zu ändern. Mit der Methode arc() zeichnen wir Kreise an Stelle der Quadrate.

+ +
  function draw() {
+    var ctx = document.getElementById('canvas').getContext('2d');
+    for (var i=0;i<6;i++){
+      for (var j=0;j<6;j++){
+        ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' +
+                         Math.floor(255-42.5*j) + ')';
+        ctx.beginPath();
+        ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
+        ctx.stroke();
+      }
+    }
+  }
+
+ + + +

The result looks like this:

+ +

{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "https://mdn.mozillademos.org/files/253/Canvas_strokestyle.png")}}

+ +

Transparenz

+ +

Zusätzlich zu deckenden Formen können wir auch teiltransparente (oder durchscheinende) Formen zeichnen. Dies geschieht entweder durch das Setzen der Eigenschaft globalAlpha oder die Zuordnung einer teiltransparenten Farbe zu einem Zeichen- oder Füllstil.

+ +
+
{{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha = transparencyValue")}}
+
+

Wendet den angegebenen Transparenz-Wert auf alle nachfolgend gezeichneten Formen an. Der Wert muss zwischen 0.0 (vollständig transparent) und 1.0 (vollständig deckend) liegen. Der Standardwert ist 1.0.

+
+
+ +

Die Eigenschaft globalTransparency ist nützlich, wenn man viele Formen mit gleicher Transparenz zeichnen möchte; meist ist es aber praktischer, die Transparenz jeder einzelnen Form gemeinsam mit ihrer Farbe zu definieren.

+ +

Die Eigenschaften strokeStyle und fillStyle akzeptieren CSS rgba Farbwerte, daher kann die Transparenz direkt bei der Zuordnung einer Farbe wie folgt gesetzt werden:

+ +
// Assigning transparent colors to stroke and fill style
+
+ctx.strokeStyle = "rgba(255,0,0,0.5)";
+ctx.fillStyle = "rgba(255,0,0,0.5)";
+
+ +

Die rgba()-Funktion entspricht der rgb()-Funktion, allerdings mit einem zusätzlichen Parameter am Ende. Dieser Wert bestimmt die Transparenz dieser bestimmten Farbe. Der Gültigkeitsbereich umfasst Werte zwischen 0.0 (völlig transpartent) und 1.0 (vollständig deckend).

+ +

Beispiel für globalAlpha

+ +

In diesem Beispiel zeichnen wir einen Hintergrund aus vier unterschiedlich gefärbten Quadraten. Über diese legen wir dann einige transparente Kreise. Die Eigenschaft globalAlpha wird auf den Wert 0.2 gesetzt, der dann für alle folgend gezeichneten Formen verwendet wird. Jeder Durchlauf der for-Schleife zeichnet einen Satz Kreise mit zunehmendem Radius. Das Endresultat ist ein kreisförmiger Verlauf. Durch das Übereinanderlagern von immer mehr Kreisen reduzieren wir letztlich die Transparenz bereits gezeichneter Kreise. Erhöhen wir die Anzahl der Durchläufe (und damit der gezeichneten Kreise) weiter, wird der Hintergrund in der Bildmitte irgendwann völlig überdeckt.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  // draw background
+  ctx.fillStyle = '#FD0';
+  ctx.fillRect(0,0,75,75);
+  ctx.fillStyle = '#6C0';
+  ctx.fillRect(75,0,75,75);
+  ctx.fillStyle = '#09F';
+  ctx.fillRect(0,75,75,75);
+  ctx.fillStyle = '#F30';
+  ctx.fillRect(75,75,75,75);
+  ctx.fillStyle = '#FFF';
+
+  // set transparency value
+  ctx.globalAlpha = 0.2;
+
+  // Draw semi transparent circles
+  for (i=0;i<7;i++){
+    ctx.beginPath();
+    ctx.arc(75,75,10+10*i,0,Math.PI*2,true);
+    ctx.fill();
+  }
+}
+ + + +

{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "https://mdn.mozillademos.org/files/232/Canvas_globalalpha.png")}}

+ +

Beispiel für die Verwendung von rgba()

+ +

Das zweite Beispiel ist ähnlich dem ersten, aber hier überlagern wir farbige Flächen mit schmalen, weißen Rechtecken zunehmender Deckkraft. Die Verwendung von rgba() an Stelle von globalAlpha erlaubt uns mehr Kontrolle und Flexibilität, weil wir damit Strich- und Füllstil unterschiedlich behandeln können.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Draw background
+  ctx.fillStyle = 'rgb(255,221,0)';
+  ctx.fillRect(0,0,150,37.5);
+  ctx.fillStyle = 'rgb(102,204,0)';
+  ctx.fillRect(0,37.5,150,37.5);
+  ctx.fillStyle = 'rgb(0,153,255)';
+  ctx.fillRect(0,75,150,37.5);
+  ctx.fillStyle = 'rgb(255,51,0)';
+  ctx.fillRect(0,112.5,150,37.5);
+
+  // Draw semi transparent rectangles
+  for (var i=0;i<10;i++){
+    ctx.fillStyle = 'rgba(255,255,255,'+(i+1)/10+')';
+    for (var j=0;j<4;j++){
+      ctx.fillRect(5+i*14,5+j*37.5,14,27.5);
+    }
+  }
+}
+ + + +

{{EmbedLiveSample("An_example_using_rgba()", "180", "180", "https://mdn.mozillademos.org/files/246/Canvas_rgba.png")}}

+ +

Linienstile

+ +

Mehrere Eigenschaften ermöglichen den Zugriff auf Linienstile:

+ +
+
{{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth = value")}}
+
Setzt die Breite später gezeichneter Linien.
+
{{domxref("CanvasRenderingContext2D.lineCap", "lineCap = type")}}
+
Definiert die Form der Linienenden.
+
{{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin = type")}}
+
Definiert die Form der „Ecken“, an denen sich Linien treffen.
+
{{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit = value")}}
+
Definiert einen Grenzwert für die Gehrung (Schräge) am spitzen Winkel zwischen zwei Linien; damit wird die Dicke des Verbindungsbereichs begrenzt.
+
+ +
+
{{domxref("CanvasRenderingContext2D.getLineDash", "getLineDash()")}}
+
+

Gibt den aktuellen Array für das Strichlierungsmuster zurück (eine gerade Anzahl nicht-negativer Zahlen).

+
+
{{domxref("CanvasRenderingContext2D.setLineDash", "setLineDash(segments)")}}
+
+

Definiert das aktuelle Strichlierungsmuster.

+
+
{{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset = value")}}
+
+

Beschreibt wo das Strichlierunsmuster startet.

+
+
+ +

Die Beispiele unten sollen Ihnen das Verständnis dieser Angaben erleichtern.

+ +

Beispiel für lineWidth

+ +

Diese Eigenschaft bestimmt die aktuelle Linienbreite. Der Standardwert ist 1.0, und es sind nur positive Zahlen erlaubt.

+ +

Die Linienbreite entspricht der Dicke des Strichs, zentriert über der Strecke zwischen den Punkten. Anders ausgedrückt dehnt sich die Fläche der gezeichneten Linie je zur Hälfte links und rechts der Strecke aus. Weil Canvas-Koordinaten sich nicht unmittelbar auf Pixel beziehen müssen, sollte man etwas Sorgfalt walten lassen um „scharfe“ bzw. definierte horizontale und vertikale Linien zu erhalten.

+ +

Im folgenden Beispiel werden zehn gerade Linien zunehmender Breite gezeichnet. Die Linie ganz links ist 1.0 Einheiten breit. Allerdings erscheint diese Linie - und auch alle anderen Linien mit einem ungeraden Wert für die Liniendicke - nicht wirklich scharf; schuld daran ist die Positionierung.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  for (var i = 0; i < 10; i++){
+    ctx.lineWidth = 1+i;
+    ctx.beginPath();
+    ctx.moveTo(5+i*14,5);
+    ctx.lineTo(5+i*14,140);
+    ctx.stroke();
+  }
+}
+
+ + + +

{{EmbedLiveSample("A_lineWidth_example", "180", "180", "https://mdn.mozillademos.org/files/239/Canvas_linewidth.png")}}

+ +

Um scharfe Linien zu erzeugen muss man erst verstehen, wie Linien gezeichnet werden. In den Bildern unten steht das Gitter für das Koordinatensystem im Canvas. Die Quadrate zwischen den Gitterlinien entsprechen reellen Pixeln der Bildschirmdarstellung. Im ersten Bild wird ein Rechteck zwischen (2,1) und (5,5) gefüllt. Das gesamte Rechteck zwischen diesen Koordinaten (im Bild hellrot) fällt mit den Pixelgrenzen zusammen, und es resultiert eine Rechteckfläche mit scharfen Abgrenzungen.

+ +

+ +

Stellen wir uns jetzt einen Pfad von (3,1) nach (3,5) mit einer Linienbreite von 1.0 vor, dann erhalten wir die Situation im zweiten Bild. Die zu füllende Fläche erstreckt sich jeweils nur zur Hälfte über die links und rechts angrenzenden Pixel. Dieser Zustand kann nur näherungsweise umgesetzt werden, so dass die betroffenen Pixel nur in der halben Intensität gefüllt werden. Genau das passierte mit der 1.0 Einheiten breiten Linie im vorhergehenden Programm.

+ +

Um das zu korrigieren muss man bei der Definition der Verbindungsstrecke besonders genau sein. Mit dem Wissen, dass eine Linie der Breite 1.0 sich jeweils zur Hälfte auf beide Seiten ausdehnt, kann man die Strecke von (3.5,1) bis (3.5,5) legen und erhält die Situation im dritten Bild - die eine Einheit breite Linie füllt exakt eine Pixelreihe.

+ +
+

Anmerkung: Bitte beachten Sie, dass in dem Beispiel der vertikalen Linie die Y-Position sich immer noch auf eine ganzzahlige Position bezieht - andernfalls würden an den Endpunkten die Pixel nur halb gedeckt.(Beachten Sie aber auch, dass dieses Verhalten zusätzlich vom lineCap-Stil abhängt, der standardmäßig auf butt eingestellt ist. Möchten Sie einheitliche Striche mit Koordinaten in halben Pixeln für ungerade Liniendicken berechnen, können Sie dafür den lineCap-Sti auf square setzten, wodurch der Aussenrand des Strichs am Endpunkt automatisch über den ganzen Pixel ausgedehnt wird.)

+ +

Beachten Sie auch, dass nur der Start- und Zielpunkt einer Strecke betroffen ist. Bei einer mit closePath() geschlossenen Strecke git es keinen solchen Start- bzw. Zielpunkt, stattdessen werden alle Endpunkte mit den vorhergehenden und nachfolgenden Segmenten entsprechend dem aktuellen lineJoin-Stil verbunden; dessen Standardwert ist miter, was eine automatische Ausweitung der äußeren Linienränder bis zu ihrem Schnittpunkt bewirkt, so dass der gezeichnete Strich an jedem Endpunkt exakt volle Pixel abdeckt, wenn die verbundenen Segmente horizontal und/oder vertikal verlaufen. Die folgenden zwei Abschnitte demonstrieren das Verhalten dieser zusätzlichen Linien-Stile.

+
+ +

Für scharfe Ränder bei geradzahligen Linienbreiten definieren wir den Pfad zwischen den Pixeln (z.B. (3,1) bis (3,5)), so dass jede Hälfte des Strichs einer ganzzahligen Anzahl von Pixeln entspricht.

+ +

Wenn die sorgfältige Arbeit mit dem Pixelraster in 2D-Grafiken anfangs auch noch etwas anstrengend erscheinen mag, so gewährleistet sie letztlich eine korrekte Abbildung der Grafiken, unabhänging von Skalierungen oder anderen Transformationen. Eine korrekt positionierte Linie mit einer Breite von 1.0 wird nach einer Vergrößerung um den Faktor 2 eine Linie der Breite 2.0 ergeben, wiederum scharf umrissen und an der richtigen Position.

+ +

Beispiel für lineCap

+ +

Die Eigenschaft lineCap bestimmt das Erschinungsbild der Linienenden. Sie kann drei verschiedene Werte annehmen: butt (Standardwert), round und square.

+ +

+ +
+
butt
+
+

Glatte Enden an den Endpunkten.

+
+
round
+
+

Abgerundete Enden.

+
+
square
+
+

Die Enden werden glatt abgeschnitten, es wird aber vorher ein Rechteck angefügt, gleicher Breite wie die Linie und halb so lang wie breit.

+
+
+ +

In diesem Beispiel ziehen wir drei Linien, jede davon mit einem unterschiedlichen Wert für lineCap. Zwei Hilfslinien helfen dabei die Unterschiede zu verdeutlichen. Jede Linie beginnt und endet exakt an den Hilfslinien.

+ +

Die linke Linie verwendet die Option butt. Sie sehen, dass sie exakt an den Hilfslinien endet. Die zweite Linie verwendet die Option round, es wird dadurch ein Halbkreis mit einem Radius entsprechend der halben Linienbreite angehängt. Die recht Linie verwendet die Option square. Diese hängt ein Rechteck von gleicher Breite und einer Länge der halben Linienbreite an.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var lineCap = ['butt','round','square'];
+
+  // Draw guides
+  ctx.strokeStyle = '#09f';
+  ctx.beginPath();
+  ctx.moveTo(10,10);
+  ctx.lineTo(140,10);
+  ctx.moveTo(10,140);
+  ctx.lineTo(140,140);
+  ctx.stroke();
+
+  // Draw lines
+  ctx.strokeStyle = 'black';
+  for (var i=0;i<lineCap.length;i++){
+    ctx.lineWidth = 15;
+    ctx.lineCap = lineCap[i];
+    ctx.beginPath();
+    ctx.moveTo(25+i*50,10);
+    ctx.lineTo(25+i*50,140);
+    ctx.stroke();
+  }
+}
+
+ + + +

{{EmbedLiveSample("A_lineCap_example", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}

+ +

Beispiel für lineJoin

+ +

Die Eigenschaft lineJoin bestimmt, wie zwei zusammenhängende Segmente (Linien-, Kurven- oder Kreissegmente) länger als Null in einer Form verbunden werden („degenerierte“ Elemente mit zusammenfallenden Start- und Zielpunkten, also mit der Länge Null, werden dabei übersprungen).

+ +

Diese Eigenschaft kann drei mögliche Werte annehmen: round, bevel und miter (Standardeinstellung). Beachten Sie, dass die lineJoin-Einstellung keine Auswirkungen hat wenn die Segemente in gleicher Richtung verlaufen, da in diesem Falle keine Verbindungsfläche eingefügt wird.

+ +

+ +
+
round
+
+

Rundet die Ecke ab indem ein zusätzlicher Kreisausschnitt am gemeinsamen Endpunkt der verbundenen Segmente eingefügt wird. Der Radius entspricht der halben Liniendicke.

+
+
bevel
+
+

Füllt die Fläche zwischen dem gemeinsamen Endpunkt und den beiden getrennten äußeren Ecken der Segmente mit einem Dreieck.

+
+
miter
+
+

Verlängert die Aussenränder der Segmente bis sie sich in einem Punkt schneiden, wobei eine rautenförmige Fläche eingefügt wird. Diese Einstellung wird durch die Eigenschaft miterLimit beeinflusst, welche später erklärt wird.

+
+
+ +

Das folgenden Beispielprogramm verdeutlicht die Auswirkungen der drei Varianten von lineJoin anhand von drei Linienzügen; das Ergebnis sehen Sie oben.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var lineJoin = ['round','bevel','miter'];
+  ctx.lineWidth = 10;
+  for (var i=0;i<lineJoin.length;i++){
+    ctx.lineJoin = lineJoin[i];
+    ctx.beginPath();
+    ctx.moveTo(-5,5+i*40);
+    ctx.lineTo(35,45+i*40);
+    ctx.lineTo(75,5+i*40);
+    ctx.lineTo(115,45+i*40);
+    ctx.lineTo(155,5+i*40);
+    ctx.stroke();
+  }
+}
+
+ + + +

{{EmbedLiveSample("A_lineJoin_example", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}}

+ +

Beispiel für die Eigenschaft miterLimit

+ +

Wie wir im vorhergehenden Beispiel gesehen haben, werden mit der Option miter die äußeren Kanten von zwei schneidenden Linien bis zu ihrem Schnittpunkt verlängert. Schneiden sich die Linien unter einem großen Winkel, liegt dieser äußere Schnittpunkt nicht allzu weit vom inneren entfernt. Mit kleiner werdendem Winkel vergrößert sich die Länge dieses Bereichs (genannt Gehrung = engl. miter) aber exponentiell.

+ +

Die Eigenschaft miterLimit bestimmt, wie weit der äußere Verbindungspunkt maximal vom inneren entfernt sein darf. Wird dieser Wert überschritten, wird stattdessen eine Fase gezogen, ähnlich der Einstellung bevel. Beachten Sie: Die maximale Gehrungslänge ist das Produkt aus der Liniendicke, gemessen im aktuellen Koordinatensystem, und dem Wert von miterLimit (Standardwert 10.0 im HTML {{HTMLElement("canvas")}}). Daher kann miterLimit unabhängig vom aktuellen Vergrößerungsmaßstab oder irgendeiner affinen Transformation der Strecke gesetzt werden; es beeinflusst nur die reell abgebildete Form der Kanten.

+ +

Präziser gesagt ist beschreibt miterLimit das maximale Verhältnis der Ausdehnung der Verlängerung nach außen (diese wird im HTML Canvas zwischen dem Schnittpunkt der äußeren Kanten der schneidenden Linien und dem gemeinsamen Endpunkt der Strecken gemessen) zur halben Liniendicke. Dazu gleichwertig ist die Definition als das maximal erlaubte Verhältnis der Entfernung zwischen dem inneren und äußeren Eckpunkt der Verbindung und der vollen Liniendicke. Er entspricht mathematisch dem Kosekans des halben minimalen Innenwinkels zwischen den verbundenen Segmenten, unterhalb dessen nur eine Fase ohne weitere Ausdehnung gezeichnet wird.

+ + + +

In dieser einfachen Demonstration können Sie den Wert für miterLimit dynamisch einstellen und dabei verfolgen, wie sich die Form der Ecken ändert. Die blauen Linien zeigen an wo Start- und Zielpunkt jedes Zickzack-Segments liegen.

+ +

Stellen Sie in diesem Programm ein miterLimit kleiner als 4.2 ein, wird an keiner der sichtbaren Ecken zu einer zusätzlichen Ausdehnung durch die Gehrung kommen; stattdessen entsteht an der blauen Linie eine Fase. Ist miterLimit größer als zehn, verbinden sich die meisten Linien in diesem Beispiel in einer Gehrung die weit über die blauen Linie hinausreicht, wobei sich die Höhe von links nach rechts wegen der zunehmenden Winkel verringert. Für dazwischenliegende Werte bilden die linken Elemente eine ausgedehnte Gehrung, während nach rechts die Spitzen durch Fasen ersetzt werden.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Clear canvas
+  ctx.clearRect(0,0,150,150);
+
+  // Draw guides
+  ctx.strokeStyle = '#09f';
+  ctx.lineWidth   = 2;
+  ctx.strokeRect(-5,50,160,50);
+
+  // Set line styles
+  ctx.strokeStyle = '#000';
+  ctx.lineWidth = 10;
+
+  // check input
+  if (document.getElementById('miterLimit').value.match(/\d+(\.\d+)?/)) {
+    ctx.miterLimit = parseFloat(document.getElementById('miterLimit').value);
+  } else {
+    alert('Value must be a positive number');
+  }
+
+  // Draw lines
+  ctx.beginPath();
+  ctx.moveTo(0,100);
+  for (i=0;i<24;i++){
+    var dy = i%2==0 ? 25 : -25 ;
+    ctx.lineTo(Math.pow(i,1.5)*2,75+dy);
+  }
+  ctx.stroke();
+  return false;
+}
+
+ + + +

{{EmbedLiveSample("A_demo_of_the_miterLimit_property", "400", "180", "https://mdn.mozillademos.org/files/240/Canvas_miterlimit.png")}}

+ +

Strichlierte Linien verwenden

+ +

Die Methode setLineDash und die Eigenschaft lineDashOffset definieren die Strichlierung von Linien. setLineDash akzeptiert eine Liste von Zahlenwerten, die abwechselnd die Abstände von Strichen und Zwischenräumen definieren, wobei lineDashOffset einen Versatz am Start des Musters definiert.

+ +

In diesem Beispiel erzeugen wir einen „marschierende Ameisen“-Effekt. Diese Animation finden wir oft bei Auswahlwerkzeugen von Bildbearbeitungsprogrammen. Es macht dort die Grenze zwischen Auswahlbereich und Hintergrund sichtbar. Später werden Sie in diesem Tutorial noch lernen solche oder ähnliche einfache Animationen zu erzeugen.

+ + + +
var ctx = document.getElementById('canvas').getContext('2d');
+var offset = 0;
+
+function draw() {
+  ctx.clearRect(0,0, canvas.width, canvas.height);
+  ctx.setLineDash([4, 2]);
+  ctx.lineDashOffset = -offset;
+  ctx.strokeRect(10,10, 100, 100);
+}
+
+function march() {
+  offset++;
+  if (offset > 16) {
+    offset = 0;
+  }
+  draw();
+  setTimeout(march, 20);
+}
+
+march();
+ +

{{EmbedLiveSample("Using_line_dashes", "120", "120", "https://mdn.mozillademos.org/files/9853/marching-ants.png")}}

+ +

Gradienten

+ +

Wie in jedem anderen Zeichenprogramm können wir auch im Canvas linien- und kreisförmige Verläufe zum Zeichnen und Füllen von Formen verwenden. Mit den folgenden Befehlen können wir ein {{domxref("CanvasGradient")}}-Objekt erzeugen; dieses ordnen wir dann einer fillStyle- oder strokeStyle-Eigenschaft zu.

+ +
+
{{domxref("CanvasRenderingContext2D.createLinearGradient", "createLinearGradient(x1, y1, x2, y2)")}}
+
+

Erzeugt eine lineares Verlaufsobjekt mit Startpunkt (x1, y1) und Zielpunkt (x2, y2).

+
+
{{domxref("CanvasRenderingContext2D.createRadialGradient", "createRadialGradient(x1, y1, r1, x2, y2, r2)")}}
+
+

Erzeugt einen kreisförmige Verlauf. Die Parameter beschreiben zwei Kreise, der erste mit dem Mittelpunkt bei (x1, y1) und einem Radius von r1, der zweite mit Mittelpunkt (x2, y2) und demRadius r2.

+
+
+ +

For example:

+ +
var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
+var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100);
+
+ +

Sobald wir ein canvasGradient-Objekt erzeugt haben, können wir mit der Methode addColorStop() Farben zuordnen.

+ +
+
{{domxref("CanvasGradient.addColorStop", "gradient.addColorStop(position, color)")}}
+
+

Erzeugt einen neuen Farbwert am Verlaufsobjekt. Das Positionsargument ist eine Zahl zwischen 0.0 und 1.0, und es definiert die relative Position der Farbe innerhalb der Verlaufsstrecke. Das Farbargument ist eine Zeichenkette für eine CSS {{cssxref("<color>")}} und beschreibt den Farbwert, den der Farbverlauf bis zur angegebenen Position erreicht hat.

+
+
+ +

Die Anzahl der Farbschritte ist beliebig. Es folgt ein Beispiel für einen einfachen Verlauf von Weiss nach Schwarz.

+ +
var lineargradient = ctx.createLinearGradient(0,0,150,150);
+lineargradient.addColorStop(0, 'white');
+lineargradient.addColorStop(1, 'black');
+
+ +

Beispiel für createLinearGradient

+ +

In diesem Beispiel erzeugen wir zwei unterschiedliche Verläufe. Wie Sie sehen, akzeptieren sowohl strokeStyle als auch fillStyle ein canvasGradient-Objekt als Eingabe.

+ +

 

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Create gradients
+  var lingrad = ctx.createLinearGradient(0,0,0,150);
+  lingrad.addColorStop(0, '#00ABEB');
+  lingrad.addColorStop(0.5, '#fff');
+  lingrad.addColorStop(0.5, '#26C000');
+  lingrad.addColorStop(1, '#fff');
+
+  var lingrad2 = ctx.createLinearGradient(0,50,0,95);
+  lingrad2.addColorStop(0.5, '#000');
+  lingrad2.addColorStop(1, 'rgba(0,0,0,0)');
+
+  // assign gradients to fill and stroke styles
+  ctx.fillStyle = lingrad;
+  ctx.strokeStyle = lingrad2;
+
+  // draw shapes
+  ctx.fillRect(10,10,130,130);
+  ctx.strokeRect(50,50,50,50);
+
+}
+
+ +

 

+ + + +

Der erste Teil beschreibt den Hintergrundverlauf. Wie Sie sehen, haben wir an der gleichen Position zwei unterschiedliche Farben definiert. Das dient zur Erzeugung sprunghafter Farbänderungen - hier von weiss nach grün. Üblicherweise spielt es keine Rolle in welcher Reihenfolge die Farbstufen definiert werden, in diesem speziellen Fall ist die Reihenfolge aber wichtig. Nehmen Sie die Zuordnungen am besten in der tatsächlichen Reihenfolge vor, so beugen Sie möglichen Problemen vor.

+ +

Beim zweiten Verlauf haben wir an der Startposition (0,0) keinen Farbwert definiert, was auch nicht unbedingt nötig ist, weil dann automatisch die Farbe der nächsten Farbstufe verwendet wird. Daher bewirkt die Zuordnung der Farbstufe „schwarz“ an der Position 0.5 automatisch eine einheitliche Schwarzfärbung vom Start Null bis zur Position 0.5.

+ +

{{EmbedLiveSample("A_createLinearGradient_example", "180", "180", "https://mdn.mozillademos.org/files/235/Canvas_lineargradient.png")}}

+ +

Beispiel für createRadialGradient

+ +

In diesem Beispiel werden wir vier kreisförmige Verläufe definieren. Weil wir volle Kontrolle über die Start- und Zielpunkte der Verläufe haben, können wir komplexere Verläufe erzeugen als z.B. die einfacheren Radialverläufe in Photoshop, die uns nur Verläufe mit einem gemeinsamen Mittelpunkt und radial gleichmäßig verteilten Farben erlauben würden.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Create gradients
+  var radgrad = ctx.createRadialGradient(45,45,10,52,50,30);
+  radgrad.addColorStop(0, '#A7D30C');
+  radgrad.addColorStop(0.9, '#019F62');
+  radgrad.addColorStop(1, 'rgba(1,159,98,0)');
+
+  var radgrad2 = ctx.createRadialGradient(105,105,20,112,120,50);
+  radgrad2.addColorStop(0, '#FF5F98');
+  radgrad2.addColorStop(0.75, '#FF0188');
+  radgrad2.addColorStop(1, 'rgba(255,1,136,0)');
+
+  var radgrad3 = ctx.createRadialGradient(95,15,15,102,20,40);
+  radgrad3.addColorStop(0, '#00C9FF');
+  radgrad3.addColorStop(0.8, '#00B5E2');
+  radgrad3.addColorStop(1, 'rgba(0,201,255,0)');
+
+  var radgrad4 = ctx.createRadialGradient(0,150,50,0,140,90);
+  radgrad4.addColorStop(0, '#F4F201');
+  radgrad4.addColorStop(0.8, '#E4C700');
+  radgrad4.addColorStop(1, 'rgba(228,199,0,0)');
+
+  // draw shapes
+  ctx.fillStyle = radgrad4;
+  ctx.fillRect(0,0,150,150);
+  ctx.fillStyle = radgrad3;
+  ctx.fillRect(0,0,150,150);
+  ctx.fillStyle = radgrad2;
+  ctx.fillRect(0,0,150,150);
+  ctx.fillStyle = radgrad;
+  ctx.fillRect(0,0,150,150);
+}
+
+ + + +

Wir haben die Mittelpunkte von Start- und Zielkreis etwas gegeneinander versetzt, was einen kugelförmigen 3D-Effekt erzeugt. Man sollte vermeiden, dass sich die Begrenzungen des inneren und des äußeren Kreises schneiden, weil das unberechenbare Effekte erzeugen kann.

+ +

Die letzte Farbstufe in jedem der vier Verläufe verwendet eine völlig transparente Farbe. Für einen gelungenen Übergang zur vorhergehenden Stufe sollten die Farbwerte identisch sein. Das ist im obigen Programm nicht gleich erkennbar, weil unterscheidliche Schreibweisen für die Farbwerte verwendet wurden. Berücksichtigen Sie, dass z.B. beim ersten Farbverlauf #019F62 auch als rgba(1,159,98,1) geschrieben werden könnte.

+ +

{{EmbedLiveSample("A_createRadialGradient_example", "180", "180", "https://mdn.mozillademos.org/files/244/Canvas_radialgradient.png")}}

+ +

Muster

+ +

In einem der Beispiele auf der vorhergehenden Seite haben wir mehrere Schleifen verwendet, um Bilder in Form eines Musters anzuordnen. Allerdings gibt es auch eine weit einfachere Methode: createPattern()

+ +
+
{{domxref("CanvasRenderingContext2D.createPattern", "createPattern(image, type)")}}
+
+

Erzeugt ein neues Muster-Objekt in Canvas und gibt es zurück. image ist eine {{domxref("CanvasImageSource")}} (ein {{domxref("HTMLImageElement")}}, ein weiterer Canvas, ein {{HTMLElement("video")}} Element, oder ähnliches). Der String image gibt an wie das Bild benutzt wird.

+
+
+ +

type enthält eine der folgenden Zeichenketten und bestimmt, wie aus dem Bild ein Muster erzeugt wird.

+ +
+
repeat
+
+

Wiederhole („kachle“) das Bild horizontal und vertikal.

+
+
repeat-x
+
+

Wiederhole das Bild nur horizontal.

+
+
repeat-y
+
+

Nur vertikale Wiederholung.

+
+
no-repeat
+
+

Keine Wiederholung, das Bild wird nur einmal benutzt.

+
+
+ +

 

+ +

Wir verwenden eine Methode ähnlich den vorhergehenden Beispielen zu Verläufen, um ein {{domxref("CanvasPattern")}}-Objekt zu erzeugen. Haben wir das Muster erst erzeugt, können wir es einer fillStyle- oder strokeStyle-Eigenschaft zuordnen.

+ +
var img = new Image();
+img.src = 'someimage.png';
+var ptrn = ctx.createPattern(img,'repeat');
+
+ +

 

+ +
+

Anmerkung: Wie bei drawImage() müssen Sie auch hier sicherstellen, dass das Bild vollständig geladen wurde bevor Sie die Methode aufrufen; andernfalls kann das Muster inkorrekt dargestellt werden.

+
+ +

Beispiel für createPattern

+ +

Im abschließenden Beispiel erzeugen wir ein Muster um es dann dem fillStyle zuzuordnen. Bemerkenswert ist hierbei die Verwendung des onload()-Handlers, um zu gewährleisten, dass die Bilddatei erst dann dem Muster zugeordnet wird, wenn sie vollständig geladen wurde.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // create new image object to use as pattern
+  var img = new Image();
+  img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
+  img.onload = function(){
+
+    // create pattern
+    var ptrn = ctx.createPattern(img,'repeat');
+    ctx.fillStyle = ptrn;
+    ctx.fillRect(0,0,150,150);
+
+  }
+}
+
+ + + +

{{EmbedLiveSample("A_createPattern_example", "180", "180", "https://mdn.mozillademos.org/files/222/Canvas_createpattern.png")}}

+ +

Schatten

+ +

An der Erzeugung von Schatten sind vier Eignschaften beteiligt:

+ +
+
{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX = float")}}
+
+

Definiert die horizontale Ausdehnung des Schattens vom Objekt weg. Dieser Wert wird nicht durch die Transforamtionsmatrix beeinflusst. Standardwert ist 0.

+
+
{{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY = float")}}
+
+

Wie shadowOffsetY, aber in vertikaler Richtung.

+
+
{{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur = float")}}
+
+

Definiert das Ausmaß der Unschärfe; der Wert beschreibt dabei nicht eine bestimmte Anzahl von Pixeln. Er wird nicht durch die Transformationsmatrix beeinflusst. Standardwert ist 0.

+
+
{{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor = color")}}
+
+

Eine CSS Farbdefinition der Schattenfarbe. Standardwert ist voll tranparentes Schwarz.

+
+
+ +

Die Eigenschaften shadowOffsetX und shadowOffsetY bestimmen wie weit weg vom Objekt sich der Schatten in x- und y-Richtung erstrecken soll; diese Werte werden nicht von der aktuellen Tranformationsmatrix beeinflusst. Mit negative Werten verläuft der Schatten nach links und oben, mit positiven nach rechts und unten. Standardwert für beide Parameter ist 0.

+ +

Die Eigenschaft shadowBlur definiert die Ausdehnung der Unschärfezone; der Wert beschreibt dabei keine bestimmte Anzahl von Pixeln und wird durch die Transformationsmatrix nicht verändert. Standardwert: 0.

+ +

Die Eigenschaft shadowColor ist ein regulärer CSS-Farbwert, der die Farbe des Schatteneffektes definiert. Standardwert: voll-transparentes Schwarz.

+ +
+

Note: Schatten werden nur bei source-over compositing operations gezeichnet.

+
+ +

Beispiel für Text mit Schatteneffekt

+ +

Dieses Beispiel zeichnet eine Buchstabenfolge mit einem Schatteneffekt.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.shadowOffsetX = 2;
+  ctx.shadowOffsetY = 2;
+  ctx.shadowBlur = 2;
+  ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
+
+  ctx.font = "20px Times New Roman";
+  ctx.fillStyle = "Black";
+  ctx.fillText("Sample String", 5, 30);
+}
+
+ + + +

{{EmbedLiveSample("A_shadowed_text_example", "180", "100", "https://mdn.mozillademos.org/files/2505/shadowed-string.png")}}

+ +

Wir werden uns die font-Eigenschaft und die fillText-Methode im nächsten Kapitel über das Zeichnen von Text genauer ansehen.

+ +

Canvas Füllregeln

+ +

Bei der Verwendung von fill ( oder {{domxref("CanvasRenderingContext2D.clip", "clip")}} und {{domxref("CanvasRenderingContext2D.isPointInPath", "isPointinPath")}}) kann man wahlweise eine Füllregel angeben, mit der man über die Berechnung der Windungszahl bestimmt ob ein Punkt innerhalb oder ausserhalb der Strecke liegt und ob die Fläche dementsprechend gefüllt wird oder nicht. Das ist nützlich wenn eine Strecke sich selbst schneidet oder in eine andere eingeschrieben ist.

+ +

Zwei Werte sind möglich:

+ + + +

In diesem  Beispiel verwenden wir die evenodd-Regel.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.beginPath();
+  ctx.arc(50, 50, 30, 0, Math.PI*2, true);
+  ctx.arc(50, 50, 15, 0, Math.PI*2, true);
+  ctx.fill("evenodd");
+}
+ + + +

{{EmbedLiveSample("Canvas_fill_rules", "110", "110", "https://mdn.mozillademos.org/files/9855/fill-rule.png")}}

+ +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}

diff --git a/files/de/web/api/canvas_api/tutorial/basic_animations/index.html b/files/de/web/api/canvas_api/tutorial/basic_animations/index.html new file mode 100644 index 0000000000..78ca0ac2fc --- /dev/null +++ b/files/de/web/api/canvas_api/tutorial/basic_animations/index.html @@ -0,0 +1,307 @@ +--- +title: Einfache Animationen +slug: Web/Guide/HTML/Canvas_Tutorial/Basic_animations +translation_of: Web/API/Canvas_API/Tutorial/Basic_animations +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Web/API/Canvas_API/Tutorial/Advanced_animations")}}
+ +
+

Seitdem wir JavaScript benutzen, um {{HTMLElement("canvas")}}-Elemente zu steuern, ist es auch sehr einfach, interaktive Animationen zu erzeugen. In diesem Kapitel werden wir uns ein paar einfachen Animationen widmen.

+
+ +

Die wahrscheinlich größte Einschränkung ist, dass jede Form, die einmal gezeichnet wird, genauso bleibt wie anfänglich. Wenn wir sie bewegen wollen, müssen wir sie neuzeichnen. Aber: Auch alle anderen Formen, die wir davor schon gezeichnet haben, müssen auch neu gezeichnet werden! Es beansprucht leider einiges an Zeit, komplexe Figuren neu zu zeichnen.

+ +

Grundlagen der Animation

+ +

Diese Schritte müssen Sie befolgen, um ein neues Frame zu zeichnen:

+ +
    +
  1. Bereinigen Sie die Zeichenfläche (canvas)
    + Sofern die Form, die Sie zeichnen wollen, nicht den gesamten Platz der Zeichenfläche einnimmt, müssen Sie alle vorherigen Formen entfernen. Am einfachsten erreichen Sie dies über die {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}-Methode.
    2. +
  2. Sichern Sie den Canvas-Zustand
    + Wenn Sie irgendeine Einstellung verändern (wie das Layout, Transformtationen, etc.), die den Status der Zeichenfläche beeinflussen, sollten Sie den Ursprungszustand sichern. Nur so gewährleisten Sie, dass der Ursprungszustand für jedes neue Frame verwendet wird. Verwenden Sie hierfür die save()-Methode.
    3. +
  3. Zeichnen Sie die animierte Form
    + Hier erzeugen Sie nun endlich die eigentliche Animation.
    4. +
  4. Setzen Sie den Canvas-Zustand zurück.
    + Mit der restore()-Methode können Sie auf den Ursprungszustand zurückwechseln, um ein neues Frame zu erzeugen.
    5. +
+ +

Steuerung einer Animation

+ +

Formen werden auf eine Zeichenfläche appliziert, indem die entsprechende Canvas-Methode verwendet wird oder eine vorher erzeugte Funktion aufgerufen wird. Im Normalfall erscheint die Canvas-Zeichnung erst, nachdem das Skript vollständig ausgeführt wurde. So ist es nicht möglich, eine Animation durch eine for-Schleife zu erzeugen.

+ +

Das bedeutet nun, dass wir einen Weg finden müssen, die Zeichenfunktion für eine bestimmte Zeitdauer ausführen zu können. Dafür gibt es nun zwei Wege, um eine Animation so zu steuern:

+ +

Updates nach Zeitplan

+ +

Einerseits gibt es die {{domxref("window.setInterval()")}}-, {{domxref("window.setTimeout()")}}- und {{domxref("window.requestAnimationFrame()")}}-Funktionen, die benutzt werden, um eine bestimmte Funktion nach einer Zeitspanne aufzurufen.

+ +
+
{{domxref("WindowTimers.setInterval", "setInterval(function, delay)")}}
+
Ruft die unter function spezifierte Funktion wiederholend nach der in delay (Milisekunden) definierten Zeitspanne auf.
+
{{domxref("WindowTimers.setTimeout", "setTimeout(function, delay)")}}
+
Ruft die spezifizierte Funktion nach der unter delay festgelegten Zeitspanne einmalig auf.
+
{{domxref("Window.requestAnimationFrame()", "requestAnimationFrame(callback)")}}
+
Tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint.
+
+ +

If you don't want any user interaction you can use the setInterval() function which repeatedly executes the supplied code. If we wanted to make a game, we could use keyboard or mouse events to control the animation and use setTimeout(). By setting {{domxref("EventListener")}}s, we catch any user interaction and execute our animation functions.

+ +
+

In the examples below, we'll use the {{domxref("window.requestAnimationFrame()")}} method to control the animation. The requestAnimationFrame method provides a smoother and more efficient way for animating by calling the animation frame when the system is ready to paint the frame. The number of callbacks is usually 60 times per second and may be reduced to a lower rate when running in background tabs. For more information about the animation loop, especially for games, see the article Anatomy of a video game in our Game development zone.

+
+ +

An animated solar system

+ +

This example animates a small model of our solar system.

+ +
var sun = new Image();
+var moon = new Image();
+var earth = new Image();
+function init() {
+  sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
+  moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
+  earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
+  window.requestAnimationFrame(draw);
+}
+
+function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.globalCompositeOperation = 'destination-over';
+  ctx.clearRect(0, 0, 300, 300); // clear canvas
+
+  ctx.fillStyle = 'rgba(0, 0, 0, 0.4)';
+  ctx.strokeStyle = 'rgba(0, 153, 255, 0.4)';
+  ctx.save();
+  ctx.translate(150, 150);
+
+  // Earth
+  var time = new Date();
+  ctx.rotate(((2 * Math.PI) / 60) * time.getSeconds() + ((2 * Math.PI) / 60000) * time.getMilliseconds());
+  ctx.translate(105, 0);
+  ctx.fillRect(0, -12, 50, 24); // Shadow
+  ctx.drawImage(earth, -12, -12);
+
+  // Moon
+  ctx.save();
+  ctx.rotate(((2 * Math.PI) / 6) * time.getSeconds() + ((2 * Math.PI) / 6000) * time.getMilliseconds());
+  ctx.translate(0, 28.5);
+  ctx.drawImage(moon, -3.5, -3.5);
+  ctx.restore();
+
+  ctx.restore();
+
+  ctx.beginPath();
+  ctx.arc(150, 150, 105, 0, Math.PI * 2, false); // Earth orbit
+  ctx.stroke();
+
+  ctx.drawImage(sun, 0, 0, 300, 300);
+
+  window.requestAnimationFrame(draw);
+}
+
+init();
+
+ + + +

{{EmbedLiveSample("An_animated_solar_system", "310", "310", "https://mdn.mozillademos.org/files/202/Canvas_animation1.png")}}

+ +

An animated clock

+ +

This example draws an animated clock, showing your current time.

+ +
function clock() {
+  var now = new Date();
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.save();
+  ctx.clearRect(0, 0, 150, 150);
+  ctx.translate(75, 75);
+  ctx.scale(0.4, 0.4);
+  ctx.rotate(-Math.PI / 2);
+  ctx.strokeStyle = 'black';
+  ctx.fillStyle = 'white';
+  ctx.lineWidth = 8;
+  ctx.lineCap = 'round';
+
+  // Hour marks
+  ctx.save();
+  for (var i = 0; i < 12; i++) {
+    ctx.beginPath();
+    ctx.rotate(Math.PI / 6);
+    ctx.moveTo(100, 0);
+    ctx.lineTo(120, 0);
+    ctx.stroke();
+  }
+  ctx.restore();
+
+  // Minute marks
+  ctx.save();
+  ctx.lineWidth = 5;
+  for (i = 0; i < 60; i++) {
+    if (i % 5!= 0) {
+      ctx.beginPath();
+      ctx.moveTo(117, 0);
+      ctx.lineTo(120, 0);
+      ctx.stroke();
+    }
+    ctx.rotate(Math.PI / 30);
+  }
+  ctx.restore();
+
+  var sec = now.getSeconds();
+  var min = now.getMinutes();
+  var hr  = now.getHours();
+  hr = hr >= 12 ? hr - 12 : hr;
+
+  ctx.fillStyle = 'black';
+
+  // write Hours
+  ctx.save();
+  ctx.rotate(hr * (Math.PI / 6) + (Math.PI / 360) * min + (Math.PI / 21600) *sec);
+  ctx.lineWidth = 14;
+  ctx.beginPath();
+  ctx.moveTo(-20, 0);
+  ctx.lineTo(80, 0);
+  ctx.stroke();
+  ctx.restore();
+
+  // write Minutes
+  ctx.save();
+  ctx.rotate((Math.PI / 30) * min + (Math.PI / 1800) * sec);
+  ctx.lineWidth = 10;
+  ctx.beginPath();
+  ctx.moveTo(-28, 0);
+  ctx.lineTo(112, 0);
+  ctx.stroke();
+  ctx.restore();
+
+  // Write seconds
+  ctx.save();
+  ctx.rotate(sec * Math.PI / 30);
+  ctx.strokeStyle = '#D40000';
+  ctx.fillStyle = '#D40000';
+  ctx.lineWidth = 6;
+  ctx.beginPath();
+  ctx.moveTo(-30, 0);
+  ctx.lineTo(83, 0);
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.arc(0, 0, 10, 0, Math.PI * 2, true);
+  ctx.fill();
+  ctx.beginPath();
+  ctx.arc(95, 0, 10, 0, Math.PI * 2, true);
+  ctx.stroke();
+  ctx.fillStyle = 'rgba(0, 0, 0, 0)';
+  ctx.arc(0, 0, 3, 0, Math.PI * 2, true);
+  ctx.fill();
+  ctx.restore();
+
+  ctx.beginPath();
+  ctx.lineWidth = 14;
+  ctx.strokeStyle = '#325FA2';
+  ctx.arc(0, 0, 142, 0, Math.PI * 2, true);
+  ctx.stroke();
+
+  ctx.restore();
+
+  window.requestAnimationFrame(clock);
+}
+
+window.requestAnimationFrame(clock);
+ + + +

{{EmbedLiveSample("An_animated_clock", "180", "180", "https://mdn.mozillademos.org/files/203/Canvas_animation2.png")}}

+ +

A looping panorama

+ +

In this example, a panorama is scrolled left-to-right. We're using an image of Yosemite National Park we took from Wikipedia, but you could use any image that's larger than the canvas.

+ +
var img = new Image();
+
+// User Variables - customize these to change the image being scrolled, its
+// direction, and the speed.
+
+img.src = 'https://mdn.mozillademos.org/files/4553/Capitan_Meadows,_Yosemite_National_Park.jpg';
+var CanvasXSize = 800;
+var CanvasYSize = 200;
+var speed = 30; // lower is faster
+var scale = 1.05;
+var y = -4.5; // vertical offset
+
+// Main program
+
+var dx = 0.75;
+var imgW;
+var imgH;
+var x = 0;
+var clearX;
+var clearY;
+var ctx;
+
+img.onload = function() {
+    imgW = img.width * scale;
+    imgH = img.height * scale;
+
+    if (imgW > CanvasXSize) { x = CanvasXSize - imgW; } // image larger than canvas
+    if (imgW > CanvasXSize) { clearX = imgW; } // image width larger than canvas
+    else { clearX = CanvasXSize; }
+    if (imgH > CanvasYSize) { clearY = imgH; } // image height larger than canvas
+    else { clearY = CanvasYSize; }
+
+    // get canvas context
+    ctx = document.getElementById('canvas').getContext('2d');
+
+    // set refresh rate
+    return setInterval(draw, speed);
+}
+
+function draw() {
+    ctx.clearRect(0, 0, clearX, clearY); // clear the canvas
+
+    // if image is <= Canvas Size
+    if (imgW <= CanvasXSize) {
+        // reset, start from beginning
+        if (x > CanvasXSize) { x = -imgW + x; }
+        // draw additional image1
+        if (x > 0) { ctx.drawImage(img, -imgW + x, y, imgW, imgH); }
+        // draw additional image2
+        if (x - imgW > 0) { ctx.drawImage(img, -imgW * 2 + x, y, imgW, imgH); }
+    }
+
+    // if image is > Canvas Size
+    else {
+        // reset, start from beginning
+        if (x > (CanvasXSize)) { x = CanvasXSize - imgW; }
+        // draw aditional image
+        if (x > (CanvasXSize-imgW)) { ctx.drawImage(img, x - imgW + 1, y, imgW, imgH); }
+    }
+    // draw image
+    ctx.drawImage(img, x, y,imgW, imgH);
+    // amount to move
+    x += dx;
+}
+
+ +

Below is the {{HTMLElement("canvas")}} in which the image is scrolled. Note that the width and height specified here must match the values of the CanvasXZSize and CanvasYSize variables in the JavaScript code.

+ +
<canvas id="canvas" width="800" height="200"></canvas>
+ +

{{EmbedLiveSample("A_looping_panorama", "830", "230")}}

+ +

Other examples

+ +
+
A basic ray-caster
+
A good example of how to do animations using keyboard controls.
+
Advanced animations
+
We will have a look at some advanced animation techniques and physics in the next chapter.
+
+ +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Web/API/Canvas_API/Tutorial/Advanced_animations")}}

diff --git a/files/de/web/api/canvas_api/tutorial/basic_usage/index.html b/files/de/web/api/canvas_api/tutorial/basic_usage/index.html new file mode 100644 index 0000000000..f89af7fa04 --- /dev/null +++ b/files/de/web/api/canvas_api/tutorial/basic_usage/index.html @@ -0,0 +1,154 @@ +--- +title: Grundlagen Canvas +slug: Web/Guide/HTML/Canvas_Tutorial/Grundlagen +tags: + - Canvas + - Graphics + - HTML + - Intermediate + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Basic_usage +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}
+ +
+

Beginnen wir diese Einführung mit einem Blick auf das {{Glossary("HTML")}}-Element {{HTMLElement("canvas")}} an sich. Am Ende wirst du in einem Canvas einen 2D-Context anlegen können und ein erstes Beispiel im Browser gezeichnet haben.

+
+ +

Das <canvas>-Element

+ +

Beginnen wir mit dem {{HTMLElement("canvas")}}-Element:

+ +
<canvas id="tutorial" width="150" height="150"></canvas>
+
+ +

Auf den ersten Blick sieht ein {{HTMLElement("canvas")}} wie ein {{HTMLElement("img")}}-Element aus, mit dem Unterschied, dass es die Attribute src und alt nicht besitzt. Das <canvas>-Element hat nur zwei Attribute - {{htmlattrxref("width", "canvas")}} und {{htmlattrxref("height", "canvas")}}. Diese sind optional und können auch über {{Glossary("DOM")}}-Eigenschaften gesetzt werden. Wenn die Attribute nicht gesetzt sind, bekommt das Element eine Breite von 300px und eine Höhe von 150px. Die Maße des canvas können auch über {{Glossary("CSS")}} gesetzt werden, allerdings wird das Bild dann auf die gesetzte Größe skaliert. Wenn das Verhältnis der CSS-Maße nicht zur ursprünglichen Größe passt, wird das Bild verzerrt.

+ +
+

Hinweis: Wenn das Ergebnis des Renderings verzerrt wirkt, dann setze bitte die Attribute width und height explizit im <canvas> und nicht über CSS.

+
+ +

Das id-Attribut ist eines der globalen Attribute in HTML, welche auf alle HTML-Elemente anwendbar sind (sein sollen). Es empfiehlt sich eine id zu vergeben, dadurch wird der Zugriff mit JavaScript/CSS vereinfacht.

+ +

Auch wenn man nicht mit CSS die Maße des canvas festlegen sollte, kann man jegliche andere CSS-Eigenschaften auf das {{HTMLElement("canvas")}}-Element anwenden (margin, border, background etc). Diese CSS-Regeln haben keinen Effekt auf das eigentliche Zeichnen (anders bei SVG)

+ +
+

Fallback

+ +

Einige ältere Browser unterstützen das {{HTMLElement("canvas")}}-Element nicht, deshalb sollte man einen sogenannten Fallback schreiben, welcher nur den Browsern angezeigt wird, welche das {{HTMLElement("canvas")}}-Element nicht unterstützen. Browser, die das {{HTMLElement("canvas")}}-Element unterstützen zeigen diesen Fallback nicht.

+ +

Beispiele:

+ +
<canvas id="stockGraph" width="150" height="150">
+  aktueller Wechselkurs: $3.15 +0.15
+</canvas>
+
+<canvas id="clock" width="150" height="150">
+  <img src="images/clock.png" width="150" height="150" alt=""/>
+</canvas>
+
+ +

Benötigter </canvas>-Tag

+ +

Im Unterschied zu dem {{HTMLElement("img")}}-Element, benötigt das {{HTMLElement("canvas")}}-Element den Endtag  (</canvas>).

+ +

Wenn kein Fallback definiert wird, reicht ein <canvas id="foo" ...></canvas> völlig aus.

+ +

Der Kontext

+ +

{{HTMLElement("canvas")}} stellt mehrere Kontexte zum Zeichnen auf dem canvas zur Verfügung. Der Standardkontext ist der 2D-Kontext. Es gibt noch WebGL (3D context) basierend auf OpenGL ES.

+ +

Zuerst ist das canvas leer. Mithilfe von JavaScript definiert man den Kontext und zeichnet mit diesem. Das {{HTMLElement("canvas")}}-Element hat eine Methode getContext(), mit der der Kontext definiert wird. getContext() benötigt nur einen String als Argument, den Typ des Kontextes. Für 2D-Grafiken ist dieser String "2d".

+ +
var canvas = document.getElementById("tutorial");
+var ctx = canvas.getContext("2d");
+
+ +

Die erste Zeile speichert in der Variablen canvas den DOM-Knoten unseres canvas mithilfe der {{domxref("document.getElementById()")}}-Methode. Danach wird die getContext()-Methode aufgerufen, um den Kontext in der Variablen ctx zu speichern.

+ +
+

Browserkompatibilität prüfen

+ +

Nicht nur der Fallback kann die Browserkompatibilität prüfen. Auch mit JavaScript ist dies möglich, in dem die Existenz der getContext()-Methode überprüft wird. Beispiel:

+ +
var canvas = document.getElementById('tutorial');
+
+if (canvas.getContext) {
+  var ctx = canvas.getContext('2d');
+  // weiterer Code
+} else {
+  alert("Dein Browser unterstützt das <canvas> Element nicht")
+}
+
+
+
+ +

HTML-Struktur

+ +

Eine einfache HTML-Struktur reicht für unser Tutorial erst einmal völlig aus.

+ +
+

Hinweis: Es gilt als schlechter Stil, Skripte direkt in HTML einzubetten. Wir tun das hier nur aus Gründen der Kompaktheit.

+
+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <title>Canvas tutorial</title>
+    <script type="text/javascript">
+      function draw() {
+        var canvas = document.getElementById('tutorial');
+        if (canvas.getContext) {
+          var ctx = canvas.getContext('2d');
+        }
+      }
+    </script>
+    <style type="text/css">
+      canvas { border: 1px solid black; }
+    </style>
+  </head>
+  <body onload="draw();">
+    <canvas id="tutorial" width="150" height="150"></canvas>
+  </body>
+</html>
+
+ +

Das Skript enthält eine Funktion draw(), die nach dem Laden der Seite ausgeführt wird; dies geschieht durch Hören auf das {{event("load")}}-Ereignis des Dokuments. Diese oder eine ähnliche Funktion könnte auch durch {{domxref("WindowTimers.setTimeout", "window.setTimeout()")}}, {{domxref("WindowTimers.setInterval", "window.setInterval()")}} oder jeden anderen Ereignisbehandler aufgerufen werden, solange die Seite vorher geladen wurde.

+ +

So sieht die Vorlage in Aktion aus. Wie man hier sehen kann, ist sie anfangs leer.

+ +

{{EmbedLiveSample("HTML-Struktur", 160, 160)}}

+ +

Einfaches Beispiel

+ +

Im einfachen Beispiel werden zwei Rechtecke gezeichnet, eins mit Transparenz.

+ +
<!DOCTYPE html>
+<html>
+ <head>
+  <script type="application/javascript">
+    function draw() {
+      var canvas = document.getElementById("canvas");
+      if (canvas.getContext) {
+        var ctx = canvas.getContext("2d");
+
+        ctx.fillStyle = "rgb(200,0,0)";
+        ctx.fillRect(10, 10, 55, 50);
+
+        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
+        ctx.fillRect(30, 30, 55, 50);
+      }
+    }
+  </script>
+ </head>
+ <body onload="draw();">
+   <canvas id="canvas" width="150" height="150"></canvas>
+ </body>
+</html>
+
+ +

Demo:

+ +

{{EmbedLiveSample("Einfaches_Beispiel", 160, 160, "https://mdn.mozillademos.org/files/228/canvas_ex1.png")}}

+ +

{{PreviousNext("Web/Guide/HTML/Canvas_tutorial", "Web/Guide/HTML/Canvas_tutorial/Drawing_shapes")}}

diff --git a/files/de/web/api/canvas_api/tutorial/drawing_shapes/index.html b/files/de/web/api/canvas_api/tutorial/drawing_shapes/index.html new file mode 100644 index 0000000000..f23e7664b5 --- /dev/null +++ b/files/de/web/api/canvas_api/tutorial/drawing_shapes/index.html @@ -0,0 +1,453 @@ +--- +title: Formen zeichnen mit Canvas +slug: Web/Guide/HTML/Canvas_Tutorial/Formen_zeichnen +translation_of: Web/API/Canvas_API/Tutorial/Drawing_shapes +--- +

{{CanvasSidebar}}

+ +

Koordinatensystem

+ +

Bevor wir mit dem Zeichnen beginnen können, müssen wir über das canvas grid oder Koordinatensystem sprechen. Unser HTML-Skelett von der vorigen Seite hatte ein canvas-Element mit den Maßen 150 Pixel Höhe und 150 Pixel Breite. Zur Rechten sieht man diesen canvas, über den das Standard-Grid gelegt wurde. Normalerweise entspricht eine Einheit einem Pixel auf dem canvas. Der Ursprung dieses Rasters befindet sich in der oberen linken Ecke, im Punkt (0,0). Alle Elemente werden relativ zum Ursprung positioniert. Die Position des blauen Quadrates ist also x Pixel vom linken Rand und y Pixel vom oberen Rand entfernt, am Punkt (x,y). Später in diesem Tutorial werden wir sehen, wie wir den Ursprung an eine andere Position verschieben, das Koordinatensystem rotieren und sogar skalieren können, aber für's Erste behalten wir die Standardeinstellungen bei.

+ +

Rechtecke zeichnen

+ +

Nicht wie in SVG, unterstützt {{HTMLElement("canvas")}} nur eine einfache Form: das Rechteck. Andere Formen werden mithilfe von Pfaden gezeichnet, dazu später mehr.

+ +
+

Es gibt drei Funktionen, welche auf verschiedenste Art Rechtecke zeichnen:

+ +
+
fillRect(x, y, breite, höhe)
+
Zeichnet ein gefülltes Rechteck
+
strokeRect(x, y, breite, höhe)
+
Zeichnet den Rahmen eines Rechteckes
+
clearRect(x, y, breite, höhe)
+
Der Bereich des Rechteckes wird transparent
+
+ +

Alle drei Funktionen benötigen die selben drei Argumente. x und y beschreibt die Position (siehe Koordinatensystem). breite und höhe beschreiben die Größe des Rechteckes.

+ +

Beispiel mit Rechtecken

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    ctx.fillRect(25, 25, 100, 100);
+    ctx.clearRect(45, 45, 60, 60);
+    ctx.strokeRect(50, 50, 50, 50);
+  }
+}
+ +

Demo:

+ +

{{EmbedLiveSample("Beispiel_mit_Rechtecken", 160, 160, "https://mdn.mozillademos.org/files/245/Canvas_rect.png")}}

+ +

Die fillRect()-Methode zeichnet ein 100px großes, schwarzes Quadrat. Die clearRect()-Methode löscht danach ein 60px großes Quadrat in der Mitte des schwarzen Quadrates. Anschließend zeichnet die strokeRect()-Methode einen 50px großen schwarzen Rahmen in der Mitte.

+ +

Später werden wir zwei alternative Methoden für clearRect() behandeln und sehen, wie man die Füll- und Konturfarbe ändern kann.

+ +

Anders als die Pfadmethoden zeichnen diese drei Rechteckmethoden sofort auf den canvas.

+ +

Pfade zeichnen

+ +

Um andere Formen mithilfe von Pfaden zu zeichnen, benötigt man einige weitere Schritte. Zuerst muss man einen Pfad beginnen. Danach kommen die Pfadbefehle. Zuletzt wird dieser gezeichnet oder gefüllt. Diese Methoden werden hierfür genutzt:

+ +
+
beginPath()
+
Erstellt einen Pfad und beendet ggf. einen älteren.
+
closePath()
+
Beendet den Pfad und verbindet den Startpunkt mit dem Endpunkt.
+
stroke()
+
Zeichnet die Kontur des Pfades.
+
fill()
+
Zeichnet die Füllung des Pfades.
+
+ +

Zuerst wird also die beginPath()-Methode ausgeführt. Danach kommen weitere Pfadanweisung wie Linien oder Kurven. Ein weiterer Aufruf der Methode beginPath() oder ein Aufruf der Methode closePath() löscht die Pfadanweisungen. Optional kann nun closePath() ausgeführt werden.

+ +
Hinweis: Wenn fill() ausgeführt wird, wird automatisch der Pfad beendet, sodass closePath() nicht mehr ausgeführt werden muss. Da ist nicht der Fall wenn stroke() ausgeführt wird.
+ +

Ein Dreieck zeichnen

+ +

So sähe zum Beispiel der Code aus, um ein Dreieck zu zeichnen:

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    ctx.beginPath();
+    ctx.moveTo(75, 50);
+    ctx.lineTo(100, 75);
+    ctx.lineTo(100, 25);
+    ctx.fill();
+  }
+}
+ +

Demo:

+ +

{{EmbedLiveSample("Ein_Dreieck_zeichnen", 160, 160)}}

+ +

Stift bewegen

+ +

Eine sehr sinnvolle Methode ist moveTo(). Sie zeichnet zwar nichts, verändert allerdings die Position des Stiftes, sodass spätere Methoden nicht beim Punkt (0, 0) anfangen.

+ +
+
moveTo(x, y)
+
Bewegt den Stift zu der Koordinate (x , y).
+
+ +

Meist wird direkt nach dem Aufruf von beginPath() moveTo() ausgeführt. Außerdem kann man moveTo() für nichtverbundene Pfade benutzen. Beispiel (moveTo()-Aufrufe sind rote Linien):

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+     var ctx = canvas.getContext('2d');
+
+     ctx.beginPath();
+     ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Outer circle
+     ctx.moveTo(110, 75);
+     ctx.arc(75, 75, 35, 0, Math.PI, false);    // Mund
+     ctx.moveTo(65, 65);
+     ctx.arc(60, 65, 5, 0, Math.PI * 2, true);  // Linkes Auge
+     ctx.moveTo(95, 65);
+     ctx.arc(90, 65, 5, 0, Math.PI * 2, true);  // Rechtes Auge
+     ctx.stroke();
+  }
+}
+ +

Demo:

+ +

{{EmbedLiveSample("Stift_bewegen", 160, 160, "https://mdn.mozillademos.org/files/252/Canvas_smiley.png")}}

+ +
+

Hinweis: arc() zeichnet einen Kreisbogen. Mehr dazu: {{anch("Kreisbögen")}}.

+
+ +

Linien

+ +

Für Linien verwendet man die lineTo()-Methode:

+ +
+
lineTo(x, y)
+
Zeichnet eine Linie von der aktuellen Stiftposition zu dem Punkt (x, y).
+
+ +

Diese Methode erwartet wie moveTo() zwei Argumente: x und y, welche die Koordinate des Linienendes ist. Der Startpunkt wurde Mithilfe anderer Methoden schon festgelegt. Anschließend ist das Linienende der neue Startpunkt.

+ +

Beispiel mit zwei Dreiecken:

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    // Filled triangle
+    ctx.beginPath();
+    ctx.moveTo(25, 25);
+    ctx.lineTo(105, 25);
+    ctx.lineTo(25, 105);
+    ctx.fill();
+
+    // Stroked triangle
+    ctx.beginPath();
+    ctx.moveTo(125, 125);
+    ctx.lineTo(125, 45);
+    ctx.lineTo(45, 125);
+    ctx.closePath();
+    ctx.stroke();
+  }
+}
+ +

Es beginnt mit der Ausführung von beginPath() um eine neue Form zu beginnen. Danach wird mit moveTo() der Startpunkt festgelegt. Danach werden die Linien gezeichnet.

+ +

{{EmbedLiveSample("Linien", 160, 160, "https://mdn.mozillademos.org/files/238/Canvas_lineTo.png")}}

+ +

Kreisbögen

+ +

Um Kreise oder Kreisbögen zu zeichnen, benutzt man die arc()-Methode.

+ +
+
arc(x, y, radius, startWinkel, endWinkel, uhrzeigersinn)
+
Zeichnet einen Kreisbogen.
+
+ +

Diese Methode benötigt sechs Parameter: x und y sind die Koordinaten des Mittelpunktes des Kreisbogens. radius ist der Radius des Kreisbogens. startWinkel und endWinkel definieren die Punkte auf dem Kreis in rad. Der uhrzeigersinn-Parameter ist true, wenn der Kreisbogen gegen den Uhrzeigersinn und false wenn er im Uhrzeigersinn gezeichnet werden soll.

+ +
+

Hinweis: Die Winkelzahlen werden in rad angegeben, nicht in deg. Die Umrechnungsformel lautet: rad = (Math.PI / 180) * deg.

+
+Dieses Beispiel zeigt Kreisbügen mit den unterschiedlichsten Parametern:
+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    for (var i = 0; i < 4; i++) {
+      for (var j = 0; j < 3; j++) {
+        ctx.beginPath();
+        var x = 25 + j * 50; // x coordinate
+        var y = 25 + i * 50; // y coordinate
+        var radius = 20; // Arc radius
+        var startAngle = 0; // Starting point on circle
+        var endAngle = Math.PI + (Math.PI * j) / 2; // End point on circle
+        var anticlockwise = i % 2 == 0 ? false : true; // clockwise or anticlockwise
+
+        ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
+
+        if (i > 1) {
+          ctx.fill();
+        } else {
+          ctx.stroke();
+        }
+      }
+    }
+  }
+}
+{{EmbedLiveSample("Kreisbögen", 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png")}} + +

Bezier und quadratische Kurven

+ +

Bézierkurven sind in kubischer und quadratischer Form enthalten. Damit kann man ziemlich komplexe Strukturen zeichnen.

+ +
+
quadraticCurveTo(cp1x, cp1y, x, y)
+
Zeichnet eine quadratische Bézierkurve von der aktuellen Stiftposition zu x und y, mithilfe des Kontrollpunktes mit den Koordinaten (cp1x, cp1y).
+
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
+
Zeichnet eine quadratische Bézierkurve von der aktuellen Stiftposition zu x und y, mithilfe der Kontrollpunkte mit den Koordinaten (cp1x, cp1y) und (cp2x, cp2y).
+
+ +

Den Unterschied zwischen den beiden Funktionen lässt sich am Besten durch die beiden Bilder rechts erklären: Oben die quadratische und unten die kubische.

+ +

Die Kontrollpunkte sind hier rot, die Start- und Endpunkte blau gekennzeichnet.

+ +

Quadratische Bézierkurven

+ +

Dieses Beispiel zeichnet Mithilfe von Bézierkurven eine Sprechblase:

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    // Quadratric curves example
+    ctx.beginPath();
+    ctx.moveTo(75, 25);
+    ctx.quadraticCurveTo(25, 25, 25, 62.5);
+    ctx.quadraticCurveTo(25, 100, 50, 100);
+    ctx.quadraticCurveTo(50, 120, 30, 125);
+    ctx.quadraticCurveTo(60, 120, 65, 100);
+    ctx.quadraticCurveTo(125, 100, 125, 62.5);
+    ctx.quadraticCurveTo(125, 25, 75, 25);
+    ctx.stroke();
+  }
+}
+ +

{{EmbedLiveSample("Quadratische_Bézierkurven", 160, 160, "https://mdn.mozillademos.org/files/243/Canvas_quadratic.png")}}

+ +

Kubische Bézierkurven

+ +

Dieses Beispiel zeichnet ein Herz Mithilfe von kubischen Bézierkurven.

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    // Cubic curves example
+    ctx.beginPath();
+    ctx.moveTo(75, 40);
+    ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
+    ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
+    ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
+    ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
+    ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
+    ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
+    ctx.fill();
+  }
+}
+ +

{{EmbedLiveSample("Kubische_Bézierkurven", 160, 160, "https://mdn.mozillademos.org/files/207/Canvas_bezier.png")}}

+ +

Rechtecke

+ +

Es gibt auch eine Rechtecksmethode für Pfade:

+ +
+
rect(x, y, width, height)
+
Zeichnet ein Rechteck.
+
+ +

Nachdem diese Methode ausgeführt wurde, wird automatisch moveTo(0, 0) ausgeführt.

+ +

Kombinationen

+ +

Mit Kombinationen all dieser Pfadmethoden können die komplexesten Formen gezeichnet werden. In diesem letzten Beispiel wird ein Spielcharakter gezeichnet:

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    roundedRect(ctx, 12, 12, 150, 150, 15);
+    roundedRect(ctx, 19, 19, 150, 150, 9);
+    roundedRect(ctx, 53, 53, 49, 33, 10);
+    roundedRect(ctx, 53, 119, 49, 16, 6);
+    roundedRect(ctx, 135, 53, 49, 33, 10);
+    roundedRect(ctx, 135, 119, 25, 49, 10);
+
+    ctx.beginPath();
+    ctx.arc(37, 37, 13, Math.PI / 7, -Math.PI / 7, false);
+    ctx.lineTo(31, 37);
+    ctx.fill();
+
+    for (var i = 0; i < 8; i++) {
+      ctx.fillRect(51 + i * 16, 35, 4, 4);
+    }
+
+    for (i = 0; i < 6; i++) {
+      ctx.fillRect(115, 51 + i * 16, 4, 4);
+    }
+
+    for (i = 0; i < 8; i++) {
+      ctx.fillRect(51 + i * 16, 99, 4, 4);
+    }
+
+    ctx.beginPath();
+    ctx.moveTo(83, 116);
+    ctx.lineTo(83, 102);
+    ctx.bezierCurveTo(83, 94, 89, 88, 97, 88);
+    ctx.bezierCurveTo(105, 88, 111, 94, 111, 102);
+    ctx.lineTo(111, 116);
+    ctx.lineTo(106.333, 111.333);
+    ctx.lineTo(101.666, 116);
+    ctx.lineTo(97, 111.333);
+    ctx.lineTo(92.333, 116);
+    ctx.lineTo(87.666, 111.333);
+    ctx.lineTo(83, 116);
+    ctx.fill();
+
+    ctx.fillStyle = 'white';
+    ctx.beginPath();
+    ctx.moveTo(91, 96);
+    ctx.bezierCurveTo(88, 96, 87, 99, 87, 101);
+    ctx.bezierCurveTo(87, 103, 88, 106, 91, 106);
+    ctx.bezierCurveTo(94, 106, 95, 103, 95, 101);
+    ctx.bezierCurveTo(95, 99, 94, 96, 91, 96);
+    ctx.moveTo(103, 96);
+    ctx.bezierCurveTo(100, 96, 99, 99, 99, 101);
+    ctx.bezierCurveTo(99, 103, 100, 106, 103, 106);
+    ctx.bezierCurveTo(106, 106, 107, 103, 107, 101);
+    ctx.bezierCurveTo(107, 99, 106, 96, 103, 96);
+    ctx.fill();
+
+    ctx.fillStyle = 'black';
+    ctx.beginPath();
+    ctx.arc(101, 102, 2, 0, Math.PI * 2, true);
+    ctx.fill();
+
+    ctx.beginPath();
+    ctx.arc(89, 102, 2, 0, Math.PI * 2, true);
+    ctx.fill();
+  }
+}
+
+// A utility function to draw a rectangle with rounded corners.
+
+function roundedRect(ctx, x, y, width, height, radius) {
+  ctx.beginPath();
+  ctx.moveTo(x, y + radius);
+  ctx.lineTo(x, y + height - radius);
+  ctx.arcTo(x, y + height, x + radius, y + height, radius);
+  ctx.lineTo(x + width - radius, y + height);
+  ctx.arcTo(x + width, y + height, x + width, y + height-radius, radius);
+  ctx.lineTo(x + width, y + radius);
+  ctx.arcTo(x + width, y, x + width - radius, y, radius);
+  ctx.lineTo(x + radius, y);
+  ctx.arcTo(x, y, x, y + radius, radius);
+  ctx.stroke();
+}
+ +
+

Demo:

+ +

{{EmbedLiveSample("Kombinationen", 160, 160)}}

+ +

{{PreviousNext("Web/Guide/HTML/Canvas_tutorial/Basic_usage", "Web/Guide/HTML/Canvas_tutorial/Using_images")}}

+
+
diff --git a/files/de/web/api/canvas_api/tutorial/drawing_text/index.html b/files/de/web/api/canvas_api/tutorial/drawing_text/index.html new file mode 100644 index 0000000000..1cd3f0bfc6 --- /dev/null +++ b/files/de/web/api/canvas_api/tutorial/drawing_text/index.html @@ -0,0 +1,165 @@ +--- +title: Text zeichnen +slug: Web/Guide/HTML/Canvas_Tutorial/Drawing_text +tags: + - Canvas + - Fortgeschritten + - Grafik + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Drawing_text +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}
+ +
+

Nachdem wir im vorigen Kapitel gesehen haben, wie man Gestaltung und Farben anwendet , werden wir nun einen Blick darauf werfen, wie man Text auf ein canvas zeichnet.

+
+ +

Text zeichnen

+ +

Der Rendering-Kontext hält zwei Methoden zum zeichnen von Text bereit:

+ +
+
{{domxref("CanvasRenderingContext2D.fillText", "fillText(text, x, y [, maxWidth])")}}
+
Füllt einen gegebenen Text an den gegebenen (x,y)-Koordinaten. Optional mit einer maximalen Breite, die zu zeichnen ist.
+
{{domxref("CanvasRenderingContext2D.strokeText", "strokeText(text, x, y [, maxWidth])")}}
+
Umrandet einen gegebenen Text an den gegebenen (x,y)-Koordinaten. Optional mit einer maximalen Breite, die zu zeichnen ist.
+
+ +

ein fillText-Beispiel

+ +

Der Text wird mit dem aktuellen fillStyle gefüllt.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.font = '48px serif';
+  ctx.fillText('Hello world', 10, 50);
+}
+ + + +

{{EmbedLiveSample("A_fillText_example", 310, 110)}}

+ +

ein strokeText-Beispiel

+ +

Der Text wird mit dem aktuellen strokeStyle umrandet.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.font = '48px serif';
+  ctx.strokeText('Hello world', 10, 50);
+}
+ + + +

{{EmbedLiveSample("A_strokeText_example", 310, 110)}}

+ +

Text gestalten

+ +

In den obigen Beispielen nutzen wir bereits die font-Eigentschaft, um den Text ein wenig größer als standardmäßig zu machen. Es gibt ein paar mehr Eigenschaften, die es erlauben, das Zeichnen von Text auf dem canvas zu beeinflussen:

+ +
+
{{domxref("CanvasRenderingContext2D.font", "font = value")}}
+
Der aktuell genutzte Text-Stil, der zum Zeichnen genutzt wird. Dieser String nutzt die selbe Syntax wie die CSS {{cssxref("font")}}-Eigenschaft. Die Standard-Schriftart ist 10px sans-serif.
+
{{domxref("CanvasRenderingContext2D.textAlign", "textAlign = value")}}
+
Einstellung der Text-Ausrichtung. Mögliche Werte: start, end, left, right oder center. Der Standard-Wert ist start.
+
{{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline = value")}}
+
Baseline alignment setting. Possible values: top, hanging, middle, alphabetic, ideographic, bottom. The default value is alphabetic.
+
{{domxref("CanvasRenderingContext2D.direction", "direction = value")}}
+
Directionality. Possible values: ltr, rtl, inherit. The default value is inherit.
+
+ +

These properties might be familiar to you, if you have worked with CSS before.

+ +

The following diagram from the WHATWG demonstrates the various baselines supported by the textBaseline property.The top of the em square is +roughly at the top of the glyphs in a font, the hanging baseline is +where some glyphs like आ are anchored, the middle is half-way +between the top of the em square and the bottom of the em square, +the alphabetic baseline is where characters like Á, ÿ, +f, and Ω are anchored, the ideographic baseline is +where glyphs like 私 and 達 are anchored, and the bottom +of the em square is roughly at the bottom of the glyphs in a +font. The top and bottom of the bounding box can be far from these +baselines, due to glyphs extending far outside the em square.

+ +

A textBaseline example

+ +

Edit the code below and see your changes update live in the canvas:

+ +
ctx.font = '48px serif';
+ctx.textBaseline = 'hanging';
+ctx.strokeText('Hello world', 0, 100);
+
+ + + +

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

+ +

Advanced text measurements

+ +

In the case you need to obtain more details about the text, the following method allows you to measure it.

+ +
+
{{domxref("CanvasRenderingContext2D.measureText", "measureText()")}}
+
Returns a {{domxref("TextMetrics")}} object containing the width, in pixels, that the specified text will be when drawn in the current text style.
+
+ +

The following code snippet shows how you can measure a text and get its width.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var text = ctx.measureText('foo'); // TextMetrics object
+  text.width; // 16;
+}
+
+ +

Gecko-specific notes

+ +

In Gecko (the rendering engine of Firefox, Firefox OS and other Mozilla based applications), some prefixed APIs were implemented in earlier versions to draw text on a canvas. These are now deprecated and removed, and are no longer guaranteed to work.

+ +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}

diff --git a/files/de/web/api/canvas_api/tutorial/index.html b/files/de/web/api/canvas_api/tutorial/index.html new file mode 100644 index 0000000000..487f5b7984 --- /dev/null +++ b/files/de/web/api/canvas_api/tutorial/index.html @@ -0,0 +1,51 @@ +--- +title: Canvas Tutorial +slug: Web/Guide/HTML/Canvas_Tutorial +translation_of: Web/API/Canvas_API/Tutorial +--- +

+ +

<canvas> ("Leinwand") ist ein HTML Element, auf das man mit Hilfe von Skripten (normalerweise JavaScript) Animationen, Grafiken oder Bilder projiziert. Die Bilder rechts zeigen Beispiele, die sich mit dem <canvas>-Element erstellen lassen.

+ +

Das <canvas>-Element wurde zuerst von Apple für das Mac OS X Dashboard vorgestellt und später in Safari und Google Chrome implementiert. Gecko 1.8-basierte Browser wie Firefox 1.5 und jünger unterstützen dieses Element ebenfalls. Das <canvas>-Element ist Teil der WhatWG Web applications 1.0 Spezifikation (HTML5).

+ +

Dieses Tutorial beschreibt die Grundlagen des Zeichnens von 2d-Grafiken mit dem <canvas>-Element. Die Beispiele sollen die Möglichkeiten des Canvas aufzeigen. Der zugehörige Code dient als Einführung und kann als Vorlage für eigenen Content dienen.

+ +

Vorbereitung

+ +

Das <canvas>-Element ("Leinwand") sinnvoll zu nutzen ist nicht schwierig, setzt aber ein einfaches Verständnis von HTML und JavaScript voraus. Einige ältere Browser unterstützen das <canvas>-Element nicht. Die Standardgröße des Canvas beträgt 300 x 150 Pixel (Breite x Höhe). Selbstverständlich lassen diese sich über die Attribute height und width oder mit Hilfe von CSS ändern. Um auf dem <canvas>-Element zu zeichnen, nutzen Entwickler meist die JavaScript-Canvas-API "on the fly".

+ +

In diesem Tutorial

+ + + +

Siehe auch

+ + + +
{{ Next("Web/Guide/HTML/Canvas_tutorial/Basic_usage") }}
diff --git a/files/de/web/api/canvas_api/tutorial/optimizing_canvas/index.html b/files/de/web/api/canvas_api/tutorial/optimizing_canvas/index.html new file mode 100644 index 0000000000..fc1678c71a --- /dev/null +++ b/files/de/web/api/canvas_api/tutorial/optimizing_canvas/index.html @@ -0,0 +1,118 @@ +--- +title: Canvas optimieren +slug: Web/Guide/HTML/Canvas_Tutorial/Canvas_optimieren +tags: + - Canvas + - Fortgeschritten + - Grafik + - HTML + - HTML5 + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Optimizing_canvas +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}
+ +
+

Das {{HTMLElement("canvas")}}-Element ist einer der am meisten verbreiteten Standards, um 2D-Grafiken im Web zu erzeugen. Es wird oft für Spiele und komplexe Visualisierungen eingesetzt. Reizen Webseiten und Apps das Canvas jedoch zu sehr aus, lässt die Performance nach. Dieser Artikel soll Hilfestellung für die Optimierung der Nutzung des Canvas-Elements geben, um sicherzustellen, dass Ihre Webseite oder App performant ist.

+
+ +

Tipps zur Performance

+ +

Dies ist eine Sammlung von Tipps, die Helfen, die Performance zu verbessern.

+ +

Vorrendern von ähnlichen oder sich wiederholenden Objekten auf einem Offscreen-Canvas

+ +

Falls Sie komplexe Zeichenoperationen in jedem Frame ausführen, ziehen Sie in Betracht, ein Offscreen-Canvas zu erzeugen. Damit können Sie Objekte einmal (oder wann immer Änderungen stattfinden) auf dem Offscreen-Canvas zeichnen und in jedem Frame das Offscreen-Canvas zeichnen.

+ +
myEntity.offscreenCanvas = document.createElement('canvas');
+myEntity.offscreenCanvas.width = myEntity.width;
+myEntity.offscreenCanvas.height = myEntity.height;
+myEntity.offscreenContext = myEntity.offscreenCanvas.getContext('2d');
+
+myEntity.render(myEntity.offscreenContext);
+
+ +

Vermeiden Sie Gleitkomma-Koordinaten

+ +

Falls Sie Objekte auf dem Canvas mit Gleitkommazahlen als Koordinaten zeichnen, müssen Subpixel gerendert werden.

+ +
ctx.drawImage(myImage, 0.3, 0.5);
+
+ +

Dadurch muss der Browser zusätzliche Berechnungen durchführen, um eine Kantenglättung zu erzielen. Um dies zu verhindern, stellen Sie sicher, dass Sie alle Koordinaten in Aufrufen von {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}} runden, zum Beispiel mit Hilfe von {{jsxref("Math.floor()")}}.

+ +

Skalieren Sie keine Bilder in drawImage

+ +

Laden Sie mehrere Größen Ihrer Bilder auf ein Offscreen-Canvas, anstatt sie andauernd in {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}} zu skalieren.

+ +

Benutzen Sie mehrere Canvas-Ebenen für komplexe Szenen

+ +

Möglicherweise haben Sie einige Elemente, die sich oft ändern oder bewegen, während andere Dinge (wie zum Beispiel die UI) sich nie ändern. Diese Situation können Sie optimieren, indem Sie durch die Erzeugung mehrerer Canvas-Elemente Ebenen erzeugen.

+ +

Zum Beispiel können Sie eine UI-Ebene erzeugen, die über allen anderen Ebenen liegt und nur während Benutzereingaben gezeichnet wird. Zusätzlich kann es eine Spiel-Ebene geben, die alle oft veränderten Objekte enthält, sowie eine Hintergrund-Ebene, deren Objekte sich selten ändern.

+ +
<div id="stage">
+  <canvas id="ui-layer" width="480" height="320"></canvas>
+  <canvas id="game-layer" width="480" height="320"></canvas>
+  <canvas id="background-layer" width="480" height="320"></canvas>
+</div>
+
+<style>
+  #stage {
+    width: 480px;
+    height: 320px;
+    position: relative;
+    border: 2px solid black
+  }
+  canvas { position: absolute; }
+  #ui-layer { z-index: 3 }
+  #game-layer { z-index: 2 }
+  #background-layer { z-index: 1 }
+</style>
+
+ +

Nutzen Sie CSS für große Hintergrundbilder

+ +

Falls Sie wie die meisten Spiele ein statisches Hintergrundbild haben, nutzen Sie ein simples {{HTMLElement("div")}}-Element mit der CSS-Eigenschaft {{cssxref("background")}} und positionieren Sie es unter dem Canvas. Dadurch verhindern Sie ein permanentes Neuzeichnen des Bildes in jedem Frame.

+ +

Skalieren Sie das Canvas mit CSS-Transformationen

+ +

CSS-Transformationen sind schneller, da sie die Grafikkarte nutzen. Im besten Fall skalieren Sie das Canvas nicht, oder haben ein kleineres Canvas, das Sie hochskalieren, als dass Sie ein großes Canvas herunterskalieren. Für Firefox OS ist die Zielgröße 480 x 320 px.

+ +
var scaleX = window.innerWidth / canvas.width;
+var scaleY = window.innerHeight / canvas.height;
+
+var scaleToFit = Math.min(scaleX, scaleY);
+var scaleToCover = Math.max(scaleX, scaleY);
+
+stage.style.transformOrigin = '0 0'; //scale from top left
+stage.style.transform = 'scale(' + scaleToFit + ')';
+
+ +

Nutzen Sie das moz-opaque Attribut (nur Gecko)

+ +

Falls Ihr Spiel ein Canvas nutzt, das nicht transparent sein muss, setzen Sie das moz-opaque Attribut im Canvas-Tag. Diese Information kann intern genutzt werden, um das Zeichnen zu optimieren.

+ +
<canvas id="myCanvas" moz-opaque></canvas>
+ +

Weitere Tipps

+ + + +

Siehe auch

+ + + +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}

diff --git a/files/de/web/api/canvas_api/tutorial/using_images/index.html b/files/de/web/api/canvas_api/tutorial/using_images/index.html new file mode 100644 index 0000000000..b636807f97 --- /dev/null +++ b/files/de/web/api/canvas_api/tutorial/using_images/index.html @@ -0,0 +1,324 @@ +--- +title: Bilder +slug: Web/Guide/HTML/Canvas_Tutorial/Bilder +translation_of: Web/API/Canvas_API/Tutorial/Using_images +--- +

{{CanvasSidebar}}

+ +

Natürlich können auch Bilder gezeichnet werden. Diese können die unterschiedlichsten Formate haben: PNG, GIF, JPEG oder bestimmte HTML Elemente.

+ +

Um Bilder zu importieren bedarf es bloß zwei Schritte:

+ +
    +
  1. Ein {{domxref("HTMLImageElement")}} Objekt erzeugen oder das HTML Element selektieren.
    2. +
  2. Das Bild mithilfe der drawImage() Funktion zeichnen.
    3. +
+ +

Bilder importieren

+ +

Die canvas API unterstützt folgende Typen als Bilder:

+ +
+
{{domxref("HTMLImageElement")}}
+
Diese Bilder können mithilfe des Image() Konstruktor oder mithilfe eines {{HTMLElement("img")}} Element erstellt werden.
+
{{domxref("HTMLVideoElement")}}
+
Der aktuelle Frame des {{HTMLElement("video")}} Element wird als Bild genutzt.
+
{{domxref("HTMLCanvasElement")}}
+
Ein anderes {{HTMLElement("canvas")}} Element kann ebenfalls als Bild dienen.
+
{{domxref("ImageBitmap")}}
+
Eine hochleistungsfähige Bitmap, welche mit niedriger Verzögerung gerendert werden kann. Sie lässt sich aus allen der oben genannten Quellen, sowie aus mehreren weitern erstellen.
+
+ +

These sources are collectively referred to by the type {{domxref("CanvasImageSource")}}.

+ +

There are several ways to get images for use on a canvas.

+ +

Bilder von derselben Seite

+ +

Um Bilder von derselben Seite zu bekommen, können diese Methoden genutzt werden:

+ + + +

Bilder von anderen Seiten nutzen

+ +

Mithilfe des {{htmlattrxref("crossorigin", "img")}} Attributs eines {{domxref("HTMLImageElement")}} ist es möglich die Erlaubnis zur Benutzung eines Bildes von einer anderen Domain zu nutzen. Wenn die Domain jenen Zugriff gestattet, kann das Image genutzt werden und das Bild wird wie gewollt angezeigt; andernfalls entsteht ein "getaintes Canvas".

+ +

Andere Canvas Elemente benutzen

+ +

Genau wie normalen Bildern auch, können wir ein anderes Canvas durch {{domxref("document.getElementsByTagName()")}} oder {{domxref("document.getElementById()")}} ansprechen.

+ +

Sei dabei sicher, dass du auf deinem Canvas etwas gezeichnet hast, bevor du es im Zielcanvas verwendest.

+ +

Eine sinnvoller Einsatz ist zum Beispiel das zweite Canvas als Vorschaubild (Thumbnail) des ersten zu verwenden.

+ +

Ein Bild von Grund auf

+ +

Eine andere Option ist ein neues {{domxref("HTMLImageElement")}} in JavaScript zu erstellen. Um das zu tun, können wir den Image()-Konstruktor verwenden:

+ +
var img = new Image(); // Erstelle neues Image-Objekt
+img.src = 'myImage.png'; // Setze den Pfad zum Bild
+ +

Wird dieses Skript ausgeführt, fängt das Bild an zu laden.

+ +
+

Achtung: Wenn drawImage() vor dem Laden des Bildes ausgeführt wird, wird nichts passieren (In älteren Browsern kann es eine Fehlermeldung geben). Um jenen Fehler zu vermeiden, muss also sichergestellt werden, dass das load-Event benutzt wird.

+
+ +
var img = new Image();   // Erstelle neues Image-Objekt
+img.addEventListener("load", function() {
+  // füge hier den drawImage()-Befehl ein
+}, false);
+img.src = 'myImage.png'; // Setze den Pfad zum Bild
+
+ +

Wenn nur ein externes Bild geladen werden muss, ist das eine gute Möglichkeit. Wenn jedoch mehrere Bilder benötigt werden, sollte es besser anders gelöst werden. Es ist nicht das Ziel deises Tutorials auf das Vorladen von Bildern einzugehen, aber für eine komplette Lösung kannst du dir JavaScript Image Preloader angucken (ist leder auf Englisch).

+ +

Embedding an image via data: URL

+ +

Another possible way to include images is via the data: url. Data URLs allow you to completely define an image as a Base64 encoded string of characters directly in your code.

+ +
var img_src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';
+
+ +

One advantage of data URLs is that the resulting image is available immediately without another round trip to the server. Another potential advantage is that it is also possible to encapsulate in one file all of your CSS, JavaScript, HTML, and images, making it more portable to other locations.

+ +

Some disadvantages of this method are that your image is not cached, and for larger images the encoded url can become quite long.

+ +

Using frames from a video

+ +

You can also use frames from a video being presented by a {{HTMLElement("video")}} element (even if the video is not visible). For example, if you have a {{HTMLElement("video")}} element with the ID "myvideo", you can do this:

+ +
function getMyVideo() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    return document.getElementById('myvideo');
+  }
+}
+
+ +

This returns the {{domxref("HTMLVideoElement")}} object for the video, which, as covered earlier, is one of the objects that can be used as a CanvasImageSource.

+ +

Drawing images

+ +

Once we have a reference to our source image object we can use the drawImage() method to render it to the canvas. As we will see later the drawImage() method is overloaded and has several variants. In its most basic form it looks like this:

+ +
+
drawImage(image, x, y)
+
Draws the CanvasImageSource specified by the image parameter at the coordinates (x, y).
+
+ +

Example: A simple line graph

+ +

In the following example, we will use an external image as the backdrop for a small line graph. Using backdrops can make your script considerably smaller because we can avoid the need for code to generate the background. In this example, we're only using one image, so I use the image object's load event handler to execute the drawing statements. The drawImage() method places the backdrop at the coordinate (0, 0), which is the top-left corner of the canvas.

+ + + +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var img = new Image();
+  img.onload = function(){
+    ctx.drawImage(img,0,0);
+    ctx.beginPath();
+    ctx.moveTo(30,96);
+    ctx.lineTo(70,66);
+    ctx.lineTo(103,76);
+    ctx.lineTo(170,15);
+    ctx.stroke();
+  };
+  img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png';
+}
+ +

The resulting graph looks like this:

+ +

{{EmbedLiveSample("Example_A_simple_line_graph", 220, 160, "https://mdn.mozillademos.org/files/206/Canvas_backdrop.png")}}

+ +

Scaling

+ +

The second variant of the drawImage() method adds two new parameters and lets us place scaled images on the canvas.

+ +
+
drawImage(image, x, y, width, height)
+
This adds the width and height parameters, which indicate the size to which to scale the image when drawing it onto the canvas.
+
+ +

Example: Tiling an image

+ +

In this example, we'll use an image as a wallpaper and repeat it several times on the canvas. This is done simply by looping and placing the scaled images at different positions. In the code below, the first for loop iterates over the rows. The second for loop iterates over the columns. The image is scaled to one third of its original size, which is 50x38 pixels.

+ +
+

Note: Images can become blurry when scaling up or grainy if they're scaled down too much. Scaling is probably best not done if you've got some text in it which needs to remain legible.

+
+ + + +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var img = new Image();
+  img.onload = function(){
+    for (var i=0;i<4;i++){
+      for (var j=0;j<3;j++){
+        ctx.drawImage(img,j*50,i*38,50,38);
+      }
+    }
+  };
+  img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+}
+ +

The resulting canvas looks like this:

+ +

{{EmbedLiveSample("Example_Tiling_an_image", 160, 160, "https://mdn.mozillademos.org/files/251/Canvas_scale_image.png")}}

+ +

Slicing

+ +

The third and last variant of the drawImage() method has eight parameters. It lets us cut out a section of the source image, then scale and draw it on our canvas.

+ +
+
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
+
Given an image, this function takes the area of the source image specified by the rectangle whose top-left corner is (sx, sy) and whose width and height are sWidth and sHeight and draws it into the canvas, placing it on the canvas at (dx, dy) and scaling it to the size specified by dWidth and dHeight.
+
+ +

To really understand what this does, it may help to look at the image to the right. The first four parameters define the location and size of the slice on the source image. The last four parameters define the rectangle into which to draw the image on the destination canvas.

+ +

Slicing can be a useful tool when you want to make compositions. You could have all elements in a single image file and use this method to composite a complete drawing. For instance, if you want to make a chart you could have a PNG image containing all the necessary text in a single file and depending on your data could change the scale of your chart fairly easily. Another advantage is that you don't need to load every image individually, which can improve load performance.

+ +

Example: Framing an image

+ +

In this example, we'll use the same rhino as in the previous example, but we'll slice out its head and composite it into a picture frame. The picture frame image is a 24-bit PNG which includes a drop shadow. Because 24-bit PNG images include a full 8-bit alpha channel, unlike GIF and 8-bit PNG images, it can be placed onto any background without worrying about a matte color.

+ +
<html>
+ <body onload="draw();">
+   <canvas id="canvas" width="150" height="150"></canvas>
+   <div style="display:none;">
+     <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227">
+     <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150">
+   </div>
+ </body>
+</html>
+
+ +
function draw() {
+  var canvas = document.getElementById('canvas');
+  var ctx = canvas.getContext('2d');
+
+  // Draw slice
+  ctx.drawImage(document.getElementById('source'),
+                33, 71, 104, 124, 21, 20, 87, 104);
+
+  // Draw frame
+  ctx.drawImage(document.getElementById('frame'),0,0);
+}
+ +

We took a different approach to loading the images this time. Instead of loading them by creating new {{domxref("HTMLImageElement")}} objects, we included them as {{HTMLElement("img")}} tags directly in our HTML source and retrieved the images from those. The images are hidden from output by setting the CSS property {{cssxref("display")}} to none for those images.

+ +

{{EmbedLiveSample("Example_Framing_an_image", 160, 160, "https://mdn.mozillademos.org/files/226/Canvas_drawimage2.jpg")}}

+ +

The script itself is very simple. Each {{HTMLElement("img")}} is assigned an ID attribute, which makes them easy to select using {{domxref("document.getElementById()")}}. We then simply use drawImage() to slice the rhino out of the first image and scale him onto the canvas, then draw the frame on top using a second drawImage() call.

+ + + +

In the final example of this chapter, we'll build a little art gallery. The gallery consists of a table containing several images. When the page is loaded, a {{HTMLElement("canvas")}}  element is inserted for each image and a frame is drawn arround it.

+ +

In this case, every image has a fixed width and height, as does the frame that's drawn around them. You could enhance the script so that it uses the image's width and height to make the frame fit perfectly around it.

+ +

The code below should be self-explanatory. We loop through the {{domxref("document.images")}} container and add new canvas elements accordingly. Probably the only thing to note, for those not so familiar with the DOM, is the use of the {{domxref("Node.insertBefore")}} method. insertBefore() is a method of the parent node (a table cell) of the element (the image) before which we want to insert our new node (the canvas element).

+ +
<html>
+ <body onload="draw();">
+     <table>
+      <tr>
+        <td><img src="https://mdn.mozillademos.org/files/5399/gallery_1.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5401/gallery_2.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5403/gallery_3.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5405/gallery_4.jpg"></td>
+      </tr>
+      <tr>
+        <td><img src="https://mdn.mozillademos.org/files/5407/gallery_5.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5409/gallery_6.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5411/gallery_7.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5413/gallery_8.jpg"></td>
+      </tr>
+     </table>
+     <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150">
+ </body>
+</html>
+
+ +

And here's some CSS to make things look nice:

+ +
body {
+  background: 0 -100px repeat-x url(https://mdn.mozillademos.org/files/5415/bg_gallery.png) #4F191A;
+  margin: 10px;
+}
+
+img {
+  display: none;
+}
+
+table {
+  margin: 0 auto;
+}
+
+td {
+  padding: 15px;
+}
+
+ +

Tying it all together is the JavaScript to draw our framed images:

+ +
function draw() {
+
+  // Loop through all images
+  for (var i=0;i<document.images.length;i++){
+
+    // Don't add a canvas for the frame image
+    if (document.images[i].getAttribute('id')!='frame'){
+
+      // Create canvas element
+      canvas = document.createElement('canvas');
+      canvas.setAttribute('width',132);
+      canvas.setAttribute('height',150);
+
+      // Insert before the image
+      document.images[i].parentNode.insertBefore(canvas,document.images[i]);
+
+      ctx = canvas.getContext('2d');
+
+      // Draw image to canvas
+      ctx.drawImage(document.images[i],15,20);
+
+      // Add frame
+      ctx.drawImage(document.getElementById('frame'),0,0);
+    }
+  }
+}
+ +

{{EmbedLiveSample("Art_gallery_example", 725, 400, "https://mdn.mozillademos.org/files/205/Canvas_art_gallery.jpg")}}

+ +

Controlling image scaling behavior

+ +

As mentioned previously, scaling images can result in fuzzy or blocky artifacts due to the scaling process. You can use the drawing context's imageSmoothingEnabled property to control the use of image smoothing algorithms when scaling images within your context. By default, this is true, meaning images will be smoothed when scaled. You can disable this feature like this:

+ +
ctx.mozImageSmoothingEnabled = false;
+
+ +

{{PreviousNext("Web/Guide/HTML/Canvas_tutorial/Drawing_shapes", "Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors")}}

diff --git a/files/de/web/api/document/readystatechange_event/index.html b/files/de/web/api/document/readystatechange_event/index.html new file mode 100644 index 0000000000..9fba4b5dee --- /dev/null +++ b/files/de/web/api/document/readystatechange_event/index.html @@ -0,0 +1,86 @@ +--- +title: readystatechange +slug: Web/Events/readystatechange +tags: + - Referenz + - XMLHttpRequest +translation_of: Web/API/Document/readystatechange_event +--- +

{{ApiRef}}

+ +

Das Ereignis readystatechange wird ausgelöst, wenn sich die Eigenschaft readyState eines Dokumentes verändert hat.

+ +

Allgemeine Information

+ +
+
Spezifikation
+
HTML5
+
Schnittstelle
+
Event
+
Aufsteigend
+
Nein
+
Abbrechbar
+
Nein
+
Ziel
+
Dokument
+
Standardaktion
+
Keine
+
+ +

Eigenschaften

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
+ +

Beispiel

+ +
// als Alternative zu DOMContentLoaded
+document.onreadystatechange = function () {
+    if (document.readyState == "interactive") {
+        initApplication();
+    }
+}
+
+ +

Browser-Kompatibilität

+ +

Dieses Ereignis wird vom Internet Explorer schon sehr lange unterstützt und kann daher als Alternative zum DOMContentLoaded-Ereignis genutzt werden (vgl. Anmerkung [2] im Abschnitt Browserkompatibilität).

+ +

Verwandte Ereignisse

+ + diff --git a/files/de/web/api/document_object_model/index.html b/files/de/web/api/document_object_model/index.html new file mode 100644 index 0000000000..a16a254129 --- /dev/null +++ b/files/de/web/api/document_object_model/index.html @@ -0,0 +1,66 @@ +--- +title: DOM +slug: DOM +tags: + - DOM +translation_of: Web/API/Document_Object_Model +translation_of_original: DOM +--- +
Verwendung des W3C DOM Level 1
+Einführung in das W3C DOM.
+ +

Das Document Object Model (DOM) ist eine Programmierschnittstelle für HTML- und XML-Dokumente. Sie bildet die strukturelle Abbildung des Dokuments und ermöglicht Skripten die Veränderung des Inhalts und dessen Präsentation.

+ + + + + + + + +
+

Dokumentation

+ +
+
Gecko DOM Referenz
+
Die Gecko Document Object Model Referenz.
+
Über das Document Object Model
+
Eine kleine Einführung ins DOM.
+
Das DOM und JavaScript
+
Was ist das DOM? Was ist JavaScript? Wie kann ich diese Techniken zusammen benutzen? Dieses Dokument beantwortet diese und weitere Fragen.
+
Verwendung von dynamischen Styles
+
Wie man Style-Informationen mittels DOM erhalten und verändern kann.
+
Das XUL-Interface dynamisch verändern
+
Die Grundlagen zum Manipulieren des XUL-UI mit DOM Methoden.
+
Größe von Elementen bestimmen
+
Dieser Artikel beschreibt, wie man den richtigen Größen von Elementen finden kann.
+
Das Document Object Model in Mozilla (engl.)
+
Eine ältere Dokumentation über das DOM, auf mozilla.org.
+
+ +

Alle zeigen...

+ 		+

Community

+ +
    +
  • Mozillas DOM Foren:{{ DiscussionList("dev-tech-dom", "mozilla.dev.tech.dom") }}
    • +
+ +

Tools

+ + + + + + +
+ +

 

diff --git a/files/de/web/api/file/typ/index.html b/files/de/web/api/file/typ/index.html deleted file mode 100644 index 28c57a4cb1..0000000000 --- a/files/de/web/api/file/typ/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: File.type -slug: Web/API/File/Typ -translation_of: Web/API/File/type ---- -
{{APIRef("File API")}}
- -

Gibt den Internet Media Typ (MIME) einer Datei zurück, welche durch ein {{domxref("File")}} Objekt dargestellt wird.

- -

Syntax

- -
var name = file.type;
- -

Wert

- -

Eine Zeichenkette, welche den Internet Media Typ (MIME) enthält und den Typ der Datei angibt, zum Beispiel "image/png" für ein PNG Bild

- -

Beispiel

- -
<input type="file" multiple onchange="showType(this)">
-
- -
function showType(fileInput) {
-  var files = fileInput.files;
-
-  for (var i = 0; i < files.length; i++) {
-    var name = files[i].name;
-    var type = files[i].type;
-    alert("Filename: " + name + " , Type: " + type);
-  }
-}
- -

Hinweis: Basierend auf der aktuellen Implementierung, lesen Browser nicht wirklich den Bytestrom einer Datei, um ihren Medientyp zu bestimmen. Es wird aufgrund der Dateiendung angenommen; eine PNG-Bilddatei, die in .txt umbenannt wird, würde "text/plain" und nicht "image/png" ergeben. Darüber hinaus ist file.type im Allgemeinen nur für gängige Dateitypen wie Bilder, HTML-Dokumente, Audio und Video zuverlässig. Seltene Dateierweiterungen würden eine leere Zeichenkette zurückgeben. Die Client-Konfiguration (z.B. die Windows-Registrierung) kann auch bei gängigen Typen zu unerwarteten Werten führen. Entwicklern wird empfohlen, sich nicht auf diese Eigenschaft als einziges Validierungsschema zu verlassen.

- -

Spezifikation

- - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('File API', '#dfn-type', 'type')}}{{Spec2('File API')}}Initiale Definition.
- -

Browser-Kompatibilität

- - - -

{{Compat("api.File.type")}}

- -

Siehe auch

- - diff --git a/files/de/web/api/file/type/index.html b/files/de/web/api/file/type/index.html new file mode 100644 index 0000000000..28c57a4cb1 --- /dev/null +++ b/files/de/web/api/file/type/index.html @@ -0,0 +1,65 @@ +--- +title: File.type +slug: Web/API/File/Typ +translation_of: Web/API/File/type +--- +
{{APIRef("File API")}}
+ +

Gibt den Internet Media Typ (MIME) einer Datei zurück, welche durch ein {{domxref("File")}} Objekt dargestellt wird.

+ +

Syntax

+ +
var name = file.type;
+ +

Wert

+ +

Eine Zeichenkette, welche den Internet Media Typ (MIME) enthält und den Typ der Datei angibt, zum Beispiel "image/png" für ein PNG Bild

+ +

Beispiel

+ +
<input type="file" multiple onchange="showType(this)">
+
+ +
function showType(fileInput) {
+  var files = fileInput.files;
+
+  for (var i = 0; i < files.length; i++) {
+    var name = files[i].name;
+    var type = files[i].type;
+    alert("Filename: " + name + " , Type: " + type);
+  }
+}
+ +

Hinweis: Basierend auf der aktuellen Implementierung, lesen Browser nicht wirklich den Bytestrom einer Datei, um ihren Medientyp zu bestimmen. Es wird aufgrund der Dateiendung angenommen; eine PNG-Bilddatei, die in .txt umbenannt wird, würde "text/plain" und nicht "image/png" ergeben. Darüber hinaus ist file.type im Allgemeinen nur für gängige Dateitypen wie Bilder, HTML-Dokumente, Audio und Video zuverlässig. Seltene Dateierweiterungen würden eine leere Zeichenkette zurückgeben. Die Client-Konfiguration (z.B. die Windows-Registrierung) kann auch bei gängigen Typen zu unerwarteten Werten führen. Entwicklern wird empfohlen, sich nicht auf diese Eigenschaft als einziges Validierungsschema zu verlassen.

+ +

Spezifikation

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('File API', '#dfn-type', 'type')}}{{Spec2('File API')}}Initiale Definition.
+ +

Browser-Kompatibilität

+ + + +

{{Compat("api.File.type")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/file/using_files_from_web_applications/index.html b/files/de/web/api/file/using_files_from_web_applications/index.html new file mode 100644 index 0000000000..c44ac4b9df --- /dev/null +++ b/files/de/web/api/file/using_files_from_web_applications/index.html @@ -0,0 +1,512 @@ +--- +title: Zugriff auf Dateien von Webapplikationen +slug: Web/API/File/Zugriff_auf_Dateien_von_Webapplikationen +translation_of: Web/API/File/Using_files_from_web_applications +--- +

Mithilfe der File API, welche mit HTML5 zum DOM hinzugefügt wurde, ist es nun für Webinhalte möglich den Benutzer lokale Dateien auswählen zu lassen und den Inhalt dieser Dateien auszulesen. Die Auswahl kann entweder durch das HTML Element {{ HTMLElement("input") }} oder durch Drag and Drop erfolgen.

+ +

Es ist auch möglich die DOM File API von Erweiterungen oder anderem Chrome Code zu benutzen. In diesem Fall müssen einige zusätzliche Dinge beachtet werden, die im Abschnitt Using the DOM File API in chrome code näher erläutert werden.

+ +

Auf ausgewählte Dateien zugreifen

+ +

Gehen wir von folgendem HTML-Code aus:

+ +
<input type="file" id="input">
+ +

Die File API erlaubt den Zugriff auf eine {{ domxref("FileList") }} mit {{ domxref("File") }} Objekten, die die vom Benutzer ausgewählten Dateien repräsentieren.

+ +

Wenn der Benutzer nur eine Datei auswählt, dann muss nur die erste Datei in der Liste betrachtet werden.

+ +

Eine ausgewählte Datei erhält man über den üblichen DOM Selektor:

+ +
var selectedFile = document.getElementById('input').files[0];
+ +

Oder mit einem jQuery Selektor:

+ +
var selectedFile = $('#input').get(0).files[0];
+
+var selectedFile = $('#input')[0].files[0];
+ +
+

Tritt der Fehler "files is undefined" auf:
+ Es wurde das falsche HTML element ausgewählt. Es ist zu beachten, dass ein jQuery Selektor eine Liste von zutreffenden DOM Elementen zurückliefert. Das richtige DOM Element muss ausgewählt werden, um "files" darauf anzuwenden.

+
+ +

Zugriff auf ausgewählte Dateien über den Change Event

+ +

Es ist auch möglich (aber nicht unbedingt erforderlich), auf die {{ domxref("FileList") }} über das change event zuzugreifen:

+ +
<input type="file" id="input" onchange="handleFiles(this.files)">
+ +

Wenn der Benutzer eine Datei auswählt, wird die Funktion handleFiles() aufgerufen. Als Parameter wird die {{ domxref("FileList") }} übergeben. Sie enthält die {{ domxref("File") }} Objekte, die die vom Benutzer ausgewählten Dateien repräsentieren.

+ +

Soll der Benutzer mehrere Dateien auswählen können, dann kann einfach das Attribut multiple auf das input Element angewendet werden:

+ +
<input type="file" id="input" multiple onchange="handleFiles(this.files)">
+ +

In diesem Fall enthält die Dateiliste, die an die handleFiles() Funktion übergeben wird, ein {{ domxref("File") }} für jede Datei, die der Benutzer ausgewählt hat.

+ +

Dynamisch einen Change Listener hinzufügen

+ +

Wurde das input Feld mit einer JavaScript Bibliothek wie jQuery erzeugt, dann muss der event Listener mit {{ domxref("element.addEventListener()") }} hinzugefügt werden:

+ +
var inputElement = document.getElementById("input");
+inputElement.addEventListener("change", handleFiles, false);
+function handleFiles() {
+  var fileList = this.files; /* Jetzt kann die Dateiliste verarbeitet werden */
+}
+ +

In diesem Fall ist die handleFiles() Funktion selbst der Event Handler, anders als in den vorigen Beispielen, wo sie von einem Event Handler aufgerufen wurde.

+ +

Informationen über die ausgewählte(n) Datei(en)

+ +

Das {{ domxref("FileList") }} Objekt, das vom DOM geliefert wurde, enthält eine Liste aller Dateien, die vom Benutzer ausgewählt wurden. Jede der Dateien wird durch ein {{ domxref("File") }} Objekt repräsentiert. Die Anzahl der ausgewälten Dateien kann über das length Attribut der Liste ermittelt werden:

+ +
var numFiles = files.length;
+ +

Die einzelnen {{ domxref("File") }} Objekte erhält man, indem das {{ domxref("FileList") }} Objekt einfach wie ein Array behandelt wird:

+ +
for (var i = 0, numFiles = files.length; i < numFiles; i++) {
+  var file = files[i];
+  ..
+}
+
+ +

Diese Schleife iteriert über alle Dateien in der Liste.

+ +

Im {{ domxref("File") }} Objekt liefern drei Attribute hilfreiche Informationen über die Datei:

+ +
+
name
+
Der Dateiname als read-only String. Es ist nur der Dateiname enthalten, keine Pfadinformationen.
+
size
+
Die Dateigröße in Bytes als read-only 64-Bit Integer.
+
type
+
Der MIME type der Datei als read-only String oder "", wenn der Typ nicht ermittelt werden konnte.
+
+ +

Beispiel: Dateigröße anzeigen

+ +

Das folgende Beispiel zeigt eine mögliche Verwendung des size Attributs:

+ +
<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>File(s) size</title>
+<script>
+function updateSize() {
+  var nBytes = 0,
+      oFiles = document.getElementById("uploadInput").files,
+      nFiles = oFiles.length;
+  for (var nFileId = 0; nFileId < nFiles; nFileId++) {
+    nBytes += oFiles[nFileId].size;
+  }
+  var sOutput = nBytes + " bytes";
+  // optional code for multiples approximation
+  for (var aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"], nMultiple = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
+    sOutput = nApprox.toFixed(3) + " " + aMultiples[nMultiple] + " (" + nBytes + " bytes)";
+  }
+  // end of optional code
+  document.getElementById("fileNum").innerHTML = nFiles;
+  document.getElementById("fileSize").innerHTML = sOutput;
+}
+</script>
+</head>
+
+<body onload="updateSize();">
+<form name="uploadForm">
+<p><input id="uploadInput" type="file" name="myFiles" onchange="updateSize();" multiple> selected files: <span id="fileNum">0</span>; total size: <span id="fileSize">0</span></p>
+<p><input type="submit" value="Send file"></p>
+</form>
+</body>
+</html>
+
+ +

Verstecktes input Element mit click() Methode

+ +

Ab Gecko 2.0 {{ geckoRelease("2.0") }}, kann das zugegebenermaßen hässliche Datei-{{ HTMLElement("input") }} Element versteckt und durch eigene Oberflächenelemente zum Zugriff auf den Datei-Öffnen-Dialog ersetzt werden. Dazu wird das input Element mit dem CSS Stil display:none versehen und mit der Methode {{ domxref("element.click","click()") }} aufgerufen.

+ +

Gehen wir von folgendem HTML-Code aus:

+ +
<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
+<a href="#" id="fileSelect">Bitte Dateien auswählen</a>
+
+
+ +

Der Code, der auf den click Event reagiert, kann wie folgt aussehen:

+ +
var fileSelect = document.getElementById("fileSelect"),
+  fileElem = document.getElementById("fileElem");
+
+fileSelect.addEventListener("click", function (e) {
+  if (fileElem) {
+    fileElem.click();
+  }
+  e.preventDefault(); // prevent navigation to "#"
+}, false);
+
+ +

Das neue Oberflächenelement zum Zugriff auf den Datei-Öffnen-Dialog kann nun beliebig gestaltet werden.

+ +

label Element zum Auslösen eines versteckten input Elements

+ +

Wird statt eines Links ({{ HTMLElement("a") }} Element) ein {{ HTMLElement("label") }} Element verwendet, dann kann das versteckte input Element auch ohne JavaScript ausgelöst werden. Dabei darf das input-Element aber weder mit display: none noch mit visibility: hidden versteckt werden, weil es in diesen Fällen nicht mit der Tastatur bedienbar wäre. Es darf nur visuell versteckt werden.

+ +

Gehen wir von folgendem HTML-Code aus:

+ +
<input type="file" id="fileElem" multiple accept="image/*" class="visually-hidden">
+<label for="fileElem">Bitte Dateien auswählen</label>
+
+ +

und folgendem CSS:

+ +
.visually-hidden {
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+}
+
+input.visually-hidden:focus + label {
+  outline: thin dotted;
+}
+
+ +

Bei einem Klick auf das label Element wird der Datei-Öffnen-Dialog angezeigt.

+ +

Das label Element kann per CSS beliebig gestaltet werden. Man muss aber das Label des versteckten Eingabefelds hervorheben, wenn dieses den Fokus hat, d.h. per Tab-Taste angewählt wurde – sei es durch outline wie im obigen Beispiel oder background-color oder box-shadow. (Gegenwärtig stellt Firefox das Label von fokussierten <input type="file">-Elementen nicht hervorgehoben dar.)

+ +

Dateien per Drag and Drop auswählen

+ +

Es ist auch möglich, per Drag and Drop Dateien an die Webanwendung zu übergeben.

+ +

Zuerst muss eine Drop Zone eingerichtet werden. Welcher Teil der Oberfläche Drops entgegen nimmt, ist vom Design der Anwendung abhängig. Generell ist das Empfangen von Drop Events aber einfach:

+ +
var dropbox;
+
+dropbox = document.getElementById("dropbox");
+dropbox.addEventListener("dragenter", dragenter, false);
+dropbox.addEventListener("dragover", dragover, false);
+dropbox.addEventListener("drop", drop, false);
+
+ +

In diesem Beispiel wird das Element mit der ID dropbox als Drop Zone verwendet. Das wird durch Registrieren der Listener für {{event('dragenter')}}, {{event('dragover')}} und {{event('drop')}} Events erreicht.

+ +

dragenter und dragover benötigen wir in unserem Fall eigentlich nicht. Wir verhindern lediglich eine weitere Behandlung der Events durch Aufruf von e.stopPropagation() und e.preventDefault():

+ +
function dragenter(e) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+
+function dragover(e) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+
+ +

Das Wesentliche geschieht in der Behandlung des drop Events:

+ +
function drop(e) {
+  e.stopPropagation();
+  e.preventDefault();
+
+  var dt = e.dataTransfer;
+  var files = dt.files;
+
+  handleFiles(files);
+}
+
+ +

Hier ermitteln wir das dataTransfer Feld aus dem Event, entnehmen ihm die Dateiliste und übergeben diese an handleFiles(). Von da an ist die Weiterverarbeitung die gleiche wie bei Verwendung des input Elements.

+ +

Beispiel: Thumbnails von ausgewählten Bildern anzeigen

+ +

Gehen wir davon aus, dass auf einer Foto-Webseite mit HTML5 eine Thumbnail Vorschau von Bildern angezeigt werden soll, bevor sie hochgeladen werden. Das input Element oder die Drop Zone kann wie oben beschrieben eingerichtet werden. Diese rufen die folgende handleFiles() Funktion auf:

+ +
function handleFiles(files) {
+  for (var i = 0; i < files.length; i++) {
+    var file = files[i];
+    var imageType = /^image\//;
+
+    if (!imageType.test(file.type)) {
+      continue;
+    }
+
+    var img = document.createElement("img");
+    img.classList.add("obj");
+    img.file = file;
+    preview.appendChild(img); // Gehen wird davon aus, dass "preview" das div-Element ist, in dem der Inhalt angezeigt wird.
+
+    var reader = new FileReader();
+    reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
+    reader.readAsDataURL(file);
+  }
+}
+
+ +

Mit der Schleife wird über die ausgewählten Dateien iteriert. Bei jeder Datei wird mit Hilfe des type Attributs (indem der Reguläre Ausdruck "^image\/" darauf angewendet wird) geprüft, ob es sich um eine Bild Datei handelt. Liegt eine Bild Datei vor, dann wird ein neues img Element erzeugt. Mit CSS können z.B. hübsche Ränder oder Schatten erzeugt und die Größe des Bildes festgelegt werden, das muss also nicht hier im Code erfolgen.

+ +

Jedem Bild wird die CSS Klasse obj zugewiesen, so dass es einfach ist, es im DOM Baum zu finden. Außerdem wird jedem Bild im file Attribut das {{ domxref("File") }} Objekt für das Bild zugewiesen; das benötigen wir später für den tatsächlichen Upload der Datei. Mit {{ domxref("Node.appendChild()") }} wird das neue Thumbnail dem preview Bereich unserer Anwendung hinzugefügt.

+ +

Dann erstellen wir einen {{ domxref("FileReader") }}, um das Bild asynchron zu laden und es dem img Element hinzuzufügen. Nach dem Erstellen des FileReader Objektes definieren wir die onload Funktion und rufen readAsDataURL() auf, um die Leseoperation im Hintergrund zu starten. Ist der komplette Inhalt der Bilddatei geladen, dann wird er in eine data: URL umgewandelt, die an den onload Callback übergeben wird. Unsere Implementation dieser Routine setzt das src Attribut des img Elements auf das geladene Bild, was dazu führt, dass das Bild im Thumbnail auf dem Bildschirm des Benutzers erscheint.

+ +

Verwendung von Objekt URLs

+ +

Mit Gecko 2.0 {{ geckoRelease("2.0") }} wurde die Unterstützung für die DOM Methoden {{ domxref("window.URL.createObjectURL()") }} und {{ domxref("window.URL.revokeObjectURL()") }} eingeführt. Mit ihnen lassen sich einfache URL Strings erzeugen, die beliebige Daten referenzieren, auf die per DOM {{ domxref("File") }} Objekte zugegriffen werden kann; einschließlich lokale Dateien auf dem Computer des Anwenders.

+ +

Wenn man aus HTML mit einer URL auf ein {{ domxref("File") }} Objekt verweisen möchte, dann kann man dafür eine Objekt URL erzeugen:

+ +
var objectURL = window.URL.createObjectURL(fileObj);
+ +

Die Objekt URL ist ein String, der das {{ domxref("File") }} Objekt identifiziert. Jedes Mal, wenn {{ domxref("window.URL.createObjectURL()") }} aufgerufen wird, wird eine eindeutige Objekt URL erzeugt, auch wenn vorher bereits eine Objekt URL für diese Datei erzeugt wurde. Jede von ihnen muss wieder freigegeben werden. Sie werden automatisch freigegeben, wenn das Dokument entladen wird. Wenn ihre Anwendung die Objekt URLs dynamisch verwendet, dann sollten Sie sie auch explizit durch Aufruf von {{ domxref("window.URL.revokeObjectURL()") }} freigeben:

+ +
window.URL.revokeObjectURL(objectURL);
+ +

Beispiel: Mit Objekt URLs Bilder anzeigen

+ +

Dieses Beispiel verwendet Objekt URLs, um Thumbnails von Bildern anzuzeigen. Darüber hinaus werden weitere Dateiinformationen einschließlich Name und Größe angezeigt. Live Ansicht des Beispiels.

+ +

Das HTML für die Oberfläche sieht folgendermaßen aus:

+ +
<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
+<a href="#" id="fileSelect">Bitte Dateien auswählen</a>
+<div id="fileList">
+  <p>Keine Dateien ausgewählt!</p>
+</div>
+
+ +

Das erstellt ein Datei {{ HTMLElement("input") }} Element, zusammen mit einem Link, der den Datei-Öffnen-Dialog anzeigt (so kann das Datei input Element versteckt werden, da es nicht so attraktiv aussieht). Das wird oben im Abschnitt {{ anch("Verstecktes input Element mit click() Methode") }} näher beschrieben.

+ +

Die handleFiles() Methode sieht folgendermaßen aus:

+ +
window.URL = window.URL || window.webkitURL;
+
+var fileSelect = document.getElementById("fileSelect"),
+    fileElem = document.getElementById("fileElem"),
+    fileList = document.getElementById("fileList");
+
+fileSelect.addEventListener("click", function (e) {
+  if (fileElem) {
+    fileElem.click();
+  }
+  e.preventDefault(); // prevent navigation to "#"
+}, false);
+
+function handleFiles(files) {
+  if (!files.length) {
+    fileList.innerHTML = "<p>No files selected!</p>";
+  } else {
+    var list = document.createElement("ul");
+    for (var i = 0; i < files.length; i++) {
+      var li = document.createElement("li");
+      list.appendChild(li);
+
+      var img = document.createElement("img");
+      img.src = window.URL.createObjectURL(files[i]);
+      img.height = 60;
+      img.onload = function() {
+        window.URL.revokeObjectURL(this.src);
+      }
+      li.appendChild(img);
+      var info = document.createElement("span");
+      info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
+      li.appendChild(info);
+    }
+  }
+}
+
+ +

Das {{ HTMLElement("div") }} Element mit der ID fileList wird ermittelt. Das ist der Block, in den wir später unsere Dateiliste einschließlich Thumbnails einfügen.

+ +

Ist das {{ domxref("FileList") }} Objekt, das an handleFiles() übergeben wird, null, dann wird einfach "No files selected!" ausgegeben. Ansonsten bauen wir unsere Dateiliste wie folgt:

+ +
    +
  1. Ein neues ({{ HTMLElement("ul") }}) Element wird erzeugt.
    2. +
  2. Das neue Listenelement wird dem {{ HTMLElement("div") }} Block hinzugefügt durch Aufruf der {{ domxref("element.appendChild()") }} Methode.
    3. +
  3. Für jedes {{ domxref("File") }} in der {{ domxref("FileList") }}, die durch files repräsentiert wird: +
      +
    1. Erzeuge ein neues Listenelement ({{ HTMLElement("li") }}) und füge es der Liste hinzu.
      2. +
    2. Erzeuge ein neues Bildelement ({{ HTMLElement("img") }}).
      3. +
    3. Setze das src Attribut des Bildes auf die neue Objekt URL, die die Datei repräsentiert, wobei die Objekt URL mit {{ domxref("window.URL.createObjectURL()") }} erzeugt wird.
      4. +
    4. Setze die Bildgröße auf 60 Pixel.
      5. +
    5. Richte den onload Event Handler ein, um die Objekt URL wieder freizugeben, da sie nach dem Laden des Bildes nicht mehr benötigt wird. Das wird durch Aufruf der Methode {{ domxref("window.URL.revokeObjectURL()") }} und Übergabe des Objekt URL Strings aus img.src gemacht.
      6. +
    6. Füge das neue Bildelement dem Listenelement hinzu.
      7. +
    +
    4. +
+ +

Example: Uploading a user-selected file

+ +

Another thing you might want to do is let the user upload the selected file or files (such as the images selected using the previous example) to a server. This can be done asynchronously very easily.

+ +

Creating the upload tasks

+ +

Continuing with the code that built the thumbnails in the previous example, recall that every thumbnail image is in the CSS class obj with the corresponding {{ domxref("File") }} attached in a file attribute. This allows us to select all of the images the user has chosen for uploading using {{ domxref("Document.querySelectorAll()") }}, like this:

+ +
function sendFiles() {
+  var imgs = document.querySelectorAll(".obj");
+
+  for (var i = 0; i < imgs.length; i++) {
+    new FileUpload(imgs[i], imgs[i].file);
+  }
+}
+
+ +

Line 2 fetches a {{ domxref("NodeList") }}, called imgs, of all the elements in the document with the CSS class obj. In our case, these will be all of the image thumbnails. Once we have that list, it's trivial to go through it and create a new FileUpload instance for each. Each of these handles uploading the corresponding file.

+ +

Handling the upload process for a file

+ +

The FileUpload function accepts two inputs: an image element and a file from which to read the image data.

+ +
function FileUpload(img, file) {
+  var reader = new FileReader();
+  this.ctrl = createThrobber(img);
+  var xhr = new XMLHttpRequest();
+  this.xhr = xhr;
+
+  var self = this;
+  this.xhr.upload.addEventListener("progress", function(e) {
+        if (e.lengthComputable) {
+          var percentage = Math.round((e.loaded * 100) / e.total);
+          self.ctrl.update(percentage);
+        }
+      }, false);
+
+  xhr.upload.addEventListener("load", function(e){
+          self.ctrl.update(100);
+          var canvas = self.ctrl.ctx.canvas;
+          canvas.parentNode.removeChild(canvas);
+      }, false);
+  xhr.open("POST", "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php");
+  xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
+  reader.onload = function(evt) {
+    xhr.sendAsBinary(evt.target.result);
+  };
+  reader.readAsBinaryString(file);
+}
+
+ +

The FileUpload() function shown above creates a throbber, which is used to display progress information, and then creates an {{ domxref("XMLHttpRequest") }} to handle uploading the data.

+ +

Before actually transferring the data, several preparatory steps are taken:

+ +
    +
  1. The XMLHttpRequest's upload progress listener is set to update the throbber with new percentage information so that as the upload progresses the throbber will be updated based on the latest information.
    2. +
  2. The XMLHttpRequest's upload load event handler is set to update the throbber progress information to 100% to ensure the progress indicator actually reaches 100% (in case of granularity quirks during the process). It then removes the throbber since it's no longer needed. This causes the throbber to disappear once the upload is complete.
    3. +
  3. The request to upload the image file is opened by calling XMLHttpRequest's open() method to start generating a POST request.
    4. +
  4. The MIME type for the upload is set by calling the XMLHttpRequest function overrideMimeType(). In this case, we're using a generic MIME type; you may or may not need to set the MIME type at all depending on your use case.
    5. +
  5. The FileReader object is used to convert the file to a binary string.
    6. +
  6. Finally, when the content is loaded the XMLHttpRequest function sendAsBinary() is called to upload the file's content.
    7. +
+ +
Note: The non-standard sendAsBinary method in the example above is considered deprecated as of Gecko 31 {{ geckoRelease(31) }} and will be removed soon. The standard send(Blob data) method can be used instead.
+ +

Handling the upload process for a file, asynchronously

+ +
<?php
+if (isset($_FILES['myFile'])) {
+    // Example:
+    move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']);
+    exit;
+}
+?><!DOCTYPE html>
+<html>
+<head>
+    <title>dnd binary upload</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <script type="text/javascript">
+        function sendFile(file) {
+            var uri = "/index.php";
+            var xhr = new XMLHttpRequest();
+            var fd = new FormData();
+
+            xhr.open("POST", uri, true);
+            xhr.onreadystatechange = function() {
+                if (xhr.readyState == 4 && xhr.status == 200) {
+                    // Handle response.
+                    alert(xhr.responseText); // handle response.
+                }
+            };
+            fd.append('myFile', file);
+            // Initiate a multipart/form-data upload
+            xhr.send(fd);
+        }
+
+        window.onload = function() {
+            var dropzone = document.getElementById("dropzone");
+            dropzone.ondragover = dropzone.ondragenter = function(event) {
+                event.stopPropagation();
+                event.preventDefault();
+            }
+
+            dropzone.ondrop = function(event) {
+                event.stopPropagation();
+                event.preventDefault();
+
+                var filesArray = event.dataTransfer.files;
+                for (var i=0; i<filesArray.length; i++) {
+                    sendFile(filesArray[i]);
+                }
+            }
+        }
+    </script>
+</head>
+<body>
+    <div>
+        <div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;">Drag & drop your file here...</div>
+    </div>
+</body>
+</html>
+
+ +

Example: Using object URLs to display PDF

+ +

Object URLs can be used for other things than just images! They can be used to display embedded PDF files or any other resources that can be displayed by the browser.

+ +

In Firefox, to have the PDF appear embedded in the iframe (rather than proposed as a downloaded file), the preference pdfjs.disabled must be set to false {{non-standard_inline()}}.

+ +
<iframe id="viewer">
+
+ +

And here is the change of the src attribute:

+ +
var obj_url = window.URL.createObjectURL(blob);
+var iframe = document.getElementById('viewer');
+iframe.setAttribute('src', obj_url);
+window.URL.revokeObjectURL(obj_url);
+ +

Example: Using object URLs with other file types

+ +

You can manipulate files of other formats the same way. Here is how to preview uploaded video:

+ +
var video = document.getElementById('video');
+var obj_url = window.URL.createObjectURL(blob);
+video.src = obj_url;
+video.play()
+window.URL.revokeObjectURL(obj_url);
+ +

Specifications

+ + + +

See also

+ + + +

{{ HTML5ArticleTOC() }}

+ +

{{ languages( { "zh-cn": "zh-cn/Using_files_from_web_applications", "ja": "ja/Using_files_from_web_applications" } ) }}

diff --git a/files/de/web/api/file/zugriff_auf_dateien_von_webapplikationen/index.html b/files/de/web/api/file/zugriff_auf_dateien_von_webapplikationen/index.html deleted file mode 100644 index c44ac4b9df..0000000000 --- a/files/de/web/api/file/zugriff_auf_dateien_von_webapplikationen/index.html +++ /dev/null @@ -1,512 +0,0 @@ ---- -title: Zugriff auf Dateien von Webapplikationen -slug: Web/API/File/Zugriff_auf_Dateien_von_Webapplikationen -translation_of: Web/API/File/Using_files_from_web_applications ---- -

Mithilfe der File API, welche mit HTML5 zum DOM hinzugefügt wurde, ist es nun für Webinhalte möglich den Benutzer lokale Dateien auswählen zu lassen und den Inhalt dieser Dateien auszulesen. Die Auswahl kann entweder durch das HTML Element {{ HTMLElement("input") }} oder durch Drag and Drop erfolgen.

- -

Es ist auch möglich die DOM File API von Erweiterungen oder anderem Chrome Code zu benutzen. In diesem Fall müssen einige zusätzliche Dinge beachtet werden, die im Abschnitt Using the DOM File API in chrome code näher erläutert werden.

- -

Auf ausgewählte Dateien zugreifen

- -

Gehen wir von folgendem HTML-Code aus:

- -
<input type="file" id="input">
- -

Die File API erlaubt den Zugriff auf eine {{ domxref("FileList") }} mit {{ domxref("File") }} Objekten, die die vom Benutzer ausgewählten Dateien repräsentieren.

- -

Wenn der Benutzer nur eine Datei auswählt, dann muss nur die erste Datei in der Liste betrachtet werden.

- -

Eine ausgewählte Datei erhält man über den üblichen DOM Selektor:

- -
var selectedFile = document.getElementById('input').files[0];
- -

Oder mit einem jQuery Selektor:

- -
var selectedFile = $('#input').get(0).files[0];
-
-var selectedFile = $('#input')[0].files[0];
- -
-

Tritt der Fehler "files is undefined" auf:
- Es wurde das falsche HTML element ausgewählt. Es ist zu beachten, dass ein jQuery Selektor eine Liste von zutreffenden DOM Elementen zurückliefert. Das richtige DOM Element muss ausgewählt werden, um "files" darauf anzuwenden.

-
- -

Zugriff auf ausgewählte Dateien über den Change Event

- -

Es ist auch möglich (aber nicht unbedingt erforderlich), auf die {{ domxref("FileList") }} über das change event zuzugreifen:

- -
<input type="file" id="input" onchange="handleFiles(this.files)">
- -

Wenn der Benutzer eine Datei auswählt, wird die Funktion handleFiles() aufgerufen. Als Parameter wird die {{ domxref("FileList") }} übergeben. Sie enthält die {{ domxref("File") }} Objekte, die die vom Benutzer ausgewählten Dateien repräsentieren.

- -

Soll der Benutzer mehrere Dateien auswählen können, dann kann einfach das Attribut multiple auf das input Element angewendet werden:

- -
<input type="file" id="input" multiple onchange="handleFiles(this.files)">
- -

In diesem Fall enthält die Dateiliste, die an die handleFiles() Funktion übergeben wird, ein {{ domxref("File") }} für jede Datei, die der Benutzer ausgewählt hat.

- -

Dynamisch einen Change Listener hinzufügen

- -

Wurde das input Feld mit einer JavaScript Bibliothek wie jQuery erzeugt, dann muss der event Listener mit {{ domxref("element.addEventListener()") }} hinzugefügt werden:

- -
var inputElement = document.getElementById("input");
-inputElement.addEventListener("change", handleFiles, false);
-function handleFiles() {
-  var fileList = this.files; /* Jetzt kann die Dateiliste verarbeitet werden */
-}
- -

In diesem Fall ist die handleFiles() Funktion selbst der Event Handler, anders als in den vorigen Beispielen, wo sie von einem Event Handler aufgerufen wurde.

- -

Informationen über die ausgewählte(n) Datei(en)

- -

Das {{ domxref("FileList") }} Objekt, das vom DOM geliefert wurde, enthält eine Liste aller Dateien, die vom Benutzer ausgewählt wurden. Jede der Dateien wird durch ein {{ domxref("File") }} Objekt repräsentiert. Die Anzahl der ausgewälten Dateien kann über das length Attribut der Liste ermittelt werden:

- -
var numFiles = files.length;
- -

Die einzelnen {{ domxref("File") }} Objekte erhält man, indem das {{ domxref("FileList") }} Objekt einfach wie ein Array behandelt wird:

- -
for (var i = 0, numFiles = files.length; i < numFiles; i++) {
-  var file = files[i];
-  ..
-}
-
- -

Diese Schleife iteriert über alle Dateien in der Liste.

- -

Im {{ domxref("File") }} Objekt liefern drei Attribute hilfreiche Informationen über die Datei:

- -
-
name
-
Der Dateiname als read-only String. Es ist nur der Dateiname enthalten, keine Pfadinformationen.
-
size
-
Die Dateigröße in Bytes als read-only 64-Bit Integer.
-
type
-
Der MIME type der Datei als read-only String oder "", wenn der Typ nicht ermittelt werden konnte.
-
- -

Beispiel: Dateigröße anzeigen

- -

Das folgende Beispiel zeigt eine mögliche Verwendung des size Attributs:

- -
<!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8">
-<title>File(s) size</title>
-<script>
-function updateSize() {
-  var nBytes = 0,
-      oFiles = document.getElementById("uploadInput").files,
-      nFiles = oFiles.length;
-  for (var nFileId = 0; nFileId < nFiles; nFileId++) {
-    nBytes += oFiles[nFileId].size;
-  }
-  var sOutput = nBytes + " bytes";
-  // optional code for multiples approximation
-  for (var aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"], nMultiple = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
-    sOutput = nApprox.toFixed(3) + " " + aMultiples[nMultiple] + " (" + nBytes + " bytes)";
-  }
-  // end of optional code
-  document.getElementById("fileNum").innerHTML = nFiles;
-  document.getElementById("fileSize").innerHTML = sOutput;
-}
-</script>
-</head>
-
-<body onload="updateSize();">
-<form name="uploadForm">
-<p><input id="uploadInput" type="file" name="myFiles" onchange="updateSize();" multiple> selected files: <span id="fileNum">0</span>; total size: <span id="fileSize">0</span></p>
-<p><input type="submit" value="Send file"></p>
-</form>
-</body>
-</html>
-
- -

Verstecktes input Element mit click() Methode

- -

Ab Gecko 2.0 {{ geckoRelease("2.0") }}, kann das zugegebenermaßen hässliche Datei-{{ HTMLElement("input") }} Element versteckt und durch eigene Oberflächenelemente zum Zugriff auf den Datei-Öffnen-Dialog ersetzt werden. Dazu wird das input Element mit dem CSS Stil display:none versehen und mit der Methode {{ domxref("element.click","click()") }} aufgerufen.

- -

Gehen wir von folgendem HTML-Code aus:

- -
<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
-<a href="#" id="fileSelect">Bitte Dateien auswählen</a>
-
-
- -

Der Code, der auf den click Event reagiert, kann wie folgt aussehen:

- -
var fileSelect = document.getElementById("fileSelect"),
-  fileElem = document.getElementById("fileElem");
-
-fileSelect.addEventListener("click", function (e) {
-  if (fileElem) {
-    fileElem.click();
-  }
-  e.preventDefault(); // prevent navigation to "#"
-}, false);
-
- -

Das neue Oberflächenelement zum Zugriff auf den Datei-Öffnen-Dialog kann nun beliebig gestaltet werden.

- -

label Element zum Auslösen eines versteckten input Elements

- -

Wird statt eines Links ({{ HTMLElement("a") }} Element) ein {{ HTMLElement("label") }} Element verwendet, dann kann das versteckte input Element auch ohne JavaScript ausgelöst werden. Dabei darf das input-Element aber weder mit display: none noch mit visibility: hidden versteckt werden, weil es in diesen Fällen nicht mit der Tastatur bedienbar wäre. Es darf nur visuell versteckt werden.

- -

Gehen wir von folgendem HTML-Code aus:

- -
<input type="file" id="fileElem" multiple accept="image/*" class="visually-hidden">
-<label for="fileElem">Bitte Dateien auswählen</label>
-
- -

und folgendem CSS:

- -
.visually-hidden {
-  position: absolute !important;
-  height: 1px;
-  width: 1px;
-  overflow: hidden;
-  clip: rect(1px, 1px, 1px, 1px);
-}
-
-input.visually-hidden:focus + label {
-  outline: thin dotted;
-}
-
- -

Bei einem Klick auf das label Element wird der Datei-Öffnen-Dialog angezeigt.

- -

Das label Element kann per CSS beliebig gestaltet werden. Man muss aber das Label des versteckten Eingabefelds hervorheben, wenn dieses den Fokus hat, d.h. per Tab-Taste angewählt wurde – sei es durch outline wie im obigen Beispiel oder background-color oder box-shadow. (Gegenwärtig stellt Firefox das Label von fokussierten <input type="file">-Elementen nicht hervorgehoben dar.)

- -

Dateien per Drag and Drop auswählen

- -

Es ist auch möglich, per Drag and Drop Dateien an die Webanwendung zu übergeben.

- -

Zuerst muss eine Drop Zone eingerichtet werden. Welcher Teil der Oberfläche Drops entgegen nimmt, ist vom Design der Anwendung abhängig. Generell ist das Empfangen von Drop Events aber einfach:

- -
var dropbox;
-
-dropbox = document.getElementById("dropbox");
-dropbox.addEventListener("dragenter", dragenter, false);
-dropbox.addEventListener("dragover", dragover, false);
-dropbox.addEventListener("drop", drop, false);
-
- -

In diesem Beispiel wird das Element mit der ID dropbox als Drop Zone verwendet. Das wird durch Registrieren der Listener für {{event('dragenter')}}, {{event('dragover')}} und {{event('drop')}} Events erreicht.

- -

dragenter und dragover benötigen wir in unserem Fall eigentlich nicht. Wir verhindern lediglich eine weitere Behandlung der Events durch Aufruf von e.stopPropagation() und e.preventDefault():

- -
function dragenter(e) {
-  e.stopPropagation();
-  e.preventDefault();
-}
-
-function dragover(e) {
-  e.stopPropagation();
-  e.preventDefault();
-}
-
- -

Das Wesentliche geschieht in der Behandlung des drop Events:

- -
function drop(e) {
-  e.stopPropagation();
-  e.preventDefault();
-
-  var dt = e.dataTransfer;
-  var files = dt.files;
-
-  handleFiles(files);
-}
-
- -

Hier ermitteln wir das dataTransfer Feld aus dem Event, entnehmen ihm die Dateiliste und übergeben diese an handleFiles(). Von da an ist die Weiterverarbeitung die gleiche wie bei Verwendung des input Elements.

- -

Beispiel: Thumbnails von ausgewählten Bildern anzeigen

- -

Gehen wir davon aus, dass auf einer Foto-Webseite mit HTML5 eine Thumbnail Vorschau von Bildern angezeigt werden soll, bevor sie hochgeladen werden. Das input Element oder die Drop Zone kann wie oben beschrieben eingerichtet werden. Diese rufen die folgende handleFiles() Funktion auf:

- -
function handleFiles(files) {
-  for (var i = 0; i < files.length; i++) {
-    var file = files[i];
-    var imageType = /^image\//;
-
-    if (!imageType.test(file.type)) {
-      continue;
-    }
-
-    var img = document.createElement("img");
-    img.classList.add("obj");
-    img.file = file;
-    preview.appendChild(img); // Gehen wird davon aus, dass "preview" das div-Element ist, in dem der Inhalt angezeigt wird.
-
-    var reader = new FileReader();
-    reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
-    reader.readAsDataURL(file);
-  }
-}
-
- -

Mit der Schleife wird über die ausgewählten Dateien iteriert. Bei jeder Datei wird mit Hilfe des type Attributs (indem der Reguläre Ausdruck "^image\/" darauf angewendet wird) geprüft, ob es sich um eine Bild Datei handelt. Liegt eine Bild Datei vor, dann wird ein neues img Element erzeugt. Mit CSS können z.B. hübsche Ränder oder Schatten erzeugt und die Größe des Bildes festgelegt werden, das muss also nicht hier im Code erfolgen.

- -

Jedem Bild wird die CSS Klasse obj zugewiesen, so dass es einfach ist, es im DOM Baum zu finden. Außerdem wird jedem Bild im file Attribut das {{ domxref("File") }} Objekt für das Bild zugewiesen; das benötigen wir später für den tatsächlichen Upload der Datei. Mit {{ domxref("Node.appendChild()") }} wird das neue Thumbnail dem preview Bereich unserer Anwendung hinzugefügt.

- -

Dann erstellen wir einen {{ domxref("FileReader") }}, um das Bild asynchron zu laden und es dem img Element hinzuzufügen. Nach dem Erstellen des FileReader Objektes definieren wir die onload Funktion und rufen readAsDataURL() auf, um die Leseoperation im Hintergrund zu starten. Ist der komplette Inhalt der Bilddatei geladen, dann wird er in eine data: URL umgewandelt, die an den onload Callback übergeben wird. Unsere Implementation dieser Routine setzt das src Attribut des img Elements auf das geladene Bild, was dazu führt, dass das Bild im Thumbnail auf dem Bildschirm des Benutzers erscheint.

- -

Verwendung von Objekt URLs

- -

Mit Gecko 2.0 {{ geckoRelease("2.0") }} wurde die Unterstützung für die DOM Methoden {{ domxref("window.URL.createObjectURL()") }} und {{ domxref("window.URL.revokeObjectURL()") }} eingeführt. Mit ihnen lassen sich einfache URL Strings erzeugen, die beliebige Daten referenzieren, auf die per DOM {{ domxref("File") }} Objekte zugegriffen werden kann; einschließlich lokale Dateien auf dem Computer des Anwenders.

- -

Wenn man aus HTML mit einer URL auf ein {{ domxref("File") }} Objekt verweisen möchte, dann kann man dafür eine Objekt URL erzeugen:

- -
var objectURL = window.URL.createObjectURL(fileObj);
- -

Die Objekt URL ist ein String, der das {{ domxref("File") }} Objekt identifiziert. Jedes Mal, wenn {{ domxref("window.URL.createObjectURL()") }} aufgerufen wird, wird eine eindeutige Objekt URL erzeugt, auch wenn vorher bereits eine Objekt URL für diese Datei erzeugt wurde. Jede von ihnen muss wieder freigegeben werden. Sie werden automatisch freigegeben, wenn das Dokument entladen wird. Wenn ihre Anwendung die Objekt URLs dynamisch verwendet, dann sollten Sie sie auch explizit durch Aufruf von {{ domxref("window.URL.revokeObjectURL()") }} freigeben:

- -
window.URL.revokeObjectURL(objectURL);
- -

Beispiel: Mit Objekt URLs Bilder anzeigen

- -

Dieses Beispiel verwendet Objekt URLs, um Thumbnails von Bildern anzuzeigen. Darüber hinaus werden weitere Dateiinformationen einschließlich Name und Größe angezeigt. Live Ansicht des Beispiels.

- -

Das HTML für die Oberfläche sieht folgendermaßen aus:

- -
<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
-<a href="#" id="fileSelect">Bitte Dateien auswählen</a>
-<div id="fileList">
-  <p>Keine Dateien ausgewählt!</p>
-</div>
-
- -

Das erstellt ein Datei {{ HTMLElement("input") }} Element, zusammen mit einem Link, der den Datei-Öffnen-Dialog anzeigt (so kann das Datei input Element versteckt werden, da es nicht so attraktiv aussieht). Das wird oben im Abschnitt {{ anch("Verstecktes input Element mit click() Methode") }} näher beschrieben.

- -

Die handleFiles() Methode sieht folgendermaßen aus:

- -
window.URL = window.URL || window.webkitURL;
-
-var fileSelect = document.getElementById("fileSelect"),
-    fileElem = document.getElementById("fileElem"),
-    fileList = document.getElementById("fileList");
-
-fileSelect.addEventListener("click", function (e) {
-  if (fileElem) {
-    fileElem.click();
-  }
-  e.preventDefault(); // prevent navigation to "#"
-}, false);
-
-function handleFiles(files) {
-  if (!files.length) {
-    fileList.innerHTML = "<p>No files selected!</p>";
-  } else {
-    var list = document.createElement("ul");
-    for (var i = 0; i < files.length; i++) {
-      var li = document.createElement("li");
-      list.appendChild(li);
-
-      var img = document.createElement("img");
-      img.src = window.URL.createObjectURL(files[i]);
-      img.height = 60;
-      img.onload = function() {
-        window.URL.revokeObjectURL(this.src);
-      }
-      li.appendChild(img);
-      var info = document.createElement("span");
-      info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
-      li.appendChild(info);
-    }
-  }
-}
-
- -

Das {{ HTMLElement("div") }} Element mit der ID fileList wird ermittelt. Das ist der Block, in den wir später unsere Dateiliste einschließlich Thumbnails einfügen.

- -

Ist das {{ domxref("FileList") }} Objekt, das an handleFiles() übergeben wird, null, dann wird einfach "No files selected!" ausgegeben. Ansonsten bauen wir unsere Dateiliste wie folgt:

- -
    -
  1. Ein neues ({{ HTMLElement("ul") }}) Element wird erzeugt.
    2. -
  2. Das neue Listenelement wird dem {{ HTMLElement("div") }} Block hinzugefügt durch Aufruf der {{ domxref("element.appendChild()") }} Methode.
    3. -
  3. Für jedes {{ domxref("File") }} in der {{ domxref("FileList") }}, die durch files repräsentiert wird: -
      -
    1. Erzeuge ein neues Listenelement ({{ HTMLElement("li") }}) und füge es der Liste hinzu.
      2. -
    2. Erzeuge ein neues Bildelement ({{ HTMLElement("img") }}).
      3. -
    3. Setze das src Attribut des Bildes auf die neue Objekt URL, die die Datei repräsentiert, wobei die Objekt URL mit {{ domxref("window.URL.createObjectURL()") }} erzeugt wird.
      4. -
    4. Setze die Bildgröße auf 60 Pixel.
      5. -
    5. Richte den onload Event Handler ein, um die Objekt URL wieder freizugeben, da sie nach dem Laden des Bildes nicht mehr benötigt wird. Das wird durch Aufruf der Methode {{ domxref("window.URL.revokeObjectURL()") }} und Übergabe des Objekt URL Strings aus img.src gemacht.
      6. -
    6. Füge das neue Bildelement dem Listenelement hinzu.
      7. -
    -
    4. -
- -

Example: Uploading a user-selected file

- -

Another thing you might want to do is let the user upload the selected file or files (such as the images selected using the previous example) to a server. This can be done asynchronously very easily.

- -

Creating the upload tasks

- -

Continuing with the code that built the thumbnails in the previous example, recall that every thumbnail image is in the CSS class obj with the corresponding {{ domxref("File") }} attached in a file attribute. This allows us to select all of the images the user has chosen for uploading using {{ domxref("Document.querySelectorAll()") }}, like this:

- -
function sendFiles() {
-  var imgs = document.querySelectorAll(".obj");
-
-  for (var i = 0; i < imgs.length; i++) {
-    new FileUpload(imgs[i], imgs[i].file);
-  }
-}
-
- -

Line 2 fetches a {{ domxref("NodeList") }}, called imgs, of all the elements in the document with the CSS class obj. In our case, these will be all of the image thumbnails. Once we have that list, it's trivial to go through it and create a new FileUpload instance for each. Each of these handles uploading the corresponding file.

- -

Handling the upload process for a file

- -

The FileUpload function accepts two inputs: an image element and a file from which to read the image data.

- -
function FileUpload(img, file) {
-  var reader = new FileReader();
-  this.ctrl = createThrobber(img);
-  var xhr = new XMLHttpRequest();
-  this.xhr = xhr;
-
-  var self = this;
-  this.xhr.upload.addEventListener("progress", function(e) {
-        if (e.lengthComputable) {
-          var percentage = Math.round((e.loaded * 100) / e.total);
-          self.ctrl.update(percentage);
-        }
-      }, false);
-
-  xhr.upload.addEventListener("load", function(e){
-          self.ctrl.update(100);
-          var canvas = self.ctrl.ctx.canvas;
-          canvas.parentNode.removeChild(canvas);
-      }, false);
-  xhr.open("POST", "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php");
-  xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
-  reader.onload = function(evt) {
-    xhr.sendAsBinary(evt.target.result);
-  };
-  reader.readAsBinaryString(file);
-}
-
- -

The FileUpload() function shown above creates a throbber, which is used to display progress information, and then creates an {{ domxref("XMLHttpRequest") }} to handle uploading the data.

- -

Before actually transferring the data, several preparatory steps are taken:

- -
    -
  1. The XMLHttpRequest's upload progress listener is set to update the throbber with new percentage information so that as the upload progresses the throbber will be updated based on the latest information.
    2. -
  2. The XMLHttpRequest's upload load event handler is set to update the throbber progress information to 100% to ensure the progress indicator actually reaches 100% (in case of granularity quirks during the process). It then removes the throbber since it's no longer needed. This causes the throbber to disappear once the upload is complete.
    3. -
  3. The request to upload the image file is opened by calling XMLHttpRequest's open() method to start generating a POST request.
    4. -
  4. The MIME type for the upload is set by calling the XMLHttpRequest function overrideMimeType(). In this case, we're using a generic MIME type; you may or may not need to set the MIME type at all depending on your use case.
    5. -
  5. The FileReader object is used to convert the file to a binary string.
    6. -
  6. Finally, when the content is loaded the XMLHttpRequest function sendAsBinary() is called to upload the file's content.
    7. -
- -
Note: The non-standard sendAsBinary method in the example above is considered deprecated as of Gecko 31 {{ geckoRelease(31) }} and will be removed soon. The standard send(Blob data) method can be used instead.
- -

Handling the upload process for a file, asynchronously

- -
<?php
-if (isset($_FILES['myFile'])) {
-    // Example:
-    move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']);
-    exit;
-}
-?><!DOCTYPE html>
-<html>
-<head>
-    <title>dnd binary upload</title>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <script type="text/javascript">
-        function sendFile(file) {
-            var uri = "/index.php";
-            var xhr = new XMLHttpRequest();
-            var fd = new FormData();
-
-            xhr.open("POST", uri, true);
-            xhr.onreadystatechange = function() {
-                if (xhr.readyState == 4 && xhr.status == 200) {
-                    // Handle response.
-                    alert(xhr.responseText); // handle response.
-                }
-            };
-            fd.append('myFile', file);
-            // Initiate a multipart/form-data upload
-            xhr.send(fd);
-        }
-
-        window.onload = function() {
-            var dropzone = document.getElementById("dropzone");
-            dropzone.ondragover = dropzone.ondragenter = function(event) {
-                event.stopPropagation();
-                event.preventDefault();
-            }
-
-            dropzone.ondrop = function(event) {
-                event.stopPropagation();
-                event.preventDefault();
-
-                var filesArray = event.dataTransfer.files;
-                for (var i=0; i<filesArray.length; i++) {
-                    sendFile(filesArray[i]);
-                }
-            }
-        }
-    </script>
-</head>
-<body>
-    <div>
-        <div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;">Drag & drop your file here...</div>
-    </div>
-</body>
-</html>
-
- -

Example: Using object URLs to display PDF

- -

Object URLs can be used for other things than just images! They can be used to display embedded PDF files or any other resources that can be displayed by the browser.

- -

In Firefox, to have the PDF appear embedded in the iframe (rather than proposed as a downloaded file), the preference pdfjs.disabled must be set to false {{non-standard_inline()}}.

- -
<iframe id="viewer">
-
- -

And here is the change of the src attribute:

- -
var obj_url = window.URL.createObjectURL(blob);
-var iframe = document.getElementById('viewer');
-iframe.setAttribute('src', obj_url);
-window.URL.revokeObjectURL(obj_url);
- -

Example: Using object URLs with other file types

- -

You can manipulate files of other formats the same way. Here is how to preview uploaded video:

- -
var video = document.getElementById('video');
-var obj_url = window.URL.createObjectURL(blob);
-video.src = obj_url;
-video.play()
-window.URL.revokeObjectURL(obj_url);
- -

Specifications

- - - -

See also

- - - -

{{ HTML5ArticleTOC() }}

- -

{{ languages( { "zh-cn": "zh-cn/Using_files_from_web_applications", "ja": "ja/Using_files_from_web_applications" } ) }}

diff --git a/files/de/web/api/fullscreen_api/index.html b/files/de/web/api/fullscreen_api/index.html new file mode 100644 index 0000000000..1ddce4c572 --- /dev/null +++ b/files/de/web/api/fullscreen_api/index.html @@ -0,0 +1,305 @@ +--- +title: Vollbild API +slug: Web/API/Vollbild_API +tags: + - API + - DOM + - JS + - Tutorial + - Vollbild API +translation_of: Web/API/Fullscreen_API +--- +

{{DefaultAPISidebar("Fullscreen API")}}

+ +

Die Vollbild-API bietet einen einfachen Weg, um Webinhalte auf dem gesamten Bildschirm des Nutzers anzuzeigen. Der Browser kann einfach angewiesen werden, Elemente und, falls vorhanden, deren Kinder den gesamten Bildschirm einnehmen zu lassen, wodurch jegliche andere Inhalte vorübergehend ausgeblendet werden.

+ +
+

Momentan benutzen nicht alle Browser die Version der API ohne Präfixe. Siehe Vendor Präfixe für Unterschiede zwischen Präfixen und Namen. 

+ +

Für eine universelle Lösung des Problems siehe Fscreen.

+
+ +

Aktivieren des Vollbildmodus

+ +

Wenn sie ein Element gefunden haben, welches Sie im Vollbildmodus anzeigen möchten (etwa ein {{ HTMLElement("video") }}), wir der Vollbildmodus einfach durch den Aufruf der {{ domxref("Element.requestFullscreen()") }}-Methode gestartet.

+ +

Nehmen wir dieses {{ HTMLElement("video") }}-Element als Beispiel:

+ +
<video controls id="myvideo">
+  <source src="somevideo.webm"></source>
+  <source src="somevideo.mp4"></source>
+</video>
+
+ +

Wir können dieses Video mit folgendem Skript in den Vollbildmodus versetzen:

+ +
var elem = document.getElementById("myvideo");
+if (elem.requestFullscreen) {
+  elem.requestFullscreen();
+}
+
+ +

Anzeige-Schwierigkeiten

+ +

An dieser Stelle lohnt es sich, einen wichtigen Unterschied zwischen Gecko und WebKit aufzuzeigen: Gecko fügt automatisch CSS-Regeln zum betroffenen Element hinzu, damit es den ganzen Bildschirm einnimmt: "width: 100%; height: 100%". WebKit tut dies allerdings nicht; stattdessen wird das Vollbild-Element in der selben Größe zentriert vor einem schwarzen Hintergrund dargestellt. Um das gleich Vollbild-Verhalten in WebKit zu erhalten, müssen Sie selbst eine "width: 100%; height: 100%;"-CSS-Regel zum entsprechenden Element hinzufügen:

+ +
#myvideo:-webkit-full-screen {
+  width: 100%;
+  height: 100%;
+}
+
+ +

Andererseits, wenn Sie stattdessen versuchen, das WebKit-Verhalten auf Gecko zu erreichen, müssen sie das Element, das präsentiert werden soll, in einem anderen Element platzieren, welches sie stattdessen in den Vollbild-Modus versetzen. Dann können sie CSS-Regeln verwenden, um das innere Element so zu layouten, wie Sie wünschen.

+ +

Benachrichtigung

+ +

Wenn der Vollbild-Modus erfolgreich gestartet wird, erhält das document, welches das entsprechende Element enthält ein {{ event("fullscreenchange") }}-Event. Wenn der Vollbild-Modus wieder verlassen wird, erhält das document wiederum ein {{ event("fullscreenchange") }}-Event. Beachten Sie jedoch, dass das {{ event("fullscreenchange") }}-Event selbst keine Informationen darüber bereitstellt, ob das document in oder aus den Vollbild-Modus wechselt. Stattdessen muss überprüft werden, ob das Attribut {{ domxref("document.fullscreenElement", "fullscreenElement") }}, des document nicht null ist. In diesem Fall befindet sich der Browser im Vollbild-Modus.

+ +

Wenn die Vollbild-Anfrage scheitert

+ +

Es ist nicht garantiert, dass der Wechsel in den Vollbild-Modus möglich ist. {{ HTMLElement("iframe") }}-Elements etwa haben das {{ HTMLAttrXRef("allowfullscreen", "iframe") }}-Attribut, um ihrem Inhalt zu erlauben, in den Vollbild-Modus zu wechseln. Zusätzlich gibt es bestimmte Arten von Inhalten, wie etwa windowed plug-ins, welche nicht im Vollbild-Modus angezeigt werden können. Wenn versucht wird, ein Element, welches nicht im Vollbild-Modus dargestellt werden kann (oder ein Eltern- bzw. Kind-Knoten eines solchen Elements), wird dies nicht funktionieren. Stattdessen wird das Element, welches den Vollbild-Modus angefragt hat, ein mozfullscreenerror-Event erhalten. Wenn eine Vollbild-Anfrage scheitert, wird Firefox eine Fehlermeldung auf der Web-Konsole ausgeben, welche erklärt, warum die Anfrage fehlgeschlagen ist. In Chrome und neueren Versionen von Opera werden allerdings keine solchen Warnungen produziert.

+ +
+

Hinweis: Vollbild-Anfragen müssen aus einem Event-Handler heraus gestellt werden oder die Anfrage wird abgelehnt. 

+
+ +

Verlassen des Vollbildmodus

+ +

Der Nutzer hat immer die Möglichkeit, selbst den Vollbildmodus zu verlassen; siehe {{ anch("Things your users want to know") }}. Der Vollbildmodus kann aber auch programmatisch mithilfe der  {{domxref("Document.exitFullscreen()")}}-Methode beendet werden.

+ +

Weitere Informationen

+ +

Das {{ domxref("document") }} hält weitere Informationen bereit, welche bei der Entwicklung von Vollbild-Web-Apps hilfreich sein können:

+ +
+
{{ domxref("document.fullscreenElement", "fullscreenElement") }}
+
Das fullscreenElement-Attribut gibt das {{ domxref("element") }} an, welches aktuell im Vollbild-Modus angezeigt wird. Wenn dies nicht null ist, befindet sich das document im Vollbildmodus. Sonst, wenn dieses Attribut null ist, befindet sich das Dokument nicht im Vollbildmodus.
+
{{ domxref("document.fullscreenEnabled", "fullscreenEnabled") }}
+
Das fullscreenEnabled-Attribut gibt an, ob das document aktuell in einem Zustand ist, in welchem der Vollbild-Modus erlaubt ist.
+
+ +

Was die Nutzer wissen wollen

+ +

Sie sollten die Nutzer wissen lassen, dass sie den Vollbildmodus jederzeit mit ESC (oder F11) verlassen können.

+ +

Zusätzlich beendet das Navigieren zu einer anderen Seite oder das Wechseln von Tabs oder Programmen (etwa mit  Alt+Tab) auch den Vollbildmodus.

+ +

Beispiel

+ +

In diesem Beispiel wird ein Video auf einer Webseite dargestellt. Durch drücken von Return oder Enter kann der Nutzer den Vollbildmodus des Videos umschalten.

+ +

Live-Beispiel ansehen

+ +

Watching for the Enter key

+ +

When the page is loaded, this code is run to set up an event listener to watch for the Enter key.

+ +
document.addEventListener("keydown", function(e) {
+  if (e.keyCode == 13) {
+    toggleFullScreen();
+  }
+}, false);
+
+ +

Toggling fullscreen mode

+ +

This code is called when the user hits the Enter key, as seen above.

+ +
function toggleFullScreen() {
+  if (!document.fullscreenElement) {
+      document.documentElement.requestFullscreen();
+  } else {
+    if (document.exitFullscreen) {
+      document.exitFullscreen();
+    }
+  }
+}
+
+ +

This starts by looking at the value of the fullscreenElement attribute on the {{ domxref("document") }} (checking it prefixed with both moz, ms, or webkit). If it's null, the document is currently in windowed mode, so we need to switch to fullscreen mode. Switching to fullscreen mode is done by calling {{ domxref("element.requestFullscreen()") }}.

+ +

If fullscreen mode is already active (fullscreenElement is non-null), we call {{ domxref("document.exitFullscreen()") }}.

+ +

Vendor Präfixe

+ +

For the moment not all browsers are implementing the unprefixed version of the API (for vendor agnostic access to the Fullscreen API you can use Fscreen). Here is the table summarizing the prefixes and name differences between them:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
StandardBlink (Chrome & Opera)Gecko (Firefox)Internet Explorer 11EdgeSafari (WebKit)
{{domxref("Document.fullscreen")}}webkitIsFullScreenmozFullScreen-webkitIsFullScreenwebkitIsFullScreen
{{domxref("Document.fullscreenEnabled")}}webkitFullscreenEnabledmozFullScreenEnabledmsFullscreenEnabledwebkitFullscreenEnabledwebkitFullscreenEnabled
{{domxref("Document.fullscreenElement")}}webkitFullscreenElementmozFullScreenElementmsFullscreenElementwebkitFullscreenElementwebkitFullscreenElement
{{domxref("Document.onfullscreenchange")}}onwebkitfullscreenchangeonmozfullscreenchangeMSFullscreenChangeonwebkitfullscreenchangeonwebkitfullscreenchange
{{domxref("Document.onfullscreenerror")}}onwebkitfullscreenerroronmozfullscreenerrorMSFullscreenErroronwebkitfullscreenerroronwebkitfullscreenerror
{{domxref("Document.exitFullscreen()")}}webkitExitFullscreen()mozCancelFullScreen()msExitFullscreen()webkitExitFullscreen()webkitExitFullscreen()
{{domxref("Element.requestFullscreen()")}}webkitRequestFullscreen()mozRequestFullScreen()msRequestFullscreen()webkitRequestFullscreen()webkitRequestFullscreen()
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Fullscreen")}}{{Spec2("Fullscreen")}}Initial version.
+ +

Browser Kompatibilität

+ +

All browsers implement this APIs. Nevertheless some implement it with prefixed names with slightly different spelling; e.g., instead of requestFullscreen(), there is MozRequestFullScreen().

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support15 {{ property_prefix("-webkit") }}{{CompatVersionUnknown}}{{ CompatGeckoDesktop("9.0") }} {{ property_prefix("-moz") }}
+ {{CompatGeckoDesktop("47")}} (behind full-screen-api.unprefix.enabled)		11 {{ property_prefix("-ms") }}12.105.0 {{ property_prefix("-webkit") }}
fullscreenEnabled20 {{ property_prefix("-webkit") }}{{CompatVersionUnknown}}{{ CompatGeckoDesktop("10.0") }} {{ property_prefix("-moz") }}
+ {{CompatGeckoDesktop("47")}} (behind full-screen-api.unprefix.enabled)		11 {{ property_prefix("-ms") }}12.105.1 {{ property_prefix("-webkit") }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChromeEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}28 {{ property_prefix("-webkit") }}{{CompatVersionUnknown}}{{ CompatGeckoMobile("9.0") }}{{ property_prefix("-moz") }}
+ {{CompatGeckoMobile("47")}} (behind full-screen-api.unprefix.enabled)		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
fullscreenEnabled{{ CompatUnknown() }}28 {{ property_prefix("-webkit") }}{{CompatVersionUnknown}}{{ CompatGeckoMobile("10.0") }} {{ property_prefix("moz") }}
+ {{CompatGeckoMobile("47")}} (behind full-screen-api.unprefix.enabled)		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/geolocation_api/index.html b/files/de/web/api/geolocation_api/index.html new file mode 100644 index 0000000000..65be452a5a --- /dev/null +++ b/files/de/web/api/geolocation_api/index.html @@ -0,0 +1,291 @@ +--- +title: Verwenden von geolocation +slug: Web/WebAPI/verwenden_von_geolocation +translation_of: Web/API/Geolocation_API +--- +

Die "geolocation"-API ermöglicht es Nutzern, einer Web-Applikation die eigene Position mitzuteilen. Um die Privatsphäre des Nutzers zu schützen, wird dieser vorher um Erlaubnis gebeten und muss der Übermittlung zustimmen.

+ +

Das geolocation-Objekt

+ +

Die geolocation-API wird durch das {{domxref("window.navigator.geolocation","navigator.geolocation")}}-Objekt offengelegt.

+ +

Wenn das Objekt existiert, sind die geolocation-Services vorhanden und nutzbar. Sie können die Funktionstüchtigkeit daher wie folgt testen:

+ +
if ("geolocation" in navigator) {
+  /* geolocation funktioniert */
+} else {
+  /* geolocation funktioniert NICHT */
+}
+
+ +
+

Notiz: In Firefox 24 und älteren Versionen hat "geolocation" in navigator immer true zurückgegeben, auch wenn die API ausgeschaltet war. Dies wurde mit Firefox 25 gelöst um mit dem Standard kompatibel zu sein. ({{ bug(884921) }})

+
+ +

Die derzeitige Position abfragen

+ +

Um die derzeitige Position des Nutzers zu erhalten, können Sie die Methode {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}} aufrufen. Dies startet eine asynchrone Anfrage für den Abruf der Position zu initiieren. Wenn die Position erhalten wurde, wird die übergebene Callback-Funktion ausgeführt. Sie können optional auch eine zweite Callback-Funktion übergeben, welche im Falle eines Fehlers ausgeführt wird. Ein dritter, optionaler Parameter ist ein Konfigurationsobjekt, in dem Sie das maximale Alter der zurückgegeben Position, die maximale Wartezeit für die Anfrage und den Wunsch für eine hohe Genauigkeit festlegegen können.

+ +
+

Notiz: Standardmäßig versucht {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}} so schnell wie möglich mit einer geringen Genauigkeit zu antworten. Es ist nützlich wenn Sie eine schnelle Antwort benötigen, unabhängig von der Genauigkeit. Beispielsweise Geräte mit einem GPS können eine Minute oder länger benötigen um eine neue Position zu erhalten, also kann es möglich sein, dass weniger genaue Daten (Ort der IP oder von WLANs) zurückgegeben werden.

+
+ +
navigator.geolocation.getCurrentPosition(function(position) {
+  do_something(position.coords.latitude, position.coords.longitude);
+});
+ +

Das obige Beispiel wird die Funktion do_something() ausführen, wenn eine Position erhalten wurde.

+ +

Die derzeitige Position überwachen

+ +

Wenn sich die Positionsdaten ändern (entweder über die Bewegung des Gerätes oder den Erhalt genauere Geolokationsdaten), können Sie eine Callback-Funktion erstellen, die mit der erneuerten Positionsinformation arbeitet. Dies ist über die Funktion {{domxref("window.navigator.geolocation.watchPosition()","watchPosition()")}} möglich, welche die gleichen Eingabeparameter wie {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}}. besitzt. Die Callback-Funktion wird mehrere Male ausgeführt, dies erlaubt dem Browser die Position aufgrund von Bewegungen oder genaueren Positionsdaten, durch das Verwenden von anderen (langsameren) Methoden, zu erneuern. Die Fehler-Callback-Funktion, welche wie auch in {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}},  hier optional ist, kann auch mehrfach aufgerufen werden.

+ +
+

Notiz: Sie können  {{domxref("window.navigator.geolocation.watchPosition()","watchPosition()")}} auch ohne ein vorangestellten Aufruf von {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}} nutzen.

+
+ +
var watchID = navigator.geolocation.watchPosition(function(position) {
+  do_something(position.coords.latitude, position.coords.longitude);
+});
+ +

Die Methode {{domxref("window.navigator.geolocation.watchPosition()","watchPosition()")}} gibt eine numerische ID zurück, die für die eindeutige Identifikation des Positionsüberwachers verwendet werden kann; diese können Sie in der Methode {{domxref("window.navigator.geolocation.clearWatch()","clearWatch()")}} nutzen, um die Positionsüberwachung zu beenden.

+ +
navigator.geolocation.clearWatch(watchID);
+
+ +

Anpassen der Antwort

+ +

Sowohl {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}} als auch {{domxref("window.navigator.geolocation.watchPosition()","watchPosition()")}} nehmen einen Erfolgs-Callback an, einen optionalen Fehler-Callback und ein optionales PositionOptions-Objekt.

+ +

{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","PositionOptions")}}

+ +

Ein Aufruf von {{domxref("window.navigator.geolocation.watchPosition()","watchPosition")}} könnte wie folgt aussehen:

+ +
function geo_success(position) {
+  do_something(position.coords.latitude, position.coords.longitude);
+}
+
+function geo_error() {
+  alert("Entschuldigung, keine Positionsinformationen sind verfügbar.");
+}
+
+var geo_options = {
+  enableHighAccuracy: true,
+  maximumAge        : 30000,
+  timeout           : 27000
+};
+
+var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, geo_options);
+ +

Ein (englisches) Beispiel von watchPosition in Aktion: http://www.thedotproduct.org/experiments/geo/
+ 

+ +

Darstellung einer Position

+ +

Die Position des Nutzers wird durch ein Position-Objekt dargestellt, welches ein Coordinates-Objekt referenziert.

+ +

{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","Position")}}

+ +

{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","Coordinates")}}

+ +

Fehlerbehandlung

+ +

Die Fehler-Callback-Funktion, wenn im Aufruf von getCurrentPosition() oder watchPosition() vorhanden, nimmt ein PositionError-Objekt als ersten Parameter an.

+ +
function errorCallback(error) {
+  alert('ERROR(' + error.code + '): ' + error.message);
+};
+
+ +

{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","PositionError")}}

+ +

Geolokations-Live-Beispiel

+ + + +

HTML Content

+ +
<p><button onclick="geoFindMe()">Zeige meine Position an</button></p>
+<div id="out"></div>
+
+ +

JavaScript Content

+ +
function geoFindMe() {
+  var output = document.getElementById("out");
+
+  if (!navigator.geolocation){
+    output.innerHTML = "<p>Geolokation wird von ihrem Browser nicht unterstützt</p>";
+    return;
+  }
+
+  function success(position) {
+    var latitude  = position.coords.latitude;
+    var longitude = position.coords.longitude;
+
+    output.innerHTML = '<p>Die Latitude ist ' + latitude + '° <br>Die Longitude ist ' + longitude + '°</p>';
+
+    var img = new Image();
+    img.src = "http://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=300x300&sensor=false";
+
+    output.appendChild(img);
+  };
+
+  function error() {
+    output.innerHTML = "Es war nicht möglich Sie zu lokalisieren";
+  };
+
+  output.innerHTML = "<p>Lokalisieren…</p>";
+
+  navigator.geolocation.getCurrentPosition(success, error);
+}
+
+ +

Demo:

+ +

{{ EmbedLiveSample('Geolokations-Live-Beispiel',350,410) }}

+ +

Für die Erlaubnis fragen

+ +

Jedes Add-On von addons.mozilla.org, welches dieses Feature nutzt, muss explizit, ähnlich der automatischen Frage von Websites, nach Erlaubnis fragen. Die Antwort des Nutzers wird in einer Konfiguration gespeichert, welche von pref-Parameter bestimmt wird, wenn möglich. Die Funktion, die als callback-Parameter verwendet wird mit einem boolischen Wert aufgerufen, welcher die Antwort des Nutzers anzeigt. Wenn dieser true ist, kann das Add-On Geolokationsdaten nutzen.

+ +
function prompt(window, pref, message, callback) {
+    let branch = Components.classes["@mozilla.org/preferences-service;1"]
+                           .getService(Components.interfaces.nsIPrefBranch);
+
+    if (branch.getPrefType(pref) === branch.PREF_STRING) {
+        switch (branch.getCharPref(pref)) {
+        case "always":
+            return callback(true);
+        case "never":
+            return callback(false);
+        }
+    }
+
+    let done = false;
+
+    function remember(value, result) {
+        return function() {
+            done = true;
+            branch.setCharPref(pref, value);
+            callback(result);
+        }
+    }
+
+    let self = window.PopupNotifications.show(
+        window.gBrowser.selectedBrowser,
+        "geolocation",
+        message,
+        "geo-notification-icon",
+        {
+            label: "Ort teilen",
+            accessKey: "S",
+            callback: function(notification) {
+                done = true;
+                callback(true);
+            }
+        }, [
+            {
+                label: "Immer teilen",
+                accessKey: "A",
+                callback: remember("always", true)
+            },
+            {
+                label: "Niemals teilen",
+                accessKey: "N",
+                callback: remember("never", false)
+            }
+        ], {
+            eventCallback: function(event) {
+                if (event === "dismissed") {
+                    if (!done) callback(false);
+                    done = true;
+                    window.PopupNotifications.remove(self);
+                }
+            },
+            persistWhileVisible: true
+        });
+}
+
+prompt(window,
+       "extensions.foo-addon.allowGeolocation",
+       "Foo Add-on möchte deinen Ort abrufen.",
+       function callback(allowed) { alert(allowed); });
+
+ +

Browser compatibility

+ +
{{ CompatibilityTable() }}
+ +
 
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundsätzlicher Support5{{CompatGeckoDesktop("1.9.1")}}910.60
+ Removed in 15.0
+ Reintroduced in 16.0		5
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundsätzlicher Support2.111{{CompatGeckoMobile("4")}}1010.603.2
+
+ +

Gecko-Notizen

+ +

Firefox besitzt Support für das Lokalisieren über WLAN-Informationen durch die "Google Location"-Services. In einer Transaktion zwischen Firefox und Google werden die Daten übetragen, inklusive Daten des WLAN-Zugriffspunktes, einem Zugriffstoken (ähnlich wie ein zweiwöchiger Cookie), und der IP-Adresse des Nutzers. Für mehr Informationen sollten Sie Mozillas und Googles Datenschutzbestimmungen lesen, welche den Rahmen der Datennutzung angeben.

+ +

Siehe auch

+ + diff --git a/files/de/web/api/history_api/index.html b/files/de/web/api/history_api/index.html new file mode 100644 index 0000000000..6f59cbbdc3 --- /dev/null +++ b/files/de/web/api/history_api/index.html @@ -0,0 +1,227 @@ +--- +title: Manipulieren des Browser-Verlaufes +slug: Web/Guide/DOM/Manipulating_the_browser_history +tags: + - Verlauf +translation_of: Web/API/History_API +--- +

Das DOM {{ domxref("window") }} Objekt stellt Zugriffsmöglichkeiten auf den Browser-Verlauf über das {{ domxref("window.history", "history") }} Objekt bereit. Es bietet nützliche Methoden und Einstellungen, die es ermöglichen, den Zurück- und Vorwärts-Button und den Browser-Verlauf zu steuern und – seit HTML5 – diesen auch zu manipulieren

+ +

Durch den Verlauf gehen

+ +

Um durch den Verlauf des Benutzers zu gehen gibt es die Methoden back(), forward() und go().

+ +

Vor und zurück bewegen

+ +

Um im Verlauf zurück zu navigieren, nutze:

+ +
window.history.back();
+
+ +

Dies hat denselben Effekt, wie wenn der Benutzer den Zurück-Knopf drückt.

+ +

Auf ähnliche Weise kann so vorwärts navigiert werden: 

+ +
window.history.forward();
+
+ +

An einen bestimmten Punkt im Verlauf springen

+ +

Mit der Methode go() ist es möglich, eine spezifische Seite aus dem Verlauf zu laden, welche relativ zur momentanen Seite im Verlauf steht. Die aktuelle Seite hat hierbei natürlich Index 0.

+ +

Um eine Seite rückwärts zu gehen (äquivalent zu back()):

+ +
window.history.go(-1);
+
+ +

Um eine Seite vorwärts zu gehen (äquivalent zu forward()):

+ +
window.history.go(1);
+
+ +

Gleichermassen ist es möglich, 2 Seiten vorwärts mit go(2) zu gehen, 3 rückwärts mit go(-3) und so weiter.

+ +

Die Anzahl der Seiten im history-Stapel kann mithilfe der Eigenschaft length bestimmt werden:

+ +
var numberOfEntries = window.history.length;
+
+ +
Anmerkung: Der Internet Explorer unterstützt das Übergeben von String URLs als Parameter für go(); dies ist nicht standardisiertes Verhalten und wird von Gecko nicht unterstützt.
+ +

Hinzufügen und Ändern von Verlaufseinträgen

+ +

{{ gecko_minversion_header("2") }}

+ +

Mit HTML5 wurden die Methoden history.pushState() und history.replaceState() eingeführt, welche jeweils das Hinzufügen und die Manipulation von Verlaufseinträgen ermöglichen. Diese stehen in Verbindung mit dem {{ domxref("window.onpopstate") }}-Event.

+ +

Wenn history.pushState() benutzt wird, ändert das den Referrer der als HTTP-Header in danach erstellten XMLHttpRequest-Objekten genutzt wird. Der Referrer wird die URL des Dokumentes sein, dessen Fenster this zur Zeit der Erstellung des XMLHttpRequest-Objektes ist.

+ +

Beispiel für die pushState()-Methode

+ +

Angenommen, http://mozilla.org/foo.html führt folgendes JavaScript aus:

+ +
var stateObj = { foo: "bar" };
+history.pushState(stateObj, "seite 2", "bar.html");
+
+ +

Das ändert die angezeigte URL zu http://mozilla.org/bar.html, bringt den Browser aber nicht dazu, bar.html zu laden oder überhaupt dessen Existenz zu überprüfen.

+ +

Man nehme weiter an, der Benutzer navigiert zu http://google.com und klickt dann Zurück. Zu diesem Zeitpunkt wird die URL-Bar http://mozilla.org/bar.html anzeigen, und die Seite erhält ein popstate-Event mit einem Status-Objekt, das eine Kopie von stateObj darstellt. Die Seite selbst wird aussehen wie foo.html, aber während dem popstate-Event kann der Inhalt bearbeitet worden sein.

+ +

Wenn der Benutzer noch einmal Zurück drückt, ändert sich die URL zu http://mozilla.org/foo.html, und die Seite erhält ein weiteres popstate-Event, dieses Mal mit einem null Status-Objekt. Auch hier wird der Inhalt der Seite nicht geändert, wenn das nicht manuell im popstate-Event vollzogen wird.

+ +

Die pushState()-Methode

+ +

pushState() übernimmt drei Parameter: ein state Objekt, einen title (welcher aktuell noch ignoriert wird), und (optional) eine URL. Betrachten wir die einzelnen Parameter genauer:

+ + + +
Anmerkung: In Gecko 2.0 {{ geckoRelease("2.0") }} bis Gecko 5.0 {{ geckoRelease("5.0") }} wird das übergebene Objekt mittels JSON serialisiert. Ab Gecko 6.0 {{ geckoRelease("6.0") }}, übernimmt der structured clone algorithm die Serialisierung des Objekts. Dies erlaubt eine größere Vielfalt an Objekten, die sich sicher serialisieren lassen.
+ +

In gewissem Sinne ist der Aufruf von pushState() ähnlich dem Setzen von window.location = "#foo", insofern beide einen weiteren history-Eintrag sowohl erzeugen als auch aktivieren, der mit dem aktuellen Document verbunden ist. Aber pushState() hat ein paar Vorteile:

+ + + +

Man beachte, dass pushState() niemals das Auslösen eines hashchange-Events verursacht, selbst wenn sich die neue URL von der alten nur durch ihren hash unterscheidet.

+ +

Die replaceState()-Methode

+ +

history.replaceState() arbeitet genauso wie history.pushState(), abgesehen davon, dass replaceState() den aktuellen history-Eintrag verändert, statt einen neuen zu erzeugen.

+ +

replaceState() ist insbesondere nützlich, um das Status-Objekt oder die URL des aktuellen history-Eintrages als Reaktion auf eine Benutzer-Aktion zu aktualisieren.

+ +
Anmerkung: In Gecko 2.0 {{ geckoRelease("2.0") }} bis Gecko 5.0 {{ geckoRelease("5.0") }} wird das übergebene Objekt mittels JSON serialisiert. Ab Gecko 6.0 {{ geckoRelease("6.0") }}, übernimmt der structured clone algorithm die Serialisierung des Objekts. Dies erlaubt eine größere Vielfalt an Objekten, die sich sicher serialisieren lassen.
+ +

Beispiel für die replaceState()-Methode

+ +

Angenommen, http://mozilla.org/foo.html führt folgendes JavaScript aus:

+ +

 

+ +
var stateObj = { foo: "bar" };
+history.pushState(stateObj, "page 2", "bar.html");
+ +

Die Erläuterung dieser beiden Zeilen findet sich in unter "Beispiel für die pushState()-Metode". Weiterhin nehme man an, http://mozilla.org/bar.html würde dieses JavaScript ausführen:

+ +
history.replaceState(stateObj, "page 3", "bar2.html");
+ +

Dies lässt den Browser http://mozilla.org/bar2.html in der Adresszeile anzeigen, aber nicht bar2.html laden oder auch nur prüfen, ob bar2.html existiert.

+ +

Nehmen wir nun an, dass der Nutzer zu http://www.microsoft.com navigiert und dann auf den Zurück-Button des Browsers drückt. Dann wird die Adresszeile http://mozilla.org/bar2.html anzeigen. Drückt der Benutzer den Zurück-Button nun nochmals, zeigt die Adresszeile http://mozilla.org/foo.html und umgeht bar.html vollständig.

+ +

 

+ +

The popstate event

+ +

A popstate event is dispatched to the window every time the active history entry changes. If the history entry being activated was created by a call to pushState or affected by a call to replaceState, the popstate event's state property contains a copy of the history entry's state object.

+ +

See {{ domxref("window.onpopstate") }} for sample usage.

+ +

Reading the current state

+ +

When your page loads, it might have a non-null state object.  This can happen, for example, if the page sets a state object (using pushState() or replaceState()) and then the user restarts her browser.  When your page reloads, the page will receive an onload event, but no popstate event.  However, if you read the history.state property, you'll get back the state object you would have gotten if a popstate had fired.

+ +

You can read the state of the current history entry without waiting for a popstate event using the history.state property like this:

+ +
var currentState = history.state;
+
+ +

Examples

+ +

For a complete example of AJAX web site, please see: Ajax navigation example.

+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
replaceState, pushState5{{ CompatGeckoDesktop("2.0") }}1011.505.0
history.state18{{ CompatGeckoDesktop("2.0") }}1011.506.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
replaceState, pushState{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
history.state{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

See also

+ + + +

{{ languages( { "ja": "ja/DOM/Manipulating_the_browser_history"} ) }}

diff --git a/files/de/web/api/html_drag_and_drop_api/index.html b/files/de/web/api/html_drag_and_drop_api/index.html new file mode 100644 index 0000000000..292b860888 --- /dev/null +++ b/files/de/web/api/html_drag_and_drop_api/index.html @@ -0,0 +1,11 @@ +--- +title: DragDrop +slug: DragDrop +tags: + - NeedsTranslation + - TopicStub +translation_of: Web/API/HTML_Drag_and_Drop_API +translation_of_original: DragDrop +--- +

 

+

See https://developer.mozilla.org/en-US/docs/DragDrop/Drag_and_Drop

diff --git a/files/de/web/api/htmlelement/change_event/index.html b/files/de/web/api/htmlelement/change_event/index.html new file mode 100644 index 0000000000..8836b6bc67 --- /dev/null +++ b/files/de/web/api/htmlelement/change_event/index.html @@ -0,0 +1,109 @@ +--- +title: change +slug: Web/Events/change +translation_of: Web/API/HTMLElement/change_event +--- +

Das change Event wird von {{HTMLElement("input")}}, {{HTMLElement("select")}}, und {{HTMLElement("textarea")}} Elementen ausgelöst, wenn der Benutzer den Wert des Elements verändert. Im Gegensatz zum {{event("input")}} Event wird das change Event nicht bei jeder Änderung der value Eigenschaft ausgelöst.

+ +

General info

+ +
+
Specification
+
HTML5
+
Interface
+
{{domxref("Event")}}
+
Bubbles
+
Yes
+
Cancelable
+
No
+
Target
+
Element
+
Default Action
+
undefined
+
+ +

Eigenschaften

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
+ +

Beschreibung

+ +

Das change Event wird abhängig vom Form-Element, welches verändert wird, und der Art der Benutzerinteraktion mit dem Element in verschiedenen Situationen ausgelöst:

+ + + +

Verschiedene Webbbrowser unterscheiden sich darin, ob das change Event bei bestimmten Interaktionen ausgelöst werden soll oder nicht. Tastaturnavigation in {{HTMLElement("select")}} Elementen zum Beispiel lösen das change event in Gecko nie aus bis der Benutzer die Enter-Taste drückt oder den Fokus vom <select> (see {{bug("126379")}}) Element nimmt.

+ +

Die HTML Spezifikation listet die <input> Typen, welche das change Event auslösen können.

+ +

Beispiele

+ +

Ein unvollständiges Beispiel auf jsfiddle: http://jsfiddle.net/nfakc/5/, welches möglicherweise nich in allen Webbrowsern funktioniert.

+ +

Beispiel: Change Event auf einem select

+ +

Der folgende Code behandelt das change Event eines select durch den Aufruf der changeEventHandler Funktion im onchange Attribut. Die Funktion liest den Wert des Elements, das das Event auslöste, und gibt ihn in einem Alert aus.

+ +
<html>
+  <head>
+    <title>Example: Change event on a select</title>
+    <script type="text/javascript">
+      function changeEventHandler(event) {
+        alert('You like ' + event.target.value + ' ice cream.');
+      }
+    </script>
+    </head>
+    <body>
+        <label>Choose an ice cream flavor: </label>
+        <select size="1" onchange="changeEventHandler(event);">
+            <option>chocolate</option>
+            <option>strawberry</option>
+            <option>vanilla</option>
+        </select>
+    </body>
+</html>
+
+ +

Siehe auch

+ +

{{domxref("NetworkInformation.connection")}} löst das change Event  aus, wenn sich die Informationen zur Verbindung verändern.

+ +

Webbrowserkompatibilität

+ +

{{ CompatibilityTable() }}

+ +

Laut QuirksMode sind Chrome und Firefox manchmal kompatibel. Aber IE9 und frühere Versionen von IE10 haben nur eine unvollständige Unterstützung.

diff --git a/files/de/web/api/htmlelement/innertext/index.html b/files/de/web/api/htmlelement/innertext/index.html new file mode 100644 index 0000000000..bd1594471a --- /dev/null +++ b/files/de/web/api/htmlelement/innertext/index.html @@ -0,0 +1,90 @@ +--- +title: Node.innerText +slug: Web/API/Node/innerText +tags: + - API DOM Property Reference +translation_of: Web/API/HTMLElement/innerText +--- +
{{APIRef("DOM")}}
+ +

Zusammenfassung

+ +

Node.innerText ist eine Eigenschaft die die "gerenderten" Text Inhalte einer node und ihrer nachfahren representiert. Als getter nähert es sich dem Text an, den ein User erhalten würde wenn sie/er den Inhalt des Elementes mit dem Kursor highlighten und dann zum Clipboard kopieren würde. Dieses Feature wurde ursprünglich von Internet Explorer eingeführt, und wurde förmlich in den HTML standards von 2016 spezifiziert nachdem es von allen Hauptbrowsern übernommen wurde.

+ +

{{domxref("Node.textContent")}} ist eine etwas ähnliche Alternative. Es gibt allerdings wichtige Unterschiede zwischen den beiden.

+ +

Spezifikation

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', 'dom.html#the-innertext-idl-attribute', 'innerText')}}{{Spec2('HTML WHATWG')}} +

Eingeführt, basiert auf dem draft of the innerText specification. Siehe whatwg/html#465 und whatwg/compat#5 für die Historie.

+
+ +

Browser Kompatibilität

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support4{{ CompatGeckoDesktop(45) }}69.6 (probably earlier)3
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support2.3 (probably earlier){{ CompatGeckoMobile(45) }}10 (probably earlier)124.1 (probably earlier)
+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/htmlheadelement/index.html b/files/de/web/api/htmlheadelement/index.html new file mode 100644 index 0000000000..1c71988bda --- /dev/null +++ b/files/de/web/api/htmlheadelement/index.html @@ -0,0 +1,28 @@ +--- +title: head +slug: Web/HTML/Element/head +tags: + - HTML + - HTML Elemente + - HTML Referenz +translation_of: Web/API/HTMLHeadElement +--- +

Das <head> HTML Element legt den Kopf eines Dokuments fest. In diesem werden Informationen für das Dokument angegeben, darunter der Dokumententitel und Meta-Daten.

+ +

Beispiel

+ +
<html>
+  <head>
+    <title>Seitentitel</title>
+  </head>
+</html>
+
+ +

Spezifikationen

+ + + +

{{HTMLRef}}

diff --git a/files/de/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html b/files/de/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html new file mode 100644 index 0000000000..6ae6f33dd7 --- /dev/null +++ b/files/de/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html @@ -0,0 +1,194 @@ +--- +title: Grundkonzepte +slug: Web/API/IndexedDB_API/Grundkonzepte_hinter_IndexedDB +translation_of: Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB +--- +

IndexedDB ermöglicht es Ihnen Daten innerhalb des Browsers eines Benutzers permanent abzulegen. Weil es Sie Webanwendungen mit funktionsreichen Abfragemöglichkeiten erstellen lässt, können diese Anwendungen sowohl online als auch offline funktionieren. IndexedDB ist geeignet für Anwendungen, die eine große Menge an Daten speichern (z.B. ein Katalog von DVDs in einer Videothek) und Anwendungen, die keine durchgehende Internetverbindung benötigen um zu funktionieren (z.B. E-Mail-Clients, To-Do-Listen oder Notizen).

+

Über dieses Dokument

+

Diese Einführung bespricht wesentliche Konzepte und Fachbegriffe in IndexedDB. Sie liefert Ihnen einen Gesamtüberblick und führt Sie in die Schlüsselkonzepte ein. Um mehr über die Begrifflichkeiten von IndexedDB zu erfahren, lesen Sie den Abschnitt Definitionen.

+

Eine Anleitung zur Verwendung der API finden Sie im Artikel Using IndexedDB. Eine Referenzdokumentierung der IndexedDB-API finden Sie im Artikel IndexedDB und dessen Unterseiten, welche die Objekttypen dokumentiert, die von IndexedDB verwendet werden, ebenso wie die Methoden von synchronen wie asynchronen APIs.

+

Überblick über IndexedDB

+

Mit IndexedDB lassen sich indizierte Objekte mit „Schlüsseln“ ablegen und abrufen. Alle Änderungen an der Datenbank geschehen innerhalb von Transaktionen. Wie die meisten Webspeicher-Lösungen folgt IndexedDB einer Same-Origin-Policy. Während also auf Daten, die innerhalb einer Domain gespeichert wurden, zugegriffen werden kann, kann nicht domainübergreifend auf Daten zugegriffen werden.

+

Die API umfasst sowohl eine asynchrone API als auch eine synchrone API. Die asynchrone API kann für die meisten Fälle verwendet werden, auch für WebWorkers, während die synchrone API nur für den Gebrauch durch WebWorkers gedacht ist. Momentan wird die synchrone API von keinem der großen Browser unterstützt. Aber selbst wenn synchrone APIs unterstützt wären, würden Sie eher die asynchrone API verwenden, wenn Sie mit IndexedDB arbeiten.

+

IndexedDB ist eine Alternative zur WebSQL-Datenbank, welche vom W3C am 18. November 2010 als veraltet erklärt wurde. Während sowohl IndexedDB als auch WebSQL Lösungen zur Speicherung von Daten bieten, bieten sie nicht dieselben Funktionalitäten. WebSQL-Datenbank ist ein relationales Datenbankanfragesystem, IndexedDB hingegen ist ein indiziertes Tabellensystem.

+

Wichtige Konzepte

+

Wenn Sie die Arbeit mit anderen Datenbanksystemen gewohnt sind kann die Arbeit mit IndexedDB am Anfang ungewohnt erscheinen. Behalten Sie deshalb folgende wichtige Konzepte im Hinterkopf:

+ +

Definitionen

+

Dieser Abschitt definiert und erklärt Begriffe, die in der IndexedDB-API verwendet werden.

+

Datenbank

+
+
+ Datenbank
+
+ Ein Aufbewahrungsort für Informationen, typischerweise bestehend aus einem oder mehreren Objektspeichern. Jede Datenbank muss folgende Angaben enthalten: +
    +
  • Name. Er identifiziert die Datenbank innerhalb einer konkreten Herkunft und verändert sich nicht innerhalb seiner Lebenszeit. Der Name kann aus einem beliebigen String-Wert bestehen (einschließlich dem leeren String).
    • +
  • +

    Aktuelle Version. Wenn eine Datenbank zum ersten Mal erstellt wird, nimmt ihre Version den integer-Wert 1 an, wenn nichts anderes angegeben wird. Jede Datenbank kann zu einem Zeitpunkt nur eine Version haben.

    +
    • +
+
+
+ Objektspeicher
+
+

Das Instrument, mit welchem Daten in einer Datenbank gespeichert werden. Der Objektspeicher hält Eintragungen aus Schlüssel-Wert-Paaren permanent. Eintragungen innerhalb eines Objektspeichers werden entsprechend der Schlüssel in aufsteigender Reihenfolge sortiert.

+

Jeder Objektspeicher muss einen Namen haben, der innerhalb seiner Datenbank einzigartig ist. Der Objektspeicher kann optional einen Schlüsselerzeuger und einen Schlüsselpfad besitzen. Wenn der Objektspeicher einen Schlüsselpfad hat, verwendet er in-line keys; ansonsten out-of-line keys.

+

Eine Referenzdokumentation zu Objektspeichern finden Sie unter IDBObjectStore oder IDBObjectStoreSync.

+
+
+ Version
+
+ Wenn eine Datenbank zum ersten Mal erstellt wird, ist ihre Versionsnummer die integer-Zahl 1. Jede Datenbank hat zu jedem Zeitpunkt genau eine Versionsnummer; eine Datenbank kann nicht in verschiedenen Versionen gleichzeitig existieren. Die Versionsnummer kann nur geändert werden, indem die Datenbank mit einer größeren Versionsnummer geöffnet wird als mit der aktuellen. Das wird die Transaktion versionchange starten und ein upgradeneeded Ereignis auslösen. Die einzige Stelle, an der das Schema der Datenbank geupdatet werden kann, ist innerhalb des Handlers dieses Ereignisses.
+  
+
+ Anmerkung: Diese Definition beschreibt die aktuellsten Spezifikationen, welche nur in Browsern auf dem neuesten Stand implementiert sind. In alten Browsern ist die mittlerweile veraltete und entfernte Methode IDBDatabase.setVersion() implementiert.
+
+ Datenbankverbindung
+
+ Eine Operation, die beim Öffnen einer Datenbank erstellt wird. Eine vorgegebene Datenbank kann mehrere Verbindungen gleichzeitig haben.
+
+ Transaktion
+
+

Eine nicht teilbare und dauerhafte Menge an Datenzugriffs- und Datenmodifikationsoperationen auf einer bestimmten Datenbank. Durch Transaktionen können Sie auf die Daten einer Datenbank zugreifen. Tatsächlich muss jeder Lese- oder Schreibvorgang von Daten in einer Transaktion stattfinden.
+
+ Eine Datenbankverbindung kann mit mehreren aktiven Transaktionen gleichzeitig verknüpft sein, so lange schreibende Transaktionen keine überlappenden scopes haben. The scope of transactions, which is defined at creation, determines which object stores the transaction can interact with and remains constant for the lifetime of the transaction. So, for example, if a database connection already has a writing transaction with a scope that just covers the flyingMonkey object store, you can start a second transaction with a scope of the unicornCentaur and unicornPegasus object stores. As for reading transactions, you can have several of them—even overlapping ones.

+

Transactions are expected to be short-lived, so the browser can terminate a transaction that takes too long, in order to free up storage resources that the long-running transaction has locked. You can abort the transaction, which rolls back the changes made to the database in the transaction. And you don't even have to wait for the transaction to start or be active to abort it.

+

The three modes of transactions are: readwrite, readonly, and versionchange. The only way to create and delete object stores and indexes is by using a versionchange transaction. To learn more about transaction types, see the reference article for IndexedDB.

+

Because everything happens within a transaction, it is a very important concept in IndexedDB. To learn more about transactions, especially on how they relate to versioning, see IDBTransaction, which also has reference documentation. For the documentation on the synchronous API, see IDBTransactionSync.

+
+
+ Anfrage
+
+ Die Operation, mit der Lese- und Schreibvorgänge auf einer Datenbank ausgeführt werden. Jede Anfrage repräsentiert eine Lese- oder Schreiboperation.
+
+ Index
+
+

Ein Spezialobjektspeicher zum Nachschlagen von Einträgen eines anderen Objektspeichers, bezeichnet als referenzierter Objektspeicher. Der Index ist ein persistenter Schlüssel-Wert-Speicher, wobei der Wert seiner Einträge dem Schlüssel eines Eintrages im referenzierten Objektspeicher entspricht. Die Einträge in einem Index werden automatisch eingepflegt, sobald Einträge im referenzierten Objekt eingefügt, aktualisiert oder entfernt werden. Jeder Eintrag in einem Index kann auf nur einen Eintrag in seinem referenzierten Objektspeicher zeigen, aber mehrere Indizes können auf denselben Objektspeicher verweisen. Wenn der Objektspeicher sich ändert, werden alle Indizes, die auf ihn verweisen, automatisch aktualisiert.

+

Alternativ können Einträge eines Objektspeichers mithilfe eines Schlüssels nachgeschlagen werden.

+

Um mehr über die Verwendung von Indizes zu erfahren, lesen Sie Using IndexedDB. Die Referenzdokumentation zu Indizes finden Sie unter IDBKeyRange.

+
+
+

Schlüssel und Wert

+
+
+ Schlüssel
+
+

Ein Datenwert über welchen abgelegte Werte aus dem Objektspeicher sortiert und ausgelesen werden können. Der Objektspeicher kann den Schlüssel aus einer dieser drei Quellen erlangen: Einem Schlüsselgenerator, einem Schlüsselpfad und einem explizit angegebem Wert. Der Schlüssel muss aus einem Datentyp bestehen, der eine Nummer hat, die größer ist als die des Schlüssel vor ihm. Jeder Eintrag in einem Objektspeicher muss einen innerhalb des gleichen Objektspeichers einzigartigen Schlüssel haben, deshalb können nicht mehrere Einträge mit demselben Schlüssel in einem vorgegebenem Objektspeicher vorliegen.
+
+ Ein Schlüssel kann einen der folgenden Typen haben: string, date, float und array. Bei Arrays kann der Schlüssel zwischen einem leeren Wert und unendlich liegen. Arrays können wiederum Arrays beinhalten. Es gibt keine Vorschrift nur Schlüssel der Typen string oder integer zu verwenden {{ fx_minversion_inline("11") }}.

+

Alternativ können Sie Einträge eines Objektspeichers auch mithilfe eines Index nachschlagen.

+
+
+ Schlüsselgenerator
+
+ Ein Mechanismus um neue Schlüssel in einer angeordneten Reihenfolge zu erzeugen. Wenn ein Objektspeicher über keinen Schlüsselgenerator verfügt, muss die Anwendung Schlüssel für zu speichernde Einträge zur Verfügung stellen. Generatoren werden nicht zwischen Speichern geteilt. Dies ist mehr ein Detail von Browserimplementierungen, da in der Webentwicklung nicht wirklich Schlüsselgeneratoren erzeugt oder auf sie zugegriffen wird.
+
+ in-line key
+
+ A key that is stored as part of the stored value. It is found using a key path. An in-line key can be generated using a generator. After the key has been generated, it can then be stored in the value using the key path or it can also be used as a key.
+
+ out-of-line key
+
+ A key that is stored separately from the value being stored.
+
+ key path
+
+ Defines where the browser should extract the key from a value in the object store or index. A valid key path can include one of the following: an empty string, a JavaScript identifier, or multiple JavaScript identifiers separated by periods. It cannot include spaces.
+
+ value
+
+

Each record has a value, which could include anything that can be expressed in JavaScript, including: boolean, number, string, date, object, array, regexp, undefined, and null.

+

When an object or array is stored, the properties and values in that object or array can also be anything that is a valid value.

+

Blobs and files can be stored, cf. specification {{ fx_minversion_inline("11") }}.

+
+
+

Range and scope

+
+
+ scope
+
+ The set of object stores and indexes to which a transaction applies. The scopes of read-only transactions can overlap and execute at the same time. On the other hand, the scopes of writing transactions cannot overlap. You can still start several transactions with the same scope at the same time, but they just queue up and execute one after another.
+
+ cursor
+
+ A mechanism for iterating over multiple records with a key range. The cursor has a source that indicates which index or object store it is iterating. It has a position within the range, and moves in a direction that is increasing or decreasing in the order of record keys. For the reference documentation on cursors, see IDBCursor or IDBCursorSync.
+
+ key range
+
+

A continuous interval over some data type used for keys. Records can be retrieved from object stores and indexes using keys or a range of keys. You can limit or filter the range using lower and upper bounds. For example, you can iterate over all values of a key between x and y.

+

For the reference documentation on key range, see IDBKeyRange.

+
+
+

Limitations

+

IndexedDB is designed to cover most cases that need client-side storage. However, it is not designed for a few cases like the following:

+ +

In addition, be aware that browsers can wipe out the database, such as in the following conditions:

+ +

The exact circumstances and browser capabilities change over time, but the general philosophy of the browser vendors is to make the best effort to keep the data when possible.

+
+

Warning: At the moment due to bugs or on purpose it's impossible to open an IndexedDB database from a Web App. This needs more investigation and then be documented.

+
+

Next step

+

OK, so, now with these big concepts under our belts, we can get to more concrete stuff. For a tutorial on how to use the API, see Using IndexedDB.

+

See also

+

Specification

+ +

Reference

+ +

Tutorials

+ +

Related article

+ diff --git a/files/de/web/api/indexeddb_api/grundkonzepte_hinter_indexeddb/index.html b/files/de/web/api/indexeddb_api/grundkonzepte_hinter_indexeddb/index.html deleted file mode 100644 index 6ae6f33dd7..0000000000 --- a/files/de/web/api/indexeddb_api/grundkonzepte_hinter_indexeddb/index.html +++ /dev/null @@ -1,194 +0,0 @@ ---- -title: Grundkonzepte -slug: Web/API/IndexedDB_API/Grundkonzepte_hinter_IndexedDB -translation_of: Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB ---- -

IndexedDB ermöglicht es Ihnen Daten innerhalb des Browsers eines Benutzers permanent abzulegen. Weil es Sie Webanwendungen mit funktionsreichen Abfragemöglichkeiten erstellen lässt, können diese Anwendungen sowohl online als auch offline funktionieren. IndexedDB ist geeignet für Anwendungen, die eine große Menge an Daten speichern (z.B. ein Katalog von DVDs in einer Videothek) und Anwendungen, die keine durchgehende Internetverbindung benötigen um zu funktionieren (z.B. E-Mail-Clients, To-Do-Listen oder Notizen).

-

Über dieses Dokument

-

Diese Einführung bespricht wesentliche Konzepte und Fachbegriffe in IndexedDB. Sie liefert Ihnen einen Gesamtüberblick und führt Sie in die Schlüsselkonzepte ein. Um mehr über die Begrifflichkeiten von IndexedDB zu erfahren, lesen Sie den Abschnitt Definitionen.

-

Eine Anleitung zur Verwendung der API finden Sie im Artikel Using IndexedDB. Eine Referenzdokumentierung der IndexedDB-API finden Sie im Artikel IndexedDB und dessen Unterseiten, welche die Objekttypen dokumentiert, die von IndexedDB verwendet werden, ebenso wie die Methoden von synchronen wie asynchronen APIs.

-

Überblick über IndexedDB

-

Mit IndexedDB lassen sich indizierte Objekte mit „Schlüsseln“ ablegen und abrufen. Alle Änderungen an der Datenbank geschehen innerhalb von Transaktionen. Wie die meisten Webspeicher-Lösungen folgt IndexedDB einer Same-Origin-Policy. Während also auf Daten, die innerhalb einer Domain gespeichert wurden, zugegriffen werden kann, kann nicht domainübergreifend auf Daten zugegriffen werden.

-

Die API umfasst sowohl eine asynchrone API als auch eine synchrone API. Die asynchrone API kann für die meisten Fälle verwendet werden, auch für WebWorkers, während die synchrone API nur für den Gebrauch durch WebWorkers gedacht ist. Momentan wird die synchrone API von keinem der großen Browser unterstützt. Aber selbst wenn synchrone APIs unterstützt wären, würden Sie eher die asynchrone API verwenden, wenn Sie mit IndexedDB arbeiten.

-

IndexedDB ist eine Alternative zur WebSQL-Datenbank, welche vom W3C am 18. November 2010 als veraltet erklärt wurde. Während sowohl IndexedDB als auch WebSQL Lösungen zur Speicherung von Daten bieten, bieten sie nicht dieselben Funktionalitäten. WebSQL-Datenbank ist ein relationales Datenbankanfragesystem, IndexedDB hingegen ist ein indiziertes Tabellensystem.

-

Wichtige Konzepte

-

Wenn Sie die Arbeit mit anderen Datenbanksystemen gewohnt sind kann die Arbeit mit IndexedDB am Anfang ungewohnt erscheinen. Behalten Sie deshalb folgende wichtige Konzepte im Hinterkopf:

- -

Definitionen

-

Dieser Abschitt definiert und erklärt Begriffe, die in der IndexedDB-API verwendet werden.

-

Datenbank

-
-
- Datenbank
-
- Ein Aufbewahrungsort für Informationen, typischerweise bestehend aus einem oder mehreren Objektspeichern. Jede Datenbank muss folgende Angaben enthalten: -
    -
  • Name. Er identifiziert die Datenbank innerhalb einer konkreten Herkunft und verändert sich nicht innerhalb seiner Lebenszeit. Der Name kann aus einem beliebigen String-Wert bestehen (einschließlich dem leeren String).
    • -
  • -

    Aktuelle Version. Wenn eine Datenbank zum ersten Mal erstellt wird, nimmt ihre Version den integer-Wert 1 an, wenn nichts anderes angegeben wird. Jede Datenbank kann zu einem Zeitpunkt nur eine Version haben.

    -
    • -
-
-
- Objektspeicher
-
-

Das Instrument, mit welchem Daten in einer Datenbank gespeichert werden. Der Objektspeicher hält Eintragungen aus Schlüssel-Wert-Paaren permanent. Eintragungen innerhalb eines Objektspeichers werden entsprechend der Schlüssel in aufsteigender Reihenfolge sortiert.

-

Jeder Objektspeicher muss einen Namen haben, der innerhalb seiner Datenbank einzigartig ist. Der Objektspeicher kann optional einen Schlüsselerzeuger und einen Schlüsselpfad besitzen. Wenn der Objektspeicher einen Schlüsselpfad hat, verwendet er in-line keys; ansonsten out-of-line keys.

-

Eine Referenzdokumentation zu Objektspeichern finden Sie unter IDBObjectStore oder IDBObjectStoreSync.

-
-
- Version
-
- Wenn eine Datenbank zum ersten Mal erstellt wird, ist ihre Versionsnummer die integer-Zahl 1. Jede Datenbank hat zu jedem Zeitpunkt genau eine Versionsnummer; eine Datenbank kann nicht in verschiedenen Versionen gleichzeitig existieren. Die Versionsnummer kann nur geändert werden, indem die Datenbank mit einer größeren Versionsnummer geöffnet wird als mit der aktuellen. Das wird die Transaktion versionchange starten und ein upgradeneeded Ereignis auslösen. Die einzige Stelle, an der das Schema der Datenbank geupdatet werden kann, ist innerhalb des Handlers dieses Ereignisses.
-  
-
- Anmerkung: Diese Definition beschreibt die aktuellsten Spezifikationen, welche nur in Browsern auf dem neuesten Stand implementiert sind. In alten Browsern ist die mittlerweile veraltete und entfernte Methode IDBDatabase.setVersion() implementiert.
-
- Datenbankverbindung
-
- Eine Operation, die beim Öffnen einer Datenbank erstellt wird. Eine vorgegebene Datenbank kann mehrere Verbindungen gleichzeitig haben.
-
- Transaktion
-
-

Eine nicht teilbare und dauerhafte Menge an Datenzugriffs- und Datenmodifikationsoperationen auf einer bestimmten Datenbank. Durch Transaktionen können Sie auf die Daten einer Datenbank zugreifen. Tatsächlich muss jeder Lese- oder Schreibvorgang von Daten in einer Transaktion stattfinden.
-
- Eine Datenbankverbindung kann mit mehreren aktiven Transaktionen gleichzeitig verknüpft sein, so lange schreibende Transaktionen keine überlappenden scopes haben. The scope of transactions, which is defined at creation, determines which object stores the transaction can interact with and remains constant for the lifetime of the transaction. So, for example, if a database connection already has a writing transaction with a scope that just covers the flyingMonkey object store, you can start a second transaction with a scope of the unicornCentaur and unicornPegasus object stores. As for reading transactions, you can have several of them—even overlapping ones.

-

Transactions are expected to be short-lived, so the browser can terminate a transaction that takes too long, in order to free up storage resources that the long-running transaction has locked. You can abort the transaction, which rolls back the changes made to the database in the transaction. And you don't even have to wait for the transaction to start or be active to abort it.

-

The three modes of transactions are: readwrite, readonly, and versionchange. The only way to create and delete object stores and indexes is by using a versionchange transaction. To learn more about transaction types, see the reference article for IndexedDB.

-

Because everything happens within a transaction, it is a very important concept in IndexedDB. To learn more about transactions, especially on how they relate to versioning, see IDBTransaction, which also has reference documentation. For the documentation on the synchronous API, see IDBTransactionSync.

-
-
- Anfrage
-
- Die Operation, mit der Lese- und Schreibvorgänge auf einer Datenbank ausgeführt werden. Jede Anfrage repräsentiert eine Lese- oder Schreiboperation.
-
- Index
-
-

Ein Spezialobjektspeicher zum Nachschlagen von Einträgen eines anderen Objektspeichers, bezeichnet als referenzierter Objektspeicher. Der Index ist ein persistenter Schlüssel-Wert-Speicher, wobei der Wert seiner Einträge dem Schlüssel eines Eintrages im referenzierten Objektspeicher entspricht. Die Einträge in einem Index werden automatisch eingepflegt, sobald Einträge im referenzierten Objekt eingefügt, aktualisiert oder entfernt werden. Jeder Eintrag in einem Index kann auf nur einen Eintrag in seinem referenzierten Objektspeicher zeigen, aber mehrere Indizes können auf denselben Objektspeicher verweisen. Wenn der Objektspeicher sich ändert, werden alle Indizes, die auf ihn verweisen, automatisch aktualisiert.

-

Alternativ können Einträge eines Objektspeichers mithilfe eines Schlüssels nachgeschlagen werden.

-

Um mehr über die Verwendung von Indizes zu erfahren, lesen Sie Using IndexedDB. Die Referenzdokumentation zu Indizes finden Sie unter IDBKeyRange.

-
-
-

Schlüssel und Wert

-
-
- Schlüssel
-
-

Ein Datenwert über welchen abgelegte Werte aus dem Objektspeicher sortiert und ausgelesen werden können. Der Objektspeicher kann den Schlüssel aus einer dieser drei Quellen erlangen: Einem Schlüsselgenerator, einem Schlüsselpfad und einem explizit angegebem Wert. Der Schlüssel muss aus einem Datentyp bestehen, der eine Nummer hat, die größer ist als die des Schlüssel vor ihm. Jeder Eintrag in einem Objektspeicher muss einen innerhalb des gleichen Objektspeichers einzigartigen Schlüssel haben, deshalb können nicht mehrere Einträge mit demselben Schlüssel in einem vorgegebenem Objektspeicher vorliegen.
-
- Ein Schlüssel kann einen der folgenden Typen haben: string, date, float und array. Bei Arrays kann der Schlüssel zwischen einem leeren Wert und unendlich liegen. Arrays können wiederum Arrays beinhalten. Es gibt keine Vorschrift nur Schlüssel der Typen string oder integer zu verwenden {{ fx_minversion_inline("11") }}.

-

Alternativ können Sie Einträge eines Objektspeichers auch mithilfe eines Index nachschlagen.

-
-
- Schlüsselgenerator
-
- Ein Mechanismus um neue Schlüssel in einer angeordneten Reihenfolge zu erzeugen. Wenn ein Objektspeicher über keinen Schlüsselgenerator verfügt, muss die Anwendung Schlüssel für zu speichernde Einträge zur Verfügung stellen. Generatoren werden nicht zwischen Speichern geteilt. Dies ist mehr ein Detail von Browserimplementierungen, da in der Webentwicklung nicht wirklich Schlüsselgeneratoren erzeugt oder auf sie zugegriffen wird.
-
- in-line key
-
- A key that is stored as part of the stored value. It is found using a key path. An in-line key can be generated using a generator. After the key has been generated, it can then be stored in the value using the key path or it can also be used as a key.
-
- out-of-line key
-
- A key that is stored separately from the value being stored.
-
- key path
-
- Defines where the browser should extract the key from a value in the object store or index. A valid key path can include one of the following: an empty string, a JavaScript identifier, or multiple JavaScript identifiers separated by periods. It cannot include spaces.
-
- value
-
-

Each record has a value, which could include anything that can be expressed in JavaScript, including: boolean, number, string, date, object, array, regexp, undefined, and null.

-

When an object or array is stored, the properties and values in that object or array can also be anything that is a valid value.

-

Blobs and files can be stored, cf. specification {{ fx_minversion_inline("11") }}.

-
-
-

Range and scope

-
-
- scope
-
- The set of object stores and indexes to which a transaction applies. The scopes of read-only transactions can overlap and execute at the same time. On the other hand, the scopes of writing transactions cannot overlap. You can still start several transactions with the same scope at the same time, but they just queue up and execute one after another.
-
- cursor
-
- A mechanism for iterating over multiple records with a key range. The cursor has a source that indicates which index or object store it is iterating. It has a position within the range, and moves in a direction that is increasing or decreasing in the order of record keys. For the reference documentation on cursors, see IDBCursor or IDBCursorSync.
-
- key range
-
-

A continuous interval over some data type used for keys. Records can be retrieved from object stores and indexes using keys or a range of keys. You can limit or filter the range using lower and upper bounds. For example, you can iterate over all values of a key between x and y.

-

For the reference documentation on key range, see IDBKeyRange.

-
-
-

Limitations

-

IndexedDB is designed to cover most cases that need client-side storage. However, it is not designed for a few cases like the following:

- -

In addition, be aware that browsers can wipe out the database, such as in the following conditions:

- -

The exact circumstances and browser capabilities change over time, but the general philosophy of the browser vendors is to make the best effort to keep the data when possible.

-
-

Warning: At the moment due to bugs or on purpose it's impossible to open an IndexedDB database from a Web App. This needs more investigation and then be documented.

-
-

Next step

-

OK, so, now with these big concepts under our belts, we can get to more concrete stuff. For a tutorial on how to use the API, see Using IndexedDB.

-

See also

-

Specification

- -

Reference

- -

Tutorials

- -

Related article

- diff --git a/files/de/web/api/indexeddb_api/indexeddb_verwenden/index.html b/files/de/web/api/indexeddb_api/indexeddb_verwenden/index.html deleted file mode 100644 index 3d6d61cf3f..0000000000 --- a/files/de/web/api/indexeddb_api/indexeddb_verwenden/index.html +++ /dev/null @@ -1,1180 +0,0 @@ ---- -title: Verwendung von IndexedDB -slug: Web/API/IndexedDB_API/IndexedDB_verwenden -translation_of: Web/API/IndexedDB_API/Using_IndexedDB ---- -

Mit IndexedDB lassen sich Daten innerhalb des Browsers eines Benutzers permanent abzulegen. Es können so Webanwendungen mit funktionsreichen Abfragemöglichkeiten in Anwendungen erstellt werden, die sowohl online als auch offline funktionieren können, da keine Netzwerkfunktionalitäten benötigt werden.

- -

Über dieses Dokument

- -

Dieses Tutorial bespricht die Verwendung der asynchronen API von IndexedDB. Wenn Sie nicht mit IndexedDB vertraut sind, sollten Sie zuerst den Artikel Grundkonzepte lesen.

- -

Eine Referenzdokumentation zur IndexedDB-API finden Sie im Artikel IndexedDB und dessen Unterseiten, welche die Typen und Objekten dokumentieren, die von IndexedDB verwendet werden, ebenso wie die Methoden von sowohl synchronen als auch asynchronen APIs.

- -

Grundschema

- -

Das von IndexedDB unterstützte Grundschema sieht folgendermaßen aus:

- -
    -
  1. Öffne eine Datenbank und starte eine Transaktion.
    2. -
  2. Erzeuge einen Objektspeicher.
    3. -
  3. Fordere die Ausführung von Datenbankoperationen an, wie das Hinzufügen und Auslesen von Daten.
    4. -
  4. Warte auf die richtige Art von DOM-Ereignis, das auftritt, wenn die Operation beendet ist.
    5. -
  5. Verarbeite die Ergebnisse? (, welche im Anforderungsobjekt gefunden werden können).
    6. -
- -

Mit dem Wissen über diese Grundkonzepte können wir uns nun konkreteren Dingen zuwenden.

- -

Erzeugung und Strukturierung des Speichers

- -

Weil sich die Spezifizierung noch in der Entwicklung befindet, verstecken sich aktuelle Implementierungen von IndexedDB unter Browserpräfixen. Bis sich die Spezifizierung verfestigt, könne Browserhersteller unterschiedliche Implementierungen der Standard-IndexedDB-API haben. Aber sobald Konsens auf dem Standard herrscht, implementieren die Hersteller ihn ohne Markierung durch Präfixe. Tatsächlich ist in manchen Implementierungen der Präfix entfernt: Internet Explorer 10, Firefox 16, Chrome 24. Wenn auf Gecko basierende Browser einen Präfix verwenden, dann verwenden sie den Präfix moz, während auf WebKit basierende Browser den Präfix webkit verwenden.

- -

Verwendung einer experimentellen Version von IndexedDB

- -

Für den Fall, dass Sie Ihren Code in Browsern verwenden wollen, die noch Präfixe verwenden, können Sie folgenden Code benutzen:

- -
// In der folgenden Zeile sollten Sie die Präfixe einfügen, die Sie testen wollen.
-window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
-// Verwenden Sie "var indexedDB = ..." NICHT außerhalb einer Funktion.
-// Ferner benötigen Sie evtl. Referenzen zu einigen window.IDB* Objekten:
-window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
-window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
-// (Mozilla hat diese Objekte nie mit Präfixen versehen, also brauchen wir kein window.mozIDB*)
- -

Beachten Sie, dass Implementierungen, die Präfixe verwenden, fehlerhaft oder unvollständig sein können oder einer alten Version der Spezifizierung folgen können. Deshalb ist es nicht empfohlen, sie im Produktivsystem zu verwenden. In manchen Fällen kann es sinnvoll sein, lieber einen Browser nicht zu unterstützen als zu behaupten, er würde unterstützt, und dann Fehler einzubüßen:

- -
if (!window.indexedDB) {
-    window.alert("Ihr Browser unterstützt keine stabile Version von IndexedDB. Dieses und jenes Feature wird Ihnen nicht zur Verfügung stehen.");
-}
-
- -

Öffnen einer Datenbank

- -

Wir starten den ganzen Prozess folgendermaßen:

- -
// Öffnen unserer Datenbank
-var request = window.indexedDB.open("MeineTestdatenbank", 3);
-
- -

Sie sehen, das Öffnen einer Datenbank funktioniert wie jede andere Operation – Sie müssen sie „anfordern“.

- -

Die Anforderung zum Öffnen öffnet nicht sofort die Datenbank und startet auch die Transaktion nicht gleich. Der Aufruf zur open() Funktion gibt ein IDBOpenDBRequest-Objekt mit Ergebniswert (Erfolg) oder Fehlerwert zurück, die Sie als Ereignis verarbeiten. Die meisten anderen asynchronen Funktionen in IndexedDB machen das gleiche – sie geben ein IDBRequest-Objekt mit Ergebnis oder Fehler zurück. Das Ergebnis für die open-Funktion ist eine Instanz einer IDBDatabase.

- -

Der zweite Parameter der open-Methode ist die Version der Datenbank. Die Version der Datenbank bestimmt das Datenbankschema – den Objektspeichern und ihrer Strukturen. Wenn die angeforderte Version nicht existiert (weil die Datenbank neu ist, oder weil die Version aktualisiert wurde), wird das Ereignis onupgradeneeded ausgelöst, und es lässt sich eine neue Version der Datenbank im Handler für dieses Ereignis erzeugen. Mehr dazu später im Abschnitt Aktualisieren der Version der Datenbank.

- -

Erzeugen von Handlern

- -

Das erste, was Sie mit fast allen Anforderungen machen wollen, die Sie erzeugen, ist das Hinzufügen von Handlern für Erfolge und Fehler:

- -
request.onerror = function(event) {
-  // Machen Sie etwas mit request.errorCode!
-};
-request.onsuccess = function(event) {
-  // Machen Sie etwas mit request.result!
-};
- -

Welche der beiden Funktionen, onsuccess() oder onerror(), wird aufgerufen? Wenn alles fehlerfrei ablief, wird ein Erfolgsereignis (d.h. ein DOM-Ereignis, dessen type Eigenschaft auf "success" gesetzt ist) mit request als target ausgelöst. Sobald es ausgelöst wurde, wird die Funktion onsuccess() auf request ausgelöst mit dem Erfolgsereignis als Argument. Wenn nicht alles fehlerfrei ablief, wird ein Fehlerereignis (d.h. ein DOM-Ereignis, dessen type Eigenschaft auf "error" gesetzt ist) auf request ausgelöst. Dies löst die Funktion onerror() aus mit dem Fehlerereignis als Argument.

- -

Die IndexedDB-API ist so entworfen, dass sie die Notwendigkeit zur Fehlerbehandlung minimiert, also werden Sie wahrscheinlich nicht viele Fehlerereignisse sehen (zumindest nicht nachdem Sie sich an die API gewöhnt haben!). Beim Öffnen von Datenbanken jedoch gibt es ein paar typische Zustände, die Fehlerereignisse erzeugen. Das wahrscheinlichste Problem ist, dass der Benutzer festgelegt hat, den Webapps das Erzeugen von Datenbanken nicht zu erlauben. Eines der Hauptentwurfsziele von IndexedDB ist es, das Speichern von großen Datenmengen zur Offline-Verwendung zu erlauben. (Um mehr darüber zu erfahren, wieviel Speicher jedem Browser zur Verfügung steht, lesen Sie Storage limits).

- -

Offensichtlich wollen Browser nicht irgendeinem Werbenetzwerk oder einer böswilligen Website erlauben, Ihren Computer zu verschmutzen, deshalb warnen Browser den Benutzer, wenn eine Webapp zum ersten Mal versucht einen IndexedDB-Speicher zu öffnen. Der Benutzer kann wählen, ob er den Zugriff erlaubt oder verbietet. Außerdem ist IndexedDB komplett deaktiviert im Privaten Modus der Browser (Privater Modus für Firefox und Incognito Modus für Chrome). Der Hauptzweck vom Surfen im Privaten Modus ist es, keine Spuren zu hinterlassen, daher schlägt der Versuch fehl, eine Datenbank in diesem Modus zu öffnen.

- -

Nun nehmen wir an, dass der Benutzer Ihren Anfragen erlaubt hat, eine Datenbank zu erstellen, und Sie haben ein Erfolgsereignis erhalten, um den Erfolgs-Callback auszulösen; was kommt als nächstes? Die Anfrage wurde hier mit einem Aufruf von indexedDB.open() erzeugt, also ist request.result eine Instanz von IDBDatabase, und Sie wollen diese auf jeden Fall für später speichern. Ihr Code könnte etwa so aussehen:

- -
var db;
-var request = indexedDB.open("MeineTestdatenbank");
-request.onerror = function(event) {
-  alert("Warum haben Sie meiner Webapp nicht erlaubt IndexedDB zu verwenden?!");
-};
-request.onsuccess = function(event) {
-  db = request.result;
-};
-
- -

Fehlerbehandlung

- -

Wie bereits oben erwähnt, werden Error events bei entsprechenden Fehlern ausgelöst und in der Objekthierarachie weiter nach oben gereicht. Solche Fehlerereignisse  werden zunächst in der entsprechende Anfrage ausgelöst, die den Fehler verursacht hat. Anschließend werden sie zur Transaktion weitergereicht und schließlich zum Datenbankobjekt.  Wenn man nicht für jede Anfrage einen Error-Handler schreiben möchte, kann man der Datenbank einen einzigen Error-Handler hinzufügen:

- -
db.onerror = function(event) {
-  // Allgemeine Fehlerbehandlung, die für alle Anfragen an die Datenbank gilt.
-  alert("Datenbankfehler: " + event.target.errorCode);
-};
-
- -

Einer der häufigsten Fehler, die beim Öffnen der Datenbank auftreten, ist  VER_ERR.  Er zeigt an, dass die Versionsnummer der lokal gespeicherten Datenbank  größer  als die Versionsnummer ist,  die man zu öffnen versucht. Ein solcher Fehler muss immer durch eine Fehlerbehandlung berücksichtigt werden.

- -

Erstellen oder Updaten der Datenbank

- -

Wenn eine neue Version der Datenbank erstellt wird, wird das onupgradeneeded Event ausgelöst. In der Handler-Funktion dieses Events musst du für die Erstellung der Datenbankspeicher, welche für diese Version benötigt wird, sorgen:

- -
// Dieses Event ist lediglich in modernen Browsern verfügbar
-request.onupgradeneeded = function(event) {
-  var db = event.target.result;
-
-  // Erstelle ein ObjectStore für diese Datenbank
-  var objectStore = db.createObjectStore("name", { keyPath: "myKey" });
-};
- -

The Versionsnummer der Datenbank ist vom Typ unsigned long long, so dass sie eine sehr große Ganzzahl sein kann.

- -
-

Das Bedeutet auch, dass sie nicht vom Typ float sein darf,  ansonsten wird sie zur nächstkleineren Ganzzahl abgerundet, so dass die Transaktion weder starten kann noch ein  upgradeneeded ausgelöst wird. Beispielsweise sollte man nicht 2.4 als Versionsnummer verwenden:

- -
var request = indexedDB.open("MeineTestdatenbank", 2.4); // don't do this, as the version will be rounded to 2
-
- -

Wenn man die Versionsnummer der Datenbank erhöht, wird ein  onupgradeneeded -Ereignis ausgelöst. In diesem Fall übernimmt die neue Datenbank automatisch die Objectstores von der Vorgängerversion der Datenbank, so dass man diese nicht erneut erzeugen muss. Lediglich neue Objectsores müssen angelegt oder nicht mehr gebrauchte der Vorgängerversion gelöscht werden. Wenn man einen bereits existierenden Objectstore ändern will (beispielsweise den keyPath veränden), ist es allerdings notwendig, den alten Objectstore zu löschen und einen neuen anzulegen. (Beachten Sie, dass dies die im Objectstore gespeicherten Informationen löscht, so dass man sie vorher auslesen und an anderer Stelle sichern sollte, bevor man ein Datenbankupgrade durchführt.)

- -

WebKit unterstützt die aktuelle Version dieser Spezifikation, wie sie in Chrome 23+ ausgeliefert wird, ebenso Opera 17+ und IE10+. Andere und ältere Implementierungen unterstützen nicht die aktuelle Version dieser Spezifikation und stellen damit auch noch nicht die Möglichkeit bereit, auf die Methodensignatur indexedDB.open(name, version).onupgradeneeded zugreifen zu könenn. Um ältere Versionen einer Datenbank auf neuer Versionen zu aktualisieren, siehe IDBDatabase reference article.

- -

Strukturierung der Datenbank

- -

Im Folgenden wird gezeigt, wie man eine die Daten  strukturiert. IndexedDB verwendet Objectstores anstatt Tabellen, wobei eine einzelne Datenbank viele verschiedene Objectsores enthalten kann. Jeglicher Wert im Objectstore ist einem bestimmten Schlüssel (key) zugeordnet. Es werden dabei unterschiedliche Arten von Schlüsseln verarbeitet, abhängig davon, ob der Objectstore  einen key path oder einen key generator benutzt.

- -

Die folgende Tabelle gibt eine Übersicht über die bereitgestellten Arten von Schlüssseln.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Key PathKey GeneratorBeschreibung
NeinNeinDieser Objectstore kann Daten beliebigen Typs speichern, inklusive primitiven Typen wie Zahlen und Zeichenketten (Strings). Beim Hinzufügen von Werten muss ein separater Schlüssel angegeben werden.
JaNeinDieser Objectstore kann nur JavaScript-Objekte speichern. Die Objekte müssen ein Attribut haben, dass wie der key path benannt ist.
NeinJaDieser Objectstore kann Daten beliebigen Typs speichern. Beim Hinzufügen von Werten kann ein separater Schlüssel angegeben werden. Fehlt der Schlüssel, so wird er generiert.
JaJaDieser Objectstore kann nur JavaScript-Objekte speichern. In der Regel wird der Schlüssel automatisch generiert und als gleichnamiges Attribut im Objekt gespeichert. Falls es jedoch bereits ein Attribut mit dem Namen gibt, so wird der Schlüssel nicht generiert, sondern der Wert des Attributes wird verwendet.
- -

You can also create indices on any object store, provided the object store holds objects, not primitives. An index lets you look up the values stored in an object store using the value of a property of the stored object, rather than the object's key.

- -

Additionally, indexes have the ability to enforce simple constraints on the stored data. By setting the unique flag when creating the index, the index ensures that no two objects are stored with both having the same value for the index's key path. So, for example, if you have an object store which holds a set of people, and you want to ensure that no two people have the same email address, you can use an index with the unique flag set to enforce this.

- -

That may sound confusing, but this simple example should illustrate the concepts:

- -
// This is what our customer data looks like.
-const customerData = [
-  { ssn: "444-44-4444", name: "Bill", age: 35, email: "bill@company.com" },
-  { ssn: "555-55-5555", name: "Donna", age: 32, email: "donna@home.org" }
-];
-const dbName = "the_name";
-
-var request = indexedDB.open(dbName, 2);
-
-request.onerror = function(event) {
-  // Handle errors.
-};
-request.onupgradeneeded = function(event) {
-  var db = event.target.result;
-
-  // Create an objectStore to hold information about our customers. We're
-  // going to use "ssn" as our key path because it's guaranteed to be
-  // unique.
-  var objectStore = db.createObjectStore("customers", { keyPath: "ssn" });
-
-  // Create an index to search customers by name. We may have duplicates
-  // so we can't use a unique index.
-  objectStore.createIndex("name", "name", { unique: false });
-
-  // Create an index to search customers by email. We want to ensure that
-  // no two customers have the same email, so use a unique index.
-  objectStore.createIndex("email", "email", { unique: true });
-
-  // Store values in the newly created objectStore.
-  for (var i in customerData) {
-    objectStore.add(customerData[i]);
-  }
-};
-
- -

As mentioned previously, onupgradeneeded is the only place where you can alter the structure of the database. In it, you can create and delete object stores and build and remove indices.

- -
Object stores are created with a single call to createObjectStore(). The method takes a name of the store, and a parameter object. Even though the parameter object is optional, it is very important, because it lets you define important optional properties and refine the type of object store you want to create. In our case, we've asked for an object store named "customers" and defined a keyPath that is the property that makes an individual object in the store unique. That property in this example is "ssn" since a social security number is guaranteed to be unique. "ssn" must be present on every object that is stored in the objectStore.
- -

We've also asked for an index named "name" that looks at the name property of the stored objects. As with createObjectStore(), createIndex() takes an optional options object that refines the type of index that you want to create. Adding objects that don't have a name property still succeeds, but the object won't appear in the "name" index.

- -

We can now retrieve the stored customer objects using their ssn from the object store directly, or using their name by using the index. To learn how this is done, see the section on using an index.

- -

Hinzufügen und löschen von Daten

- -

Before you can do anything with your new database, you need to start a transaction. Transactions come from the database object, and you have to specify which object stores you want the transaction to span. Also, you need to decide if you're going to make changes to the database or if you just need to read from it. Although transactions have three modes (read-only, read/write, and versionchange), you're better off using a read-only transaction when you can, because they can run concurrently

- -

Daten zur Datenbank hinzufügen

- -

If you've just created a database, then you probably want to write to it. Here's what that looks like:

- -
var transaction = db.transaction(["customers"], "readwrite");
-// Note: Older experimental implementations use the deprecated constant IDBTransaction.READ_WRITE instead of "readwrite".
-// In case you want to support such an implementation, you can just write:
-// var transaction = db.transaction(["customers"], IDBTransaction.READ_WRITE);
- -

The transaction() function takes two arguments (though one is optional) and returns a transaction object. The first argument is a list of object stores that the transaction will span. You can pass an empty array if you want the transaction to span all object stores, but don't do it because the spec says an empty array should generate an InvalidAccessError. If you don't specify anything for the second argument, you get a read-only transaction. Since you want to write to it here you need to pass the "readwrite" flag.

- -

Now that you have a transaction you need to understand its lifetime. Transactions are tied very closely to the event loop. If you make a transaction and return to the event loop without using it then the transaction will become inactive. The only way to keep the transaction active is to make a request on it. When the request is finished you'll get a DOM event and, assuming that the request succeeded, you'll have another opportunity to extend the transaction during that callback. If you return to the event loop without extending the transaction then it will become inactive, and so on. As long as there are pending requests the transaction remains active. Transaction lifetimes are really very simple but it might take a little time to get used to. A few more examples will help, too. If you start seeing TRANSACTION_INACTIVE_ERR error codes then you've messed something up.

- -

Transactions can receive DOM events of three different types: error, abort, and complete. We've talked about the way that error events bubble, so a transaction receives error events from any requests that are generated from it. A more subtle point here is that the default behavior of an error is to abort the transaction in which it occurred. Unless you handle the error by calling preventDefault() on the error event, the entire transaction is rolled back. This design forces you to think about and handle errors, but you can always add a catchall error handler to the database if fine grained error handling is too cumbersome. If you don't handle an error event or if you call abort() on the transaction, then the transaction is rolled back and an abort event is fired on the transaction. Otherwise, after all pending requests have completed, you'll get a complete event. If you're doing lots of database operations, then tracking the transaction rather than individual requests can certainly aide your sanity.

- -

Now that you have a transaction, you'll need to get the object store from it. Transactions only let you have an object store that you specified when creating the transaction. Then you can add all the data you need.

- -
// Do something when all the data is added to the database.
-transaction.oncomplete = function(event) {
-  alert("All done!");
-};
-
-transaction.onerror = function(event) {
-  // Don't forget to handle errors!
-};
-
-var objectStore = transaction.objectStore("customers");
-for (var i in customerData) {
-  var request = objectStore.add(customerData[i]);
-  request.onsuccess = function(event) {
-    // event.target.result == customerData[i].ssn;
-  };
-}
- -

The result of a request generated from a call to add() is the key of the value that was added. So in this case, it should equal the ssn property of the object that was added, since the object store uses the ssn property for the key path. Note that the add() function requires that no object already be in the database with the same key. If you're trying to modify an existing entry, or you don't care if one exists already, use the put() function.

- -

Daten aus der Datenbank löschen

- -

Löschen von Daten ist recht ähnlich:

- -
var request = db.transaction(["customers"], "readwrite")
-                .objectStore("customers")
-                .delete("444-44-4444");
-request.onsuccess = function(event) {
-  // It's gone!
-};
- -

Daten aus der Datenbank auslesen

- -

Now that the database has some info in it, you can retrieve it in several ways. First, the simple get(). You need to provide the key to retrieve the value, like so:

- -
var transaction = db.transaction(["customers"]);
-var objectStore = transaction.objectStore("customers");
-var request = objectStore.get("444-44-4444");
-request.onerror = function(event) {
-  // Handle errors!
-};
-request.onsuccess = function(event) {
-  // Do something with the request.result!
-  alert("Name for SSN 444-44-4444 is " + request.result.name);
-};
- -

That's a lot of code for a "simple" retrieval. Here's how you can shorten it up a bit, assuming that you handle errors at the database level:

- -
db.transaction("customers").objectStore("customers").get("444-44-4444").onsuccess = function(event) {
-  alert("Name for SSN 444-44-4444 is " + event.target.result.name);
-};
- -

See how this works? Since there's only one object store, you can avoid passing a list of object stores you need in your transaction and just pass the name as a string. Also, you're only reading from the database, so you don't need a "readwrite" transaction. Calling transaction() with no mode specified gives you a "readonly" transaction. Another subtlety here is that you don't actually save the request object to a variable. Since the DOM event has the request as its target you can use the event to get to the result property. Easy, right?!

- -

Benutzung eines Cursors

- -

Using get() requires that you know which key you want to retrieve. If you want to step through all the values in your object store, then you can use a cursor. Here's what it looks like:

- -
var objectStore = db.transaction("customers").objectStore("customers");
-
-objectStore.openCursor().onsuccess = function(event) {
-  var cursor = event.target.result;
-  if (cursor) {
-    alert("Name for SSN " + cursor.key + " is " + cursor.value.name);
-    cursor.continue();
-  }
-  else {
-    alert("No more entries!");
-  }
-};
- -

The openCursor() function takes several arguments. First, you can limit the range of items that are retrieved by using a key range object that we'll get to in a minute. Second, you can specify the direction that you want to iterate. In the above example, we're iterating over all objects in ascending order. The success callback for cursors is a little special. The cursor object itself is the result of the request (above we're using the shorthand, so it's event.target.result). Then the actual key and value can be found on the key and value properties of the cursor object. If you want to keep going, then you have to call continue() on the cursor. When you've reached the end of the data (or if there were no entries that matched your openCursor() request) you still get a success callback, but the result property is undefined.

- -

One common pattern with cursors is to retrieve all objects in an object store and add them to an array, like this:

- -
var customers = [];
-
-objectStore.openCursor().onsuccess = function(event) {
-  var cursor = event.target.result;
-  if (cursor) {
-    customers.push(cursor.value);
-    cursor.continue();
-  }
-  else {
-    alert("Got all customers: " + customers);
-  }
-};
- -
Warnung: Die folgende Funktion ist nicht Teil des IndexedDB Standards.
- -

Mozilla has also implemented getAll() to handle this case. It isn't part of the IndexedDB standard, so it may disappear in the future. We've included it because we think it's useful. The following code does precisely the same thing as above:

- -
objectStore.getAll().onsuccess = function(event) {
-  alert("Got all customers: " + event.target.result);
-};
- -

There is a performance cost associated with looking at the value property of a cursor, because the object is created lazily. When you use getAll(), Gecko must create all the objects at once. If you're just interested in looking at each of the keys, for instance, it is much more efficient to use a cursor than to use getAll(). If you're trying to get an array of all the objects in an object store, though, use getAll().

- -

Benutzung eines Index

- -

Storing customer data using the SSN as a key is logical since the SSN uniquely identifies an individual. (Whether this is a good idea for privacy is a different question, outside the scope of this article.) If you need to look up a customer by name, however, you'll need to iterate over every SSN in the database until you find the right one. Searching in this fashion would be very slow, so instead you can use an index.

- -
var index = objectStore.index("name");
-index.get("Donna").onsuccess = function(event) {
-  alert("Donna's SSN is " + event.target.result.ssn);
-};
- -

The "name" cursor isn't unique, so there could be more than one entry with the name set to "Donna". In that case you always get the one with the lowest key value.

- -

If you need to access all the entries with a given name you can use a cursor. You can open two different types of cursors on indexes. A normal cursor maps the index property to the object in the object store. A key cursor maps the index property to the key used to store the object in the object store. The differences are illustrated here:

- -
index.openCursor().onsuccess = function(event) {
-  var cursor = event.target.result;
-  if (cursor) {
-    // cursor.key is a name, like "Bill", and cursor.value is the whole object.
-    alert("Name: " + cursor.key + ", SSN: " + cursor.value.ssn + ", email: " + cursor.value.email);
-    cursor.continue();
-  }
-};
-
-index.openKeyCursor().onsuccess = function(event) {
-  var cursor = event.target.result;
-  if (cursor) {
-    // cursor.key is a name, like "Bill", and cursor.value is the SSN.
-    // No way to directly get the rest of the stored object.
-    alert("Name: " + cursor.key + ", SSN: " + cursor.value);
-    cursor.continue();
-  }
-};
- -

Specifying the range and direction of cursors

- -

If you would like to limit the range of values you see in a cursor, you can use a key range object and pass it as the first argument to openCursor() or openKeyCursor(). You can make a key range that only allows a single key, or one the has a lower or upper bound, or one that has both a lower and upper bound. The bound may be "closed" (i.e., the key range includes the given value) or "open" (i.e., the key range does not include the given value). Here's how it works:

- -
// Only match "Donna"
-var singleKeyRange = IDBKeyRange.only("Donna");
-
-// Match anything past "Bill", including "Bill"
-var lowerBoundKeyRange = IDBKeyRange.lowerBound("Bill");
-
-// Match anything past "Bill", but don't include "Bill"
-var lowerBoundOpenKeyRange = IDBKeyRange.lowerBound("Bill", true);
-
-// Match anything up to, but not including, "Donna"
-var upperBoundOpenKeyRange = IDBKeyRange.upperBound("Donna", true);
-
-//Match anything between "Bill" and "Donna", but not including "Donna"
-var boundKeyRange = IDBKeyRange.bound("Bill", "Donna", false, true);
-
-index.openCursor(boundKeyRange).onsuccess = function(event) {
-  var cursor = event.target.result;
-  if (cursor) {
-    // Do something with the matches.
-    cursor.continue();
-  }
-};
- -

Sometimes you may want to iterate in descending order rather than in ascending order (the default direction for all cursors). Switching direction is accomplished by passing prev to the openCursor() function:

- -
objectStore.openCursor(null, IDBCursor.prev).onsuccess = function(event) {
-  var cursor = event.target.result;
-  if (cursor) {
-    // Do something with the entries.
-    cursor.continue();
-  }
-};
- -

Since the "name" index isn't unique, there might be multiple entries where name is the same. Note that such a situation cannot occur with object stores since the key must always be unique. If you wish to filter out duplicates during cursor iteration over indexes, you can pass nextunique (or prevunique if you're going backwards) as the direction parameter. When nextunique or prevunique is used, the entry with the lowest key is always the one returned.

- -
index.openKeyCursor(null, IDBCursor.nextunique).onsuccess = function(event) {
-  var cursor = event.target.result;
-  if (cursor) {
-    // Do something with the entries.
-    cursor.continue();
-  }
-};
- -

Versionsänderung während eine Webapplikation in einem anderen Tab geöffnet ist

- -

When your web app changes in such a way that a version change is required for your database, you need to consider what happens if the user has the old version of your app open in one tab and then loads the new version of your app in another. When you call open() with a greater version than the actual version of the database, all other open databases must explicitly acknowledge the request before you can start making changes to the database. Here's how it works:

- -
var openReq = mozIndexedDB.open("MyTestDatabase", 2);
-
-openReq.onblocked = function(event) {
-  // If some other tab is loaded with the database, then it needs to be closed
-  // before we can proceed.
-  alert("Please close all other tabs with this site open!");
-};
-
-openReq.onupgradeneeded = function(event) {
-  // All other databases have been closed. Set everything up.
-  db.createObjectStore(/* ... */);
-  useDatabase(db);
-}
-
-openReq.onsuccess = function(event) {
-  var db = event.target.result;
-  useDatabase(db);
-  return;
-}
-
-function useDatabase(db) {
-  // Make sure to add a handler to be notified if another page requests a version
-  // change. We must close the database. This allows the other page to upgrade the database.
-  // If you don't do this then the upgrade won't happen until the user close the tab.
-  db.onversionchange = function(event) {
-    db.close();
-    alert("A new version of this page is ready. Please reload!");
-  };
-
-  // Do stuff with the database.
-}
-
- -

Sicherheit

- -

IndexedDB uses the same-origin principle, which means that it ties the store to the origin of the site that creates it (typically, this is the site domain or subdomain), so it cannot be accessed by any other origin.

- -

It's important to note that IndexedDB doesn't work for content loaded into a frame from another site (either {{ HTMLElement("frame") }} or {{ HTMLElement("iframe") }}. This is a security measure. Details as to why this matters are forthcoming. See {{ bug(595307) }}.

- -

Warnung über die Schließung des Browsers

- -

When the browser shuts down (e.g., when the user selects Exit or clicks the Close button), any pending IndexedDB transactions are (silently) aborted -- they will not complete, and they will not trigger the error handler. Since the user can exit the browser at any time, this means that you cannot rely upon any particular transaction to complete or to know that it did not complete. There are several implications of this behavior.

- -

First, you should take care to always leave your database in a consistent state at the end of every transaction. For example, suppose that you are using IndexedDB to store a list of items that you allow the user to edit. You save the list after the edit by clearing the object store and then writing out the new list. If you clear the object store in one transaction and write the new list in another transaction, there is a danger that the browser will close after the clear but before the write, leaving you with an empty database. To avoid this, you should combine the clear and the write into a single transaction.

- -

Second, you should never tie database transactions to unload events. If the unload event is triggered by the browser closing, any transactions created in the unload event handler will never complete. An intuitive approach to maintaining some information across browser sessions is to read it from the database when the browser (or a particular page) is opened, update it as the user interacts with the browser, and then save it to the database when the browser (or page) closes. However, this will not work. The database transactions will be created in the unload event handler, but because they are asynchronous they will be aborted before they can execute.

- -

In fact, there is no way to guarantee that IndexedDB transactions will complete, even with normal browser shutdown. See {{ bug(870645) }}.

- -

Vollständiges IndexedDB Beispiel

- -

HTML Content

- -
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
-
-    <h1>IndexedDB Demo: storing blobs, e-publication example</h1>
-    <div class="note">
-      <p>
-        Works and tested with:
-      </p>
-      <div id="compat">
-      </div>
-    </div>
-
-    <div id="msg">
-    </div>
-
-    <form id="register-form">
-      <table>
-        <tbody>
-          <tr>
-            <td>
-              <label for="pub-title" class="required">
-                Title:
-              </label>
-            </td>
-            <td>
-              <input type="text" id="pub-title" name="pub-title" />
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <label for="pub-biblioid" class="required">
-                Bibliographic ID:<br/>
-                <span class="note">(ISBN, ISSN, etc.)</span>
-              </label>
-            </td>
-            <td>
-              <input type="text" id="pub-biblioid" name="pub-biblioid"/>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <label for="pub-year">
-                Year:
-              </label>
-            </td>
-            <td>
-              <input type="number" id="pub-year" name="pub-year" />
-            </td>
-          </tr>
-        </tbody>
-        <tbody>
-          <tr>
-            <td>
-              <label for="pub-file">
-                File image:
-              </label>
-            </td>
-            <td>
-              <input type="file" id="pub-file"/>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <label for="pub-file-url">
-                Online-file image URL:<br/>
-                <span class="note">(same origin URL)</span>
-              </label>
-            </td>
-            <td>
-              <input type="text" id="pub-file-url" name="pub-file-url"/>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-
-      <div class="button-pane">
-        <input type="button" id="add-button" value="Add Publication" />
-        <input type="reset" id="register-form-reset"/>
-      </div>
-    </form>
-
-    <form id="delete-form">
-      <table>
-        <tbody>
-          <tr>
-            <td>
-              <label for="pub-biblioid-to-delete">
-                Bibliographic ID:<br/>
-                <span class="note">(ISBN, ISSN, etc.)</span>
-              </label>
-            </td>
-            <td>
-              <input type="text" id="pub-biblioid-to-delete"
-                     name="pub-biblioid-to-delete" />
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <label for="key-to-delete">
-                Key:<br/>
-                <span class="note">(for example 1, 2, 3, etc.)</span>
-              </label>
-            </td>
-            <td>
-              <input type="text" id="key-to-delete"
-                     name="key-to-delete" />
-            </td>
-          </tr>
-        </tbody>
-      </table>
-      <div class="button-pane">
-        <input type="button" id="delete-button" value="Delete Publication" />
-        <input type="button" id="clear-store-button"
-               value="Clear the whole store" class="destructive" />
-      </div>
-    </form>
-
-    <form id="search-form">
-      <div class="button-pane">
-        <input type="button" id="search-list-button"
-               value="List database content" />
-      </div>
-    </form>
-
-    <div>
-      <div id="pub-msg">
-      </div>
-      <div id="pub-viewer">
-      </div>
-      <ul id="pub-list">
-      </ul>
-    </div>
-
- -

CSS Content

- -
body {
-  font-size: 0.8em;
-  font-family: Sans-Serif;
-}
-
-form {
-  background-color: #cccccc;
-  border-radius: 0.3em;
-  display: inline-block;
-  margin-bottom: 0.5em;
-  padding: 1em;
-}
-
-table {
-  border-collapse: collapse;
-}
-
-input {
-  padding: 0.3em;
-  border-color: #cccccc;
-  border-radius: 0.3em;
-}
-
-.required:after {
-  content: "*";
-  color: red;
-}
-
-.button-pane {
-  margin-top: 1em;
-}
-
-#pub-viewer {
-  float: right;
-  width: 48%;
-  height: 20em;
-  border: solid #d092ff 0.1em;
-}
-#pub-viewer iframe {
-  width: 100%;
-  height: 100%;
-}
-
-#pub-list {
-  width: 46%;
-  background-color: #eeeeee;
-  border-radius: 0.3em;
-}
-#pub-list li {
-  padding-top: 0.5em;
-  padding-bottom: 0.5em;
-  padding-right: 0.5em;
-}
-
-#msg {
-  margin-bottom: 1em;
-}
-
-.action-success {
-  padding: 0.5em;
-  color: #00d21e;
-  background-color: #eeeeee;
-  border-radius: 0.2em;
-}
-
-.action-failure {
-  padding: 0.5em;
-  color: #ff1408;
-  background-color: #eeeeee;
-  border-radius: 0.2em;
-}
-
-.note {
-  font-size: smaller;
-}
-
-.destructive {
-  background-color: orange;
-}
-.destructive:hover {
-  background-color: #ff8000;
-}
-.destructive:active {
-  background-color: red;
-}
-
- -

 

- -

JavaScript Content

- -
(function () {
-  var COMPAT_ENVS = [
-    ['Firefox', ">= 16.0"],
-    ['Google Chrome',
-     ">= 24.0 (you may need to get Google Chrome Canary), NO Blob storage support"]
-  ];
-  var compat = $('#compat');
-  compat.empty();
-  compat.append('<ul id="compat-list"></ul>');
-  COMPAT_ENVS.forEach(function(val, idx, array) {
-    $('#compat-list').append('<li>' + val[0] + ': ' + val[1] + '</li>');
-  });
-
-  const DB_NAME = 'mdn-demo-indexeddb-epublications';
-  const DB_VERSION = 1; // Use a long long for this value (don't use a float)
-  const DB_STORE_NAME = 'publications';
-
-  var db;
-
-  // Used to keep track of which view is displayed to avoid to uselessly reload it
-  var current_view_pub_key;
-
-  function openDb() {
-    console.log("openDb ...");
-    var req = indexedDB.open(DB_NAME, DB_VERSION);
-    req.onsuccess = function (evt) {
-      // Better use "this" than "req" to get the result to avoid problems with
-      // garbage collection.
-      // db = req.result;
-      db = this.result;
-      console.log("openDb DONE");
-    };
-    req.onerror = function (evt) {
-      console.error("openDb:", evt.target.errorCode);
-    };
-
-    req.onupgradeneeded = function (evt) {
-      console.log("openDb.onupgradeneeded");
-      var store = evt.currentTarget.result.createObjectStore(
-        DB_STORE_NAME, { keyPath: 'id', autoIncrement: true });
-
-      store.createIndex('biblioid', 'biblioid', { unique: true });
-      store.createIndex('title', 'title', { unique: false });
-      store.createIndex('year', 'year', { unique: false });
-    };
-  }
-
-  /**
-   * @param {string} store_name
-   * @param {string} mode either "readonly" or "readwrite"
-   */
-  function getObjectStore(store_name, mode) {
-    var tx = db.transaction(store_name, mode);
-    return tx.objectStore(store_name);
-  }
-
-  function clearObjectStore(store_name) {
-    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
-    var req = store.clear();
-    req.onsuccess = function(evt) {
-      displayActionSuccess("Store cleared");
-      displayPubList(store);
-    };
-    req.onerror = function (evt) {
-      console.error("clearObjectStore:", evt.target.errorCode);
-      displayActionFailure(this.error);
-    };
-  }
-
-  function getBlob(key, store, success_callback) {
-    var req = store.get(key);
-    req.onsuccess = function(evt) {
-      var value = evt.target.result;
-      if (value)
-        success_callback(value.blob);
-    };
-  }
-
-  /**
-   * @param {IDBObjectStore=} store
-   */
-  function displayPubList(store) {
-    console.log("displayPubList");
-
-    if (typeof store == 'undefined')
-      store = getObjectStore(DB_STORE_NAME, 'readonly');
-
-    var pub_msg = $('#pub-msg');
-    pub_msg.empty();
-    var pub_list = $('#pub-list');
-    pub_list.empty();
-    // Reseting the iframe so that it doesn't display previous content
-    newViewerFrame();
-
-    var req;
-    req = store.count();
-    // Requests are executed in the order in which they were made against the
-    // transaction, and their results are returned in the same order.
-    // Thus the count text below will be displayed before the actual pub list
-    // (not that it is algorithmically important in this case).
-    req.onsuccess = function(evt) {
-      pub_msg.append('<p>There are <strong>' + evt.target.result +
-                     '</strong> record(s) in the object store.</p>');
-    };
-    req.onerror = function(evt) {
-      console.error("add error", this.error);
-      displayActionFailure(this.error);
-    };
-
-    var i = 0;
-    req = store.openCursor();
-    req.onsuccess = function(evt) {
-      var cursor = evt.target.result;
-
-      // If the cursor is pointing at something, ask for the data
-      if (cursor) {
-        console.log("displayPubList cursor:", cursor);
-        req = store.get(cursor.key);
-        req.onsuccess = function (evt) {
-          var value = evt.target.result;
-          var list_item = $('<li>' +
-                            '[' + cursor.key + '] ' +
-                            '(biblioid: ' + value.biblioid + ') ' +
-                            value.title +
-                            '</li>');
-          if (value.year != null)
-            list_item.append(' - ' + value.year);
-
-          if (value.hasOwnProperty('blob') &&
-              typeof value.blob != 'undefined') {
-            var link = $('<a href="' + cursor.key + '">File</a>');
-            link.on('click', function() { return false; });
-            link.on('mouseenter', function(evt) {
-                      setInViewer(evt.target.getAttribute('href')); });
-            list_item.append(' / ');
-            list_item.append(link);
-          } else {
-            list_item.append(" / No attached file");
-          }
-          pub_list.append(list_item);
-        };
-
-        // Move on to the next object in store
-        cursor.continue();
-
-        // This counter serves only to create distinct ids
-        i++;
-      } else {
-        console.log("No more entries");
-      }
-    };
-  }
-
-  function newViewerFrame() {
-    var viewer = $('#pub-viewer');
-    viewer.empty();
-    var iframe = $('<iframe />');
-    viewer.append(iframe);
-    return iframe;
-  }
-
-  function setInViewer(key) {
-    console.log("setInViewer:", arguments);
-    key = Number(key);
-    if (key == current_view_pub_key)
-      return;
-
-    current_view_pub_key = key;
-
-    var store = getObjectStore(DB_STORE_NAME, 'readonly');
-    getBlob(key, store, function(blob) {
-      console.log("setInViewer blob:", blob);
-      var iframe = newViewerFrame();
-
-      // It is not possible to set a direct link to the
-      // blob to provide a mean to directly download it.
-      if (blob.type == 'text/html') {
-        var reader = new FileReader();
-        reader.onload = (function(evt) {
-          var html = evt.target.result;
-          iframe.load(function() {
-            $(this).contents().find('html').html(html);
-          });
-        });
-        reader.readAsText(blob);
-      } else if (blob.type.indexOf('image/') == 0) {
-        iframe.load(function() {
-          var img_id = 'image-' + key;
-          var img = $('<img id="' + img_id + '"/>');
-          $(this).contents().find('body').html(img);
-          var obj_url = window.URL.createObjectURL(blob);
-          $(this).contents().find('#' + img_id).attr('src', obj_url);
-          window.URL.revokeObjectURL(obj_url);
-        });
-      } else if (blob.type == 'application/pdf') {
-        $('*').css('cursor', 'wait');
-        var obj_url = window.URL.createObjectURL(blob);
-        iframe.load(function() {
-          $('*').css('cursor', 'auto');
-        });
-        iframe.attr('src', obj_url);
-        window.URL.revokeObjectURL(obj_url);
-      } else {
-        iframe.load(function() {
-          $(this).contents().find('body').html("No view available");
-        });
-      }
-
-    });
-  }
-
-  /**
-   * @param {string} biblioid
-   * @param {string} title
-   * @param {number} year
-   * @param {string} url the URL of the image to download and store in the local
-   *   IndexedDB database. The resource behind this URL is subjected to the
-   *   "Same origin policy", thus for this method to work, the URL must come from
-   *   the same origin than the web site/app this code is deployed on.
-   */
-  function addPublicationFromUrl(biblioid, title, year, url) {
-    console.log("addPublicationFromUrl:", arguments);
-
-    var xhr = new XMLHttpRequest();
-    xhr.open('GET', url, true);
-    // Setting the wanted responseType to "blob"
-    // http://www.w3.org/TR/XMLHttpRequest2/#the-response-attribute
-    xhr.responseType = 'blob';
-    xhr.onload = function (evt) {
-                           if (xhr.status == 200) {
-                             console.log("Blob retrieved");
-                             var blob = xhr.response;
-                             console.log("Blob:", blob);
-                             addPublication(biblioid, title, year, blob);
-                           } else {
-                             console.error("addPublicationFromUrl error:",
-                                           xhr.responseText, xhr.status);
-                           }
-                         };
-    xhr.send();
-
-    // We can't use jQuery here because as of jQuery 1.8.3 the new "blob"
-    // responseType is not handled.
-    // http://bugs.jquery.com/ticket/11461
-    // http://bugs.jquery.com/ticket/7248
-    // $.ajax({
-    //   url: url,
-    //   type: 'GET',
-    //   xhrFields: { responseType: 'blob' },
-    //   success: function(data, textStatus, jqXHR) {
-    //     console.log("Blob retrieved");
-    //     console.log("Blob:", data);
-    //     // addPublication(biblioid, title, year, data);
-    //   },
-    //   error: function(jqXHR, textStatus, errorThrown) {
-    //     console.error(errorThrown);
-    //     displayActionFailure("Error during blob retrieval");
-    //   }
-    // });
-  }
-
-  /**
-   * @param {string} biblioid
-   * @param {string} title
-   * @param {number} year
-   * @param {Blob=} blob
-   */
-  function addPublication(biblioid, title, year, blob) {
-    console.log("addPublication arguments:", arguments);
-    var obj = { biblioid: biblioid, title: title, year: year };
-    if (typeof blob != 'undefined')
-      obj.blob = blob;
-
-    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
-    var req;
-    try {
-      req = store.add(obj);
-    } catch (e) {
-      if (e.name == 'DataCloneError')
-        displayActionFailure("This engine doesn't know how to clone a Blob, " +
-                             "use Firefox");
-      throw e;
-    }
-    req.onsuccess = function (evt) {
-      console.log("Insertion in DB successful");
-      displayActionSuccess();
-      displayPubList(store);
-    };
-    req.onerror = function() {
-      console.error("addPublication error", this.error);
-      displayActionFailure(this.error);
-    };
-  }
-
-  /**
-   * @param {string} biblioid
-   */
-  function deletePublicationFromBib(biblioid) {
-    console.log("deletePublication:", arguments);
-    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
-    var req = store.index('biblioid');
-    req.get(biblioid).onsuccess = function(evt) {
-      if (typeof evt.target.result == 'undefined') {
-        displayActionFailure("No matching record found");
-        return;
-      }
-      deletePublication(evt.target.result.id, store);
-    };
-    req.onerror = function (evt) {
-      console.error("deletePublicationFromBib:", evt.target.errorCode);
-    };
-  }
-
-  /**
-   * @param {number} key
-   * @param {IDBObjectStore=} store
-   */
-  function deletePublication(key, store) {
-    console.log("deletePublication:", arguments);
-
-    if (typeof store == 'undefined')
-      store = getObjectStore(DB_STORE_NAME, 'readwrite');
-
-    // As per spec http://www.w3.org/TR/IndexedDB/#object-store-deletion-operation
-    // the result of the Object Store Deletion Operation algorithm is
-    // undefined, so it's not possible to know if some records were actually
-    // deleted by looking at the request result.
-    var req = store.get(key);
-    req.onsuccess = function(evt) {
-      var record = evt.target.result;
-      console.log("record:", record);
-      if (typeof record == 'undefined') {
-        displayActionFailure("No matching record found");
-        return;
-      }
-      // Warning: The exact same key used for creation needs to be passed for
-      // the deletion. If the key was a Number for creation, then it needs to
-      // be a Number for deletion.
-      req = store.delete(key);
-      req.onsuccess = function(evt) {
-        console.log("evt:", evt);
-        console.log("evt.target:", evt.target);
-        console.log("evt.target.result:", evt.target.result);
-        console.log("delete successful");
-        displayActionSuccess("Deletion successful");
-        displayPubList(store);
-      };
-      req.onerror = function (evt) {
-        console.error("deletePublication:", evt.target.errorCode);
-      };
-    };
-    req.onerror = function (evt) {
-      console.error("deletePublication:", evt.target.errorCode);
-      };
-  }
-
-  function displayActionSuccess(msg) {
-    msg = typeof msg != 'undefined' ? "Success: " + msg : "Success";
-    $('#msg').html('<span class="action-success">' + msg + '</span>');
-  }
-  function displayActionFailure(msg) {
-    msg = typeof msg != 'undefined' ? "Failure: " + msg : "Failure";
-    $('#msg').html('<span class="action-failure">' + msg + '</span>');
-  }
-  function resetActionStatus() {
-    console.log("resetActionStatus ...");
-    $('#msg').empty();
-    console.log("resetActionStatus DONE");
-  }
-
-  function addEventListeners() {
-    console.log("addEventListeners");
-
-    $('#register-form-reset').click(function(evt) {
-      resetActionStatus();
-    });
-
-    $('#add-button').click(function(evt) {
-      console.log("add ...");
-      var title = $('#pub-title').val();
-      var biblioid = $('#pub-biblioid').val();
-      if (!title || !biblioid) {
-        displayActionFailure("Required field(s) missing");
-        return;
-      }
-      var year = $('#pub-year').val();
-      if (year != '') {
-        // Better use Number.isInteger if the engine has EcmaScript 6
-        if (isNaN(year))  {
-          displayActionFailure("Invalid year");
-          return;
-        }
-        year = Number(year);
-      } else {
-        year = null;
-      }
-
-      var file_input = $('#pub-file');
-      var selected_file = file_input.get(0).files[0];
-      console.log("selected_file:", selected_file);
-      // Keeping a reference on how to reset the file input in the UI once we
-      // have its value, but instead of doing that we rather use a "reset" type
-      // input in the HTML form.
-      //file_input.val(null);
-      var file_url = $('#pub-file-url').val();
-      if (selected_file) {
-        addPublication(biblioid, title, year, selected_file);
-      } else if (file_url) {
-        addPublicationFromUrl(biblioid, title, year, file_url);
-      } else {
-        addPublication(biblioid, title, year);
-      }
-
-    });
-
-    $('#delete-button').click(function(evt) {
-      console.log("delete ...");
-      var biblioid = $('#pub-biblioid-to-delete').val();
-      var key = $('#key-to-delete').val();
-
-      if (biblioid != '') {
-        deletePublicationFromBib(biblioid);
-      } else if (key != '') {
-        // Better use Number.isInteger if the engine has EcmaScript 6
-        if (key == '' || isNaN(key))  {
-          displayActionFailure("Invalid key");
-          return;
-        }
-        key = Number(key);
-        deletePublication(key);
-      }
-    });
-
-    $('#clear-store-button').click(function(evt) {
-      clearObjectStore();
-    });
-
-    var search_button = $('#search-list-button');
-    search_button.click(function(evt) {
-      displayPubList();
-    });
-
-  }
-
-  openDb();
-  addEventListeners();
-
-})(); // Immediately-Invoked Function Expression (IIFE)
-
- -

{{ LiveSampleLink('Full_IndexedDB_example', "Test the online live demo") }}

- -

Nächster Schritt

- -

If you want to start tinkering with the API, jump in to the reference documentation and checking out the different methods.

- -

Siehe auch

- -

Reference

- - - -

Tutorials

- - - -

Related articles

- - - -

Firefox

- - diff --git a/files/de/web/api/indexeddb_api/using_indexeddb/index.html b/files/de/web/api/indexeddb_api/using_indexeddb/index.html new file mode 100644 index 0000000000..3d6d61cf3f --- /dev/null +++ b/files/de/web/api/indexeddb_api/using_indexeddb/index.html @@ -0,0 +1,1180 @@ +--- +title: Verwendung von IndexedDB +slug: Web/API/IndexedDB_API/IndexedDB_verwenden +translation_of: Web/API/IndexedDB_API/Using_IndexedDB +--- +

Mit IndexedDB lassen sich Daten innerhalb des Browsers eines Benutzers permanent abzulegen. Es können so Webanwendungen mit funktionsreichen Abfragemöglichkeiten in Anwendungen erstellt werden, die sowohl online als auch offline funktionieren können, da keine Netzwerkfunktionalitäten benötigt werden.

+ +

Über dieses Dokument

+ +

Dieses Tutorial bespricht die Verwendung der asynchronen API von IndexedDB. Wenn Sie nicht mit IndexedDB vertraut sind, sollten Sie zuerst den Artikel Grundkonzepte lesen.

+ +

Eine Referenzdokumentation zur IndexedDB-API finden Sie im Artikel IndexedDB und dessen Unterseiten, welche die Typen und Objekten dokumentieren, die von IndexedDB verwendet werden, ebenso wie die Methoden von sowohl synchronen als auch asynchronen APIs.

+ +

Grundschema

+ +

Das von IndexedDB unterstützte Grundschema sieht folgendermaßen aus:

+ +
    +
  1. Öffne eine Datenbank und starte eine Transaktion.
    2. +
  2. Erzeuge einen Objektspeicher.
    3. +
  3. Fordere die Ausführung von Datenbankoperationen an, wie das Hinzufügen und Auslesen von Daten.
    4. +
  4. Warte auf die richtige Art von DOM-Ereignis, das auftritt, wenn die Operation beendet ist.
    5. +
  5. Verarbeite die Ergebnisse? (, welche im Anforderungsobjekt gefunden werden können).
    6. +
+ +

Mit dem Wissen über diese Grundkonzepte können wir uns nun konkreteren Dingen zuwenden.

+ +

Erzeugung und Strukturierung des Speichers

+ +

Weil sich die Spezifizierung noch in der Entwicklung befindet, verstecken sich aktuelle Implementierungen von IndexedDB unter Browserpräfixen. Bis sich die Spezifizierung verfestigt, könne Browserhersteller unterschiedliche Implementierungen der Standard-IndexedDB-API haben. Aber sobald Konsens auf dem Standard herrscht, implementieren die Hersteller ihn ohne Markierung durch Präfixe. Tatsächlich ist in manchen Implementierungen der Präfix entfernt: Internet Explorer 10, Firefox 16, Chrome 24. Wenn auf Gecko basierende Browser einen Präfix verwenden, dann verwenden sie den Präfix moz, während auf WebKit basierende Browser den Präfix webkit verwenden.

+ +

Verwendung einer experimentellen Version von IndexedDB

+ +

Für den Fall, dass Sie Ihren Code in Browsern verwenden wollen, die noch Präfixe verwenden, können Sie folgenden Code benutzen:

+ +
// In der folgenden Zeile sollten Sie die Präfixe einfügen, die Sie testen wollen.
+window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
+// Verwenden Sie "var indexedDB = ..." NICHT außerhalb einer Funktion.
+// Ferner benötigen Sie evtl. Referenzen zu einigen window.IDB* Objekten:
+window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
+window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
+// (Mozilla hat diese Objekte nie mit Präfixen versehen, also brauchen wir kein window.mozIDB*)
+ +

Beachten Sie, dass Implementierungen, die Präfixe verwenden, fehlerhaft oder unvollständig sein können oder einer alten Version der Spezifizierung folgen können. Deshalb ist es nicht empfohlen, sie im Produktivsystem zu verwenden. In manchen Fällen kann es sinnvoll sein, lieber einen Browser nicht zu unterstützen als zu behaupten, er würde unterstützt, und dann Fehler einzubüßen:

+ +
if (!window.indexedDB) {
+    window.alert("Ihr Browser unterstützt keine stabile Version von IndexedDB. Dieses und jenes Feature wird Ihnen nicht zur Verfügung stehen.");
+}
+
+ +

Öffnen einer Datenbank

+ +

Wir starten den ganzen Prozess folgendermaßen:

+ +
// Öffnen unserer Datenbank
+var request = window.indexedDB.open("MeineTestdatenbank", 3);
+
+ +

Sie sehen, das Öffnen einer Datenbank funktioniert wie jede andere Operation – Sie müssen sie „anfordern“.

+ +

Die Anforderung zum Öffnen öffnet nicht sofort die Datenbank und startet auch die Transaktion nicht gleich. Der Aufruf zur open() Funktion gibt ein IDBOpenDBRequest-Objekt mit Ergebniswert (Erfolg) oder Fehlerwert zurück, die Sie als Ereignis verarbeiten. Die meisten anderen asynchronen Funktionen in IndexedDB machen das gleiche – sie geben ein IDBRequest-Objekt mit Ergebnis oder Fehler zurück. Das Ergebnis für die open-Funktion ist eine Instanz einer IDBDatabase.

+ +

Der zweite Parameter der open-Methode ist die Version der Datenbank. Die Version der Datenbank bestimmt das Datenbankschema – den Objektspeichern und ihrer Strukturen. Wenn die angeforderte Version nicht existiert (weil die Datenbank neu ist, oder weil die Version aktualisiert wurde), wird das Ereignis onupgradeneeded ausgelöst, und es lässt sich eine neue Version der Datenbank im Handler für dieses Ereignis erzeugen. Mehr dazu später im Abschnitt Aktualisieren der Version der Datenbank.

+ +

Erzeugen von Handlern

+ +

Das erste, was Sie mit fast allen Anforderungen machen wollen, die Sie erzeugen, ist das Hinzufügen von Handlern für Erfolge und Fehler:

+ +
request.onerror = function(event) {
+  // Machen Sie etwas mit request.errorCode!
+};
+request.onsuccess = function(event) {
+  // Machen Sie etwas mit request.result!
+};
+ +

Welche der beiden Funktionen, onsuccess() oder onerror(), wird aufgerufen? Wenn alles fehlerfrei ablief, wird ein Erfolgsereignis (d.h. ein DOM-Ereignis, dessen type Eigenschaft auf "success" gesetzt ist) mit request als target ausgelöst. Sobald es ausgelöst wurde, wird die Funktion onsuccess() auf request ausgelöst mit dem Erfolgsereignis als Argument. Wenn nicht alles fehlerfrei ablief, wird ein Fehlerereignis (d.h. ein DOM-Ereignis, dessen type Eigenschaft auf "error" gesetzt ist) auf request ausgelöst. Dies löst die Funktion onerror() aus mit dem Fehlerereignis als Argument.

+ +

Die IndexedDB-API ist so entworfen, dass sie die Notwendigkeit zur Fehlerbehandlung minimiert, also werden Sie wahrscheinlich nicht viele Fehlerereignisse sehen (zumindest nicht nachdem Sie sich an die API gewöhnt haben!). Beim Öffnen von Datenbanken jedoch gibt es ein paar typische Zustände, die Fehlerereignisse erzeugen. Das wahrscheinlichste Problem ist, dass der Benutzer festgelegt hat, den Webapps das Erzeugen von Datenbanken nicht zu erlauben. Eines der Hauptentwurfsziele von IndexedDB ist es, das Speichern von großen Datenmengen zur Offline-Verwendung zu erlauben. (Um mehr darüber zu erfahren, wieviel Speicher jedem Browser zur Verfügung steht, lesen Sie Storage limits).

+ +

Offensichtlich wollen Browser nicht irgendeinem Werbenetzwerk oder einer böswilligen Website erlauben, Ihren Computer zu verschmutzen, deshalb warnen Browser den Benutzer, wenn eine Webapp zum ersten Mal versucht einen IndexedDB-Speicher zu öffnen. Der Benutzer kann wählen, ob er den Zugriff erlaubt oder verbietet. Außerdem ist IndexedDB komplett deaktiviert im Privaten Modus der Browser (Privater Modus für Firefox und Incognito Modus für Chrome). Der Hauptzweck vom Surfen im Privaten Modus ist es, keine Spuren zu hinterlassen, daher schlägt der Versuch fehl, eine Datenbank in diesem Modus zu öffnen.

+ +

Nun nehmen wir an, dass der Benutzer Ihren Anfragen erlaubt hat, eine Datenbank zu erstellen, und Sie haben ein Erfolgsereignis erhalten, um den Erfolgs-Callback auszulösen; was kommt als nächstes? Die Anfrage wurde hier mit einem Aufruf von indexedDB.open() erzeugt, also ist request.result eine Instanz von IDBDatabase, und Sie wollen diese auf jeden Fall für später speichern. Ihr Code könnte etwa so aussehen:

+ +
var db;
+var request = indexedDB.open("MeineTestdatenbank");
+request.onerror = function(event) {
+  alert("Warum haben Sie meiner Webapp nicht erlaubt IndexedDB zu verwenden?!");
+};
+request.onsuccess = function(event) {
+  db = request.result;
+};
+
+ +

Fehlerbehandlung

+ +

Wie bereits oben erwähnt, werden Error events bei entsprechenden Fehlern ausgelöst und in der Objekthierarachie weiter nach oben gereicht. Solche Fehlerereignisse  werden zunächst in der entsprechende Anfrage ausgelöst, die den Fehler verursacht hat. Anschließend werden sie zur Transaktion weitergereicht und schließlich zum Datenbankobjekt.  Wenn man nicht für jede Anfrage einen Error-Handler schreiben möchte, kann man der Datenbank einen einzigen Error-Handler hinzufügen:

+ +
db.onerror = function(event) {
+  // Allgemeine Fehlerbehandlung, die für alle Anfragen an die Datenbank gilt.
+  alert("Datenbankfehler: " + event.target.errorCode);
+};
+
+ +

Einer der häufigsten Fehler, die beim Öffnen der Datenbank auftreten, ist  VER_ERR.  Er zeigt an, dass die Versionsnummer der lokal gespeicherten Datenbank  größer  als die Versionsnummer ist,  die man zu öffnen versucht. Ein solcher Fehler muss immer durch eine Fehlerbehandlung berücksichtigt werden.

+ +

Erstellen oder Updaten der Datenbank

+ +

Wenn eine neue Version der Datenbank erstellt wird, wird das onupgradeneeded Event ausgelöst. In der Handler-Funktion dieses Events musst du für die Erstellung der Datenbankspeicher, welche für diese Version benötigt wird, sorgen:

+ +
// Dieses Event ist lediglich in modernen Browsern verfügbar
+request.onupgradeneeded = function(event) {
+  var db = event.target.result;
+
+  // Erstelle ein ObjectStore für diese Datenbank
+  var objectStore = db.createObjectStore("name", { keyPath: "myKey" });
+};
+ +

The Versionsnummer der Datenbank ist vom Typ unsigned long long, so dass sie eine sehr große Ganzzahl sein kann.

+ +
+

Das Bedeutet auch, dass sie nicht vom Typ float sein darf,  ansonsten wird sie zur nächstkleineren Ganzzahl abgerundet, so dass die Transaktion weder starten kann noch ein  upgradeneeded ausgelöst wird. Beispielsweise sollte man nicht 2.4 als Versionsnummer verwenden:

+ +
var request = indexedDB.open("MeineTestdatenbank", 2.4); // don't do this, as the version will be rounded to 2
+
+ +

Wenn man die Versionsnummer der Datenbank erhöht, wird ein  onupgradeneeded -Ereignis ausgelöst. In diesem Fall übernimmt die neue Datenbank automatisch die Objectstores von der Vorgängerversion der Datenbank, so dass man diese nicht erneut erzeugen muss. Lediglich neue Objectsores müssen angelegt oder nicht mehr gebrauchte der Vorgängerversion gelöscht werden. Wenn man einen bereits existierenden Objectstore ändern will (beispielsweise den keyPath veränden), ist es allerdings notwendig, den alten Objectstore zu löschen und einen neuen anzulegen. (Beachten Sie, dass dies die im Objectstore gespeicherten Informationen löscht, so dass man sie vorher auslesen und an anderer Stelle sichern sollte, bevor man ein Datenbankupgrade durchführt.)

+ +

WebKit unterstützt die aktuelle Version dieser Spezifikation, wie sie in Chrome 23+ ausgeliefert wird, ebenso Opera 17+ und IE10+. Andere und ältere Implementierungen unterstützen nicht die aktuelle Version dieser Spezifikation und stellen damit auch noch nicht die Möglichkeit bereit, auf die Methodensignatur indexedDB.open(name, version).onupgradeneeded zugreifen zu könenn. Um ältere Versionen einer Datenbank auf neuer Versionen zu aktualisieren, siehe IDBDatabase reference article.

+ +

Strukturierung der Datenbank

+ +

Im Folgenden wird gezeigt, wie man eine die Daten  strukturiert. IndexedDB verwendet Objectstores anstatt Tabellen, wobei eine einzelne Datenbank viele verschiedene Objectsores enthalten kann. Jeglicher Wert im Objectstore ist einem bestimmten Schlüssel (key) zugeordnet. Es werden dabei unterschiedliche Arten von Schlüsseln verarbeitet, abhängig davon, ob der Objectstore  einen key path oder einen key generator benutzt.

+ +

Die folgende Tabelle gibt eine Übersicht über die bereitgestellten Arten von Schlüssseln.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Key PathKey GeneratorBeschreibung
NeinNeinDieser Objectstore kann Daten beliebigen Typs speichern, inklusive primitiven Typen wie Zahlen und Zeichenketten (Strings). Beim Hinzufügen von Werten muss ein separater Schlüssel angegeben werden.
JaNeinDieser Objectstore kann nur JavaScript-Objekte speichern. Die Objekte müssen ein Attribut haben, dass wie der key path benannt ist.
NeinJaDieser Objectstore kann Daten beliebigen Typs speichern. Beim Hinzufügen von Werten kann ein separater Schlüssel angegeben werden. Fehlt der Schlüssel, so wird er generiert.
JaJaDieser Objectstore kann nur JavaScript-Objekte speichern. In der Regel wird der Schlüssel automatisch generiert und als gleichnamiges Attribut im Objekt gespeichert. Falls es jedoch bereits ein Attribut mit dem Namen gibt, so wird der Schlüssel nicht generiert, sondern der Wert des Attributes wird verwendet.
+ +

You can also create indices on any object store, provided the object store holds objects, not primitives. An index lets you look up the values stored in an object store using the value of a property of the stored object, rather than the object's key.

+ +

Additionally, indexes have the ability to enforce simple constraints on the stored data. By setting the unique flag when creating the index, the index ensures that no two objects are stored with both having the same value for the index's key path. So, for example, if you have an object store which holds a set of people, and you want to ensure that no two people have the same email address, you can use an index with the unique flag set to enforce this.

+ +

That may sound confusing, but this simple example should illustrate the concepts:

+ +
// This is what our customer data looks like.
+const customerData = [
+  { ssn: "444-44-4444", name: "Bill", age: 35, email: "bill@company.com" },
+  { ssn: "555-55-5555", name: "Donna", age: 32, email: "donna@home.org" }
+];
+const dbName = "the_name";
+
+var request = indexedDB.open(dbName, 2);
+
+request.onerror = function(event) {
+  // Handle errors.
+};
+request.onupgradeneeded = function(event) {
+  var db = event.target.result;
+
+  // Create an objectStore to hold information about our customers. We're
+  // going to use "ssn" as our key path because it's guaranteed to be
+  // unique.
+  var objectStore = db.createObjectStore("customers", { keyPath: "ssn" });
+
+  // Create an index to search customers by name. We may have duplicates
+  // so we can't use a unique index.
+  objectStore.createIndex("name", "name", { unique: false });
+
+  // Create an index to search customers by email. We want to ensure that
+  // no two customers have the same email, so use a unique index.
+  objectStore.createIndex("email", "email", { unique: true });
+
+  // Store values in the newly created objectStore.
+  for (var i in customerData) {
+    objectStore.add(customerData[i]);
+  }
+};
+
+ +

As mentioned previously, onupgradeneeded is the only place where you can alter the structure of the database. In it, you can create and delete object stores and build and remove indices.

+ +
Object stores are created with a single call to createObjectStore(). The method takes a name of the store, and a parameter object. Even though the parameter object is optional, it is very important, because it lets you define important optional properties and refine the type of object store you want to create. In our case, we've asked for an object store named "customers" and defined a keyPath that is the property that makes an individual object in the store unique. That property in this example is "ssn" since a social security number is guaranteed to be unique. "ssn" must be present on every object that is stored in the objectStore.
+ +

We've also asked for an index named "name" that looks at the name property of the stored objects. As with createObjectStore(), createIndex() takes an optional options object that refines the type of index that you want to create. Adding objects that don't have a name property still succeeds, but the object won't appear in the "name" index.

+ +

We can now retrieve the stored customer objects using their ssn from the object store directly, or using their name by using the index. To learn how this is done, see the section on using an index.

+ +

Hinzufügen und löschen von Daten

+ +

Before you can do anything with your new database, you need to start a transaction. Transactions come from the database object, and you have to specify which object stores you want the transaction to span. Also, you need to decide if you're going to make changes to the database or if you just need to read from it. Although transactions have three modes (read-only, read/write, and versionchange), you're better off using a read-only transaction when you can, because they can run concurrently

+ +

Daten zur Datenbank hinzufügen

+ +

If you've just created a database, then you probably want to write to it. Here's what that looks like:

+ +
var transaction = db.transaction(["customers"], "readwrite");
+// Note: Older experimental implementations use the deprecated constant IDBTransaction.READ_WRITE instead of "readwrite".
+// In case you want to support such an implementation, you can just write:
+// var transaction = db.transaction(["customers"], IDBTransaction.READ_WRITE);
+ +

The transaction() function takes two arguments (though one is optional) and returns a transaction object. The first argument is a list of object stores that the transaction will span. You can pass an empty array if you want the transaction to span all object stores, but don't do it because the spec says an empty array should generate an InvalidAccessError. If you don't specify anything for the second argument, you get a read-only transaction. Since you want to write to it here you need to pass the "readwrite" flag.

+ +

Now that you have a transaction you need to understand its lifetime. Transactions are tied very closely to the event loop. If you make a transaction and return to the event loop without using it then the transaction will become inactive. The only way to keep the transaction active is to make a request on it. When the request is finished you'll get a DOM event and, assuming that the request succeeded, you'll have another opportunity to extend the transaction during that callback. If you return to the event loop without extending the transaction then it will become inactive, and so on. As long as there are pending requests the transaction remains active. Transaction lifetimes are really very simple but it might take a little time to get used to. A few more examples will help, too. If you start seeing TRANSACTION_INACTIVE_ERR error codes then you've messed something up.

+ +

Transactions can receive DOM events of three different types: error, abort, and complete. We've talked about the way that error events bubble, so a transaction receives error events from any requests that are generated from it. A more subtle point here is that the default behavior of an error is to abort the transaction in which it occurred. Unless you handle the error by calling preventDefault() on the error event, the entire transaction is rolled back. This design forces you to think about and handle errors, but you can always add a catchall error handler to the database if fine grained error handling is too cumbersome. If you don't handle an error event or if you call abort() on the transaction, then the transaction is rolled back and an abort event is fired on the transaction. Otherwise, after all pending requests have completed, you'll get a complete event. If you're doing lots of database operations, then tracking the transaction rather than individual requests can certainly aide your sanity.

+ +

Now that you have a transaction, you'll need to get the object store from it. Transactions only let you have an object store that you specified when creating the transaction. Then you can add all the data you need.

+ +
// Do something when all the data is added to the database.
+transaction.oncomplete = function(event) {
+  alert("All done!");
+};
+
+transaction.onerror = function(event) {
+  // Don't forget to handle errors!
+};
+
+var objectStore = transaction.objectStore("customers");
+for (var i in customerData) {
+  var request = objectStore.add(customerData[i]);
+  request.onsuccess = function(event) {
+    // event.target.result == customerData[i].ssn;
+  };
+}
+ +

The result of a request generated from a call to add() is the key of the value that was added. So in this case, it should equal the ssn property of the object that was added, since the object store uses the ssn property for the key path. Note that the add() function requires that no object already be in the database with the same key. If you're trying to modify an existing entry, or you don't care if one exists already, use the put() function.

+ +

Daten aus der Datenbank löschen

+ +

Löschen von Daten ist recht ähnlich:

+ +
var request = db.transaction(["customers"], "readwrite")
+                .objectStore("customers")
+                .delete("444-44-4444");
+request.onsuccess = function(event) {
+  // It's gone!
+};
+ +

Daten aus der Datenbank auslesen

+ +

Now that the database has some info in it, you can retrieve it in several ways. First, the simple get(). You need to provide the key to retrieve the value, like so:

+ +
var transaction = db.transaction(["customers"]);
+var objectStore = transaction.objectStore("customers");
+var request = objectStore.get("444-44-4444");
+request.onerror = function(event) {
+  // Handle errors!
+};
+request.onsuccess = function(event) {
+  // Do something with the request.result!
+  alert("Name for SSN 444-44-4444 is " + request.result.name);
+};
+ +

That's a lot of code for a "simple" retrieval. Here's how you can shorten it up a bit, assuming that you handle errors at the database level:

+ +
db.transaction("customers").objectStore("customers").get("444-44-4444").onsuccess = function(event) {
+  alert("Name for SSN 444-44-4444 is " + event.target.result.name);
+};
+ +

See how this works? Since there's only one object store, you can avoid passing a list of object stores you need in your transaction and just pass the name as a string. Also, you're only reading from the database, so you don't need a "readwrite" transaction. Calling transaction() with no mode specified gives you a "readonly" transaction. Another subtlety here is that you don't actually save the request object to a variable. Since the DOM event has the request as its target you can use the event to get to the result property. Easy, right?!

+ +

Benutzung eines Cursors

+ +

Using get() requires that you know which key you want to retrieve. If you want to step through all the values in your object store, then you can use a cursor. Here's what it looks like:

+ +
var objectStore = db.transaction("customers").objectStore("customers");
+
+objectStore.openCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    alert("Name for SSN " + cursor.key + " is " + cursor.value.name);
+    cursor.continue();
+  }
+  else {
+    alert("No more entries!");
+  }
+};
+ +

The openCursor() function takes several arguments. First, you can limit the range of items that are retrieved by using a key range object that we'll get to in a minute. Second, you can specify the direction that you want to iterate. In the above example, we're iterating over all objects in ascending order. The success callback for cursors is a little special. The cursor object itself is the result of the request (above we're using the shorthand, so it's event.target.result). Then the actual key and value can be found on the key and value properties of the cursor object. If you want to keep going, then you have to call continue() on the cursor. When you've reached the end of the data (or if there were no entries that matched your openCursor() request) you still get a success callback, but the result property is undefined.

+ +

One common pattern with cursors is to retrieve all objects in an object store and add them to an array, like this:

+ +
var customers = [];
+
+objectStore.openCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    customers.push(cursor.value);
+    cursor.continue();
+  }
+  else {
+    alert("Got all customers: " + customers);
+  }
+};
+ +
Warnung: Die folgende Funktion ist nicht Teil des IndexedDB Standards.
+ +

Mozilla has also implemented getAll() to handle this case. It isn't part of the IndexedDB standard, so it may disappear in the future. We've included it because we think it's useful. The following code does precisely the same thing as above:

+ +
objectStore.getAll().onsuccess = function(event) {
+  alert("Got all customers: " + event.target.result);
+};
+ +

There is a performance cost associated with looking at the value property of a cursor, because the object is created lazily. When you use getAll(), Gecko must create all the objects at once. If you're just interested in looking at each of the keys, for instance, it is much more efficient to use a cursor than to use getAll(). If you're trying to get an array of all the objects in an object store, though, use getAll().

+ +

Benutzung eines Index

+ +

Storing customer data using the SSN as a key is logical since the SSN uniquely identifies an individual. (Whether this is a good idea for privacy is a different question, outside the scope of this article.) If you need to look up a customer by name, however, you'll need to iterate over every SSN in the database until you find the right one. Searching in this fashion would be very slow, so instead you can use an index.

+ +
var index = objectStore.index("name");
+index.get("Donna").onsuccess = function(event) {
+  alert("Donna's SSN is " + event.target.result.ssn);
+};
+ +

The "name" cursor isn't unique, so there could be more than one entry with the name set to "Donna". In that case you always get the one with the lowest key value.

+ +

If you need to access all the entries with a given name you can use a cursor. You can open two different types of cursors on indexes. A normal cursor maps the index property to the object in the object store. A key cursor maps the index property to the key used to store the object in the object store. The differences are illustrated here:

+ +
index.openCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // cursor.key is a name, like "Bill", and cursor.value is the whole object.
+    alert("Name: " + cursor.key + ", SSN: " + cursor.value.ssn + ", email: " + cursor.value.email);
+    cursor.continue();
+  }
+};
+
+index.openKeyCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // cursor.key is a name, like "Bill", and cursor.value is the SSN.
+    // No way to directly get the rest of the stored object.
+    alert("Name: " + cursor.key + ", SSN: " + cursor.value);
+    cursor.continue();
+  }
+};
+ +

Specifying the range and direction of cursors

+ +

If you would like to limit the range of values you see in a cursor, you can use a key range object and pass it as the first argument to openCursor() or openKeyCursor(). You can make a key range that only allows a single key, or one the has a lower or upper bound, or one that has both a lower and upper bound. The bound may be "closed" (i.e., the key range includes the given value) or "open" (i.e., the key range does not include the given value). Here's how it works:

+ +
// Only match "Donna"
+var singleKeyRange = IDBKeyRange.only("Donna");
+
+// Match anything past "Bill", including "Bill"
+var lowerBoundKeyRange = IDBKeyRange.lowerBound("Bill");
+
+// Match anything past "Bill", but don't include "Bill"
+var lowerBoundOpenKeyRange = IDBKeyRange.lowerBound("Bill", true);
+
+// Match anything up to, but not including, "Donna"
+var upperBoundOpenKeyRange = IDBKeyRange.upperBound("Donna", true);
+
+//Match anything between "Bill" and "Donna", but not including "Donna"
+var boundKeyRange = IDBKeyRange.bound("Bill", "Donna", false, true);
+
+index.openCursor(boundKeyRange).onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Do something with the matches.
+    cursor.continue();
+  }
+};
+ +

Sometimes you may want to iterate in descending order rather than in ascending order (the default direction for all cursors). Switching direction is accomplished by passing prev to the openCursor() function:

+ +
objectStore.openCursor(null, IDBCursor.prev).onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Do something with the entries.
+    cursor.continue();
+  }
+};
+ +

Since the "name" index isn't unique, there might be multiple entries where name is the same. Note that such a situation cannot occur with object stores since the key must always be unique. If you wish to filter out duplicates during cursor iteration over indexes, you can pass nextunique (or prevunique if you're going backwards) as the direction parameter. When nextunique or prevunique is used, the entry with the lowest key is always the one returned.

+ +
index.openKeyCursor(null, IDBCursor.nextunique).onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Do something with the entries.
+    cursor.continue();
+  }
+};
+ +

Versionsänderung während eine Webapplikation in einem anderen Tab geöffnet ist

+ +

When your web app changes in such a way that a version change is required for your database, you need to consider what happens if the user has the old version of your app open in one tab and then loads the new version of your app in another. When you call open() with a greater version than the actual version of the database, all other open databases must explicitly acknowledge the request before you can start making changes to the database. Here's how it works:

+ +
var openReq = mozIndexedDB.open("MyTestDatabase", 2);
+
+openReq.onblocked = function(event) {
+  // If some other tab is loaded with the database, then it needs to be closed
+  // before we can proceed.
+  alert("Please close all other tabs with this site open!");
+};
+
+openReq.onupgradeneeded = function(event) {
+  // All other databases have been closed. Set everything up.
+  db.createObjectStore(/* ... */);
+  useDatabase(db);
+}
+
+openReq.onsuccess = function(event) {
+  var db = event.target.result;
+  useDatabase(db);
+  return;
+}
+
+function useDatabase(db) {
+  // Make sure to add a handler to be notified if another page requests a version
+  // change. We must close the database. This allows the other page to upgrade the database.
+  // If you don't do this then the upgrade won't happen until the user close the tab.
+  db.onversionchange = function(event) {
+    db.close();
+    alert("A new version of this page is ready. Please reload!");
+  };
+
+  // Do stuff with the database.
+}
+
+ +

Sicherheit

+ +

IndexedDB uses the same-origin principle, which means that it ties the store to the origin of the site that creates it (typically, this is the site domain or subdomain), so it cannot be accessed by any other origin.

+ +

It's important to note that IndexedDB doesn't work for content loaded into a frame from another site (either {{ HTMLElement("frame") }} or {{ HTMLElement("iframe") }}. This is a security measure. Details as to why this matters are forthcoming. See {{ bug(595307) }}.

+ +

Warnung über die Schließung des Browsers

+ +

When the browser shuts down (e.g., when the user selects Exit or clicks the Close button), any pending IndexedDB transactions are (silently) aborted -- they will not complete, and they will not trigger the error handler. Since the user can exit the browser at any time, this means that you cannot rely upon any particular transaction to complete or to know that it did not complete. There are several implications of this behavior.

+ +

First, you should take care to always leave your database in a consistent state at the end of every transaction. For example, suppose that you are using IndexedDB to store a list of items that you allow the user to edit. You save the list after the edit by clearing the object store and then writing out the new list. If you clear the object store in one transaction and write the new list in another transaction, there is a danger that the browser will close after the clear but before the write, leaving you with an empty database. To avoid this, you should combine the clear and the write into a single transaction.

+ +

Second, you should never tie database transactions to unload events. If the unload event is triggered by the browser closing, any transactions created in the unload event handler will never complete. An intuitive approach to maintaining some information across browser sessions is to read it from the database when the browser (or a particular page) is opened, update it as the user interacts with the browser, and then save it to the database when the browser (or page) closes. However, this will not work. The database transactions will be created in the unload event handler, but because they are asynchronous they will be aborted before they can execute.

+ +

In fact, there is no way to guarantee that IndexedDB transactions will complete, even with normal browser shutdown. See {{ bug(870645) }}.

+ +

Vollständiges IndexedDB Beispiel

+ +

HTML Content

+ +
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
+
+    <h1>IndexedDB Demo: storing blobs, e-publication example</h1>
+    <div class="note">
+      <p>
+        Works and tested with:
+      </p>
+      <div id="compat">
+      </div>
+    </div>
+
+    <div id="msg">
+    </div>
+
+    <form id="register-form">
+      <table>
+        <tbody>
+          <tr>
+            <td>
+              <label for="pub-title" class="required">
+                Title:
+              </label>
+            </td>
+            <td>
+              <input type="text" id="pub-title" name="pub-title" />
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <label for="pub-biblioid" class="required">
+                Bibliographic ID:<br/>
+                <span class="note">(ISBN, ISSN, etc.)</span>
+              </label>
+            </td>
+            <td>
+              <input type="text" id="pub-biblioid" name="pub-biblioid"/>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <label for="pub-year">
+                Year:
+              </label>
+            </td>
+            <td>
+              <input type="number" id="pub-year" name="pub-year" />
+            </td>
+          </tr>
+        </tbody>
+        <tbody>
+          <tr>
+            <td>
+              <label for="pub-file">
+                File image:
+              </label>
+            </td>
+            <td>
+              <input type="file" id="pub-file"/>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <label for="pub-file-url">
+                Online-file image URL:<br/>
+                <span class="note">(same origin URL)</span>
+              </label>
+            </td>
+            <td>
+              <input type="text" id="pub-file-url" name="pub-file-url"/>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+
+      <div class="button-pane">
+        <input type="button" id="add-button" value="Add Publication" />
+        <input type="reset" id="register-form-reset"/>
+      </div>
+    </form>
+
+    <form id="delete-form">
+      <table>
+        <tbody>
+          <tr>
+            <td>
+              <label for="pub-biblioid-to-delete">
+                Bibliographic ID:<br/>
+                <span class="note">(ISBN, ISSN, etc.)</span>
+              </label>
+            </td>
+            <td>
+              <input type="text" id="pub-biblioid-to-delete"
+                     name="pub-biblioid-to-delete" />
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <label for="key-to-delete">
+                Key:<br/>
+                <span class="note">(for example 1, 2, 3, etc.)</span>
+              </label>
+            </td>
+            <td>
+              <input type="text" id="key-to-delete"
+                     name="key-to-delete" />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <div class="button-pane">
+        <input type="button" id="delete-button" value="Delete Publication" />
+        <input type="button" id="clear-store-button"
+               value="Clear the whole store" class="destructive" />
+      </div>
+    </form>
+
+    <form id="search-form">
+      <div class="button-pane">
+        <input type="button" id="search-list-button"
+               value="List database content" />
+      </div>
+    </form>
+
+    <div>
+      <div id="pub-msg">
+      </div>
+      <div id="pub-viewer">
+      </div>
+      <ul id="pub-list">
+      </ul>
+    </div>
+
+ +

CSS Content

+ +
body {
+  font-size: 0.8em;
+  font-family: Sans-Serif;
+}
+
+form {
+  background-color: #cccccc;
+  border-radius: 0.3em;
+  display: inline-block;
+  margin-bottom: 0.5em;
+  padding: 1em;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+input {
+  padding: 0.3em;
+  border-color: #cccccc;
+  border-radius: 0.3em;
+}
+
+.required:after {
+  content: "*";
+  color: red;
+}
+
+.button-pane {
+  margin-top: 1em;
+}
+
+#pub-viewer {
+  float: right;
+  width: 48%;
+  height: 20em;
+  border: solid #d092ff 0.1em;
+}
+#pub-viewer iframe {
+  width: 100%;
+  height: 100%;
+}
+
+#pub-list {
+  width: 46%;
+  background-color: #eeeeee;
+  border-radius: 0.3em;
+}
+#pub-list li {
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
+  padding-right: 0.5em;
+}
+
+#msg {
+  margin-bottom: 1em;
+}
+
+.action-success {
+  padding: 0.5em;
+  color: #00d21e;
+  background-color: #eeeeee;
+  border-radius: 0.2em;
+}
+
+.action-failure {
+  padding: 0.5em;
+  color: #ff1408;
+  background-color: #eeeeee;
+  border-radius: 0.2em;
+}
+
+.note {
+  font-size: smaller;
+}
+
+.destructive {
+  background-color: orange;
+}
+.destructive:hover {
+  background-color: #ff8000;
+}
+.destructive:active {
+  background-color: red;
+}
+
+ +

 

+ +

JavaScript Content

+ +
(function () {
+  var COMPAT_ENVS = [
+    ['Firefox', ">= 16.0"],
+    ['Google Chrome',
+     ">= 24.0 (you may need to get Google Chrome Canary), NO Blob storage support"]
+  ];
+  var compat = $('#compat');
+  compat.empty();
+  compat.append('<ul id="compat-list"></ul>');
+  COMPAT_ENVS.forEach(function(val, idx, array) {
+    $('#compat-list').append('<li>' + val[0] + ': ' + val[1] + '</li>');
+  });
+
+  const DB_NAME = 'mdn-demo-indexeddb-epublications';
+  const DB_VERSION = 1; // Use a long long for this value (don't use a float)
+  const DB_STORE_NAME = 'publications';
+
+  var db;
+
+  // Used to keep track of which view is displayed to avoid to uselessly reload it
+  var current_view_pub_key;
+
+  function openDb() {
+    console.log("openDb ...");
+    var req = indexedDB.open(DB_NAME, DB_VERSION);
+    req.onsuccess = function (evt) {
+      // Better use "this" than "req" to get the result to avoid problems with
+      // garbage collection.
+      // db = req.result;
+      db = this.result;
+      console.log("openDb DONE");
+    };
+    req.onerror = function (evt) {
+      console.error("openDb:", evt.target.errorCode);
+    };
+
+    req.onupgradeneeded = function (evt) {
+      console.log("openDb.onupgradeneeded");
+      var store = evt.currentTarget.result.createObjectStore(
+        DB_STORE_NAME, { keyPath: 'id', autoIncrement: true });
+
+      store.createIndex('biblioid', 'biblioid', { unique: true });
+      store.createIndex('title', 'title', { unique: false });
+      store.createIndex('year', 'year', { unique: false });
+    };
+  }
+
+  /**
+   * @param {string} store_name
+   * @param {string} mode either "readonly" or "readwrite"
+   */
+  function getObjectStore(store_name, mode) {
+    var tx = db.transaction(store_name, mode);
+    return tx.objectStore(store_name);
+  }
+
+  function clearObjectStore(store_name) {
+    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
+    var req = store.clear();
+    req.onsuccess = function(evt) {
+      displayActionSuccess("Store cleared");
+      displayPubList(store);
+    };
+    req.onerror = function (evt) {
+      console.error("clearObjectStore:", evt.target.errorCode);
+      displayActionFailure(this.error);
+    };
+  }
+
+  function getBlob(key, store, success_callback) {
+    var req = store.get(key);
+    req.onsuccess = function(evt) {
+      var value = evt.target.result;
+      if (value)
+        success_callback(value.blob);
+    };
+  }
+
+  /**
+   * @param {IDBObjectStore=} store
+   */
+  function displayPubList(store) {
+    console.log("displayPubList");
+
+    if (typeof store == 'undefined')
+      store = getObjectStore(DB_STORE_NAME, 'readonly');
+
+    var pub_msg = $('#pub-msg');
+    pub_msg.empty();
+    var pub_list = $('#pub-list');
+    pub_list.empty();
+    // Reseting the iframe so that it doesn't display previous content
+    newViewerFrame();
+
+    var req;
+    req = store.count();
+    // Requests are executed in the order in which they were made against the
+    // transaction, and their results are returned in the same order.
+    // Thus the count text below will be displayed before the actual pub list
+    // (not that it is algorithmically important in this case).
+    req.onsuccess = function(evt) {
+      pub_msg.append('<p>There are <strong>' + evt.target.result +
+                     '</strong> record(s) in the object store.</p>');
+    };
+    req.onerror = function(evt) {
+      console.error("add error", this.error);
+      displayActionFailure(this.error);
+    };
+
+    var i = 0;
+    req = store.openCursor();
+    req.onsuccess = function(evt) {
+      var cursor = evt.target.result;
+
+      // If the cursor is pointing at something, ask for the data
+      if (cursor) {
+        console.log("displayPubList cursor:", cursor);
+        req = store.get(cursor.key);
+        req.onsuccess = function (evt) {
+          var value = evt.target.result;
+          var list_item = $('<li>' +
+                            '[' + cursor.key + '] ' +
+                            '(biblioid: ' + value.biblioid + ') ' +
+                            value.title +
+                            '</li>');
+          if (value.year != null)
+            list_item.append(' - ' + value.year);
+
+          if (value.hasOwnProperty('blob') &&
+              typeof value.blob != 'undefined') {
+            var link = $('<a href="' + cursor.key + '">File</a>');
+            link.on('click', function() { return false; });
+            link.on('mouseenter', function(evt) {
+                      setInViewer(evt.target.getAttribute('href')); });
+            list_item.append(' / ');
+            list_item.append(link);
+          } else {
+            list_item.append(" / No attached file");
+          }
+          pub_list.append(list_item);
+        };
+
+        // Move on to the next object in store
+        cursor.continue();
+
+        // This counter serves only to create distinct ids
+        i++;
+      } else {
+        console.log("No more entries");
+      }
+    };
+  }
+
+  function newViewerFrame() {
+    var viewer = $('#pub-viewer');
+    viewer.empty();
+    var iframe = $('<iframe />');
+    viewer.append(iframe);
+    return iframe;
+  }
+
+  function setInViewer(key) {
+    console.log("setInViewer:", arguments);
+    key = Number(key);
+    if (key == current_view_pub_key)
+      return;
+
+    current_view_pub_key = key;
+
+    var store = getObjectStore(DB_STORE_NAME, 'readonly');
+    getBlob(key, store, function(blob) {
+      console.log("setInViewer blob:", blob);
+      var iframe = newViewerFrame();
+
+      // It is not possible to set a direct link to the
+      // blob to provide a mean to directly download it.
+      if (blob.type == 'text/html') {
+        var reader = new FileReader();
+        reader.onload = (function(evt) {
+          var html = evt.target.result;
+          iframe.load(function() {
+            $(this).contents().find('html').html(html);
+          });
+        });
+        reader.readAsText(blob);
+      } else if (blob.type.indexOf('image/') == 0) {
+        iframe.load(function() {
+          var img_id = 'image-' + key;
+          var img = $('<img id="' + img_id + '"/>');
+          $(this).contents().find('body').html(img);
+          var obj_url = window.URL.createObjectURL(blob);
+          $(this).contents().find('#' + img_id).attr('src', obj_url);
+          window.URL.revokeObjectURL(obj_url);
+        });
+      } else if (blob.type == 'application/pdf') {
+        $('*').css('cursor', 'wait');
+        var obj_url = window.URL.createObjectURL(blob);
+        iframe.load(function() {
+          $('*').css('cursor', 'auto');
+        });
+        iframe.attr('src', obj_url);
+        window.URL.revokeObjectURL(obj_url);
+      } else {
+        iframe.load(function() {
+          $(this).contents().find('body').html("No view available");
+        });
+      }
+
+    });
+  }
+
+  /**
+   * @param {string} biblioid
+   * @param {string} title
+   * @param {number} year
+   * @param {string} url the URL of the image to download and store in the local
+   *   IndexedDB database. The resource behind this URL is subjected to the
+   *   "Same origin policy", thus for this method to work, the URL must come from
+   *   the same origin than the web site/app this code is deployed on.
+   */
+  function addPublicationFromUrl(biblioid, title, year, url) {
+    console.log("addPublicationFromUrl:", arguments);
+
+    var xhr = new XMLHttpRequest();
+    xhr.open('GET', url, true);
+    // Setting the wanted responseType to "blob"
+    // http://www.w3.org/TR/XMLHttpRequest2/#the-response-attribute
+    xhr.responseType = 'blob';
+    xhr.onload = function (evt) {
+                           if (xhr.status == 200) {
+                             console.log("Blob retrieved");
+                             var blob = xhr.response;
+                             console.log("Blob:", blob);
+                             addPublication(biblioid, title, year, blob);
+                           } else {
+                             console.error("addPublicationFromUrl error:",
+                                           xhr.responseText, xhr.status);
+                           }
+                         };
+    xhr.send();
+
+    // We can't use jQuery here because as of jQuery 1.8.3 the new "blob"
+    // responseType is not handled.
+    // http://bugs.jquery.com/ticket/11461
+    // http://bugs.jquery.com/ticket/7248
+    // $.ajax({
+    //   url: url,
+    //   type: 'GET',
+    //   xhrFields: { responseType: 'blob' },
+    //   success: function(data, textStatus, jqXHR) {
+    //     console.log("Blob retrieved");
+    //     console.log("Blob:", data);
+    //     // addPublication(biblioid, title, year, data);
+    //   },
+    //   error: function(jqXHR, textStatus, errorThrown) {
+    //     console.error(errorThrown);
+    //     displayActionFailure("Error during blob retrieval");
+    //   }
+    // });
+  }
+
+  /**
+   * @param {string} biblioid
+   * @param {string} title
+   * @param {number} year
+   * @param {Blob=} blob
+   */
+  function addPublication(biblioid, title, year, blob) {
+    console.log("addPublication arguments:", arguments);
+    var obj = { biblioid: biblioid, title: title, year: year };
+    if (typeof blob != 'undefined')
+      obj.blob = blob;
+
+    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
+    var req;
+    try {
+      req = store.add(obj);
+    } catch (e) {
+      if (e.name == 'DataCloneError')
+        displayActionFailure("This engine doesn't know how to clone a Blob, " +
+                             "use Firefox");
+      throw e;
+    }
+    req.onsuccess = function (evt) {
+      console.log("Insertion in DB successful");
+      displayActionSuccess();
+      displayPubList(store);
+    };
+    req.onerror = function() {
+      console.error("addPublication error", this.error);
+      displayActionFailure(this.error);
+    };
+  }
+
+  /**
+   * @param {string} biblioid
+   */
+  function deletePublicationFromBib(biblioid) {
+    console.log("deletePublication:", arguments);
+    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
+    var req = store.index('biblioid');
+    req.get(biblioid).onsuccess = function(evt) {
+      if (typeof evt.target.result == 'undefined') {
+        displayActionFailure("No matching record found");
+        return;
+      }
+      deletePublication(evt.target.result.id, store);
+    };
+    req.onerror = function (evt) {
+      console.error("deletePublicationFromBib:", evt.target.errorCode);
+    };
+  }
+
+  /**
+   * @param {number} key
+   * @param {IDBObjectStore=} store
+   */
+  function deletePublication(key, store) {
+    console.log("deletePublication:", arguments);
+
+    if (typeof store == 'undefined')
+      store = getObjectStore(DB_STORE_NAME, 'readwrite');
+
+    // As per spec http://www.w3.org/TR/IndexedDB/#object-store-deletion-operation
+    // the result of the Object Store Deletion Operation algorithm is
+    // undefined, so it's not possible to know if some records were actually
+    // deleted by looking at the request result.
+    var req = store.get(key);
+    req.onsuccess = function(evt) {
+      var record = evt.target.result;
+      console.log("record:", record);
+      if (typeof record == 'undefined') {
+        displayActionFailure("No matching record found");
+        return;
+      }
+      // Warning: The exact same key used for creation needs to be passed for
+      // the deletion. If the key was a Number for creation, then it needs to
+      // be a Number for deletion.
+      req = store.delete(key);
+      req.onsuccess = function(evt) {
+        console.log("evt:", evt);
+        console.log("evt.target:", evt.target);
+        console.log("evt.target.result:", evt.target.result);
+        console.log("delete successful");
+        displayActionSuccess("Deletion successful");
+        displayPubList(store);
+      };
+      req.onerror = function (evt) {
+        console.error("deletePublication:", evt.target.errorCode);
+      };
+    };
+    req.onerror = function (evt) {
+      console.error("deletePublication:", evt.target.errorCode);
+      };
+  }
+
+  function displayActionSuccess(msg) {
+    msg = typeof msg != 'undefined' ? "Success: " + msg : "Success";
+    $('#msg').html('<span class="action-success">' + msg + '</span>');
+  }
+  function displayActionFailure(msg) {
+    msg = typeof msg != 'undefined' ? "Failure: " + msg : "Failure";
+    $('#msg').html('<span class="action-failure">' + msg + '</span>');
+  }
+  function resetActionStatus() {
+    console.log("resetActionStatus ...");
+    $('#msg').empty();
+    console.log("resetActionStatus DONE");
+  }
+
+  function addEventListeners() {
+    console.log("addEventListeners");
+
+    $('#register-form-reset').click(function(evt) {
+      resetActionStatus();
+    });
+
+    $('#add-button').click(function(evt) {
+      console.log("add ...");
+      var title = $('#pub-title').val();
+      var biblioid = $('#pub-biblioid').val();
+      if (!title || !biblioid) {
+        displayActionFailure("Required field(s) missing");
+        return;
+      }
+      var year = $('#pub-year').val();
+      if (year != '') {
+        // Better use Number.isInteger if the engine has EcmaScript 6
+        if (isNaN(year))  {
+          displayActionFailure("Invalid year");
+          return;
+        }
+        year = Number(year);
+      } else {
+        year = null;
+      }
+
+      var file_input = $('#pub-file');
+      var selected_file = file_input.get(0).files[0];
+      console.log("selected_file:", selected_file);
+      // Keeping a reference on how to reset the file input in the UI once we
+      // have its value, but instead of doing that we rather use a "reset" type
+      // input in the HTML form.
+      //file_input.val(null);
+      var file_url = $('#pub-file-url').val();
+      if (selected_file) {
+        addPublication(biblioid, title, year, selected_file);
+      } else if (file_url) {
+        addPublicationFromUrl(biblioid, title, year, file_url);
+      } else {
+        addPublication(biblioid, title, year);
+      }
+
+    });
+
+    $('#delete-button').click(function(evt) {
+      console.log("delete ...");
+      var biblioid = $('#pub-biblioid-to-delete').val();
+      var key = $('#key-to-delete').val();
+
+      if (biblioid != '') {
+        deletePublicationFromBib(biblioid);
+      } else if (key != '') {
+        // Better use Number.isInteger if the engine has EcmaScript 6
+        if (key == '' || isNaN(key))  {
+          displayActionFailure("Invalid key");
+          return;
+        }
+        key = Number(key);
+        deletePublication(key);
+      }
+    });
+
+    $('#clear-store-button').click(function(evt) {
+      clearObjectStore();
+    });
+
+    var search_button = $('#search-list-button');
+    search_button.click(function(evt) {
+      displayPubList();
+    });
+
+  }
+
+  openDb();
+  addEventListeners();
+
+})(); // Immediately-Invoked Function Expression (IIFE)
+
+ +

{{ LiveSampleLink('Full_IndexedDB_example', "Test the online live demo") }}

+ +

Nächster Schritt

+ +

If you want to start tinkering with the API, jump in to the reference documentation and checking out the different methods.

+ +

Siehe auch

+ +

Reference

+ + + +

Tutorials

+ + + +

Related articles

+ + + +

Firefox

+ + diff --git a/files/de/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.html b/files/de/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.html new file mode 100644 index 0000000000..5f48e63097 --- /dev/null +++ b/files/de/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.html @@ -0,0 +1,127 @@ +--- +title: Webbasierte Protokoll-Handler +slug: Web/API/Navigator/registerProtocolHandler/Webbasierte_protokoll-handler +translation_of: Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers +--- +
{{Fx_minversion_header(3)}}
+ +

Hintergrund

+ +

Man findet im Web häufiger Seiten, die Verweise mit anderen Protokollen als HTTP einsetzen. Ein Beispiel ist das mailto: Protokoll:

+ +
+
<a href="mailto:webmaster@example.com">Web Master</a>
+
+ +

Seitenersteller können mailto: Verweise nutzen, wenn sie einen bequemen Weg anbieten möchten, E-Mails direkt aus ihrer Webseite heraus zu versenden. Wird der Link aktiviert, sollte der Browser das im Betriebssystem eingestelle Standardprogramm für E-Mail starten. Das ist ein Beispiel für einen desktopbasierten Protokoll-Handler.

+ +

Webbasierte Protokoll-Handler erlauben webbasierten Anwendungen ebenfall an solchen Prozessen teilzunehmen. Das wird mit der Migration vieler Anwendungen ins Web zunehmend wichtiger. Tatsächlich gibt es bereits viele Webanwendungen, die einen mailto: Verweis verarbeiten könnten.

+ +

Registrierung

+ +

Das Einrichten einer webbasierten Anwendung als Protokoll-Handler ist unkompliziert. Die Webapp nutzt registerProtocolHandler(), um sich selbst beim Browser als potentiellen Handler für ein bestimmtes Protokoll zu registrieren. Ein Beispiel:

+ +
navigator.registerProtocolHandler("burger",
+                                  "http://www.google.co.uk/?uri=%s",
+                                  "Burger handler");
+ +

Die Parameter sind:

+ + + +

Führt ein Browser diesen Code aus, wird er über einen Dialog die Erlaubnis des Nutzers einholen, die Webanwendung als Handler für dieses Protokoll zu registrieren. Firefox zeigt eine Nachricht in der Notification Bar:

+ +

+ +
Hinweis: Das bei der Registrierung angegebene URL Template muss mit der die Anfrage stellenden Webseite übereinstimmen, oder die Registrierung schlägt fehl. Beispielsweise kann http://example.com/homepage.html einen Protokoll-Handler für http://example.com/handle_mailto/%s registrieren, aber nicht für http://example.org/handle_mailto/%s.
+ +

Wird derselbe Handler mehrfach registriert, meldet der Browser das durch ein weiteres Pop-Up, das auf die bereits erfolgte Registrierung hinweist. Daher ist es sinnvoll, die Registrierung mit einem vorangehenden Check abzusichern.

+ +

Beispiel

+ +
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
+<html lang="en">
+<head>
+  <title>Web Protocol Handler Sample - Register</title>
+  <script type="text/javascript">
+    navigator.registerProtocolHandler("burger",
+                                  "http://www.google.co.uk/?uri=%s",
+                                  "Burger handler");
+  </script>
+</head>
+<body>
+  <h1>Web Protocol Handler Sample</h1>
+  <p>This web page will install a web protocol handler for the <code>fake:</code> protocol.</p>
+</body>
+</html>
+
+ +

Aktivierung

+ +

Ab jetzt wird der Browser bei jedem Klick auf einen Verweis, der das neu registrierte Protokoll verwendet, die Ausführung auf die registrierte URL umleiten. Firefox wird zuvor standardmäßig die Bestätigung durch den Nutzer einholen.

+ +

Beispiel

+ +
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
+<html lang="en">
+<head>
+  <title>Web Protocol Handler Sample - Test</title>
+</head>
+<body>
+  <p>Hey have you seen <a href="burger:cheeseburger">this</a> before?</p>
+</body>
+</html>
+
+ +

Handling

+ +

Der nächste Schritt ist das tatsächliche Handling. Der Browser kombiniert die href aus dem aktivierten Link mit dem registrierten URL Template und führt dann damit einen HTTP GET Request aus. Hervorgehend aus den vorangegangenen Beispielen würde der Request auf folgender URL stattfinden:

+ +
http://www.google.co.uk/?uri=burger:cheeseburger
+
+ +

Serverseitiger Code kann dann die query String Parameter extrahieren und die gewünschte Aktion ausführen.

+ +
Hinweis: Dem serverseitigen Code wird der gesamte Inhalt der href übergeben. D.h. der Server muss das Protokoll aus den Daten parsen.
+ +

Beispiel

+ +
<?php
+$value = "";
+if ( isset ( $_GET["value"] ) ) {
+  $value = $_GET["value"];
+}
+?>
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
+<html lang="en">
+<head>
+    <title>Web Protocol Handler Sample</title>
+</head>
+<body>
+  <h1>Web Protocol Handler Sample - Handler</h1>
+  <p>This web page is called when handling a <code>burger:</code> protocol action. The data sent:</p>
+  <textarea>
+<?php echo(htmlspecialchars($value, ENT_QUOTES, 'UTF-8')); ?>
+  </textarea>
+</body>
+</html>
+
+ +

Verweise

+ + + +

Siehe auch

+ + diff --git a/files/de/web/api/navigator/registerprotocolhandler/webbasierte_protokoll-handler/index.html b/files/de/web/api/navigator/registerprotocolhandler/webbasierte_protokoll-handler/index.html deleted file mode 100644 index 5f48e63097..0000000000 --- a/files/de/web/api/navigator/registerprotocolhandler/webbasierte_protokoll-handler/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: Webbasierte Protokoll-Handler -slug: Web/API/Navigator/registerProtocolHandler/Webbasierte_protokoll-handler -translation_of: Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers ---- -
{{Fx_minversion_header(3)}}
- -

Hintergrund

- -

Man findet im Web häufiger Seiten, die Verweise mit anderen Protokollen als HTTP einsetzen. Ein Beispiel ist das mailto: Protokoll:

- -
-
<a href="mailto:webmaster@example.com">Web Master</a>
-
- -

Seitenersteller können mailto: Verweise nutzen, wenn sie einen bequemen Weg anbieten möchten, E-Mails direkt aus ihrer Webseite heraus zu versenden. Wird der Link aktiviert, sollte der Browser das im Betriebssystem eingestelle Standardprogramm für E-Mail starten. Das ist ein Beispiel für einen desktopbasierten Protokoll-Handler.

- -

Webbasierte Protokoll-Handler erlauben webbasierten Anwendungen ebenfall an solchen Prozessen teilzunehmen. Das wird mit der Migration vieler Anwendungen ins Web zunehmend wichtiger. Tatsächlich gibt es bereits viele Webanwendungen, die einen mailto: Verweis verarbeiten könnten.

- -

Registrierung

- -

Das Einrichten einer webbasierten Anwendung als Protokoll-Handler ist unkompliziert. Die Webapp nutzt registerProtocolHandler(), um sich selbst beim Browser als potentiellen Handler für ein bestimmtes Protokoll zu registrieren. Ein Beispiel:

- -
navigator.registerProtocolHandler("burger",
-                                  "http://www.google.co.uk/?uri=%s",
-                                  "Burger handler");
- -

Die Parameter sind:

- - - -

Führt ein Browser diesen Code aus, wird er über einen Dialog die Erlaubnis des Nutzers einholen, die Webanwendung als Handler für dieses Protokoll zu registrieren. Firefox zeigt eine Nachricht in der Notification Bar:

- -

- -
Hinweis: Das bei der Registrierung angegebene URL Template muss mit der die Anfrage stellenden Webseite übereinstimmen, oder die Registrierung schlägt fehl. Beispielsweise kann http://example.com/homepage.html einen Protokoll-Handler für http://example.com/handle_mailto/%s registrieren, aber nicht für http://example.org/handle_mailto/%s.
- -

Wird derselbe Handler mehrfach registriert, meldet der Browser das durch ein weiteres Pop-Up, das auf die bereits erfolgte Registrierung hinweist. Daher ist es sinnvoll, die Registrierung mit einem vorangehenden Check abzusichern.

- -

Beispiel

- -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
-<html lang="en">
-<head>
-  <title>Web Protocol Handler Sample - Register</title>
-  <script type="text/javascript">
-    navigator.registerProtocolHandler("burger",
-                                  "http://www.google.co.uk/?uri=%s",
-                                  "Burger handler");
-  </script>
-</head>
-<body>
-  <h1>Web Protocol Handler Sample</h1>
-  <p>This web page will install a web protocol handler for the <code>fake:</code> protocol.</p>
-</body>
-</html>
-
- -

Aktivierung

- -

Ab jetzt wird der Browser bei jedem Klick auf einen Verweis, der das neu registrierte Protokoll verwendet, die Ausführung auf die registrierte URL umleiten. Firefox wird zuvor standardmäßig die Bestätigung durch den Nutzer einholen.

- -

Beispiel

- -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
-<html lang="en">
-<head>
-  <title>Web Protocol Handler Sample - Test</title>
-</head>
-<body>
-  <p>Hey have you seen <a href="burger:cheeseburger">this</a> before?</p>
-</body>
-</html>
-
- -

Handling

- -

Der nächste Schritt ist das tatsächliche Handling. Der Browser kombiniert die href aus dem aktivierten Link mit dem registrierten URL Template und führt dann damit einen HTTP GET Request aus. Hervorgehend aus den vorangegangenen Beispielen würde der Request auf folgender URL stattfinden:

- -
http://www.google.co.uk/?uri=burger:cheeseburger
-
- -

Serverseitiger Code kann dann die query String Parameter extrahieren und die gewünschte Aktion ausführen.

- -
Hinweis: Dem serverseitigen Code wird der gesamte Inhalt der href übergeben. D.h. der Server muss das Protokoll aus den Daten parsen.
- -

Beispiel

- -
<?php
-$value = "";
-if ( isset ( $_GET["value"] ) ) {
-  $value = $_GET["value"];
-}
-?>
-
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
-<html lang="en">
-<head>
-    <title>Web Protocol Handler Sample</title>
-</head>
-<body>
-  <h1>Web Protocol Handler Sample - Handler</h1>
-  <p>This web page is called when handling a <code>burger:</code> protocol action. The data sent:</p>
-  <textarea>
-<?php echo(htmlspecialchars($value, ENT_QUOTES, 'UTF-8')); ?>
-  </textarea>
-</body>
-</html>
-
- -

Verweise

- - - -

Siehe auch

- - diff --git a/files/de/web/api/node/innertext/index.html b/files/de/web/api/node/innertext/index.html deleted file mode 100644 index bd1594471a..0000000000 --- a/files/de/web/api/node/innertext/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: Node.innerText -slug: Web/API/Node/innerText -tags: - - API DOM Property Reference -translation_of: Web/API/HTMLElement/innerText ---- -
{{APIRef("DOM")}}
- -

Zusammenfassung

- -

Node.innerText ist eine Eigenschaft die die "gerenderten" Text Inhalte einer node und ihrer nachfahren representiert. Als getter nähert es sich dem Text an, den ein User erhalten würde wenn sie/er den Inhalt des Elementes mit dem Kursor highlighten und dann zum Clipboard kopieren würde. Dieses Feature wurde ursprünglich von Internet Explorer eingeführt, und wurde förmlich in den HTML standards von 2016 spezifiziert nachdem es von allen Hauptbrowsern übernommen wurde.

- -

{{domxref("Node.textContent")}} ist eine etwas ähnliche Alternative. Es gibt allerdings wichtige Unterschiede zwischen den beiden.

- -

Spezifikation

- - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', 'dom.html#the-innertext-idl-attribute', 'innerText')}}{{Spec2('HTML WHATWG')}} -

Eingeführt, basiert auf dem draft of the innerText specification. Siehe whatwg/html#465 und whatwg/compat#5 für die Historie.

-
- -

Browser Kompatibilität

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support4{{ CompatGeckoDesktop(45) }}69.6 (probably earlier)3
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support2.3 (probably earlier){{ CompatGeckoMobile(45) }}10 (probably earlier)124.1 (probably earlier)
-
- -

Siehe auch

- - diff --git a/files/de/web/api/vollbild_api/index.html b/files/de/web/api/vollbild_api/index.html deleted file mode 100644 index 1ddce4c572..0000000000 --- a/files/de/web/api/vollbild_api/index.html +++ /dev/null @@ -1,305 +0,0 @@ ---- -title: Vollbild API -slug: Web/API/Vollbild_API -tags: - - API - - DOM - - JS - - Tutorial - - Vollbild API -translation_of: Web/API/Fullscreen_API ---- -

{{DefaultAPISidebar("Fullscreen API")}}

- -

Die Vollbild-API bietet einen einfachen Weg, um Webinhalte auf dem gesamten Bildschirm des Nutzers anzuzeigen. Der Browser kann einfach angewiesen werden, Elemente und, falls vorhanden, deren Kinder den gesamten Bildschirm einnehmen zu lassen, wodurch jegliche andere Inhalte vorübergehend ausgeblendet werden.

- -
-

Momentan benutzen nicht alle Browser die Version der API ohne Präfixe. Siehe Vendor Präfixe für Unterschiede zwischen Präfixen und Namen. 

- -

Für eine universelle Lösung des Problems siehe Fscreen.

-
- -

Aktivieren des Vollbildmodus

- -

Wenn sie ein Element gefunden haben, welches Sie im Vollbildmodus anzeigen möchten (etwa ein {{ HTMLElement("video") }}), wir der Vollbildmodus einfach durch den Aufruf der {{ domxref("Element.requestFullscreen()") }}-Methode gestartet.

- -

Nehmen wir dieses {{ HTMLElement("video") }}-Element als Beispiel:

- -
<video controls id="myvideo">
-  <source src="somevideo.webm"></source>
-  <source src="somevideo.mp4"></source>
-</video>
-
- -

Wir können dieses Video mit folgendem Skript in den Vollbildmodus versetzen:

- -
var elem = document.getElementById("myvideo");
-if (elem.requestFullscreen) {
-  elem.requestFullscreen();
-}
-
- -

Anzeige-Schwierigkeiten

- -

An dieser Stelle lohnt es sich, einen wichtigen Unterschied zwischen Gecko und WebKit aufzuzeigen: Gecko fügt automatisch CSS-Regeln zum betroffenen Element hinzu, damit es den ganzen Bildschirm einnimmt: "width: 100%; height: 100%". WebKit tut dies allerdings nicht; stattdessen wird das Vollbild-Element in der selben Größe zentriert vor einem schwarzen Hintergrund dargestellt. Um das gleich Vollbild-Verhalten in WebKit zu erhalten, müssen Sie selbst eine "width: 100%; height: 100%;"-CSS-Regel zum entsprechenden Element hinzufügen:

- -
#myvideo:-webkit-full-screen {
-  width: 100%;
-  height: 100%;
-}
-
- -

Andererseits, wenn Sie stattdessen versuchen, das WebKit-Verhalten auf Gecko zu erreichen, müssen sie das Element, das präsentiert werden soll, in einem anderen Element platzieren, welches sie stattdessen in den Vollbild-Modus versetzen. Dann können sie CSS-Regeln verwenden, um das innere Element so zu layouten, wie Sie wünschen.

- -

Benachrichtigung

- -

Wenn der Vollbild-Modus erfolgreich gestartet wird, erhält das document, welches das entsprechende Element enthält ein {{ event("fullscreenchange") }}-Event. Wenn der Vollbild-Modus wieder verlassen wird, erhält das document wiederum ein {{ event("fullscreenchange") }}-Event. Beachten Sie jedoch, dass das {{ event("fullscreenchange") }}-Event selbst keine Informationen darüber bereitstellt, ob das document in oder aus den Vollbild-Modus wechselt. Stattdessen muss überprüft werden, ob das Attribut {{ domxref("document.fullscreenElement", "fullscreenElement") }}, des document nicht null ist. In diesem Fall befindet sich der Browser im Vollbild-Modus.

- -

Wenn die Vollbild-Anfrage scheitert

- -

Es ist nicht garantiert, dass der Wechsel in den Vollbild-Modus möglich ist. {{ HTMLElement("iframe") }}-Elements etwa haben das {{ HTMLAttrXRef("allowfullscreen", "iframe") }}-Attribut, um ihrem Inhalt zu erlauben, in den Vollbild-Modus zu wechseln. Zusätzlich gibt es bestimmte Arten von Inhalten, wie etwa windowed plug-ins, welche nicht im Vollbild-Modus angezeigt werden können. Wenn versucht wird, ein Element, welches nicht im Vollbild-Modus dargestellt werden kann (oder ein Eltern- bzw. Kind-Knoten eines solchen Elements), wird dies nicht funktionieren. Stattdessen wird das Element, welches den Vollbild-Modus angefragt hat, ein mozfullscreenerror-Event erhalten. Wenn eine Vollbild-Anfrage scheitert, wird Firefox eine Fehlermeldung auf der Web-Konsole ausgeben, welche erklärt, warum die Anfrage fehlgeschlagen ist. In Chrome und neueren Versionen von Opera werden allerdings keine solchen Warnungen produziert.

- -
-

Hinweis: Vollbild-Anfragen müssen aus einem Event-Handler heraus gestellt werden oder die Anfrage wird abgelehnt. 

-
- -

Verlassen des Vollbildmodus

- -

Der Nutzer hat immer die Möglichkeit, selbst den Vollbildmodus zu verlassen; siehe {{ anch("Things your users want to know") }}. Der Vollbildmodus kann aber auch programmatisch mithilfe der  {{domxref("Document.exitFullscreen()")}}-Methode beendet werden.

- -

Weitere Informationen

- -

Das {{ domxref("document") }} hält weitere Informationen bereit, welche bei der Entwicklung von Vollbild-Web-Apps hilfreich sein können:

- -
-
{{ domxref("document.fullscreenElement", "fullscreenElement") }}
-
Das fullscreenElement-Attribut gibt das {{ domxref("element") }} an, welches aktuell im Vollbild-Modus angezeigt wird. Wenn dies nicht null ist, befindet sich das document im Vollbildmodus. Sonst, wenn dieses Attribut null ist, befindet sich das Dokument nicht im Vollbildmodus.
-
{{ domxref("document.fullscreenEnabled", "fullscreenEnabled") }}
-
Das fullscreenEnabled-Attribut gibt an, ob das document aktuell in einem Zustand ist, in welchem der Vollbild-Modus erlaubt ist.
-
- -

Was die Nutzer wissen wollen

- -

Sie sollten die Nutzer wissen lassen, dass sie den Vollbildmodus jederzeit mit ESC (oder F11) verlassen können.

- -

Zusätzlich beendet das Navigieren zu einer anderen Seite oder das Wechseln von Tabs oder Programmen (etwa mit  Alt+Tab) auch den Vollbildmodus.

- -

Beispiel

- -

In diesem Beispiel wird ein Video auf einer Webseite dargestellt. Durch drücken von Return oder Enter kann der Nutzer den Vollbildmodus des Videos umschalten.

- -

Live-Beispiel ansehen

- -

Watching for the Enter key

- -

When the page is loaded, this code is run to set up an event listener to watch for the Enter key.

- -
document.addEventListener("keydown", function(e) {
-  if (e.keyCode == 13) {
-    toggleFullScreen();
-  }
-}, false);
-
- -

Toggling fullscreen mode

- -

This code is called when the user hits the Enter key, as seen above.

- -
function toggleFullScreen() {
-  if (!document.fullscreenElement) {
-      document.documentElement.requestFullscreen();
-  } else {
-    if (document.exitFullscreen) {
-      document.exitFullscreen();
-    }
-  }
-}
-
- -

This starts by looking at the value of the fullscreenElement attribute on the {{ domxref("document") }} (checking it prefixed with both moz, ms, or webkit). If it's null, the document is currently in windowed mode, so we need to switch to fullscreen mode. Switching to fullscreen mode is done by calling {{ domxref("element.requestFullscreen()") }}.

- -

If fullscreen mode is already active (fullscreenElement is non-null), we call {{ domxref("document.exitFullscreen()") }}.

- -

Vendor Präfixe

- -

For the moment not all browsers are implementing the unprefixed version of the API (for vendor agnostic access to the Fullscreen API you can use Fscreen). Here is the table summarizing the prefixes and name differences between them:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
StandardBlink (Chrome & Opera)Gecko (Firefox)Internet Explorer 11EdgeSafari (WebKit)
{{domxref("Document.fullscreen")}}webkitIsFullScreenmozFullScreen-webkitIsFullScreenwebkitIsFullScreen
{{domxref("Document.fullscreenEnabled")}}webkitFullscreenEnabledmozFullScreenEnabledmsFullscreenEnabledwebkitFullscreenEnabledwebkitFullscreenEnabled
{{domxref("Document.fullscreenElement")}}webkitFullscreenElementmozFullScreenElementmsFullscreenElementwebkitFullscreenElementwebkitFullscreenElement
{{domxref("Document.onfullscreenchange")}}onwebkitfullscreenchangeonmozfullscreenchangeMSFullscreenChangeonwebkitfullscreenchangeonwebkitfullscreenchange
{{domxref("Document.onfullscreenerror")}}onwebkitfullscreenerroronmozfullscreenerrorMSFullscreenErroronwebkitfullscreenerroronwebkitfullscreenerror
{{domxref("Document.exitFullscreen()")}}webkitExitFullscreen()mozCancelFullScreen()msExitFullscreen()webkitExitFullscreen()webkitExitFullscreen()
{{domxref("Element.requestFullscreen()")}}webkitRequestFullscreen()mozRequestFullScreen()msRequestFullscreen()webkitRequestFullscreen()webkitRequestFullscreen()
- -

Spezifikationen

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("Fullscreen")}}{{Spec2("Fullscreen")}}Initial version.
- -

Browser Kompatibilität

- -

All browsers implement this APIs. Nevertheless some implement it with prefixed names with slightly different spelling; e.g., instead of requestFullscreen(), there is MozRequestFullScreen().

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support15 {{ property_prefix("-webkit") }}{{CompatVersionUnknown}}{{ CompatGeckoDesktop("9.0") }} {{ property_prefix("-moz") }}
- {{CompatGeckoDesktop("47")}} (behind full-screen-api.unprefix.enabled)		11 {{ property_prefix("-ms") }}12.105.0 {{ property_prefix("-webkit") }}
fullscreenEnabled20 {{ property_prefix("-webkit") }}{{CompatVersionUnknown}}{{ CompatGeckoDesktop("10.0") }} {{ property_prefix("-moz") }}
- {{CompatGeckoDesktop("47")}} (behind full-screen-api.unprefix.enabled)		11 {{ property_prefix("-ms") }}12.105.1 {{ property_prefix("-webkit") }}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChromeEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}28 {{ property_prefix("-webkit") }}{{CompatVersionUnknown}}{{ CompatGeckoMobile("9.0") }}{{ property_prefix("-moz") }}
- {{CompatGeckoMobile("47")}} (behind full-screen-api.unprefix.enabled)		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
fullscreenEnabled{{ CompatUnknown() }}28 {{ property_prefix("-webkit") }}{{CompatVersionUnknown}}{{ CompatGeckoMobile("10.0") }} {{ property_prefix("moz") }}
- {{CompatGeckoMobile("47")}} (behind full-screen-api.unprefix.enabled)		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -

Siehe auch

- - diff --git a/files/de/web/api/webgl_api/tutorial/3d-objekte_mit_webgl_erstellen/index.html b/files/de/web/api/webgl_api/tutorial/3d-objekte_mit_webgl_erstellen/index.html deleted file mode 100644 index d3a21591fd..0000000000 --- a/files/de/web/api/webgl_api/tutorial/3d-objekte_mit_webgl_erstellen/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: 3D-Objekte mit WebGL erstellen -slug: Web/API/WebGL_API/Tutorial/3D-Objekte_mit_WebGL_erstellen -tags: - - Tutorial - - WebGL -translation_of: Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL ---- -

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Objekte_mit_WebGL_animieren", "Web/API/WebGL_API/Tutorial/Texturen_in_WebGL_verwenden")}}

- -

Bringen wir unser Quadrat in die dritte Dimension, indem wir fünf oder mehr Flächen hinzufügen und daraus einen Würfel machen. Um das effizient zu machen, wechseln wir vom Zeichnen direkt über die Vertices zur gl.drawArray() Methode, um den Vertex-Array als eine Tabelle zu verwenden und die einzelnen Vertices in dieser Tabelle als Referenz für Positionen jeder Fläche zu definieren, indem wir gl.drawElements() aufrufen.

- -

Bedenken Sie: Jede Fläche benötigt vier Vertices, die diese definieren, aber jeder Vertex wird von drei Flächen verwendet. Wir können eine Menge Daten sparen, indem wir eine Liste aller 24 Vertices erstellen und uns dann auf jeden Vertex durch dessen Index in der Liste beziehen, anstatt den gesamten Koordinatensatz zu verwenden.

- -

Die Vertex-Positionen des Würfels definieren

- -

Zunächst wollen wir den Positionsspeicher der Vertices erstellen, indem wir den Code in initBuffers() ändern. Das geschieht genau so wie für das Quadrat, allerdings haben wir hier ein paar Datensätze mehr, da wir 24 Vertices (4 pro Seite) haben müssen:

- -
  var vertices = [
-    // vordere Fläche
-    -1.0, -1.0,  1.0,
-     1.0, -1.0,  1.0,
-     1.0,  1.0,  1.0,
-    -1.0,  1.0,  1.0,
-
-    // hintere Fläche
-    -1.0, -1.0, -1.0,
-    -1.0,  1.0, -1.0,
-     1.0,  1.0, -1.0,
-     1.0, -1.0, -1.0,
-
-    // obere Fläche
-    -1.0,  1.0, -1.0,
-    -1.0,  1.0,  1.0,
-     1.0,  1.0,  1.0,
-     1.0,  1.0, -1.0,
-
-    // untere Fläche
-    -1.0, -1.0, -1.0,
-     1.0, -1.0, -1.0,
-     1.0, -1.0,  1.0,
-    -1.0, -1.0,  1.0,
-
-    // rechte Fläche
-     1.0, -1.0, -1.0,
-     1.0,  1.0, -1.0,
-     1.0,  1.0,  1.0,
-     1.0, -1.0,  1.0,
-
-    // linke Fläche
-    -1.0, -1.0, -1.0,
-    -1.0, -1.0,  1.0,
-    -1.0,  1.0,  1.0,
-    -1.0,  1.0, -1.0
-  ];
-
- -

Die Farben der Vertices definieren

- -

Außerdem müssen wir einen Array für die Farben der 24 Vertices erstellen. Dieser Code definiert zunächst die Farben für jede Fläche und verwendet dann eine Schleife, um jeden der Vertices mit einer Farbe zu bestücken.

- -
  var colors = [
-    [1.0,  1.0,  1.0,  1.0],    // vordere Fläche: weiß
-    [1.0,  0.0,  0.0,  1.0],    // hintere Fläche: rot
-    [0.0,  1.0,  0.0,  1.0],    // obere Fläche: grün
-    [0.0,  0.0,  1.0,  1.0],    // untere Fläche: blau
-    [1.0,  1.0,  0.0,  1.0],    // rechte Fläche: gelb
-    [1.0,  0.0,  1.0,  1.0]     // linke Fläche: violett
-  ];
-
-  var generatedColors = [];
-
-  for (j=0; j<6; j++) {
-    var c = colors[j];
-
-    for (var i=0; i<4; i++) {
-      generatedColors = generatedColors.concat(c);
-    }
-  }
-
-  cubeVerticesColorBuffer = gl.createBuffer();
-  gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesColorBuffer);
-  gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(generatedColors), gl.STATIC_DRAW);
-
- -

Das Element-Array definieren

- -

Sobald die Vertex-Arrays generiert worden sind, müssen wir das Element-Array erstellen.

- -
  cubeVerticesIndexBuffer = gl.createBuffer();
-  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
-
-  // Dieser Array definiert jede Fläche als zwei Dreiecke über die Indizes
-  // im Vertex-Array, um die Position jedes Dreiecks festzulegen.
-
-  var cubeVertexIndices = [
-    0,  1,  2,      0,  2,  3,    // vorne
-    4,  5,  6,      4,  6,  7,    // hinten
-    8,  9,  10,     8,  10, 11,   // oben
-    12, 13, 14,     12, 14, 15,   // unten
-    16, 17, 18,     16, 18, 19,   // rechts
-    20, 21, 22,     20, 22, 23    // links
-  ]
-
-  // Sende nun das Element-Array zum GL
-
-  gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,
-      new WebGLUnsignedShortArray(cubeVertexIndices), gl.STATIC_DRAW);
-
- -

Das cubeVertexIndices Array definiert jede Fläche als ein paar von Dreiecken, alle Vertices des Dreiecks werden als ein Index im Vertex-Array des Würfels festgelegt. Daher ist der Würfel aus einer Sammlung von 12 Dreiecken beschrieben.

- -

Den Würfel zeichnen

- -

Als nächstes müssen wir etwas Code zur drawScene() Funktion hinzufügen, um über den Indexspeicher des Würfels zu zeichnen. Wir fügen neue bindBuffer() und drawElements() Aufrufe hinzu:

- -
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
-  setMatrixUniforms();
-  gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);
-
- -

Da jede Seite unseres Würfels aus zwei Dreiecken besteht, gibt es 6 Vertices pro Seite, oder 36 Vertices im Würfel, obwohl einige davon doppelt sind. Da unser Index-Array jedoch aus einfachen Integern besteht, stellt dies keinen unkoordinierbaren Betrag an Daten dar, welcher für jeden Frame der Animation durchgegangen werden muss.

- -

Jetzt haben wir einen animierten Würfel, welcher herum springt, rotiert und über sechs unterschiedliche Seiten verfügt. Wenn Ihr Browser WebGL unterstützt, schauen Sie sich hier die Demo in Aktion an.

- -

{{PreviousNext("Web/API/WebGL_API/Tutorial/Objekte_mit_WebGL_animieren", "Web/API/WebGL_API/Tutorial/Texturen_in_WebGL_verwenden")}}

diff --git a/files/de/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html b/files/de/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html new file mode 100644 index 0000000000..56c267f394 --- /dev/null +++ b/files/de/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html @@ -0,0 +1,238 @@ +--- +title: Hinzufügen von 2D Inhalten in einen WebGL-Kontext +slug: Web/API/WebGL_API/Tutorial/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext +tags: + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context +--- +

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Einführung_in_WebGL", "Web/API/WebGL_API/Tutorial/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen")}}

+ +

Sobald der WebGL-Kontext erfolgreich erstellt wurde, können wir anfangen darin zu rendern. Am einfachsten beginnen wir mit einem einfachen, zweidimensionalen, untextuierten Objekt. Fangen wir also damit an, ein Stück Code zu schreiben, um ein Quadrat zu zeichnen.

+ +

Hinweis zur deutschen Übersetzung dieses Abschnitts

+ +

Die deutsche Übersetzung bezieht sich auf ältere Version des Beispielcodes als der englische Originaltext. Der im deutschen Text beschriebene Code hat einige Probleme:

+ + + +

Um das Beispiel selber nachzuprogrammieren ist es daher empfehlenswert, auf die englische Version des Tutorials zu wechseln. Vielleicht haben Sie ja auch Lust, diese Version ins Deutsche zu übersetzen?

+ +

Beleuchtung der Szene

+ +

Das Wichtigste, das wir verstehen müssen bevor wir anfangen können, ist, dass wir, uns bereits in einer dreidimensionalen Umgebung befinden, obwohl wir nur ein zweidimensionales Objekt in diesem Beispiel rendern wollen. Das heißt, wir müssen jetzt bereits Shader einsetzen, die unsere einfache Szene beleuchten und solche erstellen, die unser Objekt zeichnen. Diese Shader werden festlegen wie unser Quadrat später beleuchtet sein wird.

+ +

Initialisierung der Shader

+ +

Shader sind durch die OpenGL ES Shading Language (pdf) spezifiziert. Damit es einfacher ist unsere Inhalte zu warten und zu aktualisieren, können wir unseren Code so schreiben, dass die Shader im HTML Dokument gefunden werden, anstatt alles mittels JavaScript zu bauen. Werfen wir einen Blick auf unsere initShaders() Routine, welche diese Aufgabe übernimmt:

+ +
function initShaders() {
+  var fragmentShader = getShader(gl, "shader-fs");
+  var vertexShader = getShader(gl, "shader-vs");
+
+  // Erzeuge Shader
+
+  shaderProgram = gl.createProgram();
+  gl.attachShader(shaderProgram, vertexShader);
+  gl.attachShader(shaderProgram, fragmentShader);
+  gl.linkProgram(shaderProgram);
+
+  // Wenn die das Aufrufen der Shader fehlschlägt,
+  // gib eine Fehlermeldung aus:
+
+  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
+    alert("Initialisierung des Shaderprogramms nicht möglich.");
+  }
+
+  gl.useProgram(shaderProgram);
+
+  vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
+  gl.enableVertexAttribArray(vertexPositionAttribute);
+}
+
+
+ +

Es werden zwei Shader in dieser Routine geladen; der Erste, der fragmentShader, wird vom script Element mit der Id "shader-fs" geladen. Der Zweite, der vertexShader, wird vom script Element mit der Id "shader-vs" geladen. Wir werden im nächsten Abschnitt noch näher auf die getShader() Funktion eingehen. Diese Routine holt sich dann die Shader aus dem DOM.

+ +

In diesem Teil erstellen wir noch das Shaderprogramm, in dem wir die Funktion createProgram() aufrufen, die beiden Shader anhängen und das Shaderprogramm verlinken. Danach wird der Zustand des LINK_STATUS Parameters überprüft, um sicher zu gehen, dass das Programm erfolgreich verlinkt wurde. Wenn das der Fall ist, aktivieren wir das neue Shaderprogramm.

+ +

Shader aus dem DOM laden

+ +

Die getShader() Routine ruft ein Shaderprogramm mit dem festgelegtem Namen aus dem DOM auf, gibt das kompilierte Shaderprogramm zurück oder ist leer, wenn nichts geladen oder kompiliert worden konnte.

+ +
function getShader(gl, id) {
+  var shaderScript = document.getElementById(id);
+
+  if (!shaderScript) {
+    return null;
+  }
+
+  var theSource = "";
+  var currentChild = shaderScript.firstChild;
+
+  while(currentChild) {
+    if (currentChild.nodeType == 3) {
+      theSource += currentChild.textContent;
+    }
+
+    currentChild = currentChild.nextSibling;
+  }
+ +

Wenn das Element mit der festgelegten Id gefunden wurde, wird der Text in die Variable theSource gespeichert.

+ +
  var shader;
+
+  if (shaderScript.type == "x-shader/x-fragment") {
+    shader = gl.createShader(gl.FRAGMENT_SHADER);
+  } else if (shaderScript.type == "x-shader/x-vertex") {
+    shader = gl.createShader(gl.VERTEX_SHADER);
+  } else {
+    return null;  // Unbekannter Shadertyp
+  }
+ +

Jetzt wo der Code für die Shader gelesen wurde, können wir uns die MIME Typen der Shader angucken, um festzulegen, ob es ein Vertex-Shader (MIME Typ: "x-shader/x-vertex") oder ein Fragment-Shader (MIME Typ: "x-shader/x-fragment") ist. Danach werden dann die entsprechenden Shadertypen erstellt.

+ +
  gl.shaderSource(shader, theSource);
+
+  // Kompiliere das Shaderprogramm
+
+  gl.compileShader(shader);
+
+  // Überprüfe, ob die Kompilierung erfolgreich war
+
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    alert("Es ist ein Fehler beim Kompilieren der Shader aufgetaucht: " + gl.getShaderInfoLog(shader));
+    return null;
+  }
+
+  return shader;
+}
+
+ +

Schließlich wird der Shader kompiliert. Falls ein Fehler während der Kompilierung auftritt, zeigen wir die Fehlermeldung an und geben null zurück. Andernfalls wird der kompilierte Shader zurückgegeben.

+ +

Die Shader

+ +

Nun müssen wir die eigentlichen Shaderprogramme in unser HTML schreiben. Wie genau diese Shader arbeiten, übersteigt das Ziel dieses Tutorials, wir gehen daher nur auf das Wesentliche ein.

+ +

Fragment-Shader

+ +

Jeder Pixel in einem Vieleck wird Fragment in der GL-Fachsprache genannt. Die Aufgabe des Fragment-Shaders ist es, die Farbe für jeden Pixel bereitzustellen. In unserem Fall ordnen wir einfach jedem Pixel eine weiße Farbe zu.

+ +

gl_FragColor ist eine eingebaute GL Variable, die für die Farbe des Fragments verwendet wird.

+ +
<script id="shader-fs" type="x-shader/x-fragment">
+
+  void main(void) {
+    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
+  }
+</script>
+
+ +

Vertex-Shader

+ +

Der Vertex-Shader definiert die Position und Form von jedem Punkt.

+ +
<script id="shader-vs" type="x-shader/x-vertex">
+  attribute vec3 aVertexPosition;
+
+  uniform mat4 uMVMatrix;
+  uniform mat4 uPMatrix;
+
+
+  void main(void) {
+    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
+  }
+</script>
+
+ +

Das Objekt erstellen

+ +

Bevor wir unser Quadrat rendern können, müssen wir einen Puffer erstellen, der unsere Punkte enthält. Das werden wir mittels einer Funktion machen, die wir initBuffers() nennen. Wenn wir zu mehr fortgeschrittenen WebGL-Konzepten kommen, wird diese Routine vergrößert, um mehr - und komplexere - 3D-Objekte zu erstellen.

+ +
var horizAspect = 480.0/640.0;
+
+function initBuffers() {
+  squareVerticesBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
+
+  var vertices = [
+    1.0,  1.0,  0.0,
+    -1.0, 1.0,  0.0,
+    1.0,  -1.0, 0.0,
+    -1.0, -1.0, 0.0
+  ];
+
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
+}
+
+ +

Diese Routine ist, durch die einfache Art der Szene in diesem Beispiel, sehr einfach gehalten. Es geht los mit dem Aufruf der createBuffer() Methode, die einen Puffer erstellt in dem wir die Punkte speichern können. Der Puffer wird, durch Aufrufen der bindBuffer() Methode, mit dem Kontext verbunden.

+ +

Wenn das erledigt ist, erstellen wir einen JavaScript Array, der die Koordinaten für jeden Punkt des Quadrats enthält. Dieser wird dann in einen WebGL FloatArray umgewandelt und durch die bufferData() Methode werden die Punkte für das Objekt festgelegt.

+ +

Die Szene zeichnen

+ +

Jetzt sind die Shader aufgebaut und das Objekt ist erstellt. Wir können die Szene rendern lassen. Da wir in dieser Szene nichts animieren, ist unsere drawScene() Funktion sehr einfach. Es werden einige nützliche Routinen verwendet, die wir uns kurz anschauen.

+ +
function drawScene() {
+  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+  perspectiveMatrix = makePerspective(45, 640.0/480.0, 0.1, 100.0);
+
+  loadIdentity();
+  mvTranslate([-0.0, 0.0, -6.0]);
+
+  gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
+  gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
+  setMatrixUniforms();
+  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+}
+
+ +

Als Erstes wird der Kontext auf unsere Hintergrundfarbe gesetzt und die Kameraperspektive festgelegt. Wir definieren ein Blickfeld von 45°, mit einem Höhen-/Breitenverhältnis von 640 zu 480 (die Größe unseres Canvas). Außerdem legen wir fest, dass wir nur Objekte zwischen 0.1 und 100 Einheiten gerendert haben wollen.

+ +

Dann wird die Position des Quadrats, über das Laden der ursprünglichen Position und der Verschiebung um 6 Einheiten von der Kamera weg, ermittelt. Danach, verbinden wir den Puffer des Quadrats mit dem Kontext, konfigurieren es, und zeichnen das Objekt, in dem wir die drawArrays() Methode aufrufen.

+ +

Das Ergebnis kann hier ausprobiert werden, wenn Sie einen Browser verwenden, der WebGL unterstützt.

+ +

Matrix Operationen

+ +

Matrix Operationen sind schon kompliziert genug. Keiner möchte wirklich den ganzen Code selbst schreiben, der benötigt wird um die Berechnungen selber durchzuführen. Glücklicherweise gibt es Sylvester, eine sehr handliche Bibliothek, die bestens mit Vektor und Matrix Operationen in JavaScript umgehen kann.

+ +

Die glUtils.js Datei, die in dieser Demo benutzt wird, wird bei einer ganzen Reihe von WebGL-Demos, die Web zu finden sind, verwendet. Keiner scheint sich völlig sicher zu sein, woher diese Bibliothek ursprünglich herkommt, aber es vereinfacht den Gebrauch von Sylvester noch weiter, in dem Methoden hinzugefügt werden, die auch spezielle Matrizentypen ermöglichen und HTML ausgegeben werden kann, um die Matrizen anzeigen zu lassen.

+ +

Zusätzlich, definiert diese Demo ein paar hilfreiche Routinen, um an diese Bibliothek für spezielle Aufgaben anzukoppeln. Was genau gemacht wird, ist kein Teil dieses Artikels, aber es gibt einige gute Referenzen zu Matrizen, die online verfügbar sind. Siehe unter Siehe auch, um ein paar aufzulisten.

+ +
function loadIdentity() {
+  mvMatrix = Matrix.I(4);
+}
+
+function multMatrix(m) {
+  mvMatrix = mvMatrix.x(m);
+}
+
+function mvTranslate(v) {
+  multMatrix(Matrix.Translation($V([v[0], v[1], v[2]])).ensure4x4());
+}
+
+function setMatrixUniforms() {
+  var pUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
+  gl.uniformMatrix4fv(pUniform, false, new Float32Array(perspectiveMatrix.flatten()));
+
+  var mvUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
+  gl.uniformMatrix4fv(mvUniform, false, new Float32Array(mvMatrix.flatten()));
+}
+
+ +

Siehe auch

+ + + +

{{PreviousNext("Web/API/WebGL_API/Tutorial/Einführung_in_WebGL", "Web/API/WebGL_API/Tutorial/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen")}}

diff --git a/files/de/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html b/files/de/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html new file mode 100644 index 0000000000..a9eafed6db --- /dev/null +++ b/files/de/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html @@ -0,0 +1,118 @@ +--- +title: Objekte mit WebGL animieren +slug: Web/API/WebGL_API/Tutorial/Objekte_mit_WebGL_animieren +tags: + - Tutorial + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL +--- +

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen", "Web/API/WebGL_API/Tutorial/3D-Objekte_mit_WebGL_erstellen") }}

+ +

Unser Code vom vorherigen Beispiel ist bereits so konfiguriert, dass die WebGL-Szene alle 15 Millisekunden neu gezeichnet wird. Bis jetzt wird zu jeder Zeit das gleiche Bild immer neu gezeichnet. Das wollen wir nun ändern, sodass sich unser Quadrat auf der Bildfläche bewegt.

+ +

In diesem Beispiel rotieren und verschieben wir unser Quadrat in alle drei Dimensionen, sodass es schon in einem 3D Raum existieren kann (obwohl wir bisher nur ein 2D-Objekt erstellt haben).

+ +

Das Quadrat rotieren lassen

+ +

Fangen wir damit an, das Quadrat im Raum zu rotieren. Als erstes brauchen wir dazu eine Variable in welche wir die Rotation des Quadrats verfolgen können:

+ +
var squareRotation = 0.0;
+
+ +

Jetzt müssen wir die drawScene() Funktion ändern, um die aktuelle Rotation auf das Quadrat anzuwenden, wenn dies gezeichnet werden soll. Nach der Umrechnung der Startposition für das Quadrat, wenden wir eine Rotation wie diese an:

+ +
mvPushMatrix();
+mvRotate(squareRotation, [1, 0, 1]);
+
+ +

Das speichert die aktuelle Model-View Matrix und rotiert die Matrix mit dem aktuellen Wert von squareRotation um die X und Z Achsen.

+ +

Nach dem Zeichen müssen wir die Originalmatrix wiederherstellen:

+ +
mvPopMatrix();
+
+ +

Wir speichern und stellen die Originalmatrix dann wieder her, um zu verhindern, dass die Rotation auf andere Objekte angewendet wird, die wir vielleicht später noch zeichnen wollen.

+ +

Um letztendlich etwas zu animieren, brauchen wir noch ein paar Zeilen Code, welcher den Wert von squareRotation über die Zeit verändert. Dafür erstellen wir eine neue Variable, die die Zeit aufzeichnet, welche wir zuletzt animiert haben (wir nennen diese lastSquareUpdateTime), dann fügen wir den folgenden Code an das Ende der drawScene() Funktion:

+ +
var currentTime = (new Date).getTime();
+if (lastSquareUpdateTime) {
+  var delta = currentTime - lastSquareUpdateTime;
+  squareRotation += (30 * delta) / 1000.0;
+}
+lastSquareUpdateTime = currentTime;
+
+ +

Dieser Code benutzt den Betrag der Zeit, die vergangen ist, seitdem wir zum letzten Mal den Wert von squareRotation geändert haben, um festzustellen wie weit das Quadrat rotiert werden soll.

+ +

Das Quadrat bewegen

+ +

Wir können das Quadrat auch verschieben indem wir eine unterschiedliche Position berechnen lassen, bevor wir es zeichnen. Dieses Beispiel zeigt wie eine grundlegende Animation gemacht werden kann. Allerdings möchten Sie in einer echten Anwendung wohl eher etwas weniger Irrsinniges machen.

+ +

Verfolgen wir die Abstände zu jeder Achse für unsere Verschiebung in drei neuen Variablen:

+ +
var squareXOffset = 0.0;
+var squareYOffset = 0.0;
+var squareZOffset = 0.0;
+
+ +

Und den Betrag, welcher unsere Postion auf jeder Achse verändern soll, in diesen Variablen:

+ +
var xIncValue = 0.2;
+var yIncValue = -0.4;
+var zIncValue = 0.3;
+
+ +

Nun können wir einfach diesen Code zum vorherigen Code, der die Rotation aktualisiert, hinzufügen:

+ +
squareXOffset += xIncValue * ((30 * delta) / 1000.0);
+squareYOffset += yIncValue * ((30 * delta) / 1000.0);
+squareZOffset += zIncValue * ((30 * delta) / 1000.0);
+
+if (Math.abs(squareYOffset) > 2.5) {
+  xIncValue = -xIncValue;
+  yIncValue = -yIncValue;
+  zIncValue = -zIncValue;
+}
+
+ +

Das bringt unser Quadrat dazu seine Größe zu verändern, sich willkürlich auf der Fläche zu verschieben, sich vom Betrachter weg und zum Betrachter hin zu bewegen und das alles während das Quadrat auch noch rotiert. Das sieht dann schon eher wie ein Bildschirmschoner aus.

+ +

Wenn Ihr Browser WebGL unterstützt, ist hier das Beispiel in Aktion.

+ +

Weitere Matrixoperationen

+ +

Dieses Beispiel verwendet einige zusätzliche Matrixoperationen, darunter zwei Routinen, die die Matrizen verschieben, wiederherstellen und in einem Stack aufbewahren und eine Routine, die die Matrix um eine gewissen Anzahl von Grad rotiert:

+ +
var mvMatrixStack = [];
+
+function mvPushMatrix(m) {
+  if (m) {
+    mvMatrixStack.push(m.dup());
+    mvMatrix = m.dup();
+  } else {
+    mvMatrixStack.push(mvMatrix.dup());
+  }
+}
+
+function mvPopMatrix() {
+  if (!mvMatrixStack.length) {
+    throw("Can't pop from an empty matrix stack.");
+  }
+
+  mvMatrix = mvMatrixStack.pop();
+  return mvMatrix;
+}
+
+function mvRotate(angle, v) {
+  var inRadians = angle * Math.PI / 180.0;
+
+  var m = Matrix.Rotation(inRadians, $V([v[0], v[1], v[2]])).ensure4x4();
+  multMatrix(m);
+}
+
+ +

Diese Routinen wurden von einem Beispiel ausgeliehen, welches von Vlad Vukićević geschrieben wurde.

+ +

{{PreviousNext("Web/API/WebGL_API/Tutorial/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen", "Web/API/WebGL_API/Tutorial/3D-Objekte_mit_WebGL_erstellen") }}

diff --git a/files/de/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.html b/files/de/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.html new file mode 100644 index 0000000000..bfeb362b8e --- /dev/null +++ b/files/de/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.html @@ -0,0 +1,89 @@ +--- +title: Animierte Texturen in WebGL +slug: Web/API/WebGL_API/Tutorial/Animierte_Texturen_in_WebGL +tags: + - Tutorial + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL +--- +

{{WebGLSidebar("Tutorial") }} {{Previous("Web/API/WebGL_API/Tutorial/Beleuchtung_in_WebGL")}}

+ +

In dieser Demo bauen wir auf das vorherige Beispiel auf, indem wir die statischen Texturen mit den Frames eines OGG-Video ersetzen. Das ist nicht sehr schwer zu schreiben, sieht aber umso besser aus. Fangen wir an.

+ +

Zugang zum Video

+ +

Zunächst müssen wir etwas HTML hinzufügen, um das video Element zu erstellen, welches wir verwenden, um die Video-Frames zu erhalten:

+ +
<video id="video" src="Firefox.ogv" autobuffer='true'">
+  Ihr Browser scheint das HTML5 <code>&lt;video&gt;</code> Element nicht zu unterstützen.
+</video>
+
+ +

Das erstellt einfach ein Element, um die Video-Datei "Firefox.ogv" abzuspielen. Wir benutzen CSS, um zu verhindern, dass das Video angezeigt wird:

+ +
video {
+  display: none;
+}
+
+ +

Dann schenken wir dem JavaScript Code wieder unsere Aufmerksamkeit und fügen eine neue Zeile zur start() Funktion hinzu, um einen Bezug zum Video-Element herzustellen:

+ +
videoElement = document.getElementById("video");
+
+ +

Und wir ersetzen den Code, der die Intervall-gesteuerten Aufrufe von drawScene() setzt, mit diesem Code:

+ +
videoElement.addEventListener("canplaythrough", startVideo, true);
+videoElement.addEventListener("ended", videoDone, true);
+
+ +

Die Idee ist hier, dass wir die Animation nicht starten wollen, bevor das Video nicht ausreichend zwischengespeichert wurde, sodass es dann ohne Unterbrechung abgespielt werden kann. Wir fügen also einen Event-Listener hinzu, um auf das video Element zu warten bis es uns mitteilt, dass genug zwischengespeichert wurde und das komplette Video ohne Pause abgespielt werden kann. Wir fügen außerdem einen zweiten Event-Listener hinzu, sodass wir die Animation stoppen können, wenn das Video beendet ist und wir so nicht unnötig den Prozessor belasten.

+ +

Die startVideo() Funktion sieht so aus:

+ +
function startVideo() {
+  videoElement.play();
+  videoElement.addEventListener("timeupdate", updateTexture, true);
+  setInterval(drawScene, 15);
+}
+
+ +

Hier wird einfach das Video gestartet und ein Event-Handler bereitgestellt, der aufgerufen wird, wenn ein neuer Frame des Videos verfügbar ist. Dann werden die Intervall-gesteuerten Aufrufe der drawScene() Funktion eingerichtet, um den Würfel zu rendern.

+ +

Die videoDone() Funktion ruft einfach {{ domxref("window.clearInterval") }} auf, um die Intervallaufrufe zu beenden, die die Animation aktualisieren.

+ +

Die Video-Frames als Textur verwenden

+ +

Die nächste Änderung erhält die initTexture() Funktion, welche viel einfacher wird, weil kein Bild mehr geladen werden muss. Stattdessen muss nun das Textur-Mapping aktiviert werden und ein leeres Textur-Objekt zum späteren Gebrauch erstellt werden:

+ +
function initTextures() {
+  gl.enable(gl.TEXTURE_2D);
+  cubeTexture = gl.createTexture();
+}
+
+ +

So sieht die updateTexture() Funktion aus. Hier wird wirklich Arbeit verrichtet:

+ +
function updateTexture() {
+  gl.bindTexture(gl.TEXTURE_2D, cubeTexture);
+  gl.texImage2D(gl.TEXTURE_2D, 0, videoElement, true);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
+  gl.generateMipmap(gl.TEXTURE_2D);
+  gl.bindTexture(gl.TEXTURE_2D, null);
+}
+
+ +

Sie kennen diesen Code bereits. Es ist fast identisch zur handleTextureLoaded() Routine im vorherigen Beispiel, mit der Ausnahme, dass wir texImage2D() nicht mit einem Image Objekt sondern mit dem video Element aufrufen.

+ +

updateTexture() wird jedes Mal aufgerufen, wenn sich das timeupdate Event vom video Element meldet. Dieses Event wird gesendet, wenn sich die Zeit des aktuellen Frames ändert, sodass wir wissen, dass wir unsere Textur nur dann aktualisieren müssen, wenn neue Daten verfügbar sind.

+ +

Das war alles! Wenn Sie eine Browser mit Unterstützung von WebGL verwenden, können Sie sich das Beispiel in Aktion ansehen.

+ +

Siehe auch

+ + + +

{{Previous("Web/API/WebGL_API/Tutorial/Beleuchtung_in_WebGL")}}

diff --git a/files/de/web/api/webgl_api/tutorial/animierte_texturen_in_webgl/index.html b/files/de/web/api/webgl_api/tutorial/animierte_texturen_in_webgl/index.html deleted file mode 100644 index bfeb362b8e..0000000000 --- a/files/de/web/api/webgl_api/tutorial/animierte_texturen_in_webgl/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: Animierte Texturen in WebGL -slug: Web/API/WebGL_API/Tutorial/Animierte_Texturen_in_WebGL -tags: - - Tutorial - - WebGL -translation_of: Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL ---- -

{{WebGLSidebar("Tutorial") }} {{Previous("Web/API/WebGL_API/Tutorial/Beleuchtung_in_WebGL")}}

- -

In dieser Demo bauen wir auf das vorherige Beispiel auf, indem wir die statischen Texturen mit den Frames eines OGG-Video ersetzen. Das ist nicht sehr schwer zu schreiben, sieht aber umso besser aus. Fangen wir an.

- -

Zugang zum Video

- -

Zunächst müssen wir etwas HTML hinzufügen, um das video Element zu erstellen, welches wir verwenden, um die Video-Frames zu erhalten:

- -
<video id="video" src="Firefox.ogv" autobuffer='true'">
-  Ihr Browser scheint das HTML5 <code>&lt;video&gt;</code> Element nicht zu unterstützen.
-</video>
-
- -

Das erstellt einfach ein Element, um die Video-Datei "Firefox.ogv" abzuspielen. Wir benutzen CSS, um zu verhindern, dass das Video angezeigt wird:

- -
video {
-  display: none;
-}
-
- -

Dann schenken wir dem JavaScript Code wieder unsere Aufmerksamkeit und fügen eine neue Zeile zur start() Funktion hinzu, um einen Bezug zum Video-Element herzustellen:

- -
videoElement = document.getElementById("video");
-
- -

Und wir ersetzen den Code, der die Intervall-gesteuerten Aufrufe von drawScene() setzt, mit diesem Code:

- -
videoElement.addEventListener("canplaythrough", startVideo, true);
-videoElement.addEventListener("ended", videoDone, true);
-
- -

Die Idee ist hier, dass wir die Animation nicht starten wollen, bevor das Video nicht ausreichend zwischengespeichert wurde, sodass es dann ohne Unterbrechung abgespielt werden kann. Wir fügen also einen Event-Listener hinzu, um auf das video Element zu warten bis es uns mitteilt, dass genug zwischengespeichert wurde und das komplette Video ohne Pause abgespielt werden kann. Wir fügen außerdem einen zweiten Event-Listener hinzu, sodass wir die Animation stoppen können, wenn das Video beendet ist und wir so nicht unnötig den Prozessor belasten.

- -

Die startVideo() Funktion sieht so aus:

- -
function startVideo() {
-  videoElement.play();
-  videoElement.addEventListener("timeupdate", updateTexture, true);
-  setInterval(drawScene, 15);
-}
-
- -

Hier wird einfach das Video gestartet und ein Event-Handler bereitgestellt, der aufgerufen wird, wenn ein neuer Frame des Videos verfügbar ist. Dann werden die Intervall-gesteuerten Aufrufe der drawScene() Funktion eingerichtet, um den Würfel zu rendern.

- -

Die videoDone() Funktion ruft einfach {{ domxref("window.clearInterval") }} auf, um die Intervallaufrufe zu beenden, die die Animation aktualisieren.

- -

Die Video-Frames als Textur verwenden

- -

Die nächste Änderung erhält die initTexture() Funktion, welche viel einfacher wird, weil kein Bild mehr geladen werden muss. Stattdessen muss nun das Textur-Mapping aktiviert werden und ein leeres Textur-Objekt zum späteren Gebrauch erstellt werden:

- -
function initTextures() {
-  gl.enable(gl.TEXTURE_2D);
-  cubeTexture = gl.createTexture();
-}
-
- -

So sieht die updateTexture() Funktion aus. Hier wird wirklich Arbeit verrichtet:

- -
function updateTexture() {
-  gl.bindTexture(gl.TEXTURE_2D, cubeTexture);
-  gl.texImage2D(gl.TEXTURE_2D, 0, videoElement, true);
-  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
-  gl.generateMipmap(gl.TEXTURE_2D);
-  gl.bindTexture(gl.TEXTURE_2D, null);
-}
-
- -

Sie kennen diesen Code bereits. Es ist fast identisch zur handleTextureLoaded() Routine im vorherigen Beispiel, mit der Ausnahme, dass wir texImage2D() nicht mit einem Image Objekt sondern mit dem video Element aufrufen.

- -

updateTexture() wird jedes Mal aufgerufen, wenn sich das timeupdate Event vom video Element meldet. Dieses Event wird gesendet, wenn sich die Zeit des aktuellen Frames ändert, sodass wir wissen, dass wir unsere Textur nur dann aktualisieren müssen, wenn neue Daten verfügbar sind.

- -

Das war alles! Wenn Sie eine Browser mit Unterstützung von WebGL verwenden, können Sie sich das Beispiel in Aktion ansehen.

- -

Siehe auch

- - - -

{{Previous("Web/API/WebGL_API/Tutorial/Beleuchtung_in_WebGL")}}

diff --git a/files/de/web/api/webgl_api/tutorial/beleuchtung_in_webgl/index.html b/files/de/web/api/webgl_api/tutorial/beleuchtung_in_webgl/index.html deleted file mode 100644 index bd65b5bb40..0000000000 --- a/files/de/web/api/webgl_api/tutorial/beleuchtung_in_webgl/index.html +++ /dev/null @@ -1,172 +0,0 @@ ---- -title: Beleuchtung in WebGL -slug: Web/API/WebGL_API/Tutorial/Beleuchtung_in_WebGL -tags: - - Tutorial - - WebGL -translation_of: Web/API/WebGL_API/Tutorial/Lighting_in_WebGL ---- -

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Texturen_in_WebGL_verwenden", "Web/API/WebGL_API/Tutorial/Animierte_Texturen_in_WebGL")}}

- -

Als Erstes sollten wir verstehen, dass WebGL nicht wie OpenGL über eine eigene Unterstützung für die Beleuchtung verfügt. Das müssen wir selbst machen. Glücklicherweise ist es nicht sehr schwer und dieser Artikel versucht Ihnen die Grundlagen dazu näher zu bringen.

- -

Beleuchtung und Schattierung simulieren

- -

Obwohl wir nicht weiter ins Detail über die Theorie hinter simulierter Beleuchtung in 3D Grafiken gehen wollen, was außerdem weit über diesen Artikel hinaus gehen würde, ist es gut zu wissen wie es ungefähr funktioniert. Anstatt hier nun in aller Tiefe zu diskutieren, sollten Sie einen Blick auf den »Phong Shading« Artikel auf Wikipedia werfen, welcher einen guten Überblick über das meist genutzte Beleuchtungsmodell liefert.

- -

Es gibt drei grundlegende Typen zur Beleuchtung:

- -

Umgebungslicht ist das Licht, das die Szene umgibt. Es weist in keine Richtung und bestrahlt jede Oberfläche in gleicher Weise, egal in welche Richtung es zeigt.

- -

Gerichtetes Licht ist das Licht, das von einer festgelegten Richtung ausgestrahlt wird. Dieses Licht ist so weit weg, sodass sich jeder Photon parallel zu jedem anderen Photon bewegt. Sonnenlicht ist zum Beispiel gerichtetes (direktionales) Licht.

- -

Punktbeleuchtung ist das Licht, das von einem Punkt ausgestrahlt wird und von dort radial in alle Richtungen verläuft. So funktionieren zum Beispiel die Glühbirnen im Alltag.

- -

Für unsere Zwecke vereinfachen wir das Beleuchtungsmodell, indem wir nur gerichtetes Licht und Umgebungslicht betrachten. Wir haben hier keine Highlights, die wir mit Punktbeleuchtung oder Glanzlicht in dieser Szene hervorheben wollen. Stattdessen werden wir Umgebungslicht mit einem einzelnen, gerichteten Licht verwenden, welches auf den rotierenden Würfel aus der vorherigen Demo zeigt.

- -

Wenn Sie die Konzepte der Punktbeleuchtung und des Glanzlichtes hinter sich gelassen haben, gibt es dennoch zwei kleine Informationen, die Sie benötigen werden, wenn wir unser gerichtetes Licht implementieren:

- -
    -
  1. Wir müssen die Oberflächennormale mit jedem Vertex verbinden. Das ist ein Vektor, der senkrecht zur Oberfläche des Vertex ist.
    2. -
  2. Wir müssen die Richtung in welche das Licht strahlt wissen. Diese wird durch den Richtungsvektor angegeben.
    3. -
- -

Dann aktualisieren wir den Vertex-Shader, um die Farbe jedes Vertices, unter Berücksichtigung des Umgebungslichts und dem Effekt des gerichteten Lichts (sowie dessen Winkel mit dem es auf die Oberfläche trifft), einzustellen. Wir werden sehen, wie genau wir das machen, wenn wir einen Blick auf den Code für den Shader werfen.

- -

Die Normalen für die Vertices erstellen

- -

Als Erstes müssen wir einen Array für die Normalen für alle Vertices erstellen, die unseren Würfel umfassen. Da ein Würfel ein sehr einfaches Objekt ist, ist dies auch sehr einfach zu erstellen. Für komplexere Objekte wird das Berechnen der Normalen schon umfassender.

- -
  cubeVerticesNormalBuffer = gl.createBuffer();
-  gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesNormalBuffer);
-
-  var vertexNormals = [
-    // vorne
-     0.0,  0.0,  1.0,
-     0.0,  0.0,  1.0,
-     0.0,  0.0,  1.0,
-     0.0,  0.0,  1.0,
-
-    // hinten
-     0.0,  0.0, -1.0,
-     0.0,  0.0, -1.0,
-     0.0,  0.0, -1.0,
-     0.0,  0.0, -1.0,
-
-    // oben
-     0.0,  1.0,  0.0,
-     0.0,  1.0,  0.0,
-     0.0,  1.0,  0.0,
-     0.0,  1.0,  0.0,
-
-    // unten
-     0.0, -1.0,  0.0,
-     0.0, -1.0,  0.0,
-     0.0, -1.0,  0.0,
-     0.0, -1.0,  0.0,
-
-    // rechts
-     1.0,  0.0,  0.0,
-     1.0,  0.0,  0.0,
-     1.0,  0.0,  0.0,
-     1.0,  0.0,  0.0,
-
-    // links
-    -1.0,  0.0,  0.0,
-    -1.0,  0.0,  0.0,
-    -1.0,  0.0,  0.0,
-    -1.0,  0.0,  0.0
-  ];
-
-  gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(vertexNormals), gl.STATIC_DRAW);
-
- -

Das sollte Ihnen schon bekannt vorkommen: Wir erstellen einen neuen Buffer, verknüpfen den Array damit und senden dann unseren Vertex-Normalen-Array in den Buffer, indem wir bufferData() aufrufen.

- -

Dann fügen wir Code zu drawScene() hinzu, um das Normalen-Array mit einem Shader-Attribut zu verknüpfen, sodass der Shader-Code darauf zugreifen kann:

- -
  gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesNormalBuffer);
-  gl.vertexAttribPointer(vertexNormalAttribute, 3, gl.FLOAT, false, 0, 0);
-
- -

Schließlich müssen wir den Code aktualisieren, welcher die Einheitsmatrizen erstellt, um eine Normalenmatrix zu generieren und zum Shader auszuliefern. Diese wird verwendet, um die Normalen umzuwandeln, wenn die aktuelle Orientierung des Würfels in Beziehung zur Lichtquelle behandelt wird:

- -
  var normalMatrix = mvMatrix.inverse();
-  normalMatrix = normalMatrix.transpose();
-  var nUniform = gl.getUniformLocation(shaderProgram, "uNormalMatrix");
-  gl.uniformMatrix4fv(nUniform, false, new WebGLFloatArray(normalMatrix.flatten()));
-
- -

Die Shader aktualisieren

- -

Jetzt sind alle Daten, die von den Shadern gebraucht werden, verfügbar. Wir müssen nun den Code in den Shadern selbst aktualisieren.

- -

Der Vertex-Shader

- -

Zunächst aktualisieren wir den Vertex-Shader, sodass dieser einen Schattenwert für jeden Vertex auf Basis des Umgebungslichts sowie des direktionalen Lichts berechnet. Werfen wir einen Blick auf den Code:

- -
    <script id="shader-vs" type="x-shader/x-vertex">
-      attribute vec3 aVertexNormal;
-      attribute vec3 aVertexPosition;
-      attribute vec2 aTextureCoord;
-
-      uniform mat4 uNormalMatrix;
-      uniform mat4 uMVMatrix;
-      uniform mat4 uPMatrix;
-
-      varying vec2 vTextureCoord;
-      varying vec3 vLighting;
-
-      void main(void) {
-        gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
-        vTextureCoord = aTextureCoord;
-
-        // Beleuchtungseffekt anwenden
-
-        vec3 ambientLight = vec3(0.6, 0.6, 0.6);
-        vec3 directionalLightColor = vec3(0.5, 0.5, 0.75);
-        vec3 directionalVector = vec3(0.85, 0.8, 0.75);
-
-        vec4 transformedNormal = uNormalMatrix * vec4(aVertexNormal, 1.0);
-
-        float directional = max(dot(transformedNormal.xyz, directionalVector), 0.0);
-        vLighting = ambientLight + (directionalLightColor * directional);
-      }
-    </script>
-
- -

Sobald die Position des Vertex berechnet wurde und wir die Koordinaten des Texels (welcher passend zum Vertex ist) erhalten haben, können wir den Schatten für den Vertex berechnen.

- -

Als Erstes wandeln wir die Normale auf Basis der aktuellen Position und Orientierung des Würfels um, indem wir die Normale des Vertexes mit der Normalenmatrix multiplizieren. Dann können wir den Betrag an direktionalem Licht, welcher auf den Vertex angewendet werden soll, berechnen, indem wir das Skalarprodukt der umgewandelten Normalen und des direktionalen Vektors (Richtung aus der das Licht kommt) bilden. Wenn dieser Wert kleiner als Null ist, setzen wir den Wert auf Null fest, da man nicht weniger als Null Licht haben kann.

- -

Wenn der Betrag des direktionalen Lichts berechnet wurde, können wir den Beleuchtungswert generieren, indem wir das Umgebungslicht nehmen und das Produkt der Farbe des direktionalen Lichts und den Betrag an direktionalem Licht bereitstellen. Als Ergebnis haben wir nun einen RGB-Wert, welcher vom Fragment-Shader verwendet wird, um die Farbe jedes Pixels den wir rendern einzustellen.

- -

Der Fragment-Shader

- -

Der Fragment-Shader muss nun aktualisiert werden, um den berechneten Beleuchtungswert vom Vertex-Shader zu berücksichtigen:

- -
    <script id="shader-fs" type="x-shader/x-fragment">
-      varying vec2 vTextureCoord;
-      varying vec3 vLighting;
-
-      uniform sampler2D uSampler;
-
-      void main(void) {
-        vec4 texelColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
-
-        gl_FragColor = vec4(texelColor.rgb * vLighting, texelColor.a);
-      }
-    </script>
-
- -

Hier erhalten wir nun die Farbe des Texels, genau so wie wir es im vorherigen Beispiel getan haben. Bevor wir die Farbe der Fragmente aber festlegen, multiplizieren wir die Texel-Farbe mit dem Beleuchtungswert, um die Texel-Farbe so einzustellen, dass diese den Effekt der Lichtquelle berücksichtigt.

- -

Und das war's! Wenn Sie einen Browser verwenden, der WebGL unterstützt, können Sie einen Blick auf die Live-Demo werfen.

- -

Übungen für den Leser

- -

Dies ist natürlich ein sehr einfaches Beispiel, welches eine Beleuchtung pro Vertex implementiert. Für fortgeschrittene Grafiken, möchten Sie sicher eine Beleuchtung pro Pixel implementieren, aber dies wird Sie in die Richtung leiten.

- -

Sie können nun also versuchen mit der Richtung der Lichtquelle zu experimentieren, die Farbe der Leuchtquelle zu ändern und so weiter.

- -

{{PreviousNext("Web/API/WebGL_API/Tutorial/Texturen_in_WebGL_verwenden", "Web/API/WebGL_API/Tutorial/Animierte_Texturen_in_WebGL")}}

diff --git a/files/de/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html b/files/de/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html new file mode 100644 index 0000000000..d3a21591fd --- /dev/null +++ b/files/de/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html @@ -0,0 +1,126 @@ +--- +title: 3D-Objekte mit WebGL erstellen +slug: Web/API/WebGL_API/Tutorial/3D-Objekte_mit_WebGL_erstellen +tags: + - Tutorial + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL +--- +

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Objekte_mit_WebGL_animieren", "Web/API/WebGL_API/Tutorial/Texturen_in_WebGL_verwenden")}}

+ +

Bringen wir unser Quadrat in die dritte Dimension, indem wir fünf oder mehr Flächen hinzufügen und daraus einen Würfel machen. Um das effizient zu machen, wechseln wir vom Zeichnen direkt über die Vertices zur gl.drawArray() Methode, um den Vertex-Array als eine Tabelle zu verwenden und die einzelnen Vertices in dieser Tabelle als Referenz für Positionen jeder Fläche zu definieren, indem wir gl.drawElements() aufrufen.

+ +

Bedenken Sie: Jede Fläche benötigt vier Vertices, die diese definieren, aber jeder Vertex wird von drei Flächen verwendet. Wir können eine Menge Daten sparen, indem wir eine Liste aller 24 Vertices erstellen und uns dann auf jeden Vertex durch dessen Index in der Liste beziehen, anstatt den gesamten Koordinatensatz zu verwenden.

+ +

Die Vertex-Positionen des Würfels definieren

+ +

Zunächst wollen wir den Positionsspeicher der Vertices erstellen, indem wir den Code in initBuffers() ändern. Das geschieht genau so wie für das Quadrat, allerdings haben wir hier ein paar Datensätze mehr, da wir 24 Vertices (4 pro Seite) haben müssen:

+ +
  var vertices = [
+    // vordere Fläche
+    -1.0, -1.0,  1.0,
+     1.0, -1.0,  1.0,
+     1.0,  1.0,  1.0,
+    -1.0,  1.0,  1.0,
+
+    // hintere Fläche
+    -1.0, -1.0, -1.0,
+    -1.0,  1.0, -1.0,
+     1.0,  1.0, -1.0,
+     1.0, -1.0, -1.0,
+
+    // obere Fläche
+    -1.0,  1.0, -1.0,
+    -1.0,  1.0,  1.0,
+     1.0,  1.0,  1.0,
+     1.0,  1.0, -1.0,
+
+    // untere Fläche
+    -1.0, -1.0, -1.0,
+     1.0, -1.0, -1.0,
+     1.0, -1.0,  1.0,
+    -1.0, -1.0,  1.0,
+
+    // rechte Fläche
+     1.0, -1.0, -1.0,
+     1.0,  1.0, -1.0,
+     1.0,  1.0,  1.0,
+     1.0, -1.0,  1.0,
+
+    // linke Fläche
+    -1.0, -1.0, -1.0,
+    -1.0, -1.0,  1.0,
+    -1.0,  1.0,  1.0,
+    -1.0,  1.0, -1.0
+  ];
+
+ +

Die Farben der Vertices definieren

+ +

Außerdem müssen wir einen Array für die Farben der 24 Vertices erstellen. Dieser Code definiert zunächst die Farben für jede Fläche und verwendet dann eine Schleife, um jeden der Vertices mit einer Farbe zu bestücken.

+ +
  var colors = [
+    [1.0,  1.0,  1.0,  1.0],    // vordere Fläche: weiß
+    [1.0,  0.0,  0.0,  1.0],    // hintere Fläche: rot
+    [0.0,  1.0,  0.0,  1.0],    // obere Fläche: grün
+    [0.0,  0.0,  1.0,  1.0],    // untere Fläche: blau
+    [1.0,  1.0,  0.0,  1.0],    // rechte Fläche: gelb
+    [1.0,  0.0,  1.0,  1.0]     // linke Fläche: violett
+  ];
+
+  var generatedColors = [];
+
+  for (j=0; j<6; j++) {
+    var c = colors[j];
+
+    for (var i=0; i<4; i++) {
+      generatedColors = generatedColors.concat(c);
+    }
+  }
+
+  cubeVerticesColorBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesColorBuffer);
+  gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(generatedColors), gl.STATIC_DRAW);
+
+ +

Das Element-Array definieren

+ +

Sobald die Vertex-Arrays generiert worden sind, müssen wir das Element-Array erstellen.

+ +
  cubeVerticesIndexBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
+
+  // Dieser Array definiert jede Fläche als zwei Dreiecke über die Indizes
+  // im Vertex-Array, um die Position jedes Dreiecks festzulegen.
+
+  var cubeVertexIndices = [
+    0,  1,  2,      0,  2,  3,    // vorne
+    4,  5,  6,      4,  6,  7,    // hinten
+    8,  9,  10,     8,  10, 11,   // oben
+    12, 13, 14,     12, 14, 15,   // unten
+    16, 17, 18,     16, 18, 19,   // rechts
+    20, 21, 22,     20, 22, 23    // links
+  ]
+
+  // Sende nun das Element-Array zum GL
+
+  gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,
+      new WebGLUnsignedShortArray(cubeVertexIndices), gl.STATIC_DRAW);
+
+ +

Das cubeVertexIndices Array definiert jede Fläche als ein paar von Dreiecken, alle Vertices des Dreiecks werden als ein Index im Vertex-Array des Würfels festgelegt. Daher ist der Würfel aus einer Sammlung von 12 Dreiecken beschrieben.

+ +

Den Würfel zeichnen

+ +

Als nächstes müssen wir etwas Code zur drawScene() Funktion hinzufügen, um über den Indexspeicher des Würfels zu zeichnen. Wir fügen neue bindBuffer() und drawElements() Aufrufe hinzu:

+ +
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
+  setMatrixUniforms();
+  gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);
+
+ +

Da jede Seite unseres Würfels aus zwei Dreiecken besteht, gibt es 6 Vertices pro Seite, oder 36 Vertices im Würfel, obwohl einige davon doppelt sind. Da unser Index-Array jedoch aus einfachen Integern besteht, stellt dies keinen unkoordinierbaren Betrag an Daten dar, welcher für jeden Frame der Animation durchgegangen werden muss.

+ +

Jetzt haben wir einen animierten Würfel, welcher herum springt, rotiert und über sechs unterschiedliche Seiten verfügt. Wenn Ihr Browser WebGL unterstützt, schauen Sie sich hier die Demo in Aktion an.

+ +

{{PreviousNext("Web/API/WebGL_API/Tutorial/Objekte_mit_WebGL_animieren", "Web/API/WebGL_API/Tutorial/Texturen_in_WebGL_verwenden")}}

diff --git "a/files/de/web/api/webgl_api/tutorial/einf\303\274hrung_in_webgl/index.html" "b/files/de/web/api/webgl_api/tutorial/einf\303\274hrung_in_webgl/index.html" deleted file mode 100644 index 5906f95761..0000000000 --- "a/files/de/web/api/webgl_api/tutorial/einf\303\274hrung_in_webgl/index.html" +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Einführung in WebGL -slug: Web/API/WebGL_API/Tutorial/Einführung_in_WebGL -tags: - - Tutorial - - WebGL -translation_of: Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL ---- -

{{WebGLSidebar("Tutorial")}} {{Next("Web/API/WebGL_API/Tutorial/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext")}}

- -

Mit WebGL steht eine API zur Verfügung, die auf OpenGL ES 2.0 basiert, um 3D Rendering im HTML canvas Element zu ermöglichen. WebGL Programme bestehen aus Steuercode in JavaScript und Shadercode (GLSL), der auf dem Grafikprozessor (GPU) des Computers ausgeführt wird. WebGL Elemente können mit anderen HTML Elementen kombiniert werden.

- -

Dieser Artikel ist eine Einführung in die Grundlagen von WebGL. Es wird vorausgesetzt, dass einige mathematischen Kenntnisse im 3D-Bereich (Matrizen) vorhanden sind. Dieser Artikel wird daher keine 3D-Grafik-Konzepte vermitteln. Es gibt einen anfängergeeigneten Leitfaden mit Programmieraufgaben in unserem Lernbereich: Learn WebGL for 2D and 3D graphics.

- -

DIe hier verwendeten Codebeispiele finden sich auch im webgl-examples GitHub repository.

- -

3D Rendering vorbereiten

- -

Um WebGL benutzen zu können, wird als erstes ein canvas Element benötigt. Der folgende HTML-Code definiert eine canvas Zeichenfläche.

- -
<body>
-  <canvas id="glCanvas" width="640" height="480"></canvas>
-</body>
-
- -

Vorbereitung des WebGL-Kontexts

- -

Die main() Funktion im JavaScript Code wird aufgerufen, nachdem das Dokument geladen wurde. Die Aufgabe der Funktion ist, den WebGL-Kontext festzulegen und mit dem Rendering zu beginnen.

- -
main();
-
-function main() {
-  const canvas = document.querySelector("#glCanvas");
-  // Initialisierung des GL Kontexts
-  const gl = canvas.getContext("webgl");
-
-  // Nur fortfahren, wenn WebGL verfügbar ist und funktioniert
-  if (!gl) {
-    alert("Unable to initialize WebGL. Your browser or machine may not support it.");
-    return;
-  }
-
-  // Setze clear color auf schwarz, vollständig sichtbar
-  gl.clearColor(0.0, 0.0, 0.0, 1.0);
-  // Lösche den color buffer mit definierter clear color
-  gl.clear(gl.COLOR_BUFFER_BIT);
-}
- -

Als erstes verschaffen wir uns eine Referenz zum canvas Element und speichern sie in der canvas Variable.

- -

Sobald wir den Bezug zum canvas haben, versuchen wir einen zugehörigen  WebGLRenderingContext zu erhalten, indem wir getContext aufrufen und dabei den String "webgl" mitgeben. Falls der Browser WebGL nicht unterstützt, wird getContext null zurückgeben, woraufhin wir den Nutzer benachrichtigen und das Script verlassen.

- -

Wenn der Kontext erfolgreich initialisiert wurde, ist gl eine Variable für den Kontext. In diesem Fall setzen wir die clear color auf schwarz, und löschen den zugehörigen Kontext (der canvas wird mit der Hintergrundfarbe neu gezeichnet)

- -

An dieser Stelle ist genug Code vorhanden, um den WebGL-Kontext erfolgreich zu initialisieren. Ein großer, leerer, schwarzer Kasten sollte zu sehen sein, der darauf wartet mit weiteren Inhalten gefüttert zu werden.

- -

{{EmbedGHLiveSample('webgl-examples/tutorial/sample1/index.html', 670, 510) }}

- -

Vollständigen Code ansehen | Demo in neuer Seite öffnen

- -

Siehe auch

- -

 

- - - -

 

- -

{{Next("Web/API/WebGL_API/Tutorial/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext")}}

diff --git "a/files/de/web/api/webgl_api/tutorial/farben_mittels_shader_in_einen_webgl-kontext_hinzuf\303\274gen/index.html" "b/files/de/web/api/webgl_api/tutorial/farben_mittels_shader_in_einen_webgl-kontext_hinzuf\303\274gen/index.html" deleted file mode 100644 index 94068822d5..0000000000 --- "a/files/de/web/api/webgl_api/tutorial/farben_mittels_shader_in_einen_webgl-kontext_hinzuf\303\274gen/index.html" +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: Farben mittels Shader in einen WebGL-Kontext hinzufügen -slug: >- - Web/API/WebGL_API/Tutorial/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen -tags: - - Tutorial - - WebGL -translation_of: Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL ---- -

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext", "Web/API/WebGL_API/Tutorial/Objekte_mit_WebGL_animieren")}}

- -

Wir haben ein simples Quadrat im vorherigen Teil erstellt, im nächsten Schritt wollen wir ein bisschen Farbe ins Spiel bringen. Dafür sind Änderungen an den Shadern erforderlich.

- -

Farben zu den Eckpunkten hinzufügen

- -

In der Computergrafik werden Objekte mit einer Reihe von Punkten erstellt. Jeder Punkt hat eine Position und eine Farbe. Standardmäßig werden alle anderen Pixelfarben (und alle weiteren Attribute, darunter die Position) über eine lineare Interpolation berechnet, die automatisch glatte Verläufe erstellt. Vorher hat unser Vertex-Shader keine festgelegten Farben auf die Punkte (Vertices) angewendet und der Fragment-Shader legte die feste Farbe weiß für jeden Pixel fest, sodass das gesamte Quadrat komplett weiß gezeichnet wurde.

- -

Nun wollen wir in jeder Ecke des Quadrats einen Verlauf in einer unterschiedlichen Farbe rendern: rot, blau, grün und weiß. Als erstes sollten wir daher diese Farben in den vier Eckpunkten einrichten. Um das zu machen, müssen wir zunächst einen Array der Vertex-Farben erstellen und diesen dann in einen WebGL Buffer speichern. Das erreichen wir durch die folgenden Zeilen in unserer initBuffers() Funktion:

- -
var colors = [
-  1.0,  1.0,  1.0,  1.0,    // weiß
-  1.0,  0.0,  0.0,  1.0,    // rot
-  0.0,  1.0,  0.0,  1.0,    // grün
-  0.0,  0.0,  1.0,  1.0     // blau
-];
-
-squareVerticesColorBuffer = gl.createBuffer();
-gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesColorBuffer);
-gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
-}
-
- -

Dieser Code definiert zuerst einen JavaScript Array, welcher die vier Farb-Vektoren mit jeweils vier Werten für die jeweilige Farbe enthält. Dann wird ein neuer WebGL Buffer angewiesen diese Farben zu speichern und der Array wird in WebGL Floats konvertiert und im Buffer gespeichert.

- -

Um die Farben schließlich zu verwenden, muss der der Vertex-Shader aktualisiert werden, um die entsprechende Farbe vom Farb-Buffer zu erhalten:

- -
<script id="shader-vs" type="x-shader/x-vertex">
-  attribute vec3 aVertexPosition;
-  attribute vec4 aVertexColor;
-
-  uniform mat4 uMVMatrix;
-  uniform mat4 uPMatrix;
-
-  varying vec4 vColor;
-
-  void main(void) {
-    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
-    vColor = aVertexColor;
-  }
-</script>
-
- -

Der wichtigste Unterschied ist hier, dass wir für jeden Punkt (Vertex) die Farbe entsprechend des Farb-Arrays setzen.

- -

Die Fragmente mit Farben versehen

- -

Als Erinnerung, so sah unser Fragment-Shader vorher aus:

- -
<script id="shader-fs" type="x-shader/x-fragment">
-  void main(void) {
-    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
-  }
-</script>
-
- -

Um nun die interpolierte Farbe für jeden Pixel aufzugreifen, müssen wir dies einfach so ändern, dass wir den Wert der vColor Variable erhalten:

- -
<script id="shader-fs" type="x-shader/x-fragment">
-  varying vec4 vColor;
-
-  void main(void) {
-    gl_FragColor = vColor;
-  }
-</script>
-
- -

Das ist eine sehr einfache Änderung. Anstatt des festen Wertes vorher, erhält jedes Fragment jetzt einfach die interpolierte Farbe, basierend auf der Position relativ zu den Kontenpunkten (Vertices).

- -

Mit den Farben zeichnen

- -

Als nächstes ist es nötig, Code zur initShaders() Routine hinzuzufügen, um das Farbattribut für das Shader-Programm zu initialisieren:

- -
  vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor");
-  gl.enableVertexAttribArray(vertexColorAttribute);
-
- -

Dann wird drawScene() abgeändert, um schließlich die Farben zu verwenden, wenn das Quadrat gezeichnet wird:

- -
  gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesColorBuffer);
-  gl.vertexAttribPointer(vertexColorAttribute, 4, gl.FLOAT, false, 0, 0);
-
- -

Jetzt sollten Sie das Beispiel in einem WebGL kompatiblen Browser sehen und Ihre Ausgabe sollte so wie im Bild unten gezeichnet werden (das Quadrat ist innerhalb eines schwarzen Felds zu sehen):

- -

screenshot.png

- -

{{PreviousNext("Web/API/WebGL_API/Tutorial/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext", "Web/API/WebGL_API/Tutorial/Objekte_mit_WebGL_animieren")}}

diff --git a/files/de/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html b/files/de/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html new file mode 100644 index 0000000000..5906f95761 --- /dev/null +++ b/files/de/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html @@ -0,0 +1,73 @@ +--- +title: Einführung in WebGL +slug: Web/API/WebGL_API/Tutorial/Einführung_in_WebGL +tags: + - Tutorial + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL +--- +

{{WebGLSidebar("Tutorial")}} {{Next("Web/API/WebGL_API/Tutorial/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext")}}

+ +

Mit WebGL steht eine API zur Verfügung, die auf OpenGL ES 2.0 basiert, um 3D Rendering im HTML canvas Element zu ermöglichen. WebGL Programme bestehen aus Steuercode in JavaScript und Shadercode (GLSL), der auf dem Grafikprozessor (GPU) des Computers ausgeführt wird. WebGL Elemente können mit anderen HTML Elementen kombiniert werden.

+ +

Dieser Artikel ist eine Einführung in die Grundlagen von WebGL. Es wird vorausgesetzt, dass einige mathematischen Kenntnisse im 3D-Bereich (Matrizen) vorhanden sind. Dieser Artikel wird daher keine 3D-Grafik-Konzepte vermitteln. Es gibt einen anfängergeeigneten Leitfaden mit Programmieraufgaben in unserem Lernbereich: Learn WebGL for 2D and 3D graphics.

+ +

DIe hier verwendeten Codebeispiele finden sich auch im webgl-examples GitHub repository.

+ +

3D Rendering vorbereiten

+ +

Um WebGL benutzen zu können, wird als erstes ein canvas Element benötigt. Der folgende HTML-Code definiert eine canvas Zeichenfläche.

+ +
<body>
+  <canvas id="glCanvas" width="640" height="480"></canvas>
+</body>
+
+ +

Vorbereitung des WebGL-Kontexts

+ +

Die main() Funktion im JavaScript Code wird aufgerufen, nachdem das Dokument geladen wurde. Die Aufgabe der Funktion ist, den WebGL-Kontext festzulegen und mit dem Rendering zu beginnen.

+ +
main();
+
+function main() {
+  const canvas = document.querySelector("#glCanvas");
+  // Initialisierung des GL Kontexts
+  const gl = canvas.getContext("webgl");
+
+  // Nur fortfahren, wenn WebGL verfügbar ist und funktioniert
+  if (!gl) {
+    alert("Unable to initialize WebGL. Your browser or machine may not support it.");
+    return;
+  }
+
+  // Setze clear color auf schwarz, vollständig sichtbar
+  gl.clearColor(0.0, 0.0, 0.0, 1.0);
+  // Lösche den color buffer mit definierter clear color
+  gl.clear(gl.COLOR_BUFFER_BIT);
+}
+ +

Als erstes verschaffen wir uns eine Referenz zum canvas Element und speichern sie in der canvas Variable.

+ +

Sobald wir den Bezug zum canvas haben, versuchen wir einen zugehörigen  WebGLRenderingContext zu erhalten, indem wir getContext aufrufen und dabei den String "webgl" mitgeben. Falls der Browser WebGL nicht unterstützt, wird getContext null zurückgeben, woraufhin wir den Nutzer benachrichtigen und das Script verlassen.

+ +

Wenn der Kontext erfolgreich initialisiert wurde, ist gl eine Variable für den Kontext. In diesem Fall setzen wir die clear color auf schwarz, und löschen den zugehörigen Kontext (der canvas wird mit der Hintergrundfarbe neu gezeichnet)

+ +

An dieser Stelle ist genug Code vorhanden, um den WebGL-Kontext erfolgreich zu initialisieren. Ein großer, leerer, schwarzer Kasten sollte zu sehen sein, der darauf wartet mit weiteren Inhalten gefüttert zu werden.

+ +

{{EmbedGHLiveSample('webgl-examples/tutorial/sample1/index.html', 670, 510) }}

+ +

Vollständigen Code ansehen | Demo in neuer Seite öffnen

+ +

Siehe auch

+ +

 

+ + + +

 

+ +

{{Next("Web/API/WebGL_API/Tutorial/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext")}}

diff --git "a/files/de/web/api/webgl_api/tutorial/hinzuf\303\274gen_von_2d_inhalten_in_einen_webgl-kontext/index.html" "b/files/de/web/api/webgl_api/tutorial/hinzuf\303\274gen_von_2d_inhalten_in_einen_webgl-kontext/index.html" deleted file mode 100644 index 56c267f394..0000000000 --- "a/files/de/web/api/webgl_api/tutorial/hinzuf\303\274gen_von_2d_inhalten_in_einen_webgl-kontext/index.html" +++ /dev/null @@ -1,238 +0,0 @@ ---- -title: Hinzufügen von 2D Inhalten in einen WebGL-Kontext -slug: Web/API/WebGL_API/Tutorial/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext -tags: - - WebGL -translation_of: Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context ---- -

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Einführung_in_WebGL", "Web/API/WebGL_API/Tutorial/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen")}}

- -

Sobald der WebGL-Kontext erfolgreich erstellt wurde, können wir anfangen darin zu rendern. Am einfachsten beginnen wir mit einem einfachen, zweidimensionalen, untextuierten Objekt. Fangen wir also damit an, ein Stück Code zu schreiben, um ein Quadrat zu zeichnen.

- -

Hinweis zur deutschen Übersetzung dieses Abschnitts

- -

Die deutsche Übersetzung bezieht sich auf ältere Version des Beispielcodes als der englische Originaltext. Der im deutschen Text beschriebene Code hat einige Probleme:

- - - -

Um das Beispiel selber nachzuprogrammieren ist es daher empfehlenswert, auf die englische Version des Tutorials zu wechseln. Vielleicht haben Sie ja auch Lust, diese Version ins Deutsche zu übersetzen?

- -

Beleuchtung der Szene

- -

Das Wichtigste, das wir verstehen müssen bevor wir anfangen können, ist, dass wir, uns bereits in einer dreidimensionalen Umgebung befinden, obwohl wir nur ein zweidimensionales Objekt in diesem Beispiel rendern wollen. Das heißt, wir müssen jetzt bereits Shader einsetzen, die unsere einfache Szene beleuchten und solche erstellen, die unser Objekt zeichnen. Diese Shader werden festlegen wie unser Quadrat später beleuchtet sein wird.

- -

Initialisierung der Shader

- -

Shader sind durch die OpenGL ES Shading Language (pdf) spezifiziert. Damit es einfacher ist unsere Inhalte zu warten und zu aktualisieren, können wir unseren Code so schreiben, dass die Shader im HTML Dokument gefunden werden, anstatt alles mittels JavaScript zu bauen. Werfen wir einen Blick auf unsere initShaders() Routine, welche diese Aufgabe übernimmt:

- -
function initShaders() {
-  var fragmentShader = getShader(gl, "shader-fs");
-  var vertexShader = getShader(gl, "shader-vs");
-
-  // Erzeuge Shader
-
-  shaderProgram = gl.createProgram();
-  gl.attachShader(shaderProgram, vertexShader);
-  gl.attachShader(shaderProgram, fragmentShader);
-  gl.linkProgram(shaderProgram);
-
-  // Wenn die das Aufrufen der Shader fehlschlägt,
-  // gib eine Fehlermeldung aus:
-
-  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
-    alert("Initialisierung des Shaderprogramms nicht möglich.");
-  }
-
-  gl.useProgram(shaderProgram);
-
-  vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
-  gl.enableVertexAttribArray(vertexPositionAttribute);
-}
-
-
- -

Es werden zwei Shader in dieser Routine geladen; der Erste, der fragmentShader, wird vom script Element mit der Id "shader-fs" geladen. Der Zweite, der vertexShader, wird vom script Element mit der Id "shader-vs" geladen. Wir werden im nächsten Abschnitt noch näher auf die getShader() Funktion eingehen. Diese Routine holt sich dann die Shader aus dem DOM.

- -

In diesem Teil erstellen wir noch das Shaderprogramm, in dem wir die Funktion createProgram() aufrufen, die beiden Shader anhängen und das Shaderprogramm verlinken. Danach wird der Zustand des LINK_STATUS Parameters überprüft, um sicher zu gehen, dass das Programm erfolgreich verlinkt wurde. Wenn das der Fall ist, aktivieren wir das neue Shaderprogramm.

- -

Shader aus dem DOM laden

- -

Die getShader() Routine ruft ein Shaderprogramm mit dem festgelegtem Namen aus dem DOM auf, gibt das kompilierte Shaderprogramm zurück oder ist leer, wenn nichts geladen oder kompiliert worden konnte.

- -
function getShader(gl, id) {
-  var shaderScript = document.getElementById(id);
-
-  if (!shaderScript) {
-    return null;
-  }
-
-  var theSource = "";
-  var currentChild = shaderScript.firstChild;
-
-  while(currentChild) {
-    if (currentChild.nodeType == 3) {
-      theSource += currentChild.textContent;
-    }
-
-    currentChild = currentChild.nextSibling;
-  }
- -

Wenn das Element mit der festgelegten Id gefunden wurde, wird der Text in die Variable theSource gespeichert.

- -
  var shader;
-
-  if (shaderScript.type == "x-shader/x-fragment") {
-    shader = gl.createShader(gl.FRAGMENT_SHADER);
-  } else if (shaderScript.type == "x-shader/x-vertex") {
-    shader = gl.createShader(gl.VERTEX_SHADER);
-  } else {
-    return null;  // Unbekannter Shadertyp
-  }
- -

Jetzt wo der Code für die Shader gelesen wurde, können wir uns die MIME Typen der Shader angucken, um festzulegen, ob es ein Vertex-Shader (MIME Typ: "x-shader/x-vertex") oder ein Fragment-Shader (MIME Typ: "x-shader/x-fragment") ist. Danach werden dann die entsprechenden Shadertypen erstellt.

- -
  gl.shaderSource(shader, theSource);
-
-  // Kompiliere das Shaderprogramm
-
-  gl.compileShader(shader);
-
-  // Überprüfe, ob die Kompilierung erfolgreich war
-
-  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-    alert("Es ist ein Fehler beim Kompilieren der Shader aufgetaucht: " + gl.getShaderInfoLog(shader));
-    return null;
-  }
-
-  return shader;
-}
-
- -

Schließlich wird der Shader kompiliert. Falls ein Fehler während der Kompilierung auftritt, zeigen wir die Fehlermeldung an und geben null zurück. Andernfalls wird der kompilierte Shader zurückgegeben.

- -

Die Shader

- -

Nun müssen wir die eigentlichen Shaderprogramme in unser HTML schreiben. Wie genau diese Shader arbeiten, übersteigt das Ziel dieses Tutorials, wir gehen daher nur auf das Wesentliche ein.

- -

Fragment-Shader

- -

Jeder Pixel in einem Vieleck wird Fragment in der GL-Fachsprache genannt. Die Aufgabe des Fragment-Shaders ist es, die Farbe für jeden Pixel bereitzustellen. In unserem Fall ordnen wir einfach jedem Pixel eine weiße Farbe zu.

- -

gl_FragColor ist eine eingebaute GL Variable, die für die Farbe des Fragments verwendet wird.

- -
<script id="shader-fs" type="x-shader/x-fragment">
-
-  void main(void) {
-    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
-  }
-</script>
-
- -

Vertex-Shader

- -

Der Vertex-Shader definiert die Position und Form von jedem Punkt.

- -
<script id="shader-vs" type="x-shader/x-vertex">
-  attribute vec3 aVertexPosition;
-
-  uniform mat4 uMVMatrix;
-  uniform mat4 uPMatrix;
-
-
-  void main(void) {
-    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
-  }
-</script>
-
- -

Das Objekt erstellen

- -

Bevor wir unser Quadrat rendern können, müssen wir einen Puffer erstellen, der unsere Punkte enthält. Das werden wir mittels einer Funktion machen, die wir initBuffers() nennen. Wenn wir zu mehr fortgeschrittenen WebGL-Konzepten kommen, wird diese Routine vergrößert, um mehr - und komplexere - 3D-Objekte zu erstellen.

- -
var horizAspect = 480.0/640.0;
-
-function initBuffers() {
-  squareVerticesBuffer = gl.createBuffer();
-  gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
-
-  var vertices = [
-    1.0,  1.0,  0.0,
-    -1.0, 1.0,  0.0,
-    1.0,  -1.0, 0.0,
-    -1.0, -1.0, 0.0
-  ];
-
-  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
-}
-
- -

Diese Routine ist, durch die einfache Art der Szene in diesem Beispiel, sehr einfach gehalten. Es geht los mit dem Aufruf der createBuffer() Methode, die einen Puffer erstellt in dem wir die Punkte speichern können. Der Puffer wird, durch Aufrufen der bindBuffer() Methode, mit dem Kontext verbunden.

- -

Wenn das erledigt ist, erstellen wir einen JavaScript Array, der die Koordinaten für jeden Punkt des Quadrats enthält. Dieser wird dann in einen WebGL FloatArray umgewandelt und durch die bufferData() Methode werden die Punkte für das Objekt festgelegt.

- -

Die Szene zeichnen

- -

Jetzt sind die Shader aufgebaut und das Objekt ist erstellt. Wir können die Szene rendern lassen. Da wir in dieser Szene nichts animieren, ist unsere drawScene() Funktion sehr einfach. Es werden einige nützliche Routinen verwendet, die wir uns kurz anschauen.

- -
function drawScene() {
-  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
-
-  perspectiveMatrix = makePerspective(45, 640.0/480.0, 0.1, 100.0);
-
-  loadIdentity();
-  mvTranslate([-0.0, 0.0, -6.0]);
-
-  gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
-  gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
-  setMatrixUniforms();
-  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
-}
-
- -

Als Erstes wird der Kontext auf unsere Hintergrundfarbe gesetzt und die Kameraperspektive festgelegt. Wir definieren ein Blickfeld von 45°, mit einem Höhen-/Breitenverhältnis von 640 zu 480 (die Größe unseres Canvas). Außerdem legen wir fest, dass wir nur Objekte zwischen 0.1 und 100 Einheiten gerendert haben wollen.

- -

Dann wird die Position des Quadrats, über das Laden der ursprünglichen Position und der Verschiebung um 6 Einheiten von der Kamera weg, ermittelt. Danach, verbinden wir den Puffer des Quadrats mit dem Kontext, konfigurieren es, und zeichnen das Objekt, in dem wir die drawArrays() Methode aufrufen.

- -

Das Ergebnis kann hier ausprobiert werden, wenn Sie einen Browser verwenden, der WebGL unterstützt.

- -

Matrix Operationen

- -

Matrix Operationen sind schon kompliziert genug. Keiner möchte wirklich den ganzen Code selbst schreiben, der benötigt wird um die Berechnungen selber durchzuführen. Glücklicherweise gibt es Sylvester, eine sehr handliche Bibliothek, die bestens mit Vektor und Matrix Operationen in JavaScript umgehen kann.

- -

Die glUtils.js Datei, die in dieser Demo benutzt wird, wird bei einer ganzen Reihe von WebGL-Demos, die Web zu finden sind, verwendet. Keiner scheint sich völlig sicher zu sein, woher diese Bibliothek ursprünglich herkommt, aber es vereinfacht den Gebrauch von Sylvester noch weiter, in dem Methoden hinzugefügt werden, die auch spezielle Matrizentypen ermöglichen und HTML ausgegeben werden kann, um die Matrizen anzeigen zu lassen.

- -

Zusätzlich, definiert diese Demo ein paar hilfreiche Routinen, um an diese Bibliothek für spezielle Aufgaben anzukoppeln. Was genau gemacht wird, ist kein Teil dieses Artikels, aber es gibt einige gute Referenzen zu Matrizen, die online verfügbar sind. Siehe unter Siehe auch, um ein paar aufzulisten.

- -
function loadIdentity() {
-  mvMatrix = Matrix.I(4);
-}
-
-function multMatrix(m) {
-  mvMatrix = mvMatrix.x(m);
-}
-
-function mvTranslate(v) {
-  multMatrix(Matrix.Translation($V([v[0], v[1], v[2]])).ensure4x4());
-}
-
-function setMatrixUniforms() {
-  var pUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
-  gl.uniformMatrix4fv(pUniform, false, new Float32Array(perspectiveMatrix.flatten()));
-
-  var mvUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
-  gl.uniformMatrix4fv(mvUniform, false, new Float32Array(mvMatrix.flatten()));
-}
-
- -

Siehe auch

- - - -

{{PreviousNext("Web/API/WebGL_API/Tutorial/Einführung_in_WebGL", "Web/API/WebGL_API/Tutorial/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen")}}

diff --git a/files/de/web/api/webgl_api/tutorial/lighting_in_webgl/index.html b/files/de/web/api/webgl_api/tutorial/lighting_in_webgl/index.html new file mode 100644 index 0000000000..bd65b5bb40 --- /dev/null +++ b/files/de/web/api/webgl_api/tutorial/lighting_in_webgl/index.html @@ -0,0 +1,172 @@ +--- +title: Beleuchtung in WebGL +slug: Web/API/WebGL_API/Tutorial/Beleuchtung_in_WebGL +tags: + - Tutorial + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Lighting_in_WebGL +--- +

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Texturen_in_WebGL_verwenden", "Web/API/WebGL_API/Tutorial/Animierte_Texturen_in_WebGL")}}

+ +

Als Erstes sollten wir verstehen, dass WebGL nicht wie OpenGL über eine eigene Unterstützung für die Beleuchtung verfügt. Das müssen wir selbst machen. Glücklicherweise ist es nicht sehr schwer und dieser Artikel versucht Ihnen die Grundlagen dazu näher zu bringen.

+ +

Beleuchtung und Schattierung simulieren

+ +

Obwohl wir nicht weiter ins Detail über die Theorie hinter simulierter Beleuchtung in 3D Grafiken gehen wollen, was außerdem weit über diesen Artikel hinaus gehen würde, ist es gut zu wissen wie es ungefähr funktioniert. Anstatt hier nun in aller Tiefe zu diskutieren, sollten Sie einen Blick auf den »Phong Shading« Artikel auf Wikipedia werfen, welcher einen guten Überblick über das meist genutzte Beleuchtungsmodell liefert.

+ +

Es gibt drei grundlegende Typen zur Beleuchtung:

+ +

Umgebungslicht ist das Licht, das die Szene umgibt. Es weist in keine Richtung und bestrahlt jede Oberfläche in gleicher Weise, egal in welche Richtung es zeigt.

+ +

Gerichtetes Licht ist das Licht, das von einer festgelegten Richtung ausgestrahlt wird. Dieses Licht ist so weit weg, sodass sich jeder Photon parallel zu jedem anderen Photon bewegt. Sonnenlicht ist zum Beispiel gerichtetes (direktionales) Licht.

+ +

Punktbeleuchtung ist das Licht, das von einem Punkt ausgestrahlt wird und von dort radial in alle Richtungen verläuft. So funktionieren zum Beispiel die Glühbirnen im Alltag.

+ +

Für unsere Zwecke vereinfachen wir das Beleuchtungsmodell, indem wir nur gerichtetes Licht und Umgebungslicht betrachten. Wir haben hier keine Highlights, die wir mit Punktbeleuchtung oder Glanzlicht in dieser Szene hervorheben wollen. Stattdessen werden wir Umgebungslicht mit einem einzelnen, gerichteten Licht verwenden, welches auf den rotierenden Würfel aus der vorherigen Demo zeigt.

+ +

Wenn Sie die Konzepte der Punktbeleuchtung und des Glanzlichtes hinter sich gelassen haben, gibt es dennoch zwei kleine Informationen, die Sie benötigen werden, wenn wir unser gerichtetes Licht implementieren:

+ +
    +
  1. Wir müssen die Oberflächennormale mit jedem Vertex verbinden. Das ist ein Vektor, der senkrecht zur Oberfläche des Vertex ist.
    2. +
  2. Wir müssen die Richtung in welche das Licht strahlt wissen. Diese wird durch den Richtungsvektor angegeben.
    3. +
+ +

Dann aktualisieren wir den Vertex-Shader, um die Farbe jedes Vertices, unter Berücksichtigung des Umgebungslichts und dem Effekt des gerichteten Lichts (sowie dessen Winkel mit dem es auf die Oberfläche trifft), einzustellen. Wir werden sehen, wie genau wir das machen, wenn wir einen Blick auf den Code für den Shader werfen.

+ +

Die Normalen für die Vertices erstellen

+ +

Als Erstes müssen wir einen Array für die Normalen für alle Vertices erstellen, die unseren Würfel umfassen. Da ein Würfel ein sehr einfaches Objekt ist, ist dies auch sehr einfach zu erstellen. Für komplexere Objekte wird das Berechnen der Normalen schon umfassender.

+ +
  cubeVerticesNormalBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesNormalBuffer);
+
+  var vertexNormals = [
+    // vorne
+     0.0,  0.0,  1.0,
+     0.0,  0.0,  1.0,
+     0.0,  0.0,  1.0,
+     0.0,  0.0,  1.0,
+
+    // hinten
+     0.0,  0.0, -1.0,
+     0.0,  0.0, -1.0,
+     0.0,  0.0, -1.0,
+     0.0,  0.0, -1.0,
+
+    // oben
+     0.0,  1.0,  0.0,
+     0.0,  1.0,  0.0,
+     0.0,  1.0,  0.0,
+     0.0,  1.0,  0.0,
+
+    // unten
+     0.0, -1.0,  0.0,
+     0.0, -1.0,  0.0,
+     0.0, -1.0,  0.0,
+     0.0, -1.0,  0.0,
+
+    // rechts
+     1.0,  0.0,  0.0,
+     1.0,  0.0,  0.0,
+     1.0,  0.0,  0.0,
+     1.0,  0.0,  0.0,
+
+    // links
+    -1.0,  0.0,  0.0,
+    -1.0,  0.0,  0.0,
+    -1.0,  0.0,  0.0,
+    -1.0,  0.0,  0.0
+  ];
+
+  gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(vertexNormals), gl.STATIC_DRAW);
+
+ +

Das sollte Ihnen schon bekannt vorkommen: Wir erstellen einen neuen Buffer, verknüpfen den Array damit und senden dann unseren Vertex-Normalen-Array in den Buffer, indem wir bufferData() aufrufen.

+ +

Dann fügen wir Code zu drawScene() hinzu, um das Normalen-Array mit einem Shader-Attribut zu verknüpfen, sodass der Shader-Code darauf zugreifen kann:

+ +
  gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesNormalBuffer);
+  gl.vertexAttribPointer(vertexNormalAttribute, 3, gl.FLOAT, false, 0, 0);
+
+ +

Schließlich müssen wir den Code aktualisieren, welcher die Einheitsmatrizen erstellt, um eine Normalenmatrix zu generieren und zum Shader auszuliefern. Diese wird verwendet, um die Normalen umzuwandeln, wenn die aktuelle Orientierung des Würfels in Beziehung zur Lichtquelle behandelt wird:

+ +
  var normalMatrix = mvMatrix.inverse();
+  normalMatrix = normalMatrix.transpose();
+  var nUniform = gl.getUniformLocation(shaderProgram, "uNormalMatrix");
+  gl.uniformMatrix4fv(nUniform, false, new WebGLFloatArray(normalMatrix.flatten()));
+
+ +

Die Shader aktualisieren

+ +

Jetzt sind alle Daten, die von den Shadern gebraucht werden, verfügbar. Wir müssen nun den Code in den Shadern selbst aktualisieren.

+ +

Der Vertex-Shader

+ +

Zunächst aktualisieren wir den Vertex-Shader, sodass dieser einen Schattenwert für jeden Vertex auf Basis des Umgebungslichts sowie des direktionalen Lichts berechnet. Werfen wir einen Blick auf den Code:

+ +
    <script id="shader-vs" type="x-shader/x-vertex">
+      attribute vec3 aVertexNormal;
+      attribute vec3 aVertexPosition;
+      attribute vec2 aTextureCoord;
+
+      uniform mat4 uNormalMatrix;
+      uniform mat4 uMVMatrix;
+      uniform mat4 uPMatrix;
+
+      varying vec2 vTextureCoord;
+      varying vec3 vLighting;
+
+      void main(void) {
+        gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
+        vTextureCoord = aTextureCoord;
+
+        // Beleuchtungseffekt anwenden
+
+        vec3 ambientLight = vec3(0.6, 0.6, 0.6);
+        vec3 directionalLightColor = vec3(0.5, 0.5, 0.75);
+        vec3 directionalVector = vec3(0.85, 0.8, 0.75);
+
+        vec4 transformedNormal = uNormalMatrix * vec4(aVertexNormal, 1.0);
+
+        float directional = max(dot(transformedNormal.xyz, directionalVector), 0.0);
+        vLighting = ambientLight + (directionalLightColor * directional);
+      }
+    </script>
+
+ +

Sobald die Position des Vertex berechnet wurde und wir die Koordinaten des Texels (welcher passend zum Vertex ist) erhalten haben, können wir den Schatten für den Vertex berechnen.

+ +

Als Erstes wandeln wir die Normale auf Basis der aktuellen Position und Orientierung des Würfels um, indem wir die Normale des Vertexes mit der Normalenmatrix multiplizieren. Dann können wir den Betrag an direktionalem Licht, welcher auf den Vertex angewendet werden soll, berechnen, indem wir das Skalarprodukt der umgewandelten Normalen und des direktionalen Vektors (Richtung aus der das Licht kommt) bilden. Wenn dieser Wert kleiner als Null ist, setzen wir den Wert auf Null fest, da man nicht weniger als Null Licht haben kann.

+ +

Wenn der Betrag des direktionalen Lichts berechnet wurde, können wir den Beleuchtungswert generieren, indem wir das Umgebungslicht nehmen und das Produkt der Farbe des direktionalen Lichts und den Betrag an direktionalem Licht bereitstellen. Als Ergebnis haben wir nun einen RGB-Wert, welcher vom Fragment-Shader verwendet wird, um die Farbe jedes Pixels den wir rendern einzustellen.

+ +

Der Fragment-Shader

+ +

Der Fragment-Shader muss nun aktualisiert werden, um den berechneten Beleuchtungswert vom Vertex-Shader zu berücksichtigen:

+ +
    <script id="shader-fs" type="x-shader/x-fragment">
+      varying vec2 vTextureCoord;
+      varying vec3 vLighting;
+
+      uniform sampler2D uSampler;
+
+      void main(void) {
+        vec4 texelColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
+
+        gl_FragColor = vec4(texelColor.rgb * vLighting, texelColor.a);
+      }
+    </script>
+
+ +

Hier erhalten wir nun die Farbe des Texels, genau so wie wir es im vorherigen Beispiel getan haben. Bevor wir die Farbe der Fragmente aber festlegen, multiplizieren wir die Texel-Farbe mit dem Beleuchtungswert, um die Texel-Farbe so einzustellen, dass diese den Effekt der Lichtquelle berücksichtigt.

+ +

Und das war's! Wenn Sie einen Browser verwenden, der WebGL unterstützt, können Sie einen Blick auf die Live-Demo werfen.

+ +

Übungen für den Leser

+ +

Dies ist natürlich ein sehr einfaches Beispiel, welches eine Beleuchtung pro Vertex implementiert. Für fortgeschrittene Grafiken, möchten Sie sicher eine Beleuchtung pro Pixel implementieren, aber dies wird Sie in die Richtung leiten.

+ +

Sie können nun also versuchen mit der Richtung der Lichtquelle zu experimentieren, die Farbe der Leuchtquelle zu ändern und so weiter.

+ +

{{PreviousNext("Web/API/WebGL_API/Tutorial/Texturen_in_WebGL_verwenden", "Web/API/WebGL_API/Tutorial/Animierte_Texturen_in_WebGL")}}

diff --git a/files/de/web/api/webgl_api/tutorial/objekte_mit_webgl_animieren/index.html b/files/de/web/api/webgl_api/tutorial/objekte_mit_webgl_animieren/index.html deleted file mode 100644 index a9eafed6db..0000000000 --- a/files/de/web/api/webgl_api/tutorial/objekte_mit_webgl_animieren/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Objekte mit WebGL animieren -slug: Web/API/WebGL_API/Tutorial/Objekte_mit_WebGL_animieren -tags: - - Tutorial - - WebGL -translation_of: Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL ---- -

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen", "Web/API/WebGL_API/Tutorial/3D-Objekte_mit_WebGL_erstellen") }}

- -

Unser Code vom vorherigen Beispiel ist bereits so konfiguriert, dass die WebGL-Szene alle 15 Millisekunden neu gezeichnet wird. Bis jetzt wird zu jeder Zeit das gleiche Bild immer neu gezeichnet. Das wollen wir nun ändern, sodass sich unser Quadrat auf der Bildfläche bewegt.

- -

In diesem Beispiel rotieren und verschieben wir unser Quadrat in alle drei Dimensionen, sodass es schon in einem 3D Raum existieren kann (obwohl wir bisher nur ein 2D-Objekt erstellt haben).

- -

Das Quadrat rotieren lassen

- -

Fangen wir damit an, das Quadrat im Raum zu rotieren. Als erstes brauchen wir dazu eine Variable in welche wir die Rotation des Quadrats verfolgen können:

- -
var squareRotation = 0.0;
-
- -

Jetzt müssen wir die drawScene() Funktion ändern, um die aktuelle Rotation auf das Quadrat anzuwenden, wenn dies gezeichnet werden soll. Nach der Umrechnung der Startposition für das Quadrat, wenden wir eine Rotation wie diese an:

- -
mvPushMatrix();
-mvRotate(squareRotation, [1, 0, 1]);
-
- -

Das speichert die aktuelle Model-View Matrix und rotiert die Matrix mit dem aktuellen Wert von squareRotation um die X und Z Achsen.

- -

Nach dem Zeichen müssen wir die Originalmatrix wiederherstellen:

- -
mvPopMatrix();
-
- -

Wir speichern und stellen die Originalmatrix dann wieder her, um zu verhindern, dass die Rotation auf andere Objekte angewendet wird, die wir vielleicht später noch zeichnen wollen.

- -

Um letztendlich etwas zu animieren, brauchen wir noch ein paar Zeilen Code, welcher den Wert von squareRotation über die Zeit verändert. Dafür erstellen wir eine neue Variable, die die Zeit aufzeichnet, welche wir zuletzt animiert haben (wir nennen diese lastSquareUpdateTime), dann fügen wir den folgenden Code an das Ende der drawScene() Funktion:

- -
var currentTime = (new Date).getTime();
-if (lastSquareUpdateTime) {
-  var delta = currentTime - lastSquareUpdateTime;
-  squareRotation += (30 * delta) / 1000.0;
-}
-lastSquareUpdateTime = currentTime;
-
- -

Dieser Code benutzt den Betrag der Zeit, die vergangen ist, seitdem wir zum letzten Mal den Wert von squareRotation geändert haben, um festzustellen wie weit das Quadrat rotiert werden soll.

- -

Das Quadrat bewegen

- -

Wir können das Quadrat auch verschieben indem wir eine unterschiedliche Position berechnen lassen, bevor wir es zeichnen. Dieses Beispiel zeigt wie eine grundlegende Animation gemacht werden kann. Allerdings möchten Sie in einer echten Anwendung wohl eher etwas weniger Irrsinniges machen.

- -

Verfolgen wir die Abstände zu jeder Achse für unsere Verschiebung in drei neuen Variablen:

- -
var squareXOffset = 0.0;
-var squareYOffset = 0.0;
-var squareZOffset = 0.0;
-
- -

Und den Betrag, welcher unsere Postion auf jeder Achse verändern soll, in diesen Variablen:

- -
var xIncValue = 0.2;
-var yIncValue = -0.4;
-var zIncValue = 0.3;
-
- -

Nun können wir einfach diesen Code zum vorherigen Code, der die Rotation aktualisiert, hinzufügen:

- -
squareXOffset += xIncValue * ((30 * delta) / 1000.0);
-squareYOffset += yIncValue * ((30 * delta) / 1000.0);
-squareZOffset += zIncValue * ((30 * delta) / 1000.0);
-
-if (Math.abs(squareYOffset) > 2.5) {
-  xIncValue = -xIncValue;
-  yIncValue = -yIncValue;
-  zIncValue = -zIncValue;
-}
-
- -

Das bringt unser Quadrat dazu seine Größe zu verändern, sich willkürlich auf der Fläche zu verschieben, sich vom Betrachter weg und zum Betrachter hin zu bewegen und das alles während das Quadrat auch noch rotiert. Das sieht dann schon eher wie ein Bildschirmschoner aus.

- -

Wenn Ihr Browser WebGL unterstützt, ist hier das Beispiel in Aktion.

- -

Weitere Matrixoperationen

- -

Dieses Beispiel verwendet einige zusätzliche Matrixoperationen, darunter zwei Routinen, die die Matrizen verschieben, wiederherstellen und in einem Stack aufbewahren und eine Routine, die die Matrix um eine gewissen Anzahl von Grad rotiert:

- -
var mvMatrixStack = [];
-
-function mvPushMatrix(m) {
-  if (m) {
-    mvMatrixStack.push(m.dup());
-    mvMatrix = m.dup();
-  } else {
-    mvMatrixStack.push(mvMatrix.dup());
-  }
-}
-
-function mvPopMatrix() {
-  if (!mvMatrixStack.length) {
-    throw("Can't pop from an empty matrix stack.");
-  }
-
-  mvMatrix = mvMatrixStack.pop();
-  return mvMatrix;
-}
-
-function mvRotate(angle, v) {
-  var inRadians = angle * Math.PI / 180.0;
-
-  var m = Matrix.Rotation(inRadians, $V([v[0], v[1], v[2]])).ensure4x4();
-  multMatrix(m);
-}
-
- -

Diese Routinen wurden von einem Beispiel ausgeliehen, welches von Vlad Vukićević geschrieben wurde.

- -

{{PreviousNext("Web/API/WebGL_API/Tutorial/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen", "Web/API/WebGL_API/Tutorial/3D-Objekte_mit_WebGL_erstellen") }}

diff --git a/files/de/web/api/webgl_api/tutorial/texturen_in_webgl_verwenden/index.html b/files/de/web/api/webgl_api/tutorial/texturen_in_webgl_verwenden/index.html deleted file mode 100644 index eb59417694..0000000000 --- a/files/de/web/api/webgl_api/tutorial/texturen_in_webgl_verwenden/index.html +++ /dev/null @@ -1,159 +0,0 @@ ---- -title: Texturen in WebGL verwenden -slug: Web/API/WebGL_API/Tutorial/Texturen_in_WebGL_verwenden -tags: - - Tutorial - - WebGL -translation_of: Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL ---- -

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/3D-Objekte_mit_WebGL_erstellen", "Web/API/WebGL_API/Tutorial/Beleuchtung_in_WebGL")}}

- -

Jetzt wo unser Beispielprogramm über einen rotierenden 3D-Würfel verfügt, wollen wir darauf eine Textur legen, statt der bisher verwendeten, einfachen Farben.

- -

Texturen laden

- -

Als Erstes müssen wir ein paar Zeilen Code hinzufügen, um die Texturen zu laden. In unserem Fall werden wir eine einzige Textur verwenden, die auf alle sechs Seiten des rotierenden Würfels gelegt wird, aber die gleiche Technik kann verwendet werden, um jede beliebig viele Texturen auf ein Objekt zu legen.

- -

Der Code, der die Textur lädt, sieht so aus:

- -
function initTextures() {
-  gl.enable(gl.TEXTURE_2D);
-  cubeTexture = gl.createTexture();
-  cubeImage = new Image();
-  cubeImage.onload = function() { handleTextureLoaded(cubeImage, cubeTexture); }
-  cubeImage.src = "cubetexture.png";
-}
-
-function handleTextureLoaded(image, texture) {
-  gl.bindTexture(gl.TEXTURE_2D, texture);
-  gl.texImage2D(gl.TEXTURE_2D, 0, image, true);
-  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
-  gl.generateMipmap(gl.TEXTURE_2D);
-  gl.bindTexture(gl.TEXTURE_2D, null);
-}
-
- -

Die Routine initTextures() aktiviert zunächst die Unterstützung von Texturen, dann wird das GL Textur-Objekt cubeTexture durch Aufruf der GL createTexture() Funktion erstellt. Um die Textur von der Bilddatei zu laden, wird dann ein Image-Objekt erstellt und in die Grafikdatei geladen, die wir als unsere Textur verwenden wollen. Die handleTextureLoaded() Callback-Routine wird ausgeführt, wenn das Bild geladen wurde.

- -

Um schließlich die Textur zu erstellen, legen wir fest, dass die neue Textur die aktuelle Textur ist, mit welcher wir arbeiten wollen und verbinden diese mit gl.TEXTURE_2D. Danach wird das geladene Bild mit texImage2D() die Bilddaten in die Textur schreiben.

- -

Die nächsten zwei Zeilen legen Filter für die Textur fest, die steuern, wie das Bild gefiltert wird, wenn es skaliert wird. In diesem Fall verwenden wir lineare Filter, wenn das Bild hoch skaliert wird und Mip-Mapping wenn wir herunter skalieren. Dann wird die Mip-Map generiert, indem generateMipMap() aufgerufen wird. Schließlich teilen wir WebGL mit, dass wir mit der Arbeit an der Textur fertig sind, in dem wir null mit gl.TEXTURE_2D verknüpfen.

- -

Textur auf die Flächen legen

- -

Nun ist die Textur geladen und bereit eingesetzt zu werden. Bevor wir die Textur aber verwenden können, müssen wir die Texturkoordinaten auf die Vertices der Flächen des Würfels legen. Das ersetzt den vorherigen Code in initBuffers(), der die Farben für jede Fläche festgelegt hat.

- -
  cubeVerticesTextureCoordBuffer = gl.createBuffer();
-  gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesTextureCoordBuffer);
-
-  var textureCoordinates = [
-    // vorne
-    0.0,  0.0,
-    1.0,  0.0,
-    1.0,  1.0,
-    0.0,  1.0,
-    // hinten
-    0.0,  0.0,
-    1.0,  0.0,
-    1.0,  1.0,
-    0.0,  1.0,
-    // oben
-    0.0,  0.0,
-    1.0,  0.0,
-    1.0,  1.0,
-    0.0,  1.0,
-    // unten
-    0.0,  0.0,
-    1.0,  0.0,
-    1.0,  1.0,
-    0.0,  1.0,
-    // rechts
-    0.0,  0.0,
-    1.0,  0.0,
-    1.0,  1.0,
-    0.0,  1.0,
-    // links
-    0.0,  0.0,
-    1.0,  0.0,
-    1.0,  1.0,
-    0.0,  1.0
-  ];
-
-  gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(textureCoordinates),
-                gl.STATIC_DRAW);
-
- -

Zuerst erstellt dieser Code einen GL-Buffer in welchen wir die Texturkoordinaten für jede Fläche speichern werden, dann verknüpfen wir diesen Buffer als das Array in welchen wir schreiben werden.

- -

Das textureCoordinates Array definiert die Texturkoordinaten entsprechend jedem Vertex von jeder Fläche. Beachten Sie, dass die Texturkoordinaten sich im Bereich von 0.0 bis 1.0 befinden. Beim Texturmapping werden die Dimensionen von Texturen immer auf einen Bereich von 0.0 bis 1.0 normiert, egal welche Größe die Textur wirklich hat.

- -

Sobald wir das Texturmapping-Array erstellt haben, speichern wir das Array in den Buffer, sodass GL die Daten zur Verfügung hat.

- -

Die Shader aktualisieren

- -

Das Shader-Programm - und der Code, der die Shader initialisiert - muss aktualisiert werden, damit die Textur anstatt der Farben verwendet wird.

- -

Werfen wir zunächst einen Blick auf die einfache Änderung, die in initShaders() benötigt wird:

- -
  textureCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextureCoord");
-  gl.enableVertexAttribArray(textureCoordAttribute);
-
- -

Das ersetzt den Code, der die Vertex Farbattribute enthielt, mit dem, der nun die Texturkoordinaten für jeden Vertex enthält.

- -

Der Vertex-Shader

- -

Als Nächstes müssen wir den Vertex-Shader ersetzen, sodass statt der Farbdaten die Texturkoordinaten abgerufen werden.

- -
    <script id="shader-vs" type="x-shader/x-vertex">
-      attribute vec3 aVertexPosition;
-      attribute vec2 aTextureCoord;
-
-      uniform mat4 uMVMatrix;
-      uniform mat4 uPMatrix;
-
-      varying vec2 vTextureCoord;
-
-      void main(void) {
-        gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
-        vTextureCoord = aTextureCoord;
-      }
-    </script>
-
- -

Die wichtigste Änderung ist hier, dass anstatt die Vertex-Farbe abzurufen, die Texturkoordinaten gesetzt werden. Das gibt den Ort der Textur entsprechend zum Vertex an.

- -

Der Fragment-Shader

- -

Der Fragment-Shader muss in ähnlicher Weise geändert werden:

- -
    <script id="shader-fs" type="x-shader/x-fragment">
-      varying vec2 vTextureCoord;
-
-      uniform sampler2D uSampler;
-
-      void main(void) {
-        gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
-      }
-    </script>
-
- -

Anstatt einen Farbwert auf die Fragment-Farbe zu legen, wird die Fragment-Farbe berechnet in dem der texel (der Pixel innerhalb der Textur) abgerufen wird, der am Besten auf die Fragement-Position laut dem Sampler passt.

- -

Zeichnen des textuierten Würfels

- -

Die Änderungen an der drawScene() Funktion sind einfach (mit der Ausnahme, dass ich nun zur besseren Anschaulichkeit die Verschiebungen entfernt habe und der Würfel nur noch rotiert wird).

- -

Der Code, der die Farben auf die Textur legt ist weg und wurde ersetzt:

- -
  gl.activeTexture(gl.TEXTURE0);
-  gl.bindTexture(gl.TEXTURE_2D, cubeTexture);
-  gl.uniform1i(gl.getUniformLocation(shaderProgram, "uSampler"), 0);
-
- -

GL ermöglicht 32 Textur-Register; der Erste davon ist gl.TEXTURE0. Wir verknüpfen unsere geladene Textur zu diesem Register, dann wird der Shader-Sampler uSampler gesetzt (im Shader-Program festgelegt), um die Textur zu benutzen.

- -

Jetzt sollte der rotierende Würfel gut anzuschauen zu sein. Wenn Ihr Browser WebGL unterstützt, können Sie das Live-Beispiel ausprobieren.

- -

{{PreviousNext("Web/API/WebGL_API/Tutorial/3D-Objekte_mit_WebGL_erstellen", "Web/API/WebGL_API/Tutorial/Beleuchtung_in_WebGL")}}

diff --git a/files/de/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html b/files/de/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html new file mode 100644 index 0000000000..94068822d5 --- /dev/null +++ b/files/de/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html @@ -0,0 +1,97 @@ +--- +title: Farben mittels Shader in einen WebGL-Kontext hinzufügen +slug: >- + Web/API/WebGL_API/Tutorial/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen +tags: + - Tutorial + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL +--- +

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext", "Web/API/WebGL_API/Tutorial/Objekte_mit_WebGL_animieren")}}

+ +

Wir haben ein simples Quadrat im vorherigen Teil erstellt, im nächsten Schritt wollen wir ein bisschen Farbe ins Spiel bringen. Dafür sind Änderungen an den Shadern erforderlich.

+ +

Farben zu den Eckpunkten hinzufügen

+ +

In der Computergrafik werden Objekte mit einer Reihe von Punkten erstellt. Jeder Punkt hat eine Position und eine Farbe. Standardmäßig werden alle anderen Pixelfarben (und alle weiteren Attribute, darunter die Position) über eine lineare Interpolation berechnet, die automatisch glatte Verläufe erstellt. Vorher hat unser Vertex-Shader keine festgelegten Farben auf die Punkte (Vertices) angewendet und der Fragment-Shader legte die feste Farbe weiß für jeden Pixel fest, sodass das gesamte Quadrat komplett weiß gezeichnet wurde.

+ +

Nun wollen wir in jeder Ecke des Quadrats einen Verlauf in einer unterschiedlichen Farbe rendern: rot, blau, grün und weiß. Als erstes sollten wir daher diese Farben in den vier Eckpunkten einrichten. Um das zu machen, müssen wir zunächst einen Array der Vertex-Farben erstellen und diesen dann in einen WebGL Buffer speichern. Das erreichen wir durch die folgenden Zeilen in unserer initBuffers() Funktion:

+ +
var colors = [
+  1.0,  1.0,  1.0,  1.0,    // weiß
+  1.0,  0.0,  0.0,  1.0,    // rot
+  0.0,  1.0,  0.0,  1.0,    // grün
+  0.0,  0.0,  1.0,  1.0     // blau
+];
+
+squareVerticesColorBuffer = gl.createBuffer();
+gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesColorBuffer);
+gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
+}
+
+ +

Dieser Code definiert zuerst einen JavaScript Array, welcher die vier Farb-Vektoren mit jeweils vier Werten für die jeweilige Farbe enthält. Dann wird ein neuer WebGL Buffer angewiesen diese Farben zu speichern und der Array wird in WebGL Floats konvertiert und im Buffer gespeichert.

+ +

Um die Farben schließlich zu verwenden, muss der der Vertex-Shader aktualisiert werden, um die entsprechende Farbe vom Farb-Buffer zu erhalten:

+ +
<script id="shader-vs" type="x-shader/x-vertex">
+  attribute vec3 aVertexPosition;
+  attribute vec4 aVertexColor;
+
+  uniform mat4 uMVMatrix;
+  uniform mat4 uPMatrix;
+
+  varying vec4 vColor;
+
+  void main(void) {
+    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
+    vColor = aVertexColor;
+  }
+</script>
+
+ +

Der wichtigste Unterschied ist hier, dass wir für jeden Punkt (Vertex) die Farbe entsprechend des Farb-Arrays setzen.

+ +

Die Fragmente mit Farben versehen

+ +

Als Erinnerung, so sah unser Fragment-Shader vorher aus:

+ +
<script id="shader-fs" type="x-shader/x-fragment">
+  void main(void) {
+    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
+  }
+</script>
+
+ +

Um nun die interpolierte Farbe für jeden Pixel aufzugreifen, müssen wir dies einfach so ändern, dass wir den Wert der vColor Variable erhalten:

+ +
<script id="shader-fs" type="x-shader/x-fragment">
+  varying vec4 vColor;
+
+  void main(void) {
+    gl_FragColor = vColor;
+  }
+</script>
+
+ +

Das ist eine sehr einfache Änderung. Anstatt des festen Wertes vorher, erhält jedes Fragment jetzt einfach die interpolierte Farbe, basierend auf der Position relativ zu den Kontenpunkten (Vertices).

+ +

Mit den Farben zeichnen

+ +

Als nächstes ist es nötig, Code zur initShaders() Routine hinzuzufügen, um das Farbattribut für das Shader-Programm zu initialisieren:

+ +
  vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor");
+  gl.enableVertexAttribArray(vertexColorAttribute);
+
+ +

Dann wird drawScene() abgeändert, um schließlich die Farben zu verwenden, wenn das Quadrat gezeichnet wird:

+ +
  gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesColorBuffer);
+  gl.vertexAttribPointer(vertexColorAttribute, 4, gl.FLOAT, false, 0, 0);
+
+ +

Jetzt sollten Sie das Beispiel in einem WebGL kompatiblen Browser sehen und Ihre Ausgabe sollte so wie im Bild unten gezeichnet werden (das Quadrat ist innerhalb eines schwarzen Felds zu sehen):

+ +

screenshot.png

+ +

{{PreviousNext("Web/API/WebGL_API/Tutorial/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext", "Web/API/WebGL_API/Tutorial/Objekte_mit_WebGL_animieren")}}

diff --git a/files/de/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html b/files/de/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html new file mode 100644 index 0000000000..eb59417694 --- /dev/null +++ b/files/de/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html @@ -0,0 +1,159 @@ +--- +title: Texturen in WebGL verwenden +slug: Web/API/WebGL_API/Tutorial/Texturen_in_WebGL_verwenden +tags: + - Tutorial + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL +--- +

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/3D-Objekte_mit_WebGL_erstellen", "Web/API/WebGL_API/Tutorial/Beleuchtung_in_WebGL")}}

+ +

Jetzt wo unser Beispielprogramm über einen rotierenden 3D-Würfel verfügt, wollen wir darauf eine Textur legen, statt der bisher verwendeten, einfachen Farben.

+ +

Texturen laden

+ +

Als Erstes müssen wir ein paar Zeilen Code hinzufügen, um die Texturen zu laden. In unserem Fall werden wir eine einzige Textur verwenden, die auf alle sechs Seiten des rotierenden Würfels gelegt wird, aber die gleiche Technik kann verwendet werden, um jede beliebig viele Texturen auf ein Objekt zu legen.

+ +

Der Code, der die Textur lädt, sieht so aus:

+ +
function initTextures() {
+  gl.enable(gl.TEXTURE_2D);
+  cubeTexture = gl.createTexture();
+  cubeImage = new Image();
+  cubeImage.onload = function() { handleTextureLoaded(cubeImage, cubeTexture); }
+  cubeImage.src = "cubetexture.png";
+}
+
+function handleTextureLoaded(image, texture) {
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+  gl.texImage2D(gl.TEXTURE_2D, 0, image, true);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
+  gl.generateMipmap(gl.TEXTURE_2D);
+  gl.bindTexture(gl.TEXTURE_2D, null);
+}
+
+ +

Die Routine initTextures() aktiviert zunächst die Unterstützung von Texturen, dann wird das GL Textur-Objekt cubeTexture durch Aufruf der GL createTexture() Funktion erstellt. Um die Textur von der Bilddatei zu laden, wird dann ein Image-Objekt erstellt und in die Grafikdatei geladen, die wir als unsere Textur verwenden wollen. Die handleTextureLoaded() Callback-Routine wird ausgeführt, wenn das Bild geladen wurde.

+ +

Um schließlich die Textur zu erstellen, legen wir fest, dass die neue Textur die aktuelle Textur ist, mit welcher wir arbeiten wollen und verbinden diese mit gl.TEXTURE_2D. Danach wird das geladene Bild mit texImage2D() die Bilddaten in die Textur schreiben.

+ +

Die nächsten zwei Zeilen legen Filter für die Textur fest, die steuern, wie das Bild gefiltert wird, wenn es skaliert wird. In diesem Fall verwenden wir lineare Filter, wenn das Bild hoch skaliert wird und Mip-Mapping wenn wir herunter skalieren. Dann wird die Mip-Map generiert, indem generateMipMap() aufgerufen wird. Schließlich teilen wir WebGL mit, dass wir mit der Arbeit an der Textur fertig sind, in dem wir null mit gl.TEXTURE_2D verknüpfen.

+ +

Textur auf die Flächen legen

+ +

Nun ist die Textur geladen und bereit eingesetzt zu werden. Bevor wir die Textur aber verwenden können, müssen wir die Texturkoordinaten auf die Vertices der Flächen des Würfels legen. Das ersetzt den vorherigen Code in initBuffers(), der die Farben für jede Fläche festgelegt hat.

+ +
  cubeVerticesTextureCoordBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesTextureCoordBuffer);
+
+  var textureCoordinates = [
+    // vorne
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // hinten
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // oben
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // unten
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // rechts
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // links
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0
+  ];
+
+  gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(textureCoordinates),
+                gl.STATIC_DRAW);
+
+ +

Zuerst erstellt dieser Code einen GL-Buffer in welchen wir die Texturkoordinaten für jede Fläche speichern werden, dann verknüpfen wir diesen Buffer als das Array in welchen wir schreiben werden.

+ +

Das textureCoordinates Array definiert die Texturkoordinaten entsprechend jedem Vertex von jeder Fläche. Beachten Sie, dass die Texturkoordinaten sich im Bereich von 0.0 bis 1.0 befinden. Beim Texturmapping werden die Dimensionen von Texturen immer auf einen Bereich von 0.0 bis 1.0 normiert, egal welche Größe die Textur wirklich hat.

+ +

Sobald wir das Texturmapping-Array erstellt haben, speichern wir das Array in den Buffer, sodass GL die Daten zur Verfügung hat.

+ +

Die Shader aktualisieren

+ +

Das Shader-Programm - und der Code, der die Shader initialisiert - muss aktualisiert werden, damit die Textur anstatt der Farben verwendet wird.

+ +

Werfen wir zunächst einen Blick auf die einfache Änderung, die in initShaders() benötigt wird:

+ +
  textureCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextureCoord");
+  gl.enableVertexAttribArray(textureCoordAttribute);
+
+ +

Das ersetzt den Code, der die Vertex Farbattribute enthielt, mit dem, der nun die Texturkoordinaten für jeden Vertex enthält.

+ +

Der Vertex-Shader

+ +

Als Nächstes müssen wir den Vertex-Shader ersetzen, sodass statt der Farbdaten die Texturkoordinaten abgerufen werden.

+ +
    <script id="shader-vs" type="x-shader/x-vertex">
+      attribute vec3 aVertexPosition;
+      attribute vec2 aTextureCoord;
+
+      uniform mat4 uMVMatrix;
+      uniform mat4 uPMatrix;
+
+      varying vec2 vTextureCoord;
+
+      void main(void) {
+        gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
+        vTextureCoord = aTextureCoord;
+      }
+    </script>
+
+ +

Die wichtigste Änderung ist hier, dass anstatt die Vertex-Farbe abzurufen, die Texturkoordinaten gesetzt werden. Das gibt den Ort der Textur entsprechend zum Vertex an.

+ +

Der Fragment-Shader

+ +

Der Fragment-Shader muss in ähnlicher Weise geändert werden:

+ +
    <script id="shader-fs" type="x-shader/x-fragment">
+      varying vec2 vTextureCoord;
+
+      uniform sampler2D uSampler;
+
+      void main(void) {
+        gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
+      }
+    </script>
+
+ +

Anstatt einen Farbwert auf die Fragment-Farbe zu legen, wird die Fragment-Farbe berechnet in dem der texel (der Pixel innerhalb der Textur) abgerufen wird, der am Besten auf die Fragement-Position laut dem Sampler passt.

+ +

Zeichnen des textuierten Würfels

+ +

Die Änderungen an der drawScene() Funktion sind einfach (mit der Ausnahme, dass ich nun zur besseren Anschaulichkeit die Verschiebungen entfernt habe und der Würfel nur noch rotiert wird).

+ +

Der Code, der die Farben auf die Textur legt ist weg und wurde ersetzt:

+ +
  gl.activeTexture(gl.TEXTURE0);
+  gl.bindTexture(gl.TEXTURE_2D, cubeTexture);
+  gl.uniform1i(gl.getUniformLocation(shaderProgram, "uSampler"), 0);
+
+ +

GL ermöglicht 32 Textur-Register; der Erste davon ist gl.TEXTURE0. Wir verknüpfen unsere geladene Textur zu diesem Register, dann wird der Shader-Sampler uSampler gesetzt (im Shader-Program festgelegt), um die Textur zu benutzen.

+ +

Jetzt sollte der rotierende Würfel gut anzuschauen zu sein. Wenn Ihr Browser WebGL unterstützt, können Sie das Live-Beispiel ausprobieren.

+ +

{{PreviousNext("Web/API/WebGL_API/Tutorial/3D-Objekte_mit_WebGL_erstellen", "Web/API/WebGL_API/Tutorial/Beleuchtung_in_WebGL")}}

diff --git a/files/de/web/api/websockets_api/index.html b/files/de/web/api/websockets_api/index.html new file mode 100644 index 0000000000..1e3cefa7d9 --- /dev/null +++ b/files/de/web/api/websockets_api/index.html @@ -0,0 +1,193 @@ +--- +title: WebSockets +slug: WebSockets +tags: + - Referenz + - WebSockets +translation_of: Web/API/WebSockets_API +--- +

WebSockets ist eine fortschrittliche Technologie welche es möglich macht eine interaktive Kommunikations-Session zwischen dem Browser des Benutzers und dem Server herzustellen. Mit dieser API können Sie Nachrichten zum Server senden und ereignisorientierte Antworten erhalten ohne beim Server die Antwort abzufragen.

+ +
+
+

Dokumentation

+ +
+
Websocket Client-Anwendungen schreiben
+
Eine Anleitung um WebSocket-Clients im Browser laufen zu lassen.
+
WebSockets Referenz
+
Eine Referenz für die Client-seitige WebSocket API.
+
Websocket-Server schreiben (Benötigt Inhalt)
+
Eine Anleitung zum schreiben von Server-seitigem Code um das WebSocket-Protokoll zu handhaben.
+
+ +

Alle zeigen...

+
+ +
+

Tools

+ + + + + + +
+
+ +

Siehe auch

+ + + +

Browser-Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Version -76  {{obsolete_inline}}6{{CompatGeckoDesktop("2.0")}}{{CompatNo}}11.00 (disabled)5.0.1
Protokol-Version 7 {{obsolete_inline}}{{CompatNo}}{{CompatGeckoDesktop("6.0")}}
+ {{property_prefix("Moz")}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}
Protokol-Version 10 {{obsolete_inline}}14{{CompatGeckoDesktop("7.0")}}
+ {{property_prefix("Moz")}}		HTML5 Labs{{CompatUnknown}}{{CompatUnknown}}
Standard - RFC 6455 Support16{{CompatGeckoDesktop("11.0")}}1012.106.0
Benutzbarkeit in Workern{{CompatVersionUnknown}}{{CompatGeckoDesktop("37.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Version -76
+ {{obsolete_inline}}		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Protokol-Version 7
+ {{obsolete_inline}}		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Protokol-Version 8 (IETF-Entwurf 10) {{obsolete_inline}}{{CompatUnknown}}{{CompatGeckoMobile("7.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Standard - RFC 6455 Support4.4{{CompatGeckoDesktop("11.0")}}{{CompatUnknown}}12.106.0
Benutzbarkeit in Workern{{CompatVersionUnknown}}{{CompatGeckoMobile("37.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Hinweise zu Gecko

+ +

Die WebSocket-Unterstützung in Firefox wird weiterhin die Entwicklungen in der entstehenden WebSocket-Spezifikation verfolgen. Firefox 6 implementiert Version 7 des darunterliegenden Protokolls, währen Firefox 7 Version 8 implementiert (lt. IETF-Vorlage 10). Firefox mobile erhielt in Version 7.0 unterstützung für WebSockets.

+ +

Gecko 6.0

+ +

Vor Gecko 6.0 {{geckoRelease("6.0")}} gab es, fälschlicherweise, ein WebSocket-Objekt. Mane Seiten schlossen daraus, dass WebSocket-Dienste keine Präfixe haben; dieses Objekt wurde mittlerweile zu MozWebSocket umbenannt.

+ +

Gecko 7.0

+ +

Beginnend mit Gecko 7.0 {{geckoRelease("7.0")}} wird die Einstellung network.websocket.max-connections genutzt, um die maximale Anzahl von WebSockets festzustellen, die gleichzeitig genutzt werden können. Der Standardwert ist 200.

+ +

Gecko 8.0

+ +

Beginnend mit Gecko 8.0 {{geckoRelease("8.0")}} wird die Deflate-Stream-Erweiterung des WebSocket-Protokolls abgeschaltet, da es von den Spezifikations-Vorlagen überholt wurde. Dies löst Inkompatibilitäten mit manchen Seiten.

+ +

Gecko 11.0

+ +

Vor Gecko 11.0 waren sowohl eingehende als auch ausgehende Nachrichten auf 16 MB begrenzt. Sie können jetzt bis zu 2 GB groß sein. Beachten Sie, dass Speicherbegrenzungen (insbesondere auf mobilen Geräten) ein theoretisches Maximum darstellen, jedoch kein praktisches. In Wirklichkeit werden Übertragungen dieser Größe auf Geräten, die nicht über genügend Speicher verfügen, fehlschlagen.

+ +

Zusätzlich wurde eine ArrayBuffer Sende- und Empfangsunterstützung für Binärdaten implementiert.

+ +

Ab Gecko 11.0 steht die WebSocket-API ohne Präfixe zur Verfügung.

diff --git a/files/de/web/api/websockets_api/writing_websocket_servers/index.html b/files/de/web/api/websockets_api/writing_websocket_servers/index.html new file mode 100644 index 0000000000..031a2b832a --- /dev/null +++ b/files/de/web/api/websockets_api/writing_websocket_servers/index.html @@ -0,0 +1,250 @@ +--- +title: Writing WebSocket servers +slug: WebSockets/Writing_WebSocket_servers +translation_of: Web/API/WebSockets_API/Writing_WebSocket_servers +--- +
{{APIRef("Websockets API")}}
+ +

Ein WebSocket-Server ist nichts anderes als eine Anwendung, die einen Port eines TCP-Servers überwacht, der einem bestimmten Protokoll folgt. Die Aufgabe, einen benutzerdefinierten Server zu erstellen, macht den Leuten Angst. Es kann jedoch unkompliziert sein, einen einfachen WebSocket-Server auf einer Plattform Ihrer Wahl zu implementieren.

+ +

Ein WebSocket-Server kann in jeder serverseitigen Programmiersprache geschrieben werden, die dazu in der Lage ist: Berkeley sockets, siehe auch C(++), Python, PHP, oder Serverseitiges JavaScript.

+ +

Dies ist kein Tutorial in einer bestimmten Sprache, sondern dient als Leitfaden, um das Schreiben Ihres eigenen Servers zu erleichtern.

+ +

In diesem Artikel wird davon ausgegangen, dass Sie bereits mit der Funktionsweise von {{Glossary ("HTTP")}} vertraut sind und über ein moderates Programmiererlebnis verfügen. Abhängig von der Sprachunterstützung sind möglicherweise Kenntnisse über TCP-Sockets erforderlich. In diesem Handbuch wird das Mindestwissen dargestellt, das Sie zum Schreiben eines WebSocket-Servers benötigen.

+ +
+

Notiz: Lesen Sie die neueste offizielle WebSockets-Spezifikation, RFC 6455. Die Abschnitte 1 und 4-7 sind für Server-Implementierer besonders interessant. In Abschnitt 10 wird die Sicherheit erläutert, und Sie sollten sie unbedingt lesen, bevor Sie Ihren Server verfügbar machen.

+
+ +

Ein WebSocket-Server wird hier auf sehr niedriger Ebene erklärt. WebSocket-Server sind häufig separate und spezialisierte Server (aus Gründen des Lastenausgleichs oder aus anderen praktischen Gründen). Daher verwenden Sie häufig einen Reverse-Proxy (z. B. einen normalen HTTP-Server), um WebSocket-Handshakes zu erkennen, vorzuverarbeiten und an diese Clients zu senden ein echter WebSocket-Server. Dies bedeutet, dass Sie Ihren Servercode nicht mit Cookie- und Authentifizierungshandlern (zum Beispiel) aufblähen müssen.

+ +

Der WebSocket-Handshake

+ +

Zunächst muss der Server mithilfe eines Standard-TCP-Sockets auf eingehende Socket-Verbindungen warten. Abhängig von Ihrer Plattform kann dies automatisch für Sie erledigt werden. Angenommen, Ihr Server überwacht example.com, Port 8000, und Ihr Socket-Server antwortet auf {{HTTPMethod ("GET")}} -Anfragen unter example.com/chat.

+ +
+

Warnung: Der Server überwacht möglicherweise jeden von ihm ausgewählten Port. Wenn er jedoch einen anderen Port als 80 oder 443 auswählt, kann es zu Problemen mit Firewalls und / oder Proxys kommen. Browser benötigen im Allgemeinen eine sichere Verbindung für WebSockets, obwohl sie möglicherweise eine Ausnahme für lokale Geräte bieten.

+
+ +

Der Handshake ist das "Web" in WebSockets. Es ist die Brücke von HTTP zu WebSockets. Beim Handshake werden Details der Verbindung ausgehandelt, und jede Partei kann vor Abschluss zurücktreten, wenn die Bedingungen ungünstig sind. Der Server muss darauf achten, alles zu verstehen, was der Client verlangt, da sonst Sicherheitsprobleme auftreten können.

+ +
+

Tipp: Die Anfrage-URL (/ Chat hier) hat in der Spezifikation keine definierte Bedeutung. Viele Benutzer verwenden es daher, damit ein Server mehrere WebSocket-Anwendungen verarbeiten kann. Zum Beispiel könnte example.com/chat eine Mehrbenutzer-Chat-App aufrufen, während /game auf demselben Server möglicherweise ein Multiplayer-Spiel aufruft.

+
+ +

Client handshake Anfrage

+ +

Auch wenn Sie einen Server erstellen, muss ein Client den WebSocket-Handshake-Prozess starten, indem er den Server kontaktiert und eine WebSocket-Verbindung anfordert. Sie müssen also wissen, wie Sie die Anfrage des Kunden interpretieren. Der Client sendet eine ziemlich normale HTTP-Anfrage mit Headern, die so aussehen (die HTTP-Version muss 1.1 oder höher sein und die Methode muss GET sein):

+ +
GET /chat HTTP/1.1
+Host: example.com:8000
+Upgrade: websocket
+Connection: Upgrade
+Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
+Sec-WebSocket-Version: 13
+
+
+ +

Der Client kann hier Erweiterungen und / oder Unterprotokolle anfordern. Einzelheiten finden Sie unter Sonstiges. Es können auch allgemeine Header wie {{HTTPHeader ("User-Agent")}}, {{HTTPHeader ("Referer")}}, {{HTTPHeader ("Cookie")}} oder Authentifizierungsheader vorhanden sein. Mach mit denen, was du willst; Sie beziehen sich nicht direkt auf das WebSocket. Es ist auch sicher, sie zu ignorieren. In vielen gängigen Setups hat sich bereits ein Reverse-Proxy mit ihnen befasst.

+ +
+

Tipp: Alle Browser senden einen Origin-Header. Sie können diesen Header aus Sicherheitsgründen verwenden (nach demselben Ursprung suchen, automatisch zulassen oder ablehnen usw.) und eine 403 Forbidden senden, wenn Ihnen das, was Sie sehen, nicht gefällt. Seien Sie jedoch gewarnt, dass Nicht-Browser-Agenten einen gefälschten Ursprung senden können. Die meisten Anwendungen lehnen Anforderungen ohne diesen Header ab.

+
+ +

Wenn ein Header nicht verstanden wird oder einen falschen Wert hat, sollte der Server eine {{HTTPStatus ("400")}} ("Bad Request")} Antwort senden und den Socket sofort schließen. Wie üblich wird möglicherweise auch der Grund angegeben, warum der Handshake im HTTP-Antworttext fehlgeschlagen ist, die Nachricht wird jedoch möglicherweise nie angezeigt (Browser zeigen sie nicht an). Wenn der Server diese Version von WebSockets nicht versteht, sollte er einen {{HTTPHeader ("Sec-WebSocket-Version")}} Header zurücksenden, der die Version (en) enthält, die er versteht. Im obigen Beispiel wird Version 13 des WebSocket-Protokolls angegeben.
+
+ Der interessanteste Header hier ist {{HTTPHeader ("Sec-WebSocket-Key")}}. Schauen wir uns das also als nächstes an.

+ +
+

Hinweis: Normale HTTP-Statuscodes können nur vor dem Handshake verwendet werden. Nach erfolgreichem Handshake müssen Sie einen anderen Satz von Codes verwenden (definiert in Abschnitt 7.4 der Spezifikation).

+
+ +

Server handshake Antwort

+ +

Wenn der Server die Handshake-Anforderung empfängt, sollte er eine spezielle Antwort zurücksenden, die angibt, dass das Protokoll von HTTP zu WebSocket geändert wird. Dieser Header sieht ungefähr so aus (denken Sie daran, dass jede Headerzeile mit \ r \ n endet, und setzen Sie nach dem letzten ein zusätzliches \ r \ n, um das Ende des Headers anzuzeigen):

+ +
HTTP/1.1 101 Switching Protocols
+Upgrade: websocket
+Connection: Upgrade
+Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
+
+
+ +

Darüber hinaus kann der Server hier über Erweiterungs- / Unterprotokollanforderungen entscheiden. Einzelheiten finden Sie unter Sonstiges. Der Sec-WebSocket-Accept-Header ist wichtig, da der Server ihn von dem {{HTTPHeader ("Sec-WebSocket-Key")}} ableiten muss, den der Client an ihn gesendet hat. Verketten Sie dazu den Sec-WebSocket-Key des Clients und die Zeichenfolge "258EAFA5-E914-47DA-95CA-C5AB0DC85B11" (es handelt sich um eine "magische Zeichenfolge"), nehmen Sie den SHA-1-Hash des Ergebnisses und geben Sie den base64 zurück Codierung dieses Hashs.

+ +
+

Hinweis: Dieser scheinbar überkomplizierte Prozess ist vorhanden, sodass für den Client offensichtlich ist, ob der Server WebSockets unterstützt. Dies ist wichtig, da Sicherheitsprobleme auftreten können, wenn der Server eine WebSockets-Verbindung akzeptiert, die Daten jedoch als HTTP-Anforderung interpretiert.

+
+ +

Wenn der Schlüssel also "dGhlIHNhbXBsZSBub25jZQ ==" war, lautet der Wert des Sec-WebSocket-Accept-Headers "s3pPLMBiTxaQ9kYGzzhZRbK + xOo =". Sobald der Server diese Header sendet, ist der Handshake abgeschlossen und Sie können mit dem Datenaustausch beginnen !

+ +
+

Hinweis: Der Server kann andere Header wie {{HTTPHeader ("Set-Cookie")}} senden oder über andere Statuscodes nach Authentifizierung oder Weiterleitung fragen, bevor er den Antwort-Handshake sendet.

+
+ +

  Clients im Auge behalten

+ +

Dies bezieht sich nicht direkt auf das WebSocket-Protokoll, ist jedoch hier erwähnenswert: Ihr Server muss die Sockets der Clients verfolgen, damit Sie bei Clients, die den Handshake bereits abgeschlossen haben, nicht erneut Handshakes durchführen. Dieselbe Client-IP-Adresse kann mehrmals versuchen, eine Verbindung herzustellen. Der Server kann sie jedoch ablehnen, wenn sie zu viele Verbindungen versuchen, um sich vor Denial-of-Service-Angriffen zu schützen.
+
+ Beispielsweise können Sie eine Tabelle mit Benutzernamen oder ID-Nummern zusammen mit den entsprechenden {{domxref ("WebSocket")}} und anderen Daten führen, die Sie dieser Verbindung zuordnen müssen.

+ +

Exchanging data frames

+ +

Either the client or the server can choose to send a message at any time — that's the magic of WebSockets. However, extracting information from these so-called "frames" of data is a not-so-magical experience. Although all frames follow the same specific format, data going from the client to the server is masked using XOR encryption (with a 32-bit key). Section 5 of the specification describes this in detail.

+ +

Format

+ +

Each data frame (from the client to the server or vice-versa) follows this same format:

+ +
Frame format:
+​​
+      0                   1                   2                   3
+      0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
+     +-+-+-+-+-------+-+-------------+-------------------------------+
+     |F|R|R|R| opcode|M| Payload len |    Extended payload length    |
+     |I|S|S|S|  (4)  |A|     (7)     |             (16/64)           |
+     |N|V|V|V|       |S|             |   (if payload len==126/127)   |
+     | |1|2|3|       |K|             |                               |
+     +-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +
+     |     Extended payload length continued, if payload len == 127  |
+     + - - - - - - - - - - - - - - - +-------------------------------+
+     |                               |Masking-key, if MASK set to 1  |
+     +-------------------------------+-------------------------------+
+     | Masking-key (continued)       |          Payload Data         |
+     +-------------------------------- - - - - - - - - - - - - - - - +
+     :                     Payload Data continued ...                :
+     + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+     |                     Payload Data continued ...                |
+     +---------------------------------------------------------------+
+ +

The MASK bit tells whether the message is encoded. Messages from the client must be masked, so your server must expect this to be 1. (In fact, section 5.1 of the spec says that your server must disconnect from a client if that client sends an unmasked message.) When sending a frame back to the client, do not mask it and do not set the mask bit. We'll explain masking later. Note: You must mask messages even when using a secure socket. RSV1-3 can be ignored, they are for extensions.

+ +

The opcode field defines how to interpret the payload data: 0x0 for continuation, 0x1 for text (which is always encoded in UTF-8), 0x2 for binary, and other so-called "control codes" that will be discussed later. In this version of WebSockets, 0x3 to 0x7 and 0xB to 0xF have no meaning.

+ +

The FIN bit tells whether this is the last message in a series. If it's 0, then the server keeps listening for more parts of the message; otherwise, the server should consider the message delivered. More on this later.

+ +

Decoding Payload Length

+ +

To read the payload data, you must know when to stop reading. That's why the payload length is important to know. Unfortunately, this is somewhat complicated. To read it, follow these steps:

+ +
    +
  1. Read bits 9-15 (inclusive) and interpret that as an unsigned integer. If it's 125 or less, then that's the length; you're done. If it's 126, go to step 2. If it's 127, go to step 3.
    2. +
  2. Read the next 16 bits and interpret those as an unsigned integer. You're done.
    3. +
  3. Read the next 64 bits and interpret those as an unsigned integer. (The most significant bit must be 0.) You're done.
    4. +
+ +

Reading and Unmasking the Data

+ +

If the MASK bit was set (and it should be, for client-to-server messages), read the next 4 octets (32 bits); this is the masking key. Once the payload length and masking key is decoded, you can read that number of bytes from the socket. Let's call the data ENCODED, and the key MASK. To get DECODED, loop through the octets (bytes a.k.a. characters for text data) of ENCODED and XOR the octet with the (i modulo 4)th octet of MASK. In pseudo-code (that happens to be valid JavaScript):

+ +
var DECODED = "";
+for (var i = 0; i < ENCODED.length; i++) {
+    DECODED[i] = ENCODED[i] ^ MASK[i % 4];
+}
+ +

Now you can figure out what DECODED means depending on your application.

+ +

Message Fragmentation

+ +

The FIN and opcode fields work together to send a message split up into separate frames.  This is called message fragmentation. Fragmentation is only available on opcodes 0x0 to 0x2.

+ +

Recall that the opcode tells what a frame is meant to do. If it's 0x1, the payload is text. If it's 0x2, the payload is binary data. However, if it's 0x0, the frame is a continuation frame; this means the server should concatenate the frame's payload to the last frame it received from that client. Here is a rough sketch, in which a server reacts to a client sending text messages. The first message is sent in a single frame, while the second message is sent across three frames. FIN and opcode details are shown only for the client:

+ +
Client: FIN=1, opcode=0x1, msg="hello"
+Server: (process complete message immediately) Hi.
+Client: FIN=0, opcode=0x1, msg="and a"
+Server: (listening, new message containing text started)
+Client: FIN=0, opcode=0x0, msg="happy new"
+Server: (listening, payload concatenated to previous message)
+Client: FIN=1, opcode=0x0, msg="year!"
+Server: (process complete message) Happy new year to you too!
+ +

Notice the first frame contains an entire message (has FIN=1 and opcode!=0x0), so the server can process or respond as it sees fit. The second frame sent by the client has a text payload (opcode=0x1), but the entire message has not arrived yet (FIN=0). All remaining parts of that message are sent with continuation frames (opcode=0x0), and the final frame of the message is marked by FIN=1. Section 5.4 of the spec describes message fragmentation.

+ +

Pings and Pongs: The Heartbeat of WebSockets

+ +

At any point after the handshake, either the client or the server can choose to send a ping to the other party. When the ping is received, the recipient must send back a pong as soon as possible. You can use this to make sure that the client is still connected, for example.

+ +

A ping or pong is just a regular frame, but it's a control frame. Pings have an opcode of 0x9, and pongs have an opcode of 0xA. When you get a ping, send back a pong with the exact same Payload Data as the ping (for pings and pongs, the max payload length is 125). You might also get a pong without ever sending a ping; ignore this if it happens.

+ +
+

If you have gotten more than one ping before you get the chance to send a pong, you only send one pong.

+
+ +

Closing the connection

+ +

To close a connection either the client or server can send a control frame with data containing a specified control sequence to begin the closing handshake (detailed in Section 5.5.1). Upon receiving such a frame, the other peer sends a Close frame in response. The first peer then closes the connection. Any further data received after closing of connection is then discarded. 

+ +

Miscellaneous

+ +
+

WebSocket codes, extensions, subprotocols, etc. are registered at the IANA WebSocket Protocol Registry.

+
+ +

WebSocket extensions and subprotocols are negotiated via headers during the handshake. Sometimes extensions and subprotocols very similar, but there is a clear distinction. Extensions control the WebSocket frame and modify the payload, while subprotocols structure the WebSocket payload and never modify anything. Extensions are optional and generalized (like compression); subprotocols are mandatory and localized (like ones for chat and for MMORPG games).

+ +

Extensions

+ +
+

This section needs expansion. Please edit if you are equipped to do so.

+
+ +

Think of an extension as compressing a file before e-mailing it to someone. Whatever you do, you're sending the same data in different forms. The recipient will eventually be able to get the same data as your local copy, but it is sent differently. That's what an extension does. WebSockets defines a protocol and a simple way to send data, but an extension such as compression could allow sending the same data but in a shorter format.

+ +
+

Extensions are explained in sections 5.8, 9, 11.3.2, and 11.4 of the spec.

+
+ +

TODO

+ +

Subprotocols

+ +

Think of a subprotocol as a custom XML schema or doctype declaration. You're still using XML and its syntax, but you're additionally restricted by a structure you agreed on. WebSocket subprotocols are just like that. They do not introduce anything fancy, they just establish structure. Like a doctype or schema, both parties must agree on the subprotocol; unlike a doctype or schema, the subprotocol is implemented on the server and cannot be externally refered to by the client.

+ +
+

Subprotocols are explained in sections 1.9, 4.2, 11.3.4, and 11.5 of the spec.

+
+ +

A client has to ask for a specific subprotocol. To do so, it will send something like this as part of the original handshake:

+ +
GET /chat HTTP/1.1
+...
+Sec-WebSocket-Protocol: soap, wamp
+
+
+ +

or, equivalently:

+ +
...
+Sec-WebSocket-Protocol: soap
+Sec-WebSocket-Protocol: wamp
+
+
+ +

Now the server must pick one of the protocols that the client suggested and it supports. If there is more than one, send the first one the client sent. Imagine our server can use both soap and wamp. Then, in the response handshake, it sends:

+ +
Sec-WebSocket-Protocol: soap
+
+
+ +
+

The server can't send more than one Sec-Websocket-Protocol header.
+ If the server doesn't want to use any subprotocol, it shouldn't send any Sec-WebSocket-Protocol header. Sending a blank header is incorrect. The client may close the connection if it doesn't get the subprotocol it wants.

+
+ +

If you want your server to obey certain subprotocols, then naturally you'll need extra code on the server. Let's imagine we're using a subprotocol json. In this subprotocol, all data is passed as JSON. If the client solicits this protocol and the server wants to use it, the server needs to have a JSON parser. Practically speaking, this will be part of a library, but the server needs to pass the data around.

+ +
+

Tip: To avoid name conflict, it's recommended to make your subprotocol name part of a domain string. If you are building a custom chat app that uses a proprietary format exclusive to Example Inc., then you might use this: Sec-WebSocket-Protocol: chat.example.com. Note that this isn't required, it's just an optional convention, and you can use any string you wish.

+
+ + + + diff --git a/files/de/web/api/window/domcontentloaded_event/index.html b/files/de/web/api/window/domcontentloaded_event/index.html new file mode 100644 index 0000000000..d6841f774a --- /dev/null +++ b/files/de/web/api/window/domcontentloaded_event/index.html @@ -0,0 +1,156 @@ +--- +title: DOMContentLoaded +slug: Web/Events/DOMContentLoaded +tags: + - Referenz + - Web + - events +translation_of: Web/API/Window/DOMContentLoaded_event +--- +

Das DOMContentLoaded-Event wird ausgelöst, wenn das initiale HTML-Dokument vollständig geladen und geparst ist. Es wird dabei nicht auf Stylesheets, Bilder und Frames gewartet. Das load-Event sollte im Gegensatz dazu nur benutzt werden um eine komplett geladene Seite zu erkennen. Es ist ein weit verbreiteter Fehler das load-Event zu benutzen, obwohl DOMContentLoaded wesentlich besser geeignet wäre.

+ +

{{Note("Synchrones JavaScript pausiert das Parsen des DOM.")}}

+ +

{{Note("Es gibt viele Bibliotheken, die Methoden bereitstellen, um bei verschiedenen Browsern zu erkennen, ob das DOM bereit ist.")}}

+ +

Performanz

+ +

Wenn DOM so schnell wie möglich geladen werden soll, nachdem der Benutzer die Seite angefragt hat, sollte zum einen das JavaScript asynchron ausgeführt und das Laden der Stylesheets optimiert werden, was bei zu häufigem Einsatz den Aufbau der Seite durch das parallele Laden verlangsamen kann.

+ +

Allgemeine Informationen

+ +
+
Specification
+
HTML5
+
Interface
+
Event
+
Bubbles
+
Ja
+
Abbrechbar
+
Ja (Auch wenn es als ein einfaches Event spezifiziert ist, das nicht abgebrochen werden kann)
+
Ziel
+
Dokument
+
Standardaktion
+
Keine
+
+ +

Eigenschaften

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}Das Zielelement des Events (das oberste Ziel im DOM Baum).
type {{readonlyInline}}{{domxref("DOMString")}}Der Typ des Events.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Gibt an, ob das Event weiter nach oben wandert (bubble).
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Gibt and, ob das Event abbrechbar ist.
+ +

Beispiel

+ +
<script>
+  document.addEventListener("DOMContentLoaded", function(event) {
+    console.log("DOM fully loaded and parsed");
+  });
+</script>
+
+ +
<script>
+  document.addEventListener("DOMContentLoaded", function(event) {
+    console.log("DOM fully loaded and parsed");
+  });
+
+for(var i=0; i<1000000000; i++)
+{} // Dieses synchrone Script wird das Parsen des DOMs verzögern. Dadurch wird das DOMContentLoaded-Event erst später ausgelöst.
+</script>
+
+ +

Browserkompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0[1]{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}[1]9.0[2]9.03.1[1]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}[1]{{CompatVersionUnknown}}{{CompatGeckoMobile("1")}}[1]{{CompatUnknown}}[2]{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]
+
+ +

[1] Bubbling für dieses Event benötigt mindestens Gecko 1.9.2, Chrome 6, and Safari 4.

+ +

[2] Internet Explorer 8 unterstützt das  readystatechange-Event, welches genutzt werden kann um festzustellen, wenn das DOM fertig ist. In früheren Versionen des Internet Explorers kann dieser Status festgestellt werden, indem wiederholt versucht wird, document.documentElement.doScroll("left"); auszuführen. Dieser Befehl gibt einen Error zurück, bis das DOM bereit ist.

+ +

Verwandte Events

+ + diff --git a/files/de/web/api/window/load_event/index.html b/files/de/web/api/window/load_event/index.html new file mode 100644 index 0000000000..066a2bea25 --- /dev/null +++ b/files/de/web/api/window/load_event/index.html @@ -0,0 +1,88 @@ +--- +title: load +slug: Web/Events/load +translation_of: Web/API/Window/load_event +--- +

Das load Ereignis wird ausgelöst, sobald eine Ressource und die von ihr abhängigen Ressourcen das Laden beendet haben.

+ +

General info

+ +
+
Spezifikation
+
DOM L3
+
Schnittstelle
+
UIEvent
+
bubbles
+
Nein
+
cancelable
+
Nein
+
Ziel
+
Window,Document,Element
+
Default Action
+
None.
+
+ +

Properties

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe event target (the topmost target in the DOM tree).
type {{readonlyInline}}DOMStringThe type of event.
bubbles {{readonlyInline}}BooleanWhether the event normally bubbles or not.
cancelable {{readonlyInline}}BooleanWhether the event is cancellable or not.
view {{readonlyInline}}WindowProxydocument.defaultView (window of the document)
detail {{readonlyInline}}long (float)0.
+ +

Example

+ +
<script>
+  window.addEventListener("load", function(event) {
+    console.log("Alle Ressourcen haben das Laden beendet!");
+  });
+</script>
+
+ +

 

+ + + + diff --git a/files/de/web/api/windowbase64/btoa/index.html b/files/de/web/api/windowbase64/btoa/index.html deleted file mode 100644 index 9d980c340a..0000000000 --- a/files/de/web/api/windowbase64/btoa/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: WindowBase64.btoa() -slug: Web/API/WindowBase64/btoa -tags: - - API - - Méthode - - Referenz -translation_of: Web/API/WindowOrWorkerGlobalScope/btoa ---- -
{{APIRef("HTML DOM")}}
- -

Erzeugt eine Base-64-kodierten ASCII-Zeichenkette aus einer "Zeichenkette" von Binärdaten.

- -

Hinweis: diese Funktion ist nicht für Raw-Unicode-Zeichenketten geeignet (siehe Abschnitt "Unicode-Zeichenketten" unten).

- -

Syntax

- -
var encodedData = window.btoa(stringToEncode);
- -

Example

- -
var encodedData = window.btoa("Hello, world"); // Zeichenkette kodieren
-var decodedData = window.atob(encodedData); // Zeichenkette dekodieren
-
- -

Hinweise

- -

Diese Methode kann verwendet werden, um Daten zu kodieren, übertragen, und mittels {{domxref("WindowBase64.atob","window.atob()")}} wieder zu dekodieren, welche andernfalls Übertragungsprobleme bereiten würden. Beispielsweise ist es möglich, die Steuerzeichen mit den ASCII-Werten 0 bis 31 zu kodieren.

- -

btoa() steht auch in JavaScript implementierten XPCOM-Komponenten zur Verfügung, auch wenn window in solchen Komponenten nicht das globale Objekt ist.

- -

Unicode-Zeichenketten

- -

In den meisten Browsern verursacht ein Aufruf von window.btoa() mit einer Unicode-Zeichenkette eine "Character Out Of Range"-Exception ("Zeichen außerhalb des zulässigen Wertebereichs").

- -

Das kann mithilfe eines solchen Code-Schemas vermieden werden (beigesteuert von Johan Sundström):

- -
function utf8_to_b64(str) {
-    return window.btoa(unescape(encodeURIComponent(str)));
-}
-
-function b64_to_utf8(str) {
-    return decodeURIComponent(escape(window.atob(str)));
-}
-
-// Usage:
-utf8_to_b64('✓ à la mode'); // JTI1dTI3MTMlMjUyMCUyNUUwJTI1MjBsYSUyNTIwbW9kZQ==
-b64_to_utf8('JTI1dTI3MTMlMjUyMCUyNUUwJTI1MjBsYSUyNTIwbW9kZQ=='); // "✓ à la mode"
-
-utf8_to_b64('I \u2661 Unicode!'); // SSUyNTIwJTI1dTI2NjElMjUyMFVuaWNvZGUlMjUyMQ==
-b64_to_utf8('SSUyNTIwJTI1dTI2NjElMjUyMFVuaWNvZGUlMjUyMQ=='); // "I ♡ Unicode!"
-
-
- -

Eine günstigere, zuverlässigere und effizientere Lösung ist, DOMString zunächst in eine UTF-8-kodierte Zeichenkette zu konvertieren, die sich für typed arrays eignet. Eine Anleitung bietet dieser Abschnitt.

- -

Specifications

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

Browser compatibility

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop(1)}}[1]10{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile(1)}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}
-
- -

[1] btoa() is also available to XPCOM components implemented in JavaScript, even though window is not the global object in components.

- -

See also

- - diff --git a/files/de/web/api/windowbase64/index.html b/files/de/web/api/windowbase64/index.html deleted file mode 100644 index f51b72c102..0000000000 --- a/files/de/web/api/windowbase64/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: WindowBase64 -slug: Web/API/WindowBase64 -tags: - - API - - HTML-DOM - - Helper - - NeedsTranslation - - TopicStub - - WindowBase64 -translation_of: Web/API/WindowOrWorkerGlobalScope -translation_of_original: Web/API/WindowBase64 ---- -

{{APIRef("HTML DOM")}}

- -

The WindowBase64 helper contains utility methods to convert data to and from base64, a binary-to-text encoding scheme. For example it is used in data URIs.

- -

There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}}  for workers, implements it.

- -

Properties

- -

This helper neither defines nor inherits any properties.

- -

Methods

- -

This helper does not inherit any methods.

- -
-
{{domxref("WindowBase64.atob()")}}
-
Decodes a string of data which has been encoded using base-64 encoding.
-
{{domxref("WindowBase64.btoa()")}}
-
Creates a base-64 encoded ASCII string from a string of binary data.
-
- -

Specifications

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

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop(1)}} [1]{{CompatVersionUnknown}}10.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support{{CompatGeckoMobile(1)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

[1]  atob() is also available to XPCOM components implemented in JavaScript, even though {{domxref("Window")}} is not the global object in components.

- -

See also

- - diff --git a/files/de/web/api/windoworworkerglobalscope/btoa/index.html b/files/de/web/api/windoworworkerglobalscope/btoa/index.html new file mode 100644 index 0000000000..9d980c340a --- /dev/null +++ b/files/de/web/api/windoworworkerglobalscope/btoa/index.html @@ -0,0 +1,145 @@ +--- +title: WindowBase64.btoa() +slug: Web/API/WindowBase64/btoa +tags: + - API + - Méthode + - Referenz +translation_of: Web/API/WindowOrWorkerGlobalScope/btoa +--- +
{{APIRef("HTML DOM")}}
+ +

Erzeugt eine Base-64-kodierten ASCII-Zeichenkette aus einer "Zeichenkette" von Binärdaten.

+ +

Hinweis: diese Funktion ist nicht für Raw-Unicode-Zeichenketten geeignet (siehe Abschnitt "Unicode-Zeichenketten" unten).

+ +

Syntax

+ +
var encodedData = window.btoa(stringToEncode);
+ +

Example

+ +
var encodedData = window.btoa("Hello, world"); // Zeichenkette kodieren
+var decodedData = window.atob(encodedData); // Zeichenkette dekodieren
+
+ +

Hinweise

+ +

Diese Methode kann verwendet werden, um Daten zu kodieren, übertragen, und mittels {{domxref("WindowBase64.atob","window.atob()")}} wieder zu dekodieren, welche andernfalls Übertragungsprobleme bereiten würden. Beispielsweise ist es möglich, die Steuerzeichen mit den ASCII-Werten 0 bis 31 zu kodieren.

+ +

btoa() steht auch in JavaScript implementierten XPCOM-Komponenten zur Verfügung, auch wenn window in solchen Komponenten nicht das globale Objekt ist.

+ +

Unicode-Zeichenketten

+ +

In den meisten Browsern verursacht ein Aufruf von window.btoa() mit einer Unicode-Zeichenkette eine "Character Out Of Range"-Exception ("Zeichen außerhalb des zulässigen Wertebereichs").

+ +

Das kann mithilfe eines solchen Code-Schemas vermieden werden (beigesteuert von Johan Sundström):

+ +
function utf8_to_b64(str) {
+    return window.btoa(unescape(encodeURIComponent(str)));
+}
+
+function b64_to_utf8(str) {
+    return decodeURIComponent(escape(window.atob(str)));
+}
+
+// Usage:
+utf8_to_b64('✓ à la mode'); // JTI1dTI3MTMlMjUyMCUyNUUwJTI1MjBsYSUyNTIwbW9kZQ==
+b64_to_utf8('JTI1dTI3MTMlMjUyMCUyNUUwJTI1MjBsYSUyNTIwbW9kZQ=='); // "✓ à la mode"
+
+utf8_to_b64('I \u2661 Unicode!'); // SSUyNTIwJTI1dTI2NjElMjUyMFVuaWNvZGUlMjUyMQ==
+b64_to_utf8('SSUyNTIwJTI1dTI2NjElMjUyMFVuaWNvZGUlMjUyMQ=='); // "I ♡ Unicode!"
+
+
+ +

Eine günstigere, zuverlässigere und effizientere Lösung ist, DOMString zunächst in eine UTF-8-kodierte Zeichenkette zu konvertieren, die sich für typed arrays eignet. Eine Anleitung bietet dieser Abschnitt.

+ +

Specifications

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

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop(1)}}[1]10{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile(1)}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] btoa() is also available to XPCOM components implemented in JavaScript, even though window is not the global object in components.

+ +

See also

+ + diff --git a/files/de/web/api/windoworworkerglobalscope/index.html b/files/de/web/api/windoworworkerglobalscope/index.html new file mode 100644 index 0000000000..f51b72c102 --- /dev/null +++ b/files/de/web/api/windoworworkerglobalscope/index.html @@ -0,0 +1,121 @@ +--- +title: WindowBase64 +slug: Web/API/WindowBase64 +tags: + - API + - HTML-DOM + - Helper + - NeedsTranslation + - TopicStub + - WindowBase64 +translation_of: Web/API/WindowOrWorkerGlobalScope +translation_of_original: Web/API/WindowBase64 +--- +

{{APIRef("HTML DOM")}}

+ +

The WindowBase64 helper contains utility methods to convert data to and from base64, a binary-to-text encoding scheme. For example it is used in data URIs.

+ +

There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}}  for workers, implements it.

+ +

Properties

+ +

This helper neither defines nor inherits any properties.

+ +

Methods

+ +

This helper does not inherit any methods.

+ +
+
{{domxref("WindowBase64.atob()")}}
+
Decodes a string of data which has been encoded using base-64 encoding.
+
{{domxref("WindowBase64.btoa()")}}
+
Creates a base-64 encoded ASCII string from a string of binary data.
+
+ +

Specifications

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

Browser compatibility

+ +

{{CompatibilityTable}}

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

[1]  atob() is also available to XPCOM components implemented in JavaScript, even though {{domxref("Window")}} is not the global object in components.

+ +

See also

+ + diff --git a/files/de/web/api/windoworworkerglobalscope/settimeout/index.html b/files/de/web/api/windoworworkerglobalscope/settimeout/index.html new file mode 100644 index 0000000000..9f13870d78 --- /dev/null +++ b/files/de/web/api/windoworworkerglobalscope/settimeout/index.html @@ -0,0 +1,329 @@ +--- +title: WindowTimers.setTimeout() +slug: Web/API/WindowTimers/setTimeout +translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout +--- +
{{APIRef("HTML DOM")}}
+ +

Die Funktion setTimeout() der {{domxref("WindowOrWorkerGlobalScope")}}-Schnittstelle ruft nach der gegebenen Zeitspanne eine Funktion oder direkt angebenen Code auf.

+ +

Syntax

+ +
var timeoutID = window.setTimeout(funktion, zeitspanne, [parameter1, parameter2, ...]);
+var timeoutID = window.setTimeout(code, zeitspanne);
+
+ +

 

+ +

Parameter

+ +

 

+ +
+
funktion
+
Die {{jsxref("function", "Funktion")}}, die nach zeitspanne Millisekunden ausgeführt werden soll.
+
code
+
code in der alternativen Syntax ist eine Zeichenkette, die Code enthält, der nach zeitspanne Millisekunden ausgeführt werden soll.  code sollte aus den gleichen Gründen, die auch eval() zum Sicherheitsrisiko machen, nicht verwendet werden.
+
zeitspanne {{optional_inline}}
+
zeitspanne ist die Wartezeit in Millisekunden (ein Tausendstel einer Sekunde), nach der funktion bzw. code ausgeführt werden soll. Dieser Wert ist ein Mindestwert, die tatsächlich abgelaufene Zeit kann länger sein, siehe {{anch("Gründe für längere als gegebene Wartezeiten")}} weiter unten.
+
parameter1, ..., parameterN {{optional_inline}}
+
Diese Parameter werden an die funktion oder den code übergeben.
+
+ +
Anmerkung: Der Internet Explorer unterstützt bis einschließlich Version 9 die Übergabe von zusätzlichen Parametern nicht.
+ +

Rückgabewert

+ +

setTimeout() gibt eine ID zurück, die den eingerichteten Zeitgeber identifiziert; um die Wartezeit abzubrechen, kann sie an {{domxref("WindowOrWorkerGlobalScope.clearTimeout","clearTimeout()")}}  übergeben werden.

+ +

Jede ID wird von setTimeout() und setInterval() nur einmalig je Objekt (window oder Worker) verwendet.

+ +

Beispiel

+ +

HTML

+ +
<p>Beispiel</p>
+<button onclick="delayedAlert();">Zeige nach zwei Sekunden einen Alarm.</button>
+<p></p>
+<button onclick="clearAlert();">Alarm vorzeitig abbrechen.</button>
+ +

JavaScript

+ +
var timeoutID;
+
+function delayedAlert() {
+  timeoutID = window.setTimeout(slowAlert, 2000);
+}
+
+function slowAlert() {
+  alert('Das hat gedauert!');
+}
+
+function clearAlert() {
+  window.clearTimeout(timeoutID);
+}
+ +

Ergebnis

+ +

{{EmbedLiveSample('Example')}}

+ +

Siehe auch clearTimeout()

+ +

Polyfill

+ +

Der nachfolgende Polyfill-Code ermöglicht es, der aufzurufenden Funktion auch im Internet Explorer Parameter zu übergeben:

+ +
/*\
+|*|
+|*|  Polyfill which enables the passage of arbitrary arguments to the
+|*|  callback functions of JavaScript timers (HTML5 standard syntax).
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/window.setInterval
+|*|
+|*|  Syntax:
+|*|  var timeoutID = window.setTimeout(func, delay[, param1, param2, ...]);
+|*|  var timeoutID = window.setTimeout(code, delay);
+|*|  var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
+|*|  var intervalID = window.setInterval(code, delay);
+|*|
+\*/
+
+(function() {
+  setTimeout(function(arg1) {
+    if (arg1 === 'test') {
+      // feature test is passed, no need for polyfill
+      return;
+    }
+    var __nativeST__ = window.setTimeout;
+    window.setTimeout = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) {
+      var aArgs = Array.prototype.slice.call(arguments, 2);
+      return __nativeST__(vCallback instanceof Function ? function() {
+        vCallback.apply(null, aArgs);
+      } : vCallback, nDelay);
+    };
+  }, 0, 'test');
+
+  var interval = setInterval(function(arg1) {
+    clearInterval(interval);
+    if (arg1 === 'test') {
+      // feature test is passed, no need for polyfill
+      return;
+    }
+    var __nativeSI__ = window.setInterval;
+    window.setInterval = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) {
+      var aArgs = Array.prototype.slice.call(arguments, 2);
+      return __nativeSI__(vCallback instanceof Function ? function() {
+        vCallback.apply(null, aArgs);
+      } : vCallback, nDelay);
+    };
+  }, 0, 'test');
+}())
+ +

Eine andere Möglichkeit ist, die Funktion innerhalb einer anonymen Funktion aufzurufen:

+ +
setTimeout(function() {
+    funktion("eins", "zwei", "drei");
+}, 1000);
+
+ +

Ebenfalls kann die Funktion bind() genutzt werden:

+ +

 

+ +
setTimeout(function(arg1, arg2, arg3){}.bind(undefined, "eins", "zwei", "drei"), 1000);
+ +

 

+ +

Das "this"-Problem

+ +

In der an setTimeout() übergebenen Funktion wird this bei Aufruf einen falschen Wert enthalten. Dieses Problem wird detailliert in der JavaScript-Referenz beschrieben.

+ +

Erklärung

+ +

Von setTimeout() ausgeführter Code wird in einem anderen Kontext ausgeführt, als in dem setTimeout() aufgerufen wurde. this wird deshalb in der aufgerufenen Funktion window oder global entsprechen, nicht dem this des Bereichs, in dem  setTimeout() aufgerufen wurde. Beispiel:

+ +
myArray = ["null", "eins", "drei"];
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length > 0 ? this[sProperty] : this);
+};
+
+myArray.myMethod(); // Ausgabe: "null,eins,zwei"
+myArray.myMethod(1); // Ausgabe: "eins"
+setTimeout(myArray.myMethod, 1000); // Ausgabe: "[object Window]" nach 1 Sekunde
+setTimeout(myArray.myMethod, 1500, "1"); // Ausgabe: "undefined" nach 1,5 Sekunden
+// Versuchen wir, 'this' zu übergeben
+setTimeout.call(myArray, myArray.myMethod, 2000); // Fehler: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // Der gleiche Fehler
+ +

Es gibt hier keine Möglichkeit, this an die aufzurufende Funktion durchzureichen.

+ +

Eine Lösungsmöglichkeit

+ +

Eine Möglichkeit, das Problem zu umgehen, ist es, die beiden eingebauten Funktionen setTimeout() und setInterval() durch zwei eigene zu ersetzen, die sich Function.prototype.call bedienen:

+ +
// Enable the passage of the 'this' object through the JavaScript timers
+
+var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval;
+
+window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeST__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};
+
+window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeSI__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};
+ +
Hinweis: Diese beiden Ersatzfunktionen ermöglichen es auch, im Internet Explorer Parameter an die aufzurufende Funktion zu übergeben, wie es HTML5 vorsieht. Sie können daher auch als {{anch("Polyfill")}} benutzt werden.
+ +

Anmerkungen

+ +

Eine Wartezeit kann mit window.clearTimeout() abgebrochen werden.

+ +

Soll eine Funktion wiederholt alle n Millisekunden aufgerufen werden, ist window.setInterval() die bessere Wahl.

+ +

Passing string literals

+ +

Passing a string instead of a function to setTimeout() suffers from the same hazards as using eval.

+ +
// Correct
+window.setTimeout(function() {
+    alert("Hello World!");
+}, 500);
+
+// Incorrect
+window.setTimeout("alert(\"Hello World!\");", 500);
+
+
+ +

String literals are evaluated in the global context, so local symbols in the context where setTimeout() was called will not be available when the string is evaluated as code.

+ +

Gründe für längere als gegebene Wartezeiten

+ +

Aus verschiedenen Gründen kann die tatsächliche Zeit bis zum Aufruf der Funktion länger sein als mit setTimeout() angegeben wurde. Dieser Abschnitt beschreibt die beiden häufigsten.

+ +

Wartezeiten betragen 4ms oder mehr

+ +

Um das System nicht zu überlasten, begrenzen moderne Browser die Häufigkeit der von setTimeout() und setInterval() ausgelösten Ereignisse ab einer bestimmten Aufruftiefe oder -häufigkeit. Beispiel:

+ +
function cb() { f(); setTimeout(cb, 0); }
+setTimeout(cb, 0);
+ +
setInterval(f, 0);
+ +

Chrome und Firefox drosseln nach dem fünften Aufruf, Safari nach dem sechsten, Edge bereits nach dem dritten.

+ +

Eine Wartezeit von 0 ms kann mit {{domxref("window.postMessage()")}} erreicht werden, wie hier beschrieben.

+ +

 

+ +
+

Hinweis: Die Mindestwartezeit, DOM_MIN_TIMEOUT_VALUE, beträgt 4 ms (Firefox-Einstellung dom.min_timeout_value), die Verschachtelungstiefe DOM_CLAMP_TIMEOUT_NESTING_LEVEL beträgt 5.

+
+ +
+

Hinweis: Der Wert 4 ms wurde mit HTML5 festgelegt und wird von allen Browsern umgesetzt, die nach 2010 erschienen sind. Vor {{geckoRelease("5.0")}} war der Mindestwert 10 ms.

+
+ +

 

+ +

 

+ +

Wartezeiten in inaktiven Tabs  größer als 1s

+ +

Um die Last noch weiter zu verringern, beträgt die Mindestwartezeit in sich im Hintergrund befindlichen Tabs grundsätzlich mindestens 1 s.

+ +

Firefox setzt diese Beschränkung seit Version 5 um (siehe {{bug(633421)}}). Der Wert von 1000 ms kann in der Einstellungen dom.min_background_timeout_value geändert werden.
+ Chrome setzt diese Beschränkung seit Version 11 um (crbug.com/66078).

+ +

Bei Firefox für Android beträgt seit Version 14 die Mindestwartezeit in sich im Hintergrund befindlichen Tabs 15 Minuten (siehe {{bug(736602)}}). Jegliche Aktivität in diesen Tabs kann auch vollständig angehalten werden.

+ +
+

Seit Version 50 gelten in Firefox keine Beschränkungen mehr, falls sich die Web Audio API {{domxref("AudioContext")}} im Wiedergabemodus befindet. Seit Firefox 51 gilt dies bereits für jegliche Dokumente mit einem {{domxref("AudioContext")}}, unabhängig von dessen Status.
+ Apps, die Musik Note für Note abspielen, konnten wegen der Beschränkungen den Takt nicht halten, sobald sie in den Hintergrund gelegt wurden.

+
+ +

Lastbedingte Verzögerungen

+ +

Zusätzlich zum aktiven Drosseln kann es zu verlängerten Wartezeiten kommen, falls das Dokument, der Browser oder das Betriebssystem anderweitig beschäftigt sind. Ein wichtiger Punkt in diesem Zusammenhang ist, dass die aufzurufende Funktion nicht ausgeführt werden kann, solange der Thread, der setTimeout() aufgerufen hat, noch aktiv ist:

+ +
function bla() {
+  console.log('bla wurde aufgerufen');
+}
+setTimeout(bla, 0);
+console.log('hinter setTimeout');
+ +

Ergebnis:

+ +
hinter setTimeout
+bla wurde aufgerufen
+ +

Obwohl setTimeout die sofortige Ausführung angewiesen wurde, wird der Aufruf von bla() in einer Warteschlange bis zur nächsten Gelegenheit zurückgestellt. Erst wenn der aktuell laufende Code ausgeführt wurde, werden die in der Warteschlange gesammelten Aufrufe abgearbeitet. In der Folge ist der Programmablauf nicht, wie eventuell erwartet.

+ +

Browserkompatibilität

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
EigenschaftChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basis1.0{{ CompatGeckoDesktop("1") }}4.04.01.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
EigenschaftAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic1.01.0{{ CompatGeckoMobile("1") }}6.06.01.0
+
+ +

Spezifikation

+ +

Gehört zu DOM-Level 0, wie spezifiziert in HTML5.

+ +

Siehe auch

+ + diff --git a/files/de/web/api/windowtimers/index.html b/files/de/web/api/windowtimers/index.html deleted file mode 100644 index 67f9f76863..0000000000 --- a/files/de/web/api/windowtimers/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: WindowTimers -slug: Web/API/WindowTimers -tags: - - API - - HTML-DOM - - Interface - - NeedsTranslation - - Reference - - TopicStub - - Workers -translation_of: Web/API/WindowOrWorkerGlobalScope -translation_of_original: Web/API/WindowTimers ---- -
{{APIRef("HTML DOM")}}
- -

WindowTimers contains utility methods to set and clear timers.

- -

There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}}  for workers, implements it.

- -

Properties

- -

This interface do not define any property, nor inherit any.

- -

Methods

- -

This interface do not inherit any method.

- -
-
{{domxref("WindowTimers.clearInterval()")}}
-
Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.
-
{{domxref("WindowTimers.clearTimeout()")}}
-
Cancels the repeated execution set using {{domxref("WindowTimers.setTimeout()")}}.
-
{{domxref("WindowTimers.setInterval()")}}
-
Schedules the execution of a function each X milliseconds.
-
{{domxref("WindowTimers.setTimeout()")}}
-
Sets a delay for executing a function.
-
- -

Specifications

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

Browser compatibility

- -

{{CompatibilityTable}}

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

 

- -

See also

- - diff --git a/files/de/web/api/windowtimers/settimeout/index.html b/files/de/web/api/windowtimers/settimeout/index.html deleted file mode 100644 index 9f13870d78..0000000000 --- a/files/de/web/api/windowtimers/settimeout/index.html +++ /dev/null @@ -1,329 +0,0 @@ ---- -title: WindowTimers.setTimeout() -slug: Web/API/WindowTimers/setTimeout -translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout ---- -
{{APIRef("HTML DOM")}}
- -

Die Funktion setTimeout() der {{domxref("WindowOrWorkerGlobalScope")}}-Schnittstelle ruft nach der gegebenen Zeitspanne eine Funktion oder direkt angebenen Code auf.

- -

Syntax

- -
var timeoutID = window.setTimeout(funktion, zeitspanne, [parameter1, parameter2, ...]);
-var timeoutID = window.setTimeout(code, zeitspanne);
-
- -

 

- -

Parameter

- -

 

- -
-
funktion
-
Die {{jsxref("function", "Funktion")}}, die nach zeitspanne Millisekunden ausgeführt werden soll.
-
code
-
code in der alternativen Syntax ist eine Zeichenkette, die Code enthält, der nach zeitspanne Millisekunden ausgeführt werden soll.  code sollte aus den gleichen Gründen, die auch eval() zum Sicherheitsrisiko machen, nicht verwendet werden.
-
zeitspanne {{optional_inline}}
-
zeitspanne ist die Wartezeit in Millisekunden (ein Tausendstel einer Sekunde), nach der funktion bzw. code ausgeführt werden soll. Dieser Wert ist ein Mindestwert, die tatsächlich abgelaufene Zeit kann länger sein, siehe {{anch("Gründe für längere als gegebene Wartezeiten")}} weiter unten.
-
parameter1, ..., parameterN {{optional_inline}}
-
Diese Parameter werden an die funktion oder den code übergeben.
-
- -
Anmerkung: Der Internet Explorer unterstützt bis einschließlich Version 9 die Übergabe von zusätzlichen Parametern nicht.
- -

Rückgabewert

- -

setTimeout() gibt eine ID zurück, die den eingerichteten Zeitgeber identifiziert; um die Wartezeit abzubrechen, kann sie an {{domxref("WindowOrWorkerGlobalScope.clearTimeout","clearTimeout()")}}  übergeben werden.

- -

Jede ID wird von setTimeout() und setInterval() nur einmalig je Objekt (window oder Worker) verwendet.

- -

Beispiel

- -

HTML

- -
<p>Beispiel</p>
-<button onclick="delayedAlert();">Zeige nach zwei Sekunden einen Alarm.</button>
-<p></p>
-<button onclick="clearAlert();">Alarm vorzeitig abbrechen.</button>
- -

JavaScript

- -
var timeoutID;
-
-function delayedAlert() {
-  timeoutID = window.setTimeout(slowAlert, 2000);
-}
-
-function slowAlert() {
-  alert('Das hat gedauert!');
-}
-
-function clearAlert() {
-  window.clearTimeout(timeoutID);
-}
- -

Ergebnis

- -

{{EmbedLiveSample('Example')}}

- -

Siehe auch clearTimeout()

- -

Polyfill

- -

Der nachfolgende Polyfill-Code ermöglicht es, der aufzurufenden Funktion auch im Internet Explorer Parameter zu übergeben:

- -
/*\
-|*|
-|*|  Polyfill which enables the passage of arbitrary arguments to the
-|*|  callback functions of JavaScript timers (HTML5 standard syntax).
-|*|
-|*|  https://developer.mozilla.org/en-US/docs/DOM/window.setInterval
-|*|
-|*|  Syntax:
-|*|  var timeoutID = window.setTimeout(func, delay[, param1, param2, ...]);
-|*|  var timeoutID = window.setTimeout(code, delay);
-|*|  var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
-|*|  var intervalID = window.setInterval(code, delay);
-|*|
-\*/
-
-(function() {
-  setTimeout(function(arg1) {
-    if (arg1 === 'test') {
-      // feature test is passed, no need for polyfill
-      return;
-    }
-    var __nativeST__ = window.setTimeout;
-    window.setTimeout = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) {
-      var aArgs = Array.prototype.slice.call(arguments, 2);
-      return __nativeST__(vCallback instanceof Function ? function() {
-        vCallback.apply(null, aArgs);
-      } : vCallback, nDelay);
-    };
-  }, 0, 'test');
-
-  var interval = setInterval(function(arg1) {
-    clearInterval(interval);
-    if (arg1 === 'test') {
-      // feature test is passed, no need for polyfill
-      return;
-    }
-    var __nativeSI__ = window.setInterval;
-    window.setInterval = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) {
-      var aArgs = Array.prototype.slice.call(arguments, 2);
-      return __nativeSI__(vCallback instanceof Function ? function() {
-        vCallback.apply(null, aArgs);
-      } : vCallback, nDelay);
-    };
-  }, 0, 'test');
-}())
- -

Eine andere Möglichkeit ist, die Funktion innerhalb einer anonymen Funktion aufzurufen:

- -
setTimeout(function() {
-    funktion("eins", "zwei", "drei");
-}, 1000);
-
- -

Ebenfalls kann die Funktion bind() genutzt werden:

- -

 

- -
setTimeout(function(arg1, arg2, arg3){}.bind(undefined, "eins", "zwei", "drei"), 1000);
- -

 

- -

Das "this"-Problem

- -

In der an setTimeout() übergebenen Funktion wird this bei Aufruf einen falschen Wert enthalten. Dieses Problem wird detailliert in der JavaScript-Referenz beschrieben.

- -

Erklärung

- -

Von setTimeout() ausgeführter Code wird in einem anderen Kontext ausgeführt, als in dem setTimeout() aufgerufen wurde. this wird deshalb in der aufgerufenen Funktion window oder global entsprechen, nicht dem this des Bereichs, in dem  setTimeout() aufgerufen wurde. Beispiel:

- -
myArray = ["null", "eins", "drei"];
-myArray.myMethod = function (sProperty) {
-    alert(arguments.length > 0 ? this[sProperty] : this);
-};
-
-myArray.myMethod(); // Ausgabe: "null,eins,zwei"
-myArray.myMethod(1); // Ausgabe: "eins"
-setTimeout(myArray.myMethod, 1000); // Ausgabe: "[object Window]" nach 1 Sekunde
-setTimeout(myArray.myMethod, 1500, "1"); // Ausgabe: "undefined" nach 1,5 Sekunden
-// Versuchen wir, 'this' zu übergeben
-setTimeout.call(myArray, myArray.myMethod, 2000); // Fehler: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
-setTimeout.call(myArray, myArray.myMethod, 2500, 2); // Der gleiche Fehler
- -

Es gibt hier keine Möglichkeit, this an die aufzurufende Funktion durchzureichen.

- -

Eine Lösungsmöglichkeit

- -

Eine Möglichkeit, das Problem zu umgehen, ist es, die beiden eingebauten Funktionen setTimeout() und setInterval() durch zwei eigene zu ersetzen, die sich Function.prototype.call bedienen:

- -
// Enable the passage of the 'this' object through the JavaScript timers
-
-var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval;
-
-window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
-  return __nativeST__(vCallback instanceof Function ? function () {
-    vCallback.apply(oThis, aArgs);
-  } : vCallback, nDelay);
-};
-
-window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
-  return __nativeSI__(vCallback instanceof Function ? function () {
-    vCallback.apply(oThis, aArgs);
-  } : vCallback, nDelay);
-};
- -
Hinweis: Diese beiden Ersatzfunktionen ermöglichen es auch, im Internet Explorer Parameter an die aufzurufende Funktion zu übergeben, wie es HTML5 vorsieht. Sie können daher auch als {{anch("Polyfill")}} benutzt werden.
- -

Anmerkungen

- -

Eine Wartezeit kann mit window.clearTimeout() abgebrochen werden.

- -

Soll eine Funktion wiederholt alle n Millisekunden aufgerufen werden, ist window.setInterval() die bessere Wahl.

- -

Passing string literals

- -

Passing a string instead of a function to setTimeout() suffers from the same hazards as using eval.

- -
// Correct
-window.setTimeout(function() {
-    alert("Hello World!");
-}, 500);
-
-// Incorrect
-window.setTimeout("alert(\"Hello World!\");", 500);
-
-
- -

String literals are evaluated in the global context, so local symbols in the context where setTimeout() was called will not be available when the string is evaluated as code.

- -

Gründe für längere als gegebene Wartezeiten

- -

Aus verschiedenen Gründen kann die tatsächliche Zeit bis zum Aufruf der Funktion länger sein als mit setTimeout() angegeben wurde. Dieser Abschnitt beschreibt die beiden häufigsten.

- -

Wartezeiten betragen 4ms oder mehr

- -

Um das System nicht zu überlasten, begrenzen moderne Browser die Häufigkeit der von setTimeout() und setInterval() ausgelösten Ereignisse ab einer bestimmten Aufruftiefe oder -häufigkeit. Beispiel:

- -
function cb() { f(); setTimeout(cb, 0); }
-setTimeout(cb, 0);
- -
setInterval(f, 0);
- -

Chrome und Firefox drosseln nach dem fünften Aufruf, Safari nach dem sechsten, Edge bereits nach dem dritten.

- -

Eine Wartezeit von 0 ms kann mit {{domxref("window.postMessage()")}} erreicht werden, wie hier beschrieben.

- -

 

- -
-

Hinweis: Die Mindestwartezeit, DOM_MIN_TIMEOUT_VALUE, beträgt 4 ms (Firefox-Einstellung dom.min_timeout_value), die Verschachtelungstiefe DOM_CLAMP_TIMEOUT_NESTING_LEVEL beträgt 5.

-
- -
-

Hinweis: Der Wert 4 ms wurde mit HTML5 festgelegt und wird von allen Browsern umgesetzt, die nach 2010 erschienen sind. Vor {{geckoRelease("5.0")}} war der Mindestwert 10 ms.

-
- -

 

- -

 

- -

Wartezeiten in inaktiven Tabs  größer als 1s

- -

Um die Last noch weiter zu verringern, beträgt die Mindestwartezeit in sich im Hintergrund befindlichen Tabs grundsätzlich mindestens 1 s.

- -

Firefox setzt diese Beschränkung seit Version 5 um (siehe {{bug(633421)}}). Der Wert von 1000 ms kann in der Einstellungen dom.min_background_timeout_value geändert werden.
- Chrome setzt diese Beschränkung seit Version 11 um (crbug.com/66078).

- -

Bei Firefox für Android beträgt seit Version 14 die Mindestwartezeit in sich im Hintergrund befindlichen Tabs 15 Minuten (siehe {{bug(736602)}}). Jegliche Aktivität in diesen Tabs kann auch vollständig angehalten werden.

- -
-

Seit Version 50 gelten in Firefox keine Beschränkungen mehr, falls sich die Web Audio API {{domxref("AudioContext")}} im Wiedergabemodus befindet. Seit Firefox 51 gilt dies bereits für jegliche Dokumente mit einem {{domxref("AudioContext")}}, unabhängig von dessen Status.
- Apps, die Musik Note für Note abspielen, konnten wegen der Beschränkungen den Takt nicht halten, sobald sie in den Hintergrund gelegt wurden.

-
- -

Lastbedingte Verzögerungen

- -

Zusätzlich zum aktiven Drosseln kann es zu verlängerten Wartezeiten kommen, falls das Dokument, der Browser oder das Betriebssystem anderweitig beschäftigt sind. Ein wichtiger Punkt in diesem Zusammenhang ist, dass die aufzurufende Funktion nicht ausgeführt werden kann, solange der Thread, der setTimeout() aufgerufen hat, noch aktiv ist:

- -
function bla() {
-  console.log('bla wurde aufgerufen');
-}
-setTimeout(bla, 0);
-console.log('hinter setTimeout');
- -

Ergebnis:

- -
hinter setTimeout
-bla wurde aufgerufen
- -

Obwohl setTimeout die sofortige Ausführung angewiesen wurde, wird der Aufruf von bla() in einer Warteschlange bis zur nächsten Gelegenheit zurückgestellt. Erst wenn der aktuell laufende Code ausgeführt wurde, werden die in der Warteschlange gesammelten Aufrufe abgearbeitet. In der Folge ist der Programmablauf nicht, wie eventuell erwartet.

- -

Browserkompatibilität

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
EigenschaftChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basis1.0{{ CompatGeckoDesktop("1") }}4.04.01.0
-
- -
- - - - - - - - - - - - - - - - - - - - - -
EigenschaftAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic1.01.0{{ CompatGeckoMobile("1") }}6.06.01.0
-
- -

Spezifikation

- -

Gehört zu DOM-Level 0, wie spezifiziert in HTML5.

- -

Siehe auch

- - diff --git a/files/de/web/barrierefreiheit/an_overview_of_accessible_web_applications_and_widgets/index.html b/files/de/web/barrierefreiheit/an_overview_of_accessible_web_applications_and_widgets/index.html deleted file mode 100644 index 3aa0530a35..0000000000 --- a/files/de/web/barrierefreiheit/an_overview_of_accessible_web_applications_and_widgets/index.html +++ /dev/null @@ -1,232 +0,0 @@ ---- -title: Übersicht zu barrierefreien Web-Applikationen und Komponenten -slug: Web/Barrierefreiheit/An_overview_of_accessible_web_applications_and_widgets -tags: - - ARIA - - Accessibility - - Guide - - Handbuch - - Komponente - - Web apps -translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets ---- -

Das Web entwickelt sich weiter: Statische seitenbasierte Websites werden zunehmend durch dynamische, desktopartige Web-Applikationen ersetzt, die mit JavaScript und AJAX arbeiten. Designer erstellen allein durch die Kombination von JavaScript, HTML und CSS beeindruckende neue Benutzeroberflächen und Steuerungsmechanismen. Dieser Wandel hat das Potential, durch responsives Design die Benutzerfreundlichkeit enorm zu verbessern, doch besteht für viele Benutzer die Gefahr wegen Zugänglichkeitsbarrieren ausgeschlossen zu werden. JavaScript hat keinen sehr guten Ruf, was die Barrierefreiheit anbelangt, da JavaScript-Techniken oft Probleme in Kombination mit Unterstützungstechnologie wie z.B. Screenreadern verursachen. Es gibt jedoch andere Möglichkeiten, dynamische Oberflächen zu erstellen, damit diese auch für Menschen mit Behinderungen ohne Einschränkungen benutzbar sind.

- -

Das Problem

- -

Die meisten JavaScript-Toolkits stellen eine Bibliothek für clientseitige Komponenten bereit, welche den Benutzeroberflächen von bekannten Desktopumgebungen nachempfunden sind. Slider, Menüleisten, Dateisystem-Bäume usw. lassen sich mit einer Kombination von JavaScript, CSS und HTML erstellen. In der HTML4-Spezifikation werden keine Tags festgelegt, welche diese Komponenten semantisch beschreiben und Entwickler greifen daher üblicherweise auf Tags wie <div> und <span> zurück. Die so entwickelten Oberflächen sehen Desktop-Applikation sehr ähnlich, enthalten jedoch in der Regel nicht genügend semantische Informationen, um die korrekte Funktion unterstützender Technologie zu gewährleisten. So können dynamische Inhalte einer Webseite von Benutzern, die z.B. eine Website (aus welchen Gründen auch immer) nicht sehen können, nicht vollständlig erfasst werden. Börsenticker, Updates von Twitter-Feeds, Fortschrittsanzeigen und ähnliche Komponenten manipulieren das DOM auf eine Weise, die von Unterstützungstechnologie nicht erkannt werden kann. An dieser Stelle kommt ARIA zum Einsatz.

- -

Beispiel 1: Markup für eine Tabs-Komponente mit ARIA-Labeln. Im Markup sind keine Informationen enthalten, welche die Form und Funktion der Komponente beschreiben.

- -
<!-- Dies ist eine Komponente für Tabs. Wie könnten Sie das wissen, würden sie nur das Markup betrachten? -->
-<ol>
-  <li id="ch1Tab">
-    <a href="#ch1Panel">Chapter 1</a>
-  </li>
-  <li id="ch2Tab">
-    <a href="#ch2Panel">Chapter 2</a>
-  </li>
-  <li id="quizTab">
-    <a href="#quizPanel">Quiz</a>
-  </li>
-</ol>
-
-<div>
-  <div id="ch1Panel">Chapter 1 content goes here</div>
-  <div id="ch2Panel">Chapter 2 content goes here</div>
-  <div id="quizPanel">Quiz content goes here</div>
-</div>
- -

Beispiel 2: Die Tabs-Komponente könnte z.B. wie folgt aussehen. Bei der visuellen Betrachtung lässt sich dies erkennen, es gibt jedoch keine maschinenlesbare Beschreibungen für Unterstützungstechnologie.
- Screenshot of the tabs widget

- -

ARIA

- -

WAI-ARIA, die Spezifikation für Accessible Rich Internet Applications der Web Accessibility Initiative des W3C beschreibt, wie fehlende semantischen Informationen hinzugefügt werden können, die für das Erfassen der Inhalte bei der Benutzung von Unterstützungstechnologie, wie z.B. Screen Readern, benötigt werden. ARIA ermöglicht Entwicklern, ihre Komponenten genauer zu beschreiben, indem dem Markup spezielle Attribute hinzugefügt werden. ARIA wurde entwickelt, um die Lücke zwischen Standard-HTML-Tags und desktopartigen Komponenten von dynamischen Web-Applikationen zu schließen und legt Rollen- und Zustansbeschreibungen für verbreitete UI-Komponenten fest.

- -

Die ARIA-Spezifikation beschreibt drei verschiedene Arten von Attributen: Rollen, Zustände und Eigenschaften. Rollen werden Komponenten zugewiesen, die bei HTML4 nicht vorhanden sind, wie z.B. Slider, Menüleisten, Tabs und Dialoge. Eigenschaften beschreiben Charakteristiken dieser Komponenten, wie z.B. ob sie per Drag & Drop ziehbar sind, ein benötigtes Element besitzen oder ein Popup mit ihnen verbunden ist. Zustände beschreiben den aktuellen Interaktionsstatus eines Elements - so wird der Unterstützungstechnologie mitgeteilt, ob das Element gerade beschäftigt, deaktiviert, selektiert oder versteckt ist.

- -

ARIA-Attribute sind dafür geschaffen, automatisch vom Browser interpretiert und für die nativen Barrierefreiheit-APIs des jeweiligen Betriebssystems übersetzt zu werden. Wenn ARIA vorhanden ist, kann die Unterstützungstechnologie JavaScript-Komponenten erkennen und mit diesen interagieren, auf dieselbe Weise wie bei Desktop-Software. Hierdurch kann eine konsistentere Benutzerführung ermöglicht werden, als noch bei älteren Generationen von Web-Applkationen, da Benutzer von Unterstützungstechnologie auch bei webbasierten Applikationen auf ihre Kenntnisse über Desktop-Software zurückgreifen können.

- -

Beispiel 3: Markup für die Tabs-Komponente mit hinzugefügten ARIA-Attributen.

- -
<!-- Durch die zugeteilte Rolle sind die Tabs erkennbar! -->
-<!-- role-Attribute wurden der Liste und den einzelnen Elementen hinzugefügt. -->
-<ol role="tablist">
-  <li id="ch1Tab" role="tab">
-    <a href="#ch1Panel">Chapter 1</a>
-  </li>
-  <li id="ch2Tab" role="tab">
-    <a href="#ch2Panel">Chapter 2</a>
-  </li>
-  <li id="quizTab" role="tab">
-    <a href="#quizPanel">Quiz</a>
-  </li>
-</ol>
-
-<div>
-  <!-- Beachten Sie die Attribute 'role' und 'aria-labelledby', welche die Tab-Panels beschreiben. -->
-  <div id="ch1Panel" role=”tabpanel” aria-labelledby="ch1Tab">Chapter 1 content goes here</div>
-  <div id="ch2Panel" role=”tabpanel” aria-labelledby="ch2Tab">Chapter 2 content goes here</div>
-  <div id="quizPanel" role=”tabpanel” aria-labelledby="quizTab">Quiz content goes here</div>
-</div>
-
- -

ARIA wird von allen aktuellen Versionen der bekannten Browser unterstützt, einschließlich Firefox, Safari, Opera, Chrome und Internet Explorer. Viele Unterstützungstechnologien, wie z.B. die Open-Source-Screenreader NVDA und Orca, unterstützen ARIA ebenfalls. Auch JavaScript-Biblitheken wie jQuery UI, YUI, Google Closure und Dojo Dijit setzen ARIA-Markup ein.

- -

Darstellungänderungen

- -

Dynamische Änderungen der Darstellung sind zum Beispiel die Veränderung der Elementeigenschaften mit CSS (wie z.B. ein roter Rand um ein Feld, das fehlerhafte Daten enthält oder eine Farbänderung bei einer aktivierten Checkbox) oder das Anzeigen und Verstecken von Inhalten.

- -

Zustandsänderungen

- -

ARIA stellt Attribute zur Deklaration des aktuellen Zustands von Komponenten bereit. Die Beispiele in dieser Einführung werden die folgenden Attribute verwendet (es gibt allerdings noch einige mehr):

- - - -

(Eine komplette Liste aller Zustände finden Sie in der Liste zu ARIA-Zuständen und Eigenschaften)

- -

Entwickler sollten ARIA-Zustände einsetzen, um den Zustand von Komponenten zu deklarieren und mit CSS-Attribut-Selektoren die visuelle Darstellung je nach Zustand entsprechend verändern (anstatt per Skript den Klassennamen des Elements zu ändern).

- -

Die Website der Open Ajax Alliance stellt Beispiel zu CSS-Attributseletoren in Verbindung mit ARIA bereit. Das Beispiel zeigt die Oberfläche eines WYSIWYG-Editors mit einem dynamischen Menü-System. Elemente, die gerade selektiert sind, unterscheiden sich visuell von anderen Elementen. Relevant sind hier besonders die unten beschriebenen Teile.

- -

Bei diesem Beispiel wird für des Menüs der HTML-Code aus Beispiel 1a verwendet. In Zeile 7 und 13 wird die Eigenschaft aria-checked eingesetzt, um den Zustand der Selektion anzuzeigen.

- -

Beispiel 1a. HTML für ein selektierbares Menü (übernommen von http://www.oaa-accessibility.org/example/25/).

- -
<ul id="fontMenu" class="menu" role="menu" aria-hidden="true">
-  <li id="sans-serif"
-      class="menu-item"
-      role="menuitemradio"
-      tabindex="-1"
-      aria-controls="st1"
-      aria-checked="true">Sans-serif</li>
-  <li id="serif"
-      class="menu-item"
-      role="menuitemradio"
-      tabindex="-1"
-      aria-controls="st1"
-      aria-checked="false">Serif</li>
-  ...
-
- -

Für die Änderung der visuellen Darstellung des selektierten Elements wird der CSS-Code aus Beispiel 1b verwendet. Beachten Sie, dass keine Klassennamen benutzt werden, einzig der Zustand des aria-checked-Attribute in Zeile 1 entscheidet also über die Darstellung des Elements.

- -

Beispiel 1b. Attribute-basierte Selektoren zum Anzeigen des Zustands (übernommen von http://www.oaa-accessibility.org/example/25/).

- -
li[aria-checked="true"] {
-  font-weight: bold;
-  background-image: url('images/dot.png');
-  background-repeat: no-repeat;
-  background-position: 5px 10px;
-}
-
- -

Zur Aktualisierung der Eigenschaft aria-checked wird der JavaScript-Code aus Beispiel 1c verwendet. Auch das Skript ändert nur den Wert der Attribute (Zeile 3 und 8) und es wird kein Klassenname hinzugefügt oder entfernt.

- -

Beispiel 1c. JavaScript zur Aktualisierung des Attributs aria-checked (übernommen von http://www.oaa-accessibility.org/example/25/).

- -
var processMenuChoice = function(item) {
-  // 'check' the selected item
-  item.setAttribute('aria-checked', 'true');
-  // 'un-check' the other menu items
-  var sib = item.parentNode.firstChild;
-  for (; sib; sib = sib.nextSibling ) {
-    if ( sib.nodeType === 1 && sib !== item ) {
-      sib.setAttribute('aria-checked', 'false');
-    }
-  }
-};
-
- -

Änderung der Sichtbarkeit

- -

Bei Änderungen der Sichtbarkeit von Elementen (verstecken oder sichtbar machen von Elementen) sollten Entwickler nur den Wert der Eigenschaft aria-hidden verändern. Dabei sollte die oben beschreibene Technik angewendet und CSS (display:none) eingesetzt werden, um das Element zu verstecken.

- -

Auf der Website der Open Ajax Alliance findet man hierzu ein Beispiel mit einem Tooltip bei dem das Attribut aria-hidden eingesetzt wird, um die Sichtbarkeit des Tooltips zu verändern. Das Beispiel zeigt ein einfaches Formular, bei dem Anweisungen zu den einzelnen Feldern eingeblendet werden. Auf die wichtigsten Details wird im Folgenden genauer eingegangen.

- -

Beispiel 2a zeigt den HTML-Code für einen Tooltip. In Zeile 9 wird der Zustand von aria-hidden auf true gesetzt.

- -

Beispiel 2a. HTML für ein Tooltip (übernommen von http://www.oaa-accessibility.org/example/39/).

- -
<div class="text">
-    <label id="tp1-label" for="first">First Name:</label>
-    <input type="text" id="first" name="first" size="20"
-           aria-labelledby="tp1-label"
-           aria-describedby="tp1"
-           aria-required="false" />
-    <div id="tp1" class="tooltip"
-         role="tooltip"
-         aria-hidden="true">Your first name is a optional</div>
-</div>
-
- -

Das Beispiel 2b unten zeigt den CSS-Code für das Markup. Wie schon beim ersten Beispiel wird auch hier kein Klassenname benutzt, sondern nur der Wert der Attribute aria-hidden geändert.

- -

Beispiel 2b. Attributbasierte Selektoren zur Anzeige des Zustands (übernommen von
- http://www.oaa-accessibility.org/example/39/).

- -
div.tooltip[aria-hidden="true"] {
-  display: none;
-}
-
- -

Beispiel 2c zeigt den JavaScript-Code zur Aktulisierung der Eigenschaft aria-hidden. Wieder wird per Skript nur die Attribute aria-hidden in Zeile 2 verändert und kein Klassenname hinzugefügt oder entfernt.

- -

Beispiel 2c. JavaScript zur Aktualisierung des Attributs aria-checked (übernommen von http://www.oaa-accessibility.org/example/39/).

- -
var showTip = function(el) {
-  el.setAttribute('aria-hidden', 'false');
-}
- -

Role changes

- -
-
In Bearbeitung
-
- -

Mit ARIA können Entwicklern solchen Elementen, bei denen wichtige semantische Informationen fehlen, eine Rolle zuweisen. Wenn z.B. eine ungeordnete Liste für die Erstellung eines Menüs benutzt wird, sollte dem ul-Elemente die Rolle menubar zugeteilt werden und jedem untergeordneten li-Listenelement die Rolle menuitem.

- -

Die Rolle eines Elements sollte nicht verändert werden. Stattdessen sollte das bestehende Element entfernt und ein neues Element mit neuer Rolle hinzugefügt werden.

- -

Wenn man z.B. eine Texteditor-Komponente mit einem Ansichtsmodus und einem Editiermodus erstellen möchte, dann kommt ein Entwickler vielleicht auf die Idee für das Textfeld ein schreibgeschütztes input-Element einzusetzen, diesem für den Ansichtsmodus die Rolle button zuzuweisen und beim Wechsel in den Editiermodus die Rolle und den Schreibschutz zu entfernen (da input-Elemente eigene Rollen zugewiesen werden können).

- -

Diese Vorgehensweise ist keine gute Idee. Stattdessen sollte für den Ansichtsmodus ein anderes Element, wie z.B. ein div- oder span-Element mit der Rolle button verwendet werden und für den Editiermodus ein input-Textelement.

- -

Asynchrone Inhaltsänderungen

- -
In Bearbeitung. Siehe auch Live Regions
- -

Tastaturnavigation

- -

Von Entwicklern wird oft wenig darauf geachtet, ob Oberflächenkomponenten auch mit der Tastatur bedienbar sind. Damit die Kompnenten für möglichst viele Benutzer zugänglich sind, sollte für alle Funktionen der Komponenten einer Web-Applikation überprüft werden, ob sie auch ausschließlich mit Tastatur und ohne Maus bedient werden können. Für die praktische Umsetzung sollten die üblichen Konventionen für Desktop-Komponenten befolgt werden, also die Benutzung von Tab-, Enter-, Leertaste und Pfeiltasten ermöglicht werden.

- -

Traditionell ist die Tastaturnavigation im Web auf die Tab-Taste begrenzt. Der Nutzer drückt Tab um jeden Link, Button oder Formular auf der Seite nacheinander zu fukussieren, Shift-Tab um zum letzten Element zu springen. Das ist eine eindimensionale Form der Navigation—vor und zurück, ein Element pro Schritt. Auf sehr umfangreichen Seiten muss ein Nutzer der Tastaturnavigation oft dutzende Male die Tab-Taste drücken, um zu dem gewünschten Bereich zu kommen. Die Implementierung von Navigationskonventionen von Desktop-Programmen im Web hat das Potential die Navigation für viele Nutzer zu beschleunigen.

- -

Hier eine Zusammenfassung wie Tastaturnavigation in einer ARIA-unterstützten Web-Applikation funktionieren sollte:

- - - -

In dem Beispiel der Tab-Komponente oben sollte der Nutzer also in der Lage sein mit den Tab- und Shift-Tab Tasten in und aus dem Komponenten-Container (<ol> in unserem Beispiel) zu navigieren. Sobald der Fokus innerhalb des Containers liegt, sollten die Pfeiltasten dem Nutzer erlauben zwischen den einzelnen Tabs (die <li> Elemente) zu navigieren. Ab hier variieren die Konventionen je nach Plattform. Unter Windows wird der nächste Tab automatisch aktivieren, wenn der Nutzer die Pfeiltasten drückt. Unter macOS, kann der Nutzer entweder die Enter- oder die Leertaste drücken, um den nächsten Tab zu aktivieren. Ein umfangreiches Tutorial zur Erstellung von Tastaturnavigation in JavaScript Komponenten beschreibt wie man diese Funktionsweise mit JavaScript implementieren kann.

- -

Für mehr Details zu Koventionen bei desktopartiger Tastaturnavigation gibt es einen umfangreichen DHTML style guide. Dieser stellt einen Überblick darüber bereit, wie Tastaturnavigation in jeder von ARIA unterstützten Komponente funktionieren sollte. Die W3C bietet ebenfalls ein hilfreiches ARIA Best Practices Dokument, das Konventionen für Tastaturnavigation und Shortcuts für eine Vielzahl von Komponenten beinhaltet.

- - - - diff --git a/files/de/web/barrierefreiheit/aria/aria_live_regionen/index.html b/files/de/web/barrierefreiheit/aria/aria_live_regionen/index.html deleted file mode 100644 index 4e1f22e0b5..0000000000 --- a/files/de/web/barrierefreiheit/aria/aria_live_regionen/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: ARIA Live-Regionen -slug: Web/Barrierefreiheit/ARIA/ARIA_Live_Regionen -translation_of: Web/Accessibility/ARIA/ARIA_Live_Regions ---- -

Einführung

-

In der Vergangenheit konnten Änderungen bei Webseiten nur so von einem Screenreader kommuniziert werden, dass der komplette Inhalt vorgelesen oder nur sehr wenig bis gar nichts über die Inhaltsänderungen berichtet wurde. Dies führte dazu, dass einige oder sogar alle Informationen unzugänglich waren. Bisher waren Screenreader nicht in der Lage, diese Situation zu verbessern, weil es keine standardisierte Methode gab, um Screenreader per Markup über Veränderungen zu informieren. ARIA-Live-Regionen sollen diese Lücke schließen. Über Live-Regionen erhalten Screenreader Anweisungen, wonach entschieden werden kann, ob und wann Benutzer unterbrochen werden sollen, um sie über Veränderungen des Inhalts in Kenntnis zu setzen.

-

Einfache Live-Regionen

-

 

-

Dynamische Inhalte, die ohne das Neuladen einer Webseite nachgeladen werden, sind im Allgemeinen entweder eine Region oder eine Komponente. Einfache Inhaltsänderungen, die nicht interaktiv sind, sollten als Live-Regionen gekennzeichnet werden. In der folgenden Liste werden die unterschiedlichen Eigenschaften für ARIA-Live-Regionen mit einer Beschreibung aufgeführt.

-
    -
  1. aria-live: Mit aria-live=POLITENESS_SETTING wird die Priorität für die Behandlung von Aktualisierungen von Live-Regionen festgelegt - die möglichen Werte für diese Einstellung sind: off/polite/assertive, wobei "off" der Default-Wert ist. Diese Eigenschaft ist mit Abstand die Wichtigste.
    2. -
  2. -

    aria-controls: Mit aria-controls=[IDLIST] wird ein Steuerungselement mit der Region verknüpft, die es kontrollieren soll. Regionen werden ähnlich wie div-Elemente anhand einer ID identifiziert. Wenn mehrere Regionen mit einer Steuerung verknüpft werden sollen, können diese einfach getrennt durch ein Leerzeichen angegeben werden, z.B. aria-controls="myRegionID1 myRegionsID2".

    -
    - Not known if the aria-controls aspect of live regions is implemented in current ATs, or which. Needs research.
    -
    3. -
-

In der Regel wird ausschließlich aria-live="polite" verwendet. Alle Regionen, die mit Informationen aktualisiert werden, die zwar wichtig sind, jedoch nicht so dringend, dass der Benutzer sofort unterbrochen und darüber informiert werden sollte, sollten dieses Attribut erhalten. Der Screenreader setzt den Benutzer dann über die Änderungen in Kenntnis, sobald er nicht mehr beschäftigt ist.

-

Regionen, die unrelevant sind oder z.B. wegen ständiger Aktualisierungen störend wirken könnten, sollten mit aria-live="off" stillgeschaltet werden.

-

Einfaches Einsatzszenario: Eine Combobox aktualisiert nützliche On-Screen-Informationen

-

Angenommen eine Website, die Informationen über Vogelarten bereitstellt, bietet ein Dropdown-Menü zur Auswahl einer der Vogelarten an und bei der Auswahl werden in einer Region Informationen über diese Vogelart angezeigt.

-

<select size="1" id="bird-selector" aria-controls="bird-info"><option> .... </select>

-

<div role="region" id="bird-info" aria-live="polite">

-

Sobald der Benutzer eine Vogelart selektiert, wird die Information vorgelesen. Da für die Region "polite" eingestellt ist, wartet der Screenreader, bis der Benutzer nicht mehr beschäftigt ist. Folglich wird bei der Bewegung nach unten in der Liste nicht jede Vogelart vorgelesen, sondern nur die ausgewählte.

-

Bevorzugung von spezialisierten Live-Region-Rollen

-

Für die folgenden bekannten vordefinierten Situationen sollte bevorzugt eine entsprechende "Live-Region-Rolle" eingesetzt werden:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
RolleBeschreibungHinweise zur Kompatibilität
logChat, Fehler, Spiel oder andere LogsZur Maximierung der Kompatiblität sollte ein redundantes aria-live="polite" hinzugefügt werden, wenn diese Rolle verwendet wird.
statusEine Statusleiste oder Bildschirmbereich, der einen aktualisierbaren Status anzeigt. Screenreader-Benutzer können mit einem speziellen Befehl den aktuellen Status abfragen.Zur Maximierung der Kompatiblität sollte ein redundantes aria-live="polite" hinzugefügt werden, wenn diese Rolle verwendet wird.
alertEine Fehler- oder Warnungmeldung, die auf dem Bildschirm eingeblendet wird. Alarmmeldungen sind  insbesondere bei der clentseitige Validierungsmeldungen für Benutzer wichtig. (TBD: link to ARIA form tutorial with aria info)Zur Maximierung der Kompatiblität sollte ein redundantes aria-live="assertive" hinzugefügt werden, wenn diese Rolle verwendet wird.  (TBD: check to see if this is necessary or causes double speaking issues.)
progressbarEine Kombination aus einer Komponente und einer Live-Region.  Verwenden Sie diese Rolle mit aria-valuemin, aria-valuenow und aria-valuemax. (TBD: add more info here). 
marqueeFür scrollenden Text, wie z.B. ein Börsenticker. 
timerJede Art von Zeitschaltung oder Uhr, wie z.B. ein Countdown-Timer oder eine Stoppuhr. 
-

Fortgeschrittene Live-Regionen

-

(TBD: what is supported where?)

-
    -
  1. aria-atomic: Das Attribut aria-atomic=BOOLEAN wird eingesetzt, um festzulegen, ob der Screenreader die Live-Regionen als Ganzes präsentieren soll, auch wenn sich nur ein Teil dieser Region ändert. Die möglichen Werte sind false oder true, wobei false der Default-Wert ist.
    2. -
  2. aria-relevant: Mit aria-relevant=[LIST_OF_CHANGES] wird bestimmt, welche Art von Veränderungen relevant für eine Live-Region sind - die möglichen Werte sind additions/removals/text/all. Der Default-Wert ist "additions text".
    3. -
  3. aria-labelledby: Mit aria-labelledby=[IDLIST] wird eine Region mit seinen Labels verknüpft. Die Technik ist dieselbe wie bei aria-controls, nur dass hier Labels statt Steuerungselemente mit der Region verknüpft werden. Mehrere Bezeichner können durch Leerzeichen getrennt angegeben werden.
    4. -
  4. aria-describedby: Das Attribut aria-describedby=[IDLIST] wird verwendet, um eine Region mit einer Beschreibung zu verknüpfen. Auch hier ist die Technik dieselbe, wie bei aria-controls, nur dass eine Beschreibung statt einer Steuerung verknüpft wird. Mehrere Bezeichner für Beschreibungen können durch Leerzeichen getrennt angegeben werden.
    5. -
-

Fortgeschrittenes Einsatzszenario: Roster

-

Auf einer Chat-Webseite soll eine Liste von Benutzern angezeigt werden, die zum aktuellen Zeitpunkt eingeloggt sind. Der Status der Benutzer soll dabei dynamisch (ohne Aktualisierung der Webseite) auf dem neusten Stand gehalten werden.

-
<ul id="roster" aria-live="polite" aria-relevant="additions removals">
-	<!-- Hier wird JavaScript zum Hinzufügen und Entfernen von Benutzern eingesetzt -->
-</ul>
-
-

Zusammenfassende Beschreibung von ARIA-Live-Eigenschaften:

- -

TBD: Realistic use case for aria-atomic="true"

diff --git a/files/de/web/barrierefreiheit/aria/aria_techniken/index.html b/files/de/web/barrierefreiheit/aria/aria_techniken/index.html deleted file mode 100644 index 85059df7a2..0000000000 --- a/files/de/web/barrierefreiheit/aria/aria_techniken/index.html +++ /dev/null @@ -1,168 +0,0 @@ ---- -title: ARIA Techniken -slug: Web/Barrierefreiheit/ARIA/ARIA_Techniken -tags: - - ARIA - - Accessibility -translation_of: Web/Accessibility/ARIA/ARIA_Techniques ---- -

 

- -

 Rollen

- -

 

- -

Widget Rollen

- -
- -
- -

Zusammengesetzte Rollen

- -

Diese Techniken beschreiben jede zusammengesetzte Rolle, sowie deren benötigte und optinale Kind-Rollen.

- - -
- -
- -

Dokumentstruktur Rollen

- -
- -
- -

Grenzrollen

- -
- -
- -

Zustände und Eigenschaften

- -

 

- -

Widget Eigenschaften

- -
- -
- -

Live Region Attribute

- -
- -
- -

Drag & drop Attribute

- -
- -
- -

Beziehungs Attribute

- -
- -
diff --git a/files/de/web/barrierefreiheit/aria/index.html b/files/de/web/barrierefreiheit/aria/index.html deleted file mode 100644 index c282ef8f95..0000000000 --- a/files/de/web/barrierefreiheit/aria/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: ARIA -slug: Web/Barrierefreiheit/ARIA -translation_of: Web/Accessibility/ARIA ---- -

Accessible Rich Internet Applications (ARIA) ermöglichen Webentwicklern Webinhalte und Web-Applikationen (insbesondere solche mit Ajax und JavaScript) besser zugänglich für Menschen mit Behinderungen und anderen Einschränkungen zu machen. Zum Beispiel lassen sich mit ARIA Navigations-Landmarken, JavaScript-Widgets, Formular-Hinweise und Fehlermeldungen hinzufügen und Live-Content-Aktualisierungen barrierefrei gestalten.

- -

ARIA ist ein Satz von speziellen Attributen, die beliebigem Markup-Content hinzugefügt werden können, wurde jedoch vorwiegend für HTML entwickelt. Das Attribut role definiert, um welche Art von Element es sich bei einem Objekt handelt (z. B. article, alert, oder slider). Andere ARIA-Attribute erweitern den Inhalt einer Website um nützliche Hilfsfunktionen, wie z. B. Formularbeschreibungen und Anzeigen für den aktuellen Wert bei Fortschrittsanzeigen.

- -

ARIA ist bei den meisten Browsern und Screen-Readern implementiert. Die Implementierungen weichen jedoch teilweise voneinander ab. Bei älterer Technologie ist die Unterstützung oft nicht vollständig (oder gar nicht vorhanden), daher sollte am besten "sicheres" ARIA eingesetzt werden, das bei schlechter Unterstützung keine Probleme verursacht, oder der Benutzer aufgefordert werden, neuere Technologie zu benutzen.

- -

Bitte helfen Sie uns, ARIA zu verbessern! Falls sie nicht genügend Zeit haben, fügen sie ihre Vorschläge einfach auf der Diskussionsseite hinzu.

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

Einführung in ARIA

- -
-
Einführung in ARIA
-
Eine schnelle Einführung, die beschreibt, wie dynamische Inhalte mit ARIA barrierefrei gestaltet werden können. Lesen Sie auch die klassische Einführung von Gez Lemon von 2008.
-
Web-Applikationen und ARIA-FAQ
-
Antworten für die häufigsten Fragen rund um WAI-ARIA und warum es nötig ist, Web-Applikationen barrierefrei zu gestalten.
-
Videos von Screen-Readern mit ARIA
-
Schauen sie sich vereinfachte Beispiele und Praxisbeispiele zu ARIA an. Auch "davor und danach"-Beispiele sind hier zu finden.
-
Benutzung von ARIA mit HTML
-
Hier finden Sie praxisorientierte Empfehlungen für Entwickler. Zum Beispiel welche Attribute mit welchen HTML-Elementen eingesetzt werden sollten.
-
- -

Einfache Verbesserungen mit ARIA

- -
-
Enhancing Page Navigation with ARIA Landmarks
-
Eine Einführung zur Verbesserung der Seitennavigation für Benutzer von Screen Readern mit ARIA-Landmarken. Lesen Sie auch den Artikel zur Impelemtierung von ARIA-Landmarken und schauen Sie sich bereits existierende Websites mit ARIA-Landmarken an (letze Aktualisierung: Juli 2011).
-
Verbesserung der Zugänglichkeit von Formularen
-
ARIA ist nicht nur für dynamische Inhalte! Lernen Sie, wie die Zugänglichkeit von HTML-Formularen mit Hilfe von ARIA-Attributen verbessert werden kann.
-
Live-Regions (work-in-progress)
-
Live-Regionen liefern Screen Readern Hinweise über den Umgang mit Inhaltsänderungen bei Webseiten.
-
Using ARIA Live Regions to Announce Content Changes
-
Eine kurze Übersicht über Live-Regionen von den Machern  der Screen-Reader Software JAWS. Live Regions werden auch von NVDA in Firefox und VoiceOver bei Safari unterstüzt (ab OS X Lion und iOS 5).
-
- -

ARIA für JavaScript-Widgets

- -
-
Tastaturgesteuerte JavaScript-Komponenten
-
Der erste Schritt bei der Erstellung eines berrierefreien JavaScript-Widget ist, es mit der Tastatur navigierbar zu machen. Deiser Artikel zeigt die Arbeitsschritte auf, die hierfür nötig sind. Der Artikel von Yahoo! zum Focus Management liefert ebenfalls eine gute Beschreibung.
-
Style-Guide für die Tastaturnavigation
-
Es stellt eine Herausforderung bei ARIA dar, Entwickler zur konsistenten Implementierung zu bringen, was für die Benutzer natürlich am besten wäre. Dieser Style-Guide beschreibt die Tastaturfunktionen bei bekannten Widgets.
-
- -

Weitere Informationen zu ARIA

- -
-
Widget-Techniken, Tutorials und Beispiele
-
Benötigen sie einen Slider, ein Menü oder eine andere Art von Widget? Hier finden Sie weiterführende Informationen.
-
ARIA-erweiterte JavaScript UI-Libraries
-
Falls Sie ein neues Projekt starten, setzen Sie eine UI-Widget-Llibrary mit ARIA-Unterstützung ein!  Achtung: Der Artikel ist von 2009 - der Inhalt sollte auf eine MDN-Seite kopiert werden, damit er aktualisiert werden kann.
-
Barrierefreiheit von HTML5 und Rich Internet Applications - CSUN 2012 Workshop Materialen
-
Beinhaltet auch Präsentationen und Beispiele.
-
- 		-

Mailing-Liste

- -
-
Free ARIA Google Group
-
Hier können Fragen zu ARIA gestellt und Vorschläge gemacht werden, um diese ARIA-Dokumentation zu verbessern.
-
- -

Blogs

- -

ARIA-Information von Blogs sind meist schnell veraltet. Dennoch gibt es einige hilfreiche Informationen von anderen Entwicklern, die mit ARIA arbeiten.

- -

Paciello Group

- -

Accessible Culture

- -

Yahoo! Accessibility

- -

Fehler melden

- -

Schreiben Sie ARIA-Fehlerberichte zu Browsern, Screen-Readern und JavaScript-Libraries.

- -

Beispiele

- -
-
Verzeichnis für ARIA-Beispiele
-
Einige Beispieldateien mit Grundstruktur von denen man lernen kann.
-
Beispiele für zugängliche JS-Widget-Libraries
-
Dojo, jQuery, Fluid, YUI
-
- -
-
Yahoo! Mail
-
Yahoo! hat bei Yahoo! Mail sehr gute Arbeit geleistet. Einer Web-App, die beinahe wie eine native App aussieht und sehr gut funktioniert, wie ein Review über Yahoo! Mail des Screen-Reader-Benutzers Marco Zehe zeigt. Sein Kommentar: "Keep up the good work!".
-
- -
-
Yahoo! Search
-
Yahoo! hat hier ebenfalls sehr gute Arbeit geleistet, die Möglichkeiten mit ARIA voll ausgeschöpft und die Technik ausführlich dokumentiert. Bei Yahoo! Search kommt eine Kombination von ARIA-Landmarken, Live-Regionen und Widgets zum Einsatz.
-
- -

Bemühungen zur Standardisierung

- -
-
Übersicht zu den WAI-ARIA Aktivitäten des W3C
-
Übersicht zu den Bemühungen für die Standardisierung von AI-ARIA der Web Accessibility Initiative (WAI).
-
WAI-ARIA Spezifikation
-
Die Spezifikation des W3C ist als Referenz sehr nützlich. In diesem Stadium unbedingt Kompatibilitätstest durchgeführt werden, da die Implematierungen noch immer voneinader abweichen.
-
WAI-ARIA Authoring Practices
-
Wie bei der WAI-ARIA-Spezifikation des W3C stellen die offiziellen best-practices ein Ideal für die Zukunft dar - den Zeitpunkt, an dem davon ausgegangen werden kann, dass die ARIA-Überstützung bei allen Browsern und Screen-Readern konsistent implemetiert ist. Die W3C-Dokumente erlauben die tiefgehende Einsicht in die Struktur von ARIA.
-
- Für jetzt gilt, dass Webentwickler, die ARIA implementieren, die Kompatibiliät maximieren sollten und hierfür auf die Dokumentation von Best-Practices und Beispielen zurückgreifen.
-
Open AJAX Accessibility Task Force
-
Die Open AJAX Effort Centers zu Themen wie Entwicklerwerkzeugen, Beispieldateien und automatisierte Tests für ARIA.
-
In der Entwicklung: WCAG 2.0 ARIA Techniken
-
Die Community benötigt einen kompletten Satz von WCAG-Techniken für WAI-ARIA + HTML, damit Organisationen davon ausgehen können, dass ihre ARIA-erweiterten Inhalte WCAG-konform sind. Das ist vor allem dann wichtig, wenn Regulierungen und Vorschriften auf WCAG basieren.
-
-
- - -
-
Accessibility, AJAX, JavaScript
-
-
- -

 

diff --git a/files/de/web/barrierefreiheit/index.html b/files/de/web/barrierefreiheit/index.html deleted file mode 100644 index 417c160fd0..0000000000 --- a/files/de/web/barrierefreiheit/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: Barrierefreiheit -slug: Web/Barrierefreiheit -tags: - - Accessibility - - Barrierefreiheit -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, 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."

- -
-
-

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

-
- - -
- -

W3C - Accessibility

- -

See also

- - - - diff --git a/files/de/web/barrierefreiheit/tastaturgesteuerte_javascript_komponenten/index.html b/files/de/web/barrierefreiheit/tastaturgesteuerte_javascript_komponenten/index.html deleted file mode 100644 index 2dedfc7aab..0000000000 --- a/files/de/web/barrierefreiheit/tastaturgesteuerte_javascript_komponenten/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: Tastaturgesteuerte JavaScript-Komponenten -slug: Web/Barrierefreiheit/Tastaturgesteuerte_JavaScript_Komponenten -translation_of: Web/Accessibility/Keyboard-navigable_JavaScript_widgets ---- -

Tastaturgesteuerte JavaScript-Komponenten

-

Übersicht

-

Bei der Erstellung von Desktopkomponenten für Web-Applikationen, wie z.B. Menüs, Baumansichten, Richtext-Felder und Tab-Panels kommt in der Regel JavaScript zum Einsatz. Die Komponenten bestehen üblicherweise aus {{ HTMLElement("div") }}- und {{ HTMLElement("span") }}-Elementen, die von Haus aus nicht die gleiche Funktionalität wie echte Desktopkomponenten besitzen. Dieses Dokument beschreibt Techniken, die eingesetzt werden können, um JavaScript-Komponenten über die Tastatur zugänglich zu machen.

-

Benutzung von tabindex

-

Das tabindex-Attribut wurde zu Beginn als Teil von HTML 4 eingeführt, um Entwicklern zu ermöglichen, die Reihenfolge für die Fokussierung von Elementen festzulegen, die vom Benutzer mit der Tastatur angesteuert werden. Das genaue Verhalten von tabindex wurde später etwas abgeändert. Diese Änderungen sind in der HTML 5-Spezifikation beschrieben. Alle bekannten Browser implementieren fortan das neue Design.

-

Die folgende Tabelle beschreibt das Verhalten von tabindex in modernen Browsern:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
tabindex-AttributFokussierbar mit der Maus oder JavaScript über element.focus()Tab-navigierbar
Nicht vorhandenFolgt der Festlegung für das Element für die Plattform ("Ja" bei Formularsteuerungen, Links, etc.).Folgt der Festlegung für das Element für die Plattform.
Negativ (z.B. tabindex="-1")JaNein; Entwickler muss auf Tasteneingaben reagieren und das Element über focus() fokussieren.
Null (z.B. tabindex="0")JaIn der Tab-Ordnung relativ zur Position des Elements im Dokument.
Positiv (z.B. tabindex="33")JaWert von tabindex bestimmt die Position des Elements in der Tab-Ordnung: Im Allgemeinen werden Elemente vor solchen positioniert, bei denen tabindex="0" gesetzt ist oder die von Natur aus per Tab steuerbar sind; Elemente mit kleinere Werten werden vor solchen mit größeren Werten positioniert (ein Element mit tabindex="7" wird z.B. vor tabindex="11" positioniert)
-

Einfache Steuerungen

-

Damit z.B. eine einfache Tab-Komponente über die Tastatur bedient werden kann, wird dem entsprechenden {{ HTMLElement("div") }}- oder {{ HTMLElement("span") }}-Element das tabindex-Attribut hinzugefügt. Beim folgenden Beispiel wird diese Technik für eine Checkbox angewendet, die auf einem span-Element basiert.

-

Beispiel 1: Eine einfache Checkbox-Komponente mit einem Bild, welche um das tabindex="0" erweitert wurde und so auch über die Tastatur gesteuert werden kann.

-
<!-- Ohne die tabindex-Attribute könnten die <span>-Elemente nicht mit der Tastatur fokussiert werden -->
-<div>
-    <span role="checkbox" aria-checked="true" tabindex="0">
-        <img src="checked.gif" role="presentation" alt="" />
-        Include decorative fruit basket
-    </span>
-</div>
-<div>
-    <span role="checkbox" aria-checked="true" tabindex="0">
-        <img src="checked.gif" role="presentation" alt="" />
-        Include singing telegram
-    </span>
-</div>
-<div>
-    <span role="checkbox" aria-checked="false" tabindex="0">
-        <img src="unchecked.gif" role="presentation" alt="" />
-        Require payment before delivery
-    </span>
-</div>
-
-

Gruppieren von Steuerungselementen

-

Für die Gruppierung von Komponenten, wie z.B. Menüs, Tableisten, Grids oder Baumansichten, sollte das Elternelement in die Tab-Ordnung aufgenommen werden (tabindex="0"). Außerdem sollte jede(s) untergeordnete Auswahl/Tab/Zelle/Reihe aus der Tabordnung entfernt werden (tabindex="-1"). Die untergeordneten Elemente sollten vom Benutzer über die Pfeiltasten angesteuert werden können (Eine ausführliche Beschreibung der Tastaturunterstützung, die im Allgemeinen für bestimmte Komponenten erwartet wird, finden Sie im DHTML Style Guide).

-

Beim nächsten Beispiel wird diese Technik bei einer Menüsteuerung eingesetzt. Sobald der Fokus der Tastatur das <ul>-Element erreicht, muss der JavaScript-Entwickler den Fokus programmatisch steuern und auf das Drücken der Pfeiltasten reagieren. Techniken für die Steuerung des Fokus innerhalb von Komponenten, sind im Abschnitt "Steuerung des Fokus innerhalb von Gruppen" weiter unten beschrieben.

-

Beispiel 2: Eine Menüsteuerung bei der mit tabindex die Tastaturnavigation gesteuert wird.

-
<ul id="mb1" tabindex="0">
-  <li id="mb1_menu1" tabindex="-1"> Font
-    <ul id="fontMenu" title="Font" tabindex="-1">
-      <li id="sans-serif" tabindex="-1">Sans-serif</li>
-      <li id="serif" tabindex="-1">Serif</li>
-      <li id="monospace" tabindex="-1">Monospace</li>
-      <li id="fantasy" tabindex="-1">Fantasy</li>
-    </ul>
-  </li>
-  <li id="mb1_menu2" tabindex="-1"> Style
-    <ul id="styleMenu" title="Style" tabindex="-1">
-      <li id="italic" tabindex="-1">Italics</li>
-      <li id="bold" tabindex="-1">Bold</li>
-      <li id="underline" tabindex="-1">Underlined</li>
-    </ul>
-  </li>
-  <li id="mb1_menu3" tabindex="-1"> Justification
-    <ul id="justificationMenu" title="Justication" tabindex="-1">
-      <li id="left" tabindex="-1">Left</li>
-      <li id="center" tabindex="-1">Centered</li>
-      <li id="right" tabindex="-1">Right</li>
-      <li id="justify" tabindex="-1">Justify</li>
-    </ul>
-  </li>
-</ul>
-

Deaktivierte Steuerungen

-

Wenn Sie ein Steuerelement deaktivieren, sollte dieses aus der Tab-Ordnung entfernt werden, indem tabindex="-1" gesetzt wird. Elemente, die Teil einer Komponentengruppe (wie z.B. Menüpunkte in einem Menü) sind, sollten über die Tastatur ansprechbar bleiben.

-

Steuerung des Fokus innerhalb von Gruppen

-

Wenn ein Benutzer den Fokus per Tab von einem Element wegbewegt, sollte der Fokus zu dem Element, das zuvor fokussiert war - z.B. einer Baumkomponente oder Gridzelle - zurückkehren. Es existieren zwei verschiedene Techniken, um dies zu bewirken:

-
    -
  1. Verschiebung von tabindex: Programmatische Bewegung des Fokus
    2. -
  2. aria-activedescendent: Verwaltung eines "virtuellen" Fokus
    3. -
-

Technik 1: Verschiebung von tabindex

-

Setzt man tabindex für das fokussierte Element auf "0", wird das ausgewählte Element innerhalb der Gruppe erneut fokussiert, wenn der Benutzer den Fokus per Tab fortbewegt und dann zu diesem Element zurückkehrt. Beachten Sie, dass bei der Aktualisierung von tabindex auf 0 für des zuvor selektierte Element tabindex="-1" gesetzt werden muss. Diese Technik wird auch verwendet, wenn auf Tastendrücke reagiert und der Fokus programmatisch weiterbewegt wird. Der tabindex wird dann entspechend aktualisiert, um das aktuell fokussierte Element anzuzeigen. Dies lässt sich wie folgt umsetzen:

-

Jeweils ein keydown-Hander wird mit einem Element der Gruppe verknüpft. Wenn der Benutzer eine Pfeiltaste drückt, um ein anderes Element anzusteuern, passiert Folgendes:

-
    -
  1. Das neue Element wird codegesteuert fokussiert.
    2. -
  2. Der tabindex des fokussierten Elements wird auf "0" gesetzt.
    3. -
  3. Der tabindex des zuvor fokussierte Elements wird auf "-1" gesetzt.
    4. -
-

Hier finden Sie ein Beispiel für eine WAI-ARIA Baumansicht bei der diese Technik eingesetzt wird.

-
Tipps
-
Mit element.focus() den Fokus setzen
-

Benutzen Sie nicht die Funktionen createEvent(), initEvent() und dispatchEvent() um ein Element zu fokussieren. DOM-Focus-Events arbeiten nur informell: Sie werden vom System erzeugt, wenn ein Element fokussiert wird, aber nicht verwendet, um den Fokus zu setzen. Greifen Sie stattdessen auf element.focus() zurück.

-
Mit onfocus den Fokus überprüfen
-

Gehen Sie nicht davon aus, dass Fokusänderungen allein über die Tastatur oder Maus initiiert werden: Assistierende Technologien, wie z.B. Screenreader, sind in der Lage den Fokus für jedes fokussierbare Element zu setzen. Benutzen Sie daher onfocus und onblur um Fokusänderungen zu verfolgen.

-

onfocus und onblur können nun mit jedem beliebigen Element verwendet werden. Es existiert jedoch kein Standard-DOM-Interface, um den aktuellen Fokus im Dokument abzufragen. Wenn man den Fokus verfolgen möchte, muss der aktuelle Zustand in einer JavaScript-Variablen hinterlegt werden.

-

Technik 2: aria-activedescendant

-

Bei dieser Technik wird ein einzelner Event-Handler mit der Container-Komponente verknüpft und aria-activedescendant dazu benutzt, um einen "virtuellen" Fokus zu verwalten. (Mehr Informationen über ARIA finden Sie indieser Übersicht).

-

The aria-activedescendant property identifies the ID of the descendent element that currently has the virtual focus. The event handler on the container must respond to key and mouse events by updating the value of aria-activedescendant and ensuring that the current item is styled appropriately (for example, with a border or background color). See the source code of this ARIA radiogroup example for a direct illustration of how this works.

-

Die Eigenschaft aria-activedescendent enthält die ID des untergeordneten Elements, das aktuell fokussiert ist. Der Event-Handler des Containers muss auf Tastatur- und Mauseingaben reagieren, den Wert von aria-activedescendent aktualisieren und sicherstellen, dass die Darstellung des Elements entsprechend angepasst wird (z.B. Rahmen oder Hintergrundfarbe). Ein konkretes Beispiel für diese Technik liefert der Quellcode des ARIA-Radiogruppen-Beispiels.

-
Tipps
-
scrollIntoView
-

Note that the use of this pattern requires the author to ensure that the current focused widget is scrolled into view. You should be able to use the {{ domxref("element.scrollIntoView()") }} function, but we recommend confirming this works for you in your target browsers using the quirksmode test.Bei der Benutzung dieses Musters muss der Entwickler sicherstellen, dass das aktuell fokussierte Element in Sichtweite gescrollt wird. Für diesen Zweck kann die Funktion element.scrollIntoView() eingesetzt werden. Überprüfen Sie jedoch unbedingt mit dem Quirksmode-Test, ob dies für ihre Browser, die unterstützt werden sollen, fehlerfrei funktioniert.

-
Probleme
- -

Allgemeine Richtlinien

-

Benutzung von onkeydown, um auf Tastendrücke zu reagieren (nicht onkeypress)

-

Der Internet Explorer führt keypress-Events für nicht-alpahnumerische Zeichen nicht aus. Benutzen Sie stattdessen das onkeydown-Event.

-

Tastatur- und Mausbedienung sollte konsistent sein

-

Um sicherzustellen, dass Benutzereingaben unabhängig vom Eingabegerät konstistent sind, sollten Tastatur- und Maus-Eventhandler denselben Code verwenden. Zum Beispiel sollte der Code, womit der tabindex oder das Aussehen festgelegt wird, wenn die Pfeiltasten benutzt werden, auch für die Mausklick-Handler verwendet werden, damit dieselben Änderungen stattfinden.

-

Aktivierung von Elementen per Tastatur

-

Damit die Tastatur für die Aktivierung von Elementen benutzt werden kann, sollte alle Handler, die mit der Mausevents verknüpft sind, auch mit Tastaturevents verknüpft werden. Soll z.B. mit der Enter-Taste ein Element aktiviert werden können, welches über einen Maushandler onclick="doSomething()" mit der Maus verknüpft ist, dann sollte die Funktion doSomething() auch über ein keydown-Event mit der Tastatur verknüpft werden: onkeydown="return event.keyCode != 13 || doSomething();".

-

Verwenden Sie nicht :focus für das Styling (falls Kompatibilität mit IE 7 und ältereren Browsern notwendig)

-

Der Internet Explorer 7 und ältere Versionen unterstützen den Pseudoselektor :focus nicht. Aus diesem Grund sollte er für die Gestaltung von fokussierten Elementen nicht verwendet werden. Stattdessen kann die Darstellung über einen onfucus-Eventhander verändert werden, z.B. indem ein CSS-Style Name dem class-Attribut hinzugefügt wird.

-

Kontinuierliches Anzeigen des Fokus für Elemente mit tabindex="-1", die programmatisch fokussiert werden

-

Der Internet Explorer zeigt die Fokusumrandung für Elemente nicht automatisch an. Die Hervorhebung des fokussierten Elementes muss daher per JavaScript, entweder durch die Änderung der Hintergrundfarbe (z.B. this.style.backgroundColor = "gray") oder Anzeige eines gepunkteten Rahmen (z.B. this.style.border = "1px dotted invert") erfolgen. Entscheiden Sie sich für die zweite Vorgehensweise, sollten die Elementen von Anfang an einen unsichtbaren 1px-Rahmen besitzen, damit sie nicht größer werden, wenn der Rahmen angezeigt wird (Rahmen nehmen Platz in Anspruch und beim IE sind CSS-Outlines nicht implementiert).

-

Verwendete Tastendrücke sollten keine Browserfunktionen auslösen

-

Wenn eine Komponente auf Tastendrücke reagiert, sollte verhindert werden, dass der Browser diese Tastendrücke verarbeitet (z.B. Scrollen mit den Pfeiltasten), indem bei Event-Handlern ein Return-Code angegeben wird. Der Rückgabewert false verhindert, dass das Event an den Browser weitergereicht wird.

-

Hierzu ein Beispiel:

-
<span tabindex="-1" onkeydown="return handleKeyDown();">
-

Gibt die Funktion handleKeyDown() den Wert false zurück, wird das Event übernommen und der Browser so davon abgehalten auf den Tastendruck zu reagieren.

-

Abweichendes Verhalten bei wiederholten Tastendrücken

-

Je nach Betriebssystem kann es leider vorkommen, dass bei wiederholten Tastendrücken onkeydown-Events wiederholt ausgeführt werden oder auch nicht.

diff --git a/files/de/web/barrierefreiheit/webentwicklung/index.html b/files/de/web/barrierefreiheit/webentwicklung/index.html deleted file mode 100644 index 363f4646da..0000000000 --- a/files/de/web/barrierefreiheit/webentwicklung/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: Webentwicklung -slug: Web/Barrierefreiheit/Webentwicklung -translation_of: Web/Accessibility -translation_of_original: Web/Accessibility/Web_Development ---- -

 

- - - - - - - - -
-

Barrierefreiheit im Web

- -
-
ARIA für Entwickler
-
- -
-
ARIA ermöglicht Barrierefreiheit für dynamischen HTML-Content, wie z.B. Live-Content und JavaScript-Widgets.
-
- -
-
Tastaturgesteuerte JavaScript-Widgets
-
Viele Webentwickler, die ihre <div>- und <span>-basierten Widgets über die Tastatur zugänglich machen wollen,  suchen dafür die passende Technik. Tastaturgesteuerte Zugänglichkeit gehört zu den Techniken, mit denen jeder Webentwickler vertraut sein sollte.
-
- -

XUL-Barrierefreiheit

- -
-
 
-
Erstellung von benutzerdefinierten Komponenten mit XUL
-
Wie man DHTML-Techniken für Barrierefreiheit einsetzt, um XUL-Komponenten barrierefrei zu machen.
-
- -
-
Richtlinien für die Erstellung von barrierefreiem XUL
-
Wenn diese Richtlinen bei der Erstellung von XUL-Komponenten befolgt werden, sind die mit XUL erstellten Benutzeroberflächen barrierefrei. Programmierer, Reviewer, Designer und QS-Tester sollten mit diesen Richtlinien vertraut sein.
-
- -
-
- -
-
- 		-

Externe Informationen

- -
-
Accessible Web Page Authoring
-
Eine übersichtliche Checkliste für barrierefreie Webentwicklung von IBM.
-
-
- -

 

diff --git a/files/de/web/css/-moz-box-flex/index.html b/files/de/web/css/-moz-box-flex/index.html deleted file mode 100644 index 8c54ffa75a..0000000000 --- a/files/de/web/css/-moz-box-flex/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: '-moz-box-flex' -slug: Web/CSS/-moz-box-flex -tags: - - CSS - - CSS Referenz - - NeedsBrowserCompatibility - - NeedsMobileBrowserCompatibility - - Non-standard -translation_of: Web/CSS/box-flex ---- -
{{CSSRef}}{{warning("Dies ist eine Eigenschaft zur Steuerung von Teilen des XUL Boxmodells. Sie stimmt weder mit den alten CSS Flexible Box Layout Module Entwürfen für box-flex (welche auf dieser Eigenschaft beruhen), noch dem Verhalten von -webkit-box-flex (welche auf diesen Entwürfen beruht) überein.")}}
- -

Siehe Flexbox für mehr Informationen, was anstelle dieser Eigenschaft verwendet werden sollte.

- -

Übersicht

- -

Die -moz-box-flex und -webkit-box-flex CSS Eigenschaften geben an, wie eine -moz-box oder -webkit-box wächst, um die Box zu füllen, die sie beinhaltet, in Richtung des Layouts der beinhaltenden Box. Siehe Flexbox für mehr Informationen über die Eigenschaften von Flexbox-Elementen.

- -

Syntax

- -
/* <number> Werte */
--moz-box-flex: 0;
--moz-box-flex: 3;
--webkit-box-flex: 0;
--webkit-box-flex: 3;
-
-/* Globale Werte */
--moz-box-flex: inherit;
--moz-box-flex: initial;
--moz-box-flex: unset;
-
- -

Werte

- -
-
0
-
Die Box wächst nicht.
-
> 0
-
Die Box wächst soweit, dass sie den verfügbaren Raum ausfüllt.
-
- -

Beispiele

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <title>-moz-box-flex example</title>
-    <style>
-      div.example {
-        display: -moz-box;
-        display: -webkit-box;
-        border: 1px solid black;
-        width: 100%;
-      }
-      div.example > p:nth-child(1) {
-        -moz-box-flex: 1;       /* Mozilla */
-        -webkit-box-flex: 1;    /* WebKit */
-        border: 1px solid black;
-      }
-      div.example > p:nth-child(2) {
-        -moz-box-flex: 0;       /* Mozilla */
-        -webkit-box-flex: 0;    /* WebKit */
-        border: 1px solid black;
-      }
-    </style>
-  </head>
-  <body>
-    <div class="example">
-      <p>Ich wachse, um den zusätzlichen Raum auszufüllen.</p>
-      <p>Ich wachse nicht.</p>
-    </div>
-  </body>
-</html>
-
- -

Hinweise

- -

Die beinhaltende Box teilt den zur Verfügung stehenden zusätzlichen Abstand proportional zum Flexwert jedes Inhaltselements auf.

- -

Inhaltselemente, die null als Flexwert haben, vergrößern sich nicht.

- -

Falls nur ein Inhaltselement einen Flexwert hat, der nicht null ist, vergrößert es sich, um den verfügbaren Raum auszufüllen.

- -

Inhaltselemente, die den gleichen Flexwert haben, vergrößern sich um den gleichen absoluten Betrag.

- -

Falls der Flexwert über das flex Elementattribut gesetzt wird, wird der Stil ignoriert.

- -

Um XUL Elemente innerhalb einer Box gleich groß zu machen, muss das equalsize Attribut der beinhaltenden Box auf den Wert always gesetzt werden. Dieses Attribut hat keine entsprechende CSS Eigenschaft.

- -

Ein Trick, um alle Inhaltselemente in einer beinhaltenden Box gleich groß zu machen, ist, allen eine feste Größe (z. B. height: 0;) und denselben box-flex Wert größer als null zu geben (z. B. -moz-box-flex: 1).

- -

Spezifikationen

- -

Diese Eigenschaft ist eine nicht standardisierte Erweiterung. Es gab einen alten Entwurf der CSS3 Flexbox Spezifikation, der eine box-flex Eigenschaft definiert hat, aber dieser Entwurf ist mittlerweile überholt.

- -

Browser Kompatibilität

- -

{{Compat("css.properties.box-flex")}}

- -

Siehe auch

- -

{{cssxref("-moz-box-orient")}}, {{cssxref("-moz-box-pack")}}, {{cssxref("-moz-box-direction")}}, {{cssxref("flex")}}

diff --git a/files/de/web/css/-moz-box-ordinal-group/index.html b/files/de/web/css/-moz-box-ordinal-group/index.html deleted file mode 100644 index 5b99280453..0000000000 --- a/files/de/web/css/-moz-box-ordinal-group/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: '-moz-box-ordinal-group' -slug: Web/CSS/-moz-box-ordinal-group -tags: - - CSS - - CSS Referenz - - 'CSS:Mozilla Erweiterungen' - - Flexible Box - - Non-standard -translation_of: Web/CSS/box-ordinal-group -translation_of_original: Web/CSS/-moz-box-ordinal-group ---- -

{{CSSRef}}
- {{warning("Dies ist eine Eigenschaft des ursprünglichen CSS Flexible Box Entwurfs und wurde in neueren Entwürfen ersetzt.")}}

- -

Siehe Flexbox für mehr Informationen, was statt dieser Eigenschaft verwendet werden sollte.

- -

Übersicht

- -

Kennzeichnet die Aufzählungsgruppe, zu der das Element gehört. Elemente mit einer geringeren Aufzählungsgruppe werden vor denen mit höherer Aufzählungsgruppe angezeigt.

- -

Werte

- -

Werte müssen Ganzzahlen größer als null sein. Der Standardwert für diese Eigenschaft ist 1.

- -

Beispiele

- -
<style type="text/css">
-  #Flexbox {
-    display: -ms-box;
-    display: -moz-box;
-    display: -webkit-box;
-  }
-
-  #text1 {
-    background: red;
-    -ms-box-ordinal-group: 4;
-    -moz-box-ordinal-group: 4;
-    -webkit-box-ordinal-group: 4;
-  }
-
-  #text2 {
-    background: green;
-    -ms-box-ordinal-group: 3;
-    -moz-box-ordinal-group: 3;
-    -webkit-box-ordinal-group: 3;
-  }
-
-  #text3 {
-    background: blue;
-    -ms-box-ordinal-group: 2;
-    -moz-box-ordinal-group: 2;
-    -webkit-box-ordinal-group: 2;
-  }
-
-  #text4 {
-    background: orange;
-  }
-</style>
-
-<div id="Flexbox">
-  <div id="text1">text 1</div>
-  <div id="text2">text 2</div>
-  <div id="text3">text 3</div>
-  <div id="text4">text 4</div>
-</div>
-
diff --git a/files/de/web/css/-moz-box-pack/index.html b/files/de/web/css/-moz-box-pack/index.html deleted file mode 100644 index 517c6fce72..0000000000 --- a/files/de/web/css/-moz-box-pack/index.html +++ /dev/null @@ -1,136 +0,0 @@ ---- -title: '-moz-box-pack' -slug: Web/CSS/-moz-box-pack -tags: - - CSS - - CSS Eigenschaft - - CSS Referenz - - Layout - - Non-standard -translation_of: Web/CSS/box-pack ---- -
{{CSSRef}}{{warning("Dies ist eine Eigenschaft des ursprünglichen CSS Flexible Box Layout Moduls, welches durch einen neuen Standard ersetzt wurde.")}}
- -

Siehe Flexbox für mehr Informationen.

- -

Übersicht

- -

Die -moz-box-pack und -webkit-box-pack CSS Eigenschaften bestimmen, wie ein -moz-box oder -webkit-box seine Inhalte in Richtung seines Layouts packt.  Die Wirkung dieser Eigenschaft ist nur sichtbar, falls es zusätzlichen Leerraum innerhalb der Box gibt. Siehe Flexbox für mehr Informationen bezüglich den Eigenschaften von Flexbox-Elementen.

- -

Die Richtung des Layouts hängt von der Ausrichtung des Elements ab: horizontal oder vertikal.

- -

{{cssinfo}}

- -

Syntax

- -
/* Schlüsselwortwerte */
--moz-box-pack: start;
--moz-box-pack: center;
--moz-box-pack: end;
--moz-box-pack: justify;
-
-/* Globale Werte */
--moz-box-pack: inherit;
--moz-box-pack: initial;
--moz-box-pack: unset;
-
- -

Werte

- -
-
start
-
Die Box packt Inhalte am Anfang und lässt eventuellen zusätzlichen Leerraum am Ende.
-
center
-
Die Box packt Inhalte in der Mitte und teilt eventuellen zusätzlichen Leerraum zwischen Start und Ende auf.
-
end
-
Die Box packt Inhalte am Ende und lässt eventuellen zusätzlichen Leerraum am Start.
-
justify
-
Der Leerraum wird gleichmäßig zwischen jedem Kind aufgeteilt, wobei kein zusätzlicher Leerraum vor dem ersten Kind oder nach dem letzten Kind platziert wird. Falls es nur ein Kind gibt, wird der Wert so behandelt, als ob er start wäre.
-
- -

Formale Syntax

- -
{{csssyntax}}
- -

Beispiele

- -
div.example {
-  border-style: solid;
-
-  display: -moz-box; /* Mozilla */
-  display: -webkit-box; /* WebKit */
-
-  /* Make this box taller than the children,
-     so there is room for the box-pack */
-  height: 300px;
-  /* Make this box wide enough to show the contents
-     are centered horizontally */
-  width: 300px;
-
-  /* Children should be oriented vertically */
-  -moz-box-orient: vertical; /* Mozilla */
-  -webkit-box-orient: vertical; /* WebKit */
-
-  /* Align children to the horizontal center of this box */
-  -moz-box-align: center; /* Mozilla */
-  -webkit-box-align: center; /* WebKit */
-
-  /* Pack children to the bottom of this box */
-  -moz-box-pack: end;             /* Mozilla */
-  -webkit-box-pack: end;          /* WebKit */
-}
-
-div.example p {
-  /* Make children narrower than their parent,
-     so there is room for the box-align */
-  width: 200px;
-}
-
- -
<div class="example">
-  <p>I will be second from the bottom of div.example, centered horizontally.</p>
-  <p>I will be on the bottom of div.example, centered horizontally.</p>
-</div>
-
- -

{{EmbedLiveSample('Beispiele', 310, 310)}}

- -

Hinweise

- -

Der Rand der Box, die als Start zum Packen bestimmt wird, hängt von der Ausrichtung der Box und deren Richtung ab:

- - - - - - - - - - - - - - - - - - - -
 NormalUmgekehrt
Horizontallinksrechts
Vertikalobenunten
- -

Der dem Start gegenüberliegende Rand wird als das Ende bestimmt.

- -

Falls das Packen durch das pack Elementattribut gesetzt wird, wird die Stileigenschaft ignoriert.

- -

Spezifikationen

- -

Diese Eigenschaft ist nicht standardisiert, jedoch erschien eine ähnliche Eigenschaft in einem frühen Entwurf von CSS3 Flexbox, die durch neuere Versionen der Spezifikation überholt wurde.

- -

Browser Kompatibilität

- -{{Compat("css.properties.box-pack")}} - -

Siehe auch

- -

{{cssxref("box-orient")}}, {{cssxref("box-direction")}}, {{cssxref("box-align")}}

diff --git a/files/de/web/css/-moz-cell/index.html b/files/de/web/css/-moz-cell/index.html deleted file mode 100644 index 2fbbb81111..0000000000 --- a/files/de/web/css/-moz-cell/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: '-moz-cell' -slug: Web/CSS/-moz-cell -tags: - - CSS - - Non-standard -translation_of: Web/CSS/cursor -translation_of_original: Web/CSS/-moz-cell ---- -
{{CSSRef}}{{obsolete_header}}
- -

Diesen Wert nicht verwenden! Stattdessen sollte der cursor Wert {{cssxref("cursor#cell","cell")}} verwendet werden.

diff --git a/files/de/web/css/-moz-user-modify/index.html b/files/de/web/css/-moz-user-modify/index.html deleted file mode 100644 index d1ec135fa0..0000000000 --- a/files/de/web/css/-moz-user-modify/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: '-moz-user-modify' -slug: Web/CSS/-moz-user-modify -tags: - - CSS - - CSS Referenz - - NeedsMobileBrowserCompatibility - - Non-standard -translation_of: Web/CSS/user-modify ---- -
{{Non-standard_header}}{{CSSRef}}
- -

Übersicht

- -

Die -moz-user-modify Eigenschaft bestimmt, ob der Inhalt eines Elementes vom Benutzer bearbeitet werden kann oder nicht. Diese Eigenschaft ist ähnlich zum {{htmlattrxref("contenteditable")}} Attribut. Eine ähnliche Eigenschaft user-focus wurde in frühen Entwürfen eines Vorläufers der CSS3 UI Spezifikation vorgeschlagen, jedoch von der Arbeitsgruppe verworfen.

- -

{{cssinfo}}

- -

Syntax

- -
/* Schlüsselwortwerte */
--moz-user-modify: read-only;
--moz-user-modify: read-write;
--moz-user-modify: write-only;
-
-/* Globale Werte */
--moz-user-modify: inherit;
--moz-user-modify: initial;
--moz-user-modify: unset;
-
- -

Werte

- -
-
read-only
-
Standardwert. Inhalte sind nur lesbar.
-
read-write
-
Der Benutzer kann Inhalte lesen und schreiben.
-
write-only
-
Der Benutzer kann Inhalte bearbeiten, jedoch nicht lesen.
-
- -

Formale Syntax

- -
{{csssyntax}}
- -

Beispiel

- -

CSS

- -
.readwrite {
-  -moz-user-modify: read-write;
-  -webkit-user-modify: read-write;
-}
-
- -

HTML

- -
<div class="readwrite">Der Benutzer kann diesen Text ändern.</div>
-
- -

Ergebnis

- -

{{EmbedLiveSample("Beispiel", 300, 30)}}

- -

Spezifikationen

- -

user-modify in einem frühen Entwurf der CSS 3 User Interface Spezifikation (Working Draft vom Februar 2000, jetzt überholt durch CSS 3 Basic User Interface).

- -

Browser Kompatibilität

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung{{CompatUnknown}}{{CompatGeckoDesktop("1.0")}} {{property_prefix("-moz")}}{{CompatNo}}{{CompatNo}}3.0 {{property_prefix("-webkit")}}[1]
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
MerkmalAndroidAndroid WebviewFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Grundlegende Unterstützung{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

[1] Auch unterstützt: -webkit-user-modify: read-write-plaintext-only (Richtext geht verloren).
- Diese Eigenschaft wird in Safari 2.0 -khtml-user-modify genannt.

- -

Siehe auch

- - diff --git a/files/de/web/css/-moz-user-select/index.html b/files/de/web/css/-moz-user-select/index.html deleted file mode 100644 index aefa619439..0000000000 --- a/files/de/web/css/-moz-user-select/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: '-moz-user-select' -slug: Web/CSS/-moz-user-select -tags: - - CSS - - CSS Referenz - - 'CSS:Mozilla Erweiterungen' -translation_of: Web/CSS/user-select ---- -

{{ CSSRef() }}

- -

Übersicht

- -

In Mozilla Anwendungen steuert die -moz-user-select Eigenschaft, ob und wie ein Text ausgewählt werden kann.

- - - -

Syntax

- -
-moz-user-select: text | all | none| -moz-none | inherit
-
- -

Werte

- -
-
text
-
Der Text kann vom Benutzer ausgewählt werden.
-
all
-
Bei einem einfachem Klick auf das Element wird der gesamte Text ausgewählt. Bei einem Doppelklick auf das Element wird der höchste Vorfahr ausgewählt.
-
none
-
Der Text eines Elements und dessen Kindelemente können nicht ausgewählt werden. Wird jedoch eine Auswahl über das DOM getätigt, sind diese Elemente darin enthalten.
-
-moz-none
-
Der Text eines Elements und dessen Kindelemente können nicht ausgewählt werden. Die Auswahl kann bei Kindelementen aktiviert werden, wenn dort -moz-user-select: text festgelegt wird.
-
inherit
-
Der Wert des Elternelements wird geerbt.
-
- -

Beispiele

- -
/* Schaltet Textauswahl ab */
--moz-user-select: none
-
- -

Siehe auch

- - diff --git a/files/de/web/css/-webkit-mask-origin/index.html b/files/de/web/css/-webkit-mask-origin/index.html deleted file mode 100644 index 7cba7cd7fc..0000000000 --- a/files/de/web/css/-webkit-mask-origin/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: '-webkit-mask-origin' -slug: Web/CSS/-webkit-mask-origin -tags: - - CSS - - Referenz -translation_of: Web/CSS/mask-origin -translation_of_original: Web/CSS/-webkit-mask-origin ---- -
{{CSSRef}}{{Non-standard_header}}
- -

Die -webkit-mask-origin CSS Eigenschaft bestimmt den Ursprungspunkt des Maskenbildes. Der Wert der {{cssxref("-webkit-mask-position")}} Eigenschaft wird relativ zum Wert dieser Eigenschaft interpretiert. Diese Eigenschaft wird nicht angewendet, wenn -webkit-mask-attachment fixed ist.

- -

{{cssinfo}}

- -

Syntax

- -
{{csssyntax}}
- -

Werte

- -
-
padding
-
Standardwert. Die Position des Maskenbildes ist relativ zum Innenabstand. (Für einzelne Boxen ist "0 0" die linke obere Ecke des Randes des Innenabstands, "100% 100%" ist die untere rechte Ecke.)
-
border
-
Die Position des Maskenbildes ist relativ zum Rand.
-
content
-
Das Maskenbild ist relativ zum Inhalt.
-
- -

Beispiele

- -
.example {
-  border: 10px double;
-  padding: 10px;
-  -webkit-mask-image: url('mask.png');
-
-  /* Das Maskenbild ist innerhalb des Innenabstands. */
-  -webkit-mask-origin: content;
-}
-
- -
div {
-  -webkit-mask-image: url('mask1.png'), url('mask2.png');
-  -webkit-mask-origin: padding, content;
-}
-
- -

Browser Kompatibilität

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung1.0{{CompatNo}}{{CompatNo}}{{CompatNo}}4.0
-
- -
- - - - - - - - - - - - - - - - - - - -
MerkmalAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Grundlegende Unterstützung2.1{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}3.2
-
- -

Siehe auch

- -

{{cssxref("-webkit-mask")}}, {{cssxref("-webkit-mask-box-image")}}, {{cssxref("-webkit-mask-attachment")}}, {{cssxref("-webkit-mask-image")}},{{cssxref("-webkit-mask-composite")}}, {{cssxref("-webkit-mask-repeat")}}, {{cssxref("-webkit-mask-clip")}}

diff --git a/files/de/web/css/-webkit-mask-repeat/index.html b/files/de/web/css/-webkit-mask-repeat/index.html deleted file mode 100644 index 3ba0646adb..0000000000 --- a/files/de/web/css/-webkit-mask-repeat/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: '-webkit-mask-repeat' -slug: Web/CSS/-webkit-mask-repeat -tags: - - CSS -translation_of: Web/CSS/mask-repeat -translation_of_original: Web/CSS/-webkit-mask-repeat ---- -
{{CSSRef}}{{Non-standard_header}}
- -

Übersicht

- -

Die -webkit-mask-repeat Eigenschaft gibt an, ob und wie ein Maskenbild wiederholt (gekachelt) wird.

- -

{{cssinfo}}

- -

Syntax

- -
/* Einzelne Schlüsselwortwerte */
--webkit-mask-repeat: repeat;
--webkit-mask-repeat: repeat-x;
--webkit-mask-repeat: repeat-y;
--webkit-mask-repeat: no-repeat;
-
-/* Mehrer Schlüsselwortwerte */
--webkit-mask-repeat: repeat, repeat-x, no-repeat;
-
-/* Globale Werte */
--webkit-mask-repeat: inherit;
--webkit-mask-repeat: initial;
--webkit-mask-repeat: unset;
-
- -

Werte

- -
-
repeat
-
Das Maskenbild wird horizontal und vertikal wiederholt.
-
repeat-x
-
Das Maskenbild wird nur horizontal wiederholt.
-
repeat-y
-
Das Maskenbild wird nur vertikal wiederholt.
-
no-repeat
-
Das Maskenbild wird nicht wiederholt; nur eine Kopie des Maskenbildes wird gezeichnet. Der Rest des Inhalts des maskierten Elements wird nicht dargestellt.
-
- -

Formale Syntax

- -
{{csssyntax}}
- -

Beispiele

- -
.exampleone {
-  -webkit-mask-image: url('mask.png');
-  -webkit-mask-repeat: repeat-x;
-}
-
-.exampletwo {
-  -webkit-mask-image: url('mask.png');
-  -webkit-mask-repeat: no-repeat;
-}
-
- -

Unterstützung mehrerer Maskenbilder

- -

Für jedes Maskenbild kann ein unterschiedlicher <repeat-style> Wert angegeben werden, der durch Kommas getrennt wird:

- -
.examplethree {
-  -webkit-mask-image: url('mask1.png'), url('mask2.png');
-  -webkit-mask-repeat: repeat-x, repeat-y;
-}
-
- -

Jedes Bild wird dem zugehörigen Wiederholungsstil zugeordnet, vom zuerst bis zum zuletzt angegebenen.

- -

Browser Kompatibilität

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung1.0{{CompatNo}}{{CompatNo}}{{CompatNo}}4.0
-
- -
- - - - - - - - - - - - - - - - - - - -
MerkmalAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Grundlegende Unterstützung2.1{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}3.2
-
- -

Siehe auch

- -

{{cssxref("-webkit-mask")}}, {{cssxref("-webkit-mask-box-image")}}, {{cssxref("-webkit-mask-clip")}}, {{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-attachment")}}, {{cssxref("-webkit-mask-image")}}, {{cssxref("-webkit-mask-composite")}}

diff --git a/files/de/web/css/@media/aural/index.html b/files/de/web/css/@media/aural/index.html new file mode 100644 index 0000000000..37d115443e --- /dev/null +++ b/files/de/web/css/@media/aural/index.html @@ -0,0 +1,17 @@ +--- +title: aural +slug: Web/CSS/Aural +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/@media/aural +--- +
{{CSSRef}}{{obsolete_header("6.0")}}
+ +

Eine Mediengruppe definiert durch die CSS Standards.

+ +
+

Hinweis: Diese Mediengruppe wurde in Gecko nie vollständig implementiert und wurde in {{Gecko("6.0")}} entfernt.

+
+ +

 

diff --git a/files/de/web/css/_colon_-moz-placeholder/index.html b/files/de/web/css/_colon_-moz-placeholder/index.html deleted file mode 100644 index e4f65acf99..0000000000 --- a/files/de/web/css/_colon_-moz-placeholder/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: ':-moz-placeholder' -slug: 'Web/CSS/:-moz-placeholder' -tags: - - CSS - - CSS Pseudoklasse - - CSS Referenz - - Non-standard - - Platzhalter - - Selektoren -translation_of: 'Web/CSS/:placeholder-shown' -translation_of_original: 'Web/CSS/:-moz-placeholder' ---- -
Hinweis: Die :-moz-placeholder Pseudoklasse ist in Firefox 19 als veraltet markiert zugunsten des {{cssxref('::-moz-placeholder')}} Pseudoelements.
- -
Hinweis:Die CSSWG hat beschlossen, :placeholder-shown einzuführen. Diese Funktionalität wird in Gecko irgendwann in der Zukunft wieder eingeführt, ohne Präfix und unter dem neuen Namen. {{bug("1069012")}}
- -
{{deprecated_header}}{{Non-standard_header}}{{CSSRef}}
- -

Übersicht

- -

Die :-moz-placeholder Pseudoklasse repräsentiert ein Formularelement, das Platzhaltertext anzeigt. Dies erlaubt Webentwicklern und Themedesignern die Darstellung von Platzhaltertext anzupassen, welche standardmäßig einer hellgrauen Farbe entspricht. Dies ist in manchen Fällen unvorteilhaft, beispielsweise wenn der Hintergrundfarbe von Formularfeldern eine ähnliche Farbe zugewiesen wird. Hier kann die Pseudoklasse verwendet werden, um die Textfarbe des Platzhalters zu ändern.

- -

Beispiel

- -

Dieses Beispiel weist dem Platzhaltertext eine grüne Farbe zu.

- -
<!DOCTYPE html>
-<html>
-<head>
-  <title>Placeholder demo</title>
-  <style type="text/css">
-    input:-moz-placeholder {
-      color: green;
-    }
-  </style>
-</head>
-<body>
-  <input id="test" placeholder="Placeholder text!">
-</body>
-</html>
-
- -

Ergibt:

- -

{{EmbedLiveSample('Beispiel', '100%', 30)}}

- -

Überlauf

- -

Oft werden Suchfelder oder andere Formularelemente auf mobilen Geräten verkürzt dargestellt. Leider passt u. U. der Platzhaltertext eines {{HTMLElement("input")}} Elements in die Länge des Elements, was einen abgeschnittenen Text zur Folge hat. Um diese Darstellung zu verhindern, kann die CSS Eigenschaft text-overflow: ellipsis! verwendet werden, um den Text mit einer Ellipse abzuschließen.

- -
input[placeholder] { text-overflow: ellipsis; }
-::-moz-placeholder { text-overflow: ellipsis; } /* firefox 19+ */
-input:-moz-placeholder { text-overflow: ellipsis; }
-
- -

David Walsh hat dies in seinem Blog Eintrag "Placeholders and Overflow" beschrieben.

- -

Spezifikationen

- -

Nicht Teil einer Spezifikation.

- -

Browser Kompatibilität

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatNo}}{{CompatGeckoDesktop("2.0")}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - -
MerkmalAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

[1] Implementiert in {{bug("457801")}}.

- -

Siehe auch

- - diff --git a/files/de/web/css/_colon_-moz-ui-invalid/index.html b/files/de/web/css/_colon_-moz-ui-invalid/index.html deleted file mode 100644 index cc133a4d28..0000000000 --- a/files/de/web/css/_colon_-moz-ui-invalid/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: ':-moz-ui-invalid' -slug: 'Web/CSS/:-moz-ui-invalid' -tags: - - CSS - - CSS Referenz - - NeedsExample - - NeedsMobileBrowserCompatibility - - Non-standard - - Pseudoklasse -translation_of: 'Web/CSS/:user-invalid' ---- -
{{Non-standard_header}}{{CSSRef}}
- -

Übersicht

- -

Die :-moz-ui-invalid CSS Pseudoklasse repräsentiert jedes validierte Formularelement, dessen Wert nicht auf dessen Validierungsbeschränkungen basiert, unter bestimmten Umständen. Diese Pseudoklasse wird anhand der folgenden Regeln angewendet:

- - - -

Das Ergebnis ist, dass wenn das Steuerungselement gültig war als der Benutzer angefangen hat, mit ihm zu interagieren, das Gültigkeitsstyling nur geändert wird, falls der Benutzer den Fokus auf ein anderes Steuerungselement setzt. Falls der Benutzer jedoch versucht, einen zuvor markierten Wert zu korrigieren, zeigt das Steuerungselement sofort an, wenn der Wert gültig wird. Auf Pflichtfelder wird die Pseudoklasse nur angewendet, falls der Benutzer diese ändert oder versucht, einen unveränderten gültigen Wert abzuschicken.

- -

Standardmäßig wendet Gecko einen Stil an, der ein rotes "Leuchten" (unter Vernwendung der {{cssxref("box-shadow")}} Eigenschaft) um Felder erzeugt, die diese Pseudoklasse zugewiesen haben. Siehe die {{cssxref(":invalid")}} Pseudoklasse für ein Beispiel, das zeigt, wie der Standardstil überschrieben werden kann.

- -

Spezifikationen

- -

Nicht Teil einer Spezifikation.

- -

Browser Kompatibilität

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatNo}}{{CompatGeckoDesktop(2)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
MerkmalAndroidChrome für AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

Siehe auch

- - diff --git a/files/de/web/css/_colon_-webkit-autofill/index.html b/files/de/web/css/_colon_-webkit-autofill/index.html deleted file mode 100644 index 2030c723b3..0000000000 --- a/files/de/web/css/_colon_-webkit-autofill/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: ':-webkit-autofill' -slug: 'Web/CSS/:-webkit-autofill' -tags: - - CSS - - NeedsExample - - Non-standard - - Pseudoklasse - - Referenz -translation_of: 'Web/CSS/:-webkit-autofill' ---- -
{{CSSRef}}{{Non-standard_header}}
- -

Übersicht

- -

Die :-webkit-autofill CSS Pseudoklasse matcht, wenn der Wert eines {{HTMLElement("input")}} Elements durch den Browser vorausgefüllt wird.

- -

Hinweis: Die User Agent Stylesheets einiger Browser verwenden !important in ihren :-webkit-autofill Stildeklarationen, was sie durch Webseiten nicht überschreibbar macht, ohne dass auf JavaScript Hacks zurückgegriffen werden muss.

- -

Spezifikationen

- -

Nicht Teil einer Spezifikation.

- -

Browser Kompatibilität

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - -
MerkmalAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

Siehe auch

- - diff --git a/files/de/web/css/_colon_autofill/index.html b/files/de/web/css/_colon_autofill/index.html new file mode 100644 index 0000000000..2030c723b3 --- /dev/null +++ b/files/de/web/css/_colon_autofill/index.html @@ -0,0 +1,80 @@ +--- +title: ':-webkit-autofill' +slug: 'Web/CSS/:-webkit-autofill' +tags: + - CSS + - NeedsExample + - Non-standard + - Pseudoklasse + - Referenz +translation_of: 'Web/CSS/:-webkit-autofill' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Übersicht

+ +

Die :-webkit-autofill CSS Pseudoklasse matcht, wenn der Wert eines {{HTMLElement("input")}} Elements durch den Browser vorausgefüllt wird.

+ +

Hinweis: Die User Agent Stylesheets einiger Browser verwenden !important in ihren :-webkit-autofill Stildeklarationen, was sie durch Webseiten nicht überschreibbar macht, ohne dass auf JavaScript Hacks zurückgegriffen werden muss.

+ +

Spezifikationen

+ +

Nicht Teil einer Spezifikation.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_placeholder-shown/index.html b/files/de/web/css/_colon_placeholder-shown/index.html new file mode 100644 index 0000000000..e4f65acf99 --- /dev/null +++ b/files/de/web/css/_colon_placeholder-shown/index.html @@ -0,0 +1,121 @@ +--- +title: ':-moz-placeholder' +slug: 'Web/CSS/:-moz-placeholder' +tags: + - CSS + - CSS Pseudoklasse + - CSS Referenz + - Non-standard + - Platzhalter + - Selektoren +translation_of: 'Web/CSS/:placeholder-shown' +translation_of_original: 'Web/CSS/:-moz-placeholder' +--- +
Hinweis: Die :-moz-placeholder Pseudoklasse ist in Firefox 19 als veraltet markiert zugunsten des {{cssxref('::-moz-placeholder')}} Pseudoelements.
+ +
Hinweis:Die CSSWG hat beschlossen, :placeholder-shown einzuführen. Diese Funktionalität wird in Gecko irgendwann in der Zukunft wieder eingeführt, ohne Präfix und unter dem neuen Namen. {{bug("1069012")}}
+ +
{{deprecated_header}}{{Non-standard_header}}{{CSSRef}}
+ +

Übersicht

+ +

Die :-moz-placeholder Pseudoklasse repräsentiert ein Formularelement, das Platzhaltertext anzeigt. Dies erlaubt Webentwicklern und Themedesignern die Darstellung von Platzhaltertext anzupassen, welche standardmäßig einer hellgrauen Farbe entspricht. Dies ist in manchen Fällen unvorteilhaft, beispielsweise wenn der Hintergrundfarbe von Formularfeldern eine ähnliche Farbe zugewiesen wird. Hier kann die Pseudoklasse verwendet werden, um die Textfarbe des Platzhalters zu ändern.

+ +

Beispiel

+ +

Dieses Beispiel weist dem Platzhaltertext eine grüne Farbe zu.

+ +
<!DOCTYPE html>
+<html>
+<head>
+  <title>Placeholder demo</title>
+  <style type="text/css">
+    input:-moz-placeholder {
+      color: green;
+    }
+  </style>
+</head>
+<body>
+  <input id="test" placeholder="Placeholder text!">
+</body>
+</html>
+
+ +

Ergibt:

+ +

{{EmbedLiveSample('Beispiel', '100%', 30)}}

+ +

Überlauf

+ +

Oft werden Suchfelder oder andere Formularelemente auf mobilen Geräten verkürzt dargestellt. Leider passt u. U. der Platzhaltertext eines {{HTMLElement("input")}} Elements in die Länge des Elements, was einen abgeschnittenen Text zur Folge hat. Um diese Darstellung zu verhindern, kann die CSS Eigenschaft text-overflow: ellipsis! verwendet werden, um den Text mit einer Ellipse abzuschließen.

+ +
input[placeholder] { text-overflow: ellipsis; }
+::-moz-placeholder { text-overflow: ellipsis; } /* firefox 19+ */
+input:-moz-placeholder { text-overflow: ellipsis; }
+
+ +

David Walsh hat dies in seinem Blog Eintrag "Placeholders and Overflow" beschrieben.

+ +

Spezifikationen

+ +

Nicht Teil einer Spezifikation.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatNo}}{{CompatGeckoDesktop("2.0")}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Implementiert in {{bug("457801")}}.

+ +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_user-invalid/index.html b/files/de/web/css/_colon_user-invalid/index.html new file mode 100644 index 0000000000..cc133a4d28 --- /dev/null +++ b/files/de/web/css/_colon_user-invalid/index.html @@ -0,0 +1,94 @@ +--- +title: ':-moz-ui-invalid' +slug: 'Web/CSS/:-moz-ui-invalid' +tags: + - CSS + - CSS Referenz + - NeedsExample + - NeedsMobileBrowserCompatibility + - Non-standard + - Pseudoklasse +translation_of: 'Web/CSS/:user-invalid' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Übersicht

+ +

Die :-moz-ui-invalid CSS Pseudoklasse repräsentiert jedes validierte Formularelement, dessen Wert nicht auf dessen Validierungsbeschränkungen basiert, unter bestimmten Umständen. Diese Pseudoklasse wird anhand der folgenden Regeln angewendet:

+ + + +

Das Ergebnis ist, dass wenn das Steuerungselement gültig war als der Benutzer angefangen hat, mit ihm zu interagieren, das Gültigkeitsstyling nur geändert wird, falls der Benutzer den Fokus auf ein anderes Steuerungselement setzt. Falls der Benutzer jedoch versucht, einen zuvor markierten Wert zu korrigieren, zeigt das Steuerungselement sofort an, wenn der Wert gültig wird. Auf Pflichtfelder wird die Pseudoklasse nur angewendet, falls der Benutzer diese ändert oder versucht, einen unveränderten gültigen Wert abzuschicken.

+ +

Standardmäßig wendet Gecko einen Stil an, der ein rotes "Leuchten" (unter Vernwendung der {{cssxref("box-shadow")}} Eigenschaft) um Felder erzeugt, die diese Pseudoklasse zugewiesen haben. Siehe die {{cssxref(":invalid")}} Pseudoklasse für ein Beispiel, das zeigt, wie der Standardstil überschrieben werden kann.

+ +

Spezifikationen

+ +

Nicht Teil einer Spezifikation.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatNo}}{{CompatGeckoDesktop(2)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
MerkmalAndroidChrome für AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/css/_doublecolon_-moz-placeholder/index.html b/files/de/web/css/_doublecolon_-moz-placeholder/index.html deleted file mode 100644 index eb6775111e..0000000000 --- a/files/de/web/css/_doublecolon_-moz-placeholder/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: '::-moz-placeholder' -slug: 'Web/CSS/::-moz-placeholder' -tags: - - CSS - - CSS Pseudo-class - - CSS Reference - - Non-standard -translation_of: 'Web/CSS/::placeholder' -translation_of_original: 'Web/CSS/::-moz-placeholder' ---- -
{{Non-standard_header}}{{CSSRef}}
- -
Hinweis: Das Pseudoelement ::-moz-placeholder wurde eingeführt, um die Pseudoklasse {{cssxref(":-moz-placeholder")}}, die in Firefox 19 als veraltet eingestuft wurde, zu ersetzen.
- -

Übersicht

- -

Das ::-moz-placeholder Pseudoelement repräsentiert Formularelemente, die Platzhaltertexte anzeigen. Damit können Webentwickler und Theme Designer die Darstellung von Platzhaltertexten anpassen.

- -

Standardmäßig wird {{cssxref("opacity")}}: 0.54 verwendet. Sollten Sie die Hintergrundfarbe der Formularelemente angepasst haben (beispielsweise in einen ähnlichen Farbton), so kann es sein, dass der Platzhaltertext nicht gut sichtbar ist. In diesem Fall können Sie mit ::-moz-placeholder die Textdarstellung des Platzhaltertextes ändern.

- -

Beispiel

- -

Das folgende Beispiel färbt den Platzhaltertext grün.

- -

HTML Inhalt

- -
<input id="test" placeholder="Platzhaltertext!">
-
- -

CSS Inhalt

- -
input::-moz-placeholder {
-  color: green;
-}
-
- -

Das Ergebnis sieht folgendermaßen aus:

- -

{{EmbedLiveSample('Beispiel')}}

- -

Spezifikationen

- -

Nicht Teil einer Spezifikation.

- -

Browser Kompatibilität

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung{{CompatUnknown}}{{CompatGeckoDesktop("19.0")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
MerkmalAndroidFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatUnknown}}{{CompatGeckoMobile("19.0")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

[1] Firefox verwendet standardmäßig {{cssxref("opacity")}}: 0.54 für Platzhaltertexte. Siehe {{Bug("556145")}}. Die meisten anderen Browser verwenden momentan andere Standards für ihre Platzhalter Pseudoelemente oder Pseudoklassen.

- -

Gecko hat dies zuvor als {{cssxref(":-moz-placeholder")}} Pseudoklasse implementiert. Siehe {{Bug("737786")}}.

- -

Siehe auch

- - diff --git a/files/de/web/css/actual_value/index.html b/files/de/web/css/actual_value/index.html new file mode 100644 index 0000000000..5e77670cac --- /dev/null +++ b/files/de/web/css/actual_value/index.html @@ -0,0 +1,36 @@ +--- +title: tatsächlicher Wert +slug: Web/CSS/tatsächlicher_Wert +translation_of: Web/CSS/actual_value +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Der tatsächliche Wert einer CSS Eigenschaft ist der verwendete Wert nachdem alle Annäherungen angewendet wurden. Zum Beispiel kann ein User Agent nur in der Lage sein, Ränder mit einem ganzzahligen Pixelwert darzustellen und daher gezwungen sein, die berechnete Breite des Randes anzunähern.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS2.1', 'cascade.html#actual-value', 'actual value')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition
+ +

Siehe auch

+ + diff --git a/files/de/web/css/adjacent_sibling_combinator/index.html b/files/de/web/css/adjacent_sibling_combinator/index.html new file mode 100644 index 0000000000..b5ff92dda2 --- /dev/null +++ b/files/de/web/css/adjacent_sibling_combinator/index.html @@ -0,0 +1,88 @@ +--- +title: Angrenzende Geschwisterselektoren +slug: Web/CSS/Angrenzende_Geschwisterselektoren +tags: + - CSS + - CSS Referenz + - NeedsMobileBrowserCompatibility + - Selectors + - Selektoren +translation_of: Web/CSS/Adjacent_sibling_combinator +--- +

{{CSSRef("Selectors")}}

+ +

Dies wird Nachbar- oder Nächstes-Geschwister-Element-Selektor genannt. Er selektiert nur das angegebene Element, das dem zuvor angegebenen Element direkt folgt.

+ +

Syntax

+ +
vorheriges_Element + Zielelement { Stileigenschaften }
+
+ +

Beispiel

+ +
li:first-of-type + li {
+  color: red;
+}
+
+ +
<ul>
+  <li>One</li>
+  <li>Two</li>
+  <li>Three</li>
+</ul>
+ +

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

+ +

Ein weiterer Anwendungsfall ist das Stylen von "Beschriftungs-spans" der darauffolgenden {{HTMLElement("img")}} Elemente:

+ +
img + span.caption {
+  font-style: italic;
+}
+
+ +

matcht die folgenden {{HTMLElement("span")}} Elemente:

+ +
<img src="photo1.jpg"><span class="caption">The first photo</span>
+<img src="photo2.jpg"><span class="caption">The second photo</span>
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#adjacent-sibling-combinators', 'next-sibling combinator')}}{{Spec2('CSS4 Selectors')}} 
{{SpecName('CSS3 Selectors', '#adjacent-sibling-combinators', 'Adjacent sibling combinator')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#adjacent-selectors', 'Adjacent sibling selectors')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.adjacent_sibling")}} + +

[1] Internet Explorer 7 aktualisiert den Style nicht korrekt, wenn ein Element dynamisch vor einem Element platziert wurde, das auf den Selektor gepasst hat. Wenn in Internet Explorer 8 ein Element durch Klick auf einen Link dynamisch eingefügt wird, wird der :first-child-Stil nicht angewandt bis der Link den Fokus verliert.

+ +

Siehe auch

+ + diff --git a/files/de/web/css/alias/index.html b/files/de/web/css/alias/index.html deleted file mode 100644 index abed12bcdf..0000000000 --- a/files/de/web/css/alias/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: alias -slug: Web/CSS/Alias -tags: - - CSS -translation_of: Web/CSS/cursor -translation_of_original: Web/CSS/Alias ---- -

Der alias {{cssxref("cursor")}} Wert wird verwendet, um einen Alias oder ein Kürzel zu etwas, das erstellt wird, zu kennzeichnen. Der Aliaszeiger wird als ein Pfeil mit einem kleinen kurvigen Pfeil daneben dargestellt.

- -

In Windows könnte der alias Zeiger so aussehen: Image:Cursor-moz_alias.png

diff --git a/files/de/web/css/angrenzende_geschwisterselektoren/index.html b/files/de/web/css/angrenzende_geschwisterselektoren/index.html deleted file mode 100644 index b5ff92dda2..0000000000 --- a/files/de/web/css/angrenzende_geschwisterselektoren/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: Angrenzende Geschwisterselektoren -slug: Web/CSS/Angrenzende_Geschwisterselektoren -tags: - - CSS - - CSS Referenz - - NeedsMobileBrowserCompatibility - - Selectors - - Selektoren -translation_of: Web/CSS/Adjacent_sibling_combinator ---- -

{{CSSRef("Selectors")}}

- -

Dies wird Nachbar- oder Nächstes-Geschwister-Element-Selektor genannt. Er selektiert nur das angegebene Element, das dem zuvor angegebenen Element direkt folgt.

- -

Syntax

- -
vorheriges_Element + Zielelement { Stileigenschaften }
-
- -

Beispiel

- -
li:first-of-type + li {
-  color: red;
-}
-
- -
<ul>
-  <li>One</li>
-  <li>Two</li>
-  <li>Three</li>
-</ul>
- -

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

- -

Ein weiterer Anwendungsfall ist das Stylen von "Beschriftungs-spans" der darauffolgenden {{HTMLElement("img")}} Elemente:

- -
img + span.caption {
-  font-style: italic;
-}
-
- -

matcht die folgenden {{HTMLElement("span")}} Elemente:

- -
<img src="photo1.jpg"><span class="caption">The first photo</span>
-<img src="photo2.jpg"><span class="caption">The second photo</span>
-
- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#adjacent-sibling-combinators', 'next-sibling combinator')}}{{Spec2('CSS4 Selectors')}} 
{{SpecName('CSS3 Selectors', '#adjacent-sibling-combinators', 'Adjacent sibling combinator')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#adjacent-selectors', 'Adjacent sibling selectors')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition
- -

Browser Kompatibilität

- -{{Compat("css.selectors.adjacent_sibling")}} - -

[1] Internet Explorer 7 aktualisiert den Style nicht korrekt, wenn ein Element dynamisch vor einem Element platziert wurde, das auf den Selektor gepasst hat. Wenn in Internet Explorer 8 ein Element durch Klick auf einen Link dynamisch eingefügt wird, wird der :first-child-Stil nicht angewandt bis der Link den Fokus verliert.

- -

Siehe auch

- - diff --git a/files/de/web/css/attribute_selectors/index.html b/files/de/web/css/attribute_selectors/index.html new file mode 100644 index 0000000000..a4b6449af3 --- /dev/null +++ b/files/de/web/css/attribute_selectors/index.html @@ -0,0 +1,122 @@ +--- +title: Attributselektoren +slug: Web/CSS/Attributselektoren +tags: + - Anfänger + - CSS + - Reference + - Selectors +translation_of: Web/CSS/Attribute_selectors +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Attributselektoren wählen Elemente anhand des Vorhandenseins oder Wertes eines Attributs aus.

+ +
+
[attr]
+
Repräsentiert ein Element mit einem Attribut attr.
+
[attr=wert]
+
Repräsentiert ein Element mit einem Attribut attr, welches exakt den Wert „wert“ enthält.
+
[attr~=wert]
+
Repräsentiert ein Element mit einem Attribut attr, welches eine Liste mit durch Leerraum getrennten Wörtern enthält, von denen eines exakt dem Wert „wert“ entspricht.
+
[attr|=wert]
+
Repräsentiert ein Element mit einem Attribut attr. Es kann exakt den Wert „wert“ enthalten oder mit einem Wert „wert“ beginnen, dem ein „-“ (U+002D) folgt. Es kann benutzt werden, um anhand von Sprachsubcodes Elemente auszuwählen.
+
[attr^=wert]
+
Repräsentiert ein Element mit einem Attribut attr, dessen Wert mit „wert“ beginnt.
+
[attr$=wert]
+
Repräsentiert ein Element mit einem Attribut attr, dessen Wert mit „wert“ endet.
+
[attr*=wert]
+
Repräsentiert ein Element mit einem Attribut attr, dessen Wert mindestens einmal „wert“ enthält.
+
[attr operator wert i]
+
Wenn ein i vor der schließenden Klammer eingefügt wird, wird ein Vergleich ohne Berücksichtigung der Groß-/Kleinschreibung (für Zeichen innerhalb des ASCII Bereichs) durchgeführt.
+
+ +

Beispiele

+ +
/* Alle span-Elemente mit dem „lang“-Attribut sind fett */
+span[lang] {font-weight:bold;}
+
+/* Alle span-Elemente in Portugiesisch sind grün */
+span[lang="pt"] {color:green;}
+
+/* Alle span-Elemente in amerikanischem Englisch sind blau  */
+span[lang~="en-us"] {color: blue;}
+
+/* Alle span-Elemente sowohl in vereinfachtem (zh-CN) als auch traditionellem (zh-TW) Chinesisch sind rot */
+span[lang|="zh"] {color: red;}
+
+/* Alle internen Links haben einen goldenen Hintergrund */
+a[href^="#"] {background-color:gold}
+
+/* Alle Links zu mit „.cn“ endenden URLs sind rot */
+a[href$=".cn"] {color: red;}
+
+/* Alle Links zu URLs, die „beispiel“ enthalten, haben einen grauen Hintergrund */
+a[href*="beispiel"] {background-color: #CCCCCC;}
+
+/* Alle email Eingabefelder haben einen blauen Rahmen */
+/* Das matcht jede Großschreibung von "email", z. B. "email", "EMAIL", "eMaIL", etc. */
+input[type="email" i] {border-color: blue;}
+
+ +
<div class="hallo-beispiel">
+    <a href="http://example.com">English:</a>
+    <span lang="en-us en-gb en-au en-nz">Hallo Welt!</span>
+</div>
+<div class="hallo-beispiel">
+    <a href="#portugiesisch">Portugiesisch:</a>
+    <span lang="pt">Olá Mundo!</span>
+</div>
+<div class="hallo-beispiel">
+    <a href="http://example.cn">Chinesisch (Vereinfacht):</a>
+    <span lang="zh-CN">世界您好！</span>
+</div>
+<div class="hallo-beispiel">
+    <a href="http://example.cn">Chinesisch (Traditionell):</a>
+    <span lang="zh-TW">世界您好！</span>
+</div>
+
+ +

{{EmbedLiveSample('Beispiele', 250, 100)}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS4 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS4 Selectors')}}Hat den Modifizierer für ASCII schreibungsunabhängige Attributwertselektierung hinzugefügt.
{{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.attribute")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/attributselektoren/index.html b/files/de/web/css/attributselektoren/index.html deleted file mode 100644 index a4b6449af3..0000000000 --- a/files/de/web/css/attributselektoren/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: Attributselektoren -slug: Web/CSS/Attributselektoren -tags: - - Anfänger - - CSS - - Reference - - Selectors -translation_of: Web/CSS/Attribute_selectors ---- -
{{CSSRef}}
- -

Übersicht

- -

Attributselektoren wählen Elemente anhand des Vorhandenseins oder Wertes eines Attributs aus.

- -
-
[attr]
-
Repräsentiert ein Element mit einem Attribut attr.
-
[attr=wert]
-
Repräsentiert ein Element mit einem Attribut attr, welches exakt den Wert „wert“ enthält.
-
[attr~=wert]
-
Repräsentiert ein Element mit einem Attribut attr, welches eine Liste mit durch Leerraum getrennten Wörtern enthält, von denen eines exakt dem Wert „wert“ entspricht.
-
[attr|=wert]
-
Repräsentiert ein Element mit einem Attribut attr. Es kann exakt den Wert „wert“ enthalten oder mit einem Wert „wert“ beginnen, dem ein „-“ (U+002D) folgt. Es kann benutzt werden, um anhand von Sprachsubcodes Elemente auszuwählen.
-
[attr^=wert]
-
Repräsentiert ein Element mit einem Attribut attr, dessen Wert mit „wert“ beginnt.
-
[attr$=wert]
-
Repräsentiert ein Element mit einem Attribut attr, dessen Wert mit „wert“ endet.
-
[attr*=wert]
-
Repräsentiert ein Element mit einem Attribut attr, dessen Wert mindestens einmal „wert“ enthält.
-
[attr operator wert i]
-
Wenn ein i vor der schließenden Klammer eingefügt wird, wird ein Vergleich ohne Berücksichtigung der Groß-/Kleinschreibung (für Zeichen innerhalb des ASCII Bereichs) durchgeführt.
-
- -

Beispiele

- -
/* Alle span-Elemente mit dem „lang“-Attribut sind fett */
-span[lang] {font-weight:bold;}
-
-/* Alle span-Elemente in Portugiesisch sind grün */
-span[lang="pt"] {color:green;}
-
-/* Alle span-Elemente in amerikanischem Englisch sind blau  */
-span[lang~="en-us"] {color: blue;}
-
-/* Alle span-Elemente sowohl in vereinfachtem (zh-CN) als auch traditionellem (zh-TW) Chinesisch sind rot */
-span[lang|="zh"] {color: red;}
-
-/* Alle internen Links haben einen goldenen Hintergrund */
-a[href^="#"] {background-color:gold}
-
-/* Alle Links zu mit „.cn“ endenden URLs sind rot */
-a[href$=".cn"] {color: red;}
-
-/* Alle Links zu URLs, die „beispiel“ enthalten, haben einen grauen Hintergrund */
-a[href*="beispiel"] {background-color: #CCCCCC;}
-
-/* Alle email Eingabefelder haben einen blauen Rahmen */
-/* Das matcht jede Großschreibung von "email", z. B. "email", "EMAIL", "eMaIL", etc. */
-input[type="email" i] {border-color: blue;}
-
- -
<div class="hallo-beispiel">
-    <a href="http://example.com">English:</a>
-    <span lang="en-us en-gb en-au en-nz">Hallo Welt!</span>
-</div>
-<div class="hallo-beispiel">
-    <a href="#portugiesisch">Portugiesisch:</a>
-    <span lang="pt">Olá Mundo!</span>
-</div>
-<div class="hallo-beispiel">
-    <a href="http://example.cn">Chinesisch (Vereinfacht):</a>
-    <span lang="zh-CN">世界您好！</span>
-</div>
-<div class="hallo-beispiel">
-    <a href="http://example.cn">Chinesisch (Traditionell):</a>
-    <span lang="zh-TW">世界您好！</span>
-</div>
-
- -

{{EmbedLiveSample('Beispiele', 250, 100)}}

- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('CSS4 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS4 Selectors')}}Hat den Modifizierer für ASCII schreibungsunabhängige Attributwertselektierung hinzugefügt.
{{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition
- -

Browser Kompatibilität

- -{{Compat("css.selectors.attribute")}} - -

Siehe auch

- - diff --git a/files/de/web/css/aural/index.html b/files/de/web/css/aural/index.html deleted file mode 100644 index 37d115443e..0000000000 --- a/files/de/web/css/aural/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: aural -slug: Web/CSS/Aural -tags: - - CSS - - CSS Referenz -translation_of: Web/CSS/@media/aural ---- -
{{CSSRef}}{{obsolete_header("6.0")}}
- -

Eine Mediengruppe definiert durch die CSS Standards.

- -
-

Hinweis: Diese Mediengruppe wurde in Gecko nie vollständig implementiert und wurde in {{Gecko("6.0")}} entfernt.

-
- -

 

diff --git a/files/de/web/css/auto/index.html b/files/de/web/css/auto/index.html deleted file mode 100644 index 9279631046..0000000000 --- a/files/de/web/css/auto/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: auto -slug: Web/CSS/auto -translation_of: Web/CSS/width -translation_of_original: Web/CSS/auto ---- -
- {{CSSRef}}
-

Übersicht

-

auto ist ein Wert, der vom jeweiligen user agent definiert wird. Das Ergebnies variert von Eigenschaft zu Eigenschaft.

-

Verwendet in

- diff --git a/files/de/web/css/berechneter_wert/index.html b/files/de/web/css/berechneter_wert/index.html deleted file mode 100644 index d98a8be023..0000000000 --- a/files/de/web/css/berechneter_wert/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: Berechneter Wert -slug: Web/CSS/berechneter_Wert -tags: - - CSS - - Guide - - Web -translation_of: Web/CSS/computed_value ---- -
- {{cssref}}
-

Übersicht

-

Der berechnete Wert einer CSS Eigenschaft wird aus dem angegebenen Wert berechnet durch:

- -

Die Berechnung, die benötigt wird, um den "berechneten Wert" für die Eigenschaft zu erreichen, beinhaltet typischerweise die Konvertierung relativer Werte (wie die in em Einheiten oder Prozentangaben) zu absoluten Werten.

-

Wenn zum Beispiel ein Element einen Wert font-size:16px und padding-top:2em definiert hat, dann ist der berechnete Wert von padding-top gleich 32px (zweimal die Schriftgröße).

-

Für einige Eigenschaften jedoch (jene, für die Prozentangaben relativ zu etwas sind, das Layout zur Bestimmung benötigt, wie width, margin-right, text-indent und top), werden definierte Prozentwerte zu berechneten Prozentwerten. Des weiteren werden in line-height definierte einheitenlose Zahlen zu berechneten Werten, wie angegeben. Diese relativen Werte, die im berechneten Wert gleich bleiben, werden absolut sobald der benutzte Wert ermittelt wird.

-

Der Hauptnutzen des berechneten Wertes (außer als ein Schritt zwischen dem angegebenen Wert und dem benutzten Wert) ist Vererbung inklusive dem {{ cssxref("inherit") }} Schlüsselwort.

-

Hinweis

-

Die {{domxref("Window.getComputedStyle", "getComputedStyle()")}} DOM API gibt den aufgelösten Wert zurück, welcher abhängig von der Eigenschaft entweder der berechnete Wert oder der benutzte Wert ist.

-

Spezifikation

- -

Siehe auch

- diff --git a/files/de/web/css/box-flex/index.html b/files/de/web/css/box-flex/index.html new file mode 100644 index 0000000000..8c54ffa75a --- /dev/null +++ b/files/de/web/css/box-flex/index.html @@ -0,0 +1,103 @@ +--- +title: '-moz-box-flex' +slug: Web/CSS/-moz-box-flex +tags: + - CSS + - CSS Referenz + - NeedsBrowserCompatibility + - NeedsMobileBrowserCompatibility + - Non-standard +translation_of: Web/CSS/box-flex +--- +
{{CSSRef}}{{warning("Dies ist eine Eigenschaft zur Steuerung von Teilen des XUL Boxmodells. Sie stimmt weder mit den alten CSS Flexible Box Layout Module Entwürfen für box-flex (welche auf dieser Eigenschaft beruhen), noch dem Verhalten von -webkit-box-flex (welche auf diesen Entwürfen beruht) überein.")}}
+ +

Siehe Flexbox für mehr Informationen, was anstelle dieser Eigenschaft verwendet werden sollte.

+ +

Übersicht

+ +

Die -moz-box-flex und -webkit-box-flex CSS Eigenschaften geben an, wie eine -moz-box oder -webkit-box wächst, um die Box zu füllen, die sie beinhaltet, in Richtung des Layouts der beinhaltenden Box. Siehe Flexbox für mehr Informationen über die Eigenschaften von Flexbox-Elementen.

+ +

Syntax

+ +
/* <number> Werte */
+-moz-box-flex: 0;
+-moz-box-flex: 3;
+-webkit-box-flex: 0;
+-webkit-box-flex: 3;
+
+/* Globale Werte */
+-moz-box-flex: inherit;
+-moz-box-flex: initial;
+-moz-box-flex: unset;
+
+ +

Werte

+ +
+
0
+
Die Box wächst nicht.
+
> 0
+
Die Box wächst soweit, dass sie den verfügbaren Raum ausfüllt.
+
+ +

Beispiele

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <title>-moz-box-flex example</title>
+    <style>
+      div.example {
+        display: -moz-box;
+        display: -webkit-box;
+        border: 1px solid black;
+        width: 100%;
+      }
+      div.example > p:nth-child(1) {
+        -moz-box-flex: 1;       /* Mozilla */
+        -webkit-box-flex: 1;    /* WebKit */
+        border: 1px solid black;
+      }
+      div.example > p:nth-child(2) {
+        -moz-box-flex: 0;       /* Mozilla */
+        -webkit-box-flex: 0;    /* WebKit */
+        border: 1px solid black;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="example">
+      <p>Ich wachse, um den zusätzlichen Raum auszufüllen.</p>
+      <p>Ich wachse nicht.</p>
+    </div>
+  </body>
+</html>
+
+ +

Hinweise

+ +

Die beinhaltende Box teilt den zur Verfügung stehenden zusätzlichen Abstand proportional zum Flexwert jedes Inhaltselements auf.

+ +

Inhaltselemente, die null als Flexwert haben, vergrößern sich nicht.

+ +

Falls nur ein Inhaltselement einen Flexwert hat, der nicht null ist, vergrößert es sich, um den verfügbaren Raum auszufüllen.

+ +

Inhaltselemente, die den gleichen Flexwert haben, vergrößern sich um den gleichen absoluten Betrag.

+ +

Falls der Flexwert über das flex Elementattribut gesetzt wird, wird der Stil ignoriert.

+ +

Um XUL Elemente innerhalb einer Box gleich groß zu machen, muss das equalsize Attribut der beinhaltenden Box auf den Wert always gesetzt werden. Dieses Attribut hat keine entsprechende CSS Eigenschaft.

+ +

Ein Trick, um alle Inhaltselemente in einer beinhaltenden Box gleich groß zu machen, ist, allen eine feste Größe (z. B. height: 0;) und denselben box-flex Wert größer als null zu geben (z. B. -moz-box-flex: 1).

+ +

Spezifikationen

+ +

Diese Eigenschaft ist eine nicht standardisierte Erweiterung. Es gab einen alten Entwurf der CSS3 Flexbox Spezifikation, der eine box-flex Eigenschaft definiert hat, aber dieser Entwurf ist mittlerweile überholt.

+ +

Browser Kompatibilität

+ +

{{Compat("css.properties.box-flex")}}

+ +

Siehe auch

+ +

{{cssxref("-moz-box-orient")}}, {{cssxref("-moz-box-pack")}}, {{cssxref("-moz-box-direction")}}, {{cssxref("flex")}}

diff --git a/files/de/web/css/box-ordinal-group/index.html b/files/de/web/css/box-ordinal-group/index.html new file mode 100644 index 0000000000..5b99280453 --- /dev/null +++ b/files/de/web/css/box-ordinal-group/index.html @@ -0,0 +1,67 @@ +--- +title: '-moz-box-ordinal-group' +slug: Web/CSS/-moz-box-ordinal-group +tags: + - CSS + - CSS Referenz + - 'CSS:Mozilla Erweiterungen' + - Flexible Box + - Non-standard +translation_of: Web/CSS/box-ordinal-group +translation_of_original: Web/CSS/-moz-box-ordinal-group +--- +

{{CSSRef}}
+ {{warning("Dies ist eine Eigenschaft des ursprünglichen CSS Flexible Box Entwurfs und wurde in neueren Entwürfen ersetzt.")}}

+ +

Siehe Flexbox für mehr Informationen, was statt dieser Eigenschaft verwendet werden sollte.

+ +

Übersicht

+ +

Kennzeichnet die Aufzählungsgruppe, zu der das Element gehört. Elemente mit einer geringeren Aufzählungsgruppe werden vor denen mit höherer Aufzählungsgruppe angezeigt.

+ +

Werte

+ +

Werte müssen Ganzzahlen größer als null sein. Der Standardwert für diese Eigenschaft ist 1.

+ +

Beispiele

+ +
<style type="text/css">
+  #Flexbox {
+    display: -ms-box;
+    display: -moz-box;
+    display: -webkit-box;
+  }
+
+  #text1 {
+    background: red;
+    -ms-box-ordinal-group: 4;
+    -moz-box-ordinal-group: 4;
+    -webkit-box-ordinal-group: 4;
+  }
+
+  #text2 {
+    background: green;
+    -ms-box-ordinal-group: 3;
+    -moz-box-ordinal-group: 3;
+    -webkit-box-ordinal-group: 3;
+  }
+
+  #text3 {
+    background: blue;
+    -ms-box-ordinal-group: 2;
+    -moz-box-ordinal-group: 2;
+    -webkit-box-ordinal-group: 2;
+  }
+
+  #text4 {
+    background: orange;
+  }
+</style>
+
+<div id="Flexbox">
+  <div id="text1">text 1</div>
+  <div id="text2">text 2</div>
+  <div id="text3">text 3</div>
+  <div id="text4">text 4</div>
+</div>
+
diff --git a/files/de/web/css/box-pack/index.html b/files/de/web/css/box-pack/index.html new file mode 100644 index 0000000000..517c6fce72 --- /dev/null +++ b/files/de/web/css/box-pack/index.html @@ -0,0 +1,136 @@ +--- +title: '-moz-box-pack' +slug: Web/CSS/-moz-box-pack +tags: + - CSS + - CSS Eigenschaft + - CSS Referenz + - Layout + - Non-standard +translation_of: Web/CSS/box-pack +--- +
{{CSSRef}}{{warning("Dies ist eine Eigenschaft des ursprünglichen CSS Flexible Box Layout Moduls, welches durch einen neuen Standard ersetzt wurde.")}}
+ +

Siehe Flexbox für mehr Informationen.

+ +

Übersicht

+ +

Die -moz-box-pack und -webkit-box-pack CSS Eigenschaften bestimmen, wie ein -moz-box oder -webkit-box seine Inhalte in Richtung seines Layouts packt.  Die Wirkung dieser Eigenschaft ist nur sichtbar, falls es zusätzlichen Leerraum innerhalb der Box gibt. Siehe Flexbox für mehr Informationen bezüglich den Eigenschaften von Flexbox-Elementen.

+ +

Die Richtung des Layouts hängt von der Ausrichtung des Elements ab: horizontal oder vertikal.

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* Schlüsselwortwerte */
+-moz-box-pack: start;
+-moz-box-pack: center;
+-moz-box-pack: end;
+-moz-box-pack: justify;
+
+/* Globale Werte */
+-moz-box-pack: inherit;
+-moz-box-pack: initial;
+-moz-box-pack: unset;
+
+ +

Werte

+ +
+
start
+
Die Box packt Inhalte am Anfang und lässt eventuellen zusätzlichen Leerraum am Ende.
+
center
+
Die Box packt Inhalte in der Mitte und teilt eventuellen zusätzlichen Leerraum zwischen Start und Ende auf.
+
end
+
Die Box packt Inhalte am Ende und lässt eventuellen zusätzlichen Leerraum am Start.
+
justify
+
Der Leerraum wird gleichmäßig zwischen jedem Kind aufgeteilt, wobei kein zusätzlicher Leerraum vor dem ersten Kind oder nach dem letzten Kind platziert wird. Falls es nur ein Kind gibt, wird der Wert so behandelt, als ob er start wäre.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +
div.example {
+  border-style: solid;
+
+  display: -moz-box; /* Mozilla */
+  display: -webkit-box; /* WebKit */
+
+  /* Make this box taller than the children,
+     so there is room for the box-pack */
+  height: 300px;
+  /* Make this box wide enough to show the contents
+     are centered horizontally */
+  width: 300px;
+
+  /* Children should be oriented vertically */
+  -moz-box-orient: vertical; /* Mozilla */
+  -webkit-box-orient: vertical; /* WebKit */
+
+  /* Align children to the horizontal center of this box */
+  -moz-box-align: center; /* Mozilla */
+  -webkit-box-align: center; /* WebKit */
+
+  /* Pack children to the bottom of this box */
+  -moz-box-pack: end;             /* Mozilla */
+  -webkit-box-pack: end;          /* WebKit */
+}
+
+div.example p {
+  /* Make children narrower than their parent,
+     so there is room for the box-align */
+  width: 200px;
+}
+
+ +
<div class="example">
+  <p>I will be second from the bottom of div.example, centered horizontally.</p>
+  <p>I will be on the bottom of div.example, centered horizontally.</p>
+</div>
+
+ +

{{EmbedLiveSample('Beispiele', 310, 310)}}

+ +

Hinweise

+ +

Der Rand der Box, die als Start zum Packen bestimmt wird, hängt von der Ausrichtung der Box und deren Richtung ab:

+ + + + + + + + + + + + + + + + + + + +
 NormalUmgekehrt
Horizontallinksrechts
Vertikalobenunten
+ +

Der dem Start gegenüberliegende Rand wird als das Ende bestimmt.

+ +

Falls das Packen durch das pack Elementattribut gesetzt wird, wird die Stileigenschaft ignoriert.

+ +

Spezifikationen

+ +

Diese Eigenschaft ist nicht standardisiert, jedoch erschien eine ähnliche Eigenschaft in einem frühen Entwurf von CSS3 Flexbox, die durch neuere Versionen der Spezifikation überholt wurde.

+ +

Browser Kompatibilität

+ +{{Compat("css.properties.box-pack")}} + +

Siehe auch

+ +

{{cssxref("box-orient")}}, {{cssxref("box-direction")}}, {{cssxref("box-align")}}

diff --git a/files/de/web/css/child_combinator/index.html b/files/de/web/css/child_combinator/index.html new file mode 100644 index 0000000000..2e351964ed --- /dev/null +++ b/files/de/web/css/child_combinator/index.html @@ -0,0 +1,90 @@ +--- +title: Kindselektoren +slug: Web/CSS/Kindselektoren +tags: + - CSS + - CSS Referenz + - Einsteiger + - NeedsMobileBrowserCompatibility + - Selektoren +translation_of: Web/CSS/Child_combinator +--- +
{{CSSRef("Selectors")}}
+ +
Der Kindkombinator (>) wird zwischen zwei CSS-Selektoren platziert. Er wählt nur die Elemente aus, die vom zweiten Selektor gewählt werden, die Kinder vom ersten gewählten Element sind.
+ +
 
+ +
+
/* Listenpunkte, die Kinder der "my-things" Liste sind */
+ul.my-things > li {
+  margin: 2em;
+}
+ +

Elemente, die vom zweiten Selektor gewählt werden, müssen direkte Kinder des ersten gewählten Elements sein. Dies ist strenger, als der Nachfahrenselektor, der alle Elemente auswählt, die vom zweiten Selektor gewählt werden, für die ein Vorfahrenelement existieren, unabhängig der Anzahl der "Sprünge" aufwärts des DOM.

+
+ +

Syntax

+ +
selector1 > selector2 { Stileigenschaften }
+
+ +

Beispiel

+ +

CSS

+ +
span {
+  background-color: white;
+}
+
+div > span {
+  background-color: DodgerBlue;
+}
+
+ +

HTML

+ +
<div>
+  <span>Span 1. Innerhalb des Divs.
+    <span>Span 2. Innerhalb des Spans, der sich im Div befindet.</span>
+  </span>
+</div>
+<span>Span 3. In keinem Div.</span>
+
+ +

Ergebnis

+ +

{{EmbedLiveSample("Beispiel", 200, 100)}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS4 Selectors', '#child-combinators', 'child combinator')}}{{Spec2('CSS4 Selectors')}} 
{{SpecName('CSS3 Selectors', '#child-combinators', 'child combinators')}}{{Spec2('CSS3 Selectors')}}Keine Änderung
{{SpecName('CSS2.1', 'selector.html#child-selectors', 'child selectors')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.child")}} diff --git a/files/de/web/css/class_selectors/index.html b/files/de/web/css/class_selectors/index.html new file mode 100644 index 0000000000..eafd714a05 --- /dev/null +++ b/files/de/web/css/class_selectors/index.html @@ -0,0 +1,76 @@ +--- +title: Klassenselektoren +slug: Web/CSS/Klassenselektoren +tags: + - CSS + - CSS Referenz + - Einsteiger + - Selektoren +translation_of: Web/CSS/Class_selectors +--- +
{{CSSRef("Selectors")}}
+ +

In einem HTML Dokument matchen CSS Klassenselektoren ein Element basierend auf den Inhalten des {{htmlattrxref("class")}} Attributs des Elements. Das class Attribut ist definiert als eine durch Leerzeichen getrennte Liste von Einträgen, wobei einer dieser Einträge exakt auf den Klassennamen des angegebenen Selektors passen muss.

+ +

Syntax

+ +
.classname { style properties }
+ +

Beachte, dass dies äquivalent zu folgendem {{cssxref("Attributselektoren", "Attributselektor")}} ist:

+ +
[class~=classname] { style properties }
+ +

Beispiel

+ +

CSS

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

HTML

+ +
<span class="classy">Hier ist ein Span mit Text.</span>
+<span>Hier ist ein weiterer.</span>
+
+ +

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

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS4 Selectors', '#class-html', 'class selectors')}}{{Spec2('CSS4 Selectors')}}Keine Änderungen
{{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')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.class")}} diff --git a/files/de/web/css/color_value/index.html b/files/de/web/css/color_value/index.html new file mode 100644 index 0000000000..9e0baf0720 --- /dev/null +++ b/files/de/web/css/color_value/index.html @@ -0,0 +1,1285 @@ +--- +title: +slug: Web/CSS/Farben +tags: + - CSS + - CSS Datentyp + - Layout + - NeedsLiveSample + - NeedsMobileBrowserCompatibility + - Referenz + - Web +translation_of: Web/CSS/color_value +--- +
{{CSSRef}}
+ +

Der CSS Datentyp beschreibt eine Farbe im sRGB Farbraum. Eine Farbe kann auf eine dieser Arten beschrieben werden:

+ + + +

Beachte, dass die Liste an akzeptierten Farbwerten durch weiterentwickelte Spezifikationen erweitert wurde bis hin zu den neuesten CSS3 Farben.

+ +

In Verbindung mit einer Farbe im sRGB Raum besteht ein <color>-Wert auch aus einer Alphakanal-Koordinate, einem Transparenzwert, der angibt, wie die Farbe mit der Hintergrundfarbe vermischt wird

+ +

Obwohl CSS Farbwerte genau definiert sind, können sie auf verschiedenen Ausgabegeräten unterschiedlich dargestellt werden. Die meisten davon sind nicht kalibriert und manche Browser unterstützen nicht das Farbprofil des Ausgabegeräts. Ohne diese kann die Farbdarstellung stark variieren.

+ +
Hinweis: Die WCAG 2.0 Empfehlung des W3C rät Webauthoren ausdrücklich dazu, Farben nicht als einziges Mittel zur Vermittlung einer bestimmten Information, Aktion oder einem Ergebnis zu verwenden. Manche Benutzer haben Probleme, Farben zu unterscheiden, was das Verständnis der übermittelten Information verhindert. Natürlich verhindert das nicht die Benutzung von Farbe, nur deren Benutzung als einziges Mittel eine Information zu beschreiben.
+ +

Interpolation

+ +

Werte des <color> CSS Datentyps können für Animationen und zur Erstellung von {{cssxref("gradient", "<gradient>")}} Werten interpoliert werden. In diesem Fall werden ihre Rot-, Grün- und Blau-Komponenten als eine reale Fließkommazahl interpoliert. Beachte, dass die Interpolation von Farben innerhalb des alpha-vormultiplizierten sRGBA-Farbraums stattfindet, um unerwartete Grautöne zu verhindern. In Animationen wird die Geschwindigkeit der Interlolation durch die zur Animation gehörenden Timing-Funktion bestimmt.

+ +

Werte

+ +

Es gibt mehrere Arten, wie ein <color> Wert beschrieben werden kann.

+ +

Farbschlüsselwörter

+ +

Farbschlüsselwörter sind schreibungsunabhängige Bezeichner, welche eine bestimmte Farbe repräsentieren, z. B. red, blue, brown, lightseagreen. Der Name beschreibt die Farbe, er ist jedoch meist erfunden. Die Liste an akzeptierten Werten variiert sehr zwischen den Spezifikationen:

+ + + +

Es gibt ein paar Dinge bei der Verwendung von Farbschlüsselwörtern zu beachten:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationFarbeSchlüsselwortRGB HexwerteVorschau
{{SpecName("CSS1")}} black#000000 
 silver#c0c0c0 
 gray#808080 
 white#ffffff 
 maroon#800000 
 red#ff0000 
 purple#800080 
 fuchsia#ff00ff 
 green#008000 
 lime#00ff00 
 olive#808000 
 yellow#ffff00 
 navy#000080 
 blue#0000ff 
 teal#008080 
 aqua#00ffff 
{{SpecName("CSS2.1")}} orange#ffa500 
{{SpecName("CSS3 Colors")}} aliceblue#f0f8ff 
 antiquewhite#faebd7 
 aquamarine#7fffd4 
 azure#f0ffff 
 beige#f5f5dc 
 bisque#ffe4c4 
 blanchedalmond#ffe4c4 
 blueviolet#8a2be2 
 brown#a52a2a 
 burlywood#deb887 
 cadetblue#5f9ea0 
 chartreuse#7fff00 
 chocolate#d2691e 
 coral#ff7f50 
 cornflowerblue#6495ed 
 cornsilk#fff8dc 
 crimson#dc143c 
 darkblue#00008b 
 darkcyan#008b8b 
 darkgoldenrod#b8860b 
 darkgray#a9a9a9 
 darkgreen#006400 
 darkgrey#a9a9a9 
 darkkhaki#bdb76b 
 darkmagenta#8b008b 
 darkolivegreen#556b2f 
 darkorange#ff8c00 
 darkorchid#9932cc 
 darkred#8b0000 
 darksalmon#e9967a 
 darkseagreen#8fbc8f 
 darkslateblue#483d8b 
 darkslategray#2f4f4f 
 darkslategrey#2f4f4f 
 darkturquoise#00ced1 
 darkviolet#9400d3 
 deeppink#ff1493 
 deepskyblue#00bfff 
 dimgray#696969 
 dimgrey#696969 
 dodgerblue#1e90ff 
 firebrick#b22222 
 floralwhite#fffaf0 
 forestgreen#228b22 
 gainsboro#dcdcdc 
 ghostwhite#f8f8ff 
 gold#ffd700 
 goldenrod#daa520 
 greenyellow#adff2f 
 grey#808080 
 honeydew#f0fff0 
 hotpink#ff69b4 
 indianred#cd5c5c 
 indigo#4b0082 
 ivory#fffff0 
 khaki#f0e68c 
 lavender#e6e6fa 
 lavenderblush#fff0f5 
 lawngreen#7cfc00 
 lemonchiffon#fffacd 
 lightblue#add8e6 
 lightcoral#f08080 
 lightcyan#e0ffff 
 lightgoldenrodyellow#fafad2 
 lightgray#d3d3d3 
 lightgreen#90ee90 
 lightgrey#d3d3d3 
 lightpink#ffb6c1 
 lightsalmon#ffa07a 
 lightseagreen#20b2aa 
 lightskyblue#87cefa 
 lightslategray#778899 
 lightslategrey#778899 
 lightsteelblue#b0c4de 
 lightyellow#ffffe0 
 limegreen#32cd32 
 linen#faf0e6 
 mediumaquamarine#66cdaa 
 mediumblue#0000cd 
 mediumorchid#ba55d3 
 mediumpurple#9370db 
 mediumseagreen#3cb371 
 mediumslateblue#7b68ee 
 mediumspringgreen#00fa9a 
 mediumturquoise#48d1cc 
 mediumvioletred#c71585 
 midnightblue#191970 
 mintcream#f5fffa 
 mistyrose#ffe4e1 
 moccasin#ffe4b5 
 navajowhite#ffdead 
 oldlace#fdf5e6 
 olivedrab#6b8e23 
 orangered#ff4500 
 orchid#da70d6 
 palegoldenrod#eee8aa 
 palegreen#98fb98 
 paleturquoise#afeeee 
 palevioletred#db7093 
 papayawhip#ffefd5 
 peachpuff#ffdab9 
 peru#cd853f 
 pink#ffc0cb 
 plum#dda0dd 
 powderblue#b0e0e6 
 rosybrown#bc8f8f 
 royalblue#4169e1 
 saddlebrown#8b4513 
 salmon#fa8072 
 sandybrown#f4a460 
 seagreen#2e8b57 
 seashell#fff5ee 
 sienna#a0522d 
 skyblue#87ceeb 
 slateblue#6a5acd 
 slategray#708090 
 slategrey#708090 
 snow#fffafa 
 springgreen#00ff7f 
 steelblue#4682b4 
 tan#d2b48c 
 thistle#d8bfd8 
 tomato#ff6347 
 turquoise#40e0d0 
 violet#ee82ee 
 wheat#f5deb3 
 whitesmoke#f5f5f5 
 yellowgreen#9acd32 
{{SpecName("CSS4 Colors")}} rebeccapurple#663399 
+ +

Die Farbe rebeccapurple entspricht der Farbe #639. Mehr Informationen darüber, warum sie eingeführt wurde, kann in diesem Codepen Blog Post von Trezy nachgelesen werden: "Honoring a Great Man."

+ +

transparent Schlüsselwort

+ +

Das transparent-Schlüsselwort beschreibt eine vollkommen transparente Farber, d. h. die dargestellte Farbe ist die Hintergrundfarbe. Technisch ist sie schwarz mit einem Alphakanal mit Minimalwert und ist ein Kürzel für rgba(0,0,0,0).

+ +
Historischer Hinweis
+Das Schlüsselwort transparent war keine echte Farbe in CSS Level 2 (Revision 1). Es war ein spezifisches Schlüsselwort, das bei zwei CSS-Eigenschaften anstelle eines regulären <color>-Wertes verwendet werden konnte: {{cssxref("background")}} und {{cssxref("border")}}. Es war eigentlich hinzugefügt, um geerbte Festfarben zu überschreiben.
+
+Mit der Unterstützung der Deckkraft durch den Alphakanal, wurde transparent in CSS Colors Level 3 neudefiniert als eine echte Farbe, die überall dort verwendet werden kann, wo ein <color>-Wert benötigt wird, wie der {{cssxref("color")}} Eigenschaft.
+ +

currentColor Schlüsselwort

+ +

Das currentColor-Schlüsselwort beschreibt den berechneten Wert der {{cssxref("color")}} Eigenschaft des Elements. Es erlaubt, die Farbeigenschaften, die von Eigenschaften oder Kindelementeigenschaften zu vererben, die sie normalerweise nicht vererben.

+ +

Es kann auch für Eigenschaften verwendet werden, die den berechneten Wert der {{cssxref("color")}} Eigenschaft des Elements erben und entspricht dem inherit Schlüsselwort bei diesen Elementen, falls es welche gibt.

+ +

Live-Beispiel

+ +

Die Farbe der Zeile (ein farbgefülltes {{HTMLElement("div")}}) passt sich der Farbe der {{cssxref("color")}} Eigenschaft an, die von seinem Elternelement geerbt wird.

+ +
+
Live-Beispiel 1
+ +
<div style="color:darkred;">
+ Die Farbe dieses Texts ist dieselbe wie die der Zeile:
+ <div style="background:currentcolor; height:1px;"></div>
+ Mehr Text.
+</div>
+ +

{{EmbedLiveSample("Live-Beispiel_1")}}

+ +
Live-Beispiel 2
+ +
<div style="color:blue; border-bottom: 1px dashed currentcolor;">
+ Die Farbe dieses Texts ist dieselbe wie die der Zeile:
+ <div style="background:currentcolor; height:1px;"></div>
+ Mehr Text.
+</div>
+ +

{{EmbedLiveSample("Live-Beispiel_2")}}

+
+ +

rgb()

+ +

Farben können durch das Rot-Grün-Blau-Modell (RGB-Modell) auf zwei Weisen definiert werden:

+ +
+
Hexadezimale Notation #RRGGBB und #RGB
+
+
    +
  • "#", gefolgt von sechs hexadezimalen Zeichen (0-9, A-F).
    • +
  • "#", gefolgt von drei hexadezimalen Zeichen (0-9, A-F).
    • +
+ Die Drei-Ziffern-RGB-Notation (#RGB) und die Sechs-Ziffern-Form (#RRGGBB) sind gleich.
+ Zum Beispiel repräsentieren #f03 und #ff0033 dieselbe Farbe.
+
Funktionelle Notation rgb(R,G,B)
+
"rgb", gefolgt von drei {{cssxref("<integer>")}} oder drei {{cssxref("<percentage>")}} Werten.
+ Die Ganzzahl 255 entspricht 100% und F oder FF in der hexadezimalen Schreibweise.
+
+ +
/* Diese Beispiele definieren alle dieselbe RGB-Farbe: */
+
+ #f03
+ #F03
+ #ff0033
+ #FF0033
+ rgb(255,0,51)
+ rgb(255, 0, 51)
+ rgb(255, 0, 51.2) /* FEHLER! Keine Bruchzahlen verwenden, nur Ganzzahlen. */
+ rgb(100%,0%,20%)
+ rgb(100%, 0%, 20%)
+ rgb(100%, 0, 20%) /* FEHLER! Ganzzahl- und Prozentschreibweise dürfen nicht gemischt werden. */
+
+ +

hsl()

+ +

Farben können auch durch das Hue-Saturation-Lightness-Modell (HSL-Modell) unter Verwendung der funktionellen Notation hsl() definiert werden. Der Vorteil von HSL gegenüber RGB ist, dass es wesentlich intuitiver ist: man kann die Zahlen, die man haben will, erraten und dann anpassen. Es ist auch einfacher, Sets passender Farben zu erstellen (indem der Farbwert unverändert bleibt und die Helligkeit/Dunkelheit und Sättigung verändert werden).

+ +

Der Farbwert wird als ein Winkel des Farbkreises angegeben (d. h. der Regenbogen als Kreis dargestellt). Der Winkel wird als einheitenlose {{cssxref("<number>")}} angegeben. Per definition red=0=360 und die anderen Farben sind so auf den Kreis verteilt, sodass green=120, blue=240, etc. Als Winkel bricht er implizit um, sodass 120=240 und 480=120.

+ +

Sättigung und Helligkeit werden als Prozentwert angegeben.
+ 100% entspricht voller Sättigung und 0% ist ein Grauton.
+ 100% Helligkeit ist weiß, 0% Helligkeit ist schwarz und 50% Helligkeit ist "normal".

+ +
hsl(0,  100%,50%)    /* rot */       
+hsl(30, 100%,50%)                    
+hsl(60, 100%,50%)                    
+hsl(90, 100%,50%)                    
+hsl(120,100%,50%)    /* grün */      
+hsl(150,100%,50%)                    
+hsl(180,100%,50%)                    
+hsl(210,100%,50%)                    
+hsl(240,100%,50%)    /* blau */      
+hsl(270,100%,50%)                    
+hsl(300,100%,50%)                    
+hsl(330,100%,50%)                    
+hsl(360,100%,50%)    /* rot */       
+
+hsl(120,100%,25%)    /* dunkelgrün */
+hsl(120,100%,50%)    /* grün*/       
+hsl(120,100%,75%)    /* hellgrün */  
+
+hsl(120,100%,50%)    /* grün */      
+hsl(120, 67%,50%)                    
+hsl(120, 33%,50%)                    
+hsl(120,  0%,50%)                    
+
+hsl(120, 60%,70%)    /* pastelgrün */
+
+ +

rgba()

+ +

Farben können durch das Rot-Grün-Blau-Model (RGB-Modell) unter Verwendungn der funktionellen Notation rgba() verwendet werden. RGBa erweitert das RGB-Farbmodell um einen Alphakanal, der die Deckkraft einer Farbe angibt.
+ a bedeutet Deckkraft: 0=transparent; 1=undurchsichtig;

+ +
rgba(255, 0, 0, 0.1)    /* 10% undurchsichtiges Rot */      
+rgba(255, 0, 0, 0.4)    /* 40% undurchsichtiges Rot */      
+rgba(255, 0, 0, 0.7)    /* 70% undurchsichtiges Rot */      
+rgba(255, 0, 0, 1)      /* komplett undurchsichtiges Rot */ 
+
+ +

hsla()

+ +

Farben können auch durch das Hue-Saturation-Lightness-Alpha-Modell (HSLa-Modell) unter Verwendung der funktionellen Notation hsla() definiert werden. HSLa erweitert das HSL-Farbmodell um einen Alphakanal, der die Deckkraft einer Farbe angibt.
+ a bedeutet Deckkraft: 0=transparent; 1=undurchsichtig;

+ +
hsla(240, 100%, 50%, 0.05)    /* 5% undurchsichtiges Blau */   
+hsla(240,100%,50%, 0.4)       /* 40% undurchsichtiges Blau */  
+hsla(240,100%,50%, 0.7)       /* 70% undurchsichtiges Blau */  
+hsla(240,100%,50%,   1)       /* full undurchsichtiges Blau */ 
+
+ +

Systemfarben

+ +

Nicht alle Systemfarben werden von allen Systemen unterstützt. {{deprecated_inline}} für die Benutzung in öffentlichen Webseiten.

+ +
+
ActiveBorder
+
Rahmenfarbe eines aktiven Fensters.
+
ActiveCaption
+
Titelfarbe eines aktiven Fensters. Sollte mit der Vordergrundfarbe CaptionText verwendet werden.
+
AppWorkspace
+
Hintergrundfarbe einer Mehrfachdokumentschnittstelle (MDI).
+
Background
+
Desktophintergrund.
+
ButtonFace
+
Schaltflächenfarbe für 3D-Elemente, die durch eine Ebene umgebender Rahmen dreidimensional erscheinen. Sollte mit der Vordergrundfarbe ButtonText verwendet werden.
+
ButtonHighlight
+
Farbe des dem Licht zugewandten Rahmens eines 3D-Elements, das durch diesen Rahmen dreidimensional erscheint.
+
ButtonShadow
+
Farbe des dem Licht abgewandten Rahmens eines 3D-Elements, das durch diesen Rahmen dreidimensional erscheint.
+
ButtonText
+
Text auf Schaltflächen. Sollte mit der Hintergrundfarbe ButtonFace oder ThreeDFace verwendet werden.
+
CaptionText
+
Farbe des Titeltexts in Fenstern. Sollte mit der Hintergrundfarbe ActiveCaption verwendet werden.
+
GrayText
+
Farbe für ausgegrauten (deaktivierten) Text.
+
Highlight
+
Farbe für ausgewählte Elemente in einem Steuerelement. Sollte mit der Vordergrundfarbe HighlightText verwendet werden.
+
HighlightText
+
Farbe des Texts ausgewählter Elemente in einem Steuerelement. Sollte mit der Hintergrundfarbe Highlight verwendet werden.
+
InactiveBorder
+
Rahmenfarbe eines inaktiven Fensters.
+
InactiveCaption
+
Titelfarbe eines inaktiven Fensters. Sollte mit der Vordergrundfarbe InactiveCaptionText verwendet werden.
+
InactiveCaptionText
+
Farbe des Titeltexts in inaktiven Fenstern. Sollte mit der Hintergrundfarbe InactiveCaption verwendet werden.
+
InfoBackground
+
Hintergrundfarbe für Tooltips. Sollte mit der Vordergrundfarbe InfoText verwendet werden.
+
InfoText
+
Textfarbe für Tooltips. Sollte mit der Hintergrundfarbe InfoBackground verwendet werden.
+
Menu
+
Hintergrundfarbe von Menüs. Sollte mit der Vordergrundfarbe MenuText oder -moz-MenuBarText verwendet werden.
+
MenuText
+
Textfarbe von Menüs. Sollte mit der Hintergrundfarbe Menu verwendet werden.
+
Scrollbar
+
Hintergrundfarbe von Scrollleisten.
+
ThreeDDarkShadow
+
Farbe des dunkleren (normalerweise äußeren) der dem Licht abgewandten zweier Rahmen für 3D-Elemente, die durch zwei Ebenen umgebender konzentrischer Rahmen dreidimensional erscheinen.
+
ThreeDFace
+
Schaltflächenfarbe für 3D-Elemente, die durch zwei Ebenen umgebender konzentrischer Rahmen dreidimensional erscheinen. Sollte mit der Vordergrundfarbe ButtonText verwendet werden.
+
ThreeDHighlight
+
Farbe des helleren (normalerweise äußeren) der dem Licht zugewandten zweier Rahmen für 3D-Elemente, die durch zwei Ebenen umgebender konzentrischer Rahmen dreidimensional erscheinen.
+
ThreeDLightShadow
+
Farbe des dunkleren (normalerweise inneren) der dem Licht zugewandten zweier Rahmen für 3D-Elemente, die durch zwei Ebenen umgebender konzentrischer Rahmen dreidimensional erscheinen.
+
ThreeDShadow
+
Farbe des helleren (normalerweise inneren) der dem Licht abgewandten zweier Rahmen für 3D-Elemente, die durch zwei Ebenen umgebender konzentrischer Rahmen dreidimensional erscheinen.
+
Window
+
Fensterhintergrundfarbe. Sollte mit der Vordergrundfarbe WindowText verwendet werden.
+
WindowFrame
+
Fensterrahmenfarbe.
+
WindowText
+
Textfarbe in Fenstern. Sollte mit der Hintergrundfarbe Window verwendet werden.
+
+ +

Mozilla Systemfarben Erweiterungen

+ +
+
-moz-ButtonDefault
+
Rahmenfarbe, die um Schaltflächen angezeigt wird, die die Standardaktion für Dialoge darstellen.
+
-moz-ButtonHoverFace
+
Hintergrundfarbe einer Schaltfläche, über der der Mauszeiger steht (was ThreeDFace oder ButtonFace wäre, wenn der Mauszeiger nicht darübersteht). Sollte mit der Vordergrundfarbe -moz-ButtonHoverText verwendet werden.
+
-moz-ButtonHoverText
+
Textfarbe einer Schaltfläche, über der der Mauszeiger steht (was ButtonText wäre, wenn der Mauszeiger nicht darübersteht). Sollte mit der Hintergrundfarbe -moz-ButtonHoverFace verwendet werden.
+
-moz-CellHighlight
+
Hintergrundfarbe für markierte Elemente in einem Baum. Sollte mit der Vordergrundfarbe -moz-CellHighlightText verwendet werden. Siehe auch -moz-html-CellHighlight.
+
-moz-CellHighlightText
+
Textfarbe für markierte Elemente in einem Baum. Sollte mit der Hintergrundfarbe -moz-CellHighlight verwendet werden. Siehe auch -moz-html-CellHighlightText.
+
-moz-Combobox
+
{{Gecko_minversion_inline("1.9.2")}} Hintergrundfarbe für Combo-Boxen. Sollte mit der Vordergrundfarbe -moz-ComboboxText verwendet werden. In Gecko Versionen vor 1.9.2 sollte stattdessen -moz-Field verwendet werden.
+
-moz-ComboboxText
+
{{Gecko_minversion_inline("1.9.2")}} Textfarbe für Combo-Boxen. Sollte mit der Hintergrundfarbe -moz-Combobox verwendet werden. In Gecko Versionen vor 1.9.2 sollte stattdessen -moz-FieldText verwendet werden.
+
-moz-Dialog
+
Hintergrundfarbe für Dialoge. Sollte mit der Vordergrundfarbe -moz-DialogText verwendet werden.
+
-moz-DialogText
+
Textfarbe für Dialoge. Sollte mit der Hintergrundfarbe -moz-Dialog verwendet werden.
+
-moz-dragtargetzone
+
-moz-EvenTreeRow
+
{{gecko_minversion_inline("1.9")}} Hintergrundfarbe für geradzahlige Zeilen in einem Baum. Sollte mit der Vordergrundfarbe -moz-FieldText verwendet werden. In Gecko Versionen vor 1.9 sollte stattdessen -moz-Field verwendet werden. Siehe auch -moz-OddTreeRow.
+
-moz-Field
+
Hintergrundfarbe für Texteingabefelder. Sollte mit der Vordergrundfarbe -moz-FieldText verwendet werden.
+
-moz-FieldText
+
Textfarbe für Texteingabefelder. Sollte mit der Hintergrundfarbe -moz-Field, -moz-EvenTreeRow oder -moz-OddTreeRow verwendet werden.
+
-moz-html-CellHighlight
+
{{gecko_minversion_inline("1.9")}} Hintergrundfarbe für markierte Elemente in HTML {{HTMLElement("select")}}s. Sollte mit der Vordergrundfarbe -moz-html-CellHighlightText verwendet werden. In Gecko Versionen vor 1.9 sollte stattdessen -moz-CellHighlight verwendet werden.
+
-moz-html-CellHighlightText
+
{{gecko_minversion_inline("1.9")}} Vordergrundfarbe für markierte Elemente in HTML {{HTMLElement("select")}}s. Sollte mit der Hintergrundfarbe -moz-html-CellHighlight verwendet werden. In Gecko Versionen vor 1.9 sollte stattdessen -moz-CellHighlightText verwendet werden.
+
-moz-mac-accentdarkestshadow
+
-moz-mac-accentdarkshadow
+
-moz-mac-accentface
+
-moz-mac-accentlightesthighlight
+
-moz-mac-accentlightshadow
+
-moz-mac-accentregularhighlight
+
-moz-mac-accentregularshadow
+
-moz-mac-chrome-active
+
{{Gecko_minversion_inline("1.9.1")}}
+
-moz-mac-chrome-inactive
+
{{Gecko_minversion_inline("1.9.1")}}
+
-moz-mac-focusring
+
-moz-mac-menuselect
+
-moz-mac-menushadow
+
-moz-mac-menutextselect
+
-moz-MenuHover
+
Hintergrundfarbe für Menüeinträge, über denen der Mauszeiger steht. Oft ähnlich zu Highlight. Sollte mit der Vordergrundfarbe -moz-MenuHoverText oder -moz-MenuBarHoverText verwendet werden.
+
-moz-MenuHoverText
+
Textfarbe für Menüeinträge, über denen der Mauszeiger steht. Oft ähnlich zu HighlightText. Sollte mit der Hintergrundfarbe -moz-MenuHover verwendet werden.
+
-moz-MenuBarText
+
{{Gecko_minversion_inline("1.9.2")}} Vordergrundfarbe für Text in Menüleisten. Oft ähnlich zu MenuText. Sollte auf einem Menu Hintergrund verwendet werden.
+
-moz-MenuBarHoverText
+
{{Gecko_minversion_inline("1.9.2")}} Vordergrundfarbe für Text in Menüleisten, über dem der Mauszeiger steht. Oft ähnlich zu -moz-MenuHoverText. Sollte auf einem -moz-MenuHover Hintergrund verwendet werden.
+
-moz-nativehyperlinktext
+
{{Gecko_minversion_inline("1.9.1")}} Standardplattformfarbe für Hyperlinks.
+
-moz-OddTreeRow
+
{{gecko_minversion_inline("1.9")}} Hintergrundfarbe für ungeradzahlige Zeilen in einem Baum. Sollte mit der Vordergrundfarbe -moz-FieldText verwendet werden. In Gecko Versionen vor 1.9 sollte stattdessen -moz-Field verwendet werden. Siehe auch -moz-EvenTreeRow.
+
-moz-win-communicationstext
+
{{gecko_minversion_inline("1.9")}} Sollte für Text in Objekten mit {{cssxref("-moz-appearance")}}: -moz-win-communications-toolbox; verwendet werden.
+
-moz-win-mediatext
+
{{gecko_minversion_inline("1.9")}} Sollte für Text in Objekten mit {{cssxref("-moz-appearance")}}: -moz-win-media-toolbox; verwendet werden.
+
+ +

Mozilla Farbpräferenz Erweiterungen

+ +
+
-moz-activehyperlinktext
+
Benutzerpräferenz für die Textfarbe aktiver Links. Sollte mit dem Standarddokumenthintergrund verwendet werden.
+
 
+
-moz-default-background-color
+
{{Gecko_minversion_inline("5.0")}} Benutzerpräferenz für die Dokumenthintergrundfarbe.
+
 
+
-moz-default-color
+
{{Gecko_minversion_inline("5.0")}} Benutzerpräferenz für die Textfarbe.
+
-moz-hyperlinktext
+
Benutzerpräferenz für die Textfarbe nicht besuchter Links. Sollte mit dem Standarddokumenthintergrund verwendet werden.
+
-moz-visitedhyperlinktext
+
Benutzerpräferenz für die Textfarbe besuchter Links. Sollte mit dem Standarddokumenthintergrund verwendet werden.
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS4 Colors', '#colorunits', '')}}{{Spec2('CSS4 Colors')}}rebeccapurple hinzugefügt.
{{SpecName('CSS3 Colors', '#colorunits', '')}}{{Spec2('CSS3 Colors')}}Systemfarben als veraltet markiert; SVG-Farben hinzugefügt; functionale Notationen rgba(), hsl() und hsla() hinzugefügt.
{{SpecName('CSS2.1', 'syndata.html#value-def-color', '')}}{{Spec2('CSS2.1')}}orange als Farbe und Systemfarben hinzugefügt.
{{SpecName('CSS1', '#color-units', '')}}{{Spec2('CSS1')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +

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

+ +

Siehe auch

+ + diff --git a/files/de/web/css/compositing_and_blending/index.html b/files/de/web/css/compositing_and_blending/index.html new file mode 100644 index 0000000000..a4fcc2636e --- /dev/null +++ b/files/de/web/css/compositing_and_blending/index.html @@ -0,0 +1,99 @@ +--- +title: CSS Compositing and Blending +slug: Web/CSS/CSS_Compositing_and_Blending +tags: + - CSS + - CSS Compositing and Blending + - CSS Referenz + - Übersicht +translation_of: Web/CSS/Compositing_and_Blending +translation_of_original: Web/CSS/CSS_Compositing_and_Blending +--- +
{{CSSRef}}
+ +

CSS Compositing and Blending ist ein CSS Modul, das definiert, wie Formen verschiedener Elemente zu einem einzelnen Bild kombiniert werden.

+ +

Referenz

+ +

Eigenschaften

+ +
+
    +
  • {{cssxref("background-blend-mode")}}
    • +
  • {{cssxref("mix-blend-mode")}}
    • +
  • {{cssxref("isolation")}}
    • +
+
+ +

Anleitungen

+ +

Keine.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName("Compositing")}}{{Spec2("Compositing")}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatChrome("41.0")}}{{CompatGeckoDesktop("36.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatChrome("41.0")}}{{CompatGeckoMobile("36.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/de/web/css/computed_value/index.html b/files/de/web/css/computed_value/index.html new file mode 100644 index 0000000000..d98a8be023 --- /dev/null +++ b/files/de/web/css/computed_value/index.html @@ -0,0 +1,32 @@ +--- +title: Berechneter Wert +slug: Web/CSS/berechneter_Wert +tags: + - CSS + - Guide + - Web +translation_of: Web/CSS/computed_value +--- +
+ {{cssref}}
+

Übersicht

+

Der berechnete Wert einer CSS Eigenschaft wird aus dem angegebenen Wert berechnet durch:

+ +

Die Berechnung, die benötigt wird, um den "berechneten Wert" für die Eigenschaft zu erreichen, beinhaltet typischerweise die Konvertierung relativer Werte (wie die in em Einheiten oder Prozentangaben) zu absoluten Werten.

+

Wenn zum Beispiel ein Element einen Wert font-size:16px und padding-top:2em definiert hat, dann ist der berechnete Wert von padding-top gleich 32px (zweimal die Schriftgröße).

+

Für einige Eigenschaften jedoch (jene, für die Prozentangaben relativ zu etwas sind, das Layout zur Bestimmung benötigt, wie width, margin-right, text-indent und top), werden definierte Prozentwerte zu berechneten Prozentwerten. Des weiteren werden in line-height definierte einheitenlose Zahlen zu berechneten Werten, wie angegeben. Diese relativen Werte, die im berechneten Wert gleich bleiben, werden absolut sobald der benutzte Wert ermittelt wird.

+

Der Hauptnutzen des berechneten Wertes (außer als ein Schritt zwischen dem angegebenen Wert und dem benutzten Wert) ist Vererbung inklusive dem {{ cssxref("inherit") }} Schlüsselwort.

+

Hinweis

+

Die {{domxref("Window.getComputedStyle", "getComputedStyle()")}} DOM API gibt den aufgelösten Wert zurück, welcher abhängig von der Eigenschaft entweder der berechnete Wert oder der benutzte Wert ist.

+

Spezifikation

+ +

Siehe auch

+ diff --git a/files/de/web/css/css_animations/css_animationen_nutzen/index.html b/files/de/web/css/css_animations/css_animationen_nutzen/index.html deleted file mode 100644 index ea0dc4e7de..0000000000 --- a/files/de/web/css/css_animations/css_animationen_nutzen/index.html +++ /dev/null @@ -1,365 +0,0 @@ ---- -title: CSS Animationen nutzen -slug: Web/CSS/CSS_Animations/CSS_Animationen_nutzen -translation_of: Web/CSS/CSS_Animations/Using_CSS_animations ---- -

{{SeeCompatTable}}{{CSSRef}}

- -

CSS Animationen ermöglichen animierte Übergänge von einem CSS Style-Konfiguration zur nächsten. Die Animationen bestehen aus zwei Komponenten: Einem Style, der die Animation beschreibt, sowie einer Menge von Keyframes, die Start, Ende und mögliche Zwischenpositionen der Animation festlegt.

- -

Es gibt drei zentrale Vorteile von CSS-Animationen gegenüber traditionellen skriptgetriebenen Animationstechniken:

- -
    -
  1. Sie sind einfach zu nutzen für simple Animationen; man kann sie ohne Javascript-Kenntnisse erstellen. 
    2. -
  2. Die Animationen laufen performant, sogar unter mäßiger Systemauslastung. Im Gegensatz dazu fallen selbst simple Javascript-Animationen durch schlechte Performance auf. Die Engine kann einzelne Frames überspringen und kennt weitere Techniken, um die Ausführung so sauber wie möglich zu gestalten. 
    3. -
  3. Da der Browser die Animation kontrolliert, kann er selbstständig die Performance optimieren, zum Beispiel durch das Drosseln der Freqenz von Animationen in aktuell nicht sichtbaren Browser-Tabs.
    4. -
- -

Konfigurieren der Animation

- -

Um eine CSS-Animation zu erstellen, fügt man dem zu animierenden Element die {{ cssxref("animation") }}-Eigenschaft oder seine Sub-Eigenschaften zu. So lassen sich Timing und Dauer der Animation sowie weitere Details des Animationsablaufes bestimmen. Man legt damit nicht die eigentliche Darstellung der Animation fest, die mittels {{ cssxref("@keyframes") }} definiert wird. Siehe {{ anch("Definieren der Animationssequenz mittels Keyframes") }} weiter unten.

- -

Die Sub-Eigenschaften der {{ cssxref("animation") }}-Eigenschaft sind:

- -
-
{{ cssxref("animation-name") }}
-
Spezifiziert den Namen der {{ cssxref("@keyframes") }}-at-Regel, welche die einzelnen Keyframes beschreibt.
-
{{ cssxref("animation-duration") }}
-
Legt die Dauer der Animation für einen kompletten Durchgang fest.
-
{{ cssxref("animation-timing-function") }}
-
Konfiguriert das Timing der Animation. Konkret werden die Übergänge zwischen den einzelnen Keyframes mittels Beschleunigungskurven festgelegt.
-
{{ cssxref("animation-delay") }}
-
Setzt den Abstand zwischen dem Zeitpunkt, an dem die Animation vollständig geladen ist und dem Start der Animationssequenz.
-
{{ cssxref("animation-iteration-count") }}
-
Konfiguriert wie oft die Animation wiederholt wird; mittels infinite wird die Animation unendlich wiederholt.
-
{{ cssxref("animation-direction") }}
-
Legt fest, ob die Animation nach jedem Durchgang die Abspielrichtung wechselt oder zum Startpunkt zurückspringt und sich wiederholt. 
-
{{ cssxref("animation-fill-mode") }}
-
Legt fest, welche Styles vor und nach dem Ausführen der Animation auf das animierte Element angewendet werden.
-
{{ cssxref("animation-play-state") }}
-
Ermöglicht das Pausieren und Wiederaufnehmen einer Animationssequenz.
-
-

Definieren der Animationssequenz mittels Keyframes

-
-
- -

Nachdem Sie den zeitlichen Ablauf der Animation festgelegt haben, müssen Sie die Erscheinung der Animation festlegen. Sie erreichen dies, indem Sie zwei oder mehr Keyframes mit Hilfe der {{ cssxref("@keyframes") }} at-Regel erstellen. Jeder Keyframe beschreibt den Darstellungszustand des animierten Elements zum gegebenen Zeitpunkt der Animationssequenz.

- -

Da der zeitliche Ablauf der Animation im CSS-Style, welcher die Animation konfiguriert, festgelegt ist, verwenden Keyframes {{ cssxref("percentage") }} um den Zeitpunkt festzulegen, wann die Animationssequenz beginnen soll. 0% steht für den ersten Moment der Animationssequenz, wohingegen 100%  den letzten Zustand der Animation beschreibt. Weil diese beiden Keyframes so wichtg sind gibt es zwei Wörter für sie: from und to. Sie sind beide optional. Falls from/0% oder to/100% nicht definiert sind , startet oder stoppt der Browser die Animation gemäß der berechneten Werte aller Attribute.

- -

Sie können optional zusätzliche Keyframes einfügen, die jeweils Zwischenschritte auf dem Weg vom Start- zum Endpunkt der Animation beschreiben.

- -

Beispiele

- -
Hinweis: Einige ältere Browser (vor 2017) benötigen unter Umständen Präfixe; die Live-Beispiele, welche durch einen Klick im Browser betrachtet werden können, beinhalten die -webkit Präfix-Syntax.
- -

Einen Text übers Fenster gleiten lassen.

- -

Dieses einfache Beispiel an einem {{ HTMLElement("p") }}-Element lässt einen Text von rechts über das Browserfenster gleiten.

- -

Beachte, dass solche Animationen dafür sorgen können, dass die Seite breiter als das Browser-Fenster wird. Um dieses Problem zu umgehen, wird das zu animierende Element in einen Container gepackt. Der Container erhält anschließend die {{cssxref("overflow")}}:hidden Eigenschaft.

- -
p {
-  animation-duration: 3s;
-  animation-name: slidein;
-}
-
-@keyframes slidein {
-  from {
-    margin-left: 100%;
-    width: 300%;
-  }
-
-  to {
-    margin-left: 0%;
-    width: 100%;
-  }
-}
-
- -

In diesem Beispiel, bestimmt der Style für das {{ HTMLElement("p") }}-Element, dass durch den Einsatz von {{ cssxref("animation-duration") }} die Animation von Anfang bis Ende in drei Sekunden ausgeführt werden soll. Der Name der {{ cssxref("@keyframes") }} at-Regel, welche die Keyframes der Animation beschreibt, lautet "slidein".

- -

Falls Sie weitere angepasste Styles auf das {{ HTMLElement("p") }}-Element anwenden wollen, die keine CSS-Animationen unterstützen, würden diese hier ebenfalls eingefügt werden. In diesem Falle wollen wir aber außer der Animation keine weiteren Styles festlegen.

- -

Die Keyframes werden anhand der {{ cssxref("@keyframes") }} at-Regel festgelegt. In diesem Beispiel haben wir nur zwei Keyframes. Der erste tritt bei 0% (aufgrund des Aliases from) ein. Hier bestimmen wir einen linken Außenabstand des Elements von 100% (das heißt, am rechten äußeren Rand des umschließenden Elements). Darüberhinaus wird die Breite des Elements auf 300% gesetzt (oder drei Mal der Breite des umgebenden Elements). Dadurch wird der Header im ersten Frame der Animation außerhalb des rechten Randes des Browser-Fensters gezeichnet.

- -

Der zweite (und letzte) Keyframe tritt bei 100% ein (aufgrund des Aliases to). Der linke Außenabstand wird auf 0% gesetzt und die Breite des Elements auf 100% aktualisiert. Dadurch beendet der Header seine Animation mit einer Ausrichtung am linken Rand des Inhaltsbereichs.

- -
<p>The Caterpillar and Alice looked at each other for some time in silence:
-at last the Caterpillar took the hookah out of its mouth, and addressed
-her in a languid, sleepy voice.</p>
-
- -
-

Hinweis: Laden Sie die Seite neu, um die Animation zu sehen. Oder klicken Sie auf den CodePen-Knopf, um die Animation innerhalb der CodePen-Umgebung zu betrachten.

-
- -

{{EmbedLiveSample("Making_text_slide_across_the_browser_window","100%","250")}}

- -

Hinzufügen eines weiteren Keyframes

- -

Lassen Sie uns eine weitere Keyframe zur Animation des vorigen Beispiels hinzufügen. Sagen wir, wir wollen zunächst für eine Weile die Schriftgröße des Headers erhöhen, während er sich von rechts nach links bewegt. Am Ende soll sie wieder auf ihre ursprüngliche Größe schrumpfen. Das ist so einfach wie das Hinzufügen dieser Keyframe:

- -
75% {
-  font-size: 300%;
-  margin-left: 25%;
-  width: 150%;
-}
-
- -

Der vollständige Code sieht nun so aus:

- -
p {
-  animation-duration: 3s;
-  animation-name: slidein;
-}
-
-@keyframes slidein {
-  from {
-    margin-left: 100%;
-    width: 300%;
-  }
-
-  75% {
-    font-size: 300%;
-    margin-left: 25%;
-    width: 150%;
-  }
-
-  to {
-    margin-left: 0%;
-    width: 100%;
-  }
-}
- -
<p>The Caterpillar and Alice looked at each other for some time in silence:
-at last the Caterpillar took the hookah out of its mouth, and addressed
-her in a languid, sleepy voice.</p>
- -

Dies teilt dem Browser mit, dass nach 75% der Animationssequenz der linke Außenabstand des Headers bei 25% und die Breite bei 150% liegen sollte.

- -
-

Hinweis: Laden Sie die Seite neu, um die Animation zu sehen. Oder klicken Sie auf den CodePen-Knopf, um die Animation innerhalb der CodePen-Umgebung zu betrachten.

-
- -

{{EmbedLiveSample("Adding_another_keyframe","100%","250")}}

- -

Lass es sich wiederholen

- -

Damit die Animation sich wiederholt, nutzen Sie die {{ cssxref("animation-iteration-count") }}-Eigenschaft, um festzulegen, wie oft sich die Animation wiederholen soll. In diesem Beispiel setzen wir sie auf infinite, damit sich die Animation unendlich oft wiederholt:

- -
p {
-  animation-duration: 3s;
-  animation-name: slidein;
-  animation-iteration-count: infinite;
-}
-
- -

Nach Hinzufügen zum bisherigen Code:

- -
@keyframes slidein {
-  from {
-    margin-left: 100%;
-    width: 300%;
-  }
-
-  to {
-    margin-left: 0%;
-    width: 100%;
-  }
-}
- -
<p>The Caterpillar and Alice looked at each other for some time in silence:
-at last the Caterpillar took the hookah out of its mouth, and addressed
-her in a languid, sleepy voice.</p>
- -

{{EmbedLiveSample("Making_it_repeat","100%","250")}}

- -

Lassen Sie es sich vor- und zurück bewegen

- -

Die vorige Anpassung sorgte dafür, dass sich die Animation wiederholte. Aber es ist sehr eigenartig, dass die Animation jedes Mal zum Anfang zurückspringt, wenn sie sich wiederholt. Was wir wirklich wollen ist ein Vor- und Zurückbewegen über den Bildschirm. Dazu muss die {{ cssxref("animation-direction") }}-Eigenschaft auf alternate gesetzt werden:

- -
p {
-  animation-duration: 3s;
-  animation-name: slidein;
-  animation-iteration-count: infinite;
-  animation-direction: alternate;
-}
-
- -

Damit sieht der übrige Code folgendermaßen aus:

- -
@keyframes slidein {
-  from {
-    margin-left: 100%;
-    width: 300%;
-  }
-
-  to {
-    margin-left: 0%;
-    width: 100%;
-  }
-}
- -
<p>The Caterpillar and Alice looked at each other for some time in silence:
-at last the Caterpillar took the hookah out of its mouth, and addressed
-her in a languid, sleepy voice.</p>
- -

{{EmbedLiveSample("Making_it_move_back_and_forth","100%","250")}}

- -

Benutzen der Animation Kurzversion

- -

Die {{cssxref("animation")}}-Kurzversion ist hilfreich, um Platz zu sparen. Zum Beispiel haben wir diese Regel während dieses Artikels genutzt:

- -
p {
-  animation-duration: 3s;
-  animation-name: slidein;
-  animation-iteration-count: infinite;
-  animation-direction: alternate;
-}
-
- -

Sie könnte durch Folgendes ersetzt werden:

- -
p {
-  animation: 3s infinite alternate slidein;
-}
-
- -
-

Hinweis: Sie können weitere Beispiele auf der Referenzseite von {{cssxref("animation")}} finden.

-
- -

Setzen mehrere Animationseigenschaftswerte

- -

Die Langversion der CSS-Animation akzeptiert mehrere durch Komma getrennte Werte — eine Eigenschaft, die genutzt werden kann, um mehrere Animationen in einer einzigen Regel anzuwenden. Daneben lassen sich für die verschiedenen Animationen die Dauer, Anzahl der Wiederholungen usw. einzeln festlegen. Sehen Sie sich die folgenden kurzen Beispiele an, die die verschiedenen Kombinationen erklären:

- -

In diesem ersten Beispiel wurden drei Animations-Namen gesetzt, aber nur eine Dauer und Anzahl der Wiederholungen gesetzt. In diesem Falle erhalten alle drei Animationen die gleiche Dauer und Anzahl der Wiederholungen:

- -
animation-name: fadeInOut, moveLeft300px, bounce;
-animation-duration: 3s;
-animation-iteration-count: 1;
- -

In diesem zweiten Beispiel wurden drei Werte für drei Eigenschaften gesetzt. In diesem Falle entsprechen die Werte an der selben Position jeder Eigenschaft der jeweiligen Animation. So hat die fadeInOut Animation beispielsweise eine Dauer von 2.5s und wiederholt sich zwei Mal usw.

- -
animation-name: fadeInOut, moveLeft300px, bounce;
-animation-duration: 2.5s, 5s, 1s;
-animation-iteration-count: 2, 1, 5;
- -

In diesem dritten Beispiel wurden drei Animationen festgelegt, aber nur zwei Dauern und Anzahl der Wiederholungen. In Fällen wie diesen, in denen es nicht genug Werte gibt, um jeder Animation ihren eigenen Wert zuzuweisen, wiederholt sich der Wertze-Zyklus von Anfang bis Ende. Beispielsweise erhält fadeInOut eine Dauer von 2.5s und moveLeft300px eine von 5s. Damit sind wir am Ende der verfügbaren Werte für die Dauer angelangt, also fangen wir von vorne an — bounce bekommt daher eine dauer von 2.5s zugewiesen. Die Anzahl der Wiederholungen (und alle weiteren Eigenschaften, die Sie so festlegen), werden auf die selbe Weise zugewiesen.

- -
animation-name: fadeInOut, moveLeft300px, bounce;
-animation-duration: 2.5s, 5s;
-animation-iteration-count: 2, 1;
- -

Benutzen von Animations-Ereignissen

- -

Sie können zusätzliche Kontrolle über Animationen — sowie mehr nützliche Informationen — erhalten, indem sie Animations-Ereignisse nutzen. Diese Ereignisse werden durch das {{domxref("AnimationEvent")}}-Objekt repräsentiert. Es kann genutzt werden, um den Start, das Ende oder den Beginn einer Wiederholung zu erkennen. Jedes Ereignis beinhaltet die Zeit, an der es auftrat sowie den Namen der Animation, welche es getriggert hat.

- -

Wir passen das Beispiel mit dem gleitenden Text an, um einige Informationen über jedes Animations-Ereignis bei Eintritt auszugeben, um zu sehen, wie sie funktionieren.

- -

Hinzufügen des CSS

- -

Wir beginnen mit dem Schreiben des CSS für die Animation. Diese Animation wird drei Sekunden dauern, “slidein” genannt werden, sich drei Mal wiederholen, und dabei jedes Mal die Richtung ändern. In den {{cssxref("@keyframes")}} wird die Breite under linke Außenabstand manipuliert, um das Element über den Bildschirm gleiten zu lassen.

- -
.slidein {
-  animation-duration: 3s;
-  animation-name: slidein;
-  animation-iteration-count: 3;
-  animation-direction: alternate;
-}
-
-@keyframes slidein {
-  from {
-    margin-left:100%;
-    width:300%
-  }
-
-  to {
-    margin-left:0%;
-    width:100%;
-  }
-}
- -

Hinzufügen der Animations-Ereignis-Listener

- -

Wir verwenden JavaScript-Code, um auf alle drei möglichen Animationsereignisse zu aluschen. Der folgende Code konfiguriert unsere Event Listener. Wir rufen ihn auf, wenn das Dokument das erste Mal geladen wurde, um die Dinge einzurichten.

- -
var element = document.getElementById("watchme");
-element.addEventListener("animationstart", listener, false);
-element.addEventListener("animationend", listener, false);
-element.addEventListener("animationiteration", listener, false);
-
-element.className = "slidein";
-
- -

Dies ist ziemlich üblicher Code; Sie können mehr über die Details der Funktionsweise in der Dokumentation zu {{domxref("eventTarget.addEventListener()")}} erfahren. Als letztes setzt dieser Code die class des Elements, welches wir animieren wollen, auf “slidein”, um die Animation damit zu starten.

- -

Warum? Weil das animationstart Ereignis mit dem Beginn der Animation gestartet wird. In unserem Falle vor Ausführung des Codes. Daher starten wir die Animation selber durch das Setzen von class auf dem Element zu dem Werte, welches die Animation steuert.

- -

Empfangen von Ereignissen

- -

Die Ereignisse werden an die untenstehende listener() Funktion durchgereicht.

- -
function listener(event) {
-  var l = document.createElement("li");
-  switch(event.type) {
-    case "animationstart":
-      l.innerHTML = "Started: elapsed time is " + event.elapsedTime;
-      break;
-    case "animationend":
-      l.innerHTML = "Ended: elapsed time is " + event.elapsedTime;
-      break;
-    case "animationiteration":
-      l.innerHTML = "New loop started at time " + event.elapsedTime;
-      break;
-  }
-  document.getElementById("output").appendChild(l);
-}
-
- -

Auch dieser Code ist sehr einfach. Es schaut auf den {{domxref("event.type")}}, um zu bestimmen, welche Art von Animation eingetreten ist. Danach fügt es die entsprechende Notiz zur {{HTMLElement("ul")}} (ungeordneten Liste) hinzu, welche wir benutzen, um die Ereignisse mitzuschneiden.

- -

Schlussendlich sieht die Ausgabe in etwa folgendermaßen aus:

- - - -

Beachten Sie, dass die Zeiten ziemlich nah, aber nicht exakt denen entsprechen, die wir in der Animation konfiguriert haben. Beachten Sie außerdem, dass bei der letzten Animation, das animationiteration Ereignis nicht gesetzt wurde. Stattdessen wurde ein animationend Ereignis gesendet.

- -

Das HTML

- -

Der Vollständigkeit halber ist hier das HTML, welches den Seiteninhalt darstellt und die Liste beinhaltet, welche vom Skript mit Informationen über empfangene Ereignisse gefüllt wird:

- -
<h1 id="watchme">Watch me move</h1>
-<p>
-  This example shows how to use CSS animations to make <code>H1</code>
-  elements move across the page.
-</p>
-<p>
-  In addition, we output some text each time an animation event fires,
-  so you can see them in action.
-</p>
-<ul id="output">
-</ul>
-
- -

Hier gibt es eine Live-Ausgabe:

- -
-

Hinweis: Laden Sie die Seite neu, um die Animation zu sehen. Oder klicken Sie auf den CodePen-Knopf, um die Animation innerhalb der CodePen-Umgebung zu betrachten.

-
- -

{{EmbedLiveSample('Using_animation_events', '600', '300')}}

- -

Zum Weiterlesen

- - diff --git a/files/de/web/css/css_animations/using_css_animations/index.html b/files/de/web/css/css_animations/using_css_animations/index.html new file mode 100644 index 0000000000..ea0dc4e7de --- /dev/null +++ b/files/de/web/css/css_animations/using_css_animations/index.html @@ -0,0 +1,365 @@ +--- +title: CSS Animationen nutzen +slug: Web/CSS/CSS_Animations/CSS_Animationen_nutzen +translation_of: Web/CSS/CSS_Animations/Using_CSS_animations +--- +

{{SeeCompatTable}}{{CSSRef}}

+ +

CSS Animationen ermöglichen animierte Übergänge von einem CSS Style-Konfiguration zur nächsten. Die Animationen bestehen aus zwei Komponenten: Einem Style, der die Animation beschreibt, sowie einer Menge von Keyframes, die Start, Ende und mögliche Zwischenpositionen der Animation festlegt.

+ +

Es gibt drei zentrale Vorteile von CSS-Animationen gegenüber traditionellen skriptgetriebenen Animationstechniken:

+ +
    +
  1. Sie sind einfach zu nutzen für simple Animationen; man kann sie ohne Javascript-Kenntnisse erstellen. 
    2. +
  2. Die Animationen laufen performant, sogar unter mäßiger Systemauslastung. Im Gegensatz dazu fallen selbst simple Javascript-Animationen durch schlechte Performance auf. Die Engine kann einzelne Frames überspringen und kennt weitere Techniken, um die Ausführung so sauber wie möglich zu gestalten. 
    3. +
  3. Da der Browser die Animation kontrolliert, kann er selbstständig die Performance optimieren, zum Beispiel durch das Drosseln der Freqenz von Animationen in aktuell nicht sichtbaren Browser-Tabs.
    4. +
+ +

Konfigurieren der Animation

+ +

Um eine CSS-Animation zu erstellen, fügt man dem zu animierenden Element die {{ cssxref("animation") }}-Eigenschaft oder seine Sub-Eigenschaften zu. So lassen sich Timing und Dauer der Animation sowie weitere Details des Animationsablaufes bestimmen. Man legt damit nicht die eigentliche Darstellung der Animation fest, die mittels {{ cssxref("@keyframes") }} definiert wird. Siehe {{ anch("Definieren der Animationssequenz mittels Keyframes") }} weiter unten.

+ +

Die Sub-Eigenschaften der {{ cssxref("animation") }}-Eigenschaft sind:

+ +
+
{{ cssxref("animation-name") }}
+
Spezifiziert den Namen der {{ cssxref("@keyframes") }}-at-Regel, welche die einzelnen Keyframes beschreibt.
+
{{ cssxref("animation-duration") }}
+
Legt die Dauer der Animation für einen kompletten Durchgang fest.
+
{{ cssxref("animation-timing-function") }}
+
Konfiguriert das Timing der Animation. Konkret werden die Übergänge zwischen den einzelnen Keyframes mittels Beschleunigungskurven festgelegt.
+
{{ cssxref("animation-delay") }}
+
Setzt den Abstand zwischen dem Zeitpunkt, an dem die Animation vollständig geladen ist und dem Start der Animationssequenz.
+
{{ cssxref("animation-iteration-count") }}
+
Konfiguriert wie oft die Animation wiederholt wird; mittels infinite wird die Animation unendlich wiederholt.
+
{{ cssxref("animation-direction") }}
+
Legt fest, ob die Animation nach jedem Durchgang die Abspielrichtung wechselt oder zum Startpunkt zurückspringt und sich wiederholt. 
+
{{ cssxref("animation-fill-mode") }}
+
Legt fest, welche Styles vor und nach dem Ausführen der Animation auf das animierte Element angewendet werden.
+
{{ cssxref("animation-play-state") }}
+
Ermöglicht das Pausieren und Wiederaufnehmen einer Animationssequenz.
+
+

Definieren der Animationssequenz mittels Keyframes

+
+
+ +

Nachdem Sie den zeitlichen Ablauf der Animation festgelegt haben, müssen Sie die Erscheinung der Animation festlegen. Sie erreichen dies, indem Sie zwei oder mehr Keyframes mit Hilfe der {{ cssxref("@keyframes") }} at-Regel erstellen. Jeder Keyframe beschreibt den Darstellungszustand des animierten Elements zum gegebenen Zeitpunkt der Animationssequenz.

+ +

Da der zeitliche Ablauf der Animation im CSS-Style, welcher die Animation konfiguriert, festgelegt ist, verwenden Keyframes {{ cssxref("percentage") }} um den Zeitpunkt festzulegen, wann die Animationssequenz beginnen soll. 0% steht für den ersten Moment der Animationssequenz, wohingegen 100%  den letzten Zustand der Animation beschreibt. Weil diese beiden Keyframes so wichtg sind gibt es zwei Wörter für sie: from und to. Sie sind beide optional. Falls from/0% oder to/100% nicht definiert sind , startet oder stoppt der Browser die Animation gemäß der berechneten Werte aller Attribute.

+ +

Sie können optional zusätzliche Keyframes einfügen, die jeweils Zwischenschritte auf dem Weg vom Start- zum Endpunkt der Animation beschreiben.

+ +

Beispiele

+ +
Hinweis: Einige ältere Browser (vor 2017) benötigen unter Umständen Präfixe; die Live-Beispiele, welche durch einen Klick im Browser betrachtet werden können, beinhalten die -webkit Präfix-Syntax.
+ +

Einen Text übers Fenster gleiten lassen.

+ +

Dieses einfache Beispiel an einem {{ HTMLElement("p") }}-Element lässt einen Text von rechts über das Browserfenster gleiten.

+ +

Beachte, dass solche Animationen dafür sorgen können, dass die Seite breiter als das Browser-Fenster wird. Um dieses Problem zu umgehen, wird das zu animierende Element in einen Container gepackt. Der Container erhält anschließend die {{cssxref("overflow")}}:hidden Eigenschaft.

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+}
+
+@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+
+ +

In diesem Beispiel, bestimmt der Style für das {{ HTMLElement("p") }}-Element, dass durch den Einsatz von {{ cssxref("animation-duration") }} die Animation von Anfang bis Ende in drei Sekunden ausgeführt werden soll. Der Name der {{ cssxref("@keyframes") }} at-Regel, welche die Keyframes der Animation beschreibt, lautet "slidein".

+ +

Falls Sie weitere angepasste Styles auf das {{ HTMLElement("p") }}-Element anwenden wollen, die keine CSS-Animationen unterstützen, würden diese hier ebenfalls eingefügt werden. In diesem Falle wollen wir aber außer der Animation keine weiteren Styles festlegen.

+ +

Die Keyframes werden anhand der {{ cssxref("@keyframes") }} at-Regel festgelegt. In diesem Beispiel haben wir nur zwei Keyframes. Der erste tritt bei 0% (aufgrund des Aliases from) ein. Hier bestimmen wir einen linken Außenabstand des Elements von 100% (das heißt, am rechten äußeren Rand des umschließenden Elements). Darüberhinaus wird die Breite des Elements auf 300% gesetzt (oder drei Mal der Breite des umgebenden Elements). Dadurch wird der Header im ersten Frame der Animation außerhalb des rechten Randes des Browser-Fensters gezeichnet.

+ +

Der zweite (und letzte) Keyframe tritt bei 100% ein (aufgrund des Aliases to). Der linke Außenabstand wird auf 0% gesetzt und die Breite des Elements auf 100% aktualisiert. Dadurch beendet der Header seine Animation mit einer Ausrichtung am linken Rand des Inhaltsbereichs.

+ +
<p>The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.</p>
+
+ +
+

Hinweis: Laden Sie die Seite neu, um die Animation zu sehen. Oder klicken Sie auf den CodePen-Knopf, um die Animation innerhalb der CodePen-Umgebung zu betrachten.

+
+ +

{{EmbedLiveSample("Making_text_slide_across_the_browser_window","100%","250")}}

+ +

Hinzufügen eines weiteren Keyframes

+ +

Lassen Sie uns eine weitere Keyframe zur Animation des vorigen Beispiels hinzufügen. Sagen wir, wir wollen zunächst für eine Weile die Schriftgröße des Headers erhöhen, während er sich von rechts nach links bewegt. Am Ende soll sie wieder auf ihre ursprüngliche Größe schrumpfen. Das ist so einfach wie das Hinzufügen dieser Keyframe:

+ +
75% {
+  font-size: 300%;
+  margin-left: 25%;
+  width: 150%;
+}
+
+ +

Der vollständige Code sieht nun so aus:

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+}
+
+@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  75% {
+    font-size: 300%;
+    margin-left: 25%;
+    width: 150%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+ +
<p>The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.</p>
+ +

Dies teilt dem Browser mit, dass nach 75% der Animationssequenz der linke Außenabstand des Headers bei 25% und die Breite bei 150% liegen sollte.

+ +
+

Hinweis: Laden Sie die Seite neu, um die Animation zu sehen. Oder klicken Sie auf den CodePen-Knopf, um die Animation innerhalb der CodePen-Umgebung zu betrachten.

+
+ +

{{EmbedLiveSample("Adding_another_keyframe","100%","250")}}

+ +

Lass es sich wiederholen

+ +

Damit die Animation sich wiederholt, nutzen Sie die {{ cssxref("animation-iteration-count") }}-Eigenschaft, um festzulegen, wie oft sich die Animation wiederholen soll. In diesem Beispiel setzen wir sie auf infinite, damit sich die Animation unendlich oft wiederholt:

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+}
+
+ +

Nach Hinzufügen zum bisherigen Code:

+ +
@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+ +
<p>The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.</p>
+ +

{{EmbedLiveSample("Making_it_repeat","100%","250")}}

+ +

Lassen Sie es sich vor- und zurück bewegen

+ +

Die vorige Anpassung sorgte dafür, dass sich die Animation wiederholte. Aber es ist sehr eigenartig, dass die Animation jedes Mal zum Anfang zurückspringt, wenn sie sich wiederholt. Was wir wirklich wollen ist ein Vor- und Zurückbewegen über den Bildschirm. Dazu muss die {{ cssxref("animation-direction") }}-Eigenschaft auf alternate gesetzt werden:

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+
+ +

Damit sieht der übrige Code folgendermaßen aus:

+ +
@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+ +
<p>The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.</p>
+ +

{{EmbedLiveSample("Making_it_move_back_and_forth","100%","250")}}

+ +

Benutzen der Animation Kurzversion

+ +

Die {{cssxref("animation")}}-Kurzversion ist hilfreich, um Platz zu sparen. Zum Beispiel haben wir diese Regel während dieses Artikels genutzt:

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+
+ +

Sie könnte durch Folgendes ersetzt werden:

+ +
p {
+  animation: 3s infinite alternate slidein;
+}
+
+ +
+

Hinweis: Sie können weitere Beispiele auf der Referenzseite von {{cssxref("animation")}} finden.

+
+ +

Setzen mehrere Animationseigenschaftswerte

+ +

Die Langversion der CSS-Animation akzeptiert mehrere durch Komma getrennte Werte — eine Eigenschaft, die genutzt werden kann, um mehrere Animationen in einer einzigen Regel anzuwenden. Daneben lassen sich für die verschiedenen Animationen die Dauer, Anzahl der Wiederholungen usw. einzeln festlegen. Sehen Sie sich die folgenden kurzen Beispiele an, die die verschiedenen Kombinationen erklären:

+ +

In diesem ersten Beispiel wurden drei Animations-Namen gesetzt, aber nur eine Dauer und Anzahl der Wiederholungen gesetzt. In diesem Falle erhalten alle drei Animationen die gleiche Dauer und Anzahl der Wiederholungen:

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

In diesem zweiten Beispiel wurden drei Werte für drei Eigenschaften gesetzt. In diesem Falle entsprechen die Werte an der selben Position jeder Eigenschaft der jeweiligen Animation. So hat die fadeInOut Animation beispielsweise eine Dauer von 2.5s und wiederholt sich zwei Mal usw.

+ +
animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 2.5s, 5s, 1s;
+animation-iteration-count: 2, 1, 5;
+ +

In diesem dritten Beispiel wurden drei Animationen festgelegt, aber nur zwei Dauern und Anzahl der Wiederholungen. In Fällen wie diesen, in denen es nicht genug Werte gibt, um jeder Animation ihren eigenen Wert zuzuweisen, wiederholt sich der Wertze-Zyklus von Anfang bis Ende. Beispielsweise erhält fadeInOut eine Dauer von 2.5s und moveLeft300px eine von 5s. Damit sind wir am Ende der verfügbaren Werte für die Dauer angelangt, also fangen wir von vorne an — bounce bekommt daher eine dauer von 2.5s zugewiesen. Die Anzahl der Wiederholungen (und alle weiteren Eigenschaften, die Sie so festlegen), werden auf die selbe Weise zugewiesen.

+ +
animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 2.5s, 5s;
+animation-iteration-count: 2, 1;
+ +

Benutzen von Animations-Ereignissen

+ +

Sie können zusätzliche Kontrolle über Animationen — sowie mehr nützliche Informationen — erhalten, indem sie Animations-Ereignisse nutzen. Diese Ereignisse werden durch das {{domxref("AnimationEvent")}}-Objekt repräsentiert. Es kann genutzt werden, um den Start, das Ende oder den Beginn einer Wiederholung zu erkennen. Jedes Ereignis beinhaltet die Zeit, an der es auftrat sowie den Namen der Animation, welche es getriggert hat.

+ +

Wir passen das Beispiel mit dem gleitenden Text an, um einige Informationen über jedes Animations-Ereignis bei Eintritt auszugeben, um zu sehen, wie sie funktionieren.

+ +

Hinzufügen des CSS

+ +

Wir beginnen mit dem Schreiben des CSS für die Animation. Diese Animation wird drei Sekunden dauern, “slidein” genannt werden, sich drei Mal wiederholen, und dabei jedes Mal die Richtung ändern. In den {{cssxref("@keyframes")}} wird die Breite under linke Außenabstand manipuliert, um das Element über den Bildschirm gleiten zu lassen.

+ +
.slidein {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: 3;
+  animation-direction: alternate;
+}
+
+@keyframes slidein {
+  from {
+    margin-left:100%;
+    width:300%
+  }
+
+  to {
+    margin-left:0%;
+    width:100%;
+  }
+}
+ +

Hinzufügen der Animations-Ereignis-Listener

+ +

Wir verwenden JavaScript-Code, um auf alle drei möglichen Animationsereignisse zu aluschen. Der folgende Code konfiguriert unsere Event Listener. Wir rufen ihn auf, wenn das Dokument das erste Mal geladen wurde, um die Dinge einzurichten.

+ +
var element = document.getElementById("watchme");
+element.addEventListener("animationstart", listener, false);
+element.addEventListener("animationend", listener, false);
+element.addEventListener("animationiteration", listener, false);
+
+element.className = "slidein";
+
+ +

Dies ist ziemlich üblicher Code; Sie können mehr über die Details der Funktionsweise in der Dokumentation zu {{domxref("eventTarget.addEventListener()")}} erfahren. Als letztes setzt dieser Code die class des Elements, welches wir animieren wollen, auf “slidein”, um die Animation damit zu starten.

+ +

Warum? Weil das animationstart Ereignis mit dem Beginn der Animation gestartet wird. In unserem Falle vor Ausführung des Codes. Daher starten wir die Animation selber durch das Setzen von class auf dem Element zu dem Werte, welches die Animation steuert.

+ +

Empfangen von Ereignissen

+ +

Die Ereignisse werden an die untenstehende listener() Funktion durchgereicht.

+ +
function listener(event) {
+  var l = document.createElement("li");
+  switch(event.type) {
+    case "animationstart":
+      l.innerHTML = "Started: elapsed time is " + event.elapsedTime;
+      break;
+    case "animationend":
+      l.innerHTML = "Ended: elapsed time is " + event.elapsedTime;
+      break;
+    case "animationiteration":
+      l.innerHTML = "New loop started at time " + event.elapsedTime;
+      break;
+  }
+  document.getElementById("output").appendChild(l);
+}
+
+ +

Auch dieser Code ist sehr einfach. Es schaut auf den {{domxref("event.type")}}, um zu bestimmen, welche Art von Animation eingetreten ist. Danach fügt es die entsprechende Notiz zur {{HTMLElement("ul")}} (ungeordneten Liste) hinzu, welche wir benutzen, um die Ereignisse mitzuschneiden.

+ +

Schlussendlich sieht die Ausgabe in etwa folgendermaßen aus:

+ + + +

Beachten Sie, dass die Zeiten ziemlich nah, aber nicht exakt denen entsprechen, die wir in der Animation konfiguriert haben. Beachten Sie außerdem, dass bei der letzten Animation, das animationiteration Ereignis nicht gesetzt wurde. Stattdessen wurde ein animationend Ereignis gesendet.

+ +

Das HTML

+ +

Der Vollständigkeit halber ist hier das HTML, welches den Seiteninhalt darstellt und die Liste beinhaltet, welche vom Skript mit Informationen über empfangene Ereignisse gefüllt wird:

+ +
<h1 id="watchme">Watch me move</h1>
+<p>
+  This example shows how to use CSS animations to make <code>H1</code>
+  elements move across the page.
+</p>
+<p>
+  In addition, we output some text each time an animation event fires,
+  so you can see them in action.
+</p>
+<ul id="output">
+</ul>
+
+ +

Hier gibt es eine Live-Ausgabe:

+ +
+

Hinweis: Laden Sie die Seite neu, um die Animation zu sehen. Oder klicken Sie auf den CodePen-Knopf, um die Animation innerhalb der CodePen-Umgebung zu betrachten.

+
+ +

{{EmbedLiveSample('Using_animation_events', '600', '300')}}

+ +

Zum Weiterlesen

+ + diff --git a/files/de/web/css/css_background_and_borders/box-shadow_generator/index.html b/files/de/web/css/css_background_and_borders/box-shadow_generator/index.html new file mode 100644 index 0000000000..b087898d03 --- /dev/null +++ b/files/de/web/css/css_background_and_borders/box-shadow_generator/index.html @@ -0,0 +1,2884 @@ +--- +title: Box-shadow Generator +slug: Web/CSS/CSS_Boxmodell/Box-shadow_generator +tags: + - CSS3 + - Werkzeuge + - box-shadow +translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator +--- +

Dieses Werkzeug erlaubt es, CSS {{cssxref("box-shadow")}} Effekte zu erstellen, um Schlagschatteneffekte zu CSS Objekten hinzuzufügen.

+ +
+

box-shadow generator

+ +

HTML Content

+ +
<div id="container">
+    <div class="group section">
+        <div id="layer_manager">
+            <div class="group section">
+                <div class="button" data-type="add"> </div>
+                <div class="button" data-type="move-up"> </div>
+                <div class="button" data-type="move-down"> </div>
+            </div>
+            <div id="stack_container"></div>
+        </div>
+
+        <div id="preview_zone">
+            <div id="layer_menu" class="col span_12">
+                <div class="button" id="element" data-type="subject" data-title="element"> element </div>
+                <div class="button" id="before" data-type="subject" data-title=":before">
+                    :before
+                    <span class="delete" data-type="disable"></span>
+                </div>
+                <div class="button" id="after" data-type="subject" data-title=":after">
+                    :after
+                    <span class="delete" data-type="disable"></span>
+                </div>
+                <div class="ui-checkbox" data-topic='before' data-label=":before"></div>
+                <div class="ui-checkbox" data-topic='after' data-label=":after"></div>
+            </div>
+
+            <div id="preview">
+                <div id="obj-element">
+                    <div class="content"> </div>
+                    <div id="obj-before"> </div>
+                    <div id="obj-after"> </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div id="controls" class="group section">
+        <div class="wrap-left">
+            <div class="colorpicker category">
+                <div class="title"> </div>
+                <div id="colorpicker" class="group">
+                    <div id="gradient" class="gradient">
+                        <div id="gradient_picker"> </div>
+                    </div>
+                    <div id="hue" data-topic="hue" class="hue">
+                        <div id="hue_selector"> </div>
+                    </div>
+                    <div class="info">
+                        <div class="input" data-topic="hue" data-title='H:' data-action="HSV"></div>
+                        <div class="input" data-topic="saturation" data-title='S:' data-action="HSV"></div>
+                        <div class="input" data-topic="value" data-title='V:' data-action="HSV"></div>
+                    </div>
+                    <div class="alpha">
+                        <div id="alpha" data-topic="alpha">
+                            <div id="alpha_selector"> </div>
+                        </div>
+                    </div>
+                    <div class="info">
+                        <div class="input" data-topic="r" data-title='R:' data-action="RGB"></div>
+                        <div class="input" data-topic="g" data-title='G:' data-action="RGB"></div>
+                        <div class="input" data-topic="b" data-title='B:' data-action="RGB"></div>
+                    </div>
+                    <div class="preview block">
+                        <div id="output_color"> </div>
+                    </div>
+                    <div class="block info">
+                        <div class="input" data-topic="a" data-title='alpha:' data-action="alpha"></div>
+                        <div class="input" data-topic="hexa" data-title='' data-action="hexa"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="wrap-right">
+
+            <div id="shadow_properties" class="category">
+                <div class="title"> Shadow properties </div>
+                <div class="group">
+                    <div class="group property">
+                        <div class="ui-slider-name"> inset </div>
+                        <div class="ui-checkbox" data-topic='inset'></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Position x </div>
+                        <div class="ui-slider-btn-set" data-topic="posX" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="posX"
+                            data-min="-500" data-max="500" data-step="1"> </div>
+                        <div class="ui-slider-btn-set" data-topic="posX" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="posX" data-unit="px"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Position y </div>
+                        <div class="ui-slider-btn-set" data-topic="posY" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="posY"
+                            data-min="-500" data-max="500" data-step="1"> </div>
+                        <div class="ui-slider-btn-set" data-topic="posY" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="posY" data-unit="px"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Blur </div>
+                        <div class="ui-slider-btn-set" data-topic="blur" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="blur"
+                            data-min="0" data-max="200" data-step="1"> </div>
+                        <div class="ui-slider-btn-set" data-topic="blur" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="blur" data-unit="px"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Spread </div>
+                        <div class="ui-slider-btn-set" data-topic="spread" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="spread"
+                            data-min="-100"    data-max="100" data-step="1" data-value="50">
+                        </div>
+                        <div class="ui-slider-btn-set" data-topic="spread" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="spread" data-unit="px"></div>
+                    </div>
+                </div>
+            </div>
+
+            <div id="element_properties" class="category">
+                <div class="title"> Class element properties </div>
+                <div class="group">
+                    <div class="group property">
+                        <div class="ui-slider-name"> border </div>
+                        <div class="ui-checkbox" data-topic='border-state' data-state="true"></div>
+                    </div>
+                    <div id="z-index" class="slidergroup">
+                        <div class="ui-slider-name"> z-index </div>
+                        <div class="ui-slider-btn-set" data-topic="z-index" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="z-index"
+                            data-min="-10" data-max="10" data-step="1"></div>
+                        <div class="ui-slider-btn-set" data-topic="z-index" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="z-index"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> top </div>
+                        <div class="ui-slider-btn-set" data-topic="top" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="top"
+                            data-min="-500" data-max="500" data-step="1"> </div>
+                        <div class="ui-slider-btn-set" data-topic="top" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="top" data-unit="px"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> left </div>
+                        <div class="ui-slider-btn-set" data-topic="left" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="left"
+                            data-min="-300" data-max="700" data-step="1"> </div>
+                        <div class="ui-slider-btn-set" data-topic="left" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="left" data-unit="px"></div>
+                    </div>
+                    <div id="transform_rotate" class="slidergroup">
+                        <div class="ui-slider-name"> Rotate </div>
+                        <div class="ui-slider-btn-set" data-topic="rotate" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="rotate"
+                            data-min="-360" data-max="360" data-step="1" data-value="0">
+                        </div>
+                        <div class="ui-slider-btn-set" data-topic="rotate" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="rotate" data-unit="deg"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Width </div>
+                        <div class="ui-slider-btn-set" data-topic="width" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="width"
+                            data-min="0" data-max="1000" data-step="1" data-value="200">
+                        </div>
+                        <div class="ui-slider-btn-set" data-topic="width" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="width"  data-unit="px"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Height </div>
+                        <div class="ui-slider-btn-set" data-topic="height" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="height"
+                            data-min="0" data-max="400" data-step="1" data-value="200">
+                        </div>
+                        <div class="ui-slider-btn-set" data-topic="height" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="height" data-unit="px"></div>
+                    </div>
+                </div>
+            </div>
+
+            <div id="output" class="category">
+                <div id="menu" class="menu"></div>
+                <div class="title">    CSS Code </div>
+                <div class="group" style="border-top-left-radius: 0;">
+                    <div class="output" data-topic="element" data-name="element"
+                        data-prop="width height background-color position=[relative] box-shadow">
+                    </div>
+                    <div class="output" data-topic="before" data-name="element:before"
+                        data-prop="content=[&quot;&quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform">
+                    </div>
+                    <div class="output" data-topic="after" data-name="element:after"
+                        data-prop="content=[&quot;&quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+ +

CSS Content

+ +
/*  GRID OF TWELVE
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+/*
+ * UI Slider
+ */
+
+.slidergroup {
+	height: 20px;
+	margin: 10px 0;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.slidergroup * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Slider */
+
+.ui-slider {
+	height: 10px;
+	width: 200px;
+	margin: 4px 10px;
+	display: block;
+	border: 1px solid #999;
+	border-radius: 3px;
+	background: #EEE;
+}
+
+.ui-slider:hover {
+	cursor: pointer;
+}
+
+.ui-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-slider-pointer {
+	width: 13px;
+	height: 13px;
+	background-color: #EEE;
+	border: 1px solid #2C9FC9;
+	border-radius: 3px;
+	position: relative;
+	top: -3px;
+	left: 0%;
+}
+
+.ui-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 3px;
+	color: #FFF;
+	font-weight: bold;
+	text-align: center;
+}
+
+.ui-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+.ui-slider-input > input {
+	margin: 0 10px;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/*
+ * UI Button
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox > input {
+ 	display: none;
+}
+
+.ui-checkbox > label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 3px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox > label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox > input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+/*
+ * BOX SHADOW GENERATOR TOOL
+ */
+
+body {
+	max-width: 1000px;
+	height: 800px;
+	margin: 20px auto 0;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+}
+
+#container {
+	width: 100%;
+	padding: 2px;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/* container with shadows stacks */
+#stack_container {
+	height: 400px;
+	overflow: hidden;
+	position: relative;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#stack_container .container {
+	height: 100%;
+	width: 100%;
+	position: absolute;
+	left: 100%;
+	transition-property: left;
+	transition-duration: 0.5s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+#stack_container .title {
+	text-align: center;
+	font-weight: bold;
+	line-height: 2em;
+	border-bottom: 1px solid #43A6E1;
+	color: #666;
+}
+
+
+/*
+ * Stack of Layers for shadow
+ */
+
+#layer_manager {
+	width: 17%;
+	background-color: #FEFEFE;
+	margin: 0 1% 0 0;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	float: left;
+}
+
+
+#layer_manager .button {
+	width: 30%;
+	height: 25px;
+	margin:0 0 10px;
+	color: #333;
+	background-color: #EEE;
+	text-align: center;
+	font-size: 0.75em;
+	line-height: 1.5em;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+
+	display: block;
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	float: left;
+}
+
+#layer_manager .button:hover {
+	background-color: #3380C4;
+	border: 1px solid #3380C4;
+	cursor: pointer;
+}
+
+#layer_manager [data-type='add'] {
+	background-image: url("https://mdn.mozillademos.org/files/5685/add-black.png");
+}
+
+#layer_manager [data-type='add']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5687/add-white.png");
+}
+
+#layer_manager [data-type='move-up'] {
+	background-image: url("https://mdn.mozillademos.org/files/5697/up-black.png");
+	margin-left: 5%;
+	margin-right: 5%;
+}
+
+#layer_manager [data-type='move-up']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5709/up-white.png");
+}
+
+#layer_manager [data-type='move-down'] {
+	background-image: url("https://mdn.mozillademos.org/files/5693/down-black.png");
+}
+
+#layer_manager [data-type='move-down']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5695/down-white.png");
+}
+
+/* shadows classes */
+
+#layer_manager .node {
+	width: 100%;
+	margin: 5px 0;
+	padding: 5px;
+	text-align: center;
+	background-color: #EEE;
+	border: 1px solid #DDD;
+	font-size: 0.75em;
+	line-height: 1.5em;
+	color: #333;
+	border-radius: 3px;
+
+	position: relative;
+	display: block;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_manager .node:hover {
+	color: #FFF;
+	background-color: #3380C4;
+	cursor: pointer;
+}
+
+/* active element styling */
+
+#layer_manager [data-active='layer'] {
+	color: #FFF;
+	border: none;
+	background-color: #379B4A;
+}
+
+#layer_manager [data-active='subject'] {
+	color: #FFF;
+	background-color: #467FC9;
+}
+
+/* delete button */
+
+#layer_manager .delete {
+	width: 1.5em;
+	height: 100%;
+	float: right;
+	border-radius: 3px;
+	background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	position: absolute;
+	top: 0;
+	right: 10px;
+	display: none;
+}
+
+#layer_manager .delete:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png");
+}
+
+#layer_manager .node:hover .delete {
+	display: block;
+}
+
+
+#layer_manager .stack {
+	padding: 0 5px;
+	max-height: 90%;
+	overflow: auto;
+	overflow-x: hidden;
+}
+
+
+/*
+ * Layer Menu
+ */
+
+#layer_menu {
+	margin: 0 0 10px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_menu .button {
+	width: 100px;
+	margin: 0 5px 0 0;
+	padding: 2.5px;
+	color: #333;
+	background-color: #EEE;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+	font-size: 0.75em;
+	line-height: 1.5em;
+
+	position: relative;
+	display: block;
+	float: left;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_menu .button:hover {
+	color: #FFF;
+	background-color: #3380C4;
+	border: 1px solid #3380C4;
+	cursor: pointer;
+}
+
+#layer_menu .delete {
+	width: 1.5em;
+	height: 100%;
+	float: right;
+	border-radius: 3px;
+	background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	position: absolute;
+	top: 0;
+	right: 5px;
+	display: none;
+}
+
+#layer_menu .delete:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png");
+}
+
+#layer_menu .button:hover .delete {
+	display: block;
+}
+
+
+/*
+ * active element styling
+ */
+
+#layer_menu [data-active='subject'] {
+	color: #FFF;
+	background-color: #379B4A;
+	border: 1px solid #379B4A;
+}
+
+
+/* Checkbox */
+
+#layer_menu .ui-checkbox > label {
+	height: 15px;
+	line-height: 17px;
+	font-weight: normal;
+	width: 46px;
+	margin: 0 5px 0 0;
+}
+
+#layer_menu .ui-checkbox > input:checked + label {
+	display: none;
+}
+
+
+/******************************************************************************/
+/******************************************************************************/
+/*
+ * Preview Area
+ */
+
+#preview_zone {
+	width: 82%;
+	float: left;
+
+}
+
+
+#preview {
+	width: 100%;
+	height: 400px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	cursor: move;
+	float: left;
+}
+
+#preview .content {
+	width: 100%;
+	height: 100%;
+	display: block;
+}
+
+#obj-element {
+	width: 300px;
+	height: 100px;
+	border: 1px solid #CCC;
+	background: #FFF;
+	position: relative;
+}
+
+
+#obj-before {
+	height: 100%;
+	width: 100%;
+	background: #999;
+	border: 1px solid #CCC;
+	text-align: left;
+	display : block;
+	position: absolute;
+	z-index: -1;
+}
+
+#obj-after {
+	height: 100%;
+	width: 100%;
+	background: #DDD;
+	border: 1px solid #CCC;
+	text-align: right;
+	display : block;
+	position: absolute;
+	z-index: -1;
+}
+
+
+/******************************************************************************/
+/******************************************************************************/
+
+/**
+ * Controls
+ */
+
+.wrap-left {
+	float: left;
+	overflow: hidden;
+}
+
+.wrap-right {
+	float: right;
+	overflow: hidden;
+}
+
+.wrap-left > * {
+	float: left;
+}
+
+.wrap-right > * {
+	float: right;
+}
+
+@media (min-width: 960px) {
+
+	.wrap-left {
+		width: 45%;
+	}
+
+	.wrap-right {
+		width: 55%;
+	}
+}
+
+
+@media (max-width: 959px) {
+
+	.wrap-left {
+		width: 30%;
+	}
+
+	.wrap-right {
+		width: 70%;
+	}
+}
+
+
+#controls {
+	color: #444;
+	margin: 10px 0 0 0;
+}
+
+
+#controls .category {
+	width: 500px;
+	margin: 0 auto 20px;
+	padding: 0;
+
+}
+
+#controls .category .title {
+	width: 100%;
+	height: 1.5em;
+	line-height: 1.5em;
+	color: #AAA;
+	text-align: right;
+}
+
+#controls .category > .group {
+	border: 1px solid #CCC;
+	border-radius: 3px;
+}
+
+
+/**
+ * 	Color Picker
+ */
+
+@media (min-width: 960px) {
+	#controls .colorpicker {
+		width: 420px;
+	}
+}
+
+@media (max-width: 959px) {
+	#controls .colorpicker {
+		width: 210px;
+	}
+}
+
+#colorpicker {
+	width: 100%;
+	margin: 0 auto;
+}
+
+#colorpicker .gradient {
+	width: 200px;
+	height: 200px;
+	margin: 5px;
+	background: url("https://mdn.mozillademos.org/files/5707/picker_mask_200.png");
+	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background-color: #F00;
+	float: left;
+}
+
+#colorpicker .hue {
+	width: 200px;
+	height: 30px;
+	margin: 5px;
+	background: url("https://mdn.mozillademos.org/files/5701/hue.png");
+	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	float: left;
+}
+
+#colorpicker .alpha {
+	width: 200px;
+	height: 30px;
+	margin: 5px;
+	border: 1px solid #CCC;
+	float: left;
+	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#colorpicker #alpha {
+	width: 100%;
+	height: 100%;
+	background: url("https://mdn.mozillademos.org/files/5703/alpha_mask.png");
+	background: -moz-linear-gradient(left, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 1) 100%);
+}
+
+#colorpicker #gradient_picker {
+	width: 0.5em;
+	height: 0.5em;
+	border-radius: 0.4em;
+	border: 2px solid #CCC;
+	position: relative;
+	top: 20%;
+	left: 20%;
+}
+
+#colorpicker #hue_selector,
+#colorpicker #alpha_selector {
+	width: 3px;
+	height: 100%;
+	border: 1px solid #777;
+	background-color: #FFF;
+	position: relative;
+	top: -1px;
+	left: 0%;
+}
+
+/* input HSV and RGB */
+#colorpicker .info {
+	width: 200px;
+	margin: 5px;
+	float: left;
+}
+
+#colorpicker .info * {
+	float: left;
+}
+
+#colorpicker .info input {
+	margin: 0;
+	text-align: center;
+	width: 30px;
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+#colorpicker .info span {
+	height: 20px;
+	width: 30px;
+	text-align: center;
+	line-height: 20px;
+	display: block;
+}
+
+/* Preview color */
+#colorpicker .block {
+	width: 95px;
+	height: 54px;
+	float: left;
+	position: relative;
+}
+
+#colorpicker .preview {
+	margin: 5px;
+	border: 1px solid #CCC;
+	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#colorpicker .preview:before {
+	height: 100%;
+	width: 50%;
+	left: 50%;
+	content: "";
+	background: #FFF;
+	position: absolute;
+	z-index: 1;
+}
+
+#colorpicker .preview > * {
+	width: 50%;
+	height: 100%;
+}
+
+#colorpicker #output_color {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	z-index: 2;
+}
+
+#colorpicker .block .input {
+	float: right;
+}
+
+#colorpicker [data-topic="a"] > span {
+	width: 50px;
+}
+
+#colorpicker [data-topic="hexa"] {
+	float: right;
+	margin: 10px 0 0 0;
+}
+
+#colorpicker [data-topic="hexa"] > span {
+	display: none;
+}
+
+#colorpicker [data-topic="hexa"] > input {
+	width: 85px;
+	padding: 2px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/*
+ * UI Components
+ */
+
+/* Property */
+
+.property {
+	height: 20px;
+	margin: 10px 0;
+}
+
+.property * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Slider */
+
+#controls .ui-slider-name {
+	margin: 0 10px 0 0;
+}
+
+/*
+ * Output code styling
+ */
+
+#output {
+	position: relative;
+}
+
+#output .menu {
+	max-width: 70%;
+	height: 20px;
+	position: absolute;
+	top: 2px;
+}
+
+#output .button {
+	width: 90px;
+	height: 22px;
+	margin: 0 5px 0 0;
+	text-align: center;
+	line-height: 20px;
+	font-size: 14px;
+	color: #FFF;
+	background-color: #999;
+	border-top-left-radius: 3px;
+	border-top-right-radius: 3px;
+	bottom: -5px;
+	float:left;
+}
+
+#output .button:hover {
+	color: #FFF;
+	background-color: #666;
+	cursor: pointer;
+}
+
+#output .menu [data-active="true"] {
+	color: #777;
+	background-color: #FFF;
+	border: 1px solid #CCC;
+	border-bottom: none;
+}
+
+#output .menu [data-topic="before"] {
+	left: 100px;
+}
+
+#output .menu [data-topic="after"] {
+	left: 200px;
+}
+
+#output .output {
+	width: 480px;
+	margin: 10px;
+	padding: 10px;
+	overflow: hidden;
+	color: #555;
+	font-size: 14px;
+	border: 1px dashed #CCC;
+	border-radius: 3px;
+	display: none;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+#output .css-property {
+	width: 100%;
+	float: left;
+	white-space: pre;
+}
+
+#output .name {
+	width: 35%;
+	float: left;
+}
+
+#output .value {
+	width: 65%;
+	float: left;
+}
+
+
+ +

JavaScript Content

+ +

+
+'use strict';
+
+/**
+ * UI-SlidersManager
+ */
+
+var SliderManager = (function SliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var Slider = function(node) {
+		var min = node.getAttribute('data-min') | 0;
+		var max = node.getAttribute('data-max') | 0;
+		var step = node.getAttribute('data-step') | 0;
+		var value = node.getAttribute('data-value') | 0;
+		var snap = node.getAttribute('data-snap');
+		var topic = node.getAttribute('data-topic');
+
+		this.min = min;
+		this.max = max > 0 ? max : 100;
+		this.step = step === 0 ? 1 : step;
+		this.value = value <= max && value >= min ? value : (min + max) / 2 | 0;
+		this.snap = snap === "true" ? true : false;
+		this.topic = topic;
+		this.node = node;
+
+		var pointer = document.createElement('div');
+		pointer.className = 'ui-slider-pointer';
+		node.appendChild(pointer);
+		this.pointer = pointer;
+
+		setMouseTracking(node, updateSlider.bind(this));
+
+		sliders[topic] = this;
+		setValue(topic, this.value);
+	}
+
+	var setButtonComponent = function setButtonComponent(node) {
+		var type = node.getAttribute('data-type');
+		var topic = node.getAttribute('data-topic');
+		if (type === "sub") {
+			node.textContent = '-';
+			node.addEventListener("click", function() {
+				decrement(topic);
+			});
+		}
+		if (type === "add") {
+			node.textContent = '+';
+			node.addEventListener("click", function() {
+				increment(topic);
+			});
+		}
+	}
+
+	var setInputComponent = function setInputComponent(node) {
+		var topic		= node.getAttribute('data-topic');
+		var unit_type	= node.getAttribute('data-unit');
+
+		var input = document.createElement('input');
+		var unit = document.createElement('span');
+		unit.textContent = unit_type;
+
+		input.setAttribute('type', 'text');
+		node.appendChild(input);
+		node.appendChild(unit);
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			setValue(topic, e.target.value | 0);
+		});
+
+		subscribe(topic, function(value) {
+			node.children[0].value = value;
+		});
+	}
+
+	var increment = function increment(topic) {
+		var slider = sliders[topic];
+		if (slider === null || slider === undefined)
+			return;
+
+		if (slider.value + slider.step <= slider.max) {
+			slider.value += slider.step;
+			setValue(slider.topic, slider.value)
+			notify.call(slider);
+		}
+	};
+
+	var decrement = function decrement(topic) {
+		var slider = sliders[topic];
+		if (slider === null || slider === undefined)
+			return;
+
+		if (slider.value - slider.step >= slider.min) {
+			slider.value -= slider.step;
+			setValue(topic, slider.value)
+			notify.call(slider);
+		}
+	}
+
+	// this = Slider object
+	var updateSlider = function updateSlider(e) {
+		var node = this.node;
+		var pos = e.pageX - node.offsetLeft;
+		var width = node.clientWidth;
+		var delta = this.max - this.min;
+		var offset = this.pointer.clientWidth + 4; // border width * 2
+
+		if (pos < 0) pos = 0;
+		if (pos > width) pos = width;
+
+		var value = pos * delta / width | 0;
+		var precision = value % this.step;
+		value = value - precision + this.min;
+		if (precision > this.step / 2)
+			value = value + this.step;
+
+		if (this.snap)
+			pos =  (value - this.min) * width / delta;
+
+		this.pointer.style.left = pos - offset/2 + "px";
+		this.value = value;
+		node.setAttribute('data-value', value);
+		notify.call(this);
+	}
+
+	var setValue = function setValue(topic, value) {
+		var slider = sliders[topic];
+
+		if (value > slider.max || value < slider.min)
+			return;
+
+		var delta = slider.max - slider.min;
+		var width = slider.node.clientWidth;
+		var offset = slider.pointer.clientWidth;
+		var pos =  (value - slider.min) * width / delta;
+		slider.value = value;
+		slider.pointer.style.left = pos - offset / 2 + "px";
+		slider.node.setAttribute('data-value', value);
+		notify.call(slider);
+	}
+
+	var setMouseTracking = function setMouseTracking(elem, callback) {
+		elem.addEventListener("mousedown", function(e) {
+			callback(e);
+			document.addEventListener("mousemove", callback);
+		});
+
+		document.addEventListener("mouseup", function(e) {
+			document.removeEventListener("mousemove", callback);
+		});
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	}
+
+	var init = function init() {
+		var elem, size;
+
+		elem = document.querySelectorAll('.ui-slider-btn-set');
+		size = elem.length;
+		for (var i = 0; i < size; i++)
+			setButtonComponent(elem[i]);
+
+		elem = document.querySelectorAll('.ui-slider-input');
+		size = elem.length;
+		for (var i = 0; i < size; i++)
+			setInputComponent(elem[i]);
+
+		elem = document.querySelectorAll('.ui-slider');
+		size = elem.length;
+		for (var i = 0; i < size; i++)
+			new Slider(elem[i]);
+	}
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	}
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	}
+
+	var setValue = function setValue(topic, value) {
+		try {
+			buttons[topic].checkbox.checked = value;
+			notify.call(buttons[topic]);
+		}
+		catch(error) {
+			console.log(error, topic, value);
+		}
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new CheckBox(elem[i]);
+	}
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+
+window.addEventListener("load", function(){
+	BoxShadow.init();
+});
+
+var BoxShadow = (function BoxShadow() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	/**
+	 * RGBA Color class
+	 */
+
+	function Color() {
+		this.r = 0;
+		this.g = 0;
+		this.b = 0;
+		this.a = 1;
+		this.hue = 0;
+		this.saturation = 0;
+		this.value = 0;
+	}
+
+	Color.prototype.copy = function copy(obj) {
+		if(obj instanceof Color !== true) {
+			console.log("Typeof instance not Color");
+			return;
+		}
+
+		this.r = obj.r;
+		this.g = obj.g;
+		this.b = obj.b;
+		this.a = obj.a;
+		this.hue = obj.hue;
+		this.saturation = obj.saturation;
+		this.value = obj.value;
+	}
+
+	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
+		if (red != undefined)
+			this.r = red | 0;
+		if (green != undefined)
+			this.g = green | 0;
+		if (blue != undefined)
+			this.b = blue | 0;
+		if (alpha != undefined)
+			this.a = alpha | 0;
+	}
+
+	/**
+	 * HSV/HSB (hue, saturation, value / brightness)
+	 * @param hue			0-360
+	 * @param saturation	0-100
+	 * @param value 		0-100
+	 */
+	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.value = value;
+		this.updateRGB();
+	}
+
+	Color.prototype.updateRGB = function updateRGB() {
+		var sat = this.saturation / 100;
+		var value = this.value / 100;
+		var C = sat * value;
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = value - C;
+		var precision = 255;
+
+		C = (C + m) * precision;
+		X = (X + m) * precision;
+		m = m * precision;
+
+		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
+		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
+		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
+		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
+		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
+		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
+	}
+
+	Color.prototype.updateHSV = function updateHSV() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / cmax;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue < 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.value = (cmax * 100) | 0;
+	}
+
+	Color.prototype.setHexa = function setHexa(value) {
+		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value)
+		if (valid !== true)
+			return;
+
+		if (value[0] === '#')
+			value = value.slice(1, value.length);
+
+		if (value.length === 3)
+			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,"$1$1$2$2$3$3");
+
+		this.r = parseInt(value.substr(0, 2), 16);
+		this.g = parseInt(value.substr(2, 2), 16);
+		this.b = parseInt(value.substr(4, 2), 16);
+
+		this.alpha	= 1;
+	}
+
+	Color.prototype.getHexa = function getHexa() {
+		var r = this.r.toString(16);
+		var g = this.g.toString(16);
+		var b = this.b.toString(16);
+		if (this.r < 16) r = '0' + r;
+		if (this.g < 16) g = '0' + g;
+		if (this.b < 16) b = '0' + b;
+		var value = '#' + r + g + b;
+		return value.toUpperCase();
+	}
+
+	Color.prototype.getRGBA = function getRGBA() {
+
+		var rgb = "(" + this.r + ", " + this.g + ", " + this.b;
+		var a = '';
+		var v = '';
+		if (this.a !== 1) {
+			a = 'a';
+			v = ', ' + this.a;
+		}
+
+		var value = "rgb" + a + rgb + v + ")";
+		return value;
+	}
+
+	Color.prototype.getColor = function getColor() {
+		if (this.a | 0 === 1)
+			return this.getHexa();
+		return this.getRGBA();
+	}
+
+	/**
+	 * Shadow Object
+	 */
+	function Shadow() {
+		this.inset  = false;
+		this.posX   = 5;
+		this.posY   = -5;
+		this.blur   = 5;
+		this.spread = 0;
+		this.color  = new Color();
+
+		var hue			= (Math.random() * 360) | 0;
+		var saturation	= (Math.random() * 75) | 0;
+		var value 		= (Math.random() * 50 + 50) | 0;
+		this.color.setHSV(hue, saturation, value, 1);
+	}
+
+	Shadow.prototype.computeCSS = function computeCSS() {
+		var value = "";
+		if (this.inset === true)
+			value += "inset ";
+		value += this.posX + "px ";
+		value += this.posY + "px ";
+		value += this.blur + "px ";
+		value += this.spread + "px ";
+		value += this.color.getColor();
+
+		return value;
+	}
+
+	Shadow.prototype.toggleInset = function toggleInset(value) {
+		if (value !== undefined || typeof value === "boolean")
+			this.inset = value;
+		else
+			this.inset = this.inset === true ? false : true;
+	}
+
+	Shadow.prototype.copy = function copy(obj) {
+		if(obj instanceof Shadow !== true) {
+			console.log("Typeof instance not Shadow");
+			return;
+		}
+
+		this.inset  = obj.inset;
+		this.posX   = obj.posX;
+		this.posY   = obj.posY;
+		this.blur   = obj.blur;
+		this.spread = obj.spread;
+		this.color.copy(obj.color);
+	}
+
+	/**
+	 * Color Picker
+	 */
+	var ColoPicker = (function ColoPicker() {
+
+		var colorpicker;
+		var hue_area;
+		var gradient_area;
+		var alpha_area;
+		var gradient_picker;
+		var hue_selector;
+		var alpha_selector;
+		var pick_object;
+		var info_rgb;
+		var info_hsv;
+		var info_hexa;
+		var output_color;
+		var color = new Color();
+		var subscribers = [];
+
+		var updateColor = function updateColor(e) {
+			var x = e.pageX - gradient_area.offsetLeft;
+			var y = e.pageY - gradient_area.offsetTop;
+
+			// width and height should be the same
+			var size = gradient_area.clientWidth;
+
+			if (x > size)
+				x = size;
+			if (y > size)
+				y = size;
+
+			if (x < 0) x = 0;
+			if (y < 0) y = 0;
+
+			var value = 100 - (y * 100 / size) | 0;
+			var saturation = x * 100 / size | 0;
+
+			color.setHSV(color.hue, saturation, value);
+			// should update just
+			// color pointer location
+			updateUI();
+			notify("color", color);
+		}
+
+		var updateHue = function updateHue(e) {
+			var x = e.pageX - hue_area.offsetLeft;
+			var width = hue_area.clientWidth;
+
+			if (x < 0) x = 0;
+			if (x > width) x = width;
+
+			var hue = ((360 * x) / width) | 0;
+			if (hue === 360) hue = 359;
+
+			color.setHSV(hue, color.saturation, color.value);
+
+			// should update just
+			// hue pointer location
+			// picker area background
+			// alpha area background
+			updateUI();
+			notify("color", color);
+		}
+
+		var updateAlpha = function updateAlpha(e) {
+			var x = e.pageX - alpha_area.offsetLeft;
+			var width = alpha_area.clientWidth;
+
+			if (x < 0) x = 0;
+			if (x > width) x = width;
+
+			color.a = (x / width).toFixed(2);
+
+			// should update just
+			// alpha pointer location
+			updateUI();
+			notify("color", color);
+		}
+
+		var setHueGfx = function setHueGfx(hue) {
+			var sat = color.saturation;
+			var val = color.value;
+			var alpha = color.a;
+
+			color.setHSV(hue, 100, 100);
+			gradient_area.style.backgroundColor = color.getHexa();
+
+			color.a = 0;
+			var start = color.getRGBA();
+			color.a = 1;
+			var end = color.getRGBA();
+			color.a = alpha;
+
+			var gradient = '-moz-linear-gradient(left, ' +	start + '0%, ' + end + ' 100%)';
+			alpha_area.style.background = gradient;
+		}
+
+		var updateUI = function updateUI() {
+			var x, y;		// coordinates
+			var size;		// size of the area
+			var offset;		// pointer graphic selector offset
+
+			// Set color pointer location
+			size = gradient_area.clientWidth;
+			offset = gradient_picker.clientWidth / 2 + 2;
+
+			x = (color.saturation * size / 100) | 0;
+			y = size - (color.value * size / 100) | 0;
+
+			gradient_picker.style.left = x - offset + "px";
+			gradient_picker.style.top = y - offset + "px";
+
+			// Set hue pointer location
+			size = hue_area.clientWidth;
+			offset = hue_selector.clientWidth/2;
+			x = (color.hue * size / 360 ) | 0;
+			hue_selector.style.left = x - offset + "px";
+
+			// Set alpha pointer location
+			size = alpha_area.clientWidth;
+			offset = alpha_selector.clientWidth/2;
+			x = (color.a * size) | 0;
+			alpha_selector.style.left = x - offset + "px";
+
+			// Set picker area background
+			var nc = new Color();
+			nc.copy(color);
+			if (nc.hue === 360) nc.hue = 0;
+			nc.setHSV(nc.hue, 100, 100);
+			gradient_area.style.backgroundColor = nc.getHexa();
+
+			// Set alpha area background
+			nc.copy(color);
+			nc.a = 0;
+			var start = nc.getRGBA();
+			nc.a = 1;
+			var end = nc.getRGBA();
+			var gradient = '-moz-linear-gradient(left, ' +	start + '0%, ' + end + ' 100%)';
+			alpha_area.style.background = gradient;
+
+			// Update color info
+			notify("color", color);
+			notify("hue", color.hue);
+			notify("saturation", color.saturation);
+			notify("value", color.value);
+			notify("r", color.r);
+			notify("g", color.g);
+			notify("b", color.b);
+			notify("a", color.a);
+			notify("hexa", color.getHexa());
+			output_color.style.backgroundColor = color.getRGBA();
+		}
+
+		var setInputComponent = function setInputComponent(node) {
+			var topic = node.getAttribute('data-topic');
+			var title = node.getAttribute('data-title');
+			var action = node.getAttribute('data-action');
+			title = title === null ? '' : title;
+
+			var input = document.createElement('input');
+			var info = document.createElement('span');
+			info.textContent = title;
+
+			input.setAttribute('type', 'text');
+			input.setAttribute('data-action', 'set-' + action + '-' + topic);
+			node.appendChild(info);
+			node.appendChild(input);
+
+			input.addEventListener('click', function(e) {
+				this.select();
+			});
+
+			input.addEventListener('change', function(e) {
+				if (action === 'HSV')
+					inputChangeHSV(topic);
+				if (action === 'RGB')
+					inputChangeRGB(topic);
+				if (action === 'alpha')
+					inputChangeAlpha(topic);
+				if (action === 'hexa')
+					inputChangeHexa(topic);
+			});
+
+			subscribe(topic, function(value) {
+				node.children[1].value = value;
+			});
+		}
+
+		var inputChangeHSV = function actionHSV(topic) {
+			var selector = "[data-action='set-HSV-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseInt(node.value);
+
+			if (typeof value === 'number' && isNaN(value) === false &&
+				value >= 0 && value < 360)
+				color[topic] = value;
+
+			color.updateRGB();
+			updateUI();
+		}
+
+		var inputChangeRGB = function inputChangeRGB(topic) {
+			var selector = "[data-action='set-RGB-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseInt(node.value);
+
+			if (typeof value === 'number' && isNaN(value) === false &&
+				value >= 0 && value <= 255)
+				color[topic] = value;
+
+			color.updateHSV();
+			updateUI();
+		}
+
+		var inputChangeAlpha = function inputChangeAlpha(topic) {
+			var selector = "[data-action='set-alpha-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseFloat(node.value);
+
+			if (typeof value === 'number' && isNaN(value) === false &&
+				value >= 0 && value <= 1)
+				color.a = value.toFixed(2);
+
+			updateUI();
+		}
+
+		var inputChangeHexa = function inputChangeHexa(topic) {
+			var selector = "[data-action='set-hexa-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = node.value;
+			color.setHexa(value);
+			color.updateHSV();
+			updateUI();
+		}
+
+		var setMouseTracking = function setMouseTracking(elem, callback) {
+
+			elem.addEventListener("mousedown", function(e) {
+				callback(e);
+				document.addEventListener("mousemove", callback);
+			});
+
+			document.addEventListener("mouseup", function(e) {
+				document.removeEventListener("mousemove", callback);
+			});
+		}
+
+		/*
+		 * Observer
+		 */
+		var setColor = function setColor(obj) {
+			if(obj instanceof Color !== true) {
+				console.log("Typeof instance not Color");
+				return;
+			}
+			color.copy(obj);
+			updateUI();
+		}
+
+		var subscribe = function subscribe(topic, callback) {
+			if (subscribers[topic] === undefined)
+				subscribers[topic] = [];
+
+			subscribers[topic].push(callback);
+		}
+
+		var unsubscribe = function unsubscribe(callback) {
+			subscribers.indexOf(callback);
+			subscribers.splice(index, 1);
+		}
+
+		var notify = function notify(topic, value) {
+			for (var i in subscribers[topic])
+				subscribers[topic][i](value);
+		}
+
+		var init = function init() {
+			colorpicker		= getElemById("colorpicker");
+			hue_area		= getElemById("hue");
+			gradient_area	= getElemById("gradient");
+			alpha_area		= getElemById("alpha");
+			gradient_picker	= getElemById("gradient_picker");
+			hue_selector	= getElemById("hue_selector");
+			alpha_selector	= getElemById("alpha_selector");
+			output_color	= getElemById("output_color");
+
+			var elem = document.querySelectorAll('#colorpicker .input');
+			var size = elem.length;
+			for (var i = 0; i < size; i++)
+				setInputComponent(elem[i]);
+
+			setMouseTracking(gradient_area, updateColor);
+			setMouseTracking(hue_area, updateHue);
+			setMouseTracking(alpha_area, updateAlpha);
+
+		}
+
+		return {
+			init : init,
+			setColor : setColor,
+			subscribe : subscribe,
+			unsubscribe : unsubscribe
+		}
+
+	})();
+
+	/**
+	 * Shadow dragging
+	 */
+	var PreviewMouseTracking = (function Drag() {
+		var active = false;
+		var lastX = 0;
+		var lastY = 0;
+		var subscribers = [];
+
+		var init = function init(id) {
+			var elem = getElemById(id);
+			elem.addEventListener('mousedown', dragStart, false);
+			document.addEventListener('mouseup', dragEnd, false);
+		}
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			active = true;
+			lastX = e.clientX;
+			lastY = e.clientY;
+			document.addEventListener('mousemove', mouseDrag, false);
+		}
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			if (active === true) {
+				active = false;
+				document.removeEventListener('mousemove', mouseDrag, false);
+			}
+		}
+
+		var mouseDrag = function mouseDrag(e) {
+			notify(e.clientX - lastX, e.clientY - lastY);
+			lastX = e.clientX;
+			lastY = e.clientY;
+		}
+
+		var subscribe = function subscribe(callback) {
+			subscribers.push(callback);
+		}
+
+		var unsubscribe = function unsubscribe(callback) {
+			var index = subscribers.indexOf(callback);
+			subscribers.splice(index, 1);
+		}
+
+		var notify = function notify(deltaX, deltaY) {
+			for (var i in subscribers)
+				subscribers[i](deltaX, deltaY);
+		}
+
+		return {
+			init : init,
+			subscribe : subscribe,
+			unsubscribe : unsubscribe
+		}
+
+	})();
+
+	/*
+	 * Element Class
+	 */
+	var CssClass = function CssClass(id) {
+		this.left = 0;
+		this.top = 0;
+		this.rotate = 0;
+		this.width = 300;
+		this.height = 100;
+		this.display = true;
+		this.border = true;
+		this.zIndex = -1;
+		this.bgcolor = new Color();
+		this.id = id;
+		this.node = getElemById('obj-' + id);
+		this.object = getElemById(id);
+		this.shadowID = null;
+		this.shadows = []
+		this.render = [];
+		this.init();
+	}
+
+	CssClass.prototype.init = function init() {
+		this.left = ((this.node.parentNode.clientWidth - this.node.clientWidth) / 2) | 0;
+		this.top = ((this.node.parentNode.clientHeight - this.node.clientHeight) / 2) | 0;
+
+		this.setTop(this.top);
+		this.setLeft(this.left);
+		this.setHeight(this.height);
+		this.setWidth(this.width);
+		this.bgcolor.setHSV(0, 0, 100);
+		this.updateBgColor(this.bgcolor);
+	}
+
+	CssClass.prototype.updatePos = function updatePos(deltaX, deltaY) {
+		this.left += deltaX;
+		this.top += deltaY;
+		this.node.style.top = this.top + "px";
+		this.node.style.left = this.left + "px";
+		SliderManager.setValue("left", this.left);
+		SliderManager.setValue("top", this.top);
+	}
+
+	CssClass.prototype.setLeft = function setLeft(value) {
+		this.left = value;
+		this.node.style.left = this.left + "px";
+		OutputManager.updateProperty(this.id, 'left', this.left + 'px');
+	}
+
+	CssClass.prototype.setTop = function setTop(value) {
+		this.top = value;
+		this.node.style.top = this.top + 'px';
+		OutputManager.updateProperty(this.id, 'top', this.top + 'px');
+	}
+
+	CssClass.prototype.setWidth = function setWidth(value) {
+		this.width = value;
+		this.node.style.width = this.width + 'px';
+		OutputManager.updateProperty(this.id, 'width', this.width + 'px');
+	}
+
+	CssClass.prototype.setHeight = function setHeight(value) {
+		this.height = value;
+		this.node.style.height = this.height + 'px';
+		OutputManager.updateProperty(this.id, 'height', this.height + 'px');
+	}
+
+	// Browser support
+	CssClass.prototype.setRotate = function setRotate(value) {
+		var cssvalue = 'rotate(' + value +'deg)';
+
+		this.node.style.transform = cssvalue;
+		this.node.style.webkitTransform = cssvalue;
+		this.node.style.msTransform = cssvalue;
+
+		if (value !== 0) {
+			if (this.rotate === 0) {
+				OutputManager.toggleProperty(this.id, 'transform', true);
+				OutputManager.toggleProperty(this.id, '-webkit-transform', true);
+				OutputManager.toggleProperty(this.id, '-ms-transform', true);
+			}
+		}
+		else {
+			OutputManager.toggleProperty(this.id, 'transform', false);
+			OutputManager.toggleProperty(this.id, '-webkit-transform', false);
+			OutputManager.toggleProperty(this.id, '-ms-transform', false);
+		}
+
+		OutputManager.updateProperty(this.id, 'transform', cssvalue);
+		OutputManager.updateProperty(this.id, '-webkit-transform', cssvalue);
+		OutputManager.updateProperty(this.id, '-ms-transform', cssvalue);
+		this.rotate = value;
+	}
+
+	CssClass.prototype.setzIndex = function setzIndex(value) {
+		this.node.style.zIndex = value;
+		OutputManager.updateProperty(this.id, 'z-index', value);
+		this.zIndex = value;
+	}
+
+	CssClass.prototype.toggleDisplay = function toggleDisplay(value) {
+		if (typeof value !== "boolean" || this.display === value)
+			return;
+
+		this.display = value;
+		var display = this.display === true ? "block" : "none";
+		this.node.style.display = display;
+		this.object.style.display = display;
+	}
+
+	CssClass.prototype.toggleBorder = function toggleBorder(value) {
+		if (typeof value !== "boolean" || this.border === value)
+			return;
+
+		this.border = value;
+		var border = this.border === true ? "1px solid #CCC" : "none";
+		this.node.style.border = border;
+	}
+
+	CssClass.prototype.updateBgColor = function updateBgColor(color) {
+		this.bgcolor.copy(color);
+		this.node.style.backgroundColor = color.getColor();
+		OutputManager.updateProperty(this.id, 'background-color', color.getColor());
+	}
+
+	CssClass.prototype.updateShadows = function updateShadows() {
+		if (this.render.length === 0)
+			OutputManager.toggleProperty(this.id, 'box-shadow', false);
+		if (this.render.length === 1)
+			OutputManager.toggleProperty(this.id, 'box-shadow', true);
+
+		this.node.style.boxShadow = this.render.join(", ");
+		OutputManager.updateProperty(this.id, 'box-shadow', this.render.join(", \n"));
+
+	}
+
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+
+		var preview;
+		var classes = [];
+		var active = null;
+		var animate = false;
+
+		/*
+		 * Toll actions
+		 */
+		var addCssClass = function addCssClass(id) {
+			classes[id] = new CssClass(id);
+		}
+
+		var setActiveClass = function setActiveClass(id) {
+			active = classes[id];
+			active.shadowID = null;
+			ColoPicker.setColor(classes[id].bgcolor);
+			SliderManager.setValue("top", active.top);
+			SliderManager.setValue("left", active.left);
+			SliderManager.setValue("rotate", active.rotate);
+			SliderManager.setValue("z-index", active.zIndex);
+			SliderManager.setValue("width", active.width);
+			SliderManager.setValue("height", active.height);
+			ButtonManager.setValue("border-state", active.border);
+			active.updateShadows();
+		}
+
+		var disableClass = function disableClass(topic) {
+			classes[topic].toggleDisplay(false);
+			ButtonManager.setValue(topic, false);
+		}
+
+		var addShadow = function addShadow(position) {
+			if (animate === true)
+				return -1;
+
+			active.shadows.splice(position, 0, new Shadow());
+			active.render.splice(position, 0, null);
+		}
+
+		var swapShadow = function swapShadow(id1, id2) {
+			var x = active.shadows[id1];
+			active.shadows[id1] = active.shadows[id2];
+			active.shadows[id2] = x;
+			updateShadowCSS(id1);
+			updateShadowCSS(id2);
+		}
+
+		var deleteShadow = function deleteShadow(position) {
+			active.shadows.splice(position, 1);
+			active.render.splice(position, 1);
+			active.updateShadows();
+		}
+
+		var setActiveShadow = function setActiveShadow(id, glow) {
+			active.shadowID = id;
+			ColoPicker.setColor(active.shadows[id].color);
+			ButtonManager.setValue("inset", active.shadows[id].inset);
+			SliderManager.setValue("blur", active.shadows[id].blur);
+			SliderManager.setValue("spread", active.shadows[id].spread);
+			SliderManager.setValue("posX", active.shadows[id].posX);
+			SliderManager.setValue("posY", active.shadows[id].posY);
+			if (glow === true)
+				addGlowEffect(id);
+		}
+
+		var addGlowEffect = function addGlowEffect(id) {
+			if (animate === true)
+				return;
+
+			animate = true;
+			var store = new Shadow();
+			var shadow = active.shadows[id];
+
+			store.copy(shadow);
+			shadow.color.setRGBA(40, 125, 200, 1);
+			shadow.blur = 10;
+			shadow.spread = 10;
+
+			active.node.style.transition = "box-shadow 0.2s";
+			updateShadowCSS(id);
+
+			setTimeout(function() {
+				shadow.copy(store);
+				updateShadowCSS(id);
+				setTimeout(function() {
+					active.node.style.removeProperty("transition");
+					animate = false;
+				}, 100);
+			}, 200);
+		}
+
+		var updateActivePos = function updateActivePos(deltaX, deltaY) {
+			if (active.shadowID === null)
+				active.updatePos(deltaX, deltaY);
+			else
+				updateShadowPos(deltaX, deltaY);
+		}
+
+		/*
+		 * Shadow properties
+		 */
+		var updateShadowCSS = function updateShadowCSS(id) {
+			active.render[id] = active.shadows[id].computeCSS();
+			active.updateShadows();
+		}
+
+		var toggleShadowInset = function toggleShadowInset(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].toggleInset(value);
+			updateShadowCSS(active.shadowID);
+		}
+
+		var updateShadowPos = function updateShadowPos(deltaX, deltaY) {
+			var shadow = active.shadows[active.shadowID];
+			shadow.posX += deltaX;
+			shadow.posY += deltaY;
+			SliderManager.setValue("posX", shadow.posX);
+			SliderManager.setValue("posY", shadow.posY);
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowPosX = function setShadowPosX(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].posX = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowPosY = function setShadowPosY(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].posY = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowBlur = function setShadowBlur(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].blur = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowSpread = function setShadowSpread(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].spread = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var updateShadowColor = function updateShadowColor(color) {
+			active.shadows[active.shadowID].color.copy(color);
+			updateShadowCSS(active.shadowID);
+		}
+
+		/*
+		 * Element Properties
+		 */
+		var updateColor = function updateColor(color) {
+			if (active.shadowID === null)
+				active.updateBgColor(color);
+			else
+				updateShadowColor(color);
+		}
+
+		var init = function init() {
+			preview = getElemById("preview");
+
+			ColoPicker.subscribe("color", updateColor);
+			PreviewMouseTracking.subscribe(updateActivePos);
+
+			// Affects shadows
+			ButtonManager.subscribe("inset", toggleShadowInset);
+			SliderManager.subscribe("posX", setShadowPosX);
+			SliderManager.subscribe("posY", setShadowPosY);
+			SliderManager.subscribe("blur", setShadowBlur);
+			SliderManager.subscribe("spread", setShadowSpread);
+
+			// Affects element
+			SliderManager.subscribe("top", function(value){
+				active.setTop(value);
+			});
+			SliderManager.subscribe("left", function(value){
+				active.setLeft(value);
+			});
+			SliderManager.subscribe("rotate", function(value) {
+				if (active == classes["element"])
+					return;
+				active.setRotate(value);
+			});
+
+			SliderManager.subscribe("z-index", function(value) {
+				if (active == classes["element"])
+					return;
+				active.setzIndex(value);
+			});
+
+			SliderManager.subscribe("width", function(value) {
+				active.setWidth(value)
+			});
+
+			SliderManager.subscribe("height", function(value) {
+				active.setHeight(value)
+			});
+
+			// Actions
+			classes['before'].top = -30;
+			classes['before'].left = -30;
+			classes['after'].top = 30;
+			classes['after'].left = 30;
+			classes['before'].toggleDisplay(false);
+			classes['after'].toggleDisplay(false);
+			ButtonManager.setValue('before', false);
+			ButtonManager.setValue('after', false);
+
+			ButtonManager.subscribe("before", classes['before'].toggleDisplay.bind(classes['before']));
+			ButtonManager.subscribe("after", classes['after'].toggleDisplay.bind(classes['after']));
+
+			ButtonManager.subscribe("border-state", function(value) {
+				active.toggleBorder(value);
+			});
+
+		}
+
+		return {
+			init 			: init,
+			addShadow		: addShadow,
+			swapShadow		: swapShadow,
+			addCssClass		: addCssClass,
+			disableClass	: disableClass,
+			deleteShadow	: deleteShadow,
+			setActiveClass	: setActiveClass,
+			setActiveShadow : setActiveShadow
+		}
+
+	})();
+
+	/**
+	 * Layer Manager
+	 */
+	var LayerManager = (function LayerManager() {
+		var stacks = [];
+		var active = {
+			node : null,
+			stack : null
+		}
+		var elements = {};
+
+		var mouseEvents = function mouseEvents(e) {
+			var node = e.target;
+			var type = node.getAttribute('data-type');
+
+			if (type === 'subject')
+				setActiveStack(stacks[node.id]);
+
+			if (type === 'disable') {
+				Tool.disableClass(node.parentNode.id);
+				setActiveStack(stacks['element']);
+			}
+
+			if (type === 'add')
+				active.stack.addLayer();
+
+			if (type === 'layer')
+				active.stack.setActiveLayer(node);
+
+			if (type === 'delete')
+				active.stack.deleteLayer(node.parentNode);
+
+			if (type === 'move-up')
+				active.stack.moveLayer(1);
+
+			if (type === 'move-down')
+				active.stack.moveLayer(-1);
+		}
+
+		var setActiveStack = function setActiveStack(stackObj) {
+			active.stack.hide();
+			active.stack = stackObj;
+			active.stack.show();
+		}
+
+		/*
+		 * Stack object
+		 */
+		var Stack = function Stack(subject) {
+			var S = document.createElement('div');
+			var title = document.createElement('div');
+			var stack = document.createElement('div');
+
+			S.className = 'container';
+			stack.className = 'stack';
+			title.className = 'title';
+			title.textContent = subject.getAttribute('data-title');
+			S.appendChild(title);
+			S.appendChild(stack);
+
+			this.id = subject.id;
+			this.container = S;
+			this.stack = stack;
+			this.subject = subject;
+			this.order = [];
+			this.uid = 0;
+			this.count = 0;
+			this.layer = null;
+			this.layerID = 0;
+		}
+
+		Stack.prototype.addLayer = function addLayer() {
+			if (Tool.addShadow(this.layerID) == -1)
+				return;
+
+			var uid = this.getUID();
+			var layer = this.createLayer(uid);
+
+			if (this.layer === null && this.stack.children.length >= 1)
+				this.layer = this.stack.children[0];
+
+			this.stack.insertBefore(layer, this.layer);
+			this.order.splice(this.layerID, 0, uid);
+			this.count++;
+			this.setActiveLayer(layer);
+		}
+
+		Stack.prototype.createLayer = function createLayer(uid) {
+			var layer = document.createElement('div');
+			var del = document.createElement('span');
+
+			layer.className = 'node';
+			layer.setAttribute('data-shid', uid);
+			layer.setAttribute('data-type', 'layer');
+			layer.textContent = 'shadow ' + uid;
+
+			del.className = 'delete';
+			del.setAttribute('data-type', 'delete');
+
+			layer.appendChild(del);
+			return layer;
+		}
+
+		Stack.prototype.getUID = function getUID() {
+			return this.uid++;
+		}
+
+		// SOLVE IE BUG
+		Stack.prototype.moveLayer = function moveLayer(direction) {
+			if (this.count <= 1 || this.layer === null)
+				return;
+			if (direction === -1 && this.layerID === (this.count - 1) )
+				return;
+			if (direction === 1 && this.layerID === 0 )
+				return;
+
+			if (direction === -1) {
+				var before = null;
+				Tool.swapShadow(this.layerID, this.layerID + 1);
+				this.swapOrder(this.layerID, this.layerID + 1);
+				this.layerID += 1;
+
+				if (this.layerID + 1 !== this.count)
+					before = this.stack.children[this.layerID + 1];
+
+				this.stack.insertBefore(this.layer, before);
+				Tool.setActiveShadow(this.layerID, false);
+			}
+
+			if (direction === 1) {
+				Tool.swapShadow(this.layerID, this.layerID - 1);
+				this.swapOrder(this.layerID, this.layerID - 1);
+				this.layerID -= 1;
+				this.stack.insertBefore(this.layer, this.stack.children[this.layerID]);
+				Tool.setActiveShadow(this.layerID, false);
+			}
+		}
+
+		Stack.prototype.swapOrder = function swapOrder(pos1, pos2) {
+			var x = this.order[pos1];
+			this.order[pos1] = this.order[pos2];
+			this.order[pos2] = x;
+		}
+
+		Stack.prototype.deleteLayer = function deleteLayer(node) {
+			var shadowID =  node.getAttribute('data-shid') | 0;
+			var index = this.order.indexOf(shadowID);
+			this.stack.removeChild(this.stack.children[index]);
+			this.order.splice(index, 1);
+			this.count--;
+
+			Tool.deleteShadow(index);
+
+			if (index > this.layerID)
+				return;
+
+			if (index == this.layerID) {
+				if (this.count >= 1) {
+					this.layerID = 0;
+					this.setActiveLayer(this.stack.children[0], true);
+				}
+				else {
+					this.layer = null;
+					this.show();
+				}
+			}
+
+			if (index < this.layerID) {
+				this.layerID--;
+				Tool.setActiveShadow(this.layerID, true);
+			}
+
+		}
+
+		Stack.prototype.setActiveLayer = function setActiveLayer(node) {
+			elements.shadow_properties.style.display = 'block';
+			elements.element_properties.style.display = 'none';
+
+			if (this.layer)
+				this.layer.removeAttribute('data-active');
+
+			this.layer = node;
+			this.layer.setAttribute('data-active', 'layer');
+
+			var shadowID =  node.getAttribute('data-shid') | 0;
+			this.layerID = this.order.indexOf(shadowID);
+			Tool.setActiveShadow(this.layerID, true);
+		}
+
+		Stack.prototype.unsetActiveLayer = function unsetActiveLayer() {
+			if (this.layer)
+				this.layer.removeAttribute('data-active');
+
+			this.layer = null;
+			this.layerID = 0;
+		}
+
+		Stack.prototype.hide = function hide() {
+			this.unsetActiveLayer();
+			this.subject.removeAttribute('data-active');
+			var style = this.container.style;
+			style.left = '100%';
+			style.zIndex = '0';
+		}
+
+		Stack.prototype.show = function show() {
+			elements.shadow_properties.style.display = 'none';
+			elements.element_properties.style.display = 'block';
+
+			if (this.id === 'element') {
+				elements.zIndex.style.display = 'none';
+				elements.transform_rotate.style.display = 'none';
+			}
+			else {
+				elements.zIndex.style.display = 'block';
+				elements.transform_rotate.style.display = 'block';
+			}
+
+			this.subject.setAttribute('data-active', 'subject');
+			var style = this.container.style;
+			style.left = '0';
+			style.zIndex = '10';
+			Tool.setActiveClass(this.id);
+		}
+
+		function init() {
+
+			var elem, size;
+			var layerManager = getElemById("layer_manager");
+			var layerMenu = getElemById("layer_menu");
+			var container = getElemById("stack_container");
+
+			elements.shadow_properties = getElemById('shadow_properties');
+			elements.element_properties = getElemById('element_properties');
+			elements.transform_rotate = getElemById('transform_rotate');
+			elements.zIndex = getElemById('z-index');
+
+			elem = document.querySelectorAll('#layer_menu [data-type="subject"]');
+			size = elem.length;
+
+			for (var i = 0; i < size; i++) {
+				var S = new Stack(elem[i]);
+				stacks[elem[i].id] = S;
+				container.appendChild(S.container);
+				Tool.addCssClass(elem[i].id);
+			}
+
+			active.stack = stacks['element'];
+			stacks['element'].show();
+
+			layerManager.addEventListener("click", mouseEvents);
+			layerMenu.addEventListener("click", mouseEvents);
+
+			ButtonManager.subscribe("before", function(value) {
+				if (value === false && active.stack === stacks['before'])
+					setActiveStack(stacks['element'])
+				if (value === true && active.stack !== stacks['before'])
+					setActiveStack(stacks['before'])
+			});
+
+			ButtonManager.subscribe("after", function(value) {
+				if (value === false && active.stack === stacks['after'])
+					setActiveStack(stacks['element'])
+				if (value === true && active.stack !== stacks['after'])
+					setActiveStack(stacks['after'])
+			});
+		}
+
+		return {
+			init : init
+		}
+	})();
+
+	/*
+	 * OutputManager
+	 */
+	var OutputManager = (function OutputManager() {
+		var classes = [];
+		var buttons = [];
+		var active = null;
+		var menu = null;
+		var button_offset = 0;
+
+		var crateOutputNode = function(topic, property) {
+
+			var prop = document.createElement('div');
+			var name = document.createElement('span');
+			var value = document.createElement('span');
+
+			var pmatch = property.match(/(^([a-z0-9\-]*)=\[([a-z0-9\-\"]*)\])|^([a-z0-9\-]*)/i);
+
+			name.textContent = '\t' + pmatch[4];
+
+			if (pmatch[3] !== undefined) {
+				name.textContent = '\t' + pmatch[2];
+				value.textContent = pmatch[3] + ';';
+			}
+
+			name.textContent += ': ';
+			prop.className = 'css-property';
+			name.className = 'name';
+			value.className = 'value';
+			prop.appendChild(name);
+			prop.appendChild(value);
+
+			classes[topic].node.appendChild(prop);
+			classes[topic].line[property] = prop;
+			classes[topic].prop[property] = value;
+		}
+
+		var OutputClass = function OutputClass(node) {
+			var topic = node.getAttribute('data-topic');
+			var prop = node.getAttribute('data-prop');
+			var name = node.getAttribute('data-name');
+			var properties = prop.split(' ');
+
+			classes[topic] = {};
+			classes[topic].node = node;
+			classes[topic].prop = [];
+			classes[topic].line = [];
+			classes[topic].button = new Button(topic);
+
+			var open_decl = document.createElement('div');
+			var end_decl = document.createElement('div');
+
+			open_decl.textContent = name + ' {';
+			end_decl.textContent = '}';
+			node.appendChild(open_decl);
+
+			for (var i in properties)
+				crateOutputNode(topic, properties[i]);
+
+			node.appendChild(end_decl);
+		}
+
+		var Button = function Button(topic) {
+			var button = document.createElement('div');
+
+			button.className = 'button';
+			button.textContent = topic;
+			button.style.left = button_offset + 'px';
+			button_offset += 100;
+
+			button.addEventListener("click", function() {
+				toggleDisplay(topic);
+			})
+
+			menu.appendChild(button);
+			return button;
+		}
+
+		var toggleDisplay = function toggleDisplay(topic) {
+			active.button.removeAttribute('data-active');
+			active.node.style.display = 'none';
+			active = classes[topic];
+			active.node.style.display = 'block';
+			active.button.setAttribute('data-active', 'true');
+		}
+
+		var toggleButton = function toggleButton(topic, value) {
+			var display = (value === true) ? 'block' : 'none';
+			classes[topic].button.style.display = display;
+
+			if (value === true)
+				toggleDisplay(topic);
+			else
+				toggleDisplay('element');
+		}
+
+		var updateProperty = function updateProperty(topic, property, data) {
+			try {
+				classes[topic].prop[property].textContent = data + ';';
+			}
+			catch(error) {
+				// console.log("ERROR undefined : ", topic, property, data);
+			}
+		}
+
+		var toggleProperty = function toggleProperty(topic, property, value) {
+			var display = (value === true) ? 'block' : 'none';
+			try {
+				classes[topic].line[property].style.display = display;
+			}
+			catch(error) {
+				// console.log("ERROR undefined : ",classes, topic, property, value);
+			}
+		}
+
+		var init = function init() {
+
+			menu = getElemById('menu');
+
+			var elem = document.querySelectorAll('#output .output');
+			var size = elem.length;
+			for (var i = 0; i < size; i++)
+				OutputClass(elem[i]);
+
+			active = classes['element'];
+			toggleDisplay('element');
+
+			ButtonManager.subscribe("before", function(value) {
+				toggleButton('before', value);
+			});
+
+			ButtonManager.subscribe("after", function(value) {
+				toggleButton('after', value);
+			});
+		}
+
+		return {
+			init : init,
+			updateProperty : updateProperty,
+			toggleProperty : toggleProperty
+		}
+
+	})();
+
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		ButtonManager.init();
+		OutputManager.init();
+		ColoPicker.init();
+		SliderManager.init();
+		LayerManager.init();
+		PreviewMouseTracking.init("preview");
+		Tool.init();
+	}
+
+	return {
+		init : init
+	}
+
+})();
+
+
+
+
+ +
{{ EmbedLiveSample('box-shadow_generator', '100%', '1100px', '') }}
+ +

Related Tool: Box Shadow CSS Generator

diff --git a/files/de/web/css/css_background_and_borders/index.html b/files/de/web/css/css_background_and_borders/index.html deleted file mode 100644 index 59c2117194..0000000000 --- a/files/de/web/css/css_background_and_borders/index.html +++ /dev/null @@ -1,155 +0,0 @@ ---- -title: CSS Background and Borders -slug: Web/CSS/CSS_Background_and_Borders -tags: - - CSS - - CSS Backgrounds and Borders - - CSS Reference - - NeedsTranslation - - Overview - - TopicStub -translation_of: Web/CSS/CSS_Backgrounds_and_Borders -translation_of_original: Web/CSS/CSS_Background_and_Borders ---- -

{{CSSRef}}

- -

CSS Background and Borders is a module of CSS that defines how background and borders of elements are described. Borders can be lines or images, boxes can have one or multiple backgrounds, have rounded corners, and shadows.

- -

Reference

- -

CSS Properties

- -
-
    -
  • {{cssxref("background")}}
    • -
  • {{cssxref("background-attachment")}}
    • -
  • {{cssxref("background-clip")}}
    • -
  • {{cssxref("background-color")}}
    • -
  • {{cssxref("background-image")}}
    • -
  • {{cssxref("background-origin")}}
    • -
  • {{cssxref("background-position")}}
    • -
  • {{cssxref("background-repeat")}}
    • -
  • {{cssxref("background-size")}}
    • -
  • {{cssxref("box-shadow")}}
    • -
  • {{cssxref("border")}}
    • -
  • {{cssxref("border-bottom")}}
    • -
  • {{cssxref("border-bottom-color")}}
    • -
  • {{cssxref("border-bottom-left-radius")}}
    • -
  • {{cssxref("border-bottom-right-radius")}}
    • -
  • {{cssxref("border-bottom-style")}}
    • -
  • {{cssxref("border-bottom-width")}}
    • -
  • {{cssxref("border-collapse")}}
    • -
  • {{cssxref("border-color")}}
    • -
  • {{cssxref("border-image")}}
    • -
  • {{cssxref("border-image-outset")}}
    • -
  • {{cssxref("border-image-repeat")}}
    • -
  • {{cssxref("border-image-slice")}}
    • -
  • {{cssxref("border-image-source")}}
    • -
  • {{cssxref("border-image-width")}}
    • -
  • {{cssxref("border-left")}}
    • -
  • {{cssxref("border-left-color")}}
    • -
  • {{cssxref("border-left-style")}}
    • -
  • {{cssxref("border-left-width")}}
    • -
  • {{cssxref("border-radius")}}
    • -
  • {{cssxref("border-right")}}
    • -
  • {{cssxref("border-right-color")}}
    • -
  • {{cssxref("border-right-style")}}
    • -
  • {{cssxref("border-right-width")}}
    • -
  • {{cssxref("border-style")}}
    • -
  • {{cssxref("border-top")}}
    • -
  • {{cssxref("border-top-color")}}
    • -
  • {{cssxref("border-top-left-radius")}}
    • -
  • {{cssxref("border-top-right-radius")}}
    • -
  • {{cssxref("border-top-style")}}
    • -
  • {{cssxref("border-top-width")}}
    • -
  • {{cssxref("border-width")}}
    • -
-
- -

Guides

- -
-
Using CSS multiple backgrounds
-
Explains how to set backgrounds on elements and how they will interact with it.
-
Scaling background images
-
Describes how to change the appearance of the background images, by stretching them or repeating them, to cover the whole background of the element, or not.
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('CSS3 Backgrounds') }}{{ Spec2('CSS3 Backgrounds') }} 
{{SpecName('CSS2.1', 'box.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#border')}}{{Spec2('CSS1')}} 
- -

Browser compatibility

- -

{{CompatibilityTable()}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1.0")}}4.03.51.0 (85)
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown()}}{{CompatGeckoMobile("1.9.2")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}1.0
-
diff --git "a/files/de/web/css/css_background_and_borders/mehrere_hintergr\303\274nde_in_css_verwenden/index.html" "b/files/de/web/css/css_background_and_borders/mehrere_hintergr\303\274nde_in_css_verwenden/index.html" deleted file mode 100644 index 9b717083f8..0000000000 --- "a/files/de/web/css/css_background_and_borders/mehrere_hintergr\303\274nde_in_css_verwenden/index.html" +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: Mehrere Hintergründe in CSS verwenden -slug: Web/CSS/CSS_Background_and_Borders/Mehrere_Hintergründe_in_CSS_verwenden -tags: - - Beispiel - - CSS - - CSS Hintergrund - - Guide - - Intermediate -translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds -translation_of_original: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds ---- -

{{CSSRef}}

- -

Mit CSS3 können einem Element mehrere Hintergründe zugewiesen werden. Diese werden aufeinander gestapelt wobei der erste Hintergrund zuoberst ist und der letzte zuunterst. Nur dem untersten Hintergrund kann eine Hintergrundfarbe zugewiesen werden.

- -

Mehrere Hintergründe festzulegen ist einfach:

- -
.myclass {
-  background: background1, background 2, ..., background;
-}
-
- -

Du kannst dies mit beiden Varianten, der verkürzten {{cssxref("background")}} Eigenschaft und dem Einzel-Eigenschafts-Selektor davon ausser {{cssxref("background-color")}}. Die folgenden Hintergrund Eigenschaften können als Liste festgelegt werden, eine pro Hintergrund: {{cssxref("background")}}, {{cssxref("background-attachment")}}, {{cssxref("background-clip")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}.

- -

Beispiel

- -

In diesem Beispiel werden drei Hintergründe übereinandergelegt: das Firefox Logo, ein linearer Farbverlauf und ein Bild mit Blasen:

- -
.multi_bg_example {
-  background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png),
-                    url(https://mdn.mozillademos.org/files/11307/bubbles.png),
-                    linear-gradient(to right, rgba(30, 75, 115, 1),  rgba(255, 255, 255, 0));
-
-  background-repeat: no-repeat,
-                     no-repeat,
-                     no-repeat;
-
-  background-position: bottom right,
-                       left,
-                       right;
-}
-
- - - -

Ergebnis

- -

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

- -

Wie oben zu erkennen ist, liegt das Firefox Logo (als erstes aufgelistet) zuoberst, gefolgt vom Hintergrund mit Blasen, welcher wiederum auf dem Farbverlauf liegt. Jede nachfolgende Untereigenschaft ({{cssxref("background-repeat")}} und {{cssxref("background-position")}}) gilt für den entsprechenden Hintergrund. Demzufolge gilt der erste aufgelistete Wert für {{cssxref("background-repeat")}} für den ersten (vordersten) Hintergrund und so weiter.

- -

Siehe auch

- - diff --git a/files/de/web/css/css_backgrounds_and_borders/index.html b/files/de/web/css/css_backgrounds_and_borders/index.html new file mode 100644 index 0000000000..59c2117194 --- /dev/null +++ b/files/de/web/css/css_backgrounds_and_borders/index.html @@ -0,0 +1,155 @@ +--- +title: CSS Background and Borders +slug: Web/CSS/CSS_Background_and_Borders +tags: + - CSS + - CSS Backgrounds and Borders + - CSS Reference + - NeedsTranslation + - Overview + - TopicStub +translation_of: Web/CSS/CSS_Backgrounds_and_Borders +translation_of_original: Web/CSS/CSS_Background_and_Borders +--- +

{{CSSRef}}

+ +

CSS Background and Borders is a module of CSS that defines how background and borders of elements are described. Borders can be lines or images, boxes can have one or multiple backgrounds, have rounded corners, and shadows.

+ +

Reference

+ +

CSS Properties

+ +
+
    +
  • {{cssxref("background")}}
    • +
  • {{cssxref("background-attachment")}}
    • +
  • {{cssxref("background-clip")}}
    • +
  • {{cssxref("background-color")}}
    • +
  • {{cssxref("background-image")}}
    • +
  • {{cssxref("background-origin")}}
    • +
  • {{cssxref("background-position")}}
    • +
  • {{cssxref("background-repeat")}}
    • +
  • {{cssxref("background-size")}}
    • +
  • {{cssxref("box-shadow")}}
    • +
  • {{cssxref("border")}}
    • +
  • {{cssxref("border-bottom")}}
    • +
  • {{cssxref("border-bottom-color")}}
    • +
  • {{cssxref("border-bottom-left-radius")}}
    • +
  • {{cssxref("border-bottom-right-radius")}}
    • +
  • {{cssxref("border-bottom-style")}}
    • +
  • {{cssxref("border-bottom-width")}}
    • +
  • {{cssxref("border-collapse")}}
    • +
  • {{cssxref("border-color")}}
    • +
  • {{cssxref("border-image")}}
    • +
  • {{cssxref("border-image-outset")}}
    • +
  • {{cssxref("border-image-repeat")}}
    • +
  • {{cssxref("border-image-slice")}}
    • +
  • {{cssxref("border-image-source")}}
    • +
  • {{cssxref("border-image-width")}}
    • +
  • {{cssxref("border-left")}}
    • +
  • {{cssxref("border-left-color")}}
    • +
  • {{cssxref("border-left-style")}}
    • +
  • {{cssxref("border-left-width")}}
    • +
  • {{cssxref("border-radius")}}
    • +
  • {{cssxref("border-right")}}
    • +
  • {{cssxref("border-right-color")}}
    • +
  • {{cssxref("border-right-style")}}
    • +
  • {{cssxref("border-right-width")}}
    • +
  • {{cssxref("border-style")}}
    • +
  • {{cssxref("border-top")}}
    • +
  • {{cssxref("border-top-color")}}
    • +
  • {{cssxref("border-top-left-radius")}}
    • +
  • {{cssxref("border-top-right-radius")}}
    • +
  • {{cssxref("border-top-style")}}
    • +
  • {{cssxref("border-top-width")}}
    • +
  • {{cssxref("border-width")}}
    • +
+
+ +

Guides

+ +
+
Using CSS multiple backgrounds
+
Explains how to set backgrounds on elements and how they will interact with it.
+
Scaling background images
+
Describes how to change the appearance of the background images, by stretching them or repeating them, to cover the whole background of the element, or not.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Backgrounds') }}{{ Spec2('CSS3 Backgrounds') }} 
{{SpecName('CSS2.1', 'box.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#border')}}{{Spec2('CSS1')}} 
+ +

Browser compatibility

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1.0")}}4.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown()}}{{CompatGeckoMobile("1.9.2")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}1.0
+
diff --git a/files/de/web/css/css_backgrounds_and_borders/resizing_background_images/index.html b/files/de/web/css/css_backgrounds_and_borders/resizing_background_images/index.html new file mode 100644 index 0000000000..abd1e8f200 --- /dev/null +++ b/files/de/web/css/css_backgrounds_and_borders/resizing_background_images/index.html @@ -0,0 +1,112 @@ +--- +title: Hintergrundbilder skalieren +slug: Web/Guide/CSS/Scaling_background_images +tags: + - CSS Hintergrundbild + - Skalierung Hintergrundbild +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images +translation_of_original: Web/CSS/CSS_Background_and_Borders/Scaling_background_images +--- +

Die {{ cssxref("background-size") }} CSS Eigenschaft ermöglicht es, die Größe von Hintergrundbildern einzustellen, anstatt das voreingestellte Verhalten, das Bild auf die volle Größe zu kacheln, zu verwenden.Man kann das Bild nach Wunsch nach oben oder unten skalieren.

+ +

Kacheln eines großen Bildes

+ +

Nehmen wir ein großes Bild, ein 2982x2808 Firefox Logo. Wir wollen (auch wenn das höchstwahrscheinlichst ein grauenhaft schlechtes Seitendesign ergibt) vier Kopien dieses Bildes in ein 300x300 Pixel Quadrat kacheln, damit es so aussieht:

+ +

+ +

Das wird erreicht, indem wir folgendes CSS verwenden:

+ +
.square {
+  width: 300px;
+  height: 300px;
+  background-image: url(firefox_logo.png);
+  border: solid 2px;
+  text-shadow: white 0px 0px 2px;
+  font-size: 16px;
+  background-size: 150px;
+}
+
+ +

Man braucht für  {{ cssxref("background-size") }} kein Präfix mehr zu setzen, jedoch können  Präfix-Versionen hinzugefügt werden, wenn ältere Browser angesprochen werden sollen.

+ +

Dehnen eines Bildes

+ +

Sowohl die horizontale als auch die vertikale Größe des Bildes kann angegeben werden, wie hier angegeben:

+ +
background-size: 300px 150px;
+
+ +

So sieht das Ergebnis aus:

+ +

+ +

Hochskalieren eines Bildes

+ +

Auf der anderen Seite des Spektrums kann ein Bild im Hintergrund auch hochskaliert werden. Hier wird ein 32x32 Pixel favicon auf 300x300 Pixel skaliert:

+ +

+ +
.square2 {
+  width: 300px;
+  height: 300px;
+  background-image: url(favicon.png);
+  background-size: 300px;
+  border: solid 2px;
+  text-shadow: white 0px 0px 2px;
+  font-size: 16px;
+}
+
+ +

Wie man sehen kann, ist das CSS im Grunde identisch, außer dem Namen der Bilddatei.

+ +

Spezielle Werte: "contain" und "cover"

+ +

Neben den {{cssxref("<length>")}} Werten, bietet die {{ cssxref("background-size") }} CSS Eigenschaft zwei spezielle Werte für Größen, contain und cover. Sehen wir uns diese an.

+ +

contain

+ +

Der contain Wert spezifiziert, unabhängig von der Größe der umgebenden Box, die Skalierung des Hintergrundbildes so, dass jede Seite so breit als irgend möglich angezeigt wird ohne über die Länge der korrespondierenden Seite des Containers hinauszugehen. Versuche mit einem Browser, der skalierende Hintergründe unterstützt (wie z. B.  Firefox 3.6 oder höher), dieses Fenster in der Größe zu verändern, um das Verhalten am untenstehenden Live-Beispiel zu sehen.

+ +
+

{{ EmbedLiveSample("contain", "100%", "220") }}

+
+ +
<div class="bgSizeContain">
+  <p>Try resizing this window and see what happens.</p>
+</div>
+ +
.bgSizeContain {
+  height: 200px;
+  background-image: url(https://mdn.mozillademos.org/files/8971/firefox_logo.png);
+  background-size: contain;
+  border: 2px solid darkgray;
+  color: #000; text-shadow: 1px 1px 0 #fff;
+}
+ +

cover

+ +

Der cover Wert spezifizert, dass das Hintergundbild in der Größe so angezeigt wird, dass es selbst so klein als möglich ist, dabei aber auf alle Fälle in beiden Dimensionen größer oder gleich der jeweiligen korresponierenden Maße des Containers ist. 

+ +
{{ EmbedLiveSample("cover", "100%", "220") }}
+ +

Das Beispiel verwendet folgendes HTML & CSS:

+ +
<div class="bgSizeCover">
+  <p>Try resizing this window and see what happens.</p>
+</div>
+ +
.bgSizeCover {
+  height: 200px;
+  background-image: url('https://mdn.mozillademos.org/files/8971/firefox_logo.png');
+  background-size: cover;
+  border: 2px solid darkgray;
+  color: #000; text-shadow: 1px 1px 0 #fff;
+
+ +

Siehe auch

+ + diff --git a/files/de/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html b/files/de/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html new file mode 100644 index 0000000000..9b717083f8 --- /dev/null +++ b/files/de/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html @@ -0,0 +1,70 @@ +--- +title: Mehrere Hintergründe in CSS verwenden +slug: Web/CSS/CSS_Background_and_Borders/Mehrere_Hintergründe_in_CSS_verwenden +tags: + - Beispiel + - CSS + - CSS Hintergrund + - Guide + - Intermediate +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds +translation_of_original: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds +--- +

{{CSSRef}}

+ +

Mit CSS3 können einem Element mehrere Hintergründe zugewiesen werden. Diese werden aufeinander gestapelt wobei der erste Hintergrund zuoberst ist und der letzte zuunterst. Nur dem untersten Hintergrund kann eine Hintergrundfarbe zugewiesen werden.

+ +

Mehrere Hintergründe festzulegen ist einfach:

+ +
.myclass {
+  background: background1, background 2, ..., background;
+}
+
+ +

Du kannst dies mit beiden Varianten, der verkürzten {{cssxref("background")}} Eigenschaft und dem Einzel-Eigenschafts-Selektor davon ausser {{cssxref("background-color")}}. Die folgenden Hintergrund Eigenschaften können als Liste festgelegt werden, eine pro Hintergrund: {{cssxref("background")}}, {{cssxref("background-attachment")}}, {{cssxref("background-clip")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}.

+ +

Beispiel

+ +

In diesem Beispiel werden drei Hintergründe übereinandergelegt: das Firefox Logo, ein linearer Farbverlauf und ein Bild mit Blasen:

+ +
.multi_bg_example {
+  background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png),
+                    url(https://mdn.mozillademos.org/files/11307/bubbles.png),
+                    linear-gradient(to right, rgba(30, 75, 115, 1),  rgba(255, 255, 255, 0));
+
+  background-repeat: no-repeat,
+                     no-repeat,
+                     no-repeat;
+
+  background-position: bottom right,
+                       left,
+                       right;
+}
+
+ + + +

Ergebnis

+ +

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

+ +

Wie oben zu erkennen ist, liegt das Firefox Logo (als erstes aufgelistet) zuoberst, gefolgt vom Hintergrund mit Blasen, welcher wiederum auf dem Farbverlauf liegt. Jede nachfolgende Untereigenschaft ({{cssxref("background-repeat")}} und {{cssxref("background-position")}}) gilt für den entsprechenden Hintergrund. Demzufolge gilt der erste aufgelistete Wert für {{cssxref("background-repeat")}} für den ersten (vordersten) Hintergrund und so weiter.

+ +

Siehe auch

+ + diff --git a/files/de/web/css/css_box_model/index.html b/files/de/web/css/css_box_model/index.html new file mode 100644 index 0000000000..37440c9523 --- /dev/null +++ b/files/de/web/css/css_box_model/index.html @@ -0,0 +1,165 @@ +--- +title: CSS Boxmodell +slug: Web/CSS/CSS_Boxmodell +tags: + - CSS + - CSS Boxmodell + - CSS Referenz + - Übersicht +translation_of: Web/CSS/CSS_Box_Model +--- +
{{CSSRef}}
+ +

CSS Box Model ist ein CSS Modul, das die rechteckigen Boxen einschließlich deren Innen- und Außenabständen definiert, die für Elemente generiert werden und gemäß des visuellen Formatierungsmodells dargestellt werden.

+ +

Referenz

+ +

Eigenschaften

+ +

Den Inhaltsfluss innerhalb einer Box beeinflussende Eigenschaften

+ +
+
    +
  • {{cssxref("box-decoration-break")}}
    • +
  • {{cssxref("box-sizing")}}
    • +
  • {{cssxref("overflow")}}
    • +
  • {{cssxref("overflow-x")}}
    • +
  • {{cssxref("overflow-y")}}
    • +
+
+ +

Die Größe einer Box beeinflussende Eigenschaften

+ +
+
    +
  • {{cssxref("height")}}
    • +
  • {{cssxref("width")}}
    • +
  • {{cssxref("max-height")}}
    • +
  • {{cssxref("max-width")}}
    • +
  • {{cssxref("min-height")}}
    • +
  • {{cssxref("min-width")}}
    • +
+
+ +

Außenabstände einer Box beeinflussende Eigenschaften

+ +
+
    +
  • {{cssxref("margin")}}
    • +
  • {{cssxref("margin-bottom")}}
    • +
  • {{cssxref("margin-left")}}
    • +
  • {{cssxref("margin-right")}}
    • +
  • {{cssxref("margin-top")}}
    • +
+
+ +

Innenabstände einer Box beeinflussende Eigenschaften

+ +
+
    +
  • {{cssxref("padding")}}
    • +
  • {{cssxref("padding-bottom")}}
    • +
  • {{cssxref("padding-left")}}
    • +
  • {{cssxref("padding-right")}}
    • +
  • {{cssxref("padding-top")}}
    • +
+
+ +

Andere Eigenschaften

+ +
+
    +
  • {{cssxref("box-shadow")}}
    • +
  • {{cssxref("visibility")}}
    • +
+
+ +

Anleitungen und Werkzeuge

+ +
+
Einführung in das CSS Boxmodell
+
Erklärt eines der grundlegenden Konzepte von CSS, das Boxmodell: Beschreibt die Bedeutung von Außen- und Innenabständen als auch der verschiedenen Bereiche einer Box.
+
Zusammenfallen von Außenabständen meistern
+
In mehreren Fällen werden zwei anliegende Außenabstände zu einem zusammengelegt. Dieser Artikel beschreibt, wann dies passiert und wie es gesteuert werden kann.
+
Box-shadow Generator
+
Ein interaktives Werkzeug, das es erlaubt, Schatten visuell zu erstellen und die benötigte Syntax für die {{cssxref("box-shadow")}} Eigenschaft zu generieren.
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName("CSS3 Box")}}{{Spec2("CSS3 Box")}} 
{{SpecName("CSS2.1", "box.html")}}{{Spec2("CSS2.1")}} 
{{SpecName("CSS1")}}{{Spec2("CSS1")}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung1.0{{CompatGeckoDesktop("1")}}3.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung1.0{{CompatGeckoMobile("1")}}6.06.01.0
+
diff --git a/files/de/web/css/css_box_model/introduction_to_the_css_box_model/index.html b/files/de/web/css/css_box_model/introduction_to_the_css_box_model/index.html new file mode 100644 index 0000000000..1bf796b36b --- /dev/null +++ b/files/de/web/css/css_box_model/introduction_to_the_css_box_model/index.html @@ -0,0 +1,52 @@ +--- +title: Boxmodell +slug: Web/CSS/CSS_Boxmodell/Einführung_in_das_CSS_Boxmodell +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model +--- +

{{ CSSRef() }}

+ +

Übersicht

+ +

Eine Box hat in CSS vier Bereiche: margin edge (weiß außen), border edge (grau), padding edge (grün), und content edge (weiß mitte). Das Folgende Diagramm zeigt die unterschiedlichen Höhen und Breiten anhand der Eigenschaften, die Veränderungen an einer CSS Box zulassen:

+ +

Thanks to Hannes Kraft.

+ +

 

+ +

Details

+ + + +

Spezifikation

+ + + +

Siehe auch

+ + diff --git a/files/de/web/css/css_box_model/mastering_margin_collapsing/index.html b/files/de/web/css/css_box_model/mastering_margin_collapsing/index.html new file mode 100644 index 0000000000..edf1fa050c --- /dev/null +++ b/files/de/web/css/css_box_model/mastering_margin_collapsing/index.html @@ -0,0 +1,60 @@ +--- +title: Zusammenfallen von Außenabständen meistern +slug: Web/CSS/CSS_Boxmodell/Zusammenfallen_von_Außenabständen_meistern +tags: + - CSS + - CSS Boxmodell + - Referenz +translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing +--- +
{{CSSRef}}
+ +

Obere und untere Außenabstände von Blöcken werden manchmal zu einem einzelnen Außenabstand zusammengefasst (kollabiert), dessen Größe der größte der Außenabstände ist, die in ihm zusammengefasst werden, ein Verhalten bekannt als Außenabstandszusammenfassung (engl. margin collapsing).

+ +

Außenabstandszusammenfassung tritt in drei grundlegenden Fällen auf:

+ +
+
Angrenzende Geschwisterelemente
+
Die Außenabstände von angrenzenden Geschwisterelementen werden zusammengefasst (außer, wenn des nachfolgende Geschwisterelement nach Seitenumflüssen freigestellt ist). Zum Beispiel: + 
 <p>Der untere Außenabstand dieses Absatzes fällt ...</p>
+ <p>...mit dem oberen Außenabstand dieses Absatzes zusammen.</p>
+
+
+
Eltern- und erstes/letztes Kindelement
+
Falls es keinen Rahmen, Innenabstand, Inlineinhalt oder Freilegung gibt, um den {{cssxref("margin-top")}} eines Blocks vom {{cssxref("margin-top")}} seines ersten Kindblocks zu trennen, oder keinen Rahmen, Innenabstand Inlineinhalt, {{cssxref("height")}}, {{cssxref("min-height")}} oder {{cssxref("max-height")}} gibt, um den {{cssxref("margin-bottom")}} des Blocks vom {{cssxref("margin-bottom")}} seines letzten Kindelements zu trennen, dann fallen diese Außenabstände zusammen. Der zusammengefallene Außenabstand verläuft dabei außerhalb des Elternelements.
+
Leere Blöcke
+
Falls es keinen Rahmen, Innenabstand, Inlineinhalt, {{cssxref("height")}} oder {{cssxref("min-height")}} gibt, um den {{cssxref("margin-top")}} des Blocks vom {{cssxref("margin-bottom")}} zu trennen, fallen sein oberer und unterer Außenabstand zusammen.
+
+ +

Kompliziertere Außenabstandszusammenfassung (von mehr als zwei Außenabständen) tritt auf, wenn diese Fälle kombiniert werden.

+ +

Diese Regeln gelten sogar für Außenabstände, die null sind, sodass ein Außenabstand eines ersten/letzten Kinds sich (gemäß den oben genannten Regeln) am Ende außerhalb seines Elternelements befindet, unabhängig davon, ob der Außenabstand des Elternelements null ist oder nicht.

+ +

Falls negative Außenabstände involviert sind, ist die Größe des zusammengefassten Außenabstands die Summe des größten positiven Abstands und dem kleinsten (meist negativen) negativen Abstands.

+ +

Außenabstände von umfließenden und absolut positionierten Elementen werden niemals zusammengefasst.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}{{Spec2("CSS2.1")}}Ursprüngliche Definition
+ +

Siehe auch

+ + diff --git a/files/de/web/css/css_boxmodell/box-shadow_generator/index.html b/files/de/web/css/css_boxmodell/box-shadow_generator/index.html deleted file mode 100644 index b087898d03..0000000000 --- a/files/de/web/css/css_boxmodell/box-shadow_generator/index.html +++ /dev/null @@ -1,2884 +0,0 @@ ---- -title: Box-shadow Generator -slug: Web/CSS/CSS_Boxmodell/Box-shadow_generator -tags: - - CSS3 - - Werkzeuge - - box-shadow -translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator ---- -

Dieses Werkzeug erlaubt es, CSS {{cssxref("box-shadow")}} Effekte zu erstellen, um Schlagschatteneffekte zu CSS Objekten hinzuzufügen.

- -
-

box-shadow generator

- -

HTML Content

- -
<div id="container">
-    <div class="group section">
-        <div id="layer_manager">
-            <div class="group section">
-                <div class="button" data-type="add"> </div>
-                <div class="button" data-type="move-up"> </div>
-                <div class="button" data-type="move-down"> </div>
-            </div>
-            <div id="stack_container"></div>
-        </div>
-
-        <div id="preview_zone">
-            <div id="layer_menu" class="col span_12">
-                <div class="button" id="element" data-type="subject" data-title="element"> element </div>
-                <div class="button" id="before" data-type="subject" data-title=":before">
-                    :before
-                    <span class="delete" data-type="disable"></span>
-                </div>
-                <div class="button" id="after" data-type="subject" data-title=":after">
-                    :after
-                    <span class="delete" data-type="disable"></span>
-                </div>
-                <div class="ui-checkbox" data-topic='before' data-label=":before"></div>
-                <div class="ui-checkbox" data-topic='after' data-label=":after"></div>
-            </div>
-
-            <div id="preview">
-                <div id="obj-element">
-                    <div class="content"> </div>
-                    <div id="obj-before"> </div>
-                    <div id="obj-after"> </div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <div id="controls" class="group section">
-        <div class="wrap-left">
-            <div class="colorpicker category">
-                <div class="title"> </div>
-                <div id="colorpicker" class="group">
-                    <div id="gradient" class="gradient">
-                        <div id="gradient_picker"> </div>
-                    </div>
-                    <div id="hue" data-topic="hue" class="hue">
-                        <div id="hue_selector"> </div>
-                    </div>
-                    <div class="info">
-                        <div class="input" data-topic="hue" data-title='H:' data-action="HSV"></div>
-                        <div class="input" data-topic="saturation" data-title='S:' data-action="HSV"></div>
-                        <div class="input" data-topic="value" data-title='V:' data-action="HSV"></div>
-                    </div>
-                    <div class="alpha">
-                        <div id="alpha" data-topic="alpha">
-                            <div id="alpha_selector"> </div>
-                        </div>
-                    </div>
-                    <div class="info">
-                        <div class="input" data-topic="r" data-title='R:' data-action="RGB"></div>
-                        <div class="input" data-topic="g" data-title='G:' data-action="RGB"></div>
-                        <div class="input" data-topic="b" data-title='B:' data-action="RGB"></div>
-                    </div>
-                    <div class="preview block">
-                        <div id="output_color"> </div>
-                    </div>
-                    <div class="block info">
-                        <div class="input" data-topic="a" data-title='alpha:' data-action="alpha"></div>
-                        <div class="input" data-topic="hexa" data-title='' data-action="hexa"></div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="wrap-right">
-
-            <div id="shadow_properties" class="category">
-                <div class="title"> Shadow properties </div>
-                <div class="group">
-                    <div class="group property">
-                        <div class="ui-slider-name"> inset </div>
-                        <div class="ui-checkbox" data-topic='inset'></div>
-                    </div>
-                    <div class="slidergroup">
-                        <div class="ui-slider-name"> Position x </div>
-                        <div class="ui-slider-btn-set" data-topic="posX" data-type="sub"></div>
-                        <div class="ui-slider" data-topic="posX"
-                            data-min="-500" data-max="500" data-step="1"> </div>
-                        <div class="ui-slider-btn-set" data-topic="posX" data-type="add"></div>
-                        <div class="ui-slider-input" data-topic="posX" data-unit="px"></div>
-                    </div>
-                    <div class="slidergroup">
-                        <div class="ui-slider-name"> Position y </div>
-                        <div class="ui-slider-btn-set" data-topic="posY" data-type="sub"></div>
-                        <div class="ui-slider" data-topic="posY"
-                            data-min="-500" data-max="500" data-step="1"> </div>
-                        <div class="ui-slider-btn-set" data-topic="posY" data-type="add"></div>
-                        <div class="ui-slider-input" data-topic="posY" data-unit="px"></div>
-                    </div>
-                    <div class="slidergroup">
-                        <div class="ui-slider-name"> Blur </div>
-                        <div class="ui-slider-btn-set" data-topic="blur" data-type="sub"></div>
-                        <div class="ui-slider" data-topic="blur"
-                            data-min="0" data-max="200" data-step="1"> </div>
-                        <div class="ui-slider-btn-set" data-topic="blur" data-type="add"></div>
-                        <div class="ui-slider-input" data-topic="blur" data-unit="px"></div>
-                    </div>
-                    <div class="slidergroup">
-                        <div class="ui-slider-name"> Spread </div>
-                        <div class="ui-slider-btn-set" data-topic="spread" data-type="sub"></div>
-                        <div class="ui-slider" data-topic="spread"
-                            data-min="-100"    data-max="100" data-step="1" data-value="50">
-                        </div>
-                        <div class="ui-slider-btn-set" data-topic="spread" data-type="add"></div>
-                        <div class="ui-slider-input" data-topic="spread" data-unit="px"></div>
-                    </div>
-                </div>
-            </div>
-
-            <div id="element_properties" class="category">
-                <div class="title"> Class element properties </div>
-                <div class="group">
-                    <div class="group property">
-                        <div class="ui-slider-name"> border </div>
-                        <div class="ui-checkbox" data-topic='border-state' data-state="true"></div>
-                    </div>
-                    <div id="z-index" class="slidergroup">
-                        <div class="ui-slider-name"> z-index </div>
-                        <div class="ui-slider-btn-set" data-topic="z-index" data-type="sub"></div>
-                        <div class="ui-slider" data-topic="z-index"
-                            data-min="-10" data-max="10" data-step="1"></div>
-                        <div class="ui-slider-btn-set" data-topic="z-index" data-type="add"></div>
-                        <div class="ui-slider-input" data-topic="z-index"></div>
-                    </div>
-                    <div class="slidergroup">
-                        <div class="ui-slider-name"> top </div>
-                        <div class="ui-slider-btn-set" data-topic="top" data-type="sub"></div>
-                        <div class="ui-slider" data-topic="top"
-                            data-min="-500" data-max="500" data-step="1"> </div>
-                        <div class="ui-slider-btn-set" data-topic="top" data-type="add"></div>
-                        <div class="ui-slider-input" data-topic="top" data-unit="px"></div>
-                    </div>
-                    <div class="slidergroup">
-                        <div class="ui-slider-name"> left </div>
-                        <div class="ui-slider-btn-set" data-topic="left" data-type="sub"></div>
-                        <div class="ui-slider" data-topic="left"
-                            data-min="-300" data-max="700" data-step="1"> </div>
-                        <div class="ui-slider-btn-set" data-topic="left" data-type="add"></div>
-                        <div class="ui-slider-input" data-topic="left" data-unit="px"></div>
-                    </div>
-                    <div id="transform_rotate" class="slidergroup">
-                        <div class="ui-slider-name"> Rotate </div>
-                        <div class="ui-slider-btn-set" data-topic="rotate" data-type="sub"></div>
-                        <div class="ui-slider" data-topic="rotate"
-                            data-min="-360" data-max="360" data-step="1" data-value="0">
-                        </div>
-                        <div class="ui-slider-btn-set" data-topic="rotate" data-type="add"></div>
-                        <div class="ui-slider-input" data-topic="rotate" data-unit="deg"></div>
-                    </div>
-                    <div class="slidergroup">
-                        <div class="ui-slider-name"> Width </div>
-                        <div class="ui-slider-btn-set" data-topic="width" data-type="sub"></div>
-                        <div class="ui-slider" data-topic="width"
-                            data-min="0" data-max="1000" data-step="1" data-value="200">
-                        </div>
-                        <div class="ui-slider-btn-set" data-topic="width" data-type="add"></div>
-                        <div class="ui-slider-input" data-topic="width"  data-unit="px"></div>
-                    </div>
-                    <div class="slidergroup">
-                        <div class="ui-slider-name"> Height </div>
-                        <div class="ui-slider-btn-set" data-topic="height" data-type="sub"></div>
-                        <div class="ui-slider" data-topic="height"
-                            data-min="0" data-max="400" data-step="1" data-value="200">
-                        </div>
-                        <div class="ui-slider-btn-set" data-topic="height" data-type="add"></div>
-                        <div class="ui-slider-input" data-topic="height" data-unit="px"></div>
-                    </div>
-                </div>
-            </div>
-
-            <div id="output" class="category">
-                <div id="menu" class="menu"></div>
-                <div class="title">    CSS Code </div>
-                <div class="group" style="border-top-left-radius: 0;">
-                    <div class="output" data-topic="element" data-name="element"
-                        data-prop="width height background-color position=[relative] box-shadow">
-                    </div>
-                    <div class="output" data-topic="before" data-name="element:before"
-                        data-prop="content=[&quot;&quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform">
-                    </div>
-                    <div class="output" data-topic="after" data-name="element:after"
-                        data-prop="content=[&quot;&quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform">
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
- -

CSS Content

- -
/*  GRID OF TWELVE
- * ========================================================================== */
-
-.span_12 {
-	width: 100%;
-}
-
-.span_11 {
-	width: 91.46%;
-}
-
-.span_10 {
-	width: 83%;
-}
-
-.span_9 {
-	width: 74.54%;
-}
-
-.span_8 {
-	width: 66.08%;
-}
-
-.span_7 {
-	width: 57.62%;
-}
-
-.span_6 {
-	width: 49.16%;
-}
-
-.span_5 {
-	width: 40.7%;
-}
-
-.span_4 {
-	width: 32.24%;
-}
-
-.span_3 {
-	width: 23.78%;
-}
-
-.span_2 {
-	width: 15.32%;
-}
-
-.span_1 {
-	width: 6.86%;
-}
-
-
-/*  SECTIONS
- * ========================================================================== */
-
-.section {
-	clear: both;
-	padding: 0px;
-	margin: 0px;
-}
-
-/*  GROUPING
- * ========================================================================== */
-
-
-.group:before, .group:after {
-    content: "";
-    display: table;
-}
-
-.group:after {
-    clear:both;
-}
-
-.group {
-    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
-}
-
-/*  GRID COLUMN SETUP
- * ========================================================================== */
-
-.col {
-	display: block;
-	float:left;
-	margin: 1% 0 1% 1.6%;
-}
-
-.col:first-child {
-	margin-left: 0;
-} /* all browsers except IE6 and lower */
-
-/*
- * UI Slider
- */
-
-.slidergroup {
-	height: 20px;
-	margin: 10px 0;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	-moz-user-select: none;
-	user-select: none;
-}
-
-.slidergroup * {
-	float: left;
-	height: 100%;
-	line-height: 100%;
-}
-
-/* Slider */
-
-.ui-slider {
-	height: 10px;
-	width: 200px;
-	margin: 4px 10px;
-	display: block;
-	border: 1px solid #999;
-	border-radius: 3px;
-	background: #EEE;
-}
-
-.ui-slider:hover {
-	cursor: pointer;
-}
-
-.ui-slider-name {
-	width: 90px;
-	padding: 0 10px 0 0;
-	text-align: right;
-	text-transform: lowercase;
-}
-
-.ui-slider-pointer {
-	width: 13px;
-	height: 13px;
-	background-color: #EEE;
-	border: 1px solid #2C9FC9;
-	border-radius: 3px;
-	position: relative;
-	top: -3px;
-	left: 0%;
-}
-
-.ui-slider-btn-set {
-	width: 25px;
-	background-color: #2C9FC9;
-	border-radius: 3px;
-	color: #FFF;
-	font-weight: bold;
-	text-align: center;
-}
-
-.ui-slider-btn-set:hover {
-	background-color: #379B4A;
-	cursor: pointer;
-}
-
-.ui-slider-input > input {
-	margin: 0 10px;
-	padding: 0;
-	width: 50px;
-	text-align: center;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-/*
- * UI Button
- */
-
-/* Checkbox */
-
-.ui-checkbox {
-	text-align: center;
-	font-size: 16px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	line-height: 1.5em;
-	color: #FFF;
-
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-
-.ui-checkbox > input {
- 	display: none;
-}
-
-.ui-checkbox > label {
-	font-size: 12px;
-	padding: 0.333em 1.666em 0.5em;
-	height: 1em;
-	line-height: 1em;
-
-	background-color: #888;
-	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
-	background-position: center center;
-	background-repeat: no-repeat;
-
-	color: #FFF;
-	border-radius: 3px;
-	font-weight: bold;
-	float: left;
-}
-
-.ui-checkbox .text {
-	padding-left: 34px;
-	background-position: center left 10px;
-}
-
-.ui-checkbox .left {
-	padding-right: 34px;
-	padding-left: 1.666em;
-	background-position: center right 10px;
-}
-
-.ui-checkbox > label:hover {
-	cursor: pointer;
-}
-
-.ui-checkbox > input:checked + label {
-	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
-	background-color: #379B4A;
-}
-
-/*
- * BOX SHADOW GENERATOR TOOL
- */
-
-body {
-	max-width: 1000px;
-	height: 800px;
-	margin: 20px auto 0;
-
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-}
-
-#container {
-	width: 100%;
-	padding: 2px;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-
-/* container with shadows stacks */
-#stack_container {
-	height: 400px;
-	overflow: hidden;
-	position: relative;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-#stack_container .container {
-	height: 100%;
-	width: 100%;
-	position: absolute;
-	left: 100%;
-	transition-property: left;
-	transition-duration: 0.5s;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-
-#stack_container .title {
-	text-align: center;
-	font-weight: bold;
-	line-height: 2em;
-	border-bottom: 1px solid #43A6E1;
-	color: #666;
-}
-
-
-/*
- * Stack of Layers for shadow
- */
-
-#layer_manager {
-	width: 17%;
-	background-color: #FEFEFE;
-	margin: 0 1% 0 0;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-	float: left;
-}
-
-
-#layer_manager .button {
-	width: 30%;
-	height: 25px;
-	margin:0 0 10px;
-	color: #333;
-	background-color: #EEE;
-	text-align: center;
-	font-size: 0.75em;
-	line-height: 1.5em;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-
-	display: block;
-	background-position: center center;
-	background-repeat: no-repeat;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-	float: left;
-}
-
-#layer_manager .button:hover {
-	background-color: #3380C4;
-	border: 1px solid #3380C4;
-	cursor: pointer;
-}
-
-#layer_manager [data-type='add'] {
-	background-image: url("https://mdn.mozillademos.org/files/5685/add-black.png");
-}
-
-#layer_manager [data-type='add']:hover {
-	background-image: url("https://mdn.mozillademos.org/files/5687/add-white.png");
-}
-
-#layer_manager [data-type='move-up'] {
-	background-image: url("https://mdn.mozillademos.org/files/5697/up-black.png");
-	margin-left: 5%;
-	margin-right: 5%;
-}
-
-#layer_manager [data-type='move-up']:hover {
-	background-image: url("https://mdn.mozillademos.org/files/5709/up-white.png");
-}
-
-#layer_manager [data-type='move-down'] {
-	background-image: url("https://mdn.mozillademos.org/files/5693/down-black.png");
-}
-
-#layer_manager [data-type='move-down']:hover {
-	background-image: url("https://mdn.mozillademos.org/files/5695/down-white.png");
-}
-
-/* shadows classes */
-
-#layer_manager .node {
-	width: 100%;
-	margin: 5px 0;
-	padding: 5px;
-	text-align: center;
-	background-color: #EEE;
-	border: 1px solid #DDD;
-	font-size: 0.75em;
-	line-height: 1.5em;
-	color: #333;
-	border-radius: 3px;
-
-	position: relative;
-	display: block;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-#layer_manager .node:hover {
-	color: #FFF;
-	background-color: #3380C4;
-	cursor: pointer;
-}
-
-/* active element styling */
-
-#layer_manager [data-active='layer'] {
-	color: #FFF;
-	border: none;
-	background-color: #379B4A;
-}
-
-#layer_manager [data-active='subject'] {
-	color: #FFF;
-	background-color: #467FC9;
-}
-
-/* delete button */
-
-#layer_manager .delete {
-	width: 1.5em;
-	height: 100%;
-	float: right;
-	border-radius: 3px;
-	background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png");
-	background-position: center center;
-	background-repeat: no-repeat;
-	position: absolute;
-	top: 0;
-	right: 10px;
-	display: none;
-}
-
-#layer_manager .delete:hover {
-	background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png");
-}
-
-#layer_manager .node:hover .delete {
-	display: block;
-}
-
-
-#layer_manager .stack {
-	padding: 0 5px;
-	max-height: 90%;
-	overflow: auto;
-	overflow-x: hidden;
-}
-
-
-/*
- * Layer Menu
- */
-
-#layer_menu {
-	margin: 0 0 10px 0;
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-#layer_menu .button {
-	width: 100px;
-	margin: 0 5px 0 0;
-	padding: 2.5px;
-	color: #333;
-	background-color: #EEE;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-	text-align: center;
-	font-size: 0.75em;
-	line-height: 1.5em;
-
-	position: relative;
-	display: block;
-	float: left;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-#layer_menu .button:hover {
-	color: #FFF;
-	background-color: #3380C4;
-	border: 1px solid #3380C4;
-	cursor: pointer;
-}
-
-#layer_menu .delete {
-	width: 1.5em;
-	height: 100%;
-	float: right;
-	border-radius: 3px;
-	background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png");
-	background-position: center center;
-	background-repeat: no-repeat;
-	position: absolute;
-	top: 0;
-	right: 5px;
-	display: none;
-}
-
-#layer_menu .delete:hover {
-	background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png");
-}
-
-#layer_menu .button:hover .delete {
-	display: block;
-}
-
-
-/*
- * active element styling
- */
-
-#layer_menu [data-active='subject'] {
-	color: #FFF;
-	background-color: #379B4A;
-	border: 1px solid #379B4A;
-}
-
-
-/* Checkbox */
-
-#layer_menu .ui-checkbox > label {
-	height: 15px;
-	line-height: 17px;
-	font-weight: normal;
-	width: 46px;
-	margin: 0 5px 0 0;
-}
-
-#layer_menu .ui-checkbox > input:checked + label {
-	display: none;
-}
-
-
-/******************************************************************************/
-/******************************************************************************/
-/*
- * Preview Area
- */
-
-#preview_zone {
-	width: 82%;
-	float: left;
-
-}
-
-
-#preview {
-	width: 100%;
-	height: 400px;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-	text-align: center;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-	cursor: move;
-	float: left;
-}
-
-#preview .content {
-	width: 100%;
-	height: 100%;
-	display: block;
-}
-
-#obj-element {
-	width: 300px;
-	height: 100px;
-	border: 1px solid #CCC;
-	background: #FFF;
-	position: relative;
-}
-
-
-#obj-before {
-	height: 100%;
-	width: 100%;
-	background: #999;
-	border: 1px solid #CCC;
-	text-align: left;
-	display : block;
-	position: absolute;
-	z-index: -1;
-}
-
-#obj-after {
-	height: 100%;
-	width: 100%;
-	background: #DDD;
-	border: 1px solid #CCC;
-	text-align: right;
-	display : block;
-	position: absolute;
-	z-index: -1;
-}
-
-
-/******************************************************************************/
-/******************************************************************************/
-
-/**
- * Controls
- */
-
-.wrap-left {
-	float: left;
-	overflow: hidden;
-}
-
-.wrap-right {
-	float: right;
-	overflow: hidden;
-}
-
-.wrap-left > * {
-	float: left;
-}
-
-.wrap-right > * {
-	float: right;
-}
-
-@media (min-width: 960px) {
-
-	.wrap-left {
-		width: 45%;
-	}
-
-	.wrap-right {
-		width: 55%;
-	}
-}
-
-
-@media (max-width: 959px) {
-
-	.wrap-left {
-		width: 30%;
-	}
-
-	.wrap-right {
-		width: 70%;
-	}
-}
-
-
-#controls {
-	color: #444;
-	margin: 10px 0 0 0;
-}
-
-
-#controls .category {
-	width: 500px;
-	margin: 0 auto 20px;
-	padding: 0;
-
-}
-
-#controls .category .title {
-	width: 100%;
-	height: 1.5em;
-	line-height: 1.5em;
-	color: #AAA;
-	text-align: right;
-}
-
-#controls .category > .group {
-	border: 1px solid #CCC;
-	border-radius: 3px;
-}
-
-
-/**
- * 	Color Picker
- */
-
-@media (min-width: 960px) {
-	#controls .colorpicker {
-		width: 420px;
-	}
-}
-
-@media (max-width: 959px) {
-	#controls .colorpicker {
-		width: 210px;
-	}
-}
-
-#colorpicker {
-	width: 100%;
-	margin: 0 auto;
-}
-
-#colorpicker .gradient {
-	width: 200px;
-	height: 200px;
-	margin: 5px;
-	background: url("https://mdn.mozillademos.org/files/5707/picker_mask_200.png");
-	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
-	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
-	background-color: #F00;
-	float: left;
-}
-
-#colorpicker .hue {
-	width: 200px;
-	height: 30px;
-	margin: 5px;
-	background: url("https://mdn.mozillademos.org/files/5701/hue.png");
-	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
-				#00F 66.66%, #F0F 83.33%, #F00 100%);
-	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
-				#00F 66.66%, #F0F 83.33%, #F00 100%);
-	float: left;
-}
-
-#colorpicker .alpha {
-	width: 200px;
-	height: 30px;
-	margin: 5px;
-	border: 1px solid #CCC;
-	float: left;
-	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-#colorpicker #alpha {
-	width: 100%;
-	height: 100%;
-	background: url("https://mdn.mozillademos.org/files/5703/alpha_mask.png");
-	background: -moz-linear-gradient(left, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 1) 100%);
-}
-
-#colorpicker #gradient_picker {
-	width: 0.5em;
-	height: 0.5em;
-	border-radius: 0.4em;
-	border: 2px solid #CCC;
-	position: relative;
-	top: 20%;
-	left: 20%;
-}
-
-#colorpicker #hue_selector,
-#colorpicker #alpha_selector {
-	width: 3px;
-	height: 100%;
-	border: 1px solid #777;
-	background-color: #FFF;
-	position: relative;
-	top: -1px;
-	left: 0%;
-}
-
-/* input HSV and RGB */
-#colorpicker .info {
-	width: 200px;
-	margin: 5px;
-	float: left;
-}
-
-#colorpicker .info * {
-	float: left;
-}
-
-#colorpicker .info input {
-	margin: 0;
-	text-align: center;
-	width: 30px;
-	-moz-user-select: text;
-	-webkit-user-select: text;
-	-ms-user-select: text;
-}
-
-#colorpicker .info span {
-	height: 20px;
-	width: 30px;
-	text-align: center;
-	line-height: 20px;
-	display: block;
-}
-
-/* Preview color */
-#colorpicker .block {
-	width: 95px;
-	height: 54px;
-	float: left;
-	position: relative;
-}
-
-#colorpicker .preview {
-	margin: 5px;
-	border: 1px solid #CCC;
-	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-#colorpicker .preview:before {
-	height: 100%;
-	width: 50%;
-	left: 50%;
-	content: "";
-	background: #FFF;
-	position: absolute;
-	z-index: 1;
-}
-
-#colorpicker .preview > * {
-	width: 50%;
-	height: 100%;
-}
-
-#colorpicker #output_color {
-	width: 100%;
-	height: 100%;
-	position: absolute;
-	z-index: 2;
-}
-
-#colorpicker .block .input {
-	float: right;
-}
-
-#colorpicker [data-topic="a"] > span {
-	width: 50px;
-}
-
-#colorpicker [data-topic="hexa"] {
-	float: right;
-	margin: 10px 0 0 0;
-}
-
-#colorpicker [data-topic="hexa"] > span {
-	display: none;
-}
-
-#colorpicker [data-topic="hexa"] > input {
-	width: 85px;
-	padding: 2px 0;
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-
-/*
- * UI Components
- */
-
-/* Property */
-
-.property {
-	height: 20px;
-	margin: 10px 0;
-}
-
-.property * {
-	float: left;
-	height: 100%;
-	line-height: 100%;
-}
-
-/* Slider */
-
-#controls .ui-slider-name {
-	margin: 0 10px 0 0;
-}
-
-/*
- * Output code styling
- */
-
-#output {
-	position: relative;
-}
-
-#output .menu {
-	max-width: 70%;
-	height: 20px;
-	position: absolute;
-	top: 2px;
-}
-
-#output .button {
-	width: 90px;
-	height: 22px;
-	margin: 0 5px 0 0;
-	text-align: center;
-	line-height: 20px;
-	font-size: 14px;
-	color: #FFF;
-	background-color: #999;
-	border-top-left-radius: 3px;
-	border-top-right-radius: 3px;
-	bottom: -5px;
-	float:left;
-}
-
-#output .button:hover {
-	color: #FFF;
-	background-color: #666;
-	cursor: pointer;
-}
-
-#output .menu [data-active="true"] {
-	color: #777;
-	background-color: #FFF;
-	border: 1px solid #CCC;
-	border-bottom: none;
-}
-
-#output .menu [data-topic="before"] {
-	left: 100px;
-}
-
-#output .menu [data-topic="after"] {
-	left: 200px;
-}
-
-#output .output {
-	width: 480px;
-	margin: 10px;
-	padding: 10px;
-	overflow: hidden;
-	color: #555;
-	font-size: 14px;
-	border: 1px dashed #CCC;
-	border-radius: 3px;
-	display: none;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-
-	-moz-user-select: text;
-	-webkit-user-select: text;
-	-ms-user-select: text;
-}
-
-#output .css-property {
-	width: 100%;
-	float: left;
-	white-space: pre;
-}
-
-#output .name {
-	width: 35%;
-	float: left;
-}
-
-#output .value {
-	width: 65%;
-	float: left;
-}
-
-
- -

JavaScript Content

- -

-
-'use strict';
-
-/**
- * UI-SlidersManager
- */
-
-var SliderManager = (function SliderManager() {
-
-	var subscribers = {};
-	var sliders = [];
-
-	var Slider = function(node) {
-		var min = node.getAttribute('data-min') | 0;
-		var max = node.getAttribute('data-max') | 0;
-		var step = node.getAttribute('data-step') | 0;
-		var value = node.getAttribute('data-value') | 0;
-		var snap = node.getAttribute('data-snap');
-		var topic = node.getAttribute('data-topic');
-
-		this.min = min;
-		this.max = max > 0 ? max : 100;
-		this.step = step === 0 ? 1 : step;
-		this.value = value <= max && value >= min ? value : (min + max) / 2 | 0;
-		this.snap = snap === "true" ? true : false;
-		this.topic = topic;
-		this.node = node;
-
-		var pointer = document.createElement('div');
-		pointer.className = 'ui-slider-pointer';
-		node.appendChild(pointer);
-		this.pointer = pointer;
-
-		setMouseTracking(node, updateSlider.bind(this));
-
-		sliders[topic] = this;
-		setValue(topic, this.value);
-	}
-
-	var setButtonComponent = function setButtonComponent(node) {
-		var type = node.getAttribute('data-type');
-		var topic = node.getAttribute('data-topic');
-		if (type === "sub") {
-			node.textContent = '-';
-			node.addEventListener("click", function() {
-				decrement(topic);
-			});
-		}
-		if (type === "add") {
-			node.textContent = '+';
-			node.addEventListener("click", function() {
-				increment(topic);
-			});
-		}
-	}
-
-	var setInputComponent = function setInputComponent(node) {
-		var topic		= node.getAttribute('data-topic');
-		var unit_type	= node.getAttribute('data-unit');
-
-		var input = document.createElement('input');
-		var unit = document.createElement('span');
-		unit.textContent = unit_type;
-
-		input.setAttribute('type', 'text');
-		node.appendChild(input);
-		node.appendChild(unit);
-
-		input.addEventListener('click', function(e) {
-			this.select();
-		});
-
-		input.addEventListener('change', function(e) {
-			setValue(topic, e.target.value | 0);
-		});
-
-		subscribe(topic, function(value) {
-			node.children[0].value = value;
-		});
-	}
-
-	var increment = function increment(topic) {
-		var slider = sliders[topic];
-		if (slider === null || slider === undefined)
-			return;
-
-		if (slider.value + slider.step <= slider.max) {
-			slider.value += slider.step;
-			setValue(slider.topic, slider.value)
-			notify.call(slider);
-		}
-	};
-
-	var decrement = function decrement(topic) {
-		var slider = sliders[topic];
-		if (slider === null || slider === undefined)
-			return;
-
-		if (slider.value - slider.step >= slider.min) {
-			slider.value -= slider.step;
-			setValue(topic, slider.value)
-			notify.call(slider);
-		}
-	}
-
-	// this = Slider object
-	var updateSlider = function updateSlider(e) {
-		var node = this.node;
-		var pos = e.pageX - node.offsetLeft;
-		var width = node.clientWidth;
-		var delta = this.max - this.min;
-		var offset = this.pointer.clientWidth + 4; // border width * 2
-
-		if (pos < 0) pos = 0;
-		if (pos > width) pos = width;
-
-		var value = pos * delta / width | 0;
-		var precision = value % this.step;
-		value = value - precision + this.min;
-		if (precision > this.step / 2)
-			value = value + this.step;
-
-		if (this.snap)
-			pos =  (value - this.min) * width / delta;
-
-		this.pointer.style.left = pos - offset/2 + "px";
-		this.value = value;
-		node.setAttribute('data-value', value);
-		notify.call(this);
-	}
-
-	var setValue = function setValue(topic, value) {
-		var slider = sliders[topic];
-
-		if (value > slider.max || value < slider.min)
-			return;
-
-		var delta = slider.max - slider.min;
-		var width = slider.node.clientWidth;
-		var offset = slider.pointer.clientWidth;
-		var pos =  (value - slider.min) * width / delta;
-		slider.value = value;
-		slider.pointer.style.left = pos - offset / 2 + "px";
-		slider.node.setAttribute('data-value', value);
-		notify.call(slider);
-	}
-
-	var setMouseTracking = function setMouseTracking(elem, callback) {
-		elem.addEventListener("mousedown", function(e) {
-			callback(e);
-			document.addEventListener("mousemove", callback);
-		});
-
-		document.addEventListener("mouseup", function(e) {
-			document.removeEventListener("mousemove", callback);
-		});
-	}
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-		subscribers[topic].push(callback);
-	}
-
-	var unsubscribe = function unsubscribe(topic, callback) {
-		subscribers[topic].indexOf(callback);
-		subscribers[topic].splice(index, 1);
-	}
-
-	var notify = function notify() {
-		if (subscribers[this.topic] === undefined)
-			return;
-
-		for (var i in subscribers[this.topic]) {
-			subscribers[this.topic][i](this.value);
-		}
-	}
-
-	var init = function init() {
-		var elem, size;
-
-		elem = document.querySelectorAll('.ui-slider-btn-set');
-		size = elem.length;
-		for (var i = 0; i < size; i++)
-			setButtonComponent(elem[i]);
-
-		elem = document.querySelectorAll('.ui-slider-input');
-		size = elem.length;
-		for (var i = 0; i < size; i++)
-			setInputComponent(elem[i]);
-
-		elem = document.querySelectorAll('.ui-slider');
-		size = elem.length;
-		for (var i = 0; i < size; i++)
-			new Slider(elem[i]);
-	}
-
-	return {
-		init : init,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe
-	}
-
-})();
-
-/**
- * UI-ButtonManager
- */
-
-var ButtonManager = (function CheckBoxManager() {
-
-	var subscribers = [];
-	var buttons = [];
-
-	var CheckBox = function CheckBox(node) {
-		var topic = node.getAttribute('data-topic');
-		var state = node.getAttribute('data-state');
-		var name = node.getAttribute('data-label');
-		var align = node.getAttribute('data-text-on');
-
-		state = (state === "true");
-
-		var checkbox = document.createElement("input");
-		var label = document.createElement("label");
-
-		var id = 'checkbox-' + topic;
-		checkbox.id = id;
-		checkbox.setAttribute('type', 'checkbox');
-		checkbox.checked = state;
-
-		label.setAttribute('for', id);
-		if (name) {
-			label.className = 'text';
-			if (align)
-				label.className += ' ' + align;
-			label.textContent = name;
-		}
-
-		node.appendChild(checkbox);
-		node.appendChild(label);
-
-		this.node = node;
-		this.topic = topic;
-		this.checkbox = checkbox;
-
-		checkbox.addEventListener('change', function(e) {
-			notify.call(this);
-		}.bind(this));
-
-		buttons[topic] = this;
-	}
-
-	var getNode =  function getNode(topic) {
-		return buttons[topic].node;
-	}
-
-	var setValue = function setValue(topic, value) {
-		try {
-			buttons[topic].checkbox.checked = value;
-			notify.call(buttons[topic]);
-		}
-		catch(error) {
-			console.log(error, topic, value);
-		}
-	}
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-
-		subscribers[topic].push(callback);
-	}
-
-	var unsubscribe = function unsubscribe(topic, callback) {
-		subscribers[topic].indexOf(callback);
-		subscribers[topic].splice(index, 1);
-	}
-
-	var notify = function notify() {
-		if (subscribers[this.topic] === undefined)
-			return;
-		for (var i = 0; i < subscribers[this.topic].length; i++)
-			subscribers[this.topic][i](this.checkbox.checked);
-	}
-
-	var init = function init() {
-		var elem = document.querySelectorAll('.ui-checkbox');
-		var size = elem.length;
-		for (var i = 0; i < size; i++)
-			new CheckBox(elem[i]);
-	}
-
-	return {
-		init : init,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe
-	}
-
-})();
-
-
-window.addEventListener("load", function(){
-	BoxShadow.init();
-});
-
-var BoxShadow = (function BoxShadow() {
-
-	function getElemById(id) {
-		return document.getElementById(id);
-	}
-
-	/**
-	 * RGBA Color class
-	 */
-
-	function Color() {
-		this.r = 0;
-		this.g = 0;
-		this.b = 0;
-		this.a = 1;
-		this.hue = 0;
-		this.saturation = 0;
-		this.value = 0;
-	}
-
-	Color.prototype.copy = function copy(obj) {
-		if(obj instanceof Color !== true) {
-			console.log("Typeof instance not Color");
-			return;
-		}
-
-		this.r = obj.r;
-		this.g = obj.g;
-		this.b = obj.b;
-		this.a = obj.a;
-		this.hue = obj.hue;
-		this.saturation = obj.saturation;
-		this.value = obj.value;
-	}
-
-	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
-		if (red != undefined)
-			this.r = red | 0;
-		if (green != undefined)
-			this.g = green | 0;
-		if (blue != undefined)
-			this.b = blue | 0;
-		if (alpha != undefined)
-			this.a = alpha | 0;
-	}
-
-	/**
-	 * HSV/HSB (hue, saturation, value / brightness)
-	 * @param hue			0-360
-	 * @param saturation	0-100
-	 * @param value 		0-100
-	 */
-	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
-		this.hue = hue;
-		this.saturation = saturation;
-		this.value = value;
-		this.updateRGB();
-	}
-
-	Color.prototype.updateRGB = function updateRGB() {
-		var sat = this.saturation / 100;
-		var value = this.value / 100;
-		var C = sat * value;
-		var H = this.hue / 60;
-		var X = C * (1 - Math.abs(H % 2 - 1));
-		var m = value - C;
-		var precision = 255;
-
-		C = (C + m) * precision;
-		X = (X + m) * precision;
-		m = m * precision;
-
-		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
-		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
-		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
-		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
-		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
-		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
-	}
-
-	Color.prototype.updateHSV = function updateHSV() {
-		var red		= this.r / 255;
-		var green	= this.g / 255;
-		var blue	= this.b / 255;
-
-		var cmax = Math.max(red, green, blue);
-		var cmin = Math.min(red, green, blue);
-		var delta = cmax - cmin;
-		var hue = 0;
-		var saturation = 0;
-
-		if (delta) {
-			if (cmax === red ) { hue = ((green - blue) / delta); }
-			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
-			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
-			if (cmax) saturation = delta / cmax;
-		}
-
-		this.hue = 60 * hue | 0;
-		if (this.hue < 0) this.hue += 360;
-		this.saturation = (saturation * 100) | 0;
-		this.value = (cmax * 100) | 0;
-	}
-
-	Color.prototype.setHexa = function setHexa(value) {
-		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value)
-		if (valid !== true)
-			return;
-
-		if (value[0] === '#')
-			value = value.slice(1, value.length);
-
-		if (value.length === 3)
-			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,"$1$1$2$2$3$3");
-
-		this.r = parseInt(value.substr(0, 2), 16);
-		this.g = parseInt(value.substr(2, 2), 16);
-		this.b = parseInt(value.substr(4, 2), 16);
-
-		this.alpha	= 1;
-	}
-
-	Color.prototype.getHexa = function getHexa() {
-		var r = this.r.toString(16);
-		var g = this.g.toString(16);
-		var b = this.b.toString(16);
-		if (this.r < 16) r = '0' + r;
-		if (this.g < 16) g = '0' + g;
-		if (this.b < 16) b = '0' + b;
-		var value = '#' + r + g + b;
-		return value.toUpperCase();
-	}
-
-	Color.prototype.getRGBA = function getRGBA() {
-
-		var rgb = "(" + this.r + ", " + this.g + ", " + this.b;
-		var a = '';
-		var v = '';
-		if (this.a !== 1) {
-			a = 'a';
-			v = ', ' + this.a;
-		}
-
-		var value = "rgb" + a + rgb + v + ")";
-		return value;
-	}
-
-	Color.prototype.getColor = function getColor() {
-		if (this.a | 0 === 1)
-			return this.getHexa();
-		return this.getRGBA();
-	}
-
-	/**
-	 * Shadow Object
-	 */
-	function Shadow() {
-		this.inset  = false;
-		this.posX   = 5;
-		this.posY   = -5;
-		this.blur   = 5;
-		this.spread = 0;
-		this.color  = new Color();
-
-		var hue			= (Math.random() * 360) | 0;
-		var saturation	= (Math.random() * 75) | 0;
-		var value 		= (Math.random() * 50 + 50) | 0;
-		this.color.setHSV(hue, saturation, value, 1);
-	}
-
-	Shadow.prototype.computeCSS = function computeCSS() {
-		var value = "";
-		if (this.inset === true)
-			value += "inset ";
-		value += this.posX + "px ";
-		value += this.posY + "px ";
-		value += this.blur + "px ";
-		value += this.spread + "px ";
-		value += this.color.getColor();
-
-		return value;
-	}
-
-	Shadow.prototype.toggleInset = function toggleInset(value) {
-		if (value !== undefined || typeof value === "boolean")
-			this.inset = value;
-		else
-			this.inset = this.inset === true ? false : true;
-	}
-
-	Shadow.prototype.copy = function copy(obj) {
-		if(obj instanceof Shadow !== true) {
-			console.log("Typeof instance not Shadow");
-			return;
-		}
-
-		this.inset  = obj.inset;
-		this.posX   = obj.posX;
-		this.posY   = obj.posY;
-		this.blur   = obj.blur;
-		this.spread = obj.spread;
-		this.color.copy(obj.color);
-	}
-
-	/**
-	 * Color Picker
-	 */
-	var ColoPicker = (function ColoPicker() {
-
-		var colorpicker;
-		var hue_area;
-		var gradient_area;
-		var alpha_area;
-		var gradient_picker;
-		var hue_selector;
-		var alpha_selector;
-		var pick_object;
-		var info_rgb;
-		var info_hsv;
-		var info_hexa;
-		var output_color;
-		var color = new Color();
-		var subscribers = [];
-
-		var updateColor = function updateColor(e) {
-			var x = e.pageX - gradient_area.offsetLeft;
-			var y = e.pageY - gradient_area.offsetTop;
-
-			// width and height should be the same
-			var size = gradient_area.clientWidth;
-
-			if (x > size)
-				x = size;
-			if (y > size)
-				y = size;
-
-			if (x < 0) x = 0;
-			if (y < 0) y = 0;
-
-			var value = 100 - (y * 100 / size) | 0;
-			var saturation = x * 100 / size | 0;
-
-			color.setHSV(color.hue, saturation, value);
-			// should update just
-			// color pointer location
-			updateUI();
-			notify("color", color);
-		}
-
-		var updateHue = function updateHue(e) {
-			var x = e.pageX - hue_area.offsetLeft;
-			var width = hue_area.clientWidth;
-
-			if (x < 0) x = 0;
-			if (x > width) x = width;
-
-			var hue = ((360 * x) / width) | 0;
-			if (hue === 360) hue = 359;
-
-			color.setHSV(hue, color.saturation, color.value);
-
-			// should update just
-			// hue pointer location
-			// picker area background
-			// alpha area background
-			updateUI();
-			notify("color", color);
-		}
-
-		var updateAlpha = function updateAlpha(e) {
-			var x = e.pageX - alpha_area.offsetLeft;
-			var width = alpha_area.clientWidth;
-
-			if (x < 0) x = 0;
-			if (x > width) x = width;
-
-			color.a = (x / width).toFixed(2);
-
-			// should update just
-			// alpha pointer location
-			updateUI();
-			notify("color", color);
-		}
-
-		var setHueGfx = function setHueGfx(hue) {
-			var sat = color.saturation;
-			var val = color.value;
-			var alpha = color.a;
-
-			color.setHSV(hue, 100, 100);
-			gradient_area.style.backgroundColor = color.getHexa();
-
-			color.a = 0;
-			var start = color.getRGBA();
-			color.a = 1;
-			var end = color.getRGBA();
-			color.a = alpha;
-
-			var gradient = '-moz-linear-gradient(left, ' +	start + '0%, ' + end + ' 100%)';
-			alpha_area.style.background = gradient;
-		}
-
-		var updateUI = function updateUI() {
-			var x, y;		// coordinates
-			var size;		// size of the area
-			var offset;		// pointer graphic selector offset
-
-			// Set color pointer location
-			size = gradient_area.clientWidth;
-			offset = gradient_picker.clientWidth / 2 + 2;
-
-			x = (color.saturation * size / 100) | 0;
-			y = size - (color.value * size / 100) | 0;
-
-			gradient_picker.style.left = x - offset + "px";
-			gradient_picker.style.top = y - offset + "px";
-
-			// Set hue pointer location
-			size = hue_area.clientWidth;
-			offset = hue_selector.clientWidth/2;
-			x = (color.hue * size / 360 ) | 0;
-			hue_selector.style.left = x - offset + "px";
-
-			// Set alpha pointer location
-			size = alpha_area.clientWidth;
-			offset = alpha_selector.clientWidth/2;
-			x = (color.a * size) | 0;
-			alpha_selector.style.left = x - offset + "px";
-
-			// Set picker area background
-			var nc = new Color();
-			nc.copy(color);
-			if (nc.hue === 360) nc.hue = 0;
-			nc.setHSV(nc.hue, 100, 100);
-			gradient_area.style.backgroundColor = nc.getHexa();
-
-			// Set alpha area background
-			nc.copy(color);
-			nc.a = 0;
-			var start = nc.getRGBA();
-			nc.a = 1;
-			var end = nc.getRGBA();
-			var gradient = '-moz-linear-gradient(left, ' +	start + '0%, ' + end + ' 100%)';
-			alpha_area.style.background = gradient;
-
-			// Update color info
-			notify("color", color);
-			notify("hue", color.hue);
-			notify("saturation", color.saturation);
-			notify("value", color.value);
-			notify("r", color.r);
-			notify("g", color.g);
-			notify("b", color.b);
-			notify("a", color.a);
-			notify("hexa", color.getHexa());
-			output_color.style.backgroundColor = color.getRGBA();
-		}
-
-		var setInputComponent = function setInputComponent(node) {
-			var topic = node.getAttribute('data-topic');
-			var title = node.getAttribute('data-title');
-			var action = node.getAttribute('data-action');
-			title = title === null ? '' : title;
-
-			var input = document.createElement('input');
-			var info = document.createElement('span');
-			info.textContent = title;
-
-			input.setAttribute('type', 'text');
-			input.setAttribute('data-action', 'set-' + action + '-' + topic);
-			node.appendChild(info);
-			node.appendChild(input);
-
-			input.addEventListener('click', function(e) {
-				this.select();
-			});
-
-			input.addEventListener('change', function(e) {
-				if (action === 'HSV')
-					inputChangeHSV(topic);
-				if (action === 'RGB')
-					inputChangeRGB(topic);
-				if (action === 'alpha')
-					inputChangeAlpha(topic);
-				if (action === 'hexa')
-					inputChangeHexa(topic);
-			});
-
-			subscribe(topic, function(value) {
-				node.children[1].value = value;
-			});
-		}
-
-		var inputChangeHSV = function actionHSV(topic) {
-			var selector = "[data-action='set-HSV-" + topic + "']";
-			var node = document.querySelector("#colorpicker " + selector);
-			var value = parseInt(node.value);
-
-			if (typeof value === 'number' && isNaN(value) === false &&
-				value >= 0 && value < 360)
-				color[topic] = value;
-
-			color.updateRGB();
-			updateUI();
-		}
-
-		var inputChangeRGB = function inputChangeRGB(topic) {
-			var selector = "[data-action='set-RGB-" + topic + "']";
-			var node = document.querySelector("#colorpicker " + selector);
-			var value = parseInt(node.value);
-
-			if (typeof value === 'number' && isNaN(value) === false &&
-				value >= 0 && value <= 255)
-				color[topic] = value;
-
-			color.updateHSV();
-			updateUI();
-		}
-
-		var inputChangeAlpha = function inputChangeAlpha(topic) {
-			var selector = "[data-action='set-alpha-" + topic + "']";
-			var node = document.querySelector("#colorpicker " + selector);
-			var value = parseFloat(node.value);
-
-			if (typeof value === 'number' && isNaN(value) === false &&
-				value >= 0 && value <= 1)
-				color.a = value.toFixed(2);
-
-			updateUI();
-		}
-
-		var inputChangeHexa = function inputChangeHexa(topic) {
-			var selector = "[data-action='set-hexa-" + topic + "']";
-			var node = document.querySelector("#colorpicker " + selector);
-			var value = node.value;
-			color.setHexa(value);
-			color.updateHSV();
-			updateUI();
-		}
-
-		var setMouseTracking = function setMouseTracking(elem, callback) {
-
-			elem.addEventListener("mousedown", function(e) {
-				callback(e);
-				document.addEventListener("mousemove", callback);
-			});
-
-			document.addEventListener("mouseup", function(e) {
-				document.removeEventListener("mousemove", callback);
-			});
-		}
-
-		/*
-		 * Observer
-		 */
-		var setColor = function setColor(obj) {
-			if(obj instanceof Color !== true) {
-				console.log("Typeof instance not Color");
-				return;
-			}
-			color.copy(obj);
-			updateUI();
-		}
-
-		var subscribe = function subscribe(topic, callback) {
-			if (subscribers[topic] === undefined)
-				subscribers[topic] = [];
-
-			subscribers[topic].push(callback);
-		}
-
-		var unsubscribe = function unsubscribe(callback) {
-			subscribers.indexOf(callback);
-			subscribers.splice(index, 1);
-		}
-
-		var notify = function notify(topic, value) {
-			for (var i in subscribers[topic])
-				subscribers[topic][i](value);
-		}
-
-		var init = function init() {
-			colorpicker		= getElemById("colorpicker");
-			hue_area		= getElemById("hue");
-			gradient_area	= getElemById("gradient");
-			alpha_area		= getElemById("alpha");
-			gradient_picker	= getElemById("gradient_picker");
-			hue_selector	= getElemById("hue_selector");
-			alpha_selector	= getElemById("alpha_selector");
-			output_color	= getElemById("output_color");
-
-			var elem = document.querySelectorAll('#colorpicker .input');
-			var size = elem.length;
-			for (var i = 0; i < size; i++)
-				setInputComponent(elem[i]);
-
-			setMouseTracking(gradient_area, updateColor);
-			setMouseTracking(hue_area, updateHue);
-			setMouseTracking(alpha_area, updateAlpha);
-
-		}
-
-		return {
-			init : init,
-			setColor : setColor,
-			subscribe : subscribe,
-			unsubscribe : unsubscribe
-		}
-
-	})();
-
-	/**
-	 * Shadow dragging
-	 */
-	var PreviewMouseTracking = (function Drag() {
-		var active = false;
-		var lastX = 0;
-		var lastY = 0;
-		var subscribers = [];
-
-		var init = function init(id) {
-			var elem = getElemById(id);
-			elem.addEventListener('mousedown', dragStart, false);
-			document.addEventListener('mouseup', dragEnd, false);
-		}
-
-		var dragStart = function dragStart(e) {
-			if (e.button !== 0)
-				return;
-
-			active = true;
-			lastX = e.clientX;
-			lastY = e.clientY;
-			document.addEventListener('mousemove', mouseDrag, false);
-		}
-
-		var dragEnd = function dragEnd(e) {
-			if (e.button !== 0)
-				return;
-
-			if (active === true) {
-				active = false;
-				document.removeEventListener('mousemove', mouseDrag, false);
-			}
-		}
-
-		var mouseDrag = function mouseDrag(e) {
-			notify(e.clientX - lastX, e.clientY - lastY);
-			lastX = e.clientX;
-			lastY = e.clientY;
-		}
-
-		var subscribe = function subscribe(callback) {
-			subscribers.push(callback);
-		}
-
-		var unsubscribe = function unsubscribe(callback) {
-			var index = subscribers.indexOf(callback);
-			subscribers.splice(index, 1);
-		}
-
-		var notify = function notify(deltaX, deltaY) {
-			for (var i in subscribers)
-				subscribers[i](deltaX, deltaY);
-		}
-
-		return {
-			init : init,
-			subscribe : subscribe,
-			unsubscribe : unsubscribe
-		}
-
-	})();
-
-	/*
-	 * Element Class
-	 */
-	var CssClass = function CssClass(id) {
-		this.left = 0;
-		this.top = 0;
-		this.rotate = 0;
-		this.width = 300;
-		this.height = 100;
-		this.display = true;
-		this.border = true;
-		this.zIndex = -1;
-		this.bgcolor = new Color();
-		this.id = id;
-		this.node = getElemById('obj-' + id);
-		this.object = getElemById(id);
-		this.shadowID = null;
-		this.shadows = []
-		this.render = [];
-		this.init();
-	}
-
-	CssClass.prototype.init = function init() {
-		this.left = ((this.node.parentNode.clientWidth - this.node.clientWidth) / 2) | 0;
-		this.top = ((this.node.parentNode.clientHeight - this.node.clientHeight) / 2) | 0;
-
-		this.setTop(this.top);
-		this.setLeft(this.left);
-		this.setHeight(this.height);
-		this.setWidth(this.width);
-		this.bgcolor.setHSV(0, 0, 100);
-		this.updateBgColor(this.bgcolor);
-	}
-
-	CssClass.prototype.updatePos = function updatePos(deltaX, deltaY) {
-		this.left += deltaX;
-		this.top += deltaY;
-		this.node.style.top = this.top + "px";
-		this.node.style.left = this.left + "px";
-		SliderManager.setValue("left", this.left);
-		SliderManager.setValue("top", this.top);
-	}
-
-	CssClass.prototype.setLeft = function setLeft(value) {
-		this.left = value;
-		this.node.style.left = this.left + "px";
-		OutputManager.updateProperty(this.id, 'left', this.left + 'px');
-	}
-
-	CssClass.prototype.setTop = function setTop(value) {
-		this.top = value;
-		this.node.style.top = this.top + 'px';
-		OutputManager.updateProperty(this.id, 'top', this.top + 'px');
-	}
-
-	CssClass.prototype.setWidth = function setWidth(value) {
-		this.width = value;
-		this.node.style.width = this.width + 'px';
-		OutputManager.updateProperty(this.id, 'width', this.width + 'px');
-	}
-
-	CssClass.prototype.setHeight = function setHeight(value) {
-		this.height = value;
-		this.node.style.height = this.height + 'px';
-		OutputManager.updateProperty(this.id, 'height', this.height + 'px');
-	}
-
-	// Browser support
-	CssClass.prototype.setRotate = function setRotate(value) {
-		var cssvalue = 'rotate(' + value +'deg)';
-
-		this.node.style.transform = cssvalue;
-		this.node.style.webkitTransform = cssvalue;
-		this.node.style.msTransform = cssvalue;
-
-		if (value !== 0) {
-			if (this.rotate === 0) {
-				OutputManager.toggleProperty(this.id, 'transform', true);
-				OutputManager.toggleProperty(this.id, '-webkit-transform', true);
-				OutputManager.toggleProperty(this.id, '-ms-transform', true);
-			}
-		}
-		else {
-			OutputManager.toggleProperty(this.id, 'transform', false);
-			OutputManager.toggleProperty(this.id, '-webkit-transform', false);
-			OutputManager.toggleProperty(this.id, '-ms-transform', false);
-		}
-
-		OutputManager.updateProperty(this.id, 'transform', cssvalue);
-		OutputManager.updateProperty(this.id, '-webkit-transform', cssvalue);
-		OutputManager.updateProperty(this.id, '-ms-transform', cssvalue);
-		this.rotate = value;
-	}
-
-	CssClass.prototype.setzIndex = function setzIndex(value) {
-		this.node.style.zIndex = value;
-		OutputManager.updateProperty(this.id, 'z-index', value);
-		this.zIndex = value;
-	}
-
-	CssClass.prototype.toggleDisplay = function toggleDisplay(value) {
-		if (typeof value !== "boolean" || this.display === value)
-			return;
-
-		this.display = value;
-		var display = this.display === true ? "block" : "none";
-		this.node.style.display = display;
-		this.object.style.display = display;
-	}
-
-	CssClass.prototype.toggleBorder = function toggleBorder(value) {
-		if (typeof value !== "boolean" || this.border === value)
-			return;
-
-		this.border = value;
-		var border = this.border === true ? "1px solid #CCC" : "none";
-		this.node.style.border = border;
-	}
-
-	CssClass.prototype.updateBgColor = function updateBgColor(color) {
-		this.bgcolor.copy(color);
-		this.node.style.backgroundColor = color.getColor();
-		OutputManager.updateProperty(this.id, 'background-color', color.getColor());
-	}
-
-	CssClass.prototype.updateShadows = function updateShadows() {
-		if (this.render.length === 0)
-			OutputManager.toggleProperty(this.id, 'box-shadow', false);
-		if (this.render.length === 1)
-			OutputManager.toggleProperty(this.id, 'box-shadow', true);
-
-		this.node.style.boxShadow = this.render.join(", ");
-		OutputManager.updateProperty(this.id, 'box-shadow', this.render.join(", \n"));
-
-	}
-
-
-	/**
-	 * Tool Manager
-	 */
-	var Tool = (function Tool() {
-
-		var preview;
-		var classes = [];
-		var active = null;
-		var animate = false;
-
-		/*
-		 * Toll actions
-		 */
-		var addCssClass = function addCssClass(id) {
-			classes[id] = new CssClass(id);
-		}
-
-		var setActiveClass = function setActiveClass(id) {
-			active = classes[id];
-			active.shadowID = null;
-			ColoPicker.setColor(classes[id].bgcolor);
-			SliderManager.setValue("top", active.top);
-			SliderManager.setValue("left", active.left);
-			SliderManager.setValue("rotate", active.rotate);
-			SliderManager.setValue("z-index", active.zIndex);
-			SliderManager.setValue("width", active.width);
-			SliderManager.setValue("height", active.height);
-			ButtonManager.setValue("border-state", active.border);
-			active.updateShadows();
-		}
-
-		var disableClass = function disableClass(topic) {
-			classes[topic].toggleDisplay(false);
-			ButtonManager.setValue(topic, false);
-		}
-
-		var addShadow = function addShadow(position) {
-			if (animate === true)
-				return -1;
-
-			active.shadows.splice(position, 0, new Shadow());
-			active.render.splice(position, 0, null);
-		}
-
-		var swapShadow = function swapShadow(id1, id2) {
-			var x = active.shadows[id1];
-			active.shadows[id1] = active.shadows[id2];
-			active.shadows[id2] = x;
-			updateShadowCSS(id1);
-			updateShadowCSS(id2);
-		}
-
-		var deleteShadow = function deleteShadow(position) {
-			active.shadows.splice(position, 1);
-			active.render.splice(position, 1);
-			active.updateShadows();
-		}
-
-		var setActiveShadow = function setActiveShadow(id, glow) {
-			active.shadowID = id;
-			ColoPicker.setColor(active.shadows[id].color);
-			ButtonManager.setValue("inset", active.shadows[id].inset);
-			SliderManager.setValue("blur", active.shadows[id].blur);
-			SliderManager.setValue("spread", active.shadows[id].spread);
-			SliderManager.setValue("posX", active.shadows[id].posX);
-			SliderManager.setValue("posY", active.shadows[id].posY);
-			if (glow === true)
-				addGlowEffect(id);
-		}
-
-		var addGlowEffect = function addGlowEffect(id) {
-			if (animate === true)
-				return;
-
-			animate = true;
-			var store = new Shadow();
-			var shadow = active.shadows[id];
-
-			store.copy(shadow);
-			shadow.color.setRGBA(40, 125, 200, 1);
-			shadow.blur = 10;
-			shadow.spread = 10;
-
-			active.node.style.transition = "box-shadow 0.2s";
-			updateShadowCSS(id);
-
-			setTimeout(function() {
-				shadow.copy(store);
-				updateShadowCSS(id);
-				setTimeout(function() {
-					active.node.style.removeProperty("transition");
-					animate = false;
-				}, 100);
-			}, 200);
-		}
-
-		var updateActivePos = function updateActivePos(deltaX, deltaY) {
-			if (active.shadowID === null)
-				active.updatePos(deltaX, deltaY);
-			else
-				updateShadowPos(deltaX, deltaY);
-		}
-
-		/*
-		 * Shadow properties
-		 */
-		var updateShadowCSS = function updateShadowCSS(id) {
-			active.render[id] = active.shadows[id].computeCSS();
-			active.updateShadows();
-		}
-
-		var toggleShadowInset = function toggleShadowInset(value) {
-			if (active.shadowID === null)
-				return;
-			active.shadows[active.shadowID].toggleInset(value);
-			updateShadowCSS(active.shadowID);
-		}
-
-		var updateShadowPos = function updateShadowPos(deltaX, deltaY) {
-			var shadow = active.shadows[active.shadowID];
-			shadow.posX += deltaX;
-			shadow.posY += deltaY;
-			SliderManager.setValue("posX", shadow.posX);
-			SliderManager.setValue("posY", shadow.posY);
-			updateShadowCSS(active.shadowID);
-		}
-
-		var setShadowPosX = function setShadowPosX(value) {
-			if (active.shadowID === null)
-				return;
-			active.shadows[active.shadowID].posX = value;
-			updateShadowCSS(active.shadowID);
-		}
-
-		var setShadowPosY = function setShadowPosY(value) {
-			if (active.shadowID === null)
-				return;
-			active.shadows[active.shadowID].posY = value;
-			updateShadowCSS(active.shadowID);
-		}
-
-		var setShadowBlur = function setShadowBlur(value) {
-			if (active.shadowID === null)
-				return;
-			active.shadows[active.shadowID].blur = value;
-			updateShadowCSS(active.shadowID);
-		}
-
-		var setShadowSpread = function setShadowSpread(value) {
-			if (active.shadowID === null)
-				return;
-			active.shadows[active.shadowID].spread = value;
-			updateShadowCSS(active.shadowID);
-		}
-
-		var updateShadowColor = function updateShadowColor(color) {
-			active.shadows[active.shadowID].color.copy(color);
-			updateShadowCSS(active.shadowID);
-		}
-
-		/*
-		 * Element Properties
-		 */
-		var updateColor = function updateColor(color) {
-			if (active.shadowID === null)
-				active.updateBgColor(color);
-			else
-				updateShadowColor(color);
-		}
-
-		var init = function init() {
-			preview = getElemById("preview");
-
-			ColoPicker.subscribe("color", updateColor);
-			PreviewMouseTracking.subscribe(updateActivePos);
-
-			// Affects shadows
-			ButtonManager.subscribe("inset", toggleShadowInset);
-			SliderManager.subscribe("posX", setShadowPosX);
-			SliderManager.subscribe("posY", setShadowPosY);
-			SliderManager.subscribe("blur", setShadowBlur);
-			SliderManager.subscribe("spread", setShadowSpread);
-
-			// Affects element
-			SliderManager.subscribe("top", function(value){
-				active.setTop(value);
-			});
-			SliderManager.subscribe("left", function(value){
-				active.setLeft(value);
-			});
-			SliderManager.subscribe("rotate", function(value) {
-				if (active == classes["element"])
-					return;
-				active.setRotate(value);
-			});
-
-			SliderManager.subscribe("z-index", function(value) {
-				if (active == classes["element"])
-					return;
-				active.setzIndex(value);
-			});
-
-			SliderManager.subscribe("width", function(value) {
-				active.setWidth(value)
-			});
-
-			SliderManager.subscribe("height", function(value) {
-				active.setHeight(value)
-			});
-
-			// Actions
-			classes['before'].top = -30;
-			classes['before'].left = -30;
-			classes['after'].top = 30;
-			classes['after'].left = 30;
-			classes['before'].toggleDisplay(false);
-			classes['after'].toggleDisplay(false);
-			ButtonManager.setValue('before', false);
-			ButtonManager.setValue('after', false);
-
-			ButtonManager.subscribe("before", classes['before'].toggleDisplay.bind(classes['before']));
-			ButtonManager.subscribe("after", classes['after'].toggleDisplay.bind(classes['after']));
-
-			ButtonManager.subscribe("border-state", function(value) {
-				active.toggleBorder(value);
-			});
-
-		}
-
-		return {
-			init 			: init,
-			addShadow		: addShadow,
-			swapShadow		: swapShadow,
-			addCssClass		: addCssClass,
-			disableClass	: disableClass,
-			deleteShadow	: deleteShadow,
-			setActiveClass	: setActiveClass,
-			setActiveShadow : setActiveShadow
-		}
-
-	})();
-
-	/**
-	 * Layer Manager
-	 */
-	var LayerManager = (function LayerManager() {
-		var stacks = [];
-		var active = {
-			node : null,
-			stack : null
-		}
-		var elements = {};
-
-		var mouseEvents = function mouseEvents(e) {
-			var node = e.target;
-			var type = node.getAttribute('data-type');
-
-			if (type === 'subject')
-				setActiveStack(stacks[node.id]);
-
-			if (type === 'disable') {
-				Tool.disableClass(node.parentNode.id);
-				setActiveStack(stacks['element']);
-			}
-
-			if (type === 'add')
-				active.stack.addLayer();
-
-			if (type === 'layer')
-				active.stack.setActiveLayer(node);
-
-			if (type === 'delete')
-				active.stack.deleteLayer(node.parentNode);
-
-			if (type === 'move-up')
-				active.stack.moveLayer(1);
-
-			if (type === 'move-down')
-				active.stack.moveLayer(-1);
-		}
-
-		var setActiveStack = function setActiveStack(stackObj) {
-			active.stack.hide();
-			active.stack = stackObj;
-			active.stack.show();
-		}
-
-		/*
-		 * Stack object
-		 */
-		var Stack = function Stack(subject) {
-			var S = document.createElement('div');
-			var title = document.createElement('div');
-			var stack = document.createElement('div');
-
-			S.className = 'container';
-			stack.className = 'stack';
-			title.className = 'title';
-			title.textContent = subject.getAttribute('data-title');
-			S.appendChild(title);
-			S.appendChild(stack);
-
-			this.id = subject.id;
-			this.container = S;
-			this.stack = stack;
-			this.subject = subject;
-			this.order = [];
-			this.uid = 0;
-			this.count = 0;
-			this.layer = null;
-			this.layerID = 0;
-		}
-
-		Stack.prototype.addLayer = function addLayer() {
-			if (Tool.addShadow(this.layerID) == -1)
-				return;
-
-			var uid = this.getUID();
-			var layer = this.createLayer(uid);
-
-			if (this.layer === null && this.stack.children.length >= 1)
-				this.layer = this.stack.children[0];
-
-			this.stack.insertBefore(layer, this.layer);
-			this.order.splice(this.layerID, 0, uid);
-			this.count++;
-			this.setActiveLayer(layer);
-		}
-
-		Stack.prototype.createLayer = function createLayer(uid) {
-			var layer = document.createElement('div');
-			var del = document.createElement('span');
-
-			layer.className = 'node';
-			layer.setAttribute('data-shid', uid);
-			layer.setAttribute('data-type', 'layer');
-			layer.textContent = 'shadow ' + uid;
-
-			del.className = 'delete';
-			del.setAttribute('data-type', 'delete');
-
-			layer.appendChild(del);
-			return layer;
-		}
-
-		Stack.prototype.getUID = function getUID() {
-			return this.uid++;
-		}
-
-		// SOLVE IE BUG
-		Stack.prototype.moveLayer = function moveLayer(direction) {
-			if (this.count <= 1 || this.layer === null)
-				return;
-			if (direction === -1 && this.layerID === (this.count - 1) )
-				return;
-			if (direction === 1 && this.layerID === 0 )
-				return;
-
-			if (direction === -1) {
-				var before = null;
-				Tool.swapShadow(this.layerID, this.layerID + 1);
-				this.swapOrder(this.layerID, this.layerID + 1);
-				this.layerID += 1;
-
-				if (this.layerID + 1 !== this.count)
-					before = this.stack.children[this.layerID + 1];
-
-				this.stack.insertBefore(this.layer, before);
-				Tool.setActiveShadow(this.layerID, false);
-			}
-
-			if (direction === 1) {
-				Tool.swapShadow(this.layerID, this.layerID - 1);
-				this.swapOrder(this.layerID, this.layerID - 1);
-				this.layerID -= 1;
-				this.stack.insertBefore(this.layer, this.stack.children[this.layerID]);
-				Tool.setActiveShadow(this.layerID, false);
-			}
-		}
-
-		Stack.prototype.swapOrder = function swapOrder(pos1, pos2) {
-			var x = this.order[pos1];
-			this.order[pos1] = this.order[pos2];
-			this.order[pos2] = x;
-		}
-
-		Stack.prototype.deleteLayer = function deleteLayer(node) {
-			var shadowID =  node.getAttribute('data-shid') | 0;
-			var index = this.order.indexOf(shadowID);
-			this.stack.removeChild(this.stack.children[index]);
-			this.order.splice(index, 1);
-			this.count--;
-
-			Tool.deleteShadow(index);
-
-			if (index > this.layerID)
-				return;
-
-			if (index == this.layerID) {
-				if (this.count >= 1) {
-					this.layerID = 0;
-					this.setActiveLayer(this.stack.children[0], true);
-				}
-				else {
-					this.layer = null;
-					this.show();
-				}
-			}
-
-			if (index < this.layerID) {
-				this.layerID--;
-				Tool.setActiveShadow(this.layerID, true);
-			}
-
-		}
-
-		Stack.prototype.setActiveLayer = function setActiveLayer(node) {
-			elements.shadow_properties.style.display = 'block';
-			elements.element_properties.style.display = 'none';
-
-			if (this.layer)
-				this.layer.removeAttribute('data-active');
-
-			this.layer = node;
-			this.layer.setAttribute('data-active', 'layer');
-
-			var shadowID =  node.getAttribute('data-shid') | 0;
-			this.layerID = this.order.indexOf(shadowID);
-			Tool.setActiveShadow(this.layerID, true);
-		}
-
-		Stack.prototype.unsetActiveLayer = function unsetActiveLayer() {
-			if (this.layer)
-				this.layer.removeAttribute('data-active');
-
-			this.layer = null;
-			this.layerID = 0;
-		}
-
-		Stack.prototype.hide = function hide() {
-			this.unsetActiveLayer();
-			this.subject.removeAttribute('data-active');
-			var style = this.container.style;
-			style.left = '100%';
-			style.zIndex = '0';
-		}
-
-		Stack.prototype.show = function show() {
-			elements.shadow_properties.style.display = 'none';
-			elements.element_properties.style.display = 'block';
-
-			if (this.id === 'element') {
-				elements.zIndex.style.display = 'none';
-				elements.transform_rotate.style.display = 'none';
-			}
-			else {
-				elements.zIndex.style.display = 'block';
-				elements.transform_rotate.style.display = 'block';
-			}
-
-			this.subject.setAttribute('data-active', 'subject');
-			var style = this.container.style;
-			style.left = '0';
-			style.zIndex = '10';
-			Tool.setActiveClass(this.id);
-		}
-
-		function init() {
-
-			var elem, size;
-			var layerManager = getElemById("layer_manager");
-			var layerMenu = getElemById("layer_menu");
-			var container = getElemById("stack_container");
-
-			elements.shadow_properties = getElemById('shadow_properties');
-			elements.element_properties = getElemById('element_properties');
-			elements.transform_rotate = getElemById('transform_rotate');
-			elements.zIndex = getElemById('z-index');
-
-			elem = document.querySelectorAll('#layer_menu [data-type="subject"]');
-			size = elem.length;
-
-			for (var i = 0; i < size; i++) {
-				var S = new Stack(elem[i]);
-				stacks[elem[i].id] = S;
-				container.appendChild(S.container);
-				Tool.addCssClass(elem[i].id);
-			}
-
-			active.stack = stacks['element'];
-			stacks['element'].show();
-
-			layerManager.addEventListener("click", mouseEvents);
-			layerMenu.addEventListener("click", mouseEvents);
-
-			ButtonManager.subscribe("before", function(value) {
-				if (value === false && active.stack === stacks['before'])
-					setActiveStack(stacks['element'])
-				if (value === true && active.stack !== stacks['before'])
-					setActiveStack(stacks['before'])
-			});
-
-			ButtonManager.subscribe("after", function(value) {
-				if (value === false && active.stack === stacks['after'])
-					setActiveStack(stacks['element'])
-				if (value === true && active.stack !== stacks['after'])
-					setActiveStack(stacks['after'])
-			});
-		}
-
-		return {
-			init : init
-		}
-	})();
-
-	/*
-	 * OutputManager
-	 */
-	var OutputManager = (function OutputManager() {
-		var classes = [];
-		var buttons = [];
-		var active = null;
-		var menu = null;
-		var button_offset = 0;
-
-		var crateOutputNode = function(topic, property) {
-
-			var prop = document.createElement('div');
-			var name = document.createElement('span');
-			var value = document.createElement('span');
-
-			var pmatch = property.match(/(^([a-z0-9\-]*)=\[([a-z0-9\-\"]*)\])|^([a-z0-9\-]*)/i);
-
-			name.textContent = '\t' + pmatch[4];
-
-			if (pmatch[3] !== undefined) {
-				name.textContent = '\t' + pmatch[2];
-				value.textContent = pmatch[3] + ';';
-			}
-
-			name.textContent += ': ';
-			prop.className = 'css-property';
-			name.className = 'name';
-			value.className = 'value';
-			prop.appendChild(name);
-			prop.appendChild(value);
-
-			classes[topic].node.appendChild(prop);
-			classes[topic].line[property] = prop;
-			classes[topic].prop[property] = value;
-		}
-
-		var OutputClass = function OutputClass(node) {
-			var topic = node.getAttribute('data-topic');
-			var prop = node.getAttribute('data-prop');
-			var name = node.getAttribute('data-name');
-			var properties = prop.split(' ');
-
-			classes[topic] = {};
-			classes[topic].node = node;
-			classes[topic].prop = [];
-			classes[topic].line = [];
-			classes[topic].button = new Button(topic);
-
-			var open_decl = document.createElement('div');
-			var end_decl = document.createElement('div');
-
-			open_decl.textContent = name + ' {';
-			end_decl.textContent = '}';
-			node.appendChild(open_decl);
-
-			for (var i in properties)
-				crateOutputNode(topic, properties[i]);
-
-			node.appendChild(end_decl);
-		}
-
-		var Button = function Button(topic) {
-			var button = document.createElement('div');
-
-			button.className = 'button';
-			button.textContent = topic;
-			button.style.left = button_offset + 'px';
-			button_offset += 100;
-
-			button.addEventListener("click", function() {
-				toggleDisplay(topic);
-			})
-
-			menu.appendChild(button);
-			return button;
-		}
-
-		var toggleDisplay = function toggleDisplay(topic) {
-			active.button.removeAttribute('data-active');
-			active.node.style.display = 'none';
-			active = classes[topic];
-			active.node.style.display = 'block';
-			active.button.setAttribute('data-active', 'true');
-		}
-
-		var toggleButton = function toggleButton(topic, value) {
-			var display = (value === true) ? 'block' : 'none';
-			classes[topic].button.style.display = display;
-
-			if (value === true)
-				toggleDisplay(topic);
-			else
-				toggleDisplay('element');
-		}
-
-		var updateProperty = function updateProperty(topic, property, data) {
-			try {
-				classes[topic].prop[property].textContent = data + ';';
-			}
-			catch(error) {
-				// console.log("ERROR undefined : ", topic, property, data);
-			}
-		}
-
-		var toggleProperty = function toggleProperty(topic, property, value) {
-			var display = (value === true) ? 'block' : 'none';
-			try {
-				classes[topic].line[property].style.display = display;
-			}
-			catch(error) {
-				// console.log("ERROR undefined : ",classes, topic, property, value);
-			}
-		}
-
-		var init = function init() {
-
-			menu = getElemById('menu');
-
-			var elem = document.querySelectorAll('#output .output');
-			var size = elem.length;
-			for (var i = 0; i < size; i++)
-				OutputClass(elem[i]);
-
-			active = classes['element'];
-			toggleDisplay('element');
-
-			ButtonManager.subscribe("before", function(value) {
-				toggleButton('before', value);
-			});
-
-			ButtonManager.subscribe("after", function(value) {
-				toggleButton('after', value);
-			});
-		}
-
-		return {
-			init : init,
-			updateProperty : updateProperty,
-			toggleProperty : toggleProperty
-		}
-
-	})();
-
-
-	/**
-	 * Init Tool
-	 */
-	var init = function init() {
-		ButtonManager.init();
-		OutputManager.init();
-		ColoPicker.init();
-		SliderManager.init();
-		LayerManager.init();
-		PreviewMouseTracking.init("preview");
-		Tool.init();
-	}
-
-	return {
-		init : init
-	}
-
-})();
-
-
-
-
- -
{{ EmbedLiveSample('box-shadow_generator', '100%', '1100px', '') }}
- -

Related Tool: Box Shadow CSS Generator

diff --git "a/files/de/web/css/css_boxmodell/einf\303\274hrung_in_das_css_boxmodell/index.html" "b/files/de/web/css/css_boxmodell/einf\303\274hrung_in_das_css_boxmodell/index.html" deleted file mode 100644 index 1bf796b36b..0000000000 --- "a/files/de/web/css/css_boxmodell/einf\303\274hrung_in_das_css_boxmodell/index.html" +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: Boxmodell -slug: Web/CSS/CSS_Boxmodell/Einführung_in_das_CSS_Boxmodell -tags: - - CSS - - CSS Referenz -translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model ---- -

{{ CSSRef() }}

- -

Übersicht

- -

Eine Box hat in CSS vier Bereiche: margin edge (weiß außen), border edge (grau), padding edge (grün), und content edge (weiß mitte). Das Folgende Diagramm zeigt die unterschiedlichen Höhen und Breiten anhand der Eigenschaften, die Veränderungen an einer CSS Box zulassen:

- -

Thanks to Hannes Kraft.

- -

 

- -

Details

- - - -

Spezifikation

- - - -

Siehe auch

- - diff --git a/files/de/web/css/css_boxmodell/index.html b/files/de/web/css/css_boxmodell/index.html deleted file mode 100644 index 37440c9523..0000000000 --- a/files/de/web/css/css_boxmodell/index.html +++ /dev/null @@ -1,165 +0,0 @@ ---- -title: CSS Boxmodell -slug: Web/CSS/CSS_Boxmodell -tags: - - CSS - - CSS Boxmodell - - CSS Referenz - - Übersicht -translation_of: Web/CSS/CSS_Box_Model ---- -
{{CSSRef}}
- -

CSS Box Model ist ein CSS Modul, das die rechteckigen Boxen einschließlich deren Innen- und Außenabständen definiert, die für Elemente generiert werden und gemäß des visuellen Formatierungsmodells dargestellt werden.

- -

Referenz

- -

Eigenschaften

- -

Den Inhaltsfluss innerhalb einer Box beeinflussende Eigenschaften

- -
-
    -
  • {{cssxref("box-decoration-break")}}
    • -
  • {{cssxref("box-sizing")}}
    • -
  • {{cssxref("overflow")}}
    • -
  • {{cssxref("overflow-x")}}
    • -
  • {{cssxref("overflow-y")}}
    • -
-
- -

Die Größe einer Box beeinflussende Eigenschaften

- -
-
    -
  • {{cssxref("height")}}
    • -
  • {{cssxref("width")}}
    • -
  • {{cssxref("max-height")}}
    • -
  • {{cssxref("max-width")}}
    • -
  • {{cssxref("min-height")}}
    • -
  • {{cssxref("min-width")}}
    • -
-
- -

Außenabstände einer Box beeinflussende Eigenschaften

- -
-
    -
  • {{cssxref("margin")}}
    • -
  • {{cssxref("margin-bottom")}}
    • -
  • {{cssxref("margin-left")}}
    • -
  • {{cssxref("margin-right")}}
    • -
  • {{cssxref("margin-top")}}
    • -
-
- -

Innenabstände einer Box beeinflussende Eigenschaften

- -
-
    -
  • {{cssxref("padding")}}
    • -
  • {{cssxref("padding-bottom")}}
    • -
  • {{cssxref("padding-left")}}
    • -
  • {{cssxref("padding-right")}}
    • -
  • {{cssxref("padding-top")}}
    • -
-
- -

Andere Eigenschaften

- -
-
    -
  • {{cssxref("box-shadow")}}
    • -
  • {{cssxref("visibility")}}
    • -
-
- -

Anleitungen und Werkzeuge

- -
-
Einführung in das CSS Boxmodell
-
Erklärt eines der grundlegenden Konzepte von CSS, das Boxmodell: Beschreibt die Bedeutung von Außen- und Innenabständen als auch der verschiedenen Bereiche einer Box.
-
Zusammenfallen von Außenabständen meistern
-
In mehreren Fällen werden zwei anliegende Außenabstände zu einem zusammengelegt. Dieser Artikel beschreibt, wann dies passiert und wie es gesteuert werden kann.
-
Box-shadow Generator
-
Ein interaktives Werkzeug, das es erlaubt, Schatten visuell zu erstellen und die benötigte Syntax für die {{cssxref("box-shadow")}} Eigenschaft zu generieren.
-
- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName("CSS3 Box")}}{{Spec2("CSS3 Box")}} 
{{SpecName("CSS2.1", "box.html")}}{{Spec2("CSS2.1")}} 
{{SpecName("CSS1")}}{{Spec2("CSS1")}}Ursprüngliche Definition
- -

Browser Kompatibilität

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung1.0{{CompatGeckoDesktop("1")}}3.03.51.0 (85)
-
- -
- - - - - - - - - - - - - - - - - - - -
MerkmalAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung1.0{{CompatGeckoMobile("1")}}6.06.01.0
-
diff --git "a/files/de/web/css/css_boxmodell/zusammenfallen_von_au\303\237enabst\303\244nden_meistern/index.html" "b/files/de/web/css/css_boxmodell/zusammenfallen_von_au\303\237enabst\303\244nden_meistern/index.html" deleted file mode 100644 index edf1fa050c..0000000000 --- "a/files/de/web/css/css_boxmodell/zusammenfallen_von_au\303\237enabst\303\244nden_meistern/index.html" +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: Zusammenfallen von Außenabständen meistern -slug: Web/CSS/CSS_Boxmodell/Zusammenfallen_von_Außenabständen_meistern -tags: - - CSS - - CSS Boxmodell - - Referenz -translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing ---- -
{{CSSRef}}
- -

Obere und untere Außenabstände von Blöcken werden manchmal zu einem einzelnen Außenabstand zusammengefasst (kollabiert), dessen Größe der größte der Außenabstände ist, die in ihm zusammengefasst werden, ein Verhalten bekannt als Außenabstandszusammenfassung (engl. margin collapsing).

- -

Außenabstandszusammenfassung tritt in drei grundlegenden Fällen auf:

- -
-
Angrenzende Geschwisterelemente
-
Die Außenabstände von angrenzenden Geschwisterelementen werden zusammengefasst (außer, wenn des nachfolgende Geschwisterelement nach Seitenumflüssen freigestellt ist). Zum Beispiel: - 
 <p>Der untere Außenabstand dieses Absatzes fällt ...</p>
- <p>...mit dem oberen Außenabstand dieses Absatzes zusammen.</p>
-
-
-
Eltern- und erstes/letztes Kindelement
-
Falls es keinen Rahmen, Innenabstand, Inlineinhalt oder Freilegung gibt, um den {{cssxref("margin-top")}} eines Blocks vom {{cssxref("margin-top")}} seines ersten Kindblocks zu trennen, oder keinen Rahmen, Innenabstand Inlineinhalt, {{cssxref("height")}}, {{cssxref("min-height")}} oder {{cssxref("max-height")}} gibt, um den {{cssxref("margin-bottom")}} des Blocks vom {{cssxref("margin-bottom")}} seines letzten Kindelements zu trennen, dann fallen diese Außenabstände zusammen. Der zusammengefallene Außenabstand verläuft dabei außerhalb des Elternelements.
-
Leere Blöcke
-
Falls es keinen Rahmen, Innenabstand, Inlineinhalt, {{cssxref("height")}} oder {{cssxref("min-height")}} gibt, um den {{cssxref("margin-top")}} des Blocks vom {{cssxref("margin-bottom")}} zu trennen, fallen sein oberer und unterer Außenabstand zusammen.
-
- -

Kompliziertere Außenabstandszusammenfassung (von mehr als zwei Außenabständen) tritt auf, wenn diese Fälle kombiniert werden.

- -

Diese Regeln gelten sogar für Außenabstände, die null sind, sodass ein Außenabstand eines ersten/letzten Kinds sich (gemäß den oben genannten Regeln) am Ende außerhalb seines Elternelements befindet, unabhängig davon, ob der Außenabstand des Elternelements null ist oder nicht.

- -

Falls negative Außenabstände involviert sind, ist die Größe des zusammengefassten Außenabstands die Summe des größten positiven Abstands und dem kleinsten (meist negativen) negativen Abstands.

- -

Außenabstände von umfließenden und absolut positionierten Elementen werden niemals zusammengefasst.

- -

Spezifikationen

- - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}{{Spec2("CSS2.1")}}Ursprüngliche Definition
- -

Siehe auch

- - diff --git a/files/de/web/css/css_color/index.html b/files/de/web/css/css_color/index.html new file mode 100644 index 0000000000..a85506c9de --- /dev/null +++ b/files/de/web/css/css_color/index.html @@ -0,0 +1,118 @@ +--- +title: CSS Farben +slug: Web/CSS/CSS_Colors +tags: + - CSS + - CSS Farben + - Referenz + - Übersicht +translation_of: Web/CSS/CSS_Color +translation_of_original: Web/CSS/CSS_Colors +--- +
{{CSSRef}}
+ +

CSS Colors ist ein CSS Modul, das um Farben, Farbtypen und Transparenz geht.

+ +

Referenz

+ +

Eigenschaften

+ +
+
    +
  • {{cssxref("color")}}
    • +
  • {{cssxref("opacity")}}
    • +
+
+ +

CSS Datentypen

+ +

{{cssxref("<color>")}}

+ +

Anleitungen

+ +

Keine.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS3 Colors')}}{{Spec2('CSS3 Colors')}} 
{{SpecName('CSS2.1', 'colors.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung1.0{{CompatGeckoDesktop("1")}}3.03.51.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Grundlegende Unterstützung1.0{{CompatGeckoMobile("1")}}6.06.01.0
+
+ +

Siehe auch

+ + diff --git a/files/de/web/css/css_colors/color_picker_tool/index.html b/files/de/web/css/css_colors/color_picker_tool/index.html new file mode 100644 index 0000000000..3f822f9f73 --- /dev/null +++ b/files/de/web/css/css_colors/color_picker_tool/index.html @@ -0,0 +1,3225 @@ +--- +title: Farbauswahl-Werkzeug +slug: Web/CSS/CSS_Colors/farbauswahl_werkzeug +tags: + - CSS + - Farbauswahl + - Farbe + - Hilfsmittel + - Pipette + - Werkzeug +translation_of: Web/CSS/CSS_Colors/Color_picker_tool +--- +
+

ColorPicker tool

+ +

HTML Content

+ +
    <div id="container">
+        <div id="palette" class="block">
+            <div id="color-palette"></div>
+            <div id="color-info">
+                <div class="title"> CSS Color </div>
+            </div>
+        </div>
+
+        <div id="picker" class="block">
+            <div class="ui-color-picker" data-topic="picker" data-mode="HSL"></div>
+            <div id="picker-samples" sample-id="master"></div>
+            <div id="controls">
+                <div id="delete">
+                    <div id="trash-can"></div>
+                </div>
+                <div id="void-sample" class="icon"></div>
+            </div>
+        </div>
+
+        <div id="canvas" data-tutorial="drop">
+            <div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index"
+                data-max="20" data-sensivity="10"></div>
+        </div>
+    </div>
+
+
+ +

CSS Content

+ +
/*
+ * COLOR PICKER TOOL
+ */
+
+.ui-color-picker {
+	width: 420px;
+	margin: 0;
+	border: 1px solid #DDD;
+	background-color: #FFF;
+	display: table;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-color-picker .picking-area {
+	width: 198px;
+	height: 198px;
+	margin: 5px;
+	border: 1px solid #DDD;
+	position: relative;
+	float: left;
+	display: table;
+}
+
+.ui-color-picker .picking-area:hover {
+	cursor: default;
+}
+
+/* HSV format - Hue-Saturation-Value(Brightness) */
+.ui-color-picker .picking-area {
+	background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center;
+
+	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-ms-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-o-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+
+	background-color: #F00;
+}
+
+/* HSL format - Hue-Saturation-Lightness */
+.ui-color-picker[data-mode='HSL'] .picking-area {
+	background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background-color: #F00;
+}
+
+.ui-color-picker .picker {
+	width: 10px;
+	height: 10px;
+	border-radius: 50%;
+	border: 1px solid #FFF;
+	position: absolute;
+	top: 45%;
+	left: 45%;
+}
+
+.ui-color-picker .picker:before {
+	width: 8px;
+	height: 8px;
+	content: "";
+	position: absolute;
+	border: 1px solid #999;
+	border-radius: 50%;
+}
+
+.ui-color-picker .hue,
+.ui-color-picker .alpha {
+	width: 198px;
+	height: 28px;
+	margin: 5px;
+	border: 1px solid #FFF;
+	float: left;
+}
+
+.ui-color-picker .hue {
+	background: url("https://mdn.mozillademos.org/files/5701/hue.png") center;
+	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -ms-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -o-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+}
+
+.ui-color-picker .alpha {
+	border: 1px solid #CCC;
+	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+}
+
+.ui-color-picker .alpha-mask {
+	width: 100%;
+	height: 100%;
+	background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png");
+}
+
+.ui-color-picker .slider-picker {
+	width: 2px;
+	height: 100%;
+	border: 1px solid #777;
+	background-color: #FFF;
+	position: relative;
+	top: -1px;
+}
+
+/* input HSV and RGB */
+
+.ui-color-picker .info {
+	width: 200px;
+	margin: 5px;
+	float: left;
+}
+
+.ui-color-picker .info * {
+	float: left;
+}
+
+.ui-color-picker .input {
+	width: 64px;
+	margin: 5px 2px;
+	float: left;
+}
+
+.ui-color-picker .input .name {
+	height: 20px;
+	width: 30px;
+	text-align: center;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+.ui-color-picker .input input {
+	width: 30px;
+	height: 18px;
+	margin: 0;
+	padding: 0;
+	border: 1px solid #DDD;
+	text-align: center;
+	float: right;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+.ui-color-picker .input[data-topic="lightness"] {
+	display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="value"] {
+	display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="lightness"] {
+	display: block;
+}
+
+.ui-color-picker .input[data-topic="alpha"] {
+	margin-top: 10px;
+	width: 93px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] > .name {
+	width: 60px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] > input {
+	float: right;
+}
+
+.ui-color-picker .input[data-topic="hexa"] {
+	width: auto;
+	float: right;
+	margin: 6px 8px 0 0;
+}
+
+.ui-color-picker .input[data-topic="hexa"] > .name {
+	display: none;
+}
+
+.ui-color-picker .input[data-topic="hexa"] > input {
+	width: 90px;
+	height: 24px;
+	padding: 2px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/* Preview color */
+.ui-color-picker .preview {
+	width: 95px;
+	height: 53px;
+	margin: 5px;
+	margin-top: 10px;
+	border: 1px solid #DDD;
+	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+	float: left;
+	position: relative;
+}
+
+.ui-color-picker .preview:before {
+	height: 100%;
+	width: 50%;
+	left: 50%;
+	top: 0;
+	content: "";
+	background: #FFF;
+	position: absolute;
+	z-index: 1;
+}
+
+.ui-color-picker .preview-color {
+	width: 100%;
+	height: 100%;
+	background-color: rgba(255, 0, 0, 0.5);
+	position: absolute;
+	z-index: 1;
+}
+
+.ui-color-picker .switch_mode {
+	width: 10px;
+	height: 20px;
+	position: relative;
+	border-radius: 5px 0 0 5px;
+	border: 1px solid #DDD;
+	background-color: #EEE;
+	left: -12px;
+	top: -1px;
+	z-index: 1;
+	transition: all 0.5s;
+}
+
+.ui-color-picker .switch_mode:hover {
+	background-color: #CCC;
+	cursor: pointer;
+}
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider {
+	height: 20px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider > input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*
+ * COLOR PICKER TOOL
+ */
+
+body {
+	max-width: 1000px;
+	margin: 0 auto;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	box-shadow: 0 0 5px 0 #999;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+
+}
+
+/**
+ * Resize Handle
+ */
+.resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url('https://mdn.mozillademos.org/files/6083/resize.png') center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+[data-resize='both']:hover {
+	cursor: nw-resize !important;
+}
+
+[data-resize='width']:hover {
+	cursor: w-resize !important;
+}
+
+[data-resize='height']:hover {
+	cursor: n-resize !important;
+}
+
+[data-hidden='true'] {
+	display: none;
+}
+
+[data-collapsed='true'] {
+	height: 0 !important;
+}
+
+.block {
+	display: table;
+}
+
+
+/**
+ * 	Container
+ */
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	display: table;
+}
+
+/**
+ * 	Picker Zone
+ */
+
+#picker {
+	padding: 10px;
+	width: 980px;
+}
+
+.ui-color-picker {
+	padding: 3px 5px;
+	float: left;
+	border-color: #FFF;
+}
+
+.ui-color-picker .switch_mode {
+	display: none;
+}
+
+.ui-color-picker .preview-color:hover {
+	cursor: move;
+}
+
+/**
+ * Picker Container
+ */
+
+#picker-samples {
+	width: 375px;
+	height: 114px;
+	max-height: 218px;
+	margin: 0 10px 0 30px;
+	overflow: hidden;
+	position: relative;
+	float: left;
+
+	transition: all 0.2s;
+}
+
+#picker-samples .sample {
+	width: 40px;
+	height: 40px;
+	margin: 5px;
+	border: 1px solid #DDD;
+	position: absolute;
+	float: left;
+	transition: all 0.2s;
+}
+
+#picker-samples .sample:hover {
+	cursor: pointer;
+	border-color: #BBB;
+	transform: scale(1.15);
+	border-radius: 3px;
+}
+
+#picker-samples .sample[data-active='true'] {
+	border-color: #999;
+}
+
+#picker-samples .sample[data-active='true']:after {
+	content: "";
+	position: absolute;
+	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+	width: 100%;
+	height: 12px;
+	top: -12px;
+	z-index: 2;
+}
+
+#picker-samples #add-icon {
+	width: 100%;
+	height: 100%;
+	position: relative;
+	box-shadow: inset 0px 0px 2px 0px #DDD;
+}
+
+#picker-samples #add-icon:hover {
+	cursor: pointer;
+	border-color: #DDD;
+	box-shadow: inset 0px 0px 5px 0px #CCC;
+}
+
+#picker-samples #add-icon:before,
+#picker-samples #add-icon:after {
+	content: "";
+	position: absolute;
+	background-color: #EEE;
+	box-shadow: 0 0 1px 0 #EEE;
+}
+
+#picker-samples #add-icon:before {
+	width: 70%;
+	height: 16%;
+	top: 42%;
+	left: 15%;
+}
+
+#picker-samples #add-icon:after {
+	width: 16%;
+	height: 70%;
+	top: 15%;
+	left: 42%;
+}
+
+#picker-samples #add-icon:hover:before,
+#picker-samples #add-icon:hover:after {
+	background-color: #DDD;
+	box-shadow: 0 0 1px 0 #DDD;
+}
+
+/**
+ * 	Controls
+ */
+
+#controls {
+	width: 110px;
+	padding: 10px;
+	float: right;
+}
+
+#controls #picker-switch {
+	text-align: center;
+	float: left;
+}
+
+#controls .icon {
+	width: 48px;
+	height: 48px;
+	margin: 10px 0;
+	background-repeat: no-repeat;
+	background-position: center;
+	border: 1px solid #DDD;
+	display: table;
+	float: left;
+}
+
+#controls .icon:hover {
+	cursor: pointer;
+}
+
+#controls .picker-icon {
+	background-image: url('https://mdn.mozillademos.org/files/6081/picker.png');
+}
+
+#controls #void-sample {
+	margin-right: 10px;
+	background-image: url('https://mdn.mozillademos.org/files/6087/void.png');
+	background-position: center left;
+}
+
+#controls #void-sample[data-active='true'] {
+	border-color: #CCC;
+	background-position: center right;
+}
+
+#controls .switch {
+	width: 106px;
+	padding: 1px;
+	border: 1px solid #CCC;
+	font-size: 14px;
+	text-align: center;
+	line-height: 24px;
+	overflow: hidden;
+	float: left;
+}
+
+#controls .switch:hover {
+	cursor: pointer;
+}
+
+#controls .switch > * {
+	width: 50%;
+	padding: 2px 0;
+	background-color: #EEE;
+	float: left;
+}
+
+#controls .switch [data-active='true'] {
+	color: #FFF;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-color: #777;
+}
+
+/**
+ * 	Trash Can
+ */
+
+#delete {
+	width: 100%;
+	height: 94px;
+	background-color: #DDD;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+
+	text-align: center;
+	color: #777;
+
+	position: relative;
+	float: right;
+}
+
+#delete #trash-can {
+	width: 80%;
+	height: 80%;
+	border: 2px dashed #FFF;
+	border-radius: 5px;
+	background: url('https://mdn.mozillademos.org/files/6085/trash-can.png') no-repeat center;
+
+	position: absolute;
+	top: 10%;
+	left: 10%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	transition: all 0.2s;
+}
+
+#delete[drag-state='enter'] {
+	background-color: #999;
+}
+
+/**
+ * 	Color Theme
+ */
+
+#color-theme {
+	margin: 0 8px 0 0;
+	border: 1px solid #EEE;
+	display: inline-block;
+	float: right;
+}
+
+#color-theme .box {
+	width: 80px;
+	height: 92px;
+	float: left;
+}
+
+/**
+ * Color info box
+ */
+#color-info {
+	width: 360px;
+	float: left;
+}
+
+#color-info .title {
+	width: 100%;
+	padding: 15px;
+	font-size: 18px;
+	text-align: center;
+	background-image: url('https://mdn.mozillademos.org/files/6071/color-wheel.png');
+	background-repeat:no-repeat;
+	background-position: center left 30%;
+}
+
+#color-info .copy-container {
+	position: absolute;
+	top: -100%;
+}
+
+#color-info .property {
+	min-width: 280px;
+	height: 30px;
+	margin: 10px 0;
+	text-align: center;
+	line-height: 30px;
+}
+
+#color-info .property > * {
+	float: left;
+}
+
+#color-info .property .type {
+	width: 60px;
+	height: 100%;
+	padding: 0 16px 0 0;
+	text-align: right;
+}
+
+#color-info .property .value {
+	width: 200px;
+	height: 100%;
+	padding: 0 10px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 16px;
+	color: #777;
+	text-align: center;
+	background-color: #FFF;
+	border: none;
+}
+
+#color-info .property .value:hover {
+	color: #37994A;
+}
+
+#color-info .property .value:hover + .copy {
+	background-position: center right;
+}
+
+#color-info .property .copy {
+	width: 24px;
+	height: 100%;
+	padding: 0 5px;
+	background-color: #FFF;
+	background-image: url('https://mdn.mozillademos.org/files/6073/copy.png');
+	background-repeat: no-repeat;
+	background-position: center left;
+	border-left: 1px solid #EEE;
+	text-align: right;
+	float: left;
+}
+
+#color-info .property .copy:hover {
+	background-position: center right;
+}
+
+
+/**
+ * 	Color Palette
+ */
+
+#palette {
+	width: 1000px;
+	padding: 10px 0;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+	background-color: #EEE;
+	color: #777;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#color-palette {
+	width: 640px;
+	font-family: Arial, Helvetica, sans-serif;
+	color: #777;
+	float: left;
+}
+
+#color-palette .container {
+	width: 100%;
+	height: 50px;
+	line-height: 50px;
+	overflow: hidden;
+	float: left;
+	transition: all 0.5s;
+}
+
+#color-palette .container > * {
+	float: left;
+}
+
+#color-palette .title {
+	width: 100px;
+	padding: 0 10px;
+	text-align: right;
+	line-height: inherit;
+}
+
+#color-palette .palette {
+	width: 456px;
+	height: 38px;
+	margin: 3px;
+	padding: 3px;
+	display: table;
+	background-color: #FFF;
+}
+
+#color-palette .palette .sample {
+	width: 30px;
+	height: 30px;
+	margin: 3px;
+	position: relative;
+	border: 1px solid #DDD;
+	float: left;
+	transition: all 0.2s;
+}
+
+#color-palette .palette .sample:hover {
+	cursor: pointer;
+	border-color: #BBB;
+	transform: scale(1.15);
+	border-radius: 3px;
+}
+
+#color-palette .controls {
+}
+
+#color-palette .controls > * {
+	float: left;
+}
+
+#color-palette .controls > *:hover {
+	cursor: pointer;
+}
+
+#color-palette .controls .lock {
+	width: 24px;
+	height: 24px;
+	margin: 10px;
+	padding: 3px;
+	background-image: url('https://mdn.mozillademos.org/files/6077/lock.png');
+	background-repeat: no-repeat;
+	background-position: bottom right;
+}
+
+#color-palette .controls .lock:hover {
+	/*background-image: url('images/unlocked-hover.png');*/
+	background-position: bottom left;
+}
+
+#color-palette .controls .lock[locked-state='true'] {
+	/*background-image: url('images/locked.png');*/
+	background-position: top left ;
+}
+
+#color-palette .controls .lock[locked-state='true']:hover {
+	/*background-image: url('images/lock-hover.png');*/
+	background-position: top right;
+}
+
+/**
+ * Canvas
+ */
+
+#canvas {
+	width: 100%;
+	height: 300px;
+	min-height: 250px;
+	border-top: 1px solid #DDD;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+	position: relative;
+	float: left;
+}
+
+#canvas[data-tutorial='drop'] {
+	text-align: center;
+	font-size: 30px;
+	color: #777;
+}
+
+#canvas[data-tutorial='drop']:before {
+	content: "Drop colors here to compare";
+	width: 40%;
+	padding: 30px 9% 70px 11%;
+
+	background-image: url('https://mdn.mozillademos.org/files/6075/drop.png');
+	background-repeat: no-repeat;
+	background-position: left 35px top 60%;
+
+	text-align: right;
+
+	border: 3px dashed rgb(221, 221, 221);
+	border-radius: 15px;
+
+	position: absolute;
+	top: 50px;
+	left: 20%;
+}
+
+#canvas[data-tutorial='drop']:after {
+	content: "adjust, change or modify";
+	width: 40%;
+	font-size: 24px;
+	position: absolute;
+	top: 130px;
+	left: 32%;
+	z-index: 2;
+}
+
+#canvas [data-tutorial='dblclick'] {
+	background-color: #999 !important;
+}
+
+#canvas [data-tutorial='dblclick']:before {
+	content: "double click to activate";
+	width: 80px;
+	color: #FFF;
+	position: absolute;
+	top: 10%;
+	left: 20%;
+	z-index: 2;
+}
+
+#canvas .sample {
+	width: 100px;
+	height: 100px;
+	min-width: 20px;
+	min-height: 20px;
+	position: absolute;
+	border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+#canvas .sample:hover {
+	cursor: move;
+}
+
+#canvas .sample[data-active='true']:after {
+	content: "";
+	position: absolute;
+	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+	width: 100%;
+	height: 12px;
+	top: -12px;
+	z-index: 2;
+}
+
+#canvas .sample:hover > * {
+	cursor: pointer;
+	display: block !important;
+}
+
+#canvas .sample .resize-handle {
+	display: none;
+}
+
+#canvas .sample .pick {
+	width: 10px;
+	height: 10px;
+	margin: 5px;
+	background: url('https://mdn.mozillademos.org/files/6079/pick.png') center no-repeat;
+	position: absolute;
+	top: 0;
+	left: 0;
+	display: none;
+}
+
+#canvas .sample .delete {
+	width: 10px;
+	height: 10px;
+	margin: 5px;
+	background: url('https://mdn.mozillademos.org/files/6069/close.png') center no-repeat;
+	position: absolute;
+	top: 0;
+	right: 0;
+	display: none;
+}
+
+
+/**
+ * Canvas controls
+ */
+
+#canvas .toggle-bg {
+	width: 16px;
+	height: 16px;
+	margin: 5px;
+	background: url("images/canvas-controls.png") center left no-repeat;
+	position: absolute;
+	top: 0;
+	right: 0;
+}
+
+#canvas .toggle-bg:hover {
+	cursor: pointer;
+}
+
+#canvas[data-bg='true'] {
+	background: none;
+}
+
+#canvas[data-bg='true'] .toggle-bg {
+	background: url('https://mdn.mozillademos.org/files/6067/canvas-controls.png') center right no-repeat;
+}
+
+#zindex {
+	height: 20px;
+	margin: 5px;
+	font-size: 16px;
+	position: absolute;
+	opacity: 0;
+	top: -10000px;
+	left: 0;
+	color: #777;
+	float: left;
+	transition: opacity 1s;
+}
+
+#zindex input {
+	border: 1px solid #DDD;
+	font-size: 16px;
+	color: #777;
+}
+
+#zindex .ui-input-slider-info {
+	width: 60px;
+}
+
+#zindex[data-active='true'] {
+	top: 0;
+	opacity: 1;
+}
+
+
+ +

JavaScript Content

+ +
'use strict';
+
+var UIColorPicker = (function UIColorPicker() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	var subscribers = [];
+	var pickers = [];
+
+	/**
+	 * RGBA Color class
+	 *
+	 * HSV/HSB and HSL (hue, saturation, value / brightness, lightness)
+	 * @param hue			0-360
+	 * @param saturation	0-100
+	 * @param value 		0-100
+	 * @param lightness		0-100
+	 */
+
+	function Color(color) {
+
+		if(color instanceof Color === true) {
+			this.copy(color);
+			return;
+		}
+
+		this.r = 0;
+		this.g = 0;
+		this.b = 0;
+		this.a = 1;
+		this.hue = 0;
+		this.saturation = 0;
+		this.value = 0;
+		this.lightness = 0;
+		this.format = 'HSV';
+	}
+
+	function RGBColor(r, g, b) {
+		var color = new Color();
+		color.setRGBA(r, g, b, 1);
+		return color;
+	}
+
+	function RGBAColor(r, g, b, a) {
+		var color = new Color();
+		color.setRGBA(r, g, b, a);
+		return color;
+	}
+
+	function HSVColor(h, s, v) {
+		var color = new Color();
+		color.setHSV(h, s, v);
+		return color;
+	}
+
+	function HSVAColor(h, s, v, a) {
+		var color = new Color();
+		color.setHSV(h, s, v);
+		color.a = a;
+		return color;
+	}
+
+	function HSLColor(h, s, l) {
+		var color = new Color();
+		color.setHSL(h, s, l);
+		return color;
+	}
+
+	function HSLAColor(h, s, l, a) {
+		var color = new Color();
+		color.setHSL(h, s, l);
+		color.a = a;
+		return color;
+	}
+
+	Color.prototype.copy = function copy(obj) {
+		if(obj instanceof Color !== true) {
+			console.log('Typeof parameter not Color');
+			return;
+		}
+
+		this.r = obj.r;
+		this.g = obj.g;
+		this.b = obj.b;
+		this.a = obj.a;
+		this.hue = obj.hue;
+		this.saturation = obj.saturation;
+		this.value = obj.value;
+		this.format = '' + obj.format;
+		this.lightness = obj.lightness;
+	};
+
+	Color.prototype.setFormat = function setFormat(format) {
+		if (format === 'HSV')
+			this.format = 'HSV';
+		if (format === 'HSL')
+			this.format = 'HSL';
+	};
+
+	/*========== Methods to set Color Properties ==========*/
+
+	Color.prototype.isValidRGBValue = function isValidRGBValue(value) {
+		return (typeof(value) === 'number' && isNaN(value) === false &&
+			value >= 0 && value <= 255);
+	};
+
+	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
+		if (this.isValidRGBValue(red) === false ||
+			this.isValidRGBValue(green) === false ||
+			this.isValidRGBValue(blue) === false)
+			return;
+
+			this.r = red | 0;
+			this.g = green | 0;
+			this.b = blue | 0;
+
+		if (this.isValidRGBValue(alpha) === true)
+			this.a = alpha | 0;
+	};
+
+	Color.prototype.setByName = function setByName(name, value) {
+		if (name === 'r' || name === 'g' || name === 'b') {
+			if(this.isValidRGBValue(value) === false)
+				return;
+
+			this[name] = value;
+			this.updateHSX();
+		}
+	};
+
+	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.value = value;
+		this.HSVtoRGB();
+	};
+
+	Color.prototype.setHSL = function setHSL(hue, saturation, lightness) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.lightness = lightness;
+		this.HSLtoRGB();
+	};
+
+	Color.prototype.setHue = function setHue(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 359)
+			return;
+		this.hue = value;
+		this.updateRGB();
+	};
+
+	Color.prototype.setSaturation = function setSaturation(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 100)
+			return;
+		this.saturation = value;
+		this.updateRGB();
+	};
+
+	Color.prototype.setValue = function setValue(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 100)
+			return;
+		this.value = value;
+		this.HSVtoRGB();
+	};
+
+	Color.prototype.setLightness = function setLightness(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 100)
+			return;
+		this.lightness = value;
+		this.HSLtoRGB();
+	};
+
+	Color.prototype.setHexa = function setHexa(value) {
+		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value);
+
+		if (valid !== true)
+			return;
+
+		if (value[0] === '#')
+			value = value.slice(1, value.length);
+
+		if (value.length === 3)
+			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,'$1$1$2$2$3$3');
+
+		this.r = parseInt(value.substr(0, 2), 16);
+		this.g = parseInt(value.substr(2, 2), 16);
+		this.b = parseInt(value.substr(4, 2), 16);
+
+		this.alpha	= 1;
+		this.RGBtoHSV();
+	};
+
+	/*========== Conversion Methods ==========*/
+
+	Color.prototype.convertToHSL = function convertToHSL() {
+		if (this.format === 'HSL')
+			return;
+
+		this.setFormat('HSL');
+		this.RGBtoHSL();
+	};
+
+	Color.prototype.convertToHSV = function convertToHSV() {
+		if (this.format === 'HSV')
+			return;
+
+		this.setFormat('HSV');
+		this.RGBtoHSV();
+	};
+
+	/*========== Update Methods ==========*/
+
+	Color.prototype.updateRGB = function updateRGB() {
+		if (this.format === 'HSV') {
+			this.HSVtoRGB();
+			return;
+		}
+
+		if (this.format === 'HSL') {
+			this.HSLtoRGB();
+			return;
+		}
+	};
+
+	Color.prototype.updateHSX = function updateHSX() {
+		if (this.format === 'HSV') {
+			this.RGBtoHSV();
+			return;
+		}
+
+		if (this.format === 'HSL') {
+			this.RGBtoHSL();
+			return;
+		}
+	};
+
+	Color.prototype.HSVtoRGB = function HSVtoRGB() {
+		var sat = this.saturation / 100;
+		var value = this.value / 100;
+		var C = sat * value;
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = value - C;
+		var precision = 255;
+
+		C = (C + m) * precision | 0;
+		X = (X + m) * precision | 0;
+		m = m * precision | 0;
+
+		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
+		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
+		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
+		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
+		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
+		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
+	};
+
+	Color.prototype.HSLtoRGB = function HSLtoRGB() {
+		var sat = this.saturation / 100;
+		var light = this.lightness / 100;
+		var C = sat * (1 - Math.abs(2 * light - 1));
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = light - C/2;
+		var precision = 255;
+
+		C = (C + m) * precision | 0;
+		X = (X + m) * precision | 0;
+		m = m * precision | 0;
+
+		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
+		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
+		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
+		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
+		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
+		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
+	};
+
+	Color.prototype.RGBtoHSV = function RGBtoHSV() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / cmax;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue < 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.value = (cmax * 100) | 0;
+	};
+
+	Color.prototype.RGBtoHSL = function RGBtoHSL() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+		var lightness = (cmax + cmin) / 2;
+		var X = (1 - Math.abs(2 * lightness - 1));
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / X;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue < 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.lightness = (lightness * 100) | 0;
+	};
+
+	/*========== Get Methods ==========*/
+
+	Color.prototype.getHexa = function getHexa() {
+		var r = this.r.toString(16);
+		var g = this.g.toString(16);
+		var b = this.b.toString(16);
+		if (this.r < 16) r = '0' + r;
+		if (this.g < 16) g = '0' + g;
+		if (this.b < 16) b = '0' + b;
+		var value = '#' + r + g + b;
+		return value.toUpperCase();
+	};
+
+	Color.prototype.getRGBA = function getRGBA() {
+
+		var rgb = '(' + this.r + ', ' + this.g + ', ' + this.b;
+		var a = '';
+		var v = '';
+		var x = parseFloat(this.a);
+		if (x !== 1) {
+			a = 'a';
+			v = ', ' + x;
+		}
+
+		var value = 'rgb' + a + rgb + v + ')';
+		return value;
+	};
+
+	Color.prototype.getHSLA = function getHSLA() {
+		if (this.format === 'HSV') {
+			var color = new Color(this);
+			color.setFormat('HSL');
+			color.updateHSX();
+			return color.getHSLA();
+		}
+
+		var a = '';
+		var v = '';
+		var hsl = '(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness +'%';
+		var x = parseFloat(this.a);
+		if (x !== 1) {
+			a = 'a';
+			v = ', ' + x;
+		}
+
+		var value = 'hsl' + a + hsl + v + ')';
+		return value;
+	};
+
+	Color.prototype.getColor = function getColor() {
+		if (this.a | 0 === 1)
+			return this.getHexa();
+		return this.getRGBA();
+	};
+
+	/*=======================================================================*/
+	/*=======================================================================*/
+
+	/*========== Capture Mouse Movement ==========*/
+
+	var setMouseTracking = function setMouseTracking(elem, callback) {
+		elem.addEventListener('mousedown', function(e) {
+			callback(e);
+			document.addEventListener('mousemove', callback);
+		});
+
+		document.addEventListener('mouseup', function(e) {
+			document.removeEventListener('mousemove', callback);
+		});
+	};
+
+	/*====================*/
+	// Color Picker Class
+	/*====================*/
+
+	function ColorPicker(node) {
+		this.color = new Color();
+		this.node = node;
+		this.subscribers = [];
+
+		var type = this.node.getAttribute('data-mode');
+		var topic = this.node.getAttribute('data-topic');
+
+		this.topic = topic;
+		this.picker_mode = (type === 'HSL') ? 'HSL' : 'HSV';
+		this.color.setFormat(this.picker_mode);
+
+		this.createPickingArea();
+		this.createHueArea();
+
+		this.newInputComponent('H', 'hue', this.inputChangeHue.bind(this));
+		this.newInputComponent('S', 'saturation', this.inputChangeSaturation.bind(this));
+		this.newInputComponent('V', 'value', this.inputChangeValue.bind(this));
+		this.newInputComponent('L', 'lightness', this.inputChangeLightness.bind(this));
+
+		this.createAlphaArea();
+
+		this.newInputComponent('R', 'red', this.inputChangeRed.bind(this));
+		this.newInputComponent('G', 'green', this.inputChangeGreen.bind(this));
+		this.newInputComponent('B', 'blue', this.inputChangeBlue.bind(this));
+
+		this.createPreviewBox();
+		this.createChangeModeButton();
+
+		this.newInputComponent('alpha', 'alpha', this.inputChangeAlpha.bind(this));
+		this.newInputComponent('hexa', 'hexa', this.inputChangeHexa.bind(this));
+
+		this.setColor(this.color);
+		pickers[topic] = this;
+	}
+
+	/*************************************************************************/
+	//				Function for generating the color-picker
+	/*************************************************************************/
+
+	ColorPicker.prototype.createPickingArea = function createPickingArea() {
+		var area = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'picking-area';
+		picker.className = 'picker';
+
+		this.picking_area = area;
+		this.color_picker = picker;
+		setMouseTracking(area, this.updateColor.bind(this));
+
+		area.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createHueArea = function createHueArea() {
+		var area = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'hue';
+		picker.className ='slider-picker';
+
+		this.hue_area = area;
+		this.hue_picker = picker;
+		setMouseTracking(area, this.updateHueSlider.bind(this));
+
+		area.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createAlphaArea = function createAlphaArea() {
+		var area = document.createElement('div');
+		var mask = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'alpha';
+		mask.className = 'alpha-mask';
+		picker.className = 'slider-picker';
+
+		this.alpha_area = area;
+		this.alpha_mask = mask;
+		this.alpha_picker = picker;
+		setMouseTracking(area, this.updateAlphaSlider.bind(this));
+
+		area.appendChild(mask);
+		mask.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createPreviewBox = function createPreviewBox(e) {
+		var preview_box = document.createElement('div');
+		var preview_color = document.createElement('div');
+
+		preview_box.className = 'preview';
+		preview_color.className = 'preview-color';
+
+		this.preview_color = preview_color;
+
+		preview_box.appendChild(preview_color);
+		this.node.appendChild(preview_box);
+	};
+
+	ColorPicker.prototype.newInputComponent = function newInputComponent(title, topic, onChangeFunc) {
+		var wrapper = document.createElement('div');
+		var input = document.createElement('input');
+		var info = document.createElement('span');
+
+		wrapper.className = 'input';
+		wrapper.setAttribute('data-topic', topic);
+		info.textContent = title;
+		info.className = 'name';
+		input.setAttribute('type', 'text');
+
+		wrapper.appendChild(info);
+		wrapper.appendChild(input);
+		this.node.appendChild(wrapper);
+
+		input.addEventListener('change', onChangeFunc);
+		input.addEventListener('click', function() {
+			this.select();
+		});
+
+		this.subscribe(topic, function(value) {
+			input.value = value;
+		});
+	};
+
+	ColorPicker.prototype.createChangeModeButton = function createChangeModeButton() {
+
+		var button = document.createElement('div');
+		button.className = 'switch_mode';
+		button.addEventListener('click', function() {
+			if (this.picker_mode === 'HSV')
+				this.setPickerMode('HSL');
+			else
+				this.setPickerMode('HSV');
+
+		}.bind(this));
+
+		this.node.appendChild(button);
+	};
+
+	/*************************************************************************/
+	//					Updates properties of UI elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.updateColor = function updateColor(e) {
+		var x = e.pageX - this.picking_area.offsetLeft;
+		var y = e.pageY - this.picking_area.offsetTop;
+		var picker_offset = 5;
+
+		// width and height should be the same
+		var size = this.picking_area.clientWidth;
+
+		if (x > size) x = size;
+		if (y > size) y = size;
+		if (x < 0) x = 0;
+		if (y < 0) y = 0;
+
+		var value = 100 - (y * 100 / size) | 0;
+		var saturation = x * 100 / size | 0;
+
+		if (this.picker_mode === 'HSV')
+			this.color.setHSV(this.color.hue, saturation, value);
+		if (this.picker_mode === 'HSL')
+			this.color.setHSL(this.color.hue, saturation, value);
+
+		this.color_picker.style.left = x - picker_offset + 'px';
+		this.color_picker.style.top = y - picker_offset + 'px';
+
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('value', value);
+		this.notify('lightness', value);
+		this.notify('saturation', saturation);
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.updateHueSlider = function updateHueSlider(e) {
+		var x = e.pageX - this.hue_area.offsetLeft;
+		var width = this.hue_area.clientWidth;
+
+		if (x < 0) x = 0;
+		if (x > width) x = width;
+
+		// TODO 360 => 359
+		var hue = ((359 * x) / width) | 0;
+		// if (hue === 360) hue = 359;
+
+		this.updateSliderPosition(this.hue_picker, x);
+		this.setHue(hue);
+	};
+
+	ColorPicker.prototype.updateAlphaSlider = function updateAlphaSlider(e) {
+		var x = e.pageX - this.alpha_area.offsetLeft;
+		var width = this.alpha_area.clientWidth;
+
+		if (x < 0) x = 0;
+		if (x > width) x = width;
+
+		this.color.a = (x / width).toFixed(2);
+
+		this.updateSliderPosition(this.alpha_picker, x);
+		this.updatePreviewColor();
+
+		this.notify('alpha', this.color.a);
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.setHue = function setHue(value) {
+		this.color.setHue(value);
+
+		this.updatePickerBackground();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+		this.notify('hue', this.color.hue);
+
+		notify(this.topic, this.color);
+	};
+
+	// Updates when one of Saturation/Value/Lightness changes
+	ColorPicker.prototype.updateSLV = function updateSLV() {
+		this.updatePickerPosition();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+
+		notify(this.topic, this.color);
+	};
+
+	/*************************************************************************/
+	//				Update positions of various UI elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.updatePickerPosition = function updatePickerPosition() {
+		var size = this.picking_area.clientWidth;
+		var value = 0;
+		var offset = 5;
+
+		if (this.picker_mode === 'HSV')
+			value = this.color.value;
+		if (this.picker_mode === 'HSL')
+			value = this.color.lightness;
+
+		var x = (this.color.saturation * size / 100) | 0;
+		var y = size - (value * size / 100) | 0;
+
+		this.color_picker.style.left = x - offset + 'px';
+		this.color_picker.style.top = y - offset + 'px';
+	};
+
+	ColorPicker.prototype.updateSliderPosition = function updateSliderPosition(elem, pos) {
+		elem.style.left = Math.max(pos - 3, -2) + 'px';
+	};
+
+	ColorPicker.prototype.updateHuePicker = function updateHuePicker() {
+		var size = this.hue_area.clientWidth;
+		var offset = 1;
+		var pos = (this.color.hue * size / 360 ) | 0;
+		this.hue_picker.style.left = pos - offset + 'px';
+	};
+
+	ColorPicker.prototype.updateAlphaPicker = function updateAlphaPicker() {
+		var size = this.alpha_area.clientWidth;
+		var offset = 1;
+		var pos = (this.color.a * size) | 0;
+		this.alpha_picker.style.left = pos - offset + 'px';
+	};
+
+	/*************************************************************************/
+	//						Update background colors
+	/*************************************************************************/
+
+	ColorPicker.prototype.updatePickerBackground = function updatePickerBackground() {
+		var nc = new Color(this.color);
+		nc.setHSV(nc.hue, 100, 100);
+		this.picking_area.style.backgroundColor = nc.getHexa();
+	};
+
+	ColorPicker.prototype.updateAlphaGradient = function updateAlphaGradient() {
+		this.alpha_mask.style.backgroundColor = this.color.getHexa();
+	};
+
+	ColorPicker.prototype.updatePreviewColor = function updatePreviewColor() {
+		this.preview_color.style.backgroundColor = this.color.getColor();
+	};
+
+	/*************************************************************************/
+	//						Update input elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.inputChangeHue = function inputChangeHue(e) {
+		var value = parseInt(e.target.value);
+		this.setHue(value);
+		this.updateHuePicker();
+	};
+
+	ColorPicker.prototype.inputChangeSaturation = function inputChangeSaturation(e) {
+		var value = parseInt(e.target.value);
+		this.color.setSaturation(value);
+		e.target.value = this.color.saturation;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeValue = function inputChangeValue(e) {
+		var value = parseInt(e.target.value);
+		this.color.setValue(value);
+		e.target.value = this.color.value;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeLightness = function inputChangeLightness(e) {
+		var value = parseInt(e.target.value);
+		this.color.setLightness(value);
+		e.target.value = this.color.lightness;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeRed = function inputChangeRed(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('r', value);
+		e.target.value = this.color.r;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeGreen = function inputChangeGreen(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('g', value);
+		e.target.value = this.color.g;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeBlue = function inputChangeBlue(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('b', value);
+		e.target.value = this.color.b;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeAlpha = function inputChangeAlpha(e) {
+		var value = parseFloat(e.target.value);
+
+		if (typeof value === 'number' && isNaN(value) === false &&
+			value >= 0 && value <= 1)
+			this.color.a = value.toFixed(2);
+
+		e.target.value = this.color.a;
+		this.updateAlphaPicker();
+	};
+
+	ColorPicker.prototype.inputChangeHexa = function inputChangeHexa(e) {
+		var value = e.target.value;
+		this.color.setHexa(value);
+		this.setColor(this.color);
+	};
+
+	/*************************************************************************/
+	//							Internal Pub/Sub
+	/*************************************************************************/
+
+	ColorPicker.prototype.subscribe = function subscribe(topic, callback) {
+		this.subscribers[topic] = callback;
+	};
+
+	ColorPicker.prototype.notify = function notify(topic, value) {
+		if (this.subscribers[topic])
+			this.subscribers[topic](value);
+	};
+
+	/*************************************************************************/
+	//							Set Picker Properties
+	/*************************************************************************/
+
+	ColorPicker.prototype.setColor = function setColor(color) {
+		if(color instanceof Color !== true) {
+			console.log('Typeof parameter not Color');
+			return;
+		}
+
+		if (color.format !== this.picker_mode) {
+			color.setFormat(this.picker_mode);
+			color.updateHSX();
+		}
+
+		this.color.copy(color);
+		this.updateHuePicker();
+		this.updatePickerPosition();
+		this.updatePickerBackground();
+		this.updateAlphaPicker();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+
+		this.notify('hue', this.color.hue);
+		this.notify('saturation', this.color.saturation);
+		this.notify('value', this.color.value);
+		this.notify('lightness', this.color.lightness);
+
+		this.notify('alpha', this.color.a);
+		this.notify('hexa', this.color.getHexa());
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.setPickerMode = function setPickerMode(mode) {
+		if (mode !== 'HSV' && mode !== 'HSL')
+			return;
+
+		this.picker_mode = mode;
+		this.node.setAttribute('data-mode', this.picker_mode);
+		this.setColor(this.color);
+	};
+
+	/*************************************************************************/
+	//								UNUSED
+	/*************************************************************************/
+
+	var setPickerMode = function setPickerMode(topic, mode) {
+		if (pickers[topic])
+			pickers[topic].setPickerMode(mode);
+	};
+
+	var setColor = function setColor(topic, color) {
+		if (pickers[topic])
+			pickers[topic].setColor(color);
+	};
+
+	var getColor = function getColor(topic) {
+		if (pickers[topic])
+			return new Color(pickers[topic].color);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(callback) {
+		subscribers.indexOf(callback);
+		subscribers.splice(index, 1);
+	};
+
+	var notify = function notify(topic, value) {
+		if (subscribers[topic] === undefined || subscribers[topic].length === 0)
+			return;
+
+		var color = new Color(value);
+		for (var i in subscribers[topic])
+			subscribers[topic][i](color);
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-color-picker');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new ColorPicker(elem[i]);
+	};
+
+	return {
+		init : init,
+		Color : Color,
+		RGBColor : RGBColor,
+		RGBAColor : RGBAColor,
+		HSVColor : HSVColor,
+		HSVAColor : HSVAColor,
+		HSLColor : HSLColor,
+		HSLAColor : HSLAColor,
+		setColor : setColor,
+		getColor : getColor,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPickerMode : setPickerMode
+	};
+
+})();
+
+
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.style.width = 50 + obj.precision * 10 + 'px';
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseFloat(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		return input;
+	};
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+
+			document.addEventListener("mouseup", slideEnd);
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		var slideEnd = function slideEnd(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		};
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		};
+
+		return slider;
+	};
+
+	var InputSlider = function(node) {
+		var min		= parseFloat(node.getAttribute('data-min'));
+		var max		= parseFloat(node.getAttribute('data-max'));
+		var step	= parseFloat(node.getAttribute('data-step'));
+		var value	= parseFloat(node.getAttribute('data-value'));
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+		var precision = node.getAttribute('data-precision') | 0;
+
+		this.min = isNaN(min) ? 0 : min;
+		this.max = isNaN(max) ? 100 : max;
+		this.precision = precision >= 0 ? precision : 0;
+		this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit === null ? '' : unit;
+		this.sensivity = sensivity > 0 ? sensivity : 5;
+		value = isNaN(value) ? this.min : value;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	};
+
+	InputSlider.prototype.setInputValue = function setInputValue() {
+		this.input.value = this.value.toFixed(this.precision) + this.unit;
+	};
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = parseFloat(value.toFixed(slider.precision));
+
+		if (value > slider.max) value = slider.max;
+		if (value < slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		slider.setInputValue();
+
+		if (send_notify === false)
+			return;
+
+		notify.call(slider);
+	};
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	};
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	};
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	};
+
+	var setStep = function setStep(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.step = parseFloat(value);
+		setValue(topic, slider.value);
+	};
+
+	var setPrecision = function setPrecision(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+		slider.precision = value;
+
+		var step = parseFloat(slider.step.toFixed(value));
+		if (step === 0)
+			slider.step = 1 / Math.pow(10, value);
+
+		setValue(topic, slider.value);
+	};
+
+	var setSensivity = function setSensivity(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+
+		slider.sensivity = value > 0 ? value : 5;
+	};
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	};
+
+	var getPrecision =  function getPrecision(topic) {
+		return sliders[topic].precision;
+	};
+
+	var getStep =  function getStep(topic) {
+		return sliders[topic].step;
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var createSlider = function createSlider(topic, label) {
+		var slider = document.createElement('div');
+		slider.className = 'ui-input-slider';
+		slider.setAttribute('data-topic', topic);
+
+		if (label !== undefined)
+			slider.setAttribute('data-info', label);
+
+		new InputSlider(slider);
+		return slider;
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new InputSlider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		setStep : setStep,
+		getNode : getNode,
+		getStep : getStep,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPrecision : setPrecision,
+		setSensivity : setSensivity,
+		getPrecision : getPrecision,
+		createSlider : createSlider,
+	};
+
+})();
+
+
+'use strict';
+
+window.addEventListener("load", function() {
+	ColorPickerTool.init();
+});
+
+var ColorPickerTool = (function ColorPickerTool() {
+
+	/*========== Get DOM Element By ID ==========*/
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	function allowDropEvent(e) {
+		e.preventDefault();
+	}
+
+	/*========== Make an element resizable relative to it's parent ==========*/
+
+	var UIComponent = (function UIComponent() {
+
+		function makeResizable(elem, axis) {
+			var valueX = 0;
+			var valueY = 0;
+			var action = 0;
+
+			var resizeStart = function resizeStart(e) {
+				e.stopPropagation();
+				e.preventDefault();
+				if (e.button !== 0)
+					return;
+
+				valueX = e.clientX - elem.clientWidth;
+				valueY = e.clientY - elem.clientHeight;
+
+				document.body.setAttribute('data-resize', axis);
+				document.addEventListener('mousemove', mouseMove);
+				document.addEventListener('mouseup', resizeEnd);
+			};
+
+			var mouseMove = function mouseMove(e) {
+				if (action >= 0)
+					elem.style.width = e.clientX - valueX + 'px';
+				if (action <= 0)
+					elem.style.height = e.clientY - valueY + 'px';
+			};
+
+			var resizeEnd = function resizeEnd(e) {
+				if (e.button !== 0)
+					return;
+
+				document.body.removeAttribute('data-resize', axis);
+				document.removeEventListener('mousemove', mouseMove);
+				document.removeEventListener('mouseup', resizeEnd);
+			};
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			if (axis === 'width') action = 1;
+			else if (axis === 'height') action = -1;
+			else axis = 'both';
+
+			handle.className = 'resize-handle';
+			handle.setAttribute('data-resize', axis);
+			handle.addEventListener('mousedown', resizeStart);
+			elem.appendChild(handle);
+		};
+
+		/*========== Make an element draggable relative to it's parent ==========*/
+
+		var makeDraggable = function makeDraggable(elem, endFunction) {
+
+			var offsetTop;
+			var offsetLeft;
+
+			elem.setAttribute('data-draggable', 'true');
+
+			var dragStart = function dragStart(e) {
+				e.preventDefault();
+				e.stopPropagation();
+
+				if (e.target.getAttribute('data-draggable') !== 'true' ||
+					e.target !== elem || e.button !== 0)
+					return;
+
+				offsetLeft = e.clientX - elem.offsetLeft;
+				offsetTop = e.clientY - elem.offsetTop;
+
+				document.addEventListener('mousemove', mouseDrag);
+				document.addEventListener('mouseup', dragEnd);
+			};
+
+			var dragEnd = function dragEnd(e) {
+				if (e.button !== 0)
+					return;
+
+				document.removeEventListener('mousemove', mouseDrag);
+				document.removeEventListener('mouseup', dragEnd);
+			};
+
+			var mouseDrag = function mouseDrag(e) {
+				elem.style.left = e.clientX - offsetLeft + 'px';
+				elem.style.top = e.clientY - offsetTop + 'px';
+			};
+
+			elem.addEventListener('mousedown', dragStart, false);
+		};
+
+		return {
+			makeResizable : makeResizable,
+			makeDraggable : makeDraggable
+		};
+
+	})();
+
+	/*========== Color Class ==========*/
+
+	var Color = UIColorPicker.Color;
+	var HSLColor = UIColorPicker.HSLColor;
+
+	/**
+	 * ColorPalette
+	 */
+	var ColorPalette = (function ColorPalette() {
+
+		var samples = [];
+		var color_palette;
+		var complementary;
+
+		var hideNode = function(node) {
+			node.setAttribute('data-hidden', 'true');
+		};
+
+		var ColorSample = function ColorSample(id) {
+			var node = document.createElement('div');
+			node.className = 'sample';
+
+			this.uid = samples.length;
+			this.node = node;
+			this.color = new Color();
+
+			node.setAttribute('sample-id', this.uid);
+			node.setAttribute('draggable', 'true');
+			node.addEventListener('dragstart', this.dragStart.bind(this));
+			node.addEventListener('click', this.pickColor.bind(this));
+
+			samples.push(this);
+		};
+
+		ColorSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		ColorSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateHue = function updateHue(color, degree, steps) {
+			this.color.copy(color);
+			var hue = (steps * degree + this.color.hue) % 360;
+			if (hue < 0) hue += 360;
+			this.color.setHue(hue);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateSaturation = function updateSaturation(color, value, steps) {
+			var saturation = color.saturation + value * steps;
+			if (saturation <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setSaturation(saturation);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateLightness = function updateLightness(color, value, steps) {
+			var lightness = color.lightness + value * steps;
+			if (lightness <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setLightness(lightness);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateBrightness = function updateBrightness(color, value, steps) {
+			var brightness = color.value + value * steps;
+			if (brightness <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setValue(brightness);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateAlpha = function updateAlpha(color, value, steps) {
+			var alpha = parseFloat(color.a) + value * steps;
+			if (alpha <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.a = parseFloat(alpha.toFixed(2));
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.pickColor = function pickColor() {
+			UIColorPicker.setColor('picker', this.color);
+		};
+
+		ColorSample.prototype.dragStart = function dragStart(e) {
+			e.dataTransfer.setData('sampleID', this.uid);
+			e.dataTransfer.setData('location', 'palette-samples');
+		};
+
+		var Palette = function Palette(text, size) {
+			this.samples = [];
+			this.locked = false;
+
+			var palette = document.createElement('div');
+			var title = document.createElement('div');
+			var controls = document.createElement('div');
+			var container = document.createElement('div');
+			var lock = document.createElement('div');
+
+			container.className = 'container';
+			title.className = 'title';
+			palette.className = 'palette';
+			controls.className = 'controls';
+			lock.className = 'lock';
+			title.textContent = text;
+
+			controls.appendChild(lock);
+			container.appendChild(title);
+			container.appendChild(controls);
+			container.appendChild(palette);
+
+			lock.addEventListener('click', function () {
+				this.locked = !this.locked;
+				lock.setAttribute('locked-state', this.locked);
+			}.bind(this));
+
+			for(var i = 0; i < size; i++) {
+				var sample = new ColorSample();
+				this.samples.push(sample);
+				palette.appendChild(sample.node);
+			}
+
+			this.container = container;
+			this.title = title;
+		};
+
+		var createHuePalette = function createHuePalette() {
+			var palette = new Palette('Hue', 12);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i < 12; i++) {
+					palette.samples[i].updateHue(color, 30, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var createSaturationPalette = function createSaturationPalette() {
+			var palette = new Palette('Saturation', 11);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i < 11; i++) {
+					palette.samples[i].updateSaturation(color, -10, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		/* Brightness or Lightness - depends on the picker mode */
+		var createVLPalette = function createSaturationPalette() {
+			var palette = new Palette('Lightness', 11);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				if(color.format === 'HSL') {
+					palette.title.textContent = 'Lightness';
+					for(var i = 0; i < 11; i++)
+						palette.samples[i].updateLightness(color, -10, i);
+				}
+				else {
+					palette.title.textContent = 'Value';
+					for(var i = 0; i < 11; i++)
+						palette.samples[i].updateBrightness(color, -10, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var isBlankPalette = function isBlankPalette(container, value) {
+			if (value === 0) {
+				container.setAttribute('data-collapsed', 'true');
+				return true;
+			}
+
+			container.removeAttribute('data-collapsed');
+			return false;
+		};
+
+		var createAlphaPalette = function createAlphaPalette() {
+			var palette = new Palette('Alpha', 10);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i < 10; i++) {
+					palette.samples[i].updateAlpha(color, -0.1, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var getSampleColor = function getSampleColor(id) {
+			if (samples[id] !== undefined && samples[id]!== null)
+				return new Color(samples[id].color);
+		};
+
+		var init = function init() {
+			color_palette = getElemById('color-palette');
+
+			createHuePalette();
+			createSaturationPalette();
+			createVLPalette();
+			createAlphaPalette();
+
+		};
+
+		return {
+			init : init,
+			getSampleColor : getSampleColor
+		};
+
+	})();
+
+	/**
+	 * ColorInfo
+	 */
+	var ColorInfo = (function ColorInfo() {
+
+		var info_box;
+		var select;
+		var RGBA;
+		var HEXA;
+		var HSLA;
+
+		var updateInfo = function updateInfo(color) {
+			if (color.a | 0 === 1) {
+				RGBA.info.textContent = 'RGB';
+				HSLA.info.textContent = 'HSL';
+			}
+			else {
+				RGBA.info.textContent = 'RGBA';
+				HSLA.info.textContent = 'HSLA';
+			}
+
+			RGBA.value.value = color.getRGBA();
+			HSLA.value.value = color.getHSLA();
+			HEXA.value.value = color.getHexa();
+		};
+
+		var InfoProperty = function InfoProperty(info) {
+
+			var node = document.createElement('div');
+			var title = document.createElement('div');
+			var value = document.createElement('input');
+			var copy = document.createElement('div');
+
+			node.className = 'property';
+			title.className = 'type';
+			value.className = 'value';
+			copy.className = 'copy';
+
+			title.textContent = info;
+			value.setAttribute('type', 'text');
+
+			copy.addEventListener('click', function() {
+				value.select();
+			});
+
+			node.appendChild(title);
+			node.appendChild(value);
+			node.appendChild(copy);
+
+			this.node = node;
+			this.value = value;
+			this.info = title;
+
+			info_box.appendChild(node);
+		};
+
+		var init = function init() {
+
+			info_box = getElemById('color-info');
+
+			RGBA = new InfoProperty('RGBA');
+			HSLA = new InfoProperty('HSLA');
+			HEXA = new InfoProperty('HEXA');
+
+			UIColorPicker.subscribe('picker', updateInfo);
+
+		};
+
+		return {
+			init: init
+		};
+
+	})();
+
+	/**
+	 * ColorPicker Samples
+	 */
+	var ColorPickerSamples = (function ColorPickerSamples() {
+
+		var samples = [];
+		var nr_samples = 0;
+		var active = null;
+		var container = null;
+		var	samples_per_line = 10;
+		var trash_can = null;
+		var base_color = new HSLColor(0, 50, 100);
+		var add_btn;
+		var add_btn_pos;
+
+		var ColorSample = function ColorSample() {
+			var node = document.createElement('div');
+			node.className = 'sample';
+
+			this.uid = samples.length;
+			this.index = nr_samples++;
+			this.node = node;
+			this.color = new Color(base_color);
+
+			node.setAttribute('sample-id', this.uid);
+			node.setAttribute('draggable', 'true');
+
+			node.addEventListener('dragstart', this.dragStart.bind(this));
+			node.addEventListener('dragover' , allowDropEvent);
+			node.addEventListener('drop'     , this.dragDrop.bind(this));
+
+			this.updatePosition(this.index);
+			this.updateBgColor();
+			samples.push(this);
+		};
+
+		ColorSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		ColorSample.prototype.updatePosition = function updatePosition(index) {
+			this.index = index;
+			this.posY = 5 + ((index / samples_per_line) | 0) * 52;
+			this.posX = 5 + ((index % samples_per_line) | 0) * 52;
+			this.node.style.top  = this.posY + 'px';
+			this.node.style.left = this.posX + 'px';
+		};
+
+		ColorSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.activate = function activate() {
+			UIColorPicker.setColor('picker', this.color);
+			this.node.setAttribute('data-active', 'true');
+		};
+
+		ColorSample.prototype.deactivate = function deactivate() {
+			this.node.removeAttribute('data-active');
+		};
+
+		ColorSample.prototype.dragStart = function dragStart(e) {
+			e.dataTransfer.setData('sampleID', this.uid);
+			e.dataTransfer.setData('location', 'picker-samples');
+		};
+
+		ColorSample.prototype.dragDrop = function dragDrop(e) {
+			e.stopPropagation();
+			this.color = Tool.getSampleColorFrom(e);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.deleteSample = function deleteSample() {
+			container.removeChild(this.node);
+			samples[this.uid] = null;
+			nr_samples--;
+		};
+
+		var updateUI = function updateUI() {
+			updateContainerProp();
+
+			var index = 0;
+			var nr = samples.length;
+			for (var i=0; i < nr; i++)
+				if (samples[i] !== null) {
+					samples[i].updatePosition(index);
+					index++;
+				}
+
+			AddSampleButton.updatePosition(index);
+		};
+
+		var deleteSample = function deleteSample(e) {
+			trash_can.parentElement.setAttribute('drag-state', 'none');
+
+			var location = e.dataTransfer.getData('location');
+			if (location !== 'picker-samples')
+				return;
+
+			var sampleID = e.dataTransfer.getData('sampleID');
+			samples[sampleID].deleteSample();
+			console.log(samples);
+
+			updateUI();
+		};
+
+		var createDropSample = function createDropSample() {
+			var sample = document.createElement('div');
+			sample.id = 'drop-effect-sample';
+			sample.className = 'sample';
+			container.appendChild(sample);
+		};
+
+		var setActivateSample = function setActivateSample(e) {
+			if (e.target.className !== 'sample')
+				return;
+
+			unsetActiveSample(active);
+			Tool.unsetVoidSample();
+			CanvasSamples.unsetActiveSample();
+			active = samples[e.target.getAttribute('sample-id')];
+			active.activate();
+		};
+
+		var unsetActiveSample = function unsetActiveSample() {
+			if (active)
+				active.deactivate();
+			active = null;
+		};
+
+		var getSampleColor = function getSampleColor(id) {
+			if (samples[id] !== undefined && samples[id]!== null)
+				return new Color(samples[id].color);
+		};
+
+		var updateContainerProp = function updateContainerProp() {
+			samples_per_line = ((container.clientWidth - 5) / 52) | 0;
+			var height = 52 * (1 + (nr_samples / samples_per_line) | 0);
+			container.style.height = height + 10 + 'px';
+		};
+
+		var AddSampleButton = (function AddSampleButton() {
+			var node;
+			var _index = 0;
+			var _posX;
+			var _posY;
+
+			var updatePosition = function updatePosition(index) {
+				_index = index;
+				_posY = 5 + ((index / samples_per_line) | 0) * 52;
+				_posX = 5 + ((index % samples_per_line) | 0) * 52;
+
+				node.style.top  = _posY + 'px';
+				node.style.left = _posX + 'px';
+			};
+
+			var addButtonClick = function addButtonClick() {
+				var sample = new ColorSample();
+				container.appendChild(sample.node);
+				updatePosition(_index + 1);
+				updateUI();
+			};
+
+			var init = function init() {
+				node = document.createElement('div');
+				var icon = document.createElement('div');
+
+				node.className = 'sample';
+				icon.id = 'add-icon';
+				node.appendChild(icon);
+				node.addEventListener('click', addButtonClick);
+
+				updatePosition(0);
+				container.appendChild(node);
+			};
+
+			return {
+				init : init,
+				updatePosition : updatePosition
+			};
+		})();
+
+		var init = function init() {
+			container = getElemById('picker-samples');
+			trash_can = getElemById('trash-can');
+
+			AddSampleButton.init();
+
+			for (var i=0; i<16; i++) {
+				var sample = new ColorSample();
+				container.appendChild(sample.node);
+			}
+
+			AddSampleButton.updatePosition(samples.length);
+			updateUI();
+
+			active = samples[0];
+			active.activate();
+
+			container.addEventListener('click', setActivateSample);
+
+			trash_can.addEventListener('dragover', allowDropEvent);
+			trash_can.addEventListener('dragenter', function() {
+				this.parentElement.setAttribute('drag-state', 'enter');
+			});
+			trash_can.addEventListener('dragleave', function(e) {
+				this.parentElement.setAttribute('drag-state', 'none');
+			});
+			trash_can.addEventListener('drop', deleteSample);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (active)
+					active.updateColor(color);
+			});
+
+		};
+
+		return {
+			init : init,
+			getSampleColor : getSampleColor,
+			unsetActiveSample : unsetActiveSample
+		};
+
+	})();
+
+	/**
+	 * Canvas Samples
+	 */
+	var CanvasSamples = (function CanvasSamples() {
+
+		var active = null;
+		var canvas = null;
+		var samples = [];
+		var zindex = null;
+		var tutorial = true;
+
+		var CanvasSample = function CanvasSample(color, posX, posY) {
+
+			var node = document.createElement('div');
+			var pick = document.createElement('div');
+			var delete_btn = document.createElement('div');
+			node.className = 'sample';
+			pick.className = 'pick';
+			delete_btn.className = 'delete';
+
+			this.uid = samples.length;
+			this.node = node;
+			this.color = color;
+			this.updateBgColor();
+			this.zIndex = 1;
+
+			node.style.top = posY - 50 + 'px';
+			node.style.left = posX - 50 + 'px';
+			node.setAttribute('sample-id', this.uid);
+
+			node.appendChild(pick);
+			node.appendChild(delete_btn);
+
+			var activate = function activate() {
+				setActiveSample(this);
+			}.bind(this);
+
+			node.addEventListener('dblclick', activate);
+			pick.addEventListener('click', activate);
+			delete_btn.addEventListener('click', this.deleteSample.bind(this));
+
+			UIComponent.makeDraggable(node);
+			UIComponent.makeResizable(node);
+
+			samples.push(this);
+			canvas.appendChild(node);
+			return this;
+		};
+
+		CanvasSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		CanvasSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		CanvasSample.prototype.updateZIndex = function updateZIndex(value) {
+			this.zIndex = value;
+			this.node.style.zIndex = value;
+		};
+
+		CanvasSample.prototype.activate = function activate() {
+			this.node.setAttribute('data-active', 'true');
+			zindex.setAttribute('data-active', 'true');
+
+			UIColorPicker.setColor('picker', this.color);
+			InputSliderManager.setValue('z-index', this.zIndex);
+		};
+
+		CanvasSample.prototype.deactivate = function deactivate() {
+			this.node.removeAttribute('data-active');
+			zindex.removeAttribute('data-active');
+		};
+
+		CanvasSample.prototype.deleteSample = function deleteSample() {
+			if (active === this)
+				unsetActiveSample();
+			canvas.removeChild(this.node);
+			samples[this.uid] = null;
+		};
+
+		CanvasSample.prototype.updatePosition = function updatePosition(posX, posY) {
+			this.node.style.top = posY - this.startY + 'px';
+			this.node.style.left = posX - this.startX + 'px';
+		};
+
+		var canvasDropEvent = function canvasDropEvent(e) {
+			var color = Tool.getSampleColorFrom(e);
+
+			if (color) {
+				var offsetX = e.pageX - canvas.offsetLeft;
+				var offsetY = e.pageY - canvas.offsetTop;
+				var sample = new CanvasSample(color, offsetX, offsetY);
+				if (tutorial) {
+					tutorial = false;
+					canvas.removeAttribute('data-tutorial');
+					var info = new CanvasSample(new Color(), 100, 100);
+					info.node.setAttribute('data-tutorial', 'dblclick');
+				}
+			}
+
+		};
+
+		var setActiveSample = function setActiveSample(sample) {
+			ColorPickerSamples.unsetActiveSample();
+			Tool.unsetVoidSample();
+			unsetActiveSample();
+			active = sample;
+			active.activate();
+		};
+
+		var unsetActiveSample = function unsetActiveSample() {
+			if (active)
+				active.deactivate();
+			active = null;
+		};
+
+		var createToggleBgButton = function createToggleBgButton() {
+			var button = document.createElement('div');
+			var state = false;
+			button.className = 'toggle-bg';
+			canvas.appendChild(button);
+
+			button.addEventListener('click', function() {
+				console.log(state);
+				state = !state;
+				canvas.setAttribute('data-bg', state);
+			});
+		};
+
+		var init = function init() {
+			canvas = getElemById('canvas');
+			zindex = getElemById('zindex');
+
+			canvas.addEventListener('dragover', allowDropEvent);
+			canvas.addEventListener('drop', canvasDropEvent);
+
+			createToggleBgButton();
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (active)	active.updateColor(color);
+			});
+
+			InputSliderManager.subscribe('z-index', function (value) {
+				if (active)	active.updateZIndex(value);
+			});
+
+			UIComponent.makeResizable(canvas, 'height');
+		};
+
+		return {
+			init : init,
+			unsetActiveSample : unsetActiveSample
+		};
+
+	})();
+
+	var StateButton = function StateButton(node, state) {
+		this.state = false;
+		this.callback = null;
+
+		node.addEventListener('click', function() {
+			this.state = !this.state;
+			if (typeof this.callback === "function")
+				this.callback(this.state);
+		}.bind(this));
+	};
+
+	StateButton.prototype.set = function set() {
+		this.state = true;
+		if (typeof this.callback === "function")
+			this.callback(this.state);
+	};
+
+	StateButton.prototype.unset = function unset() {
+		this.state = false;
+		if (typeof this.callback === "function")
+			this.callback(this.state);
+	};
+
+	StateButton.prototype.subscribe = function subscribe(func) {
+		this.callback = func;
+	};
+
+
+	/**
+	 * Tool
+	 */
+	var Tool = (function Tool() {
+
+		var samples = [];
+		var controls = null;
+		var void_sw;
+
+		var createPickerModeSwitch = function createPickerModeSwitch() {
+			var parent = getElemById('controls');
+			var icon = document.createElement('div');
+			var button = document.createElement('div');
+			var hsv = document.createElement('div');
+			var hsl = document.createElement('div');
+			var active = null;
+
+			icon.className = 'icon picker-icon';
+			button.className = 'switch';
+			button.appendChild(hsv);
+			button.appendChild(hsl);
+
+			hsv.textContent = 'HSV';
+			hsl.textContent = 'HSL';
+
+			active = hsl;
+			active.setAttribute('data-active', 'true');
+
+			function switchPickingModeTo(elem) {
+				active.removeAttribute('data-active');
+				active = elem;
+				active.setAttribute('data-active', 'true');
+				UIColorPicker.setPickerMode('picker', active.textContent);
+			};
+
+			var picker_sw = new StateButton(icon);
+			picker_sw.subscribe(function() {
+				if (active === hsv)
+					switchPickingModeTo(hsl);
+				else
+					switchPickingModeTo(hsv);
+			});
+
+			hsv.addEventListener('click', function() {
+				switchPickingModeTo(hsv);
+			});
+			hsl.addEventListener('click', function() {
+				switchPickingModeTo(hsl);
+			});
+
+			parent.appendChild(icon);
+			parent.appendChild(button);
+		};
+
+		var setPickerDragAndDrop = function setPickerDragAndDrop() {
+			var preview = document.querySelector('#picker .preview-color');
+			var picking_area = document.querySelector('#picker .picking-area');
+
+			preview.setAttribute('draggable', 'true');
+			preview.addEventListener('drop', drop);
+			preview.addEventListener('dragstart', dragStart);
+			preview.addEventListener('dragover', allowDropEvent);
+
+			picking_area.addEventListener('drop', drop);
+			picking_area.addEventListener('dragover', allowDropEvent);
+
+			function drop(e) {
+				var color = getSampleColorFrom(e);
+				UIColorPicker.setColor('picker', color);
+			};
+
+			function dragStart(e) {
+				e.dataTransfer.setData('sampleID', 'picker');
+				e.dataTransfer.setData('location', 'picker');
+			};
+		};
+
+		var getSampleColorFrom = function getSampleColorFrom(e) {
+			var sampleID = e.dataTransfer.getData('sampleID');
+			var location = e.dataTransfer.getData('location');
+
+			if (location === 'picker')
+				return UIColorPicker.getColor(sampleID);
+			if (location === 'picker-samples')
+				return ColorPickerSamples.getSampleColor(sampleID);
+			if (location === 'palette-samples')
+				return ColorPalette.getSampleColor(sampleID);
+		};
+
+		var setVoidSwitch = function setVoidSwitch() {
+			var void_sample = getElemById('void-sample');
+			void_sw = new StateButton(void_sample);
+			void_sw.subscribe( function (state) {
+				void_sample.setAttribute('data-active', state);
+				if (state === true) {
+					ColorPickerSamples.unsetActiveSample();
+					CanvasSamples.unsetActiveSample();
+				}
+			});
+		};
+
+		var unsetVoidSample = function unsetVoidSample() {
+			void_sw.unset();
+		};
+
+		var init = function init() {
+			controls = getElemById('controls');
+
+			var color = new Color();
+			color.setHSL(0, 51, 51);
+			UIColorPicker.setColor('picker', color);
+
+			setPickerDragAndDrop();
+			createPickerModeSwitch();
+			setVoidSwitch();
+		};
+
+		return {
+			init : init,
+			unsetVoidSample : unsetVoidSample,
+			getSampleColorFrom : getSampleColorFrom
+		};
+
+	})();
+
+	var init = function init() {
+		UIColorPicker.init();
+		InputSliderManager.init();
+		ColorInfo.init();
+		ColorPalette.init();
+		ColorPickerSamples.init();
+		CanvasSamples.init();
+		Tool.init();
+	};
+
+	return {
+		init : init
+	};
+
+})();
+
+
+
+ + +

{{CSSRef}}

+ +

Dieses Werkzeug vereinfacht es, beliebige Farben zu kreieren, um sie dann für das Internet zu verwenden. Außerdem erlaubt es, Farben in verschiedene von CSS unterstützte Formate zu konvertieren. Dazu zählen: HEXA-Farben, RGB (Rot/Grün/Blau) und HSL (Farbton/Sättigung/relative Helligkeit). Bei Verwendung der Farbformate RGB (rgba) und HSL (hsla) wird es auch unterstützt, den Alphakanal einzustellen.

+ +

Jede Farbe wird in allen drei im Internet üblichen CSS-Formaten ausgedrückt. Weiters wird für die ausgewählte Farbe jeweils eine Palette für HSL (Farbton/Sättigung/relative Helligkeit), HSV (Farbton/Sättigung/Hellwert) und den Alphakanal angezeigt. Das Spektrum des Farbauswahl-Werkzeuges kann man zwischen dem HSL- und HSV-Farbraum umschalten.

+ +

{{ EmbedLiveSample('ColorPicker_Tool', '100%', '900') }}

+ +

 

diff --git a/files/de/web/css/css_colors/farbauswahl_werkzeug/index.html b/files/de/web/css/css_colors/farbauswahl_werkzeug/index.html deleted file mode 100644 index 3f822f9f73..0000000000 --- a/files/de/web/css/css_colors/farbauswahl_werkzeug/index.html +++ /dev/null @@ -1,3225 +0,0 @@ ---- -title: Farbauswahl-Werkzeug -slug: Web/CSS/CSS_Colors/farbauswahl_werkzeug -tags: - - CSS - - Farbauswahl - - Farbe - - Hilfsmittel - - Pipette - - Werkzeug -translation_of: Web/CSS/CSS_Colors/Color_picker_tool ---- -
-

ColorPicker tool

- -

HTML Content

- -
    <div id="container">
-        <div id="palette" class="block">
-            <div id="color-palette"></div>
-            <div id="color-info">
-                <div class="title"> CSS Color </div>
-            </div>
-        </div>
-
-        <div id="picker" class="block">
-            <div class="ui-color-picker" data-topic="picker" data-mode="HSL"></div>
-            <div id="picker-samples" sample-id="master"></div>
-            <div id="controls">
-                <div id="delete">
-                    <div id="trash-can"></div>
-                </div>
-                <div id="void-sample" class="icon"></div>
-            </div>
-        </div>
-
-        <div id="canvas" data-tutorial="drop">
-            <div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index"
-                data-max="20" data-sensivity="10"></div>
-        </div>
-    </div>
-
-
- -

CSS Content

- -
/*
- * COLOR PICKER TOOL
- */
-
-.ui-color-picker {
-	width: 420px;
-	margin: 0;
-	border: 1px solid #DDD;
-	background-color: #FFF;
-	display: table;
-
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-
-.ui-color-picker .picking-area {
-	width: 198px;
-	height: 198px;
-	margin: 5px;
-	border: 1px solid #DDD;
-	position: relative;
-	float: left;
-	display: table;
-}
-
-.ui-color-picker .picking-area:hover {
-	cursor: default;
-}
-
-/* HSV format - Hue-Saturation-Value(Brightness) */
-.ui-color-picker .picking-area {
-	background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center;
-
-	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
-	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
-	background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-				-ms-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
-	background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-				-o-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
-
-	background-color: #F00;
-}
-
-/* HSL format - Hue-Saturation-Lightness */
-.ui-color-picker[data-mode='HSL'] .picking-area {
-	background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
-									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
-				-moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
-	background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
-									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
-				-webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
-	background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
-									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
-				-ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
-	background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
-									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
-				-o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
-	background-color: #F00;
-}
-
-.ui-color-picker .picker {
-	width: 10px;
-	height: 10px;
-	border-radius: 50%;
-	border: 1px solid #FFF;
-	position: absolute;
-	top: 45%;
-	left: 45%;
-}
-
-.ui-color-picker .picker:before {
-	width: 8px;
-	height: 8px;
-	content: "";
-	position: absolute;
-	border: 1px solid #999;
-	border-radius: 50%;
-}
-
-.ui-color-picker .hue,
-.ui-color-picker .alpha {
-	width: 198px;
-	height: 28px;
-	margin: 5px;
-	border: 1px solid #FFF;
-	float: left;
-}
-
-.ui-color-picker .hue {
-	background: url("https://mdn.mozillademos.org/files/5701/hue.png") center;
-	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
-				#00F 66.66%, #F0F 83.33%, #F00 100%);
-	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
-				#00F 66.66%, #F0F 83.33%, #F00 100%);
-	background: -ms-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
-				#00F 66.66%, #F0F 83.33%, #F00 100%);
-	background: -o-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
-				#00F 66.66%, #F0F 83.33%, #F00 100%);
-}
-
-.ui-color-picker .alpha {
-	border: 1px solid #CCC;
-	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
-}
-
-.ui-color-picker .alpha-mask {
-	width: 100%;
-	height: 100%;
-	background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png");
-}
-
-.ui-color-picker .slider-picker {
-	width: 2px;
-	height: 100%;
-	border: 1px solid #777;
-	background-color: #FFF;
-	position: relative;
-	top: -1px;
-}
-
-/* input HSV and RGB */
-
-.ui-color-picker .info {
-	width: 200px;
-	margin: 5px;
-	float: left;
-}
-
-.ui-color-picker .info * {
-	float: left;
-}
-
-.ui-color-picker .input {
-	width: 64px;
-	margin: 5px 2px;
-	float: left;
-}
-
-.ui-color-picker .input .name {
-	height: 20px;
-	width: 30px;
-	text-align: center;
-	font-size: 14px;
-	line-height: 18px;
-	float: left;
-}
-
-.ui-color-picker .input input {
-	width: 30px;
-	height: 18px;
-	margin: 0;
-	padding: 0;
-	border: 1px solid #DDD;
-	text-align: center;
-	float: right;
-
-	-moz-user-select: text;
-	-webkit-user-select: text;
-	-ms-user-select: text;
-}
-
-.ui-color-picker .input[data-topic="lightness"] {
-	display: none;
-}
-
-.ui-color-picker[data-mode='HSL'] .input[data-topic="value"] {
-	display: none;
-}
-
-.ui-color-picker[data-mode='HSL'] .input[data-topic="lightness"] {
-	display: block;
-}
-
-.ui-color-picker .input[data-topic="alpha"] {
-	margin-top: 10px;
-	width: 93px;
-}
-
-.ui-color-picker .input[data-topic="alpha"] > .name {
-	width: 60px;
-}
-
-.ui-color-picker .input[data-topic="alpha"] > input {
-	float: right;
-}
-
-.ui-color-picker .input[data-topic="hexa"] {
-	width: auto;
-	float: right;
-	margin: 6px 8px 0 0;
-}
-
-.ui-color-picker .input[data-topic="hexa"] > .name {
-	display: none;
-}
-
-.ui-color-picker .input[data-topic="hexa"] > input {
-	width: 90px;
-	height: 24px;
-	padding: 2px 0;
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-/* Preview color */
-.ui-color-picker .preview {
-	width: 95px;
-	height: 53px;
-	margin: 5px;
-	margin-top: 10px;
-	border: 1px solid #DDD;
-	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
-	float: left;
-	position: relative;
-}
-
-.ui-color-picker .preview:before {
-	height: 100%;
-	width: 50%;
-	left: 50%;
-	top: 0;
-	content: "";
-	background: #FFF;
-	position: absolute;
-	z-index: 1;
-}
-
-.ui-color-picker .preview-color {
-	width: 100%;
-	height: 100%;
-	background-color: rgba(255, 0, 0, 0.5);
-	position: absolute;
-	z-index: 1;
-}
-
-.ui-color-picker .switch_mode {
-	width: 10px;
-	height: 20px;
-	position: relative;
-	border-radius: 5px 0 0 5px;
-	border: 1px solid #DDD;
-	background-color: #EEE;
-	left: -12px;
-	top: -1px;
-	z-index: 1;
-	transition: all 0.5s;
-}
-
-.ui-color-picker .switch_mode:hover {
-	background-color: #CCC;
-	cursor: pointer;
-}
-
-/*
- * UI Component
- */
-
-.ui-input-slider {
-	height: 20px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	-moz-user-select: none;
-	user-select: none;
-}
-
-.ui-input-slider * {
-	float: left;
-	height: 100%;
-	line-height: 100%;
-}
-
-/* Input Slider */
-
-.ui-input-slider > input {
-	margin: 0;
-	padding: 0;
-	width: 50px;
-	text-align: center;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.ui-input-slider-info {
-	width: 90px;
-	padding: 0px 10px 0px 0px;
-	text-align: right;
-	text-transform: lowercase;
-}
-
-.ui-input-slider-left, .ui-input-slider-right {
-	width: 16px;
-	cursor: pointer;
-	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
-}
-
-.ui-input-slider-right {
-	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
-}
-
-.ui-input-slider-name {
-	width: 90px;
-	padding: 0 10px 0 0;
-	text-align: right;
-	text-transform: lowercase;
-}
-
-.ui-input-slider-btn-set {
-	width: 25px;
-	background-color: #2C9FC9;
-	border-radius: 5px;
-	color: #FFF;
-	font-weight: bold;
-	line-height: 14px;
-	text-align: center;
-}
-
-.ui-input-slider-btn-set:hover {
-	background-color: #379B4A;
-	cursor: pointer;
-}
-
-/*
- * COLOR PICKER TOOL
- */
-
-body {
-	max-width: 1000px;
-	margin: 0 auto;
-
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-
-	box-shadow: 0 0 5px 0 #999;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-
-}
-
-/**
- * Resize Handle
- */
-.resize-handle {
-	width: 10px;
-	height: 10px;
-	background: url('https://mdn.mozillademos.org/files/6083/resize.png') center center no-repeat;
-	position: absolute;
-	bottom: 0;
-	right: 0;
-}
-
-[data-resize='both']:hover {
-	cursor: nw-resize !important;
-}
-
-[data-resize='width']:hover {
-	cursor: w-resize !important;
-}
-
-[data-resize='height']:hover {
-	cursor: n-resize !important;
-}
-
-[data-hidden='true'] {
-	display: none;
-}
-
-[data-collapsed='true'] {
-	height: 0 !important;
-}
-
-.block {
-	display: table;
-}
-
-
-/**
- * 	Container
- */
-#container {
-	width: 100%;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-
-	display: table;
-}
-
-/**
- * 	Picker Zone
- */
-
-#picker {
-	padding: 10px;
-	width: 980px;
-}
-
-.ui-color-picker {
-	padding: 3px 5px;
-	float: left;
-	border-color: #FFF;
-}
-
-.ui-color-picker .switch_mode {
-	display: none;
-}
-
-.ui-color-picker .preview-color:hover {
-	cursor: move;
-}
-
-/**
- * Picker Container
- */
-
-#picker-samples {
-	width: 375px;
-	height: 114px;
-	max-height: 218px;
-	margin: 0 10px 0 30px;
-	overflow: hidden;
-	position: relative;
-	float: left;
-
-	transition: all 0.2s;
-}
-
-#picker-samples .sample {
-	width: 40px;
-	height: 40px;
-	margin: 5px;
-	border: 1px solid #DDD;
-	position: absolute;
-	float: left;
-	transition: all 0.2s;
-}
-
-#picker-samples .sample:hover {
-	cursor: pointer;
-	border-color: #BBB;
-	transform: scale(1.15);
-	border-radius: 3px;
-}
-
-#picker-samples .sample[data-active='true'] {
-	border-color: #999;
-}
-
-#picker-samples .sample[data-active='true']:after {
-	content: "";
-	position: absolute;
-	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
-	width: 100%;
-	height: 12px;
-	top: -12px;
-	z-index: 2;
-}
-
-#picker-samples #add-icon {
-	width: 100%;
-	height: 100%;
-	position: relative;
-	box-shadow: inset 0px 0px 2px 0px #DDD;
-}
-
-#picker-samples #add-icon:hover {
-	cursor: pointer;
-	border-color: #DDD;
-	box-shadow: inset 0px 0px 5px 0px #CCC;
-}
-
-#picker-samples #add-icon:before,
-#picker-samples #add-icon:after {
-	content: "";
-	position: absolute;
-	background-color: #EEE;
-	box-shadow: 0 0 1px 0 #EEE;
-}
-
-#picker-samples #add-icon:before {
-	width: 70%;
-	height: 16%;
-	top: 42%;
-	left: 15%;
-}
-
-#picker-samples #add-icon:after {
-	width: 16%;
-	height: 70%;
-	top: 15%;
-	left: 42%;
-}
-
-#picker-samples #add-icon:hover:before,
-#picker-samples #add-icon:hover:after {
-	background-color: #DDD;
-	box-shadow: 0 0 1px 0 #DDD;
-}
-
-/**
- * 	Controls
- */
-
-#controls {
-	width: 110px;
-	padding: 10px;
-	float: right;
-}
-
-#controls #picker-switch {
-	text-align: center;
-	float: left;
-}
-
-#controls .icon {
-	width: 48px;
-	height: 48px;
-	margin: 10px 0;
-	background-repeat: no-repeat;
-	background-position: center;
-	border: 1px solid #DDD;
-	display: table;
-	float: left;
-}
-
-#controls .icon:hover {
-	cursor: pointer;
-}
-
-#controls .picker-icon {
-	background-image: url('https://mdn.mozillademos.org/files/6081/picker.png');
-}
-
-#controls #void-sample {
-	margin-right: 10px;
-	background-image: url('https://mdn.mozillademos.org/files/6087/void.png');
-	background-position: center left;
-}
-
-#controls #void-sample[data-active='true'] {
-	border-color: #CCC;
-	background-position: center right;
-}
-
-#controls .switch {
-	width: 106px;
-	padding: 1px;
-	border: 1px solid #CCC;
-	font-size: 14px;
-	text-align: center;
-	line-height: 24px;
-	overflow: hidden;
-	float: left;
-}
-
-#controls .switch:hover {
-	cursor: pointer;
-}
-
-#controls .switch > * {
-	width: 50%;
-	padding: 2px 0;
-	background-color: #EEE;
-	float: left;
-}
-
-#controls .switch [data-active='true'] {
-	color: #FFF;
-	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
-	background-color: #777;
-}
-
-/**
- * 	Trash Can
- */
-
-#delete {
-	width: 100%;
-	height: 94px;
-	background-color: #DDD;
-	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
-	background-repeat: repeat;
-
-	text-align: center;
-	color: #777;
-
-	position: relative;
-	float: right;
-}
-
-#delete #trash-can {
-	width: 80%;
-	height: 80%;
-	border: 2px dashed #FFF;
-	border-radius: 5px;
-	background: url('https://mdn.mozillademos.org/files/6085/trash-can.png') no-repeat center;
-
-	position: absolute;
-	top: 10%;
-	left: 10%;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-
-	transition: all 0.2s;
-}
-
-#delete[drag-state='enter'] {
-	background-color: #999;
-}
-
-/**
- * 	Color Theme
- */
-
-#color-theme {
-	margin: 0 8px 0 0;
-	border: 1px solid #EEE;
-	display: inline-block;
-	float: right;
-}
-
-#color-theme .box {
-	width: 80px;
-	height: 92px;
-	float: left;
-}
-
-/**
- * Color info box
- */
-#color-info {
-	width: 360px;
-	float: left;
-}
-
-#color-info .title {
-	width: 100%;
-	padding: 15px;
-	font-size: 18px;
-	text-align: center;
-	background-image: url('https://mdn.mozillademos.org/files/6071/color-wheel.png');
-	background-repeat:no-repeat;
-	background-position: center left 30%;
-}
-
-#color-info .copy-container {
-	position: absolute;
-	top: -100%;
-}
-
-#color-info .property {
-	min-width: 280px;
-	height: 30px;
-	margin: 10px 0;
-	text-align: center;
-	line-height: 30px;
-}
-
-#color-info .property > * {
-	float: left;
-}
-
-#color-info .property .type {
-	width: 60px;
-	height: 100%;
-	padding: 0 16px 0 0;
-	text-align: right;
-}
-
-#color-info .property .value {
-	width: 200px;
-	height: 100%;
-	padding: 0 10px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	font-size: 16px;
-	color: #777;
-	text-align: center;
-	background-color: #FFF;
-	border: none;
-}
-
-#color-info .property .value:hover {
-	color: #37994A;
-}
-
-#color-info .property .value:hover + .copy {
-	background-position: center right;
-}
-
-#color-info .property .copy {
-	width: 24px;
-	height: 100%;
-	padding: 0 5px;
-	background-color: #FFF;
-	background-image: url('https://mdn.mozillademos.org/files/6073/copy.png');
-	background-repeat: no-repeat;
-	background-position: center left;
-	border-left: 1px solid #EEE;
-	text-align: right;
-	float: left;
-}
-
-#color-info .property .copy:hover {
-	background-position: center right;
-}
-
-
-/**
- * 	Color Palette
- */
-
-#palette {
-	width: 1000px;
-	padding: 10px 0;
-	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
-	background-repeat: repeat;
-	background-color: #EEE;
-	color: #777;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-#color-palette {
-	width: 640px;
-	font-family: Arial, Helvetica, sans-serif;
-	color: #777;
-	float: left;
-}
-
-#color-palette .container {
-	width: 100%;
-	height: 50px;
-	line-height: 50px;
-	overflow: hidden;
-	float: left;
-	transition: all 0.5s;
-}
-
-#color-palette .container > * {
-	float: left;
-}
-
-#color-palette .title {
-	width: 100px;
-	padding: 0 10px;
-	text-align: right;
-	line-height: inherit;
-}
-
-#color-palette .palette {
-	width: 456px;
-	height: 38px;
-	margin: 3px;
-	padding: 3px;
-	display: table;
-	background-color: #FFF;
-}
-
-#color-palette .palette .sample {
-	width: 30px;
-	height: 30px;
-	margin: 3px;
-	position: relative;
-	border: 1px solid #DDD;
-	float: left;
-	transition: all 0.2s;
-}
-
-#color-palette .palette .sample:hover {
-	cursor: pointer;
-	border-color: #BBB;
-	transform: scale(1.15);
-	border-radius: 3px;
-}
-
-#color-palette .controls {
-}
-
-#color-palette .controls > * {
-	float: left;
-}
-
-#color-palette .controls > *:hover {
-	cursor: pointer;
-}
-
-#color-palette .controls .lock {
-	width: 24px;
-	height: 24px;
-	margin: 10px;
-	padding: 3px;
-	background-image: url('https://mdn.mozillademos.org/files/6077/lock.png');
-	background-repeat: no-repeat;
-	background-position: bottom right;
-}
-
-#color-palette .controls .lock:hover {
-	/*background-image: url('images/unlocked-hover.png');*/
-	background-position: bottom left;
-}
-
-#color-palette .controls .lock[locked-state='true'] {
-	/*background-image: url('images/locked.png');*/
-	background-position: top left ;
-}
-
-#color-palette .controls .lock[locked-state='true']:hover {
-	/*background-image: url('images/lock-hover.png');*/
-	background-position: top right;
-}
-
-/**
- * Canvas
- */
-
-#canvas {
-	width: 100%;
-	height: 300px;
-	min-height: 250px;
-	border-top: 1px solid #DDD;
-	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
-	background-repeat: repeat;
-	position: relative;
-	float: left;
-}
-
-#canvas[data-tutorial='drop'] {
-	text-align: center;
-	font-size: 30px;
-	color: #777;
-}
-
-#canvas[data-tutorial='drop']:before {
-	content: "Drop colors here to compare";
-	width: 40%;
-	padding: 30px 9% 70px 11%;
-
-	background-image: url('https://mdn.mozillademos.org/files/6075/drop.png');
-	background-repeat: no-repeat;
-	background-position: left 35px top 60%;
-
-	text-align: right;
-
-	border: 3px dashed rgb(221, 221, 221);
-	border-radius: 15px;
-
-	position: absolute;
-	top: 50px;
-	left: 20%;
-}
-
-#canvas[data-tutorial='drop']:after {
-	content: "adjust, change or modify";
-	width: 40%;
-	font-size: 24px;
-	position: absolute;
-	top: 130px;
-	left: 32%;
-	z-index: 2;
-}
-
-#canvas [data-tutorial='dblclick'] {
-	background-color: #999 !important;
-}
-
-#canvas [data-tutorial='dblclick']:before {
-	content: "double click to activate";
-	width: 80px;
-	color: #FFF;
-	position: absolute;
-	top: 10%;
-	left: 20%;
-	z-index: 2;
-}
-
-#canvas .sample {
-	width: 100px;
-	height: 100px;
-	min-width: 20px;
-	min-height: 20px;
-	position: absolute;
-	border: 1px solid rgba(255, 255, 255, 0.3);
-}
-
-#canvas .sample:hover {
-	cursor: move;
-}
-
-#canvas .sample[data-active='true']:after {
-	content: "";
-	position: absolute;
-	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
-	width: 100%;
-	height: 12px;
-	top: -12px;
-	z-index: 2;
-}
-
-#canvas .sample:hover > * {
-	cursor: pointer;
-	display: block !important;
-}
-
-#canvas .sample .resize-handle {
-	display: none;
-}
-
-#canvas .sample .pick {
-	width: 10px;
-	height: 10px;
-	margin: 5px;
-	background: url('https://mdn.mozillademos.org/files/6079/pick.png') center no-repeat;
-	position: absolute;
-	top: 0;
-	left: 0;
-	display: none;
-}
-
-#canvas .sample .delete {
-	width: 10px;
-	height: 10px;
-	margin: 5px;
-	background: url('https://mdn.mozillademos.org/files/6069/close.png') center no-repeat;
-	position: absolute;
-	top: 0;
-	right: 0;
-	display: none;
-}
-
-
-/**
- * Canvas controls
- */
-
-#canvas .toggle-bg {
-	width: 16px;
-	height: 16px;
-	margin: 5px;
-	background: url("images/canvas-controls.png") center left no-repeat;
-	position: absolute;
-	top: 0;
-	right: 0;
-}
-
-#canvas .toggle-bg:hover {
-	cursor: pointer;
-}
-
-#canvas[data-bg='true'] {
-	background: none;
-}
-
-#canvas[data-bg='true'] .toggle-bg {
-	background: url('https://mdn.mozillademos.org/files/6067/canvas-controls.png') center right no-repeat;
-}
-
-#zindex {
-	height: 20px;
-	margin: 5px;
-	font-size: 16px;
-	position: absolute;
-	opacity: 0;
-	top: -10000px;
-	left: 0;
-	color: #777;
-	float: left;
-	transition: opacity 1s;
-}
-
-#zindex input {
-	border: 1px solid #DDD;
-	font-size: 16px;
-	color: #777;
-}
-
-#zindex .ui-input-slider-info {
-	width: 60px;
-}
-
-#zindex[data-active='true'] {
-	top: 0;
-	opacity: 1;
-}
-
-
- -

JavaScript Content

- -
'use strict';
-
-var UIColorPicker = (function UIColorPicker() {
-
-	function getElemById(id) {
-		return document.getElementById(id);
-	}
-
-	var subscribers = [];
-	var pickers = [];
-
-	/**
-	 * RGBA Color class
-	 *
-	 * HSV/HSB and HSL (hue, saturation, value / brightness, lightness)
-	 * @param hue			0-360
-	 * @param saturation	0-100
-	 * @param value 		0-100
-	 * @param lightness		0-100
-	 */
-
-	function Color(color) {
-
-		if(color instanceof Color === true) {
-			this.copy(color);
-			return;
-		}
-
-		this.r = 0;
-		this.g = 0;
-		this.b = 0;
-		this.a = 1;
-		this.hue = 0;
-		this.saturation = 0;
-		this.value = 0;
-		this.lightness = 0;
-		this.format = 'HSV';
-	}
-
-	function RGBColor(r, g, b) {
-		var color = new Color();
-		color.setRGBA(r, g, b, 1);
-		return color;
-	}
-
-	function RGBAColor(r, g, b, a) {
-		var color = new Color();
-		color.setRGBA(r, g, b, a);
-		return color;
-	}
-
-	function HSVColor(h, s, v) {
-		var color = new Color();
-		color.setHSV(h, s, v);
-		return color;
-	}
-
-	function HSVAColor(h, s, v, a) {
-		var color = new Color();
-		color.setHSV(h, s, v);
-		color.a = a;
-		return color;
-	}
-
-	function HSLColor(h, s, l) {
-		var color = new Color();
-		color.setHSL(h, s, l);
-		return color;
-	}
-
-	function HSLAColor(h, s, l, a) {
-		var color = new Color();
-		color.setHSL(h, s, l);
-		color.a = a;
-		return color;
-	}
-
-	Color.prototype.copy = function copy(obj) {
-		if(obj instanceof Color !== true) {
-			console.log('Typeof parameter not Color');
-			return;
-		}
-
-		this.r = obj.r;
-		this.g = obj.g;
-		this.b = obj.b;
-		this.a = obj.a;
-		this.hue = obj.hue;
-		this.saturation = obj.saturation;
-		this.value = obj.value;
-		this.format = '' + obj.format;
-		this.lightness = obj.lightness;
-	};
-
-	Color.prototype.setFormat = function setFormat(format) {
-		if (format === 'HSV')
-			this.format = 'HSV';
-		if (format === 'HSL')
-			this.format = 'HSL';
-	};
-
-	/*========== Methods to set Color Properties ==========*/
-
-	Color.prototype.isValidRGBValue = function isValidRGBValue(value) {
-		return (typeof(value) === 'number' && isNaN(value) === false &&
-			value >= 0 && value <= 255);
-	};
-
-	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
-		if (this.isValidRGBValue(red) === false ||
-			this.isValidRGBValue(green) === false ||
-			this.isValidRGBValue(blue) === false)
-			return;
-
-			this.r = red | 0;
-			this.g = green | 0;
-			this.b = blue | 0;
-
-		if (this.isValidRGBValue(alpha) === true)
-			this.a = alpha | 0;
-	};
-
-	Color.prototype.setByName = function setByName(name, value) {
-		if (name === 'r' || name === 'g' || name === 'b') {
-			if(this.isValidRGBValue(value) === false)
-				return;
-
-			this[name] = value;
-			this.updateHSX();
-		}
-	};
-
-	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
-		this.hue = hue;
-		this.saturation = saturation;
-		this.value = value;
-		this.HSVtoRGB();
-	};
-
-	Color.prototype.setHSL = function setHSL(hue, saturation, lightness) {
-		this.hue = hue;
-		this.saturation = saturation;
-		this.lightness = lightness;
-		this.HSLtoRGB();
-	};
-
-	Color.prototype.setHue = function setHue(value) {
-		if (typeof(value) !== 'number' || isNaN(value) === true ||
-			value < 0 || value > 359)
-			return;
-		this.hue = value;
-		this.updateRGB();
-	};
-
-	Color.prototype.setSaturation = function setSaturation(value) {
-		if (typeof(value) !== 'number' || isNaN(value) === true ||
-			value < 0 || value > 100)
-			return;
-		this.saturation = value;
-		this.updateRGB();
-	};
-
-	Color.prototype.setValue = function setValue(value) {
-		if (typeof(value) !== 'number' || isNaN(value) === true ||
-			value < 0 || value > 100)
-			return;
-		this.value = value;
-		this.HSVtoRGB();
-	};
-
-	Color.prototype.setLightness = function setLightness(value) {
-		if (typeof(value) !== 'number' || isNaN(value) === true ||
-			value < 0 || value > 100)
-			return;
-		this.lightness = value;
-		this.HSLtoRGB();
-	};
-
-	Color.prototype.setHexa = function setHexa(value) {
-		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value);
-
-		if (valid !== true)
-			return;
-
-		if (value[0] === '#')
-			value = value.slice(1, value.length);
-
-		if (value.length === 3)
-			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,'$1$1$2$2$3$3');
-
-		this.r = parseInt(value.substr(0, 2), 16);
-		this.g = parseInt(value.substr(2, 2), 16);
-		this.b = parseInt(value.substr(4, 2), 16);
-
-		this.alpha	= 1;
-		this.RGBtoHSV();
-	};
-
-	/*========== Conversion Methods ==========*/
-
-	Color.prototype.convertToHSL = function convertToHSL() {
-		if (this.format === 'HSL')
-			return;
-
-		this.setFormat('HSL');
-		this.RGBtoHSL();
-	};
-
-	Color.prototype.convertToHSV = function convertToHSV() {
-		if (this.format === 'HSV')
-			return;
-
-		this.setFormat('HSV');
-		this.RGBtoHSV();
-	};
-
-	/*========== Update Methods ==========*/
-
-	Color.prototype.updateRGB = function updateRGB() {
-		if (this.format === 'HSV') {
-			this.HSVtoRGB();
-			return;
-		}
-
-		if (this.format === 'HSL') {
-			this.HSLtoRGB();
-			return;
-		}
-	};
-
-	Color.prototype.updateHSX = function updateHSX() {
-		if (this.format === 'HSV') {
-			this.RGBtoHSV();
-			return;
-		}
-
-		if (this.format === 'HSL') {
-			this.RGBtoHSL();
-			return;
-		}
-	};
-
-	Color.prototype.HSVtoRGB = function HSVtoRGB() {
-		var sat = this.saturation / 100;
-		var value = this.value / 100;
-		var C = sat * value;
-		var H = this.hue / 60;
-		var X = C * (1 - Math.abs(H % 2 - 1));
-		var m = value - C;
-		var precision = 255;
-
-		C = (C + m) * precision | 0;
-		X = (X + m) * precision | 0;
-		m = m * precision | 0;
-
-		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
-		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
-		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
-		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
-		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
-		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
-	};
-
-	Color.prototype.HSLtoRGB = function HSLtoRGB() {
-		var sat = this.saturation / 100;
-		var light = this.lightness / 100;
-		var C = sat * (1 - Math.abs(2 * light - 1));
-		var H = this.hue / 60;
-		var X = C * (1 - Math.abs(H % 2 - 1));
-		var m = light - C/2;
-		var precision = 255;
-
-		C = (C + m) * precision | 0;
-		X = (X + m) * precision | 0;
-		m = m * precision | 0;
-
-		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
-		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
-		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
-		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
-		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
-		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
-	};
-
-	Color.prototype.RGBtoHSV = function RGBtoHSV() {
-		var red		= this.r / 255;
-		var green	= this.g / 255;
-		var blue	= this.b / 255;
-
-		var cmax = Math.max(red, green, blue);
-		var cmin = Math.min(red, green, blue);
-		var delta = cmax - cmin;
-		var hue = 0;
-		var saturation = 0;
-
-		if (delta) {
-			if (cmax === red ) { hue = ((green - blue) / delta); }
-			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
-			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
-			if (cmax) saturation = delta / cmax;
-		}
-
-		this.hue = 60 * hue | 0;
-		if (this.hue < 0) this.hue += 360;
-		this.saturation = (saturation * 100) | 0;
-		this.value = (cmax * 100) | 0;
-	};
-
-	Color.prototype.RGBtoHSL = function RGBtoHSL() {
-		var red		= this.r / 255;
-		var green	= this.g / 255;
-		var blue	= this.b / 255;
-
-		var cmax = Math.max(red, green, blue);
-		var cmin = Math.min(red, green, blue);
-		var delta = cmax - cmin;
-		var hue = 0;
-		var saturation = 0;
-		var lightness = (cmax + cmin) / 2;
-		var X = (1 - Math.abs(2 * lightness - 1));
-
-		if (delta) {
-			if (cmax === red ) { hue = ((green - blue) / delta); }
-			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
-			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
-			if (cmax) saturation = delta / X;
-		}
-
-		this.hue = 60 * hue | 0;
-		if (this.hue < 0) this.hue += 360;
-		this.saturation = (saturation * 100) | 0;
-		this.lightness = (lightness * 100) | 0;
-	};
-
-	/*========== Get Methods ==========*/
-
-	Color.prototype.getHexa = function getHexa() {
-		var r = this.r.toString(16);
-		var g = this.g.toString(16);
-		var b = this.b.toString(16);
-		if (this.r < 16) r = '0' + r;
-		if (this.g < 16) g = '0' + g;
-		if (this.b < 16) b = '0' + b;
-		var value = '#' + r + g + b;
-		return value.toUpperCase();
-	};
-
-	Color.prototype.getRGBA = function getRGBA() {
-
-		var rgb = '(' + this.r + ', ' + this.g + ', ' + this.b;
-		var a = '';
-		var v = '';
-		var x = parseFloat(this.a);
-		if (x !== 1) {
-			a = 'a';
-			v = ', ' + x;
-		}
-
-		var value = 'rgb' + a + rgb + v + ')';
-		return value;
-	};
-
-	Color.prototype.getHSLA = function getHSLA() {
-		if (this.format === 'HSV') {
-			var color = new Color(this);
-			color.setFormat('HSL');
-			color.updateHSX();
-			return color.getHSLA();
-		}
-
-		var a = '';
-		var v = '';
-		var hsl = '(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness +'%';
-		var x = parseFloat(this.a);
-		if (x !== 1) {
-			a = 'a';
-			v = ', ' + x;
-		}
-
-		var value = 'hsl' + a + hsl + v + ')';
-		return value;
-	};
-
-	Color.prototype.getColor = function getColor() {
-		if (this.a | 0 === 1)
-			return this.getHexa();
-		return this.getRGBA();
-	};
-
-	/*=======================================================================*/
-	/*=======================================================================*/
-
-	/*========== Capture Mouse Movement ==========*/
-
-	var setMouseTracking = function setMouseTracking(elem, callback) {
-		elem.addEventListener('mousedown', function(e) {
-			callback(e);
-			document.addEventListener('mousemove', callback);
-		});
-
-		document.addEventListener('mouseup', function(e) {
-			document.removeEventListener('mousemove', callback);
-		});
-	};
-
-	/*====================*/
-	// Color Picker Class
-	/*====================*/
-
-	function ColorPicker(node) {
-		this.color = new Color();
-		this.node = node;
-		this.subscribers = [];
-
-		var type = this.node.getAttribute('data-mode');
-		var topic = this.node.getAttribute('data-topic');
-
-		this.topic = topic;
-		this.picker_mode = (type === 'HSL') ? 'HSL' : 'HSV';
-		this.color.setFormat(this.picker_mode);
-
-		this.createPickingArea();
-		this.createHueArea();
-
-		this.newInputComponent('H', 'hue', this.inputChangeHue.bind(this));
-		this.newInputComponent('S', 'saturation', this.inputChangeSaturation.bind(this));
-		this.newInputComponent('V', 'value', this.inputChangeValue.bind(this));
-		this.newInputComponent('L', 'lightness', this.inputChangeLightness.bind(this));
-
-		this.createAlphaArea();
-
-		this.newInputComponent('R', 'red', this.inputChangeRed.bind(this));
-		this.newInputComponent('G', 'green', this.inputChangeGreen.bind(this));
-		this.newInputComponent('B', 'blue', this.inputChangeBlue.bind(this));
-
-		this.createPreviewBox();
-		this.createChangeModeButton();
-
-		this.newInputComponent('alpha', 'alpha', this.inputChangeAlpha.bind(this));
-		this.newInputComponent('hexa', 'hexa', this.inputChangeHexa.bind(this));
-
-		this.setColor(this.color);
-		pickers[topic] = this;
-	}
-
-	/*************************************************************************/
-	//				Function for generating the color-picker
-	/*************************************************************************/
-
-	ColorPicker.prototype.createPickingArea = function createPickingArea() {
-		var area = document.createElement('div');
-		var picker = document.createElement('div');
-
-		area.className = 'picking-area';
-		picker.className = 'picker';
-
-		this.picking_area = area;
-		this.color_picker = picker;
-		setMouseTracking(area, this.updateColor.bind(this));
-
-		area.appendChild(picker);
-		this.node.appendChild(area);
-	};
-
-	ColorPicker.prototype.createHueArea = function createHueArea() {
-		var area = document.createElement('div');
-		var picker = document.createElement('div');
-
-		area.className = 'hue';
-		picker.className ='slider-picker';
-
-		this.hue_area = area;
-		this.hue_picker = picker;
-		setMouseTracking(area, this.updateHueSlider.bind(this));
-
-		area.appendChild(picker);
-		this.node.appendChild(area);
-	};
-
-	ColorPicker.prototype.createAlphaArea = function createAlphaArea() {
-		var area = document.createElement('div');
-		var mask = document.createElement('div');
-		var picker = document.createElement('div');
-
-		area.className = 'alpha';
-		mask.className = 'alpha-mask';
-		picker.className = 'slider-picker';
-
-		this.alpha_area = area;
-		this.alpha_mask = mask;
-		this.alpha_picker = picker;
-		setMouseTracking(area, this.updateAlphaSlider.bind(this));
-
-		area.appendChild(mask);
-		mask.appendChild(picker);
-		this.node.appendChild(area);
-	};
-
-	ColorPicker.prototype.createPreviewBox = function createPreviewBox(e) {
-		var preview_box = document.createElement('div');
-		var preview_color = document.createElement('div');
-
-		preview_box.className = 'preview';
-		preview_color.className = 'preview-color';
-
-		this.preview_color = preview_color;
-
-		preview_box.appendChild(preview_color);
-		this.node.appendChild(preview_box);
-	};
-
-	ColorPicker.prototype.newInputComponent = function newInputComponent(title, topic, onChangeFunc) {
-		var wrapper = document.createElement('div');
-		var input = document.createElement('input');
-		var info = document.createElement('span');
-
-		wrapper.className = 'input';
-		wrapper.setAttribute('data-topic', topic);
-		info.textContent = title;
-		info.className = 'name';
-		input.setAttribute('type', 'text');
-
-		wrapper.appendChild(info);
-		wrapper.appendChild(input);
-		this.node.appendChild(wrapper);
-
-		input.addEventListener('change', onChangeFunc);
-		input.addEventListener('click', function() {
-			this.select();
-		});
-
-		this.subscribe(topic, function(value) {
-			input.value = value;
-		});
-	};
-
-	ColorPicker.prototype.createChangeModeButton = function createChangeModeButton() {
-
-		var button = document.createElement('div');
-		button.className = 'switch_mode';
-		button.addEventListener('click', function() {
-			if (this.picker_mode === 'HSV')
-				this.setPickerMode('HSL');
-			else
-				this.setPickerMode('HSV');
-
-		}.bind(this));
-
-		this.node.appendChild(button);
-	};
-
-	/*************************************************************************/
-	//					Updates properties of UI elements
-	/*************************************************************************/
-
-	ColorPicker.prototype.updateColor = function updateColor(e) {
-		var x = e.pageX - this.picking_area.offsetLeft;
-		var y = e.pageY - this.picking_area.offsetTop;
-		var picker_offset = 5;
-
-		// width and height should be the same
-		var size = this.picking_area.clientWidth;
-
-		if (x > size) x = size;
-		if (y > size) y = size;
-		if (x < 0) x = 0;
-		if (y < 0) y = 0;
-
-		var value = 100 - (y * 100 / size) | 0;
-		var saturation = x * 100 / size | 0;
-
-		if (this.picker_mode === 'HSV')
-			this.color.setHSV(this.color.hue, saturation, value);
-		if (this.picker_mode === 'HSL')
-			this.color.setHSL(this.color.hue, saturation, value);
-
-		this.color_picker.style.left = x - picker_offset + 'px';
-		this.color_picker.style.top = y - picker_offset + 'px';
-
-		this.updateAlphaGradient();
-		this.updatePreviewColor();
-
-		this.notify('value', value);
-		this.notify('lightness', value);
-		this.notify('saturation', saturation);
-
-		this.notify('red', this.color.r);
-		this.notify('green', this.color.g);
-		this.notify('blue', this.color.b);
-		this.notify('hexa', this.color.getHexa());
-
-		notify(this.topic, this.color);
-	};
-
-	ColorPicker.prototype.updateHueSlider = function updateHueSlider(e) {
-		var x = e.pageX - this.hue_area.offsetLeft;
-		var width = this.hue_area.clientWidth;
-
-		if (x < 0) x = 0;
-		if (x > width) x = width;
-
-		// TODO 360 => 359
-		var hue = ((359 * x) / width) | 0;
-		// if (hue === 360) hue = 359;
-
-		this.updateSliderPosition(this.hue_picker, x);
-		this.setHue(hue);
-	};
-
-	ColorPicker.prototype.updateAlphaSlider = function updateAlphaSlider(e) {
-		var x = e.pageX - this.alpha_area.offsetLeft;
-		var width = this.alpha_area.clientWidth;
-
-		if (x < 0) x = 0;
-		if (x > width) x = width;
-
-		this.color.a = (x / width).toFixed(2);
-
-		this.updateSliderPosition(this.alpha_picker, x);
-		this.updatePreviewColor();
-
-		this.notify('alpha', this.color.a);
-		notify(this.topic, this.color);
-	};
-
-	ColorPicker.prototype.setHue = function setHue(value) {
-		this.color.setHue(value);
-
-		this.updatePickerBackground();
-		this.updateAlphaGradient();
-		this.updatePreviewColor();
-
-		this.notify('red', this.color.r);
-		this.notify('green', this.color.g);
-		this.notify('blue', this.color.b);
-		this.notify('hexa', this.color.getHexa());
-		this.notify('hue', this.color.hue);
-
-		notify(this.topic, this.color);
-	};
-
-	// Updates when one of Saturation/Value/Lightness changes
-	ColorPicker.prototype.updateSLV = function updateSLV() {
-		this.updatePickerPosition();
-		this.updateAlphaGradient();
-		this.updatePreviewColor();
-
-		this.notify('red', this.color.r);
-		this.notify('green', this.color.g);
-		this.notify('blue', this.color.b);
-		this.notify('hexa', this.color.getHexa());
-
-		notify(this.topic, this.color);
-	};
-
-	/*************************************************************************/
-	//				Update positions of various UI elements
-	/*************************************************************************/
-
-	ColorPicker.prototype.updatePickerPosition = function updatePickerPosition() {
-		var size = this.picking_area.clientWidth;
-		var value = 0;
-		var offset = 5;
-
-		if (this.picker_mode === 'HSV')
-			value = this.color.value;
-		if (this.picker_mode === 'HSL')
-			value = this.color.lightness;
-
-		var x = (this.color.saturation * size / 100) | 0;
-		var y = size - (value * size / 100) | 0;
-
-		this.color_picker.style.left = x - offset + 'px';
-		this.color_picker.style.top = y - offset + 'px';
-	};
-
-	ColorPicker.prototype.updateSliderPosition = function updateSliderPosition(elem, pos) {
-		elem.style.left = Math.max(pos - 3, -2) + 'px';
-	};
-
-	ColorPicker.prototype.updateHuePicker = function updateHuePicker() {
-		var size = this.hue_area.clientWidth;
-		var offset = 1;
-		var pos = (this.color.hue * size / 360 ) | 0;
-		this.hue_picker.style.left = pos - offset + 'px';
-	};
-
-	ColorPicker.prototype.updateAlphaPicker = function updateAlphaPicker() {
-		var size = this.alpha_area.clientWidth;
-		var offset = 1;
-		var pos = (this.color.a * size) | 0;
-		this.alpha_picker.style.left = pos - offset + 'px';
-	};
-
-	/*************************************************************************/
-	//						Update background colors
-	/*************************************************************************/
-
-	ColorPicker.prototype.updatePickerBackground = function updatePickerBackground() {
-		var nc = new Color(this.color);
-		nc.setHSV(nc.hue, 100, 100);
-		this.picking_area.style.backgroundColor = nc.getHexa();
-	};
-
-	ColorPicker.prototype.updateAlphaGradient = function updateAlphaGradient() {
-		this.alpha_mask.style.backgroundColor = this.color.getHexa();
-	};
-
-	ColorPicker.prototype.updatePreviewColor = function updatePreviewColor() {
-		this.preview_color.style.backgroundColor = this.color.getColor();
-	};
-
-	/*************************************************************************/
-	//						Update input elements
-	/*************************************************************************/
-
-	ColorPicker.prototype.inputChangeHue = function inputChangeHue(e) {
-		var value = parseInt(e.target.value);
-		this.setHue(value);
-		this.updateHuePicker();
-	};
-
-	ColorPicker.prototype.inputChangeSaturation = function inputChangeSaturation(e) {
-		var value = parseInt(e.target.value);
-		this.color.setSaturation(value);
-		e.target.value = this.color.saturation;
-		this.updateSLV();
-	};
-
-	ColorPicker.prototype.inputChangeValue = function inputChangeValue(e) {
-		var value = parseInt(e.target.value);
-		this.color.setValue(value);
-		e.target.value = this.color.value;
-		this.updateSLV();
-	};
-
-	ColorPicker.prototype.inputChangeLightness = function inputChangeLightness(e) {
-		var value = parseInt(e.target.value);
-		this.color.setLightness(value);
-		e.target.value = this.color.lightness;
-		this.updateSLV();
-	};
-
-	ColorPicker.prototype.inputChangeRed = function inputChangeRed(e) {
-		var value = parseInt(e.target.value);
-		this.color.setByName('r', value);
-		e.target.value = this.color.r;
-		this.setColor(this.color);
-	};
-
-	ColorPicker.prototype.inputChangeGreen = function inputChangeGreen(e) {
-		var value = parseInt(e.target.value);
-		this.color.setByName('g', value);
-		e.target.value = this.color.g;
-		this.setColor(this.color);
-	};
-
-	ColorPicker.prototype.inputChangeBlue = function inputChangeBlue(e) {
-		var value = parseInt(e.target.value);
-		this.color.setByName('b', value);
-		e.target.value = this.color.b;
-		this.setColor(this.color);
-	};
-
-	ColorPicker.prototype.inputChangeAlpha = function inputChangeAlpha(e) {
-		var value = parseFloat(e.target.value);
-
-		if (typeof value === 'number' && isNaN(value) === false &&
-			value >= 0 && value <= 1)
-			this.color.a = value.toFixed(2);
-
-		e.target.value = this.color.a;
-		this.updateAlphaPicker();
-	};
-
-	ColorPicker.prototype.inputChangeHexa = function inputChangeHexa(e) {
-		var value = e.target.value;
-		this.color.setHexa(value);
-		this.setColor(this.color);
-	};
-
-	/*************************************************************************/
-	//							Internal Pub/Sub
-	/*************************************************************************/
-
-	ColorPicker.prototype.subscribe = function subscribe(topic, callback) {
-		this.subscribers[topic] = callback;
-	};
-
-	ColorPicker.prototype.notify = function notify(topic, value) {
-		if (this.subscribers[topic])
-			this.subscribers[topic](value);
-	};
-
-	/*************************************************************************/
-	//							Set Picker Properties
-	/*************************************************************************/
-
-	ColorPicker.prototype.setColor = function setColor(color) {
-		if(color instanceof Color !== true) {
-			console.log('Typeof parameter not Color');
-			return;
-		}
-
-		if (color.format !== this.picker_mode) {
-			color.setFormat(this.picker_mode);
-			color.updateHSX();
-		}
-
-		this.color.copy(color);
-		this.updateHuePicker();
-		this.updatePickerPosition();
-		this.updatePickerBackground();
-		this.updateAlphaPicker();
-		this.updateAlphaGradient();
-		this.updatePreviewColor();
-
-		this.notify('red', this.color.r);
-		this.notify('green', this.color.g);
-		this.notify('blue', this.color.b);
-
-		this.notify('hue', this.color.hue);
-		this.notify('saturation', this.color.saturation);
-		this.notify('value', this.color.value);
-		this.notify('lightness', this.color.lightness);
-
-		this.notify('alpha', this.color.a);
-		this.notify('hexa', this.color.getHexa());
-		notify(this.topic, this.color);
-	};
-
-	ColorPicker.prototype.setPickerMode = function setPickerMode(mode) {
-		if (mode !== 'HSV' && mode !== 'HSL')
-			return;
-
-		this.picker_mode = mode;
-		this.node.setAttribute('data-mode', this.picker_mode);
-		this.setColor(this.color);
-	};
-
-	/*************************************************************************/
-	//								UNUSED
-	/*************************************************************************/
-
-	var setPickerMode = function setPickerMode(topic, mode) {
-		if (pickers[topic])
-			pickers[topic].setPickerMode(mode);
-	};
-
-	var setColor = function setColor(topic, color) {
-		if (pickers[topic])
-			pickers[topic].setColor(color);
-	};
-
-	var getColor = function getColor(topic) {
-		if (pickers[topic])
-			return new Color(pickers[topic].color);
-	};
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-
-		subscribers[topic].push(callback);
-	};
-
-	var unsubscribe = function unsubscribe(callback) {
-		subscribers.indexOf(callback);
-		subscribers.splice(index, 1);
-	};
-
-	var notify = function notify(topic, value) {
-		if (subscribers[topic] === undefined || subscribers[topic].length === 0)
-			return;
-
-		var color = new Color(value);
-		for (var i in subscribers[topic])
-			subscribers[topic][i](color);
-	};
-
-	var init = function init() {
-		var elem = document.querySelectorAll('.ui-color-picker');
-		var size = elem.length;
-		for (var i = 0; i < size; i++)
-			new ColorPicker(elem[i]);
-	};
-
-	return {
-		init : init,
-		Color : Color,
-		RGBColor : RGBColor,
-		RGBAColor : RGBAColor,
-		HSVColor : HSVColor,
-		HSVAColor : HSVAColor,
-		HSLColor : HSLColor,
-		HSLAColor : HSLAColor,
-		setColor : setColor,
-		getColor : getColor,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe,
-		setPickerMode : setPickerMode
-	};
-
-})();
-
-
-
-/**
- * UI-SlidersManager
- */
-
-var InputSliderManager = (function InputSliderManager() {
-
-	var subscribers = {};
-	var sliders = [];
-
-	var InputComponent = function InputComponent(obj) {
-		var input = document.createElement('input');
-		input.setAttribute('type', 'text');
-		input.style.width = 50 + obj.precision * 10 + 'px';
-
-		input.addEventListener('click', function(e) {
-			this.select();
-		});
-
-		input.addEventListener('change', function(e) {
-			var value = parseFloat(e.target.value);
-
-			if (isNaN(value) === true)
-				setValue(obj.topic, obj.value);
-			else
-				setValue(obj.topic, value);
-		});
-
-		return input;
-	};
-
-	var SliderComponent = function SliderComponent(obj, sign) {
-		var slider = document.createElement('div');
-		var startX = null;
-		var start_value = 0;
-
-		slider.addEventListener("click", function(e) {
-			document.removeEventListener("mousemove", sliderMotion);
-			setValue(obj.topic, obj.value + obj.step * sign);
-		});
-
-		slider.addEventListener("mousedown", function(e) {
-			startX = e.clientX;
-			start_value = obj.value;
-			document.body.style.cursor = "e-resize";
-
-			document.addEventListener("mouseup", slideEnd);
-			document.addEventListener("mousemove", sliderMotion);
-		});
-
-		var slideEnd = function slideEnd(e) {
-			document.removeEventListener("mousemove", sliderMotion);
-			document.body.style.cursor = "auto";
-			slider.style.cursor = "pointer";
-		};
-
-		var sliderMotion = function sliderMotion(e) {
-			slider.style.cursor = "e-resize";
-			var delta = (e.clientX - startX) / obj.sensivity | 0;
-			var value = delta * obj.step + start_value;
-			setValue(obj.topic, value);
-		};
-
-		return slider;
-	};
-
-	var InputSlider = function(node) {
-		var min		= parseFloat(node.getAttribute('data-min'));
-		var max		= parseFloat(node.getAttribute('data-max'));
-		var step	= parseFloat(node.getAttribute('data-step'));
-		var value	= parseFloat(node.getAttribute('data-value'));
-		var topic	= node.getAttribute('data-topic');
-		var unit	= node.getAttribute('data-unit');
-		var name 	= node.getAttribute('data-info');
-		var sensivity = node.getAttribute('data-sensivity') | 0;
-		var precision = node.getAttribute('data-precision') | 0;
-
-		this.min = isNaN(min) ? 0 : min;
-		this.max = isNaN(max) ? 100 : max;
-		this.precision = precision >= 0 ? precision : 0;
-		this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision);
-		this.topic = topic;
-		this.node = node;
-		this.unit = unit === null ? '' : unit;
-		this.sensivity = sensivity > 0 ? sensivity : 5;
-		value = isNaN(value) ? this.min : value;
-
-		var input = new InputComponent(this);
-		var slider_left  = new SliderComponent(this, -1);
-		var slider_right = new SliderComponent(this,  1);
-
-		slider_left.className = 'ui-input-slider-left';
-		slider_right.className = 'ui-input-slider-right';
-
-		if (name) {
-			var info = document.createElement('span');
-			info.className = 'ui-input-slider-info';
-			info.textContent = name;
-			node.appendChild(info);
-		}
-
-		node.appendChild(slider_left);
-		node.appendChild(input);
-		node.appendChild(slider_right);
-
-		this.input = input;
-		sliders[topic] = this;
-		setValue(topic, value);
-	};
-
-	InputSlider.prototype.setInputValue = function setInputValue() {
-		this.input.value = this.value.toFixed(this.precision) + this.unit;
-	};
-
-	var setValue = function setValue(topic, value, send_notify) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = parseFloat(value.toFixed(slider.precision));
-
-		if (value > slider.max) value = slider.max;
-		if (value < slider.min)	value = slider.min;
-
-		slider.value = value;
-		slider.node.setAttribute('data-value', value);
-
-		slider.setInputValue();
-
-		if (send_notify === false)
-			return;
-
-		notify.call(slider);
-	};
-
-	var setMax = function setMax(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.max = value;
-		setValue(topic, slider.value);
-	};
-
-	var setMin = function setMin(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.min = value;
-		setValue(topic, slider.value);
-	};
-
-	var setUnit = function setUnit(topic, unit) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.unit = unit;
-		setValue(topic, slider.value);
-	};
-
-	var setStep = function setStep(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.step = parseFloat(value);
-		setValue(topic, slider.value);
-	};
-
-	var setPrecision = function setPrecision(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = value | 0;
-		slider.precision = value;
-
-		var step = parseFloat(slider.step.toFixed(value));
-		if (step === 0)
-			slider.step = 1 / Math.pow(10, value);
-
-		setValue(topic, slider.value);
-	};
-
-	var setSensivity = function setSensivity(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = value | 0;
-
-		slider.sensivity = value > 0 ? value : 5;
-	};
-
-	var getNode =  function getNode(topic) {
-		return sliders[topic].node;
-	};
-
-	var getPrecision =  function getPrecision(topic) {
-		return sliders[topic].precision;
-	};
-
-	var getStep =  function getStep(topic) {
-		return sliders[topic].step;
-	};
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-		subscribers[topic].push(callback);
-	};
-
-	var unsubscribe = function unsubscribe(topic, callback) {
-		subscribers[topic].indexOf(callback);
-		subscribers[topic].splice(index, 1);
-	};
-
-	var notify = function notify() {
-		if (subscribers[this.topic] === undefined)
-			return;
-		for (var i = 0; i < subscribers[this.topic].length; i++)
-			subscribers[this.topic][i](this.value);
-	};
-
-	var createSlider = function createSlider(topic, label) {
-		var slider = document.createElement('div');
-		slider.className = 'ui-input-slider';
-		slider.setAttribute('data-topic', topic);
-
-		if (label !== undefined)
-			slider.setAttribute('data-info', label);
-
-		new InputSlider(slider);
-		return slider;
-	};
-
-	var init = function init() {
-		var elem = document.querySelectorAll('.ui-input-slider');
-		var size = elem.length;
-		for (var i = 0; i < size; i++)
-			new InputSlider(elem[i]);
-	};
-
-	return {
-		init : init,
-		setMax : setMax,
-		setMin : setMin,
-		setUnit : setUnit,
-		setStep : setStep,
-		getNode : getNode,
-		getStep : getStep,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe,
-		setPrecision : setPrecision,
-		setSensivity : setSensivity,
-		getPrecision : getPrecision,
-		createSlider : createSlider,
-	};
-
-})();
-
-
-'use strict';
-
-window.addEventListener("load", function() {
-	ColorPickerTool.init();
-});
-
-var ColorPickerTool = (function ColorPickerTool() {
-
-	/*========== Get DOM Element By ID ==========*/
-
-	function getElemById(id) {
-		return document.getElementById(id);
-	}
-
-	function allowDropEvent(e) {
-		e.preventDefault();
-	}
-
-	/*========== Make an element resizable relative to it's parent ==========*/
-
-	var UIComponent = (function UIComponent() {
-
-		function makeResizable(elem, axis) {
-			var valueX = 0;
-			var valueY = 0;
-			var action = 0;
-
-			var resizeStart = function resizeStart(e) {
-				e.stopPropagation();
-				e.preventDefault();
-				if (e.button !== 0)
-					return;
-
-				valueX = e.clientX - elem.clientWidth;
-				valueY = e.clientY - elem.clientHeight;
-
-				document.body.setAttribute('data-resize', axis);
-				document.addEventListener('mousemove', mouseMove);
-				document.addEventListener('mouseup', resizeEnd);
-			};
-
-			var mouseMove = function mouseMove(e) {
-				if (action >= 0)
-					elem.style.width = e.clientX - valueX + 'px';
-				if (action <= 0)
-					elem.style.height = e.clientY - valueY + 'px';
-			};
-
-			var resizeEnd = function resizeEnd(e) {
-				if (e.button !== 0)
-					return;
-
-				document.body.removeAttribute('data-resize', axis);
-				document.removeEventListener('mousemove', mouseMove);
-				document.removeEventListener('mouseup', resizeEnd);
-			};
-
-			var handle = document.createElement('div');
-			handle.className = 'resize-handle';
-
-			if (axis === 'width') action = 1;
-			else if (axis === 'height') action = -1;
-			else axis = 'both';
-
-			handle.className = 'resize-handle';
-			handle.setAttribute('data-resize', axis);
-			handle.addEventListener('mousedown', resizeStart);
-			elem.appendChild(handle);
-		};
-
-		/*========== Make an element draggable relative to it's parent ==========*/
-
-		var makeDraggable = function makeDraggable(elem, endFunction) {
-
-			var offsetTop;
-			var offsetLeft;
-
-			elem.setAttribute('data-draggable', 'true');
-
-			var dragStart = function dragStart(e) {
-				e.preventDefault();
-				e.stopPropagation();
-
-				if (e.target.getAttribute('data-draggable') !== 'true' ||
-					e.target !== elem || e.button !== 0)
-					return;
-
-				offsetLeft = e.clientX - elem.offsetLeft;
-				offsetTop = e.clientY - elem.offsetTop;
-
-				document.addEventListener('mousemove', mouseDrag);
-				document.addEventListener('mouseup', dragEnd);
-			};
-
-			var dragEnd = function dragEnd(e) {
-				if (e.button !== 0)
-					return;
-
-				document.removeEventListener('mousemove', mouseDrag);
-				document.removeEventListener('mouseup', dragEnd);
-			};
-
-			var mouseDrag = function mouseDrag(e) {
-				elem.style.left = e.clientX - offsetLeft + 'px';
-				elem.style.top = e.clientY - offsetTop + 'px';
-			};
-
-			elem.addEventListener('mousedown', dragStart, false);
-		};
-
-		return {
-			makeResizable : makeResizable,
-			makeDraggable : makeDraggable
-		};
-
-	})();
-
-	/*========== Color Class ==========*/
-
-	var Color = UIColorPicker.Color;
-	var HSLColor = UIColorPicker.HSLColor;
-
-	/**
-	 * ColorPalette
-	 */
-	var ColorPalette = (function ColorPalette() {
-
-		var samples = [];
-		var color_palette;
-		var complementary;
-
-		var hideNode = function(node) {
-			node.setAttribute('data-hidden', 'true');
-		};
-
-		var ColorSample = function ColorSample(id) {
-			var node = document.createElement('div');
-			node.className = 'sample';
-
-			this.uid = samples.length;
-			this.node = node;
-			this.color = new Color();
-
-			node.setAttribute('sample-id', this.uid);
-			node.setAttribute('draggable', 'true');
-			node.addEventListener('dragstart', this.dragStart.bind(this));
-			node.addEventListener('click', this.pickColor.bind(this));
-
-			samples.push(this);
-		};
-
-		ColorSample.prototype.updateBgColor = function updateBgColor() {
-			this.node.style.backgroundColor = this.color.getColor();
-		};
-
-		ColorSample.prototype.updateColor = function updateColor(color) {
-			this.color.copy(color);
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.updateHue = function updateHue(color, degree, steps) {
-			this.color.copy(color);
-			var hue = (steps * degree + this.color.hue) % 360;
-			if (hue < 0) hue += 360;
-			this.color.setHue(hue);
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.updateSaturation = function updateSaturation(color, value, steps) {
-			var saturation = color.saturation + value * steps;
-			if (saturation <= 0) {
-				this.node.setAttribute('data-hidden', 'true');
-				return;
-			}
-
-			this.node.removeAttribute('data-hidden');
-			this.color.copy(color);
-			this.color.setSaturation(saturation);
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.updateLightness = function updateLightness(color, value, steps) {
-			var lightness = color.lightness + value * steps;
-			if (lightness <= 0) {
-				this.node.setAttribute('data-hidden', 'true');
-				return;
-			}
-			this.node.removeAttribute('data-hidden');
-			this.color.copy(color);
-			this.color.setLightness(lightness);
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.updateBrightness = function updateBrightness(color, value, steps) {
-			var brightness = color.value + value * steps;
-			if (brightness <= 0) {
-				this.node.setAttribute('data-hidden', 'true');
-				return;
-			}
-			this.node.removeAttribute('data-hidden');
-			this.color.copy(color);
-			this.color.setValue(brightness);
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.updateAlpha = function updateAlpha(color, value, steps) {
-			var alpha = parseFloat(color.a) + value * steps;
-			if (alpha <= 0) {
-				this.node.setAttribute('data-hidden', 'true');
-				return;
-			}
-			this.node.removeAttribute('data-hidden');
-			this.color.copy(color);
-			this.color.a = parseFloat(alpha.toFixed(2));
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.pickColor = function pickColor() {
-			UIColorPicker.setColor('picker', this.color);
-		};
-
-		ColorSample.prototype.dragStart = function dragStart(e) {
-			e.dataTransfer.setData('sampleID', this.uid);
-			e.dataTransfer.setData('location', 'palette-samples');
-		};
-
-		var Palette = function Palette(text, size) {
-			this.samples = [];
-			this.locked = false;
-
-			var palette = document.createElement('div');
-			var title = document.createElement('div');
-			var controls = document.createElement('div');
-			var container = document.createElement('div');
-			var lock = document.createElement('div');
-
-			container.className = 'container';
-			title.className = 'title';
-			palette.className = 'palette';
-			controls.className = 'controls';
-			lock.className = 'lock';
-			title.textContent = text;
-
-			controls.appendChild(lock);
-			container.appendChild(title);
-			container.appendChild(controls);
-			container.appendChild(palette);
-
-			lock.addEventListener('click', function () {
-				this.locked = !this.locked;
-				lock.setAttribute('locked-state', this.locked);
-			}.bind(this));
-
-			for(var i = 0; i < size; i++) {
-				var sample = new ColorSample();
-				this.samples.push(sample);
-				palette.appendChild(sample.node);
-			}
-
-			this.container = container;
-			this.title = title;
-		};
-
-		var createHuePalette = function createHuePalette() {
-			var palette = new Palette('Hue', 12);
-
-			UIColorPicker.subscribe('picker', function(color) {
-				if (palette.locked === true)
-					return;
-
-				for(var i = 0; i < 12; i++) {
-					palette.samples[i].updateHue(color, 30, i);
-				}
-			});
-
-			color_palette.appendChild(palette.container);
-		};
-
-		var createSaturationPalette = function createSaturationPalette() {
-			var palette = new Palette('Saturation', 11);
-
-			UIColorPicker.subscribe('picker', function(color) {
-				if (palette.locked === true)
-					return;
-
-				for(var i = 0; i < 11; i++) {
-					palette.samples[i].updateSaturation(color, -10, i);
-				}
-			});
-
-			color_palette.appendChild(palette.container);
-		};
-
-		/* Brightness or Lightness - depends on the picker mode */
-		var createVLPalette = function createSaturationPalette() {
-			var palette = new Palette('Lightness', 11);
-
-			UIColorPicker.subscribe('picker', function(color) {
-				if (palette.locked === true)
-					return;
-
-				if(color.format === 'HSL') {
-					palette.title.textContent = 'Lightness';
-					for(var i = 0; i < 11; i++)
-						palette.samples[i].updateLightness(color, -10, i);
-				}
-				else {
-					palette.title.textContent = 'Value';
-					for(var i = 0; i < 11; i++)
-						palette.samples[i].updateBrightness(color, -10, i);
-				}
-			});
-
-			color_palette.appendChild(palette.container);
-		};
-
-		var isBlankPalette = function isBlankPalette(container, value) {
-			if (value === 0) {
-				container.setAttribute('data-collapsed', 'true');
-				return true;
-			}
-
-			container.removeAttribute('data-collapsed');
-			return false;
-		};
-
-		var createAlphaPalette = function createAlphaPalette() {
-			var palette = new Palette('Alpha', 10);
-
-			UIColorPicker.subscribe('picker', function(color) {
-				if (palette.locked === true)
-					return;
-
-				for(var i = 0; i < 10; i++) {
-					palette.samples[i].updateAlpha(color, -0.1, i);
-				}
-			});
-
-			color_palette.appendChild(palette.container);
-		};
-
-		var getSampleColor = function getSampleColor(id) {
-			if (samples[id] !== undefined && samples[id]!== null)
-				return new Color(samples[id].color);
-		};
-
-		var init = function init() {
-			color_palette = getElemById('color-palette');
-
-			createHuePalette();
-			createSaturationPalette();
-			createVLPalette();
-			createAlphaPalette();
-
-		};
-
-		return {
-			init : init,
-			getSampleColor : getSampleColor
-		};
-
-	})();
-
-	/**
-	 * ColorInfo
-	 */
-	var ColorInfo = (function ColorInfo() {
-
-		var info_box;
-		var select;
-		var RGBA;
-		var HEXA;
-		var HSLA;
-
-		var updateInfo = function updateInfo(color) {
-			if (color.a | 0 === 1) {
-				RGBA.info.textContent = 'RGB';
-				HSLA.info.textContent = 'HSL';
-			}
-			else {
-				RGBA.info.textContent = 'RGBA';
-				HSLA.info.textContent = 'HSLA';
-			}
-
-			RGBA.value.value = color.getRGBA();
-			HSLA.value.value = color.getHSLA();
-			HEXA.value.value = color.getHexa();
-		};
-
-		var InfoProperty = function InfoProperty(info) {
-
-			var node = document.createElement('div');
-			var title = document.createElement('div');
-			var value = document.createElement('input');
-			var copy = document.createElement('div');
-
-			node.className = 'property';
-			title.className = 'type';
-			value.className = 'value';
-			copy.className = 'copy';
-
-			title.textContent = info;
-			value.setAttribute('type', 'text');
-
-			copy.addEventListener('click', function() {
-				value.select();
-			});
-
-			node.appendChild(title);
-			node.appendChild(value);
-			node.appendChild(copy);
-
-			this.node = node;
-			this.value = value;
-			this.info = title;
-
-			info_box.appendChild(node);
-		};
-
-		var init = function init() {
-
-			info_box = getElemById('color-info');
-
-			RGBA = new InfoProperty('RGBA');
-			HSLA = new InfoProperty('HSLA');
-			HEXA = new InfoProperty('HEXA');
-
-			UIColorPicker.subscribe('picker', updateInfo);
-
-		};
-
-		return {
-			init: init
-		};
-
-	})();
-
-	/**
-	 * ColorPicker Samples
-	 */
-	var ColorPickerSamples = (function ColorPickerSamples() {
-
-		var samples = [];
-		var nr_samples = 0;
-		var active = null;
-		var container = null;
-		var	samples_per_line = 10;
-		var trash_can = null;
-		var base_color = new HSLColor(0, 50, 100);
-		var add_btn;
-		var add_btn_pos;
-
-		var ColorSample = function ColorSample() {
-			var node = document.createElement('div');
-			node.className = 'sample';
-
-			this.uid = samples.length;
-			this.index = nr_samples++;
-			this.node = node;
-			this.color = new Color(base_color);
-
-			node.setAttribute('sample-id', this.uid);
-			node.setAttribute('draggable', 'true');
-
-			node.addEventListener('dragstart', this.dragStart.bind(this));
-			node.addEventListener('dragover' , allowDropEvent);
-			node.addEventListener('drop'     , this.dragDrop.bind(this));
-
-			this.updatePosition(this.index);
-			this.updateBgColor();
-			samples.push(this);
-		};
-
-		ColorSample.prototype.updateBgColor = function updateBgColor() {
-			this.node.style.backgroundColor = this.color.getColor();
-		};
-
-		ColorSample.prototype.updatePosition = function updatePosition(index) {
-			this.index = index;
-			this.posY = 5 + ((index / samples_per_line) | 0) * 52;
-			this.posX = 5 + ((index % samples_per_line) | 0) * 52;
-			this.node.style.top  = this.posY + 'px';
-			this.node.style.left = this.posX + 'px';
-		};
-
-		ColorSample.prototype.updateColor = function updateColor(color) {
-			this.color.copy(color);
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.activate = function activate() {
-			UIColorPicker.setColor('picker', this.color);
-			this.node.setAttribute('data-active', 'true');
-		};
-
-		ColorSample.prototype.deactivate = function deactivate() {
-			this.node.removeAttribute('data-active');
-		};
-
-		ColorSample.prototype.dragStart = function dragStart(e) {
-			e.dataTransfer.setData('sampleID', this.uid);
-			e.dataTransfer.setData('location', 'picker-samples');
-		};
-
-		ColorSample.prototype.dragDrop = function dragDrop(e) {
-			e.stopPropagation();
-			this.color = Tool.getSampleColorFrom(e);
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.deleteSample = function deleteSample() {
-			container.removeChild(this.node);
-			samples[this.uid] = null;
-			nr_samples--;
-		};
-
-		var updateUI = function updateUI() {
-			updateContainerProp();
-
-			var index = 0;
-			var nr = samples.length;
-			for (var i=0; i < nr; i++)
-				if (samples[i] !== null) {
-					samples[i].updatePosition(index);
-					index++;
-				}
-
-			AddSampleButton.updatePosition(index);
-		};
-
-		var deleteSample = function deleteSample(e) {
-			trash_can.parentElement.setAttribute('drag-state', 'none');
-
-			var location = e.dataTransfer.getData('location');
-			if (location !== 'picker-samples')
-				return;
-
-			var sampleID = e.dataTransfer.getData('sampleID');
-			samples[sampleID].deleteSample();
-			console.log(samples);
-
-			updateUI();
-		};
-
-		var createDropSample = function createDropSample() {
-			var sample = document.createElement('div');
-			sample.id = 'drop-effect-sample';
-			sample.className = 'sample';
-			container.appendChild(sample);
-		};
-
-		var setActivateSample = function setActivateSample(e) {
-			if (e.target.className !== 'sample')
-				return;
-
-			unsetActiveSample(active);
-			Tool.unsetVoidSample();
-			CanvasSamples.unsetActiveSample();
-			active = samples[e.target.getAttribute('sample-id')];
-			active.activate();
-		};
-
-		var unsetActiveSample = function unsetActiveSample() {
-			if (active)
-				active.deactivate();
-			active = null;
-		};
-
-		var getSampleColor = function getSampleColor(id) {
-			if (samples[id] !== undefined && samples[id]!== null)
-				return new Color(samples[id].color);
-		};
-
-		var updateContainerProp = function updateContainerProp() {
-			samples_per_line = ((container.clientWidth - 5) / 52) | 0;
-			var height = 52 * (1 + (nr_samples / samples_per_line) | 0);
-			container.style.height = height + 10 + 'px';
-		};
-
-		var AddSampleButton = (function AddSampleButton() {
-			var node;
-			var _index = 0;
-			var _posX;
-			var _posY;
-
-			var updatePosition = function updatePosition(index) {
-				_index = index;
-				_posY = 5 + ((index / samples_per_line) | 0) * 52;
-				_posX = 5 + ((index % samples_per_line) | 0) * 52;
-
-				node.style.top  = _posY + 'px';
-				node.style.left = _posX + 'px';
-			};
-
-			var addButtonClick = function addButtonClick() {
-				var sample = new ColorSample();
-				container.appendChild(sample.node);
-				updatePosition(_index + 1);
-				updateUI();
-			};
-
-			var init = function init() {
-				node = document.createElement('div');
-				var icon = document.createElement('div');
-
-				node.className = 'sample';
-				icon.id = 'add-icon';
-				node.appendChild(icon);
-				node.addEventListener('click', addButtonClick);
-
-				updatePosition(0);
-				container.appendChild(node);
-			};
-
-			return {
-				init : init,
-				updatePosition : updatePosition
-			};
-		})();
-
-		var init = function init() {
-			container = getElemById('picker-samples');
-			trash_can = getElemById('trash-can');
-
-			AddSampleButton.init();
-
-			for (var i=0; i<16; i++) {
-				var sample = new ColorSample();
-				container.appendChild(sample.node);
-			}
-
-			AddSampleButton.updatePosition(samples.length);
-			updateUI();
-
-			active = samples[0];
-			active.activate();
-
-			container.addEventListener('click', setActivateSample);
-
-			trash_can.addEventListener('dragover', allowDropEvent);
-			trash_can.addEventListener('dragenter', function() {
-				this.parentElement.setAttribute('drag-state', 'enter');
-			});
-			trash_can.addEventListener('dragleave', function(e) {
-				this.parentElement.setAttribute('drag-state', 'none');
-			});
-			trash_can.addEventListener('drop', deleteSample);
-
-			UIColorPicker.subscribe('picker', function(color) {
-				if (active)
-					active.updateColor(color);
-			});
-
-		};
-
-		return {
-			init : init,
-			getSampleColor : getSampleColor,
-			unsetActiveSample : unsetActiveSample
-		};
-
-	})();
-
-	/**
-	 * Canvas Samples
-	 */
-	var CanvasSamples = (function CanvasSamples() {
-
-		var active = null;
-		var canvas = null;
-		var samples = [];
-		var zindex = null;
-		var tutorial = true;
-
-		var CanvasSample = function CanvasSample(color, posX, posY) {
-
-			var node = document.createElement('div');
-			var pick = document.createElement('div');
-			var delete_btn = document.createElement('div');
-			node.className = 'sample';
-			pick.className = 'pick';
-			delete_btn.className = 'delete';
-
-			this.uid = samples.length;
-			this.node = node;
-			this.color = color;
-			this.updateBgColor();
-			this.zIndex = 1;
-
-			node.style.top = posY - 50 + 'px';
-			node.style.left = posX - 50 + 'px';
-			node.setAttribute('sample-id', this.uid);
-
-			node.appendChild(pick);
-			node.appendChild(delete_btn);
-
-			var activate = function activate() {
-				setActiveSample(this);
-			}.bind(this);
-
-			node.addEventListener('dblclick', activate);
-			pick.addEventListener('click', activate);
-			delete_btn.addEventListener('click', this.deleteSample.bind(this));
-
-			UIComponent.makeDraggable(node);
-			UIComponent.makeResizable(node);
-
-			samples.push(this);
-			canvas.appendChild(node);
-			return this;
-		};
-
-		CanvasSample.prototype.updateBgColor = function updateBgColor() {
-			this.node.style.backgroundColor = this.color.getColor();
-		};
-
-		CanvasSample.prototype.updateColor = function updateColor(color) {
-			this.color.copy(color);
-			this.updateBgColor();
-		};
-
-		CanvasSample.prototype.updateZIndex = function updateZIndex(value) {
-			this.zIndex = value;
-			this.node.style.zIndex = value;
-		};
-
-		CanvasSample.prototype.activate = function activate() {
-			this.node.setAttribute('data-active', 'true');
-			zindex.setAttribute('data-active', 'true');
-
-			UIColorPicker.setColor('picker', this.color);
-			InputSliderManager.setValue('z-index', this.zIndex);
-		};
-
-		CanvasSample.prototype.deactivate = function deactivate() {
-			this.node.removeAttribute('data-active');
-			zindex.removeAttribute('data-active');
-		};
-
-		CanvasSample.prototype.deleteSample = function deleteSample() {
-			if (active === this)
-				unsetActiveSample();
-			canvas.removeChild(this.node);
-			samples[this.uid] = null;
-		};
-
-		CanvasSample.prototype.updatePosition = function updatePosition(posX, posY) {
-			this.node.style.top = posY - this.startY + 'px';
-			this.node.style.left = posX - this.startX + 'px';
-		};
-
-		var canvasDropEvent = function canvasDropEvent(e) {
-			var color = Tool.getSampleColorFrom(e);
-
-			if (color) {
-				var offsetX = e.pageX - canvas.offsetLeft;
-				var offsetY = e.pageY - canvas.offsetTop;
-				var sample = new CanvasSample(color, offsetX, offsetY);
-				if (tutorial) {
-					tutorial = false;
-					canvas.removeAttribute('data-tutorial');
-					var info = new CanvasSample(new Color(), 100, 100);
-					info.node.setAttribute('data-tutorial', 'dblclick');
-				}
-			}
-
-		};
-
-		var setActiveSample = function setActiveSample(sample) {
-			ColorPickerSamples.unsetActiveSample();
-			Tool.unsetVoidSample();
-			unsetActiveSample();
-			active = sample;
-			active.activate();
-		};
-
-		var unsetActiveSample = function unsetActiveSample() {
-			if (active)
-				active.deactivate();
-			active = null;
-		};
-
-		var createToggleBgButton = function createToggleBgButton() {
-			var button = document.createElement('div');
-			var state = false;
-			button.className = 'toggle-bg';
-			canvas.appendChild(button);
-
-			button.addEventListener('click', function() {
-				console.log(state);
-				state = !state;
-				canvas.setAttribute('data-bg', state);
-			});
-		};
-
-		var init = function init() {
-			canvas = getElemById('canvas');
-			zindex = getElemById('zindex');
-
-			canvas.addEventListener('dragover', allowDropEvent);
-			canvas.addEventListener('drop', canvasDropEvent);
-
-			createToggleBgButton();
-
-			UIColorPicker.subscribe('picker', function(color) {
-				if (active)	active.updateColor(color);
-			});
-
-			InputSliderManager.subscribe('z-index', function (value) {
-				if (active)	active.updateZIndex(value);
-			});
-
-			UIComponent.makeResizable(canvas, 'height');
-		};
-
-		return {
-			init : init,
-			unsetActiveSample : unsetActiveSample
-		};
-
-	})();
-
-	var StateButton = function StateButton(node, state) {
-		this.state = false;
-		this.callback = null;
-
-		node.addEventListener('click', function() {
-			this.state = !this.state;
-			if (typeof this.callback === "function")
-				this.callback(this.state);
-		}.bind(this));
-	};
-
-	StateButton.prototype.set = function set() {
-		this.state = true;
-		if (typeof this.callback === "function")
-			this.callback(this.state);
-	};
-
-	StateButton.prototype.unset = function unset() {
-		this.state = false;
-		if (typeof this.callback === "function")
-			this.callback(this.state);
-	};
-
-	StateButton.prototype.subscribe = function subscribe(func) {
-		this.callback = func;
-	};
-
-
-	/**
-	 * Tool
-	 */
-	var Tool = (function Tool() {
-
-		var samples = [];
-		var controls = null;
-		var void_sw;
-
-		var createPickerModeSwitch = function createPickerModeSwitch() {
-			var parent = getElemById('controls');
-			var icon = document.createElement('div');
-			var button = document.createElement('div');
-			var hsv = document.createElement('div');
-			var hsl = document.createElement('div');
-			var active = null;
-
-			icon.className = 'icon picker-icon';
-			button.className = 'switch';
-			button.appendChild(hsv);
-			button.appendChild(hsl);
-
-			hsv.textContent = 'HSV';
-			hsl.textContent = 'HSL';
-
-			active = hsl;
-			active.setAttribute('data-active', 'true');
-
-			function switchPickingModeTo(elem) {
-				active.removeAttribute('data-active');
-				active = elem;
-				active.setAttribute('data-active', 'true');
-				UIColorPicker.setPickerMode('picker', active.textContent);
-			};
-
-			var picker_sw = new StateButton(icon);
-			picker_sw.subscribe(function() {
-				if (active === hsv)
-					switchPickingModeTo(hsl);
-				else
-					switchPickingModeTo(hsv);
-			});
-
-			hsv.addEventListener('click', function() {
-				switchPickingModeTo(hsv);
-			});
-			hsl.addEventListener('click', function() {
-				switchPickingModeTo(hsl);
-			});
-
-			parent.appendChild(icon);
-			parent.appendChild(button);
-		};
-
-		var setPickerDragAndDrop = function setPickerDragAndDrop() {
-			var preview = document.querySelector('#picker .preview-color');
-			var picking_area = document.querySelector('#picker .picking-area');
-
-			preview.setAttribute('draggable', 'true');
-			preview.addEventListener('drop', drop);
-			preview.addEventListener('dragstart', dragStart);
-			preview.addEventListener('dragover', allowDropEvent);
-
-			picking_area.addEventListener('drop', drop);
-			picking_area.addEventListener('dragover', allowDropEvent);
-
-			function drop(e) {
-				var color = getSampleColorFrom(e);
-				UIColorPicker.setColor('picker', color);
-			};
-
-			function dragStart(e) {
-				e.dataTransfer.setData('sampleID', 'picker');
-				e.dataTransfer.setData('location', 'picker');
-			};
-		};
-
-		var getSampleColorFrom = function getSampleColorFrom(e) {
-			var sampleID = e.dataTransfer.getData('sampleID');
-			var location = e.dataTransfer.getData('location');
-
-			if (location === 'picker')
-				return UIColorPicker.getColor(sampleID);
-			if (location === 'picker-samples')
-				return ColorPickerSamples.getSampleColor(sampleID);
-			if (location === 'palette-samples')
-				return ColorPalette.getSampleColor(sampleID);
-		};
-
-		var setVoidSwitch = function setVoidSwitch() {
-			var void_sample = getElemById('void-sample');
-			void_sw = new StateButton(void_sample);
-			void_sw.subscribe( function (state) {
-				void_sample.setAttribute('data-active', state);
-				if (state === true) {
-					ColorPickerSamples.unsetActiveSample();
-					CanvasSamples.unsetActiveSample();
-				}
-			});
-		};
-
-		var unsetVoidSample = function unsetVoidSample() {
-			void_sw.unset();
-		};
-
-		var init = function init() {
-			controls = getElemById('controls');
-
-			var color = new Color();
-			color.setHSL(0, 51, 51);
-			UIColorPicker.setColor('picker', color);
-
-			setPickerDragAndDrop();
-			createPickerModeSwitch();
-			setVoidSwitch();
-		};
-
-		return {
-			init : init,
-			unsetVoidSample : unsetVoidSample,
-			getSampleColorFrom : getSampleColorFrom
-		};
-
-	})();
-
-	var init = function init() {
-		UIColorPicker.init();
-		InputSliderManager.init();
-		ColorInfo.init();
-		ColorPalette.init();
-		ColorPickerSamples.init();
-		CanvasSamples.init();
-		Tool.init();
-	};
-
-	return {
-		init : init
-	};
-
-})();
-
-
-
- - -

{{CSSRef}}

- -

Dieses Werkzeug vereinfacht es, beliebige Farben zu kreieren, um sie dann für das Internet zu verwenden. Außerdem erlaubt es, Farben in verschiedene von CSS unterstützte Formate zu konvertieren. Dazu zählen: HEXA-Farben, RGB (Rot/Grün/Blau) und HSL (Farbton/Sättigung/relative Helligkeit). Bei Verwendung der Farbformate RGB (rgba) und HSL (hsla) wird es auch unterstützt, den Alphakanal einzustellen.

- -

Jede Farbe wird in allen drei im Internet üblichen CSS-Formaten ausgedrückt. Weiters wird für die ausgewählte Farbe jeweils eine Palette für HSL (Farbton/Sättigung/relative Helligkeit), HSV (Farbton/Sättigung/Hellwert) und den Alphakanal angezeigt. Das Spektrum des Farbauswahl-Werkzeuges kann man zwischen dem HSL- und HSV-Farbraum umschalten.

- -

{{ EmbedLiveSample('ColorPicker_Tool', '100%', '900') }}

- -

 

diff --git a/files/de/web/css/css_colors/index.html b/files/de/web/css/css_colors/index.html deleted file mode 100644 index a85506c9de..0000000000 --- a/files/de/web/css/css_colors/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: CSS Farben -slug: Web/CSS/CSS_Colors -tags: - - CSS - - CSS Farben - - Referenz - - Übersicht -translation_of: Web/CSS/CSS_Color -translation_of_original: Web/CSS/CSS_Colors ---- -
{{CSSRef}}
- -

CSS Colors ist ein CSS Modul, das um Farben, Farbtypen und Transparenz geht.

- -

Referenz

- -

Eigenschaften

- -
-
    -
  • {{cssxref("color")}}
    • -
  • {{cssxref("opacity")}}
    • -
-
- -

CSS Datentypen

- -

{{cssxref("<color>")}}

- -

Anleitungen

- -

Keine.

- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('CSS3 Colors')}}{{Spec2('CSS3 Colors')}} 
{{SpecName('CSS2.1', 'colors.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Ursprüngliche Definition
- -

Browser Kompatibilität

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung1.0{{CompatGeckoDesktop("1")}}3.03.51.0
-
- -
- - - - - - - - - - - - - - - - - - - -
MerkmalAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Grundlegende Unterstützung1.0{{CompatGeckoMobile("1")}}6.06.01.0
-
- -

Siehe auch

- - diff --git a/files/de/web/css/css_columns/using_multi-column_layouts/index.html b/files/de/web/css/css_columns/using_multi-column_layouts/index.html new file mode 100644 index 0000000000..8ca450b7c2 --- /dev/null +++ b/files/de/web/css/css_columns/using_multi-column_layouts/index.html @@ -0,0 +1,63 @@ +--- +title: CSS3 Spalten +slug: CSS3_Columns +tags: + - CSS + - CSS3 +translation_of: Web/CSS/CSS_Columns/Using_multi-column_layouts +--- +

Viele Benutzer haben Schwierigkeiten Texte zu lesen, wenn die Zeilen sehr lang sind. Es dauert dann zu lange für das Auge vom Ende der Zeile zum Anfang einer Neuen zu springen. Sie verrutschen unter Umständen in der Zeile und der Lesefluss wird unterbrochen. Um dennoch das Maximum an Bildfläche von großen Bildschirmen zu nutzen, sollten Autoren eine begrenzte Spaltenbreite verwenden, die den Text dann nebeneinander platziert (vergleichbar mit dem Spaltensatz in Zeitungen). Unglücklicherweise ist es mittels HTML und CSS 2.1 nicht möglich Spaltenumbrüche festzulegen, ohne dass diese an festen Positionen gebunden sind. Das erlaubte Markup im Text muss stark eingeschränkt werden oder die Spalten müssen durch die Verwendung von Scripts erstellt werden.

+

Die CSS3 Multi-column Spezifikation schlägt einige neue CSS Eigenschaften vor, die diese Funktionen mittels CSS ermöglichen. In Firefox 1.5 und später wurde ein Teil dieser Eigenschaften implementiert, um das Verhalten, so wie es in der Spezifikation beschrieben ist (mit einer Ausnahme; siehe unten), zu realisieren.

+

In Robert O'Callahans Blog kann man den Einsatz von CSS Columns mit einem Firefox 1.5 oder später betrachten.

+

Verwendung von Spalten

+

Spaltenanzahl und -breite

+

Zwei CSS Eigenschaften steuern, ob und wie viele Spalten erscheinen werden: -moz-column-count und -moz-column-width.

+

-moz-column-count legt die Anzahl an Spalten auf eine bestimmte Zahl fest, z.B.:

+
<div style="-moz-column-count:2">In Vorbereitung zum Release von Mozilla Firefox 1.5 Beta 1,
+wird der Tree heute Nacht um 11:59pm Pacific Daylight Time (UTC -0700) geschlossen.
+Nach diesem Zeitpunkt werden keine weiteren Checkins für Firefox 1.5 Beta 1 erlaubt,
+da dieser am Donnerstag released werden soll.</div>
+

Dieser Codeschnipsel wird den Inhalt in zwei Spalten anzeigen (funktioniert nur unter Firefox 1.5 oder höher):

+
+ In Vorbereitung zum Release von Mozilla Firefox 1.5 Beta 1, wird der Tree heute Nacht um 11:59pm Pacific Daylight Time (UTC -0700) geschlossen. Nach diesem Zeitpunkt werden keine weiteren Checkins für Firefox 1.5 Beta 1 erlaubt, da dieser am Donnerstag released werden soll.
+

 

+

-moz-column-width legt die minimal erwünschte Spaltenbreite fest.
+ Wenn -moz-column-count nicht ebenfalls festgelegt wurde, wird der Browser automatisch so viele Spalten erstellen, wie in die verfügbare Breite passen.

+
<div style="-moz-column-width:20em;">In Vorbereitung zum Release von Mozilla Firefox 1.5 Beta 1,
+wird der Tree heute Nacht um 11:59pm Pacific Daylight Time (UTC -0700) geschlossen.
+Nach diesem Zeitpunkt werden keine weiteren Checkins für Firefox 1.5 Beta 1 erlaubt,
+da dieser am Donnerstag released werden soll.</div>
+

Wird so angezeigt:

+
+ In Vorbereitung zum Release von Mozilla Firefox 1.5 Beta 1, wird der Tree heute Nacht um 11:59pm Pacific Daylight Time (UTC -0700) geschlossen. Nach diesem Zeitpunkt werden keine weiteren Checkins für Firefox 1.5 Beta 1 erlaubt, da dieser am Donnerstag released werden soll.
+

 

+

Die genauen Details dazu sind in der CSS3 Spezifikation beschrieben.

+

In einem mehrspaltigen Block, wird der Inhalt (wenn nötig) automatisch von der einen in die nächste Spalte transportiert. Alle HTML, CSS und DOM Funktionen werden innerhalb von Spalten unterstützt, auch beim Bearbeiten und Drucken des Textes.

+

Höhenausgleich

+

In der CSS3 Spezifikation ist festgelegt, dass sich die Spaltenhöhen ausgleichen müssen: Das bedeutet, dass der Browser die maximale Höhe automatisch festlegt, sodass die Höhe jeder Spalte ungefähr gleich sind. Firefox macht genau das.

+

Es ist jedoch in einigen Situationen nützlich eine maximale Höhe der Spalten explizit festzulegen, den Inhalt in die erste Spalte zu legen und dann soviele Spalten wie nötig zu erstellen, die sich nach rechts austrecken. Daher wurde das Spaltenmodel erweitert. Wenn die height Eigenschaft in einem mehrspaltigen Block festgelegt wurde, kann jede Spalte nur so hoch wie diese Höhenangabe werden und nicht größer, bevor dann eine neue Spalte hinzugefügt wird. Dieser Modus ist effizienter für das Layout.

+

Spaltenlücken

+

Seit Firefox 3 gibt es standardmäßig eine Lücke von 1em zwischen den einzelnen Spalten (vorher war jede Spalte direkt neben der nächsten Spalte).
+ Es ist einfach das Standardverhalten zu ändern, in dem man die -moz-column-gap Eigenschaft einsetzt:

+
<div style="-moz-column-width:20em; -moz-column-gap:2em;">In Vorbereitung zum Release von Mozilla Firefox 1.5 Beta 1,
+wird der Tree heute Nacht um 11:59pm Pacific Daylight Time (UTC -0700) geschlossen.
+Nach diesem Zeitpunkt werden keine weiteren Checkins für Firefox 1.5 Beta 1 erlaubt,
+da dieser am Donnerstag released werden soll.</div>
+
+ In Vorbereitung zum Release von Mozilla Firefox 1.5 Beta 1, wird der Tree heute Nacht um 11:59pm Pacific Daylight Time (UTC -0700) geschlossen. Nach diesem Zeitpunkt werden keine weiteren Checkins für Firefox 1.5 Beta 1 erlaubt, da dieser am Donnerstag released werden soll.
+

 

+

Graceful Degradation (Abwärtskompatibilität und Fehlertoleranz)

+

Die -moz-column Eigenschaft wird von Browsern, die Spalten nicht unterstützen, einfach ignoriert. Daher ist es relativ einfach ein Layout zu erstellen, dass den Inhalt in diesen Browsern in einer einzigen Spalte anzeigt, während in Firefox 1.5 und später mehrere Spalten angezeigt werden.

+

Fazit

+

CSS3 Spalten bieten eine neue Möglichkeit für Webentwickler das Beste aus der Bildfläche herauszuholen. Fantasievolle Entwickler finden vielleicht weitere Verwendungsmöglichkeiten, bei denen die Funktion des automatischen Höhenausgleichs zum Einsatz kommen könnte.

+

Siehe auch

+ +

Zusätzliche Referenzen

+ +

{{ HTML5ArticleTOC() }}

+

{{ languages( { "en": "en/CSS/CSS3_Columns", "es": "es/Columnas_con_CSS-3", "fr": "fr/Colonnes_CSS3", "it": "it/Le_Colonne_nei_CSS3", "ja": "ja/CSS3_Columns", "ko": "ko/CSS3_Columns", "pl": "pl/Kolumny_CSS3" } ) }}

diff --git a/files/de/web/css/css_compositing_and_blending/index.html b/files/de/web/css/css_compositing_and_blending/index.html deleted file mode 100644 index a4fcc2636e..0000000000 --- a/files/de/web/css/css_compositing_and_blending/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: CSS Compositing and Blending -slug: Web/CSS/CSS_Compositing_and_Blending -tags: - - CSS - - CSS Compositing and Blending - - CSS Referenz - - Übersicht -translation_of: Web/CSS/Compositing_and_Blending -translation_of_original: Web/CSS/CSS_Compositing_and_Blending ---- -
{{CSSRef}}
- -

CSS Compositing and Blending ist ein CSS Modul, das definiert, wie Formen verschiedener Elemente zu einem einzelnen Bild kombiniert werden.

- -

Referenz

- -

Eigenschaften

- -
-
    -
  • {{cssxref("background-blend-mode")}}
    • -
  • {{cssxref("mix-blend-mode")}}
    • -
  • {{cssxref("isolation")}}
    • -
-
- -

Anleitungen

- -

Keine.

- -

Spezifikationen

- - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName("Compositing")}}{{Spec2("Compositing")}}Ursprüngliche Definition
- -

Browser Kompatibilität

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatChrome("41.0")}}{{CompatGeckoDesktop("36.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - -
MerkmalAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatChrome("41.0")}}{{CompatGeckoMobile("36.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
-
diff --git a/files/de/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html b/files/de/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html new file mode 100644 index 0000000000..81b1db9c4b --- /dev/null +++ b/files/de/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html @@ -0,0 +1,230 @@ +--- +title: Grundlegende Konzepte der Flexbox +slug: Web/CSS/CSS_Flexible_Box_Layout/Grundlegende_Konzepte_der_Flexbox +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +--- +
 
+ +
{{CSSRef}}
+ +

Das Flexible Box Modul, üblicherweise als Flexbox bezeichnet, wurde als ein eindimensionales Layoutmodell und als eine Methode entwickelt, die eine Platzverteilung zwischen Elementen in einer Schnittstelle und leistungsstarke Ausrichtungsmöglichkeiten bietet. Dieser Artikel gibt einen Überblick über die Hauptmerkmale von Flexbox, die wir im Folgenden näher erläutern werden.

+ +

Wenn wir Flexbox als eindimensional bezeichnen, beschreiben wir die Tatsache, dass Flexbox sich mit dem Layout in einer Dimension zu einem Zeitpunkt beschäftigt - entweder als eine Zeile oder als eine Spalte. Dies kann mit dem zweidimensionalen Modell von CSS Grid Layout, das Spalten und Zeilen zusammen steuert, kontrastiert werden.

+ +

Die zwei Achsen der Flexbox

+ +

Bei der Arbeit mit Flexbox muss man in zwei Achsen denken - der Hauptachse und der Querachse. Die Hauptachse wird durch die Eigenschaft {{cssxref("flex-direction")}} definiert, und die Querachse verläuft senkrecht dazu. Alles, was wir mit flexbox machen, bezieht sich auf diese Achsen, so dass es sich lohnt zu verstehen, wie sie von Anfang an funktionieren.

+ +

Die Hauptachse

+ +

Die Hauptachse wird durch flex-direction definiert, die vier mögliche Werte hat:

+ + + +

Wenn Sie row oder row-reverse wählen, läuft Ihre Hauptachse entlang der Zeile in Zeilenrichtung.

+ +

If flex-direction is set to row the main axis runs along the row in the inline direction.

+ +

Wählen Sie column oder column-reverse und Ihre Hauptachse läuft von oben nach unten - in Blockrichtung.

+ +

If flex-direction is set to column the main axis runs in the block direction.

+ +

Die Querachse

+ +

Die Querachse (cross axis) verläuft senkrecht zur Hauptachse, d.h. wenn Ihre flex-direction (Hauptachse) auf row oder row-reverse eingestellt ist, läuft die Querachse die Spalten hinunter.

+ +

If flex-direction is set to row then the cross axis runs in the block direction.

+ +

Wenn Ihre Hauptachse column oder column-reverse ist, dann verläuft die Querachse entlang der Zeilen.

+ +

If flex-direction is set to column then the cross axis runs in the inline direction.

+ +

Es ist wichtig zu verstehen, welche Achse die richtige ist, wenn wir uns mit der Ausrichtung und Justierung von Flex-Elementen befassen; Flexbox bietet Eigenschaften, die den Inhalt entlang der einen oder anderen Achse ausrichtet und justiert.

+ +

Start- und Endzeilen

+ +

Ein weiterer wichtiger Bereich des Verständnisses ist, wie Flexbox keine Annahmen über den Schreibmodus des Dokuments macht. In der Vergangenheit wurde CSS stark in Richtung horizontale und links-nach-rechts-Schreibweise ausgerichtet. Moderne Layoutmethoden umfassen den Bereich der Schreibmodi und so gehen wir nicht mehr davon aus, dass eine Textzeile oben links in einem Dokument beginnt und nach rechts verläuft, wobei neue Zeilen untereinander erscheinen.

+ +

Sie können mehr über die Beziehung zwischen Flexbox und der Writing Modes Spezifikation in einem späteren Artikel lesen, aber die folgende Beschreibung soll helfen zu erklären, warum wir nicht über links und rechts und oben und unten sprechen, wenn wir die Richtung beschreiben, in die unsere Flex Elemente fließen.

+ +

Wenn die flex-direction row ist und ich in Englisch arbeite, dann ist die Anfangskante der Hauptachse links, die Endkante rechts.

+ +

Working in English the start edge is on the left.

+ +

Wenn ich auf Arabisch arbeiten würde, dann wäre die Anfangskante meiner Hauptachse rechts und die Endkante links.

+ +

The start edge in a RTL language is on the right.

+ +

In beiden Fällen befindet sich die Anfangskante der Querachse oben am Flexcontainer und die Endkante unten, da beide Sprachen einen horizontalen Schreibmodus haben.

+ +

Nach einer Weile wird das Nachdenken über Anfang und Ende statt links und rechts natürlich werden, und Ihnen nützlich sein, wenn Sie mit anderen Layout-Methoden arbeiten, wie CSS-Grid-Layout, die den gleichen Mustern folgen.

+ +

Der Flex Container

+ +

Ein mit Flexbox angelegter Bereich eines Dokuments wird als Flex Container bezeichnet. Um einen Flex Container zu erstellen, setzen wir den Wert der Eigenschaft {{cssxref("display")}} des Bereichscontainers auf flex oder inline-flex. Sobald wir dies tun, werden die direkten Kinder dieses Containers zu flexiblen Elementen. Wie bei allen Eigenschaften in CSS sind einige Initialwerte definiert, so dass sich beim Erstellen eines Flex Containers alle enthaltenen Flex Items wie folgt verhalten.

+ + + +

Dies hat zur Folge, dass Ihre Elemente in einer Reihe angeordnet werden, wobei die Größe des Inhalts als Größe in der Hauptachse verwendet wird. Wenn es mehr Elemente gibt, als in den Container passen, werden sie nicht eingepackt, sondern überlaufen. Wenn einige Elemente größer als andere sind, dehnen sich alle Elemente entlang der Querachse aus, um ihre volle Größe zu erreichen.

+ +

Wie das aussieht, sehen Sie im folgenden Live-Beispiel. Versuchen Sie, die Elemente zu bearbeiten oder zusätzliche Elemente hinzuzufügen, um das anfängliche Verhalten von Flexbox zu testen.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 480)}} 

+ +

Wechsel der flex-direction

+ +

Das Hinzufügen der Eigenschaft {{cssxref("flex-direction")}} zum Flex Container erlaubt es uns, die Richtung zu ändern, in der unsere Flex Elemente angezeigt werden. Einstellung der flex-direction: row-reverse behält die Anzeige entlang der Zeile bei, jedoch werden die Start- und Endlinien umgeschaltet.

+ +

Wenn wir die flex-direction in eine Spalte (column)ändern, schaltet die Hauptachse um und unsere Elemente werden nun in einer Spalte angezeigt. Setzen Sie column-reverse und die Start- und Endzeilen werden wieder umgeschaltet.

+ +

Das folgende Live-Beispiel hat die flex-direction auf row-reverse eingestellt. Versuchen Sie die anderen Werte - row, column and column-reverse - um zu sehen, was mit dem Inhalt passiert.

+ +

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

+ +

Multi-line flex containers with flex-wrap

+ +

While flexbox is a one dimensional model, it is possible to cause our flex items to wrap onto multiple lines. In doing so, you should consider each line as a new flex container. Any space distribution will happen across that line, without reference to the lines either side.

+ +

To cause wrapping behaviour add the property {{cssxref("flex-wrap")}} with a value of wrap. Now, should your items be too large to all display in one line, they will wrap onto another line. The live sample below contains items that have been given a width, the total width of the items being too wide for the flex container. As flex-wrap is set to wrap, the items wrap. Set it to nowrap, which is also the initial value, and they will instead shrink to fit the container because they are using initial flexbox values that allows items to shrink. Using nowrap would cause an overflow if the items were not able to shrink, or could not shrink small enough to fit.

+ +

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

+ +

Find out more about wrapping flex items in the guide Mastering Wrapping of Flex Items.

+ +

The flex-flow shorthand

+ +

You can combine the two properties flex-direction and flex-wrap into the {{cssxref("flex-flow")}} shorthand. The first value specified is flex-direction and the second value is flex-wrap.

+ +

In the live example below try changing the first value to one of the allowable values for flex-direction - row, row-reverse, column or column-reverse, and also change the second to wrap and nowrap.

+ +

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

+ +

Properties applied to flex items

+ +

To have more control over flex items we can target them directly. We do this by way of three properties:

+ + + +

We will take a brief look at these properties in this overview, and you can gain a fuller understanding in the guide Controlling Ratios of Flex Items on the Main Axis.

+ +

Before we can make sense of these properties we need to consider the concept of available space. What we are doing when we change the value of these flex properties is to change the way that available space is distributed amongst our items. This concept of available space is also important when we come to look at aligning items.

+ +

If we have three 100 pixel-wide items in a container which is 500 pixels wide, then the space we need to lay out our items is 300 pixels. This leaves 200 pixels of available space. If we don’t change the initial values then flexbox will put that space after the last item.

+ +

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

+ +

If we instead would like the items to grow and fill the space, then we need to have a method of distributing the leftover space between the items. This is what the flex properties that we apply to the items themselves, will do.

+ +

The flex-basis property

+ +

The flex-basis is what defines the size of that item in terms of the space it leaves as available space. The initial value of this property is auto — in this case the browser looks to see if the items have a size. In the example above, all of the items have a width of 100 pixels and so this is used as the flex-basis.

+ +

If the items don’t have a size then the content's size is used as the flex-basis. This is why when we just declare display: flex on the parent to create flex items, the items all move into a row and take only as much space as they need to display their contents.

+ +

The flex-grow property

+ +

With the flex-grow property set to a positive integer, flex items can grow along the main axis from their flex-basis. This will cause the item to stretch and take up any available space on that axis, or a proportion of the available space if other items are allowed to grow too.

+ +

If we gave all of our items in the example above a flex-grow value of 1 then the available space in the flex container would be equally shared between our items and they would stretch to fill the container on the main axis.

+ +

The flex-grow property can be used to distribute space in proportion. If we give our first item a flex-grow value of 2 and the other items a value of 1, 2 parts will be given to the first item (100px out of 200px in the case of the example above), 1 part each the other two (50px each out of the 200px total).

+ +

The flex-shrink property

+ +

Where the flex-grow property deals with adding space in the main axis, the flex-shrink property controls how it is taken away. If we do not have enough space in the container to lay out our items and flex-shrink is set to a positive integer the item can become smaller than the flex-basis. As with flex-grow different values can be assigned in order to cause one item to shrink faster than others — an item with a higher value set for flex-shrink will shrink faster than its siblings that have lower values.

+ +

The minimum size of the item will be taken into account while working out the actual amount of shrinkage that will happen, which means that flex-shrink has the potential to appear less consistent than flex-grow in behavior. We’ll therefore take a more detailed look at how this algorithm works in the article Controlling Ratios of items along the main axis.

+ +
+

Note that these values for flex-grow and flex-shrink are proportions. Typically if we had all of our items set to flex: 1 1 200px and then wanted one item to grow at twice the rate, we would set that item to flex: 2 1 200px. However you could use flex: 10 1 200px and flex: 20 1 200px if you wanted.

+
+ +

Shorthand values for the flex properties

+ +

You will very rarely see the flex-grow, flex-shrink, and flex-basis properties used individually; instead they are combined into the {{cssxref("flex")}} shorthand. The flex shorthand allows you to set the three values in this order — flex-grow, flex-shrink, flex-basis.

+ +

The live example below allows you to test out the different values of the flex shorthand; remember that the first value is flex-grow. Giving this a positive value means the item can grow. The second is flex-shrink — with a positive value the items can shrink, but only if their total values overflow the main axis. The final value is flex-basis; this is the value the items are using as their base value to grow and shrink from.

+ +

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

+ +

There are also some predefined shorthand values which cover most of the use cases. You will often see these used in tutorials, and in many cases these are all you will need to use. The predefined values are as follows:

+ + + +

Setting flex: initial resets the item to the initial values of Flexbox. This is the same as flex: 0 1 auto. In this case the value of flex-grow is 0, so items will not grow larger than their flex-basis size. The value of flex-shrink is 1, so items can shrink if they need to rather than overflowing. The value of flex-basis is auto. Items will either use any size set on the item in the main dimension, or they will get their size from the content size.

+ +

Using flex: auto is the same as using flex: 1 1 auto; everything is as with flex:initial but in this case the items can grow and fill the container as well as shrink if required.

+ +

Using flex: none will create fully inflexible flex items. It is as if you wrote flex: 0 0 auto. The items cannot grow or shrink but will be laid out using flexbox with a flex-basis of auto.

+ +

The shorthand you often see in tutorials is flex: 1 or flex: 2 and so on. This is as if you used flex: 1 1 0. The items can grow and shrink from a flex-basis of 0.

+ +

Try these shorthand values in the live example below.

+ +

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

+ +

Alignment, justification and distribution of free space between items

+ +

A key feature of flexbox is the ability to align and justify items on the main- and cross-axes, and to distribute space between flex items.

+ +

align-items

+ +

The {{cssxref("align-items")}} property will align the items on the cross axis.

+ +

The initial value for this property is stretch and this is why flex items stretch to the height of the tallest one by default. They are in fact stretching to fill the flex container — the tallest item is defining the height of that.

+ +

You could instead set align-items to flex-start in order to make the items line up at the start of the flex container, flex-end to align them to the end, or center to align them in the centre. Try this in the live example — I have given the flex container a height in order that you can see how the items can be moved around inside the container. See what happens if you set the value of align-items to:

+ + + +

{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}}

+ +

justify-content

+ +

The {{cssxref("justify-content")}} property is used to align the items on the main axis, the direction in which flex-direction has set the flow. The initial value is flex-start which will line the items up at the start edge of the container, but you could also set the value to flex-end to line them up at the end, or center to line them up in the centre.

+ +

You can also use the value space-between to take all the spare space after the items have been laid out, and share it out evenly between the items so there will be an equal amount of space between each item. To cause an equal amount of space on the right and left of each item use the value space-around. With space-around, items have a half-size space on either end. Or, to cause items to have equal space around them use the value space-evenly. With space-evenly, items have a full-size space on either end.

+ +

Try the following values of justify-content in the live example:

+ + + +

{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}}

+ +

In the article Aligning Items in a Flex Container we will explore these properties in more depth, in order to have a better understanding of how they work. These simple examples however will be useful in the majority of use cases.

+ +

Next steps

+ +

After reading this article you should have an understanding of the basic features of Flexbox. In the next article we will look at how this specification relates to other parts of CSS.

diff --git a/files/de/web/css/css_flexible_box_layout/flex_elemente_sortieren/index.html b/files/de/web/css/css_flexible_box_layout/flex_elemente_sortieren/index.html deleted file mode 100644 index 86354499d2..0000000000 --- a/files/de/web/css/css_flexible_box_layout/flex_elemente_sortieren/index.html +++ /dev/null @@ -1,138 +0,0 @@ ---- -title: Flex Elemente Sortieren -slug: Web/CSS/CSS_Flexible_Box_Layout/Flex_Elemente_Sortieren -tags: - - Barrierefreiheit - - CSS - - Flex - - Reihenfolge - - Richtung - - flexbox - - umgekehrt -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items ---- -

{{CSSRef}}

- -

Neue Layout-Methoden wie z.B Flexbox und Grid geben die Möglichkeit, die Reihenfolge dessen Inhaltes zu verändern. Dieser Artikel handelt von den verschiedenen Möglichkeiten wie man die visuelle Reihenfolge des Inhalts, mithilfe von Flexbox, ändern kann. Dazu werden wir uns das Thema aus der perspektive der Barrierefreiheit betrachten.

- -

Die Anzeige der Elemente umkehren

- -

Die {{cssxref("flex-direction")}} Eigenschaft kann einer der 4 folgenden Werte bekommen:

- - - -

Bei den ersten 2 Werten, bleibt die Reihenfolge wie sie auch im Quelltext angegeben ist und zeigt diese nacheinander von der Startlinie an an. Die Elemente werden dabei entweder in einer Reihe (row), oder in einer Spalte (column) angezeigt.
- The items are displayed in a row starting on the left.

- -

The items are displayed as a column starting from the top

- -

Die letzten beiden Werte, kehren die Reihenfolge der Elemente um, indem Sie die Start und End-Linien wechseln

- -

The items are displayed in reverse order starting on the right-hand line.

- -

The items are displayed in a column in reverse order starting at the bottom line.

- -

Denk dran das der Start der Linie mit den Schreibmodis verbunden ist. Das Reihenbeispiel oben demonstriert wie row und row-reverse in einer links-zu-rechts Sprache wie z.B. Deutsch funktioniert. Wenn du aber in einer rechts-zu-links Sprache wie z.B. Arabisch arbeitest dann würde row rechts starten und row-reverse links.

- -

Flex containers with Arabic letters showing how row starts from the right hand side and row-reverse from the left.

- -

Das kann zwar nach einer schönen Möglichkeit aussehen, Elemente in einer umgekehrten Reihenfolge anzuzeigen, es sollte einem jedoch bewusst sein, das elemente nur visuell in einer umgekehrten Reihenfolge angezeigt werden. Die Spezifikation sagt diesbezüglich folgendes:

- -
-

“Hinweis: Die Umsortierungs-möglichkeiten betreffen absichtlich nur die visuelle Ansicht und lassen dabei Sprech- und Navigationsbasierte Reihenfolgen außen vor. Das ermöglicht Autoren die Möglichkeit die visuelle Ansicht zu ändern, während sie die Quellen-Reihenfolge in intakt hält für nicht-CSS UAs und für lineare Modelle, wie z.B. Sprachmodelle und Sequentielle Navigationen” - Reigenfolge und Orientation

-
- -

Wenn die Elemente Hyperlinks sind, oder irgendwelche anderen Elemente zu denen der User hintabben kann, dann wäre die tab-reihenfolge die selbe, wie sie im Dokumenten-Quellcode vorkommt und nicht wie sie visuell angezeigt wird.

- -

Wenn man einen reverse Wert benuzt, oder in irgendeiner Weise die Reihenfolge der Elemente beeinflusst, dann musst du schauen, ob man nicht doch die logische Reihenfolge im Quelltext ändert. Die Spezifikitation fährt fort mit einer Warnung, das man umsortierung nicht nutzen soll um Probleme im Quellcode zu fixen.

- -
-

“Autoren sollten die Reihenfolgen- oder Umgekehrtwerte der flex-flow/flex-direction Eigenschaften nicht als Ersatz für die tatsächliche Änderung des Dokumentes nutzen, da das die Barrierefreiheit des Dokumentes einschränkt.”

-
- -
-

Hinweis: Firefox hatte ein paar Jahre lang einen Bug, bei dem es versucht hatte der visuellen Reihenfolge und nicht der Quelltext-Reihenfolge zu folgen, daruch verhielt es sich anders als andere Browser. Dieser Bug ist mittlerweile gefixt. Man sollte immer Quelltext-Reihenfolge als die logische Reihenfolge für das Dokument benutzen, da alle aktuellen User Agents diesem Schema folgen.

-
- -

In dem Live-Beispiel unten habe ich einen focus-style hinzugefügt, damit man, wenn man mit tab von link zu link wechselt, sieht welcher link markiert wird. Wenn man die Reihenfolge mit flex-direction wechselst, dann sieht man wie die tab Reihenfolge immernoch der Reihenfolge der Elemente im Quelltext folgen.

- -

{{EmbedGHLiveSample("css-examples/flexbox/order/order.html", '100%', 500)}}

- -

Auf die gleiche Weise, wie das ändern des Wertes flex-direction nicht die Reihenfolge ändert, in denen zu Elementen navigiert werden, ändert es auch nicht die Reihenfolge in denen die Elemente gemalt werden. Es ist nur eine visuelle umkehrung der Elemente.

- -

Die order Eigenschaft

- -

Zusätzlich zum umkehren der Reihenfolge, in welcher flex-elemente visuell dargestellt werden, kann man die Elemente individuell ansprechen und die visuelle Reihenfolge mit der {{cssxref("order")}} Eigenschaft.

- -

Die order Eigenschaft legt die Elemente in Ordnungsgruppen. Das heißt, das den Elementen eine Zahl zugewiesen werden, welche die dazugehörige Gruppe repräsentieren. Danach werden die Elemente, in die Reihenfolge gebracht, wie die Zahlen es vorgeben, der kleinste Wert zuerst. Wenn mehr als ein Element, den selben Wert besitzen, dann werden die Elemente innerhalb ihrer Gruppe so ausgelegt, wie sie im Quelltext vorkommen.

- -

Beispiel: Ich habe 5 flex-items und weise order Eigenschaften folgendermaßen zu:

- - - -

Diese Elemente werden dann wie folgt dargestellt:

- - - -

Items have a number showing their source order which has been rearranged.

- -

Um zu sehen, wie das die Reihenfolge beeinflusst, kann man im Live-Beispiel unten die Werte für order ändern. Man kann auch flex-direction zu row-reverse wechseln und sehen was passiert — die Start Linie ist getauscht, damit startet das sortieren von der anderen Seite.

- -

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

- -

Flex-items haben einen natürlichen order Wert von 0, deshalb werden alle Elemente mit einem Zahlen-Wert größer als 0 nach Elementen angezeigt, welche noch keinen Expliziten order Wert erhalten haben.

- -

Man kann auch negative Zahlenwerte verwenden, das ist ziemlich hilfreich. Wenn man ein Element als erstes anzeigen lassen will, aber die Reihenfolge aller anderen Elemente so lassen will wie sie sind, dann kann man diesem Element eine Reihenfolge von -1 geben. Da das kleiner als 0 ist, wird dieses Element als erstes angezeigt.

- -

Im Live-Code Beispiel unten habe Ich Elemente mithilfe einer Flexbox ausgelegt. Wenn man ändert welches Element die Klasse active besitzt, dann kann man ändern, welches Element als erstes angezeigt werden soll, mit allen anderen Elementen darunter.

- -

{{EmbedGHLiveSample("css-examples/flexbox/order/negative-order.html", '100%', 520)}}

- -

Die Elemente werden anhand der, wie es in der Spezifikation beschrieben ist, order-modified- document order angezeigt. Der Wert der order-Eigenschaft wird berücksichtigt, bevor die Elemente angezeigt werden

- -

Order ändert auch die Malreihenfolge der Elemente; Elemente mit einem geringerem order Wert, werden vor den Elementen mit einem höherem order Wert gemalt.

- -

Die order Eigenschaft und Barrierefreiheit

- -

Wenn man die order Eigenschaft nutzt, dann hat man exakt die gleichen Implikationen, wenn es ums Thema Barrierefreiheit geht, wie beim ändern der flex-direction. Die Eigenschaft order ändert die Reihenfolge, in der Elemente gemalt werden und die Reihenfolge in der diese Elemente visuell auftauchen. Es ändert nichts an der sequentiellen Navigationsreihenfolge der Elemente. Deshalb könnte es passieren, dass wenn ein Benutzer auf einer Website durch die Zeilen tabbt, das dieser in einem ziemlich verwirrendem Weg durch das Layout springt.

- -

Wenn man in irgendeinem Live-Beispiel auf dieser Seite hin und her tabbt, dann kann man sehen, wie order das potential hat, eine seltsame Erfahrung für alle Benutzer zu schaffen, die nicht ein Zeiger-Gerät verwenden. Um mehr über dieses Thema zu erfahren, empfehle Ich folgende Ressourcen:

- - - -

Anwendungsbeispiele für order

- -

Manchmal gibt es Anwendungsorte, an denen es hilfreich ist, das die logische und visuelle Reihenfolge der Elemente voneinander getrennt sind. Vorsichtig eingesetzt ermöglicht die order Eigenschaft hilfreiche Lösungen für verbreitete Problemmuster.

- -

Man hat z.B. ein Design einer Karte, welche Neuigkeiten anzeigt. Die Überschrift der Neuigkeiten ist das Schlüsselelement und wäre das Element, zu dem der Benutzer springen würde wenn er durch die verschiedenen Überschriften tabben würde. Die Karte hat dazu auch noch ein Datum; das fertige Design sieht dann ungefähr so aus:

- -

A design component with a date, then heading and then content.

- -

Visually the date appears above the heading, im Quelltext. Jedoch, wenn die Karte von einem Programm vorgelesen wird, wäre es mir lieber, wenn der Titel als erstes vorgelesen wird und danach das Veröffentlichungsdatum. Das geht ganz einfach wenn man die order Eigenschaft nutzt.

- -

Die Karte wird unser flex-container sein, mit flex-direction auf column. Dann gebe ich dem Datum die order:-1. Das setzt es über die Überschrift.

- -

{{EmbedGHLiveSample("css-examples/flexbox/order/usecase-order.html", '100%', 730)}}

- -

Diese kleinen Veränderungen sind die Art der Fälle in denen die order Eigenschaft Sinn macht. Behalte die logische Abfolge als Lese und Tab Reihenfolge des Dokumentes und pflege das in einer Art und Weise, das es Barrierefrei strukturiert bleibt. Danach nutze order lediglich zur Design-Optimierung. Wenn man das tut, sollte man darauf achten, das man die Reihenfolge von Elementen, durch die der Benutzer durchtabbt, nicht durcheinander bringt. Du wirst schnell bemerken, ob deine Entwicklungs-Entscheidungen es für den Benutzer schwierig machen.

diff --git a/files/de/web/css/css_flexible_box_layout/grundlegende_konzepte_der_flexbox/index.html b/files/de/web/css/css_flexible_box_layout/grundlegende_konzepte_der_flexbox/index.html deleted file mode 100644 index 81b1db9c4b..0000000000 --- a/files/de/web/css/css_flexible_box_layout/grundlegende_konzepte_der_flexbox/index.html +++ /dev/null @@ -1,230 +0,0 @@ ---- -title: Grundlegende Konzepte der Flexbox -slug: Web/CSS/CSS_Flexible_Box_Layout/Grundlegende_Konzepte_der_Flexbox -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox ---- -
 
- -
{{CSSRef}}
- -

Das Flexible Box Modul, üblicherweise als Flexbox bezeichnet, wurde als ein eindimensionales Layoutmodell und als eine Methode entwickelt, die eine Platzverteilung zwischen Elementen in einer Schnittstelle und leistungsstarke Ausrichtungsmöglichkeiten bietet. Dieser Artikel gibt einen Überblick über die Hauptmerkmale von Flexbox, die wir im Folgenden näher erläutern werden.

- -

Wenn wir Flexbox als eindimensional bezeichnen, beschreiben wir die Tatsache, dass Flexbox sich mit dem Layout in einer Dimension zu einem Zeitpunkt beschäftigt - entweder als eine Zeile oder als eine Spalte. Dies kann mit dem zweidimensionalen Modell von CSS Grid Layout, das Spalten und Zeilen zusammen steuert, kontrastiert werden.

- -

Die zwei Achsen der Flexbox

- -

Bei der Arbeit mit Flexbox muss man in zwei Achsen denken - der Hauptachse und der Querachse. Die Hauptachse wird durch die Eigenschaft {{cssxref("flex-direction")}} definiert, und die Querachse verläuft senkrecht dazu. Alles, was wir mit flexbox machen, bezieht sich auf diese Achsen, so dass es sich lohnt zu verstehen, wie sie von Anfang an funktionieren.

- -

Die Hauptachse

- -

Die Hauptachse wird durch flex-direction definiert, die vier mögliche Werte hat:

- - - -

Wenn Sie row oder row-reverse wählen, läuft Ihre Hauptachse entlang der Zeile in Zeilenrichtung.

- -

If flex-direction is set to row the main axis runs along the row in the inline direction.

- -

Wählen Sie column oder column-reverse und Ihre Hauptachse läuft von oben nach unten - in Blockrichtung.

- -

If flex-direction is set to column the main axis runs in the block direction.

- -

Die Querachse

- -

Die Querachse (cross axis) verläuft senkrecht zur Hauptachse, d.h. wenn Ihre flex-direction (Hauptachse) auf row oder row-reverse eingestellt ist, läuft die Querachse die Spalten hinunter.

- -

If flex-direction is set to row then the cross axis runs in the block direction.

- -

Wenn Ihre Hauptachse column oder column-reverse ist, dann verläuft die Querachse entlang der Zeilen.

- -

If flex-direction is set to column then the cross axis runs in the inline direction.

- -

Es ist wichtig zu verstehen, welche Achse die richtige ist, wenn wir uns mit der Ausrichtung und Justierung von Flex-Elementen befassen; Flexbox bietet Eigenschaften, die den Inhalt entlang der einen oder anderen Achse ausrichtet und justiert.

- -

Start- und Endzeilen

- -

Ein weiterer wichtiger Bereich des Verständnisses ist, wie Flexbox keine Annahmen über den Schreibmodus des Dokuments macht. In der Vergangenheit wurde CSS stark in Richtung horizontale und links-nach-rechts-Schreibweise ausgerichtet. Moderne Layoutmethoden umfassen den Bereich der Schreibmodi und so gehen wir nicht mehr davon aus, dass eine Textzeile oben links in einem Dokument beginnt und nach rechts verläuft, wobei neue Zeilen untereinander erscheinen.

- -

Sie können mehr über die Beziehung zwischen Flexbox und der Writing Modes Spezifikation in einem späteren Artikel lesen, aber die folgende Beschreibung soll helfen zu erklären, warum wir nicht über links und rechts und oben und unten sprechen, wenn wir die Richtung beschreiben, in die unsere Flex Elemente fließen.

- -

Wenn die flex-direction row ist und ich in Englisch arbeite, dann ist die Anfangskante der Hauptachse links, die Endkante rechts.

- -

Working in English the start edge is on the left.

- -

Wenn ich auf Arabisch arbeiten würde, dann wäre die Anfangskante meiner Hauptachse rechts und die Endkante links.

- -

The start edge in a RTL language is on the right.

- -

In beiden Fällen befindet sich die Anfangskante der Querachse oben am Flexcontainer und die Endkante unten, da beide Sprachen einen horizontalen Schreibmodus haben.

- -

Nach einer Weile wird das Nachdenken über Anfang und Ende statt links und rechts natürlich werden, und Ihnen nützlich sein, wenn Sie mit anderen Layout-Methoden arbeiten, wie CSS-Grid-Layout, die den gleichen Mustern folgen.

- -

Der Flex Container

- -

Ein mit Flexbox angelegter Bereich eines Dokuments wird als Flex Container bezeichnet. Um einen Flex Container zu erstellen, setzen wir den Wert der Eigenschaft {{cssxref("display")}} des Bereichscontainers auf flex oder inline-flex. Sobald wir dies tun, werden die direkten Kinder dieses Containers zu flexiblen Elementen. Wie bei allen Eigenschaften in CSS sind einige Initialwerte definiert, so dass sich beim Erstellen eines Flex Containers alle enthaltenen Flex Items wie folgt verhalten.

- - - -

Dies hat zur Folge, dass Ihre Elemente in einer Reihe angeordnet werden, wobei die Größe des Inhalts als Größe in der Hauptachse verwendet wird. Wenn es mehr Elemente gibt, als in den Container passen, werden sie nicht eingepackt, sondern überlaufen. Wenn einige Elemente größer als andere sind, dehnen sich alle Elemente entlang der Querachse aus, um ihre volle Größe zu erreichen.

- -

Wie das aussieht, sehen Sie im folgenden Live-Beispiel. Versuchen Sie, die Elemente zu bearbeiten oder zusätzliche Elemente hinzuzufügen, um das anfängliche Verhalten von Flexbox zu testen.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 480)}} 

- -

Wechsel der flex-direction

- -

Das Hinzufügen der Eigenschaft {{cssxref("flex-direction")}} zum Flex Container erlaubt es uns, die Richtung zu ändern, in der unsere Flex Elemente angezeigt werden. Einstellung der flex-direction: row-reverse behält die Anzeige entlang der Zeile bei, jedoch werden die Start- und Endlinien umgeschaltet.

- -

Wenn wir die flex-direction in eine Spalte (column)ändern, schaltet die Hauptachse um und unsere Elemente werden nun in einer Spalte angezeigt. Setzen Sie column-reverse und die Start- und Endzeilen werden wieder umgeschaltet.

- -

Das folgende Live-Beispiel hat die flex-direction auf row-reverse eingestellt. Versuchen Sie die anderen Werte - row, column and column-reverse - um zu sehen, was mit dem Inhalt passiert.

- -

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

- -

Multi-line flex containers with flex-wrap

- -

While flexbox is a one dimensional model, it is possible to cause our flex items to wrap onto multiple lines. In doing so, you should consider each line as a new flex container. Any space distribution will happen across that line, without reference to the lines either side.

- -

To cause wrapping behaviour add the property {{cssxref("flex-wrap")}} with a value of wrap. Now, should your items be too large to all display in one line, they will wrap onto another line. The live sample below contains items that have been given a width, the total width of the items being too wide for the flex container. As flex-wrap is set to wrap, the items wrap. Set it to nowrap, which is also the initial value, and they will instead shrink to fit the container because they are using initial flexbox values that allows items to shrink. Using nowrap would cause an overflow if the items were not able to shrink, or could not shrink small enough to fit.

- -

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

- -

Find out more about wrapping flex items in the guide Mastering Wrapping of Flex Items.

- -

The flex-flow shorthand

- -

You can combine the two properties flex-direction and flex-wrap into the {{cssxref("flex-flow")}} shorthand. The first value specified is flex-direction and the second value is flex-wrap.

- -

In the live example below try changing the first value to one of the allowable values for flex-direction - row, row-reverse, column or column-reverse, and also change the second to wrap and nowrap.

- -

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

- -

Properties applied to flex items

- -

To have more control over flex items we can target them directly. We do this by way of three properties:

- - - -

We will take a brief look at these properties in this overview, and you can gain a fuller understanding in the guide Controlling Ratios of Flex Items on the Main Axis.

- -

Before we can make sense of these properties we need to consider the concept of available space. What we are doing when we change the value of these flex properties is to change the way that available space is distributed amongst our items. This concept of available space is also important when we come to look at aligning items.

- -

If we have three 100 pixel-wide items in a container which is 500 pixels wide, then the space we need to lay out our items is 300 pixels. This leaves 200 pixels of available space. If we don’t change the initial values then flexbox will put that space after the last item.

- -

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

- -

If we instead would like the items to grow and fill the space, then we need to have a method of distributing the leftover space between the items. This is what the flex properties that we apply to the items themselves, will do.

- -

The flex-basis property

- -

The flex-basis is what defines the size of that item in terms of the space it leaves as available space. The initial value of this property is auto — in this case the browser looks to see if the items have a size. In the example above, all of the items have a width of 100 pixels and so this is used as the flex-basis.

- -

If the items don’t have a size then the content's size is used as the flex-basis. This is why when we just declare display: flex on the parent to create flex items, the items all move into a row and take only as much space as they need to display their contents.

- -

The flex-grow property

- -

With the flex-grow property set to a positive integer, flex items can grow along the main axis from their flex-basis. This will cause the item to stretch and take up any available space on that axis, or a proportion of the available space if other items are allowed to grow too.

- -

If we gave all of our items in the example above a flex-grow value of 1 then the available space in the flex container would be equally shared between our items and they would stretch to fill the container on the main axis.

- -

The flex-grow property can be used to distribute space in proportion. If we give our first item a flex-grow value of 2 and the other items a value of 1, 2 parts will be given to the first item (100px out of 200px in the case of the example above), 1 part each the other two (50px each out of the 200px total).

- -

The flex-shrink property

- -

Where the flex-grow property deals with adding space in the main axis, the flex-shrink property controls how it is taken away. If we do not have enough space in the container to lay out our items and flex-shrink is set to a positive integer the item can become smaller than the flex-basis. As with flex-grow different values can be assigned in order to cause one item to shrink faster than others — an item with a higher value set for flex-shrink will shrink faster than its siblings that have lower values.

- -

The minimum size of the item will be taken into account while working out the actual amount of shrinkage that will happen, which means that flex-shrink has the potential to appear less consistent than flex-grow in behavior. We’ll therefore take a more detailed look at how this algorithm works in the article Controlling Ratios of items along the main axis.

- -
-

Note that these values for flex-grow and flex-shrink are proportions. Typically if we had all of our items set to flex: 1 1 200px and then wanted one item to grow at twice the rate, we would set that item to flex: 2 1 200px. However you could use flex: 10 1 200px and flex: 20 1 200px if you wanted.

-
- -

Shorthand values for the flex properties

- -

You will very rarely see the flex-grow, flex-shrink, and flex-basis properties used individually; instead they are combined into the {{cssxref("flex")}} shorthand. The flex shorthand allows you to set the three values in this order — flex-grow, flex-shrink, flex-basis.

- -

The live example below allows you to test out the different values of the flex shorthand; remember that the first value is flex-grow. Giving this a positive value means the item can grow. The second is flex-shrink — with a positive value the items can shrink, but only if their total values overflow the main axis. The final value is flex-basis; this is the value the items are using as their base value to grow and shrink from.

- -

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

- -

There are also some predefined shorthand values which cover most of the use cases. You will often see these used in tutorials, and in many cases these are all you will need to use. The predefined values are as follows:

- - - -

Setting flex: initial resets the item to the initial values of Flexbox. This is the same as flex: 0 1 auto. In this case the value of flex-grow is 0, so items will not grow larger than their flex-basis size. The value of flex-shrink is 1, so items can shrink if they need to rather than overflowing. The value of flex-basis is auto. Items will either use any size set on the item in the main dimension, or they will get their size from the content size.

- -

Using flex: auto is the same as using flex: 1 1 auto; everything is as with flex:initial but in this case the items can grow and fill the container as well as shrink if required.

- -

Using flex: none will create fully inflexible flex items. It is as if you wrote flex: 0 0 auto. The items cannot grow or shrink but will be laid out using flexbox with a flex-basis of auto.

- -

The shorthand you often see in tutorials is flex: 1 or flex: 2 and so on. This is as if you used flex: 1 1 0. The items can grow and shrink from a flex-basis of 0.

- -

Try these shorthand values in the live example below.

- -

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

- -

Alignment, justification and distribution of free space between items

- -

A key feature of flexbox is the ability to align and justify items on the main- and cross-axes, and to distribute space between flex items.

- -

align-items

- -

The {{cssxref("align-items")}} property will align the items on the cross axis.

- -

The initial value for this property is stretch and this is why flex items stretch to the height of the tallest one by default. They are in fact stretching to fill the flex container — the tallest item is defining the height of that.

- -

You could instead set align-items to flex-start in order to make the items line up at the start of the flex container, flex-end to align them to the end, or center to align them in the centre. Try this in the live example — I have given the flex container a height in order that you can see how the items can be moved around inside the container. See what happens if you set the value of align-items to:

- - - -

{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}}

- -

justify-content

- -

The {{cssxref("justify-content")}} property is used to align the items on the main axis, the direction in which flex-direction has set the flow. The initial value is flex-start which will line the items up at the start edge of the container, but you could also set the value to flex-end to line them up at the end, or center to line them up in the centre.

- -

You can also use the value space-between to take all the spare space after the items have been laid out, and share it out evenly between the items so there will be an equal amount of space between each item. To cause an equal amount of space on the right and left of each item use the value space-around. With space-around, items have a half-size space on either end. Or, to cause items to have equal space around them use the value space-evenly. With space-evenly, items have a full-size space on either end.

- -

Try the following values of justify-content in the live example:

- - - -

{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}}

- -

In the article Aligning Items in a Flex Container we will explore these properties in more depth, in order to have a better understanding of how they work. These simple examples however will be useful in the majority of use cases.

- -

Next steps

- -

After reading this article you should have an understanding of the basic features of Flexbox. In the next article we will look at how this specification relates to other parts of CSS.

diff --git a/files/de/web/css/css_flexible_box_layout/ordering_flex_items/index.html b/files/de/web/css/css_flexible_box_layout/ordering_flex_items/index.html new file mode 100644 index 0000000000..86354499d2 --- /dev/null +++ b/files/de/web/css/css_flexible_box_layout/ordering_flex_items/index.html @@ -0,0 +1,138 @@ +--- +title: Flex Elemente Sortieren +slug: Web/CSS/CSS_Flexible_Box_Layout/Flex_Elemente_Sortieren +tags: + - Barrierefreiheit + - CSS + - Flex + - Reihenfolge + - Richtung + - flexbox + - umgekehrt +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items +--- +

{{CSSRef}}

+ +

Neue Layout-Methoden wie z.B Flexbox und Grid geben die Möglichkeit, die Reihenfolge dessen Inhaltes zu verändern. Dieser Artikel handelt von den verschiedenen Möglichkeiten wie man die visuelle Reihenfolge des Inhalts, mithilfe von Flexbox, ändern kann. Dazu werden wir uns das Thema aus der perspektive der Barrierefreiheit betrachten.

+ +

Die Anzeige der Elemente umkehren

+ +

Die {{cssxref("flex-direction")}} Eigenschaft kann einer der 4 folgenden Werte bekommen:

+ + + +

Bei den ersten 2 Werten, bleibt die Reihenfolge wie sie auch im Quelltext angegeben ist und zeigt diese nacheinander von der Startlinie an an. Die Elemente werden dabei entweder in einer Reihe (row), oder in einer Spalte (column) angezeigt.
+ The items are displayed in a row starting on the left.

+ +

The items are displayed as a column starting from the top

+ +

Die letzten beiden Werte, kehren die Reihenfolge der Elemente um, indem Sie die Start und End-Linien wechseln

+ +

The items are displayed in reverse order starting on the right-hand line.

+ +

The items are displayed in a column in reverse order starting at the bottom line.

+ +

Denk dran das der Start der Linie mit den Schreibmodis verbunden ist. Das Reihenbeispiel oben demonstriert wie row und row-reverse in einer links-zu-rechts Sprache wie z.B. Deutsch funktioniert. Wenn du aber in einer rechts-zu-links Sprache wie z.B. Arabisch arbeitest dann würde row rechts starten und row-reverse links.

+ +

Flex containers with Arabic letters showing how row starts from the right hand side and row-reverse from the left.

+ +

Das kann zwar nach einer schönen Möglichkeit aussehen, Elemente in einer umgekehrten Reihenfolge anzuzeigen, es sollte einem jedoch bewusst sein, das elemente nur visuell in einer umgekehrten Reihenfolge angezeigt werden. Die Spezifikation sagt diesbezüglich folgendes:

+ +
+

“Hinweis: Die Umsortierungs-möglichkeiten betreffen absichtlich nur die visuelle Ansicht und lassen dabei Sprech- und Navigationsbasierte Reihenfolgen außen vor. Das ermöglicht Autoren die Möglichkeit die visuelle Ansicht zu ändern, während sie die Quellen-Reihenfolge in intakt hält für nicht-CSS UAs und für lineare Modelle, wie z.B. Sprachmodelle und Sequentielle Navigationen” - Reigenfolge und Orientation

+
+ +

Wenn die Elemente Hyperlinks sind, oder irgendwelche anderen Elemente zu denen der User hintabben kann, dann wäre die tab-reihenfolge die selbe, wie sie im Dokumenten-Quellcode vorkommt und nicht wie sie visuell angezeigt wird.

+ +

Wenn man einen reverse Wert benuzt, oder in irgendeiner Weise die Reihenfolge der Elemente beeinflusst, dann musst du schauen, ob man nicht doch die logische Reihenfolge im Quelltext ändert. Die Spezifikitation fährt fort mit einer Warnung, das man umsortierung nicht nutzen soll um Probleme im Quellcode zu fixen.

+ +
+

“Autoren sollten die Reihenfolgen- oder Umgekehrtwerte der flex-flow/flex-direction Eigenschaften nicht als Ersatz für die tatsächliche Änderung des Dokumentes nutzen, da das die Barrierefreiheit des Dokumentes einschränkt.”

+
+ +
+

Hinweis: Firefox hatte ein paar Jahre lang einen Bug, bei dem es versucht hatte der visuellen Reihenfolge und nicht der Quelltext-Reihenfolge zu folgen, daruch verhielt es sich anders als andere Browser. Dieser Bug ist mittlerweile gefixt. Man sollte immer Quelltext-Reihenfolge als die logische Reihenfolge für das Dokument benutzen, da alle aktuellen User Agents diesem Schema folgen.

+
+ +

In dem Live-Beispiel unten habe ich einen focus-style hinzugefügt, damit man, wenn man mit tab von link zu link wechselt, sieht welcher link markiert wird. Wenn man die Reihenfolge mit flex-direction wechselst, dann sieht man wie die tab Reihenfolge immernoch der Reihenfolge der Elemente im Quelltext folgen.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/order/order.html", '100%', 500)}}

+ +

Auf die gleiche Weise, wie das ändern des Wertes flex-direction nicht die Reihenfolge ändert, in denen zu Elementen navigiert werden, ändert es auch nicht die Reihenfolge in denen die Elemente gemalt werden. Es ist nur eine visuelle umkehrung der Elemente.

+ +

Die order Eigenschaft

+ +

Zusätzlich zum umkehren der Reihenfolge, in welcher flex-elemente visuell dargestellt werden, kann man die Elemente individuell ansprechen und die visuelle Reihenfolge mit der {{cssxref("order")}} Eigenschaft.

+ +

Die order Eigenschaft legt die Elemente in Ordnungsgruppen. Das heißt, das den Elementen eine Zahl zugewiesen werden, welche die dazugehörige Gruppe repräsentieren. Danach werden die Elemente, in die Reihenfolge gebracht, wie die Zahlen es vorgeben, der kleinste Wert zuerst. Wenn mehr als ein Element, den selben Wert besitzen, dann werden die Elemente innerhalb ihrer Gruppe so ausgelegt, wie sie im Quelltext vorkommen.

+ +

Beispiel: Ich habe 5 flex-items und weise order Eigenschaften folgendermaßen zu:

+ + + +

Diese Elemente werden dann wie folgt dargestellt:

+ + + +

Items have a number showing their source order which has been rearranged.

+ +

Um zu sehen, wie das die Reihenfolge beeinflusst, kann man im Live-Beispiel unten die Werte für order ändern. Man kann auch flex-direction zu row-reverse wechseln und sehen was passiert — die Start Linie ist getauscht, damit startet das sortieren von der anderen Seite.

+ +

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

+ +

Flex-items haben einen natürlichen order Wert von 0, deshalb werden alle Elemente mit einem Zahlen-Wert größer als 0 nach Elementen angezeigt, welche noch keinen Expliziten order Wert erhalten haben.

+ +

Man kann auch negative Zahlenwerte verwenden, das ist ziemlich hilfreich. Wenn man ein Element als erstes anzeigen lassen will, aber die Reihenfolge aller anderen Elemente so lassen will wie sie sind, dann kann man diesem Element eine Reihenfolge von -1 geben. Da das kleiner als 0 ist, wird dieses Element als erstes angezeigt.

+ +

Im Live-Code Beispiel unten habe Ich Elemente mithilfe einer Flexbox ausgelegt. Wenn man ändert welches Element die Klasse active besitzt, dann kann man ändern, welches Element als erstes angezeigt werden soll, mit allen anderen Elementen darunter.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/order/negative-order.html", '100%', 520)}}

+ +

Die Elemente werden anhand der, wie es in der Spezifikation beschrieben ist, order-modified- document order angezeigt. Der Wert der order-Eigenschaft wird berücksichtigt, bevor die Elemente angezeigt werden

+ +

Order ändert auch die Malreihenfolge der Elemente; Elemente mit einem geringerem order Wert, werden vor den Elementen mit einem höherem order Wert gemalt.

+ +

Die order Eigenschaft und Barrierefreiheit

+ +

Wenn man die order Eigenschaft nutzt, dann hat man exakt die gleichen Implikationen, wenn es ums Thema Barrierefreiheit geht, wie beim ändern der flex-direction. Die Eigenschaft order ändert die Reihenfolge, in der Elemente gemalt werden und die Reihenfolge in der diese Elemente visuell auftauchen. Es ändert nichts an der sequentiellen Navigationsreihenfolge der Elemente. Deshalb könnte es passieren, dass wenn ein Benutzer auf einer Website durch die Zeilen tabbt, das dieser in einem ziemlich verwirrendem Weg durch das Layout springt.

+ +

Wenn man in irgendeinem Live-Beispiel auf dieser Seite hin und her tabbt, dann kann man sehen, wie order das potential hat, eine seltsame Erfahrung für alle Benutzer zu schaffen, die nicht ein Zeiger-Gerät verwenden. Um mehr über dieses Thema zu erfahren, empfehle Ich folgende Ressourcen:

+ + + +

Anwendungsbeispiele für order

+ +

Manchmal gibt es Anwendungsorte, an denen es hilfreich ist, das die logische und visuelle Reihenfolge der Elemente voneinander getrennt sind. Vorsichtig eingesetzt ermöglicht die order Eigenschaft hilfreiche Lösungen für verbreitete Problemmuster.

+ +

Man hat z.B. ein Design einer Karte, welche Neuigkeiten anzeigt. Die Überschrift der Neuigkeiten ist das Schlüsselelement und wäre das Element, zu dem der Benutzer springen würde wenn er durch die verschiedenen Überschriften tabben würde. Die Karte hat dazu auch noch ein Datum; das fertige Design sieht dann ungefähr so aus:

+ +

A design component with a date, then heading and then content.

+ +

Visually the date appears above the heading, im Quelltext. Jedoch, wenn die Karte von einem Programm vorgelesen wird, wäre es mir lieber, wenn der Titel als erstes vorgelesen wird und danach das Veröffentlichungsdatum. Das geht ganz einfach wenn man die order Eigenschaft nutzt.

+ +

Die Karte wird unser flex-container sein, mit flex-direction auf column. Dann gebe ich dem Datum die order:-1. Das setzt es über die Überschrift.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/order/usecase-order.html", '100%', 730)}}

+ +

Diese kleinen Veränderungen sind die Art der Fälle in denen die order Eigenschaft Sinn macht. Behalte die logische Abfolge als Lese und Tab Reihenfolge des Dokumentes und pflege das in einer Art und Weise, das es Barrierefrei strukturiert bleibt. Danach nutze order lediglich zur Design-Optimierung. Wenn man das tut, sollte man darauf achten, das man die Reihenfolge von Elementen, durch die der Benutzer durchtabbt, nicht durcheinander bringt. Du wirst schnell bemerken, ob deine Entwicklungs-Entscheidungen es für den Benutzer schwierig machen.

diff --git a/files/de/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html b/files/de/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html deleted file mode 100644 index 38d6da7946..0000000000 --- a/files/de/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html +++ /dev/null @@ -1,398 +0,0 @@ ---- -title: Using CSS flexible boxes -slug: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox -translation_of_original: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes ---- -
{{CSSRef}}
- -

Die CSS3 Flexible Box, auch flexbox genannt, ist ein Layoutmodus, um Elemente einer Seite so anzuordnen, dass sie sich vorhersagbar verhalten, wenn sich das Layout verschiedenen Bildschirmgrößen und Ausgabegeräten anpasst. Für viele Anwendungsfälle stellt das Flexible-Box-Modell eine Verbesserung gegenüber dem Block-Modell dar, da es keine Floats nutzt. Außerdem fallen die Margins eines Containers nicht mit den Margins seines Inhalts zusammen.

- -

Viele Designer empfinden die Verwendung des Flexbox-Modells als einfacher. Kindelemente einer Flexbox können in jede Richtung ausgelegt werden sowie eine flexible Größe besitzen, um sich so an den Anzeigeplatz anzupassen. Die Positionierung von Kindelementen ist dadurch wesentlich leichter und komplexe Layouts sind nicht nur einfacher, sondern auch mit schönerem Code zu erlangen, was auf die unabhängige Platzierung der Elemente im Quellcode zurückzuführen ist. Diese Unabhängigkeit beeinflusst bewusst nur die visuelle Darstellung und lässt somit die Sprachordnung und Navigation, die auf dem Quellcode basiert, unberührt.

- -
Hinweis: Obwohl sich die Spezifikation des CSS Flexible Boxes Layouts im Aufruf zum letzen Arbeitsentwurf befindet (siehe aktuellen Editor-Entwurf), haben noch nicht alle Browser alle Eigenschaften der Flexbox implementiert. Es sei hiermit darauf verwiesen, dass es noch keine ausreichend übergreifende Unterstützung gibt. Einen Überblick über den Stand der jeweiligen Eigenschaften bietet die Kompatibilitätsliste.
- -

Flexible-Box-Konzept

- -

Ein entscheidender Aspekt des Flex-Layouts ist die Möglichkeit, die Breite und/oder Höhe der einzelnen Elemente, entsprechend des zur Verfügung stehenden Platzes, auf jedem Gerät anpassen zu können. Ein Flex-Container dehnt seine Elemente entweder aus, um den verfügbaren freien Platz zu füllen, oder verkleinert sie, um einen Overflow zu vermeiden.

- -

Der Flexbox-Layout-Algorithmus funktioniert richtungsunabhängig, anders als beim Block-Layout, das vertikal ausgerichtet ist, oder beim Inline-Layout, das horizontal ausgerichtet ist. Obwohl das Block-Layout gut auf Seiten anwendbar ist, mangelt es ihm an individuellen Richtlinien, um Applikationskomponenten zu unterstützen, die die Ausrichtung ändern, sich in ihrer Größe anpassen, je nach Benutzerprogrammen ausdehnen oder verkleinern, von der Horizontalen in die Vertikale rotieren müssen und so weiter. Das Flexbox-Layout lässt sich am besten auf Anwendungskomponenten und auf kleinere Layouts anwenden, während das (neu aufkommende) Grid-Layout für großflächigere Layouts bestimmt ist. Beide sind Bestandteil größerer Bemühungen der CSS-Arbeitsgruppe, um eine größere Interoperabilität zwischen Webanwendungen mit den unterschiedlichsten Benutzerprogrammen, den vielfältigen Schreibmethoden und anderen Anforderungen, die an die Flexibilität gestellt werden, zu ermöglichen.

- -

Flexible-Box-Wortschatz

- -

Während sich die Diskussion der Flexible Boxes von Bezeichnungen wie Horizontal-/Inline-Achse und Vertikal-/Block-Achse befreit, bedarf es dennoch einer neuen Terminologie, um das Modell adäquat zu beschreiben. Folgendes Diagramm soll als Referenz, zur Erörterung des Wortschatzes, dienen. Es zeigt einen Flex Container, dessen Eigenschaft flex-direction den Wert row hat. Das bedeutet, dass die flex items (im weiteren Verlauf als Flex-Elemente benannt) einander auf der Horizontalen, der Hauptachse, folgen – gemäß der gängigen Schreibmethode, die der Schreibrichtung folgt – in diesem Fall von links nach rechts.

- -

flex_terms.png

- -
-
Flex container (Flex-Container)
-
Das Elternelement, in dem die Flex-Elemente (entsprechen den flex items im Diagramm) liegen. Ein Flex-Container wird durch den Wert flex oder inline-flex der Eigenschaft {{Cssxref("display")}} bestimmt.
-
- -
-
Flex item (Flex-Elemente)
-
-

Jedes Kindelement eines Flex-Containers wird zu einem Flex-Element. Text, der sich unmittelbar in einem Flex-Container befindet, wird von einem anonymen Flex-Element umspannt.

-
-
Achsen
-
-

Jedes Flexible-Box-Layout folgt zwei Achsen. Die Hauptachse ist die Achse, auf der die Flex-Elemente aufeinander folgen. Die Querachse ist die Achse, die senkrecht zur Hauptachse steht.

- -
    -
  • Die flex-direction-Eigenschaft bestimmt die Hauptachse.
    • -
  • Die justify-content-Eigenschaft bestimmt, wie Flex-Elemente auf der Hauptachse der aktuellen Zeile ausgelegt werden.
    • -
  • Die align-items-Eigenschaft bestimmt die standardmäßige Ausrichtung der Flex-Elemente auf der Querachse der aktuellen Zeile.
    • -
  • Die align-self-Eigenschaft bestimmt die Ausrichtung einzelner Flex-Elemente auf der Querachse und überschreibt den standardmäßig durch align-items definierten Wert.
    • -
-
-
Richtungen
-
-

Die Seiten main start/main end und cross start/cross end des Flex-Containers beschreiben den Anfang und den Endpunkt der Fließrichtung von Flex-Elementen. Sie folgen der Haupt- und Querachse des Flex-Containers in der durch writing-mode festgelegten Richtung (von links nach rechts, von rechts nach links usw.)

- -
    -
  • Die order-Eigenschaft weist Elementen Ordinalzahlen zu und legt fest, welche Elemente zuerst erscheinen.
    • -
  • Die flex-flow-Eigenschaft fasst die flex-direction- und flex-wrap-Eigenschaften zusammen, um die Flex-Elemente anzulegen.
    • -
-
-
Lines
-
-

Die Flex-Elemente können auf eine oder mehrere Linien ausgelegt werden, gemäß der flex-wrap-Eigenschaft, welche die Richtung der Querachse und die Richtung der Linien steuert, in welche diese aufgereiht werden.

-
-
Dimensions
-
-

Die richtungsunabhängigen Entsprechungen von Höhe und Breite der Flex-Elemente sind main size und cross size, die entsprechend der Haupt- bzw. Querachse des Flex-Containers folgen.

- - -
-
- -

Flexible-Box-Auszeichnung

- -

Um per CSS Elemente auszuzeichnen, die dieses Layout benutzen, setzt man die display-Eigenschaft wie folgt:

- -
display: flex
- -

oder

- -
display: inline-flex
- -

Macht man es so, definiert man das Element als Flex-Container und seine Kindelemente als Flex-Elemente. Der flex-Wert macht den Flex-Container zu einem Block-level-Element. Der flex-inline- Wert macht den Flex-Container zu einem kleinen Inline-level-Element.

- -
Hinweis: Werden anbieterspzifische Präfixe für ältere Browser verwendet, fügt man den Präfix dem display-Wert hinzu und nicht der Eigenschaft. Zum Beispiel: display: -webkit-flex.
- -

Überlegungen zu Flex-Elementen

- -

Text, der sich unmittelbar in einem Flex-Container befindet, wird automatisch von einem anonymen Flex-Element umschlossen. Ein anonymes Flex-Element, das nur aus Leerraum besteht, wird nicht gerendert, ganz so, als ob es durch display: none ausgezeichnet ist.

- -

Absolut positionierte Kindelemente eines Flex-Containers werden so angeordnet, dass sich ihre statische Position auf die Hauptecke der ersten Inhaltsbox ihres Flex-Containers bezieht.

- -

Wegen eines bekannten Problems wird ein Flex-Element mit der Deklaration visibility: collapse gegenwärtig so behandelt, als ob es die Deklaration display: none besäße, und nicht, wie mit der Deklation visibility: hidden. Vorgeschlagener Workaround, bis zur Lösung dieses Problems, ist, die Deklaration visibility: hidden für Flex-Elemente zu benutzen, sodass sie sich so verhalten, als ob sie mit visibility: collapse ausgezeichnet wären. Für mehr Informationen siehe Bug 783470.

- -

Die Margins benachbarter Flex-Elemente fallen nicht zusammen. Die Benutzung von Auto-Margins absorbiert überflüssigen Platz in der Vertikalen und der Horizontalen und kann zur Ausrichtung oder Trennung von benachbarten Flex-Elementen genutzt werden. Siehe Align with ‘auto’ margins in der W3C Flexible-Box-Layout-Model-Spezifikation für eine detailliertere Beschreibung.

- -

Um eine vernünftige, minimal Größe für ‘flex Elemente’ zu gewährleisten, benutzt man min-width: auto und/oder min-height: auto. Bei ‘flex Elementen’ berechnet der auto Wert die mindest Breite/Höhe seiner Elemente so, dass nicht mehr Platz zu Verfügung steht, als es durch die Breite/Höhe seines Inhaltes erforderlich ist. Dadurch ist sichergestellt, dass die Elemente groß genug gerendert werden um ihren Inhalt anzeigen zu können. Siehe min-width und min-height für eine detailliertere Beschreibung.

- -

Die Ausrichtungseigenschaften der Flexbox gewährleisten eine “echte” Zentrierung, entgegen anderer Zentrierungsmethoden in CSS. Dies bedeutet, dass Flex-Elemente auch dann zentriert bleiben, wenn sie ihren Container überfließen. Dies kann manchmal jedoch problematisch sein. Überfließt der Inhalt die obere Kante der Seite oder die linke Seite (in LTR-Sprachen wie dem Englischen; Bei RTL-Sprachen wie dem Arabischen tritt dieses Problem auf der rechten Seite auf), so kann man in diesem Bereich nicht mehr Scrollen auch wenn sich darin Inhalte befinden! In einer künftigen Version werden die Ausrichtungseigenschaften so erweitert, dass es auch hier eine “sichere” Möglichkeit geben wird. Sollte dies ein Problem darstellen, kann man momentan stattdessen auf Margins zurückgreifen, um eine Zentrierung zu gewährleisten, da sich diese “sicher” verhalten und bei einem Überfließen nicht mehr zentrieren. Anstelle der align-Deklaration kann man einfach Auto-Margins auf die zu zentrierenden Elemente anwenden. Anstelle der justify-Eigenschaft kann man Auto-Margins auf die äußeren Enden des ersten und letzten Flex-Elements innerhalb eines Flex-Containers setzen. Die Auto-Margins werden entsprechend des geschätzten, freien Platzes die Flex-Elemente entweder zentrieren, sollte genug Platz vorhanden sein, und zur normalen Ausrichtung wechseln, wenn kein Platz da ist. Will man jedoch justify-content durch eine margin-basierte Zentrierung in einer multi-line-Flexbox ersetzen, hat man wahrscheinlich kein Glück dabei, da man die Margins auf dem ersten und letzten Flex-Element auf jeder Zeile setzen müsste. Sofern man nicht schon im Voraus bestimmten kann, welches Element auf welcher Zeile landet, kann man margin-basierte Zentrierung auf der Hauptachse nicht zuverlässig benutzen, um die justify-content-Deklaration zu ersetzen.

- -

Man sollte sich daran erinnern, dass, auch wenn die Reihenfolge in der Darstellung von Elementen unabhängig von der Notierung im Quellcode ist, sich diese nur in der visuellen Darstellung auswirkt und sich die Sprachreihenfolge und Navigationsanordnung nach der Anordnung im Quelltext richtet. Sprach- und Navigationssequenzen werden sogar von der order-Eigenschaft unberührt gelassen. Dementsprechend müssen Entwickler dafür Sorge tragen, Elemente in der richtigen Reihenfolge anzuordnen, um die Zugänglichkeit nicht zu gefährden.

- -

Flexible-Box-Eigenschaften

- -

Eigenschaften, die Flexible Boxes nicht beeinflussen

- -

Da Flexible Boxes einen anderen Darstellungsalgorithmus verwenden, ergibt die Verwendung einiger Eigenschaften bei Flex-Containern keinen Sinn:

- - - -

Beispiele

- -

Basis-Flex-Beispiel

- -

Dieses Grundbeispiel zeigt, wie man ein Element "flexibel" macht und wie sich gleichrangige Elemente in einem flexiblen Zustand verhalten.

- -
​<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <style>
-
-   .flex
-   {
-      /* basic styling */
-      width: 350px;
-      height: 200px;
-      border: 1px solid #555;
-      font: 14px Arial;
-
-      /* flexbox setup */
-      display: -webkit-flex;
-      -webkit-flex-direction: row;
-
-      display: flex;
-      flex-direction: row;
-   }
-
-   .flex > div
-   {
-      -webkit-flex: 1 1 auto;
-      flex: 1 1 auto;
-
-      width: 30px; /* To make the transition work nicely.  (Transitions to/from
-                      "width:auto" are buggy in Gecko and Webkit, at least.
-                      See http://bugzil.la/731886 for more info.) */
-
-      -webkit-transition: width 0.7s ease-out;
-      transition: width 0.7s ease-out;
-   }
-
-   /* colors */
-   .flex > div:nth-child(1){ background : #009246; }
-   .flex > div:nth-child(2){ background : #F1F2F1; }
-   .flex > div:nth-child(3){ background : #CE2B37; }
-
-   .flex > div:hover
-   {
-        width: 200px;
-   }
-
-   </style>
-
- </head>
- <body>
-  <p>Flexbox nuovo</p>
-  <div class="flex">
-    <div>uno</div>
-    <div>due</div>
-    <div>tre</div>
-  </div>
- </body>
-</html>
- -

Holy-Grail-Layout-Beispiel

- -

Dieses Beispiel demonstriert, wie Flexbox die Möglichkeit bietet, Layouts entsprechend verschiedener Auflösungen dynamisch anzupassen. Folgendes Diagramm stellt die Transformation bildlich dar.

- -

HolyGrailLayout.png

- -

Hier wird das Beispiel dargestellt, dass sich eine Seite, die für einen Browser ausgelegt ist, sich an ein Smartphone-Fenster anpassen muss. Es müssen sich nicht nur die Größenverhältnisse der Elemente anpassen, sondern auch die Anordnung, in der die Elemente präsentiert werden. Das wird durch die Benutzung von Flexbox sehr vereinfacht.

- -
​<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <style>
-
-  body {
-   font: 24px Helvetica;
-   background: #999999;
-  }
-
-  #main {
-   min-height: 800px;
-   margin: 0px;
-   padding: 0px;
-   display: -webkit-flex;
-   display:         flex;
-   -webkit-flex-flow: row;
-           flex-flow: row;
-   }
-
-  #main > article {
-   margin: 4px;
-   padding: 5px;
-   border: 1px solid #cccc33;
-   border-radius: 7pt;
-   background: #dddd88;
-   -webkit-flex: 3 1 60%;
-           flex: 3 1 60%;
-   -webkit-order: 2;
-           order: 2;
-   }
-
-  #main > nav {
-   margin: 4px;
-   padding: 5px;
-   border: 1px solid #8888bb;
-   border-radius: 7pt;
-   background: #ccccff;
-   -webkit-flex: 1 6 20%;
-           flex: 1 6 20%;
-   -webkit-order: 1;
-           order: 1;
-   }
-
-  #main > aside {
-   margin: 4px;
-   padding: 5px;
-   border: 1px solid #8888bb;
-   border-radius: 7pt;
-   background: #ccccff;
-   -webkit-flex: 1 6 20%;
-           flex: 1 6 20%;
-   -webkit-order: 3;
-           order: 3;
-   }
-
-  header, footer {
-   display: block;
-   margin: 4px;
-   padding: 5px;
-   min-height: 100px;
-   border: 1px solid #eebb55;
-   border-radius: 7pt;
-   background: #ffeebb;
-   }
-
-  /* Too narrow to support three columns */
-  @media all and (max-width: 640px) {
-
-   #main, #page {
-    -webkit-flex-flow: column;
-            flex-direction: column;
-   }
-
-   #main > article, #main > nav, #main > aside {
-    /* Return them to document order */
-    -webkit-order: 0;
-            order: 0;
-   }
-
-   #main > nav, #main > aside, header, footer {
-    min-height: 50px;
-    max-height: 50px;
-   }
-  }
-
- </style>
-  </head>
-  <body>
- <header>header</header>
- <div id='main'>
-    <article>article</article>
-    <nav>nav</nav>
-    <aside>aside</aside>
- </div>
- <footer>footer</footer>
-  </body>
-</html>
- -

Playground (Spielwiese)

- -

Es gibt verschiedene, online verfügbare Spielwiesen im Internet zum Experimentieren:

- - - -

Things to keep in mind

- -

The algorithm describing how flex items are laid out can be pretty tricky at times. Here are a few things to consider to avoid bad surprises when designing using flexible boxes.

- -

Flexible boxes are laid out in conformance of the writing mode, which means that main start and main end are laid out according to the position of start and end.

- -

cross start and cross end rely on the definition of the start or before position that depends on the value of direction.

- -

Page breaks are possible in flexible boxes layout as long as break- property allows it. CSS3 break-after, break-before, and break-inside as well as CSS 2.1 page-break-before, page-break-after, and page-break-inside properties are accepted on a flex container, flex items, and inside flex items.

- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support (single-line flexbox){{CompatGeckoDesktop("18.0")}}{{property_prefix("-moz")}}[2]
- {{CompatGeckoDesktop("22.0")}}		21.0{{property_prefix("-webkit")}}
- 29.0		11[3]12.10{{property_prefix("-webkit")}}[5]6.1{{property_prefix("-webkit")}}[1]
Multi-line flexbox{{CompatGeckoDesktop("28.0")}}21.0{{property_prefix("-webkit")}}
- 29.0		11[3]12.10[5]
- 15 {{property_prefix("-webkit")}}		6.1{{property_prefix("-webkit")}}[1]
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureFirefox Mobile (Gecko)Firefox OSAndroidIE PhoneOpera MobileSafari Mobile
Basic support (single-line flexbox){{CompatGeckoMobile("18.0")}}{{property_prefix("-moz")}}[2]
- {{CompatGeckoMobile("22.0")}}		 -

1.0{{property_prefix("-moz")}}[2]
- 1.1

- 		2.1{{property_prefix("-webkit")}}[4]
- 4.4		1112.10[5]
- 15{{property_prefix("-webkit")}}		7{{property_prefix("-webkit")}}[1]
Multi-line flexbox{{CompatGeckoMobile("28.0")}}1.32.1{{property_prefix("-webkit")}}[4]
- 4.4		1112.10[5]
- 15{{property_prefix("-webkit")}}		7{{property_prefix("-webkit")}}[1]
-
- -

[1] Safari up to 6.0 ( 6.1 for iOS ) supported an old incompatible draft version of the specification. Safari 6.1( 7 for iOS ) has been updated to support the final version.

- -

[2] Up to Firefox 22, to activate flexbox support, the user has to change the about:config preference layout.css.flexbox.enabled to true. From Firefox 22 to Firefox 27, the preference is true by default, but the preference has been removed in Firefox 28.

- -

[3] Internet Explorer 10 supports an old incompatible draft version of the specification; Internet Explorer 11 has been updated to support the final version.

- -

[4] Android browser up to 4.3 supported an old incompatible draft version of the specification. Android 4.4 has been updated to support the final version.

- -

[5] While in the initial implementation in Opera 12.10 flexbox was not prefixed, it got prefixed in versions 15 to 16 of Opera and 15 to 19 of Opera Mobile with {{property_prefix("-webkit")}}. The prefix was removed again in Opera 17 and Opera Mobile 24.

- -

See also

- - diff --git a/files/de/web/css/css_images/using_css_gradients/index.html b/files/de/web/css/css_images/using_css_gradients/index.html new file mode 100644 index 0000000000..e5ed267991 --- /dev/null +++ b/files/de/web/css/css_images/using_css_gradients/index.html @@ -0,0 +1,408 @@ +--- +title: Verwendung von CSS Farbverläufen +slug: Farbverläufe_in_CSS +tags: + - Beispiel + - CSS + - CSS Bild + - Guide + - NeedsLiveSample + - NeedsUpdate + - Web + - erweitert +translation_of: Web/CSS/CSS_Images/Using_CSS_gradients +--- +

CSS Farbverläufe sind neue Typen von {{cssxref("<image>")}}, die durch das CSS3 Image Module hinzugefügt wurden. Die Verwendung von CSS Farbverläufen erlaubt es, weiche Übergänge zwischen zwei oder mehr angegebenen Farben anzuzeigen. Dies ermöglicht es, Bilder für diese Effekte zu vermeiden, was Downloadzeit und Bandbreitennutzung verringert. Darüber hinaus sehen Objekte besser aus, wenn sie herangezoomt werden, da der Farbverlauf durch den Browser erzeugt wird, sodass das Layout viel flexibler gestaltet werden kann.

+ +

Browser unterstützen zwei Arten von Verläufen: lineare, definiert durch die {{cssxref("linear-gradient")}} Funktion, und radiale, definiert durch {{cssxref("radial-gradient")}}.

+ +

Lineare Farbverläufe

+ +

Um einen linearen Farbverlauf zu erstellen, wird ein Startpunkt gesetzt und eine Richtung (als Winkel), entlang welcher der Verlaufseffekt angewendet wird. Es werden auch Farbstopps definiert. Farbstopps sind die Farben, zwischen denen Gecko weiche Übergänge darstellen soll. Es müssen mindestens zwei angegeben werden, es können jedoch auch mehrere definiert werden, um komplexere Verlaufseffekte zu erzeugen.

+ +

Einfache lineare Farbverläufe

+ +

Hier ist ein linearer Farbverlauf, der in der Mitte (horizontal) oben (vertikal) mit blau beginnt und in weiß übergeht.

+ + + + + + + + + + + + +
ScreenshotLivedemo
+
 
+
+ +
+
/* Die alte Syntax, veraltet und mit Präfix versehen, für alte Browser */
+background: -prefix-linear-gradient(top, blue, white);
+
+/* Die neue Syntax, die von Browsern benötigt wird, die dem Standard folgen (Opera 12.1,
+   IE 10, Firefox 16, Chrome 26, Safari 6.1), ohne Präfix */
+background: linear-gradient(to bottom, blue, white);
+
+
+ +

(Siehe die Browser Kompatibilitätstabelle für eine Übersicht der Präfixe, die benötigt werden, um verschiedene Browserversionen zu unterstützen).

+ +

Der gleiche Farbverlauf wird geändert, sodass er von links nach rechts verläuft:

+ + + + + + + + + + + + +
ScreenshotLivedemo
basic_linear_blueleft.png +
 
+
+ +
/* Die alte Syntax, veraltet und mit Präfix versehen, für alte Browser */
+background: -prefix-linear-gradient(left, blue, white);
+
+/* Die neue Syntax, die von Browsern benötigt wird, die dem Standard folgen (Opera 12.1,
+   IE 10, Firefox 16, Chrome 26, Safari 6.1), ohne Präfix */
+background: linear-gradient(to right, blue, white); 
+ +

(Siehe die Browser Kompatibilitätstabelle für eine Übersicht der Präfixe, die benötigt werden, um verschiedene Browserversionen zu unterstützen).

+ +

Der Verlauf kann diagonal gestaltet werden, indem die horizontale und vertikale Startposition definiert wird. Zum Beispiel:

+ + + + + + + + + + + + +
ScreenshotLivedemo
basic_linear_bluetopleft.png +
 
+
+ +
/* Die alte Syntax, veraltet und mit Präfix versehen, für alte Browser */
+background: -prefix-linear-gradient(left top, blue, white);
+
+/* Die neue Syntax, die von Browsern benötigt wird, die dem Standard folgen (Opera 12.1,
+   IE 10, Firefox 16, Chrome 26, Safari 6.1), ohne Präfix */
+background: linear-gradient(to bottom right, blue, white);
+
+ +

Verwendung von Winkeln

+ +

Falls kein Winkel angegeben wird, wird er automatisch durch die angegebene Richtung bestimmt. Falls mehr Kontrolle über die Richtung des Verlaufs erwünscht ist, kann der Winkel explizit angegeben werden.

+ +

Als Beispiel sind hier zwei Verläufe, der erste mit einer Richtung nach rechts und der zweite mit einem Winkel von 70 Grad.

+ +

linear_gradient_angle.png

+ +

Der rechte verwendet CSS wie folgt:

+ +
background: linear-gradient(70deg, black, white);
+
+ +

Der Winkel wird angegeben als ein Winkel zwischen horizontaler Linie und der Verlaufslinie gegen den Uhrzeigersinn. Mit anderen Worten, 0deg erzeugt einen vertikalen Farbverlauf von unten nach oben, während 90deg einen horizontalen Verlauf von links nach rechts erzeugt:

+ +

linear_redangles.png

+ +
background: linear-gradient(<angle>, red, white);
+
+ +
+

Hinweis: Mehrere Browser implementieren (mit Präfix) einen älteren Entwurf der Spezifikation, wo 0deg nach rechts anstatt nach oben zeigte. Daher sollte auf den Wert des Winkels geachtet werden, wenn der standardisierte linear-gradient und der mit Präfix versehene gemischt verwendet werden. Eine einfache Formel hierfür ist 90 - x = y, wobei x die Standardverwendung und y die nicht standardisierte, mit Herstellerpräfix versehene Verwendung ist.

+
+ +

Farbstopps

+ +

Farbstopps sind Punkte entlang der Verlaufslinie, die eine bestimmte Farbe an dieser Position angeben. Die Position kann entweder als ein Prozentwert der Länge der Linie oder als absolute Länge angegeben werden. Es können beliebig viele Farbstopps definiert werden, um den gewünschten Effekt zu erzielen.

+ +

Falls die Position als Prozentwert angegeben wird, repräsentiert 0% den Startpunkt und 100% den Endpunkt; jedoch können auch Werte außerhalb dieses Bereichs verwendet werden, falls nötig, um den gewünschten Effekt zu erhalten.

+ +

Beispiel: Drei Farbstopps

+ +

Dieses Beispiel definiert drei Farbstopps:

+ + + + + + + + + + + + +
ScreenshotLivedemo
linear_colorstops1.png +
 
+
+ +
/* Die alte Syntax, veraltet und mit Präfix versehen, für alte Browser */
+background: -prefix-linear-gradient(top, blue, white 80%, orange);
+
+/* Die neue Syntax, die von Browsern benötigt wird, die dem Standard folgen (Opera 12.1,
+   IE 10, Firefox 16, Chrome 26, Safari 6.1), ohne Präfix */
+background: linear-gradient(to bottom, blue, white 80%, orange);
+
+ +

Beachte, dass der erste und letzte Farbstopp keine Position definieren; daher werden ihnen automatisch Werte von 0% und 100% zugewiesen. Der mittlere Farbstopp definiert eine Position von 80%, was ihn ziemlich weit nach unten verlagert.

+ +

Beispiel: Gleichmäßig verteilte Farbstopps

+ +

Hier ist ein Beispiel, das eine Vielzahl an Farben verwendet, die alle gleichmäßig verteilt sind:

+ + + + + + + + + + + + +
ScreenshotLivedemo
linear_rainbow.png +
 
+
+ +
/* Die alte Syntax, veraltet und mit Präfix versehen, für alte Browser */
+background: -prefix-linear-gradient(left, red, orange, yellow, green, blue);
+
+/* Die neue Syntax, die von Browsern benötigt wird, die dem Standard folgen (Opera 12.1,
+   IE 10, Firefox 16, Chrome 26, Safari 6.1), ohne Präfix */
+background: linear-gradient(to right, red, orange, yellow, green, blue);
+
+ +

Beachte, dass die Farbstopps automatisch gleichmäßig verteilt werden, wenn keine Positionen angegeben werden.

+ +

Transparenz und Farbverläufe

+ +

Farbverläufe unterstützen Transparenz. Diese kann zum Beispiel dazu benutzt werden, mehrere Hintergründe übereinander zu legen, um Fadingeffekte bei Hintergrundbilder zu erzeugen. Um dies zu erreichen, können entweder rgba Farben, hsla Farben oder das Schlüsselwort transparent verwendet werden (siehe Farbwerte). Jedoch sei darauf hingewiesen, dass einige Browser das Schlüsselwort transparent als rgba(0,0,0,0) anstatt rgba(255,255,255,0) rendern, was zu unerwarteten Ergebnissen (und potentiell dunklen Stellen) führen kann wenn die Farbverläufe sich überblenden. Daher ist es sicherer, opake Farbverläufe zu definieren.

+ +

Hier ist ein Beispiel, wie Transparenz in Farbverläufen verwendet wird:

+ +

Beispiel für Farbverläufe mit Transparenz

+ +
/* Die alte Syntax, veraltet und mit Präfix versehen, für alte Browser */
+background: -prefix-linear-gradient(left, rgba(255,255,255,0),
+  rgba(255,255,255,1)), url(http://foo.com/image.jpg);
+
+/* Die neue Syntax, die von Browsern benötigt wird, die dem Standard folgen (Opera 12.1,
+   IE 10, Firefox 16, Chrome 26, Safari 6.1), ohne Präfix */
+background: linear-gradient(to right, rgba(255,255,255,0),
+  rgba(255,255,255,1)), url(http://foo.com/image.jpg);
+
+ +

Die Hintergründe sind überlagert, wobei der erste Hintergrund oben liegt und jeder weitere Hintergrund weiter unten. Durch die Überlagerung von Hintergründen auf diese Weise können kreative Effekte erzeugt werden, wie oben zu sehen.

+ +

Radiale Farbverläufe

+ +

Radiale Farbverläufe werden durch die {{cssxref("radial-gradient")}} Funktion definiert. Die Syntax ist ähnlich der linearer Farbverläufe, außer, dass die Endform (ob Kreis oder Ellipse) des Verlaufs angegeben werden kann, als auch deren Größe. Standardmäßig ist die Endform eine Ellipse mit den gleichen Proportionen wie die der Containerbox.

+ +

Farbstopps

+ +

Farbstopps können auf die gleiche Weise wie bei linearen Farbverläufen angegeben werden. Die Verlaufslinie verläuft dabei von der Startposition in alle Richtungen.

+ +

Beispiel: Gleichmäßig verteilte Farbstopps

+ +

Standardmäßig werden Farbstopps wie bei linearen Verläufen gleichmäßig verteilt:

+ + + + + + + + + + + + +
ScreenshotLivedemo
radial_gradient_even.png +
 
+
+ +
background: radial-gradient(red, yellow, rgb(30, 144, 255));
+
+ +

Beispiel: Explizit verteilte Farbstopps

+ +

Hier werden bestimmte Positionen für die Farbstopps definiert:

+ + + + + + + + + + + + +
ScreenshotLivedemo
radial_gradient_varied.png +
 
+
+ +
background: radial-gradient(red 5%, yellow 25%, #1E90FF 50%);
+
+ +

Größe

+ +

Dies ist einer der Bereiche, in denen sich radiale von linearen Farbverläufen unterscheiden. Es kann ein Größenwert angegeben werden, der den Punkt definiert, der die Größe des Kreises oder der Ellipse bestimmt. Siehe die Beschreibung der Größenkonstanten für Details.

+ +

Beispiel: closest-side für Ellipsen

+ +

Diese Ellipse verwendet den Größenwert closest-side, welcher bedeutet, dass die Größe durch die Distanz zwischen dem Startpunkt (der Mitte) und der nähesten Seite der eingeschlossenen Box bestimmt wird.

+ + + + + + + + + + + + +
ScreenshotLivedemo
radial_ellipse_size1.png +
 
+
+ +
background: radial-gradient(ellipse closest-side, red, yellow 10%, #1E90FF 50%, white);
+
+ +

Beispiel: farthest-corner für Ellipsen

+ +

Dieses Beispiel ist ähnlich zum vorherigen mit dem Unterschied, dass die Größe der Ellipse durch farthest-corner bestimmt wird, welches die Größe des Verlaufs durch die Distanz zwischen Startpunkt und der vom Startpunkt am weitesten entfernten Ecke der engeschlossenen Box bestimmt.

+ + + + + + + + + + + + +
ScreenshotLivedemo
radial_ellipse_size2.png +
 
+
+ +
background: radial-gradient(ellipse farthest-corner, red, yellow 10%, #1E90FF 50%, white);
+
+ +

Beispiel: closest-side für Kreise

+ +

Dieses Beispiel verwendet closest-side, welches die Größe des Kreises als die Distanz zwischen dem Startpunkt und der nähesten Seite definiert.

+ + + + + + + + + + + + +
ScreenshotLivedemo
radial_circle_size1.png +
 
+
+ +
background: radial-gradient(circle closest-side, red, yellow 10%, #1E90FF 50%, white);
+
+ +

Hier entspricht der Radius des Kreises der Hälfte der Höhe der Box, da der obere und untere Rand gleich weit vom Startpunkt entfernt sind und näher als der linke und rechte Rand sind.

+ +

Wiederholung von Farbverläufen

+ +

Die {{cssxref("linear-gradient")}} und {{cssxref("radial-gradient")}} Eigenschaften unterstützen nicht automatisch die Wiederholung von Farbstopps. Jedoch sind die Eigenschaften {{cssxref("repeating-linear-gradient")}} und {{cssxref("repeating-radial-gradient")}} für diese Funktionalität verfügbar.

+ +

Beispiele: Sich wiederholender linearer Farbverlauf

+ +

Dieses Beispiel verwendet {{cssxref("repeating-linear-gradient")}}, um einen Farbverlauf zu erzeugen:

+ + + + + + + + + + + + +
ScreenshotLivedemo
repeating_linear_gradient.png +
 
+
+ +
background: repeating-linear-gradient(-45deg, red, red 5px, white 5px, white 10px);
+
+ +

Ein weiteres Beispiel, das die {{cssxref("repeating-linear-gradient")}} Eigenschaft verwendet.

+ +

repeat_background_gradient_checked.png

+ +
background-color: #000;
+background-image: repeating-linear-gradient(90deg, transparent, transparent 50px,
+      rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px,
+      rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px,
+      rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
+repeating-linear-gradient(0deg, transparent, transparent 50px, rgba(255, 127, 0, 0.25) 50px,
+      rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px, rgba(255, 127, 0, 0.25) 63px,
+      rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px, rgba(255, 206, 0, 0.25) 116px,
+      rgba(255, 206, 0, 0.25) 166px),
+repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px,
+      rgba(143, 77, 63, 0.25) 10px),
+repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px,
+      rgba(143, 77, 63, 0.25) 10px);
+
+ +

Beispiel: Sich wiederholender radialer Farbverlauf

+ +

Dieses Beispiel verwendet {{cssxref("repeating-radial-gradient")}}, um einen Farbverlauf zu erzeugen:

+ + + + + + + + + + + + +
ScreenshotLivedemo
repeating_radial_gradient.png +
 
+
+ +
background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
+
+ +

Siehe auch

+ + diff --git a/files/de/web/css/css_lists_and_counters/consistent_list_indentation/index.html b/files/de/web/css/css_lists_and_counters/consistent_list_indentation/index.html new file mode 100644 index 0000000000..b2309f5e82 --- /dev/null +++ b/files/de/web/css/css_lists_and_counters/consistent_list_indentation/index.html @@ -0,0 +1,104 @@ +--- +title: Konsistente Listeneinrückung +slug: Web/CSS/CSS_Lists_and_Counters/Konsistente_Listeneinrückung +tags: + - Anleitung + - CSS + - Intermediate + - NeedsUpdate +translation_of: Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation +--- +
{{CSSRef}}
+ +

Eine der häufigsten Stiländerungen, die auf Listen angewendet werden, ist eine Änderung der Einrückungsweite — d. h. wie weit die Listeneinträge nach rechts verschoben sind. Dies führt oft zu Frustration, da das, was in einem Browser funktioniert, in einem anderen oft nicht denselben Effekt hat. Wenn zum Beispiel angegeben wird, dass Listen keinen linken Außenabstand haben, verschieben sie sich im Internet Explorer, bleiben jedoch hartnäckig am selben Platz in Gecko-basierten Browsern. Dieser Artikel hilft, die Probleme zu verstehen, die auftreten können, und wie man diese verhindert.

+ +

Um zu verstehen, warum dies der Fall ist, und noch wichtiger, wie das Problem generell vermieden werden kann, ist es notwendig, die Details der Listenerstellung zu untersuchen.

+ +

Eine Liste erstellen

+ +

Zunächst betrachten wir einen einzelnen Listeneintrag. Dieser Listeneintrag hat kein Aufzählungszeichen (auch bekannt als "Bullet") und ist noch nicht Teil einer Liste. Er hängt allein in der Leere, schlicht und einfach, wie in Abbildung 1 gezeigt.

+ +

Abbildung 1

+ +

Der gepunktete rote Rahmen repräsentiert die äußeren Ränder des Inhaltsbereichs des Listeneintrags. Erinnere dich, dass der Listeneintrag zu diesem Zeitpunkt weder einen Innenabstand noch Ränder besitzt. Falls wir zwei oder mehr Listeneinträge hinzufügen, erhalten wir als Ergebnis etwas wie in Abbildung 2.

+ +

Abbildung 2

+ +

Jetzt umschließen wir diese durch ein Elternelement; in diesem Fall, umschließen wir sie durch eine ungeordnete Liste (d. h. <ul>). Laut dem CSS Boxmodell müssen die Boxen von Listeneinträgen innerhalb des Inhaltsbereichs des Elternelements dargestellt werden. Da das Elternelement aktuell weder Innen- noch Außenabstände hat, erhalten wir als Ergebnis das in Abbildung 3 Gezeigte.

+ +

Abbildung 3

+ +

Hier zeigt uns der gepunktete blaue Rahmen die Ränder des Inhaltsbereichs des <ul> Elements. Da wir keinen Innenabstand für das <ul> Element haben, umschließt sein Inhalt die drei Listeneinträge passend.

+ +

Nun fügen wir Listenaufzählungszeichen hinzu. Da es sich hierbei um eine ungeordnete Liste handelt, fügen wir gewöhnliche gefüllte Kreis-"Bullets" hinzu, wie in Abbildung 4 dargestellt.

+ +

Abbildung 4

+ +

Visuell sind die Aufzählungszeichen außerhalb des Inhaltsbereichs des <ul>, jedoch spielt dies hier keine Rolle. Der Hauptpunkt ist, dass die Aufzählungszeichen außerhalb der "Hauptbox" des <li> Elements platziert sind, nicht des <ul>. Sie sind sozusagen Anhängsel der Listeneinträge, die außerhalb des Inhaltsbereichs des <li> liegen, jedoch trotzdem am <li> hängen.

+ +

Dies ist der Grund, warum in allen Browsern außer dem Internet Explorer für Windows die Aufzählungszeichen außerhalb der Rahmen eines <li> Elements liegen, vorausgesetzt, der Wert von list-style-position ist outside. Falls er zu inside geändert wird, werden die Aufzählungszeichen innerhalb des Inhalts des <li>s gezogen, obwohl sie eine Inlinebox sind, die am Anfang des <li> platziert ist.

+ +

Doppelt einrücken

+ +

Wie wird all dies nun im Dokument dargestellt? Im Moment haben wir eine Situation analog zu diesen Stilen:

+ +
ul, li {margin-left: 0; padding-left: 0;}
+ +

Falls diese Liste so wie sie ist in ein Dokument eingebunden würde, gäbe es keine sichtbare Einrückung und die Aufzählungszeichen liefen Gefahr, am linken Rand des Browserfensters herauszufallen.

+ +

Um dies zu vermeiden und eine Einrückung zu erhalten, gibt es nur drei Möglichkeiten für Browserhersteller.

+ +
    +
  1. Gib jedem <li> Element einen linken Außenabstand.
    2. +
  2. Gib dem <ul> Element einen linken Außenabstand.
    3. +
  3. Gib dem <ul> Element einen linken Innenabstand.
    4. +
+ +

Wie sich herausstellt, hat niemand auf die erste Option zurückgegriffen. Die zweite Option wurde von Internet Explorer für Windows und Macintosh und Opera gewählt. Die dritte wird von Gecko und allen darauf basierenden Browsern verwendet.

+ +

Lass uns die beiden Herangehensweisen genauer betrachten. Im Internet Explorer und Opera werden die Listen durch das Setzen eines linken Außenabstands von 40 Pixeln für das <ul> Element gesetzt. Falls wir dem <ul> Element eine Hintergrundfarbe zuweisen und die Rahmen der Listeneinträge und <ul> unverändert lassen, erhalten wir das Ergebnis, das in Abbildung 5 gezeigt wird.

+ +

Abbildung 5

+ +

Im Gegensatz dazu setzt Gecko einen linken Innenabstand von 40 Pixeln für das <ul> Element. Werden die exakt gleichen Stile benutzt, die zur Erzeugung von Abbildung 5 verwendet wurden, erhalten wir beim Laden des Beispiels in Gecko-basierten Browsern Abbildung 6.

+ +

Abbildung 6

+ +

Wie wir sehen können, bleiben die Aufzählungszeichen an den <li> Elementen hängen, unabhängig davon, wo sie sind. Der Unterschied liegt ausschließlich in der Darstellung des <ul>. Wir können den Unterschied nur sehen, wenn wir versuchen, einen Hintergrund oder einen Rahmen für das <ul> Element zu setzen.

+ +

Konsistenz finden

+ +

Zusammenfassend kann man sagen: Falls eine konsistente Darstellung von Listen zwischen Gecko, Internet Explorer und Opera gewünscht ist, müssen beide linken Abstände des <ul> Elements gesetzt werden, Innen- und Außenabstand. Wir können <li> für diesen Zweck komplett ignorieren. Zur Erstellung der Standardanzeige in Netscape 6.x schreibt man folgendes:

+ +
ul {margin-left: 0; padding-left: 40px;}
+ +

Falls lieber das Internet Explorer/Opera Modell gewünscht ist, dann:

+ +
ul {margin-left: 40px; padding-left: 0;}
+ +

Natürlich können die eigenen bevorzugten Werte angegeben werden. Wenn gewünscht, können beide auf 1.25em gesetzt werden -- es gibt keinen Grund, bei pixelbasierter Einrückung zu bleiben. Falls Listen zurückgesetzt werden sollen, sodass sie keine Einrückung haben, müssen sowohl Innen- als auch Außenabstand auf null gesetzt werden:

+ +
ul {margin-left: 0; padding-left: 0;}
+ +

Beachte hierbei jedoch, dass dadurch die Bullets außerhalb der Liste und deren Elternelement hängen. Falls das Elternelement das body Element ist, sind die Bullets höchstwahrscheinlich außerhalb des Browserfensters, und sind daher nicht sichtbar.

+ +

Zusammenfassung

+ +

Am Ende sehen wir, dass keiner der in diesem Artikel genannten Browser Listen richtig oder falsch darstellt. Sie verwenden verschiedene Standardstile und dadurch entstehen die Probleme. Wenn sichergestellt wird, dass sowohl linker Innen- als auch Außenabstand gesetzt sind, kann wesentlich größere browserübergreifende Konsistenz bei der Einrückung von Listen erzielt werden.

+ +

Empfehlungen

+ + + +
+

Originaldokumentinformation

+ +
    +
  • Autor(en): Eric A. Meyer, Netscape Communications
    • +
  • Zuletzt aktualisiert: Published 30 Aug 2002
    • +
  • Copyright Information: Copyright © 2001-2003 Netscape. Alle Rechte vorbehalten.
    • +
  • Hinweis: Dieser nachgedruckte Artikel war ursprünglich Teil der DevEdge Seite.
    • +
+
diff --git "a/files/de/web/css/css_lists_and_counters/css_z\303\244hler_verwenden/index.html" "b/files/de/web/css/css_lists_and_counters/css_z\303\244hler_verwenden/index.html" deleted file mode 100644 index 252f90b530..0000000000 --- "a/files/de/web/css/css_lists_and_counters/css_z\303\244hler_verwenden/index.html" +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: CSS Zähler verwenden -slug: Web/CSS/CSS_Lists_and_Counters/CSS_Zähler_verwenden -tags: - - Anleitung - - CSS - - CSS Listen - - CSS Wert - - Fortgeschrittene - - Layout - - Referenz - - Web -translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters ---- -
{{CSSRef}}
- -

CSS Zähler sind im Grunde von CSS verwaltete Variablen, deren Werte mittels CSS Regeln inkrementiert werden können, um nachzuvollziehen, wie oft sie verwendet wurden. Dies ermöglicht es, die Darstellung von Inhalten anhand der Positionierung innerhalb des Dokuments anzupassen. CSS Zähler sind eine Implementierung von Automatic counters and numbering in CSS 2.1.

- -

Der Wert eines Zählers wird durch die Verwendung von {{cssxref("counter-reset")}} geändert. {{cssxref("counter-increment")}} kann auf einer Seite durch verwenden der counter() oder counters() Funktion der {{cssxref("content")}} Eigenschaft dargestellt werden.

- -

Zähler verwenden

- -

Um einen CSS Zähler zu verwenden, muss er zunächst auf einen Wert zurückgesetzt werden (standardmäßig 0). Um den Wert eines Zählers zu einem Element hinzuzufügen, kann die counter() Funktion verwendet werden. Das folgende CSS fügt am Anfang jedes h3 Elements "Abschnitt <der Wert des Zählers>:" ein.

- -
body {
-  counter-reset: section;                      /* Setzt den Abschnittszähler auf 0 */
-}
-
-h3::before {
-  counter-increment: section;                  /* Erhöht den Abschnittszähler */
-  content: "Abschnitt " counter(section) ": "; /* Zeigt den Zähler an */
-}
-
- -

Beispiel:

- -
<h3>Einführung</h3>
-<h3>Inhalt</h3>
-<h3>Zusammenfassung</h3>
- -

{{EmbedLiveSample("Zähler_verwenden", 280, 150)}}

- -

Zähler verschachteln

- -

Ein CSS Zähler ist besonders nützlich, um kontinuierte Listen zu erstellen, da in Kindelementen automatisch eine neue Instanz eines CSS Zählers erzeugt wird. Wird die counters() Funktion verwendet, kann ein String zwischen verschiedenen Leveln von verschachtelten Zählern eingefügt werden. Beispielsweise dieses CSS:

- -
ol {
-  counter-reset: section;                /* Erstellt mit jedem ol Element
-                                            eine neue Instanz des
-                                            Abschnittszählers. */
-  list-style-type: none;
-}
-
-li::before {
-  counter-increment: section;            /* Inkrementiert nur diese Instanz
-                                            des Abschnittszählers. */
-  content: counters(section,".") " ";    /* Fügt den Wert aller Instanzen
-                                            des Abschnittszählers durch "."
-                                            getrennt hinzu. */
-                                         /* Falls < IE8 unterstützt werden soll,
-                                            sollte sichergestellt werden, dass
-                                            kein Leerzeichen nach dem ',' steht. */
-}
-
- -

Kombiniert mit dem folgenden HTML:

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

Erzeugt dieses Ergebnis:

- -

{{EmbedLiveSample("Zähler_verschachteln", 250, 350)}}

- -

Spezifikationen

- - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName("CSS2.1", "generate.html#generate.html#counters", "counter-reset")}}{{Spec2("CSS2.1")}}Ursprüngliche Definition
- -

Siehe auch

- - - -

Es gibt ein zusätzliches Beispiel unter http://www.mezzoblue.com/archives/20.../counter_intu/. Dieser Blogeintrag wurde am 01.11.2006 veröffentlicht, sollte jedoch noch zutreffen.

diff --git "a/files/de/web/css/css_lists_and_counters/konsistente_listeneinr\303\274ckung/index.html" "b/files/de/web/css/css_lists_and_counters/konsistente_listeneinr\303\274ckung/index.html" deleted file mode 100644 index b2309f5e82..0000000000 --- "a/files/de/web/css/css_lists_and_counters/konsistente_listeneinr\303\274ckung/index.html" +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: Konsistente Listeneinrückung -slug: Web/CSS/CSS_Lists_and_Counters/Konsistente_Listeneinrückung -tags: - - Anleitung - - CSS - - Intermediate - - NeedsUpdate -translation_of: Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation ---- -
{{CSSRef}}
- -

Eine der häufigsten Stiländerungen, die auf Listen angewendet werden, ist eine Änderung der Einrückungsweite — d. h. wie weit die Listeneinträge nach rechts verschoben sind. Dies führt oft zu Frustration, da das, was in einem Browser funktioniert, in einem anderen oft nicht denselben Effekt hat. Wenn zum Beispiel angegeben wird, dass Listen keinen linken Außenabstand haben, verschieben sie sich im Internet Explorer, bleiben jedoch hartnäckig am selben Platz in Gecko-basierten Browsern. Dieser Artikel hilft, die Probleme zu verstehen, die auftreten können, und wie man diese verhindert.

- -

Um zu verstehen, warum dies der Fall ist, und noch wichtiger, wie das Problem generell vermieden werden kann, ist es notwendig, die Details der Listenerstellung zu untersuchen.

- -

Eine Liste erstellen

- -

Zunächst betrachten wir einen einzelnen Listeneintrag. Dieser Listeneintrag hat kein Aufzählungszeichen (auch bekannt als "Bullet") und ist noch nicht Teil einer Liste. Er hängt allein in der Leere, schlicht und einfach, wie in Abbildung 1 gezeigt.

- -

Abbildung 1

- -

Der gepunktete rote Rahmen repräsentiert die äußeren Ränder des Inhaltsbereichs des Listeneintrags. Erinnere dich, dass der Listeneintrag zu diesem Zeitpunkt weder einen Innenabstand noch Ränder besitzt. Falls wir zwei oder mehr Listeneinträge hinzufügen, erhalten wir als Ergebnis etwas wie in Abbildung 2.

- -

Abbildung 2

- -

Jetzt umschließen wir diese durch ein Elternelement; in diesem Fall, umschließen wir sie durch eine ungeordnete Liste (d. h. <ul>). Laut dem CSS Boxmodell müssen die Boxen von Listeneinträgen innerhalb des Inhaltsbereichs des Elternelements dargestellt werden. Da das Elternelement aktuell weder Innen- noch Außenabstände hat, erhalten wir als Ergebnis das in Abbildung 3 Gezeigte.

- -

Abbildung 3

- -

Hier zeigt uns der gepunktete blaue Rahmen die Ränder des Inhaltsbereichs des <ul> Elements. Da wir keinen Innenabstand für das <ul> Element haben, umschließt sein Inhalt die drei Listeneinträge passend.

- -

Nun fügen wir Listenaufzählungszeichen hinzu. Da es sich hierbei um eine ungeordnete Liste handelt, fügen wir gewöhnliche gefüllte Kreis-"Bullets" hinzu, wie in Abbildung 4 dargestellt.

- -

Abbildung 4

- -

Visuell sind die Aufzählungszeichen außerhalb des Inhaltsbereichs des <ul>, jedoch spielt dies hier keine Rolle. Der Hauptpunkt ist, dass die Aufzählungszeichen außerhalb der "Hauptbox" des <li> Elements platziert sind, nicht des <ul>. Sie sind sozusagen Anhängsel der Listeneinträge, die außerhalb des Inhaltsbereichs des <li> liegen, jedoch trotzdem am <li> hängen.

- -

Dies ist der Grund, warum in allen Browsern außer dem Internet Explorer für Windows die Aufzählungszeichen außerhalb der Rahmen eines <li> Elements liegen, vorausgesetzt, der Wert von list-style-position ist outside. Falls er zu inside geändert wird, werden die Aufzählungszeichen innerhalb des Inhalts des <li>s gezogen, obwohl sie eine Inlinebox sind, die am Anfang des <li> platziert ist.

- -

Doppelt einrücken

- -

Wie wird all dies nun im Dokument dargestellt? Im Moment haben wir eine Situation analog zu diesen Stilen:

- -
ul, li {margin-left: 0; padding-left: 0;}
- -

Falls diese Liste so wie sie ist in ein Dokument eingebunden würde, gäbe es keine sichtbare Einrückung und die Aufzählungszeichen liefen Gefahr, am linken Rand des Browserfensters herauszufallen.

- -

Um dies zu vermeiden und eine Einrückung zu erhalten, gibt es nur drei Möglichkeiten für Browserhersteller.

- -
    -
  1. Gib jedem <li> Element einen linken Außenabstand.
    2. -
  2. Gib dem <ul> Element einen linken Außenabstand.
    3. -
  3. Gib dem <ul> Element einen linken Innenabstand.
    4. -
- -

Wie sich herausstellt, hat niemand auf die erste Option zurückgegriffen. Die zweite Option wurde von Internet Explorer für Windows und Macintosh und Opera gewählt. Die dritte wird von Gecko und allen darauf basierenden Browsern verwendet.

- -

Lass uns die beiden Herangehensweisen genauer betrachten. Im Internet Explorer und Opera werden die Listen durch das Setzen eines linken Außenabstands von 40 Pixeln für das <ul> Element gesetzt. Falls wir dem <ul> Element eine Hintergrundfarbe zuweisen und die Rahmen der Listeneinträge und <ul> unverändert lassen, erhalten wir das Ergebnis, das in Abbildung 5 gezeigt wird.

- -

Abbildung 5

- -

Im Gegensatz dazu setzt Gecko einen linken Innenabstand von 40 Pixeln für das <ul> Element. Werden die exakt gleichen Stile benutzt, die zur Erzeugung von Abbildung 5 verwendet wurden, erhalten wir beim Laden des Beispiels in Gecko-basierten Browsern Abbildung 6.

- -

Abbildung 6

- -

Wie wir sehen können, bleiben die Aufzählungszeichen an den <li> Elementen hängen, unabhängig davon, wo sie sind. Der Unterschied liegt ausschließlich in der Darstellung des <ul>. Wir können den Unterschied nur sehen, wenn wir versuchen, einen Hintergrund oder einen Rahmen für das <ul> Element zu setzen.

- -

Konsistenz finden

- -

Zusammenfassend kann man sagen: Falls eine konsistente Darstellung von Listen zwischen Gecko, Internet Explorer und Opera gewünscht ist, müssen beide linken Abstände des <ul> Elements gesetzt werden, Innen- und Außenabstand. Wir können <li> für diesen Zweck komplett ignorieren. Zur Erstellung der Standardanzeige in Netscape 6.x schreibt man folgendes:

- -
ul {margin-left: 0; padding-left: 40px;}
- -

Falls lieber das Internet Explorer/Opera Modell gewünscht ist, dann:

- -
ul {margin-left: 40px; padding-left: 0;}
- -

Natürlich können die eigenen bevorzugten Werte angegeben werden. Wenn gewünscht, können beide auf 1.25em gesetzt werden -- es gibt keinen Grund, bei pixelbasierter Einrückung zu bleiben. Falls Listen zurückgesetzt werden sollen, sodass sie keine Einrückung haben, müssen sowohl Innen- als auch Außenabstand auf null gesetzt werden:

- -
ul {margin-left: 0; padding-left: 0;}
- -

Beachte hierbei jedoch, dass dadurch die Bullets außerhalb der Liste und deren Elternelement hängen. Falls das Elternelement das body Element ist, sind die Bullets höchstwahrscheinlich außerhalb des Browserfensters, und sind daher nicht sichtbar.

- -

Zusammenfassung

- -

Am Ende sehen wir, dass keiner der in diesem Artikel genannten Browser Listen richtig oder falsch darstellt. Sie verwenden verschiedene Standardstile und dadurch entstehen die Probleme. Wenn sichergestellt wird, dass sowohl linker Innen- als auch Außenabstand gesetzt sind, kann wesentlich größere browserübergreifende Konsistenz bei der Einrückung von Listen erzielt werden.

- -

Empfehlungen

- - - -
-

Originaldokumentinformation

- -
    -
  • Autor(en): Eric A. Meyer, Netscape Communications
    • -
  • Zuletzt aktualisiert: Published 30 Aug 2002
    • -
  • Copyright Information: Copyright © 2001-2003 Netscape. Alle Rechte vorbehalten.
    • -
  • Hinweis: Dieser nachgedruckte Artikel war ursprünglich Teil der DevEdge Seite.
    • -
-
diff --git a/files/de/web/css/css_lists_and_counters/using_css_counters/index.html b/files/de/web/css/css_lists_and_counters/using_css_counters/index.html new file mode 100644 index 0000000000..252f90b530 --- /dev/null +++ b/files/de/web/css/css_lists_and_counters/using_css_counters/index.html @@ -0,0 +1,126 @@ +--- +title: CSS Zähler verwenden +slug: Web/CSS/CSS_Lists_and_Counters/CSS_Zähler_verwenden +tags: + - Anleitung + - CSS + - CSS Listen + - CSS Wert + - Fortgeschrittene + - Layout + - Referenz + - Web +translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +--- +
{{CSSRef}}
+ +

CSS Zähler sind im Grunde von CSS verwaltete Variablen, deren Werte mittels CSS Regeln inkrementiert werden können, um nachzuvollziehen, wie oft sie verwendet wurden. Dies ermöglicht es, die Darstellung von Inhalten anhand der Positionierung innerhalb des Dokuments anzupassen. CSS Zähler sind eine Implementierung von Automatic counters and numbering in CSS 2.1.

+ +

Der Wert eines Zählers wird durch die Verwendung von {{cssxref("counter-reset")}} geändert. {{cssxref("counter-increment")}} kann auf einer Seite durch verwenden der counter() oder counters() Funktion der {{cssxref("content")}} Eigenschaft dargestellt werden.

+ +

Zähler verwenden

+ +

Um einen CSS Zähler zu verwenden, muss er zunächst auf einen Wert zurückgesetzt werden (standardmäßig 0). Um den Wert eines Zählers zu einem Element hinzuzufügen, kann die counter() Funktion verwendet werden. Das folgende CSS fügt am Anfang jedes h3 Elements "Abschnitt <der Wert des Zählers>:" ein.

+ +
body {
+  counter-reset: section;                      /* Setzt den Abschnittszähler auf 0 */
+}
+
+h3::before {
+  counter-increment: section;                  /* Erhöht den Abschnittszähler */
+  content: "Abschnitt " counter(section) ": "; /* Zeigt den Zähler an */
+}
+
+ +

Beispiel:

+ +
<h3>Einführung</h3>
+<h3>Inhalt</h3>
+<h3>Zusammenfassung</h3>
+ +

{{EmbedLiveSample("Zähler_verwenden", 280, 150)}}

+ +

Zähler verschachteln

+ +

Ein CSS Zähler ist besonders nützlich, um kontinuierte Listen zu erstellen, da in Kindelementen automatisch eine neue Instanz eines CSS Zählers erzeugt wird. Wird die counters() Funktion verwendet, kann ein String zwischen verschiedenen Leveln von verschachtelten Zählern eingefügt werden. Beispielsweise dieses CSS:

+ +
ol {
+  counter-reset: section;                /* Erstellt mit jedem ol Element
+                                            eine neue Instanz des
+                                            Abschnittszählers. */
+  list-style-type: none;
+}
+
+li::before {
+  counter-increment: section;            /* Inkrementiert nur diese Instanz
+                                            des Abschnittszählers. */
+  content: counters(section,".") " ";    /* Fügt den Wert aller Instanzen
+                                            des Abschnittszählers durch "."
+                                            getrennt hinzu. */
+                                         /* Falls < IE8 unterstützt werden soll,
+                                            sollte sichergestellt werden, dass
+                                            kein Leerzeichen nach dem ',' steht. */
+}
+
+ +

Kombiniert mit dem folgenden HTML:

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

Erzeugt dieses Ergebnis:

+ +

{{EmbedLiveSample("Zähler_verschachteln", 250, 350)}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName("CSS2.1", "generate.html#generate.html#counters", "counter-reset")}}{{Spec2("CSS2.1")}}Ursprüngliche Definition
+ +

Siehe auch

+ + + +

Es gibt ein zusätzliches Beispiel unter http://www.mezzoblue.com/archives/20.../counter_intu/. Dieser Blogeintrag wurde am 01.11.2006 veröffentlicht, sollte jedoch noch zutreffen.

diff --git a/files/de/web/css/css_masken/index.html b/files/de/web/css/css_masken/index.html deleted file mode 100644 index 74001bd680..0000000000 --- a/files/de/web/css/css_masken/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: CSS Masken -slug: Web/CSS/CSS_Masken -tags: - - CSS - - CSS Masken - - CSS Referenz - - Übersicht -translation_of: Web/CSS/CSS_Masking ---- -
{{CSSRef}}
- -

CSS Masken ist ein CSS Modul, das Mittel wie Maskierung und Clipping zum teilweisen oder kompletten Verstecken von Teilen visueller Elemente definiert.

- -

Referenz

- -

Eigenschaften

- -
-
    -
  • {{cssxref("mask")}}
    • -
-
- -

Anleitungen

- -

Keine.

- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName("CSS Masks")}}{{Spec2("CSS Masks")}} 
{{SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask')}}{{Spec2('SVG1.1')}}Ursprüngliche Definition
- -

Browser Kompatibilität

- -{{Compat("css.properties.mask")}} diff --git a/files/de/web/css/css_masking/index.html b/files/de/web/css/css_masking/index.html new file mode 100644 index 0000000000..74001bd680 --- /dev/null +++ b/files/de/web/css/css_masking/index.html @@ -0,0 +1,55 @@ +--- +title: CSS Masken +slug: Web/CSS/CSS_Masken +tags: + - CSS + - CSS Masken + - CSS Referenz + - Übersicht +translation_of: Web/CSS/CSS_Masking +--- +
{{CSSRef}}
+ +

CSS Masken ist ein CSS Modul, das Mittel wie Maskierung und Clipping zum teilweisen oder kompletten Verstecken von Teilen visueller Elemente definiert.

+ +

Referenz

+ +

Eigenschaften

+ +
+
    +
  • {{cssxref("mask")}}
    • +
+
+ +

Anleitungen

+ +

Keine.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName("CSS Masks")}}{{Spec2("CSS Masks")}} 
{{SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask')}}{{Spec2('SVG1.1')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +{{Compat("css.properties.mask")}} diff --git a/files/de/web/css/css_motion_path/index.html b/files/de/web/css/css_motion_path/index.html new file mode 100644 index 0000000000..5c09de0a90 --- /dev/null +++ b/files/de/web/css/css_motion_path/index.html @@ -0,0 +1,104 @@ +--- +title: Bewegungspfad +slug: Web/CSS/Motion_Path +tags: + - Bewegungspfad + - CSS + - Experimentell + - Referenz + - Übersicht +translation_of: Web/CSS/CSS_Motion_Path +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Motion Path ist ein CSS Modul, das es Autoren erlaubt, beliebige grafische Objekte entlang eines benutzerdefinierten Pfads zu animieren.

+ +

Referenz

+ +

Eigenschaften

+ +
+
    +
  • {{cssxref("motion")}}
    • +
  • {{cssxref("motion-path")}}
    • +
  • {{cssxref("motion-offset")}}
    • +
  • {{cssxref("motion-rotation")}}
    • +
+
+ +

Anleitungen

+ +

Keine.

+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('Motion Path Level 1')}}{{Spec2('Motion Path Level 1')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
MerkmalAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome für Android
Grundlegende Unterstützung{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
diff --git "a/files/de/web/css/css_namensr\303\244ume/index.html" "b/files/de/web/css/css_namensr\303\244ume/index.html" deleted file mode 100644 index e9d0879cb2..0000000000 --- "a/files/de/web/css/css_namensr\303\244ume/index.html" +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: CSS Namensräume -slug: Web/CSS/CSS_Namensräume -tags: - - CSS - - CSS Namensräume - - Referenz - - Web - - Übersicht -translation_of: Web/CSS/CSS_Namespaces ---- -
{{CSSRef}}
- -

CSS Namensräume ist ein CSS Modul, das es Authoren erlaubt, XML Namensräume in CSS anzugeben.

- -

Referenz

- -

@-Regeln

- -
-
    -
  • {{cssxref("@namespace")}}
    • -
-
- -

Anleitungen

- -

Keine.

- -

Spezifikationen

- - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName("CSS3 Namespaces")}}{{Spec2("CSS3 Namespaces")}}Ursprüngliche Definition
- -

Browser Kompatibilität

- -{{Compat("css.at-rules.namespace")}} diff --git a/files/de/web/css/css_namespaces/index.html b/files/de/web/css/css_namespaces/index.html new file mode 100644 index 0000000000..e9d0879cb2 --- /dev/null +++ b/files/de/web/css/css_namespaces/index.html @@ -0,0 +1,51 @@ +--- +title: CSS Namensräume +slug: Web/CSS/CSS_Namensräume +tags: + - CSS + - CSS Namensräume + - Referenz + - Web + - Übersicht +translation_of: Web/CSS/CSS_Namespaces +--- +
{{CSSRef}}
+ +

CSS Namensräume ist ein CSS Modul, das es Authoren erlaubt, XML Namensräume in CSS anzugeben.

+ +

Referenz

+ +

@-Regeln

+ +
+
    +
  • {{cssxref("@namespace")}}
    • +
+
+ +

Anleitungen

+ +

Keine.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName("CSS3 Namespaces")}}{{Spec2("CSS3 Namespaces")}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +{{Compat("css.at-rules.namespace")}} diff --git a/files/de/web/css/css_referenz/index.html b/files/de/web/css/css_referenz/index.html deleted file mode 100644 index 89a0c83e25..0000000000 --- a/files/de/web/css/css_referenz/index.html +++ /dev/null @@ -1,211 +0,0 @@ ---- -title: CSS Referenz -slug: Web/CSS/CSS_Referenz -tags: - - CSS - - CSS Referenz -translation_of: Web/CSS/Reference ---- -
{{CSSRef}}
- -

Verwende diese CSS-Referenz für einen alphabetischen Index aller Standard-CSS-Eigenschaften, Pseudoklassen, Pseudoelemente, Datentypen und @-Regeln. Du kannst eine Liste aller Selektoren und eine Liste aller Konzepte ansehen. Dies beinhaltet auch eine kurze Referenz zu DOM-CSS / CSSOM.

- -

Grundlegende Syntax von Regeln

- -

Syntax von Stilregeln

- -
selektorliste {
-  eigenschaft: wert;
-  [weitere eigenschaft:wert; Paare]
-}
-
-... wobei selektorliste: selektor[:pseudo-klasse] [::pseudo-element] [, weitere selektorlisten]
-
-Siehe Listen aller Selektoren, Pseudo-Klassen und Pseudo-Elemente weiter unten.
-
- -

Beispiele für Stilregeln

- -

-strong {
-  color: red;
-}
-
-div.menu-bar li:hover > ul {
-  display: block;
-}
-
- -

Für eine Einführung in die Syntax von CSS-Selektoren auf Anfängerstufe, siehe diese Anleitung. Beachte, dass jeder CSS-Syntax-Fehler in einer Regeldefinition die gesamte Regel ungültig macht. Ungültige Regeln werden vom Browser ignoriert. Beachte dass CSS-Regeldefinitionen vollständig (ASCII) text-basiert sind, wohingegegen DOM-CSS / CSSOM (das Regel-Verwaltungssystem) objekt-basiert ist.

- -

Syntax von @-Regeln

- -

Da die Struktur von @-Regeln stark variiert, schaue bitte bei @-Regel nach, um die Syntax der gewünschten Regel herauszufinden.

- -

Index

- -
-

Hinweis: Die Bezeichnungen der Eigenschaften enthalten nicht die JavaScript-Namen, wenn sie sich von den CSS-Standardbezeichnern unterscheiden.

-
- -
{{CSS_Ref}}
- -

Selektoren

- -

Einfache Selektoren

- - - -

Kombinatoren

- - - -

Pseudoklassen

- -
-
    -
  • {{ Cssxref(":active") }}
    • -
  • {{cssxref(':any')}}
    • -
  • {{cssxref(':any-link')}}
    • -
  • {{ Cssxref(":checked") }}
    • -
  • {{ Cssxref(":default") }}
    • -
  • {{ Cssxref(":defined") }}
    • -
  • {{ Cssxref(":dir", ":dir()")}}
    • -
  • {{ Cssxref(":disabled") }}
    • -
  • {{ Cssxref(":empty") }}
    • -
  • {{ Cssxref(":enabled") }}
    • -
  • {{ Cssxref(":first") }}
    • -
  • {{ Cssxref(":first-child") }}
    • -
  • {{ Cssxref(":first-of-type") }}
    • -
  • {{ Cssxref(":fullscreen") }}
    • -
  • {{ Cssxref(":focus") }}
    • -
  • {{ Cssxref(":focus-visible") }}
    • -
  • {{ Cssxref(":host") }}
    • -
  • {{ Cssxref(":host()") }}
    • -
  • {{ Cssxref(":host-context()") }}
    • -
  • {{ Cssxref(":hover") }}
    • -
  • {{ Cssxref(":indeterminate") }}
    • -
  • {{ Cssxref(":in-range") }}
    • -
  • {{ Cssxref(":invalid") }}
    • -
  • {{ Cssxref(":lang", ":lang()") }}
    • -
  • {{ Cssxref(":last-child") }}
    • -
  • {{ Cssxref(":last-of-type") }}
    • -
  • {{ Cssxref(":left") }}
    • -
  • {{ Cssxref(":link") }}
    • -
  • {{ Cssxref(":not", ":not()") }}
    • -
  • {{ Cssxref(":nth-child", ":nth-child()") }}
    • -
  • {{ Cssxref(":nth-last-child", ":nth-last-child()") }}
    • -
  • {{ Cssxref(":nth-last-of-type", ":nth-last-of-type()") }}
    • -
  • {{ Cssxref(":nth-of-type", ":nth-of-type()") }}
    • -
  • {{ Cssxref(":only-child") }}
    • -
  • {{ Cssxref(":only-of-type") }}
    • -
  • {{ Cssxref(":optional") }}
    • -
  • {{ Cssxref(":out-of-range") }}
    • -
  • {{ Cssxref(":read-only") }}
    • -
  • {{ Cssxref(":read-write") }}
    • -
  • {{ Cssxref(":required") }}
    • -
  • {{ Cssxref(":right") }}
    • -
  • {{ Cssxref(":root") }}
    • -
  • {{ Cssxref(":scope") }}
    • -
  • {{ Cssxref(":target") }}
    • -
  • {{ Cssxref(":valid") }}
    • -
  • {{ Cssxref(":visited") }}
    • -
-
- -

Pseudoelemente

- -
-
    -
  • {{ Cssxref("::after") }}
    • -
  • {{ Cssxref("::backdrop") }}
    • -
  • {{ Cssxref("::before") }}
    • -
  • {{ Cssxref("::cue") }}
    • -
  • {{ Cssxref("::first-letter") }}
    • -
  • {{ Cssxref("::first-line") }}
    • -
  • {{ Cssxref("::grammar-error") }} {{experimental_inline}}
    • -
  • {{ Cssxref("::marker") }} {{experimental_inline}}
    • -
  • {{ Cssxref("::placeholder") }} {{experimental_inline}}
    • -
  • {{ Cssxref("::selection") }}
    • -
  • {{ Cssxref("::spelling-error") }} {{experimental_inline}}
    • -
-
- -
-

Siehe auch: Eine vollständige Liste der Selektoren in der Selectors Level 3 Spezifikation.

-
- -

Konzepte

- -

Syntax & Semantik

- - - -

Werte

- - - -

Layout

- - - -

DOM-CSS / CSSOM

- -

Wichtigste Objekttypen

- - - -

Wichtige Methoden

- - diff --git a/files/de/web/css/css_text_decoration/index.html b/files/de/web/css/css_text_decoration/index.html new file mode 100644 index 0000000000..389d7f6a5e --- /dev/null +++ b/files/de/web/css/css_text_decoration/index.html @@ -0,0 +1,65 @@ +--- +title: CSS Textdekoration +slug: Web/CSS/CSS_Textdekoration +tags: + - CSS + - CSS Referenz + - CSS Textdekoration + - Übersicht +translation_of: Web/CSS/CSS_Text_Decoration +--- +
{{CSSRef}}
+ +

CSS Text Decoration ist ein CSS Modul, das Features in Bezug auf Textdekoration definiert, wie zum Beispiel Unterstreichungen, Textschatten und Betonungsmarker.

+ +

CSS Eigenschaften

+ +
+
    +
  • {{cssxref("letter-spacing")}}
    • +
  • {{cssxref("text-align")}}
    • +
  • {{cssxref("text-decoration")}}
    • +
  • {{cssxref("text-decoration-color")}}
    • +
  • {{cssxref("text-decoration-line")}}
    • +
  • {{cssxref("text-decoration-style")}}
    • +
  • {{cssxref("text-indent")}}
    • +
  • {{cssxref("text-rendering")}}
    • +
  • {{cssxref("text-shadow")}}
    • +
  • {{cssxref("text-transform")}}
    • +
  • {{cssxref("white-space")}}
    • +
  • {{cssxref("word-spacing")}}
    • +
+
+ +

Anleitungen

+ +

Keine.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS3 Text Decoration')}}{{Spec2('CSS3 Text Decoration')}}
{{SpecName('CSS2.1', 'text.html')}}{{Spec2('CSS2.1')}}
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Ursprüngliche Definition
diff --git a/files/de/web/css/css_textdekoration/index.html b/files/de/web/css/css_textdekoration/index.html deleted file mode 100644 index 389d7f6a5e..0000000000 --- a/files/de/web/css/css_textdekoration/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: CSS Textdekoration -slug: Web/CSS/CSS_Textdekoration -tags: - - CSS - - CSS Referenz - - CSS Textdekoration - - Übersicht -translation_of: Web/CSS/CSS_Text_Decoration ---- -
{{CSSRef}}
- -

CSS Text Decoration ist ein CSS Modul, das Features in Bezug auf Textdekoration definiert, wie zum Beispiel Unterstreichungen, Textschatten und Betonungsmarker.

- -

CSS Eigenschaften

- -
-
    -
  • {{cssxref("letter-spacing")}}
    • -
  • {{cssxref("text-align")}}
    • -
  • {{cssxref("text-decoration")}}
    • -
  • {{cssxref("text-decoration-color")}}
    • -
  • {{cssxref("text-decoration-line")}}
    • -
  • {{cssxref("text-decoration-style")}}
    • -
  • {{cssxref("text-indent")}}
    • -
  • {{cssxref("text-rendering")}}
    • -
  • {{cssxref("text-shadow")}}
    • -
  • {{cssxref("text-transform")}}
    • -
  • {{cssxref("white-space")}}
    • -
  • {{cssxref("word-spacing")}}
    • -
-
- -

Anleitungen

- -

Keine.

- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('CSS3 Text Decoration')}}{{Spec2('CSS3 Text Decoration')}}
{{SpecName('CSS2.1', 'text.html')}}{{Spec2('CSS2.1')}}
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Ursprüngliche Definition
diff --git a/files/de/web/css/css_transforms/css_transformationen_verwenden/index.html b/files/de/web/css/css_transforms/css_transformationen_verwenden/index.html deleted file mode 100644 index 0d761f544f..0000000000 --- a/files/de/web/css/css_transforms/css_transformationen_verwenden/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: CSS Transformationen verwenden -slug: Web/CSS/CSS_Transforms/CSS_Transformationen_verwenden -tags: - - CSS - - CSS Transformationen - - CSS3 - - Fortgeschritten - - Guide -translation_of: Web/CSS/CSS_Transforms/Using_CSS_transforms ---- -
{{CSSRef}}
- -

Durch Modifizierung des Koordinatenraums ändern CSS Transformationen den Umriss und die Position des betreffenden Inhalts ohne den normalen Dokumentfluss zu unterbrechen. Diese Anleitung bietet eine Einführung in die Verwendung von Transformationen.

- -

CSS Transformationen sind als eine Reihe von CSS Eigenschaften implementiert, die es erlauben, affine lineare Transformationen auf HTML Elemente anzuwenden. Diese Transformationen beinhalten Drehung, Verzerrung, Skalierung und Verschiebung sowohl im ebenen als auch im 3D Raum.

- -
-

Nur Elemente, die durch das Box-Modell positioniert werden, können transformiert werden. Als Faustregel gilt, dass ein Element durch das Box-Modell positioniert wird, wenn es display: block hat.

-
- -

CSS Transformationseigenschaften

- -

Zwei Haupteigenschaften werden dazu verwendet, CSS Transformationen zu definieren: {{cssxref("transform")}} und {{cssxref("transform-origin")}}.

- -
-
{{cssxref("transform")}}
-
Bestimmt die Transformationen, die auf das Element angewendet werden. Sie ist eine leerzeichenseparierte Liste von Transformationen, welche eine nach der anderen angewendet werden, wie durch die Zusammensetzungsoperation verlangt.
-
{{cssxref("transform-origin")}}
-
Bestimmt die Position des Ursprungs. Standardmäßig ist dieser in der Mitte des Elements und kann verschoben werden. Er wird von mehreren Transformationen verwendet wie Drehung, Skalierung oder Verzerrung, die einen bestimmten Punkt als Parameter benötigen.
-
- -

Beispiele

- -

Hier ist ein unverändertes Bild des MDN-Logos:

- -

MDN Logo

- -

Drehung

- -

Dieses Beispiel erstellt einen iframe, der Googles Homepage beinhaltet, die um 90 Grad um die linke untere Ecke gedreht wurde.

- -
<img style="transform: rotate(90deg);
-            transform-origin: bottom left;"
-     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png">
-
- -

{{EmbedLiveSample('Rotating', 'auto', 240) }}

- -

Verzerrung und Verschiebung

- -

Dieses Beispiel erstellt einen iframe, der Googles Homepage beinhaltet, verzerrt um 10 Grad und verschoben um 150 Pixel auf der x-Achse.

- -
<img style="transform: skewx(10deg) translatex(150px);
-            transform-origin: bottom left;"
-     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png">
- -

{{EmbedLiveSample('Skewing_and_translating') }}

- -

3D-spezifische CSS Eigenschaften

- -

Die Anwendung von CSS Transformationen im dreidimensionalen Raum ist ein wenig komplexer. Zunächst muss der 3D Raum konfiguriert werden, indem ihm eine Perspektive gegeben wird. Anschließend muss konfiguriert werden, wie die 2D Elemente sich in diesem Raum verhalten.

- -

Eine Perspektive einrichten

- -

Das erste zu setzende Element ist die {{cssxref("perspective")}}. Die Perspektive ist das, was uns den 3D-Eindruck vermittelt. Je weiter die Elemente vom Betrachter entfernt sind, desto kleiner sind sie.

- -

{{page("/en-US/docs/Web/CSS/perspective", "Setting perspective", 0, 0, 3)}}

- -

Das zweite Element, das konfiguriert werden muss, ist die Position des Betrachters mit der Eigenschaft {{ cssxref("perspective-origin") }}. Standardmäßig ist die Perspektive auf den Betrachter zentriert, was nicht immer ausreichend ist.

- -

{{page("/en-US/docs/Web/CSS/perspective-origin", "Changing the perspective origin", 0, 0, 3)}}

- -

Sobald Sie dies getan haben, können Sie das Element im 3D-Raum bearbeiten.

- -

Siehe auch

- - diff --git a/files/de/web/css/css_transforms/using_css_transforms/index.html b/files/de/web/css/css_transforms/using_css_transforms/index.html new file mode 100644 index 0000000000..0d761f544f --- /dev/null +++ b/files/de/web/css/css_transforms/using_css_transforms/index.html @@ -0,0 +1,82 @@ +--- +title: CSS Transformationen verwenden +slug: Web/CSS/CSS_Transforms/CSS_Transformationen_verwenden +tags: + - CSS + - CSS Transformationen + - CSS3 + - Fortgeschritten + - Guide +translation_of: Web/CSS/CSS_Transforms/Using_CSS_transforms +--- +
{{CSSRef}}
+ +

Durch Modifizierung des Koordinatenraums ändern CSS Transformationen den Umriss und die Position des betreffenden Inhalts ohne den normalen Dokumentfluss zu unterbrechen. Diese Anleitung bietet eine Einführung in die Verwendung von Transformationen.

+ +

CSS Transformationen sind als eine Reihe von CSS Eigenschaften implementiert, die es erlauben, affine lineare Transformationen auf HTML Elemente anzuwenden. Diese Transformationen beinhalten Drehung, Verzerrung, Skalierung und Verschiebung sowohl im ebenen als auch im 3D Raum.

+ +
+

Nur Elemente, die durch das Box-Modell positioniert werden, können transformiert werden. Als Faustregel gilt, dass ein Element durch das Box-Modell positioniert wird, wenn es display: block hat.

+
+ +

CSS Transformationseigenschaften

+ +

Zwei Haupteigenschaften werden dazu verwendet, CSS Transformationen zu definieren: {{cssxref("transform")}} und {{cssxref("transform-origin")}}.

+ +
+
{{cssxref("transform")}}
+
Bestimmt die Transformationen, die auf das Element angewendet werden. Sie ist eine leerzeichenseparierte Liste von Transformationen, welche eine nach der anderen angewendet werden, wie durch die Zusammensetzungsoperation verlangt.
+
{{cssxref("transform-origin")}}
+
Bestimmt die Position des Ursprungs. Standardmäßig ist dieser in der Mitte des Elements und kann verschoben werden. Er wird von mehreren Transformationen verwendet wie Drehung, Skalierung oder Verzerrung, die einen bestimmten Punkt als Parameter benötigen.
+
+ +

Beispiele

+ +

Hier ist ein unverändertes Bild des MDN-Logos:

+ +

MDN Logo

+ +

Drehung

+ +

Dieses Beispiel erstellt einen iframe, der Googles Homepage beinhaltet, die um 90 Grad um die linke untere Ecke gedreht wurde.

+ +
<img style="transform: rotate(90deg);
+            transform-origin: bottom left;"
+     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png">
+
+ +

{{EmbedLiveSample('Rotating', 'auto', 240) }}

+ +

Verzerrung und Verschiebung

+ +

Dieses Beispiel erstellt einen iframe, der Googles Homepage beinhaltet, verzerrt um 10 Grad und verschoben um 150 Pixel auf der x-Achse.

+ +
<img style="transform: skewx(10deg) translatex(150px);
+            transform-origin: bottom left;"
+     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png">
+ +

{{EmbedLiveSample('Skewing_and_translating') }}

+ +

3D-spezifische CSS Eigenschaften

+ +

Die Anwendung von CSS Transformationen im dreidimensionalen Raum ist ein wenig komplexer. Zunächst muss der 3D Raum konfiguriert werden, indem ihm eine Perspektive gegeben wird. Anschließend muss konfiguriert werden, wie die 2D Elemente sich in diesem Raum verhalten.

+ +

Eine Perspektive einrichten

+ +

Das erste zu setzende Element ist die {{cssxref("perspective")}}. Die Perspektive ist das, was uns den 3D-Eindruck vermittelt. Je weiter die Elemente vom Betrachter entfernt sind, desto kleiner sind sie.

+ +

{{page("/en-US/docs/Web/CSS/perspective", "Setting perspective", 0, 0, 3)}}

+ +

Das zweite Element, das konfiguriert werden muss, ist die Position des Betrachters mit der Eigenschaft {{ cssxref("perspective-origin") }}. Standardmäßig ist die Perspektive auf den Betrachter zentriert, was nicht immer ausreichend ist.

+ +

{{page("/en-US/docs/Web/CSS/perspective-origin", "Changing the perspective origin", 0, 0, 3)}}

+ +

Sobald Sie dies getan haben, können Sie das Element im 3D-Raum bearbeiten.

+ +

Siehe auch

+ + diff --git a/files/de/web/css/css_typen/index.html b/files/de/web/css/css_typen/index.html deleted file mode 100644 index bb08a42cd4..0000000000 --- a/files/de/web/css/css_typen/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: CSS-Basis-Datentypen -slug: Web/CSS/CSS_Typen -translation_of: Web/CSS/CSS_Types ---- -
{{CssRef}}
- -

CSS-Basis-Datentypen definieren typische Werte (einschließlich Schlüsselwörtern und Einheiten), die von CSS-Eigenschaften und Funktionen akzeptiert werden. Sie sind eine besondere Art eines Komponenten-Wertetyp.

- -

Im formellen Syntax werden Datentypen mit einem Schlüsselwort gekennzeichnet, das zwischen den Zeichen "<" und ">" steht.

- -

Referenz

- -
-
    -
  • {{cssxref("<angle>")}}
    • -
  • {{cssxref("<basic-shape>")}}
    • -
  • {{cssxref("<blend-mode>")}}
    • -
  • {{cssxref("<color>")}}
    • -
  • {{cssxref("<custom-ident>")}}
    • -
  • {{cssxref("<filter-function>")}}
    • -
  • {{cssxref("<flex>")}}
    • -
  • {{cssxref("<frequency>")}}
    • -
  • {{cssxref("<gradient>")}}
    • -
  • {{cssxref("<image>")}}
    • -
  • {{cssxref("<integer>")}}
    • -
  • {{cssxref("<length>")}}
    • -
  • {{cssxref("<number>")}}
    • -
  • {{cssxref("<percentage>")}}
    • -
  • {{cssxref("<position>")}}
    • -
  • {{cssxref("<ratio>")}}
    • -
  • {{cssxref("<resolution>")}}
    • -
  • {{cssxref("<shape-box>")}}
    • -
  • {{cssxref("<single-transition-timing-function>")}}
    • -
  • {{cssxref("<string>")}}
    • -
  • {{cssxref("<time>")}}
    • -
  • {{cssxref("<transform-function>")}}
    • -
  • {{cssxref("<url>")}}
    • -
-
- -

Spezifikationen

- - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{ SpecName('CSS3 Values') }}{{ Spec2('CSS3 Values') }}Erste Definition.
diff --git a/files/de/web/css/css_types/index.html b/files/de/web/css/css_types/index.html new file mode 100644 index 0000000000..bb08a42cd4 --- /dev/null +++ b/files/de/web/css/css_types/index.html @@ -0,0 +1,59 @@ +--- +title: CSS-Basis-Datentypen +slug: Web/CSS/CSS_Typen +translation_of: Web/CSS/CSS_Types +--- +
{{CssRef}}
+ +

CSS-Basis-Datentypen definieren typische Werte (einschließlich Schlüsselwörtern und Einheiten), die von CSS-Eigenschaften und Funktionen akzeptiert werden. Sie sind eine besondere Art eines Komponenten-Wertetyp.

+ +

Im formellen Syntax werden Datentypen mit einem Schlüsselwort gekennzeichnet, das zwischen den Zeichen "<" und ">" steht.

+ +

Referenz

+ +
+
    +
  • {{cssxref("<angle>")}}
    • +
  • {{cssxref("<basic-shape>")}}
    • +
  • {{cssxref("<blend-mode>")}}
    • +
  • {{cssxref("<color>")}}
    • +
  • {{cssxref("<custom-ident>")}}
    • +
  • {{cssxref("<filter-function>")}}
    • +
  • {{cssxref("<flex>")}}
    • +
  • {{cssxref("<frequency>")}}
    • +
  • {{cssxref("<gradient>")}}
    • +
  • {{cssxref("<image>")}}
    • +
  • {{cssxref("<integer>")}}
    • +
  • {{cssxref("<length>")}}
    • +
  • {{cssxref("<number>")}}
    • +
  • {{cssxref("<percentage>")}}
    • +
  • {{cssxref("<position>")}}
    • +
  • {{cssxref("<ratio>")}}
    • +
  • {{cssxref("<resolution>")}}
    • +
  • {{cssxref("<shape-box>")}}
    • +
  • {{cssxref("<single-transition-timing-function>")}}
    • +
  • {{cssxref("<string>")}}
    • +
  • {{cssxref("<time>")}}
    • +
  • {{cssxref("<transform-function>")}}
    • +
  • {{cssxref("<url>")}}
    • +
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{ SpecName('CSS3 Values') }}{{ Spec2('CSS3 Values') }}Erste Definition.
diff --git a/files/de/web/css/css_user_interface/index.html b/files/de/web/css/css_user_interface/index.html deleted file mode 100644 index 7ee80c0eef..0000000000 --- a/files/de/web/css/css_user_interface/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: CSS User Interface -slug: Web/CSS/CSS_User_Interface -tags: - - CSS - - CSS Basic User Interface - - Referenz - - Übersicht -translation_of: Web/CSS/CSS_Basic_User_Interface -translation_of_original: Web/CSS/CSS_User_Interface ---- -
{{CSSRef}}
- -

CSS User Interface ist ein CSS Modul, das es erlaubt, die Darstellung und Funktionalität von Benutzerschnittstellenfeatures zu definieren.

- -

Referenz

- -

Einstellungen

- -
-
    -
  • {{cssxref("box-sizing")}}
    • -
  • {{cssxref("cursor")}}
    • -
  • {{cssxref("outline")}}
    • -
  • {{cssxref("outline-width")}}
    • -
  • {{cssxref("outline-style")}}
    • -
  • {{cssxref("outline-color")}}
    • -
  • {{cssxref("outline-offset")}}
    • -
  • {{cssxref("resize")}}
    • -
  • {{cssxref("text-overflow")}}
    • -
  • {{cssxref("nav-down")}}
    • -
  • {{cssxref("nav-left")}}
    • -
  • {{cssxref("nav-right")}}
    • -
  • {{cssxref("nav-up")}}
    • -
-
- -

Anleitungen

- -
-
Verwendung von URL Werten für die cursor Eigenschaft
-
Erklärt und zeigt, wie ein URL für die {{cssxref('cursor')}} Eigenschaft angegeben werden kann, um benutzerdefinierte Mauszeiger zu erstellen.
-
- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('CSS3 Basic UI')}}{{Spec2('CSS3 Basic UI')}} 
{{SpecName('CSS2.1', 'ui.html')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition
- -

Browser Kompatibilität

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung1.01.5 (1.8)8.07.01.2 (125)
-
- -
- - - - - - - - - - - - - - - - - - - -
MerkmalAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Grundlegende Unterstützung1.0{{CompatGeckoMobile(1.8)}}8.06.03.1
-
diff --git a/files/de/web/css/ersetztes_element/index.html b/files/de/web/css/ersetztes_element/index.html deleted file mode 100644 index c75a4aec95..0000000000 --- a/files/de/web/css/ersetztes_element/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Ersetztes Element -slug: Web/CSS/ersetztes_Element -tags: - - CSS - - CSS Referenz -translation_of: Web/CSS/Replaced_element ---- -
{{CSSRef}}
- -

Übersicht

- -

In CSS ist ein ersetztes Element ein Element, dessen Darstellung außerhalb des Anwendungsbereichs von CSS liegt. Dies sind eine Art externe Objekte, deren Repräsentation unabhängig von CSS ist. Typische ersetzte Elemente sind {{HTMLElement("img")}}, {{HTMLElement("object")}}, {{HTMLElement("video")}} oder Formularelemente wie {{HTMLElement("textarea")}} und {{HTMLElement("input")}}. Manche Elemente wie {{HTMLElement("audio")}} oder {{HTMLElement("canvas")}} sind nur in bestimmten Fällen ersetzte Elemente. Objekte, die via CSS {{cssxref("content")}} Eigenschaften eingefügt werden, sind anonyme ersetzte Elemente.

- -

CSS behandelt ersetzte Elemente in manchen Fällen besonders, wie z. B. bei der Berechnung von Außenabständen und einigen auto Werten.

- -

Beachte, dass manche ersetzte Elemente, jedoch nicht alle, innere Maße oder eine definierte Grundlinie haben, welche von einigen CSS Eigenschaften wie {{cssxref("vertical-align")}} verwendet wird.

- -

Siehe auch

- - diff --git a/files/de/web/css/farben/index.html b/files/de/web/css/farben/index.html deleted file mode 100644 index 9e0baf0720..0000000000 --- a/files/de/web/css/farben/index.html +++ /dev/null @@ -1,1285 +0,0 @@ ---- -title: -slug: Web/CSS/Farben -tags: - - CSS - - CSS Datentyp - - Layout - - NeedsLiveSample - - NeedsMobileBrowserCompatibility - - Referenz - - Web -translation_of: Web/CSS/color_value ---- -
{{CSSRef}}
- -

Der CSS Datentyp beschreibt eine Farbe im sRGB Farbraum. Eine Farbe kann auf eine dieser Arten beschrieben werden:

- - - -

Beachte, dass die Liste an akzeptierten Farbwerten durch weiterentwickelte Spezifikationen erweitert wurde bis hin zu den neuesten CSS3 Farben.

- -

In Verbindung mit einer Farbe im sRGB Raum besteht ein <color>-Wert auch aus einer Alphakanal-Koordinate, einem Transparenzwert, der angibt, wie die Farbe mit der Hintergrundfarbe vermischt wird

- -

Obwohl CSS Farbwerte genau definiert sind, können sie auf verschiedenen Ausgabegeräten unterschiedlich dargestellt werden. Die meisten davon sind nicht kalibriert und manche Browser unterstützen nicht das Farbprofil des Ausgabegeräts. Ohne diese kann die Farbdarstellung stark variieren.

- -
Hinweis: Die WCAG 2.0 Empfehlung des W3C rät Webauthoren ausdrücklich dazu, Farben nicht als einziges Mittel zur Vermittlung einer bestimmten Information, Aktion oder einem Ergebnis zu verwenden. Manche Benutzer haben Probleme, Farben zu unterscheiden, was das Verständnis der übermittelten Information verhindert. Natürlich verhindert das nicht die Benutzung von Farbe, nur deren Benutzung als einziges Mittel eine Information zu beschreiben.
- -

Interpolation

- -

Werte des <color> CSS Datentyps können für Animationen und zur Erstellung von {{cssxref("gradient", "<gradient>")}} Werten interpoliert werden. In diesem Fall werden ihre Rot-, Grün- und Blau-Komponenten als eine reale Fließkommazahl interpoliert. Beachte, dass die Interpolation von Farben innerhalb des alpha-vormultiplizierten sRGBA-Farbraums stattfindet, um unerwartete Grautöne zu verhindern. In Animationen wird die Geschwindigkeit der Interlolation durch die zur Animation gehörenden Timing-Funktion bestimmt.

- -

Werte

- -

Es gibt mehrere Arten, wie ein <color> Wert beschrieben werden kann.

- -

Farbschlüsselwörter

- -

Farbschlüsselwörter sind schreibungsunabhängige Bezeichner, welche eine bestimmte Farbe repräsentieren, z. B. red, blue, brown, lightseagreen. Der Name beschreibt die Farbe, er ist jedoch meist erfunden. Die Liste an akzeptierten Werten variiert sehr zwischen den Spezifikationen:

- -
    -
  • CSS Level 1 akzeptierte nur 16 Grundfarben, bekannt als VGA-Farben, weil sie aus der Menge an darstellbaren Farben von VGA-Grafikkarten stammen.
    • -
  • CSS Level 2 fügte das orange-Schlüsselwort hinzu.
    • -
  • Von Anfang an haben Browser weitere Farben akzeptiert, meist die X11 genannte Farbliste, da einige frühere Browser X11-basierte Anwendungen waren, allerdings mit einigen Unterschieden. SVG 1.0 war der erste Standard, der diese Schlüsselwörter formal definiert hat; CSS Colors Level 3 hat diese Schlüsselwörter ebenfalls formal definiert. Sie werden oft als erweiterte Farbschlüsselwörter, X11 Farben oder SVG Farben bezeichnet.
    • -
- -

Es gibt ein paar Dinge bei der Verwendung von Farbschlüsselwörtern zu beachten:

- -
    -
  • Außer den 16 Grundfarben, die HTML gemein hat, können keine anderen Farben in HTML verwendet werden. HTML konvertiert diese unbekannten Werte mit einem bestimmten Algorithmus, was zu komplett unterschiedlichen Farben führt. Diese Schlüsselwörter sollten ausschließlich in SVG & CSS verwendet werden.
    • -
  • Unknown keywords make the CSS property invalid. Invalid properties being ignored, the color will have no effect. This is a different behavior than the one of HTML.
    • -
  • Keine als Schlüsselwort definierten Farben haben in CSS eine Transparenz. Sie sind klare, undurchsichtige Farben.
    • -
  • Verschiedene Schlüsselwörter kennzeichnen die gleiche Farbe: -
      -
    • darkgray / darkgrey
      • -
    • darkslategray / darkslategrey
      • -
    • dimgray / dimgrey
      • -
    • lightgray / lightgrey
      • -
    • lightslategray / lightslategrey
      • -
    • gray / grey
      • -
    • slategray / slategrey
      • -
    -
    • -
  • Obwohl die Namen der Schlüsselwörter von den gewöhnlichen X11-Farbnamen stammen, können die Farben von den entsprechenden Systemfarben im X11-System abweichen, da sie auf die spezielle Hardware der Hersteller zugeschnitten sind.
    • -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpezifikationFarbeSchlüsselwortRGB HexwerteVorschau
{{SpecName("CSS1")}} black#000000 
 silver#c0c0c0 
 gray#808080 
 white#ffffff 
 maroon#800000 
 red#ff0000 
 purple#800080 
 fuchsia#ff00ff 
 green#008000 
 lime#00ff00 
 olive#808000 
 yellow#ffff00 
 navy#000080 
 blue#0000ff 
 teal#008080 
 aqua#00ffff 
{{SpecName("CSS2.1")}} orange#ffa500 
{{SpecName("CSS3 Colors")}} aliceblue#f0f8ff 
 antiquewhite#faebd7 
 aquamarine#7fffd4 
 azure#f0ffff 
 beige#f5f5dc 
 bisque#ffe4c4 
 blanchedalmond#ffe4c4 
 blueviolet#8a2be2 
 brown#a52a2a 
 burlywood#deb887 
 cadetblue#5f9ea0 
 chartreuse#7fff00 
 chocolate#d2691e 
 coral#ff7f50 
 cornflowerblue#6495ed 
 cornsilk#fff8dc 
 crimson#dc143c 
 darkblue#00008b 
 darkcyan#008b8b 
 darkgoldenrod#b8860b 
 darkgray#a9a9a9 
 darkgreen#006400 
 darkgrey#a9a9a9 
 darkkhaki#bdb76b 
 darkmagenta#8b008b 
 darkolivegreen#556b2f 
 darkorange#ff8c00 
 darkorchid#9932cc 
 darkred#8b0000 
 darksalmon#e9967a 
 darkseagreen#8fbc8f 
 darkslateblue#483d8b 
 darkslategray#2f4f4f 
 darkslategrey#2f4f4f 
 darkturquoise#00ced1 
 darkviolet#9400d3 
 deeppink#ff1493 
 deepskyblue#00bfff 
 dimgray#696969 
 dimgrey#696969 
 dodgerblue#1e90ff 
 firebrick#b22222 
 floralwhite#fffaf0 
 forestgreen#228b22 
 gainsboro#dcdcdc 
 ghostwhite#f8f8ff 
 gold#ffd700 
 goldenrod#daa520 
 greenyellow#adff2f 
 grey#808080 
 honeydew#f0fff0 
 hotpink#ff69b4 
 indianred#cd5c5c 
 indigo#4b0082 
 ivory#fffff0 
 khaki#f0e68c 
 lavender#e6e6fa 
 lavenderblush#fff0f5 
 lawngreen#7cfc00 
 lemonchiffon#fffacd 
 lightblue#add8e6 
 lightcoral#f08080 
 lightcyan#e0ffff 
 lightgoldenrodyellow#fafad2 
 lightgray#d3d3d3 
 lightgreen#90ee90 
 lightgrey#d3d3d3 
 lightpink#ffb6c1 
 lightsalmon#ffa07a 
 lightseagreen#20b2aa 
 lightskyblue#87cefa 
 lightslategray#778899 
 lightslategrey#778899 
 lightsteelblue#b0c4de 
 lightyellow#ffffe0 
 limegreen#32cd32 
 linen#faf0e6 
 mediumaquamarine#66cdaa 
 mediumblue#0000cd 
 mediumorchid#ba55d3 
 mediumpurple#9370db 
 mediumseagreen#3cb371 
 mediumslateblue#7b68ee 
 mediumspringgreen#00fa9a 
 mediumturquoise#48d1cc 
 mediumvioletred#c71585 
 midnightblue#191970 
 mintcream#f5fffa 
 mistyrose#ffe4e1 
 moccasin#ffe4b5 
 navajowhite#ffdead 
 oldlace#fdf5e6 
 olivedrab#6b8e23 
 orangered#ff4500 
 orchid#da70d6 
 palegoldenrod#eee8aa 
 palegreen#98fb98 
 paleturquoise#afeeee 
 palevioletred#db7093 
 papayawhip#ffefd5 
 peachpuff#ffdab9 
 peru#cd853f 
 pink#ffc0cb 
 plum#dda0dd 
 powderblue#b0e0e6 
 rosybrown#bc8f8f 
 royalblue#4169e1 
 saddlebrown#8b4513 
 salmon#fa8072 
 sandybrown#f4a460 
 seagreen#2e8b57 
 seashell#fff5ee 
 sienna#a0522d 
 skyblue#87ceeb 
 slateblue#6a5acd 
 slategray#708090 
 slategrey#708090 
 snow#fffafa 
 springgreen#00ff7f 
 steelblue#4682b4 
 tan#d2b48c 
 thistle#d8bfd8 
 tomato#ff6347 
 turquoise#40e0d0 
 violet#ee82ee 
 wheat#f5deb3 
 whitesmoke#f5f5f5 
 yellowgreen#9acd32 
{{SpecName("CSS4 Colors")}} rebeccapurple#663399 
- -

Die Farbe rebeccapurple entspricht der Farbe #639. Mehr Informationen darüber, warum sie eingeführt wurde, kann in diesem Codepen Blog Post von Trezy nachgelesen werden: "Honoring a Great Man."

- -

transparent Schlüsselwort

- -

Das transparent-Schlüsselwort beschreibt eine vollkommen transparente Farber, d. h. die dargestellte Farbe ist die Hintergrundfarbe. Technisch ist sie schwarz mit einem Alphakanal mit Minimalwert und ist ein Kürzel für rgba(0,0,0,0).

- -
Historischer Hinweis
-Das Schlüsselwort transparent war keine echte Farbe in CSS Level 2 (Revision 1). Es war ein spezifisches Schlüsselwort, das bei zwei CSS-Eigenschaften anstelle eines regulären <color>-Wertes verwendet werden konnte: {{cssxref("background")}} und {{cssxref("border")}}. Es war eigentlich hinzugefügt, um geerbte Festfarben zu überschreiben.
-
-Mit der Unterstützung der Deckkraft durch den Alphakanal, wurde transparent in CSS Colors Level 3 neudefiniert als eine echte Farbe, die überall dort verwendet werden kann, wo ein <color>-Wert benötigt wird, wie der {{cssxref("color")}} Eigenschaft.
- -

currentColor Schlüsselwort

- -

Das currentColor-Schlüsselwort beschreibt den berechneten Wert der {{cssxref("color")}} Eigenschaft des Elements. Es erlaubt, die Farbeigenschaften, die von Eigenschaften oder Kindelementeigenschaften zu vererben, die sie normalerweise nicht vererben.

- -

Es kann auch für Eigenschaften verwendet werden, die den berechneten Wert der {{cssxref("color")}} Eigenschaft des Elements erben und entspricht dem inherit Schlüsselwort bei diesen Elementen, falls es welche gibt.

- -

Live-Beispiel

- -

Die Farbe der Zeile (ein farbgefülltes {{HTMLElement("div")}}) passt sich der Farbe der {{cssxref("color")}} Eigenschaft an, die von seinem Elternelement geerbt wird.

- -
-
Live-Beispiel 1
- -
<div style="color:darkred;">
- Die Farbe dieses Texts ist dieselbe wie die der Zeile:
- <div style="background:currentcolor; height:1px;"></div>
- Mehr Text.
-</div>
- -

{{EmbedLiveSample("Live-Beispiel_1")}}

- -
Live-Beispiel 2
- -
<div style="color:blue; border-bottom: 1px dashed currentcolor;">
- Die Farbe dieses Texts ist dieselbe wie die der Zeile:
- <div style="background:currentcolor; height:1px;"></div>
- Mehr Text.
-</div>
- -

{{EmbedLiveSample("Live-Beispiel_2")}}

-
- -

rgb()

- -

Farben können durch das Rot-Grün-Blau-Modell (RGB-Modell) auf zwei Weisen definiert werden:

- -
-
Hexadezimale Notation #RRGGBB und #RGB
-
-
    -
  • "#", gefolgt von sechs hexadezimalen Zeichen (0-9, A-F).
    • -
  • "#", gefolgt von drei hexadezimalen Zeichen (0-9, A-F).
    • -
- Die Drei-Ziffern-RGB-Notation (#RGB) und die Sechs-Ziffern-Form (#RRGGBB) sind gleich.
- Zum Beispiel repräsentieren #f03 und #ff0033 dieselbe Farbe.
-
Funktionelle Notation rgb(R,G,B)
-
"rgb", gefolgt von drei {{cssxref("<integer>")}} oder drei {{cssxref("<percentage>")}} Werten.
- Die Ganzzahl 255 entspricht 100% und F oder FF in der hexadezimalen Schreibweise.
-
- -
/* Diese Beispiele definieren alle dieselbe RGB-Farbe: */
-
- #f03
- #F03
- #ff0033
- #FF0033
- rgb(255,0,51)
- rgb(255, 0, 51)
- rgb(255, 0, 51.2) /* FEHLER! Keine Bruchzahlen verwenden, nur Ganzzahlen. */
- rgb(100%,0%,20%)
- rgb(100%, 0%, 20%)
- rgb(100%, 0, 20%) /* FEHLER! Ganzzahl- und Prozentschreibweise dürfen nicht gemischt werden. */
-
- -

hsl()

- -

Farben können auch durch das Hue-Saturation-Lightness-Modell (HSL-Modell) unter Verwendung der funktionellen Notation hsl() definiert werden. Der Vorteil von HSL gegenüber RGB ist, dass es wesentlich intuitiver ist: man kann die Zahlen, die man haben will, erraten und dann anpassen. Es ist auch einfacher, Sets passender Farben zu erstellen (indem der Farbwert unverändert bleibt und die Helligkeit/Dunkelheit und Sättigung verändert werden).

- -

Der Farbwert wird als ein Winkel des Farbkreises angegeben (d. h. der Regenbogen als Kreis dargestellt). Der Winkel wird als einheitenlose {{cssxref("<number>")}} angegeben. Per definition red=0=360 und die anderen Farben sind so auf den Kreis verteilt, sodass green=120, blue=240, etc. Als Winkel bricht er implizit um, sodass 120=240 und 480=120.

- -

Sättigung und Helligkeit werden als Prozentwert angegeben.
- 100% entspricht voller Sättigung und 0% ist ein Grauton.
- 100% Helligkeit ist weiß, 0% Helligkeit ist schwarz und 50% Helligkeit ist "normal".

- -
hsl(0,  100%,50%)    /* rot */       
-hsl(30, 100%,50%)                    
-hsl(60, 100%,50%)                    
-hsl(90, 100%,50%)                    
-hsl(120,100%,50%)    /* grün */      
-hsl(150,100%,50%)                    
-hsl(180,100%,50%)                    
-hsl(210,100%,50%)                    
-hsl(240,100%,50%)    /* blau */      
-hsl(270,100%,50%)                    
-hsl(300,100%,50%)                    
-hsl(330,100%,50%)                    
-hsl(360,100%,50%)    /* rot */       
-
-hsl(120,100%,25%)    /* dunkelgrün */
-hsl(120,100%,50%)    /* grün*/       
-hsl(120,100%,75%)    /* hellgrün */  
-
-hsl(120,100%,50%)    /* grün */      
-hsl(120, 67%,50%)                    
-hsl(120, 33%,50%)                    
-hsl(120,  0%,50%)                    
-
-hsl(120, 60%,70%)    /* pastelgrün */
-
- -

rgba()

- -

Farben können durch das Rot-Grün-Blau-Model (RGB-Modell) unter Verwendungn der funktionellen Notation rgba() verwendet werden. RGBa erweitert das RGB-Farbmodell um einen Alphakanal, der die Deckkraft einer Farbe angibt.
- a bedeutet Deckkraft: 0=transparent; 1=undurchsichtig;

- -
rgba(255, 0, 0, 0.1)    /* 10% undurchsichtiges Rot */      
-rgba(255, 0, 0, 0.4)    /* 40% undurchsichtiges Rot */      
-rgba(255, 0, 0, 0.7)    /* 70% undurchsichtiges Rot */      
-rgba(255, 0, 0, 1)      /* komplett undurchsichtiges Rot */ 
-
- -

hsla()

- -

Farben können auch durch das Hue-Saturation-Lightness-Alpha-Modell (HSLa-Modell) unter Verwendung der funktionellen Notation hsla() definiert werden. HSLa erweitert das HSL-Farbmodell um einen Alphakanal, der die Deckkraft einer Farbe angibt.
- a bedeutet Deckkraft: 0=transparent; 1=undurchsichtig;

- -
hsla(240, 100%, 50%, 0.05)    /* 5% undurchsichtiges Blau */   
-hsla(240,100%,50%, 0.4)       /* 40% undurchsichtiges Blau */  
-hsla(240,100%,50%, 0.7)       /* 70% undurchsichtiges Blau */  
-hsla(240,100%,50%,   1)       /* full undurchsichtiges Blau */ 
-
- -

Systemfarben

- -

Nicht alle Systemfarben werden von allen Systemen unterstützt. {{deprecated_inline}} für die Benutzung in öffentlichen Webseiten.

- -
-
ActiveBorder
-
Rahmenfarbe eines aktiven Fensters.
-
ActiveCaption
-
Titelfarbe eines aktiven Fensters. Sollte mit der Vordergrundfarbe CaptionText verwendet werden.
-
AppWorkspace
-
Hintergrundfarbe einer Mehrfachdokumentschnittstelle (MDI).
-
Background
-
Desktophintergrund.
-
ButtonFace
-
Schaltflächenfarbe für 3D-Elemente, die durch eine Ebene umgebender Rahmen dreidimensional erscheinen. Sollte mit der Vordergrundfarbe ButtonText verwendet werden.
-
ButtonHighlight
-
Farbe des dem Licht zugewandten Rahmens eines 3D-Elements, das durch diesen Rahmen dreidimensional erscheint.
-
ButtonShadow
-
Farbe des dem Licht abgewandten Rahmens eines 3D-Elements, das durch diesen Rahmen dreidimensional erscheint.
-
ButtonText
-
Text auf Schaltflächen. Sollte mit der Hintergrundfarbe ButtonFace oder ThreeDFace verwendet werden.
-
CaptionText
-
Farbe des Titeltexts in Fenstern. Sollte mit der Hintergrundfarbe ActiveCaption verwendet werden.
-
GrayText
-
Farbe für ausgegrauten (deaktivierten) Text.
-
Highlight
-
Farbe für ausgewählte Elemente in einem Steuerelement. Sollte mit der Vordergrundfarbe HighlightText verwendet werden.
-
HighlightText
-
Farbe des Texts ausgewählter Elemente in einem Steuerelement. Sollte mit der Hintergrundfarbe Highlight verwendet werden.
-
InactiveBorder
-
Rahmenfarbe eines inaktiven Fensters.
-
InactiveCaption
-
Titelfarbe eines inaktiven Fensters. Sollte mit der Vordergrundfarbe InactiveCaptionText verwendet werden.
-
InactiveCaptionText
-
Farbe des Titeltexts in inaktiven Fenstern. Sollte mit der Hintergrundfarbe InactiveCaption verwendet werden.
-
InfoBackground
-
Hintergrundfarbe für Tooltips. Sollte mit der Vordergrundfarbe InfoText verwendet werden.
-
InfoText
-
Textfarbe für Tooltips. Sollte mit der Hintergrundfarbe InfoBackground verwendet werden.
-
Menu
-
Hintergrundfarbe von Menüs. Sollte mit der Vordergrundfarbe MenuText oder -moz-MenuBarText verwendet werden.
-
MenuText
-
Textfarbe von Menüs. Sollte mit der Hintergrundfarbe Menu verwendet werden.
-
Scrollbar
-
Hintergrundfarbe von Scrollleisten.
-
ThreeDDarkShadow
-
Farbe des dunkleren (normalerweise äußeren) der dem Licht abgewandten zweier Rahmen für 3D-Elemente, die durch zwei Ebenen umgebender konzentrischer Rahmen dreidimensional erscheinen.
-
ThreeDFace
-
Schaltflächenfarbe für 3D-Elemente, die durch zwei Ebenen umgebender konzentrischer Rahmen dreidimensional erscheinen. Sollte mit der Vordergrundfarbe ButtonText verwendet werden.
-
ThreeDHighlight
-
Farbe des helleren (normalerweise äußeren) der dem Licht zugewandten zweier Rahmen für 3D-Elemente, die durch zwei Ebenen umgebender konzentrischer Rahmen dreidimensional erscheinen.
-
ThreeDLightShadow
-
Farbe des dunkleren (normalerweise inneren) der dem Licht zugewandten zweier Rahmen für 3D-Elemente, die durch zwei Ebenen umgebender konzentrischer Rahmen dreidimensional erscheinen.
-
ThreeDShadow
-
Farbe des helleren (normalerweise inneren) der dem Licht abgewandten zweier Rahmen für 3D-Elemente, die durch zwei Ebenen umgebender konzentrischer Rahmen dreidimensional erscheinen.
-
Window
-
Fensterhintergrundfarbe. Sollte mit der Vordergrundfarbe WindowText verwendet werden.
-
WindowFrame
-
Fensterrahmenfarbe.
-
WindowText
-
Textfarbe in Fenstern. Sollte mit der Hintergrundfarbe Window verwendet werden.
-
- -

Mozilla Systemfarben Erweiterungen

- -
-
-moz-ButtonDefault
-
Rahmenfarbe, die um Schaltflächen angezeigt wird, die die Standardaktion für Dialoge darstellen.
-
-moz-ButtonHoverFace
-
Hintergrundfarbe einer Schaltfläche, über der der Mauszeiger steht (was ThreeDFace oder ButtonFace wäre, wenn der Mauszeiger nicht darübersteht). Sollte mit der Vordergrundfarbe -moz-ButtonHoverText verwendet werden.
-
-moz-ButtonHoverText
-
Textfarbe einer Schaltfläche, über der der Mauszeiger steht (was ButtonText wäre, wenn der Mauszeiger nicht darübersteht). Sollte mit der Hintergrundfarbe -moz-ButtonHoverFace verwendet werden.
-
-moz-CellHighlight
-
Hintergrundfarbe für markierte Elemente in einem Baum. Sollte mit der Vordergrundfarbe -moz-CellHighlightText verwendet werden. Siehe auch -moz-html-CellHighlight.
-
-moz-CellHighlightText
-
Textfarbe für markierte Elemente in einem Baum. Sollte mit der Hintergrundfarbe -moz-CellHighlight verwendet werden. Siehe auch -moz-html-CellHighlightText.
-
-moz-Combobox
-
{{Gecko_minversion_inline("1.9.2")}} Hintergrundfarbe für Combo-Boxen. Sollte mit der Vordergrundfarbe -moz-ComboboxText verwendet werden. In Gecko Versionen vor 1.9.2 sollte stattdessen -moz-Field verwendet werden.
-
-moz-ComboboxText
-
{{Gecko_minversion_inline("1.9.2")}} Textfarbe für Combo-Boxen. Sollte mit der Hintergrundfarbe -moz-Combobox verwendet werden. In Gecko Versionen vor 1.9.2 sollte stattdessen -moz-FieldText verwendet werden.
-
-moz-Dialog
-
Hintergrundfarbe für Dialoge. Sollte mit der Vordergrundfarbe -moz-DialogText verwendet werden.
-
-moz-DialogText
-
Textfarbe für Dialoge. Sollte mit der Hintergrundfarbe -moz-Dialog verwendet werden.
-
-moz-dragtargetzone
-
-moz-EvenTreeRow
-
{{gecko_minversion_inline("1.9")}} Hintergrundfarbe für geradzahlige Zeilen in einem Baum. Sollte mit der Vordergrundfarbe -moz-FieldText verwendet werden. In Gecko Versionen vor 1.9 sollte stattdessen -moz-Field verwendet werden. Siehe auch -moz-OddTreeRow.
-
-moz-Field
-
Hintergrundfarbe für Texteingabefelder. Sollte mit der Vordergrundfarbe -moz-FieldText verwendet werden.
-
-moz-FieldText
-
Textfarbe für Texteingabefelder. Sollte mit der Hintergrundfarbe -moz-Field, -moz-EvenTreeRow oder -moz-OddTreeRow verwendet werden.
-
-moz-html-CellHighlight
-
{{gecko_minversion_inline("1.9")}} Hintergrundfarbe für markierte Elemente in HTML {{HTMLElement("select")}}s. Sollte mit der Vordergrundfarbe -moz-html-CellHighlightText verwendet werden. In Gecko Versionen vor 1.9 sollte stattdessen -moz-CellHighlight verwendet werden.
-
-moz-html-CellHighlightText
-
{{gecko_minversion_inline("1.9")}} Vordergrundfarbe für markierte Elemente in HTML {{HTMLElement("select")}}s. Sollte mit der Hintergrundfarbe -moz-html-CellHighlight verwendet werden. In Gecko Versionen vor 1.9 sollte stattdessen -moz-CellHighlightText verwendet werden.
-
-moz-mac-accentdarkestshadow
-
-moz-mac-accentdarkshadow
-
-moz-mac-accentface
-
-moz-mac-accentlightesthighlight
-
-moz-mac-accentlightshadow
-
-moz-mac-accentregularhighlight
-
-moz-mac-accentregularshadow
-
-moz-mac-chrome-active
-
{{Gecko_minversion_inline("1.9.1")}}
-
-moz-mac-chrome-inactive
-
{{Gecko_minversion_inline("1.9.1")}}
-
-moz-mac-focusring
-
-moz-mac-menuselect
-
-moz-mac-menushadow
-
-moz-mac-menutextselect
-
-moz-MenuHover
-
Hintergrundfarbe für Menüeinträge, über denen der Mauszeiger steht. Oft ähnlich zu Highlight. Sollte mit der Vordergrundfarbe -moz-MenuHoverText oder -moz-MenuBarHoverText verwendet werden.
-
-moz-MenuHoverText
-
Textfarbe für Menüeinträge, über denen der Mauszeiger steht. Oft ähnlich zu HighlightText. Sollte mit der Hintergrundfarbe -moz-MenuHover verwendet werden.
-
-moz-MenuBarText
-
{{Gecko_minversion_inline("1.9.2")}} Vordergrundfarbe für Text in Menüleisten. Oft ähnlich zu MenuText. Sollte auf einem Menu Hintergrund verwendet werden.
-
-moz-MenuBarHoverText
-
{{Gecko_minversion_inline("1.9.2")}} Vordergrundfarbe für Text in Menüleisten, über dem der Mauszeiger steht. Oft ähnlich zu -moz-MenuHoverText. Sollte auf einem -moz-MenuHover Hintergrund verwendet werden.
-
-moz-nativehyperlinktext
-
{{Gecko_minversion_inline("1.9.1")}} Standardplattformfarbe für Hyperlinks.
-
-moz-OddTreeRow
-
{{gecko_minversion_inline("1.9")}} Hintergrundfarbe für ungeradzahlige Zeilen in einem Baum. Sollte mit der Vordergrundfarbe -moz-FieldText verwendet werden. In Gecko Versionen vor 1.9 sollte stattdessen -moz-Field verwendet werden. Siehe auch -moz-EvenTreeRow.
-
-moz-win-communicationstext
-
{{gecko_minversion_inline("1.9")}} Sollte für Text in Objekten mit {{cssxref("-moz-appearance")}}: -moz-win-communications-toolbox; verwendet werden.
-
-moz-win-mediatext
-
{{gecko_minversion_inline("1.9")}} Sollte für Text in Objekten mit {{cssxref("-moz-appearance")}}: -moz-win-media-toolbox; verwendet werden.
-
- -

Mozilla Farbpräferenz Erweiterungen

- -
-
-moz-activehyperlinktext
-
Benutzerpräferenz für die Textfarbe aktiver Links. Sollte mit dem Standarddokumenthintergrund verwendet werden.
-
 
-
-moz-default-background-color
-
{{Gecko_minversion_inline("5.0")}} Benutzerpräferenz für die Dokumenthintergrundfarbe.
-
 
-
-moz-default-color
-
{{Gecko_minversion_inline("5.0")}} Benutzerpräferenz für die Textfarbe.
-
-moz-hyperlinktext
-
Benutzerpräferenz für die Textfarbe nicht besuchter Links. Sollte mit dem Standarddokumenthintergrund verwendet werden.
-
-moz-visitedhyperlinktext
-
Benutzerpräferenz für die Textfarbe besuchter Links. Sollte mit dem Standarddokumenthintergrund verwendet werden.
-
- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('CSS4 Colors', '#colorunits', '')}}{{Spec2('CSS4 Colors')}}rebeccapurple hinzugefügt.
{{SpecName('CSS3 Colors', '#colorunits', '')}}{{Spec2('CSS3 Colors')}}Systemfarben als veraltet markiert; SVG-Farben hinzugefügt; functionale Notationen rgba(), hsl() und hsla() hinzugefügt.
{{SpecName('CSS2.1', 'syndata.html#value-def-color', '')}}{{Spec2('CSS2.1')}}orange als Farbe und Systemfarben hinzugefügt.
{{SpecName('CSS1', '#color-units', '')}}{{Spec2('CSS1')}}Ursprüngliche Definition
- -

Browser Kompatibilität

- -

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

- -

Siehe auch

- -
    -
  • Die {{cssxref("opacity")}} Eigenschaft, die es erlaubt, die Transparenz einer Farbe auf Elementebene zu definieren.
    • -
  • Die {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-shadow")}} und {{cssxref("box-shadow")}} Eigenschaften.
    • -
diff --git a/files/de/web/css/gap/index.html b/files/de/web/css/gap/index.html new file mode 100644 index 0000000000..b6953c3258 --- /dev/null +++ b/files/de/web/css/gap/index.html @@ -0,0 +1,178 @@ +--- +title: grid-gap +slug: Web/CSS/grid-gap +translation_of: Web/CSS/gap +translation_of_original: Web/CSS/grid-gap +--- +

grid-gap  ist die shorthand CSS Eigenschaft für  {{cssxref("grid-row-gap")}} und {{cssxref("grid-column-gap")}} , welche die Spalten (gutter) zwischen Rasterreihen und Rasterspalten festlegt.

+ +
/* Ein <Länge> Wert */
+grid-gap: 20px;
+grid-gap: 1em;
+grid-gap: 3vmin;
+grid-gap: 0.5cm;
+
+/* Ein <Prozent> Wert */
+grid-gap: 16%;
+grid-gap: 100%;
+
+/* Zwei <Länge> Werte */
+grid-gap: 20px 10px;
+grid-gap: 1em 0.5em;
+grid-gap: 3vmin 2vmax;
+grid-gap: 0.5cm 2mm;
+
+/* Ein or zwei <Prozent> Werte */
+grid-gap: 16% 100%;
+grid-gap: 21px 82%;
+
+/* Globale Werte */
+grid-gap: inherit;
+grid-gap: initial;
+grid-gap: unset;
+
+ +

{{cssinfo}}

+ +

Syntax

+ +

Dieser Eigenschaft wird ein Wert für <'grid-row-gap'> zugeordnet, gefolgt von einem optionalen Wert für <'grid-column-gap'>. Falls <'grid-column-gap'> ausgelassen wird, wird diesem der gleiche Wert zugeordnet wie <'grid-row-gap'>.

+ +

<'grid-row-gap'> und <'grid-column-gap'> werden jeweils angegeben als <Länge> or als <Prozent>.

+ +

Werte

+ +
+
<Länge>
+
Gibt die Breite der Spalte an, welche die Grid-Linien trennt.
+
<Prozent>
+
Ist die prozentuale Breite der Lücke zwischen zwei Rasterlinien im Verhältnis zu der Gesamtgröße des Elements.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiel

+ +

HTML Inhalt

+ +
<div id="grid">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+ +

CSS Inhalt

+ +
#grid {
+  display: grid;
+  height: 200px;
+  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
+  grid-gap: 20px 5px;
+}
+
+#grid > div {
+  background-color: lime;
+}
+
+ +

{{EmbedLiveSample("Example", "100%", "200px")}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName("CSS3 Grid", "#propdef-grid-gap", "grid-gap")}}{{Spec2("CSS3 Grid")}}Erste Definition
+ +

Browserkompatibilität

+ +

 

+ + + +

{{Compat("css.properties.grid-gap")}}

+ +

 

+ +

Siehe auch

+ + + + diff --git a/files/de/web/css/grid-gap/index.html b/files/de/web/css/grid-gap/index.html deleted file mode 100644 index b6953c3258..0000000000 --- a/files/de/web/css/grid-gap/index.html +++ /dev/null @@ -1,178 +0,0 @@ ---- -title: grid-gap -slug: Web/CSS/grid-gap -translation_of: Web/CSS/gap -translation_of_original: Web/CSS/grid-gap ---- -

grid-gap  ist die shorthand CSS Eigenschaft für  {{cssxref("grid-row-gap")}} und {{cssxref("grid-column-gap")}} , welche die Spalten (gutter) zwischen Rasterreihen und Rasterspalten festlegt.

- -
/* Ein <Länge> Wert */
-grid-gap: 20px;
-grid-gap: 1em;
-grid-gap: 3vmin;
-grid-gap: 0.5cm;
-
-/* Ein <Prozent> Wert */
-grid-gap: 16%;
-grid-gap: 100%;
-
-/* Zwei <Länge> Werte */
-grid-gap: 20px 10px;
-grid-gap: 1em 0.5em;
-grid-gap: 3vmin 2vmax;
-grid-gap: 0.5cm 2mm;
-
-/* Ein or zwei <Prozent> Werte */
-grid-gap: 16% 100%;
-grid-gap: 21px 82%;
-
-/* Globale Werte */
-grid-gap: inherit;
-grid-gap: initial;
-grid-gap: unset;
-
- -

{{cssinfo}}

- -

Syntax

- -

Dieser Eigenschaft wird ein Wert für <'grid-row-gap'> zugeordnet, gefolgt von einem optionalen Wert für <'grid-column-gap'>. Falls <'grid-column-gap'> ausgelassen wird, wird diesem der gleiche Wert zugeordnet wie <'grid-row-gap'>.

- -

<'grid-row-gap'> und <'grid-column-gap'> werden jeweils angegeben als <Länge> or als <Prozent>.

- -

Werte

- -
-
<Länge>
-
Gibt die Breite der Spalte an, welche die Grid-Linien trennt.
-
<Prozent>
-
Ist die prozentuale Breite der Lücke zwischen zwei Rasterlinien im Verhältnis zu der Gesamtgröße des Elements.
-
- -

Formale Syntax

- -
{{csssyntax}}
- -

Beispiel

- -

HTML Inhalt

- -
<div id="grid">
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-</div>
- -

CSS Inhalt

- -
#grid {
-  display: grid;
-  height: 200px;
-  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
-  grid-gap: 20px 5px;
-}
-
-#grid > div {
-  background-color: lime;
-}
-
- -

{{EmbedLiveSample("Example", "100%", "200px")}}

- -

Spezifikationen

- - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName("CSS3 Grid", "#propdef-grid-gap", "grid-gap")}}{{Spec2("CSS3 Grid")}}Erste Definition
- -

Browserkompatibilität

- -

 

- - - -

{{Compat("css.properties.grid-gap")}}

- -

 

- -

Siehe auch

- - - - diff --git a/files/de/web/css/id-selektoren/index.html b/files/de/web/css/id-selektoren/index.html deleted file mode 100644 index 921e391d80..0000000000 --- a/files/de/web/css/id-selektoren/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: ID-Selektoren -slug: Web/CSS/ID-Selektoren -tags: - - CSS - - CSS Referenz - - Einsteiger - - Selektoren -translation_of: Web/CSS/ID_selectors ---- -
{{CSSRef("Selectors")}}
- -

In einem HTML Dokument matchen CSS ID-Selektoren ein Element basierend auf den Inhalten des {{htmlattrxref("id")}} Attributs des Elements, welches exakt dem Wert des angegebenen Selektors entsprechen muss.

- -

Syntax

- -
#id_value { Stileigenschaften }
- -

Beachte, dass dies äquivalent zu folgendem {{cssxref("Attributselektoren", "Attributselektor")}} ist:

- -
[id=id_value] { Stileigenschaften }
- -

Beispiel

- -
span#identified {
-  background-color: DodgerBlue;
-}
-
- -
<span id="identified">Hier ist ein Span mit Text.</span>
-<span>Hier ist ein weiterer.</span>
-
- -

{{EmbedLiveSample("Beispiel", 200, 50)}}

- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName("CSS4 Selectors", "#id-selectors", "ID selectors")}}{{Spec2("CSS4 Selectors")}} 
{{SpecName("CSS3 Selectors", "#id-selectors", "ID selectors")}}{{Spec2("CSS3 Selectors")}} 
{{SpecName("CSS2.1", "selector.html#id-selectors", "ID selectors")}}{{Spec2("CSS2.1")}} 
{{SpecName("CSS1", "#id-as-selector", "ID selectors")}}{{Spec2("CSS1")}}Ursprüngliche Definition
- -

Browser Kompatibilität

- -{{Compat("css.selectors.id")}} diff --git a/files/de/web/css/id_selectors/index.html b/files/de/web/css/id_selectors/index.html new file mode 100644 index 0000000000..921e391d80 --- /dev/null +++ b/files/de/web/css/id_selectors/index.html @@ -0,0 +1,72 @@ +--- +title: ID-Selektoren +slug: Web/CSS/ID-Selektoren +tags: + - CSS + - CSS Referenz + - Einsteiger + - Selektoren +translation_of: Web/CSS/ID_selectors +--- +
{{CSSRef("Selectors")}}
+ +

In einem HTML Dokument matchen CSS ID-Selektoren ein Element basierend auf den Inhalten des {{htmlattrxref("id")}} Attributs des Elements, welches exakt dem Wert des angegebenen Selektors entsprechen muss.

+ +

Syntax

+ +
#id_value { Stileigenschaften }
+ +

Beachte, dass dies äquivalent zu folgendem {{cssxref("Attributselektoren", "Attributselektor")}} ist:

+ +
[id=id_value] { Stileigenschaften }
+ +

Beispiel

+ +
span#identified {
+  background-color: DodgerBlue;
+}
+
+ +
<span id="identified">Hier ist ein Span mit Text.</span>
+<span>Hier ist ein weiterer.</span>
+
+ +

{{EmbedLiveSample("Beispiel", 200, 50)}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName("CSS4 Selectors", "#id-selectors", "ID selectors")}}{{Spec2("CSS4 Selectors")}} 
{{SpecName("CSS3 Selectors", "#id-selectors", "ID selectors")}}{{Spec2("CSS3 Selectors")}} 
{{SpecName("CSS2.1", "selector.html#id-selectors", "ID selectors")}}{{Spec2("CSS2.1")}} 
{{SpecName("CSS1", "#id-as-selector", "ID selectors")}}{{Spec2("CSS1")}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.id")}} diff --git a/files/de/web/css/index/index.html b/files/de/web/css/index/index.html deleted file mode 100644 index 2c59185221..0000000000 --- a/files/de/web/css/index/index.html +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: CSS Dokumentationsverzeichnis -slug: Web/CSS/Index -tags: - - CSS -translation_of: Web/CSS/Index ---- -

{{Index("/de/docs/Web/CSS")}}

diff --git a/files/de/web/css/inheritance/index.html b/files/de/web/css/inheritance/index.html new file mode 100644 index 0000000000..f5d4a097b2 --- /dev/null +++ b/files/de/web/css/inheritance/index.html @@ -0,0 +1,33 @@ +--- +title: Vererbung +slug: Web/CSS/Vererbung +tags: + - CSS + - Guide + - Web +translation_of: Web/CSS/inheritance +--- +

Übersicht

+

Die Übersicht jeder CSS Eigenschaft Definition gibt an, ob jene Eigenschaft standardmäßig vererbt ist ("Vererbt: Ja") oder nicht ("Vererbt: Nein"). Dies steuert, was passiert, falls kein Wert für eine Eigenschaft eines Elements angegeben wird.

+

Vererbte Eigenschaften

+

Falls kein Wert für eine vererbte Eigenschaft für ein Element angegeben wurde, erhält das Element den berechneten Wert dieser Eigenschaft des Elternelements. Nur das Wurzelelement des Dokuments erhält den in der Übersicht angegebenen Initialwert.

+

Ein typisches Beispiel für eine vererbte Eigenschaft ist die {{ Cssxref("color") }} Eigenschaft. Für die gegebene Stilregel:

+
p { color: green }
+

und den Markup:

+
<p>Dieser Absatz beinhaltet <em>hervorgehobenen Text</em>.</p>
+

werden die Wörter "hervorgehobenen Text" in grün erscheinen, da das em Element den Wert der {{ Cssxref("color") }} Eigenschaft vom p Element erbt. Es erhält nicht den Initialwert der Eigenschaft (welcher die Farbe des Wurzelelements ist, falls die Seite keine Farbe definiert).

+

Nicht vererbte Eigenschaften

+

Falls kein Wert für eine nicht vererbte Eigenschaft (in Mozilla Code manchmal auch rücksetzende Eigenschaft genannt) für ein Element angegeben wurde, erhält das Element den Initialwert dieser Eigenschaft (wie in der Übersicht der Eigenschaft angegeben).

+

Ein typisches Beispiel für eine nicht vererbte Eigenschaft ist die {{ Cssxref("border") }} Eigenschaft. Für die gegebene Stilregel:

+
 p { border: medium solid }
+

und den Markup:

+
  <p>Dieser Absatz beinhaltet <em>hervorgehobenen Text</em>.</p>
+

werden die Wörter "hervorgehobenen Text" keinen Rahmen haben (da der Initialwert von {{ Cssxref("border-style") }} none ist).

+

Hinweise

+

Das {{ Cssxref("inherit") }} Schlüsselwort erlaubt es Autoren, die Vererbung explizit anzugeben. Dies funktioniert sowohl für vererbte als auch nicht vererbte Eigenschaften.

+

Siehe auch

+
    +
  • CSS Referenz
    • +
  • {{ CSS_key_concepts() }}
    • +
  • {{ Cssxref("inherit") }}
    • +
diff --git a/files/de/web/css/initial_value/index.html b/files/de/web/css/initial_value/index.html new file mode 100644 index 0000000000..7d5e7e18dd --- /dev/null +++ b/files/de/web/css/initial_value/index.html @@ -0,0 +1,20 @@ +--- +title: Initialwert +slug: Web/CSS/Initialwert +tags: + - CSS + - Guide + - Web +translation_of: Web/CSS/initial_value +--- +

Übersicht

+

Der Initialwert, der in der Übersicht der Definition jeder CSS Eigenschaft steht, hat eine unterschiedliche Bedeutung für vererbte und nicht vererbte Eigenschaften.

+

Für vererbte Eigenschaften wird der Initialwert ausschließlich für das Wurzelelement verwendet, falls kein Wert für das Element definiert ist.

+

Für nicht vererbte Eigenschaften wird der Initialwert für jedes Element verwendet, falls kein Wert für das Element definiert ist.

+

Ein initial Schlüsselwort wurde in CSS3 hinzugefügt, um es Autoren zu erlauben, diesen ursprünglichen Wert explizit anzugeben.

+

Siehe auch

+ diff --git a/files/de/web/css/initialwert/index.html b/files/de/web/css/initialwert/index.html deleted file mode 100644 index 7d5e7e18dd..0000000000 --- a/files/de/web/css/initialwert/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Initialwert -slug: Web/CSS/Initialwert -tags: - - CSS - - Guide - - Web -translation_of: Web/CSS/initial_value ---- -

Übersicht

-

Der Initialwert, der in der Übersicht der Definition jeder CSS Eigenschaft steht, hat eine unterschiedliche Bedeutung für vererbte und nicht vererbte Eigenschaften.

-

Für vererbte Eigenschaften wird der Initialwert ausschließlich für das Wurzelelement verwendet, falls kein Wert für das Element definiert ist.

-

Für nicht vererbte Eigenschaften wird der Initialwert für jedes Element verwendet, falls kein Wert für das Element definiert ist.

-

Ein initial Schlüsselwort wurde in CSS3 hinzugefügt, um es Autoren zu erlauben, diesen ursprünglichen Wert explizit anzugeben.

-

Siehe auch

- diff --git a/files/de/web/css/kindselektoren/index.html b/files/de/web/css/kindselektoren/index.html deleted file mode 100644 index 2e351964ed..0000000000 --- a/files/de/web/css/kindselektoren/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: Kindselektoren -slug: Web/CSS/Kindselektoren -tags: - - CSS - - CSS Referenz - - Einsteiger - - NeedsMobileBrowserCompatibility - - Selektoren -translation_of: Web/CSS/Child_combinator ---- -
{{CSSRef("Selectors")}}
- -
Der Kindkombinator (>) wird zwischen zwei CSS-Selektoren platziert. Er wählt nur die Elemente aus, die vom zweiten Selektor gewählt werden, die Kinder vom ersten gewählten Element sind.
- -
 
- -
-
/* Listenpunkte, die Kinder der "my-things" Liste sind */
-ul.my-things > li {
-  margin: 2em;
-}
- -

Elemente, die vom zweiten Selektor gewählt werden, müssen direkte Kinder des ersten gewählten Elements sein. Dies ist strenger, als der Nachfahrenselektor, der alle Elemente auswählt, die vom zweiten Selektor gewählt werden, für die ein Vorfahrenelement existieren, unabhängig der Anzahl der "Sprünge" aufwärts des DOM.

-
- -

Syntax

- -
selector1 > selector2 { Stileigenschaften }
-
- -

Beispiel

- -

CSS

- -
span {
-  background-color: white;
-}
-
-div > span {
-  background-color: DodgerBlue;
-}
-
- -

HTML

- -
<div>
-  <span>Span 1. Innerhalb des Divs.
-    <span>Span 2. Innerhalb des Spans, der sich im Div befindet.</span>
-  </span>
-</div>
-<span>Span 3. In keinem Div.</span>
-
- -

Ergebnis

- -

{{EmbedLiveSample("Beispiel", 200, 100)}}

- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('CSS4 Selectors', '#child-combinators', 'child combinator')}}{{Spec2('CSS4 Selectors')}} 
{{SpecName('CSS3 Selectors', '#child-combinators', 'child combinators')}}{{Spec2('CSS3 Selectors')}}Keine Änderung
{{SpecName('CSS2.1', 'selector.html#child-selectors', 'child selectors')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition
- -

Browser Kompatibilität

- -{{Compat("css.selectors.child")}} diff --git a/files/de/web/css/klassenselektoren/index.html b/files/de/web/css/klassenselektoren/index.html deleted file mode 100644 index eafd714a05..0000000000 --- a/files/de/web/css/klassenselektoren/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: Klassenselektoren -slug: Web/CSS/Klassenselektoren -tags: - - CSS - - CSS Referenz - - Einsteiger - - Selektoren -translation_of: Web/CSS/Class_selectors ---- -
{{CSSRef("Selectors")}}
- -

In einem HTML Dokument matchen CSS Klassenselektoren ein Element basierend auf den Inhalten des {{htmlattrxref("class")}} Attributs des Elements. Das class Attribut ist definiert als eine durch Leerzeichen getrennte Liste von Einträgen, wobei einer dieser Einträge exakt auf den Klassennamen des angegebenen Selektors passen muss.

- -

Syntax

- -
.classname { style properties }
- -

Beachte, dass dies äquivalent zu folgendem {{cssxref("Attributselektoren", "Attributselektor")}} ist:

- -
[class~=classname] { style properties }
- -

Beispiel

- -

CSS

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

HTML

- -
<span class="classy">Hier ist ein Span mit Text.</span>
-<span>Hier ist ein weiterer.</span>
-
- -

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

- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('CSS4 Selectors', '#class-html', 'class selectors')}}{{Spec2('CSS4 Selectors')}}Keine Änderungen
{{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')}}Ursprüngliche Definition
- -

Browser Kompatibilität

- -{{Compat("css.selectors.class")}} diff --git a/files/de/web/css/kurzformat_eigenschaft/index.html b/files/de/web/css/kurzformat_eigenschaft/index.html deleted file mode 100644 index 1923d5efd5..0000000000 --- a/files/de/web/css/kurzformat_eigenschaft/index.html +++ /dev/null @@ -1,158 +0,0 @@ ---- -title: Kurzformat Eigenschaft -slug: Web/CSS/Kurzformat_Eigenschaft -translation_of: Web/CSS/Shorthand_properties ---- -
{{cssref}}
- -

Shorthand properties are CSS properties that let you set the values of multiple other CSS properties simultaneously. Using a shorthand property, you can write more concise (and often more readable) style sheets, saving time and energy.

- -

The CSS specification defines shorthand properties to group the definition of common properties acting on the same theme. For instance, the CSS {{cssxref("background")}} property is a shorthand property that's able to define the values of {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-repeat")}}, and {{cssxref("background-position")}}. Similarly, the most common font-related properties can be defined using the shorthand {{cssxref("font")}}, and the different margins around a box can be defined using the {{cssxref("margin")}} shorthand.

- -

Tricky edge cases

- -

Even if they are very convenient to use, there are a few edge cases to keep in mind when using them:

- -
    -
  1. A value which is not specified is set to its initial value. That sounds anecdotal, but it really means that it overrides previously set values. Therefore: - - 
    background-color: red;
-background: url(images/bg.gif) no-repeat left top;
-
    - will not set the color of the background to red but to {{cssxref("background-color")}}'s default, transparent, as the second rule has precedence.
    2. -
  2. Only the individual properties values can inherit. As missing values are replaced by their initial value, it is impossible to allow inheritance of individual properties by omitting them. The keyword inherit can be applied to a property, but only as a whole, not as a keyword for one value or another. That means that the only way to make some specific value to be inherited is to use the longhand property with the keyword inherit.
    3. -
  3. Shorthand properties try not to force a specific order for the values of the properties they replace. This works well when these properties use values of different types, as the order has no importance, but this does not work as easily when several properties can have identical values. Handling of these cases are grouped in several categories: -
      -
    1. Shorthands handling properties related to edges of a box, like {{cssxref("border-style")}}, {{cssxref("margin")}} or {{cssxref("padding")}}, always use a consistent 1-to-4-value syntax representing those edges: - - - - - - - - - - - - - - - - - - - -
      border1.pngThe 1-value syntax: border-width: 1em — The unique value represents all edges
      border2.pngThe 2-value syntax: border-width: 1em 2em — The first value represents the vertical, that is top and bottom, edges, the second the horizontal ones, that is the left and right ones.
      border3.pngThe 3-value syntax: border-width: 1em 2em 3em — The first value represents the top edge, the second, the horizontal, that is left and right, ones, and the third value the bottom edge
      border4.png -

      The 4-value syntax: border-width: 1em 2em 3em 4em — The four values represent the top, right, bottom and left edges respectively, always in that order, that is clock-wise starting at the top (The initial letter of Top-Right-Bottom-Left matches the order of the consonant of the word trouble: TRBL) (You can also remember it as the order that the hands would rotate on a clock: 1em starts in the 12 o'clock position, then 2em in the 3 o'clock position, then 3em in the 6 o'clock position, and 4em in the 9 o'clock position).

      -
      -
      2. -
    2. Similarly, shorthands handling properties related to corners of a box, like {{cssxref("border-radius")}}, always use a consistent 1-to-4-value syntax representing those corners: - - - - - - - - - - - - - - - - - - - -
      corner1.pngThe 1-value syntax: border-radius: 1em — The unique value represents all corners
      corner2.pngThe 2-value syntax: border-radius: 1em 2em — The first value represents the top left and bottom right corner, the second the top right and bottom left ones.
      corner3.pngThe 3-value syntax: border-radius: 1em 2em 3em — The first value represents the top left corner, the second the top right and bottom left ones, and the third value the bottom right corner
      corner4.png -

      The 4-value syntax: border-radius: 1em 2em 3em 4em — The four values represent the top left, top right, bottom right and bottom left corners respectively, always in that order, that is clock-wise starting at the top left.

      -
      -
      3. -
    -
    4. -
- -

Background properties

- -

A background with the following properties ...

- -
background-color: #000;
-background-image: url(images/bg.gif);
-background-repeat: no-repeat;
-background-position: left top;
- -

... can be shortened to just one declaration:

- -
background: #000 url(images/bg.gif) no-repeat left top;
- -

(The shorthand form is actually the equivalent of the longhand properties above plus background-attachment: scroll and, in CSS3, some additional properties.)

- -

See {{cssxref("background")}} for more detailed information, including CSS3 properties.

- -

Font properties

- -

The following declarations ...

- -
font-style: italic;
-font-weight: bold;
-font-size: .8em;
-line-height: 1.2;
-font-family: Arial, sans-serif;
- -

... can be shortened to the following:

- -
font: italic bold .8em/1.2 Arial, sans-serif;
- -

This shorthand declaration is actually equivalent to the longhand declarations above plus font-variant: normal and font-size-adjust: none (CSS2.0 / CSS3), font-stretch: normal (CSS3).

- -

Border properties

- -

With borders, the width, color, and style can be simplified into one declaration. For example, the following CSS ...

- -
border-width: 1px;
-border-style: solid;
-border-color: #000;
- -

... can be simplified as:

- -
border: 1px solid #000;
- -

Margin and padding properties

- -

Shorthand versions of margin and padding values work similarly; the margin property allows for shorthand values to be specified using one, two, three, or four values. The following CSS declarations ...

- -
margin-top: 10px;
-margin-right: 5px;
-margin-bottom: 10px;
-margin-left: 5px;
- -

... are the same as the following declaration using the four value shorthand. Note that the values are in clockwise order, beginning at the top: top, right, bottom, then left (TRBL, the consonants in "trouble").

- -
margin: 10px 5px 10px 5px;
- -

Margin shorthand rules for one, two, three and four value declarations are:

- -
    -
  • When one value is specified, it applies the same margin to all four sides.
    • -
  • When two values are specified, the first margin applies to the top and bottom, the second to the left and right.
    • -
  • When three values are specified, the first margin applies to the top, the second to the left and right, the third to the bottom.
    • -
  • When four values are specified, the margins apply to the top, right, bottom, and left in that order (clockwise).
    • -
- -

The universal shorthand property

- -

CSS provides a universal shorthand property, {{cssxref("all")}}, which applies its value to every property in the document. Its purpose is to change the properties' inheritance model to one of:

- -

{{page("/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance", "Controlling_inheritance")}}

- -

See Cascade and inheritance or Introducing the CSS Cascade for more information about how inheritance works in CSS.

- -

See also

- -
    -
  • {{css_key_concepts}}
    • -
  • Shorthand properties: {{cssxref("animation")}}, {{cssxref("background")}}, {{cssxref("border")}}, {{cssxref("border-bottom")}}, {{cssxref("border-color")}}, {{cssxref("border-left")}}, {{cssxref("border-radius")}}, {{cssxref("border-right")}}, {{cssxref("border-style")}}, {{cssxref("border-top")}}, {{cssxref("border-width")}}, {{cssxref("column-rule")}}, {{cssxref("columns")}}, {{cssxref("flex")}}, {{cssxref("flex-flow")}}, {{cssxref("font")}}, {{cssxref("grid")}}, {{cssxref("grid-area")}}, {{cssxref("grid-column")}}, {{cssxref("grid-row")}}, {{cssxref("grid-template")}}, {{cssxref("list-style")}}, {{cssxref("margin")}}, {{cssxref("offset")}}, {{cssxref("outline")}}, {{cssxref("overflow")}}, {{cssxref("padding")}}, {{cssxref("place-content")}}, {{cssxref("place-items")}}, {{cssxref("place-self")}}, {{cssxref("text-decoration")}}, {{cssxref("transition")}}
    • -
diff --git a/files/de/web/css/mask-origin/index.html b/files/de/web/css/mask-origin/index.html new file mode 100644 index 0000000000..7cba7cd7fc --- /dev/null +++ b/files/de/web/css/mask-origin/index.html @@ -0,0 +1,101 @@ +--- +title: '-webkit-mask-origin' +slug: Web/CSS/-webkit-mask-origin +tags: + - CSS + - Referenz +translation_of: Web/CSS/mask-origin +translation_of_original: Web/CSS/-webkit-mask-origin +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Die -webkit-mask-origin CSS Eigenschaft bestimmt den Ursprungspunkt des Maskenbildes. Der Wert der {{cssxref("-webkit-mask-position")}} Eigenschaft wird relativ zum Wert dieser Eigenschaft interpretiert. Diese Eigenschaft wird nicht angewendet, wenn -webkit-mask-attachment fixed ist.

+ +

{{cssinfo}}

+ +

Syntax

+ +
{{csssyntax}}
+ +

Werte

+ +
+
padding
+
Standardwert. Die Position des Maskenbildes ist relativ zum Innenabstand. (Für einzelne Boxen ist "0 0" die linke obere Ecke des Randes des Innenabstands, "100% 100%" ist die untere rechte Ecke.)
+
border
+
Die Position des Maskenbildes ist relativ zum Rand.
+
content
+
Das Maskenbild ist relativ zum Inhalt.
+
+ +

Beispiele

+ +
.example {
+  border: 10px double;
+  padding: 10px;
+  -webkit-mask-image: url('mask.png');
+
+  /* Das Maskenbild ist innerhalb des Innenabstands. */
+  -webkit-mask-origin: content;
+}
+
+ +
div {
+  -webkit-mask-image: url('mask1.png'), url('mask2.png');
+  -webkit-mask-origin: padding, content;
+}
+
+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung1.0{{CompatNo}}{{CompatNo}}{{CompatNo}}4.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Grundlegende Unterstützung2.1{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}3.2
+
+ +

Siehe auch

+ +

{{cssxref("-webkit-mask")}}, {{cssxref("-webkit-mask-box-image")}}, {{cssxref("-webkit-mask-attachment")}}, {{cssxref("-webkit-mask-image")}},{{cssxref("-webkit-mask-composite")}}, {{cssxref("-webkit-mask-repeat")}}, {{cssxref("-webkit-mask-clip")}}

diff --git a/files/de/web/css/mask-repeat/index.html b/files/de/web/css/mask-repeat/index.html new file mode 100644 index 0000000000..3ba0646adb --- /dev/null +++ b/files/de/web/css/mask-repeat/index.html @@ -0,0 +1,128 @@ +--- +title: '-webkit-mask-repeat' +slug: Web/CSS/-webkit-mask-repeat +tags: + - CSS +translation_of: Web/CSS/mask-repeat +translation_of_original: Web/CSS/-webkit-mask-repeat +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Übersicht

+ +

Die -webkit-mask-repeat Eigenschaft gibt an, ob und wie ein Maskenbild wiederholt (gekachelt) wird.

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* Einzelne Schlüsselwortwerte */
+-webkit-mask-repeat: repeat;
+-webkit-mask-repeat: repeat-x;
+-webkit-mask-repeat: repeat-y;
+-webkit-mask-repeat: no-repeat;
+
+/* Mehrer Schlüsselwortwerte */
+-webkit-mask-repeat: repeat, repeat-x, no-repeat;
+
+/* Globale Werte */
+-webkit-mask-repeat: inherit;
+-webkit-mask-repeat: initial;
+-webkit-mask-repeat: unset;
+
+ +

Werte

+ +
+
repeat
+
Das Maskenbild wird horizontal und vertikal wiederholt.
+
repeat-x
+
Das Maskenbild wird nur horizontal wiederholt.
+
repeat-y
+
Das Maskenbild wird nur vertikal wiederholt.
+
no-repeat
+
Das Maskenbild wird nicht wiederholt; nur eine Kopie des Maskenbildes wird gezeichnet. Der Rest des Inhalts des maskierten Elements wird nicht dargestellt.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +
.exampleone {
+  -webkit-mask-image: url('mask.png');
+  -webkit-mask-repeat: repeat-x;
+}
+
+.exampletwo {
+  -webkit-mask-image: url('mask.png');
+  -webkit-mask-repeat: no-repeat;
+}
+
+ +

Unterstützung mehrerer Maskenbilder

+ +

Für jedes Maskenbild kann ein unterschiedlicher <repeat-style> Wert angegeben werden, der durch Kommas getrennt wird:

+ +
.examplethree {
+  -webkit-mask-image: url('mask1.png'), url('mask2.png');
+  -webkit-mask-repeat: repeat-x, repeat-y;
+}
+
+ +

Jedes Bild wird dem zugehörigen Wiederholungsstil zugeordnet, vom zuerst bis zum zuletzt angegebenen.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung1.0{{CompatNo}}{{CompatNo}}{{CompatNo}}4.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Grundlegende Unterstützung2.1{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}3.2
+
+ +

Siehe auch

+ +

{{cssxref("-webkit-mask")}}, {{cssxref("-webkit-mask-box-image")}}, {{cssxref("-webkit-mask-clip")}}, {{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-attachment")}}, {{cssxref("-webkit-mask-image")}}, {{cssxref("-webkit-mask-composite")}}

diff --git a/files/de/web/css/motion_path/index.html b/files/de/web/css/motion_path/index.html deleted file mode 100644 index 5c09de0a90..0000000000 --- a/files/de/web/css/motion_path/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: Bewegungspfad -slug: Web/CSS/Motion_Path -tags: - - Bewegungspfad - - CSS - - Experimentell - - Referenz - - Übersicht -translation_of: Web/CSS/CSS_Motion_Path ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

Motion Path ist ein CSS Modul, das es Autoren erlaubt, beliebige grafische Objekte entlang eines benutzerdefinierten Pfads zu animieren.

- -

Referenz

- -

Eigenschaften

- -
-
    -
  • {{cssxref("motion")}}
    • -
  • {{cssxref("motion-path")}}
    • -
  • {{cssxref("motion-offset")}}
    • -
  • {{cssxref("motion-rotation")}}
    • -
-
- -

Anleitungen

- -

Keine.

- -

Spezifikationen

- - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('Motion Path Level 1')}}{{Spec2('Motion Path Level 1')}}Ursprüngliche Definition
- -

Browser Kompatibilität

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - -
MerkmalAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome für Android
Grundlegende Unterstützung{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
diff --git a/files/de/web/css/none/index.html b/files/de/web/css/none/index.html deleted file mode 100644 index 8c17b309fa..0000000000 --- a/files/de/web/css/none/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: none -slug: Web/CSS/none -translation_of: Web/CSS/float -translation_of_original: Web/CSS/none ---- -
- {{ CSSRef() }}
-

Übersicht

-

none ist ein oft gebrauchter Wert, welcher in einem Grossteil der Eigenschaften verwendet werden kann. Meistens ist er der Standartwert einer Eigenschaft. Ein vergleichbarer Wert ist {{ Cssxref("normal") }}.

-

Verwendet in

-
    -
  • {{ Cssxref("background-image") }}
    • -
  • {{ Cssxref("border-style") }}
    • -
  • {{ Cssxref("clear") }}
    • -
  • {{ Cssxref("content") }}
    • -
  • {{ Cssxref("counter-increment") }}
    • -
  • {{ Cssxref("counter-reset") }}
    • -
  • {{ Cssxref("display") }}
    • -
  • {{ Cssxref("float") }}
    • -
  • {{ Cssxref("list-style-type") }}
    • -
  • {{ Cssxref("max-height") }} / {{ Cssxref("max-width") }}
    • -
  • {{ Cssxref("quotes") }}
    • -
  • {{ Cssxref("text-decoration") }}
    • -
  • {{ Cssxref("text-transform") }}
    • -
diff --git a/files/de/web/css/normal/index.html b/files/de/web/css/normal/index.html deleted file mode 100644 index 1bf3818e01..0000000000 --- a/files/de/web/css/normal/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: normal -slug: Web/CSS/normal -translation_of: Web/CSS/font-variant -translation_of_original: Web/CSS/normal ---- -
{{ CSSRef() }}
- -

Übersicht

- -

normal ist ein oft gebrauchter Wert. Meistens ist es der Standartwert der entsprechenden Eigenschaften. It is comparable to the value {{ Cssxref("none") }}, used in a similar manner for other properties.

- -

Verwendet in

- -
    -
  • {{ Cssxref("content") }}
    • -
  • {{ Cssxref("font-style") }}
    • -
  • {{ Cssxref("font-variant") }}
    • -
  • {{ Cssxref("font-weight") }}
    • -
  • {{ Cssxref("letter-spacing") }}
    • -
  • {{ Cssxref("line-height") }}
    • -
  • {{ Cssxref("speak") }}
    • -
  • {{ Cssxref("unicode-bidi") }}
    • -
  • {{ Cssxref("white-space") }}
    • -
  • {{ Cssxref("word-spacing") }}
    • -
- -
{{ languages({ "ja": "ja/CSS/normal" }) }}
diff --git a/files/de/web/css/overflow-wrap/index.html b/files/de/web/css/overflow-wrap/index.html new file mode 100644 index 0000000000..fd803452d4 --- /dev/null +++ b/files/de/web/css/overflow-wrap/index.html @@ -0,0 +1,83 @@ +--- +title: word-wrap +slug: Web/CSS/word-wrap +tags: + - CSS + - CSS Eigenschaft + - NeedsLiveSample + - Referenz +translation_of: Web/CSS/overflow-wrap +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die word-wrap Eigenschaft wird verwendet, um anzugeben ob der Webbrowser Zeilenumbrüche innerhalb von Wörtern machen darf. Dies ist nötig um einem Overflow vorzubeugen, wenn ein sonst nicht trennbarer Text zu lang für die beinhaltende Box wäre.

+ +
Hinweis: Die ursprünglich (unprefixed) proprietäre Erweiterung word-wrap von Microsoft wurde im aktuellen Entwurf der CSS3 Text Spezifikation in {{cssxref("overflow-wrap")}} umbenannt. word-wrap wird jetzt als "alternativer Name" für overflow-wrap angesehen. Stabile Builds von Google Chrome und Opera unterstützen die neue Syntax.
+ +

{{cssinfo}}

+ +

Syntax

+ +
/* Keyword values */
+word-wrap: normal;
+word-wrap: break-word;
+
+/* Global values */
+word-wrap: inherit;
+word-wrap: initial;
+word-wrap: unset;
+
+ +

Werte

+ +
+
normal
+
Zeilen dürfen nur bei normal Trennstellen von Wörtern umbrechen.
+
break-word
+
Normalerweise nicht trennbare Wörter dürfen an beliebigen Stellen getrennt werden, wenn es sonst keine anwendbaren Trennstellen in der Zeile gibt.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +
p { width: 13em; background: gold; }
+ +

FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)

+ +
p { width: 13em; background: gold; word-wrap: break-word; }
+ +

FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusBemerkung
{{ SpecName('CSS3 Text', '#propdef-word-wrap', 'word-wrap') }}{{ Spec2('CSS3 Text') }}Initiale Definition
+ +

Webbrowserkompatibilität

+ +{{Compat("css.properties.overflow-wrap")}} + +

Siehe auch

+ +
    +
  • {{cssxref("word-break")}}
    • +
diff --git a/files/de/web/css/property_template/index.html b/files/de/web/css/property_template/index.html deleted file mode 100644 index 57b2483609..0000000000 --- a/files/de/web/css/property_template/index.html +++ /dev/null @@ -1,165 +0,0 @@ ---- -title: Eigenschaft Vorlage -slug: Web/CSS/Property_Template -tags: - - CSS - - CSS Referenz - - MDN Meta -translation_of: MDN/Contribute/Howto/Document_a_CSS_property/Property_template ---- -
{{MDNSidebar}}
{{ CSSRef() }}
- -

Übersicht

- -

Eine Beschreibung der Eigenschaft, welche erklärt was diese Eigenschaft bewirkt.

- -
(Falls vorhanden) Wichtige Informationen zu dieser Eigenschaft
- -

{{cssinfo}}

- -

Syntax

- -
/* Schlüsselwortwerte */
-property: value1;
-property: value2;
-
-/* <length> Werte */
-property: 12.8em;
-
-/* Globale Werte */
-property: inherit; <-- To remember those are a possible values
-property: initial;
-property: unset;
-
- -

<Wert>: wert | wert2 | wert3 | wert2

- -

Werte

- -
-
wert1 {{ gecko_minversion_inline("9.9") }}
-
Erläuterung.
-
wert2
-
....
-
- -

(Falls vorhanden) Mozilla Erweiterungen

- -
-
-moz-*
-
Erklärung
-
- -

Formale Syntax

- -
{{csssyntax}}
- -

Beispiele

- -

Beispiel 1

- -

CSS

- -
ElementName {
-  Eigenschaft: Wert;
-  dazu: "Beispiel";
-  Traum: 10000000mm;
-  Liebe: "Gefahr";
-}
- -

HTML

- -
<ElementName>foo bar</ElementName>
- -

Ergebnis

- -

{{EmbedLiveSample("Beispiel_1")}}

- -

Beispiel 2 {{ gecko_minversion_inline("9.9") }}

- -
ElementName {
-  eigenschaft: wert;
-  /* ... */
-}
- -

Spezifikationen

- -

Benutze ausschließlich die Standardtabelle. Füge andere Spezifikationen am Ende an. Benutze das Makro \{{SpecName()}} für den Name und \{{Spec2()}} für den Status. Auf diese Weise wird der Tabelleninhalt automatisch angepasst, sobald sich der Status einer Spezifikation ändert.

- - - - - - - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName("CSS3 Animations", "#fake-link", "fake-value")}}{{Spec2("CSS3 Animations")}}Keine Änderung
{{SpecName("CSS2.1", "#fake-link", "fake value")}}{{Spec2("CSS2.1")}}Ursprüngliche Definition
- -

Browser Kompatibilität

- -

{{CompatibilityTable()}}

- -
- - - - - - - - - - - - - - - - - - - -
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatUnknown}}{{CompatUnknown}}100{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - -
MerkmalAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatUnknown}}{{CompatUnknown}}100{{CompatUnknown}}{{CompatUnknown}}
-
- -

Siehe auch

- -
    -
  • Links zu verwandten Eigenschaften
    • -
diff --git a/files/de/web/css/reference/index.html b/files/de/web/css/reference/index.html new file mode 100644 index 0000000000..89a0c83e25 --- /dev/null +++ b/files/de/web/css/reference/index.html @@ -0,0 +1,211 @@ +--- +title: CSS Referenz +slug: Web/CSS/CSS_Referenz +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/Reference +--- +
{{CSSRef}}
+ +

Verwende diese CSS-Referenz für einen alphabetischen Index aller Standard-CSS-Eigenschaften, Pseudoklassen, Pseudoelemente, Datentypen und @-Regeln. Du kannst eine Liste aller Selektoren und eine Liste aller Konzepte ansehen. Dies beinhaltet auch eine kurze Referenz zu DOM-CSS / CSSOM.

+ +

Grundlegende Syntax von Regeln

+ +

Syntax von Stilregeln

+ +
selektorliste {
+  eigenschaft: wert;
+  [weitere eigenschaft:wert; Paare]
+}
+
+... wobei selektorliste: selektor[:pseudo-klasse] [::pseudo-element] [, weitere selektorlisten]
+
+Siehe Listen aller Selektoren, Pseudo-Klassen und Pseudo-Elemente weiter unten.
+
+ +

Beispiele für Stilregeln

+ +

+strong {
+  color: red;
+}
+
+div.menu-bar li:hover > ul {
+  display: block;
+}
+
+ +

Für eine Einführung in die Syntax von CSS-Selektoren auf Anfängerstufe, siehe diese Anleitung. Beachte, dass jeder CSS-Syntax-Fehler in einer Regeldefinition die gesamte Regel ungültig macht. Ungültige Regeln werden vom Browser ignoriert. Beachte dass CSS-Regeldefinitionen vollständig (ASCII) text-basiert sind, wohingegegen DOM-CSS / CSSOM (das Regel-Verwaltungssystem) objekt-basiert ist.

+ +

Syntax von @-Regeln

+ +

Da die Struktur von @-Regeln stark variiert, schaue bitte bei @-Regel nach, um die Syntax der gewünschten Regel herauszufinden.

+ +

Index

+ +
+

Hinweis: Die Bezeichnungen der Eigenschaften enthalten nicht die JavaScript-Namen, wenn sie sich von den CSS-Standardbezeichnern unterscheiden.

+
+ +
{{CSS_Ref}}
+ +

Selektoren

+ +

Einfache Selektoren

+ + + +

Kombinatoren

+ + + +

Pseudoklassen

+ +
+
    +
  • {{ Cssxref(":active") }}
    • +
  • {{cssxref(':any')}}
    • +
  • {{cssxref(':any-link')}}
    • +
  • {{ Cssxref(":checked") }}
    • +
  • {{ Cssxref(":default") }}
    • +
  • {{ Cssxref(":defined") }}
    • +
  • {{ Cssxref(":dir", ":dir()")}}
    • +
  • {{ Cssxref(":disabled") }}
    • +
  • {{ Cssxref(":empty") }}
    • +
  • {{ Cssxref(":enabled") }}
    • +
  • {{ Cssxref(":first") }}
    • +
  • {{ Cssxref(":first-child") }}
    • +
  • {{ Cssxref(":first-of-type") }}
    • +
  • {{ Cssxref(":fullscreen") }}
    • +
  • {{ Cssxref(":focus") }}
    • +
  • {{ Cssxref(":focus-visible") }}
    • +
  • {{ Cssxref(":host") }}
    • +
  • {{ Cssxref(":host()") }}
    • +
  • {{ Cssxref(":host-context()") }}
    • +
  • {{ Cssxref(":hover") }}
    • +
  • {{ Cssxref(":indeterminate") }}
    • +
  • {{ Cssxref(":in-range") }}
    • +
  • {{ Cssxref(":invalid") }}
    • +
  • {{ Cssxref(":lang", ":lang()") }}
    • +
  • {{ Cssxref(":last-child") }}
    • +
  • {{ Cssxref(":last-of-type") }}
    • +
  • {{ Cssxref(":left") }}
    • +
  • {{ Cssxref(":link") }}
    • +
  • {{ Cssxref(":not", ":not()") }}
    • +
  • {{ Cssxref(":nth-child", ":nth-child()") }}
    • +
  • {{ Cssxref(":nth-last-child", ":nth-last-child()") }}
    • +
  • {{ Cssxref(":nth-last-of-type", ":nth-last-of-type()") }}
    • +
  • {{ Cssxref(":nth-of-type", ":nth-of-type()") }}
    • +
  • {{ Cssxref(":only-child") }}
    • +
  • {{ Cssxref(":only-of-type") }}
    • +
  • {{ Cssxref(":optional") }}
    • +
  • {{ Cssxref(":out-of-range") }}
    • +
  • {{ Cssxref(":read-only") }}
    • +
  • {{ Cssxref(":read-write") }}
    • +
  • {{ Cssxref(":required") }}
    • +
  • {{ Cssxref(":right") }}
    • +
  • {{ Cssxref(":root") }}
    • +
  • {{ Cssxref(":scope") }}
    • +
  • {{ Cssxref(":target") }}
    • +
  • {{ Cssxref(":valid") }}
    • +
  • {{ Cssxref(":visited") }}
    • +
+
+ +

Pseudoelemente

+ +
+
    +
  • {{ Cssxref("::after") }}
    • +
  • {{ Cssxref("::backdrop") }}
    • +
  • {{ Cssxref("::before") }}
    • +
  • {{ Cssxref("::cue") }}
    • +
  • {{ Cssxref("::first-letter") }}
    • +
  • {{ Cssxref("::first-line") }}
    • +
  • {{ Cssxref("::grammar-error") }} {{experimental_inline}}
    • +
  • {{ Cssxref("::marker") }} {{experimental_inline}}
    • +
  • {{ Cssxref("::placeholder") }} {{experimental_inline}}
    • +
  • {{ Cssxref("::selection") }}
    • +
  • {{ Cssxref("::spelling-error") }} {{experimental_inline}}
    • +
+
+ +
+

Siehe auch: Eine vollständige Liste der Selektoren in der Selectors Level 3 Spezifikation.

+
+ +

Konzepte

+ +

Syntax & Semantik

+ + + +

Werte

+ + + +

Layout

+ + + +

DOM-CSS / CSSOM

+ +

Wichtigste Objekttypen

+ + + +

Wichtige Methoden

+ +
    +
  • {{domxref("CSSStyleSheet.insertRule")}}
    • +
  • {{domxref("CSSStyleSheet.deleteRule")}}
    • +
diff --git a/files/de/web/css/replaced_element/index.html b/files/de/web/css/replaced_element/index.html new file mode 100644 index 0000000000..c75a4aec95 --- /dev/null +++ b/files/de/web/css/replaced_element/index.html @@ -0,0 +1,23 @@ +--- +title: Ersetztes Element +slug: Web/CSS/ersetztes_Element +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/Replaced_element +--- +
{{CSSRef}}
+ +

Übersicht

+ +

In CSS ist ein ersetztes Element ein Element, dessen Darstellung außerhalb des Anwendungsbereichs von CSS liegt. Dies sind eine Art externe Objekte, deren Repräsentation unabhängig von CSS ist. Typische ersetzte Elemente sind {{HTMLElement("img")}}, {{HTMLElement("object")}}, {{HTMLElement("video")}} oder Formularelemente wie {{HTMLElement("textarea")}} und {{HTMLElement("input")}}. Manche Elemente wie {{HTMLElement("audio")}} oder {{HTMLElement("canvas")}} sind nur in bestimmten Fällen ersetzte Elemente. Objekte, die via CSS {{cssxref("content")}} Eigenschaften eingefügt werden, sind anonyme ersetzte Elemente.

+ +

CSS behandelt ersetzte Elemente in manchen Fällen besonders, wie z. B. bei der Berechnung von Außenabständen und einigen auto Werten.

+ +

Beachte, dass manche ersetzte Elemente, jedoch nicht alle, innere Maße oder eine definierte Grundlinie haben, welche von einigen CSS Eigenschaften wie {{cssxref("vertical-align")}} verwendet wird.

+ +

Siehe auch

+ +
    +
  • {{CSS_key_concepts}}
    • +
diff --git a/files/de/web/css/shorthand_properties/index.html b/files/de/web/css/shorthand_properties/index.html new file mode 100644 index 0000000000..1923d5efd5 --- /dev/null +++ b/files/de/web/css/shorthand_properties/index.html @@ -0,0 +1,158 @@ +--- +title: Kurzformat Eigenschaft +slug: Web/CSS/Kurzformat_Eigenschaft +translation_of: Web/CSS/Shorthand_properties +--- +
{{cssref}}
+ +

Shorthand properties are CSS properties that let you set the values of multiple other CSS properties simultaneously. Using a shorthand property, you can write more concise (and often more readable) style sheets, saving time and energy.

+ +

The CSS specification defines shorthand properties to group the definition of common properties acting on the same theme. For instance, the CSS {{cssxref("background")}} property is a shorthand property that's able to define the values of {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-repeat")}}, and {{cssxref("background-position")}}. Similarly, the most common font-related properties can be defined using the shorthand {{cssxref("font")}}, and the different margins around a box can be defined using the {{cssxref("margin")}} shorthand.

+ +

Tricky edge cases

+ +

Even if they are very convenient to use, there are a few edge cases to keep in mind when using them:

+ +
    +
  1. A value which is not specified is set to its initial value. That sounds anecdotal, but it really means that it overrides previously set values. Therefore: + + 
    background-color: red;
+background: url(images/bg.gif) no-repeat left top;
+
    + will not set the color of the background to red but to {{cssxref("background-color")}}'s default, transparent, as the second rule has precedence.
    2. +
  2. Only the individual properties values can inherit. As missing values are replaced by their initial value, it is impossible to allow inheritance of individual properties by omitting them. The keyword inherit can be applied to a property, but only as a whole, not as a keyword for one value or another. That means that the only way to make some specific value to be inherited is to use the longhand property with the keyword inherit.
    3. +
  3. Shorthand properties try not to force a specific order for the values of the properties they replace. This works well when these properties use values of different types, as the order has no importance, but this does not work as easily when several properties can have identical values. Handling of these cases are grouped in several categories: +
      +
    1. Shorthands handling properties related to edges of a box, like {{cssxref("border-style")}}, {{cssxref("margin")}} or {{cssxref("padding")}}, always use a consistent 1-to-4-value syntax representing those edges: + + + + + + + + + + + + + + + + + + + +
      border1.pngThe 1-value syntax: border-width: 1em — The unique value represents all edges
      border2.pngThe 2-value syntax: border-width: 1em 2em — The first value represents the vertical, that is top and bottom, edges, the second the horizontal ones, that is the left and right ones.
      border3.pngThe 3-value syntax: border-width: 1em 2em 3em — The first value represents the top edge, the second, the horizontal, that is left and right, ones, and the third value the bottom edge
      border4.png +

      The 4-value syntax: border-width: 1em 2em 3em 4em — The four values represent the top, right, bottom and left edges respectively, always in that order, that is clock-wise starting at the top (The initial letter of Top-Right-Bottom-Left matches the order of the consonant of the word trouble: TRBL) (You can also remember it as the order that the hands would rotate on a clock: 1em starts in the 12 o'clock position, then 2em in the 3 o'clock position, then 3em in the 6 o'clock position, and 4em in the 9 o'clock position).

      +
      +
      2. +
    2. Similarly, shorthands handling properties related to corners of a box, like {{cssxref("border-radius")}}, always use a consistent 1-to-4-value syntax representing those corners: + + + + + + + + + + + + + + + + + + + +
      corner1.pngThe 1-value syntax: border-radius: 1em — The unique value represents all corners
      corner2.pngThe 2-value syntax: border-radius: 1em 2em — The first value represents the top left and bottom right corner, the second the top right and bottom left ones.
      corner3.pngThe 3-value syntax: border-radius: 1em 2em 3em — The first value represents the top left corner, the second the top right and bottom left ones, and the third value the bottom right corner
      corner4.png +

      The 4-value syntax: border-radius: 1em 2em 3em 4em — The four values represent the top left, top right, bottom right and bottom left corners respectively, always in that order, that is clock-wise starting at the top left.

      +
      +
      3. +
    +
    4. +
+ +

Background properties

+ +

A background with the following properties ...

+ +
background-color: #000;
+background-image: url(images/bg.gif);
+background-repeat: no-repeat;
+background-position: left top;
+ +

... can be shortened to just one declaration:

+ +
background: #000 url(images/bg.gif) no-repeat left top;
+ +

(The shorthand form is actually the equivalent of the longhand properties above plus background-attachment: scroll and, in CSS3, some additional properties.)

+ +

See {{cssxref("background")}} for more detailed information, including CSS3 properties.

+ +

Font properties

+ +

The following declarations ...

+ +
font-style: italic;
+font-weight: bold;
+font-size: .8em;
+line-height: 1.2;
+font-family: Arial, sans-serif;
+ +

... can be shortened to the following:

+ +
font: italic bold .8em/1.2 Arial, sans-serif;
+ +

This shorthand declaration is actually equivalent to the longhand declarations above plus font-variant: normal and font-size-adjust: none (CSS2.0 / CSS3), font-stretch: normal (CSS3).

+ +

Border properties

+ +

With borders, the width, color, and style can be simplified into one declaration. For example, the following CSS ...

+ +
border-width: 1px;
+border-style: solid;
+border-color: #000;
+ +

... can be simplified as:

+ +
border: 1px solid #000;
+ +

Margin and padding properties

+ +

Shorthand versions of margin and padding values work similarly; the margin property allows for shorthand values to be specified using one, two, three, or four values. The following CSS declarations ...

+ +
margin-top: 10px;
+margin-right: 5px;
+margin-bottom: 10px;
+margin-left: 5px;
+ +

... are the same as the following declaration using the four value shorthand. Note that the values are in clockwise order, beginning at the top: top, right, bottom, then left (TRBL, the consonants in "trouble").

+ +
margin: 10px 5px 10px 5px;
+ +

Margin shorthand rules for one, two, three and four value declarations are:

+ +
    +
  • When one value is specified, it applies the same margin to all four sides.
    • +
  • When two values are specified, the first margin applies to the top and bottom, the second to the left and right.
    • +
  • When three values are specified, the first margin applies to the top, the second to the left and right, the third to the bottom.
    • +
  • When four values are specified, the margins apply to the top, right, bottom, and left in that order (clockwise).
    • +
+ +

The universal shorthand property

+ +

CSS provides a universal shorthand property, {{cssxref("all")}}, which applies its value to every property in the document. Its purpose is to change the properties' inheritance model to one of:

+ +

{{page("/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance", "Controlling_inheritance")}}

+ +

See Cascade and inheritance or Introducing the CSS Cascade for more information about how inheritance works in CSS.

+ +

See also

+ +
    +
  • {{css_key_concepts}}
    • +
  • Shorthand properties: {{cssxref("animation")}}, {{cssxref("background")}}, {{cssxref("border")}}, {{cssxref("border-bottom")}}, {{cssxref("border-color")}}, {{cssxref("border-left")}}, {{cssxref("border-radius")}}, {{cssxref("border-right")}}, {{cssxref("border-style")}}, {{cssxref("border-top")}}, {{cssxref("border-width")}}, {{cssxref("column-rule")}}, {{cssxref("columns")}}, {{cssxref("flex")}}, {{cssxref("flex-flow")}}, {{cssxref("font")}}, {{cssxref("grid")}}, {{cssxref("grid-area")}}, {{cssxref("grid-column")}}, {{cssxref("grid-row")}}, {{cssxref("grid-template")}}, {{cssxref("list-style")}}, {{cssxref("margin")}}, {{cssxref("offset")}}, {{cssxref("outline")}}, {{cssxref("overflow")}}, {{cssxref("padding")}}, {{cssxref("place-content")}}, {{cssxref("place-items")}}, {{cssxref("place-self")}}, {{cssxref("text-decoration")}}, {{cssxref("transition")}}
    • +
diff --git a/files/de/web/css/specificity/index.html b/files/de/web/css/specificity/index.html new file mode 100644 index 0000000000..e8a0e22302 --- /dev/null +++ b/files/de/web/css/specificity/index.html @@ -0,0 +1,197 @@ +--- +title: Spezifität +slug: Web/CSS/Spezifität +tags: + - Beispiel + - CSS + - Guide + - Web +translation_of: Web/CSS/Specificity +--- +
{{cssref}}
+ +

Das Konzept

+ +

Spezifität ist das Mittel, mit dem ein Browser bestimmt, welche Eigenschaftswerte die relevantesten für ein Element sind und zugewiesen werden. Spezifität basiert ausschließlich auf den Matchingregeln, welche durch die verschiedenen Selektoren gebildet werden.

+ +

Berechnung

+ +

Die Spezifität wird durch die Verkettung der Anzahl jedes Selektortyps berechnet. Sie entspricht keiner Gewichtung, die dem passenden Ausdruck zugewiesen wird.

+ +

Im Falle einer Spezifitätsgleichheit wird die letzte im CSS gefundene Deklaration auf das Element angewandt.

+ +

{{ Note("Die Nähe von Elementen in einem Dokumentenbaum zueinander hat keine Auswirkung auf die Spezifität.") }}

+ +

Reihenfolge der Spezifität

+ +

Die folgende Selektorenliste ist nach aufsteigender Spezifität sortiert:

+ +
    +
  • Universelle Selektoren
    • +
  • Typselektoren
    • +
  • Klassenselektoren
    • +
  • Attributselektoren
    • +
  • Pseudoklassen
    • +
  • ID-Selektoren
    • +
  • Inlinestile
    • +
+ +

Die !important Ausnahme

+ +

Wenn eine !important Regel auf eine Stildeklaration angewendet wird, überschreibt diese Deklaration alle anderen Deklarationen des CSS, unabhängig davon, wo sie in der Deklarationsliste steht. Jedoch hat !important nichts mit Spezifität zu tun. Es wird davon abgeraten, !important zu verwenden, da es das Debuggen erschwert, weil die normale Kaskadierung der Stylesheets dadurch unterbrochen wird.

+ +

Einige allgemeine Regeln:

+ +
    +
  • Niemals !important in CSS verwenden, das auf der gesamten Seite Verwendung findet.
    • +
  • !important nur in Seiten spezifischem CSS verwenden, das seitenweites oder fremdes CSS (wie beispielsweise von ExtJS oder YUI) überschreibt.
    • +
  • Niemals !important verwenden, wenn ein Plugin/Mashup geschrieben wird.
    • +
  • Immer nach einem Weg suchen, Spezifität zu verwenden, bevor !important in Erwägung gezogen wird.
    • +
+ +

Anstatt !important zu verwenden kann folgendes getan werden:

+ +
    +
  1. Besseren Gebrauch der CSS Kaskadierungseigenschaften machen.
    2. +
  2. +

    Spezifischere Regeln verwenden. Eines oder mehrere Elemente vor dem Element anzugeben, das selektiert werden soll, ist spezifischer und erhält eine höhere Priorität:

    + + 
    <div id="test">
+  <span>Text</span>
+</div>
    + + 
    div#test span { color: green; }
+span { color: red; }
+div span { color: blue; }
    +
    3. +
+ +

Unabhängig von der Reihenfolge, in der der Text steht, wird der Text grün dargestellt, da die Regel spezifischer ist. (Des weiteren überschreibt die Regel für blau die Regel für rot unabhängig von deren Reihenfolge.)

+ +

!Important sollte in folgenden Fällen verwendet werden:

+ +

A) Erstes Szenario

+ +
    +
  1. Eine globale CSS Datei wird verwendet, die die visuellen Aspekte der Seite global setzt.
    2. +
  2. Es werden Inline Styles in Elementen verwendet, wovon grundsätzlich abgeraten wird.
    3. +
+ +

In diesem Fall sollten bestimmte Stile in der globalen CSS Datei als !important deklariert werden, was Inline Styles überschreibt.

+ +

B) Weiteres Szenario

+ +
#someElement p {
+  color: blue;
+}
+
+p.awesome {
+  color: red;
+}
+ +

Ohne !important hat die erste Regel eine höhere Spezifität und hat damit Vorrang vor der zweiten Regel. Somit werden alle awesome Absätze blau dargestellt.

+ +

Wie !important überschrieben werden kann

+ +

Eine Eigenschaft, die mit !important gekennzeichnet ist, kann durch eine weitere !important Eigenschaft überschrieben werden. Hierbei muss jedoch die zweite Eigenschaft entweder eine höhere Spezifität besitzen (indem im Selektor ein zusätzlicher Tag, eine ID oder Klasse angegeben wird) oder eine CSS Regel mit dem gleichen Selektor muss weiter unten als die existierende platziert werden.

+ +

Einige Beispiele mit höherer Spezifität:

+ +
table td    {height: 50px !important;}
+.myTable td {height: 50px !important;}
+#myTable td {height: 50px !important;}
+ +

Beispiel für gleichen Selektor nach dem existierenden:

+ +
td {height: 50px !important;}
+ +

Die :not Ausnahme

+ +

Die Negations-Pseudoklasse :not wird nicht als Pseudoklasse in der Spezifitätsberechnung berücksichtigt. Jedoch werden Selektoren innerhalb der Negations-Pseudoklasse als normale Selektoren behandelt.

+ +
+

Beispiel CSS:

+ +
div.outer p {
+  color:orange;
+}
+div:not(.outer) p {
+  color: lime;
+}
+
+ +

Angewendet auf folgendes HTML:

+ +
<div class="outer">
+  <p>Dies ist im äußeren div.</p>
+  <div class="inner">
+    <p>Dieser Text ist innerhalb des inneren divs.</p>
+  </div>
+</div>
+
+
+ +

Ergibt:

+ +

{{ EmbedLiveSample('Beispiel_not','600','100') }}

+ +

Formbasierte Spezifität

+ +

Spezifität basiert auf der Form eines Selektors. Im folgenden Fall zählt der Selektor als ein Attribut im Algorithmus zur Bestimmung der Spezifität, obwohl er eine ID selektiert.

+ +

CSS:

+ +
+
* #foo {
+  color: green;
+}
+*[id="foo"] {
+  color: purple;
+}
+
+ +

Angewendet auf folgendes HTML:

+ +
<p id="foo">I am a sample text.</p>
+
+
+ +

Ergibt:

+ +

{{ EmbedLiveSample('Beispiel_formbasierte_Spezifitaet','600','100') }}

+ +

Da das gleiche Element selektiert wird, der ID-Selektor jedoch eine höhere Spezifität aufweist.

+ +

Nichtbeachtung der Position innerhalb des Baumes

+ +
+

CSS:

+ +
body h1 {
+  color: green;
+}
+html h1 {
+  color: purple;
+}
+
+ +

Angewendet auf folgendes HTML:

+ +
<html>
+  <body>
+    <h1>Here is a title!</h1>
+  </body>
+</html>
+
+
+ +

Ergibt:

+ +

{{ EmbedLiveSample('Beispiel_Nichtbeachtung_Baumposition','600','100') }}

+ +

Siehe auch

+ + diff --git "a/files/de/web/css/spezifit\303\244t/index.html" "b/files/de/web/css/spezifit\303\244t/index.html" deleted file mode 100644 index e8a0e22302..0000000000 --- "a/files/de/web/css/spezifit\303\244t/index.html" +++ /dev/null @@ -1,197 +0,0 @@ ---- -title: Spezifität -slug: Web/CSS/Spezifität -tags: - - Beispiel - - CSS - - Guide - - Web -translation_of: Web/CSS/Specificity ---- -
{{cssref}}
- -

Das Konzept

- -

Spezifität ist das Mittel, mit dem ein Browser bestimmt, welche Eigenschaftswerte die relevantesten für ein Element sind und zugewiesen werden. Spezifität basiert ausschließlich auf den Matchingregeln, welche durch die verschiedenen Selektoren gebildet werden.

- -

Berechnung

- -

Die Spezifität wird durch die Verkettung der Anzahl jedes Selektortyps berechnet. Sie entspricht keiner Gewichtung, die dem passenden Ausdruck zugewiesen wird.

- -

Im Falle einer Spezifitätsgleichheit wird die letzte im CSS gefundene Deklaration auf das Element angewandt.

- -

{{ Note("Die Nähe von Elementen in einem Dokumentenbaum zueinander hat keine Auswirkung auf die Spezifität.") }}

- -

Reihenfolge der Spezifität

- -

Die folgende Selektorenliste ist nach aufsteigender Spezifität sortiert:

- -
    -
  • Universelle Selektoren
    • -
  • Typselektoren
    • -
  • Klassenselektoren
    • -
  • Attributselektoren
    • -
  • Pseudoklassen
    • -
  • ID-Selektoren
    • -
  • Inlinestile
    • -
- -

Die !important Ausnahme

- -

Wenn eine !important Regel auf eine Stildeklaration angewendet wird, überschreibt diese Deklaration alle anderen Deklarationen des CSS, unabhängig davon, wo sie in der Deklarationsliste steht. Jedoch hat !important nichts mit Spezifität zu tun. Es wird davon abgeraten, !important zu verwenden, da es das Debuggen erschwert, weil die normale Kaskadierung der Stylesheets dadurch unterbrochen wird.

- -

Einige allgemeine Regeln:

- -
    -
  • Niemals !important in CSS verwenden, das auf der gesamten Seite Verwendung findet.
    • -
  • !important nur in Seiten spezifischem CSS verwenden, das seitenweites oder fremdes CSS (wie beispielsweise von ExtJS oder YUI) überschreibt.
    • -
  • Niemals !important verwenden, wenn ein Plugin/Mashup geschrieben wird.
    • -
  • Immer nach einem Weg suchen, Spezifität zu verwenden, bevor !important in Erwägung gezogen wird.
    • -
- -

Anstatt !important zu verwenden kann folgendes getan werden:

- -
    -
  1. Besseren Gebrauch der CSS Kaskadierungseigenschaften machen.
    2. -
  2. -

    Spezifischere Regeln verwenden. Eines oder mehrere Elemente vor dem Element anzugeben, das selektiert werden soll, ist spezifischer und erhält eine höhere Priorität:

    - - 
    <div id="test">
-  <span>Text</span>
-</div>
    - - 
    div#test span { color: green; }
-span { color: red; }
-div span { color: blue; }
    -
    3. -
- -

Unabhängig von der Reihenfolge, in der der Text steht, wird der Text grün dargestellt, da die Regel spezifischer ist. (Des weiteren überschreibt die Regel für blau die Regel für rot unabhängig von deren Reihenfolge.)

- -

!Important sollte in folgenden Fällen verwendet werden:

- -

A) Erstes Szenario

- -
    -
  1. Eine globale CSS Datei wird verwendet, die die visuellen Aspekte der Seite global setzt.
    2. -
  2. Es werden Inline Styles in Elementen verwendet, wovon grundsätzlich abgeraten wird.
    3. -
- -

In diesem Fall sollten bestimmte Stile in der globalen CSS Datei als !important deklariert werden, was Inline Styles überschreibt.

- -

B) Weiteres Szenario

- -
#someElement p {
-  color: blue;
-}
-
-p.awesome {
-  color: red;
-}
- -

Ohne !important hat die erste Regel eine höhere Spezifität und hat damit Vorrang vor der zweiten Regel. Somit werden alle awesome Absätze blau dargestellt.

- -

Wie !important überschrieben werden kann

- -

Eine Eigenschaft, die mit !important gekennzeichnet ist, kann durch eine weitere !important Eigenschaft überschrieben werden. Hierbei muss jedoch die zweite Eigenschaft entweder eine höhere Spezifität besitzen (indem im Selektor ein zusätzlicher Tag, eine ID oder Klasse angegeben wird) oder eine CSS Regel mit dem gleichen Selektor muss weiter unten als die existierende platziert werden.

- -

Einige Beispiele mit höherer Spezifität:

- -
table td    {height: 50px !important;}
-.myTable td {height: 50px !important;}
-#myTable td {height: 50px !important;}
- -

Beispiel für gleichen Selektor nach dem existierenden:

- -
td {height: 50px !important;}
- -

Die :not Ausnahme

- -

Die Negations-Pseudoklasse :not wird nicht als Pseudoklasse in der Spezifitätsberechnung berücksichtigt. Jedoch werden Selektoren innerhalb der Negations-Pseudoklasse als normale Selektoren behandelt.

- -
-

Beispiel CSS:

- -
div.outer p {
-  color:orange;
-}
-div:not(.outer) p {
-  color: lime;
-}
-
- -

Angewendet auf folgendes HTML:

- -
<div class="outer">
-  <p>Dies ist im äußeren div.</p>
-  <div class="inner">
-    <p>Dieser Text ist innerhalb des inneren divs.</p>
-  </div>
-</div>
-
-
- -

Ergibt:

- -

{{ EmbedLiveSample('Beispiel_not','600','100') }}

- -

Formbasierte Spezifität

- -

Spezifität basiert auf der Form eines Selektors. Im folgenden Fall zählt der Selektor als ein Attribut im Algorithmus zur Bestimmung der Spezifität, obwohl er eine ID selektiert.

- -

CSS:

- -
-
* #foo {
-  color: green;
-}
-*[id="foo"] {
-  color: purple;
-}
-
- -

Angewendet auf folgendes HTML:

- -
<p id="foo">I am a sample text.</p>
-
-
- -

Ergibt:

- -

{{ EmbedLiveSample('Beispiel_formbasierte_Spezifitaet','600','100') }}

- -

Da das gleiche Element selektiert wird, der ID-Selektor jedoch eine höhere Spezifität aufweist.

- -

Nichtbeachtung der Position innerhalb des Baumes

- -
-

CSS:

- -
body h1 {
-  color: green;
-}
-html h1 {
-  color: purple;
-}
-
- -

Angewendet auf folgendes HTML:

- -
<html>
-  <body>
-    <h1>Here is a title!</h1>
-  </body>
-</html>
-
-
- -

Ergibt:

- -

{{ EmbedLiveSample('Beispiel_Nichtbeachtung_Baumposition','600','100') }}

- -

Siehe auch

- - diff --git "a/files/de/web/css/tats\303\244chlicher_wert/index.html" "b/files/de/web/css/tats\303\244chlicher_wert/index.html" deleted file mode 100644 index 5e77670cac..0000000000 --- "a/files/de/web/css/tats\303\244chlicher_wert/index.html" +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: tatsächlicher Wert -slug: Web/CSS/tatsächlicher_Wert -translation_of: Web/CSS/actual_value ---- -
{{CSSRef}}
- -

Übersicht

- -

Der tatsächliche Wert einer CSS Eigenschaft ist der verwendete Wert nachdem alle Annäherungen angewendet wurden. Zum Beispiel kann ein User Agent nur in der Lage sein, Ränder mit einem ganzzahligen Pixelwert darzustellen und daher gezwungen sein, die berechnete Breite des Randes anzunähern.

- -

Spezifikationen

- - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('CSS2.1', 'cascade.html#actual-value', 'actual value')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition
- -

Siehe auch

- - diff --git a/files/de/web/css/url()/index.html b/files/de/web/css/url()/index.html new file mode 100644 index 0000000000..dd120e3800 --- /dev/null +++ b/files/de/web/css/url()/index.html @@ -0,0 +1,85 @@ +--- +title: +slug: Web/CSS/url +tags: + - CSS + - Layout + - Referenz + - URI + - URL +translation_of: Web/CSS/url() +translation_of_original: Web/CSS/url +--- +
{{ CssRef() }}
+ +

Der <url> CSS-Datentyp bezeichnet einen Zeiger auf eine Ressource, z.B. ein Bild oder eine Schriftart. URLs können in zahlreichen CSS Eigenschaften verwendet werden, wie etwa {{ Cssxref("background-image") }}, {{ Cssxref("cursor") }}, und {{ cssxref("list-style") }}.

+ +
+

URI oder URL? Es gibt einen Unterschied zwischen einem URI und einem URL. Ein URI identifiziert einfach eine Ressource. Ein URL ist eine Art von URI und beschreibt den Speicherort einer Ressource. Ein URI kann entweder ein URL oder ein Name (URN) einer Ressource sein.

+ +

In CSS1 die funktionale Notation url() beschrieb nur echte URLs. In CSS2.1 die Definition von url()  wurde erweitert, um alle URIs zu beschreiben, ob URL oder URN. Verwirrenderweise bedeutete es, dass url() verwendet werden konnte, um ein <uri> CSS-Datentyp zu erstellen. Diese Änderung war nicht nur ungünstig, sondern auch überflüßig, weil die URNs so oft wie nie in CSS verwendet werden. Um die Verwirrung zu vermindern, kehrte CSS3 zu der engeren Anfangsdefinition. Jetzt bezeichnet url() nur echte <url>s.

+
+ +

Syntax

+ +

Der <url> Datentyp wird mit der funktionalen Notation url() spezifiziert. Es kann sowohl ohne Anführungszeichen als auch mit  einfachen oder doppelten Anführungszeichen geschrieben werden. Relative URLs sind erlaubt und sind relativ zum URL des Stylesheets (nicht zum URL der Webseite).

+ +
<a_css_property>: url("http://mysite.example.com/mycursor.png")
+<a_css_property>: url('http://mysite.example.com/mycursor.png')
+<a_css_property>: url(http://mysite.example.com/mycursor.png)
+
+ +
+

Hinweis: Steuerzeichen über 0x7e sind ab Firefox 15 in URLs ohne Anführungszeichen nicht erlaubt. Sieh {{Bug(752230)}} für mehr Details.

+
+ +

Beispiele

+ +
.topbanner {
+  background: url("topbanner.png") #00D no-repeat fixed;
+}
+
+ +
ul {
+  list-style: square url(http://www.example.com/redball.png);
+}
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Values', '#urls', '<url>') }}{{ Spec2('CSS3 Values') }}Keine wichtige Änderungen seit CSS2.1.
{{ Specname('CSS2.1', 'syndata.html#uri', '<uri>') }}{{ Spec2('CSS2.1') }}Keine wichtige Änderungen seit CSS1.
{{ SpecName('CSS1', '#url', '<url>') }}{{ Spec2('CSS1') }}Erste Definition.
+ +

Browserkompatibilität

+ +

 

+ + + +

{{Compat("css.types.url")}}

+ +

 

diff --git a/files/de/web/css/url/index.html b/files/de/web/css/url/index.html deleted file mode 100644 index dd120e3800..0000000000 --- a/files/de/web/css/url/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: -slug: Web/CSS/url -tags: - - CSS - - Layout - - Referenz - - URI - - URL -translation_of: Web/CSS/url() -translation_of_original: Web/CSS/url ---- -
{{ CssRef() }}
- -

Der <url> CSS-Datentyp bezeichnet einen Zeiger auf eine Ressource, z.B. ein Bild oder eine Schriftart. URLs können in zahlreichen CSS Eigenschaften verwendet werden, wie etwa {{ Cssxref("background-image") }}, {{ Cssxref("cursor") }}, und {{ cssxref("list-style") }}.

- -
-

URI oder URL? Es gibt einen Unterschied zwischen einem URI und einem URL. Ein URI identifiziert einfach eine Ressource. Ein URL ist eine Art von URI und beschreibt den Speicherort einer Ressource. Ein URI kann entweder ein URL oder ein Name (URN) einer Ressource sein.

- -

In CSS1 die funktionale Notation url() beschrieb nur echte URLs. In CSS2.1 die Definition von url()  wurde erweitert, um alle URIs zu beschreiben, ob URL oder URN. Verwirrenderweise bedeutete es, dass url() verwendet werden konnte, um ein <uri> CSS-Datentyp zu erstellen. Diese Änderung war nicht nur ungünstig, sondern auch überflüßig, weil die URNs so oft wie nie in CSS verwendet werden. Um die Verwirrung zu vermindern, kehrte CSS3 zu der engeren Anfangsdefinition. Jetzt bezeichnet url() nur echte <url>s.

-
- -

Syntax

- -

Der <url> Datentyp wird mit der funktionalen Notation url() spezifiziert. Es kann sowohl ohne Anführungszeichen als auch mit  einfachen oder doppelten Anführungszeichen geschrieben werden. Relative URLs sind erlaubt und sind relativ zum URL des Stylesheets (nicht zum URL der Webseite).

- -
<a_css_property>: url("http://mysite.example.com/mycursor.png")
-<a_css_property>: url('http://mysite.example.com/mycursor.png')
-<a_css_property>: url(http://mysite.example.com/mycursor.png)
-
- -
-

Hinweis: Steuerzeichen über 0x7e sind ab Firefox 15 in URLs ohne Anführungszeichen nicht erlaubt. Sieh {{Bug(752230)}} für mehr Details.

-
- -

Beispiele

- -
.topbanner {
-  background: url("topbanner.png") #00D no-repeat fixed;
-}
-
- -
ul {
-  list-style: square url(http://www.example.com/redball.png);
-}
-
- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('CSS3 Values', '#urls', '<url>') }}{{ Spec2('CSS3 Values') }}Keine wichtige Änderungen seit CSS2.1.
{{ Specname('CSS2.1', 'syndata.html#uri', '<uri>') }}{{ Spec2('CSS2.1') }}Keine wichtige Änderungen seit CSS1.
{{ SpecName('CSS1', '#url', '<url>') }}{{ Spec2('CSS1') }}Erste Definition.
- -

Browserkompatibilität

- -

 

- - - -

{{Compat("css.types.url")}}

- -

 

diff --git a/files/de/web/css/user-modify/index.html b/files/de/web/css/user-modify/index.html new file mode 100644 index 0000000000..d1ec135fa0 --- /dev/null +++ b/files/de/web/css/user-modify/index.html @@ -0,0 +1,133 @@ +--- +title: '-moz-user-modify' +slug: Web/CSS/-moz-user-modify +tags: + - CSS + - CSS Referenz + - NeedsMobileBrowserCompatibility + - Non-standard +translation_of: Web/CSS/user-modify +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Übersicht

+ +

Die -moz-user-modify Eigenschaft bestimmt, ob der Inhalt eines Elementes vom Benutzer bearbeitet werden kann oder nicht. Diese Eigenschaft ist ähnlich zum {{htmlattrxref("contenteditable")}} Attribut. Eine ähnliche Eigenschaft user-focus wurde in frühen Entwürfen eines Vorläufers der CSS3 UI Spezifikation vorgeschlagen, jedoch von der Arbeitsgruppe verworfen.

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* Schlüsselwortwerte */
+-moz-user-modify: read-only;
+-moz-user-modify: read-write;
+-moz-user-modify: write-only;
+
+/* Globale Werte */
+-moz-user-modify: inherit;
+-moz-user-modify: initial;
+-moz-user-modify: unset;
+
+ +

Werte

+ +
+
read-only
+
Standardwert. Inhalte sind nur lesbar.
+
read-write
+
Der Benutzer kann Inhalte lesen und schreiben.
+
write-only
+
Der Benutzer kann Inhalte bearbeiten, jedoch nicht lesen.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiel

+ +

CSS

+ +
.readwrite {
+  -moz-user-modify: read-write;
+  -webkit-user-modify: read-write;
+}
+
+ +

HTML

+ +
<div class="readwrite">Der Benutzer kann diesen Text ändern.</div>
+
+ +

Ergebnis

+ +

{{EmbedLiveSample("Beispiel", 300, 30)}}

+ +

Spezifikationen

+ +

user-modify in einem frühen Entwurf der CSS 3 User Interface Spezifikation (Working Draft vom Februar 2000, jetzt überholt durch CSS 3 Basic User Interface).

+ +

Browser Kompatibilität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung{{CompatUnknown}}{{CompatGeckoDesktop("1.0")}} {{property_prefix("-moz")}}{{CompatNo}}{{CompatNo}}3.0 {{property_prefix("-webkit")}}[1]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
MerkmalAndroidAndroid WebviewFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Grundlegende Unterstützung{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Auch unterstützt: -webkit-user-modify: read-write-plaintext-only (Richtext geht verloren).
+ Diese Eigenschaft wird in Safari 2.0 -khtml-user-modify genannt.

+ +

Siehe auch

+ +
    +
  • {{cssxref("-moz-user-focus")}}
    • +
  • {{cssxref("-moz-user-input")}}
    • +
  • {{cssxref("-moz-user-select")}}
    • +
diff --git a/files/de/web/css/user-select/index.html b/files/de/web/css/user-select/index.html new file mode 100644 index 0000000000..aefa619439 --- /dev/null +++ b/files/de/web/css/user-select/index.html @@ -0,0 +1,55 @@ +--- +title: '-moz-user-select' +slug: Web/CSS/-moz-user-select +tags: + - CSS + - CSS Referenz + - 'CSS:Mozilla Erweiterungen' +translation_of: Web/CSS/user-select +--- +

{{ CSSRef() }}

+ +

Übersicht

+ +

In Mozilla Anwendungen steuert die -moz-user-select Eigenschaft, ob und wie ein Text ausgewählt werden kann.

+ +
    +
  • Standardwert: text
    • +
  • Anwendbar auf: alle Elemente
    • +
  • Vererbbar: Ja
    • +
  • Prozentwerte: Nein
    • +
  • Medium: visuell
    • +
  • berechneter Wert: wie festgelegt
    • +
+ +

Syntax

+ +
-moz-user-select: text | all | none| -moz-none | inherit
+
+ +

Werte

+ +
+
text
+
Der Text kann vom Benutzer ausgewählt werden.
+
all
+
Bei einem einfachem Klick auf das Element wird der gesamte Text ausgewählt. Bei einem Doppelklick auf das Element wird der höchste Vorfahr ausgewählt.
+
none
+
Der Text eines Elements und dessen Kindelemente können nicht ausgewählt werden. Wird jedoch eine Auswahl über das DOM getätigt, sind diese Elemente darin enthalten.
+
-moz-none
+
Der Text eines Elements und dessen Kindelemente können nicht ausgewählt werden. Die Auswahl kann bei Kindelementen aktiviert werden, wenn dort -moz-user-select: text festgelegt wird.
+
inherit
+
Der Wert des Elternelements wird geerbt.
+
+ +

Beispiele

+ +
/* Schaltet Textauswahl ab */
+-moz-user-select: none
+
+ +

Siehe auch

+ + diff --git a/files/de/web/css/value_definition_syntax/index.html b/files/de/web/css/value_definition_syntax/index.html new file mode 100644 index 0000000000..da49131901 --- /dev/null +++ b/files/de/web/css/value_definition_syntax/index.html @@ -0,0 +1,405 @@ +--- +title: Wertdefinitionssyntax +slug: Web/CSS/Wertdefinitionssyntax +tags: + - CSS + - Referenz +translation_of: Web/CSS/Value_definition_syntax +--- +

{{ CSSRef() }}

+ +

Eine formale Grammatik, die CSS Wertdefinitionssyntax, wird für die Definition einer Menge von gültigen Werten für eine CSS Eigenschaft oder Funktion verwendet. Zusätzlich zu dieser Syntax kann die Menge an gültigen Werten durch semantische Beschränkungen (wie z. B. dass eine Zahl positiv sein muss) weiter eingegrenzt werden.

+ +

Die Definitionssyntax beschreibt, welche Werte erlaubt sind und die Interaktionen zwischen ihnen. Eine Komponente kann ein Schlüsselwort sein, einige Zeichen, die als Literal interpretiert werden, oder ein Wert eines vorhandenen CSS Datentyps einer anderen CSS Eigenschaft.

+ +

Komponentenwert Typen

+ +

Schlüsselwörter

+ +

Generische Schlüsselwörter

+ +

Ein Schlüsselwort mit einer vordefinierten Bedeutung wird wortgetreu, ohne Anführungszeichen, dargestellt, zum Beispiel: auto, smaller oder ease-in.

+ +

Die Spezialfälle inherit und initial

+ +

Alle CSS Eigenschaften akzeptieren die Schlüsselwörter inherit und initial, die durchweg in CSS definiert werden. Sie werden nicht in der Wertdefinition angezeigt und werden implizit definiert.

+ +

Literale

+ +

In CSS können einige Zeichen getrennt auftreten, wie der Schrägstrich ('/') oder das Komma (','), und werden in der Eigenschaftendefinition verwendet, um Teile voneinander zu trennen. Das Komma wird oft verwendet, um Werte in Aufzählungen oder Parameter in Mathematik ähnlichen Funktionen zu trennen; der Schrägstrich trennt oft Teile eines Wertes, die semantisch unterscheiden, jedoch eine gemeinsame Syntax haben. Normalerweise wird der Schrägstrich manchmal in Kurzform Eigenschaften verwendet, um Komponenten von einander zu trennen, die vom gleichen Typ sind, aber zu verschiedenen Eigenschaften gehören.

+ +

Beide Symbole erscheinen buchstäblich in einer Wertdefinition.

+ +

Datentypen

+ +

Elementare Datentypen

+ +

Bestimmte Daten werden überall in CSS verwendet und werden einmalig für alle Werte in der Spezifikation definiert. Die sogenannten elementaren Datentypen werden durch ihren von den Symbolen '<' und '>' umschlossenen Namen gekennzeichnet: {{ cssxref("<angle>") }}, {{cssxref("<string>")}}, …

+ +

Nichtterminale Datentypen

+ +

Weniger häufige Datentypen, genannt nichtterminale Datentypen, werden ebenfalls von '<' und '>' umschlossen.

+ +

Es gibt zwei Arten von nichtterminalen Datentypen:

+ +
    +
  • Datentypen, die den Namen einer Eigenschaft teilen, eingeschlossen von Anführungszeichen. In diesem Fall teilt der Datentyp die gleiche Menge an Werten wie die Eigenschaft. Sie werden oft in der Definition von Kurzform Eigenschaften verwendet.
    • +
  • Datentypen, die den Namen einer Eigenschaft nicht teilen. Diese Datentypen ähneln den elementaren Datentypen. Sie unterscheiden sich lediglich in der Stelle ihrer Definition von den elementaren Datentypen: In diesem Fall ist die Definition normalerweise sehr nahe bei der Definition der Eigenschaft, die sie benutzt.
    • +
+ +

Komponentenwert Kombinatoren

+ +

Eckige Klammern

+ +

Eckige Klammern schließen mehrere Entitäten, Kombinatoren und Multiplikatoren ein und transformieren diese anschließend als eine einzige Komponente. Sie werden benutzt, um Komponenten zu gruppieren und so die Rangordnungsregeln zu umgehen.

+ +
bold [ thin && <length> ]
+ +

Dieses Beispiel passt auf die folgenden Werte:

+ +
    +
  • bold thin 2vh
    • +
  • bold 0 thin
    • +
  • bold thin 3.5em
    • +
+ +

Aber nicht:

+ +
    +
  • thin bold 3em; da bold neben die durch die Klammern definierte Komponente gestellt ist, muss sie davor erscheinen.
    • +
+ +

Nebeneinanderstellung

+ +

Wenn mehrere Schlüsselwörter, Literale oder Datentypen aufgereiht werden und nur durch ein oder mehrere Leerzeichen getrennt werden, nennt man dies Nebeneinanderstellung. Alle nebeneinander gestellten Komponenten sind zwingend und müssen in der exakten Reihenfolge angegeben werden.

+ +
bold <length> , thin
+
+ +

Dieses Beispiel passt auf die folgenden Werte:

+ +
    +
  • bold 1em, thin
    • +
  • bold 0, thin
    • +
  • bold 2.5cm, thin
    • +
  • bold 3vh, thin
    • +
+ +

Aber nicht:

+ +
    +
  • thin 1em, bold, da die Entitäten in der beschriebenen Reihenfolge stehen müssen.
    • +
  • bold 1em thin, da die Entitäten zwingend angegeben werden müssen; das Komma und ein Literal müssen vorhanden sein.
    • +
  • bold 0.5ms, thin, da ms Werte keine {{cssxref("<length>")}} Werte sind.
    • +
+ +

Doppeltes Und-Zeichen

+ +

Wenn zwei oder mehrere Komponenten durch ein doppeltes Und-Zeichen, &&, getrennt sind, bedeutet das, dass alle diese Entitäten zwingend sind, jedoch in beliebiger Reihenfolge auftreten können.

+ +
bold && <length>
+
+ +

Dieses Beispiel passt auf die folgenden Werte:

+ +
    +
  • bold 1em
    • +
  • bold 0
    • +
  • 2.5cm bold
    • +
  • 3vh bold
    • +
+ +

Aber nicht:

+ +
    +
  • bold, da beide Komponenten im Wert vorkommen müssen.
    • +
  • bold 1em bold, da beide Komponenten nur einmal vorkommen dürfen.
    • +
+ +
Hinweis: Juxtaposition hat Vorrang gegenüber dem doppelten Und-Zeichen, was bedeutet, dass bold thin && <length> gleichbedeutend ist mit [ bold thin ] && <length>. Dies beschreibt bold thin <length> oder <length> bold thin, aber nicht bold <length> thin.
+ +

Doppelter Balken

+ +

Wenn zwei oder mehrere Komponenten durch einen doppelten Balken, ||, getrennt sind, bedeutet das, dass alle Entitäten optional sind: mindestens eine davon muss angegeben werden, und sie können in beliebiger Reihenfolge auftreten. Normalerweise wird dies verwendet, um die verschiedenen Werte einer Kurzform Eigenschaft zu definieren.

+ +
<'border-width'> || <'border-style'> || <'border-color'>
+
+ +

Dieses Beispiel passt auf die folgenden Werte:

+ +
    +
  • 1em solid blue
    • +
  • blue 1em
    • +
  • solid 1px yellow
    • +
+ +

Aber nicht:

+ +
    +
  • blue yellow, da eine Komponente nur einmal vorkommen darf.
    • +
  • bold, da es kein erlaubtes Schlüsselwort als Wert für irgendeine Entität ist.
    • +
+ +
Hinweis: Das doppelte Und-Zeichen hat Vorrang gegenüber dem doppelten Balken, was bedeutet, dass bold || thin && <length> gleichbedeutend ist mit bold || [ thin && <length> ]. Dies beschreibt bold, thin, <length>, bold thin, <length> bold, oder thin <length> bold, aber nicht bold <length> bold thin, da bold, falls nicht weggelassen, vor oder nach der gesamten thin && <length> Komponente platziert werden muss.
+ +

Einfacher Balken

+ +

Wenn zwei oder mehrere Entitäten durch einen einfachen Balken, |, getrennt werden, bedeutet das, dass alle Entitäten exklusive Optionen sind: genau eine dieser Optionen muss angegeben werden. Dies wird normalerweise benutzt, um eine Liste möglicher Schlüsselwörter zu trennen.

+ +
<percentage> | <length> | left | center | right | top | bottom
+ +

Dieses Beispiel passt auf die folgenden Werte:

+ +
    +
  • 3%
    • +
  • 0
    • +
  • 3.5em
    • +
  • left
    • +
  • center
    • +
  • right
    • +
  • top
    • +
  • bottom
    • +
+ +

Aber nicht:

+ +
    +
  • center 3%, da nur eine der Komponenten angegeben werden darf.
    • +
  • 3em 4.5em, da eine Komponente nur einmal vorkommen darf.
    • +
+ +
+

Hinweis: Der doppelte Balken hat Vorrang gegenüber dem einfachen Balken, was bedeutet, dass bold | thin || <length> gleichbedeutend ist mit bold | [ thin || <length> ]. Dies beschreibt bold, thin, <length>, <length> thin, oder thin <length>, aber nicht bold <length>, da nur eine Entität jeder Seite des | Kombinators vorkommen darf.

+
+ +

Komponentenwert Multiplikatoren

+ +

Ein Multiplikator ist ein Zeichen, das angibt, wie oft eine vorhergehende Entität wiederholt werden kann. Ohne einen Multiplikator muss eine Entität exakt einmal vorkommen.

+ +

{{Note("Multiplikatoren können nicht zu Kombinatoren hinzugefügt werden und haben auch keinen Vorrang vor diesen.")}}

+ +

Asterisk (*)

+ +

Der Asterisk Multiplikator gibt an, dass die Entität keinmal, einmal oder mehrmals vorkommen kann.

+ +
bold smaller*
+ +

Dieses Beispiel passt auf die folgende Werte:

+ +
    +
  • bold
    • +
  • bold smaller
    • +
  • bold smaller smaller
    • +
  • bold smaller smaller smaller and so on.
    • +
+ +

Aber nicht:

+ +
    +
  • smaller, da bold eine Nebeneinanderstellung ist und vor jeglichem smaller Schlüsselwort stehen muss.
    • +
+ +

Plus (+)

+ +

Der Plus Multiplikator gibt an, dass die Entität einmal oder mehrmals vorkommen kann.

+ +
bold smaller+
+ +

Dieses Beispiel passt auf die folgenden Werte:

+ +
    +
  • bold smaller
    • +
  • bold smaller smaller
    • +
  • bold smaller smaller smaller and so on.
    • +
+ +

Aber nicht:

+ +
    +
  • bold, da smaller mindestens einmal vorkommen muss.
    • +
  • smaller, da bold eine Nebeneinanderstellung ist und vor jeglichem smaller Schlüsselwort stehen muss.
    • +
+ +

Fragezeichen (?)

+ +

Der Fragezeichen Multiplikator gibt an, dass die Entität optional ist und keinmal oder einmal vorkommen kann.

+ +
bold smaller?
+ +

Dieses Beispiel passt auf die folgenden Werte:

+ +
    +
  • bold
    • +
  • bold smaller
    • +
+ +

Aber nicht:

+ +
    +
  • bold smaller smaller, da smaller höchstens einmal vorkommen darf.
    • +
  • smaller, da bold eine Nebeneinanderstellung ist und vor jeglichem smaller Schlüsselwort stehen muss.
    • +
+ +

Geschweifte Klammern ({ })

+ +

Der Geschweifte Klammern Multiplikator schließt zwei durch Komma getrennte Ganzzahlen A und B ein und gibt an, dass die Entität mindestens A-mal vorkommen muss und höchstens B-mal vorkommen darf.

+ +
bold smaller{1,3}
+ +

Dieses Beispiel passt auf die folgenden Werte:

+ +
    +
  • bold smaller
    • +
  • bold smaller smaller
    • +
  • bold smaller smaller smaller
    • +
+ +

Aber nicht:

+ +
    +
  • bold, da smaller mindestens einmal vorkommen muss.
    • +
  • bold smaller smaller smaller smaller, da smaller höchstens dreimal vorkommen darf.
    • +
  • smaller, da bold eine Nebeneinanderstellung ist und vor jeglichem smaller Schlüsselwort stehen muss.
    • +
+ +

Rautensymbol (#)

+ +

Der Rautensymbol Multiplizierer gibt an, dass die Entität einmal oder mehrmals wiederholt werden kann (wie beim Plus Multiplikator), jedoch jedes Vorkommen durch ein Komma (',') getrennt wird.

+ +
bold smaller#
+ +

Dieses Beispiel passt auf die folgenden Werte:

+ +
    +
  • bold smaller
    • +
  • bold smaller, smaller
    • +
  • bold smaller, smaller, smaller and so on.
    • +
+ +

Aber nicht:

+ +
    +
  • bold, da smaller mindestens einmal vorkommen muss.
    • +
  • bold smaller smaller smaller, da verschiedene Vorkommen von smaller durch Komma getrennt werden müssen.
    • +
  • smaller, da bold eine Nebeneinanderstellung ist und vor jeglichem smaller Schlüsselwort stehen muss.
    • +
+ +

Übersicht

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ZeichenNameBeschreibungBeispiel
Kombinatoren
 NebeneinanderstellungKomponenten sind zwingend und müssen in der angegebenen Reihenfolge vorkommensolid <length>
&&Doppeltes Und-ZeichenKomponenten sind zwingend, aber können in beliebiger Reihenfolge vorkommen<length> && <string>
||Doppelter BalkenMindestens eine der Komponenten muss angegeben werden und sie können in beliebiger Reihenfolge vorkommen<'border-image-outset'> || <'border-image-slice'>
|Einfacher BalkenGenau eine der Komponenten muss angegeben werdensmaller | small | normal | big | bigger
[ ]Eckige KlammernGruppierung von Komponenten, um Rangordnungsregeln zu umgehenbold [ thin && <length> ]
Multiplizierer
 Kein MultipliziererGenau einmalsolid
*Asterisk0 oder mehrmalsbold smaller*
+Pluszeichen1 oder mehrmalsbold smaller+
?Fragezeichen0 oder 1-mal (that is optional)bold smaller?
{A,B}Geschweifte KlammernMindestens A-mal, höchstens B-malbold smaller{1,3}
#Rautensymbol1 oder mehrmals, aber jedes Vorkommen getrennt durch Komma (',')bold smaller#
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{ SpecName('CSS3 Values', '#value-defs', 'Value definition syntax') }}{{ Spec2('CSS3 Values') }}Fügt den Rautensymbol Multiplizierer hinzu.
{{ SpecName('CSS2.1', 'about.html#value-defs', 'Value definition syntax') }}{{ Spec2('CSS2.1') }}Fügt den doppelten Und-Zeichen Kombinator hinzu.
{{SpecName('CSS1', '#notation-for-property-values', 'Value definition syntax') }}{{ Spec2('CSS1') }}Ursprüngliche Definition
+ +

Siehe auch

+ +
    +
  • {{ CSS_key_concepts() }}
    • +
diff --git a/files/de/web/css/vererbung/index.html b/files/de/web/css/vererbung/index.html deleted file mode 100644 index f5d4a097b2..0000000000 --- a/files/de/web/css/vererbung/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: Vererbung -slug: Web/CSS/Vererbung -tags: - - CSS - - Guide - - Web -translation_of: Web/CSS/inheritance ---- -

Übersicht

-

Die Übersicht jeder CSS Eigenschaft Definition gibt an, ob jene Eigenschaft standardmäßig vererbt ist ("Vererbt: Ja") oder nicht ("Vererbt: Nein"). Dies steuert, was passiert, falls kein Wert für eine Eigenschaft eines Elements angegeben wird.

-

Vererbte Eigenschaften

-

Falls kein Wert für eine vererbte Eigenschaft für ein Element angegeben wurde, erhält das Element den berechneten Wert dieser Eigenschaft des Elternelements. Nur das Wurzelelement des Dokuments erhält den in der Übersicht angegebenen Initialwert.

-

Ein typisches Beispiel für eine vererbte Eigenschaft ist die {{ Cssxref("color") }} Eigenschaft. Für die gegebene Stilregel:

-
p { color: green }
-

und den Markup:

-
<p>Dieser Absatz beinhaltet <em>hervorgehobenen Text</em>.</p>
-

werden die Wörter "hervorgehobenen Text" in grün erscheinen, da das em Element den Wert der {{ Cssxref("color") }} Eigenschaft vom p Element erbt. Es erhält nicht den Initialwert der Eigenschaft (welcher die Farbe des Wurzelelements ist, falls die Seite keine Farbe definiert).

-

Nicht vererbte Eigenschaften

-

Falls kein Wert für eine nicht vererbte Eigenschaft (in Mozilla Code manchmal auch rücksetzende Eigenschaft genannt) für ein Element angegeben wurde, erhält das Element den Initialwert dieser Eigenschaft (wie in der Übersicht der Eigenschaft angegeben).

-

Ein typisches Beispiel für eine nicht vererbte Eigenschaft ist die {{ Cssxref("border") }} Eigenschaft. Für die gegebene Stilregel:

-
 p { border: medium solid }
-

und den Markup:

-
  <p>Dieser Absatz beinhaltet <em>hervorgehobenen Text</em>.</p>
-

werden die Wörter "hervorgehobenen Text" keinen Rahmen haben (da der Initialwert von {{ Cssxref("border-style") }} none ist).

-

Hinweise

-

Das {{ Cssxref("inherit") }} Schlüsselwort erlaubt es Autoren, die Vererbung explizit anzugeben. Dies funktioniert sowohl für vererbte als auch nicht vererbte Eigenschaften.

-

Siehe auch

-
    -
  • CSS Referenz
    • -
  • {{ CSS_key_concepts() }}
    • -
  • {{ Cssxref("inherit") }}
    • -
diff --git a/files/de/web/css/wertdefinitionssyntax/index.html b/files/de/web/css/wertdefinitionssyntax/index.html deleted file mode 100644 index da49131901..0000000000 --- a/files/de/web/css/wertdefinitionssyntax/index.html +++ /dev/null @@ -1,405 +0,0 @@ ---- -title: Wertdefinitionssyntax -slug: Web/CSS/Wertdefinitionssyntax -tags: - - CSS - - Referenz -translation_of: Web/CSS/Value_definition_syntax ---- -

{{ CSSRef() }}

- -

Eine formale Grammatik, die CSS Wertdefinitionssyntax, wird für die Definition einer Menge von gültigen Werten für eine CSS Eigenschaft oder Funktion verwendet. Zusätzlich zu dieser Syntax kann die Menge an gültigen Werten durch semantische Beschränkungen (wie z. B. dass eine Zahl positiv sein muss) weiter eingegrenzt werden.

- -

Die Definitionssyntax beschreibt, welche Werte erlaubt sind und die Interaktionen zwischen ihnen. Eine Komponente kann ein Schlüsselwort sein, einige Zeichen, die als Literal interpretiert werden, oder ein Wert eines vorhandenen CSS Datentyps einer anderen CSS Eigenschaft.

- -

Komponentenwert Typen

- -

Schlüsselwörter

- -

Generische Schlüsselwörter

- -

Ein Schlüsselwort mit einer vordefinierten Bedeutung wird wortgetreu, ohne Anführungszeichen, dargestellt, zum Beispiel: auto, smaller oder ease-in.

- -

Die Spezialfälle inherit und initial

- -

Alle CSS Eigenschaften akzeptieren die Schlüsselwörter inherit und initial, die durchweg in CSS definiert werden. Sie werden nicht in der Wertdefinition angezeigt und werden implizit definiert.

- -

Literale

- -

In CSS können einige Zeichen getrennt auftreten, wie der Schrägstrich ('/') oder das Komma (','), und werden in der Eigenschaftendefinition verwendet, um Teile voneinander zu trennen. Das Komma wird oft verwendet, um Werte in Aufzählungen oder Parameter in Mathematik ähnlichen Funktionen zu trennen; der Schrägstrich trennt oft Teile eines Wertes, die semantisch unterscheiden, jedoch eine gemeinsame Syntax haben. Normalerweise wird der Schrägstrich manchmal in Kurzform Eigenschaften verwendet, um Komponenten von einander zu trennen, die vom gleichen Typ sind, aber zu verschiedenen Eigenschaften gehören.

- -

Beide Symbole erscheinen buchstäblich in einer Wertdefinition.

- -

Datentypen

- -

Elementare Datentypen

- -

Bestimmte Daten werden überall in CSS verwendet und werden einmalig für alle Werte in der Spezifikation definiert. Die sogenannten elementaren Datentypen werden durch ihren von den Symbolen '<' und '>' umschlossenen Namen gekennzeichnet: {{ cssxref("<angle>") }}, {{cssxref("<string>")}}, …

- -

Nichtterminale Datentypen

- -

Weniger häufige Datentypen, genannt nichtterminale Datentypen, werden ebenfalls von '<' und '>' umschlossen.

- -

Es gibt zwei Arten von nichtterminalen Datentypen:

- -
    -
  • Datentypen, die den Namen einer Eigenschaft teilen, eingeschlossen von Anführungszeichen. In diesem Fall teilt der Datentyp die gleiche Menge an Werten wie die Eigenschaft. Sie werden oft in der Definition von Kurzform Eigenschaften verwendet.
    • -
  • Datentypen, die den Namen einer Eigenschaft nicht teilen. Diese Datentypen ähneln den elementaren Datentypen. Sie unterscheiden sich lediglich in der Stelle ihrer Definition von den elementaren Datentypen: In diesem Fall ist die Definition normalerweise sehr nahe bei der Definition der Eigenschaft, die sie benutzt.
    • -
- -

Komponentenwert Kombinatoren

- -

Eckige Klammern

- -

Eckige Klammern schließen mehrere Entitäten, Kombinatoren und Multiplikatoren ein und transformieren diese anschließend als eine einzige Komponente. Sie werden benutzt, um Komponenten zu gruppieren und so die Rangordnungsregeln zu umgehen.

- -
bold [ thin && <length> ]
- -

Dieses Beispiel passt auf die folgenden Werte:

- -
    -
  • bold thin 2vh
    • -
  • bold 0 thin
    • -
  • bold thin 3.5em
    • -
- -

Aber nicht:

- -
    -
  • thin bold 3em; da bold neben die durch die Klammern definierte Komponente gestellt ist, muss sie davor erscheinen.
    • -
- -

Nebeneinanderstellung

- -

Wenn mehrere Schlüsselwörter, Literale oder Datentypen aufgereiht werden und nur durch ein oder mehrere Leerzeichen getrennt werden, nennt man dies Nebeneinanderstellung. Alle nebeneinander gestellten Komponenten sind zwingend und müssen in der exakten Reihenfolge angegeben werden.

- -
bold <length> , thin
-
- -

Dieses Beispiel passt auf die folgenden Werte:

- -
    -
  • bold 1em, thin
    • -
  • bold 0, thin
    • -
  • bold 2.5cm, thin
    • -
  • bold 3vh, thin
    • -
- -

Aber nicht:

- -
    -
  • thin 1em, bold, da die Entitäten in der beschriebenen Reihenfolge stehen müssen.
    • -
  • bold 1em thin, da die Entitäten zwingend angegeben werden müssen; das Komma und ein Literal müssen vorhanden sein.
    • -
  • bold 0.5ms, thin, da ms Werte keine {{cssxref("<length>")}} Werte sind.
    • -
- -

Doppeltes Und-Zeichen

- -

Wenn zwei oder mehrere Komponenten durch ein doppeltes Und-Zeichen, &&, getrennt sind, bedeutet das, dass alle diese Entitäten zwingend sind, jedoch in beliebiger Reihenfolge auftreten können.

- -
bold && <length>
-
- -

Dieses Beispiel passt auf die folgenden Werte:

- -
    -
  • bold 1em
    • -
  • bold 0
    • -
  • 2.5cm bold
    • -
  • 3vh bold
    • -
- -

Aber nicht:

- -
    -
  • bold, da beide Komponenten im Wert vorkommen müssen.
    • -
  • bold 1em bold, da beide Komponenten nur einmal vorkommen dürfen.
    • -
- -
Hinweis: Juxtaposition hat Vorrang gegenüber dem doppelten Und-Zeichen, was bedeutet, dass bold thin && <length> gleichbedeutend ist mit [ bold thin ] && <length>. Dies beschreibt bold thin <length> oder <length> bold thin, aber nicht bold <length> thin.
- -

Doppelter Balken

- -

Wenn zwei oder mehrere Komponenten durch einen doppelten Balken, ||, getrennt sind, bedeutet das, dass alle Entitäten optional sind: mindestens eine davon muss angegeben werden, und sie können in beliebiger Reihenfolge auftreten. Normalerweise wird dies verwendet, um die verschiedenen Werte einer Kurzform Eigenschaft zu definieren.

- -
<'border-width'> || <'border-style'> || <'border-color'>
-
- -

Dieses Beispiel passt auf die folgenden Werte:

- -
    -
  • 1em solid blue
    • -
  • blue 1em
    • -
  • solid 1px yellow
    • -
- -

Aber nicht:

- -
    -
  • blue yellow, da eine Komponente nur einmal vorkommen darf.
    • -
  • bold, da es kein erlaubtes Schlüsselwort als Wert für irgendeine Entität ist.
    • -
- -
Hinweis: Das doppelte Und-Zeichen hat Vorrang gegenüber dem doppelten Balken, was bedeutet, dass bold || thin && <length> gleichbedeutend ist mit bold || [ thin && <length> ]. Dies beschreibt bold, thin, <length>, bold thin, <length> bold, oder thin <length> bold, aber nicht bold <length> bold thin, da bold, falls nicht weggelassen, vor oder nach der gesamten thin && <length> Komponente platziert werden muss.
- -

Einfacher Balken

- -

Wenn zwei oder mehrere Entitäten durch einen einfachen Balken, |, getrennt werden, bedeutet das, dass alle Entitäten exklusive Optionen sind: genau eine dieser Optionen muss angegeben werden. Dies wird normalerweise benutzt, um eine Liste möglicher Schlüsselwörter zu trennen.

- -
<percentage> | <length> | left | center | right | top | bottom
- -

Dieses Beispiel passt auf die folgenden Werte:

- -
    -
  • 3%
    • -
  • 0
    • -
  • 3.5em
    • -
  • left
    • -
  • center
    • -
  • right
    • -
  • top
    • -
  • bottom
    • -
- -

Aber nicht:

- -
    -
  • center 3%, da nur eine der Komponenten angegeben werden darf.
    • -
  • 3em 4.5em, da eine Komponente nur einmal vorkommen darf.
    • -
- -
-

Hinweis: Der doppelte Balken hat Vorrang gegenüber dem einfachen Balken, was bedeutet, dass bold | thin || <length> gleichbedeutend ist mit bold | [ thin || <length> ]. Dies beschreibt bold, thin, <length>, <length> thin, oder thin <length>, aber nicht bold <length>, da nur eine Entität jeder Seite des | Kombinators vorkommen darf.

-
- -

Komponentenwert Multiplikatoren

- -

Ein Multiplikator ist ein Zeichen, das angibt, wie oft eine vorhergehende Entität wiederholt werden kann. Ohne einen Multiplikator muss eine Entität exakt einmal vorkommen.

- -

{{Note("Multiplikatoren können nicht zu Kombinatoren hinzugefügt werden und haben auch keinen Vorrang vor diesen.")}}

- -

Asterisk (*)

- -

Der Asterisk Multiplikator gibt an, dass die Entität keinmal, einmal oder mehrmals vorkommen kann.

- -
bold smaller*
- -

Dieses Beispiel passt auf die folgende Werte:

- -
    -
  • bold
    • -
  • bold smaller
    • -
  • bold smaller smaller
    • -
  • bold smaller smaller smaller and so on.
    • -
- -

Aber nicht:

- -
    -
  • smaller, da bold eine Nebeneinanderstellung ist und vor jeglichem smaller Schlüsselwort stehen muss.
    • -
- -

Plus (+)

- -

Der Plus Multiplikator gibt an, dass die Entität einmal oder mehrmals vorkommen kann.

- -
bold smaller+
- -

Dieses Beispiel passt auf die folgenden Werte:

- -
    -
  • bold smaller
    • -
  • bold smaller smaller
    • -
  • bold smaller smaller smaller and so on.
    • -
- -

Aber nicht:

- -
    -
  • bold, da smaller mindestens einmal vorkommen muss.
    • -
  • smaller, da bold eine Nebeneinanderstellung ist und vor jeglichem smaller Schlüsselwort stehen muss.
    • -
- -

Fragezeichen (?)

- -

Der Fragezeichen Multiplikator gibt an, dass die Entität optional ist und keinmal oder einmal vorkommen kann.

- -
bold smaller?
- -

Dieses Beispiel passt auf die folgenden Werte:

- -
    -
  • bold
    • -
  • bold smaller
    • -
- -

Aber nicht:

- -
    -
  • bold smaller smaller, da smaller höchstens einmal vorkommen darf.
    • -
  • smaller, da bold eine Nebeneinanderstellung ist und vor jeglichem smaller Schlüsselwort stehen muss.
    • -
- -

Geschweifte Klammern ({ })

- -

Der Geschweifte Klammern Multiplikator schließt zwei durch Komma getrennte Ganzzahlen A und B ein und gibt an, dass die Entität mindestens A-mal vorkommen muss und höchstens B-mal vorkommen darf.

- -
bold smaller{1,3}
- -

Dieses Beispiel passt auf die folgenden Werte:

- -
    -
  • bold smaller
    • -
  • bold smaller smaller
    • -
  • bold smaller smaller smaller
    • -
- -

Aber nicht:

- -
    -
  • bold, da smaller mindestens einmal vorkommen muss.
    • -
  • bold smaller smaller smaller smaller, da smaller höchstens dreimal vorkommen darf.
    • -
  • smaller, da bold eine Nebeneinanderstellung ist und vor jeglichem smaller Schlüsselwort stehen muss.
    • -
- -

Rautensymbol (#)

- -

Der Rautensymbol Multiplizierer gibt an, dass die Entität einmal oder mehrmals wiederholt werden kann (wie beim Plus Multiplikator), jedoch jedes Vorkommen durch ein Komma (',') getrennt wird.

- -
bold smaller#
- -

Dieses Beispiel passt auf die folgenden Werte:

- -
    -
  • bold smaller
    • -
  • bold smaller, smaller
    • -
  • bold smaller, smaller, smaller and so on.
    • -
- -

Aber nicht:

- -
    -
  • bold, da smaller mindestens einmal vorkommen muss.
    • -
  • bold smaller smaller smaller, da verschiedene Vorkommen von smaller durch Komma getrennt werden müssen.
    • -
  • smaller, da bold eine Nebeneinanderstellung ist und vor jeglichem smaller Schlüsselwort stehen muss.
    • -
- -

Übersicht

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ZeichenNameBeschreibungBeispiel
Kombinatoren
 NebeneinanderstellungKomponenten sind zwingend und müssen in der angegebenen Reihenfolge vorkommensolid <length>
&&Doppeltes Und-ZeichenKomponenten sind zwingend, aber können in beliebiger Reihenfolge vorkommen<length> && <string>
||Doppelter BalkenMindestens eine der Komponenten muss angegeben werden und sie können in beliebiger Reihenfolge vorkommen<'border-image-outset'> || <'border-image-slice'>
|Einfacher BalkenGenau eine der Komponenten muss angegeben werdensmaller | small | normal | big | bigger
[ ]Eckige KlammernGruppierung von Komponenten, um Rangordnungsregeln zu umgehenbold [ thin && <length> ]
Multiplizierer
 Kein MultipliziererGenau einmalsolid
*Asterisk0 oder mehrmalsbold smaller*
+Pluszeichen1 oder mehrmalsbold smaller+
?Fragezeichen0 oder 1-mal (that is optional)bold smaller?
{A,B}Geschweifte KlammernMindestens A-mal, höchstens B-malbold smaller{1,3}
#Rautensymbol1 oder mehrmals, aber jedes Vorkommen getrennt durch Komma (',')bold smaller#
- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{ SpecName('CSS3 Values', '#value-defs', 'Value definition syntax') }}{{ Spec2('CSS3 Values') }}Fügt den Rautensymbol Multiplizierer hinzu.
{{ SpecName('CSS2.1', 'about.html#value-defs', 'Value definition syntax') }}{{ Spec2('CSS2.1') }}Fügt den doppelten Und-Zeichen Kombinator hinzu.
{{SpecName('CSS1', '#notation-for-property-values', 'Value definition syntax') }}{{ Spec2('CSS1') }}Ursprüngliche Definition
- -

Siehe auch

- -
    -
  • {{ CSS_key_concepts() }}
    • -
diff --git a/files/de/web/css/word-wrap/index.html b/files/de/web/css/word-wrap/index.html deleted file mode 100644 index fd803452d4..0000000000 --- a/files/de/web/css/word-wrap/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: word-wrap -slug: Web/CSS/word-wrap -tags: - - CSS - - CSS Eigenschaft - - NeedsLiveSample - - Referenz -translation_of: Web/CSS/overflow-wrap ---- -
{{CSSRef}}
- -

Übersicht

- -

Die word-wrap Eigenschaft wird verwendet, um anzugeben ob der Webbrowser Zeilenumbrüche innerhalb von Wörtern machen darf. Dies ist nötig um einem Overflow vorzubeugen, wenn ein sonst nicht trennbarer Text zu lang für die beinhaltende Box wäre.

- -
Hinweis: Die ursprünglich (unprefixed) proprietäre Erweiterung word-wrap von Microsoft wurde im aktuellen Entwurf der CSS3 Text Spezifikation in {{cssxref("overflow-wrap")}} umbenannt. word-wrap wird jetzt als "alternativer Name" für overflow-wrap angesehen. Stabile Builds von Google Chrome und Opera unterstützen die neue Syntax.
- -

{{cssinfo}}

- -

Syntax

- -
/* Keyword values */
-word-wrap: normal;
-word-wrap: break-word;
-
-/* Global values */
-word-wrap: inherit;
-word-wrap: initial;
-word-wrap: unset;
-
- -

Werte

- -
-
normal
-
Zeilen dürfen nur bei normal Trennstellen von Wörtern umbrechen.
-
break-word
-
Normalerweise nicht trennbare Wörter dürfen an beliebigen Stellen getrennt werden, wenn es sonst keine anwendbaren Trennstellen in der Zeile gibt.
-
- -

Formale Syntax

- -
{{csssyntax}}
- -

Beispiele

- -
p { width: 13em; background: gold; }
- -

FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)

- -
p { width: 13em; background: gold; word-wrap: break-word; }
- -

FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)

- -

Spezifikationen

- - - - - - - - - - - - - - - - -
SpezifikationStatusBemerkung
{{ SpecName('CSS3 Text', '#propdef-word-wrap', 'word-wrap') }}{{ Spec2('CSS3 Text') }}Initiale Definition
- -

Webbrowserkompatibilität

- -{{Compat("css.properties.overflow-wrap")}} - -

Siehe auch

- -
    -
  • {{cssxref("word-break")}}
    • -
diff --git a/files/de/web/events/change/index.html b/files/de/web/events/change/index.html deleted file mode 100644 index 8836b6bc67..0000000000 --- a/files/de/web/events/change/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: change -slug: Web/Events/change -translation_of: Web/API/HTMLElement/change_event ---- -

Das change Event wird von {{HTMLElement("input")}}, {{HTMLElement("select")}}, und {{HTMLElement("textarea")}} Elementen ausgelöst, wenn der Benutzer den Wert des Elements verändert. Im Gegensatz zum {{event("input")}} Event wird das change Event nicht bei jeder Änderung der value Eigenschaft ausgelöst.

- -

General info

- -
-
Specification
-
HTML5
-
Interface
-
{{domxref("Event")}}
-
Bubbles
-
Yes
-
Cancelable
-
No
-
Target
-
Element
-
Default Action
-
undefined
-
- -

Eigenschaften

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
- -

Beschreibung

- -

Das change Event wird abhängig vom Form-Element, welches verändert wird, und der Art der Benutzerinteraktion mit dem Element in verschiedenen Situationen ausgelöst:

- -
    -
  • Wenn das Element aktiviert ist (durch einen KIlick oder Verwendung der Tastatur) bei <input type="radio"> und <input type="checkbox">;
    • -
  • Wenn der Benutzer den Veränderung explizit bestätigt (z.B.: beim Auswählen eines Wertes eines {{HTMLElement("select")}}'s Dropdown mit einem Mausklick, beim Auswählen eine Datums bei einem Date Picker für <input type="date">, beim Auswählen einer Datei im File Picker für <input type="file">, etc.);
    • -
  • Wenn das Element den Fokus verliert, nachdem sein Wert verändert aber noch nicht bestätigt wurde (z.B.: nach dem Editieren des Wert eines {{HTMLElement("textarea")}} oder <input type="text">).
    • -
- -

Verschiedene Webbbrowser unterscheiden sich darin, ob das change Event bei bestimmten Interaktionen ausgelöst werden soll oder nicht. Tastaturnavigation in {{HTMLElement("select")}} Elementen zum Beispiel lösen das change event in Gecko nie aus bis der Benutzer die Enter-Taste drückt oder den Fokus vom <select> (see {{bug("126379")}}) Element nimmt.

- -

Die HTML Spezifikation listet die <input> Typen, welche das change Event auslösen können.

- -

Beispiele

- -

Ein unvollständiges Beispiel auf jsfiddle: http://jsfiddle.net/nfakc/5/, welches möglicherweise nich in allen Webbrowsern funktioniert.

- -

Beispiel: Change Event auf einem select

- -

Der folgende Code behandelt das change Event eines select durch den Aufruf der changeEventHandler Funktion im onchange Attribut. Die Funktion liest den Wert des Elements, das das Event auslöste, und gibt ihn in einem Alert aus.

- -
<html>
-  <head>
-    <title>Example: Change event on a select</title>
-    <script type="text/javascript">
-      function changeEventHandler(event) {
-        alert('You like ' + event.target.value + ' ice cream.');
-      }
-    </script>
-    </head>
-    <body>
-        <label>Choose an ice cream flavor: </label>
-        <select size="1" onchange="changeEventHandler(event);">
-            <option>chocolate</option>
-            <option>strawberry</option>
-            <option>vanilla</option>
-        </select>
-    </body>
-</html>
-
- -

Siehe auch

- -

{{domxref("NetworkInformation.connection")}} löst das change Event  aus, wenn sich die Informationen zur Verbindung verändern.

- -

Webbrowserkompatibilität

- -

{{ CompatibilityTable() }}

- -

Laut QuirksMode sind Chrome und Firefox manchmal kompatibel. Aber IE9 und frühere Versionen von IE10 haben nur eine unvollständige Unterstützung.

diff --git a/files/de/web/events/domcontentloaded/index.html b/files/de/web/events/domcontentloaded/index.html deleted file mode 100644 index d6841f774a..0000000000 --- a/files/de/web/events/domcontentloaded/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -title: DOMContentLoaded -slug: Web/Events/DOMContentLoaded -tags: - - Referenz - - Web - - events -translation_of: Web/API/Window/DOMContentLoaded_event ---- -

Das DOMContentLoaded-Event wird ausgelöst, wenn das initiale HTML-Dokument vollständig geladen und geparst ist. Es wird dabei nicht auf Stylesheets, Bilder und Frames gewartet. Das load-Event sollte im Gegensatz dazu nur benutzt werden um eine komplett geladene Seite zu erkennen. Es ist ein weit verbreiteter Fehler das load-Event zu benutzen, obwohl DOMContentLoaded wesentlich besser geeignet wäre.

- -

{{Note("Synchrones JavaScript pausiert das Parsen des DOM.")}}

- -

{{Note("Es gibt viele Bibliotheken, die Methoden bereitstellen, um bei verschiedenen Browsern zu erkennen, ob das DOM bereit ist.")}}

- -

Performanz

- -

Wenn DOM so schnell wie möglich geladen werden soll, nachdem der Benutzer die Seite angefragt hat, sollte zum einen das JavaScript asynchron ausgeführt und das Laden der Stylesheets optimiert werden, was bei zu häufigem Einsatz den Aufbau der Seite durch das parallele Laden verlangsamen kann.

- -

Allgemeine Informationen

- -
-
Specification
-
HTML5
-
Interface
-
Event
-
Bubbles
-
Ja
-
Abbrechbar
-
Ja (Auch wenn es als ein einfaches Event spezifiziert ist, das nicht abgebrochen werden kann)
-
Ziel
-
Dokument
-
Standardaktion
-
Keine
-
- -

Eigenschaften

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}Das Zielelement des Events (das oberste Ziel im DOM Baum).
type {{readonlyInline}}{{domxref("DOMString")}}Der Typ des Events.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Gibt an, ob das Event weiter nach oben wandert (bubble).
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Gibt and, ob das Event abbrechbar ist.
- -

Beispiel

- -
<script>
-  document.addEventListener("DOMContentLoaded", function(event) {
-    console.log("DOM fully loaded and parsed");
-  });
-</script>
-
- -
<script>
-  document.addEventListener("DOMContentLoaded", function(event) {
-    console.log("DOM fully loaded and parsed");
-  });
-
-for(var i=0; i<1000000000; i++)
-{} // Dieses synchrone Script wird das Parsen des DOMs verzögern. Dadurch wird das DOMContentLoaded-Event erst später ausgelöst.
-</script>
-
- -

Browserkompatibilität

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0[1]{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}[1]9.0[2]9.03.1[1]
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}[1]{{CompatVersionUnknown}}{{CompatGeckoMobile("1")}}[1]{{CompatUnknown}}[2]{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]
-
- -

[1] Bubbling für dieses Event benötigt mindestens Gecko 1.9.2, Chrome 6, and Safari 4.

- -

[2] Internet Explorer 8 unterstützt das  readystatechange-Event, welches genutzt werden kann um festzustellen, wenn das DOM fertig ist. In früheren Versionen des Internet Explorers kann dieser Status festgestellt werden, indem wiederholt versucht wird, document.documentElement.doScroll("left"); auszuführen. Dieser Befehl gibt einen Error zurück, bis das DOM bereit ist.

- -

Verwandte Events

- -
    -
  • {{event("DOMContentLoaded")}}
    • -
  • {{event("readystatechange")}}
    • -
  • {{event("load")}}
    • -
  • {{event("beforeunload")}}
    • -
  • {{event("unload")}}
    • -
diff --git a/files/de/web/events/load/index.html b/files/de/web/events/load/index.html deleted file mode 100644 index 066a2bea25..0000000000 --- a/files/de/web/events/load/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: load -slug: Web/Events/load -translation_of: Web/API/Window/load_event ---- -

Das load Ereignis wird ausgelöst, sobald eine Ressource und die von ihr abhängigen Ressourcen das Laden beendet haben.

- -

General info

- -
-
Spezifikation
-
DOM L3
-
Schnittstelle
-
UIEvent
-
bubbles
-
Nein
-
cancelable
-
Nein
-
Ziel
-
Window,Document,Element
-
Default Action
-
None.
-
- -

Properties

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe event target (the topmost target in the DOM tree).
type {{readonlyInline}}DOMStringThe type of event.
bubbles {{readonlyInline}}BooleanWhether the event normally bubbles or not.
cancelable {{readonlyInline}}BooleanWhether the event is cancellable or not.
view {{readonlyInline}}WindowProxydocument.defaultView (window of the document)
detail {{readonlyInline}}long (float)0.
- -

Example

- -
<script>
-  window.addEventListener("load", function(event) {
-    console.log("Alle Ressourcen haben das Laden beendet!");
-  });
-</script>
-
- -

 

- - - -
    -
  • {{event("DOMContentLoaded")}}
    • -
  • {{event("readystatechange")}}
    • -
  • {{event("load")}}
    • -
  • {{event("beforeunload")}}
    • -
  • {{event("unload")}}
    • -
diff --git a/files/de/web/events/readystatechange/index.html b/files/de/web/events/readystatechange/index.html deleted file mode 100644 index 9fba4b5dee..0000000000 --- a/files/de/web/events/readystatechange/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: readystatechange -slug: Web/Events/readystatechange -tags: - - Referenz - - XMLHttpRequest -translation_of: Web/API/Document/readystatechange_event ---- -

{{ApiRef}}

- -

Das Ereignis readystatechange wird ausgelöst, wenn sich die Eigenschaft readyState eines Dokumentes verändert hat.

- -

Allgemeine Information

- -
-
Spezifikation
-
HTML5
-
Schnittstelle
-
Event
-
Aufsteigend
-
Nein
-
Abbrechbar
-
Nein
-
Ziel
-
Dokument
-
Standardaktion
-
Keine
-
- -

Eigenschaften

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
- -

Beispiel

- -
// als Alternative zu DOMContentLoaded
-document.onreadystatechange = function () {
-    if (document.readyState == "interactive") {
-        initApplication();
-    }
-}
-
- -

Browser-Kompatibilität

- -

Dieses Ereignis wird vom Internet Explorer schon sehr lange unterstützt und kann daher als Alternative zum DOMContentLoaded-Ereignis genutzt werden (vgl. Anmerkung [2] im Abschnitt Browserkompatibilität).

- -

Verwandte Ereignisse

- -
    -
  • {{event("DOMContentLoaded")}}
    • -
  • {{event("readystatechange")}}
    • -
  • {{event("load")}}
    • -
  • {{event("beforeunload")}}
    • -
  • {{event("unload")}}
    • -
diff --git a/files/de/web/guide/ajax/erste_schritte/index.html b/files/de/web/guide/ajax/erste_schritte/index.html deleted file mode 100644 index 011696a2cd..0000000000 --- a/files/de/web/guide/ajax/erste_schritte/index.html +++ /dev/null @@ -1,338 +0,0 @@ ---- -title: Erste Schritte -slug: Web/Guide/AJAX/Erste_Schritte -tags: - - AJAX - - API - - JavaScript - - XMLHttRequest -translation_of: Web/Guide/AJAX/Getting_Started ---- -
{{DefaultAPISidebar("XMLHttpRequest")}}
- -

Dieser Artikel führt Sie durch die AJAX-Grundlagen und gibt einige einfache praktische Beispiele für den Einstieg.

- -

Was ist AJAX?

- -

AJAX steht für Asynchronous JavaScript And XML. Kurz gesagt ist es die Verwendung des XMLHttpRequest-Objekts zur Kommunikation mit Servern. Es kann Informationen in verschiedenen Formaten senden und empfangen, darunter JSON, XML, HTML und Textdateien. Das ansprechendste Merkmal von AJAX ist seine "asynchrone" Natur, d.h. es kann mit dem Server kommunizieren, Daten austauschen und die Seite aktualisieren, ohne die Seite aktualisieren zu müssen.

- -

Die zwei Hauptmerkmale von AJAX ermöglichen Folgendes::

- -
    -
  • Anfragen an den Server stellen, ohne die Seite neu zu laden
    • -
  • Daten vom Server empfangen und mit ihnen arbeiten
    • -
- -

Schritt 1 – Wie man eine HTTP-Anfrage stellt

- -

Um mit JavaScript eine HTTP-Anfrage an den Server zu stellen, wird eine Instanz eines Objekts mit der notwendigen Funktionalität benötigt. An dieser Stelle kommt XMLHttpRequest ins Spiel. Sein Vorgänger entstand im Internet Explorer als ein ActiveX-Objekt namens XMLHTTP. Dann folgten Mozilla, Safari und andere Browser, die ein XMLHttpRequest-Objekt implementierten, das die Methoden und Eigenschaften des ursprünglichen ActiveX-Objekts von Microsoft unterstützte. In der Zwischenzeit implementierte Microsoft auch XMLHttpRequest.

- -
// Old compatibility code, no longer needed.
-if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ ...
-    httpRequest = new XMLHttpRequest();
-} else if (window.ActiveXObject) { // IE 6 and older
-    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
-}
-
- -
Hinweis: Zur Veranschaulichung ist die obige Abbildung eine etwas vereinfachte Version des Codes, der für die Erstellung einer XMLHttp-Instanz zu verwenden ist. Ein realistischeres Beispiel finden Sie in Schritt 3 dieses Artikels.
- -

Nachdem die Anfrage abgesandt wurde, kommt eine Antwort zurück. Jetzt muss dem XMLHttp-Anfrageobjekt mitteilt werden, welche JavaScript-Funktion die Antwort behandeln wird, indem die onreadystatechange -Eigenschaft des Objekts gesetzt und nach der Funktion benannt wird, die aufgerufen werden soll, wenn sich der Status der Anfrage ändert, etwa so:

- -
httpRequest.onreadystatechange = nameOfTheFunction;
- -

Beachten Sie, dass hinter dem Funktionsnamen keine Klammern oder Parameter stehen, da Sie der Funktion eine Referenz zuweisen, anstatt sie tatsächlich aufzurufen. Anstatt einen Funktionsnamen anzugeben, können Sie alternativ auch die JavaScript-Technik verwenden, Funktionen on the fly zu definieren (so genannte "anonyme Funktionen"), um die Aktionen zu definieren, die die Antwort verarbeiten, wie z.B:

- -
httpRequest.onreadystatechange = function(){
-    // Process the server response here.
-};
-
- -

Nachdem Sie erklärt haben, was passiert, wenn Sie die Antwort erhalten, müssen Sie als Nächstes die Anfrage tatsächlich stellen, indem Sie die open()- und send()-Methoden des HTTP-Anfrageobjekts aufrufen, und zwar wie folgt::

- -
httpRequest.open('GET', 'http://www.example.org/some.file', true);
-httpRequest.send();
-
- -
    -
  • -

    Der erste Parameter des Aufrufs von open() ist die HTTP-Anforderungsmethode - GET, POST, HEAD oder eine andere von Ihrem Server unterstützte Methode. Behalten Sie die Methode in Großbuchstaben gemäß dem HTTP-Standard bei, da sonst einige Browser (wie Firefox) die Anfrage möglicherweise nicht verarbeiten. Weitere Informationen zu den möglichen HTTP-Anforderungsmethoden finden Sie in den W3C specs.

    -
    • -
  • Der zweite Parameter ist die URL, an die Sie die Anfrage senden. Als Sicherheitsfunktion können Sie standardmäßig keine URLs auf 3rd-Party-Domains aufrufen. Stellen Sie sicher, dass Sie den genauen Domainnamen auf allen Ihren Seiten verwenden, sonst erhalten Sie beim Aufruf von open() einen "permission denied"-Fehler. Ein häufiger Fallstrick ist der Zugriff auf Ihre Website über domain.tld, aber der Versuch, Seiten mit www.domain.tld aufzurufen. Wenn Sie wirklich eine Anfrage an eine andere Domain senden müssen, siehe HTTP access control (CORS).
    • -
  • Der optionale dritte Parameter legt fest, ob die Anforderung asynchron ist. Wenn dies der true ist (Standardeinstellung), wird die JavaScript-Ausführung fortgesetzt, und der Benutzer kann mit der Seite interagieren, solange die Serverantwort noch nicht eingetroffen ist. Dies ist das erste A in AJAX.
    • -
- -

Der Parameter der send()-Methode kann jede Form von Daten beinhalten, die Sie beim POST-ing der Anfrage an den Server senden möchten. Formulardaten sollten in einem Format gesendet werden, das der Server parsen kann, wie ein Abfrage-String:

- -
"name=value&anothername="+encodeURIComponent(myVar)+"&so=on"
- -

oder andere Formate wie multipart/form-data, JSON, XML, etc.

- -

Beachten Sie, dass Sie möglicherweise den MIME-Typ der Anforderung angeben müssen, wenn Sie Daten POST-en wollen. Verwenden Sie beispielsweise Folgendes, bevor Sie send() für Formulardaten aufrufen, die als Abfragezeichenfolge gesendet werden::

- -
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
-
- -

Schritt 2 - Behandlung der Server-Antwort

- -

Als Sie die Anfrage abgeschickt haben, haben Sie den Namen einer JavaScript-Funktion zur Behandlung der Antwort angegeben:

- -
httpRequest.onreadystatechange = nameOfTheFunction;
-
- -

Was soll diese Funktion tun? Zunächst muss die Funktion den Status der Anfrage überprüfen. Wenn der Status den Wert XMLHttpRequest.DONE (entsprechend 4) hat, bedeutet dies, dass die vollständige Serverantwort empfangen wurde und Sie mit der Verarbeitung fortfahren können.

- -
if (httpRequest.readyState === XMLHttpRequest.DONE) {
-    // Everything is good, the response was received.
-} else {
-    // Not ready yet.
-}
-
- -

Die vollständige Liste readyState -Werte ist unter XMLHTTPRequest.readyState dokumentiert und lautet wie folgt:

- -
    -
  • 0 (uninitialized) or (request not initialized)
    • -
  • 1 (loading) or (server connection established)
    • -
  • 2 (loaded) or (request received)
    • -
  • 3 (interactive) or (processing request)
    • -
  • 4 (complete) or (request finished and response is ready)
    • -
- -

Überprüfen Sie als Nächstes die HTTP response status codes der HTTP-Antwort. Die möglichen Codes sind beim W3C aufgelistet. Im folgenden Beispiel unterscheiden wir zwischen einem erfolgreichen und einem nicht erfolgreichen AJAX-Aufruf, indem wir nach einem 200 OK-Antwort-Code suchen.

- -
if (httpRequest.status === 200) {
-    // Perfect!
-} else {
-    // There was a problem with the request.
-    // For example, the response may have a 404 (Not Found)
-    // or 500 (Internal Server Error) response code.
-}
-
- -

Nachdem Sie den Status der Anfrage und den HTTP-Statuscode der Antwort überprüft haben, können Sie mit den vom Server gesendeten Daten tun, was Sie wollen. Sie haben zwei Möglichkeiten, auf diese Daten zuzugreifen:

- -
    -
  • httpRequest.responseText – gibt die Server-Antwort als eine Zeichenkette aus Text zurück
    • -
  • httpRequest.responseXML – gibt die Antwort als ein XMLDocument-Objekt zurück, das Sie mit JavaScript-DOM-Funktionen durchlaufen können
    • -
- -

Beachten Sie, dass die obigen Schritte nur gültig sind, wenn Sie eine asynchrone Anforderung verwendet haben (der dritte Parameter von open() war nicht spezifiziert oder auf true gesetzt). Wenn Sie eine synchrone Anforderung verwendet haben, brauchen Sie keine Funktion anzugeben, aber davon wird dringend abgeraten, da dies eine schlechte Benutzerführung zur Folge hat.

- -

Schritt  3 – Ein einfaches Beispiel

- -

Lassen Sie uns das alles mit einer einfachen HTTP-Anfrage zusammenfassen. Unser JavaScript wird ein HTML-Dokument, test.html, anfordern, das den Text "Ich bin ein Test" enthält. Dann alert() wir den Inhalt der Antwort. Beachten Sie, dass dieses Beispiel Vanilla JavaScript verwendet - es handelt sich nicht um jQuery. Außerdem sollten sich die HTML-, XML- und PHP-Dateien im selben Verzeichnis befinden.

- -
<button id="ajaxButton" type="button">Make a request</button>
-
-<script>
-(function() {
-  var httpRequest;
-  document.getElementById("ajaxButton").addEventListener('click', makeRequest);
-
-  function makeRequest() {
-    httpRequest = new XMLHttpRequest();
-
-    if (!httpRequest) {
-      alert('Giving up :( Cannot create an XMLHTTP instance');
-      return false;
-    }
-    httpRequest.onreadystatechange = alertContents;
-    httpRequest.open('GET', 'test.html');
-    httpRequest.send();
-  }
-
-  function alertContents() {
-    if (httpRequest.readyState === XMLHttpRequest.DONE) {
-      if (httpRequest.status === 200) {
-        alert(httpRequest.responseText);
-      } else {
-        alert('There was a problem with the request.');
-      }
-    }
-  }
-})();
-</script>
-
- -

In this example:

- -
    -
  • Der Benutzer klickt auf den "Make a request"- Button;
    • -
  • Der Ereignisbehandler ruft die makeRequest()-Funktion auf;
    • -
  • Die Anfrage wird gestellt und dann (onreadystatechange) zur Ausführung an alertContents() übergeben;
    • -
  • alertContents() prüft, ob die Antwort empfangen wurde und OK ist, dann alert() den Inhalt der test.html-Datei.
    • -
- -
Hinweis: Wenn Sie eine Anfrage an ein Stück Code senden, das XML statt einer statischen HTML-Datei zurückgibt, müssen Sie die Antwortheader so einstellen, dass sie im Internet Explorer funktionieren.. Wenn Sie den Header Content-Type Content-Type: application/xml nicht angeben, gibt IE nach der Zeile, in der Sie versucht haben, auf ein XML-Element zuzugreifen, einen JavaScript-Fehler " Object Expected " aus.
- -
Hinweis 2: Wenn Sie den Header Cache-Control: no-cache nicht setzen, wird der Browser die Antwort zwischenspeichern und die Anfrage nie erneut senden, was das Debugging erschwert. Sie können auch einen immer unterschiedlichen GET-Parameter hinzufügen, wie einen Zeitstempel oder eine Zufallszahl (siehe bypassing the cache)
- -
Hinweis 3: Wenn die httpRequest-Variable global verwendet wird, können sich konkurrierende Aufrufe von makeRequest() gegenseitig überschreiben und eine Wettlaufsituation auslösen. Wird der httpRequest lokal ain einer closure Umgebung mit einer AJAX-Function deklariert, so wird dies vermieden.
- -

Im Falle eines Kommunikationsfehlers (z. B. bei einem Serverausfall) wird beim Zugriff auf den Antwortstatus in der Methode onreadystatechange eine Ausnahmemeldung zurückgegeben. Um dieses Problem zu beheben, könnten Sie Ihre if...then-Anweisung in a try...catch packen:

- -
function alertContents() {
-  try {
-    if (httpRequest.readyState === XMLHttpRequest.DONE) {
-      if (httpRequest.status === 200) {
-        alert(httpRequest.responseText);
-      } else {
-        alert('There was a problem with the request.');
-      }
-    }
-  }
-  catch( e ) {
-    alert('Caught Exception: ' + e.description);
-  }
-}
-
- -

Schritt 4 – Arbeiten mit der XML-Antwort

- -

Im vorherigen Beispiel haben wir nach dem Empfang der Antwort auf die HTTP-Anforderung die Eigenschaft responseText des Anforderungsobjekts verwendet, die den Inhalt der Datei test.html enthielt. Lassen Sie uns nun die responseXML-Eigenschaft ausprobieren.

- -

Lassen Sie uns zunächst ein gültiges XML-Dokument erstellen, das wir später anfordern werden. Das Dokument (test.xml) enthält Folgendes:

- -
<?xml version="1.0" ?>
-<root>
-    I'm a test.
-</root>
-
- -

Im Skript brauchen wir nur die Anforderungszeile zu ändern:

- -
...
-onclick="makeRequest('test.xml')">
-...
-
- -

In alertContents() müssen wir die Zeile alert(httpRequest.responseText);ersetzen mit:

- -
var xmldoc = httpRequest.responseXML;
-var root_node = xmldoc.getElementsByTagName('root').item(0);
-alert(root_node.firstChild.data);
-
- -

Dieser Code nimmt das von responseXML übergebene XMLDocument-Objekt und verwendet DOM-Methoden, um auf einige der im XML-Dokument enthaltenen Daten zuzugreifen. Sie können here das test.xml and here das aktualisierte test script aufrufen.

- -

Schritt 5 – Arbeiten mit Daten

- -

Zum Schluss senden wir einige Daten an den Server und erhalten eine Antwort. Unser JavaScript wird diesmal eine dynamische Seite test.php anfordern, die die von uns gesendeten Daten entgegennimmt und einen "computed" string - "Hello, [user data]!" - den wir  alert()-en werden.

- -

Zuerst fügen wir unserem HTML ein Textfeld hinzu, damit der Benutzer seinen Namen eingeben kann:

- -
<label>Your name:
-  <input type="text" id="ajaxTextbox" />
-</label>
-<span id="ajaxButton" style="cursor: pointer; text-decoration: underline">
-  Make a request
-</span>
- -

Wir fügen auch eine Zeile zu unserem Event-Handler hinzu, um die Daten des Benutzers aus dem Textfeld zu holen und sie zusammen mit der URL unseres serverseitigen Skripts an die Funktion makeRequest() zu senden:

- -
  document.getElementById("ajaxButton").onclick = function() {
-      var userName = document.getElementById("ajaxTextbox").value;
-      makeRequest('test.php',userName);
-  };
-
- -

Wir müssen makeRequest() so modifizieren, dass es die Benutzerdaten akzeptiert und an den Server weiterleitet. Wir werden die Anfragemethode von GET auf POST ändern und unsere Daten als Parameter in den Aufruf von httpRequest.send() aufnehmen:

- -
  function makeRequest(url, userName) {
-
-    ...
-
-    httpRequest.onreadystatechange = alertContents;
-    httpRequest.open('POST', url);
-    httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
-    httpRequest.send('userName=' + encodeURIComponent(userName));
-  }
-
- -

Die Funktion alertContents() kann auf die gleiche Weise wie in Schritt 3 geschrieben werden, um unsere Zeichenfolge zu alert()-en, wenn das alles ist, was der Server zurückgibt.. Nehmen wir jedoch an, der Server wird sowohl die berechnete Zeichenkette als auch die ursprünglichen Benutzerdaten zurückgeben. Wenn also unser Benutzer "Jane" in das Textfeld eingibt, würde die Antwort des Servers wie folgt aussehen::

- -

{"userData":"Jane","computedString":"Hi, Jane!"}

- -

Um diese Daten mit alertContents() zu nutzen, können wir nicht einfach den responseText ausgeben, sondern wir müssen ihn parsen und die gewünschte Eigenschaft computedString alert()-en:

- -
function alertContents() {
-  if (httpRequest.readyState === XMLHttpRequest.DONE) {
-    if (httpRequest.status === 200) {
-      var response = JSON.parse(httpRequest.responseText);
-      alert(response.computedString);
-    } else {
-      alert('There was a problem with the request.');
-    }
-  }
-}
- -

Die test.php-Datei sollte folgendes enthalten:

- -
$name = (isset($_POST['userName'])) ? $_POST['userName'] : 'no name';
-$computedString = "Hi, " . $name . "!";
-$array = ['userName' => $name, 'computedString' => $computedString];
-echo json_encode($array);
- -

Weitere Informationen zu DOM-Methoden finden Sie unter Document Object Model (DOM).

- -

Einfaches zeitgesteuertes XHR-Beispiel

- -

Es folgt ein weiteres einfaches Beispiel - hier laden wir eine Textdatei über XHR, deren Struktur wie folgt angenommen wird:

- -
TIME: 312.05
-TIME: 312.07
-TIME: 312.10
-TIME: 312.12
-TIME: 312.14
-TIME: 312.15
- -

Sobald die Textdatei geladen ist, split()-en wir die Elemente an jedem Zeilenumbruchszeichen (\n - im Grunde genommen dort, wo jeder Zeilenumbruch in der Textdatei steht) in ein Array auf und geben dann die vollständige Liste der Zeitstempel und den letzten Zeitstempel auf der Seite aus.

- -

Dies wird alle 5 Sekunden wiederholt, unter Verwendung eines setInterval() Aufrufs. Die Idee wäre, dass eine Art serverseitiges Skript die Textdatei kontinuierlich mit neuen Zeitstempeln aktualisiert, und unser XHR-Code verwendet wird, um den neuesten Zeitstempel auf der Client-Seite zu melden.

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>XHR log time</title>
-    <style>
-
-    </style>
-  </head>
-  <body>
-    <p id="writeData" class="data">Off-Line</p>
-    <p id="lastStamp">No Data yet</p>
-
-    <script>
-
-    const fullData = document.getElementById('writeData');
-    const lastData = document.getElementById('lastStamp');
-
-    function fetchData() {
-      console.log('Fetching updated data.');
-      let xhr = new XMLHttpRequest();
-      xhr.open("GET", "time-log.txt", true);
-      xhr.onload = function() {
-        updateDisplay(xhr.response);
-      }
-      xhr.send();
-    }
-
-    function updateDisplay(text) {
-      fullData.textContent = text;
-
-      let timeArray = text.split('\n');
-
-      // included because some file systems always include a blank line at the end of text files.
-      if(timeArray[timeArray.length-1] === '') {
-        timeArray.pop();
-      }
-
-      lastData.textContent = timeArray[timeArray.length-1];
-    }
-
-    setInterval(fetchData, 5000);
-    </script>
-  </body>
-</html>
diff --git a/files/de/web/guide/ajax/getting_started/index.html b/files/de/web/guide/ajax/getting_started/index.html new file mode 100644 index 0000000000..011696a2cd --- /dev/null +++ b/files/de/web/guide/ajax/getting_started/index.html @@ -0,0 +1,338 @@ +--- +title: Erste Schritte +slug: Web/Guide/AJAX/Erste_Schritte +tags: + - AJAX + - API + - JavaScript + - XMLHttRequest +translation_of: Web/Guide/AJAX/Getting_Started +--- +
{{DefaultAPISidebar("XMLHttpRequest")}}
+ +

Dieser Artikel führt Sie durch die AJAX-Grundlagen und gibt einige einfache praktische Beispiele für den Einstieg.

+ +

Was ist AJAX?

+ +

AJAX steht für Asynchronous JavaScript And XML. Kurz gesagt ist es die Verwendung des XMLHttpRequest-Objekts zur Kommunikation mit Servern. Es kann Informationen in verschiedenen Formaten senden und empfangen, darunter JSON, XML, HTML und Textdateien. Das ansprechendste Merkmal von AJAX ist seine "asynchrone" Natur, d.h. es kann mit dem Server kommunizieren, Daten austauschen und die Seite aktualisieren, ohne die Seite aktualisieren zu müssen.

+ +

Die zwei Hauptmerkmale von AJAX ermöglichen Folgendes::

+ +
    +
  • Anfragen an den Server stellen, ohne die Seite neu zu laden
    • +
  • Daten vom Server empfangen und mit ihnen arbeiten
    • +
+ +

Schritt 1 – Wie man eine HTTP-Anfrage stellt

+ +

Um mit JavaScript eine HTTP-Anfrage an den Server zu stellen, wird eine Instanz eines Objekts mit der notwendigen Funktionalität benötigt. An dieser Stelle kommt XMLHttpRequest ins Spiel. Sein Vorgänger entstand im Internet Explorer als ein ActiveX-Objekt namens XMLHTTP. Dann folgten Mozilla, Safari und andere Browser, die ein XMLHttpRequest-Objekt implementierten, das die Methoden und Eigenschaften des ursprünglichen ActiveX-Objekts von Microsoft unterstützte. In der Zwischenzeit implementierte Microsoft auch XMLHttpRequest.

+ +
// Old compatibility code, no longer needed.
+if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ ...
+    httpRequest = new XMLHttpRequest();
+} else if (window.ActiveXObject) { // IE 6 and older
+    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
+}
+
+ +
Hinweis: Zur Veranschaulichung ist die obige Abbildung eine etwas vereinfachte Version des Codes, der für die Erstellung einer XMLHttp-Instanz zu verwenden ist. Ein realistischeres Beispiel finden Sie in Schritt 3 dieses Artikels.
+ +

Nachdem die Anfrage abgesandt wurde, kommt eine Antwort zurück. Jetzt muss dem XMLHttp-Anfrageobjekt mitteilt werden, welche JavaScript-Funktion die Antwort behandeln wird, indem die onreadystatechange -Eigenschaft des Objekts gesetzt und nach der Funktion benannt wird, die aufgerufen werden soll, wenn sich der Status der Anfrage ändert, etwa so:

+ +
httpRequest.onreadystatechange = nameOfTheFunction;
+ +

Beachten Sie, dass hinter dem Funktionsnamen keine Klammern oder Parameter stehen, da Sie der Funktion eine Referenz zuweisen, anstatt sie tatsächlich aufzurufen. Anstatt einen Funktionsnamen anzugeben, können Sie alternativ auch die JavaScript-Technik verwenden, Funktionen on the fly zu definieren (so genannte "anonyme Funktionen"), um die Aktionen zu definieren, die die Antwort verarbeiten, wie z.B:

+ +
httpRequest.onreadystatechange = function(){
+    // Process the server response here.
+};
+
+ +

Nachdem Sie erklärt haben, was passiert, wenn Sie die Antwort erhalten, müssen Sie als Nächstes die Anfrage tatsächlich stellen, indem Sie die open()- und send()-Methoden des HTTP-Anfrageobjekts aufrufen, und zwar wie folgt::

+ +
httpRequest.open('GET', 'http://www.example.org/some.file', true);
+httpRequest.send();
+
+ +
    +
  • +

    Der erste Parameter des Aufrufs von open() ist die HTTP-Anforderungsmethode - GET, POST, HEAD oder eine andere von Ihrem Server unterstützte Methode. Behalten Sie die Methode in Großbuchstaben gemäß dem HTTP-Standard bei, da sonst einige Browser (wie Firefox) die Anfrage möglicherweise nicht verarbeiten. Weitere Informationen zu den möglichen HTTP-Anforderungsmethoden finden Sie in den W3C specs.

    +
    • +
  • Der zweite Parameter ist die URL, an die Sie die Anfrage senden. Als Sicherheitsfunktion können Sie standardmäßig keine URLs auf 3rd-Party-Domains aufrufen. Stellen Sie sicher, dass Sie den genauen Domainnamen auf allen Ihren Seiten verwenden, sonst erhalten Sie beim Aufruf von open() einen "permission denied"-Fehler. Ein häufiger Fallstrick ist der Zugriff auf Ihre Website über domain.tld, aber der Versuch, Seiten mit www.domain.tld aufzurufen. Wenn Sie wirklich eine Anfrage an eine andere Domain senden müssen, siehe HTTP access control (CORS).
    • +
  • Der optionale dritte Parameter legt fest, ob die Anforderung asynchron ist. Wenn dies der true ist (Standardeinstellung), wird die JavaScript-Ausführung fortgesetzt, und der Benutzer kann mit der Seite interagieren, solange die Serverantwort noch nicht eingetroffen ist. Dies ist das erste A in AJAX.
    • +
+ +

Der Parameter der send()-Methode kann jede Form von Daten beinhalten, die Sie beim POST-ing der Anfrage an den Server senden möchten. Formulardaten sollten in einem Format gesendet werden, das der Server parsen kann, wie ein Abfrage-String:

+ +
"name=value&anothername="+encodeURIComponent(myVar)+"&so=on"
+ +

oder andere Formate wie multipart/form-data, JSON, XML, etc.

+ +

Beachten Sie, dass Sie möglicherweise den MIME-Typ der Anforderung angeben müssen, wenn Sie Daten POST-en wollen. Verwenden Sie beispielsweise Folgendes, bevor Sie send() für Formulardaten aufrufen, die als Abfragezeichenfolge gesendet werden::

+ +
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+
+ +

Schritt 2 - Behandlung der Server-Antwort

+ +

Als Sie die Anfrage abgeschickt haben, haben Sie den Namen einer JavaScript-Funktion zur Behandlung der Antwort angegeben:

+ +
httpRequest.onreadystatechange = nameOfTheFunction;
+
+ +

Was soll diese Funktion tun? Zunächst muss die Funktion den Status der Anfrage überprüfen. Wenn der Status den Wert XMLHttpRequest.DONE (entsprechend 4) hat, bedeutet dies, dass die vollständige Serverantwort empfangen wurde und Sie mit der Verarbeitung fortfahren können.

+ +
if (httpRequest.readyState === XMLHttpRequest.DONE) {
+    // Everything is good, the response was received.
+} else {
+    // Not ready yet.
+}
+
+ +

Die vollständige Liste readyState -Werte ist unter XMLHTTPRequest.readyState dokumentiert und lautet wie folgt:

+ +
    +
  • 0 (uninitialized) or (request not initialized)
    • +
  • 1 (loading) or (server connection established)
    • +
  • 2 (loaded) or (request received)
    • +
  • 3 (interactive) or (processing request)
    • +
  • 4 (complete) or (request finished and response is ready)
    • +
+ +

Überprüfen Sie als Nächstes die HTTP response status codes der HTTP-Antwort. Die möglichen Codes sind beim W3C aufgelistet. Im folgenden Beispiel unterscheiden wir zwischen einem erfolgreichen und einem nicht erfolgreichen AJAX-Aufruf, indem wir nach einem 200 OK-Antwort-Code suchen.

+ +
if (httpRequest.status === 200) {
+    // Perfect!
+} else {
+    // There was a problem with the request.
+    // For example, the response may have a 404 (Not Found)
+    // or 500 (Internal Server Error) response code.
+}
+
+ +

Nachdem Sie den Status der Anfrage und den HTTP-Statuscode der Antwort überprüft haben, können Sie mit den vom Server gesendeten Daten tun, was Sie wollen. Sie haben zwei Möglichkeiten, auf diese Daten zuzugreifen:

+ +
    +
  • httpRequest.responseText – gibt die Server-Antwort als eine Zeichenkette aus Text zurück
    • +
  • httpRequest.responseXML – gibt die Antwort als ein XMLDocument-Objekt zurück, das Sie mit JavaScript-DOM-Funktionen durchlaufen können
    • +
+ +

Beachten Sie, dass die obigen Schritte nur gültig sind, wenn Sie eine asynchrone Anforderung verwendet haben (der dritte Parameter von open() war nicht spezifiziert oder auf true gesetzt). Wenn Sie eine synchrone Anforderung verwendet haben, brauchen Sie keine Funktion anzugeben, aber davon wird dringend abgeraten, da dies eine schlechte Benutzerführung zur Folge hat.

+ +

Schritt  3 – Ein einfaches Beispiel

+ +

Lassen Sie uns das alles mit einer einfachen HTTP-Anfrage zusammenfassen. Unser JavaScript wird ein HTML-Dokument, test.html, anfordern, das den Text "Ich bin ein Test" enthält. Dann alert() wir den Inhalt der Antwort. Beachten Sie, dass dieses Beispiel Vanilla JavaScript verwendet - es handelt sich nicht um jQuery. Außerdem sollten sich die HTML-, XML- und PHP-Dateien im selben Verzeichnis befinden.

+ +
<button id="ajaxButton" type="button">Make a request</button>
+
+<script>
+(function() {
+  var httpRequest;
+  document.getElementById("ajaxButton").addEventListener('click', makeRequest);
+
+  function makeRequest() {
+    httpRequest = new XMLHttpRequest();
+
+    if (!httpRequest) {
+      alert('Giving up :( Cannot create an XMLHTTP instance');
+      return false;
+    }
+    httpRequest.onreadystatechange = alertContents;
+    httpRequest.open('GET', 'test.html');
+    httpRequest.send();
+  }
+
+  function alertContents() {
+    if (httpRequest.readyState === XMLHttpRequest.DONE) {
+      if (httpRequest.status === 200) {
+        alert(httpRequest.responseText);
+      } else {
+        alert('There was a problem with the request.');
+      }
+    }
+  }
+})();
+</script>
+
+ +

In this example:

+ +
    +
  • Der Benutzer klickt auf den "Make a request"- Button;
    • +
  • Der Ereignisbehandler ruft die makeRequest()-Funktion auf;
    • +
  • Die Anfrage wird gestellt und dann (onreadystatechange) zur Ausführung an alertContents() übergeben;
    • +
  • alertContents() prüft, ob die Antwort empfangen wurde und OK ist, dann alert() den Inhalt der test.html-Datei.
    • +
+ +
Hinweis: Wenn Sie eine Anfrage an ein Stück Code senden, das XML statt einer statischen HTML-Datei zurückgibt, müssen Sie die Antwortheader so einstellen, dass sie im Internet Explorer funktionieren.. Wenn Sie den Header Content-Type Content-Type: application/xml nicht angeben, gibt IE nach der Zeile, in der Sie versucht haben, auf ein XML-Element zuzugreifen, einen JavaScript-Fehler " Object Expected " aus.
+ +
Hinweis 2: Wenn Sie den Header Cache-Control: no-cache nicht setzen, wird der Browser die Antwort zwischenspeichern und die Anfrage nie erneut senden, was das Debugging erschwert. Sie können auch einen immer unterschiedlichen GET-Parameter hinzufügen, wie einen Zeitstempel oder eine Zufallszahl (siehe bypassing the cache)
+ +
Hinweis 3: Wenn die httpRequest-Variable global verwendet wird, können sich konkurrierende Aufrufe von makeRequest() gegenseitig überschreiben und eine Wettlaufsituation auslösen. Wird der httpRequest lokal ain einer closure Umgebung mit einer AJAX-Function deklariert, so wird dies vermieden.
+ +

Im Falle eines Kommunikationsfehlers (z. B. bei einem Serverausfall) wird beim Zugriff auf den Antwortstatus in der Methode onreadystatechange eine Ausnahmemeldung zurückgegeben. Um dieses Problem zu beheben, könnten Sie Ihre if...then-Anweisung in a try...catch packen:

+ +
function alertContents() {
+  try {
+    if (httpRequest.readyState === XMLHttpRequest.DONE) {
+      if (httpRequest.status === 200) {
+        alert(httpRequest.responseText);
+      } else {
+        alert('There was a problem with the request.');
+      }
+    }
+  }
+  catch( e ) {
+    alert('Caught Exception: ' + e.description);
+  }
+}
+
+ +

Schritt 4 – Arbeiten mit der XML-Antwort

+ +

Im vorherigen Beispiel haben wir nach dem Empfang der Antwort auf die HTTP-Anforderung die Eigenschaft responseText des Anforderungsobjekts verwendet, die den Inhalt der Datei test.html enthielt. Lassen Sie uns nun die responseXML-Eigenschaft ausprobieren.

+ +

Lassen Sie uns zunächst ein gültiges XML-Dokument erstellen, das wir später anfordern werden. Das Dokument (test.xml) enthält Folgendes:

+ +
<?xml version="1.0" ?>
+<root>
+    I'm a test.
+</root>
+
+ +

Im Skript brauchen wir nur die Anforderungszeile zu ändern:

+ +
...
+onclick="makeRequest('test.xml')">
+...
+
+ +

In alertContents() müssen wir die Zeile alert(httpRequest.responseText);ersetzen mit:

+ +
var xmldoc = httpRequest.responseXML;
+var root_node = xmldoc.getElementsByTagName('root').item(0);
+alert(root_node.firstChild.data);
+
+ +

Dieser Code nimmt das von responseXML übergebene XMLDocument-Objekt und verwendet DOM-Methoden, um auf einige der im XML-Dokument enthaltenen Daten zuzugreifen. Sie können here das test.xml and here das aktualisierte test script aufrufen.

+ +

Schritt 5 – Arbeiten mit Daten

+ +

Zum Schluss senden wir einige Daten an den Server und erhalten eine Antwort. Unser JavaScript wird diesmal eine dynamische Seite test.php anfordern, die die von uns gesendeten Daten entgegennimmt und einen "computed" string - "Hello, [user data]!" - den wir  alert()-en werden.

+ +

Zuerst fügen wir unserem HTML ein Textfeld hinzu, damit der Benutzer seinen Namen eingeben kann:

+ +
<label>Your name:
+  <input type="text" id="ajaxTextbox" />
+</label>
+<span id="ajaxButton" style="cursor: pointer; text-decoration: underline">
+  Make a request
+</span>
+ +

Wir fügen auch eine Zeile zu unserem Event-Handler hinzu, um die Daten des Benutzers aus dem Textfeld zu holen und sie zusammen mit der URL unseres serverseitigen Skripts an die Funktion makeRequest() zu senden:

+ +
  document.getElementById("ajaxButton").onclick = function() {
+      var userName = document.getElementById("ajaxTextbox").value;
+      makeRequest('test.php',userName);
+  };
+
+ +

Wir müssen makeRequest() so modifizieren, dass es die Benutzerdaten akzeptiert und an den Server weiterleitet. Wir werden die Anfragemethode von GET auf POST ändern und unsere Daten als Parameter in den Aufruf von httpRequest.send() aufnehmen:

+ +
  function makeRequest(url, userName) {
+
+    ...
+
+    httpRequest.onreadystatechange = alertContents;
+    httpRequest.open('POST', url);
+    httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+    httpRequest.send('userName=' + encodeURIComponent(userName));
+  }
+
+ +

Die Funktion alertContents() kann auf die gleiche Weise wie in Schritt 3 geschrieben werden, um unsere Zeichenfolge zu alert()-en, wenn das alles ist, was der Server zurückgibt.. Nehmen wir jedoch an, der Server wird sowohl die berechnete Zeichenkette als auch die ursprünglichen Benutzerdaten zurückgeben. Wenn also unser Benutzer "Jane" in das Textfeld eingibt, würde die Antwort des Servers wie folgt aussehen::

+ +

{"userData":"Jane","computedString":"Hi, Jane!"}

+ +

Um diese Daten mit alertContents() zu nutzen, können wir nicht einfach den responseText ausgeben, sondern wir müssen ihn parsen und die gewünschte Eigenschaft computedString alert()-en:

+ +
function alertContents() {
+  if (httpRequest.readyState === XMLHttpRequest.DONE) {
+    if (httpRequest.status === 200) {
+      var response = JSON.parse(httpRequest.responseText);
+      alert(response.computedString);
+    } else {
+      alert('There was a problem with the request.');
+    }
+  }
+}
+ +

Die test.php-Datei sollte folgendes enthalten:

+ +
$name = (isset($_POST['userName'])) ? $_POST['userName'] : 'no name';
+$computedString = "Hi, " . $name . "!";
+$array = ['userName' => $name, 'computedString' => $computedString];
+echo json_encode($array);
+ +

Weitere Informationen zu DOM-Methoden finden Sie unter Document Object Model (DOM).

+ +

Einfaches zeitgesteuertes XHR-Beispiel

+ +

Es folgt ein weiteres einfaches Beispiel - hier laden wir eine Textdatei über XHR, deren Struktur wie folgt angenommen wird:

+ +
TIME: 312.05
+TIME: 312.07
+TIME: 312.10
+TIME: 312.12
+TIME: 312.14
+TIME: 312.15
+ +

Sobald die Textdatei geladen ist, split()-en wir die Elemente an jedem Zeilenumbruchszeichen (\n - im Grunde genommen dort, wo jeder Zeilenumbruch in der Textdatei steht) in ein Array auf und geben dann die vollständige Liste der Zeitstempel und den letzten Zeitstempel auf der Seite aus.

+ +

Dies wird alle 5 Sekunden wiederholt, unter Verwendung eines setInterval() Aufrufs. Die Idee wäre, dass eine Art serverseitiges Skript die Textdatei kontinuierlich mit neuen Zeitstempeln aktualisiert, und unser XHR-Code verwendet wird, um den neuesten Zeitstempel auf der Client-Seite zu melden.

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>XHR log time</title>
+    <style>
+
+    </style>
+  </head>
+  <body>
+    <p id="writeData" class="data">Off-Line</p>
+    <p id="lastStamp">No Data yet</p>
+
+    <script>
+
+    const fullData = document.getElementById('writeData');
+    const lastData = document.getElementById('lastStamp');
+
+    function fetchData() {
+      console.log('Fetching updated data.');
+      let xhr = new XMLHttpRequest();
+      xhr.open("GET", "time-log.txt", true);
+      xhr.onload = function() {
+        updateDisplay(xhr.response);
+      }
+      xhr.send();
+    }
+
+    function updateDisplay(text) {
+      fullData.textContent = text;
+
+      let timeArray = text.split('\n');
+
+      // included because some file systems always include a blank line at the end of text files.
+      if(timeArray[timeArray.length-1] === '') {
+        timeArray.pop();
+      }
+
+      lastData.textContent = timeArray[timeArray.length-1];
+    }
+
+    setInterval(fetchData, 5000);
+    </script>
+  </body>
+</html>
diff --git a/files/de/web/guide/css/getting_started/farbe/index.html b/files/de/web/guide/css/getting_started/farbe/index.html deleted file mode 100644 index be9302eb6e..0000000000 --- a/files/de/web/guide/css/getting_started/farbe/index.html +++ /dev/null @@ -1,333 +0,0 @@ ---- -title: Color -slug: Web/Guide/CSS/Getting_started/Farbe -translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors -translation_of_original: Web/Guide/CSS/Getting_started/Color ---- -

{{ CSSTutorialTOC() }}

- -

{{previousPage("/de/docs/Web/Guide/CSS/Getting_Started/Textstyles", "Text styles")}}Das ist der achte Teil des CSS Getting Started Tutorials. Er erklärt, wie man Farben in CSS angeben kann. In Ihrem Stylesheet werden Sie Hintergrundfarben einführen.

- -

Information: Farbe

- -

In diesem Tutorial haben Sie soweit wenige der benannten Farben verwendet. CSS 2 unterstützt insgesamt 17 benannte Farben. Einige der Namen lauten aber nicht wie erwartet:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 black gray silver white 
primärred lime blue 
sekundäryellow aqua fuchsia 
 maroon orange olive purple green navy teal 
- -

 

- -
-
Details
- -

Ihr Webbrowser könnte viel mehr benannte Farben unterstützen, wie zum Beispiel:

- - - - - - - - - - - - - - - - -
dodgerblue peachpuff tan firebrick aquamarine 
- -

Mehr Details zur erweiterten Liste finden Sie unter SVG color keywords im CSS 3 Color Module. Vermeiden Sie Farben, die vom Webbrowser des Lesers möglicheweise nicht unterstützt werden.

-
- -

Für eine größere Farbpalette geben Sie die rot, grün und blau Komponenten der gewünschten Farbe mit einem Nummernzeichen (Hash) und drei hexadezimalen Ziffern im Bereich von 0 – 9 und a – f an. Die Buchstaben a – f repräsentieren die Werte 10 – 15:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
schwarz #000
reines rot #f00
reines grün #0f0
reines blau #00f
weiß #fff
- -


- Für die volle Farbpalette geben sie zwei hexadezimale Ziffern für jede Farbkomponente an:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
schwarz #000000
reines rot #ff0000
reines grün #00ff00
reines blau #0000ff
weiß #ffffff
- -

Sie können normalerweise diese sechstelligen hexadezimalen Code in einem Grafikprogramm oder einem anderen Tool finden.

- -
-
Beispiel
- -

Mit ein wenig Übung können Sie dreistellige Farben für die meisten Zwecke manuell anpassen:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Starten Sie mit reinem rot: #f00
Um es blasser zu machen, fügen Sie ein wenig grün und blau hinzu: #f77
Um es mehr orange zu machen, fügen Sie ein wenig mehr grün hinzu: #fa7
Um es dunkler zu machen, reduzieren sie alle Farbkomponenten: #c74
Um die Sättigung zu reduzieren, gleichen sie die Farbkomponenten ein wenig an: #c98
Wenn die Farbkomponenten exakt gleich sind, erhalten Sie grau: #ccc
- -

Für einen Pastellton wie ein blasses blau:

- - - - - - - - - - - - - - -
Starten Sie mit reinem weiß: #fff
Reduzieren Sie die anderen Farbkomponenten ein wenig: #eef
-
- -
-
Mehr Details
- -

Sie können Farben auch mit dezimalen RGB Werten im Bereich von 0 – 255 oder mit Prozenten angeben.

- -

Das ist zum Beispiel Kastanienbraun (dunkles rot):

- -
rgb(128, 0, 0)
-
- -

Alle Details zur Angabe von Farben finden sie unter Colors in der CSS Spezifikation.

- -

Mehr Information zur Abstimmung von Farbsystemen wie Menu und ThreeDFace finden Sie unter CSS2 System Colors in der CSS Spezifikation.

-
- -

Farbeigenschaften

- -

Sie haben bereits die {{ cssxref("color") }} Eigenschaft auf Text angewendet.

- -

Sie können auch die {{ cssxref("background-color") }} Eigenschaft verwenden, um die Hintergrundfarbe eines Elements zu verändern.

- -

Hintergründe können auf transparent gesetzt werden, um explizit die Hintergrundfarbe zu entfernen. Somit ist der Hintergrund des Elternelements sichtbar.

- -
-
Beispiel
- -

Die Beispiel-Boxen in diesem Tutorial verwenden dieses blasse gelb als Hintergrund:

- -
background-color: #fffff4;
-
- -

Die Mehr Details-Boxen verwenden dieses blasse grau:

- -
background-color: #f4f4f4;
-
-
- -

 

- -

Aktion: Farbcodes verwenden

- -
    -
  1. Bearbeiten Sie Ihre CSS Datei.
    2. -
  2. Make the change shown here in bold, to give the initial letters a pale blue background. (The layout and comments in your file probably differ from the file shown here. Keep the layout and comments the way you prefer them.) - 
    /*** CSS Tutorial: Color page ***/
-
-/* page font */
-body {font: 16px "Comic Sans MS", cursive;}
-
-/* paragraphs */
-p {color: blue;}
-#first {font-style: italic;}
-
-/* initial letters */
-strong {
-  color: red;
-  background-color: #ddf;
-  font: 200% serif;
-  }
-
-.carrot {color: red;}
-.spinach {color: green;}
-
    -
    3. -
  3. Save the file and refresh your browser to see the result.
    4. -
- - - - - - - - - - -
Cascading Style Sheets
Cascading Style Sheets
- -
-
Herausforderung
- -

In your CSS file, change all the color names to 3-digit color codes without affecting the result.

- -

(This cannot be done exactly, but you can get close. To do it exactly you need 6-digit codes, and you need to look up the CSS Specification or use a graphics tool to match the colors.)

- -
-
Possible solution
- -

The following values are reasonable approximations of the named colors:

- -
strong {
-  color: #f00; /* red */
-  background-color: #ddf; /* pale blue */
-  font: 200% serif;
-}
-
-.carrot {
-  color: #fa0; /* orange */
-}
-
-.spinach {
-  color: #080; /* dark green */
-}
-
-p {
-  color: #00f; /* blue */
-}
-
- -

 

-Hide solution
-Sehen Sie sich die Lösung an.
- -

What next?

- -

{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Content", "Content")}}Your sample document and your sample stylesheet strictly separate content from style. The next section explains how you can make exceptions to this strict separation.

diff --git a/files/de/web/guide/css/getting_started/index.html b/files/de/web/guide/css/getting_started/index.html deleted file mode 100644 index 9472041b96..0000000000 --- a/files/de/web/guide/css/getting_started/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: Einführung -slug: Web/Guide/CSS/Getting_started -tags: - - CSS - - 'CSS:Einführung' -translation_of: Learn/CSS/First_steps -translation_of_original: Web/Guide/CSS/Getting_started ---- -

Einleitung

-

Dieser Artikel stellt eine Einführung in Cascading Style Sheets (CSS) dar.

-

Die Führung durch die grundlegenden Möglichkeiten von CSS ist mit einigen praktischen Beispielen zum Testen auf dem eigenen Computer untermalt. Das Tutorial gliedert sich in zwei Teile:

-
    -
  • Der erste Teil verdeutlicht die grundlegenden Möglichkeiten von CSS, die in Mozilla Browsern und in den meisten anderen modernen Browsern funktionieren.
    • -
-
    -
  • Der zweite Teil beinhaltet einige Beispiele über spezielle Möglichkeiten, die in Mozilla Browsern funktionieren, aber nicht unbedingt von anderen Browsern unterstützt werden.
    • -
-

Diese Einführung basiert auf der CSS 2.1 Spezifikation.

-

An wen richtet sich dieses Tutorial?

-

Dieses Tutorial ist vorwiegend für Anfänger geschrieben, allerdings kann es auch für jemanden mit etwas Erfahrung hilfreich sein.

-

Anfänger, die noch wenig über CSS wissen, sollten den ersten Teil dieses Tutorials lesen, um CSS zu verstehen und zu lernen wie man es benutzt. Danach bietet sich der zweite Teil an, um die Möglichkeiten in Mozilla Produkten kennen zu lernen.

-

Fortgeschrittene, die schon etwas über CSS wissen, können einfach die Teile überspringen, die sie schon kennen und nur die Teile lesen, die sie interessiert.

-

Fortgeschrittene, die Erfahrungen mit CSS haben, aber nichts über CSS in Mozilla wissen, sollten zum zweiten Teil springen.

-

Was braucht man bevor man anfängt?

-

Am Besten versteht man dieses Tutorial, wenn man die Beispiele direkt nachvollzieht. Benötigt wird dazu ein Editor für Textdateien und der Mozilla Firefox mit dem man grundlegend umgehen sollte.

-

Ein weniger effektiver Weg ist es, das Tutorial einfach nur durchzulesen ohne selbst Dateien zu erstellen.

-

Einige Teile dieses Tutorials benötigen unter Umständen die Mozilla Software. Diese Teile sind optional und können gegebenenfalls übersprungen werden.

-

Hinweis:  CSS ermöglicht das Arbeiten mit Farben. Einige Teile dieses Tutorials sind von Farben abhängig. Diese Teile können nur benutzt werden, wenn ein Farbdisplay mit normalen Farbeinstellungen verfügbar ist.

-

Wie man dieses Tutorial benutzen sollte

-

Um dieses Tutorial zu verwenden, sollten die Seiten sorgfältig und der Reihe nach, gelesen werden. Wird eine Seite ausgelassen, könnte es schwierig werden die nachfolgenden Seiten zu verstehen.

-

Auf jeder Seite gibt es einen Informationsbereich, um zu verstehen wie CSS funktioniert und einen Aktionsbereich, um CSS auf dem eigenen Computer selbst auszuprobieren.

-

Um das Wissen zu überprüfen, gibt es am Ende jeder Seite eine Aufgabe. Die Lösungen einiger Aufgaben ergeben sich aus den nachfolgenden Seiten des Tutorials.

-

Damit man noch tiefer in CSS eintauchen kann, ist es sinnvoll die Hinweise unter Weite Details zu lesen und den Links zu folgen, die auf die CSS Spezifikation verweisen.

-

Erster Teil

-

Eine Schritt für Schritt Einführung in CSS:

-
    -
    2. -
  2. Warum CSS
    3. -
  3. Wie CSS funktioniert
    4. -
  4. Kaskade und Vererbung
    5. -
  5. Selektoren
    6. -
  6. Lesbares CSS
    7. -
  7. Textformatierung
    8. -
  8. Farbe
    9. -
  9. Inhalt Boxen
    10. -
  10. Boxes
    11. -
  11. Layout
    12. -
  12. Tabellen
    13. -
  13. Medien
    14. -
-

Zweiter Teil

-

Beispiele, die die Anwendung von CSS in Mozilla zeigen:

-
    -
  1. JavaScript
    2. -
  2. XBL bindings
    3. -
  3. CSS in XUL
    4. -
  4. CSS in SVG
    5. -
  5. CSS in XML
    6. -
diff --git a/files/de/web/guide/css/getting_started/kaskadierung_und_vererbung/index.html b/files/de/web/guide/css/getting_started/kaskadierung_und_vererbung/index.html deleted file mode 100644 index 79ce577e7f..0000000000 --- a/files/de/web/guide/css/getting_started/kaskadierung_und_vererbung/index.html +++ /dev/null @@ -1,160 +0,0 @@ ---- -title: Kaskadierung und Vererbung -slug: Web/Guide/CSS/Getting_started/Kaskadierung_und_vererbung -translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance -translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance ---- -

{{ CSSTutorialTOC() }}

- -

{{ previousPage("/de/docs/Web/Guide/CSS/Getting_Started/How_CSS_works", "Wie CSS funktioniert.")}}Das ist der vierte Abschnitt des CSS Getting Started Tutorials. Er erklärt wie Stylesheets in einer Kaskade interagieren und wie Element den Style von ihren Elternelmenten erben können. Sie werden Vererbung verwenden, um eine Menge von Teilen in Ihrem Beispieldokument in einem Schritt zu verändern.

- -

Information: Kaskadierung und Vererbung

- -

Der schlussendliche Style eines Elements kann an vielen verschiedenen Orten angegeben werden, die auf eine komplexe Art miteinander interagieren. Diese Komplexität macht CSS mächtig. Aber dadurch kann es auch verwirrend und schwer zu debuggen werden.

- -

Drei Hauptquellen von Styleinformationen bilden eine Kaskade. Diese sind:

- -
    -
  • Die standardmäßigen Styles des Webbrowsers für die Markup Language.
    • -
  • Die Styles, die vom Benutzer, der das Dokument liest, angegeben werden.
    • -
  • Die Styles, die vom Autor mit dem Dokument verknüpft worden sind. Diese können an drei verschiedenen Orten angegeben werden: -
      -
    • In einer externen Datei: Dieses Tutorial diskutiert hauptsächlich diese Method zur Definition von Styles.
      • -
    • In einer Definition am Anfang des Dokumenst: Diese Methode sollte nur für Styles verwendet werden, die nur von dieser Seite benützt werden.
      • -
    • Auf einem bestimmten Element im Inhalt des Dokument: Das ist die am schwersten wartbare Methode, welche für Tests verwendet werden kann.
      • -
    -
    • -
- -

Der Style des Benutzers verändert den standardmäßigen Style des Webbrowsers. Der Style des Autors des Dokuments verändert dann den Style ein weiteres Mal. In diesem Tutorial sind Sie der Autor des Beispieldokuments und es wird nur mit Stylesheets vom Autor gearbeitet.

- -
-
Beispiel
- -

Wenn Sie dieses Dokument in einem Webbrowser lesen, kommen Teile des Styles, den Sie sehen, von dem standardmäßigen Style des Webbrowsers für HTML.

- -

Teile vom Style können von angepassten Webbrowsereinstellungen oder von einer angepassten Styledefinitionsdatei stammen. In Firefox können die Einstellungen im Preferences Dialog vorgenommen werden, oder Sie geben Styles in der Datei userContent.css innerhalb Ihres Browserprofils an.

- -

Andere Teile vom Style kommen aus Stylesheets, die vom Wiki-Server mit dem Dokument verlinkt werden.

-
- -

Wenn Sie Ihr Beispieldokument in Ihrem Webbrowser öffnen, werden die {{ HTMLElement("strong") }} Elemente mit dickeren Buchstaben als der Rest des Textes dargestellt. Das kommt aus dem standardmäßigen Style des Webbbrowsers für HTML.

- -

Die {{ HTMLElement("strong") }} Elemente sind rot. Das kommt aus Ihrem Beispielstylesheet.

- -

Die {{ HTMLElement("strong") }} Elemente erben auch viele Eigenschaften vom Style des {{ HTMLElement("p") }} Elements, weil sie ein Kindelement davon sind. Auf dieselbe Art erbt das {{ HTMLElement("p") }} Element vom Style des {{ HTMLElement("body") }} Elements.

- -

Für Styles in der Kaskade haben die Stylesheets vom Autor höchste Priorität. Danach folgen die Stylesheets des Benutzers und der standardmäßige Stylesheet vom Webbrowser.

- -

Bei vererbten Styles haben die eigenen Styles von Kindelementen eine höhere Priorität als die von dessen Elternelementen.

- -

Das sind nicht alle Prioritäten, die angwendet werden. Folgende Seiten in diesem Tutorial gehen noch detaillierter darauf ein.

- -
-
Mehr Details
- -

CSS ermöglicht es auch mit dem Schlüsselwort !important die Styles vom Autor zu überschreiben.

- -

Das bedeutet, dass ein Autor nicht immer genau vorhersehen kann, was genau die Leser sehen werden.

- -

Wenn Sie alle Details über Kaskadierung und Vererbung erfahren wollen, rufen Sie bitte die Seite Assigning property values, Cascading, and Inheritance in der CSS Spezifikation auf.

-
- -

Aktion: Vererbung verwenden

- -
    -
  1. Editieren Sie Ihre CSS Datei.
    2. -
  2. Kopieren Sie die folgende Zeile in Ihre CSS Datei. Es macht dabei keinen Unterschied, ob Sie die Zeile vor oder nach der bereits enthaltenen Zeile einfügen. Es ist aber verständlicher die Zeile oben einzufügen, da das {{ HTMLElement("p") }} Element in Ihrem Dokument das Elternelement vom {{ HTMLElement("strong") }} Element ist: - 
    p {
-  color: blue;
-  text-decoration: underline;
-}
-
    -
    3. -
  3. Laden Sie die Seite im Webbrowser erneut, damit die Änderung an Ihrem Beispieldokument sehen können. Die unterstreichende Line betrifft den gesamten Text im Absatz und somit auch alle Anfangsbuchstaben. Die {{ HTMLElement("strong") }} Elemente haben den Unterstrich von ihrem Elternknoten {{ HTMLElement("p") }} geerbt.
    - -

    Die {{ HTMLElement("strong") }} Elemente sind aber immer noch rot. Die rote Farbe gehört zu ihrem eigenen Style und hat somit Priorität gegenüber dem blau des {{ HTMLElement("p") }} Elternelements.

    -
    4. -
- -

Davor

- -

HTML Inhalt

- -
<p>
-  <strong>C</strong>ascading
-  <strong>S</strong>tyle
-  <strong>S</strong>heets
-</p>
-
- -

CSS Inhalt

- -
strong {
-  color:red
-}
-
- -

{{ EmbedLiveSample('Before') }}

- -

Danach

- -

HTML Inhalt

- -
<p>
-  <strong>C</strong>ascading
-  <strong>S</strong>tyle
-  <strong>S</strong>heets
-</p>
- -

CSS Inhalt

- -
p {
-  color:blue;
-  text-decoration:underline;
-}
-
-strong {
-  color:red;
-}
- -

{{ EmbedLiveSample('After') }}

- -

 

- -
-
Herausforderung
-Verändern Sie Ihren Stylesheet, damit nur die roten Buchstaben unterstrichen sind: - - - - - - - -
Cascading Style Sheets
- -
-
Mögliche Lösung
- -

Verschieben Sie die Deklaration für die untersteichende Linie aus der Regel für {{ HTMLElement("p") }} in die für {{ HTMLElement("strong") }}. Die resultierende Datei sieht folgendermaßen aus:

- -
p {
-  color: blue;
-}
-
-strong {
-  color: red;
-  text-decoration: underline;
-}
-
- -

 

-Lösung ausblenden
-Sehen Sie sich die Lösung an.
- -

 

- -

Was kommt als Nächstes?

- -

{{ nextPage("/de/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selektoren")}}Ihr Beispielstylesheet definiert Styles für die Tags <p> und <strong>, um den Style der entsprechenden Elemente im gesamten Dokument zu verändern. Der nächste Abschnitt beschreibt, wie Sie den Style auf eine noch selektivere Art angeben können.

diff --git a/files/de/web/guide/css/getting_started/lesbares_css/index.html b/files/de/web/guide/css/getting_started/lesbares_css/index.html deleted file mode 100644 index 4c16c3e18d..0000000000 --- a/files/de/web/guide/css/getting_started/lesbares_css/index.html +++ /dev/null @@ -1,166 +0,0 @@ ---- -title: Lesbares CSS -slug: Web/Guide/CSS/Getting_started/Lesbares_CSS -translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable -translation_of_original: Web/Guide/CSS/Getting_started/Readable_CSS ---- -

{{ CSSTutorialTOC() }}

- -

{{ previousPage("/de/docs/Web/Guide/CSS/Getting_Started/Selektoren", "Selektoren")}}Das ist der sechste Teil des CSS Getting Started Tutorials. Er erklärt den Stil und die Grammatik der CSS Sprache selbst. Sie ändern das Layout Ihrer CSS Datei, damit sie lesbarer wird.

- -

Information: Lesbares CSS

- -

Sie können Leerstellen und Kommentare in Ihren Stylesheets einfügen, um sie lesbarer zu machen. Wenn verschiedene Selektoren dasselbe Element nur auf verschiedene Arten auswählen und deren Regeln darauf angewendet werden, können Sie diese Selektoren im Stylesheet nacheinander gruppieren.

- -

Leerstellen

- -

Leerstellen können Leerzeichen, Tabs und Leerzeilen sein. Sie können Leerstellen in Ihren Stylesheets einfügen, um sie lesbarer zu machen.

- -

Im Kontext eines Seitenlayouts und -zusammenstellung sind Leerstellen die Teile einer Seite, die frei bleiben: Seitenränder, Zwischenräume und Platz zwischen Spalten und beschriebene Zeilen.

- -

Ihre CSS Datei aus den Beispielen hat momentan eine Regel pro Zeile und fast nur das Minimum von Leerstellen. In einem komplexen Stylesheet würde diese Layout schwer zu lesen und somit auch schwer zu warten sein.

- -

Das gewählte Layout ist normalerweise eine persönliche Vorliebe. Doch wenn Ihre Stylesheets Teil eines gemeinsammen Projekts sind, könnten diese Projekte eigene Konventionen für das Layout haben.

- -
-
Beispiele
- -

Einige Personen mögen das kompakte Layout, das wir bis jetzt verwendet haben, in dem eine Zeile nur geteilt wird, wenn sie sonst sehr lange sein würde:

- -
.carrot {color: orange; text-decoration: underline; font-style: italic;}
-
- -

Einige Personen bevorzugen, wenn pro Zeile ein Property-Wert-Paar steht:

- -
.carrot
-{
-color: orange;
-text-decoration: underline;
-font-style: italic;
-}
-
- -

Einige Personen verwenden dann auch Einzüge — zwei oder vier Leerzeichen oder ein Tab sind gebräuchlich:

- -
.carrot {
-  color: orange;
-  text-decoration: underline;
-  font-style: italic;
-}
-
- -

Einige Personen richten alles vertikal an (aber solche Layouts sind schwer zu warten):

- -
.carrot
-    {
-    color           : orange;
-    text-decoration : underline;
-    font-style      : italic;
-    }
-
- -

Einige Personen verwenden verschieden viele Leerzeichen, um die Lesbarkeit zu verbessern.

- -
.vegetable         { color: green; min-height:  5px; min-width:  5px }
-.vegetable.carrot  { color: orange;    height: 90px;     width: 10px }
-.vegetable.spinach { color: darkgreen; height: 30px;     width: 30px }
-
-
- -

Einige Personen verwenden Tabs für das Layout, während andere nur Leerzeichen verwenden.

- -

Kommentare

- -

Kommentare in CSS beginnen mit /* und enden mit */.

- -

Sie können Kommentare in Stylesheets für Anmerkungen verwenden oder auch Teile vorübergehend für Testzwecke auskommentieren.

- -

Um Teile eines Stylesheets auszukommentieren, platzieren Sie diesen Teil in einem Kommentar, damit der Webbrowser ihn nicht auswertet. Seien Sie mit dem Start und dem Ende eines Kommentars vorsichtig. Der Rest des Stylesheets muss weiterhin eine korrekte Syntax haben.

- -
-
Beispiel
- -
/* style for initial letter C in first paragraph */
-.carrot {
-  color:            orange;
-  text-decoration:  underline;
-  font-style:       italic;
-  }
-
-
- -

Gruppierte Selektoren

- -

Wenn mehrere Elemente denselben Style haben, können Sie eine Gruppe von Selektoren getrennt mit einem Komma spezifizieren. Die Deklaration wird dann auf alle selektierten Elemente angewendet.

- -

An einer anderen Stelle in Ihrem Stylesheet können Sie einen einzelnen Selektor erneut spezifizieren, um zusätzlich individuelle Regeln dazu anzugeben.

- -
-
Beispiel
- -

Diese Regel macht {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }} und {{ HTMLElement("h3") }} Elemente in derselben Farbe.

- -

Es ist angenehm die Farbe an nur einer Stelle zu spezifizieren, denn dann kann sie später einfacher verändert werden.

- -
/* color for headings */
-h1, h2, h3 {color: navy;}
-
-
- -

Aktion: Kommentare hinzufügen und das Layout verbessern

- -
    -
  1. Bearbeiten Sie Ihre CSS Datei und schreiben Sie die folgenden Regeln hinein (in beliebiger Reihenfolge): - 
    strong {color: red;}
-.carrot {color: orange;}
-.spinach {color: green;}
-#first {font-style: italic;}
-p {color: blue;}
-
    -
    2. -
  2. Machen Sie den Stylesheet lesbaren, in dem sie die Regeln in eine für Sie logische Reihenfolge bringen und Sie Ihrer Meinung nach sinnvolle Leerstellen und Kommentare einfügen.
    3. -
  3. Speichern Sie die Datei und aktualisieren Sie Ihren Webbrowser, um sicherzustellen, dass Ihre Änderungen keinen Einfluss auf die Anwendung des Stylesheets haben: - - - - - - - - - -
    Cascading Style Sheets
    Cascading Style Sheets
    -
    4. -
- -
-
Herausforderung
- -

Kommentiere Sie nur Teile Ihres Stylesheets aus, damit nur der allererste Buchstabe in Ihrem Dokument rot ist:

- - - - - - - - - - -
Cascading Style Sheets
Cascading Style Sheets
- -

(Es gibt mehrere Wege dies zu erreichen.)

- -
-
Mögliche Lösung
-Eine mögliche Lösung wäre das Auskommentieren der Regel .carrot: - -
/*.carrot {
-  color: orange;
-}*/
-Lösung ausblenden
-Sehen Sie sich die Lösung an.
- -

Was kommt als Nächstes?

- -

{{ nextPage("/de/docs/Web/Guide/CSS/Getting_Started/Textstyles", "Textstyles") }}Ihr Beispiel-Stylesheet verwendet kursiven und unterstrichenen Text. Die nächste Seite beschreibt weitere Wege, um das Aussehen von Text in Ihrem Dokument zu spezifizieren.

diff --git a/files/de/web/guide/css/getting_started/selektoren/index.html b/files/de/web/guide/css/getting_started/selektoren/index.html deleted file mode 100644 index f61b8bb577..0000000000 --- a/files/de/web/guide/css/getting_started/selektoren/index.html +++ /dev/null @@ -1,430 +0,0 @@ ---- -title: Selektoren -slug: Web/Guide/CSS/Getting_started/Selektoren -translation_of: Learn/CSS/Building_blocks/Selectors -translation_of_original: Web/Guide/CSS/Getting_started/Selectors ---- -

{{ CSSTutorialTOC() }}

- -

{{ previousPage("/de/docs/Web/Guide/CSS/Getting_Started/Kaskadierung_und_vererbung", "Kaskadierung & Vererbung")}}Das ist der fünfte Abschnitt des CSS Getting Started Tutorials. Er erklärt wie sie Styles selektiv anwenden können und wie verschiedene Arten von Selektoren verschiedene Prioritäten haben können. Sie fügen einige Attribute zu den Tags in Ihrem Beispiel-Dokument hinzu und Sie verwenden diese Attribute in Ihrem Beispielstylesheet.

- -

Information: Selektoren

- -

CSS hat eine eigene Terminologie, die die CSS Sprache beschreibt. Früher in diesem Tutorial haben Sie eine Zeile wie die folgende geschrieben:

- -
strong {
-  color: red;
-}
-
- -

In der CSS Terminologie ist die gesamte Zeile eine Regel. Diese Regel beginnt mit strong, welches ein Selektor ist. Sie wählt aus, auf welche Elemente im DOM die Regel angewandt wird.

- -
-
Mehr Details
- -

Der Teil innerhalb der geschwungenen Klammern ist die Deklaration.

- -

Das Schlüsselwort color ist eine Eigenschaft (Property) und red is ein Wert (value).

- -

Das Semicolon nach dem Property-Value Pair trennt es von anderen Property-Value Pairs in derselben Deklaration.

- -

Dieser Tutorial bezeichnet einen Selektor wie strong als einen Tag-Selektor. Die CSS Spezifikation bezeichnet es als Type-Selector.

-
- -

Diese Seite vom Tutorial geht detaillierter auf die Selektoren ein, die in CSS Regeln verwendet werden können.

- -

Zusätzlich zu Tagnamen können Werte von Attributen in Selektoren verwendet werden. Damit können Regeln spezifischer gemacht werden.

- -

Zwei Attribute haben einen speziellen Status in CSS. Diese sind class und id.

- -

Class Selektoren

- -

Verwenden Sie das class Attribut in einem Element, um das Element einer Klasse zuzuordnen. Der Name der Klasse ist frei wählbar. Mehrere Elemente in einem Dokument können denselben Wert für die Klasse haben.

- -

Tippen Sie einen Punkt direkt vor dem Klassennamen im Stylesheet, um die Klasse im Selektor zu verwenden.

- -

ID Selektoren

- -

Verwenden Sie das id Attribut in einem Element, um dem Elemente eine ID zuzuweisen. Der Name der ID ist frei wählbar. Die ID muss innerhalb vom Dokument eindeutig sein.

- -

Tippen Sie eine Raute (Hash) direkt vor der ID im Styleshet, um die ID im Selektor zu verwenden.

- -
-
Beispiel
-Dieser HTML Tag hat ein class Attribut und ein id Attribute: - -
<p class="key" id="principal">
-
- -

Der id Wert, principal, muss innerhalb vom Dokument eindeutig, aber andere Tags Dokument dürfen denselben Klassennamen, key, haben.

- -

In einem CSS Stylesheet macht diese Regel alle Elemente mit der class key grün. (Sie müssen dazu kein {{ HTMLElement("p") }} sein.)

- -
.key {
-  color: green;
-}
-
- -

Diese Regel macht das eine Element mit der id principal fettgedruckt:

- -
#principal {
-  font-weight: bolder;
-}
-
-
- -

Wenn mehr als eine Regel auf ein Element zutreffen und dieselbe Eigenschaft spezifiziert wird, gibt CSS der Regel mit dem spezifischeren Selektor Priorität. Ein ID Selektor ist spezifischer als ein class Selektor, welcher wiederum spezifischer als ein tag Selektor ist.

- -
-
Mehr Details
- -

Sie können Selektoren kombinieren, um einen selektiveren Selektor zu erstellen.

- -

Der Selektor .key zum Beispiel selektier alle Elements mit der Klasse key. Der Selektor p.key selektiert nur {{ HTMLElement("p") }} Elemente, die die Klasse key haben.

- -

Sie sind nicht auf die zwei speziellen Attribute class und id eingeschränkt. Mit eckigen Klammern können Sie auch andere Attribute spezifizieren. Der Selektor [type='button'] zum Beispiel selektiert alle Elemente, die ein type Attribut mit dem Wert button haben.

-
- -

Wenn ein Stylesheet Regeln mit einem Konflikt hat und und diese gleich spezifisch sind, dann gibt CSS der Regel, die später im Stylesheet ist, Priorität.

- -

Wenn Sie Probleme mit konfliktierenden Regeln haben, versuchen Sie eine Regel spezifischer zu machen, damit sie Priorität hat. Wenn Sie das nicht können, verschieben Sie eine der Regeln ans Ende des Stylesheet, damit sie Priorität bekommt.

- -

Pseudo-classes Selektoren

- -

Eine CSS pseudo-class ist ein Schlüsselwort, welches einem Selektor hinzugefügt wird. Damit kann ein bestimmter Zustand des selektierten Elements spezifiziert werden. {{ Cssxref(":hover") }} zum Beispiel wenden seinen Style an, wenn der Benutzer mit dem Mauszeiger über das selektierte Element fährt.

- -

Pseudo-classes zusammen mit pseudo-elements lassen Sie eine Style für ein Element nicht nur in Relation zum Inhalt vom Document Tree sondern auch in Relation zu externen Faktoren wie den Verlauf  der Navigation ({{ cssxref(":visited") }}, zum Beispiel), dem Zustand seines Inhalt (wie {{ cssxref(":checked") }} auf manchen form Elementen) oder der Position des Mauszeigers (wie {{ cssxref(":hover") }} das angibt, ob sich der Mauszeiger über dem Element befindet) anwenden. Eine vollständige Liste der Selektoren ist unter CSS3 Selectors working spec zu finden.

- -
-
Syntax
- -
selector:pseudo-class {
-  property: value;
-}
-
-
- -

Liste von pseudo-classes

- -
    -
  • {{ Cssxref(":link") }}
    • -
  • {{ Cssxref(":visited") }}
    • -
  • {{ Cssxref(":active") }}
    • -
  • {{ Cssxref(":hover") }}
    • -
  • {{ Cssxref(":focus") }}
    • -
  • {{ Cssxref(":first-child") }}
    • -
  • {{ Cssxref(":nth-child") }}
    • -
  • {{ Cssxref(":nth-last-child") }}
    • -
  • {{ Cssxref(":nth-of-type") }}
    • -
  • {{ Cssxref(":first-of-type") }}
    • -
  • {{ Cssxref(":last-of-type") }}
    • -
  • {{ Cssxref(":empty") }}
    • -
  • {{ Cssxref(":target") }}
    • -
  • {{ Cssxref(":checked") }}
    • -
  • {{ Cssxref(":enabled") }}
    • -
  • {{ Cssxref(":disabled") }}
    • -
- -

Information: Selektoren basieren auf Beziehungen

- -

CSS hat einige Wege um Elemente basieren auf ihrer Bezieung zu anderen Eementen zu selektieren. Damit können Selektoren spezifischer gemacht werden.

- - - - - - - - - - - - - - - - - - - - - - - - - -
Gängige Selektoren basierend auf Beziehungen
SelektorSelektiert
A EJedes E Element, das ein Nachfolger eines A Elements ist (das heißt: ein Kind oder ein Kind eines Kindes, etc.)
A > EJedes E Element, das ein Kind eines A Elements ist
E:first-childJedes E Element, das das erste Kind seines Parent ist
B + EJedes E Element, das das nächste Sibling eines B Elements ist (das heißt: das nächste Kind von demselben Parent)
- -

Über eine Kombination der selektoren können komplexe Beziehungen ausgedrückt werden.

- -

Sie können auch das Symbol * (asterisk) verwenden, welches "jedes Element" bedeutet.

- -
-
Beispiel
- -

Eine HTML Tabelle hat ein id Attribute aber die Zeilen und Zellen haben keinen eigenen Identifier:

- -
<table id="data-table-1">
-...
-<tr>
-<td>Prefix</td>
-<td>0001</td>
-<td>default</td>
-</tr>
-...
-
- -

Diese Regeln machen die erste Zelle jeder Zeile fettgedruckt und die zweite Zelle jeweils monospaced. Sie betreffen nur eine bestimmte Tabelle im Dokument:

- -
#data-table-1 td:first-child {
-  font-weight: bolder;
-}
-
-#data-table-1 td:first-child + td {
-  font-family: monospace;
-}
-
- -

Das Ergebnis sieht so aus:

- - - - - - - -
- - - - - - - - -
Prefix0001default
-
-
- -
-
Mehr Details
- -

Wenn Sie einen Selektor spezifischer machen, erhöhen Sie normalerweise seine Priorität.

- -

Wenn Sie diese Technik anwenden, können Sie es vermeiden vielen Tags in ihrem Dokument ein class oder ein id Attribut zu geben. Stattdessen erledigt CSS die Arbeit.

- -

In umfassenden Designs, bei denen Geschwindigkeit wichtig ist, können Sie ihre Stylesheets effizienter machen, indem Sie komplexe Regeln mit Beziehungen zu anderen Elementen vermeiden.

- -

Mehr Beispiele zu Tabellen finden Sie auf der CSS Referenzseite.

-
- -

Aktion: class und ID Selektoren verwenden

- -
    -
  1. Bearbeiten Sie Ihre HTML Datei und duplizieren Sie den Absatz mit copy and paste.
    2. -
  2. Danach setzen Sie ein id und class Attribut auf den ersten Absatz und ein id Attribut auf dem zweiten wie unten dargestellt. Alternativ können Sie die gesamte Datei kopieren und einfügen: - 
    <!doctype html>
-<html>
-  <head>
-  <meta charset="UTF-8">
-  <title>Sample document</title>
-  <link rel="stylesheet" href="style1.css">
-  </head>
-  <body>
-    <p id="first">
-      <strong class="carrot">C</strong>ascading
-      <strong class="spinach">S</strong>tyle
-      <strong class="spinach">S</strong>heets
-    </p>
-    <p id="second">
-      <strong>C</strong>ascading
-      <strong>S</strong>tyle
-      <strong>S</strong>heets
-    </p>
-  </body>
-</html>
-
    -
    3. -
  3. Bearbeiten Sie jetzt Ihre CSS Datei. Ersetzen Sie den gesamten Inhalt mit: - 
    strong {
-  color: red;
-}
-
-.carrot {
-  color: orange;
-}
-
-.spinach {
-  color: green;
-}
-
-#first {
-  font-style: italic;
-}
-
    -
    4. -
  4. Speichern Sie die Dateien und aktualisieren Sie den Webbrowser, um das Ergebnis zu sehen: - - - - - - - - - -
    Cascading Style Sheets
    Cascading Style Sheets
    - -

    Sie können die Zeilen in Ihrer CSS Datei neu anordnen, um zu sehen, dass die Reihenfolge keine Auswirkungen hat.

    - -

    Die class Selektoren .carrot und .spinach haben Priorität gegenüber dem tag Selektor strong.

    - -

    Der ID Selektor #first hat Priorität gegenüber den class und den tag Selektoren.

    -
    5. -
- -
-
Herausforderungen
- -
    -
  1. Ohne die HTML Datei zu verändern, fügen sie eine einzige Regel in Ihrer CSS Datei hinzu, die die Farbe aller Anfangsbuchstaben wie jetzt beibehält aber alle anderen Buchstaben im zweiten Absatz blau macht: - - - - - - - - - -
    Cascading Style Sheets
    Cascading Style Sheets
    -
    2. -
  2. Ändern sie jetzt die neue Regel (ohne etwas anderes zu ändern), um den ersten Absatz auch blau zu machen: - - - - - - - - - -
    Cascading Style Sheets
    Cascading Style Sheets
    -
    3. -
- -
-
Mögliche Lösung
- -
    -
  1. Fügen Sie eine Regel mit dem ID Selektor #second und einer Deklaration color: blue; wie unten dargestellt hinzu: - - 
    #second {
-  color: blue;
-}
-
    - Ein noch spezifischerer Selektor p#second funktioniert auch.
    2. -
  2. Ändern Sie den Selektor der neuen Regel auf p, damit er ein Tag-Selektor ist: - 
    p {
-  color: blue;
-}
-
    -
    3. -
-Lösung ausblenden
-Sehen Sie sich die Lösung an.
- -

Aktion: pseudo-classes Selektoren verwenden

- -
    -
  1. Erstellen Sie eine HTML Datei wie folgt: - 
    <!doctype html>
-<html>
-  <head>
-  <meta charset="UTF-8">
-  <title>Sample document</title>
-  <link rel="stylesheet" href="style1.css">
-  </head>
-  <body>
-    <p>Go to our <a class="homepage" href="http://www.example.com/" title="Home page">Home page</a>.</p>
-  </body>
-</html>
-
    -
    2. -
  2. Bearbeiten Sie jetzt Ihre CSS Datei. Ersetzen Sie den gesamten Inhalt mit: - 
    a.homepage:link, a.homepage:visited {
-  padding: 1px 10px 1px 10px;
-  color: #fff;
-  background: #555;
-  border-radius: 3px;
-  border: 1px outset rgba(50,50,50,.5);
-  font-family: georgia, serif;
-  font-size: 14px;
-  font-style: italic;
-  text-decoration: none;
-}
-
-a.homepage:hover, a.homepage:focus, a.homepage:active {
-  background-color: #666;
-}
-
    -
    3. -
  3. Speichern Sie die Dateien und aktualisieren Sie den Webbrowser, um das Ergebnis zu sehen (fahren sie mit dem Mauszeiger über den folgenden Link, um den Effekt zu sehen): - - - - - - -
    Go to our Home page  
    -
    4. -
- -

Aktion: Selektoren basierend auf Beziehungen und pseudo-classes verwenden

- -

Mit Selektoren basierung auf Beziehungen und pseudo-classes können Sie komplexe Algorithmen mit Kaskadierung erstellen. Das ist eine gängige Technik, um zum Beispiel reine CSS Dropdown Menüs zu erstellen (die nur aus CSS ohne JavaScript bestehen). Die Essenz dieser Technik ist die Erstellung einer Regel wie die folgende:

- -
div.menu-bar ul ul {
-  display: none;
-}
-
-div.menu-bar li:hover > ul {
-  display: block;
-}
- -

Angewendet auf eine HTML Struktur wie die folgende:

- -
<div class="menu-bar">
-  <ul>
-    <li>
-      <a href="example.html">Menu</a>
-      <ul>
-        <li>
-          <a href="example.html">Link</a>
-        </li>
-        <li>
-          <a class="menu-nav" href="example.html">Submenu</a>
-          <ul>
-            <li>
-              <a class="menu-nav" href="example.html">Submenu</a>
-              <ul>
-                <li><a href="example.html">Link</a></li>
-                <li><a href="example.html">Link</a></li>
-                <li><a href="example.html">Link</a></li>
-                <li><a href="example.html">Link</a></li>
-              </ul>
-            </li>
-            <li><a href="example.html">Link</a></li>
-          </ul>
-        </li>
-      </ul>
-    </li>
-  </ul>
-</div>
-
- -

Sehen sie in das komplette CSS-basierte Dropdown Menü Beispiel für mögliche Hinweise.

- -

Was kommt als Nächstes?

- -

Ihr Beispiel-Stylesheet sieht langsam kompakt und kompliziert aus. Der nächste Anschnit beschreibt die Wege, um CSS leichter lesbar zu machen.{{nextPage("/de/docs/Web/Guide/CSS/Getting_Started/Lesbares_CSS", "Lesbares CSS")}}

diff --git a/files/de/web/guide/css/getting_started/textstyles/index.html b/files/de/web/guide/css/getting_started/textstyles/index.html deleted file mode 100644 index 7a3a40f6e0..0000000000 --- a/files/de/web/guide/css/getting_started/textstyles/index.html +++ /dev/null @@ -1,152 +0,0 @@ ---- -title: Textstyles -slug: Web/Guide/CSS/Getting_started/Textstyles -translation_of: Learn/CSS/Styling_text/Fundamentals -translation_of_original: Web/Guide/CSS/Getting_started/Text_styles ---- -

{{ CSSTutorialTOC() }}

- -

{{previousPage("/de/docs/Web/Guide/CSS/Getting_Started/Lesbares_CSS", "Lesbares CSS")}}Das ist der siebte Teil des CSS Getting Started Tutorials. Er enthält weitere Beispiele für Textstyles. Sie verändern Ihren Stylesheet, um verschiedene Schriftarten zu verwenden.

- -

Information: Textstyles

- -

CSS besitzt verschiedene Eigenschaften, um Text zu gestalten.

- -

Es gibt zur Gemütlichkeit eine Eigenschaft {{ cssxref("font") }}, mit der sich verschiedene Aspekte auf einmal definieren lassen, wie zum Beispiel:

- -
    -
  • Fettgedruckt, kursiv und kleine Großbuchstaben
    • -
  • Schriftgröße
    • -
  • Zeilenhöhe
    • -
  • Schriftart
    • -
- -
-
Beispiel
- -
p {
-  font: italic 75%/125% "Comic Sans MS", cursive;
-}
-
- -

Diese Regel setzt verschiedene Eigenschaften der Schrift und macht alle Absätze kursiv.

- -

Die Schriftgröße wird auf drei Viertel der Größe jedes Absatzelements gesetzt und die Zeilenhöhe wird auf 125% (ein wenig größer als normal) gesetzt.

- -

Die Art der Schrift wird auf auf Comic Sans MS gesetzt. Wenn aber die Schriftart im Webbrowser nicht verfügbar ist, wird die standardmäßig kursiv (handgeschriebene) Art verwendet.

- -

Diese Regel hat den Nebeneffekt, dass alle dicken und kleinen Anfangsbuchstaben auf normal zurückgesetzt werden.

-
- -

Schriftarten

- -

Sie können nicht vorhersagen welche Schriftarten der Leser Ihres Dokument installiert hat. Deshalb ist es eine gute Idee eine Liste von Alternativen in bevorzugter Reihenfolge anzugeben.

- -

Beenden Sie die Liste mit einer eingebauten Standardschriftart: serif, sans-serif, cursive, fantasy oder monospace.

- -

Wenn die Schriftart ein Feature des Dokuments nicht unterstützt, kann der Webbrowser eine andere Schriftart dafür auswählen. Das Dokument könnte zum Beispiel spezielle Zeichen enthalten, die von der Schriftart nicht unterstützt werden. Wenn der Webbrowser eine andere Schriftart finden kann, die diese Zeichen unterstützt, verwendet er diese.

- -

Um nur Schriftart anzugeben, können Sie die {{ cssxref("font-family") }} Eigenschaft verwenden.

- -

Schriftgrößen

- -

Benutzer des Webbrowsers können die standardmäßige Schriftgröße überschreiben oder die Textgröße während dem Lesen ändern. Deshalb macht es überall wo es geht Sinn eine relative Größe zu verwenden.

- -

Sie können die bereits vordefinierten Werte wie small, medium und large verwenden. Sie können aber auch relative Werte zur Schriftgröße des Elternelements wie smaller, larger, 150% oder 1.5em verwenden. Ein "em" ist äquivalent zu der Breite des Buchstabens "m" (für die Schriftgröße des Elternelements). Damit sind 1.5em eineinhalb Mal so groß als die Schrift im Elternelement.

- -

Wenn nötig können Sie eine genaue Größe wie 14px (14 Pixel) für einen Bildschirm oder 14pt (14 Punkt) für einen Drucker angeben. Das ist aber für Benutzer mit einer Sehbehinderung nicht zugänglich, da sie damit die Schriftgröße nicht mehr ändern können. Eine zugänglichere Strategie wäre, eine bereits vordefinierten Wert wie medium auf dem höchsten Element im Dokument zu setzen und dann relative Größen auf allen Kindelementen zu verwenden.

- -

Um nur die Schriftgröße anzugeben, können Sie die {{ cssxref("font-size") }} Eigenschaft verwenden.

- -

Zeilenhöhe

- -

Die Zeilenhöhe gibt den Abstand zwischen Zeilen an. Wenn Ihr Dokument lange Absätze über viele Zeilen hat, kann ein größerer Zeilenabstand als normal besonders bei einer kleinen Schriftgröße einfacher zum Lesen zu sein.

- -

Um nur die Zeilenhöhe anzugeben, können Sie die {{ cssxref("line-height") }} Eigenschaft verwenden.

- -

Textdekoration

- -

Die separate {{ cssxref("text-decoration") }} Eigenschaft kann andere Styles wie underline oder line-through definieren. Sie können sie auf none setzen, um explizit jede Textdekoration zu entfernen.

- -

Andere Eigenschaften

- -

Um nur kursiv anzugeben, verwenden Sie  {{ cssxref("font-style") }}: italic;
- Um nur fettgedruckt anzugeben, verwenden Sie {{ cssxref("font-weight") }}: bold;
- Um nur kleine Großbuchstaben anzugeben, verwenden Sie  {{ cssxref("font-variant") }}: small-caps;

- -

Um eine Eigenschaft einzeln abzuschalten, können Sie den Wert normal oder inherit angeben.

- -
-
Mehr Details
- -

Sie können Textstyles auf viele andere Wege angeben.

- -

Einige der hier erwähnten Eigenschaften haben zum Beispiel andere Werte, die Sie auch verwenden können.

- -

Vermeiden Sie in einem komplexen Stylesheet die abgekürzte font Eigenschaft, da sie Nebeneffekte hat (setzt andere individuelle Eigenschaften zurück).

- -

Für alle Details von Eigenschaften, die mit Schriften zu tun haben, gehen Sie bitte auf Fonts in der CSS Spezifikation. Die kompletten Details zur Textdekoration finden Sie unter Text.

- -

Wenn Sie nicht von den installierten Schriftarten auf dem System des Benutzers abhängig sein wollen, können Sie {{ cssxref("@font-face") }} verwenden, um einen Online Font anzugeben. Dazu muss der Webbrowser des Benutzers diese Regel aber auch unterstützen.

-
- -

Aktion: Schriftart angeben

- -

Für ein einfaches Dokument können sie eine Schrift auf dem {{ HTMLElement("body") }} Element angeben und der Rest des Dokuments erbt diese Regel.

- -
    -
  1. Bearbeiten Sie Ihre CSS Datei.
    2. -
  2. Fügen sie die folgendene Regel hinzu, um die Schrift im gesamten Dokument zu bestimmen. Der Anfang der CSS Datei ist eine logische Stelle dafür, aber es hat auch an anderen Stellen in der Datei denselben Effekt: - 
    body {
-  font: 16px "Comic Sans MS", cursive;
-}
-
    -
    3. -
  3. Kommentieren sie Regel und fügen Sie nach Ihrem Geschmak Zeilenumbrüche und Leerzeichen hinzu.
    4. -
  4. Speichern Sie die Datei und aktualisieren Sie Ihren Webbrowser um die Änderung zu sehen. Wenn Sie die Schrift Comic Sans MS oder eine andere Schrift, welche kursiv nicht unterstützt, auf Ihren Computer haben, wählt Ihr Webbrowser eine andere Schriftart für den kursiven Text in der ersten Zeile aus: - - - - - - - - - -
    Cascading Style Sheets
    Cascading Style Sheets
    -
    5. -
  5. Wählen Sie Ansicht > Schirftgröße > Vergrößern (oder Ansicht > Zoom > Vergrößern) im Menü Ihres Webbrowsers aus. Obwohl Sie 16 Pixel im Sil angegeben haben, kann der Benutzer die Schriftgröße in der Ansicht ändern.
    6. -
- -
-
Herausforderung
- -

Machen Sie alle sechs Anfangsbuchstaben zweimal so groß in der serif Standardschrift vom Webbrowser ohne etwas anderes zu verändern:

- - - - - - - - - - -
Cascading Style Sheets
Cascading Style Sheets
- -
-
Mögliche Lösung
- -

Fügen Sie die folgende Style Deklaration zur strong Regel hinzu:

- -
  font: 200% serif;
-
-Wenn Sie getrennte Deklarationen für font-size und font-family verwenden, dann wird die font-style Einstellung auf dem ersten Absatz nicht überschrieben. - -

 

-Hide solution
-Sehen Sie sich die Lösung an.
- -

Was kommt als Nächstes?

- -

{{nextPage("/de/docs/Web/Guide/CSS/Getting_started/Farbe", "Farbe")}}Ihr Beispieldokument verwendet bereits verschiedene benannte Farben. Der nächste Teil listet die Namen der Standardfarben auf und erklärt wie Sie eigene Farben definieren können.

diff --git a/files/de/web/guide/css/getting_started/was_ist_css/index.html b/files/de/web/guide/css/getting_started/was_ist_css/index.html deleted file mode 100644 index 0641d048e4..0000000000 --- a/files/de/web/guide/css/getting_started/was_ist_css/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: Was ist CSS -slug: Web/Guide/CSS/Getting_started/Was_ist_CSS -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/What_is_CSS ---- -
{{CSSTutorialTOC}}
- -

{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started", "Einführung")}} Das erste Kapitel von CSS für Einsteiger erklärt kurz CSS. Sie werden in den nächsten Kapiteln ein simples Dokument zum Üben erstellen.

- -

Was ist CSS

- -

Cascading Style Sheets (CSS für "gestufte Gestaltungsbögen") ist eine Sprache, die definiert wie Dokumente dem Benutzer präsentiert werden.

- -

Ein Dokument ist eine Ansammlung von Informationen (Texte, Bilder, …), die mit einer Auszeichnungssprache (Markup Language) strukturiert werden. In der Auszeichnungssprache wird angegeben, dass ein Text beispielsweise als Überschrift oder als Link dargestellt werden soll. Es wird jedoch NICHT angegeben, WIE eine Überschrift oder ein Link dargestellt werden sollen. Das genau macht CSS.

- -

Ein solches Dokument einem Benutzer zu präsentieren bedeutet, es in einer lesbaren Form darzustellen. Browser wie Firefox, Chrome oder Internet Explorer sind dafür entworfen, Dokumente visuell zu präsentieren. Beispielsweise auf einem Computer Monitor, Beamer oder Drucker.

- -
-

Beispiele

- -
    -
  • Eine Webseite, wie diese hier, ist ein Dokument.
    - Die Information, die Sie auf einer Webseite sehen können, ist normalerweise mit der Auszeichnungssprache HTML (HyperText Markup Language) geschrieben.
    • -
  • Auch Dialoge in einer Anwendung - auch Dialogfenster genannt - sind oft Dokumente. Solche Dialoge können auch mit einer Auszeichnugssprache, wie XUL (XML User Interface Language für XML Benutzeroberflächensprache), strukturiert sein. XML oder XUL sind also Beispiele für andere Auszeichungssprachen.
    • -
-
- -

In dieser Anleitung gibt es Boxen mit der Beschriftung Weitere Details, wie sie unten zu sehen ist. Solche Boxen stellen weiterführende Informationen und Links zu einem Thema bereit. Lesen Sie sie, folgen Sie den Links oder überspringen Sie diese Boxen und lesen Sie sie später.

- -
-
Weitere Details
- -

Ein Dokument ist nicht dasselbe wie eine Datei. Sie können aber selbstverständlich ein Dokument als Datei abspeichern.

- -

Das Dokument, das Sie gerade lesen, ist nicht als Datei gespeichert. Wenn Ihr Browser diese Seite anfragt, durchsucht der Server eine Datenbank und generiert dieses Dokument indem er Teile daraus aus mehreren, verschiedenen Dateien zusammensetzt.

- -

Sie werden dennoch in diesem Tutorial mit Dokumenten arbeiten, die in Dateien gespeichert sind.

- -

Weiterführende Infromationen über Dokumente und Auszeichnungssprachen finden Sie hier:

- - - - - - - - - - - - - - - - - - - - -
HTMLfür Webseiten
XMLallgemein für strukturierte Dokumente
SVGfür Grafiken
XULfür Userinterfaces in Mozilla
- -

Im Teil II dieses Tutorials werden Sie Beispiele für diese Auszeichnungssprachen sehen.

-
- -
-
Weitere Details
- -

In korrekter CSS-Terminologie wird das Programm, das ein Dokument darstellt user agent (UA) genannt. Ein Browser ist nur eine Art eines UA. CSS ist nicht nur für Browser oder Präsentationen interessant, aber im Teil I dieses Tutorials werden Sie nur mit CSS in einem Browser arbeiten.

- -

Für korrekte Definitionen der CSS-Terminologie sehen Sie unter Definitions in der CSS Spezifikation des World Wide Web Consortium (W3C) nach. Das ist eine internationale Gemeinschaft, die offene Standards für das Web definiert.

-
- -

Action: Ein Dokument erstellen

- -
<!DOCTYPE html>
-<html>
-  <head>
-  <meta charset="UTF-8">
-  <title>Sample document</title>
-  </head>
-
-  <body>
-    <p>
-      <strong>C</strong>ascading
-      <strong>S</strong>tyle
-      <strong>S</strong>heets
-    </p>
-  </body>
-</html>
- -

{{ LiveSampleLink('Action_Ein_Dokument_erstellen', 'Schauen Sie sich die Demo an') }}

- -
    -
  1. Erstellen Sie einen neuen Ordner irgendwo auf Ihrem Computer, um die Übungen für dieses Tutorial abzuspeichern.
    2. -
  2. Öffnen Sie einen Texteditor und erstellen Sie eine neue Textdatei. Diese Datei wird das Dokument für die nächsten Übungen enthalten.
    3. -
  3. Kopieren Sie den folgenden HTML-Code in Ihre Datei, und speichern Sie diese unter dem Namen doc1.html
    4. -
  4. Öffnen Sie in Ihrem Browser ein neues Fenster oder einen neuen Tab und dann öffnen Sie darin die Datei, die Sie gerade gespeichert haben. Sie sollten dann folgenden Text mit fetten Anfangsbuchstaben sehen:
    5. -
- - - - - - - -
Cascading Style Sheets
- -

Möglicherweise sieht der Text in Ihrem Browser etwas anders aus als hier dargestellt. Das liegt daran, dass manche der Einstellungen in Ihrem Browser anders sein können, als wir sie hier verwendet haben. Das tut aber vorerst nichts zur Sache.

- -

Was nun?

- -

{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Wofür CSS?")}}Ihr Dokument verwendet vorerst noch kein CSS. Im nächsten Abschnitt werden Sie CSS verwenden um die Darstellung Ihres Dokumentes zu verändern.

diff --git a/files/de/web/guide/css/getting_started/why_use_css/index.html b/files/de/web/guide/css/getting_started/why_use_css/index.html deleted file mode 100644 index 01933a9171..0000000000 --- a/files/de/web/guide/css/getting_started/why_use_css/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: Why use CSS? -slug: Web/Guide/CSS/Getting_started/Why_use_CSS -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/Why_use_CSS ---- -

{{ CSSTutorialTOC() }}

- -

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/What_is_CSS", "What is CSS?") }}Dieser zweite Teil des  CSS Getting Started Tutorials erklärt die Beziehung zwischen CSS and Dokumenten. Im Beispiel werden Sie lernen, wie Sie ein CSS-Stylesheet Ihrem Dokument hinzufügen.

- -

Warum CSS ?

- -

Mithilfe von CSS definieren Sie Styles für Ihr Dokument. Das beinhaltet das Design, Layout und Varianten der Darstellung für verschiedene Geräte und Bildschirmgrößen. Sie können Ihr CSS direkt in den <Kopfbereich> (head) Ihres Dokumentes einbetten (eingebettetes Stylesheet) oder eine separate CSS-Datei mit Ihrem Dokument verknüpfen (externes Stylesheet). Dazu müssen Sie einfach einen Link auf Ihr Stylesheet in den <Kopfbereich> Ihres Dokumentes einbauen.

- -

Die Trennung von Inhalt und Form mithilfe eines externen Stylesheets hat viele Vorteile:

- -
    -
  • Sie müssen nicht alles doppelt und mehrfach tun
    • -
  • Die Wartung wird vereinfacht
    • -
  • Ein ganzer Webauftritt kann an einer zentralen Stelle umgestaltet werden.
    • -
- -
-
Beispiel
- -

Mit CSS speichern Sie die Darstellungsinformationen in einer gemeinsamen Datei, die alle Seiten verwenden, die damit verknüpft sind. So können Sie beispielsweise die Farbe oder den Stil einer Überschrift für alle Ihre Webseiten ändern, die auf das selbe CSS-Stylesheet verlinken, indem Sie einfach einige wenige CSS-Attribute in diesem Stylesheet ändern.

- -

Wenn ein User eine Webseite betrachten will, lädt der Browser die Styleinformationen gemeinsam mit dem Inhalt der Seite.

- -

Wenn ein User eine Webseite drucken will, können Sie ihm unterschiedliche Stilinformationen für den Druck anbiete, sodass die ausgedruckte Seite schön gestaltet ist.

-
- -

Wie arbeiten nun HTML und CSS zusammen? Generell kann man sagen: Verwenden Sie HTML um den Inhalt (content) Ihres Dokumentes zu beschreiben und CSS um die Form, den Darstellungsstil Ihrer Seite zu beschreiben und nicht ihren Inhalt. Etwas später werden Sie in diesem Tutorial auch Ausnahmen von dieser Regel kennenlernen.

- -
-
Weitere Details
- -

Auch eine Auszeichnungssprache wie HTML stellt Methoden zur Verfügung um einen Darstellungsstil zu definieren.

- -

Beispielsweise können Sie in HTML einen <b>Tag verwenden um Text fett darzustellen, oder Sie können die Hintergrundfarbe eines Dokumentes mithilfe des <body>Tags festlegen.

- -

Wenn Sie CSS verwenden vermeiden Sie üblicherweise diese Möglichkeiten der Auszeichnungssprache damit alle Styleinformationen Ihrers Dokumentes an einer Stelle beisammen bleiben.

-
- -

Action: Ein CSS-Stylesheet anlegen

- -
    -
  1. Erstellen Sie ein eneue Textdatei im selben Verzeichnis wo sie schon Ihr Dokument doc1.html abgelegt haben.
    2. -
  2. Speichern Sie Ihre datei als: style1.css. Das wird nun Ihr Stylesheet.
    3. -
  3. Kopieren Sie nachfolgende Zeile in Ihr neu erstelltes Stylesheet und speichern dieses. - 
    strong {color: red;}
-
    -
    4. -
- -

Verknüpfung von Dokument und Stylesheet

- -
    -
  1. Um nun die beiden Dateien miteinander zu verknüpfen, bearbeiten Sie Ihre HTML Datei.  Fürgen Sie die unten hervorgehobene Zeile hinzu: - 
    <!DOCTYPE html>
-<html>
-  <head>
-  <meta charset="UTF-8">
-  <title>Sample document</title>
-  <link rel="stylesheet" href="style1.css">
-  </head>
-  <body>
-    <p>
-      <strong>C</strong>ascading
-      <strong>S</strong>tyle
-      <strong>S</strong>heets
-    </p>
-  </body>
-</html>
-
    -
    2. -
  2. Speichern Sie die HTML Datei und aktualisieren Sie Ihre Browserdarstellung (reload). Das Stylesheet hat die Initialien rot gefärbt: - - - - - - -
    Cascading Style Sheets
    -
    3. -
- -

{{ LiveSampleLink('Action.3A_Creating_a_stylesheet', 'View above Demo') }}

- -
-
Challenge
- -

Außer rot (red) erlaubt CSS noch andere Farbnamen.

- -

Versuchen Sie fünf weitere Farbnamen herauszufinen ohne in einem Referenzdokument nachzusehen.

- -
-
Possible solution
- -

CSS supports common color names like orange, yellow, blue, green, or black. It also supports some more exotic color names like chartreuse, fuschia, or burlywood. See CSS Color value for a complete list as well as other ways of specifying colors.

-Hide solution
-See a solution for the challenge.
- -

Was nun?

- -

{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works", "Wie CSS funktioniert.")}}Sie haben nun Ihr HTML-Dokument mit Ihrem separaten CSS-Stylesheet verknüpft. Als nächstes lernen Sie, wie Ihr Browser diese beiden kombiniert um das Dokument darzustellen.

diff --git a/files/de/web/guide/css/getting_started/wie_css_funktioniert/index.html b/files/de/web/guide/css/getting_started/wie_css_funktioniert/index.html deleted file mode 100644 index 8e980ce43c..0000000000 --- a/files/de/web/guide/css/getting_started/wie_css_funktioniert/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: Wie CSS funktioniert -slug: Web/Guide/CSS/Getting_started/Wie_CSS_funktioniert -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/How_CSS_works ---- -

{{ CSSTutorialTOC() }}

- -

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Warum CSS?") }}Dieser dritte Abschnitt des CSS Getting Started Tutorials erklärt wie CSS funktioniert, was im Browser damit passiert und welchen Zweck das Document Object Model (DOM) hat. Sie werden auch lernen Ihr Beispieldokument zu analysieren.

- -

Wie CSS funktioniert

- -

Wenn ein Browser ein Dokument darstellt, muss er den Inhalt des Dokuments mit den Stilinformationen kombinieren. Er bearbeitet das Dokument in zwei Schritten:

- -
    -
  1. Der Browser kombiniert die Auszeichnungssprache (HTML) und das CSS in das DOM (Document Object Model). Das DOM wird aus diesen beiden als Gesamtdokument im Computerspeicher abgelegt. Es kombiniert also Inhalt und Stil.
    2. -
  2. Der Browser stellt den Inhalt des DOM dar.
    3. -
- -

Eine Auszeichnungssprache verwendet Elemente um die Dokumentenstruktur darzustellen. Sie markieren Elemente mithilfe von Tags. Das sind Schlüsselworte zwischen zwei '<' spitzen Klammern '>'. Die meisten Elemente haben paarweise Tags - einen Start-Tag <schluesselwort> und einen End-Tag </schluesselwort>, wobei das selbe Schlüsselwort verwendet wird, und das Endtag mit einem zusätzlichen '/' vor dem Schlüsselwort gekennzeichnet ist.

- -

Abhängig von der Auszeichnungssprache haben manche Elemente NUR ein Start-Tag. Solche Tags haben ein '/' nach dem Schlüsselwort. <schluesselwort/>.

- -

Ein Element kann auch andere Elemente innerhalb seines Start- und End-Tags enthalten. Man spricht dann auch von einem Container. Vergessen Sie niemals Tags innerhalb eines Containers auch wieder zu schließen!

- -

Ein DOM hat eine Baumstruktur. Jedes Element, Attribut und Textelement innerhalb der Auszeichnungssprache ist ein Knoten (node) innerhalb der Baumstruktur. Knoten sind durch Ihre Beziehung zu anderen DOM-Knoten charakterisiert. Manche Elemente sind Eltern von Kind-Knoten und Kind-Knoten haben Geschwister.

- -

Sie müssen das DOM verstehen, damit Sie Ihr CSS erstellen, debuggen und warten können, denn im COM kommen CSS und Dokumenteninhalt zusammen.

- -
-
Beispiel
- -

In Ihrem Beispieldokument erzeugen der <p>-Tag und sein End-Tag </p> einen Container:

- -
<p>
-  <strong>C</strong>ascading
-  <strong>S</strong>tyle
-  <strong>S</strong>heets
-</p>
-
- -

Live Beispiel

- -

http://jsfiddle.net/djaniketster/6jbpS/

- -

Im DOM, ist der entsprechende P-Knoten ein Eltern-Element. Seine Kinder sind die STRONG- und die nachfolgenden Knoten. Der STRONG Knoten sind ihrerseits wieder Eltern mit dem Text als ihre Kinder:

- -
P
-├─STRONG
-│ └─"C"
-├─"ascading"
-├─STRONG
-│ └─"S"
-├─"tyle"
-├─STRONG
-│ └─"S"
-└─"heets"
-
- -

Action: Ein DOM analysieren

- -

Den DOM Inspector verwenden

- -

Um ein DOM zu analysieren, benötigen Sie eine spezielle Software. Dafür können Sie beispielsweise Mozilla's DOM Inspector (DOMi) Add-on verwenden. Sie brauchen sich nur das Add-on zu installieren (siehe unten).

- -
    -
  1. Verwenden Sie den Mozilla Browser um Ihr HTML-Beispieldokument zu öffnen .
    2. -
  2. Wählen Sie Tools > DOM Inspector aus der Menüleiste oder Tools > Web Development > DOM Inspector. -
    -
    Weitere Details
    - -

    Wenn Ihr Mozilla Browser kein DOMi hat, können Sie ihn auf der Add-ons Seite installieren und den Browser neu starten. Setzen Sie dann mit dem Tutorial fort.

    - -

    Wenn Sie DOMi nicht installieren wollen (oder Sie einen anderen Browser verwenden), dann können Sie Web X-Ray Goggles verwenden, wie wir Ihnen weiter unten erklären werden. Oder Sie können diesen Abschnitt auch überspringen.

    -
    -
    3. -
  3. In DOMi, expandieren Sie die Knoten in Ihrem Dokument indem Sie auf ihre Pfeile klicken. -

    Anmerkung: Leerzeichen in Ihrer HTML datei können in DOMi leere Text-Knoten hervorrufen. Diese können Sie einfach ignorieren.

    - -

    Je nachdem welche Knoten Sie expandiert haben könnte ein  Teil des Ergebnisses so aussehen:

    - - 
    │ ▼╴P
-│ │ │ ▼╴STRONG
-│ │ └#text
-│ ├╴#text
-│ ►╴STRONG
-│ │
    - -

    Wenn Sie einen Knoten auswählen, können Sie im Panel auf der rechten Seite von DOMi Details dazu sehen. So sehen Sie dort etwa den Text eines Text-Knotens.

    - -

    Wenn Sie ein Element auswählen, analysiert DOMi dieses Element und zeigt Ihnen zahlreiche Informationen dazu im rechten Panel. Style Informationen sind ein Teil davon.

    -
    4. -
- -
-
Challenge
- -

Klicken Sie in DOMi auf einen STRONG Knoten.

- -

Benutzen Sie das rechte Panel von DOMi um herauszufinden wo die Farbe dieses Knotes auf rot gesetzt wird und wo die Schrift auf fett gesetzt wird.

- -
-
Possible solution
- -

In the menu above the right-hand pane, choose CSS Rules. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the font-weight property as bolder; your stylesheet defines the color property as red.

-Hide solution
-Lösung.
- -

Web X-Ray Goggles

- -

Web X-Ray Goggles zeigt weniger Information an als DOM Inspektor. Dafür ist es einfacher zu installieren und auch zu verwenden.

- -
    -
  1. Gehen Sie auf die Seite Web X-Ray Goggles.
    2. -
  2. Ziehen Sie den Link für das Bookmarklet auf dieser Seite auf den Toolbar Ihres Browsers.
    3. -
  3. Öffnen Sie Ihr HTML Dokument.
    4. -
  4. Aktivieren Sie Web X-Ray Goggles indem Sie das Bookmarklet im Toolbar anklicken.
    5. -
  5. Bewegen Sie Ihren Mauszeiger in Ihrem Dokument um seine Elemente zu sehen.
    6. -
- -

Was nun?

- -

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading & Inheritance") }}If you took the challenge, you saw that style information from more than one place interacts to create the final style for an element. The next page explains more about these interactions.

diff --git a/files/de/web/guide/css/scaling_background_images/index.html b/files/de/web/guide/css/scaling_background_images/index.html deleted file mode 100644 index abd1e8f200..0000000000 --- a/files/de/web/guide/css/scaling_background_images/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: Hintergrundbilder skalieren -slug: Web/Guide/CSS/Scaling_background_images -tags: - - CSS Hintergrundbild - - Skalierung Hintergrundbild -translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images -translation_of_original: Web/CSS/CSS_Background_and_Borders/Scaling_background_images ---- -

Die {{ cssxref("background-size") }} CSS Eigenschaft ermöglicht es, die Größe von Hintergrundbildern einzustellen, anstatt das voreingestellte Verhalten, das Bild auf die volle Größe zu kacheln, zu verwenden.Man kann das Bild nach Wunsch nach oben oder unten skalieren.

- -

Kacheln eines großen Bildes

- -

Nehmen wir ein großes Bild, ein 2982x2808 Firefox Logo. Wir wollen (auch wenn das höchstwahrscheinlichst ein grauenhaft schlechtes Seitendesign ergibt) vier Kopien dieses Bildes in ein 300x300 Pixel Quadrat kacheln, damit es so aussieht:

- -

- -

Das wird erreicht, indem wir folgendes CSS verwenden:

- -
.square {
-  width: 300px;
-  height: 300px;
-  background-image: url(firefox_logo.png);
-  border: solid 2px;
-  text-shadow: white 0px 0px 2px;
-  font-size: 16px;
-  background-size: 150px;
-}
-
- -

Man braucht für  {{ cssxref("background-size") }} kein Präfix mehr zu setzen, jedoch können  Präfix-Versionen hinzugefügt werden, wenn ältere Browser angesprochen werden sollen.

- -

Dehnen eines Bildes

- -

Sowohl die horizontale als auch die vertikale Größe des Bildes kann angegeben werden, wie hier angegeben:

- -
background-size: 300px 150px;
-
- -

So sieht das Ergebnis aus:

- -

- -

Hochskalieren eines Bildes

- -

Auf der anderen Seite des Spektrums kann ein Bild im Hintergrund auch hochskaliert werden. Hier wird ein 32x32 Pixel favicon auf 300x300 Pixel skaliert:

- -

- -
.square2 {
-  width: 300px;
-  height: 300px;
-  background-image: url(favicon.png);
-  background-size: 300px;
-  border: solid 2px;
-  text-shadow: white 0px 0px 2px;
-  font-size: 16px;
-}
-
- -

Wie man sehen kann, ist das CSS im Grunde identisch, außer dem Namen der Bilddatei.

- -

Spezielle Werte: "contain" und "cover"

- -

Neben den {{cssxref("<length>")}} Werten, bietet die {{ cssxref("background-size") }} CSS Eigenschaft zwei spezielle Werte für Größen, contain und cover. Sehen wir uns diese an.

- -

contain

- -

Der contain Wert spezifiziert, unabhängig von der Größe der umgebenden Box, die Skalierung des Hintergrundbildes so, dass jede Seite so breit als irgend möglich angezeigt wird ohne über die Länge der korrespondierenden Seite des Containers hinauszugehen. Versuche mit einem Browser, der skalierende Hintergründe unterstützt (wie z. B.  Firefox 3.6 oder höher), dieses Fenster in der Größe zu verändern, um das Verhalten am untenstehenden Live-Beispiel zu sehen.

- -
-

{{ EmbedLiveSample("contain", "100%", "220") }}

-
- -
<div class="bgSizeContain">
-  <p>Try resizing this window and see what happens.</p>
-</div>
- -
.bgSizeContain {
-  height: 200px;
-  background-image: url(https://mdn.mozillademos.org/files/8971/firefox_logo.png);
-  background-size: contain;
-  border: 2px solid darkgray;
-  color: #000; text-shadow: 1px 1px 0 #fff;
-}
- -

cover

- -

Der cover Wert spezifizert, dass das Hintergundbild in der Größe so angezeigt wird, dass es selbst so klein als möglich ist, dabei aber auf alle Fälle in beiden Dimensionen größer oder gleich der jeweiligen korresponierenden Maße des Containers ist. 

- -
{{ EmbedLiveSample("cover", "100%", "220") }}
- -

Das Beispiel verwendet folgendes HTML & CSS:

- -
<div class="bgSizeCover">
-  <p>Try resizing this window and see what happens.</p>
-</div>
- -
.bgSizeCover {
-  height: 200px;
-  background-image: url('https://mdn.mozillademos.org/files/8971/firefox_logo.png');
-  background-size: cover;
-  border: 2px solid darkgray;
-  color: #000; text-shadow: 1px 1px 0 #fff;
-
- -

Siehe auch

- -
    -
  • {{ cssxref("background-size") }}
    • -
  • {{ cssxref("background") }}
    • -
diff --git a/files/de/web/guide/dom/index.html b/files/de/web/guide/dom/index.html deleted file mode 100644 index fc26bc0bee..0000000000 --- a/files/de/web/guide/dom/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: DOM developer guide -slug: Web/Guide/DOM -tags: - - API - - DOM - - Guide - - NeedsTranslation - - TopicStub -translation_of: Web/API/Document_Object_Model -translation_of_original: Web/Guide/API/DOM ---- -

{{draft}}

-

The Document Object Model is an API for HTML and XML documents. It provides a structural representation of the document, enabling the developer to modify its content and visual presentation. Essentially, it connects web pages to scripts or programming languages.

-

All of the properties, methods, and events available to the web developer for manipulating and creating web pages are organized into objects (e.g., the document object that represents the document itself, the table object that represents a HTML table element, and so forth). Those objects are accessible via scripting languages in most recent web browsers.

-

The DOM is most often used in conjunction with JavaScript. However, 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 on JavaScript throughout this site, implementations of the DOM can be built for any language.

-

The World Wide Web Consortium establishes a standard for the DOM, called the W3C DOM. It should, now that the most important browsers correctly implement it, enable powerful cross-browser applications.

-

Why is the DOM important?

-

"Dynamic HTML" (DHTML) is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated. The W3C DOM Working Group is working hard to make sure interoperable and language-neutral solutions are agreed upon (see also the W3C FAQ). As Mozilla claims the title of "Web Application Platform", support for the DOM is one of the most requested features, and a necessary one if Mozilla wants to be a viable alternative to the other browsers.

-

Even more important is the fact that the user interface of Mozilla (also Firefox and Thunderbird) is built using XUL, using the DOM to manipulate its own UI.

-

More about the DOM

-

{{LandingPageListSubpages}}

diff --git a/files/de/web/guide/dom/manipulating_the_browser_history/index.html b/files/de/web/guide/dom/manipulating_the_browser_history/index.html deleted file mode 100644 index 6f59cbbdc3..0000000000 --- a/files/de/web/guide/dom/manipulating_the_browser_history/index.html +++ /dev/null @@ -1,227 +0,0 @@ ---- -title: Manipulieren des Browser-Verlaufes -slug: Web/Guide/DOM/Manipulating_the_browser_history -tags: - - Verlauf -translation_of: Web/API/History_API ---- -

Das DOM {{ domxref("window") }} Objekt stellt Zugriffsmöglichkeiten auf den Browser-Verlauf über das {{ domxref("window.history", "history") }} Objekt bereit. Es bietet nützliche Methoden und Einstellungen, die es ermöglichen, den Zurück- und Vorwärts-Button und den Browser-Verlauf zu steuern und – seit HTML5 – diesen auch zu manipulieren

- -

Durch den Verlauf gehen

- -

Um durch den Verlauf des Benutzers zu gehen gibt es die Methoden back(), forward() und go().

- -

Vor und zurück bewegen

- -

Um im Verlauf zurück zu navigieren, nutze:

- -
window.history.back();
-
- -

Dies hat denselben Effekt, wie wenn der Benutzer den Zurück-Knopf drückt.

- -

Auf ähnliche Weise kann so vorwärts navigiert werden: 

- -
window.history.forward();
-
- -

An einen bestimmten Punkt im Verlauf springen

- -

Mit der Methode go() ist es möglich, eine spezifische Seite aus dem Verlauf zu laden, welche relativ zur momentanen Seite im Verlauf steht. Die aktuelle Seite hat hierbei natürlich Index 0.

- -

Um eine Seite rückwärts zu gehen (äquivalent zu back()):

- -
window.history.go(-1);
-
- -

Um eine Seite vorwärts zu gehen (äquivalent zu forward()):

- -
window.history.go(1);
-
- -

Gleichermassen ist es möglich, 2 Seiten vorwärts mit go(2) zu gehen, 3 rückwärts mit go(-3) und so weiter.

- -

Die Anzahl der Seiten im history-Stapel kann mithilfe der Eigenschaft length bestimmt werden:

- -
var numberOfEntries = window.history.length;
-
- -
Anmerkung: Der Internet Explorer unterstützt das Übergeben von String URLs als Parameter für go(); dies ist nicht standardisiertes Verhalten und wird von Gecko nicht unterstützt.
- -

Hinzufügen und Ändern von Verlaufseinträgen

- -

{{ gecko_minversion_header("2") }}

- -

Mit HTML5 wurden die Methoden history.pushState() und history.replaceState() eingeführt, welche jeweils das Hinzufügen und die Manipulation von Verlaufseinträgen ermöglichen. Diese stehen in Verbindung mit dem {{ domxref("window.onpopstate") }}-Event.

- -

Wenn history.pushState() benutzt wird, ändert das den Referrer der als HTTP-Header in danach erstellten XMLHttpRequest-Objekten genutzt wird. Der Referrer wird die URL des Dokumentes sein, dessen Fenster this zur Zeit der Erstellung des XMLHttpRequest-Objektes ist.

- -

Beispiel für die pushState()-Methode

- -

Angenommen, http://mozilla.org/foo.html führt folgendes JavaScript aus:

- -
var stateObj = { foo: "bar" };
-history.pushState(stateObj, "seite 2", "bar.html");
-
- -

Das ändert die angezeigte URL zu http://mozilla.org/bar.html, bringt den Browser aber nicht dazu, bar.html zu laden oder überhaupt dessen Existenz zu überprüfen.

- -

Man nehme weiter an, der Benutzer navigiert zu http://google.com und klickt dann Zurück. Zu diesem Zeitpunkt wird die URL-Bar http://mozilla.org/bar.html anzeigen, und die Seite erhält ein popstate-Event mit einem Status-Objekt, das eine Kopie von stateObj darstellt. Die Seite selbst wird aussehen wie foo.html, aber während dem popstate-Event kann der Inhalt bearbeitet worden sein.

- -

Wenn der Benutzer noch einmal Zurück drückt, ändert sich die URL zu http://mozilla.org/foo.html, und die Seite erhält ein weiteres popstate-Event, dieses Mal mit einem null Status-Objekt. Auch hier wird der Inhalt der Seite nicht geändert, wenn das nicht manuell im popstate-Event vollzogen wird.

- -

Die pushState()-Methode

- -

pushState() übernimmt drei Parameter: ein state Objekt, einen title (welcher aktuell noch ignoriert wird), und (optional) eine URL. Betrachten wir die einzelnen Parameter genauer:

- -
    -
  • -

    state-Objekt — Das Status-Objekt ist ein JavaScript-Objekt, das mit dem per pushState() neu erzeugten history-Eintrag verknüpft ist. Jedesmal wenn der Benutzer zu diesem neuen Status navigiert, wird ein popstate-Event ausgelöst. Die state-Eigenschaft des Events enthält dabei eine Kopie des Status-Objektes des history-Eintrages.
    -
    - Das Status-Objekt kann alles sein, was sich serialisieren lässt. Weil Firefox state-Objekte auf dem Speicher den Nutzers ablegt, lassen sie sich auch wiederherstellen, nachdem der Nutzer seinen Browser neu gestartet hat, das serialisierte Abbild des Status-Objekt ist dabei auf 640k Zeichen begrenzt. Wird ein größeres Status-Objekt an pushState() übergeben, gibt die Methode eine Exception aus. Wenn mehr Speicherplatz benötigt wird, sollte sessionStorage und/oder localStorage verwendet werden.

    -
    • -
  • -

    title — Aktuell ignoriert Firefox diesen Parameter, wenngleich er in Zukunft verwendet werden könnte. Um gegenüber zukünftigen Änderungen abgesichert zu sein, empfiehlt sich, einen leeren String zu übergeben. Alternativ kann man hier einen kurzen Titel für den Status hinterlassen.

    -
    • -
  • -

    URL — Der neue history-Eintrag erhält mit diesem Parameter seine URL. Man beachte, dass der Browser nicht versuchen wird, nach einem Aufruf von pushState() diese URL zu laden, aber später dennoch versuchen könnte, beispielsweise nachdem der Nutzer seinen Browser neu gestartet hat. Die neue URL muss nicht absolute sein; wenn sie relativ ist, wird sie relativ zur aktuellen URL aufgelöst. Die neue URL muss denselben Ursprung haben wie die aktuelle, sonst gibt pushState() eine Exception zurück. Dieser Parameter ist optional; falls er übergeben wird, wird er auf die aktuelle URL des documents gesetzt.

    -
    • -
- -
Anmerkung: In Gecko 2.0 {{ geckoRelease("2.0") }} bis Gecko 5.0 {{ geckoRelease("5.0") }} wird das übergebene Objekt mittels JSON serialisiert. Ab Gecko 6.0 {{ geckoRelease("6.0") }}, übernimmt der structured clone algorithm die Serialisierung des Objekts. Dies erlaubt eine größere Vielfalt an Objekten, die sich sicher serialisieren lassen.
- -

In gewissem Sinne ist der Aufruf von pushState() ähnlich dem Setzen von window.location = "#foo", insofern beide einen weiteren history-Eintrag sowohl erzeugen als auch aktivieren, der mit dem aktuellen Document verbunden ist. Aber pushState() hat ein paar Vorteile:

- -
    -
  • Die neue URL kann irgendeine URL desselben Ursprungs sein wie die aktuelle URL.
    - Im Gegensatz dazu bleibt window.location nur dann im selben {{ domxref("document") }} selbst wenn man nur den hash ändert.
    • -
  • Man muss nicht die URL ändern, wenn man nicht will. 
    - Im Gegensatz dazu erzeugt window.location = "#foo"; nur dann einen neuen history-Eintrag, wenn der aktuelle hash nicht #foo ist. -
      -
    • Es lassen sich auch willkürliche Daten mit dem neuen history-Eintrag verbinden. Mit dem hash-basierten Ansatz müssen alle relevanten Daten in einen kurzen String kodiert werden.
      • -
    -
    • -
- -

Man beachte, dass pushState() niemals das Auslösen eines hashchange-Events verursacht, selbst wenn sich die neue URL von der alten nur durch ihren hash unterscheidet.

- -

Die replaceState()-Methode

- -

history.replaceState() arbeitet genauso wie history.pushState(), abgesehen davon, dass replaceState() den aktuellen history-Eintrag verändert, statt einen neuen zu erzeugen.

- -

replaceState() ist insbesondere nützlich, um das Status-Objekt oder die URL des aktuellen history-Eintrages als Reaktion auf eine Benutzer-Aktion zu aktualisieren.

- -
Anmerkung: In Gecko 2.0 {{ geckoRelease("2.0") }} bis Gecko 5.0 {{ geckoRelease("5.0") }} wird das übergebene Objekt mittels JSON serialisiert. Ab Gecko 6.0 {{ geckoRelease("6.0") }}, übernimmt der structured clone algorithm die Serialisierung des Objekts. Dies erlaubt eine größere Vielfalt an Objekten, die sich sicher serialisieren lassen.
- -

Beispiel für die replaceState()-Methode

- -

Angenommen, http://mozilla.org/foo.html führt folgendes JavaScript aus:

- -

 

- -
var stateObj = { foo: "bar" };
-history.pushState(stateObj, "page 2", "bar.html");
- -

Die Erläuterung dieser beiden Zeilen findet sich in unter "Beispiel für die pushState()-Metode". Weiterhin nehme man an, http://mozilla.org/bar.html würde dieses JavaScript ausführen:

- -
history.replaceState(stateObj, "page 3", "bar2.html");
- -

Dies lässt den Browser http://mozilla.org/bar2.html in der Adresszeile anzeigen, aber nicht bar2.html laden oder auch nur prüfen, ob bar2.html existiert.

- -

Nehmen wir nun an, dass der Nutzer zu http://www.microsoft.com navigiert und dann auf den Zurück-Button des Browsers drückt. Dann wird die Adresszeile http://mozilla.org/bar2.html anzeigen. Drückt der Benutzer den Zurück-Button nun nochmals, zeigt die Adresszeile http://mozilla.org/foo.html und umgeht bar.html vollständig.

- -

 

- -

The popstate event

- -

A popstate event is dispatched to the window every time the active history entry changes. If the history entry being activated was created by a call to pushState or affected by a call to replaceState, the popstate event's state property contains a copy of the history entry's state object.

- -

See {{ domxref("window.onpopstate") }} for sample usage.

- -

Reading the current state

- -

When your page loads, it might have a non-null state object.  This can happen, for example, if the page sets a state object (using pushState() or replaceState()) and then the user restarts her browser.  When your page reloads, the page will receive an onload event, but no popstate event.  However, if you read the history.state property, you'll get back the state object you would have gotten if a popstate had fired.

- -

You can read the state of the current history entry without waiting for a popstate event using the history.state property like this:

- -
var currentState = history.state;
-
- -

Examples

- -

For a complete example of AJAX web site, please see: Ajax navigation example.

- -

Browser compatibility

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
replaceState, pushState5{{ CompatGeckoDesktop("2.0") }}1011.505.0
history.state18{{ CompatGeckoDesktop("2.0") }}1011.506.0
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
replaceState, pushState{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
history.state{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -

See also

- -
    -
  • {{ domxref("window.history") }}
    • -
  • {{ domxref("window.onpopstate") }}
    • -
- -

{{ languages( { "ja": "ja/DOM/Manipulating_the_browser_history"} ) }}

diff --git a/files/de/web/guide/html/canvas_tutorial/advanced_animations/index.html b/files/de/web/guide/html/canvas_tutorial/advanced_animations/index.html deleted file mode 100644 index 10c4a7650c..0000000000 --- a/files/de/web/guide/html/canvas_tutorial/advanced_animations/index.html +++ /dev/null @@ -1,380 +0,0 @@ ---- -title: Fortgeschrittene Animationen -slug: Web/Guide/HTML/Canvas_Tutorial/Advanced_animations -tags: - - Canvas - - Graphics - - Tutoria -translation_of: Web/API/Canvas_API/Tutorial/Advanced_animations ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}
- -
-

In dem vorherigem Kapitel machten wir einige Basisanimationen und lernten Möglichkeiten, Dinge zu bewegen. In diesem Kapitel werden wir uns die Bewegung selbst anschauen und werden etwas Physik einfügen um unsere Animationen fortgeschrittener zu machen.

-
- -

Einen Ball zeichnen

- -

Wir werden einen Ball für unsere Animationen benutzen, deshalb zeichnen wir zuerst einen Ball mit dem folgendem Code in die Canvas.

- -
<canvas id="canvas" width="600" height="300"></canvas>
-
- -

Wie gewöhnlich brauchen wir zuerst ein draw context. Um den Ball zu zeichnen, werden wir ein ball - Objekt erstellen, welches Eigenschaften und eine draw() - Methode enthält, um es in die Canvas zu zeichnen.

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-
-var ball = {
-  x: 100,
-  y: 100,
-  radius: 25,
-  color: 'blue',
-  draw: function() {
-    ctx.beginPath();
-    ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);
-    ctx.closePath();
-    ctx.fillStyle = this.color;
-    ctx.fill();
-  }
-};
-
-ball.draw();
- -

Nichts Besonderes hier, der Ball ist momentan ein einfacher Kreis und wird mit der {{domxref("CanvasRenderingContext2D.arc()", "arc()")}} - Methode gezeichnet.

- -

Geschwindigkeit hinzufügen

- -

Nun haben wir einen Ball und sind bereit, eine Basisanimation hinzuzufügen, wie wir es im vorherigen Kapitel von diesem Tutorial lernten. Wieder hilft uns {{domxref("window.requestAnimationFrame()")}}, die Animation zu kontrollieren. Der Ball bewegt sich durch Hinzufügen von einem Geschwindigkeitsvektor zu der Position. Für jedes Frame {{domxref("CanvasRenderingContext2D.clearRect", "clean", "", 1)}} wir die Canvas, um alte Kreise zu entfernen.

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-var raf;
-
-var ball = {
-  x: 100,
-  y: 100,
-  vx: 5,
-  vy: 2,
-  radius: 25,
-  color: 'blue',
-  draw: function() {
-    ctx.beginPath();
-    ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);
-    ctx.closePath();
-    ctx.fillStyle = this.color;
-    ctx.fill();
-  }
-};
-
-function draw() {
-  ctx.clearRect(0,0, canvas.width, canvas.height);
-  ball.draw();
-  ball.x += ball.vx;
-  ball.y += ball.vy;
-  raf = window.requestAnimationFrame(draw);
-}
-
-canvas.addEventListener('mouseover', function(e){
-  raf = window.requestAnimationFrame(draw);
-});
-
-canvas.addEventListener("mouseout",function(e){
-  window.cancelAnimationFrame(raf);
-});
-
-ball.draw();
-
- -

Gebundenheit

- -

Ohne jede gebundene Kollisionsüberprüfung fliegt unser Ball schnell aus dem Canvas. Wir müssen die x - und yposition von dem Ball überprüfen und wenn der Ball außerhalb des Canvas ist, die Richtung der Geschwindigkeitsvektoren umkehren.

- -
if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
-  ball.vy = -ball.vy;
-}
-if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
-  ball.vx = -ball.vx;
-}
- -

Erste Demo

- -

Lass uns sehen, wie das in Aktion aussieht. Bewegen Sie die Maus in die Canvas, um die Animation zu starten.

- - - -

{{EmbedLiveSample("Erste_Demo", "610", "310")}}

- -

Acceleration

- -

Um die Bewegung realistischer zu machen, können Sie mit Geschwindigkeit spielen, zum Beispiel:

- -
ball.vy *= .99;
-ball.vy += .25;
- -

Dies verlangsamt die vertikale Geschwindigkeit in jedem Frame, sodass der Ball am Ende nur noch am Boden hüpft.

- - - -

{{EmbedLiveSample("Acceleration", "610", "310")}}

- -

Spureneffekt

- -

Bis jetzt haben wir die {{domxref("CanvasRenderingContext2D.clearRect", "clearRect")}}  - Methode benutzt, wenn wir Frames clearten. Wenn Sie diese Methode durch {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}} ersetzen, können Sie einfach einen Spureneffekt erzeugen.

- -
ctx.fillStyle = 'rgba(255,255,255,0.3)';
-ctx.fillRect(0,0,canvas.width,canvas.height);
- - - -

{{EmbedLiveSample("Spureneffekt", "610", "310")}}

- -

Mauskontrolle hinzufügen

- -

Um etwas Kontrolle über den Ball zu bekommen, können wir machen, dass er die Maus verfolgt, indem wir beispielsweise das mousemove - Ereignis benutzen. Das click - Ereignis lässt den Ball wieder hüpfen.

- - - -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-var raf;
-var running = false;
-
-var ball = {
-  x: 100,
-  y: 100,
-  vx: 5,
-  vy: 1,
-  radius: 25,
-  color: 'blue',
-  draw: function() {
-    ctx.beginPath();
-    ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);
-    ctx.closePath();
-    ctx.fillStyle = this.color;
-    ctx.fill();
-  }
-};
-
-function clear() {
-  ctx.fillStyle = 'rgba(255,255,255,0.3)';
-  ctx.fillRect(0,0,canvas.width,canvas.height);
-}
-
-function draw() {
-  clear();
-  ball.draw();
-  ball.x += ball.vx;
-  ball.y += ball.vy;
-
-  if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
-    ball.vy = -ball.vy;
-  }
-  if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
-    ball.vx = -ball.vx;
-  }
-
-  raf = window.requestAnimationFrame(draw);
-}
-
-canvas.addEventListener('mousemove', function(e){
-  if (!running) {
-    clear();
-    ball.x = e.clientX;
-    ball.y = e.clientY;
-    ball.draw();
-  }
-});
-
-canvas.addEventListener("click",function(e){
-  if (!running) {
-    raf = window.requestAnimationFrame(draw);
-    running = true;
-  }
-});
-
-canvas.addEventListener("mouseout",function(e){
-  window.cancelAnimationFrame(raf);
-  running = false;
-});
-
-ball.draw();
-
- -

Bewegen Sie den Ball mit der Maus und klicken Sie, um ihn loszulassen.

- -

{{EmbedLiveSample("Mauskontrolle_hinzuf%C3%BCgen", "610", "310")}}

- -

Breakout

- -

Dieses kurze Kapitel erklärt nur einige Möglichkeiten, fortgeschrittene Animationen zu erstellen. Es gibt viel mehr! Was darüber, ein Brett und einige Blöcke hizuzufügen und diese Demo in ein Breakout - Spiel zu verwandeln? Schauen Sie sich unseren Spieleentwickelungsbereich an für mehr auf Spiele bezogene Artikel.

- -

Siehe auch

- - - -

{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}

diff --git a/files/de/web/guide/html/canvas_tutorial/applying_styles_and_colors/index.html b/files/de/web/guide/html/canvas_tutorial/applying_styles_and_colors/index.html deleted file mode 100644 index 6caa27b3ef..0000000000 --- a/files/de/web/guide/html/canvas_tutorial/applying_styles_and_colors/index.html +++ /dev/null @@ -1,785 +0,0 @@ ---- -title: Stile und Farben verwenden -slug: Web/Guide/HTML/Canvas_Tutorial/Applying_styles_and_colors -translation_of: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}
- -
-

Im Kapitel über das Zeichnen von Formen haben wir zum Einstieg nur die Standard-Stile für Linien und Füllungen benutzt. Nun möchten wir uns etwas näher mit Möglichkeiten beschäftigen, unsere Zeichnungen etwas attraktiver zu gestalten. Wir werden lernen, unterschiedliche Farben, Linienstile, Verläufe, Muster und Schatten in unseren Zeichnungen anzuwenden.

-
- -

Farben

- -

Bis jetzt haben wir nur Methoden im unmittelbaren Zusammenhang mit dem Zeichnen gelernt. Möchten wir einer Form eine Farbe zuordnen, stehen uns folgenden zwei Eigenschaften zur Verfügung: fillStyle und strokeStyle.

- -
-
{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle = color")}}
-
-

 Bestimmt den Stil in dem die Form gefüllt wird.

-
-
{{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle = color")}}
-
-

Bestimmt den Stil der Umrandungslinien.

-
-
- -

color steht entweder für einen CSS {{cssxref("<color>")}} Farbwert, ein Gradienten-Objekt, oder ein Muster-Objekt. Auf letztere gehen wir später noch ein. Standardmäßig sind Strich- und Füllfarbe auf Schwarz eingestellt (CSS-Farbwert #000000).

- -
-

Anmerkung: Nach dem Setzen von strokeStyle und/oder fillStyle wird der neue Wert zum Standardwert für alle nachfolgend gezeichneten Formen. Für jede in einer abweichenden Farbe gewünschte Form müssen fillStyle bzw. strokeStyle neu definiert werden.

-
- -

Der String color sollte, entsprechend der Spezifikation, ein gültiger CSS {{cssxref("<color>")}} -Wert sein. Alle folgenden Beispiele definieren die selbe Farbe.

- -
// these all set the fillStyle to 'orange'
-
-ctx.fillStyle = "orange";
-ctx.fillStyle = "#FFA500";
-ctx.fillStyle = "rgb(255,165,0)";
-ctx.fillStyle = "rgba(255,165,0,1)";
-
- -

Beispiel für fillStyle

- -

In diesem Beispiel nutzen wir wieder zwei Schleifen um ein Gitter aus gefüllten Quadraten zu zeichnen, jedes in einer anderen Farbe. Das resultierende Bild sollte etwa dem Screenshot unten entsprechen. Außergewöhnliches passiert hier nicht, wir nutzen einfach die beiden Variablen i und j um jedem Quadrat eine eigene Farbe zu geben, wobei wir nur die Werte für den Rot- und Grünanteil ändern; der Blauwert bleibt unverändert. Durch Modifikation der Farbkanäle können Sie verschiedene Paletten erzeugen; eine Erhöhung der Schrittweite erzeugt z.B. ein Muster, das an die Farbpaletten in Photoshop erinnert.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  for (var i=0;i<6;i++){
-    for (var j=0;j<6;j++){
-      ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' +
-                       Math.floor(255-42.5*j) + ',0)';
-      ctx.fillRect(j*25,i*25,25,25);
-    }
-  }
-}
- - - -

Das Ergebnis:

- -

{{EmbedLiveSample("A_fillStyle_example", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}

- -

Beispiel für strokeStyle

- -

Dieses Beispiel ähnelt dem vorangegangenen, nutzt aber die strokeStyle Eigenschaft, um die Farben der Umrisslinien zu ändern. Mit der Methode arc() zeichnen wir Kreise an Stelle der Quadrate.

- -
  function draw() {
-    var ctx = document.getElementById('canvas').getContext('2d');
-    for (var i=0;i<6;i++){
-      for (var j=0;j<6;j++){
-        ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' +
-                         Math.floor(255-42.5*j) + ')';
-        ctx.beginPath();
-        ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
-        ctx.stroke();
-      }
-    }
-  }
-
- - - -

The result looks like this:

- -

{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "https://mdn.mozillademos.org/files/253/Canvas_strokestyle.png")}}

- -

Transparenz

- -

Zusätzlich zu deckenden Formen können wir auch teiltransparente (oder durchscheinende) Formen zeichnen. Dies geschieht entweder durch das Setzen der Eigenschaft globalAlpha oder die Zuordnung einer teiltransparenten Farbe zu einem Zeichen- oder Füllstil.

- -
-
{{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha = transparencyValue")}}
-
-

Wendet den angegebenen Transparenz-Wert auf alle nachfolgend gezeichneten Formen an. Der Wert muss zwischen 0.0 (vollständig transparent) und 1.0 (vollständig deckend) liegen. Der Standardwert ist 1.0.

-
-
- -

Die Eigenschaft globalTransparency ist nützlich, wenn man viele Formen mit gleicher Transparenz zeichnen möchte; meist ist es aber praktischer, die Transparenz jeder einzelnen Form gemeinsam mit ihrer Farbe zu definieren.

- -

Die Eigenschaften strokeStyle und fillStyle akzeptieren CSS rgba Farbwerte, daher kann die Transparenz direkt bei der Zuordnung einer Farbe wie folgt gesetzt werden:

- -
// Assigning transparent colors to stroke and fill style
-
-ctx.strokeStyle = "rgba(255,0,0,0.5)";
-ctx.fillStyle = "rgba(255,0,0,0.5)";
-
- -

Die rgba()-Funktion entspricht der rgb()-Funktion, allerdings mit einem zusätzlichen Parameter am Ende. Dieser Wert bestimmt die Transparenz dieser bestimmten Farbe. Der Gültigkeitsbereich umfasst Werte zwischen 0.0 (völlig transpartent) und 1.0 (vollständig deckend).

- -

Beispiel für globalAlpha

- -

In diesem Beispiel zeichnen wir einen Hintergrund aus vier unterschiedlich gefärbten Quadraten. Über diese legen wir dann einige transparente Kreise. Die Eigenschaft globalAlpha wird auf den Wert 0.2 gesetzt, der dann für alle folgend gezeichneten Formen verwendet wird. Jeder Durchlauf der for-Schleife zeichnet einen Satz Kreise mit zunehmendem Radius. Das Endresultat ist ein kreisförmiger Verlauf. Durch das Übereinanderlagern von immer mehr Kreisen reduzieren wir letztlich die Transparenz bereits gezeichneter Kreise. Erhöhen wir die Anzahl der Durchläufe (und damit der gezeichneten Kreise) weiter, wird der Hintergrund in der Bildmitte irgendwann völlig überdeckt.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  // draw background
-  ctx.fillStyle = '#FD0';
-  ctx.fillRect(0,0,75,75);
-  ctx.fillStyle = '#6C0';
-  ctx.fillRect(75,0,75,75);
-  ctx.fillStyle = '#09F';
-  ctx.fillRect(0,75,75,75);
-  ctx.fillStyle = '#F30';
-  ctx.fillRect(75,75,75,75);
-  ctx.fillStyle = '#FFF';
-
-  // set transparency value
-  ctx.globalAlpha = 0.2;
-
-  // Draw semi transparent circles
-  for (i=0;i<7;i++){
-    ctx.beginPath();
-    ctx.arc(75,75,10+10*i,0,Math.PI*2,true);
-    ctx.fill();
-  }
-}
- - - -

{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "https://mdn.mozillademos.org/files/232/Canvas_globalalpha.png")}}

- -

Beispiel für die Verwendung von rgba()

- -

Das zweite Beispiel ist ähnlich dem ersten, aber hier überlagern wir farbige Flächen mit schmalen, weißen Rechtecken zunehmender Deckkraft. Die Verwendung von rgba() an Stelle von globalAlpha erlaubt uns mehr Kontrolle und Flexibilität, weil wir damit Strich- und Füllstil unterschiedlich behandeln können.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // Draw background
-  ctx.fillStyle = 'rgb(255,221,0)';
-  ctx.fillRect(0,0,150,37.5);
-  ctx.fillStyle = 'rgb(102,204,0)';
-  ctx.fillRect(0,37.5,150,37.5);
-  ctx.fillStyle = 'rgb(0,153,255)';
-  ctx.fillRect(0,75,150,37.5);
-  ctx.fillStyle = 'rgb(255,51,0)';
-  ctx.fillRect(0,112.5,150,37.5);
-
-  // Draw semi transparent rectangles
-  for (var i=0;i<10;i++){
-    ctx.fillStyle = 'rgba(255,255,255,'+(i+1)/10+')';
-    for (var j=0;j<4;j++){
-      ctx.fillRect(5+i*14,5+j*37.5,14,27.5);
-    }
-  }
-}
- - - -

{{EmbedLiveSample("An_example_using_rgba()", "180", "180", "https://mdn.mozillademos.org/files/246/Canvas_rgba.png")}}

- -

Linienstile

- -

Mehrere Eigenschaften ermöglichen den Zugriff auf Linienstile:

- -
-
{{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth = value")}}
-
Setzt die Breite später gezeichneter Linien.
-
{{domxref("CanvasRenderingContext2D.lineCap", "lineCap = type")}}
-
Definiert die Form der Linienenden.
-
{{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin = type")}}
-
Definiert die Form der „Ecken“, an denen sich Linien treffen.
-
{{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit = value")}}
-
Definiert einen Grenzwert für die Gehrung (Schräge) am spitzen Winkel zwischen zwei Linien; damit wird die Dicke des Verbindungsbereichs begrenzt.
-
- -
-
{{domxref("CanvasRenderingContext2D.getLineDash", "getLineDash()")}}
-
-

Gibt den aktuellen Array für das Strichlierungsmuster zurück (eine gerade Anzahl nicht-negativer Zahlen).

-
-
{{domxref("CanvasRenderingContext2D.setLineDash", "setLineDash(segments)")}}
-
-

Definiert das aktuelle Strichlierungsmuster.

-
-
{{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset = value")}}
-
-

Beschreibt wo das Strichlierunsmuster startet.

-
-
- -

Die Beispiele unten sollen Ihnen das Verständnis dieser Angaben erleichtern.

- -

Beispiel für lineWidth

- -

Diese Eigenschaft bestimmt die aktuelle Linienbreite. Der Standardwert ist 1.0, und es sind nur positive Zahlen erlaubt.

- -

Die Linienbreite entspricht der Dicke des Strichs, zentriert über der Strecke zwischen den Punkten. Anders ausgedrückt dehnt sich die Fläche der gezeichneten Linie je zur Hälfte links und rechts der Strecke aus. Weil Canvas-Koordinaten sich nicht unmittelbar auf Pixel beziehen müssen, sollte man etwas Sorgfalt walten lassen um „scharfe“ bzw. definierte horizontale und vertikale Linien zu erhalten.

- -

Im folgenden Beispiel werden zehn gerade Linien zunehmender Breite gezeichnet. Die Linie ganz links ist 1.0 Einheiten breit. Allerdings erscheint diese Linie - und auch alle anderen Linien mit einem ungeraden Wert für die Liniendicke - nicht wirklich scharf; schuld daran ist die Positionierung.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  for (var i = 0; i < 10; i++){
-    ctx.lineWidth = 1+i;
-    ctx.beginPath();
-    ctx.moveTo(5+i*14,5);
-    ctx.lineTo(5+i*14,140);
-    ctx.stroke();
-  }
-}
-
- - - -

{{EmbedLiveSample("A_lineWidth_example", "180", "180", "https://mdn.mozillademos.org/files/239/Canvas_linewidth.png")}}

- -

Um scharfe Linien zu erzeugen muss man erst verstehen, wie Linien gezeichnet werden. In den Bildern unten steht das Gitter für das Koordinatensystem im Canvas. Die Quadrate zwischen den Gitterlinien entsprechen reellen Pixeln der Bildschirmdarstellung. Im ersten Bild wird ein Rechteck zwischen (2,1) und (5,5) gefüllt. Das gesamte Rechteck zwischen diesen Koordinaten (im Bild hellrot) fällt mit den Pixelgrenzen zusammen, und es resultiert eine Rechteckfläche mit scharfen Abgrenzungen.

- -

- -

Stellen wir uns jetzt einen Pfad von (3,1) nach (3,5) mit einer Linienbreite von 1.0 vor, dann erhalten wir die Situation im zweiten Bild. Die zu füllende Fläche erstreckt sich jeweils nur zur Hälfte über die links und rechts angrenzenden Pixel. Dieser Zustand kann nur näherungsweise umgesetzt werden, so dass die betroffenen Pixel nur in der halben Intensität gefüllt werden. Genau das passierte mit der 1.0 Einheiten breiten Linie im vorhergehenden Programm.

- -

Um das zu korrigieren muss man bei der Definition der Verbindungsstrecke besonders genau sein. Mit dem Wissen, dass eine Linie der Breite 1.0 sich jeweils zur Hälfte auf beide Seiten ausdehnt, kann man die Strecke von (3.5,1) bis (3.5,5) legen und erhält die Situation im dritten Bild - die eine Einheit breite Linie füllt exakt eine Pixelreihe.

- -
-

Anmerkung: Bitte beachten Sie, dass in dem Beispiel der vertikalen Linie die Y-Position sich immer noch auf eine ganzzahlige Position bezieht - andernfalls würden an den Endpunkten die Pixel nur halb gedeckt.(Beachten Sie aber auch, dass dieses Verhalten zusätzlich vom lineCap-Stil abhängt, der standardmäßig auf butt eingestellt ist. Möchten Sie einheitliche Striche mit Koordinaten in halben Pixeln für ungerade Liniendicken berechnen, können Sie dafür den lineCap-Sti auf square setzten, wodurch der Aussenrand des Strichs am Endpunkt automatisch über den ganzen Pixel ausgedehnt wird.)

- -

Beachten Sie auch, dass nur der Start- und Zielpunkt einer Strecke betroffen ist. Bei einer mit closePath() geschlossenen Strecke git es keinen solchen Start- bzw. Zielpunkt, stattdessen werden alle Endpunkte mit den vorhergehenden und nachfolgenden Segmenten entsprechend dem aktuellen lineJoin-Stil verbunden; dessen Standardwert ist miter, was eine automatische Ausweitung der äußeren Linienränder bis zu ihrem Schnittpunkt bewirkt, so dass der gezeichnete Strich an jedem Endpunkt exakt volle Pixel abdeckt, wenn die verbundenen Segmente horizontal und/oder vertikal verlaufen. Die folgenden zwei Abschnitte demonstrieren das Verhalten dieser zusätzlichen Linien-Stile.

-
- -

Für scharfe Ränder bei geradzahligen Linienbreiten definieren wir den Pfad zwischen den Pixeln (z.B. (3,1) bis (3,5)), so dass jede Hälfte des Strichs einer ganzzahligen Anzahl von Pixeln entspricht.

- -

Wenn die sorgfältige Arbeit mit dem Pixelraster in 2D-Grafiken anfangs auch noch etwas anstrengend erscheinen mag, so gewährleistet sie letztlich eine korrekte Abbildung der Grafiken, unabhänging von Skalierungen oder anderen Transformationen. Eine korrekt positionierte Linie mit einer Breite von 1.0 wird nach einer Vergrößerung um den Faktor 2 eine Linie der Breite 2.0 ergeben, wiederum scharf umrissen und an der richtigen Position.

- -

Beispiel für lineCap

- -

Die Eigenschaft lineCap bestimmt das Erschinungsbild der Linienenden. Sie kann drei verschiedene Werte annehmen: butt (Standardwert), round und square.

- -

- -
-
butt
-
-

Glatte Enden an den Endpunkten.

-
-
round
-
-

Abgerundete Enden.

-
-
square
-
-

Die Enden werden glatt abgeschnitten, es wird aber vorher ein Rechteck angefügt, gleicher Breite wie die Linie und halb so lang wie breit.

-
-
- -

In diesem Beispiel ziehen wir drei Linien, jede davon mit einem unterschiedlichen Wert für lineCap. Zwei Hilfslinien helfen dabei die Unterschiede zu verdeutlichen. Jede Linie beginnt und endet exakt an den Hilfslinien.

- -

Die linke Linie verwendet die Option butt. Sie sehen, dass sie exakt an den Hilfslinien endet. Die zweite Linie verwendet die Option round, es wird dadurch ein Halbkreis mit einem Radius entsprechend der halben Linienbreite angehängt. Die recht Linie verwendet die Option square. Diese hängt ein Rechteck von gleicher Breite und einer Länge der halben Linienbreite an.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  var lineCap = ['butt','round','square'];
-
-  // Draw guides
-  ctx.strokeStyle = '#09f';
-  ctx.beginPath();
-  ctx.moveTo(10,10);
-  ctx.lineTo(140,10);
-  ctx.moveTo(10,140);
-  ctx.lineTo(140,140);
-  ctx.stroke();
-
-  // Draw lines
-  ctx.strokeStyle = 'black';
-  for (var i=0;i<lineCap.length;i++){
-    ctx.lineWidth = 15;
-    ctx.lineCap = lineCap[i];
-    ctx.beginPath();
-    ctx.moveTo(25+i*50,10);
-    ctx.lineTo(25+i*50,140);
-    ctx.stroke();
-  }
-}
-
- - - -

{{EmbedLiveSample("A_lineCap_example", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}

- -

Beispiel für lineJoin

- -

Die Eigenschaft lineJoin bestimmt, wie zwei zusammenhängende Segmente (Linien-, Kurven- oder Kreissegmente) länger als Null in einer Form verbunden werden („degenerierte“ Elemente mit zusammenfallenden Start- und Zielpunkten, also mit der Länge Null, werden dabei übersprungen).

- -

Diese Eigenschaft kann drei mögliche Werte annehmen: round, bevel und miter (Standardeinstellung). Beachten Sie, dass die lineJoin-Einstellung keine Auswirkungen hat wenn die Segemente in gleicher Richtung verlaufen, da in diesem Falle keine Verbindungsfläche eingefügt wird.

- -

- -
-
round
-
-

Rundet die Ecke ab indem ein zusätzlicher Kreisausschnitt am gemeinsamen Endpunkt der verbundenen Segmente eingefügt wird. Der Radius entspricht der halben Liniendicke.

-
-
bevel
-
-

Füllt die Fläche zwischen dem gemeinsamen Endpunkt und den beiden getrennten äußeren Ecken der Segmente mit einem Dreieck.

-
-
miter
-
-

Verlängert die Aussenränder der Segmente bis sie sich in einem Punkt schneiden, wobei eine rautenförmige Fläche eingefügt wird. Diese Einstellung wird durch die Eigenschaft miterLimit beeinflusst, welche später erklärt wird.

-
-
- -

Das folgenden Beispielprogramm verdeutlicht die Auswirkungen der drei Varianten von lineJoin anhand von drei Linienzügen; das Ergebnis sehen Sie oben.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  var lineJoin = ['round','bevel','miter'];
-  ctx.lineWidth = 10;
-  for (var i=0;i<lineJoin.length;i++){
-    ctx.lineJoin = lineJoin[i];
-    ctx.beginPath();
-    ctx.moveTo(-5,5+i*40);
-    ctx.lineTo(35,45+i*40);
-    ctx.lineTo(75,5+i*40);
-    ctx.lineTo(115,45+i*40);
-    ctx.lineTo(155,5+i*40);
-    ctx.stroke();
-  }
-}
-
- - - -

{{EmbedLiveSample("A_lineJoin_example", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}}

- -

Beispiel für die Eigenschaft miterLimit

- -

Wie wir im vorhergehenden Beispiel gesehen haben, werden mit der Option miter die äußeren Kanten von zwei schneidenden Linien bis zu ihrem Schnittpunkt verlängert. Schneiden sich die Linien unter einem großen Winkel, liegt dieser äußere Schnittpunkt nicht allzu weit vom inneren entfernt. Mit kleiner werdendem Winkel vergrößert sich die Länge dieses Bereichs (genannt Gehrung = engl. miter) aber exponentiell.

- -

Die Eigenschaft miterLimit bestimmt, wie weit der äußere Verbindungspunkt maximal vom inneren entfernt sein darf. Wird dieser Wert überschritten, wird stattdessen eine Fase gezogen, ähnlich der Einstellung bevel. Beachten Sie: Die maximale Gehrungslänge ist das Produkt aus der Liniendicke, gemessen im aktuellen Koordinatensystem, und dem Wert von miterLimit (Standardwert 10.0 im HTML {{HTMLElement("canvas")}}). Daher kann miterLimit unabhängig vom aktuellen Vergrößerungsmaßstab oder irgendeiner affinen Transformation der Strecke gesetzt werden; es beeinflusst nur die reell abgebildete Form der Kanten.

- -

Präziser gesagt ist beschreibt miterLimit das maximale Verhältnis der Ausdehnung der Verlängerung nach außen (diese wird im HTML Canvas zwischen dem Schnittpunkt der äußeren Kanten der schneidenden Linien und dem gemeinsamen Endpunkt der Strecken gemessen) zur halben Liniendicke. Dazu gleichwertig ist die Definition als das maximal erlaubte Verhältnis der Entfernung zwischen dem inneren und äußeren Eckpunkt der Verbindung und der vollen Liniendicke. Er entspricht mathematisch dem Kosekans des halben minimalen Innenwinkels zwischen den verbundenen Segmenten, unterhalb dessen nur eine Fase ohne weitere Ausdehnung gezeichnet wird.

- -
    -
  • miterLimit = max miterLength / lineWidth = 1 / sin ( min θ / 2 )
    • -
  • Der Standardwert von miterLimit = 10.0 schneidet alle Überhänge von Winkeln kleiner als 11° ab.
    • -
  • Ein Wert von √2 ≈ 1.4142136 (aufgerundet) stutzt Überhänge bei spitzen Winkeln, und belässt nur bei stumpfen und rechten Winkeln zusätzlich Raum für die Gehrung.
    • -
  • Ein Wert von 1.0 ist erlaubt, schneidet aber alle Überhänge ab.
    • -
  • Werte kleiner als 1.0 sind nicht erlaubt.
    • -
- -

In dieser einfachen Demonstration können Sie den Wert für miterLimit dynamisch einstellen und dabei verfolgen, wie sich die Form der Ecken ändert. Die blauen Linien zeigen an wo Start- und Zielpunkt jedes Zickzack-Segments liegen.

- -

Stellen Sie in diesem Programm ein miterLimit kleiner als 4.2 ein, wird an keiner der sichtbaren Ecken zu einer zusätzlichen Ausdehnung durch die Gehrung kommen; stattdessen entsteht an der blauen Linie eine Fase. Ist miterLimit größer als zehn, verbinden sich die meisten Linien in diesem Beispiel in einer Gehrung die weit über die blauen Linie hinausreicht, wobei sich die Höhe von links nach rechts wegen der zunehmenden Winkel verringert. Für dazwischenliegende Werte bilden die linken Elemente eine ausgedehnte Gehrung, während nach rechts die Spitzen durch Fasen ersetzt werden.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // Clear canvas
-  ctx.clearRect(0,0,150,150);
-
-  // Draw guides
-  ctx.strokeStyle = '#09f';
-  ctx.lineWidth   = 2;
-  ctx.strokeRect(-5,50,160,50);
-
-  // Set line styles
-  ctx.strokeStyle = '#000';
-  ctx.lineWidth = 10;
-
-  // check input
-  if (document.getElementById('miterLimit').value.match(/\d+(\.\d+)?/)) {
-    ctx.miterLimit = parseFloat(document.getElementById('miterLimit').value);
-  } else {
-    alert('Value must be a positive number');
-  }
-
-  // Draw lines
-  ctx.beginPath();
-  ctx.moveTo(0,100);
-  for (i=0;i<24;i++){
-    var dy = i%2==0 ? 25 : -25 ;
-    ctx.lineTo(Math.pow(i,1.5)*2,75+dy);
-  }
-  ctx.stroke();
-  return false;
-}
-
- - - -

{{EmbedLiveSample("A_demo_of_the_miterLimit_property", "400", "180", "https://mdn.mozillademos.org/files/240/Canvas_miterlimit.png")}}

- -

Strichlierte Linien verwenden

- -

Die Methode setLineDash und die Eigenschaft lineDashOffset definieren die Strichlierung von Linien. setLineDash akzeptiert eine Liste von Zahlenwerten, die abwechselnd die Abstände von Strichen und Zwischenräumen definieren, wobei lineDashOffset einen Versatz am Start des Musters definiert.

- -

In diesem Beispiel erzeugen wir einen „marschierende Ameisen“-Effekt. Diese Animation finden wir oft bei Auswahlwerkzeugen von Bildbearbeitungsprogrammen. Es macht dort die Grenze zwischen Auswahlbereich und Hintergrund sichtbar. Später werden Sie in diesem Tutorial noch lernen solche oder ähnliche einfache Animationen zu erzeugen.

- - - -
var ctx = document.getElementById('canvas').getContext('2d');
-var offset = 0;
-
-function draw() {
-  ctx.clearRect(0,0, canvas.width, canvas.height);
-  ctx.setLineDash([4, 2]);
-  ctx.lineDashOffset = -offset;
-  ctx.strokeRect(10,10, 100, 100);
-}
-
-function march() {
-  offset++;
-  if (offset > 16) {
-    offset = 0;
-  }
-  draw();
-  setTimeout(march, 20);
-}
-
-march();
- -

{{EmbedLiveSample("Using_line_dashes", "120", "120", "https://mdn.mozillademos.org/files/9853/marching-ants.png")}}

- -

Gradienten

- -

Wie in jedem anderen Zeichenprogramm können wir auch im Canvas linien- und kreisförmige Verläufe zum Zeichnen und Füllen von Formen verwenden. Mit den folgenden Befehlen können wir ein {{domxref("CanvasGradient")}}-Objekt erzeugen; dieses ordnen wir dann einer fillStyle- oder strokeStyle-Eigenschaft zu.

- -
-
{{domxref("CanvasRenderingContext2D.createLinearGradient", "createLinearGradient(x1, y1, x2, y2)")}}
-
-

Erzeugt eine lineares Verlaufsobjekt mit Startpunkt (x1, y1) und Zielpunkt (x2, y2).

-
-
{{domxref("CanvasRenderingContext2D.createRadialGradient", "createRadialGradient(x1, y1, r1, x2, y2, r2)")}}
-
-

Erzeugt einen kreisförmige Verlauf. Die Parameter beschreiben zwei Kreise, der erste mit dem Mittelpunkt bei (x1, y1) und einem Radius von r1, der zweite mit Mittelpunkt (x2, y2) und demRadius r2.

-
-
- -

For example:

- -
var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
-var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100);
-
- -

Sobald wir ein canvasGradient-Objekt erzeugt haben, können wir mit der Methode addColorStop() Farben zuordnen.

- -
-
{{domxref("CanvasGradient.addColorStop", "gradient.addColorStop(position, color)")}}
-
-

Erzeugt einen neuen Farbwert am Verlaufsobjekt. Das Positionsargument ist eine Zahl zwischen 0.0 und 1.0, und es definiert die relative Position der Farbe innerhalb der Verlaufsstrecke. Das Farbargument ist eine Zeichenkette für eine CSS {{cssxref("<color>")}} und beschreibt den Farbwert, den der Farbverlauf bis zur angegebenen Position erreicht hat.

-
-
- -

Die Anzahl der Farbschritte ist beliebig. Es folgt ein Beispiel für einen einfachen Verlauf von Weiss nach Schwarz.

- -
var lineargradient = ctx.createLinearGradient(0,0,150,150);
-lineargradient.addColorStop(0, 'white');
-lineargradient.addColorStop(1, 'black');
-
- -

Beispiel für createLinearGradient

- -

In diesem Beispiel erzeugen wir zwei unterschiedliche Verläufe. Wie Sie sehen, akzeptieren sowohl strokeStyle als auch fillStyle ein canvasGradient-Objekt als Eingabe.

- -

 

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // Create gradients
-  var lingrad = ctx.createLinearGradient(0,0,0,150);
-  lingrad.addColorStop(0, '#00ABEB');
-  lingrad.addColorStop(0.5, '#fff');
-  lingrad.addColorStop(0.5, '#26C000');
-  lingrad.addColorStop(1, '#fff');
-
-  var lingrad2 = ctx.createLinearGradient(0,50,0,95);
-  lingrad2.addColorStop(0.5, '#000');
-  lingrad2.addColorStop(1, 'rgba(0,0,0,0)');
-
-  // assign gradients to fill and stroke styles
-  ctx.fillStyle = lingrad;
-  ctx.strokeStyle = lingrad2;
-
-  // draw shapes
-  ctx.fillRect(10,10,130,130);
-  ctx.strokeRect(50,50,50,50);
-
-}
-
- -

 

- - - -

Der erste Teil beschreibt den Hintergrundverlauf. Wie Sie sehen, haben wir an der gleichen Position zwei unterschiedliche Farben definiert. Das dient zur Erzeugung sprunghafter Farbänderungen - hier von weiss nach grün. Üblicherweise spielt es keine Rolle in welcher Reihenfolge die Farbstufen definiert werden, in diesem speziellen Fall ist die Reihenfolge aber wichtig. Nehmen Sie die Zuordnungen am besten in der tatsächlichen Reihenfolge vor, so beugen Sie möglichen Problemen vor.

- -

Beim zweiten Verlauf haben wir an der Startposition (0,0) keinen Farbwert definiert, was auch nicht unbedingt nötig ist, weil dann automatisch die Farbe der nächsten Farbstufe verwendet wird. Daher bewirkt die Zuordnung der Farbstufe „schwarz“ an der Position 0.5 automatisch eine einheitliche Schwarzfärbung vom Start Null bis zur Position 0.5.

- -

{{EmbedLiveSample("A_createLinearGradient_example", "180", "180", "https://mdn.mozillademos.org/files/235/Canvas_lineargradient.png")}}

- -

Beispiel für createRadialGradient

- -

In diesem Beispiel werden wir vier kreisförmige Verläufe definieren. Weil wir volle Kontrolle über die Start- und Zielpunkte der Verläufe haben, können wir komplexere Verläufe erzeugen als z.B. die einfacheren Radialverläufe in Photoshop, die uns nur Verläufe mit einem gemeinsamen Mittelpunkt und radial gleichmäßig verteilten Farben erlauben würden.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // Create gradients
-  var radgrad = ctx.createRadialGradient(45,45,10,52,50,30);
-  radgrad.addColorStop(0, '#A7D30C');
-  radgrad.addColorStop(0.9, '#019F62');
-  radgrad.addColorStop(1, 'rgba(1,159,98,0)');
-
-  var radgrad2 = ctx.createRadialGradient(105,105,20,112,120,50);
-  radgrad2.addColorStop(0, '#FF5F98');
-  radgrad2.addColorStop(0.75, '#FF0188');
-  radgrad2.addColorStop(1, 'rgba(255,1,136,0)');
-
-  var radgrad3 = ctx.createRadialGradient(95,15,15,102,20,40);
-  radgrad3.addColorStop(0, '#00C9FF');
-  radgrad3.addColorStop(0.8, '#00B5E2');
-  radgrad3.addColorStop(1, 'rgba(0,201,255,0)');
-
-  var radgrad4 = ctx.createRadialGradient(0,150,50,0,140,90);
-  radgrad4.addColorStop(0, '#F4F201');
-  radgrad4.addColorStop(0.8, '#E4C700');
-  radgrad4.addColorStop(1, 'rgba(228,199,0,0)');
-
-  // draw shapes
-  ctx.fillStyle = radgrad4;
-  ctx.fillRect(0,0,150,150);
-  ctx.fillStyle = radgrad3;
-  ctx.fillRect(0,0,150,150);
-  ctx.fillStyle = radgrad2;
-  ctx.fillRect(0,0,150,150);
-  ctx.fillStyle = radgrad;
-  ctx.fillRect(0,0,150,150);
-}
-
- - - -

Wir haben die Mittelpunkte von Start- und Zielkreis etwas gegeneinander versetzt, was einen kugelförmigen 3D-Effekt erzeugt. Man sollte vermeiden, dass sich die Begrenzungen des inneren und des äußeren Kreises schneiden, weil das unberechenbare Effekte erzeugen kann.

- -

Die letzte Farbstufe in jedem der vier Verläufe verwendet eine völlig transparente Farbe. Für einen gelungenen Übergang zur vorhergehenden Stufe sollten die Farbwerte identisch sein. Das ist im obigen Programm nicht gleich erkennbar, weil unterscheidliche Schreibweisen für die Farbwerte verwendet wurden. Berücksichtigen Sie, dass z.B. beim ersten Farbverlauf #019F62 auch als rgba(1,159,98,1) geschrieben werden könnte.

- -

{{EmbedLiveSample("A_createRadialGradient_example", "180", "180", "https://mdn.mozillademos.org/files/244/Canvas_radialgradient.png")}}

- -

Muster

- -

In einem der Beispiele auf der vorhergehenden Seite haben wir mehrere Schleifen verwendet, um Bilder in Form eines Musters anzuordnen. Allerdings gibt es auch eine weit einfachere Methode: createPattern()

- -
-
{{domxref("CanvasRenderingContext2D.createPattern", "createPattern(image, type)")}}
-
-

Erzeugt ein neues Muster-Objekt in Canvas und gibt es zurück. image ist eine {{domxref("CanvasImageSource")}} (ein {{domxref("HTMLImageElement")}}, ein weiterer Canvas, ein {{HTMLElement("video")}} Element, oder ähnliches). Der String image gibt an wie das Bild benutzt wird.

-
-
- -

type enthält eine der folgenden Zeichenketten und bestimmt, wie aus dem Bild ein Muster erzeugt wird.

- -
-
repeat
-
-

Wiederhole („kachle“) das Bild horizontal und vertikal.

-
-
repeat-x
-
-

Wiederhole das Bild nur horizontal.

-
-
repeat-y
-
-

Nur vertikale Wiederholung.

-
-
no-repeat
-
-

Keine Wiederholung, das Bild wird nur einmal benutzt.

-
-
- -

 

- -

Wir verwenden eine Methode ähnlich den vorhergehenden Beispielen zu Verläufen, um ein {{domxref("CanvasPattern")}}-Objekt zu erzeugen. Haben wir das Muster erst erzeugt, können wir es einer fillStyle- oder strokeStyle-Eigenschaft zuordnen.

- -
var img = new Image();
-img.src = 'someimage.png';
-var ptrn = ctx.createPattern(img,'repeat');
-
- -

 

- -
-

Anmerkung: Wie bei drawImage() müssen Sie auch hier sicherstellen, dass das Bild vollständig geladen wurde bevor Sie die Methode aufrufen; andernfalls kann das Muster inkorrekt dargestellt werden.

-
- -

Beispiel für createPattern

- -

Im abschließenden Beispiel erzeugen wir ein Muster um es dann dem fillStyle zuzuordnen. Bemerkenswert ist hierbei die Verwendung des onload()-Handlers, um zu gewährleisten, dass die Bilddatei erst dann dem Muster zugeordnet wird, wenn sie vollständig geladen wurde.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // create new image object to use as pattern
-  var img = new Image();
-  img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
-  img.onload = function(){
-
-    // create pattern
-    var ptrn = ctx.createPattern(img,'repeat');
-    ctx.fillStyle = ptrn;
-    ctx.fillRect(0,0,150,150);
-
-  }
-}
-
- - - -

{{EmbedLiveSample("A_createPattern_example", "180", "180", "https://mdn.mozillademos.org/files/222/Canvas_createpattern.png")}}

- -

Schatten

- -

An der Erzeugung von Schatten sind vier Eignschaften beteiligt:

- -
-
{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX = float")}}
-
-

Definiert die horizontale Ausdehnung des Schattens vom Objekt weg. Dieser Wert wird nicht durch die Transforamtionsmatrix beeinflusst. Standardwert ist 0.

-
-
{{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY = float")}}
-
-

Wie shadowOffsetY, aber in vertikaler Richtung.

-
-
{{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur = float")}}
-
-

Definiert das Ausmaß der Unschärfe; der Wert beschreibt dabei nicht eine bestimmte Anzahl von Pixeln. Er wird nicht durch die Transformationsmatrix beeinflusst. Standardwert ist 0.

-
-
{{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor = color")}}
-
-

Eine CSS Farbdefinition der Schattenfarbe. Standardwert ist voll tranparentes Schwarz.

-
-
- -

Die Eigenschaften shadowOffsetX und shadowOffsetY bestimmen wie weit weg vom Objekt sich der Schatten in x- und y-Richtung erstrecken soll; diese Werte werden nicht von der aktuellen Tranformationsmatrix beeinflusst. Mit negative Werten verläuft der Schatten nach links und oben, mit positiven nach rechts und unten. Standardwert für beide Parameter ist 0.

- -

Die Eigenschaft shadowBlur definiert die Ausdehnung der Unschärfezone; der Wert beschreibt dabei keine bestimmte Anzahl von Pixeln und wird durch die Transformationsmatrix nicht verändert. Standardwert: 0.

- -

Die Eigenschaft shadowColor ist ein regulärer CSS-Farbwert, der die Farbe des Schatteneffektes definiert. Standardwert: voll-transparentes Schwarz.

- -
-

Note: Schatten werden nur bei source-over compositing operations gezeichnet.

-
- -

Beispiel für Text mit Schatteneffekt

- -

Dieses Beispiel zeichnet eine Buchstabenfolge mit einem Schatteneffekt.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  ctx.shadowOffsetX = 2;
-  ctx.shadowOffsetY = 2;
-  ctx.shadowBlur = 2;
-  ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
-
-  ctx.font = "20px Times New Roman";
-  ctx.fillStyle = "Black";
-  ctx.fillText("Sample String", 5, 30);
-}
-
- - - -

{{EmbedLiveSample("A_shadowed_text_example", "180", "100", "https://mdn.mozillademos.org/files/2505/shadowed-string.png")}}

- -

Wir werden uns die font-Eigenschaft und die fillText-Methode im nächsten Kapitel über das Zeichnen von Text genauer ansehen.

- -

Canvas Füllregeln

- -

Bei der Verwendung von fill ( oder {{domxref("CanvasRenderingContext2D.clip", "clip")}} und {{domxref("CanvasRenderingContext2D.isPointInPath", "isPointinPath")}}) kann man wahlweise eine Füllregel angeben, mit der man über die Berechnung der Windungszahl bestimmt ob ein Punkt innerhalb oder ausserhalb der Strecke liegt und ob die Fläche dementsprechend gefüllt wird oder nicht. Das ist nützlich wenn eine Strecke sich selbst schneidet oder in eine andere eingeschrieben ist.

- -

Zwei Werte sind möglich:

- - - -

In diesem  Beispiel verwenden wir die evenodd-Regel.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  ctx.beginPath();
-  ctx.arc(50, 50, 30, 0, Math.PI*2, true);
-  ctx.arc(50, 50, 15, 0, Math.PI*2, true);
-  ctx.fill("evenodd");
-}
- - - -

{{EmbedLiveSample("Canvas_fill_rules", "110", "110", "https://mdn.mozillademos.org/files/9855/fill-rule.png")}}

- -

{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}

diff --git a/files/de/web/guide/html/canvas_tutorial/basic_animations/index.html b/files/de/web/guide/html/canvas_tutorial/basic_animations/index.html deleted file mode 100644 index 78ca0ac2fc..0000000000 --- a/files/de/web/guide/html/canvas_tutorial/basic_animations/index.html +++ /dev/null @@ -1,307 +0,0 @@ ---- -title: Einfache Animationen -slug: Web/Guide/HTML/Canvas_Tutorial/Basic_animations -translation_of: Web/API/Canvas_API/Tutorial/Basic_animations ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Web/API/Canvas_API/Tutorial/Advanced_animations")}}
- -
-

Seitdem wir JavaScript benutzen, um {{HTMLElement("canvas")}}-Elemente zu steuern, ist es auch sehr einfach, interaktive Animationen zu erzeugen. In diesem Kapitel werden wir uns ein paar einfachen Animationen widmen.

-
- -

Die wahrscheinlich größte Einschränkung ist, dass jede Form, die einmal gezeichnet wird, genauso bleibt wie anfänglich. Wenn wir sie bewegen wollen, müssen wir sie neuzeichnen. Aber: Auch alle anderen Formen, die wir davor schon gezeichnet haben, müssen auch neu gezeichnet werden! Es beansprucht leider einiges an Zeit, komplexe Figuren neu zu zeichnen.

- -

Grundlagen der Animation

- -

Diese Schritte müssen Sie befolgen, um ein neues Frame zu zeichnen:

- -
    -
  1. Bereinigen Sie die Zeichenfläche (canvas)
    - Sofern die Form, die Sie zeichnen wollen, nicht den gesamten Platz der Zeichenfläche einnimmt, müssen Sie alle vorherigen Formen entfernen. Am einfachsten erreichen Sie dies über die {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}-Methode.
    2. -
  2. Sichern Sie den Canvas-Zustand
    - Wenn Sie irgendeine Einstellung verändern (wie das Layout, Transformtationen, etc.), die den Status der Zeichenfläche beeinflussen, sollten Sie den Ursprungszustand sichern. Nur so gewährleisten Sie, dass der Ursprungszustand für jedes neue Frame verwendet wird. Verwenden Sie hierfür die save()-Methode.
    3. -
  3. Zeichnen Sie die animierte Form
    - Hier erzeugen Sie nun endlich die eigentliche Animation.
    4. -
  4. Setzen Sie den Canvas-Zustand zurück.
    - Mit der restore()-Methode können Sie auf den Ursprungszustand zurückwechseln, um ein neues Frame zu erzeugen.
    5. -
- -

Steuerung einer Animation

- -

Formen werden auf eine Zeichenfläche appliziert, indem die entsprechende Canvas-Methode verwendet wird oder eine vorher erzeugte Funktion aufgerufen wird. Im Normalfall erscheint die Canvas-Zeichnung erst, nachdem das Skript vollständig ausgeführt wurde. So ist es nicht möglich, eine Animation durch eine for-Schleife zu erzeugen.

- -

Das bedeutet nun, dass wir einen Weg finden müssen, die Zeichenfunktion für eine bestimmte Zeitdauer ausführen zu können. Dafür gibt es nun zwei Wege, um eine Animation so zu steuern:

- -

Updates nach Zeitplan

- -

Einerseits gibt es die {{domxref("window.setInterval()")}}-, {{domxref("window.setTimeout()")}}- und {{domxref("window.requestAnimationFrame()")}}-Funktionen, die benutzt werden, um eine bestimmte Funktion nach einer Zeitspanne aufzurufen.

- -
-
{{domxref("WindowTimers.setInterval", "setInterval(function, delay)")}}
-
Ruft die unter function spezifierte Funktion wiederholend nach der in delay (Milisekunden) definierten Zeitspanne auf.
-
{{domxref("WindowTimers.setTimeout", "setTimeout(function, delay)")}}
-
Ruft die spezifizierte Funktion nach der unter delay festgelegten Zeitspanne einmalig auf.
-
{{domxref("Window.requestAnimationFrame()", "requestAnimationFrame(callback)")}}
-
Tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint.
-
- -

If you don't want any user interaction you can use the setInterval() function which repeatedly executes the supplied code. If we wanted to make a game, we could use keyboard or mouse events to control the animation and use setTimeout(). By setting {{domxref("EventListener")}}s, we catch any user interaction and execute our animation functions.

- -
-

In the examples below, we'll use the {{domxref("window.requestAnimationFrame()")}} method to control the animation. The requestAnimationFrame method provides a smoother and more efficient way for animating by calling the animation frame when the system is ready to paint the frame. The number of callbacks is usually 60 times per second and may be reduced to a lower rate when running in background tabs. For more information about the animation loop, especially for games, see the article Anatomy of a video game in our Game development zone.

-
- -

An animated solar system

- -

This example animates a small model of our solar system.

- -
var sun = new Image();
-var moon = new Image();
-var earth = new Image();
-function init() {
-  sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
-  moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
-  earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
-  window.requestAnimationFrame(draw);
-}
-
-function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  ctx.globalCompositeOperation = 'destination-over';
-  ctx.clearRect(0, 0, 300, 300); // clear canvas
-
-  ctx.fillStyle = 'rgba(0, 0, 0, 0.4)';
-  ctx.strokeStyle = 'rgba(0, 153, 255, 0.4)';
-  ctx.save();
-  ctx.translate(150, 150);
-
-  // Earth
-  var time = new Date();
-  ctx.rotate(((2 * Math.PI) / 60) * time.getSeconds() + ((2 * Math.PI) / 60000) * time.getMilliseconds());
-  ctx.translate(105, 0);
-  ctx.fillRect(0, -12, 50, 24); // Shadow
-  ctx.drawImage(earth, -12, -12);
-
-  // Moon
-  ctx.save();
-  ctx.rotate(((2 * Math.PI) / 6) * time.getSeconds() + ((2 * Math.PI) / 6000) * time.getMilliseconds());
-  ctx.translate(0, 28.5);
-  ctx.drawImage(moon, -3.5, -3.5);
-  ctx.restore();
-
-  ctx.restore();
-
-  ctx.beginPath();
-  ctx.arc(150, 150, 105, 0, Math.PI * 2, false); // Earth orbit
-  ctx.stroke();
-
-  ctx.drawImage(sun, 0, 0, 300, 300);
-
-  window.requestAnimationFrame(draw);
-}
-
-init();
-
- - - -

{{EmbedLiveSample("An_animated_solar_system", "310", "310", "https://mdn.mozillademos.org/files/202/Canvas_animation1.png")}}

- -

An animated clock

- -

This example draws an animated clock, showing your current time.

- -
function clock() {
-  var now = new Date();
-  var ctx = document.getElementById('canvas').getContext('2d');
-  ctx.save();
-  ctx.clearRect(0, 0, 150, 150);
-  ctx.translate(75, 75);
-  ctx.scale(0.4, 0.4);
-  ctx.rotate(-Math.PI / 2);
-  ctx.strokeStyle = 'black';
-  ctx.fillStyle = 'white';
-  ctx.lineWidth = 8;
-  ctx.lineCap = 'round';
-
-  // Hour marks
-  ctx.save();
-  for (var i = 0; i < 12; i++) {
-    ctx.beginPath();
-    ctx.rotate(Math.PI / 6);
-    ctx.moveTo(100, 0);
-    ctx.lineTo(120, 0);
-    ctx.stroke();
-  }
-  ctx.restore();
-
-  // Minute marks
-  ctx.save();
-  ctx.lineWidth = 5;
-  for (i = 0; i < 60; i++) {
-    if (i % 5!= 0) {
-      ctx.beginPath();
-      ctx.moveTo(117, 0);
-      ctx.lineTo(120, 0);
-      ctx.stroke();
-    }
-    ctx.rotate(Math.PI / 30);
-  }
-  ctx.restore();
-
-  var sec = now.getSeconds();
-  var min = now.getMinutes();
-  var hr  = now.getHours();
-  hr = hr >= 12 ? hr - 12 : hr;
-
-  ctx.fillStyle = 'black';
-
-  // write Hours
-  ctx.save();
-  ctx.rotate(hr * (Math.PI / 6) + (Math.PI / 360) * min + (Math.PI / 21600) *sec);
-  ctx.lineWidth = 14;
-  ctx.beginPath();
-  ctx.moveTo(-20, 0);
-  ctx.lineTo(80, 0);
-  ctx.stroke();
-  ctx.restore();
-
-  // write Minutes
-  ctx.save();
-  ctx.rotate((Math.PI / 30) * min + (Math.PI / 1800) * sec);
-  ctx.lineWidth = 10;
-  ctx.beginPath();
-  ctx.moveTo(-28, 0);
-  ctx.lineTo(112, 0);
-  ctx.stroke();
-  ctx.restore();
-
-  // Write seconds
-  ctx.save();
-  ctx.rotate(sec * Math.PI / 30);
-  ctx.strokeStyle = '#D40000';
-  ctx.fillStyle = '#D40000';
-  ctx.lineWidth = 6;
-  ctx.beginPath();
-  ctx.moveTo(-30, 0);
-  ctx.lineTo(83, 0);
-  ctx.stroke();
-  ctx.beginPath();
-  ctx.arc(0, 0, 10, 0, Math.PI * 2, true);
-  ctx.fill();
-  ctx.beginPath();
-  ctx.arc(95, 0, 10, 0, Math.PI * 2, true);
-  ctx.stroke();
-  ctx.fillStyle = 'rgba(0, 0, 0, 0)';
-  ctx.arc(0, 0, 3, 0, Math.PI * 2, true);
-  ctx.fill();
-  ctx.restore();
-
-  ctx.beginPath();
-  ctx.lineWidth = 14;
-  ctx.strokeStyle = '#325FA2';
-  ctx.arc(0, 0, 142, 0, Math.PI * 2, true);
-  ctx.stroke();
-
-  ctx.restore();
-
-  window.requestAnimationFrame(clock);
-}
-
-window.requestAnimationFrame(clock);
- - - -

{{EmbedLiveSample("An_animated_clock", "180", "180", "https://mdn.mozillademos.org/files/203/Canvas_animation2.png")}}

- -

A looping panorama

- -

In this example, a panorama is scrolled left-to-right. We're using an image of Yosemite National Park we took from Wikipedia, but you could use any image that's larger than the canvas.

- -
var img = new Image();
-
-// User Variables - customize these to change the image being scrolled, its
-// direction, and the speed.
-
-img.src = 'https://mdn.mozillademos.org/files/4553/Capitan_Meadows,_Yosemite_National_Park.jpg';
-var CanvasXSize = 800;
-var CanvasYSize = 200;
-var speed = 30; // lower is faster
-var scale = 1.05;
-var y = -4.5; // vertical offset
-
-// Main program
-
-var dx = 0.75;
-var imgW;
-var imgH;
-var x = 0;
-var clearX;
-var clearY;
-var ctx;
-
-img.onload = function() {
-    imgW = img.width * scale;
-    imgH = img.height * scale;
-
-    if (imgW > CanvasXSize) { x = CanvasXSize - imgW; } // image larger than canvas
-    if (imgW > CanvasXSize) { clearX = imgW; } // image width larger than canvas
-    else { clearX = CanvasXSize; }
-    if (imgH > CanvasYSize) { clearY = imgH; } // image height larger than canvas
-    else { clearY = CanvasYSize; }
-
-    // get canvas context
-    ctx = document.getElementById('canvas').getContext('2d');
-
-    // set refresh rate
-    return setInterval(draw, speed);
-}
-
-function draw() {
-    ctx.clearRect(0, 0, clearX, clearY); // clear the canvas
-
-    // if image is <= Canvas Size
-    if (imgW <= CanvasXSize) {
-        // reset, start from beginning
-        if (x > CanvasXSize) { x = -imgW + x; }
-        // draw additional image1
-        if (x > 0) { ctx.drawImage(img, -imgW + x, y, imgW, imgH); }
-        // draw additional image2
-        if (x - imgW > 0) { ctx.drawImage(img, -imgW * 2 + x, y, imgW, imgH); }
-    }
-
-    // if image is > Canvas Size
-    else {
-        // reset, start from beginning
-        if (x > (CanvasXSize)) { x = CanvasXSize - imgW; }
-        // draw aditional image
-        if (x > (CanvasXSize-imgW)) { ctx.drawImage(img, x - imgW + 1, y, imgW, imgH); }
-    }
-    // draw image
-    ctx.drawImage(img, x, y,imgW, imgH);
-    // amount to move
-    x += dx;
-}
-
- -

Below is the {{HTMLElement("canvas")}} in which the image is scrolled. Note that the width and height specified here must match the values of the CanvasXZSize and CanvasYSize variables in the JavaScript code.

- -
<canvas id="canvas" width="800" height="200"></canvas>
- -

{{EmbedLiveSample("A_looping_panorama", "830", "230")}}

- -

Other examples

- -
-
A basic ray-caster
-
A good example of how to do animations using keyboard controls.
-
Advanced animations
-
We will have a look at some advanced animation techniques and physics in the next chapter.
-
- -

{{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Web/API/Canvas_API/Tutorial/Advanced_animations")}}

diff --git a/files/de/web/guide/html/canvas_tutorial/bilder/index.html b/files/de/web/guide/html/canvas_tutorial/bilder/index.html deleted file mode 100644 index b636807f97..0000000000 --- a/files/de/web/guide/html/canvas_tutorial/bilder/index.html +++ /dev/null @@ -1,324 +0,0 @@ ---- -title: Bilder -slug: Web/Guide/HTML/Canvas_Tutorial/Bilder -translation_of: Web/API/Canvas_API/Tutorial/Using_images ---- -

{{CanvasSidebar}}

- -

Natürlich können auch Bilder gezeichnet werden. Diese können die unterschiedlichsten Formate haben: PNG, GIF, JPEG oder bestimmte HTML Elemente.

- -

Um Bilder zu importieren bedarf es bloß zwei Schritte:

- -
    -
  1. Ein {{domxref("HTMLImageElement")}} Objekt erzeugen oder das HTML Element selektieren.
    2. -
  2. Das Bild mithilfe der drawImage() Funktion zeichnen.
    3. -
- -

Bilder importieren

- -

Die canvas API unterstützt folgende Typen als Bilder:

- -
-
{{domxref("HTMLImageElement")}}
-
Diese Bilder können mithilfe des Image() Konstruktor oder mithilfe eines {{HTMLElement("img")}} Element erstellt werden.
-
{{domxref("HTMLVideoElement")}}
-
Der aktuelle Frame des {{HTMLElement("video")}} Element wird als Bild genutzt.
-
{{domxref("HTMLCanvasElement")}}
-
Ein anderes {{HTMLElement("canvas")}} Element kann ebenfalls als Bild dienen.
-
{{domxref("ImageBitmap")}}
-
Eine hochleistungsfähige Bitmap, welche mit niedriger Verzögerung gerendert werden kann. Sie lässt sich aus allen der oben genannten Quellen, sowie aus mehreren weitern erstellen.
-
- -

These sources are collectively referred to by the type {{domxref("CanvasImageSource")}}.

- -

There are several ways to get images for use on a canvas.

- -

Bilder von derselben Seite

- -

Um Bilder von derselben Seite zu bekommen, können diese Methoden genutzt werden:

- -
    -
  • Die {{domxref("document.images")}} Sammlung
    • -
  • Die {{domxref("document.getElementsByTagName()")}} Methode
    • -
  • Die {{domxref("document.getElementById()")}} Methode, wenn eine Id festgelegt worden ist
    • -
- -

Bilder von anderen Seiten nutzen

- -

Mithilfe des {{htmlattrxref("crossorigin", "img")}} Attributs eines {{domxref("HTMLImageElement")}} ist es möglich die Erlaubnis zur Benutzung eines Bildes von einer anderen Domain zu nutzen. Wenn die Domain jenen Zugriff gestattet, kann das Image genutzt werden und das Bild wird wie gewollt angezeigt; andernfalls entsteht ein "getaintes Canvas".

- -

Andere Canvas Elemente benutzen

- -

Genau wie normalen Bildern auch, können wir ein anderes Canvas durch {{domxref("document.getElementsByTagName()")}} oder {{domxref("document.getElementById()")}} ansprechen.

- -

Sei dabei sicher, dass du auf deinem Canvas etwas gezeichnet hast, bevor du es im Zielcanvas verwendest.

- -

Eine sinnvoller Einsatz ist zum Beispiel das zweite Canvas als Vorschaubild (Thumbnail) des ersten zu verwenden.

- -

Ein Bild von Grund auf

- -

Eine andere Option ist ein neues {{domxref("HTMLImageElement")}} in JavaScript zu erstellen. Um das zu tun, können wir den Image()-Konstruktor verwenden:

- -
var img = new Image(); // Erstelle neues Image-Objekt
-img.src = 'myImage.png'; // Setze den Pfad zum Bild
- -

Wird dieses Skript ausgeführt, fängt das Bild an zu laden.

- -
-

Achtung: Wenn drawImage() vor dem Laden des Bildes ausgeführt wird, wird nichts passieren (In älteren Browsern kann es eine Fehlermeldung geben). Um jenen Fehler zu vermeiden, muss also sichergestellt werden, dass das load-Event benutzt wird.

-
- -
var img = new Image();   // Erstelle neues Image-Objekt
-img.addEventListener("load", function() {
-  // füge hier den drawImage()-Befehl ein
-}, false);
-img.src = 'myImage.png'; // Setze den Pfad zum Bild
-
- -

Wenn nur ein externes Bild geladen werden muss, ist das eine gute Möglichkeit. Wenn jedoch mehrere Bilder benötigt werden, sollte es besser anders gelöst werden. Es ist nicht das Ziel deises Tutorials auf das Vorladen von Bildern einzugehen, aber für eine komplette Lösung kannst du dir JavaScript Image Preloader angucken (ist leder auf Englisch).

- -

Embedding an image via data: URL

- -

Another possible way to include images is via the data: url. Data URLs allow you to completely define an image as a Base64 encoded string of characters directly in your code.

- -
var img_src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';
-
- -

One advantage of data URLs is that the resulting image is available immediately without another round trip to the server. Another potential advantage is that it is also possible to encapsulate in one file all of your CSS, JavaScript, HTML, and images, making it more portable to other locations.

- -

Some disadvantages of this method are that your image is not cached, and for larger images the encoded url can become quite long.

- -

Using frames from a video

- -

You can also use frames from a video being presented by a {{HTMLElement("video")}} element (even if the video is not visible). For example, if you have a {{HTMLElement("video")}} element with the ID "myvideo", you can do this:

- -
function getMyVideo() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    return document.getElementById('myvideo');
-  }
-}
-
- -

This returns the {{domxref("HTMLVideoElement")}} object for the video, which, as covered earlier, is one of the objects that can be used as a CanvasImageSource.

- -

Drawing images

- -

Once we have a reference to our source image object we can use the drawImage() method to render it to the canvas. As we will see later the drawImage() method is overloaded and has several variants. In its most basic form it looks like this:

- -
-
drawImage(image, x, y)
-
Draws the CanvasImageSource specified by the image parameter at the coordinates (x, y).
-
- -

Example: A simple line graph

- -

In the following example, we will use an external image as the backdrop for a small line graph. Using backdrops can make your script considerably smaller because we can avoid the need for code to generate the background. In this example, we're only using one image, so I use the image object's load event handler to execute the drawing statements. The drawImage() method places the backdrop at the coordinate (0, 0), which is the top-left corner of the canvas.

- - - -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  var img = new Image();
-  img.onload = function(){
-    ctx.drawImage(img,0,0);
-    ctx.beginPath();
-    ctx.moveTo(30,96);
-    ctx.lineTo(70,66);
-    ctx.lineTo(103,76);
-    ctx.lineTo(170,15);
-    ctx.stroke();
-  };
-  img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png';
-}
- -

The resulting graph looks like this:

- -

{{EmbedLiveSample("Example_A_simple_line_graph", 220, 160, "https://mdn.mozillademos.org/files/206/Canvas_backdrop.png")}}

- -

Scaling

- -

The second variant of the drawImage() method adds two new parameters and lets us place scaled images on the canvas.

- -
-
drawImage(image, x, y, width, height)
-
This adds the width and height parameters, which indicate the size to which to scale the image when drawing it onto the canvas.
-
- -

Example: Tiling an image

- -

In this example, we'll use an image as a wallpaper and repeat it several times on the canvas. This is done simply by looping and placing the scaled images at different positions. In the code below, the first for loop iterates over the rows. The second for loop iterates over the columns. The image is scaled to one third of its original size, which is 50x38 pixels.

- -
-

Note: Images can become blurry when scaling up or grainy if they're scaled down too much. Scaling is probably best not done if you've got some text in it which needs to remain legible.

-
- - - -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  var img = new Image();
-  img.onload = function(){
-    for (var i=0;i<4;i++){
-      for (var j=0;j<3;j++){
-        ctx.drawImage(img,j*50,i*38,50,38);
-      }
-    }
-  };
-  img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
-}
- -

The resulting canvas looks like this:

- -

{{EmbedLiveSample("Example_Tiling_an_image", 160, 160, "https://mdn.mozillademos.org/files/251/Canvas_scale_image.png")}}

- -

Slicing

- -

The third and last variant of the drawImage() method has eight parameters. It lets us cut out a section of the source image, then scale and draw it on our canvas.

- -
-
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
-
Given an image, this function takes the area of the source image specified by the rectangle whose top-left corner is (sx, sy) and whose width and height are sWidth and sHeight and draws it into the canvas, placing it on the canvas at (dx, dy) and scaling it to the size specified by dWidth and dHeight.
-
- -

To really understand what this does, it may help to look at the image to the right. The first four parameters define the location and size of the slice on the source image. The last four parameters define the rectangle into which to draw the image on the destination canvas.

- -

Slicing can be a useful tool when you want to make compositions. You could have all elements in a single image file and use this method to composite a complete drawing. For instance, if you want to make a chart you could have a PNG image containing all the necessary text in a single file and depending on your data could change the scale of your chart fairly easily. Another advantage is that you don't need to load every image individually, which can improve load performance.

- -

Example: Framing an image

- -

In this example, we'll use the same rhino as in the previous example, but we'll slice out its head and composite it into a picture frame. The picture frame image is a 24-bit PNG which includes a drop shadow. Because 24-bit PNG images include a full 8-bit alpha channel, unlike GIF and 8-bit PNG images, it can be placed onto any background without worrying about a matte color.

- -
<html>
- <body onload="draw();">
-   <canvas id="canvas" width="150" height="150"></canvas>
-   <div style="display:none;">
-     <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227">
-     <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150">
-   </div>
- </body>
-</html>
-
- -
function draw() {
-  var canvas = document.getElementById('canvas');
-  var ctx = canvas.getContext('2d');
-
-  // Draw slice
-  ctx.drawImage(document.getElementById('source'),
-                33, 71, 104, 124, 21, 20, 87, 104);
-
-  // Draw frame
-  ctx.drawImage(document.getElementById('frame'),0,0);
-}
- -

We took a different approach to loading the images this time. Instead of loading them by creating new {{domxref("HTMLImageElement")}} objects, we included them as {{HTMLElement("img")}} tags directly in our HTML source and retrieved the images from those. The images are hidden from output by setting the CSS property {{cssxref("display")}} to none for those images.

- -

{{EmbedLiveSample("Example_Framing_an_image", 160, 160, "https://mdn.mozillademos.org/files/226/Canvas_drawimage2.jpg")}}

- -

The script itself is very simple. Each {{HTMLElement("img")}} is assigned an ID attribute, which makes them easy to select using {{domxref("document.getElementById()")}}. We then simply use drawImage() to slice the rhino out of the first image and scale him onto the canvas, then draw the frame on top using a second drawImage() call.

- - - -

In the final example of this chapter, we'll build a little art gallery. The gallery consists of a table containing several images. When the page is loaded, a {{HTMLElement("canvas")}}  element is inserted for each image and a frame is drawn arround it.

- -

In this case, every image has a fixed width and height, as does the frame that's drawn around them. You could enhance the script so that it uses the image's width and height to make the frame fit perfectly around it.

- -

The code below should be self-explanatory. We loop through the {{domxref("document.images")}} container and add new canvas elements accordingly. Probably the only thing to note, for those not so familiar with the DOM, is the use of the {{domxref("Node.insertBefore")}} method. insertBefore() is a method of the parent node (a table cell) of the element (the image) before which we want to insert our new node (the canvas element).

- -
<html>
- <body onload="draw();">
-     <table>
-      <tr>
-        <td><img src="https://mdn.mozillademos.org/files/5399/gallery_1.jpg"></td>
-        <td><img src="https://mdn.mozillademos.org/files/5401/gallery_2.jpg"></td>
-        <td><img src="https://mdn.mozillademos.org/files/5403/gallery_3.jpg"></td>
-        <td><img src="https://mdn.mozillademos.org/files/5405/gallery_4.jpg"></td>
-      </tr>
-      <tr>
-        <td><img src="https://mdn.mozillademos.org/files/5407/gallery_5.jpg"></td>
-        <td><img src="https://mdn.mozillademos.org/files/5409/gallery_6.jpg"></td>
-        <td><img src="https://mdn.mozillademos.org/files/5411/gallery_7.jpg"></td>
-        <td><img src="https://mdn.mozillademos.org/files/5413/gallery_8.jpg"></td>
-      </tr>
-     </table>
-     <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150">
- </body>
-</html>
-
- -

And here's some CSS to make things look nice:

- -
body {
-  background: 0 -100px repeat-x url(https://mdn.mozillademos.org/files/5415/bg_gallery.png) #4F191A;
-  margin: 10px;
-}
-
-img {
-  display: none;
-}
-
-table {
-  margin: 0 auto;
-}
-
-td {
-  padding: 15px;
-}
-
- -

Tying it all together is the JavaScript to draw our framed images:

- -
function draw() {
-
-  // Loop through all images
-  for (var i=0;i<document.images.length;i++){
-
-    // Don't add a canvas for the frame image
-    if (document.images[i].getAttribute('id')!='frame'){
-
-      // Create canvas element
-      canvas = document.createElement('canvas');
-      canvas.setAttribute('width',132);
-      canvas.setAttribute('height',150);
-
-      // Insert before the image
-      document.images[i].parentNode.insertBefore(canvas,document.images[i]);
-
-      ctx = canvas.getContext('2d');
-
-      // Draw image to canvas
-      ctx.drawImage(document.images[i],15,20);
-
-      // Add frame
-      ctx.drawImage(document.getElementById('frame'),0,0);
-    }
-  }
-}
- -

{{EmbedLiveSample("Art_gallery_example", 725, 400, "https://mdn.mozillademos.org/files/205/Canvas_art_gallery.jpg")}}

- -

Controlling image scaling behavior

- -

As mentioned previously, scaling images can result in fuzzy or blocky artifacts due to the scaling process. You can use the drawing context's imageSmoothingEnabled property to control the use of image smoothing algorithms when scaling images within your context. By default, this is true, meaning images will be smoothed when scaled. You can disable this feature like this:

- -
ctx.mozImageSmoothingEnabled = false;
-
- -

{{PreviousNext("Web/Guide/HTML/Canvas_tutorial/Drawing_shapes", "Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors")}}

diff --git a/files/de/web/guide/html/canvas_tutorial/canvas_optimieren/index.html b/files/de/web/guide/html/canvas_tutorial/canvas_optimieren/index.html deleted file mode 100644 index fc1678c71a..0000000000 --- a/files/de/web/guide/html/canvas_tutorial/canvas_optimieren/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Canvas optimieren -slug: Web/Guide/HTML/Canvas_Tutorial/Canvas_optimieren -tags: - - Canvas - - Fortgeschritten - - Grafik - - HTML - - HTML5 - - Tutorial -translation_of: Web/API/Canvas_API/Tutorial/Optimizing_canvas ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}
- -
-

Das {{HTMLElement("canvas")}}-Element ist einer der am meisten verbreiteten Standards, um 2D-Grafiken im Web zu erzeugen. Es wird oft für Spiele und komplexe Visualisierungen eingesetzt. Reizen Webseiten und Apps das Canvas jedoch zu sehr aus, lässt die Performance nach. Dieser Artikel soll Hilfestellung für die Optimierung der Nutzung des Canvas-Elements geben, um sicherzustellen, dass Ihre Webseite oder App performant ist.

-
- -

Tipps zur Performance

- -

Dies ist eine Sammlung von Tipps, die Helfen, die Performance zu verbessern.

- -

Vorrendern von ähnlichen oder sich wiederholenden Objekten auf einem Offscreen-Canvas

- -

Falls Sie komplexe Zeichenoperationen in jedem Frame ausführen, ziehen Sie in Betracht, ein Offscreen-Canvas zu erzeugen. Damit können Sie Objekte einmal (oder wann immer Änderungen stattfinden) auf dem Offscreen-Canvas zeichnen und in jedem Frame das Offscreen-Canvas zeichnen.

- -
myEntity.offscreenCanvas = document.createElement('canvas');
-myEntity.offscreenCanvas.width = myEntity.width;
-myEntity.offscreenCanvas.height = myEntity.height;
-myEntity.offscreenContext = myEntity.offscreenCanvas.getContext('2d');
-
-myEntity.render(myEntity.offscreenContext);
-
- -

Vermeiden Sie Gleitkomma-Koordinaten

- -

Falls Sie Objekte auf dem Canvas mit Gleitkommazahlen als Koordinaten zeichnen, müssen Subpixel gerendert werden.

- -
ctx.drawImage(myImage, 0.3, 0.5);
-
- -

Dadurch muss der Browser zusätzliche Berechnungen durchführen, um eine Kantenglättung zu erzielen. Um dies zu verhindern, stellen Sie sicher, dass Sie alle Koordinaten in Aufrufen von {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}} runden, zum Beispiel mit Hilfe von {{jsxref("Math.floor()")}}.

- -

Skalieren Sie keine Bilder in drawImage

- -

Laden Sie mehrere Größen Ihrer Bilder auf ein Offscreen-Canvas, anstatt sie andauernd in {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}} zu skalieren.

- -

Benutzen Sie mehrere Canvas-Ebenen für komplexe Szenen

- -

Möglicherweise haben Sie einige Elemente, die sich oft ändern oder bewegen, während andere Dinge (wie zum Beispiel die UI) sich nie ändern. Diese Situation können Sie optimieren, indem Sie durch die Erzeugung mehrerer Canvas-Elemente Ebenen erzeugen.

- -

Zum Beispiel können Sie eine UI-Ebene erzeugen, die über allen anderen Ebenen liegt und nur während Benutzereingaben gezeichnet wird. Zusätzlich kann es eine Spiel-Ebene geben, die alle oft veränderten Objekte enthält, sowie eine Hintergrund-Ebene, deren Objekte sich selten ändern.

- -
<div id="stage">
-  <canvas id="ui-layer" width="480" height="320"></canvas>
-  <canvas id="game-layer" width="480" height="320"></canvas>
-  <canvas id="background-layer" width="480" height="320"></canvas>
-</div>
-
-<style>
-  #stage {
-    width: 480px;
-    height: 320px;
-    position: relative;
-    border: 2px solid black
-  }
-  canvas { position: absolute; }
-  #ui-layer { z-index: 3 }
-  #game-layer { z-index: 2 }
-  #background-layer { z-index: 1 }
-</style>
-
- -

Nutzen Sie CSS für große Hintergrundbilder

- -

Falls Sie wie die meisten Spiele ein statisches Hintergrundbild haben, nutzen Sie ein simples {{HTMLElement("div")}}-Element mit der CSS-Eigenschaft {{cssxref("background")}} und positionieren Sie es unter dem Canvas. Dadurch verhindern Sie ein permanentes Neuzeichnen des Bildes in jedem Frame.

- -

Skalieren Sie das Canvas mit CSS-Transformationen

- -

CSS-Transformationen sind schneller, da sie die Grafikkarte nutzen. Im besten Fall skalieren Sie das Canvas nicht, oder haben ein kleineres Canvas, das Sie hochskalieren, als dass Sie ein großes Canvas herunterskalieren. Für Firefox OS ist die Zielgröße 480 x 320 px.

- -
var scaleX = window.innerWidth / canvas.width;
-var scaleY = window.innerHeight / canvas.height;
-
-var scaleToFit = Math.min(scaleX, scaleY);
-var scaleToCover = Math.max(scaleX, scaleY);
-
-stage.style.transformOrigin = '0 0'; //scale from top left
-stage.style.transform = 'scale(' + scaleToFit + ')';
-
- -

Nutzen Sie das moz-opaque Attribut (nur Gecko)

- -

Falls Ihr Spiel ein Canvas nutzt, das nicht transparent sein muss, setzen Sie das moz-opaque Attribut im Canvas-Tag. Diese Information kann intern genutzt werden, um das Zeichnen zu optimieren.

- -
<canvas id="myCanvas" moz-opaque></canvas>
- -

Weitere Tipps

- -
    -
  • Bündeln Sie Canvas-Aufrufe (Zeichnen Sie zum Beispiel eine Linie mit mehreren Knotenpunkten, anstatt einzelne Linien).
    • -
  • Vermeiden Sie unnötige Zustandsänderungen des Canvas.
    • -
  • Rendern Sie nur die Unterschiede, nicht den ganzen neuen Zustand.
    • -
  • Vermeiden Sie die {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}-Eigenschaft, soweit möglich.
    • -
  • Vermeiden Sie das Zeichnen von Text, falls möglich.
    • -
  • Versuchen Sie verschiedene Wege, das Canvas zu leeren ({{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}, {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} oder Größenänderung des Canvas)
    • -
  • Bei Animationen, nutzen Sie {{domxref("window.requestAnimationFrame()")}} anstatt {{domxref("window.setInterval()")}} .
    • -
  • Seien Sie vorsichtig mit schwergewichtigen Physik-Bibliotheken.
    • -
- -

Siehe auch

- - - -

{{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}

diff --git a/files/de/web/guide/html/canvas_tutorial/drawing_text/index.html b/files/de/web/guide/html/canvas_tutorial/drawing_text/index.html deleted file mode 100644 index 1cd3f0bfc6..0000000000 --- a/files/de/web/guide/html/canvas_tutorial/drawing_text/index.html +++ /dev/null @@ -1,165 +0,0 @@ ---- -title: Text zeichnen -slug: Web/Guide/HTML/Canvas_Tutorial/Drawing_text -tags: - - Canvas - - Fortgeschritten - - Grafik - - Tutorial -translation_of: Web/API/Canvas_API/Tutorial/Drawing_text ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}
- -
-

Nachdem wir im vorigen Kapitel gesehen haben, wie man Gestaltung und Farben anwendet , werden wir nun einen Blick darauf werfen, wie man Text auf ein canvas zeichnet.

-
- -

Text zeichnen

- -

Der Rendering-Kontext hält zwei Methoden zum zeichnen von Text bereit:

- -
-
{{domxref("CanvasRenderingContext2D.fillText", "fillText(text, x, y [, maxWidth])")}}
-
Füllt einen gegebenen Text an den gegebenen (x,y)-Koordinaten. Optional mit einer maximalen Breite, die zu zeichnen ist.
-
{{domxref("CanvasRenderingContext2D.strokeText", "strokeText(text, x, y [, maxWidth])")}}
-
Umrandet einen gegebenen Text an den gegebenen (x,y)-Koordinaten. Optional mit einer maximalen Breite, die zu zeichnen ist.
-
- -

ein fillText-Beispiel

- -

Der Text wird mit dem aktuellen fillStyle gefüllt.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  ctx.font = '48px serif';
-  ctx.fillText('Hello world', 10, 50);
-}
- - - -

{{EmbedLiveSample("A_fillText_example", 310, 110)}}

- -

ein strokeText-Beispiel

- -

Der Text wird mit dem aktuellen strokeStyle umrandet.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  ctx.font = '48px serif';
-  ctx.strokeText('Hello world', 10, 50);
-}
- - - -

{{EmbedLiveSample("A_strokeText_example", 310, 110)}}

- -

Text gestalten

- -

In den obigen Beispielen nutzen wir bereits die font-Eigentschaft, um den Text ein wenig größer als standardmäßig zu machen. Es gibt ein paar mehr Eigenschaften, die es erlauben, das Zeichnen von Text auf dem canvas zu beeinflussen:

- -
-
{{domxref("CanvasRenderingContext2D.font", "font = value")}}
-
Der aktuell genutzte Text-Stil, der zum Zeichnen genutzt wird. Dieser String nutzt die selbe Syntax wie die CSS {{cssxref("font")}}-Eigenschaft. Die Standard-Schriftart ist 10px sans-serif.
-
{{domxref("CanvasRenderingContext2D.textAlign", "textAlign = value")}}
-
Einstellung der Text-Ausrichtung. Mögliche Werte: start, end, left, right oder center. Der Standard-Wert ist start.
-
{{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline = value")}}
-
Baseline alignment setting. Possible values: top, hanging, middle, alphabetic, ideographic, bottom. The default value is alphabetic.
-
{{domxref("CanvasRenderingContext2D.direction", "direction = value")}}
-
Directionality. Possible values: ltr, rtl, inherit. The default value is inherit.
-
- -

These properties might be familiar to you, if you have worked with CSS before.

- -

The following diagram from the WHATWG demonstrates the various baselines supported by the textBaseline property.The top of the em square is -roughly at the top of the glyphs in a font, the hanging baseline is -where some glyphs like आ are anchored, the middle is half-way -between the top of the em square and the bottom of the em square, -the alphabetic baseline is where characters like Á, ÿ, -f, and Ω are anchored, the ideographic baseline is -where glyphs like 私 and 達 are anchored, and the bottom -of the em square is roughly at the bottom of the glyphs in a -font. The top and bottom of the bounding box can be far from these -baselines, due to glyphs extending far outside the em square.

- -

A textBaseline example

- -

Edit the code below and see your changes update live in the canvas:

- -
ctx.font = '48px serif';
-ctx.textBaseline = 'hanging';
-ctx.strokeText('Hello world', 0, 100);
-
- - - -

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

- -

Advanced text measurements

- -

In the case you need to obtain more details about the text, the following method allows you to measure it.

- -
-
{{domxref("CanvasRenderingContext2D.measureText", "measureText()")}}
-
Returns a {{domxref("TextMetrics")}} object containing the width, in pixels, that the specified text will be when drawn in the current text style.
-
- -

The following code snippet shows how you can measure a text and get its width.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  var text = ctx.measureText('foo'); // TextMetrics object
-  text.width; // 16;
-}
-
- -

Gecko-specific notes

- -

In Gecko (the rendering engine of Firefox, Firefox OS and other Mozilla based applications), some prefixed APIs were implemented in earlier versions to draw text on a canvas. These are now deprecated and removed, and are no longer guaranteed to work.

- -

{{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}

diff --git a/files/de/web/guide/html/canvas_tutorial/formen_zeichnen/index.html b/files/de/web/guide/html/canvas_tutorial/formen_zeichnen/index.html deleted file mode 100644 index f23e7664b5..0000000000 --- a/files/de/web/guide/html/canvas_tutorial/formen_zeichnen/index.html +++ /dev/null @@ -1,453 +0,0 @@ ---- -title: Formen zeichnen mit Canvas -slug: Web/Guide/HTML/Canvas_Tutorial/Formen_zeichnen -translation_of: Web/API/Canvas_API/Tutorial/Drawing_shapes ---- -

{{CanvasSidebar}}

- -

Koordinatensystem

- -

Bevor wir mit dem Zeichnen beginnen können, müssen wir über das canvas grid oder Koordinatensystem sprechen. Unser HTML-Skelett von der vorigen Seite hatte ein canvas-Element mit den Maßen 150 Pixel Höhe und 150 Pixel Breite. Zur Rechten sieht man diesen canvas, über den das Standard-Grid gelegt wurde. Normalerweise entspricht eine Einheit einem Pixel auf dem canvas. Der Ursprung dieses Rasters befindet sich in der oberen linken Ecke, im Punkt (0,0). Alle Elemente werden relativ zum Ursprung positioniert. Die Position des blauen Quadrates ist also x Pixel vom linken Rand und y Pixel vom oberen Rand entfernt, am Punkt (x,y). Später in diesem Tutorial werden wir sehen, wie wir den Ursprung an eine andere Position verschieben, das Koordinatensystem rotieren und sogar skalieren können, aber für's Erste behalten wir die Standardeinstellungen bei.

- -

Rechtecke zeichnen

- -

Nicht wie in SVG, unterstützt {{HTMLElement("canvas")}} nur eine einfache Form: das Rechteck. Andere Formen werden mithilfe von Pfaden gezeichnet, dazu später mehr.

- -
-

Es gibt drei Funktionen, welche auf verschiedenste Art Rechtecke zeichnen:

- -
-
fillRect(x, y, breite, höhe)
-
Zeichnet ein gefülltes Rechteck
-
strokeRect(x, y, breite, höhe)
-
Zeichnet den Rahmen eines Rechteckes
-
clearRect(x, y, breite, höhe)
-
Der Bereich des Rechteckes wird transparent
-
- -

Alle drei Funktionen benötigen die selben drei Argumente. x und y beschreibt die Position (siehe Koordinatensystem). breite und höhe beschreiben die Größe des Rechteckes.

- -

Beispiel mit Rechtecken

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    ctx.fillRect(25, 25, 100, 100);
-    ctx.clearRect(45, 45, 60, 60);
-    ctx.strokeRect(50, 50, 50, 50);
-  }
-}
- -

Demo:

- -

{{EmbedLiveSample("Beispiel_mit_Rechtecken", 160, 160, "https://mdn.mozillademos.org/files/245/Canvas_rect.png")}}

- -

Die fillRect()-Methode zeichnet ein 100px großes, schwarzes Quadrat. Die clearRect()-Methode löscht danach ein 60px großes Quadrat in der Mitte des schwarzen Quadrates. Anschließend zeichnet die strokeRect()-Methode einen 50px großen schwarzen Rahmen in der Mitte.

- -

Später werden wir zwei alternative Methoden für clearRect() behandeln und sehen, wie man die Füll- und Konturfarbe ändern kann.

- -

Anders als die Pfadmethoden zeichnen diese drei Rechteckmethoden sofort auf den canvas.

- -

Pfade zeichnen

- -

Um andere Formen mithilfe von Pfaden zu zeichnen, benötigt man einige weitere Schritte. Zuerst muss man einen Pfad beginnen. Danach kommen die Pfadbefehle. Zuletzt wird dieser gezeichnet oder gefüllt. Diese Methoden werden hierfür genutzt:

- -
-
beginPath()
-
Erstellt einen Pfad und beendet ggf. einen älteren.
-
closePath()
-
Beendet den Pfad und verbindet den Startpunkt mit dem Endpunkt.
-
stroke()
-
Zeichnet die Kontur des Pfades.
-
fill()
-
Zeichnet die Füllung des Pfades.
-
- -

Zuerst wird also die beginPath()-Methode ausgeführt. Danach kommen weitere Pfadanweisung wie Linien oder Kurven. Ein weiterer Aufruf der Methode beginPath() oder ein Aufruf der Methode closePath() löscht die Pfadanweisungen. Optional kann nun closePath() ausgeführt werden.

- -
Hinweis: Wenn fill() ausgeführt wird, wird automatisch der Pfad beendet, sodass closePath() nicht mehr ausgeführt werden muss. Da ist nicht der Fall wenn stroke() ausgeführt wird.
- -

Ein Dreieck zeichnen

- -

So sähe zum Beispiel der Code aus, um ein Dreieck zu zeichnen:

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    ctx.beginPath();
-    ctx.moveTo(75, 50);
-    ctx.lineTo(100, 75);
-    ctx.lineTo(100, 25);
-    ctx.fill();
-  }
-}
- -

Demo:

- -

{{EmbedLiveSample("Ein_Dreieck_zeichnen", 160, 160)}}

- -

Stift bewegen

- -

Eine sehr sinnvolle Methode ist moveTo(). Sie zeichnet zwar nichts, verändert allerdings die Position des Stiftes, sodass spätere Methoden nicht beim Punkt (0, 0) anfangen.

- -
-
moveTo(x, y)
-
Bewegt den Stift zu der Koordinate (x , y).
-
- -

Meist wird direkt nach dem Aufruf von beginPath() moveTo() ausgeführt. Außerdem kann man moveTo() für nichtverbundene Pfade benutzen. Beispiel (moveTo()-Aufrufe sind rote Linien):

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-     var ctx = canvas.getContext('2d');
-
-     ctx.beginPath();
-     ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Outer circle
-     ctx.moveTo(110, 75);
-     ctx.arc(75, 75, 35, 0, Math.PI, false);    // Mund
-     ctx.moveTo(65, 65);
-     ctx.arc(60, 65, 5, 0, Math.PI * 2, true);  // Linkes Auge
-     ctx.moveTo(95, 65);
-     ctx.arc(90, 65, 5, 0, Math.PI * 2, true);  // Rechtes Auge
-     ctx.stroke();
-  }
-}
- -

Demo:

- -

{{EmbedLiveSample("Stift_bewegen", 160, 160, "https://mdn.mozillademos.org/files/252/Canvas_smiley.png")}}

- -
-

Hinweis: arc() zeichnet einen Kreisbogen. Mehr dazu: {{anch("Kreisbögen")}}.

-
- -

Linien

- -

Für Linien verwendet man die lineTo()-Methode:

- -
-
lineTo(x, y)
-
Zeichnet eine Linie von der aktuellen Stiftposition zu dem Punkt (x, y).
-
- -

Diese Methode erwartet wie moveTo() zwei Argumente: x und y, welche die Koordinate des Linienendes ist. Der Startpunkt wurde Mithilfe anderer Methoden schon festgelegt. Anschließend ist das Linienende der neue Startpunkt.

- -

Beispiel mit zwei Dreiecken:

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    // Filled triangle
-    ctx.beginPath();
-    ctx.moveTo(25, 25);
-    ctx.lineTo(105, 25);
-    ctx.lineTo(25, 105);
-    ctx.fill();
-
-    // Stroked triangle
-    ctx.beginPath();
-    ctx.moveTo(125, 125);
-    ctx.lineTo(125, 45);
-    ctx.lineTo(45, 125);
-    ctx.closePath();
-    ctx.stroke();
-  }
-}
- -

Es beginnt mit der Ausführung von beginPath() um eine neue Form zu beginnen. Danach wird mit moveTo() der Startpunkt festgelegt. Danach werden die Linien gezeichnet.

- -

{{EmbedLiveSample("Linien", 160, 160, "https://mdn.mozillademos.org/files/238/Canvas_lineTo.png")}}

- -

Kreisbögen

- -

Um Kreise oder Kreisbögen zu zeichnen, benutzt man die arc()-Methode.

- -
-
arc(x, y, radius, startWinkel, endWinkel, uhrzeigersinn)
-
Zeichnet einen Kreisbogen.
-
- -

Diese Methode benötigt sechs Parameter: x und y sind die Koordinaten des Mittelpunktes des Kreisbogens. radius ist der Radius des Kreisbogens. startWinkel und endWinkel definieren die Punkte auf dem Kreis in rad. Der uhrzeigersinn-Parameter ist true, wenn der Kreisbogen gegen den Uhrzeigersinn und false wenn er im Uhrzeigersinn gezeichnet werden soll.

- -
-

Hinweis: Die Winkelzahlen werden in rad angegeben, nicht in deg. Die Umrechnungsformel lautet: rad = (Math.PI / 180) * deg.

-
-Dieses Beispiel zeigt Kreisbügen mit den unterschiedlichsten Parametern:
- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    for (var i = 0; i < 4; i++) {
-      for (var j = 0; j < 3; j++) {
-        ctx.beginPath();
-        var x = 25 + j * 50; // x coordinate
-        var y = 25 + i * 50; // y coordinate
-        var radius = 20; // Arc radius
-        var startAngle = 0; // Starting point on circle
-        var endAngle = Math.PI + (Math.PI * j) / 2; // End point on circle
-        var anticlockwise = i % 2 == 0 ? false : true; // clockwise or anticlockwise
-
-        ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
-
-        if (i > 1) {
-          ctx.fill();
-        } else {
-          ctx.stroke();
-        }
-      }
-    }
-  }
-}
-{{EmbedLiveSample("Kreisbögen", 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png")}} - -

Bezier und quadratische Kurven

- -

Bézierkurven sind in kubischer und quadratischer Form enthalten. Damit kann man ziemlich komplexe Strukturen zeichnen.

- -
-
quadraticCurveTo(cp1x, cp1y, x, y)
-
Zeichnet eine quadratische Bézierkurve von der aktuellen Stiftposition zu x und y, mithilfe des Kontrollpunktes mit den Koordinaten (cp1x, cp1y).
-
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
-
Zeichnet eine quadratische Bézierkurve von der aktuellen Stiftposition zu x und y, mithilfe der Kontrollpunkte mit den Koordinaten (cp1x, cp1y) und (cp2x, cp2y).
-
- -

Den Unterschied zwischen den beiden Funktionen lässt sich am Besten durch die beiden Bilder rechts erklären: Oben die quadratische und unten die kubische.

- -

Die Kontrollpunkte sind hier rot, die Start- und Endpunkte blau gekennzeichnet.

- -

Quadratische Bézierkurven

- -

Dieses Beispiel zeichnet Mithilfe von Bézierkurven eine Sprechblase:

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    // Quadratric curves example
-    ctx.beginPath();
-    ctx.moveTo(75, 25);
-    ctx.quadraticCurveTo(25, 25, 25, 62.5);
-    ctx.quadraticCurveTo(25, 100, 50, 100);
-    ctx.quadraticCurveTo(50, 120, 30, 125);
-    ctx.quadraticCurveTo(60, 120, 65, 100);
-    ctx.quadraticCurveTo(125, 100, 125, 62.5);
-    ctx.quadraticCurveTo(125, 25, 75, 25);
-    ctx.stroke();
-  }
-}
- -

{{EmbedLiveSample("Quadratische_Bézierkurven", 160, 160, "https://mdn.mozillademos.org/files/243/Canvas_quadratic.png")}}

- -

Kubische Bézierkurven

- -

Dieses Beispiel zeichnet ein Herz Mithilfe von kubischen Bézierkurven.

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    // Cubic curves example
-    ctx.beginPath();
-    ctx.moveTo(75, 40);
-    ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
-    ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
-    ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
-    ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
-    ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
-    ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
-    ctx.fill();
-  }
-}
- -

{{EmbedLiveSample("Kubische_Bézierkurven", 160, 160, "https://mdn.mozillademos.org/files/207/Canvas_bezier.png")}}

- -

Rechtecke

- -

Es gibt auch eine Rechtecksmethode für Pfade:

- -
-
rect(x, y, width, height)
-
Zeichnet ein Rechteck.
-
- -

Nachdem diese Methode ausgeführt wurde, wird automatisch moveTo(0, 0) ausgeführt.

- -

Kombinationen

- -

Mit Kombinationen all dieser Pfadmethoden können die komplexesten Formen gezeichnet werden. In diesem letzten Beispiel wird ein Spielcharakter gezeichnet:

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    roundedRect(ctx, 12, 12, 150, 150, 15);
-    roundedRect(ctx, 19, 19, 150, 150, 9);
-    roundedRect(ctx, 53, 53, 49, 33, 10);
-    roundedRect(ctx, 53, 119, 49, 16, 6);
-    roundedRect(ctx, 135, 53, 49, 33, 10);
-    roundedRect(ctx, 135, 119, 25, 49, 10);
-
-    ctx.beginPath();
-    ctx.arc(37, 37, 13, Math.PI / 7, -Math.PI / 7, false);
-    ctx.lineTo(31, 37);
-    ctx.fill();
-
-    for (var i = 0; i < 8; i++) {
-      ctx.fillRect(51 + i * 16, 35, 4, 4);
-    }
-
-    for (i = 0; i < 6; i++) {
-      ctx.fillRect(115, 51 + i * 16, 4, 4);
-    }
-
-    for (i = 0; i < 8; i++) {
-      ctx.fillRect(51 + i * 16, 99, 4, 4);
-    }
-
-    ctx.beginPath();
-    ctx.moveTo(83, 116);
-    ctx.lineTo(83, 102);
-    ctx.bezierCurveTo(83, 94, 89, 88, 97, 88);
-    ctx.bezierCurveTo(105, 88, 111, 94, 111, 102);
-    ctx.lineTo(111, 116);
-    ctx.lineTo(106.333, 111.333);
-    ctx.lineTo(101.666, 116);
-    ctx.lineTo(97, 111.333);
-    ctx.lineTo(92.333, 116);
-    ctx.lineTo(87.666, 111.333);
-    ctx.lineTo(83, 116);
-    ctx.fill();
-
-    ctx.fillStyle = 'white';
-    ctx.beginPath();
-    ctx.moveTo(91, 96);
-    ctx.bezierCurveTo(88, 96, 87, 99, 87, 101);
-    ctx.bezierCurveTo(87, 103, 88, 106, 91, 106);
-    ctx.bezierCurveTo(94, 106, 95, 103, 95, 101);
-    ctx.bezierCurveTo(95, 99, 94, 96, 91, 96);
-    ctx.moveTo(103, 96);
-    ctx.bezierCurveTo(100, 96, 99, 99, 99, 101);
-    ctx.bezierCurveTo(99, 103, 100, 106, 103, 106);
-    ctx.bezierCurveTo(106, 106, 107, 103, 107, 101);
-    ctx.bezierCurveTo(107, 99, 106, 96, 103, 96);
-    ctx.fill();
-
-    ctx.fillStyle = 'black';
-    ctx.beginPath();
-    ctx.arc(101, 102, 2, 0, Math.PI * 2, true);
-    ctx.fill();
-
-    ctx.beginPath();
-    ctx.arc(89, 102, 2, 0, Math.PI * 2, true);
-    ctx.fill();
-  }
-}
-
-// A utility function to draw a rectangle with rounded corners.
-
-function roundedRect(ctx, x, y, width, height, radius) {
-  ctx.beginPath();
-  ctx.moveTo(x, y + radius);
-  ctx.lineTo(x, y + height - radius);
-  ctx.arcTo(x, y + height, x + radius, y + height, radius);
-  ctx.lineTo(x + width - radius, y + height);
-  ctx.arcTo(x + width, y + height, x + width, y + height-radius, radius);
-  ctx.lineTo(x + width, y + radius);
-  ctx.arcTo(x + width, y, x + width - radius, y, radius);
-  ctx.lineTo(x + radius, y);
-  ctx.arcTo(x, y, x, y + radius, radius);
-  ctx.stroke();
-}
- -
-

Demo:

- -

{{EmbedLiveSample("Kombinationen", 160, 160)}}

- -

{{PreviousNext("Web/Guide/HTML/Canvas_tutorial/Basic_usage", "Web/Guide/HTML/Canvas_tutorial/Using_images")}}

-
-
diff --git a/files/de/web/guide/html/canvas_tutorial/grundlagen/index.html b/files/de/web/guide/html/canvas_tutorial/grundlagen/index.html deleted file mode 100644 index f89af7fa04..0000000000 --- a/files/de/web/guide/html/canvas_tutorial/grundlagen/index.html +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: Grundlagen Canvas -slug: Web/Guide/HTML/Canvas_Tutorial/Grundlagen -tags: - - Canvas - - Graphics - - HTML - - Intermediate - - Tutorial -translation_of: Web/API/Canvas_API/Tutorial/Basic_usage ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}
- -
-

Beginnen wir diese Einführung mit einem Blick auf das {{Glossary("HTML")}}-Element {{HTMLElement("canvas")}} an sich. Am Ende wirst du in einem Canvas einen 2D-Context anlegen können und ein erstes Beispiel im Browser gezeichnet haben.

-
- -

Das <canvas>-Element

- -

Beginnen wir mit dem {{HTMLElement("canvas")}}-Element:

- -
<canvas id="tutorial" width="150" height="150"></canvas>
-
- -

Auf den ersten Blick sieht ein {{HTMLElement("canvas")}} wie ein {{HTMLElement("img")}}-Element aus, mit dem Unterschied, dass es die Attribute src und alt nicht besitzt. Das <canvas>-Element hat nur zwei Attribute - {{htmlattrxref("width", "canvas")}} und {{htmlattrxref("height", "canvas")}}. Diese sind optional und können auch über {{Glossary("DOM")}}-Eigenschaften gesetzt werden. Wenn die Attribute nicht gesetzt sind, bekommt das Element eine Breite von 300px und eine Höhe von 150px. Die Maße des canvas können auch über {{Glossary("CSS")}} gesetzt werden, allerdings wird das Bild dann auf die gesetzte Größe skaliert. Wenn das Verhältnis der CSS-Maße nicht zur ursprünglichen Größe passt, wird das Bild verzerrt.

- -
-

Hinweis: Wenn das Ergebnis des Renderings verzerrt wirkt, dann setze bitte die Attribute width und height explizit im <canvas> und nicht über CSS.

-
- -

Das id-Attribut ist eines der globalen Attribute in HTML, welche auf alle HTML-Elemente anwendbar sind (sein sollen). Es empfiehlt sich eine id zu vergeben, dadurch wird der Zugriff mit JavaScript/CSS vereinfacht.

- -

Auch wenn man nicht mit CSS die Maße des canvas festlegen sollte, kann man jegliche andere CSS-Eigenschaften auf das {{HTMLElement("canvas")}}-Element anwenden (margin, border, background etc). Diese CSS-Regeln haben keinen Effekt auf das eigentliche Zeichnen (anders bei SVG)

- -
-

Fallback

- -

Einige ältere Browser unterstützen das {{HTMLElement("canvas")}}-Element nicht, deshalb sollte man einen sogenannten Fallback schreiben, welcher nur den Browsern angezeigt wird, welche das {{HTMLElement("canvas")}}-Element nicht unterstützen. Browser, die das {{HTMLElement("canvas")}}-Element unterstützen zeigen diesen Fallback nicht.

- -

Beispiele:

- -
<canvas id="stockGraph" width="150" height="150">
-  aktueller Wechselkurs: $3.15 +0.15
-</canvas>
-
-<canvas id="clock" width="150" height="150">
-  <img src="images/clock.png" width="150" height="150" alt=""/>
-</canvas>
-
- -

Benötigter </canvas>-Tag

- -

Im Unterschied zu dem {{HTMLElement("img")}}-Element, benötigt das {{HTMLElement("canvas")}}-Element den Endtag  (</canvas>).

- -

Wenn kein Fallback definiert wird, reicht ein <canvas id="foo" ...></canvas> völlig aus.

- -

Der Kontext

- -

{{HTMLElement("canvas")}} stellt mehrere Kontexte zum Zeichnen auf dem canvas zur Verfügung. Der Standardkontext ist der 2D-Kontext. Es gibt noch WebGL (3D context) basierend auf OpenGL ES.

- -

Zuerst ist das canvas leer. Mithilfe von JavaScript definiert man den Kontext und zeichnet mit diesem. Das {{HTMLElement("canvas")}}-Element hat eine Methode getContext(), mit der der Kontext definiert wird. getContext() benötigt nur einen String als Argument, den Typ des Kontextes. Für 2D-Grafiken ist dieser String "2d".

- -
var canvas = document.getElementById("tutorial");
-var ctx = canvas.getContext("2d");
-
- -

Die erste Zeile speichert in der Variablen canvas den DOM-Knoten unseres canvas mithilfe der {{domxref("document.getElementById()")}}-Methode. Danach wird die getContext()-Methode aufgerufen, um den Kontext in der Variablen ctx zu speichern.

- -
-

Browserkompatibilität prüfen

- -

Nicht nur der Fallback kann die Browserkompatibilität prüfen. Auch mit JavaScript ist dies möglich, in dem die Existenz der getContext()-Methode überprüft wird. Beispiel:

- -
var canvas = document.getElementById('tutorial');
-
-if (canvas.getContext) {
-  var ctx = canvas.getContext('2d');
-  // weiterer Code
-} else {
-  alert("Dein Browser unterstützt das <canvas> Element nicht")
-}
-
-
-
- -

HTML-Struktur

- -

Eine einfache HTML-Struktur reicht für unser Tutorial erst einmal völlig aus.

- -
-

Hinweis: Es gilt als schlechter Stil, Skripte direkt in HTML einzubetten. Wir tun das hier nur aus Gründen der Kompaktheit.

-
- -
<!DOCTYPE html>
-<html>
-  <head>
-    <title>Canvas tutorial</title>
-    <script type="text/javascript">
-      function draw() {
-        var canvas = document.getElementById('tutorial');
-        if (canvas.getContext) {
-          var ctx = canvas.getContext('2d');
-        }
-      }
-    </script>
-    <style type="text/css">
-      canvas { border: 1px solid black; }
-    </style>
-  </head>
-  <body onload="draw();">
-    <canvas id="tutorial" width="150" height="150"></canvas>
-  </body>
-</html>
-
- -

Das Skript enthält eine Funktion draw(), die nach dem Laden der Seite ausgeführt wird; dies geschieht durch Hören auf das {{event("load")}}-Ereignis des Dokuments. Diese oder eine ähnliche Funktion könnte auch durch {{domxref("WindowTimers.setTimeout", "window.setTimeout()")}}, {{domxref("WindowTimers.setInterval", "window.setInterval()")}} oder jeden anderen Ereignisbehandler aufgerufen werden, solange die Seite vorher geladen wurde.

- -

So sieht die Vorlage in Aktion aus. Wie man hier sehen kann, ist sie anfangs leer.

- -

{{EmbedLiveSample("HTML-Struktur", 160, 160)}}

- -

Einfaches Beispiel

- -

Im einfachen Beispiel werden zwei Rechtecke gezeichnet, eins mit Transparenz.

- -
<!DOCTYPE html>
-<html>
- <head>
-  <script type="application/javascript">
-    function draw() {
-      var canvas = document.getElementById("canvas");
-      if (canvas.getContext) {
-        var ctx = canvas.getContext("2d");
-
-        ctx.fillStyle = "rgb(200,0,0)";
-        ctx.fillRect(10, 10, 55, 50);
-
-        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
-        ctx.fillRect(30, 30, 55, 50);
-      }
-    }
-  </script>
- </head>
- <body onload="draw();">
-   <canvas id="canvas" width="150" height="150"></canvas>
- </body>
-</html>
-
- -

Demo:

- -

{{EmbedLiveSample("Einfaches_Beispiel", 160, 160, "https://mdn.mozillademos.org/files/228/canvas_ex1.png")}}

- -

{{PreviousNext("Web/Guide/HTML/Canvas_tutorial", "Web/Guide/HTML/Canvas_tutorial/Drawing_shapes")}}

diff --git a/files/de/web/guide/html/canvas_tutorial/index.html b/files/de/web/guide/html/canvas_tutorial/index.html deleted file mode 100644 index 487f5b7984..0000000000 --- a/files/de/web/guide/html/canvas_tutorial/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: Canvas Tutorial -slug: Web/Guide/HTML/Canvas_Tutorial -translation_of: Web/API/Canvas_API/Tutorial ---- -

- -

<canvas> ("Leinwand") ist ein HTML Element, auf das man mit Hilfe von Skripten (normalerweise JavaScript) Animationen, Grafiken oder Bilder projiziert. Die Bilder rechts zeigen Beispiele, die sich mit dem <canvas>-Element erstellen lassen.

- -

Das <canvas>-Element wurde zuerst von Apple für das Mac OS X Dashboard vorgestellt und später in Safari und Google Chrome implementiert. Gecko 1.8-basierte Browser wie Firefox 1.5 und jünger unterstützen dieses Element ebenfalls. Das <canvas>-Element ist Teil der WhatWG Web applications 1.0 Spezifikation (HTML5).

- -

Dieses Tutorial beschreibt die Grundlagen des Zeichnens von 2d-Grafiken mit dem <canvas>-Element. Die Beispiele sollen die Möglichkeiten des Canvas aufzeigen. Der zugehörige Code dient als Einführung und kann als Vorlage für eigenen Content dienen.

- -

Vorbereitung

- -

Das <canvas>-Element ("Leinwand") sinnvoll zu nutzen ist nicht schwierig, setzt aber ein einfaches Verständnis von HTML und JavaScript voraus. Einige ältere Browser unterstützen das <canvas>-Element nicht. Die Standardgröße des Canvas beträgt 300 x 150 Pixel (Breite x Höhe). Selbstverständlich lassen diese sich über die Attribute height und width oder mit Hilfe von CSS ändern. Um auf dem <canvas>-Element zu zeichnen, nutzen Entwickler meist die JavaScript-Canvas-API "on the fly".

- -

In diesem Tutorial

- - - -

Siehe auch

- - - -
{{ Next("Web/Guide/HTML/Canvas_tutorial/Basic_usage") }}
diff --git a/files/de/web/guide/html/content_categories/index.html b/files/de/web/guide/html/content_categories/index.html new file mode 100644 index 0000000000..03687c47af --- /dev/null +++ b/files/de/web/guide/html/content_categories/index.html @@ -0,0 +1,153 @@ +--- +title: Inhaltskategorien +slug: Web/Guide/HTML/Inhaltskategorien +tags: + - Anleitung + - HTML + - HTML5 + - NeedsTranslation + - Web + - erweitert +translation_of: Web/Guide/HTML/Content_categories +--- +

Für jedes HTML-Element gibt es Regeln, welche definieren, welchen Inhalt es hat. Diese Regeln sind zu Inhaltsmodellen gruppiert, welche für mehrere Elemente gelten. Jedes HTML-Element gehört zu null oder einem oder mehreren Inhaltsmodellen, von welchen jedes die Regeln bestimmt, welche der Inhalt des Elementes in einem gültigen HTML-Document befolgen muss.

+ +

Es gibt drei Typen von Inhaltskategorien:

+ +
    +
  • Hauptinhaltskategorien(engl. main content categories), welche Inhaltsregeln beschreiben, welche bei vielen Elementen gültig sind;
    • +
  • Formzusammenhängende Inhaltskategorien(engl. form-related content categories), welche Inhaltsregeln beschreiben, welche für formzusammenhängende Elemente gelten;
    • +
  • Spezifische Inhaltskategorien(engl. specific content categories), welche seltene Kategorien beschreiben, welche nur für wenige Elemente gelten, manchmal nur in einem spezifischen Context.
    • +
+ +
Content_categories_venn.png
+ +

Hauptinhaltskategorien

+ +

Metadateninhalt

+ +

Elemente, welche zu der Metadatainhaltscategorie(engl.metadata content category) gehören, verändern die Präsentation oder das Verhalten des Restes des Documentes, stellen Links zu anderen Documenten ein, oder enthalten andere out-of-band-Information.

+ +

Elemente, die zu dieser Kategorie gehören, sind {{HTMLElement("base")}}, {{HTMLElement("command")}}, {{HTMLElement("link")}}, {{HTMLElement("meta")}}, {{HTMLElement("noscript")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} und {{HTMLElement("title")}}.

+ +

Fließender Inhalt

+ +

Elemente, die zu der Kategorie des fließenden Inhaltes(engl.flow content category gehören, enthalten typischerweise Text oder eingebetteten Inhalt. Sie sind: {{HTMLElement("a")}}, {{HTMLElement("abbr")}}, {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}},{{HTMLElement("bdo")}}, {{HTMLElement("bdi")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{HTMLElement("command")}}, {{HTMLElement("data")}}, {{HTMLElement("datalist")}}, {{HTMLElement("del")}}, {{HTMLElement("details")}}, {{HTMLElement("dfn")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("hr")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("ins")}}, {{HTMLElement("kbd")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("main")}}, {{HTMLElement("map")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("menu")}}, {{HTMLElement("meter")}}, {{HTMLElement("nav")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("ol")}}, {{HTMLElement("output")}}, {{HTMLElement("p")}}, {{HTMLElement("pre")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("s")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("section")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("table")}}, {{HTMLElement("template")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("ul")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} und Text.

+ +

Einige wenige Elemente gehören zu dieser Kategorie, aber nur, wenn eine specifische Bedingung erfüllt ist:

+ +
    +
  • {{HTMLElement("area")}}, falls es ein Nachfolger eines {{HTMLElement("map")}}-Elementes ist
    • +
  • {{HTMLElement("link")}}, falls das itemprop-Attribut geschrieben ist
    • +
  • {{HTMLElement("meta")}}, falls das itemprop-Attribut geschrieben ist
    • +
  • {{HTMLElement("style")}}, falls das {{htmlattrxref("scoped","style")}}-Attribut geschrieben ist
    • +
+ +

Unterteilender Inhalt

+ +

Elemente, die zu dem sectioninig-content-Modell gehören, erstellen eine Section in der laufenden Outline, welche das Aussehen eines {{HTMLElement("header")}}-Elementes , {{HTMLElement("footer")}}-Elementes, und Überschrifteninhaltes definiert.

+ +

Elemente, die zu dieser Categorie gehören, sind {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}} und {{HTMLElement("section")}}. 

+ +
+

Notiz: Nicht dieses Modell mit der Sectionierende-Wurzel-Kategorie(engl.sectioning root category, welche ihren Inhalt von der regularen Outline isoliert, verwechseln.

+
+ +

Überschrifteninhalt

+ +

Überschrifteninhalt definiert den Titel einer Section, dabei gibt es keinen Unterschied, ob es mit einem expliciten sectionierenden Inhalt gekennzeichnet oder implicite durch den Überschrifteninhalt selbst definiert ist.

+ +

Elemente, die zu dieser Categorie gehören, sind {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} und {{HTMLElement("hgroup")}}.

+ +
+

Notiz: Obwohl es meistens Überschrifteninhalt enthält, ist {{HTMLElement("header")}} selbst kein Überschrifteninhalt.

+
+ +

Gestaltender Inhalt

+ +

Gestaltender Inhalt definiert den Text und das Markup, welche er enthält. Folgen von phrasierendem Inhalt sind Paragraphen.

+ +

Elemente, die zu dieser Categorie gehören, sind {{HTMLElement("abbr")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{HTMLElement("command")}}, {{HTMLElement("datalist")}}, {{HTMLElement("dfn")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("kbd")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("meter")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} und einfacher Text (welcher nicht nur aus Leerzeichen-Zeichen besteht).

+ +

Einige andere Elemente, die zu dieser Categorie gehören, aber nur, falls eine bestimmte Condition erfüllt ist:

+ +
    +
  • {{HTMLElement("a")}}, falls es nur phrasierenden Inhalt enthält
    • +
  • {{HTMLElement("area")}}, falls es das Descendens eines {{HTMLElement("map")}}-Elementes ist
    • +
  • {{HTMLElement("del")}}, falls es nur phrasierenden Inhalt enthält
    • +
  • {{HTMLElement("ins")}}, falls es nur phrasierenden Inhalt enthält
    • +
  • {{HTMLElement("link")}}, falls das itemprop-Attribut geschrieben ist
    • +
  • {{HTMLElement("map")}}, falls es nur phrasierenden Inhalt enthält
    • +
  • {{HTMLElement("meta")}}, falls das itemprop-Attribut geschrieben ist.
    • +
+ +

Eingebetter Inhalt

+ +

Eingebetteter Inhalt importiert eine andere Ressource oder gibt Inhalt einer anderen Markup-Sprache oder Namensraumes in das Document ein. Elemente in dieser Categorie sind: {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{SVGElement("svg")}}, {{HTMLElement("video")}}.

+ +

Interaktiver Inhalt

+ +

Interaktiver Inhalt enthält Elemente, die speziell für Interaktionen mit dem Benutzer gedacht sind. Folgende Elemente geöhren zu dieser Kategorie: {{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.
+ Einige Elemente sind nur unter spezifischen Conditionen in dieser Categorie:

+ +
    +
  • {{HTMLElement("audio")}}, falls das {{htmlattrxref("controls", "audio")}}-Attribut geschrieben ist
    • +
  • {{HTMLElement("img")}}, falls das {{htmlattrxref("usemap", "img")}}-Attribut geschrieben ist
    • +
  • {{HTMLElement("input")}}, falls das {{htmlattrxref("type", "input")}}-Attribut nicht im versteckten Status ist.
    • +
  • {{HTMLElement("menu")}}, falls das {{htmlattrxref("type", "menu")}}-Attribut im Toolbar-Status ist
    • +
  • {{HTMLElement("object")}}, falls das {{htmlattrxref("usemap", "object")}}-Attribut geschrieben ist
    • +
  • {{HTMLElement("video")}}, falls das {{htmlattrxref("controls", "video")}}-Attribut geschrieben ist.
    • +
+ +

Fühlbarer Inhalt

+ +

 A content is palpable when it's neither empty nor hidden. Elements whose model is flow content or phrasing content should have at least one node which is palpable.

+ +

Formularbezogener Inhalt

+ +

Formularassoziierter Inhalt umfasst Elemente mit einem Formularbezeichner, welcher durch ein Formularattribut verfügbar gemacht wird. Ein Formularbezeichner ist entweder das enthaltende {{HTMLElement ("form")}} Element oder das Element, dessen ID im Formularattribut angegeben ist.

+ +
    +
  • {{HTMLElement("button")}}
    • +
  • {{HTMLElement("fieldset")}}
    • +
  • {{HTMLElement("input")}}
    • +
  • {{HTMLElement("keygen")}}
    • +
  • {{HTMLElement("label")}}
    • +
  • {{HTMLElement("meter")}}
    • +
  • {{HTMLElement("object")}}
    • +
  • {{HTMLElement("output")}}
    • +
  • {{HTMLElement("progress")}}
    • +
  • {{HTMLElement("select")}}
    • +
  • {{HTMLElement("textarea")}}
    • +
+ +

This category contains several sub-categories:

+ +
+
gelistet
+
Elements that are listed in the form.elements and fieldset.elements IDL collections. Contains {{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.
+
bezeichenbar
+
Elements that can be associated with {{HTMLElement("label")}} elements. Contains {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("meter")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.
+
abschickbar
+
Elements that can be used for constructing the form data set when the form is submitted. Contains {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.
+
zurücksetzbar
+
Elements that can be affected when a form is reset. Contains {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("output")}},{{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.
+
+ +

Transparentes Inhaltsmodell

+ +

If an element has a transparent content model, then its contents must be structured such that they would be valid HTML 5, even if the transparent element were removed and replaced by the child elements.

+ +

For example, the {{HTMLElement("del")}} and {{HTMLELement("ins")}} elements are transparent:

+ +
<p>We hold these truths to be <del><em>sacred &amp; undeniable</em></del> <ins>self-evident</ins>.</p>
+
+ +

If those elements were removed, this fragment would still be valid HTML (if not correct English).

+ +
<p>We hold these truths to be <em>sacred &amp; undeniable</em> self-evident.</p>
+
+ +

Andere Inhaltsmodelle

+ +

Sectioning root.

diff --git a/files/de/web/guide/html/content_editable/index.html b/files/de/web/guide/html/content_editable/index.html deleted file mode 100644 index 03ab2fdfe0..0000000000 --- a/files/de/web/guide/html/content_editable/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: Content Editable -slug: Web/Guide/HTML/Content_Editable -tags: - - HTML5 Inhalt ändern editierbar -translation_of: Web/Guide/HTML/Editable_content ---- -

In HTML5 kann jedes Element editiert werden. Mit JavaScript Event handlers können Sie Ihre Webseite in einen umfangreichen und schnellen Texteditor verwandeln. Dieser Artikel gibt einige Informationen über diese Funktion.

- -

Kompatibilität

- -

Content editable ist kompatibel mit folgenden Browsern.

- -
    -
  • Firefox 3.5+
    • -
  • Firefox for Android 19+
    • -
  • Chrome 4.0+
    • -
  • Internet Explorer 5.5+
    • -
  • Safari 3.1+
    • -
  • Opera 9+
    • -
  • iOS Safari 5.0+
    • -
  • Android Browser 3.0+
    • -
  • Opera Mobile 12.1+
    • -
  • Chrome for Android 25+
    • -
- -

Keine Unterstützung in Opera Mini.

- -

Wie funktioniert es?

- -

Ändere das {{DOMXRef("HTMLElement.contentEditable", "contentEditable")}} Attribut zu true in deinem HTML Element. Es kann in nahezu allen HTML Elementen genutzt werden.

- -

Beispiele

- -

Ein einfaches Beispiel:

- -
<div contenteditable="true">
-  This text can be edited by the user.
-</div>
- -

Das obige Beispiel kann direkt ausprobiert werden:

- -

{{ EmbedLiveSample('Beispiele') }}

- -

Weiterführende Informationen

- -
user_pref("capability.policy.policynames", "allowclipboard");
-user_pref("capability.policy.allowclipboard.sites", "https://www.mozilla.org");
-user_pref("capability.policy.allowclipboard.Clipboard.cutcopy", "allAccess");
-user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess");
- -

How to interact with the content  (old IE style API) and here

diff --git a/files/de/web/guide/html/editable_content/index.html b/files/de/web/guide/html/editable_content/index.html new file mode 100644 index 0000000000..03ab2fdfe0 --- /dev/null +++ b/files/de/web/guide/html/editable_content/index.html @@ -0,0 +1,52 @@ +--- +title: Content Editable +slug: Web/Guide/HTML/Content_Editable +tags: + - HTML5 Inhalt ändern editierbar +translation_of: Web/Guide/HTML/Editable_content +--- +

In HTML5 kann jedes Element editiert werden. Mit JavaScript Event handlers können Sie Ihre Webseite in einen umfangreichen und schnellen Texteditor verwandeln. Dieser Artikel gibt einige Informationen über diese Funktion.

+ +

Kompatibilität

+ +

Content editable ist kompatibel mit folgenden Browsern.

+ +
    +
  • Firefox 3.5+
    • +
  • Firefox for Android 19+
    • +
  • Chrome 4.0+
    • +
  • Internet Explorer 5.5+
    • +
  • Safari 3.1+
    • +
  • Opera 9+
    • +
  • iOS Safari 5.0+
    • +
  • Android Browser 3.0+
    • +
  • Opera Mobile 12.1+
    • +
  • Chrome for Android 25+
    • +
+ +

Keine Unterstützung in Opera Mini.

+ +

Wie funktioniert es?

+ +

Ändere das {{DOMXRef("HTMLElement.contentEditable", "contentEditable")}} Attribut zu true in deinem HTML Element. Es kann in nahezu allen HTML Elementen genutzt werden.

+ +

Beispiele

+ +

Ein einfaches Beispiel:

+ +
<div contenteditable="true">
+  This text can be edited by the user.
+</div>
+ +

Das obige Beispiel kann direkt ausprobiert werden:

+ +

{{ EmbedLiveSample('Beispiele') }}

+ +

Weiterführende Informationen

+ +
user_pref("capability.policy.policynames", "allowclipboard");
+user_pref("capability.policy.allowclipboard.sites", "https://www.mozilla.org");
+user_pref("capability.policy.allowclipboard.Clipboard.cutcopy", "allAccess");
+user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess");
+ +

How to interact with the content  (old IE style API) and here

diff --git a/files/de/web/guide/html/html5/index.html b/files/de/web/guide/html/html5/index.html new file mode 100644 index 0000000000..a6f25869e9 --- /dev/null +++ b/files/de/web/guide/html/html5/index.html @@ -0,0 +1,174 @@ +--- +title: HTML5 +slug: Web/HTML/HTML5 +tags: + - HTML + - HTML5 + - References + - Web Development +translation_of: Web/Guide/HTML/HTML5 +--- +

HTML5 ist die aktuellste Entwicklung des Web Standards, der HTML definiert. Der Begriff repräsentiert zwei verschiedene Konzepte:

+ +
    +
  • Es ist eine neue Version der Sprache HTML, mit neuen Elementen, Attributen und Verhaltensweisen,
    • +
  • und eine größere Sammlung von Technologien, die vielfältigere und leistungsstärkere Webseiten und Anwendungen ermöglichen. Diese Kombination wird manchmal HTML5 & Freunde genannt und oft zu HTML5 abgekürzt.
    • +
+ +

Diese Referenzseite wurde entworfen, um für alle offenen Web-Entwickler nutzbar zu sein und verknüpft zahlreiche Ressourcen über HTML5 Technologien, gruppiert in mehreren Kategorien, basierend auf ihrer Funktion.

+ +
    +
  • Semantik: Erlaubt präziser zu beschreiben, was der Inhalt ist.
    • +
  • Konnektivität: Ermöglicht neue und innovative Wege, mit dem Server zu kommunizieren.
    • +
  • Offline & Speicherung: Erlaubt Webseiten, Daten lokal auf der Client-Seite zu speichern und effizienter offline zu arbeiten.
    • +
  • Multimedia: Macht Video und Audio zu Erste-Klasse-Bürgern des offenen Webs.
    • +
  • 2D/3D Graphiken & Effekte: Erlaubt eine deutlich vielschichtigere Menge an Präsentationsmöglichkeiten.
    • +
  • Leistung & Integration: Bietet größere Geschwindigkeitsoptimierungen und besserer Zugriff auf Computer-Hardware.
    • +
  • Gerätezugriff: Erlaubt die Benutzung verschiedenster Eingabe- und Ausgabegeräte.
    • +
  • Styling: Lässt Autoren anspruchsvollere Designs schreiben.
    • +
+ +
+
+

SemantiK

+ +
+
Gliederungen und Abschnitte in HTML5
+
Ein Blick auf die neuen Gliederungs- und Abschnitts-Elemente in HTML5: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("aside")}} und {{HTMLElement("hgroup")}}.
+
HTML5 Audio und Video benutzen
+
Das {{HTMLElement("audio")}} und das {{HTMLElement("video")}} Element binden neue Multimedia-Inhalte ein und erlauben, sie zu manipulieren.
+
Formulare in HTML5
+
Ein Blick auf Verbesserungen bei Formularen in HTML5: die constraint validation API (Überprüfung von Wertbeschränkungen), mehrere neue Attribute, neue Werte für das {{HTMLElement("input")}} Attribut {{htmlattrxref("type", "input")}} und das neue {{HTMLElement("output")}} Element.
+
Neue semantische Elemente
+
Außer Sektions-, Medien- und Formular-Elementen erhöhen eine Vielzahl neuer Elemente, wie {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} oder {{HTMLElement("meter")}}, die Menge gültiger HTML5 Elemente.
+
Verbesserung bei {{HTMLElement("iframe")}}
+
Mithilfe der {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}} und {{htmlattrxref("srcdoc", "iframe")}} Attribute können Autoren jetzt das Sicherheitslevel und das gewünschte Rendering von {{HTMLElement("iframe")}} Elementen angeben.
+
MathML
+
Erlaubt das direkte Einbinden mathematischer Formeln.
+
Einführung in HTML5
+
Dieser Artikel führt in die Benutzung von HTML5 für Ihr Web-Design oder Ihre Web-Anwendung ein.
+
HTML5-konformer Parser
+
Der Parser, der aus den Bytes eines HTML-Dokumentes ein DOM erzeugt, wurde erweitert und definiert jetzt präzise das Verhalten in allen Fällen, selbst für ungültiges HTML. Das führt zu viel größerer Vorhersehbarkeit und Zusammenarbeit zwischen HTML5-konformen Browsern.
+
+ +

Konnektivität

+ +
+
Web Sockets
+
Erlaubt eine permanente Verbindung zwischen der Seite und dem Server zu erzeugen und nicht-HTML-Daten hierüber auszutauschen.
+
Server-gesendete Ereignisse
+
Erlaubt dem Server, Ereignisse direkt an den Client zu senden, anstatt wie beim klassischen Modell Daten nur als Antwort auf eine Anfrage des Clients senden zu können.
+
WebRTC
+
Diese Technologie, wobei RTC für Real-Time Communication (Echtzeit-Kommunikation) steht, erlaubt sich mit anderen zu verbinden und Videokonferenzen direkt aus dem Browser zu steuern, ohne dafür ein Plugin oder externes Programm zu brauchen.
+
+ +

Offline & Speicherung

+ +
+
+
Offline-Ressourcen: der Anwendungs-Cache
+
Firefox unterstützt vollständig die HTML5 offline resource Spezifikation. Die meisten anderen bieten variierende Unterstützung für Offline-Ressourcen.
+
Online- und Offline-Ereignisse
+
Firefox 3 unterstützt die WHATWG Online- und Offline-Ereignisse, die Anwendungen und Erweiterungen erkennen lassen, ob oder ob es keine aktive Internetverbindung gibt, sowie ob eine Verbindung auf- oder abgebaut wird.
+
WHATWG Client-seitiger Sitzungs- und persistenter Speicher (auch bekannt als DOM Storage)
+
Client-seitiger Sitzungs- und persistenter Speicher erlaubt Webanwendungen, strukturierte Daten auf der Anwenderseite zu speichern.
+
IndexedDB
+
Ist ein Web-Standard zum Speichern von großen Mengen strukturierter Daten im Browser und für das hochperformante Suchen dieser Daten mittels Indizes.
+
Dateien aus Webanwendungen benutzen
+
Unterstützung für die neue HTML5 Datei-API wurde zu Gecko hinzugefügt, wodurch Web-Anwendungen der Zugriff auf vom Benutzer gewählte lokale Dateien ermöglicht wird. Das schließt die Unterstützung für das Auswählen mehrerer Dateien über das neue multiple Attribut von {{HTMLElement("input")}} Elementen des Typs file ein. Außerdem gibt es FileReader.
+
+
+ +

Multimedia

+ +
+
HTML5 Audio und Video benutzen
+
Das {{HTMLElement("audio")}} und das {{HTMLElement("video")}} Element binden neue Multimedia-Inhalte ein und erlauben, sie zu manipulieren.
+
WebRTC
+
Diese Technologie, wobei RTC für Real-Time Communication (Echtzeit-Kommunikation) steht, erlaubt sich mit anderen zu verbinden und Videokonferenzen direkt aus dem Browser zu steuern, ohne dafür ein Plugin oder externes Programm zu brauchen.
+
Die Camera API benutzen
+
Erlaubt das Benutzen, Manipulieren und Speichern von Bildern der Computer-Kamera.
+
Untertitel und WebVTT
+
Das {{HTMLElement("track")}} Element erlaubt Untertitel und Kapitel. WebVTT ist ein Texttitel-Format.
+
+ +

3D, graphiKEN & effeKtE

+ +
+
Canvas-Tutorial
+
Lerne mehr über das neue {{HTMLElement("canvas")}} Element und wie darauf Diagramme und andere Objekte in Firefox gezeichnet werden können.
+
HTML5 Text-API für <canvas> Elemente
+
Die HTML5 Text-API wird jetzt von {{HTMLElement("canvas")}} Elementen unterstützt.
+
WebGL
+
WebGL bringt 3D-Graphiken durch die Einführung einer auf OpenGL ES 2.0 basierten API in's Web, die in HTML5 {{HTMLElement("canvas")}} Elementen genutzt werden kann.
+
SVG
+
Ein XML-basiertes Format von Vektor-Bildern, die direkt in HTML eingebettet werden können.
+
 
+
+
+ +
+

Leistung & integration

+ +
+
Web Worker
+
Erlaubt die Ausführung von JavaScript an Hintergrund-Threads zu delegieren, so dass diese Aktivitäten interaktive Ereignisse nicht verlangsamen.
+
XMLHttpRequest Level 2
+
Erlaubt einige Teile der Seite asynchron zu laden, so dass dynamische Inhalte je nach Zeit und Verhalten des Benutzers gezeigt werden können. Das ist die Technologie hinter Ajax.
+
JIT-kompilierende JavaScript-Engines
+
Die neue Generation der JavaScript-Engines sind wesentlich performanter, was zu deutlich höherer Leistung führt.
+
History API
+
Erlaubt die Manipulation der Browser-Historie. Das ist besonders hilfreich für Seiten, die interaktiv neue Informationen laden.
+
Das contentEditable Attribut: verwandeln Sie Ihre Webseite in ein Wiki!
+
In HTML5 wurde das contentEditable Attribut standardiziert. Lernen Sie mehr über dieses Feature.
+
Drag und Drop
+
Die HTML5 Drag und Drop API erlaubt Unterstützung für das Ziehen und Fallenlassen von Objekte innerhalb und zwischen Webseiten. Außerdem gibt es eine einfachere API für die Benutzung in Erweiterungen und Mozilla-basierten Anwendungen.
+
Fokus-Kontrolle in HTML
+
Die neuen HTML5 activeElement und hasFocus Attribute werden unterstützt.
+
Web-basierte Protokoll-Handler
+
Sie können jetzt Webanwendungen als Protokoll-Handler mit der navigator.registerProtocolHandler() Methode registrieren.
+
requestAnimationFrame
+
Erlaubt das Rendern von Animationen für optimale Leistung zu kontrollieren.
+
Vollbild-API
+
Kontrolliert die Benutzung des ganzen Bildschirms für eine Webseite oder -anwendung, ohne die Browserelemente anzuzeigen.
+
Pointer Lock API
+
Erlaubt, den Zeiger auf den Bereich des Inhalts zu begrenzen, so dass Spiele und ähnliche Anwendungen nicht den Fokus verlieren, wenn der Zeiger die Fenstergrenzen erreicht.
+
Online- und Offline-Ereignisse
+
Um eine gute offline-fähige Webanwendung zu entwickeln, müssen Sie wissen, wann Ihre Anwendung tatsächlich offline ist. Nebenbei sollten Sie auch wissen, wann Ihre Anwendung wieder online ist.
+
+ +

Gerätezugriff

+ +
+
Die Kamera-API benutzen
+
Erlaubt das Benutzen, Manipulieren und Speichern von Bildern der Computer-Kamera.
+
Touch-Ereignisse
+
Verarbeitung von Ereignissen, die durch Tippen auf Touchscreens ausgelöst werden.
+
Geolocation benutzen
+
Lässt Browser die Position des Benutzers mittels geolocation herausfinden.
+
Geräte-Orientierung ermitteln
+
Ermöglicht herauszufinden, wenn das Gerät des Browsers die Orientierung wechselt. Das kann als Eingabegerät genutzt werden (z.B. um Spiele zu entwickeln, die auf die Orientierung des Gerätes reagieren) oder um das Layout einer Seite der Orientierung des Bildschirms anzupassen (hochkant oder Querformat).
+
Pointer Lock API
+
Erlaubt, den Zeiger auf den Bereich des Inhalts zu begrenzen, so dass Spiele und ähnliche Anwendungen nicht den Fokus verlieren, wenn der Zeiger die Fenstergrenzen erreicht.
+
+ +

Styling

+ +

CSS wurde erweitert, um das Dekorieren von Elementen auf viel komplexere Weisen zu ermöglichen. Das wird oft als CSS3 bezeichnet, obwohl CSS keine monolithische Spezifikation mehr ist und die unterschiedlichen Module nicht alle auf Level 3 sind: einige sind auf Level 1 und andere auf Level 4, und alle dazwischen liegenden Level sind vertreten.

+ +
+
Neue Funktionen für Hintergründe
+
Es ist jetzt möglich, Boxen über {{cssxref("box-shadow")}} einen Schatten zu geben und mehrere Hintergründe zu setzen.
+
Ausgefallenere Ränder
+
Jetzt ist es nicht nur möglich, Ränder mit Bildern über {{cssxref("border-image")}} und zugehörige ausgeschriebene Eigenschaften zu dekorieren, sondern auch runde Ränder werden über die {{cssxref("border-radius")}} Eigenschaft unterstützt.
+
Stile animierbar machen
+
Mit CSS Übergängen, um zwischen unterschiedlichen Zuständen zu animieren, oder CSS Animationen, um Teile der Seite ohne auslösendes Ereignis zu animieren, können Sie jetzt mobile Elemente Ihrer Seite kontrollieren.
+
Typographie-Verbesserungen
+
Autoren haben mehr Kontrolle, um eine bessere Typographie zu erreichen. Sie können Textüberlauf mit {{cssxref("text-overflow")}} und Silbentrennung kontrollieren, aber sie können auch Schatten zuweisen und noch präziser seine Dekorationen kontrollieren. Benutzerdefinierte Schriftarten können durch die neue {{cssxref("@font-face")}} at-Regel heruntergeladen und angewendet werden.
+
Neue Präsentations-Layouts
+
Um die Flexibilität von Designs zu verbessern, wurden zwei neue Layouts hinzugefügt: das CSS Mehr-Spalten-Layout und das CSS Flexible-Box-Layout.
+
+
+
+ +

 

diff --git a/files/de/web/guide/html/inhaltskategorien/index.html b/files/de/web/guide/html/inhaltskategorien/index.html deleted file mode 100644 index 03687c47af..0000000000 --- a/files/de/web/guide/html/inhaltskategorien/index.html +++ /dev/null @@ -1,153 +0,0 @@ ---- -title: Inhaltskategorien -slug: Web/Guide/HTML/Inhaltskategorien -tags: - - Anleitung - - HTML - - HTML5 - - NeedsTranslation - - Web - - erweitert -translation_of: Web/Guide/HTML/Content_categories ---- -

Für jedes HTML-Element gibt es Regeln, welche definieren, welchen Inhalt es hat. Diese Regeln sind zu Inhaltsmodellen gruppiert, welche für mehrere Elemente gelten. Jedes HTML-Element gehört zu null oder einem oder mehreren Inhaltsmodellen, von welchen jedes die Regeln bestimmt, welche der Inhalt des Elementes in einem gültigen HTML-Document befolgen muss.

- -

Es gibt drei Typen von Inhaltskategorien:

- -
    -
  • Hauptinhaltskategorien(engl. main content categories), welche Inhaltsregeln beschreiben, welche bei vielen Elementen gültig sind;
    • -
  • Formzusammenhängende Inhaltskategorien(engl. form-related content categories), welche Inhaltsregeln beschreiben, welche für formzusammenhängende Elemente gelten;
    • -
  • Spezifische Inhaltskategorien(engl. specific content categories), welche seltene Kategorien beschreiben, welche nur für wenige Elemente gelten, manchmal nur in einem spezifischen Context.
    • -
- -
Content_categories_venn.png
- -

Hauptinhaltskategorien

- -

Metadateninhalt

- -

Elemente, welche zu der Metadatainhaltscategorie(engl.metadata content category) gehören, verändern die Präsentation oder das Verhalten des Restes des Documentes, stellen Links zu anderen Documenten ein, oder enthalten andere out-of-band-Information.

- -

Elemente, die zu dieser Kategorie gehören, sind {{HTMLElement("base")}}, {{HTMLElement("command")}}, {{HTMLElement("link")}}, {{HTMLElement("meta")}}, {{HTMLElement("noscript")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} und {{HTMLElement("title")}}.

- -

Fließender Inhalt

- -

Elemente, die zu der Kategorie des fließenden Inhaltes(engl.flow content category gehören, enthalten typischerweise Text oder eingebetteten Inhalt. Sie sind: {{HTMLElement("a")}}, {{HTMLElement("abbr")}}, {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}},{{HTMLElement("bdo")}}, {{HTMLElement("bdi")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{HTMLElement("command")}}, {{HTMLElement("data")}}, {{HTMLElement("datalist")}}, {{HTMLElement("del")}}, {{HTMLElement("details")}}, {{HTMLElement("dfn")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("hr")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("ins")}}, {{HTMLElement("kbd")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("main")}}, {{HTMLElement("map")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("menu")}}, {{HTMLElement("meter")}}, {{HTMLElement("nav")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("ol")}}, {{HTMLElement("output")}}, {{HTMLElement("p")}}, {{HTMLElement("pre")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("s")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("section")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("table")}}, {{HTMLElement("template")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("ul")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} und Text.

- -

Einige wenige Elemente gehören zu dieser Kategorie, aber nur, wenn eine specifische Bedingung erfüllt ist:

- -
    -
  • {{HTMLElement("area")}}, falls es ein Nachfolger eines {{HTMLElement("map")}}-Elementes ist
    • -
  • {{HTMLElement("link")}}, falls das itemprop-Attribut geschrieben ist
    • -
  • {{HTMLElement("meta")}}, falls das itemprop-Attribut geschrieben ist
    • -
  • {{HTMLElement("style")}}, falls das {{htmlattrxref("scoped","style")}}-Attribut geschrieben ist
    • -
- -

Unterteilender Inhalt

- -

Elemente, die zu dem sectioninig-content-Modell gehören, erstellen eine Section in der laufenden Outline, welche das Aussehen eines {{HTMLElement("header")}}-Elementes , {{HTMLElement("footer")}}-Elementes, und Überschrifteninhaltes definiert.

- -

Elemente, die zu dieser Categorie gehören, sind {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}} und {{HTMLElement("section")}}. 

- -
-

Notiz: Nicht dieses Modell mit der Sectionierende-Wurzel-Kategorie(engl.sectioning root category, welche ihren Inhalt von der regularen Outline isoliert, verwechseln.

-
- -

Überschrifteninhalt

- -

Überschrifteninhalt definiert den Titel einer Section, dabei gibt es keinen Unterschied, ob es mit einem expliciten sectionierenden Inhalt gekennzeichnet oder implicite durch den Überschrifteninhalt selbst definiert ist.

- -

Elemente, die zu dieser Categorie gehören, sind {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} und {{HTMLElement("hgroup")}}.

- -
-

Notiz: Obwohl es meistens Überschrifteninhalt enthält, ist {{HTMLElement("header")}} selbst kein Überschrifteninhalt.

-
- -

Gestaltender Inhalt

- -

Gestaltender Inhalt definiert den Text und das Markup, welche er enthält. Folgen von phrasierendem Inhalt sind Paragraphen.

- -

Elemente, die zu dieser Categorie gehören, sind {{HTMLElement("abbr")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{HTMLElement("command")}}, {{HTMLElement("datalist")}}, {{HTMLElement("dfn")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("kbd")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("meter")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} und einfacher Text (welcher nicht nur aus Leerzeichen-Zeichen besteht).

- -

Einige andere Elemente, die zu dieser Categorie gehören, aber nur, falls eine bestimmte Condition erfüllt ist:

- -
    -
  • {{HTMLElement("a")}}, falls es nur phrasierenden Inhalt enthält
    • -
  • {{HTMLElement("area")}}, falls es das Descendens eines {{HTMLElement("map")}}-Elementes ist
    • -
  • {{HTMLElement("del")}}, falls es nur phrasierenden Inhalt enthält
    • -
  • {{HTMLElement("ins")}}, falls es nur phrasierenden Inhalt enthält
    • -
  • {{HTMLElement("link")}}, falls das itemprop-Attribut geschrieben ist
    • -
  • {{HTMLElement("map")}}, falls es nur phrasierenden Inhalt enthält
    • -
  • {{HTMLElement("meta")}}, falls das itemprop-Attribut geschrieben ist.
    • -
- -

Eingebetter Inhalt

- -

Eingebetteter Inhalt importiert eine andere Ressource oder gibt Inhalt einer anderen Markup-Sprache oder Namensraumes in das Document ein. Elemente in dieser Categorie sind: {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{SVGElement("svg")}}, {{HTMLElement("video")}}.

- -

Interaktiver Inhalt

- -

Interaktiver Inhalt enthält Elemente, die speziell für Interaktionen mit dem Benutzer gedacht sind. Folgende Elemente geöhren zu dieser Kategorie: {{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.
- Einige Elemente sind nur unter spezifischen Conditionen in dieser Categorie:

- -
    -
  • {{HTMLElement("audio")}}, falls das {{htmlattrxref("controls", "audio")}}-Attribut geschrieben ist
    • -
  • {{HTMLElement("img")}}, falls das {{htmlattrxref("usemap", "img")}}-Attribut geschrieben ist
    • -
  • {{HTMLElement("input")}}, falls das {{htmlattrxref("type", "input")}}-Attribut nicht im versteckten Status ist.
    • -
  • {{HTMLElement("menu")}}, falls das {{htmlattrxref("type", "menu")}}-Attribut im Toolbar-Status ist
    • -
  • {{HTMLElement("object")}}, falls das {{htmlattrxref("usemap", "object")}}-Attribut geschrieben ist
    • -
  • {{HTMLElement("video")}}, falls das {{htmlattrxref("controls", "video")}}-Attribut geschrieben ist.
    • -
- -

Fühlbarer Inhalt

- -

 A content is palpable when it's neither empty nor hidden. Elements whose model is flow content or phrasing content should have at least one node which is palpable.

- -

Formularbezogener Inhalt

- -

Formularassoziierter Inhalt umfasst Elemente mit einem Formularbezeichner, welcher durch ein Formularattribut verfügbar gemacht wird. Ein Formularbezeichner ist entweder das enthaltende {{HTMLElement ("form")}} Element oder das Element, dessen ID im Formularattribut angegeben ist.

- -
    -
  • {{HTMLElement("button")}}
    • -
  • {{HTMLElement("fieldset")}}
    • -
  • {{HTMLElement("input")}}
    • -
  • {{HTMLElement("keygen")}}
    • -
  • {{HTMLElement("label")}}
    • -
  • {{HTMLElement("meter")}}
    • -
  • {{HTMLElement("object")}}
    • -
  • {{HTMLElement("output")}}
    • -
  • {{HTMLElement("progress")}}
    • -
  • {{HTMLElement("select")}}
    • -
  • {{HTMLElement("textarea")}}
    • -
- -

This category contains several sub-categories:

- -
-
gelistet
-
Elements that are listed in the form.elements and fieldset.elements IDL collections. Contains {{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.
-
bezeichenbar
-
Elements that can be associated with {{HTMLElement("label")}} elements. Contains {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("meter")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.
-
abschickbar
-
Elements that can be used for constructing the form data set when the form is submitted. Contains {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.
-
zurücksetzbar
-
Elements that can be affected when a form is reset. Contains {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("output")}},{{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.
-
- -

Transparentes Inhaltsmodell

- -

If an element has a transparent content model, then its contents must be structured such that they would be valid HTML 5, even if the transparent element were removed and replaced by the child elements.

- -

For example, the {{HTMLElement("del")}} and {{HTMLELement("ins")}} elements are transparent:

- -
<p>We hold these truths to be <del><em>sacred &amp; undeniable</em></del> <ins>self-evident</ins>.</p>
-
- -

If those elements were removed, this fragment would still be valid HTML (if not correct English).

- -
<p>We hold these truths to be <em>sacred &amp; undeniable</em> self-evident.</p>
-
- -

Andere Inhaltsmodelle

- -

Sectioning root.

diff --git a/files/de/web/guide/html/sections_and_outlines_of_an_html5_document/index.html b/files/de/web/guide/html/sections_and_outlines_of_an_html5_document/index.html deleted file mode 100644 index 882a3333dc..0000000000 --- a/files/de/web/guide/html/sections_and_outlines_of_an_html5_document/index.html +++ /dev/null @@ -1,351 +0,0 @@ ---- -title: Verwendung von HTML-Abschnitten und -Gliederungen -slug: Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document -translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines ---- -
{{HTMLSidebar}}
- -
-

Wichtig: Es gibt keine Implementierungen des vorgeschlagenen Gliederungsalgorithmus in Webbrowsern oder Unterstützungstechnologie. Es war nie Teil einer endgültigen W3C-Spezifikation. Daher sollte der Gliederungsalgorithmus nicht verwendet werden, um den Benutzern die Dokumentstruktur zu vermitteln. Autoren sollten den Überschriftenrang (h1-h6) verwenden, um die Dokumentstruktur zu vermitteln.

-
- -

Die HTML5-Spezifikation bietet Webentwicklern mehrere neue Elemente, mit denen sie die Struktur eines Webdokuments mit Standardsemantik beschreiben können. In diesem Dokument werden diese Elemente beschrieben und wie man sie einsetzt, um die gewünschte Gliederung für ein Dokument zu definieren.

- -

Dokumentstruktur in HTML 4

- -

Die Struktur eines Dokuments, d. h. die semantische Struktur dessen, was sich zwischen <body> und </body> befindet, ist von grundlegender Bedeutung, um dem Benutzer eine Seite zu präsentieren. HTML4 verwendet den Begriff der Abschnitte und Unterabschnitte eines Dokuments, um seine Struktur zu beschreiben. Ein Abschnitt wird definiert durch ein Element ({{HTMLElement("div")}}) mit darin enthaltenen Überschriftenelementen ({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}} oder {{HTMLElement("h6")}}) die dessen Titel definieren. Die Beziehungen dieser Elemente führen zur Struktur des Dokuments und seiner Gliederung.

- -

Folgendes Markup:

- -
<div class="section" id="forest-elephants" >
-  <h1>Forest elephants</h1>
-  <p>In this section, we discuss the lesser known forest elephants.
-    ...this section continues...
-  <div class="subsection" id="forest-habitat" >
-    <h2>Habitat</h2>
-    <p>Forest elephants do not live in trees but among them.
-     ...this subsection continues...
-  </div>
-</div> 
- -

führt zu folgender Gliederung (ohne die implizierten Ebenennummern):

- -
1. Forest elephants
-   1.1 Habitat
-
- -

Die {{HTMLElement("div")}}-Elemente sind nicht zwingend erforderlich, um einen neuen Abschnitt zu definieren. Die bloße Anwesenheit eines Überschriftselements reicht aus, um einen neuen Abschnitt anzuzeigen. Deshalb führt:

- -
<h1>Forest elephants</h1>
-  <p>In this section, we discuss the lesser known forest elephants.
-    ...this section continues...
-  <h2>Habitat</h2>
-  <p>Forest elephants do not live in trees but among them.
-    ...this subsection continues...
-  <h2>Diet</h2>
-<h1>Mongolian gerbils</h1>
-
- -

zu folgender Gliederung:

- -
1. Forest elephants
-   1.1 Habitat
-   1.2 Diet
-2. Mongolian gerbils
-
- -

Durch HTML5 gelöste Probleme

- -

Die HTML 4-Definition der Struktur eines Dokuments und seines implizierten Umrißalgorithmus ist sehr grob und führt zu zahlreichen Problemen:

- -
    -
  1. Die Verwendung von {{HTMLElement("div")}} zum Definieren semantischer Abschnitte ohne Definieren bestimmter Werte für die Klassenattribute macht die Automatisierung des Gliederungsalgorithmus unmöglich ("Ist dieses {{HTMLElement("div")}} Teil der Gliederung der Seite, definiert es einen Abschnitt oder einen Unterabschnitt?" oder "Dient dieses {{HTMLElement("div")}} rein der Präsentation, um nur Styles darauf anzuwenden?"). Mit anderen Worten, die HTML4-Spezifikation ist sehr ungenau, was ein Abschnitt ist und wie sein Geltungsbereich definiert ist. Die automatische Generierung von Gliederungen ist insbesondere für {{interwiki("wikipedia", "Unterstützungstechnologie")}} wichtig, die die Art und Weise, in der sie den Benutzern Informationen präsentieren, an die Struktur des Dokuments anpassen können. HTML5 macht {{HTMLElement("div")}}-Elemente für den Gliederungsalgorithmus überflüssig und führt für Abschnitte das neue HTML-Element {{HTMLElement("section")}} ein.
    2. -
  2. Das Zusammenführen mehrerer Dokumente ist schwierig: Wenn Sie ein Unterdokument in ein Hauptdokument einfügen, müssen Sie die Ebene des HTML-Überschriftenelements so ändern, dass die Gliederung erhalten bleibt. Dies wird in HTML5 gelöst, da die neu eingeführten Abschnittselemente ({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} und {{HTMLElement("aside")}}) immer Unterabschnitte ihres nächsten Vorfahrenabschnitts sind, unabhängig davon, welche Abschnitte durch interne Überschriften erstellt werden.
    3. -
  3. In HTML4 ist jeder Abschnitt Teil der Dokumentgliederung. Dokumente sind jedoch oft nicht so linear. Ein Dokument kann spezielle Abschnitte mit Informationen enthalten, die nicht Teil des Hauptflusses sind, bspw. ein Werbeblock oder ein Erklärungsfeld. HTML5 führt das Element {{HTMLElement("aside")}} ein, sodass solche Abschnitte von der Hauptgliederung ausgenommen werden können.
    4. -
  4. Da in HTML4 jeder Abschnitt Teil der Dokumentgliederung ist, gibt es keine Möglichkeit, Abschnitte mit Informationen zu haben, die sich nicht auf das Dokument, sondern auf die gesamte Website beziehen, wie Logos, Menüs, Inhaltsverzeichnisse oder Copyright-Informationen und rechtliche Hinweise. Zu diesem Zweck führt HTML5 drei neue Elemente ein: {{HTMLElement("nav")}} für Linksammlungen, z. B. für ein Inhaltsverzeichnis, und {{HTMLElement("footer")}} und {{HTMLElement("header")}} für Webseiten-bezogene Informationen. Beachten Sie, dass {{HTMLElement("header")}} und {{HTMLElement("footer")}} keine abschnittsweisen Inhalte wie {{HTMLElement("section")}} sind, sondern nur dazu dienen Teile eines Abschnitts semantisch zu markieren.
    5. -
- -

HTML5 verbessert allgemeinhin die Abschnitts- und Überschriftsfunktionen, sodass die Gliederungen von Dokumenten vorhersehbar sind und vom Browser verwendet werden können, um die Benutzererfahrung zu verbessern.

- -

Der HTML5-Gliederungsalgorithmus

- -
-

Wichtig: Es gibt keine Implementierungen des vorgeschlagenen Gliederungsalgorithmus in Webbrowsern oder Unterstützungstechnologie. Es war nie Teil einer endgültigen W3C-Spezifikation. Daher sollte der Gliederungsalgorithmus nicht verwendet werden, um den Benutzern die Dokumentstruktur zu vermitteln. Autoren sollten den Überschriftenrang (h1-h6) verwenden, um die Dokumentstruktur zu vermitteln.

-
- -

Betrachten wir die Algorithmen, die der Verarbeitung von Abschnitten und Gliederungen in HTML zugrunde liegen.

- -

Abschnitte definieren

- -

Der gesamte Inhalt des Elements {{HTMLElement("body")}} ist Teil eines Abschnitts. Abschnitte in HTML5 können verschachtelt sein. Neben dem durch das {{HTMLElement("body")}}-Element definierten Hauptabschnitt werden Abschnittsgrenzwerte entweder explizit oder implizit definiert. Ausdrücklich definierte Abschnitte sind der Inhalt der Tags {{HTMLElement("body")}}, {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}} und {{HTMLElement("nav")}}.

- -
Jeder Abschnitt kann eine eigene Überschriftenhierarchie haben. Daher kann auch ein verschachtelter Abschnitt ein {{HTMLElement("h1")}} haben. Siehe {{anch("Überschriften definieren")}}
- -

Sehen wir uns ein Beispiel an — hier haben wir ein Dokument mit einem Abschnitt und einer Fußzeile auf der obersten Ebene definiert. Innerhalb des Abschnitts der obersten Ebene haben wir drei Unterabschnitte, die durch zwei {{htmlelement("section")}}-Elemente und ein {{htmlelement("aside")}}-Element definiert werden:

- -
<section>
-
-  <h1>Forest elephants</h1>
-
-  <section>
-    <h1>Introduction</h1>
-    <p>In this section, we discuss the lesser known forest elephants.</p>
-  </section>
-
-  <section>
-    <h1>Habitat</h1>
-    <p>Forest elephants do not live in trees but among them.</p>
-  </section>
-
-  <aside>
-    <p>advertising block</p>
-  </aside>
-
-</section>
-
-<footer>
-  <p>(c) 2010 The Example company</p>
-</footer>
- -

Dies erzeugt folgende Gliederung:

- -
1. Forest elephants
-   1.1 Introduction
-   1.2 Habitat
-
- -

Überschriften definieren

- -
-

Wichtig: Es gibt keine Implementierungen des vorgeschlagenen Gliederungsalgorithmus in Webbrowsern oder Unterstützungstechnologie. Es war nie Teil einer endgültigen W3C-Spezifikation. Daher sollte der Gliederungsalgorithmus nicht verwendet werden, um den Benutzern die Dokumentstruktur zu vermitteln. Autoren sollten den Überschriftenrang (h1-h6) verwenden, um die Dokumentstruktur zu vermitteln.

-
- -

Während die HTML-Abschnittselemente die Struktur des Dokuments definieren, müssen für eine sinnvolle Gliederung auch Überschriften verwendet werden. Die Grundregel ist einfach: Das erste HTML-Überschriftenelement (eines von {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}) definiert die Überschrift des aktuellen Abschnitts.

- -

Die Überschriftenelemente haben einen Rang, der durch die Nummer im Elementnamen angegeben wird, wobei {{HTMLElement("h1")}} den höchsten Rang und {{HTMLElement("h6")}} den niedrigsten Rang hat. Die relative Rangordnung ist nur innerhalb eines Abschnitts von Bedeutung. Die Struktur der Abschnitte bestimmt die Gliederung, nicht die Rangfolge der Abschnitte. Betrachten Sie zum Beispiel diesen Code:

- -

 

- -
<section>
-  <h1>Forest elephants</h1>
-  <p>In this section, we discuss the lesser known forest elephants.
-    ...this section continues...
-  <section>
-    <h2>Habitat</h2>
-    <p>Forest elephants do not live in trees but among them.
-        ...this subsection continues...
-  </section>
-</section>
-<section>
-  <h3>Mongolian gerbils</h3>
-  <p>In this section, we discuss the famous mongolian gerbils.
-     ...this section continues...
-</section>
- -

Dies erzeugt folgende Gliederung:

- -
1. Forest elephants
-   1.1 Habitat
-2. Mongolian gerbils
- -

Beachten Sie, dass der Rang des Überschriftenelements (im Beispiel {{HTMLElement("h1")}} für den ersten Abschnitt der obersten Ebene, {{HTMLElement("h2")}} für den Unterabschnitt und {{HTMLElement("h3")}} für den zweiten Abschnitt der oberen Ebene) nicht wichtig ist (jeder Rang kann als Überschrift eines explizit definierten Abschnitts verwendet werden, obwohl dies nicht empfohlen wird).

- -

Implizierte Abschnitte

- -

 

- -

Da die HTML5-Abschnittselemente zum Definieren einer Gliederung nicht zwingend erforderlich sind, besteht die Möglichkeit Abschnitte ohne sie zu definieren, um die Kompatibilität mit HTML4 zu gewährleisten. Dies nennt man einen implizierten Abschnitt.

- -

Die Überschriftenelemente ({{HTMLElement("h1")}} bis {{HTMLElement("h6")}}) definieren einen neuen impliziten Abschnitt, wenn sie nicht die erste Überschrift ihrer übergeordneten, expliziten Abschnitte sind. Die Position dieses impliziten Abschnitts in der Gliederung wird durch seinen relativen Rang mit der vorherigen Überschrift im übergeordneten Abschnitt definiert. Wenn es einen niedrigeren Rang als die vorherige Überschrift hat, wird ein impliziter Unterabschnitt des Abschnitts geöffnet. Dieser Code:

- -

 

- -
<section>
-  <h1>Forest elephants</h1>
-  <p>In this section, we discuss the lesser known forest elephants.
-    ...this section continues...
-  <h3 class="implicit subsection">Habitat</h3>
-  <p>Forest elephants do not live in trees but among them.
-    ...this subsection continues...
-</section>
- -

erzeugt die Gliederung:

- -
1. Forest elephants
-   1.1 Habitat (implizit definiert durch das Element h3)
-
- -

Wenn es den gleichen Rang wie die vorherige Überschrift hat, schließt es den vorherigen Abschnitt (der möglicherweise explizit war!) und öffnet einen neuen impliziten Abschnitt auf derselben Ebene:

- -
<section>
-  <h1>Forest elephants</h1>
-  <p>In this section, we discuss the lesser known forest elephants.
-    ...this section continues...
-  <h1 class="implicit section">Mongolian gerbils</h1>
-  <p>Mongolian gerbils are cute little mammals.
-    ...this section continues...
-</section>
- -

erzeugt die Gliederung:

- -
1. Forest elephants
-2. Mongolian gerbils (implizit definiert durch das Element h1, wodurch gleichzeitig der vorherige Abschnitt geschlossen wurde)
-
- -

Wenn es einen höheren Rang als die vorherige Überschrift hat, schließt es den vorherigen Abschnitt und öffnet einen neuen impliziten auf der höheren Ebene:

- -
<body>
-  <h1>Mammals</h1>
-  <h2>Whales</h2>
-  <p>In this section, we discuss the swimming whales.
-    ...this section continues...
-  <section>
-    <h3>Forest elephants</h3>
-    <p>In this section, we discuss the lesser known forest elephants.
-      ...this section continues...
-    <h3>Mongolian gerbils</h3>
-      <p>Hordes of gerbils have spread their range far beyond Mongolia.
-         ...this subsection continues...
-    <h2>Reptiles</h2>
-      <p>Reptiles are animals with cold blood.
-          ...this section continues...
-  </section>
-</body>
- -

leading to the following outline:

- -
1. Mammals
-   1.1 Whales (implicitly defined by the h2 element)
-   1.2 Forest elephants (explicitly defined by the section element)
-   1.3 Mongolian gerbils (implicitly defined by the h3 element, which closes the previous section at the same time)
-2. Reptiles (implicitly defined by the h2 element, which closes the previous section at the same time)
-
- -

This is not the outline that one might expect by quickly glancing at the heading tags. To make your markup human-understandable, it is a good practice to use explicit tags for opening and closing sections, and to match the heading rank to the intended section nesting level. However, this is not required by the HTML5 specification. If you find that browsers are rendering your document outline in unexpected ways, check whether you have sections that are implicitly closed by heading elements.

- -

An exception to the rule of thumb that heading rank should match the section nesting level is for sections that may be reused in multiple documents. For example, a section might be stored in a content-management system and assembled into documents at run time. In this case, a good practice is to start at {{HTMLElement("h1")}} for the top heading level of the reusable section. The nesting level of the reusable section will be determined by the section hierarchy of the document in which it appears. Explicit section tags are still helpful in this case.

- -

Sectioning roots

- -

A sectioning root is an HTML element that can have its own outline, but the sections and headings inside it do not contribute to the outline of its ancestor. Besides {{HTMLElement("body")}} which is the logical sectioning root of a document, the following elements often introduce external content to the page: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, and {{HTMLElement("figure")}}.

- -

Example:

- -
<section>
-  <h1>Forest elephants</h1>
-  <section>
-    <h2>Introduction</h2>
-    <p>In this section, we discuss the lesser known forest elephants</p>
-  </section>
-  <section>
-    <h2>Habitat</h2>
-    <p>Forest elephants do not live in trees but among them. Let's
-       look what scientists are saying in "<cite>The Forest Elephant in Borneo</cite>":</p>
-    <blockquote>
-       <h1>Borneo</h1>
-       <p>The forest element lives in Borneo...</p>
-    </blockquote>
-  </section>
-</section>
-
- -

This example results in the following outline:

- -
1. Forest elephants
-   1.1 Introduction
-   1.2 Habitat
- -

This outline doesn't contain the internal outline of the {{HTMLElement("blockquote")}} element, which, being an external citation, is a sectioning root and isolates its internal outline.

- -

Sections outside the outline

- -

HTML5 introduces two new elements that allow defining sections that don't belong to the main outline of a web document:

- -
    -
  1. The HTML Aside Section Element ({{HTMLElement("aside")}}) defines a section that, though related to the main element, doesn't belong to the main flow, like an explanation box or an advertisement. It has its own outline, but doesn't belong to the main one.
    2. -
  2. The HTML Navigational Section Element ({{HTMLElement("nav")}}) defines a section that contains navigation links. There can be several of them in a document, for example one with page internal links like a table of contents, and another with site navigational links. These links are not part of the main document flow and outline, and are generally not initially rendered by screen readers and similar assistive technologies.
    3. -
- -

Headers and Footers

- -

HTML5 also introduces two new elements that can be used to mark up the header and the footer of a section:

- -
    -
  1. The HTML Header Element ({{HTMLElement("header")}}) defines a page header — typically containing the logo and name of the site and possibly a horizontal menu — or section header, containing perhaps the section's heading, author name, etc. {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, and {{HTMLElement("nav")}} can have their own {{HTMLElement("header")}}. Despite its name, it is not necessarily positioned at the beginning of the page or section.
    2. -
  2. The HTML Footer Element ({{HTMLElement("footer")}}) defines a page footer — typically containing the copyright and legal notices and sometimes some links — or section footer, containing perhaps the section's publication date, license information, etc. {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, and {{HTMLElement("nav")}} can have their own {{HTMLElement("footer")}}. Despite its name, it is not necessarily positioned at the end of the page or section.
    3. -
- -

These do not create new sections in the outline, rather, they mark up content inside sections of the page.

- -

Addresses in sectioning elements

- -

The author of a document often wants to publish some contact information, such as the author's name and address. HTML4 allowed this via the {{HTMLElement("address")}} element, which has been extended in HTML5.

- -

A document can be made of different sections from different authors. A section from another author than the one of the main page is defined using the {{HTMLElement("article")}} element. Consequently, the {{HTMLElement("address")}} element is now linked to its nearest {{HTMLElement("body")}} or {{HTMLElement("article")}} ancestor.

- -

Using HTML5 elements in non-HTML5 browsers

- -

Sections and headings elements can be made to work in most non-HTML5 browsers with a couple of extra steps, and in this section we'll show you how. If a significant percentage of your particular target audience is using Internet Explorer 8 or older, then you can follow the below instructions to make them behave as expected. However, global usage of these browsers is now very small, so this is unlikely.

- -

HTML5 semantic elements don't need a special DOM interface, but they will need a specific CSS styling in older browser that don't support them explicitly. Unknown elements are styled as display:inline by default, so you'll want to set them to display: block:

- -
article, aside, footer, header, nav, section {
-  display:block;
-}
-
- -

Of course the web developer can style them differently, but keep in mind that in a non-HTML5 browser, the default styling is different from what is expected for such elements. Also note that the {{HTMLElement("time")}} element has not been included, because the default styling for it in a non-HTML5 browser is the same as the one in an HTML5-compatible one.

- -

Next up, older IE versions do not allow styling of unsupported elements, unless you create an instance of them in the DOM. You can add a specific script to allow this, as seen below:

- -
<!--[if lt IE 9]>
-  <script>
-    document.createElement("article");
-    document.createElement("aside");
-    document.createElement("footer");
-    document.createElement("header");
-    document.createElement("nav");
-    document.createElement("section");
-    document.createElement("time");
-  </script>
-<![endif]-->
-
- -

As a last precaution, you could also add an explicit {{HTMLElement("noscript")}} element inside the {{HTMLElement("head")}} element to warn any users that have JavaScript disabled that your page relies on JavaScript:

- -
<noscript>
-  <p><strong>This web page requires JavaScript to be enabled.</strong></p>
-  <p>JavaScript is an object-oriented computer programming language
-    commonly used to create interactive effects within web browsers.</p>
-  <p><a href="https://goo.gl/koeeaJ">How to enable JavaScript?</a></p>
-</noscript>
-
- -

This leads to the following code to allow the support of the HTML5 sections and headings elements in non-HTML5 browsers, even for Internet Explorer (8 and older), with a proper fallback for the case where this latter browser is configured not to use scripting:

- -
<!--[if lt IE 9]>
-  <script>
-    document.createElement("article");
-    document.createElement("aside");
-    document.createElement("footer");
-    document.createElement("header");
-    document.createElement("nav");
-    document.createElement("section");
-    document.createElement("time");
-  </script>
-<![endif]-->
-<noscript>
-  <p><strong>This web page requires JavaScript to be enabled.</strong></p>
-  <p>JavaScript is an object-oriented computer programming language
-    commonly used to create interactive effects within web browsers.</p>
-  <p><a href="https://goo.gl/koeeaJ">How to enable JavaScript?</a></p>
-</noscript>
-
- -
-

Note: This code will also cause the HTML validator to return errors. This isn't a really bad thing neccessarily — sites will often have a few validation errors — but it something to be aware of still.

-
- -

Conclusion

- -

The new semantic elements introduced in HTML5 bring the ability to describe the structure of a web document in a standard way. They bring a big advantage for people having HTML5 browsers and needing the structure to help them understand the page, for instance people needing the help of some assistive technology. These new semantic elements are simple to use and, with very few burdens, can be made to work also in non-HTML5 browsers. Therefore they should be used without restrictions.

diff --git a/files/de/web/guide/html/using_html_sections_and_outlines/index.html b/files/de/web/guide/html/using_html_sections_and_outlines/index.html new file mode 100644 index 0000000000..882a3333dc --- /dev/null +++ b/files/de/web/guide/html/using_html_sections_and_outlines/index.html @@ -0,0 +1,351 @@ +--- +title: Verwendung von HTML-Abschnitten und -Gliederungen +slug: Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document +translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines +--- +
{{HTMLSidebar}}
+ +
+

Wichtig: Es gibt keine Implementierungen des vorgeschlagenen Gliederungsalgorithmus in Webbrowsern oder Unterstützungstechnologie. Es war nie Teil einer endgültigen W3C-Spezifikation. Daher sollte der Gliederungsalgorithmus nicht verwendet werden, um den Benutzern die Dokumentstruktur zu vermitteln. Autoren sollten den Überschriftenrang (h1-h6) verwenden, um die Dokumentstruktur zu vermitteln.

+
+ +

Die HTML5-Spezifikation bietet Webentwicklern mehrere neue Elemente, mit denen sie die Struktur eines Webdokuments mit Standardsemantik beschreiben können. In diesem Dokument werden diese Elemente beschrieben und wie man sie einsetzt, um die gewünschte Gliederung für ein Dokument zu definieren.

+ +

Dokumentstruktur in HTML 4

+ +

Die Struktur eines Dokuments, d. h. die semantische Struktur dessen, was sich zwischen <body> und </body> befindet, ist von grundlegender Bedeutung, um dem Benutzer eine Seite zu präsentieren. HTML4 verwendet den Begriff der Abschnitte und Unterabschnitte eines Dokuments, um seine Struktur zu beschreiben. Ein Abschnitt wird definiert durch ein Element ({{HTMLElement("div")}}) mit darin enthaltenen Überschriftenelementen ({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}} oder {{HTMLElement("h6")}}) die dessen Titel definieren. Die Beziehungen dieser Elemente führen zur Struktur des Dokuments und seiner Gliederung.

+ +

Folgendes Markup:

+ +
<div class="section" id="forest-elephants" >
+  <h1>Forest elephants</h1>
+  <p>In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  <div class="subsection" id="forest-habitat" >
+    <h2>Habitat</h2>
+    <p>Forest elephants do not live in trees but among them.
+     ...this subsection continues...
+  </div>
+</div> 
+ +

führt zu folgender Gliederung (ohne die implizierten Ebenennummern):

+ +
1. Forest elephants
+   1.1 Habitat
+
+ +

Die {{HTMLElement("div")}}-Elemente sind nicht zwingend erforderlich, um einen neuen Abschnitt zu definieren. Die bloße Anwesenheit eines Überschriftselements reicht aus, um einen neuen Abschnitt anzuzeigen. Deshalb führt:

+ +
<h1>Forest elephants</h1>
+  <p>In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  <h2>Habitat</h2>
+  <p>Forest elephants do not live in trees but among them.
+    ...this subsection continues...
+  <h2>Diet</h2>
+<h1>Mongolian gerbils</h1>
+
+ +

zu folgender Gliederung:

+ +
1. Forest elephants
+   1.1 Habitat
+   1.2 Diet
+2. Mongolian gerbils
+
+ +

Durch HTML5 gelöste Probleme

+ +

Die HTML 4-Definition der Struktur eines Dokuments und seines implizierten Umrißalgorithmus ist sehr grob und führt zu zahlreichen Problemen:

+ +
    +
  1. Die Verwendung von {{HTMLElement("div")}} zum Definieren semantischer Abschnitte ohne Definieren bestimmter Werte für die Klassenattribute macht die Automatisierung des Gliederungsalgorithmus unmöglich ("Ist dieses {{HTMLElement("div")}} Teil der Gliederung der Seite, definiert es einen Abschnitt oder einen Unterabschnitt?" oder "Dient dieses {{HTMLElement("div")}} rein der Präsentation, um nur Styles darauf anzuwenden?"). Mit anderen Worten, die HTML4-Spezifikation ist sehr ungenau, was ein Abschnitt ist und wie sein Geltungsbereich definiert ist. Die automatische Generierung von Gliederungen ist insbesondere für {{interwiki("wikipedia", "Unterstützungstechnologie")}} wichtig, die die Art und Weise, in der sie den Benutzern Informationen präsentieren, an die Struktur des Dokuments anpassen können. HTML5 macht {{HTMLElement("div")}}-Elemente für den Gliederungsalgorithmus überflüssig und führt für Abschnitte das neue HTML-Element {{HTMLElement("section")}} ein.
    2. +
  2. Das Zusammenführen mehrerer Dokumente ist schwierig: Wenn Sie ein Unterdokument in ein Hauptdokument einfügen, müssen Sie die Ebene des HTML-Überschriftenelements so ändern, dass die Gliederung erhalten bleibt. Dies wird in HTML5 gelöst, da die neu eingeführten Abschnittselemente ({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} und {{HTMLElement("aside")}}) immer Unterabschnitte ihres nächsten Vorfahrenabschnitts sind, unabhängig davon, welche Abschnitte durch interne Überschriften erstellt werden.
    3. +
  3. In HTML4 ist jeder Abschnitt Teil der Dokumentgliederung. Dokumente sind jedoch oft nicht so linear. Ein Dokument kann spezielle Abschnitte mit Informationen enthalten, die nicht Teil des Hauptflusses sind, bspw. ein Werbeblock oder ein Erklärungsfeld. HTML5 führt das Element {{HTMLElement("aside")}} ein, sodass solche Abschnitte von der Hauptgliederung ausgenommen werden können.
    4. +
  4. Da in HTML4 jeder Abschnitt Teil der Dokumentgliederung ist, gibt es keine Möglichkeit, Abschnitte mit Informationen zu haben, die sich nicht auf das Dokument, sondern auf die gesamte Website beziehen, wie Logos, Menüs, Inhaltsverzeichnisse oder Copyright-Informationen und rechtliche Hinweise. Zu diesem Zweck führt HTML5 drei neue Elemente ein: {{HTMLElement("nav")}} für Linksammlungen, z. B. für ein Inhaltsverzeichnis, und {{HTMLElement("footer")}} und {{HTMLElement("header")}} für Webseiten-bezogene Informationen. Beachten Sie, dass {{HTMLElement("header")}} und {{HTMLElement("footer")}} keine abschnittsweisen Inhalte wie {{HTMLElement("section")}} sind, sondern nur dazu dienen Teile eines Abschnitts semantisch zu markieren.
    5. +
+ +

HTML5 verbessert allgemeinhin die Abschnitts- und Überschriftsfunktionen, sodass die Gliederungen von Dokumenten vorhersehbar sind und vom Browser verwendet werden können, um die Benutzererfahrung zu verbessern.

+ +

Der HTML5-Gliederungsalgorithmus

+ +
+

Wichtig: Es gibt keine Implementierungen des vorgeschlagenen Gliederungsalgorithmus in Webbrowsern oder Unterstützungstechnologie. Es war nie Teil einer endgültigen W3C-Spezifikation. Daher sollte der Gliederungsalgorithmus nicht verwendet werden, um den Benutzern die Dokumentstruktur zu vermitteln. Autoren sollten den Überschriftenrang (h1-h6) verwenden, um die Dokumentstruktur zu vermitteln.

+
+ +

Betrachten wir die Algorithmen, die der Verarbeitung von Abschnitten und Gliederungen in HTML zugrunde liegen.

+ +

Abschnitte definieren

+ +

Der gesamte Inhalt des Elements {{HTMLElement("body")}} ist Teil eines Abschnitts. Abschnitte in HTML5 können verschachtelt sein. Neben dem durch das {{HTMLElement("body")}}-Element definierten Hauptabschnitt werden Abschnittsgrenzwerte entweder explizit oder implizit definiert. Ausdrücklich definierte Abschnitte sind der Inhalt der Tags {{HTMLElement("body")}}, {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}} und {{HTMLElement("nav")}}.

+ +
Jeder Abschnitt kann eine eigene Überschriftenhierarchie haben. Daher kann auch ein verschachtelter Abschnitt ein {{HTMLElement("h1")}} haben. Siehe {{anch("Überschriften definieren")}}
+ +

Sehen wir uns ein Beispiel an — hier haben wir ein Dokument mit einem Abschnitt und einer Fußzeile auf der obersten Ebene definiert. Innerhalb des Abschnitts der obersten Ebene haben wir drei Unterabschnitte, die durch zwei {{htmlelement("section")}}-Elemente und ein {{htmlelement("aside")}}-Element definiert werden:

+ +
<section>
+
+  <h1>Forest elephants</h1>
+
+  <section>
+    <h1>Introduction</h1>
+    <p>In this section, we discuss the lesser known forest elephants.</p>
+  </section>
+
+  <section>
+    <h1>Habitat</h1>
+    <p>Forest elephants do not live in trees but among them.</p>
+  </section>
+
+  <aside>
+    <p>advertising block</p>
+  </aside>
+
+</section>
+
+<footer>
+  <p>(c) 2010 The Example company</p>
+</footer>
+ +

Dies erzeugt folgende Gliederung:

+ +
1. Forest elephants
+   1.1 Introduction
+   1.2 Habitat
+
+ +

Überschriften definieren

+ +
+

Wichtig: Es gibt keine Implementierungen des vorgeschlagenen Gliederungsalgorithmus in Webbrowsern oder Unterstützungstechnologie. Es war nie Teil einer endgültigen W3C-Spezifikation. Daher sollte der Gliederungsalgorithmus nicht verwendet werden, um den Benutzern die Dokumentstruktur zu vermitteln. Autoren sollten den Überschriftenrang (h1-h6) verwenden, um die Dokumentstruktur zu vermitteln.

+
+ +

Während die HTML-Abschnittselemente die Struktur des Dokuments definieren, müssen für eine sinnvolle Gliederung auch Überschriften verwendet werden. Die Grundregel ist einfach: Das erste HTML-Überschriftenelement (eines von {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}) definiert die Überschrift des aktuellen Abschnitts.

+ +

Die Überschriftenelemente haben einen Rang, der durch die Nummer im Elementnamen angegeben wird, wobei {{HTMLElement("h1")}} den höchsten Rang und {{HTMLElement("h6")}} den niedrigsten Rang hat. Die relative Rangordnung ist nur innerhalb eines Abschnitts von Bedeutung. Die Struktur der Abschnitte bestimmt die Gliederung, nicht die Rangfolge der Abschnitte. Betrachten Sie zum Beispiel diesen Code:

+ +

 

+ +
<section>
+  <h1>Forest elephants</h1>
+  <p>In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  <section>
+    <h2>Habitat</h2>
+    <p>Forest elephants do not live in trees but among them.
+        ...this subsection continues...
+  </section>
+</section>
+<section>
+  <h3>Mongolian gerbils</h3>
+  <p>In this section, we discuss the famous mongolian gerbils.
+     ...this section continues...
+</section>
+ +

Dies erzeugt folgende Gliederung:

+ +
1. Forest elephants
+   1.1 Habitat
+2. Mongolian gerbils
+ +

Beachten Sie, dass der Rang des Überschriftenelements (im Beispiel {{HTMLElement("h1")}} für den ersten Abschnitt der obersten Ebene, {{HTMLElement("h2")}} für den Unterabschnitt und {{HTMLElement("h3")}} für den zweiten Abschnitt der oberen Ebene) nicht wichtig ist (jeder Rang kann als Überschrift eines explizit definierten Abschnitts verwendet werden, obwohl dies nicht empfohlen wird).

+ +

Implizierte Abschnitte

+ +

 

+ +

Da die HTML5-Abschnittselemente zum Definieren einer Gliederung nicht zwingend erforderlich sind, besteht die Möglichkeit Abschnitte ohne sie zu definieren, um die Kompatibilität mit HTML4 zu gewährleisten. Dies nennt man einen implizierten Abschnitt.

+ +

Die Überschriftenelemente ({{HTMLElement("h1")}} bis {{HTMLElement("h6")}}) definieren einen neuen impliziten Abschnitt, wenn sie nicht die erste Überschrift ihrer übergeordneten, expliziten Abschnitte sind. Die Position dieses impliziten Abschnitts in der Gliederung wird durch seinen relativen Rang mit der vorherigen Überschrift im übergeordneten Abschnitt definiert. Wenn es einen niedrigeren Rang als die vorherige Überschrift hat, wird ein impliziter Unterabschnitt des Abschnitts geöffnet. Dieser Code:

+ +

 

+ +
<section>
+  <h1>Forest elephants</h1>
+  <p>In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  <h3 class="implicit subsection">Habitat</h3>
+  <p>Forest elephants do not live in trees but among them.
+    ...this subsection continues...
+</section>
+ +

erzeugt die Gliederung:

+ +
1. Forest elephants
+   1.1 Habitat (implizit definiert durch das Element h3)
+
+ +

Wenn es den gleichen Rang wie die vorherige Überschrift hat, schließt es den vorherigen Abschnitt (der möglicherweise explizit war!) und öffnet einen neuen impliziten Abschnitt auf derselben Ebene:

+ +
<section>
+  <h1>Forest elephants</h1>
+  <p>In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  <h1 class="implicit section">Mongolian gerbils</h1>
+  <p>Mongolian gerbils are cute little mammals.
+    ...this section continues...
+</section>
+ +

erzeugt die Gliederung:

+ +
1. Forest elephants
+2. Mongolian gerbils (implizit definiert durch das Element h1, wodurch gleichzeitig der vorherige Abschnitt geschlossen wurde)
+
+ +

Wenn es einen höheren Rang als die vorherige Überschrift hat, schließt es den vorherigen Abschnitt und öffnet einen neuen impliziten auf der höheren Ebene:

+ +
<body>
+  <h1>Mammals</h1>
+  <h2>Whales</h2>
+  <p>In this section, we discuss the swimming whales.
+    ...this section continues...
+  <section>
+    <h3>Forest elephants</h3>
+    <p>In this section, we discuss the lesser known forest elephants.
+      ...this section continues...
+    <h3>Mongolian gerbils</h3>
+      <p>Hordes of gerbils have spread their range far beyond Mongolia.
+         ...this subsection continues...
+    <h2>Reptiles</h2>
+      <p>Reptiles are animals with cold blood.
+          ...this section continues...
+  </section>
+</body>
+ +

leading to the following outline:

+ +
1. Mammals
+   1.1 Whales (implicitly defined by the h2 element)
+   1.2 Forest elephants (explicitly defined by the section element)
+   1.3 Mongolian gerbils (implicitly defined by the h3 element, which closes the previous section at the same time)
+2. Reptiles (implicitly defined by the h2 element, which closes the previous section at the same time)
+
+ +

This is not the outline that one might expect by quickly glancing at the heading tags. To make your markup human-understandable, it is a good practice to use explicit tags for opening and closing sections, and to match the heading rank to the intended section nesting level. However, this is not required by the HTML5 specification. If you find that browsers are rendering your document outline in unexpected ways, check whether you have sections that are implicitly closed by heading elements.

+ +

An exception to the rule of thumb that heading rank should match the section nesting level is for sections that may be reused in multiple documents. For example, a section might be stored in a content-management system and assembled into documents at run time. In this case, a good practice is to start at {{HTMLElement("h1")}} for the top heading level of the reusable section. The nesting level of the reusable section will be determined by the section hierarchy of the document in which it appears. Explicit section tags are still helpful in this case.

+ +

Sectioning roots

+ +

A sectioning root is an HTML element that can have its own outline, but the sections and headings inside it do not contribute to the outline of its ancestor. Besides {{HTMLElement("body")}} which is the logical sectioning root of a document, the following elements often introduce external content to the page: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, and {{HTMLElement("figure")}}.

+ +

Example:

+ +
<section>
+  <h1>Forest elephants</h1>
+  <section>
+    <h2>Introduction</h2>
+    <p>In this section, we discuss the lesser known forest elephants</p>
+  </section>
+  <section>
+    <h2>Habitat</h2>
+    <p>Forest elephants do not live in trees but among them. Let's
+       look what scientists are saying in "<cite>The Forest Elephant in Borneo</cite>":</p>
+    <blockquote>
+       <h1>Borneo</h1>
+       <p>The forest element lives in Borneo...</p>
+    </blockquote>
+  </section>
+</section>
+
+ +

This example results in the following outline:

+ +
1. Forest elephants
+   1.1 Introduction
+   1.2 Habitat
+ +

This outline doesn't contain the internal outline of the {{HTMLElement("blockquote")}} element, which, being an external citation, is a sectioning root and isolates its internal outline.

+ +

Sections outside the outline

+ +

HTML5 introduces two new elements that allow defining sections that don't belong to the main outline of a web document:

+ +
    +
  1. The HTML Aside Section Element ({{HTMLElement("aside")}}) defines a section that, though related to the main element, doesn't belong to the main flow, like an explanation box or an advertisement. It has its own outline, but doesn't belong to the main one.
    2. +
  2. The HTML Navigational Section Element ({{HTMLElement("nav")}}) defines a section that contains navigation links. There can be several of them in a document, for example one with page internal links like a table of contents, and another with site navigational links. These links are not part of the main document flow and outline, and are generally not initially rendered by screen readers and similar assistive technologies.
    3. +
+ +

Headers and Footers

+ +

HTML5 also introduces two new elements that can be used to mark up the header and the footer of a section:

+ +
    +
  1. The HTML Header Element ({{HTMLElement("header")}}) defines a page header — typically containing the logo and name of the site and possibly a horizontal menu — or section header, containing perhaps the section's heading, author name, etc. {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, and {{HTMLElement("nav")}} can have their own {{HTMLElement("header")}}. Despite its name, it is not necessarily positioned at the beginning of the page or section.
    2. +
  2. The HTML Footer Element ({{HTMLElement("footer")}}) defines a page footer — typically containing the copyright and legal notices and sometimes some links — or section footer, containing perhaps the section's publication date, license information, etc. {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, and {{HTMLElement("nav")}} can have their own {{HTMLElement("footer")}}. Despite its name, it is not necessarily positioned at the end of the page or section.
    3. +
+ +

These do not create new sections in the outline, rather, they mark up content inside sections of the page.

+ +

Addresses in sectioning elements

+ +

The author of a document often wants to publish some contact information, such as the author's name and address. HTML4 allowed this via the {{HTMLElement("address")}} element, which has been extended in HTML5.

+ +

A document can be made of different sections from different authors. A section from another author than the one of the main page is defined using the {{HTMLElement("article")}} element. Consequently, the {{HTMLElement("address")}} element is now linked to its nearest {{HTMLElement("body")}} or {{HTMLElement("article")}} ancestor.

+ +

Using HTML5 elements in non-HTML5 browsers

+ +

Sections and headings elements can be made to work in most non-HTML5 browsers with a couple of extra steps, and in this section we'll show you how. If a significant percentage of your particular target audience is using Internet Explorer 8 or older, then you can follow the below instructions to make them behave as expected. However, global usage of these browsers is now very small, so this is unlikely.

+ +

HTML5 semantic elements don't need a special DOM interface, but they will need a specific CSS styling in older browser that don't support them explicitly. Unknown elements are styled as display:inline by default, so you'll want to set them to display: block:

+ +
article, aside, footer, header, nav, section {
+  display:block;
+}
+
+ +

Of course the web developer can style them differently, but keep in mind that in a non-HTML5 browser, the default styling is different from what is expected for such elements. Also note that the {{HTMLElement("time")}} element has not been included, because the default styling for it in a non-HTML5 browser is the same as the one in an HTML5-compatible one.

+ +

Next up, older IE versions do not allow styling of unsupported elements, unless you create an instance of them in the DOM. You can add a specific script to allow this, as seen below:

+ +
<!--[if lt IE 9]>
+  <script>
+    document.createElement("article");
+    document.createElement("aside");
+    document.createElement("footer");
+    document.createElement("header");
+    document.createElement("nav");
+    document.createElement("section");
+    document.createElement("time");
+  </script>
+<![endif]-->
+
+ +

As a last precaution, you could also add an explicit {{HTMLElement("noscript")}} element inside the {{HTMLElement("head")}} element to warn any users that have JavaScript disabled that your page relies on JavaScript:

+ +
<noscript>
+  <p><strong>This web page requires JavaScript to be enabled.</strong></p>
+  <p>JavaScript is an object-oriented computer programming language
+    commonly used to create interactive effects within web browsers.</p>
+  <p><a href="https://goo.gl/koeeaJ">How to enable JavaScript?</a></p>
+</noscript>
+
+ +

This leads to the following code to allow the support of the HTML5 sections and headings elements in non-HTML5 browsers, even for Internet Explorer (8 and older), with a proper fallback for the case where this latter browser is configured not to use scripting:

+ +
<!--[if lt IE 9]>
+  <script>
+    document.createElement("article");
+    document.createElement("aside");
+    document.createElement("footer");
+    document.createElement("header");
+    document.createElement("nav");
+    document.createElement("section");
+    document.createElement("time");
+  </script>
+<![endif]-->
+<noscript>
+  <p><strong>This web page requires JavaScript to be enabled.</strong></p>
+  <p>JavaScript is an object-oriented computer programming language
+    commonly used to create interactive effects within web browsers.</p>
+  <p><a href="https://goo.gl/koeeaJ">How to enable JavaScript?</a></p>
+</noscript>
+
+ +
+

Note: This code will also cause the HTML validator to return errors. This isn't a really bad thing neccessarily — sites will often have a few validation errors — but it something to be aware of still.

+
+ +

Conclusion

+ +

The new semantic elements introduced in HTML5 bring the ability to describe the structure of a web document in a standard way. They bring a big advantage for people having HTML5 browsers and needing the structure to help them understand the page, for instance people needing the help of some assistive technology. These new semantic elements are simple to use and, with very few burdens, can be made to work also in non-HTML5 browsers. Therefore they should be used without restrictions.

diff --git a/files/de/web/guide/mobile/index.html b/files/de/web/guide/mobile/index.html new file mode 100644 index 0000000000..cc288a9c45 --- /dev/null +++ b/files/de/web/guide/mobile/index.html @@ -0,0 +1,18 @@ +--- +title: Mobile Web development +slug: Web_Development/Mobile +tags: + - Mobile + - NeedsTranslation + - TopicStub + - Web Development +translation_of: Web/Guide/Mobile +translation_of_original: Web_Development/Mobile +--- +

Developing web sites to be viewed on mobile devices requires approaches that ensure a web site works as well on mobile devices as it does on desktop browsers. The following articles describe some of these approaches.

+ diff --git a/files/de/web/html/block-level_elemente/index.html b/files/de/web/html/block-level_elemente/index.html deleted file mode 100644 index ed5cd1af79..0000000000 --- a/files/de/web/html/block-level_elemente/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: Block-Level Elemente -slug: Web/HTML/Block-level_elemente -tags: - - Anfänger - - Beginner - - Elemente - - Guide - - HTML - - HTML Elemente - - Referenzen - - Web Programmierung -translation_of: Web/HTML/Block-level_elements ---- -

Block- und Inline-Elemente sind die zwei ursprünglichen Kategorien der darstellenden HTML-Elemente.

- -

Block-Elemente nehmen typischerweise die gesamte verfügbare Breite ihres Elternelements ein und grenzen ihren Inhalt vertikal durch je einen Zeilenumbruch gegenüber den vor- und nachfolgenden Elementen ab. Auf diese Weise erzeugen sie den rechteckigen Block, der ihnen den Namen gibt.

- -

Block-Elemente stellen inhaltlich einen zusammenhängenden Bereich dar und geben ihm eine semantische Bedeutung. Prominentes Beispiel für ein Block-Element ist {{ HTMLElement("p") }}, das einen Textabsatz (Englisch: paragraph) umfasst und mit Abständen darüber und darunter von anderen Bereichen des Dokuments trennt.
- Einzige Ausnahme ist von dieser Regel ist {{ HTMLElement("div") }}; dieses hat keine semantische Bedeutung und dient lediglich dem Zugriff auf den betreffenden Bereich mittels CSS oder Javascript.

- -

Gemeinhin können Block-Elemente Inline- und meist auch weitere Block-Elemente enthalten. Dieser strukturellen Unterscheidung liegt die Idee zugrunde, dass auf Block-Ebene größere Strukturen definiert werden als auf Inline-Ebene.
- Die höchste Ebene für Block-Elemente selbst ist das Element {{ HTMLElement("body") }}.

- -

Die einfache Unterscheidung zwischen Block- und Inline-Ebene wird in HTML-Spezifikationen bis einschließlich Version 4.01 verwendet. In HTML 5 wird diese Zweiteilung zu einem komplexeren Satz von Inhaltskategorien ergänzt. Hierbei entspricht die Block-Ebene in HTML 5 grob der Kategorie fließender Inhalte, während die Inline-Ebene der Kategorie gestaltender Inhalte gleichkommt. Darüber hinaus existieren weitere Kategorien.

- -

Elemente

- -

Die nachfolgende Liste zeigt eine komplette Übersicht aller HTML-Block-Elemente (die neuen HTML-5-Elemente sind technisch gesehen nicht als Block-Elemente definiert).

- -
-
-
{{ HTMLElement("address") }}
-
Kontaktinformation.
-
{{ HTMLElement("article") }} {{ HTMLVersionInline(5) }}
-
Inhalt eines Artikels.
-
{{ HTMLElement("aside") }} {{ HTMLVersionInline(5) }}
-
Anmerkungen.
-
{{ HTMLElement("audio") }} {{ HTMLVersionInline(5) }}
-
Audio-Wiedergabe.
-
{{ HTMLElement("video") }} {{ HTMLVersionInline(5) }}
-
Video-Wiedergabe.
-
{{ HTMLElement("blockquote") }}
-
Zitat in Form eines eigenständigen Absatzes.
-
{{ HTMLElement("canvas") }} {{ HTMLVersionInline(5) }}
-
Bereich zum Zeichnen und Malen.
-
{{ HTMLElement("dd") }}
-
Definition, Beschreibung.
-
{{ HTMLElement("div") }}
-
Allgemeine Unterteilung ohne semantische Aussage.
-
- - - -
-
-
{{ HTMLElement("dl") }}
-
Definitionsliste.
-
- -
-
{{ HTMLElement("fieldset") }}
-
Gruppe von Elementen im Formular oder Reiter im Dialog.
-
{{ HTMLElement("figcaption") }} {{ HTMLVersionInline(5) }}
-
Beschreibung einer Grafik.
-
{{ HTMLElement("figure") }} {{ HTMLVersionInline(5) }}
-
Grafik mit Beschreibung (siehe {{ HTMLElement("figcaption") }}).
-
{{ HTMLElement("footer") }} {{ HTMLVersionInline(5) }}
-
Fußbereich.
-
{{ HTMLElement("form") }}
-
Eingabeformular.
-
{{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}
-
Überschriften in Abstufung 1 bis 6.
-
{{ HTMLElement("header") }} {{ HTMLVersionInline(5) }}
-
Kopfbereich.
-
{{ HTMLElement("hgroup") }} {{ HTMLVersionInline(5) }}
-
Gruppe mehrerer Überschriften.
-
-
{{ HTMLElement("hr") }}
-
Horizontrale Trennlinie.
-
{{ HTMLElement("noscript") }}
-
Ersatzinhalt, falls JavaScript deaktiviert ist.
-
{{ HTMLElement("ol") }}
-
Geordnete Liste.
-
{{ HTMLElement("output") }} {{ HTMLVersionInline(5) }}
-
Dynamisch erzeugte Ausgaben.
-
{{ HTMLElement("p") }}
-
Textabsatz.
-
{{ HTMLElement("pre") }}
-
Vorformatierter Text.
-
{{ HTMLElement("section") }} {{ HTMLVersionInline(5) }}
-
Abschnitt einer Seite.
-
{{ HTMLElement("table") }}
-
Tabelle.
-
{{ HTMLElement("tfoot") }}
-
Fußbereich der Tabelle.
-
{{ HTMLElement("ul") }}
-
Ungeordnete Liste.
-
-
- -

- -

Siehe auch

- - diff --git a/files/de/web/html/block-level_elements/index.html b/files/de/web/html/block-level_elements/index.html new file mode 100644 index 0000000000..ed5cd1af79 --- /dev/null +++ b/files/de/web/html/block-level_elements/index.html @@ -0,0 +1,108 @@ +--- +title: Block-Level Elemente +slug: Web/HTML/Block-level_elemente +tags: + - Anfänger + - Beginner + - Elemente + - Guide + - HTML + - HTML Elemente + - Referenzen + - Web Programmierung +translation_of: Web/HTML/Block-level_elements +--- +

Block- und Inline-Elemente sind die zwei ursprünglichen Kategorien der darstellenden HTML-Elemente.

+ +

Block-Elemente nehmen typischerweise die gesamte verfügbare Breite ihres Elternelements ein und grenzen ihren Inhalt vertikal durch je einen Zeilenumbruch gegenüber den vor- und nachfolgenden Elementen ab. Auf diese Weise erzeugen sie den rechteckigen Block, der ihnen den Namen gibt.

+ +

Block-Elemente stellen inhaltlich einen zusammenhängenden Bereich dar und geben ihm eine semantische Bedeutung. Prominentes Beispiel für ein Block-Element ist {{ HTMLElement("p") }}, das einen Textabsatz (Englisch: paragraph) umfasst und mit Abständen darüber und darunter von anderen Bereichen des Dokuments trennt.
+ Einzige Ausnahme ist von dieser Regel ist {{ HTMLElement("div") }}; dieses hat keine semantische Bedeutung und dient lediglich dem Zugriff auf den betreffenden Bereich mittels CSS oder Javascript.

+ +

Gemeinhin können Block-Elemente Inline- und meist auch weitere Block-Elemente enthalten. Dieser strukturellen Unterscheidung liegt die Idee zugrunde, dass auf Block-Ebene größere Strukturen definiert werden als auf Inline-Ebene.
+ Die höchste Ebene für Block-Elemente selbst ist das Element {{ HTMLElement("body") }}.

+ +

Die einfache Unterscheidung zwischen Block- und Inline-Ebene wird in HTML-Spezifikationen bis einschließlich Version 4.01 verwendet. In HTML 5 wird diese Zweiteilung zu einem komplexeren Satz von Inhaltskategorien ergänzt. Hierbei entspricht die Block-Ebene in HTML 5 grob der Kategorie fließender Inhalte, während die Inline-Ebene der Kategorie gestaltender Inhalte gleichkommt. Darüber hinaus existieren weitere Kategorien.

+ +

Elemente

+ +

Die nachfolgende Liste zeigt eine komplette Übersicht aller HTML-Block-Elemente (die neuen HTML-5-Elemente sind technisch gesehen nicht als Block-Elemente definiert).

+ +
+
+
{{ HTMLElement("address") }}
+
Kontaktinformation.
+
{{ HTMLElement("article") }} {{ HTMLVersionInline(5) }}
+
Inhalt eines Artikels.
+
{{ HTMLElement("aside") }} {{ HTMLVersionInline(5) }}
+
Anmerkungen.
+
{{ HTMLElement("audio") }} {{ HTMLVersionInline(5) }}
+
Audio-Wiedergabe.
+
{{ HTMLElement("video") }} {{ HTMLVersionInline(5) }}
+
Video-Wiedergabe.
+
{{ HTMLElement("blockquote") }}
+
Zitat in Form eines eigenständigen Absatzes.
+
{{ HTMLElement("canvas") }} {{ HTMLVersionInline(5) }}
+
Bereich zum Zeichnen und Malen.
+
{{ HTMLElement("dd") }}
+
Definition, Beschreibung.
+
{{ HTMLElement("div") }}
+
Allgemeine Unterteilung ohne semantische Aussage.
+
+ + + +
+
+
{{ HTMLElement("dl") }}
+
Definitionsliste.
+
+ +
+
{{ HTMLElement("fieldset") }}
+
Gruppe von Elementen im Formular oder Reiter im Dialog.
+
{{ HTMLElement("figcaption") }} {{ HTMLVersionInline(5) }}
+
Beschreibung einer Grafik.
+
{{ HTMLElement("figure") }} {{ HTMLVersionInline(5) }}
+
Grafik mit Beschreibung (siehe {{ HTMLElement("figcaption") }}).
+
{{ HTMLElement("footer") }} {{ HTMLVersionInline(5) }}
+
Fußbereich.
+
{{ HTMLElement("form") }}
+
Eingabeformular.
+
{{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}
+
Überschriften in Abstufung 1 bis 6.
+
{{ HTMLElement("header") }} {{ HTMLVersionInline(5) }}
+
Kopfbereich.
+
{{ HTMLElement("hgroup") }} {{ HTMLVersionInline(5) }}
+
Gruppe mehrerer Überschriften.
+
+
{{ HTMLElement("hr") }}
+
Horizontrale Trennlinie.
+
{{ HTMLElement("noscript") }}
+
Ersatzinhalt, falls JavaScript deaktiviert ist.
+
{{ HTMLElement("ol") }}
+
Geordnete Liste.
+
{{ HTMLElement("output") }} {{ HTMLVersionInline(5) }}
+
Dynamisch erzeugte Ausgaben.
+
{{ HTMLElement("p") }}
+
Textabsatz.
+
{{ HTMLElement("pre") }}
+
Vorformatierter Text.
+
{{ HTMLElement("section") }} {{ HTMLVersionInline(5) }}
+
Abschnitt einer Seite.
+
{{ HTMLElement("table") }}
+
Tabelle.
+
{{ HTMLElement("tfoot") }}
+
Fußbereich der Tabelle.
+
{{ HTMLElement("ul") }}
+
Ungeordnete Liste.
+
+
+ +

+ +

Siehe auch

+ + diff --git a/files/de/web/html/canvas/index.html b/files/de/web/html/canvas/index.html deleted file mode 100644 index 50e6da1aae..0000000000 --- a/files/de/web/html/canvas/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: Canvas -slug: Web/HTML/Canvas -tags: - - API - - Canvas - - HTML5 -translation_of: Web/API/Canvas_API ---- -
{{CanvasSidebar}}
- -

Mit der Einführung von HTML5 wurde ein neues "Leinwand" Element zum Zeichnen von Grafiken mittels JavaScript-API vorgestellt: {{HTMLElement("canvas")}}. Die Anwendungsgebiete sind äußerst flexibel, so ist es möglich, mit Canvas Diagramme zu zeichnen, Bilder zu bearbeiten, Animationen zu erstellen oder sogar Videos zu bearbeiten und zu rendern.

- -

Der Support für <canvas> in Mozilla-Anwendungen wurde ab Gecko 1.8 (sprich ab Firefox 1.5) implementiert. Canvas stammt ursprünglich von Apple und wurde für das OS X Dashboard und den Safari-browser entwickelt. Der Internet Explorer unterstützt Canvas ab Version 9, wobei es durch ein Skript von Google's Explorer Canvas Projekt auch in früheren Versionen des IE lauffähig ist. Google Chrome und Opera ab Version 9 unterstützen <canvas> ebenfalls problemlos.

- -

Das <canvas> Element wird zudem von WebGL für die hardwarebeschleunigte Darstellung von 3D-Grafiken auf Webseiten eingesetzt.

- -

Beispiel

- -

Dies ist ein einfacher Code-Ausschnitt mit der {{domxref("CanvasRenderingContext2D.fillRect()")}} Methode.

- -

HTML

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

JavaScript

- -
var canvas = document.getElementById("canvas");
-var ctx = canvas.getContext("2d");
-
-ctx.fillStyle = "green";
-ctx.fillRect(10, 10, 100, 100);
-
- -

Bearbeite den untenstehenden Code und sieh live Updates im Canvas: (Funktion kaputt auf Deutsch, die Englische Seite funktioniert, bitte oben umschalten auf Englisch )

- -

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

- -

Referenzen

- -
-
    -
  • {{domxref("HTMLCanvasElement")}}
    • -
  • {{domxref("CanvasRenderingContext2D")}}
    • -
  • {{domxref("CanvasGradient")}}
    • -
  • {{domxref("CanvasPattern")}}
    • -
  • {{domxref("ImageBitmap")}}
    • -
  • {{domxref("ImageData")}}
    • -
  • {{domxref("TextMetrics")}}
    • -
  • {{domxref("Path2D")}} {{experimental_inline}}
    • -
-
- -

Die Schnittstellen, die sich auf WebGLRenderingContext beziehen, werden unter WebGL zusammengefasst.

- -

Leitfäden und Anleitungen

- -
-
Canvas Tutorial
-
Eine ausführliche Anleitung, die sowohl grundlegende Nutzung als auch fortgeschrittene Funktionen umfasst
-
Code-Ausschnitte: Canvas
-
Einige Entwickler-orientierte Code-Ausschnitte, die <canvas> enthalten.
-
Demo: A basic ray-caster
-
A demo of ray-tracing animation using canvas.
-
DOM-Objekte in ein canvas zeichnen
-
Wie man DOM Inhalt, wie zum Beispiel HTML-Elemente, in ein canvas zeichnet.
-
Videos mit canvas manipulieren
-
{{HTMLElement("video")}} und {{HTMLElement("canvas")}} kombinieren, um Videos in Echtzeit zu manipulieren.
-
- -

Quellen

- -

Allgemeines

- - - -

Libraries

- -
    -
  • Fabric.js is an open-source canvas library with SVG parsing capabilities.
    • -
  • Kinetic.js is an open-source canvas library focused on interactivity for desktop and mobile applications.
    • -
  • Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas.
    • -
  • libCanvas is powerful and lightweight canvas framework.
    • -
  • Processing.js is a port of the Processing visualization language.
    • -
  • PlayCanvas is an open source game engine.
    • -
  • Pixi.js is an open source game engine.
    • -
  • PlotKit is a charting and graphing library.
    • -
  • Rekapi is an animation key-framing API for Canvas.
    • -
  • PhiloGL is a WebGL framework for data visualization, creative coding and game development.
    • -
  • JavaScript InfoVis Toolkit creates interactive 2D Canvas data visualizations for the Web.
    • -
- -

Spezifikationen

- - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', "the-canvas-element.html", "Canvas")}}{{Spec2('HTML WHATWG')}} 
- -

Siehe auch

- - diff --git a/files/de/web/html/element/h1-h6/index.html b/files/de/web/html/element/h1-h6/index.html deleted file mode 100644 index 1c8aa07e0f..0000000000 --- a/files/de/web/html/element/h1-h6/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: h1-h6 -slug: Web/HTML/Element/h1-h6 -tags: - - HTML - - HTML Elemente - - HTML Referenz -translation_of: Web/HTML/Element/Heading_Elements ---- -

Übersicht

- -

Die Überschriftenelemente bestehen aus sechs verschiedenen Leveln. <h1> ist die Überschrift mit der höchsten Gewichtung und <h6> mit der kleinsten. Ein Überschriften-Element beschreibt das Thema des Bereiches, welcher der Überschrift folgt. Überschriften können auch verwendet werden, um ein Inhaltsverzeichnis für ein Dokument automatisch zu erstellen.

- - - -

Beispiel

- -

Alle Überschriften

- -
  <h1>Überschrift Level 1</h1>
-  <h2>Überschrift Level 2</h2>
-  <h3>Überschrift Level 3</h3>
-  <h4>Überschrift Level 4</h4>
-  <h5>Überschrift Level 5</h5>
-  <h6>Überschrift Level 6</h6>
-
- -

Dieses HTML gibt das Folgende aus:

- -

Image:HTML-headers2.png

- -

Beispielseite

- -
  <h1>Heading elements</h1>
-
-    <h2>Summary</h2>
-    <p>Some text here...</p>
-
-    <h2>Examples</h2>
-      <h3>Example 1</h3>
-      <p>Some text here...</p>
-
-      <h3>Example 2</h3>
-      <p>Some text here...</p>
-
-    <h2>See also</h2>
-    <p>Some text here...</p>
-
- -

Dieses HTML gibt das Folgende aus:

- -

Image:HTML-headers1.png

- -

Hinweise

- -

Es sollte kein tieferes Überschriftenlevel verwendet werden, um die Schriftgröße zu vermindern. Stattdessen sollte die Größe über die CSS font-size Eigenschaft festgelegt werden.

- -

Es sollte vermieden werden Überschriftenlevel zu überspringen. Es sollte immer von <h1> ausgegangen werden, danach <h2> und so weiter. Außerdem sollte versucht werden nur eine Überschrift des ersten Levels in einem Dokument zu benutzen.

- -

Die Gruppierung von Überschriften und Inhalte kann über <div> Element realisiert werden.

- -

Siehe auch

- - - -

{{HTMLRef}}

diff --git a/files/de/web/html/element/head/index.html b/files/de/web/html/element/head/index.html deleted file mode 100644 index 1c71988bda..0000000000 --- a/files/de/web/html/element/head/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: head -slug: Web/HTML/Element/head -tags: - - HTML - - HTML Elemente - - HTML Referenz -translation_of: Web/API/HTMLHeadElement ---- -

Das <head> HTML Element legt den Kopf eines Dokuments fest. In diesem werden Informationen für das Dokument angegeben, darunter der Dokumententitel und Meta-Daten.

- -

Beispiel

- -
<html>
-  <head>
-    <title>Seitentitel</title>
-  </head>
-</html>
-
- -

Spezifikationen

- - - -

{{HTMLRef}}

diff --git a/files/de/web/html/element/heading_elements/index.html b/files/de/web/html/element/heading_elements/index.html new file mode 100644 index 0000000000..1c8aa07e0f --- /dev/null +++ b/files/de/web/html/element/heading_elements/index.html @@ -0,0 +1,72 @@ +--- +title: h1-h6 +slug: Web/HTML/Element/h1-h6 +tags: + - HTML + - HTML Elemente + - HTML Referenz +translation_of: Web/HTML/Element/Heading_Elements +--- +

Übersicht

+ +

Die Überschriftenelemente bestehen aus sechs verschiedenen Leveln. <h1> ist die Überschrift mit der höchsten Gewichtung und <h6> mit der kleinsten. Ein Überschriften-Element beschreibt das Thema des Bereiches, welcher der Überschrift folgt. Überschriften können auch verwendet werden, um ein Inhaltsverzeichnis für ein Dokument automatisch zu erstellen.

+ + + +

Beispiel

+ +

Alle Überschriften

+ +
  <h1>Überschrift Level 1</h1>
+  <h2>Überschrift Level 2</h2>
+  <h3>Überschrift Level 3</h3>
+  <h4>Überschrift Level 4</h4>
+  <h5>Überschrift Level 5</h5>
+  <h6>Überschrift Level 6</h6>
+
+ +

Dieses HTML gibt das Folgende aus:

+ +

Image:HTML-headers2.png

+ +

Beispielseite

+ +
  <h1>Heading elements</h1>
+
+    <h2>Summary</h2>
+    <p>Some text here...</p>
+
+    <h2>Examples</h2>
+      <h3>Example 1</h3>
+      <p>Some text here...</p>
+
+      <h3>Example 2</h3>
+      <p>Some text here...</p>
+
+    <h2>See also</h2>
+    <p>Some text here...</p>
+
+ +

Dieses HTML gibt das Folgende aus:

+ +

Image:HTML-headers1.png

+ +

Hinweise

+ +

Es sollte kein tieferes Überschriftenlevel verwendet werden, um die Schriftgröße zu vermindern. Stattdessen sollte die Größe über die CSS font-size Eigenschaft festgelegt werden.

+ +

Es sollte vermieden werden Überschriftenlevel zu überspringen. Es sollte immer von <h1> ausgegangen werden, danach <h2> und so weiter. Außerdem sollte versucht werden nur eine Überschrift des ersten Levels in einem Dokument zu benutzen.

+ +

Die Gruppierung von Überschriften und Inhalte kann über <div> Element realisiert werden.

+ +

Siehe auch

+ + + +

{{HTMLRef}}

diff --git a/files/de/web/html/global_attributes/accesskey/index.html b/files/de/web/html/global_attributes/accesskey/index.html new file mode 100644 index 0000000000..2fff85d11a --- /dev/null +++ b/files/de/web/html/global_attributes/accesskey/index.html @@ -0,0 +1,116 @@ +--- +title: accesskey +slug: Web/HTML/Globale_Attribute/accesskey +tags: + - Globale Attribute + - HTML + - Referenz +translation_of: Web/HTML/Global_attributes/accesskey +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

Das globale Attribut accesskey definiert ein Tastaturkürzel für das aktuelle Element. Der Attributwert muss aus einem einzelnen, druckbarem Zeichen bestehen (dies beinhaltet Zeichen mit Umlauten und andere Zeichen, die über die Tastatur eingegeben werden können).

+ +
+

Hinweis: Die WHATWG-Spezifikation besagt, dass mehrere mit Leerzeichen voneinander getrennte Zeichen angegeben werden können und der Browser davon das erste unterstützte verwenden wird. Das funktioniert jedoch in den meisten Browsern nicht. In Internet Explorer und Edge wird das erste unterstützte Zeichen jedoch ohne Probleme verwendet, sofern es keine Konflikte mit anderen Befehlen gibt.

+
+ +

Je nach Browser und Betriebssystem unterscheidet sich die Tastaturkombination zur Ansteuerung des accesskey.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 WindowsLinuxMac
FirefoxAlt + Shift + keyFirefox 57+: Control +  Option + key -ODER- Control + Alt + key
+ Firefox 14–56: Control + Alt + key
+ Firefox < 14, Control + key
Internet ExplorerAlt + keyN/V
Google ChromeAlt + keyControl + Alt + key
SafariAlt + keyN/VControl + Alt + key
Opera 15+Alt + keyControl + Alt + key
Opera 12 +

Shift + Esc öffnet zunächst eine Liste der Inhalte, die über accesskey erreichbar sind und erlaubt eine Ansteuerung über  key

+
+ +

Beachte, dass die Tastaturkombination in Firefox über die Einstellungen angepasst werden kann.

+ +

Spezifikation

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML5.2', "editing.html#the-accesskey-attribute", "accesskey")}}{{Spec2('HTML5.2')}}Beschreibt ein realistischeres Verhalten der tatsächlichen Implementierungen.
{{SpecName('HTML WHATWG', "interaction.html#the-accesskey-attribute", "accesskey")}}{{Spec2('HTML WHATWG')}}Keine Änderung gegenüber {{SpecName('HTML5.1')}}.
{{SpecName('HTML5.1', "editing.html#the-accesskey-attribute", "accesskey")}}{{Spec2('HTML5.1')}}Keine Änderung gegenüber {{SpecName('HTML5 W3C')}}.
{{SpecName('HTML5 W3C', "editing.html#the-accesskey-attribute", "accesskey")}}{{Spec2('HTML5 W3C')}}Ab {{SpecName('HTML4.01')}} können mehrere Zeichen als  accesskey gesetzt werden. Zudem kann ein accesskey an jedem Element gesetzt werden.
{{SpecName('HTML4.01', "interact/forms.html#h-17.11.2", "accesskey")}}{{Spec2('HTML4.01')}}Nur unterstützt an {{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("label") }}, {{ HTMLElement("legend") }} und {{ HTMLElement("textarea") }}
+ +

Browserkompatibilität

+ + + +

{{Compat("html.global_attributes.accesskey")}}

+ +

Siehe auch

+ +
    +
  • {{domxref("Element.accessKey")}}
    • +
  • {{domxref("HTMLElement.accessKeyLabel")}}
    • +
  • Globale Attribute.
    • +
diff --git a/files/de/web/html/global_attributes/autocapitalize/index.html b/files/de/web/html/global_attributes/autocapitalize/index.html new file mode 100644 index 0000000000..33eb99d131 --- /dev/null +++ b/files/de/web/html/global_attributes/autocapitalize/index.html @@ -0,0 +1,46 @@ +--- +title: autocapitalize +slug: Web/HTML/Globale_Attribute/autocapitalize +tags: + - Automatische Großschreibung + - Globales Attribut + - HTML +translation_of: Web/HTML/Global_attributes/autocapitalize +--- +

{{HTMLSidebar("Global_attributes")}}

+ +

Das Globale Attribut autocapitalize ist ein Aufzählungsattribut, welches kontrolliert ob und wie Text-Input automatisch großgeschrieben wird, während der Nutzer etwas einfügt oder editiert. Das Attribut muss einen der folgenden Werte annehmen:

+ +
    +
  • off oder none: Es wird keine automatische Großschreibung benutzt (alle Buchstaben sind automatisch kleingeschrieben) 
    • +
  • on oder sentences: Der erste Buchstabe jedes Satzes wird zu einem großgeschriebenen Buchstaben transformiert. Die restlichen Buchstaben werden kleingeschrieben.
    • +
  • words: Der erste Buchstabe jedes Wortes wird zu einem großgeschriebenen Buchstaben transformiert. Die restlichen Buchstaben werden kleingeschrieben.
    • +
  • characters: Alle Buchstaben sind automatisch großgeschrieben. 
    • +
+ +

Das autocapitalize Attribut hat keine Auswirkungen auf das Verhalten eines physikalischen Keyboards beim Tippen. Aber es hat Auswirkungen auf das Verhalten von anderen Input Mechanismen, wie virtuellen Keyboards auf Mobilfunkgeräten oder Sprachinput. Diese Mechanismen helfen Nutzern oft dabei, den ersten Buchstaben eines Satzes automatisch großzuschreiben. Das autocapitalize Attribut ermöglicht es Autoren dieses Verhalten auf einer per-Element Basis nicht zu berücksichtigen.

+ +

Das autocapitalize Attribut führt nie zu automatischer Großschreibung bei einem {{HTMLElement("input")}} Element mit einem {{htmlattrxref("type", "input")}} Attribut, dessen Wert url, email, oder password ist.

+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "interaction.html#autocapitalization", "autocapitalize")}}{{Spec2('HTML WHATWG')}} 
+ +

Browser Kompatibilität

+ + + +

{{Compat("html.global_attributes.autocapitalize")}}

diff --git a/files/de/web/html/global_attributes/class/index.html b/files/de/web/html/global_attributes/class/index.html new file mode 100644 index 0000000000..cf2366a55f --- /dev/null +++ b/files/de/web/html/global_attributes/class/index.html @@ -0,0 +1,109 @@ +--- +title: class +slug: Web/HTML/Globale_Attribute/class +tags: + - Klassen Globale Attribute +translation_of: Web/HTML/Global_attributes/class +--- +

{{HTMLSidebar("Global_attributes")}}

+ +

Das Globale Attribut class ist eine durch Leerzeichen separierte Liste von Klassen dieses Elements. Klassen erlauben es CSS und Javascript auf spezifische Elemente über Klassenselektoren oder DOM-Methoden {{domxref("document.getElementsByClassName")}} zuzugreifen.

+ +

Obwohl die Spezifikation keine Anforderung an die Benennung von Klassen stellt, sollten Webentwickler darauf achten, dass der semantische Zweck des Elements beschrieben wird, und gerade nicht die Darstellungseigenschaften.

+ +

Beispiel:
+ Attribut hervorgehoben , um einen hervorgehobenen Textteil zu beschreiben aber nicht als  italics.

+ +

"Semantische" Namen bleiben logisch (zutreffend), auch wenn sich die Darstellung der Webseite ändert (wenn also z.B. Hervorhebungen anstatt kursiv nun farbig in braun dargestellt werden).

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusBemerkung
{{SpecName('HTML WHATWG', "elements.html#classes", "class")}}{{Spec2('HTML WHATWG')}}Keine Änderungen zum letzten Snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "elements.html#classes", "class")}}{{Spec2('HTML5.1')}}Snapshot von {{SpecName('HTML WHATWG')}}, keine Änderung zu {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "elements.html#classes", "class")}}{{Spec2('HTML5 W3C')}}Snapshot von  {{SpecName('HTML WHATWG')}}. Von {{SpecName('HTML4.01')}}, class ist jetzt ein echtes Globales Attribut.
{{SpecName('HTML4.01', "struct/global.html#h-7.5.2", "class")}}{{Spec2('HTML4.01')}}Unterstützt alle Elemente außer {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.
+ +

Browser Kompatibilität

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }} [1]{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }} [1]{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

[1] class ist ein echtes Globales Attribut erst seit Firefox 32.

+ + + + diff --git a/files/de/web/html/global_attributes/contenteditable/index.html b/files/de/web/html/global_attributes/contenteditable/index.html new file mode 100644 index 0000000000..916eaf2073 --- /dev/null +++ b/files/de/web/html/global_attributes/contenteditable/index.html @@ -0,0 +1,114 @@ +--- +title: contenteditable +slug: Web/HTML/Globale_Attribute/contenteditable +tags: + - Globale Attribute + - HTML + - Referenz + - Textbearbeitung + - Texteingabe + - contenteditable +translation_of: Web/HTML/Global_attributes/contenteditable +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

Das globale Attribut contenteditable ist ein Aufzählungsattribut, das angibt, ob das Element für den Benutzer bearbeitbar sein soll. Das Attribut muss eines der folgenden Werte annehmen:

+ +
    +
  • true oder eine leere Zeichenkette geben an, dass das Element editierbar sein soll;
    • +
  • false gibt an, dass das Element nicht editierbar sein darf..
    • +
+ +

Wenn das Attribut nicht gesetzt ist, wird der Standardwert vom Elternelement geerbt.

+ +

Das Attribut ist ein Aufzählungs- und kein Boolean-Attribut. Das bedeutet, dass eines der Werte true, false oder die leere Zeichenkette erforderlich sind und eine abgekürzte Schreibweise wie <label contenteditable>Example Label</label> nicht erlaubt ist. Die richtige Verwendung ist <label contenteditable="true">Example Label</label>.

+ +

Die Farbe der {{Glossary("caret", "Texteinfügemarke")}} kann mit der CSS-Eigenschaft {{cssxref("caret-color")}} gesetzt werden.

+ +

Spezifikation

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', "editing.html#attr-contenteditable", "contenteditable")}}{{Spec2('HTML WHATWG')}}Keine Änderung seit letztem Snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "editing.html#attr-contenteditable", "contenteditable")}}{{Spec2('HTML5.1')}}Snapshot von {{SpecName('HTML WHATWG')}}, keine Änderung seit {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "editing.html#attr-contenteditable", "contenteditable")}}{{Spec2('HTML5 W3C')}}Snapshot von {{SpecName('HTML WHATWG')}}, ursprüngliche  Definition.
+ +

Browserkompatibilität

+ +

{{ CompatibilityTable }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown }}{{ CompatGeckoDesktop("1.9") }}{{ CompatVersionUnknown }}{{ CompatVersionUnknown }}{{ CompatVersionUnknown }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown }}{{ CompatVersionUnknown }}{{ CompatGeckoMobile("1.9") }}{{ CompatVersionUnknown }}{{ CompatVersionUnknown }}{{ CompatVersionUnknown }}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/html/global_attributes/contextmenu/index.html b/files/de/web/html/global_attributes/contextmenu/index.html new file mode 100644 index 0000000000..33c1cc2e99 --- /dev/null +++ b/files/de/web/html/global_attributes/contextmenu/index.html @@ -0,0 +1,169 @@ +--- +title: Kontextmenü +slug: Web/HTML/Globale_Attribute/kontextmenu +tags: + - Globale Attribute + - HTML + - Kontextmenü + - Referenz +translation_of: Web/HTML/Global_attributes/contextmenu +--- +
{{HTMLSidebar("Global_attributes")}}
+ +
+

Das contextmenu Attrbut ist obsolet und die Unterstützung wird aus allen Browsern entfernt werden.

+
+ +

Das globale Attribut contextmenu ist die id von einem {{HTMLElement("menu")}}, welches als Kontextmenü benutzt werden soll.

+ +

Ein Kontextmenü ist ein Menü, dass nach einer Interaktion des Benutzers erscheint. HTML5 erlaubt nun, dieses Menü anzupassen. Hier sind ein paar Beispiele, inklusive verschachtelter Menüs.

+ +

Beispiel

+ +

HTML

+ +
<body contextmenu="share">
+  <menu type="context" id="share">
+    <menu label="share">
+      <menuitem label="Twitter" onclick="shareViaTwitter()"></menuitem>
+      <menuitem label="Facebook" onclick="shareViaFacebook()"></menuitem>
+    </menu>
+  </menu>
+  <ol>
+    <li>
+      Überall in diesem Beispiel kannst du die Seite über das Kontextmenü auf Twitter und Facebook teilen.
+    </li>
+    <li contextmenu="changeFont" id="fontSizing">
+      In diesem besonderen Listen-Element kannst du die Schriftgröße eines
+      Textes über das Kontextmenü vergrößern und verkleinern.
+    </li>
+    <menu type="context" id="changeFont">
+      <menuitem label="Schrift vergrößern" onclick="incFont()"></menuitem>
+      <menuitem label="Schrift verkleinern" onclick="decFont()"></menuitem>
+    </menu>
+    <li contextmenu="ChangeImage" id="changeImage">
+      Auf dem unteren Bild kannst du die Option
+      "Wechsele Bild" im Kontextmenü auswählen.<br />
+      <img src="https://developer.mozilla.org/media/img/promote/promobutton_mdn5.png"
+          contextmenu="ChangeImage" id="promoButton" />
+      <menu type="context" id="ChangeImage">
+        <menuitem label="Wechsele Bild" onclick="changeImage()"></menuitem>
+      </menu>
+    </li>
+  </ol>
+</body>
+
+ +

JavaScript

+ +
function shareViaTwitter() {
+  window.open("https://twitter.com/intent/tweet?text=" +
+      "Hurray! I am learning ContextMenu from MDN via Mozilla");
+}
+
+function shareViaFacebook() {
+  window.open("https://facebook.com/sharer/sharer.php?u=" +
+      "https://developer.mozilla.org/en/HTML/Element/Using_HTML_context_menus");
+}
+
+function incFont() {
+  document.getElementById("fontSizing").style.fontSize = "larger";
+}
+
+function decFont() {
+  document.getElementById("fontSizing").style.fontSize = "smaller";
+}
+
+function changeImage() {
+  var index = Math.ceil(Math.random() * 39 + 1);
+  document.images[0].src =
+      "https://developer.mozilla.org/media/img/promote/promobutton_mdn" +
+      index + ".png";
+}
+ +

Ergebnis

+ +

{{EmbedLiveSample("Beispiel", "100%", 400)}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "forms.html#attr-contextmenu", "contextmenu")}}{{Spec2('HTML WHATWG')}}Keine Änderungen seit dem letzten Snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "interactive-elements.html#context-menus", "contextmenu")}}{{Spec2('HTML5.1')}}Snapshot von {{SpecName('HTML WHATWG')}}, initiale Definition.
+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatNo}}[1]{{CompatGeckoDesktop(9)}}{{CompatNo}}{{CompatNo}}[1]{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatNo}}{{CompatGeckoDesktop(20)}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}
+
+ +

[1] Eine experimentelle Implementation war zwischenzeitlich mit der Kommandozeilen-Option --enable-blink-features=ContextMenu verfügbar. Bis Chrome 52 und Opera 39 war diese außerdem durch Aktivieren der Option Experimental Web Platform verfügbar, welche aber aufgrund eines Kompatibilitätsproblems entfernt wurde. Dies ist dokumentiert in Chromium bug 87553.

+ +

Siehe auch

+ + diff --git a/files/de/web/html/global_attributes/dir/index.html b/files/de/web/html/global_attributes/dir/index.html new file mode 100644 index 0000000000..28ed6389ac --- /dev/null +++ b/files/de/web/html/global_attributes/dir/index.html @@ -0,0 +1,85 @@ +--- +title: dir +slug: Web/HTML/Globale_Attribute/dir +tags: + - Globales Attribut + - HTML + - Referenz + - Textrichtung +translation_of: Web/HTML/Global_attributes/dir +--- +

{{HTMLSidebar("Global_attributes")}}

+ +

Das globale Attribut dir ist ein Attribut, das die Richtung des Elementtextes angibt. Es kann folgende Werte haben:

+ +
    +
  • ltr, von links nach rechts (englisch: left to right). Wird für Sprachen, die von links nach rechts geschrieben werden (z.B. deutsch) verwendet;
    • +
  • rtl, von rechts nach links (englisch: right to left). Wird für Sprachen, die von rechts nach links geschrieben werden (z.B. arabisch) verwendet;
    • +
  • auto, lässt den Browser des Nutzers entscheiden. Es benutzt einen simplen Algorithmus, indem es die Zeichen im Element einliest, bis es ein Zeichen mit einer bekannten Richtung findet und dann diese Richtung auf das gesamte Element anwendet.
    • +
+ +
+

Nutzungsinformationen

+ +

Dieses Attribut ist verpflichtend für das {{ HTMLElement("bdo") }}-Element, bei dem es eine andere Bedeutung hat.

+ +
    +
  • +

    Dieses Attribut wird nicht vom {{ HTMLElement("bdi") }}-Element geerbt. Sein Standardwert ist  auto.

    +
    • +
  • +

    Dieses Attribut kann von den CSS-Eigenschaften {{ cssxref("direction") }} and {{ cssxref("unicode-bidi") }} überschrieben werden, sofern eine CSS-Seite eingebunden ist und das Element diese Eigenschaften unterstützt.

    +
    • +
  • +

    Da die Richtung eines Textes sprachlich zu seinem Inhalt und nicht zu seiner Darstellung gehört, ist es zu empfehlen, dass Web-Entwickler - sofern möglich - dieses Attribut anstatt der zugehörigen CSS-Eigenschaft zu verwenden. So kann der Text auch in einem Browser, der die CSS-Eigenschaften nicht unterstützt oder in dem CSS deaktiviert ist, korrekt dargestellt werden.

    +
    • +
  • +

    Der auto Wert sollte für Daten mit einer unbekannten Richtung verwendet werden, wie zum Beispiel Daten aus Benutzereingaben, möglicherweise in einer Datenbank gespeichert.

    +
    • +
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "dom.html#the-dir-attribute", "dir")}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5.1', "dom.html#the-dir-attribute", "dir")}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C', "dom.html#the-dir-attribute", "dir")}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', "dirlang.html#h-8.2", "dir")}}{{Spec2('HTML4.01')}} 
+ +

Browser-Kompatibilität

+ + + +

{{Compat("html.global_attributes.dir")}}

+ +

Siehe auch

+ +
    +
  • Alle globalen Attribute.
    • +
  • {{domxref("HTMLElement.dir")}}, das auf dieses Attribut zurückgreift
    • +
diff --git a/files/de/web/html/global_attributes/draggable/index.html b/files/de/web/html/global_attributes/draggable/index.html new file mode 100644 index 0000000000..3a0dfd105e --- /dev/null +++ b/files/de/web/html/global_attributes/draggable/index.html @@ -0,0 +1,104 @@ +--- +title: draggable +slug: Web/HTML/Globale_Attribute/draggable +tags: + - Experimental + - Global attributes + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/draggable +--- +

{{HTMLSidebar("Global_attributes")}} {{SeeCompatTable}}

+ +

Das globale Attribut draggable ist ein Attribut, dass zeigt, ob das entsprechende Element auf einen anderen Ort gezogen werden kann. Es unterstützt die {{domxref("HTML_Drag_and_Drop_API","HTML Drag and Drop API")}}. Folgende Werte sind erlaubt:

+ +
    +
  • true, das Element kann gedraggt werden
    • +
  • false, das Element kann nicht gedraggt werden
    • +
+ +

Wurde das Attribut nicht gesetzt, wird als Wert auto angenommen. Das Drag-Verhalten des Elements wird dann durch den Browser bestimmt. 

+ +

Bei diesem Attribut handelt es sich nicht um einen booleschen Wert, true oder false muss explizit angegeben werden. Eine Kurzform wie beispielsweise <label draggable>Beispiel Label</label> ist nicht zulässig. Die korrekte Verwendung ist <label draggable="true">Beispiel Label</label>.

+ +

Nativ kann das Attribut draggable nur für Textauswahl, Bilder und Links verwendet werden. Bei allen anderen Elementen muss das {{domxref('GlobalEventHandlers.ondragstart','ondragstart')}}-Event gesetzt werden, um Drag & Drop Mechanismen verwendet zu können. Dieses Beispiel (englisch) enthält eine ausführlichere Beschreibung der Drag & Drop API und deren Verwendung. 

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', "interaction.html#the-draggable-attribute", "draggable")}}{{Spec2('HTML WHATWG')}}Keine Änderung seit dem letztem Snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "editing.html#the-draggable-attribute", "draggable")}}{{Spec2('HTML5.1')}}Snapshot von {{SpecName('HTML WHATWG')}}, initiale Definition
+ +

Browserkompatibilität

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
EigenschaftChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Funktionalität{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("1.8.1") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
EigenschaftAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Funktionalität{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatGeckoMobile("1.8.1") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/html/global_attributes/hidden/index.html b/files/de/web/html/global_attributes/hidden/index.html new file mode 100644 index 0000000000..f78b025ca1 --- /dev/null +++ b/files/de/web/html/global_attributes/hidden/index.html @@ -0,0 +1,56 @@ +--- +title: hidden +slug: Web/HTML/Globale_Attribute/hidden +tags: + - Attribut + - Globales Attribut + - HTML + - Reference + - Referenz +translation_of: Web/HTML/Global_attributes/hidden +--- +

{{HTMLSidebar("Global_attributes")}}

+ +

Das globale Attribut hidden ist ein boolesches Attribut welches angibt, dass das Element nicht oder nicht länger relevant ist. Zum Beispiel, kann es benutzt werden, um Elemente einer Seite zu verstecken, die nicht benötigt werden, wenn ein Anmeldeprozess erfolgreich durchgeführt wurde. Der Browser wird solche Elemente nicht anzeigen.

+ +

Dieses Attribut soll nicht benutzt werden, um Inhalt zu verstecken, der rechtmäßig angzeigt werden könnte. Zum Beispiel sollte es nicht benutzt werden, um Seiten eines Tabelleninterface zu verstecken. Dies ist eine Gestaltungsfrage.

+ +

Versteckte Elemente sollten nicht mit sichtbaren Elementen verlinkt sein. Elemente, die von versteckten Elementen abstammen, sind trotzdem aktiv, was bedeutet, dass Skript-Elemente immer noch ausgeführt und Form-Elemente gesendet werden können.

+ +
+

Bemerkung: Das Abändern des Wertes der CSS {{cssxref("display")}} Eigenschaft eines Elementes mit dem hidden Attribut überschreibt das Verhalten. Also wird ein Element mit Style display: flex angezeigt, egal ob das hidden Attribut gesetzt ist oder nicht.

+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + +
SpezifikationStatusBemerkung
{{SpecName('HTML WHATWG', "interaction.html#the-hidden-attribute", "hidden")}}{{Spec2('HTML WHATWG')}}Keine Änderung seit letztem Snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "hidden")}}{{Spec2('HTML5.1')}}Snapshot von {{SpecName('HTML WHATWG')}}, initiale Definition
+ +

Browserkompatibilität

+ + + +

{{Compat("html.global_attributes.hidden")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/html/global_attributes/id/index.html b/files/de/web/html/global_attributes/id/index.html new file mode 100644 index 0000000000..6e1ef85aad --- /dev/null +++ b/files/de/web/html/global_attributes/id/index.html @@ -0,0 +1,109 @@ +--- +title: id +slug: Web/HTML/Globale_Attribute/id +translation_of: Web/HTML/Global_attributes/id +--- +

{{HTMLSidebar("Global_attributes")}}

+ +

Das id globale Attribut definiert einen eindeutigen Bezeichner (ID) welcher eindeutig im gesamten Dokument sein muss. Das Ziel ist die Identifizierung eines Elementes in Verknüpfungen (durch einen Fragmentbezeichner), Skripting, oder Stylisierung (mit CSS).

+ +

Der Wert des Attributes ist eine undurchsichtige Zeichenkette: dies bedeutet, dass der Webautor es nicht benutzen darf um Informationen abzuleiten. Bestimmte Bedeutung, zum Beispiel bedeutungsspezifische Eigenschaften, dürfen nicht von der Zeichenkette abgeleitet sein.

+ +

Der Attributwert darf keine Leerzeichen enthalten. Browsers treat non-conforming IDs that contains white spaces as if the white space is part of the ID. In contrast to the class attribute, which allows space-separated values, elements can only have one single ID defined through the id attribute. Note that an element may have several IDs, but the others should be set by another means, such as via a script interfacing with the DOM interface of the element.

+ +
+

Note: Using characters except ASCII letters and digits, '_', '-' and '.' may cause compatibility problems, as they weren't allowed in HTML 4. Though this restriction has been lifted in HTML 5, an ID should start with a letter for compatibility.

+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "dom.html#the-id-attribute", "id")}}{{Spec2('HTML WHATWG')}}No change from latest snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#the-id-attribute", "id")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#the-id-attribute", "id")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName('HTML WHATWG')}}, now accept '_', '-' and '.' if not at the beginning fo the id. It is also a true global attribute.
{{SpecName('HTML4.01', 'struct/global.html#adef-id', 'id')}}{{Spec2('HTML4.01')}}Supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown }}[1]{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown }}[1]{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

[1] class is a true global attribute only since Firefox 32.

+ +

See also

+ +
    +
  • All global attributes.
    • +
  • {{domxref("Element.id")}} that reflects this attribute.
    • +
diff --git a/files/de/web/html/global_attributes/index.html b/files/de/web/html/global_attributes/index.html new file mode 100644 index 0000000000..59b8f1d2aa --- /dev/null +++ b/files/de/web/html/global_attributes/index.html @@ -0,0 +1,205 @@ +--- +title: Globale Attribute +slug: Web/HTML/Globale_Attribute +tags: + - Attribute + - HTML + - Reference + - Web +translation_of: Web/HTML/Global_attributes +--- +

{{HTMLSidebar("Global_attributes")}}

+ +

Globale Attribute sind Attribute die alle HTML Elemente gemeinsam haben; Sie können auf alle Elemente angewendet werden, auch wenn Sie auf einige Elemente keinen Effekt haben.

+ +

Globale Attribute können für alle HTML Elemente festgelegt werden, auch für jene die nicht im Standard verankert sind. Das bedeutet, dass auch nicht standardgemäße Elemente diese Attribute erlauben müssen, auch wenn dadurch das Dokument nicht mehr HTML5-konform ist. Zum Beispiel verstecken HTML5-konforme Browser Inhalte wie <foo hidden>...</foo>, obwohl <foo> kein gültiges HTML Element ist.

+ +

Zusätzlich zu den grundlegenden globalen HTML Attributen, gibt es noch die folgenden globalen Attribute:

+ +
    +
  • {{HTMLAttrDef("xml:lang")}} und {{HTMLAttrDef("xml:base")}} — Diese sind von der XHTML-Spezifikation abgeleitet und veraltet und gibt es nur noch aus Kompatibilitätsgründen.
    • +
  • Mehrere aria-* Attribute, benutzt für bessere Barrierefreiheit.
    • +
  • Die Event Handler Attribute: onabort, onautocomplete, onautocompleteerror, onblur, oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncontextmenu, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onsort, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting.
    • +
+ +

Liste globaler Attribute

+ +
+
{{HTMLAttrDef("accesskey")}}
+
Bietet einen Hinweis zum Generieren eines Tastenkürzels für das aktuelle Element. Dieses Attribut besteht aus einer durch Leerzeichen getrennten Liste von Zeichen. Der Browser sollte das Erste verwenden, welches auf der Computertastatur vorhanden ist.
+
{{HTMLAttrDef("autocapitalize")}}
+
Steuert, ob und wie Texteingaben automatisch großgeschrieben werden, wenn sie vom Benutzer eingegeben / bearbeitet werden. Es kann folgende Werte annehmen: +
    +
  • off oder none, keine automatische Großschreibung wird angewendet (alle Buchstaben sind kleingeschrieben)
    • +
  • on oder sentences, der erste Buchstabe jedes Satzes ist standardmäßig ein Großbuchstabe; alle weiteren Buchstaben sind standardmäßig kleingeschrieben
    • +
  • words, der erste Buchstabe jedes Wortes ist standardmäßig ein Großbuchstabe; alle weiteren Buchstaben sind standardmäßig kleingeschrieben
    • +
  • characters, alle Buchstaben werden standardmäßig großgeschrieben.
    • +
+
+
{{HTMLAttrDef("class")}}
+
Eine durch Leerzeichen getrennte Liste der Klassen des Elements. Mit Klassen können CSS und JavaScript über die Klassenselektoren bestimmte Elemente, oder Funktionen wie die Methode {{DOMxRef("Document.getElementsByClassName()")}} auswählen und darauf zugreifen.
+
{{HTMLAttrDef("contenteditable")}}
+
+ +

Ein Aufzählungsattribut das angibt, ob das Element für den Benutzer bearbeitbar sein soll. Das Attribut muss einen der folgenden Werte annehmen:

+ +
    +
  • true oder eine leere Zeichenkette geben an,  das Element editierbar sein soll;
    • +
  • false gibt an, dass das Element nicht editierbar sein darf.
    • +
+ +
+
{{HTMLAttrDef("contextmenu")}}
+
Die id von einem {{HTMLElement("menu")}} welches als Kontextmenu für das Element benutzt werden soll.
+
{{HTMLAttrDef("data-*")}}
+
Diese Attributklasse erlaubt es Daten zwischen HTML und DOM auszutauschen und auch mit Skripten darauf zuzugreifen. Diese Daten sind in dem jeweiligen  {{DOMxRef("HTMLElement")}} gespeichert und können über {{DOMxRef("HTMLElement.dataset")}} ausgelesen oder geändert werden.
+
{{HTMLAttrDef("dir")}}
+
Ein Aufzählungsattribut das die Richtung des Elementtextes angibt. Es kann folgende Werte haben: +
    +
  • ltr, von links nach rechts (englisch: left to right). Wird für Sprachen, die von links nach rechts geschrieben werden (z.B. deutsch) verwendet;
    • +
  • rtl, von rechts nach links (englisch: right to left). Wird für Sprachen, die von rechts nach links geschrieben werden (z.B. arabisch) verwendet;
    • +
  • auto, lässt den Browser des Nutzers entscheiden. Es benutzt einen simplen Algorithmus, indem es die Zeichen im Element einliest, bis es ein Zeichen mit einer bekannten Richtung findet und dann diese Richtung auf das gesamte Element anwendet.
    • +
+
+
{{HTMLAttrDef("draggable")}}
+
Ein Aufzählungsattribut das zeigt, ob das entsprechende Element auf einen anderen Ort gezogen werden kann. Es unterstützt die HTML Drag and Drop API. Folgende Werte sind erlaubt: +
    +
  • true, das Element kann gedraggt werden.
    • +
  • false, das Element kann nicht gedraggt werden.
    • +
+
+
{{HTMLAttrDef("dropzone")}} {{Experimental_Inline}}
+
Ein Aufzählungsattribut das anzeigt, welche Arten von Inhalt auf dem Element abgelegt werden können. Es wird die Drag and Drop API verwendet. Es kann folgende Werte annehmen: +
    +
  • copy,  was anzeigt, dass eine Kopie vom abgelegten Element erstellt wird.
    • +
  • move, was anzeigt, dass das abgelegte Element an diese neue Stelle verschoben wird.
    • +
  • link, was einen Link auf das abgelegte Element erzeugt.
    • +
+
+
{{HTMLAttrDef("exportparts")}} {{Experimental_Inline}}
+
Used to transitively export shadow parts from a nested shadow tree into a containing light tree.
+
{{HTMLAttrDef("hidden")}}
+
A Boolean attribute indicates that the element is not yet, or is no longer, relevant. For example, it can be used to hide elements of the page that can't be used until the login process has been completed. The browser won't render such elements. This attribute must not be used to hide content that could legitimately be shown.
+
{{HTMLAttrDef("id")}}
+
Defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).
+
{{HTMLAttrDef("inputmode")}}
+
Provides a hint to browsers as to the type of virtual keyboard configuration to use when editing this element or its contents. Used primarily on {{HTMLElement("input")}} elements, but is usable on any element while in {{HTMLAttrxRef("contenteditable")}} mode.
+
{{HTMLAttrDef("is")}}
+
Allows you to specify that a standard HTML element should behave like a registered custom built-in element (see Using custom elements for more details).
+
+ +
+

Note: The item* attributes are part of the WHATWG HTML Microdata feature.

+
+ +
+
{{HTMLAttrDef("itemid")}}
+
The unique, global identifier of an item.
+
{{HTMLAttrDef("itemprop")}}
+
Used to add properties to an item. Every HTML element may have an itemprop attribute specified, where an itemprop consists of a name and value pair.
+
{{HTMLAttrDef("itemref")}}
+
Properties that are not descendants of an element with the itemscope attribute can be associated with the item using an itemref. It provides a list of element ids (not itemids) with additional properties elsewhere in the document.
+
{{HTMLAttrDef("itemscope")}}
+
itemscope (usually) works along with {{HTMLAttrxRef("itemtype")}} to specify that the HTML contained in a block is about a particular item. itemscope creates the Item and defines the scope of the itemtype associated with it. itemtype is a valid URL of a vocabulary (such as schema.org) that describes the item and its properties context.
+
{{HTMLAttrDef("itemtype")}}
+
Specifies the URL of the vocabulary that will be used to define itemprops (item properties) in the data structure. {{HTMLAttrxRef("itemscope")}} is used to set the scope of where in the data structure the vocabulary set by itemtype will be active.
+
{{HTMLAttrDef("lang")}}
+
Helps define the language of an element: the language that non-editable elements are in, or the language that editable elements should be written in by the user. The attribute contains one “language tag” (made of hyphen-separated “language subtags”) in the format defined in Tags for Identifying Languages (BCP47). xml:lang has priority over it.
+
{{HTMLAttrDef("part")}} {{Experimental_Inline}}
+
A space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the {{CSSxRef("::part()")}} pseudo-element.
+
{{HTMLAttrDef("slot")}}
+
Assigns a slot in a shadow DOM shadow tree to an element: An element with a slotattribute is assigned to the slot created by the {{HTMLElement("slot")}} element whose {{HTMLAttrxRef("name", "slot")}} attribute's value matches that slot attribute's value.
+
{{HTMLAttrDef("spellcheck")}} {{Experimental_Inline}}
+
An enumerated attribute defines whether the element may be checked for spelling errors. It may have the following values: +
    +
  • true, which indicates that the element should be, if possible, checked for spelling errors;
    • +
  • false, which indicates that the element should not be checked for spelling errors.
    • +
+
+
{{HTMLAttrDef("style")}}
+
Contains CSS styling declarations to be applied to the element. Note that it is recommended for styles to be defined in a separate file or files. This attribute and the {{HTMLElement("style")}} element have mainly the purpose of allowing for quick styling, for example for testing purposes.
+
{{HTMLAttrDef("tabindex")}}
+
An integer attribute indicating if the element can take input focus (is focusable), if it should participate to sequential keyboard navigation, and if so, at what position. It can take several values: +
    +
  • a negative value means that the element should be focusable, but should not be reachable via sequential keyboard navigation;
    • +
  • 0 means that the element should be focusable and reachable via sequential keyboard navigation, but its relative order is defined by the platform convention;
    • +
  • a positive value means that the element should be focusable and reachable via sequential keyboard navigation; the order in which the elements are focused is the increasing value of the tabindex. If several elements share the same tabindex, their relative order follows their relative positions in the document.
    • +
+
+
{{HTMLAttrDef("title")}}
+
Contains a text representing advisory information related to the element it belongs to. Such information can typically, but not necessarily, be presented to the user as a tooltip.
+
{{HTMLAttrDef("translate")}} {{Experimental_Inline}}
+
An enumerated attribute that is used to specify whether an element's attribute values and the values of its {{DOMxRef("Text")}} node children are to be translated when the page is localized, or whether to leave them unchanged. It can have the following values: +
    +
  • empty string and "yes", which indicates that the element will be translated.
    • +
  • "no", which indicates that the element will not be translated.
    • +
+
+
+

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "dom.html#global-attributes", "Global attributes")}}{{Spec2("HTML WHATWG")}}
{{SpecName("CSS Shadow Parts", "#exposing")}}{{Spec2("CSS Shadow parts")}}Added the part and exportparts global attributes.
{{SpecName("HTML5.3", "dom.html#global-attributes", "Global attributes")}}{{Spec2("HTML5.3")}}
{{SpecName("HTML5.2", "dom.html#global-attributes", "Global attributes")}}{{Spec2("HTML5.2")}}Snapshot of {{SpecName("HTML WHATWG")}}. From {{SpecName("HTML5.1")}}, itemid, itemprop, itemref, itemscope, and itemtype have been added.
{{SpecName("HTML5.1", "dom.html#global-attributes", "Global attributes")}}{{Spec2("HTML5.1")}}Snapshot of {{SpecName("HTML WHATWG")}}. From {{SpecName("HTML5 W3C")}}, contextmenu, draggable, dropzone, and spellcheck have been added.
{{SpecName("HTML5 W3C", "dom.html#global-attributes", "Global attributes")}}{{Spec2("HTML5 W3C")}}Snapshot of {{SpecName("HTML WHATWG")}}. From {{SpecName("HTML4.01")}}, the concept of global attributes is introduced and the dir, lang, style, id, class, tabindex, accesskey, and title are now true global attributes.
+ xml:lang which was initially part of XHTML, is now also part of HTML.
+ hidden, data-*, contenteditable, and translate have been added.
{{SpecName("HTML4.01")}}{{Spec2("HTML4.01")}}There are no global attributes defined. Several attributes that will become global attributes in subsequent specifications are defined on a subset of elements.
+ class and style are supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.
+ dir is supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.
+ id is supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.
+ lang is supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.
+ tabindex is only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.
+ accesskey is only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}} and {{HTMLElement("textarea")}}.
+ title is supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, and {{HTMLElement("title")}}.
+ +

Browser compatibility

+ +

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

+ +

{{Compat("html.global_attributes")}}

+ +

See also

+ {{DOMxRef("Element")}} and {{DOMxRef("GlobalEventHandlers")}} interfaces that allow to query most global attributes.
+
diff --git a/files/de/web/html/global_attributes/inputmode/index.html b/files/de/web/html/global_attributes/inputmode/index.html new file mode 100644 index 0000000000..d5dd048922 --- /dev/null +++ b/files/de/web/html/global_attributes/inputmode/index.html @@ -0,0 +1,76 @@ +--- +title: inputmode +slug: Web/HTML/Globale_Attribute/inputmode +tags: + - Attribute + - Bearbeiten + - Eingabemodus + - Formulare + - Globale Attribute + - HTML + - Referenz + - Text + - Texteingabe + - Web + - global +translation_of: Web/HTML/Global_attributes/inputmode +--- +

Das inputmode globale Attribut ist ein aufgezähltes Attribut, das einen Hinweis auf die Art der Daten liefert, die der Benutzer während der Bearbeitung des Elements oder seines Inhalts eingeben kann. Es kann die folgenden Werte haben:

+ +
+
"none"
+
Keine virtuelle Tastatur; dies ist nützlich, wenn die Anwendung oder die Website ihre eigene Tastatureingabesteuerung implementiert.
+
"text"
+
Standard-Text-Eingabetastatur für das aktuelle Gebietsschema des Benutzers.
+
"decimal"
+
Fraktionierte numerische Eingabetastatur, die die Ziffern und das entsprechende Trennzeichen für das Gebietsschema des Benutzers enthält (typischerweise entweder "." oder ",").
+
"numeric"
+
Numerische Eingabetastatur; alles, was benötigt wird, sind die Ziffern 0 bis 9.
+
"tel"
+
Eine Telefontastatur-Eingabe, die die Ziffern 0 bis 9, das Sternchen ("*") und die Pfund-Taste ("#") enthält. Für Formulareingaben, die eine Telefontastatur erfordern, sollte stattdessen <input type="tel"> verwendet werden.
+
"search"
+
Eine virtuelle Tastatur, die für die Sucheingabe optimiert ist. So kann beispielsweise die Eingabetaste in "Suchen" umbenannt werden, und es kann weitere Optimierungen geben.
+
"email"
+
Eine virtuelle Tastatur, die für die Eingabe von E-Mail-Adressen optimiert ist; typischerweise beinhaltet dies das Zeichen "@" sowie andere Optimierungen. Für Formulareingaben, die eine Eingabe der E-Mail-Adresse erfordern, sollte stattdessen <input type="email"> verwendet werden.
+
"url"
+
Eine Tastatur, die für die Eingabe von URLs optimiert ist. Dies kann z.B. dazu führen, dass die Taste "/" prominenter verfügbar ist. Erweiterte Funktionen können auch den Zugriff auf die Historie und dergleichen beinhalten. Für Formulareingaben, die eine URL anfordern, sollte stattdessen <input type="url"> verwendet werden.
+
+ +

Wenn dieses Attribut nicht gesetzt ist, lautet sein Standardwert "text", was darauf hinweist, dass die Standard-Text-Eingabetastatur des Gebietsschemas verwendet werden sollte.

+ +
+

Spezifischer Konflikt: Das WHATWG spec lists inputmode, und moderne Browser arbeiten daran, sie zu unterstützen. Das W3C HTML 5.2 spec listet es nicht mehr (markiert es als veraltet). Sie sollten die WHATWG-Definition als richtig betrachten, bis ein Konsens erreicht ist.

+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusBemerkung
{{SpecName("HTML WHATWG", "interaction.html#input-modalities:-the-inputmode-attribute", "inputmode")}}{{Spec2("HTML WHATWG")}} 
+ +

Browser-Kompatibilität

+ + + +

{{Compat("html.global_attributes.inputmode")}}

+ +

Siehe auch

+ + + +
{{HTMLSidebar("Global_attributes")}}
diff --git a/files/de/web/html/global_attributes/is/index.html b/files/de/web/html/global_attributes/is/index.html new file mode 100644 index 0000000000..ff888d1002 --- /dev/null +++ b/files/de/web/html/global_attributes/is/index.html @@ -0,0 +1,62 @@ +--- +title: is +slug: Web/HTML/Globale_Attribute/is +translation_of: Web/HTML/Global_attributes/is +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

The is global attribute allows you to specify that a standard HTML element should behave like a defined custom built-in element (see Using custom elements for more details).

+ +

This attribute can only be used if the specified custom element name has been successfully defined in the current document, and extends the element type it is being applied to.

+ +

Examples

+ +

The following code is taken from our word-count-web-component example (see it live also).

+ +
// Create a class for the element
+class WordCount extends HTMLParagraphElement {
+  constructor() {
+    // Always call super first in constructor
+    super();
+
+    // Constructor contents ommitted for brevity
+    ...
+
+  }
+}
+
+// Define the new element
+customElements.define('word-count', WordCount, { extends: 'p' });
+ +
<p is="word-count"></p>
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "custom-elements.html#attr-is", "is")}}{{Spec2('HTML WHATWG')}} 
+ +

Browser compatibility

+ + + +

{{Compat("html.global_attributes.is")}}

+ +

See also

+ + diff --git a/files/de/web/html/global_attributes/lang/index.html b/files/de/web/html/global_attributes/lang/index.html new file mode 100644 index 0000000000..705dfa4396 --- /dev/null +++ b/files/de/web/html/global_attributes/lang/index.html @@ -0,0 +1,60 @@ +--- +title: lang +slug: Web/HTML/Globale_Attribute/lang +tags: + - Attribute + - HTML + - Referenz + - Sprachen + - global +translation_of: Web/HTML/Global_attributes/lang +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

Das globale Attribut lang global attribute wird verwendet, um die Sprache eines Elementes oder die zu verwendene Sprache für zu bearbeitende Elemente festzulegen. Dieses Attribut enthält nur einen Wert, der der Richtlinie "Tags for Identifying Languages (BCP47)" entspricht. Wenn kein Wert festgelegt wurde, wird automatisch unknown als Sprache festgelegt; Nach BCP47 ungültige Werte werden als invalid behandelt.

+ +

Auch wenn ein Wert für das lang-Attribut vergeben wurde, kann es vorkommen, dass es nicht beachtet wird, weil ein xml:lang-Attribut immer priorisiert wird.

+ +

Für die CSS-Klasse {{cssxref(":lang")}} gilt, dass zwei ungültige Werte getrennt von einander behandelt werden, wenn sich ihr Name unterscheidet. (Wenn Sie dies nicht verstehen, lesen Sie bitte den englischen Originalartikel.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikiationStatusKommentar
{{SpecName('HTML WHATWG', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}{{Spec2('HTML WHATWG')}}Keine Veränderungen zur letzten Version, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}{{Spec2('HTML5.1')}}Version von {{SpecName('HTML WHATWG')}}, Keine Veränderungen zu {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}{{Spec2('HTML5 W3C')}}Version von {{SpecName('HTML WHATWG')}}, Verhalten bei xml:lang und vorbestimmten Sprachgen durch einen Algorithmus festgelegt. Ebenfalls ein echtes globales Attribut.
{{SpecName('HTML4.01', 'struct/dirlang.html#h-8.1', 'lang')}}{{Spec2('HTML4.01')}}Unterstützt alle Elemente außer diesen: {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.
+ +

Browserkompatibilität

+ +

{{Compat("html.global_attributes.lang")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/html/global_attributes/style/index.html b/files/de/web/html/global_attributes/style/index.html new file mode 100644 index 0000000000..7c3c2b5c77 --- /dev/null +++ b/files/de/web/html/global_attributes/style/index.html @@ -0,0 +1,107 @@ +--- +title: style +slug: Web/HTML/Globale_Attribute/style +translation_of: Web/HTML/Global_attributes/style +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

Das globale Attribut style kann CSS-Stilvorschriften für das entsprechende Element enthalten. Bitte beachten Sie, dass eine Auslagerung der Stilvorschriften in eine externe CSS-Datei vorzuziehen sind! Dieses Attribut und das {{HTMLElement("style")}}-Element haben den großen Vorteil, schnell ein paar Stilvorschriften festzulegen, zum Beispiel um etwas nur kurz zu testen.

+ +
+

Verwendung: Dieses Attribut sollte nicht für inhaltliche Informationen genutzt werden. Wenn alle Stilvorschriften entfernt wurden, soll die Seite dennoch inhaltlich korrekt bleiben. Deshalb sollte es auch nicht zum Verstecken von irrelevanten Informationen genutzt werden, dieses Ziel verfolgt man am besten mit dem hidden-Attribut.

+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', "dom.html#the-style-attribute", "style")}}{{Spec2('HTML WHATWG')}}Keine Änderungen seit der letzten Version {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#the-style-attribute", "style")}}{{Spec2('HTML5.1')}}Version {{SpecName('HTML WHATWG')}}, keine Ändeurngen zur Version {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#the-style-attribute", "style")}}{{Spec2('HTML5 W3C')}}Version {{SpecName('HTML WHATWG')}}. Seit {{SpecName("HTML4.01")}} ist es nun ein globales Attribut
{{SpecName('HTML4.01', 'present/styles.html#h-14.2.2', 'style')}}{{Spec2('HTML4.01')}}Unterstützt alle Elemente außer {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, und {{HTMLElement("title")}}.
{{SpecName("CSS3 Style", "", "")}}{{Spec2("CSS3 Style")}}Definiert den Inhalt des style-Attributes.
+ +

Browserkompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FunktionChromeFirefox (Gecko)Internet ExplorerOperaSafari
grundlegende Unterstützung{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FunktionAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
grundlegende Unterstützung{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Weitere Informationen

+ + diff --git a/files/de/web/html/global_attributes/tabindex/index.html b/files/de/web/html/global_attributes/tabindex/index.html new file mode 100644 index 0000000000..e097cc7985 --- /dev/null +++ b/files/de/web/html/global_attributes/tabindex/index.html @@ -0,0 +1,130 @@ +--- +title: tabindex +slug: Web/HTML/Globale_Attribute/tabindex +tags: + - Accessibility + - Global attributes + - HTML + - Reference + - a11y +translation_of: Web/HTML/Global_attributes/tabindex +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

Das  Globale Attribut tabindex gibt an, ob sein Element fokussiert werden kann, ob und an welcher Stelle es an der sequentiellen Tastaturnavigation beteiligt ist (normalerweise mit der Tabulatortaste, daher der Name).

+ +
{{EmbedInteractiveExample("pages/tabbed/attribute-tabindex.html","tabbed-standard")}}
+ + + +

Es akzeptiert einen Integer als Wert der zu unterschiedlichen Ergebnissen führt, abhängig von diesen Werten:

+ +
    +
  • +

    Ein negativer Wert (normalerweise tabindex="-1") bedeutet, dass das Element fokussierbar, jedoch nicht durch die sequenzielle Tastaturnavigation erreichbar sein sollte. Er ist meistens hilfreich um barrierefreie Widgets mit JavaScript zu erstellen.

    +
    • +
  • +
    +

    Dies ist hilfreich, wenn Inhalte außerhalb des Bildschirms vorhanden sind, welche zu einem bestimmten Ereignis in Erscheinung treten. Es ist nicht möglich ein Element mit der Tastatur zu fokussieren, das einen negativen tabindex hat. Jedoch ist es möglich, es mittels der focus() Methode aufzurufen.

    +
    + + +
    • +
+ +
+ +
    +
  • +

    tabindex="0" bedeutet, dass das Element mittels der sequenziellen Tastaturnavigation fokussierbar ist, wobei die Aufrufreihenfolge von der Quellreihenfolge des Dokuments definiert ist

    +
    • +
  • +
    +

    Die CSS-Positionierung wirkt sich nicht auf die Tab-Reihenfolge aus. Es wird sich nur die visuelle Reihenfolge der Elemente ändern. Tab-Reihenfolge entspricht der Quellreihenfolge! 

    +
    + + +
    • +
+ +
+ +
    +
  • +

    Ein positiver Wert bedeutet, dass das Element in der sequenziellen Tastaturnavigation fokussierbar sein kann, wobei seine Reihenfolge durch den Wert der Zahl definiert wird. tabindex="4" würde also vor tabindex="5", aber nach tabindex="3" fokussiert werden. Wenn mehrere Elemente den gleichen positiven tabindex-Wert haben, folgt ihre Reihenfolge relativ zu ihrer Position in der Dokumentquelle.

    + +
    +

    Vermeiden Sie die Verwendung von tabindex-Werten größer als 0. Dies erschwert es Benutzern, die auf assistive Technologie angewiesen sind, durch Seiteninhalte zu Navigieren und sie zu Bedienen.

    +
    +
    • +
+ +
+

Es wird nicht empfohlen, den Elementen positive Werte zu geben. Am Ende springt der Fokus zwischen den Elementen und es wird verwirrend, die tabindex-Attributwerte einzelner Elemente zu manipulieren. Empfehlenswert ist, sie in einer geeigneten DOM-Sequenz zu schreiben.

+
+ +

Wenn das tabindex-Attribut für ein {{htmlelement ("div")}} festgelegt wird, kann der untergeordnete Inhalt nicht mit den Pfeiltasten gescrollt werden. Außer, der tabindex wurde für den Inhalt festgelegt. Folgendes fiddle hilft beim Verstehen der Scrolleffekte des tabindex.

+ +
+

Hinweis: Der maximale Wert für tabindex ist 32767. Wenn er nicht spezifiziert ist, wird der Standardwert von 0 angenommen.

+
+ +

Bedenken zur Barrierefreiheit

+ + + +

Vermeiden Sie die Verwendung des tabindex-Attributs in Verbindung mit nichtinteraktiven Inhalten, um Elemente durch die Tastatureingabe interaktiv fokussierbar zu machen, wie etwa zum Beispiel die Verwendung eines {{HTMLElement ("div")}} Elements, um eine Schaltfläche zu erzeugen, anstelle des {{HTMLElement ("button")}} Elements.

+ +

Interaktive Komponenten, die mit nichtinteraktiven Elementen erstellt wurden, gelangen nicht in der accessibility tree für Eingabehilfen aufgeführt. Dadurch wird verhindert, dass assistive Technologien zu ihnen navigieren und sie manipulieren können. Der Inhalt sollte semantisch mit interaktiven Elementen ({{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}, etc.) beschrieben werden. Diese Elemente verfügen über integrierte Rollen und Zustände, die den Status der Zugänglichkeit mitteilen, die andernfalls durch ARIA verwaltet werden müsste.

+ + + +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', "interaction.html#attr-tabindex", "tabindex")}}{{Spec2('HTML WHATWG')}}No change from latest snapshot, {{SpecName('HTML5.1')}}.
{{SpecName('HTML5.1', "editing.html#the-tabindex-attribute", "tabindex")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}.
{{SpecName('HTML5 W3C', "editing.html#attr-tabindex", "tabindex")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName("HTML4.01")}}, the attribute is now supported on all elements (global attributes).
{{SpecName('HTML4.01', 'interact/forms.html#adef-tabindex', 'tabindex')}}{{Spec2('HTML4.01')}}Only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.
+ +

Browserkompatibilität

+ + + +

{{Compat("html.global_attributes.tabindex")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/html/global_attributes/title/index.html b/files/de/web/html/global_attributes/title/index.html new file mode 100644 index 0000000000..2d94d0202c --- /dev/null +++ b/files/de/web/html/global_attributes/title/index.html @@ -0,0 +1,164 @@ +--- +title: title +slug: Web/HTML/Globale_Attribute/title +tags: + - Globales Attribut + - HTML + - Referenz + - Referenzen +translation_of: Web/HTML/Global_attributes/title +--- +

{{HTMLSidebar("Global_attributes")}}

+ +

Der title globales Attribut beinhaltet einen Text mit Informationen über das Element zu welchem es gehört. Diese Informationen werden dem Benutzer üblicherweise (aber nicht nur) als Tooltip angezeigt. Hier sind einige typische Beispiele für dieses Attribut:

+ +
    +
  • Link: Der Titel oder die Beschreibung des verlinkten Dokuments
    • +
  • Media Elemente, (z.B.: ein Bild): eine Beschreibung oder Quellenangabe
    • +
  • Paragraph: eine Fusszeile oder ein Kommentar über den Paragraphen
    • +
  • Zitate: Informationen über den Autor, usw.
    • +
+ +

Wenn dieses Attribut weggelassen wird, ist das title Attribut des nächsten Vorgängers des Elements gültig (und kann somit als Tooltip für das Element verwendet werden). Wenn das Attribut als leerer String gesetzt wird, wird das title Attribut des Vorgängers explizit außer Kraft gesetzt (und sollte nicht als Tooltip für das Element verwendet werden).

+ +

Zusätzliche Semantics sind für die title Attribute der {{ HTMLElement("link") }}, {{ HTMLElement("abbr") }}, {{ HTMLElement("input") }} und {{ HTMLElement("menuitem") }} Elemente definiert.

+ +

Das title Attribut darf Mehrzeilig sein. Jede eingefügte  U+000A LINE FEED (LF) repräsentiert eine solche newline. Aber Achtung! Dies bedeutet, dass:

+ +
<p>Newlines in title should be taken into account,like this <abbr title="This is a
+multiline title">example</abbr>.</p>
+
+ +

einen zweizeiligen Titel definiert.

+ +

Bedenken bezüglich des barrierefreien Internet

+ +

Die Nutzung des title Attributs ist sehr problematisch für:

+ +
    +
  • Menschen, die nur Berührungsgeräte benutzen
    • +
  • Menschen, die das Internet nur mit dem Keyboard navigieren
    • +
  • Menschen, die mit unterstützenden Technologien wie einem Bildschirmleser auf das Internet zugreifen
    • +
  • Menschen mit Beeinträchtigungen in der Feinmotorik
    • +
  • Menschen mit kognitiven Bedenken
    • +
+ +

Dies kann besonders auf inkonsistenten Browser Support zurückgeführt werden. Dies ist des Weiteren ein Problem, da unterstützende Technologien zu mehr Komplexität beim Browser-Rendering der Seite führen. Falls ein Tooltip Effekt gewollt sein sollte, ist es besser eine der folgenden Browsermethoden zu benutzen.

+ +

 

+ + + +

 

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "elements.html#the-title-attribute", "title")}}{{Spec2('HTML WHATWG')}}No change from latest snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#the-title-attribute", "title")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#the-title-attribute", "title")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName("HTML4.01")}}, it is now a true global attribute.
{{SpecName('HTML4.01', 'struct/global.html#adef-title', 'title')}}{{Spec2('HTML4.01')}}Supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, and {{HTMLElement("title")}}.
+ +

Browser Kompatibilität

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Multi-line support{{ CompatVersionUnknown() }}{{CompatGeckoDesktop(12)}}{{ CompatVersionUnknown() }}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Multi-line support{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(12)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Siehe auch

+ +
    +
  • Alle globalen Attribute.
    • +
  • {{domxref("HTMLElement.title")}} welches dieses Attribut reflektiert
    • +
diff --git a/files/de/web/html/global_attributes/translate/index.html b/files/de/web/html/global_attributes/translate/index.html new file mode 100644 index 0000000000..5cf914afb3 --- /dev/null +++ b/files/de/web/html/global_attributes/translate/index.html @@ -0,0 +1,30 @@ +--- +title: Übersetztung in Deutsch +slug: Web/HTML/Globale_Attribute/translate +tags: + - DE von LV + - Editor's. + - Everyone + - Experimental-De + - HTML-DE + - german +translation_of: Web/HTML/Global_attributes/translate +--- +

Anerkannte englische (US) Version:

+ +

 {{HTMLSidebar ("Global_attributes")}}

+ +

 Das Attribut translate global ist ein Aufzählungsattribut, mit dem angegeben wird, ob die übersetzbaren Attributwerte eines Elements und die untergeordneten Knoten {{domxref ("Text")}} beim Lokalisieren der Seite übersetzt werden sollen oder ob sie unverändert bleiben sollen.  Es kann folgende Werte annehmen:

+ +
    +
  •      leere Zeichenfolge oder "Ja", die angibt, dass das Element übersetzt werden soll, wenn die Seite lokalisiert wird.
    • +
  •      "no" gibt an, dass das Element nicht übersetzt werden darf.
    • +
+ +

 Obwohl nicht alle Browser dieses Attribut erkennen, wird es von automatischen Übersetzungssystemen wie Google Translate und möglicherweise auch von Tools, die von menschlichen Übersetzern verwendet werden, respektiert.  Aus diesem Grund ist es wichtig, dass Webautoren dieses Attribut verwenden, um Inhalte zu markieren, die nicht übersetzt werden

+ +

Verwenden des Übersetzungsattributs von HTML.

+ +

Tags übersetzen Kategorisieren Sie den Artikel. Dadurch wird der Artikel unter den richtigen Filtern in der Suchmaschine auffindbar.

+ +

DE German, HTML-DE, Experimental-De, Everyone, Editor's..Github. L. v

diff --git a/files/de/web/html/globale_attribute/accesskey/index.html b/files/de/web/html/globale_attribute/accesskey/index.html deleted file mode 100644 index 2fff85d11a..0000000000 --- a/files/de/web/html/globale_attribute/accesskey/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: accesskey -slug: Web/HTML/Globale_Attribute/accesskey -tags: - - Globale Attribute - - HTML - - Referenz -translation_of: Web/HTML/Global_attributes/accesskey ---- -
{{HTMLSidebar("Global_attributes")}}
- -

Das globale Attribut accesskey definiert ein Tastaturkürzel für das aktuelle Element. Der Attributwert muss aus einem einzelnen, druckbarem Zeichen bestehen (dies beinhaltet Zeichen mit Umlauten und andere Zeichen, die über die Tastatur eingegeben werden können).

- -
-

Hinweis: Die WHATWG-Spezifikation besagt, dass mehrere mit Leerzeichen voneinander getrennte Zeichen angegeben werden können und der Browser davon das erste unterstützte verwenden wird. Das funktioniert jedoch in den meisten Browsern nicht. In Internet Explorer und Edge wird das erste unterstützte Zeichen jedoch ohne Probleme verwendet, sofern es keine Konflikte mit anderen Befehlen gibt.

-
- -

Je nach Browser und Betriebssystem unterscheidet sich die Tastaturkombination zur Ansteuerung des accesskey.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 WindowsLinuxMac
FirefoxAlt + Shift + keyFirefox 57+: Control +  Option + key -ODER- Control + Alt + key
- Firefox 14–56: Control + Alt + key
- Firefox < 14, Control + key
Internet ExplorerAlt + keyN/V
Google ChromeAlt + keyControl + Alt + key
SafariAlt + keyN/VControl + Alt + key
Opera 15+Alt + keyControl + Alt + key
Opera 12 -

Shift + Esc öffnet zunächst eine Liste der Inhalte, die über accesskey erreichbar sind und erlaubt eine Ansteuerung über  key

-
- -

Beachte, dass die Tastaturkombination in Firefox über die Einstellungen angepasst werden kann.

- -

Spezifikation

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('HTML5.2', "editing.html#the-accesskey-attribute", "accesskey")}}{{Spec2('HTML5.2')}}Beschreibt ein realistischeres Verhalten der tatsächlichen Implementierungen.
{{SpecName('HTML WHATWG', "interaction.html#the-accesskey-attribute", "accesskey")}}{{Spec2('HTML WHATWG')}}Keine Änderung gegenüber {{SpecName('HTML5.1')}}.
{{SpecName('HTML5.1', "editing.html#the-accesskey-attribute", "accesskey")}}{{Spec2('HTML5.1')}}Keine Änderung gegenüber {{SpecName('HTML5 W3C')}}.
{{SpecName('HTML5 W3C', "editing.html#the-accesskey-attribute", "accesskey")}}{{Spec2('HTML5 W3C')}}Ab {{SpecName('HTML4.01')}} können mehrere Zeichen als  accesskey gesetzt werden. Zudem kann ein accesskey an jedem Element gesetzt werden.
{{SpecName('HTML4.01', "interact/forms.html#h-17.11.2", "accesskey")}}{{Spec2('HTML4.01')}}Nur unterstützt an {{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("label") }}, {{ HTMLElement("legend") }} und {{ HTMLElement("textarea") }}
- -

Browserkompatibilität

- - - -

{{Compat("html.global_attributes.accesskey")}}

- -

Siehe auch

- -
    -
  • {{domxref("Element.accessKey")}}
    • -
  • {{domxref("HTMLElement.accessKeyLabel")}}
    • -
  • Globale Attribute.
    • -
diff --git a/files/de/web/html/globale_attribute/autocapitalize/index.html b/files/de/web/html/globale_attribute/autocapitalize/index.html deleted file mode 100644 index 33eb99d131..0000000000 --- a/files/de/web/html/globale_attribute/autocapitalize/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: autocapitalize -slug: Web/HTML/Globale_Attribute/autocapitalize -tags: - - Automatische Großschreibung - - Globales Attribut - - HTML -translation_of: Web/HTML/Global_attributes/autocapitalize ---- -

{{HTMLSidebar("Global_attributes")}}

- -

Das Globale Attribut autocapitalize ist ein Aufzählungsattribut, welches kontrolliert ob und wie Text-Input automatisch großgeschrieben wird, während der Nutzer etwas einfügt oder editiert. Das Attribut muss einen der folgenden Werte annehmen:

- -
    -
  • off oder none: Es wird keine automatische Großschreibung benutzt (alle Buchstaben sind automatisch kleingeschrieben) 
    • -
  • on oder sentences: Der erste Buchstabe jedes Satzes wird zu einem großgeschriebenen Buchstaben transformiert. Die restlichen Buchstaben werden kleingeschrieben.
    • -
  • words: Der erste Buchstabe jedes Wortes wird zu einem großgeschriebenen Buchstaben transformiert. Die restlichen Buchstaben werden kleingeschrieben.
    • -
  • characters: Alle Buchstaben sind automatisch großgeschrieben. 
    • -
- -

Das autocapitalize Attribut hat keine Auswirkungen auf das Verhalten eines physikalischen Keyboards beim Tippen. Aber es hat Auswirkungen auf das Verhalten von anderen Input Mechanismen, wie virtuellen Keyboards auf Mobilfunkgeräten oder Sprachinput. Diese Mechanismen helfen Nutzern oft dabei, den ersten Buchstaben eines Satzes automatisch großzuschreiben. Das autocapitalize Attribut ermöglicht es Autoren dieses Verhalten auf einer per-Element Basis nicht zu berücksichtigen.

- -

Das autocapitalize Attribut führt nie zu automatischer Großschreibung bei einem {{HTMLElement("input")}} Element mit einem {{htmlattrxref("type", "input")}} Attribut, dessen Wert url, email, oder password ist.

- -

Spezifikationen

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', "interaction.html#autocapitalization", "autocapitalize")}}{{Spec2('HTML WHATWG')}} 
- -

Browser Kompatibilität

- - - -

{{Compat("html.global_attributes.autocapitalize")}}

diff --git a/files/de/web/html/globale_attribute/class/index.html b/files/de/web/html/globale_attribute/class/index.html deleted file mode 100644 index cf2366a55f..0000000000 --- a/files/de/web/html/globale_attribute/class/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: class -slug: Web/HTML/Globale_Attribute/class -tags: - - Klassen Globale Attribute -translation_of: Web/HTML/Global_attributes/class ---- -

{{HTMLSidebar("Global_attributes")}}

- -

Das Globale Attribut class ist eine durch Leerzeichen separierte Liste von Klassen dieses Elements. Klassen erlauben es CSS und Javascript auf spezifische Elemente über Klassenselektoren oder DOM-Methoden {{domxref("document.getElementsByClassName")}} zuzugreifen.

- -

Obwohl die Spezifikation keine Anforderung an die Benennung von Klassen stellt, sollten Webentwickler darauf achten, dass der semantische Zweck des Elements beschrieben wird, und gerade nicht die Darstellungseigenschaften.

- -

Beispiel:
- Attribut hervorgehoben , um einen hervorgehobenen Textteil zu beschreiben aber nicht als  italics.

- -

"Semantische" Namen bleiben logisch (zutreffend), auch wenn sich die Darstellung der Webseite ändert (wenn also z.B. Hervorhebungen anstatt kursiv nun farbig in braun dargestellt werden).

- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpezifikationStatusBemerkung
{{SpecName('HTML WHATWG', "elements.html#classes", "class")}}{{Spec2('HTML WHATWG')}}Keine Änderungen zum letzten Snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "elements.html#classes", "class")}}{{Spec2('HTML5.1')}}Snapshot von {{SpecName('HTML WHATWG')}}, keine Änderung zu {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "elements.html#classes", "class")}}{{Spec2('HTML5 W3C')}}Snapshot von  {{SpecName('HTML WHATWG')}}. Von {{SpecName('HTML4.01')}}, class ist jetzt ein echtes Globales Attribut.
{{SpecName('HTML4.01', "struct/global.html#h-7.5.2", "class")}}{{Spec2('HTML4.01')}}Unterstützt alle Elemente außer {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.
- -

Browser Kompatibilität

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }} [1]{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }} [1]{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -

[1] class ist ein echtes Globales Attribut erst seit Firefox 32.

- - - - diff --git a/files/de/web/html/globale_attribute/contenteditable/index.html b/files/de/web/html/globale_attribute/contenteditable/index.html deleted file mode 100644 index 916eaf2073..0000000000 --- a/files/de/web/html/globale_attribute/contenteditable/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: contenteditable -slug: Web/HTML/Globale_Attribute/contenteditable -tags: - - Globale Attribute - - HTML - - Referenz - - Textbearbeitung - - Texteingabe - - contenteditable -translation_of: Web/HTML/Global_attributes/contenteditable ---- -
{{HTMLSidebar("Global_attributes")}}
- -

Das globale Attribut contenteditable ist ein Aufzählungsattribut, das angibt, ob das Element für den Benutzer bearbeitbar sein soll. Das Attribut muss eines der folgenden Werte annehmen:

- -
    -
  • true oder eine leere Zeichenkette geben an, dass das Element editierbar sein soll;
    • -
  • false gibt an, dass das Element nicht editierbar sein darf..
    • -
- -

Wenn das Attribut nicht gesetzt ist, wird der Standardwert vom Elternelement geerbt.

- -

Das Attribut ist ein Aufzählungs- und kein Boolean-Attribut. Das bedeutet, dass eines der Werte true, false oder die leere Zeichenkette erforderlich sind und eine abgekürzte Schreibweise wie <label contenteditable>Example Label</label> nicht erlaubt ist. Die richtige Verwendung ist <label contenteditable="true">Example Label</label>.

- -

Die Farbe der {{Glossary("caret", "Texteinfügemarke")}} kann mit der CSS-Eigenschaft {{cssxref("caret-color")}} gesetzt werden.

- -

Spezifikation

- - - - - - - - - - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', "editing.html#attr-contenteditable", "contenteditable")}}{{Spec2('HTML WHATWG')}}Keine Änderung seit letztem Snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "editing.html#attr-contenteditable", "contenteditable")}}{{Spec2('HTML5.1')}}Snapshot von {{SpecName('HTML WHATWG')}}, keine Änderung seit {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "editing.html#attr-contenteditable", "contenteditable")}}{{Spec2('HTML5 W3C')}}Snapshot von {{SpecName('HTML WHATWG')}}, ursprüngliche  Definition.
- -

Browserkompatibilität

- -

{{ CompatibilityTable }}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown }}{{ CompatGeckoDesktop("1.9") }}{{ CompatVersionUnknown }}{{ CompatVersionUnknown }}{{ CompatVersionUnknown }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown }}{{ CompatVersionUnknown }}{{ CompatGeckoMobile("1.9") }}{{ CompatVersionUnknown }}{{ CompatVersionUnknown }}{{ CompatVersionUnknown }}
-
- -

Siehe auch

- - diff --git a/files/de/web/html/globale_attribute/dir/index.html b/files/de/web/html/globale_attribute/dir/index.html deleted file mode 100644 index 28ed6389ac..0000000000 --- a/files/de/web/html/globale_attribute/dir/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: dir -slug: Web/HTML/Globale_Attribute/dir -tags: - - Globales Attribut - - HTML - - Referenz - - Textrichtung -translation_of: Web/HTML/Global_attributes/dir ---- -

{{HTMLSidebar("Global_attributes")}}

- -

Das globale Attribut dir ist ein Attribut, das die Richtung des Elementtextes angibt. Es kann folgende Werte haben:

- -
    -
  • ltr, von links nach rechts (englisch: left to right). Wird für Sprachen, die von links nach rechts geschrieben werden (z.B. deutsch) verwendet;
    • -
  • rtl, von rechts nach links (englisch: right to left). Wird für Sprachen, die von rechts nach links geschrieben werden (z.B. arabisch) verwendet;
    • -
  • auto, lässt den Browser des Nutzers entscheiden. Es benutzt einen simplen Algorithmus, indem es die Zeichen im Element einliest, bis es ein Zeichen mit einer bekannten Richtung findet und dann diese Richtung auf das gesamte Element anwendet.
    • -
- -
-

Nutzungsinformationen

- -

Dieses Attribut ist verpflichtend für das {{ HTMLElement("bdo") }}-Element, bei dem es eine andere Bedeutung hat.

- -
    -
  • -

    Dieses Attribut wird nicht vom {{ HTMLElement("bdi") }}-Element geerbt. Sein Standardwert ist  auto.

    -
    • -
  • -

    Dieses Attribut kann von den CSS-Eigenschaften {{ cssxref("direction") }} and {{ cssxref("unicode-bidi") }} überschrieben werden, sofern eine CSS-Seite eingebunden ist und das Element diese Eigenschaften unterstützt.

    -
    • -
  • -

    Da die Richtung eines Textes sprachlich zu seinem Inhalt und nicht zu seiner Darstellung gehört, ist es zu empfehlen, dass Web-Entwickler - sofern möglich - dieses Attribut anstatt der zugehörigen CSS-Eigenschaft zu verwenden. So kann der Text auch in einem Browser, der die CSS-Eigenschaften nicht unterstützt oder in dem CSS deaktiviert ist, korrekt dargestellt werden.

    -
    • -
  • -

    Der auto Wert sollte für Daten mit einer unbekannten Richtung verwendet werden, wie zum Beispiel Daten aus Benutzereingaben, möglicherweise in einer Datenbank gespeichert.

    -
    • -
-
- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', "dom.html#the-dir-attribute", "dir")}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5.1', "dom.html#the-dir-attribute", "dir")}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C', "dom.html#the-dir-attribute", "dir")}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', "dirlang.html#h-8.2", "dir")}}{{Spec2('HTML4.01')}} 
- -

Browser-Kompatibilität

- - - -

{{Compat("html.global_attributes.dir")}}

- -

Siehe auch

- -
    -
  • Alle globalen Attribute.
    • -
  • {{domxref("HTMLElement.dir")}}, das auf dieses Attribut zurückgreift
    • -
diff --git a/files/de/web/html/globale_attribute/draggable/index.html b/files/de/web/html/globale_attribute/draggable/index.html deleted file mode 100644 index 3a0dfd105e..0000000000 --- a/files/de/web/html/globale_attribute/draggable/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: draggable -slug: Web/HTML/Globale_Attribute/draggable -tags: - - Experimental - - Global attributes - - HTML - - Reference -translation_of: Web/HTML/Global_attributes/draggable ---- -

{{HTMLSidebar("Global_attributes")}} {{SeeCompatTable}}

- -

Das globale Attribut draggable ist ein Attribut, dass zeigt, ob das entsprechende Element auf einen anderen Ort gezogen werden kann. Es unterstützt die {{domxref("HTML_Drag_and_Drop_API","HTML Drag and Drop API")}}. Folgende Werte sind erlaubt:

- -
    -
  • true, das Element kann gedraggt werden
    • -
  • false, das Element kann nicht gedraggt werden
    • -
- -

Wurde das Attribut nicht gesetzt, wird als Wert auto angenommen. Das Drag-Verhalten des Elements wird dann durch den Browser bestimmt. 

- -

Bei diesem Attribut handelt es sich nicht um einen booleschen Wert, true oder false muss explizit angegeben werden. Eine Kurzform wie beispielsweise <label draggable>Beispiel Label</label> ist nicht zulässig. Die korrekte Verwendung ist <label draggable="true">Beispiel Label</label>.

- -

Nativ kann das Attribut draggable nur für Textauswahl, Bilder und Links verwendet werden. Bei allen anderen Elementen muss das {{domxref('GlobalEventHandlers.ondragstart','ondragstart')}}-Event gesetzt werden, um Drag & Drop Mechanismen verwendet zu können. Dieses Beispiel (englisch) enthält eine ausführlichere Beschreibung der Drag & Drop API und deren Verwendung. 

- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', "interaction.html#the-draggable-attribute", "draggable")}}{{Spec2('HTML WHATWG')}}Keine Änderung seit dem letztem Snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "editing.html#the-draggable-attribute", "draggable")}}{{Spec2('HTML5.1')}}Snapshot von {{SpecName('HTML WHATWG')}}, initiale Definition
- -

Browserkompatibilität

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
EigenschaftChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Funktionalität{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("1.8.1") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
EigenschaftAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Funktionalität{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatGeckoMobile("1.8.1") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -

Siehe auch

- - diff --git a/files/de/web/html/globale_attribute/dropzone/index.html b/files/de/web/html/globale_attribute/dropzone/index.html deleted file mode 100644 index 4d0667217f..0000000000 --- a/files/de/web/html/globale_attribute/dropzone/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: dropzone -slug: Web/HTML/Globale_Attribute/dropzone -tags: - - Experimentell -translation_of: Web/HTML/Global_attributes/dropzone ---- -

{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}

- -

Das globale Attribut dropzone ist ein Attribut, das anzeigt, welche Arten von Inhalt auf dem Element abgelegt werden können. Es wird die Drag and Drop API verwendet. Es kann folgende Werte enthalten:

- -
    -
  • copy, was anzeigt, dass eine Kopie vom abgelegten Element erstellt wird.
    • -
  • move, was anzeigt, dass das abgelegte Element an diese neue Stelle verschoben wird.
    • -
  • link, was einen Link auf das abgelegte Element erzeugt.
    • -
- -

Spezifikationen

- - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('HTML5.1', "editing.html#the-dropzone-attribute", "dropzone")}}{{Spec2('HTML5.1')}}Auszug von {{SpecName('HTML WHATWG')}}, der ursprünglichen Definition.
- -

Browserkompatibilität

- -

{{Compat("html.global_attributes.dropzone")}}

- -
 
- -

Siehe auch

- - diff --git a/files/de/web/html/globale_attribute/hidden/index.html b/files/de/web/html/globale_attribute/hidden/index.html deleted file mode 100644 index f78b025ca1..0000000000 --- a/files/de/web/html/globale_attribute/hidden/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: hidden -slug: Web/HTML/Globale_Attribute/hidden -tags: - - Attribut - - Globales Attribut - - HTML - - Reference - - Referenz -translation_of: Web/HTML/Global_attributes/hidden ---- -

{{HTMLSidebar("Global_attributes")}}

- -

Das globale Attribut hidden ist ein boolesches Attribut welches angibt, dass das Element nicht oder nicht länger relevant ist. Zum Beispiel, kann es benutzt werden, um Elemente einer Seite zu verstecken, die nicht benötigt werden, wenn ein Anmeldeprozess erfolgreich durchgeführt wurde. Der Browser wird solche Elemente nicht anzeigen.

- -

Dieses Attribut soll nicht benutzt werden, um Inhalt zu verstecken, der rechtmäßig angzeigt werden könnte. Zum Beispiel sollte es nicht benutzt werden, um Seiten eines Tabelleninterface zu verstecken. Dies ist eine Gestaltungsfrage.

- -

Versteckte Elemente sollten nicht mit sichtbaren Elementen verlinkt sein. Elemente, die von versteckten Elementen abstammen, sind trotzdem aktiv, was bedeutet, dass Skript-Elemente immer noch ausgeführt und Form-Elemente gesendet werden können.

- -
-

Bemerkung: Das Abändern des Wertes der CSS {{cssxref("display")}} Eigenschaft eines Elementes mit dem hidden Attribut überschreibt das Verhalten. Also wird ein Element mit Style display: flex angezeigt, egal ob das hidden Attribut gesetzt ist oder nicht.

-
- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - -
SpezifikationStatusBemerkung
{{SpecName('HTML WHATWG', "interaction.html#the-hidden-attribute", "hidden")}}{{Spec2('HTML WHATWG')}}Keine Änderung seit letztem Snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "hidden")}}{{Spec2('HTML5.1')}}Snapshot von {{SpecName('HTML WHATWG')}}, initiale Definition
- -

Browserkompatibilität

- - - -

{{Compat("html.global_attributes.hidden")}}

- -

Siehe auch

- - diff --git a/files/de/web/html/globale_attribute/id/index.html b/files/de/web/html/globale_attribute/id/index.html deleted file mode 100644 index 6e1ef85aad..0000000000 --- a/files/de/web/html/globale_attribute/id/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: id -slug: Web/HTML/Globale_Attribute/id -translation_of: Web/HTML/Global_attributes/id ---- -

{{HTMLSidebar("Global_attributes")}}

- -

Das id globale Attribut definiert einen eindeutigen Bezeichner (ID) welcher eindeutig im gesamten Dokument sein muss. Das Ziel ist die Identifizierung eines Elementes in Verknüpfungen (durch einen Fragmentbezeichner), Skripting, oder Stylisierung (mit CSS).

- -

Der Wert des Attributes ist eine undurchsichtige Zeichenkette: dies bedeutet, dass der Webautor es nicht benutzen darf um Informationen abzuleiten. Bestimmte Bedeutung, zum Beispiel bedeutungsspezifische Eigenschaften, dürfen nicht von der Zeichenkette abgeleitet sein.

- -

Der Attributwert darf keine Leerzeichen enthalten. Browsers treat non-conforming IDs that contains white spaces as if the white space is part of the ID. In contrast to the class attribute, which allows space-separated values, elements can only have one single ID defined through the id attribute. Note that an element may have several IDs, but the others should be set by another means, such as via a script interfacing with the DOM interface of the element.

- -
-

Note: Using characters except ASCII letters and digits, '_', '-' and '.' may cause compatibility problems, as they weren't allowed in HTML 4. Though this restriction has been lifted in HTML 5, an ID should start with a letter for compatibility.

-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', "dom.html#the-id-attribute", "id")}}{{Spec2('HTML WHATWG')}}No change from latest snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#the-id-attribute", "id")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#the-id-attribute", "id")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName('HTML WHATWG')}}, now accept '_', '-' and '.' if not at the beginning fo the id. It is also a true global attribute.
{{SpecName('HTML4.01', 'struct/global.html#adef-id', 'id')}}{{Spec2('HTML4.01')}}Supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.
- -

Browser compatibility

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown }}[1]{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown }}[1]{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -

[1] class is a true global attribute only since Firefox 32.

- -

See also

- -
    -
  • All global attributes.
    • -
  • {{domxref("Element.id")}} that reflects this attribute.
    • -
diff --git a/files/de/web/html/globale_attribute/index.html b/files/de/web/html/globale_attribute/index.html deleted file mode 100644 index 59b8f1d2aa..0000000000 --- a/files/de/web/html/globale_attribute/index.html +++ /dev/null @@ -1,205 +0,0 @@ ---- -title: Globale Attribute -slug: Web/HTML/Globale_Attribute -tags: - - Attribute - - HTML - - Reference - - Web -translation_of: Web/HTML/Global_attributes ---- -

{{HTMLSidebar("Global_attributes")}}

- -

Globale Attribute sind Attribute die alle HTML Elemente gemeinsam haben; Sie können auf alle Elemente angewendet werden, auch wenn Sie auf einige Elemente keinen Effekt haben.

- -

Globale Attribute können für alle HTML Elemente festgelegt werden, auch für jene die nicht im Standard verankert sind. Das bedeutet, dass auch nicht standardgemäße Elemente diese Attribute erlauben müssen, auch wenn dadurch das Dokument nicht mehr HTML5-konform ist. Zum Beispiel verstecken HTML5-konforme Browser Inhalte wie <foo hidden>...</foo>, obwohl <foo> kein gültiges HTML Element ist.

- -

Zusätzlich zu den grundlegenden globalen HTML Attributen, gibt es noch die folgenden globalen Attribute:

- -
    -
  • {{HTMLAttrDef("xml:lang")}} und {{HTMLAttrDef("xml:base")}} — Diese sind von der XHTML-Spezifikation abgeleitet und veraltet und gibt es nur noch aus Kompatibilitätsgründen.
    • -
  • Mehrere aria-* Attribute, benutzt für bessere Barrierefreiheit.
    • -
  • Die Event Handler Attribute: onabort, onautocomplete, onautocompleteerror, onblur, oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncontextmenu, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onsort, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting.
    • -
- -

Liste globaler Attribute

- -
-
{{HTMLAttrDef("accesskey")}}
-
Bietet einen Hinweis zum Generieren eines Tastenkürzels für das aktuelle Element. Dieses Attribut besteht aus einer durch Leerzeichen getrennten Liste von Zeichen. Der Browser sollte das Erste verwenden, welches auf der Computertastatur vorhanden ist.
-
{{HTMLAttrDef("autocapitalize")}}
-
Steuert, ob und wie Texteingaben automatisch großgeschrieben werden, wenn sie vom Benutzer eingegeben / bearbeitet werden. Es kann folgende Werte annehmen: -
    -
  • off oder none, keine automatische Großschreibung wird angewendet (alle Buchstaben sind kleingeschrieben)
    • -
  • on oder sentences, der erste Buchstabe jedes Satzes ist standardmäßig ein Großbuchstabe; alle weiteren Buchstaben sind standardmäßig kleingeschrieben
    • -
  • words, der erste Buchstabe jedes Wortes ist standardmäßig ein Großbuchstabe; alle weiteren Buchstaben sind standardmäßig kleingeschrieben
    • -
  • characters, alle Buchstaben werden standardmäßig großgeschrieben.
    • -
-
-
{{HTMLAttrDef("class")}}
-
Eine durch Leerzeichen getrennte Liste der Klassen des Elements. Mit Klassen können CSS und JavaScript über die Klassenselektoren bestimmte Elemente, oder Funktionen wie die Methode {{DOMxRef("Document.getElementsByClassName()")}} auswählen und darauf zugreifen.
-
{{HTMLAttrDef("contenteditable")}}
-
- -

Ein Aufzählungsattribut das angibt, ob das Element für den Benutzer bearbeitbar sein soll. Das Attribut muss einen der folgenden Werte annehmen:

- -
    -
  • true oder eine leere Zeichenkette geben an,  das Element editierbar sein soll;
    • -
  • false gibt an, dass das Element nicht editierbar sein darf.
    • -
- -
-
{{HTMLAttrDef("contextmenu")}}
-
Die id von einem {{HTMLElement("menu")}} welches als Kontextmenu für das Element benutzt werden soll.
-
{{HTMLAttrDef("data-*")}}
-
Diese Attributklasse erlaubt es Daten zwischen HTML und DOM auszutauschen und auch mit Skripten darauf zuzugreifen. Diese Daten sind in dem jeweiligen  {{DOMxRef("HTMLElement")}} gespeichert und können über {{DOMxRef("HTMLElement.dataset")}} ausgelesen oder geändert werden.
-
{{HTMLAttrDef("dir")}}
-
Ein Aufzählungsattribut das die Richtung des Elementtextes angibt. Es kann folgende Werte haben: -
    -
  • ltr, von links nach rechts (englisch: left to right). Wird für Sprachen, die von links nach rechts geschrieben werden (z.B. deutsch) verwendet;
    • -
  • rtl, von rechts nach links (englisch: right to left). Wird für Sprachen, die von rechts nach links geschrieben werden (z.B. arabisch) verwendet;
    • -
  • auto, lässt den Browser des Nutzers entscheiden. Es benutzt einen simplen Algorithmus, indem es die Zeichen im Element einliest, bis es ein Zeichen mit einer bekannten Richtung findet und dann diese Richtung auf das gesamte Element anwendet.
    • -
-
-
{{HTMLAttrDef("draggable")}}
-
Ein Aufzählungsattribut das zeigt, ob das entsprechende Element auf einen anderen Ort gezogen werden kann. Es unterstützt die HTML Drag and Drop API. Folgende Werte sind erlaubt: -
    -
  • true, das Element kann gedraggt werden.
    • -
  • false, das Element kann nicht gedraggt werden.
    • -
-
-
{{HTMLAttrDef("dropzone")}} {{Experimental_Inline}}
-
Ein Aufzählungsattribut das anzeigt, welche Arten von Inhalt auf dem Element abgelegt werden können. Es wird die Drag and Drop API verwendet. Es kann folgende Werte annehmen: -
    -
  • copy,  was anzeigt, dass eine Kopie vom abgelegten Element erstellt wird.
    • -
  • move, was anzeigt, dass das abgelegte Element an diese neue Stelle verschoben wird.
    • -
  • link, was einen Link auf das abgelegte Element erzeugt.
    • -
-
-
{{HTMLAttrDef("exportparts")}} {{Experimental_Inline}}
-
Used to transitively export shadow parts from a nested shadow tree into a containing light tree.
-
{{HTMLAttrDef("hidden")}}
-
A Boolean attribute indicates that the element is not yet, or is no longer, relevant. For example, it can be used to hide elements of the page that can't be used until the login process has been completed. The browser won't render such elements. This attribute must not be used to hide content that could legitimately be shown.
-
{{HTMLAttrDef("id")}}
-
Defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).
-
{{HTMLAttrDef("inputmode")}}
-
Provides a hint to browsers as to the type of virtual keyboard configuration to use when editing this element or its contents. Used primarily on {{HTMLElement("input")}} elements, but is usable on any element while in {{HTMLAttrxRef("contenteditable")}} mode.
-
{{HTMLAttrDef("is")}}
-
Allows you to specify that a standard HTML element should behave like a registered custom built-in element (see Using custom elements for more details).
-
- -
-

Note: The item* attributes are part of the WHATWG HTML Microdata feature.

-
- -
-
{{HTMLAttrDef("itemid")}}
-
The unique, global identifier of an item.
-
{{HTMLAttrDef("itemprop")}}
-
Used to add properties to an item. Every HTML element may have an itemprop attribute specified, where an itemprop consists of a name and value pair.
-
{{HTMLAttrDef("itemref")}}
-
Properties that are not descendants of an element with the itemscope attribute can be associated with the item using an itemref. It provides a list of element ids (not itemids) with additional properties elsewhere in the document.
-
{{HTMLAttrDef("itemscope")}}
-
itemscope (usually) works along with {{HTMLAttrxRef("itemtype")}} to specify that the HTML contained in a block is about a particular item. itemscope creates the Item and defines the scope of the itemtype associated with it. itemtype is a valid URL of a vocabulary (such as schema.org) that describes the item and its properties context.
-
{{HTMLAttrDef("itemtype")}}
-
Specifies the URL of the vocabulary that will be used to define itemprops (item properties) in the data structure. {{HTMLAttrxRef("itemscope")}} is used to set the scope of where in the data structure the vocabulary set by itemtype will be active.
-
{{HTMLAttrDef("lang")}}
-
Helps define the language of an element: the language that non-editable elements are in, or the language that editable elements should be written in by the user. The attribute contains one “language tag” (made of hyphen-separated “language subtags”) in the format defined in Tags for Identifying Languages (BCP47). xml:lang has priority over it.
-
{{HTMLAttrDef("part")}} {{Experimental_Inline}}
-
A space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the {{CSSxRef("::part()")}} pseudo-element.
-
{{HTMLAttrDef("slot")}}
-
Assigns a slot in a shadow DOM shadow tree to an element: An element with a slotattribute is assigned to the slot created by the {{HTMLElement("slot")}} element whose {{HTMLAttrxRef("name", "slot")}} attribute's value matches that slot attribute's value.
-
{{HTMLAttrDef("spellcheck")}} {{Experimental_Inline}}
-
An enumerated attribute defines whether the element may be checked for spelling errors. It may have the following values: -
    -
  • true, which indicates that the element should be, if possible, checked for spelling errors;
    • -
  • false, which indicates that the element should not be checked for spelling errors.
    • -
-
-
{{HTMLAttrDef("style")}}
-
Contains CSS styling declarations to be applied to the element. Note that it is recommended for styles to be defined in a separate file or files. This attribute and the {{HTMLElement("style")}} element have mainly the purpose of allowing for quick styling, for example for testing purposes.
-
{{HTMLAttrDef("tabindex")}}
-
An integer attribute indicating if the element can take input focus (is focusable), if it should participate to sequential keyboard navigation, and if so, at what position. It can take several values: -
    -
  • a negative value means that the element should be focusable, but should not be reachable via sequential keyboard navigation;
    • -
  • 0 means that the element should be focusable and reachable via sequential keyboard navigation, but its relative order is defined by the platform convention;
    • -
  • a positive value means that the element should be focusable and reachable via sequential keyboard navigation; the order in which the elements are focused is the increasing value of the tabindex. If several elements share the same tabindex, their relative order follows their relative positions in the document.
    • -
-
-
{{HTMLAttrDef("title")}}
-
Contains a text representing advisory information related to the element it belongs to. Such information can typically, but not necessarily, be presented to the user as a tooltip.
-
{{HTMLAttrDef("translate")}} {{Experimental_Inline}}
-
An enumerated attribute that is used to specify whether an element's attribute values and the values of its {{DOMxRef("Text")}} node children are to be translated when the page is localized, or whether to leave them unchanged. It can have the following values: -
    -
  • empty string and "yes", which indicates that the element will be translated.
    • -
  • "no", which indicates that the element will not be translated.
    • -
-
-
-

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("HTML WHATWG", "dom.html#global-attributes", "Global attributes")}}{{Spec2("HTML WHATWG")}}
{{SpecName("CSS Shadow Parts", "#exposing")}}{{Spec2("CSS Shadow parts")}}Added the part and exportparts global attributes.
{{SpecName("HTML5.3", "dom.html#global-attributes", "Global attributes")}}{{Spec2("HTML5.3")}}
{{SpecName("HTML5.2", "dom.html#global-attributes", "Global attributes")}}{{Spec2("HTML5.2")}}Snapshot of {{SpecName("HTML WHATWG")}}. From {{SpecName("HTML5.1")}}, itemid, itemprop, itemref, itemscope, and itemtype have been added.
{{SpecName("HTML5.1", "dom.html#global-attributes", "Global attributes")}}{{Spec2("HTML5.1")}}Snapshot of {{SpecName("HTML WHATWG")}}. From {{SpecName("HTML5 W3C")}}, contextmenu, draggable, dropzone, and spellcheck have been added.
{{SpecName("HTML5 W3C", "dom.html#global-attributes", "Global attributes")}}{{Spec2("HTML5 W3C")}}Snapshot of {{SpecName("HTML WHATWG")}}. From {{SpecName("HTML4.01")}}, the concept of global attributes is introduced and the dir, lang, style, id, class, tabindex, accesskey, and title are now true global attributes.
- xml:lang which was initially part of XHTML, is now also part of HTML.
- hidden, data-*, contenteditable, and translate have been added.
{{SpecName("HTML4.01")}}{{Spec2("HTML4.01")}}There are no global attributes defined. Several attributes that will become global attributes in subsequent specifications are defined on a subset of elements.
- class and style are supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.
- dir is supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.
- id is supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.
- lang is supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.
- tabindex is only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.
- accesskey is only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}} and {{HTMLElement("textarea")}}.
- title is supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, and {{HTMLElement("title")}}.
- -

Browser compatibility

- -

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

- -

{{Compat("html.global_attributes")}}

- -

See also

- {{DOMxRef("Element")}} and {{DOMxRef("GlobalEventHandlers")}} interfaces that allow to query most global attributes.
-
diff --git a/files/de/web/html/globale_attribute/inputmode/index.html b/files/de/web/html/globale_attribute/inputmode/index.html deleted file mode 100644 index d5dd048922..0000000000 --- a/files/de/web/html/globale_attribute/inputmode/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: inputmode -slug: Web/HTML/Globale_Attribute/inputmode -tags: - - Attribute - - Bearbeiten - - Eingabemodus - - Formulare - - Globale Attribute - - HTML - - Referenz - - Text - - Texteingabe - - Web - - global -translation_of: Web/HTML/Global_attributes/inputmode ---- -

Das inputmode globale Attribut ist ein aufgezähltes Attribut, das einen Hinweis auf die Art der Daten liefert, die der Benutzer während der Bearbeitung des Elements oder seines Inhalts eingeben kann. Es kann die folgenden Werte haben:

- -
-
"none"
-
Keine virtuelle Tastatur; dies ist nützlich, wenn die Anwendung oder die Website ihre eigene Tastatureingabesteuerung implementiert.
-
"text"
-
Standard-Text-Eingabetastatur für das aktuelle Gebietsschema des Benutzers.
-
"decimal"
-
Fraktionierte numerische Eingabetastatur, die die Ziffern und das entsprechende Trennzeichen für das Gebietsschema des Benutzers enthält (typischerweise entweder "." oder ",").
-
"numeric"
-
Numerische Eingabetastatur; alles, was benötigt wird, sind die Ziffern 0 bis 9.
-
"tel"
-
Eine Telefontastatur-Eingabe, die die Ziffern 0 bis 9, das Sternchen ("*") und die Pfund-Taste ("#") enthält. Für Formulareingaben, die eine Telefontastatur erfordern, sollte stattdessen <input type="tel"> verwendet werden.
-
"search"
-
Eine virtuelle Tastatur, die für die Sucheingabe optimiert ist. So kann beispielsweise die Eingabetaste in "Suchen" umbenannt werden, und es kann weitere Optimierungen geben.
-
"email"
-
Eine virtuelle Tastatur, die für die Eingabe von E-Mail-Adressen optimiert ist; typischerweise beinhaltet dies das Zeichen "@" sowie andere Optimierungen. Für Formulareingaben, die eine Eingabe der E-Mail-Adresse erfordern, sollte stattdessen <input type="email"> verwendet werden.
-
"url"
-
Eine Tastatur, die für die Eingabe von URLs optimiert ist. Dies kann z.B. dazu führen, dass die Taste "/" prominenter verfügbar ist. Erweiterte Funktionen können auch den Zugriff auf die Historie und dergleichen beinhalten. Für Formulareingaben, die eine URL anfordern, sollte stattdessen <input type="url"> verwendet werden.
-
- -

Wenn dieses Attribut nicht gesetzt ist, lautet sein Standardwert "text", was darauf hinweist, dass die Standard-Text-Eingabetastatur des Gebietsschemas verwendet werden sollte.

- -
-

Spezifischer Konflikt: Das WHATWG spec lists inputmode, und moderne Browser arbeiten daran, sie zu unterstützen. Das W3C HTML 5.2 spec listet es nicht mehr (markiert es als veraltet). Sie sollten die WHATWG-Definition als richtig betrachten, bis ein Konsens erreicht ist.

-
- -

Spezifikationen

- - - - - - - - - - - - - - - - -
SpezifikationStatusBemerkung
{{SpecName("HTML WHATWG", "interaction.html#input-modalities:-the-inputmode-attribute", "inputmode")}}{{Spec2("HTML WHATWG")}} 
- -

Browser-Kompatibilität

- - - -

{{Compat("html.global_attributes.inputmode")}}

- -

Siehe auch

- - - -
{{HTMLSidebar("Global_attributes")}}
diff --git a/files/de/web/html/globale_attribute/is/index.html b/files/de/web/html/globale_attribute/is/index.html deleted file mode 100644 index ff888d1002..0000000000 --- a/files/de/web/html/globale_attribute/is/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: is -slug: Web/HTML/Globale_Attribute/is -translation_of: Web/HTML/Global_attributes/is ---- -
{{HTMLSidebar("Global_attributes")}}
- -

The is global attribute allows you to specify that a standard HTML element should behave like a defined custom built-in element (see Using custom elements for more details).

- -

This attribute can only be used if the specified custom element name has been successfully defined in the current document, and extends the element type it is being applied to.

- -

Examples

- -

The following code is taken from our word-count-web-component example (see it live also).

- -
// Create a class for the element
-class WordCount extends HTMLParagraphElement {
-  constructor() {
-    // Always call super first in constructor
-    super();
-
-    // Constructor contents ommitted for brevity
-    ...
-
-  }
-}
-
-// Define the new element
-customElements.define('word-count', WordCount, { extends: 'p' });
- -
<p is="word-count"></p>
- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', "custom-elements.html#attr-is", "is")}}{{Spec2('HTML WHATWG')}} 
- -

Browser compatibility

- - - -

{{Compat("html.global_attributes.is")}}

- -

See also

- - diff --git a/files/de/web/html/globale_attribute/kontextmenu/index.html b/files/de/web/html/globale_attribute/kontextmenu/index.html deleted file mode 100644 index 33c1cc2e99..0000000000 --- a/files/de/web/html/globale_attribute/kontextmenu/index.html +++ /dev/null @@ -1,169 +0,0 @@ ---- -title: Kontextmenü -slug: Web/HTML/Globale_Attribute/kontextmenu -tags: - - Globale Attribute - - HTML - - Kontextmenü - - Referenz -translation_of: Web/HTML/Global_attributes/contextmenu ---- -
{{HTMLSidebar("Global_attributes")}}
- -
-

Das contextmenu Attrbut ist obsolet und die Unterstützung wird aus allen Browsern entfernt werden.

-
- -

Das globale Attribut contextmenu ist die id von einem {{HTMLElement("menu")}}, welches als Kontextmenü benutzt werden soll.

- -

Ein Kontextmenü ist ein Menü, dass nach einer Interaktion des Benutzers erscheint. HTML5 erlaubt nun, dieses Menü anzupassen. Hier sind ein paar Beispiele, inklusive verschachtelter Menüs.

- -

Beispiel

- -

HTML

- -
<body contextmenu="share">
-  <menu type="context" id="share">
-    <menu label="share">
-      <menuitem label="Twitter" onclick="shareViaTwitter()"></menuitem>
-      <menuitem label="Facebook" onclick="shareViaFacebook()"></menuitem>
-    </menu>
-  </menu>
-  <ol>
-    <li>
-      Überall in diesem Beispiel kannst du die Seite über das Kontextmenü auf Twitter und Facebook teilen.
-    </li>
-    <li contextmenu="changeFont" id="fontSizing">
-      In diesem besonderen Listen-Element kannst du die Schriftgröße eines
-      Textes über das Kontextmenü vergrößern und verkleinern.
-    </li>
-    <menu type="context" id="changeFont">
-      <menuitem label="Schrift vergrößern" onclick="incFont()"></menuitem>
-      <menuitem label="Schrift verkleinern" onclick="decFont()"></menuitem>
-    </menu>
-    <li contextmenu="ChangeImage" id="changeImage">
-      Auf dem unteren Bild kannst du die Option
-      "Wechsele Bild" im Kontextmenü auswählen.<br />
-      <img src="https://developer.mozilla.org/media/img/promote/promobutton_mdn5.png"
-          contextmenu="ChangeImage" id="promoButton" />
-      <menu type="context" id="ChangeImage">
-        <menuitem label="Wechsele Bild" onclick="changeImage()"></menuitem>
-      </menu>
-    </li>
-  </ol>
-</body>
-
- -

JavaScript

- -
function shareViaTwitter() {
-  window.open("https://twitter.com/intent/tweet?text=" +
-      "Hurray! I am learning ContextMenu from MDN via Mozilla");
-}
-
-function shareViaFacebook() {
-  window.open("https://facebook.com/sharer/sharer.php?u=" +
-      "https://developer.mozilla.org/en/HTML/Element/Using_HTML_context_menus");
-}
-
-function incFont() {
-  document.getElementById("fontSizing").style.fontSize = "larger";
-}
-
-function decFont() {
-  document.getElementById("fontSizing").style.fontSize = "smaller";
-}
-
-function changeImage() {
-  var index = Math.ceil(Math.random() * 39 + 1);
-  document.images[0].src =
-      "https://developer.mozilla.org/media/img/promote/promobutton_mdn" +
-      index + ".png";
-}
- -

Ergebnis

- -

{{EmbedLiveSample("Beispiel", "100%", 400)}}

- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', "forms.html#attr-contextmenu", "contextmenu")}}{{Spec2('HTML WHATWG')}}Keine Änderungen seit dem letzten Snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "interactive-elements.html#context-menus", "contextmenu")}}{{Spec2('HTML5.1')}}Snapshot von {{SpecName('HTML WHATWG')}}, initiale Definition.
- -

Browser Kompatibilität

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatNo}}[1]{{CompatGeckoDesktop(9)}}{{CompatNo}}{{CompatNo}}[1]{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatNo}}{{CompatGeckoDesktop(20)}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}
-
- -

[1] Eine experimentelle Implementation war zwischenzeitlich mit der Kommandozeilen-Option --enable-blink-features=ContextMenu verfügbar. Bis Chrome 52 und Opera 39 war diese außerdem durch Aktivieren der Option Experimental Web Platform verfügbar, welche aber aufgrund eines Kompatibilitätsproblems entfernt wurde. Dies ist dokumentiert in Chromium bug 87553.

- -

Siehe auch

- - diff --git a/files/de/web/html/globale_attribute/lang/index.html b/files/de/web/html/globale_attribute/lang/index.html deleted file mode 100644 index 705dfa4396..0000000000 --- a/files/de/web/html/globale_attribute/lang/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: lang -slug: Web/HTML/Globale_Attribute/lang -tags: - - Attribute - - HTML - - Referenz - - Sprachen - - global -translation_of: Web/HTML/Global_attributes/lang ---- -
{{HTMLSidebar("Global_attributes")}}
- -

Das globale Attribut lang global attribute wird verwendet, um die Sprache eines Elementes oder die zu verwendene Sprache für zu bearbeitende Elemente festzulegen. Dieses Attribut enthält nur einen Wert, der der Richtlinie "Tags for Identifying Languages (BCP47)" entspricht. Wenn kein Wert festgelegt wurde, wird automatisch unknown als Sprache festgelegt; Nach BCP47 ungültige Werte werden als invalid behandelt.

- -

Auch wenn ein Wert für das lang-Attribut vergeben wurde, kann es vorkommen, dass es nicht beachtet wird, weil ein xml:lang-Attribut immer priorisiert wird.

- -

Für die CSS-Klasse {{cssxref(":lang")}} gilt, dass zwei ungültige Werte getrennt von einander behandelt werden, wenn sich ihr Name unterscheidet. (Wenn Sie dies nicht verstehen, lesen Sie bitte den englischen Originalartikel.

- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpezifikiationStatusKommentar
{{SpecName('HTML WHATWG', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}{{Spec2('HTML WHATWG')}}Keine Veränderungen zur letzten Version, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}{{Spec2('HTML5.1')}}Version von {{SpecName('HTML WHATWG')}}, Keine Veränderungen zu {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}{{Spec2('HTML5 W3C')}}Version von {{SpecName('HTML WHATWG')}}, Verhalten bei xml:lang und vorbestimmten Sprachgen durch einen Algorithmus festgelegt. Ebenfalls ein echtes globales Attribut.
{{SpecName('HTML4.01', 'struct/dirlang.html#h-8.1', 'lang')}}{{Spec2('HTML4.01')}}Unterstützt alle Elemente außer diesen: {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.
- -

Browserkompatibilität

- -

{{Compat("html.global_attributes.lang")}}

- -

Siehe auch

- - diff --git a/files/de/web/html/globale_attribute/style/index.html b/files/de/web/html/globale_attribute/style/index.html deleted file mode 100644 index 7c3c2b5c77..0000000000 --- a/files/de/web/html/globale_attribute/style/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: style -slug: Web/HTML/Globale_Attribute/style -translation_of: Web/HTML/Global_attributes/style ---- -
{{HTMLSidebar("Global_attributes")}}
- -

Das globale Attribut style kann CSS-Stilvorschriften für das entsprechende Element enthalten. Bitte beachten Sie, dass eine Auslagerung der Stilvorschriften in eine externe CSS-Datei vorzuziehen sind! Dieses Attribut und das {{HTMLElement("style")}}-Element haben den großen Vorteil, schnell ein paar Stilvorschriften festzulegen, zum Beispiel um etwas nur kurz zu testen.

- -
-

Verwendung: Dieses Attribut sollte nicht für inhaltliche Informationen genutzt werden. Wenn alle Stilvorschriften entfernt wurden, soll die Seite dennoch inhaltlich korrekt bleiben. Deshalb sollte es auch nicht zum Verstecken von irrelevanten Informationen genutzt werden, dieses Ziel verfolgt man am besten mit dem hidden-Attribut.

-
- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', "dom.html#the-style-attribute", "style")}}{{Spec2('HTML WHATWG')}}Keine Änderungen seit der letzten Version {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#the-style-attribute", "style")}}{{Spec2('HTML5.1')}}Version {{SpecName('HTML WHATWG')}}, keine Ändeurngen zur Version {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#the-style-attribute", "style")}}{{Spec2('HTML5 W3C')}}Version {{SpecName('HTML WHATWG')}}. Seit {{SpecName("HTML4.01")}} ist es nun ein globales Attribut
{{SpecName('HTML4.01', 'present/styles.html#h-14.2.2', 'style')}}{{Spec2('HTML4.01')}}Unterstützt alle Elemente außer {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, und {{HTMLElement("title")}}.
{{SpecName("CSS3 Style", "", "")}}{{Spec2("CSS3 Style")}}Definiert den Inhalt des style-Attributes.
- -

Browserkompatibilität

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FunktionChromeFirefox (Gecko)Internet ExplorerOperaSafari
grundlegende Unterstützung{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FunktionAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
grundlegende Unterstützung{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Weitere Informationen

- - diff --git a/files/de/web/html/globale_attribute/tabindex/index.html b/files/de/web/html/globale_attribute/tabindex/index.html deleted file mode 100644 index e097cc7985..0000000000 --- a/files/de/web/html/globale_attribute/tabindex/index.html +++ /dev/null @@ -1,130 +0,0 @@ ---- -title: tabindex -slug: Web/HTML/Globale_Attribute/tabindex -tags: - - Accessibility - - Global attributes - - HTML - - Reference - - a11y -translation_of: Web/HTML/Global_attributes/tabindex ---- -
{{HTMLSidebar("Global_attributes")}}
- -

Das  Globale Attribut tabindex gibt an, ob sein Element fokussiert werden kann, ob und an welcher Stelle es an der sequentiellen Tastaturnavigation beteiligt ist (normalerweise mit der Tabulatortaste, daher der Name).

- -
{{EmbedInteractiveExample("pages/tabbed/attribute-tabindex.html","tabbed-standard")}}
- - - -

Es akzeptiert einen Integer als Wert der zu unterschiedlichen Ergebnissen führt, abhängig von diesen Werten:

- -
    -
  • -

    Ein negativer Wert (normalerweise tabindex="-1") bedeutet, dass das Element fokussierbar, jedoch nicht durch die sequenzielle Tastaturnavigation erreichbar sein sollte. Er ist meistens hilfreich um barrierefreie Widgets mit JavaScript zu erstellen.

    -
    • -
  • -
    -

    Dies ist hilfreich, wenn Inhalte außerhalb des Bildschirms vorhanden sind, welche zu einem bestimmten Ereignis in Erscheinung treten. Es ist nicht möglich ein Element mit der Tastatur zu fokussieren, das einen negativen tabindex hat. Jedoch ist es möglich, es mittels der focus() Methode aufzurufen.

    -
    - - -
    • -
- -
- -
    -
  • -

    tabindex="0" bedeutet, dass das Element mittels der sequenziellen Tastaturnavigation fokussierbar ist, wobei die Aufrufreihenfolge von der Quellreihenfolge des Dokuments definiert ist

    -
    • -
  • -
    -

    Die CSS-Positionierung wirkt sich nicht auf die Tab-Reihenfolge aus. Es wird sich nur die visuelle Reihenfolge der Elemente ändern. Tab-Reihenfolge entspricht der Quellreihenfolge! 

    -
    - - -
    • -
- -
- -
    -
  • -

    Ein positiver Wert bedeutet, dass das Element in der sequenziellen Tastaturnavigation fokussierbar sein kann, wobei seine Reihenfolge durch den Wert der Zahl definiert wird. tabindex="4" würde also vor tabindex="5", aber nach tabindex="3" fokussiert werden. Wenn mehrere Elemente den gleichen positiven tabindex-Wert haben, folgt ihre Reihenfolge relativ zu ihrer Position in der Dokumentquelle.

    - -
    -

    Vermeiden Sie die Verwendung von tabindex-Werten größer als 0. Dies erschwert es Benutzern, die auf assistive Technologie angewiesen sind, durch Seiteninhalte zu Navigieren und sie zu Bedienen.

    -
    -
    • -
- -
-

Es wird nicht empfohlen, den Elementen positive Werte zu geben. Am Ende springt der Fokus zwischen den Elementen und es wird verwirrend, die tabindex-Attributwerte einzelner Elemente zu manipulieren. Empfehlenswert ist, sie in einer geeigneten DOM-Sequenz zu schreiben.

-
- -

Wenn das tabindex-Attribut für ein {{htmlelement ("div")}} festgelegt wird, kann der untergeordnete Inhalt nicht mit den Pfeiltasten gescrollt werden. Außer, der tabindex wurde für den Inhalt festgelegt. Folgendes fiddle hilft beim Verstehen der Scrolleffekte des tabindex.

- -
-

Hinweis: Der maximale Wert für tabindex ist 32767. Wenn er nicht spezifiziert ist, wird der Standardwert von 0 angenommen.

-
- -

Bedenken zur Barrierefreiheit

- - - -

Vermeiden Sie die Verwendung des tabindex-Attributs in Verbindung mit nichtinteraktiven Inhalten, um Elemente durch die Tastatureingabe interaktiv fokussierbar zu machen, wie etwa zum Beispiel die Verwendung eines {{HTMLElement ("div")}} Elements, um eine Schaltfläche zu erzeugen, anstelle des {{HTMLElement ("button")}} Elements.

- -

Interaktive Komponenten, die mit nichtinteraktiven Elementen erstellt wurden, gelangen nicht in der accessibility tree für Eingabehilfen aufgeführt. Dadurch wird verhindert, dass assistive Technologien zu ihnen navigieren und sie manipulieren können. Der Inhalt sollte semantisch mit interaktiven Elementen ({{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}, etc.) beschrieben werden. Diese Elemente verfügen über integrierte Rollen und Zustände, die den Status der Zugänglichkeit mitteilen, die andernfalls durch ARIA verwaltet werden müsste.

- - - -

Spezifikationen

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', "interaction.html#attr-tabindex", "tabindex")}}{{Spec2('HTML WHATWG')}}No change from latest snapshot, {{SpecName('HTML5.1')}}.
{{SpecName('HTML5.1', "editing.html#the-tabindex-attribute", "tabindex")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}.
{{SpecName('HTML5 W3C', "editing.html#attr-tabindex", "tabindex")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName("HTML4.01")}}, the attribute is now supported on all elements (global attributes).
{{SpecName('HTML4.01', 'interact/forms.html#adef-tabindex', 'tabindex')}}{{Spec2('HTML4.01')}}Only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.
- -

Browserkompatibilität

- - - -

{{Compat("html.global_attributes.tabindex")}}

- -

Siehe auch

- - diff --git a/files/de/web/html/globale_attribute/title/index.html b/files/de/web/html/globale_attribute/title/index.html deleted file mode 100644 index 2d94d0202c..0000000000 --- a/files/de/web/html/globale_attribute/title/index.html +++ /dev/null @@ -1,164 +0,0 @@ ---- -title: title -slug: Web/HTML/Globale_Attribute/title -tags: - - Globales Attribut - - HTML - - Referenz - - Referenzen -translation_of: Web/HTML/Global_attributes/title ---- -

{{HTMLSidebar("Global_attributes")}}

- -

Der title globales Attribut beinhaltet einen Text mit Informationen über das Element zu welchem es gehört. Diese Informationen werden dem Benutzer üblicherweise (aber nicht nur) als Tooltip angezeigt. Hier sind einige typische Beispiele für dieses Attribut:

- -
    -
  • Link: Der Titel oder die Beschreibung des verlinkten Dokuments
    • -
  • Media Elemente, (z.B.: ein Bild): eine Beschreibung oder Quellenangabe
    • -
  • Paragraph: eine Fusszeile oder ein Kommentar über den Paragraphen
    • -
  • Zitate: Informationen über den Autor, usw.
    • -
- -

Wenn dieses Attribut weggelassen wird, ist das title Attribut des nächsten Vorgängers des Elements gültig (und kann somit als Tooltip für das Element verwendet werden). Wenn das Attribut als leerer String gesetzt wird, wird das title Attribut des Vorgängers explizit außer Kraft gesetzt (und sollte nicht als Tooltip für das Element verwendet werden).

- -

Zusätzliche Semantics sind für die title Attribute der {{ HTMLElement("link") }}, {{ HTMLElement("abbr") }}, {{ HTMLElement("input") }} und {{ HTMLElement("menuitem") }} Elemente definiert.

- -

Das title Attribut darf Mehrzeilig sein. Jede eingefügte  U+000A LINE FEED (LF) repräsentiert eine solche newline. Aber Achtung! Dies bedeutet, dass:

- -
<p>Newlines in title should be taken into account,like this <abbr title="This is a
-multiline title">example</abbr>.</p>
-
- -

einen zweizeiligen Titel definiert.

- -

Bedenken bezüglich des barrierefreien Internet

- -

Die Nutzung des title Attributs ist sehr problematisch für:

- -
    -
  • Menschen, die nur Berührungsgeräte benutzen
    • -
  • Menschen, die das Internet nur mit dem Keyboard navigieren
    • -
  • Menschen, die mit unterstützenden Technologien wie einem Bildschirmleser auf das Internet zugreifen
    • -
  • Menschen mit Beeinträchtigungen in der Feinmotorik
    • -
  • Menschen mit kognitiven Bedenken
    • -
- -

Dies kann besonders auf inkonsistenten Browser Support zurückgeführt werden. Dies ist des Weiteren ein Problem, da unterstützende Technologien zu mehr Komplexität beim Browser-Rendering der Seite führen. Falls ein Tooltip Effekt gewollt sein sollte, ist es besser eine der folgenden Browsermethoden zu benutzen.

- -

 

- - - -

 

- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', "elements.html#the-title-attribute", "title")}}{{Spec2('HTML WHATWG')}}No change from latest snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#the-title-attribute", "title")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#the-title-attribute", "title")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName("HTML4.01")}}, it is now a true global attribute.
{{SpecName('HTML4.01', 'struct/global.html#adef-title', 'title')}}{{Spec2('HTML4.01')}}Supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, and {{HTMLElement("title")}}.
- -

Browser Kompatibilität

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Multi-line support{{ CompatVersionUnknown() }}{{CompatGeckoDesktop(12)}}{{ CompatVersionUnknown() }}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Multi-line support{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(12)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

Siehe auch

- -
    -
  • Alle globalen Attribute.
    • -
  • {{domxref("HTMLElement.title")}} welches dieses Attribut reflektiert
    • -
diff --git a/files/de/web/html/globale_attribute/translate/index.html b/files/de/web/html/globale_attribute/translate/index.html deleted file mode 100644 index 5cf914afb3..0000000000 --- a/files/de/web/html/globale_attribute/translate/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Übersetztung in Deutsch -slug: Web/HTML/Globale_Attribute/translate -tags: - - DE von LV - - Editor's. - - Everyone - - Experimental-De - - HTML-DE - - german -translation_of: Web/HTML/Global_attributes/translate ---- -

Anerkannte englische (US) Version:

- -

 {{HTMLSidebar ("Global_attributes")}}

- -

 Das Attribut translate global ist ein Aufzählungsattribut, mit dem angegeben wird, ob die übersetzbaren Attributwerte eines Elements und die untergeordneten Knoten {{domxref ("Text")}} beim Lokalisieren der Seite übersetzt werden sollen oder ob sie unverändert bleiben sollen.  Es kann folgende Werte annehmen:

- -
    -
  •      leere Zeichenfolge oder "Ja", die angibt, dass das Element übersetzt werden soll, wenn die Seite lokalisiert wird.
    • -
  •      "no" gibt an, dass das Element nicht übersetzt werden darf.
    • -
- -

 Obwohl nicht alle Browser dieses Attribut erkennen, wird es von automatischen Übersetzungssystemen wie Google Translate und möglicherweise auch von Tools, die von menschlichen Übersetzern verwendet werden, respektiert.  Aus diesem Grund ist es wichtig, dass Webautoren dieses Attribut verwenden, um Inhalte zu markieren, die nicht übersetzt werden

- -

Verwenden des Übersetzungsattributs von HTML.

- -

Tags übersetzen Kategorisieren Sie den Artikel. Dadurch wird der Artikel unter den richtigen Filtern in der Suchmaschine auffindbar.

- -

DE German, HTML-DE, Experimental-De, Everyone, Editor's..Github. L. v

diff --git a/files/de/web/html/html5/html5_element_list/index.html b/files/de/web/html/html5/html5_element_list/index.html deleted file mode 100644 index 4b38e72119..0000000000 --- a/files/de/web/html/html5/html5_element_list/index.html +++ /dev/null @@ -1,587 +0,0 @@ ---- -title: Liste der HTML5-Elemente -slug: Web/HTML/HTML5/HTML5_element_list -translation_of: Web/HTML/Element -translation_of_original: Web/Guide/HTML/HTML5/HTML5_element_list ---- -

Auf dieser Seite finden Sie eine Liste aller Standard HTML5-Elemente, beschrieben durch ihr öffnendes Tag, nach Funktion gruppiert. Diese Liste enthält ausschließlich die gültigen HTML5-Elemente. In neuen Websites sollten nur die hier aufgezählten Tags verwendet werden. Eine komplette Liste aller HTML-Elemente finden Sie im Index aller HTML-Elemente. Dieser enthält sämtliche möglichen Tags: standardisierte, nicht-standardkonforme, gültige, obsolete und als veraltet ("deprecated") betrachtete.

- -

Das Symbol Neu in HTML5 steht für ein in HTML5 neu hinzugekommenes Element. Beachten Sie, dass andere hier aufgeführte Elemente in der HTML5-Spezifikation möglicherweise verändert oder erweitert wurden.

- -

Das Wurzelelement

- - - - - - - - - - - - - - -
TagBeschreibung
{{ HTMLElement("html") }}Steht für den Wurzelknoten eines HTML- oder XHTML-Dokuments. Alle weiteren Elemente müssen Nachkommen dieses Elements sein.
- -

Metadaten des Dokuments

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
TagBeschreibung
{{ HTMLElement("head") }}Bezeichnet eine Sammlung von Metadaten des Dokuments. Hierzu gehören auch Links zu oder Definitionen von Skripts und Stylesheets.
{{ HTMLElement("title") }}Definiert den Titel eines Dokuments, der in der Titelzeile des Browsers im Tab der betreffenden Seite angezeigt wird. Darf ausschließlich Text enthalten. Eventuell enthaltene Tags werden nicht interpretiert.
{{ HTMLElement("base") }}Definiert den Basis-URL für in der Seite verwendete relative URLs.
{{ HTMLElement("link") }}Wird verwendet, um externe JavaScript- und CSS-Dateien in das aktuelle HTML-Dokument einzubinden.
{{ HTMLElement("meta") }}Wird für die Definition von Metadaten verwenden, die mit keinem anderen HTML-Element definiert werden können.
{{ HTMLElement("style") }}Tag für die Definition eines internen CSS-Stylesheets.
- -

Skripting

- - - - - - - - - - - - - - - - - - -
TagBeschreibung
{{ HTMLElement("script") }}Definiert entweder ein internes Skript oder einen Link auf ein externes Skript. Als Programmiersprache wird JavaScript verwendet.
{{ HTMLElement("noscript") }}Definiert alternative Inhalte, die angezeigt werden sollen, wenn der Browser kein Skripting unterstützt.
- -

Abschnitte (Sections)

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
TagBeschreibung
{{ HTMLElement("body") }} -
Steht für den Hauptinhalt eines HTML-Dokuments. Jedes Dokument kann nur ein <body>-Element enthalten.
-
{{ HTMLElement("section") }} Neu in HTML5Beschreibt einen Abschnitt eines Dokuments.
{{ HTMLElement("nav") }} Neu in HTML5Beschreibt einen Abschnitt der ausschließlich Navigationslinks enthält.
{{ HTMLElement("article") }} Neu in HTML5Beschreibt eigenständigen Inhalt, der unabhängig von den übrigen Inhalten sein kann.
{{ HTMLElement("aside") }} Neu in HTML5Steht für eine Randbemerkung. Der übrige Inhalt sollte auch verständlich sein, wenn dieses Element entfernt wird.
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>Hiermit werden Überschriften definiert. Es gibt sechs verschiedene Hierarchieebenen, wobei <h1>
- für die Hauptüberschrift steht und <h6> für eine Überschrift der untersten Ebene. Eine Überschrift beschreibt knapp das Thema des Abschnitts, dem sie voransteht.
{{ HTMLElement("header") }} Neu in HTML5Definiert den Kopfteil ("header") einer Seite oder eines Abschnitts. Er enthält oft ein Logo, den Titel der Website und die Seitennavigation.
{{ HTMLElement("footer") }} Neu in HTML5Definiert den Fußteil ("footer") einer Seite oder eines Abschnitts. Er enthält oft Copyright-Hinweise, einen Link auf das Impressum oder Kontaktadressen.
{{ HTMLElement("address") }} -

Definiert einen Abschnitt mit Kontaktinformationen.

-
{{ HTMLElement("main") }} Neu in HTML5Definiert den Hauptinhalt der Seite. Es ist nur ein <main> Element pro Seite zulässig.
- -

Inhalte gruppieren

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
TagBeschreibung
{{ HTMLElement("p") }}Der Inhalt dieses Elements soll als Absatz dargestellt werden.
{{ HTMLElement("hr") }}Bezeichnet einen thematischen Bruch zwischen Absätzen eines Abschnitts, Artikels oder anderem längeren Inhalt.
{{ HTMLElement("pre") }}Zeigt an, das der Inhalt dieses Elements vorformatiert ist und das dieses Format erhalten bleiben soll.
{{ HTMLElement("blockquote") }}Kennzeichnet ein Zitat.
{{ HTMLElement("ol") }}Definiert eine geordnete Liste, bei der die Einträge eine bestimmte Reihenfolge haben müssen.
{{ HTMLElement("ul") }}Definiert eine Liste ungeordneter Einträge.
{{ HTMLElement("li") }}Kennzeichnet einen Listeneintrag. Diesem wird oftmals ein Aufzählungszeichen ("bullet") vorangestellt.
{{ HTMLElement("dl") }}Kennzeichnet eine Definitionsliste aus Begriffen und den dazugehörigen Definitionen.
{{ HTMLElement("dt") }}Kennzeichnet einen Begriff der im folgenden <dd>-Element beschrieben wird.
{{ HTMLElement("dd") }}Markiert die Definition des oder der Begriffe, die in den direkt vorangehenden <dt>-Element angegeben wurden.
{{ HTMLElement("figure") }} Neu in HTML5Kennzeichnet eine Abbildung, die einen Teil des Dokuments illustriert.
{{ HTMLElement("figcaption") }} Neu in HTML5Bezeichnet die Beschriftung einer Abbildung.
{{ HTMLElement("div") }}Bezeichnet ein allgemeines Container-Element ohne spezielle semantische Bedeutung. Wird oft zusammen mit class- oder id-Attributen verwendet, um es in Skripts oder Stylesheets auswählen zu können.
- -

Semantische Text-Elemente

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
TagBeschreibung
{{ HTMLElement("a") }}Bezeichnet einenHyperlink , der auf eine andere Ressource verweist (angegeben durch das href-Attribut).
{{ HTMLElement("em") }}Steht fürhervorgehobenen Text. 
{{ HTMLElement("strong") }}Markiert besonderswichtigen  (stark hervorgehobenen) Text.
{{ HTMLElement("small") }}Steht für das "Kleingedruckte" eines Dokuments, wie Ausschlussklauseln, Copyright-Hinweise oder andere Dinge, die für das Verständnis des Dokuments nicht unbedingt nötig sind.
{{ HTMLElement("s") }}Wird für Inhalte verwendet, dienicht länger relevant oder akkurat sind. Wird meist durchgestrichen dargestellt.
{{ HTMLElement("cite") }}Steht für denTitel eines Werks.
{{ HTMLElement("q") }}Bezeichnet einKurzzitat . Für längere Zitate sollte <blockquote> verwendet werden.
{{ HTMLElement("dfn") }}Steht für einen Begriff, dessenDefinition im nächstgelegenen Nachkommen-Element enthalten ist.
{{ HTMLElement("abbr") }}Bezeichnet eineAbkürzung oder einAkronym .
{{ HTMLElement("data") }} Neu in HTML5Verbindet seinen Inhalt mit einemmaschinenlesbaren Equivalent, angegeben im value-Attribut. (Dieses Element wird nur in der WHATWG-Version des HTML-Standards definiert, nicht aber in der W3C-Version von HTML5).
{{ HTMLElement("time") }} Neu in HTML5Steht für einen Wert, derDatum undUhrzeit angibt .
{{ HTMLElement("code") }}Wird verwendet, umProgrammiercode zu markieren.
{{ HTMLElement("var") }}Steht für eineVariable. Dies kann ein tatsächlicher mathematischer Ausdruck oder Programmierungskontext sein, ein Identifier für eine Konstante, ein Symbol für eine physikalische Größe, ein Funktionsparameter oder einfach ein Platzhalter.
{{ HTMLElement("samp") }}Markiert dieAusgabe eines Programms oder eines Computers.
{{ HTMLElement("kbd") }}Steht für eine Benutzereingabe, oftmals, aber nicht unbedingt, auf der Tastatur. Kann auch für andere Eingaben, beispielsweise transkribierte Sprachbefehle stehen.
{{ HTMLElement("sub") }},{{ HTMLElement("sup") }}Markierttiefgestellten , bzw. hochgestellten Text.
{{ HTMLElement("i") }}Steht für einen Textabschnitt, der vom übrigen Inhalt abgesetzt und üblicherweise kursiv dargestellt wird, ohne für eine spezielle Betonung oder Wichtigkeit zu stehen. Dies kann beispielsweise eine taxonomische Bezeichnung, ein technischer Begriff, ein idiomatischer Ausdruck, ein Gedanke oder der Name eines Schiffes sein.
{{ HTMLElement("b") }}Steht für einen Textabschnitt, der vom übrigen Inhalt abgesetzt und üblicherweise fettgedruckt dargestellt wird, ohne für eine spezielle Betonung oder Wichtigkeit zu stehen. Dies kann beispielsweise ein Schlüsselwort oder ein Produktname in einer Produktbewertung sein.
{{ HTMLElement("u") }}Steht für einen Textabschnitt, der vom übrigen Inhalt abgesetzt und üblicherweise unterstrichen dargestellt wird, ohne für eine spezielle Betonung oder Wichtigkeit zu stehen. Dies könnte beispielsweise ein Eigenname auf in chinesischer Sprache sein oder ein Textabschnitt, der häufig falsch buchstabiert wird.
{{ HTMLElement("mark") }} Neu in HTML5Steht für Text, der aus Referenzgründen hervorgehoben wird, d.h. der in anderem Kontext von Bedeutung ist.
{{ HTMLElement("ruby") }} Neu in HTML5 -

Bezeichnet einen Textteil mit Ruby-Annotationen. Dies sind kurze Aussprachetipps und andere Hinweise, die hauptsächlich für ostasiatische Typografie verwendet werden.

-
{{ HTMLElement("rt") }} Neu in HTML5Bezeichnet den Text einer Ruby-Annotation.
{{ HTMLElement("rp") }} Neu in HTML5Wird zusammen mit dem Element <ruby> verwendet, um Ruby-Text mit Klammern zu umgeben, die angezeigt werden, wenn das Benutzerprogramm (Browser) keine Ruby-Annotationen unterstützt.
{{ HTMLElement("bdi") }} Neu in HTML5Markiert Text, der vom umgebenden Inhalt zum Zweck der bidirektionalen Formatierung (z.B. arabischer Text innerhalb von deutschsprachigen Inhalten) isoliert werden soll. Hiermit kann ein Textabschnitt mit einer unterschiedlichen oder unbekannten Textrichtung gekennzeichnet werden.
{{ HTMLElement("bdo") }}Kann verwendet werden, um die Textrichtung der enthaltenen Kindelemente zu steuern. Hiermit kann der Unicode BiDi-Algorithmus explizit überschrieben werden.
{{ HTMLElement("span") }}Markiert einen allgemeinen Textabschnitt. Das <span>-Element erhält seine Bedeutung meistens durch ein class- oder ein id-Attribut, wodurch es außerdem für Skripte zugänglich ist und von Stylesheets ausgewählt werden kann.
{{ HTMLElement("br") }}Bezeichnet einenZeilenumbruch .
{{ HTMLElement("wbr") }} Neu in HTML5Hiermit kann die Gelegenheit für einen Zeilenumbruch gekennzeichnet werden, mit dem die Lesbarkeit verbessert werden kann, wenn der Text auf mehrere Zeilen verteilt wird.
- -

Änderungen am Dokument

- - - - - - - - - - - - - - - - - - -
TagBeschreibung
{{ HTMLElement("ins") }}Markiert einen zum Dokument hinzugefügten Teil.
{{ HTMLElement("del") }}Markiert einen aus dem Dokument entfernten Teil.
- -

Eingebettete Inhalte (Ersetzte Elemente)

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
TagBeschreibung
{{ HTMLElement("img") }}Steht für einBild .
{{ HTMLElement("iframe") }}Definiert einen so genannten Iframe, mit dem ein HTML-Dokument in seinem eigenen Kontext in das aktuelle Dokument eingebettet werden kann.
{{ HTMLElement("embed") }} Neu in HTML5Steht für einen Einbindungspunkt für externe Ressourcen. Dies sind typischerweise keine HTML-Inhalte, sondern beispielsweise eine Applikation oder interaktiver Inhalt, der mit Hilfe eines Plugins (anstatt nativ durch das Benutzerprogramms) dargestellt wird.
{{ HTMLElement("object") }}Steht für allgemeinen externen Inhalt, der je nach Kontext als Bild, "verschachtelter Browsing-Kontext" (s. iframe), oder externer Inhalt (der mit Hilfe eines Plugins darsgestellt wird) betrachtet wird.
{{ HTMLElement("param") }}Definiert Parameter für ein Plugin, das für die Darstellung eines mit <object> eingebundenen Elements verwendet werden.
{{ HTMLElement("video") }} Neu in HTML5Steht für eine Videodatei und die dazugehörigen Audiodateien, sowie die für das Abspielen nötigen Kontrollelemente.
{{ HTMLElement("audio") }} Neu in HTML5Markiert eine Tondatei oder einen Audiostream.
{{ HTMLElement("source") }} Neu in HTML5Ermöglicht es Autoren, alternative Medienressourcen (z.B. verschiedene Audio- oder Videoformate) für Medienelemente wie <video> oder <audio> anzugeben.
{{ HTMLElement("track") }} Neu in HTML5Hiermit können zusätzliche Medienspuren (z.B. Untertitel) für Elemente wie <video> oder<audio> angegeben werden. 
{{ HTMLElement("canvas") }} Neu in HTML5Steht für einen Bitmap-Bereich, der von Skripts verwendet werden kann, um beispielsweise Diagramme, Spielegraphiken oder andere visuellen Effekte dynamisch darzustellen.
{{ HTMLElement("map") }}Definiert in Verbindung mit dem <area>-Element eine Image Map.
{{ HTMLElement("area") }}Definiert in Verbindung mit dem <map>-Element eine Image Map.
{{ SVGElement("svg") }} Neu in HTML5Definiert eine eingebettete Vektorgrafik.
{{ MathMLElement("math") }} Neu in HTML5Markiert eine mathematische Formel.
- -

Tabellarische Daten

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
TagBeschreibung
{{ HTMLElement("table") }}Markiert eine Tabelle, d.h. Daten mit mehr als einer Dimension.
{{ HTMLElement("caption") }}Kennzeichnet die Beschriftung (Titel) einer Tabelle.
{{ HTMLElement("colgroup") }}Steht für eine Gruppe aus einer oder mehreren Tabellenspalten.
{{ HTMLElement("col") }}Steht für eine Tabellenspalte.
{{ HTMLElement("tbody") }}Steht für die Spalten, die die eigentlichen Daten einer Tabelle enthalten.
{{ HTMLElement("thead") }}Markiert die Gruppe der Tabellenzeilen, die die Beschriftungen der Tabellenspalten enthalten.
{{ HTMLElement("tfoot") }}Markiert die Gruppe der Tabellenzeilen, die die Zusammenfassungen der Tabellenspalten enthalten.
{{ HTMLElement("tr") }}Steht für eine Zeile mit Tabellenzellen.
{{ HTMLElement("td") }}Kennzeichnet eine einzelne Tabellenzelle.
{{ HTMLElement("th") }}Kennzeichnet eine Tabellenzelle mit einer Beschriftung.
- -

Formulare

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
TagBeschreibung
{{ HTMLElement("form") }}Markiert einFormular. Formulare bestehen typischerweise aus einer Reihe von Kontrollelementen, deren Werte zur weiteren Verarbeitung an einen Server übertragen werden.
{{ HTMLElement("fieldset") }}Steht für eineGruppe von Kontrollelementen.
{{ HTMLElement("legend") }}Kennzeichnet eine Beschriftung für ein <fieldset>-Element.
{{ HTMLElement("label") }}Kennzeichnet die Beschriftung für ein Formular-Kontrollelement (z.B. Texteingabefelder).
{{ HTMLElement("input") }}Steht für ein Feld für Benutzereingaben eines bestimmten Typs. Der Typ (Radiobutton, Ankreuzfeld, Texteingabe, etc.) wird anhand des type-Attributs angegeben.
{{ HTMLElement("button") }}Markiert einenButton .
{{ HTMLElement("select") }}Kennzeichnet ein Kontrollelement, mit dem aus einer Reihe von Optionen ausgewählt werden kann.
{{ HTMLElement("datalist") }} Neu in HTML5Steht für eine Sammlung vordefinierter Optionen für andere Kontrollelemente.
{{ HTMLElement("optgroup") }}Steht für eine Reihe logisch gruppierter Auswahloptionen.
{{ HTMLElement("option") }}Steht für eine Auswahloption innerhalb eines <select>-Elements, oder einen Vorschlag innerhalb eines <datalist>-Elements.
{{ HTMLElement("textarea") }}Markiert ein Element fürmehrzeilige Texteingaben .
{{ HTMLElement("keygen") }} Neu in HTML5Steht für ein Kontrollelement zur Erzeugung einesPaares aus öffentlichem und privaten Schlüssel und zum Versenden des öffentlichen Schlüssels.
{{ HTMLElement("output") }} Neu in HTML5Markiert dasErgebnis einer Berechnung .
{{ HTMLElement("progress") }} Neu in HTML5Ein Element zurFortschrittsanzeige einer bestimmten Aufgabe.
{{ HTMLElement("meter") }} Neu in HTML5Steht für eineMessskala (oder deren Teilwerte) innerhalb eines bekannten Bereichs.
- -

Interaktive Elemente

- - - - - - - - - - - - - - - - - - - - - - - - - - -
TagBeschreibung
{{ HTMLElement("details") }} Neu in HTML5Markiert ein Kontrollelement, mit dem der Benutzerzusätzliche Informationen oder Kontrolle erhalten kann.
{{ HTMLElement("summary") }} Neu in HTML5Kennzeichnet eineZusammenfassung oder eineLegende für ein bestimmte <details>-Element.
{{ HTMLElement("command") }} Neu in HTML5Kennzeichnet einenBefehl , der vom Benutzer aufgerufen werden kann.
{{ HTMLElement("menu") }} Neu in HTML5Markiert eineListe mit Befehlen .
- -

Siehe auch

- - diff --git a/files/de/web/html/html5/index.html b/files/de/web/html/html5/index.html deleted file mode 100644 index a6f25869e9..0000000000 --- a/files/de/web/html/html5/index.html +++ /dev/null @@ -1,174 +0,0 @@ ---- -title: HTML5 -slug: Web/HTML/HTML5 -tags: - - HTML - - HTML5 - - References - - Web Development -translation_of: Web/Guide/HTML/HTML5 ---- -

HTML5 ist die aktuellste Entwicklung des Web Standards, der HTML definiert. Der Begriff repräsentiert zwei verschiedene Konzepte:

- -
    -
  • Es ist eine neue Version der Sprache HTML, mit neuen Elementen, Attributen und Verhaltensweisen,
    • -
  • und eine größere Sammlung von Technologien, die vielfältigere und leistungsstärkere Webseiten und Anwendungen ermöglichen. Diese Kombination wird manchmal HTML5 & Freunde genannt und oft zu HTML5 abgekürzt.
    • -
- -

Diese Referenzseite wurde entworfen, um für alle offenen Web-Entwickler nutzbar zu sein und verknüpft zahlreiche Ressourcen über HTML5 Technologien, gruppiert in mehreren Kategorien, basierend auf ihrer Funktion.

- -
    -
  • Semantik: Erlaubt präziser zu beschreiben, was der Inhalt ist.
    • -
  • Konnektivität: Ermöglicht neue und innovative Wege, mit dem Server zu kommunizieren.
    • -
  • Offline & Speicherung: Erlaubt Webseiten, Daten lokal auf der Client-Seite zu speichern und effizienter offline zu arbeiten.
    • -
  • Multimedia: Macht Video und Audio zu Erste-Klasse-Bürgern des offenen Webs.
    • -
  • 2D/3D Graphiken & Effekte: Erlaubt eine deutlich vielschichtigere Menge an Präsentationsmöglichkeiten.
    • -
  • Leistung & Integration: Bietet größere Geschwindigkeitsoptimierungen und besserer Zugriff auf Computer-Hardware.
    • -
  • Gerätezugriff: Erlaubt die Benutzung verschiedenster Eingabe- und Ausgabegeräte.
    • -
  • Styling: Lässt Autoren anspruchsvollere Designs schreiben.
    • -
- -
-
-

SemantiK

- -
-
Gliederungen und Abschnitte in HTML5
-
Ein Blick auf die neuen Gliederungs- und Abschnitts-Elemente in HTML5: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("aside")}} und {{HTMLElement("hgroup")}}.
-
HTML5 Audio und Video benutzen
-
Das {{HTMLElement("audio")}} und das {{HTMLElement("video")}} Element binden neue Multimedia-Inhalte ein und erlauben, sie zu manipulieren.
-
Formulare in HTML5
-
Ein Blick auf Verbesserungen bei Formularen in HTML5: die constraint validation API (Überprüfung von Wertbeschränkungen), mehrere neue Attribute, neue Werte für das {{HTMLElement("input")}} Attribut {{htmlattrxref("type", "input")}} und das neue {{HTMLElement("output")}} Element.
-
Neue semantische Elemente
-
Außer Sektions-, Medien- und Formular-Elementen erhöhen eine Vielzahl neuer Elemente, wie {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} oder {{HTMLElement("meter")}}, die Menge gültiger HTML5 Elemente.
-
Verbesserung bei {{HTMLElement("iframe")}}
-
Mithilfe der {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}} und {{htmlattrxref("srcdoc", "iframe")}} Attribute können Autoren jetzt das Sicherheitslevel und das gewünschte Rendering von {{HTMLElement("iframe")}} Elementen angeben.
-
MathML
-
Erlaubt das direkte Einbinden mathematischer Formeln.
-
Einführung in HTML5
-
Dieser Artikel führt in die Benutzung von HTML5 für Ihr Web-Design oder Ihre Web-Anwendung ein.
-
HTML5-konformer Parser
-
Der Parser, der aus den Bytes eines HTML-Dokumentes ein DOM erzeugt, wurde erweitert und definiert jetzt präzise das Verhalten in allen Fällen, selbst für ungültiges HTML. Das führt zu viel größerer Vorhersehbarkeit und Zusammenarbeit zwischen HTML5-konformen Browsern.
-
- -

Konnektivität

- -
-
Web Sockets
-
Erlaubt eine permanente Verbindung zwischen der Seite und dem Server zu erzeugen und nicht-HTML-Daten hierüber auszutauschen.
-
Server-gesendete Ereignisse
-
Erlaubt dem Server, Ereignisse direkt an den Client zu senden, anstatt wie beim klassischen Modell Daten nur als Antwort auf eine Anfrage des Clients senden zu können.
-
WebRTC
-
Diese Technologie, wobei RTC für Real-Time Communication (Echtzeit-Kommunikation) steht, erlaubt sich mit anderen zu verbinden und Videokonferenzen direkt aus dem Browser zu steuern, ohne dafür ein Plugin oder externes Programm zu brauchen.
-
- -

Offline & Speicherung

- -
-
-
Offline-Ressourcen: der Anwendungs-Cache
-
Firefox unterstützt vollständig die HTML5 offline resource Spezifikation. Die meisten anderen bieten variierende Unterstützung für Offline-Ressourcen.
-
Online- und Offline-Ereignisse
-
Firefox 3 unterstützt die WHATWG Online- und Offline-Ereignisse, die Anwendungen und Erweiterungen erkennen lassen, ob oder ob es keine aktive Internetverbindung gibt, sowie ob eine Verbindung auf- oder abgebaut wird.
-
WHATWG Client-seitiger Sitzungs- und persistenter Speicher (auch bekannt als DOM Storage)
-
Client-seitiger Sitzungs- und persistenter Speicher erlaubt Webanwendungen, strukturierte Daten auf der Anwenderseite zu speichern.
-
IndexedDB
-
Ist ein Web-Standard zum Speichern von großen Mengen strukturierter Daten im Browser und für das hochperformante Suchen dieser Daten mittels Indizes.
-
Dateien aus Webanwendungen benutzen
-
Unterstützung für die neue HTML5 Datei-API wurde zu Gecko hinzugefügt, wodurch Web-Anwendungen der Zugriff auf vom Benutzer gewählte lokale Dateien ermöglicht wird. Das schließt die Unterstützung für das Auswählen mehrerer Dateien über das neue multiple Attribut von {{HTMLElement("input")}} Elementen des Typs file ein. Außerdem gibt es FileReader.
-
-
- -

Multimedia

- -
-
HTML5 Audio und Video benutzen
-
Das {{HTMLElement("audio")}} und das {{HTMLElement("video")}} Element binden neue Multimedia-Inhalte ein und erlauben, sie zu manipulieren.
-
WebRTC
-
Diese Technologie, wobei RTC für Real-Time Communication (Echtzeit-Kommunikation) steht, erlaubt sich mit anderen zu verbinden und Videokonferenzen direkt aus dem Browser zu steuern, ohne dafür ein Plugin oder externes Programm zu brauchen.
-
Die Camera API benutzen
-
Erlaubt das Benutzen, Manipulieren und Speichern von Bildern der Computer-Kamera.
-
Untertitel und WebVTT
-
Das {{HTMLElement("track")}} Element erlaubt Untertitel und Kapitel. WebVTT ist ein Texttitel-Format.
-
- -

3D, graphiKEN & effeKtE

- -
-
Canvas-Tutorial
-
Lerne mehr über das neue {{HTMLElement("canvas")}} Element und wie darauf Diagramme und andere Objekte in Firefox gezeichnet werden können.
-
HTML5 Text-API für <canvas> Elemente
-
Die HTML5 Text-API wird jetzt von {{HTMLElement("canvas")}} Elementen unterstützt.
-
WebGL
-
WebGL bringt 3D-Graphiken durch die Einführung einer auf OpenGL ES 2.0 basierten API in's Web, die in HTML5 {{HTMLElement("canvas")}} Elementen genutzt werden kann.
-
SVG
-
Ein XML-basiertes Format von Vektor-Bildern, die direkt in HTML eingebettet werden können.
-
 
-
-
- -
-

Leistung & integration

- -
-
Web Worker
-
Erlaubt die Ausführung von JavaScript an Hintergrund-Threads zu delegieren, so dass diese Aktivitäten interaktive Ereignisse nicht verlangsamen.
-
XMLHttpRequest Level 2
-
Erlaubt einige Teile der Seite asynchron zu laden, so dass dynamische Inhalte je nach Zeit und Verhalten des Benutzers gezeigt werden können. Das ist die Technologie hinter Ajax.
-
JIT-kompilierende JavaScript-Engines
-
Die neue Generation der JavaScript-Engines sind wesentlich performanter, was zu deutlich höherer Leistung führt.
-
History API
-
Erlaubt die Manipulation der Browser-Historie. Das ist besonders hilfreich für Seiten, die interaktiv neue Informationen laden.
-
Das contentEditable Attribut: verwandeln Sie Ihre Webseite in ein Wiki!
-
In HTML5 wurde das contentEditable Attribut standardiziert. Lernen Sie mehr über dieses Feature.
-
Drag und Drop
-
Die HTML5 Drag und Drop API erlaubt Unterstützung für das Ziehen und Fallenlassen von Objekte innerhalb und zwischen Webseiten. Außerdem gibt es eine einfachere API für die Benutzung in Erweiterungen und Mozilla-basierten Anwendungen.
-
Fokus-Kontrolle in HTML
-
Die neuen HTML5 activeElement und hasFocus Attribute werden unterstützt.
-
Web-basierte Protokoll-Handler
-
Sie können jetzt Webanwendungen als Protokoll-Handler mit der navigator.registerProtocolHandler() Methode registrieren.
-
requestAnimationFrame
-
Erlaubt das Rendern von Animationen für optimale Leistung zu kontrollieren.
-
Vollbild-API
-
Kontrolliert die Benutzung des ganzen Bildschirms für eine Webseite oder -anwendung, ohne die Browserelemente anzuzeigen.
-
Pointer Lock API
-
Erlaubt, den Zeiger auf den Bereich des Inhalts zu begrenzen, so dass Spiele und ähnliche Anwendungen nicht den Fokus verlieren, wenn der Zeiger die Fenstergrenzen erreicht.
-
Online- und Offline-Ereignisse
-
Um eine gute offline-fähige Webanwendung zu entwickeln, müssen Sie wissen, wann Ihre Anwendung tatsächlich offline ist. Nebenbei sollten Sie auch wissen, wann Ihre Anwendung wieder online ist.
-
- -

Gerätezugriff

- -
-
Die Kamera-API benutzen
-
Erlaubt das Benutzen, Manipulieren und Speichern von Bildern der Computer-Kamera.
-
Touch-Ereignisse
-
Verarbeitung von Ereignissen, die durch Tippen auf Touchscreens ausgelöst werden.
-
Geolocation benutzen
-
Lässt Browser die Position des Benutzers mittels geolocation herausfinden.
-
Geräte-Orientierung ermitteln
-
Ermöglicht herauszufinden, wenn das Gerät des Browsers die Orientierung wechselt. Das kann als Eingabegerät genutzt werden (z.B. um Spiele zu entwickeln, die auf die Orientierung des Gerätes reagieren) oder um das Layout einer Seite der Orientierung des Bildschirms anzupassen (hochkant oder Querformat).
-
Pointer Lock API
-
Erlaubt, den Zeiger auf den Bereich des Inhalts zu begrenzen, so dass Spiele und ähnliche Anwendungen nicht den Fokus verlieren, wenn der Zeiger die Fenstergrenzen erreicht.
-
- -

Styling

- -

CSS wurde erweitert, um das Dekorieren von Elementen auf viel komplexere Weisen zu ermöglichen. Das wird oft als CSS3 bezeichnet, obwohl CSS keine monolithische Spezifikation mehr ist und die unterschiedlichen Module nicht alle auf Level 3 sind: einige sind auf Level 1 und andere auf Level 4, und alle dazwischen liegenden Level sind vertreten.

- -
-
Neue Funktionen für Hintergründe
-
Es ist jetzt möglich, Boxen über {{cssxref("box-shadow")}} einen Schatten zu geben und mehrere Hintergründe zu setzen.
-
Ausgefallenere Ränder
-
Jetzt ist es nicht nur möglich, Ränder mit Bildern über {{cssxref("border-image")}} und zugehörige ausgeschriebene Eigenschaften zu dekorieren, sondern auch runde Ränder werden über die {{cssxref("border-radius")}} Eigenschaft unterstützt.
-
Stile animierbar machen
-
Mit CSS Übergängen, um zwischen unterschiedlichen Zuständen zu animieren, oder CSS Animationen, um Teile der Seite ohne auslösendes Ereignis zu animieren, können Sie jetzt mobile Elemente Ihrer Seite kontrollieren.
-
Typographie-Verbesserungen
-
Autoren haben mehr Kontrolle, um eine bessere Typographie zu erreichen. Sie können Textüberlauf mit {{cssxref("text-overflow")}} und Silbentrennung kontrollieren, aber sie können auch Schatten zuweisen und noch präziser seine Dekorationen kontrollieren. Benutzerdefinierte Schriftarten können durch die neue {{cssxref("@font-face")}} at-Regel heruntergeladen und angewendet werden.
-
Neue Präsentations-Layouts
-
Um die Flexibilität von Designs zu verbessern, wurden zwei neue Layouts hinzugefügt: das CSS Mehr-Spalten-Layout und das CSS Flexible-Box-Layout.
-
-
-
- -

 

diff --git a/files/de/web/html/inline_elemente/index.html b/files/de/web/html/inline_elemente/index.html deleted file mode 100644 index 29f7e242cd..0000000000 --- a/files/de/web/html/inline_elemente/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: Inline-Elemente -slug: Web/HTML/Inline_elemente -translation_of: Web/HTML/Inline_elements ---- -

Zusammenfassung

- -

"Inline" ist eine Kategorisierung von HTML-Elementen, und stellt das Gegenteil von "Block-Level" Elementen dar. Inline-Elemente können sich innerhalb von Block-Level Elementen oder anderen Inline-Elementen befinden. Die Breite eines Inline-Elementes richtet sich nach dem Inhalt. Die Unterschiede zwischen Block-Elementen und Inline-Elementen beinhalten:

- -
-
Inhaltsmodell
-
Generell beinhalten Inline-Elemente nur Daten und andere Inline-Elemente.
-
Formatierung
-
Standardmäßig beginnen Inline-Elemente nicht in einer neuen Zeile.
-
- -

Elemente

- -

Die folgenden Elemente sind "inline":

- - - -

Siehe auch

- - diff --git a/files/de/web/html/inline_elements/index.html b/files/de/web/html/inline_elements/index.html new file mode 100644 index 0000000000..29f7e242cd --- /dev/null +++ b/files/de/web/html/inline_elements/index.html @@ -0,0 +1,32 @@ +--- +title: Inline-Elemente +slug: Web/HTML/Inline_elemente +translation_of: Web/HTML/Inline_elements +--- +

Zusammenfassung

+ +

"Inline" ist eine Kategorisierung von HTML-Elementen, und stellt das Gegenteil von "Block-Level" Elementen dar. Inline-Elemente können sich innerhalb von Block-Level Elementen oder anderen Inline-Elementen befinden. Die Breite eines Inline-Elementes richtet sich nach dem Inhalt. Die Unterschiede zwischen Block-Elementen und Inline-Elementen beinhalten:

+ +
+
Inhaltsmodell
+
Generell beinhalten Inline-Elemente nur Daten und andere Inline-Elemente.
+
Formatierung
+
Standardmäßig beginnen Inline-Elemente nicht in einer neuen Zeile.
+
+ +

Elemente

+ +

Die folgenden Elemente sind "inline":

+ + + +

Siehe auch

+ + diff --git a/files/de/web/html/reference/index.html b/files/de/web/html/reference/index.html new file mode 100644 index 0000000000..b9ad6c3301 --- /dev/null +++ b/files/de/web/html/reference/index.html @@ -0,0 +1,29 @@ +--- +title: HTML-Referenz +slug: Web/HTML/Referenz +tags: + - Einstieg + - HTML + - Refernz + - Web +translation_of: Web/HTML/Reference +--- +
{{HTMLSidebar}}
+ +

Diese HTML-Referenz beschreibt alle Elemente und Attribute von HTML, einschließlich globaler Attribute, die für alle Elemente gelten.

+ +
+
+
HTML-Element-Referenz
+
Diese Seite listet alle Standard-HTML-Tags auf, die aktuell sind, aber auch welche die obsolet sind. Elemente die erst in HTML5 eingeführt wurden, werden referenziert, wobei die anderen Elemente in HTML5 auch valide sind.
+
HTML-Attribut-Referenz
+
Elemente in HTML haben Attribute; dies sind zusätzliche Werte, die die Elemente konfigurieren oder ihr Verhalten auf verschiedene Weise anpassen, um die Kriterien zu erfüllen, die die Benutzer wollen.
+
Globale Attribute
+
Globale Attribute dürfen allen HTML Elementen zugewiesen werden, auch wenn diese Elemente nicht dem Standard entsprechen. Es müssen also alle Attribute vom Browser ausgewertet werden, auch wenn die Verwendung eines Elements bewirkt, dass das Dokument nicht HTML5-konform ist. Zum Beispiel verstecken HTML5-konforme Browser ein Element <foo hidden>...<foo>, obwohl <foo> kein valides HTML Element ist.
+
Link-Typen
+
In HTML, the following link types indicate the relationship between two documents, in which one links to the other using an <a>, <area>, or <link> element.
+
+ +

Alle Seiten mit dem Tag "HTML" ansehen...

+ +
diff --git a/files/de/web/html/referenz/index.html b/files/de/web/html/referenz/index.html deleted file mode 100644 index b9ad6c3301..0000000000 --- a/files/de/web/html/referenz/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: HTML-Referenz -slug: Web/HTML/Referenz -tags: - - Einstieg - - HTML - - Refernz - - Web -translation_of: Web/HTML/Reference ---- -
{{HTMLSidebar}}
- -

Diese HTML-Referenz beschreibt alle Elemente und Attribute von HTML, einschließlich globaler Attribute, die für alle Elemente gelten.

- -
-
-
HTML-Element-Referenz
-
Diese Seite listet alle Standard-HTML-Tags auf, die aktuell sind, aber auch welche die obsolet sind. Elemente die erst in HTML5 eingeführt wurden, werden referenziert, wobei die anderen Elemente in HTML5 auch valide sind.
-
HTML-Attribut-Referenz
-
Elemente in HTML haben Attribute; dies sind zusätzliche Werte, die die Elemente konfigurieren oder ihr Verhalten auf verschiedene Weise anpassen, um die Kriterien zu erfüllen, die die Benutzer wollen.
-
Globale Attribute
-
Globale Attribute dürfen allen HTML Elementen zugewiesen werden, auch wenn diese Elemente nicht dem Standard entsprechen. Es müssen also alle Attribute vom Browser ausgewertet werden, auch wenn die Verwendung eines Elements bewirkt, dass das Dokument nicht HTML5-konform ist. Zum Beispiel verstecken HTML5-konforme Browser ein Element <foo hidden>...<foo>, obwohl <foo> kein valides HTML Element ist.
-
Link-Typen
-
In HTML, the following link types indicate the relationship between two documents, in which one links to the other using an <a>, <area>, or <link> element.
-
- -

Alle Seiten mit dem Tag "HTML" ansehen...

- -
diff --git a/files/de/web/http/caching/index.html b/files/de/web/http/caching/index.html new file mode 100644 index 0000000000..79aa913713 --- /dev/null +++ b/files/de/web/http/caching/index.html @@ -0,0 +1,73 @@ +--- +title: HTTP Caching FAQ +slug: Web/HTTP/Caching_FAQ +tags: + - Cache + - HTTP + - Necko + - NeedsContent + - header +translation_of: Web/HTTP/Caching +--- +

Was wird im Cache gespeichert?

+ +

Der Mozilla Cache beinhaltet alle Dokumente, die via HTTP vom Benutzer heruntergeladen wurden. Dies mag sich zunächst widersprüchlich anhören, dieses Verhalten ermöglicht jedoch das Vor- und Zurück-Navigieren, Speichern, sowie die Anzeige des Quelltextes etc. im Browser, ohne dabei zusätzliche Serveranfragen zu benötigen. Somit verbessert es auch die Offline-Nutzung von temporär gespeicherten Inhalten im Cache.

+ +

Was ist mit Dokumenten die mit "Cache-control: no-cache"  in der Kopfzeile (Header) gesendet werden?

+ +

Auch "no-cache" Dokumente werden von uns aufgrund der oben genannten Gründe im Cache gespeichert.

+ +

Sorgt das nicht dafür, dass abgelaufene Inhalte bereitgestellt werden?

+ +

Nein, denn jedes Dokument, das im Mozilla Cache gespeichert wird, erhält eine Gültigkeitsdauer. Lädt Mozilla dieses Dokument für eine normale Ansicht, wird die Gültigkeit berücksichtigt. Wenn nötig, wird ein aus dem Cache zu ladendes Dokument mit dem Server abgeglichen und gegebenenfalls neu geladen, bevor es dem Benutzer angezeigt wird.

+ +

Wie wird die Gültigkeitsdauer berechnet (da nicht jede Serverantwort eine Gültigkeit in der Kopfzeile enthält)?

+ +

Mozilla strebt danach, RFC 2616 zu implementieren (siehe speziell Abschnitt 13 für nähere Informationen). Jede der folgenden Antwort-Kopfzeilen generiert eine stets abgelaufene Gültigkeitsdauer, z.B. "00:00:00 UTC, January 1, 1970":

+ +
Cache-control: no-cache
+Cache-control: no-store
+Pragma: no-cache
+Expires: 0
+ +

Bemerkenswerter Weise sind die Werte Expires: 0 und Pragma: no-cache technisch gesehen ungültige Werte in einer Antwort-Kopfzeile. Wenn keine dieser Angaben vorhanden ist, geschieht die Berechnung der Gültigkeitsdauer nach dem Algorithmus, welcher in RFC 2616, Abschnitt 13.2. beschrieben wird. Wir ermitteln das gegenwärtige Alter der Antwort und seine Gültigkeit basierend auf den vorhandenen Informationen.

+ +

Das gegenwärtige Alter entspricht für gewöhnlich fast Null, wird jedoch durch eine vorhandene Age-Angabe in der Antwort-Kopfzeile beeinflusst, die z.B. von Proxy Caches angeben wird um die Länge der Dauer anzugeben, die sich ein Dokument bereits in ihrem Cache befindet. Der exakte Algorithmus, der versucht, Fehler bei der Zeitverschiebung zu verhindern, wird in RFC 2616, Abschnitt 13.2.3 beschrieben.

+ +

Die Gültigkeit wird basierend auf mehreren Antwort-Kopfzeilen berechnet. Wenn die Kopfzeile Cache-control: max-age=N angegeben ist, entspricht die Gültigkeit des Dokumentes dem Wert N. Ist dieser Wert nicht vorhanden, was mitunter sehr oft der Fall ist, wird nach einer Expires-Angabe in der Kopfzeile gesucht. Existiert diese, ergibt sich die Gültigkeitsdauer aus dem darin enthaltenen Wert abzüglich des in Date enthaltenen Wertes. Sollte sich letztlich keine Expires-Angabe in den Antwort-Kopfzeilen befinden, wird nach einem Last-Modified Wert gesucht. Ist dieser Wert vorhanden, entspricht die Gültigkeitsdauer im Cache dem Wert Date abzüglich des Wertes Last-Modified geteilt durch 10. Dies ist die vereinfachte Darstellung des heuristischen Algorithmus, der in Abschnitt 13.2.4 des RFC 2616 vorgeschlagen wird. 

+ +

Die Gültigkeitsdauer berechnet sich somit folgendermaßen:

+ +
ablaufZeit = reaktionsZeit + neuheitsLebenszeit - aktuellesAlter
+ +

Wobei reaktionsZeit dem Zeitwert entspricht, zu dem der Browser die Antwort erhalten hat.

+ +

Gibt es weitere Faktoren, welche die Revalidation beinflussen?

+ +

Die Revalidation wird ausgelöst, sobald ein User die Seite neu lädt (z.B. mittels des Neu-Laden-Knopfes). Ebenso wird sie beim normalen browsen ausgelöst, wenn in den Antwort-Kopfzeilen Cache-control: must-revalidate enthalten ist. Ein weiterer Faktor sind die Einstellungen des Cache-Management im Bereich Erweitert->Netzwerk der Firefox-Einstellungen. Hier kann als Option gewählt werden, dass Dokumente bei jedem Laden neu validiert werden ("Nachfragen, wenn Websites Daten für die Verwendung im Offline-Modus speichern möchten").

+ +

Wie funktioniert die Cache-Valdiation?

+ +

Sobald die Gültigkeit eines Dokumentes im Cache abgelaufen ist, wird es entweder revalidiert oder gänzlich neu vom Server angefordert. Eine Validation kann nur dann angewendet werden, wenn der Server entweder eine starke Valdiation (strong validation) oder eine schwache Valdiation (weak validation) ermöglicht. Cache-Validatoren werden im Abschnitt 13.3.2 des RFC 2616 beschrieben.

+ +

Der ETag-Wert in den Antwort-Kopfzeilen ist ein Wert, der nicht für den User Agent einsehbar ist (opaque-to-the-useragent) und als starker Validator genutzt werden kann (strong validator). Ist der ETag-Wert in den Antwort-Kopfzeilen vorhanden, kann der Browser einen If-None-Match-Wert in den Anfrage-Kopfzeilen ausgeben, um das Dokument im Cache zu validieren.

+ +

Der Last-Modified-Wert in den Antwort-Kopfzeilen kann als schwacher Validator (weak validator) genutzt werden. Er wird als schwach eingestuft, da er nur eine 1-Sekunden-Lösung ermöglicht. Wenn der Last-Modified-Wert in den Antwort-Kopfzeilen enthalten ist, kann der Browser einen If-Modified-Since-Wert in den Anfrage-Kopfzeilen ausgeben, um das Dokument im Cache zu validieren.

+ +

Sobald eine Validierungs-Anfrage gestellt wurde, kann der Server diese entweder ignorieren und mit einem normalen 200 OK-Statuscode antworten, oder aber einen 304 Not Modified-Statuscode zurückgeben um den Browser anzuweisen, die im Cache befindliche Kopie des Dokumentes zu verwenden. Letzere kann ebenfalls Werte in der Antwort-Kopfzeile enthalten, welche die Gültigkeit des Dokumentes im Cache aktualisieren.

+ +

Was ist mit...?

+ +

Ich beabsichtige, diese Dokumentation in Zukunft zu erweitern. Fühlen Sie sich frei, mir eine E-Mail mit Ihren Fragen oder Kommentaren zu schreiben.

+ +
+

Informationen zum Original-Dokument

+ +
    +
  • Autor(en): Darin Fisher
    • +
  • Zuletzt aktualisiert: 16. Juni 2004
    • +
  • Copyright Information: Teile des Inhaltes sind urheberrechtlich durch © 1998–2007 einzelne Mitwirkende von  mozilla.org; Inhalt lizensiert under einer Creative Commons Lizenz | Details.
    • +
+
+ +

 

diff --git a/files/de/web/http/caching_faq/index.html b/files/de/web/http/caching_faq/index.html deleted file mode 100644 index 79aa913713..0000000000 --- a/files/de/web/http/caching_faq/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: HTTP Caching FAQ -slug: Web/HTTP/Caching_FAQ -tags: - - Cache - - HTTP - - Necko - - NeedsContent - - header -translation_of: Web/HTTP/Caching ---- -

Was wird im Cache gespeichert?

- -

Der Mozilla Cache beinhaltet alle Dokumente, die via HTTP vom Benutzer heruntergeladen wurden. Dies mag sich zunächst widersprüchlich anhören, dieses Verhalten ermöglicht jedoch das Vor- und Zurück-Navigieren, Speichern, sowie die Anzeige des Quelltextes etc. im Browser, ohne dabei zusätzliche Serveranfragen zu benötigen. Somit verbessert es auch die Offline-Nutzung von temporär gespeicherten Inhalten im Cache.

- -

Was ist mit Dokumenten die mit "Cache-control: no-cache"  in der Kopfzeile (Header) gesendet werden?

- -

Auch "no-cache" Dokumente werden von uns aufgrund der oben genannten Gründe im Cache gespeichert.

- -

Sorgt das nicht dafür, dass abgelaufene Inhalte bereitgestellt werden?

- -

Nein, denn jedes Dokument, das im Mozilla Cache gespeichert wird, erhält eine Gültigkeitsdauer. Lädt Mozilla dieses Dokument für eine normale Ansicht, wird die Gültigkeit berücksichtigt. Wenn nötig, wird ein aus dem Cache zu ladendes Dokument mit dem Server abgeglichen und gegebenenfalls neu geladen, bevor es dem Benutzer angezeigt wird.

- -

Wie wird die Gültigkeitsdauer berechnet (da nicht jede Serverantwort eine Gültigkeit in der Kopfzeile enthält)?

- -

Mozilla strebt danach, RFC 2616 zu implementieren (siehe speziell Abschnitt 13 für nähere Informationen). Jede der folgenden Antwort-Kopfzeilen generiert eine stets abgelaufene Gültigkeitsdauer, z.B. "00:00:00 UTC, January 1, 1970":

- -
Cache-control: no-cache
-Cache-control: no-store
-Pragma: no-cache
-Expires: 0
- -

Bemerkenswerter Weise sind die Werte Expires: 0 und Pragma: no-cache technisch gesehen ungültige Werte in einer Antwort-Kopfzeile. Wenn keine dieser Angaben vorhanden ist, geschieht die Berechnung der Gültigkeitsdauer nach dem Algorithmus, welcher in RFC 2616, Abschnitt 13.2. beschrieben wird. Wir ermitteln das gegenwärtige Alter der Antwort und seine Gültigkeit basierend auf den vorhandenen Informationen.

- -

Das gegenwärtige Alter entspricht für gewöhnlich fast Null, wird jedoch durch eine vorhandene Age-Angabe in der Antwort-Kopfzeile beeinflusst, die z.B. von Proxy Caches angeben wird um die Länge der Dauer anzugeben, die sich ein Dokument bereits in ihrem Cache befindet. Der exakte Algorithmus, der versucht, Fehler bei der Zeitverschiebung zu verhindern, wird in RFC 2616, Abschnitt 13.2.3 beschrieben.

- -

Die Gültigkeit wird basierend auf mehreren Antwort-Kopfzeilen berechnet. Wenn die Kopfzeile Cache-control: max-age=N angegeben ist, entspricht die Gültigkeit des Dokumentes dem Wert N. Ist dieser Wert nicht vorhanden, was mitunter sehr oft der Fall ist, wird nach einer Expires-Angabe in der Kopfzeile gesucht. Existiert diese, ergibt sich die Gültigkeitsdauer aus dem darin enthaltenen Wert abzüglich des in Date enthaltenen Wertes. Sollte sich letztlich keine Expires-Angabe in den Antwort-Kopfzeilen befinden, wird nach einem Last-Modified Wert gesucht. Ist dieser Wert vorhanden, entspricht die Gültigkeitsdauer im Cache dem Wert Date abzüglich des Wertes Last-Modified geteilt durch 10. Dies ist die vereinfachte Darstellung des heuristischen Algorithmus, der in Abschnitt 13.2.4 des RFC 2616 vorgeschlagen wird. 

- -

Die Gültigkeitsdauer berechnet sich somit folgendermaßen:

- -
ablaufZeit = reaktionsZeit + neuheitsLebenszeit - aktuellesAlter
- -

Wobei reaktionsZeit dem Zeitwert entspricht, zu dem der Browser die Antwort erhalten hat.

- -

Gibt es weitere Faktoren, welche die Revalidation beinflussen?

- -

Die Revalidation wird ausgelöst, sobald ein User die Seite neu lädt (z.B. mittels des Neu-Laden-Knopfes). Ebenso wird sie beim normalen browsen ausgelöst, wenn in den Antwort-Kopfzeilen Cache-control: must-revalidate enthalten ist. Ein weiterer Faktor sind die Einstellungen des Cache-Management im Bereich Erweitert->Netzwerk der Firefox-Einstellungen. Hier kann als Option gewählt werden, dass Dokumente bei jedem Laden neu validiert werden ("Nachfragen, wenn Websites Daten für die Verwendung im Offline-Modus speichern möchten").

- -

Wie funktioniert die Cache-Valdiation?

- -

Sobald die Gültigkeit eines Dokumentes im Cache abgelaufen ist, wird es entweder revalidiert oder gänzlich neu vom Server angefordert. Eine Validation kann nur dann angewendet werden, wenn der Server entweder eine starke Valdiation (strong validation) oder eine schwache Valdiation (weak validation) ermöglicht. Cache-Validatoren werden im Abschnitt 13.3.2 des RFC 2616 beschrieben.

- -

Der ETag-Wert in den Antwort-Kopfzeilen ist ein Wert, der nicht für den User Agent einsehbar ist (opaque-to-the-useragent) und als starker Validator genutzt werden kann (strong validator). Ist der ETag-Wert in den Antwort-Kopfzeilen vorhanden, kann der Browser einen If-None-Match-Wert in den Anfrage-Kopfzeilen ausgeben, um das Dokument im Cache zu validieren.

- -

Der Last-Modified-Wert in den Antwort-Kopfzeilen kann als schwacher Validator (weak validator) genutzt werden. Er wird als schwach eingestuft, da er nur eine 1-Sekunden-Lösung ermöglicht. Wenn der Last-Modified-Wert in den Antwort-Kopfzeilen enthalten ist, kann der Browser einen If-Modified-Since-Wert in den Anfrage-Kopfzeilen ausgeben, um das Dokument im Cache zu validieren.

- -

Sobald eine Validierungs-Anfrage gestellt wurde, kann der Server diese entweder ignorieren und mit einem normalen 200 OK-Statuscode antworten, oder aber einen 304 Not Modified-Statuscode zurückgeben um den Browser anzuweisen, die im Cache befindliche Kopie des Dokumentes zu verwenden. Letzere kann ebenfalls Werte in der Antwort-Kopfzeile enthalten, welche die Gültigkeit des Dokumentes im Cache aktualisieren.

- -

Was ist mit...?

- -

Ich beabsichtige, diese Dokumentation in Zukunft zu erweitern. Fühlen Sie sich frei, mir eine E-Mail mit Ihren Fragen oder Kommentaren zu schreiben.

- -
-

Informationen zum Original-Dokument

- -
    -
  • Autor(en): Darin Fisher
    • -
  • Zuletzt aktualisiert: 16. Juni 2004
    • -
  • Copyright Information: Teile des Inhaltes sind urheberrechtlich durch © 1998–2007 einzelne Mitwirkende von  mozilla.org; Inhalt lizensiert under einer Creative Commons Lizenz | Details.
    • -
-
- -

 

diff --git a/files/de/web/http/cors/errors/corsfehlenderallowheaderauspreflight/index.html b/files/de/web/http/cors/errors/corsfehlenderallowheaderauspreflight/index.html deleted file mode 100644 index d40ac7b5b5..0000000000 --- a/files/de/web/http/cors/errors/corsfehlenderallowheaderauspreflight/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: >- - Grund: fehlendes Token ‘xyz’ in CORS-Kopfzeile 'Access-Control-Allow-Headers' - aus dem CORS-Preflight-Kanal -slug: Web/HTTP/CORS/Errors/CORSFehlenderAllowHeaderAusPreflight -tags: - - CORS - - CORSMissingAllowHeaderFromPreflight - - Cross-Origin - - Fehler - - HTTP - - HTTPS - - Meldungen - - Sicherheit - - Ursachen -translation_of: Web/HTTP/CORS/Errors/CORSMissingAllowHeaderFromPreflight ---- -
{{HTTPSidebar}}
- -

Grund

- -
Grund: fehlendes Token ‘xyz’ in CORS-Kopfzeile ‘Access-Control-Allow-Headers’ aus dem CORS-Preflight-Kanal
- -

Was ist schiefgelaufen?

- -

Der Access-Control-Allow-Headers Header wird vom Server gesendet, damit der Client weiß welche Header er für {{Glossary("CORS")}} Requests unterstützt. Der Wert für Access-Control-Allow-Headers ist eine durch Komma getrennte Liste von Header-Namen, wie z.B. "X-Custom-Information" oder jeder der Standart-Header (aber kein Basic-Header, die immer erlaubt sind).

- -

Dieser Fehler tritt auf, wenn versucht wird einen Preflight auszuführen mit einem Header, der nicht ausdrücklich erlaubt ist, d.h. der nicht im Access-Control-Allow-Headers Header enthalten ist, der vom Server gesendet wird. Um dies zu beheben, muss der Server so angepasst werden, dass er den angegebenen Header zulässt, oder man vermeidet es diesen Header zu verwenden.

- -

Siehe auch

- - diff --git a/files/de/web/http/cors/errors/corsfehltquelleerlauben/index.html b/files/de/web/http/cors/errors/corsfehltquelleerlauben/index.html deleted file mode 100644 index 8ccb987535..0000000000 --- a/files/de/web/http/cors/errors/corsfehltquelleerlauben/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: >- - Grund: CORS header 'AccessGrund: CORS-Kopfzeile 'Access-Control-Allow-Origin' - fehlt -slug: Web/HTTP/CORS/Errors/CORSFehltQuelleErlauben -tags: - - CORS - - CORSMissingAllowOrigin - - Cross-Origin - - Error - - Fehler - - Gründe - - HTTP - - HTTPS - - Konsole - - Nachrichten - - Sicherheit - - troubleshooting -translation_of: Web/HTTP/CORS/Errors/CORSMissingAllowOrigin ---- -
{{HTTPSidebar}}
- -

Grund

- -
 Grund: CORS-Kopfzeile 'Access-Control-Allow-Origin' fehlt
- -

Was ist schief gelaufen?

- -

Der Antwort auf die {{Glossary("CORS")}}-Anfrage fehlt der benötigte {{HTTPHeader("Access-Control-Allow-Origin")}}-Header, welcher verwendet wird, um herauszufinden, ob die Ressource vom Inhalt, der im momentanen Origin arbeitet, verwendet werden kann oder nicht.

- -

Wenn der Server unter Ihrer Kontrolle steht, fügen Sie die Quelle der anfragenden Seite zu der Liste der Domains hinzu, die Zugriff haben, indem Sie Sie zum Header-Wert Access-Control-Allow-Origin ergänzen.

- -

Um zum Beispiel einer Seite unter https://amazing.site zu erlauben, auf die Ressource mithilfe von CORS zuzugreifen, sollte der Header lauten:

- -
Access-Control-Allow-Origin: https://amazing.site
- -

Mithilfe der "*"-Wildcard kann man eine Seite so konfigureren, dass Sie jeder anderen Webseite Zugriff gewährt. Dies sollte man ausschließlich für öffentliche APIs tun. Private APIs sollten niemals "*" verwenden, sondern stattdessen eine spezifische Domain oder eine Liste von Domains. Zudem funktioniert die Wildcard nur für Requests, die mit dem {{htmlattrxref("crossorigin")}}-Attribut, gesetzt auf "anonymous", erstellt wurden.

- -
Access-Control-Allow-Origin: *
- -
-

Warnung: Die Wildcard dazu zu benutzen, um allen Websites Zugriff auf eine private API zu geben, ist - aus wohl offensichtlichen Gründen - keine gute Idee.

-
- -

Fügen Sie z.B. in Apache eine Zeile wie die Folgende zur Konfiguration des Servers hinzu (im zugehörigen <Directory>, <Location>, <Files>, oder <VirtualHost>-Abschnitt). Die Konfigurationseinstellungen findet man üblicherweise in einer .conf-Datei (httpd.conf und apache.conf sind übliche Namen dafür), oder in einer .htaccess-Datei.

- -
Header set Access-Control-Allow-Origin 'origin-list'
- -

Für Nginx lautet der Befehl, um den Header zu setzen:

- -
add_header 'Access-Control-Allow-Origin' 'origin-list'
- -

Siehe auch

- - diff --git a/files/de/web/http/cors/errors/corsmissingallowheaderfrompreflight/index.html b/files/de/web/http/cors/errors/corsmissingallowheaderfrompreflight/index.html new file mode 100644 index 0000000000..d40ac7b5b5 --- /dev/null +++ b/files/de/web/http/cors/errors/corsmissingallowheaderfrompreflight/index.html @@ -0,0 +1,37 @@ +--- +title: >- + Grund: fehlendes Token ‘xyz’ in CORS-Kopfzeile 'Access-Control-Allow-Headers' + aus dem CORS-Preflight-Kanal +slug: Web/HTTP/CORS/Errors/CORSFehlenderAllowHeaderAusPreflight +tags: + - CORS + - CORSMissingAllowHeaderFromPreflight + - Cross-Origin + - Fehler + - HTTP + - HTTPS + - Meldungen + - Sicherheit + - Ursachen +translation_of: Web/HTTP/CORS/Errors/CORSMissingAllowHeaderFromPreflight +--- +
{{HTTPSidebar}}
+ +

Grund

+ +
Grund: fehlendes Token ‘xyz’ in CORS-Kopfzeile ‘Access-Control-Allow-Headers’ aus dem CORS-Preflight-Kanal
+ +

Was ist schiefgelaufen?

+ +

Der Access-Control-Allow-Headers Header wird vom Server gesendet, damit der Client weiß welche Header er für {{Glossary("CORS")}} Requests unterstützt. Der Wert für Access-Control-Allow-Headers ist eine durch Komma getrennte Liste von Header-Namen, wie z.B. "X-Custom-Information" oder jeder der Standart-Header (aber kein Basic-Header, die immer erlaubt sind).

+ +

Dieser Fehler tritt auf, wenn versucht wird einen Preflight auszuführen mit einem Header, der nicht ausdrücklich erlaubt ist, d.h. der nicht im Access-Control-Allow-Headers Header enthalten ist, der vom Server gesendet wird. Um dies zu beheben, muss der Server so angepasst werden, dass er den angegebenen Header zulässt, oder man vermeidet es diesen Header zu verwenden.

+ +

Siehe auch

+ + diff --git a/files/de/web/http/cors/errors/corsmissingalloworigin/index.html b/files/de/web/http/cors/errors/corsmissingalloworigin/index.html new file mode 100644 index 0000000000..8ccb987535 --- /dev/null +++ b/files/de/web/http/cors/errors/corsmissingalloworigin/index.html @@ -0,0 +1,59 @@ +--- +title: >- + Grund: CORS header 'AccessGrund: CORS-Kopfzeile 'Access-Control-Allow-Origin' + fehlt +slug: Web/HTTP/CORS/Errors/CORSFehltQuelleErlauben +tags: + - CORS + - CORSMissingAllowOrigin + - Cross-Origin + - Error + - Fehler + - Gründe + - HTTP + - HTTPS + - Konsole + - Nachrichten + - Sicherheit + - troubleshooting +translation_of: Web/HTTP/CORS/Errors/CORSMissingAllowOrigin +--- +
{{HTTPSidebar}}
+ +

Grund

+ +
 Grund: CORS-Kopfzeile 'Access-Control-Allow-Origin' fehlt
+ +

Was ist schief gelaufen?

+ +

Der Antwort auf die {{Glossary("CORS")}}-Anfrage fehlt der benötigte {{HTTPHeader("Access-Control-Allow-Origin")}}-Header, welcher verwendet wird, um herauszufinden, ob die Ressource vom Inhalt, der im momentanen Origin arbeitet, verwendet werden kann oder nicht.

+ +

Wenn der Server unter Ihrer Kontrolle steht, fügen Sie die Quelle der anfragenden Seite zu der Liste der Domains hinzu, die Zugriff haben, indem Sie Sie zum Header-Wert Access-Control-Allow-Origin ergänzen.

+ +

Um zum Beispiel einer Seite unter https://amazing.site zu erlauben, auf die Ressource mithilfe von CORS zuzugreifen, sollte der Header lauten:

+ +
Access-Control-Allow-Origin: https://amazing.site
+ +

Mithilfe der "*"-Wildcard kann man eine Seite so konfigureren, dass Sie jeder anderen Webseite Zugriff gewährt. Dies sollte man ausschließlich für öffentliche APIs tun. Private APIs sollten niemals "*" verwenden, sondern stattdessen eine spezifische Domain oder eine Liste von Domains. Zudem funktioniert die Wildcard nur für Requests, die mit dem {{htmlattrxref("crossorigin")}}-Attribut, gesetzt auf "anonymous", erstellt wurden.

+ +
Access-Control-Allow-Origin: *
+ +
+

Warnung: Die Wildcard dazu zu benutzen, um allen Websites Zugriff auf eine private API zu geben, ist - aus wohl offensichtlichen Gründen - keine gute Idee.

+
+ +

Fügen Sie z.B. in Apache eine Zeile wie die Folgende zur Konfiguration des Servers hinzu (im zugehörigen <Directory>, <Location>, <Files>, oder <VirtualHost>-Abschnitt). Die Konfigurationseinstellungen findet man üblicherweise in einer .conf-Datei (httpd.conf und apache.conf sind übliche Namen dafür), oder in einer .htaccess-Datei.

+ +
Header set Access-Control-Allow-Origin 'origin-list'
+ +

Für Nginx lautet der Befehl, um den Header zu setzen:

+ +
add_header 'Access-Control-Allow-Origin' 'origin-list'
+ +

Siehe auch

+ + diff --git a/files/de/web/http/public_key_pinning/index.html b/files/de/web/http/public_key_pinning/index.html new file mode 100644 index 0000000000..337b9b600e --- /dev/null +++ b/files/de/web/http/public_key_pinning/index.html @@ -0,0 +1,147 @@ +--- +title: HTTP Public Key Pinning (HPKP) +slug: Web/Security/Public_Key_Pinning +tags: + - Anleitung + - HPKP + - HTTP + - Sicherheit + - Webentwicklung +translation_of: Web/HTTP/Public_Key_Pinning +--- +
{{HTTPSidebar}}
+ +

Die Public Key Pinning Erweiterung für HTTP ({{Glossary("HPKP")}}) ist ein Sicherheitsfeature, das einem Webclient mitteilt, einen spezifischen kryptographischen Schlüssel mit einem bestimmten Webserver in Verbindung zu bringen um {{Glossary("MITM")}} mit gefälschten Zertifikaten zu vermeiden.

+ +

Um die Echtheit des öffentlichen Schlüssels eines Servers in {{Glossary("TLS")}}-Sessions sicherzustellen, wird dieser in ein X.509-Zertifikat gepackt, welches meistens von einer Zertifizierungsstelle ({{GLossary("CA")}}) signiert wird. Webclients wie Browser vertrauen vielen Zertifizierungsstellen, die Zertifikate für beliebige Domainnamen erstellen können. Wenn ein Angreifer dazu in der Lage ist, eine einzelne Zertifizierungsstelle zu infiltrieren, kann er MITM-Angriffe auf verschiedene TLS-Verbindungen starten. HPKP kann diese Gefahr für das {{Glossary("HTTPS")}}-Protokoll dadurch umgehen, dass dem Client mitgeteilt wird, welcher öffentliche Schlüssel zu einem bestimmten Webserver gehört.

+ +

HPKP is ein Trust on First Use ({{Glossary("TOFU")}}) ("Bei der ersten Benutzung vertrauen") Verfahren. Beim ersten Webseitenbesuch übermittelt der Server einen HTTP-Header um dem Client zu zeigen, welche öffentliche Schlüssel zu ihm gehören. Der Client speichert diese Information für eine angegebene Zeit. Wenn der Client die Webseite erneut besucht, erwartet er, dass mindestens ein Zertifikat der Zertifikatkette einen öffentlichen Schlüssel enthält, dessen Fingerprint dem Client bereits per HPKP bekannt ist. Wenn der Server einen unbekannten öffentlichen Schlüssel liefert, sollte der Client einen Fehler anzeigen.

+ +

Firefox (und Chrome) deaktivieren die Pin Validierung für Pinned Hosts mit Zertifikatketten, die bei einem benutzerdefinierten trust anchor terminieren (anstatt bei einem eingebauten trust anchor). Dies bedeutet, dass alle Pinning-Nichteinhaltungen für Nutzer ignoriert werden, welche ein Root-Zertifikat importiert haben.

+ +

HPKP aktivieren

+ +

Dieses Feature kann einfach aktiviert werden indem ein {{HTTPHeader("Public-Key-Pins")}} HTTP-Header beim Aufruf der Seite über HTTPS zurückgegeben wird:

+ +
Public-Key-Pins: pin-sha256="base64=="; max-age=expireTime [; includeSubdomains][; report-uri="reportURI"]
+
+ +
+
pin-sha256
+
Der Parameter beinhaltet einen Base64 codierten Subject Public Key Information ({{Glossary("SPKI")}}) Fingerprint. Es ist auch möglich mehrere Pins zu verschiedenen öffentlichen Schlüsseln zu definieren. Einige Browser werden hier zukünftig neben SHA-256 evtl. weitere Hash-Algorithmen erlauben. Weiter unten ist beschrieben, wie diese Informationen entweder aus dem Zertifikat oder der Schlüsseldatei extrahiert werden können.
+
max-age
+
Die Zeit (in Sekunden) in Sekunden, die ein Browser sich merken soll, dass auf diese Seite nur bei Benutzung eines der öffentlichen Schlüssel zugegriffen werden darf.
+
includeSubdomains {{ optional_inline() }}
+
Wenn dieser optionale Parameter angegeben wird, wird die Regel auch auf alle Subdomains der Site angewandt.
+
report-uri {{ optional_inline() }}
+
Wenn dieser optionale Parameter angegeben wird, werden Pinvalidierungsfehlschläge an die angegebene URL gemeldet.
+
+ +
+

Anmerkung: Die aktuelle Spezifikation verlangt die Aufnahme eines zweiten Pins für einen Backup-Schlüssel, der noch nicht in der Produktion verwendet wird. Dies ermöglicht es, den öffentlichen Schlüssel des Servers zu ändern, ohne die Zugänglichkeit für Clients zu beeinträchtigen, die die Pins bereits bemerkt haben. Dies ist z.B. dann wichtig, wenn der alte Schlüssel beschädigt wird.

+
+ +

Base64-enkodierte Public Key Informationen extrahieren

+ +
+

Note: Während das folgende Beispiel zeigt, wie man einen Pin auf ein Serverzertifikat setzt, wird empfohlen, den Pin auf das Zwischenzertifikat der CA zu setzen, die das Serverzertifikat ausgestellt hat, um Verlängerungen und Rotationen von Zertifikaten zu erleichtern.

+
+ +

First you need to extract the public key information from your certificate or key file and encode them using Base64.

+ +

The following commands will help you extract the Base64 encoded information from a key file, a certificate signing request, or a certificate.

+ +
openssl rsa -in my-key-file.key -outform der -pubout | openssl dgst -sha256 -binary | openssl enc -base64
+ +
openssl req -in my-signing-request.csr -pubkey -noout | openssl rsa -pubin -outform der | openssl dgst -sha256 -binary | openssl enc -base64
+ +
openssl x509 -in my-certificate.crt -pubkey -noout | openssl rsa -pubin -outform der | openssl dgst -sha256 -binary | openssl enc -base64
+ +

The following command will extract the Base64 encoded information for a website.

+ +
openssl s_client -connect www.example.com:443 | openssl x509 -pubkey -noout | openssl rsa -pubin -outform der | openssl dgst -sha256 -binary | openssl enc -base64
+ +

Beispiel für ein HPKP-Header

+ +
Public-Key-Pins: pin-sha256="cUPcTAZWKaASuYWhhneDttWpY3oBAkE3h2+soZS7sWs="; pin-sha256="M8HztCzM3elUxkcjR2S5P4hhyBNf6lHkmjAHKhpGPWE="; max-age=5184000; includeSubdomains; report-uri="https://www.example.net/hpkp-report"
+ +

In this example, pin-sha256="cUPcTAZWKaASuYWhhneDttWpY3oBAkE3h2+soZS7sWs=" pins the server's public key used in production. The second pin declaration pin-sha256="M8HztCzM3elUxkcjR2S5P4hhyBNf6lHkmjAHKhpGPWE=" also pins the backup key. max-age=5184000 tells the client to store this information for two month, which is a reasonable time limit according to the IETF RFC. This key pinning is also valid for all subdomains, which is told by the includeSubdomains declaration. Finally, report-uri="https://www.example.net/hpkp-report" explains where to report pin validation failures.

+ +

Setting up your webserver to include the HPKP header

+ +

The concrete steps necessary to deliver the HPKP header depend on the web server you use.

+ +
+

Note: These examples use a max-age of two months and include all subdomains. It is advised to verify that this setup will work for your server.

+
+ +
+

HPKP hat das Potential Nutzer für eine lange Zeit auszusperren, wenn es inkorrekt genutzt wird! Die Benutzung von Backup-Zertifikaten und/oder das Pinnen der Zertifizierungsstelle wird dringend empfohlen.

+
+ +

Apache

+ +

HPKP kann im Apache Webserver beispielsweise mit der folgenden Konfiguration aktiviert werden. Die Parameter müssen dann nur noch auf das Zielsystem angepasst werden. Das Apache Modul mod_headers wird benötigt.

+ +
Header always set Public-Key-Pins "pin-sha256=\"base64+primary==\"; pin-sha256=\"base64+backup==\"; max-age=5184000; includeSubDomains"
+
+ +

Nginx

+ +

Adding the following line and inserting the appropriate pin-sha256="..." values will enable HPKP on your nginx. This requires the ngx_http_headers_module.

+ +
add_header Public-Key-Pins 'pin-sha256="base64+primary=="; pin-sha256="base64+backup=="; max-age=5184000; includeSubDomains';
+ +

Lighttpd

+ +

The following line with your relevant key information (pin-sha256="..." fields) will enable HPKP on lighttpd.

+ +
setenv.add-response-header  = ( "Public-Key-Pins" => "pin-sha256=\"base64+primary==\"; pin-sha256=\"base64+backup==\"; max-age=5184000; includeSubDomains")
+ +

Note: This requires the mod_setenv server.module loaded which can be included by the following if not already loaded.

+ +
server.modules += ( "mod_setenv" )
+ +

IIS

+ +

Add the following line to the Web.config file to send the Public-Key-Pins header:

+ +
<system.webServer>
+  ...
+
+  <httpProtocol>
+    <customHeaders>
+      <add name="Public-Key-Pins" value="pin-sha256=&quot;base64+primary==&quot;; pin-sha256=&quot;base64+backup==&quot;; max-age=5184000; includeSubDomains" />
+    </customHeaders>
+  </httpProtocol>
+
+  ...
+</system.webServer>
+ +

Browserkompatibilität

+ + + +

{{Compat("http.headers.Public-Key-Pins")}}

+ +

Spezifikationen

+ + + + + + + + + + + + +
SpezifikationTitel
{{RFC("7469", "Public-Key-Pins", "2.1")}}Public Key Pinning Erweiterung für HTTP
+ +

Siehe auch

+ +
    +
  • {{HTTPHeader("Public-Key-Pins")}}
    • +
  • {{HTTPHeader("Public-Key-Pins-Report-Only")}}
    • +
diff --git a/files/de/web/javascript/a_re-introduction_to_javascript/index.html b/files/de/web/javascript/a_re-introduction_to_javascript/index.html new file mode 100644 index 0000000000..a306d9fd16 --- /dev/null +++ b/files/de/web/javascript/a_re-introduction_to_javascript/index.html @@ -0,0 +1,909 @@ +--- +title: Eine Wiedereinführung in JavaScript +slug: Web/JavaScript/Eine_Wiedereinfuehrung_in_JavaScript +tags: + - Anleitung + - CodingScripting + - Einleitung + - Guide + - Intermediate + - JavaScript + - Lernen +translation_of: Web/JavaScript/A_re-introduction_to_JavaScript +--- +
{{jsSidebar}}
+ +

Warum eine "Wieder" - Einführung? Weil {{Glossary("JavaScript")}} als die am meisten missverstandene Programmiersprache der Welt bekannt ist. Obwohl die Sprache oft als Spielzeug abgewertet wird, besitzt sie neben ihrer Einfachheit einige mächtige Sprachfunktionen. Heutzutage wird JavaScript in einer Großzahl von wichtigen Anwendungen verwendet, was zeigt, dass Wissen über diese Technologie eine wichtige Eigenschaft für jeden Web- und Mobil-Entwickler ist.

+ +

Es ist sinnvoll mit einem Überblick über die Sprachgeschichte zu beginnen. JavaScript wurde im Jahr 1995 von Brendan Eich entworfen, der Ingenieur bei Netscape war. JavaScript wurde erstmals 1996 mit Netscape 2 veröffentlicht. Ursprünglich hieß die Sprache LiveScript, wurde aber wegen unglücklichen Marketingentscheidung umbenannt, die sich die Popularität der Java-Sprache von Sun Microsystem zunutze machen wollte - obwohl beide wenig gemeinsam hatten. Dies ist seither eine Quelle für Verwirrung.

+ +

Einige Monate später veröffentlichte Microsoft JScript mit dem Internet Explorer 3. Diese war eine weitgehend zu JavaScript kompatibele Sprache. Einige Monate später übergab Netscape JavaScript an Ecma International, einer Europäischen Standardisierungsorganisation, welche noch im selben Jahr die ersten Edition des {{Glossary("ECMAScript")}} Standards veröffentlichten. Der Standard bekam 1999 ein bedeutendes Update mit ECMAScript Edition 3 und hält sich seither sehr stabil. Die vierte Edition des Standards wurde aufgrund von politischen Meinungsverschiedenheiten zur Komplexität der Sprache fallen gelassen. Viele Teile der vieren Edition bildeten die Basis der fünften und sechsten Edition des Standards, welche im Dezember 2009 bzw. im Juni 2015 veröffentlicht wurden.

+ +
+

Aus Gründen der Vertrautheit verwenden wir ab hier die Bezeichnung "JavaScript" anstatt "ECMAScript".

+
+ +

Anders als viele andere Programmiersprachen, gibt es bei JavaScript kein Konzept für Eingabe und Ausgabe. JavaScript wurde als Skriptsprache in eine Hostumgebung entworfen und es ist die Aufgabe dieser Umgebung Mechanismen für die Kommunikation mit der Außenwelt bereitzustellen. Die hierfür am meisten genutzte Hostumgebung ist der Browser, jedoch findet man Interpreter auch in vielen anderen Anwendungen, zum Beispiel Adobe Acrobat, Photoshop, SVG Bilder, Yahoo! Widget Umgebung, serverseitigen Applikationen wie node.js, NoSQL-Datenbanken wie die Open Source-Datenbank Apache CouchDB, integrierte Computer, Desktopumgebungen wie GNOME (eine der beliebtesten Desktopumgebungen für GNU/Linux Betriebssysteme) und vielen mehr.

+ +

Überblick

+ +

JavaScript ist eine dynamische Multi-Paradigmen-Sprache mit Typen und Operatoren, Standardobjekten und Methoden. Die Syntax basiert auf den Sprachen Java und C — viele Strukturen aus diesen Sprachen wurden in JavaScript übernommen. JavaScript unterstützt Objektorientierung mit Prototypobjekten statt Klassen (mehr darüber in Vererbung mit Prototypen und ES2015 Klassen). JavaScript unterstützt auch funktionale Programmierung — Funktionen sind Objekte, die Funktionen ermöglichen, ausführbaren Code zu speichern und wie jedes andere Objekt weitergegeben zu werden.

+ +

Beginnen wir mit einer Betrachtung der Sprachbausteine. JavaScript Programme manipulieren Werte und jeder Wert ist von einem bestimmten Typ. JavaScript Typen sind:

+ +
    +
  • {{jsxref("Number")}}
    • +
  • {{jsxref("String")}}
    • +
  • {{jsxref("Boolean")}}
    • +
  • {{jsxref("Function")}}
    • +
  • {{jsxref("Object")}}
    • +
  • {{jsxref("Symbol")}} (neu in ES 6)
    • +
+ +

... und {{jsxref("undefined")}} und {{jsxref("null")}}, die ein wenig speziell sind. Und {{jsxref("Array")}} , die eine besonere Art von Objekt ist. Und {{jsxref("Date")}} und {{jsxref("RegExp")}}, welche man quasi mitgeliefert bekommt. Wenn man genau sein will, sind Funktionen ebenfalls eine spezielle Art von Objekten. Also sieht das Typdiagramm eher so aus:

+ +
    +
  • {{jsxref("Number")}}
    • +
  • {{jsxref("String")}}
    • +
  • {{jsxref("Boolean")}}
    • +
  • {{jsxref("Symbol")}} (neu in ES2015)
    • +
  • {{jsxref("Object")}} +
      +
    • {{jsxref("Function")}}
      • +
    • {{jsxref("Array")}}
      • +
    • {{jsxref("Date")}}
      • +
    • {{jsxref("RegExp")}}
      • +
    +
    • +
  • {{jsxref("null")}}
    • +
  • {{jsxref("undefined")}}
    • +
+ +

Zusätzlich gibt es noch einige vordefinierte {{jsxref("Error")}} Typen. Der Einfachheit halber beschränken wir uns im Folgenden erst einmal auf die Typen aus dem ersten Diagramm.

+ +

Numbers

+ +

Numbers sind in JavaScript laut der Spezifikation "doppeltpräzise 64-bit Werte im IEEE 754 Format". Das hat einige interessante Konsequenzen. Es gibt in JavaScript nichts vergleichbares wie Integer, weshalb man vorsichtig mit Arithmetik umgehen muss, wenn man Mathematik wie in C oder Java nutzt.

+ +

Achte auch auf Dinge wie:

+ +
0.1 + 0.2 == 0.30000000000000004
+ +

In der Praxis werden Integer-Werte wie 32-Bit-Integer behandelt und einige Implementierungen speichern sie sogar so, bis sie einen Befehl ausführen sollen, der für eine Number, aber nicht für eine 32-Bit Integer gültig ist. Das kann z.B. für Bitoperationen wichtig sein.

+ +

Unterstützt werden die arithmetischen Standardoperationen, inklusive Addition, Subtraktion, Modulo (oder Rest) Arithmetik und so weiter. Außerdem existiert noch ein Objekt Math für die Anwendung von mathematischen Funktionen und Konstanten, welches oben noch nicht genannt wurde:

+ +
Math.sin(3.5);
+var umfang = 2 * Math.PI * r;
+ +

Man kann Strings mit der eingebauten {{jsxref("Global_Objects/parseInt", "parseInt()")}} Funktion nach Integer konvertieren. Die Funktion enthält die Basis des Zahlensystems für die Konvertierung als zweiten optionalen Parameter, welcher immer angegeben werden sollte:

+ +
parseInt("123", 10); // 123
+parseInt("010", 10); // 10
+
+ +

In älteren Browsern werden Strings, die mit "0" anfangen als Oktalzahlen (Basis 8) interpretiert, seit 2013 ist das aber nicht mehr so. Wenn man sich bei dem Stringformat nicht sicher ist, kann das in den älteren Browsern zu überraschenden Ergebnissen führen:

+ +
parseInt("010");  //  8
+parseInt("0x10"); // 16
+ +

Hier sieht man, dass die {{jsxref("Global_Objects/parseInt", "parseInt()")}} Funktion den ersten String als Oktalzahl, wegen der führenden 0, und den zweiten String als Hexadezimalzahl, wegen des führenden "0x", interpretiert. Die Hexadezimalnotation ist immernoch zulässig; nur die Oktalnotation wurde entfernt, weil sie praktisch nicht mehr verwendet wird.

+ +

Um eine Binärzahl in ein Integer zu ändern, verwendet man einfach die Basis 2:

+ +
parseInt("11", 2); // 3
+ +

Auf die gleiche Weise lassen sich auch Gleitkommazahlen mit Hilfe der Funktion {{jsxref("Global_Objects/parseFloat", "parseFloat()")}} konvertieren. Anders als bei der {{jsxref("Global_Objects/parseInt", "parseInt()")}} Funktion nutzt parseFloat() immer die Basis 10.

+ +

Auch der unäre + Operator kann eingesetzt werden, um zu einer Zahl zu konvertieren:

+ +
+ "42";   // 42
++ "010";  // 10
++ "0x10"; // 16
+ +

Ein spezieller Wert mit der Bezeichnung {{jsxref("NaN")}} (für "Not a Number") wird zurückgegeben, wenn der String keinen numerischen Wert enthält:

+ +
parseInt("hello", 10); // NaN
+ +

NaN ist gefährlich: Wenn es als Operand in eine mathematische Operation benutzt wird, wird das Ergebnis ebenfalls NaN sein;

+ +
NaN + 5; // NaN
+ +

Mit der eingebauten  {{jsxref("Global_Objects/isNaN", "isNaN()")}} Funktion kann man auf NaN testen:

+ +
isNaN(NaN); // true
+ +

JavaScript kennt außerdem die speziellen Werte {{jsxref("Infinity")}} und -Infinity:

+ +
 1 / 0; //  Infinity
+-1 / 0; // -Infinity
+ +

Man kann auf Infinity, -Infinity und NaN Werte mit der eingebauten Funktion {{jsxref("Global_Objects/isFinite", "isFinite()")}} testen:

+ +
isFinite(1 / 0);     // false
+isFinite(-Infinity); // false
+isFinite(NaN);       // false
+ +
+

Die {{jsxref("Global_Objects/parseInt", "parseInt()")}} und {{jsxref("Global_Objects/parseFloat", "parseFloat()")}} Funktionen lesen einen String, bis ein Zeichen erreicht wird, welches für das Zahlensystem unzulässig ist und geben die Zahl bis zu dieser Stelle zurück. Der unäre + Operator konvertiert den String einfach zu NaN, wenn dieser ein unerlaubtes Zeichen enthält. Probiere mal aus, den String "10.2abc" mit jeder der Methoden in der Console zu konvertieren, um die Unterschiede besser zu verstehen.

+
+ +

Strings

+ +

Strings sind in JavaScript eine Folge von Unicode-Zeichen. Das sollte für alle erfreulich sein, die mit Internationalisierung arbeiten. Genauer gesagt sind Strings Folgen von UTF-16 Codeeinheit; jeder Codeeinheit ist durch eine 16-Bit Zahl repräsentiert. Jedes Unicode-Zeichen besteht aus 1 oder 2 Codeeinheiten.

+ +

Für ein einzelnes Zeichen, verwendet man einfach einen String mit einem Zeichen.

+ +

Um die Länge eines Strings (in Codeeinheiten) herauszufinden, nutzt man die length Eigenschaft:

+ +
'hello'.length; // 5
+ +

Da ist die erster Begegnung mit JavaScript Objekten! Haben wir schon erwähnt, dass man auch Strings wie {{jsxref("Object", "Objekte", "", 1)}} verwenden kann? Sie haben auch {{jsxref("String", "Methoden", "#Methoden", 1)}}, um den Strings zu verändern und Informationen zu erhalten.

+ +
'hello'.charAt(0); // "h"
+'hello, world'.replace('hello', 'goodbye'); // "goodbye, world"
+'hello'.toUpperCase(); // "HELLO"
+ +

Andere Datentypen

+ +

JavaScript unterscheidet zwischen {{jsxref("null")}}, wobei es sich um einen Wert handelt, der einen "nicht Wert" repräsentiert (und nur über das null Schlüsselwort erreichbar ist) und {{jsxref("undefined")}}, wobei es sich um einen Wert vom Typ undefined handelt, welcher für einen nicht initialisierten Wert steht - also, dass noch kein Wert zugewiesen wurde. Variablen werden später besprochen, aber in JavaScript ist es möglich Variablen zu deklarieren, ohne ihnen eine Wert zuzuweisen. Wenn das gemacht wird ist die Variable vom Typ undefined. undefined ist sogar eine Konstante.

+ +

JavaScript hat einen Boolean Typ mit den möglichen Werten true und false (beide sind Schlüsselwörter). Jeder Wert kann mit den folgenden Regeln zu einem Boolean konvertiert werden:

+ +
    +
  1. false, 0, leere Strings (""), NaN, null, und undefined werden false.
    2. +
  2. Alle anderen Werte werden true.
    3. +
+ +

Die Konvertierung kann explizit mit der Boolean() Funktion durchgeführt werden:

+ +
Boolean('');  // false
+Boolean(234); // true
+ +

Das ist jedoch kaum nötig, da JavaScript die Konvertierung automatisch vornimmt, wenn ein Boolean erwartet wird, wie z.B. bei einer if-Anweisung (siehe unten). Aus diesem Grund ist oft von "true Werten" und "false Werten" die Rede, womit Werte gemeint sind, die zu true oder false werden, nachdem sie zu einem Boolean konvertiert wurden. Alternativ können diese Werte auch "truthy" und "falsy" genannt werden.

+ +

Boolesche Operationen wie beispielsweise && (logisches und), || (logisches oder) und ! (logisches nicht) werden ebenfalls unterstützt (siehe unten).

+ +

Variablen

+ +

Neue Variablen werden in JavaScript mit einem der drei Schlüsselwort let, const oder var deklariert.

+ +

let erlaubt es Variablen auf Blockebene zu deklarieren. Die deklarierte Variable ist in dem Block gültig, von dem sie umschlossen wird.

+ +
let a;
+let name = "Simon";
+ +

Im folgenden ist ein Beispiel für den Gültigkeitsbereich einer mit let deklarierten Variablen:

+ +
// myLetVariable ist hier *nicht* sichtbar
+
+for (let myLetVariable = 0; myLetVariable < 5; myLetVariable++) {
+  // myLetVariable ist nur hier sichtbar
+}
+
+// myLetVariable ist hier *nicht* sichtbar
+
+ +

const erlaubt es Variablen zu deklarieren, dessen Wert nie wieder geändert wird. Die Variable ist in dem Block sichtbar, von dem sie umschlossen wird.

+ +
const Pi = 3.14;  // Variable Pi wird initialisiert
+Pi = 1;  // Führt zu einem Fehler, weil konstante (const) Variablen nicht geändert werden können.
+
+ +

var ist das gebräuchlichste deklarative Schlüsselwort. Es hat nicht die Restriktionen, die die anderen beiden Schlüsselwörter haben. Das liegt daran, dass das traditionell der einzige Weg war, um eine Variable in JavaScript zu deklarieren. Eine Variable, die mit dem var Schlüsselwort definiert wird, ist in der Funktion, in der sie deklariert wird, erreichbar.

+ +
var a;
+var name = 'Simon';
+ +

Im folgenden ist ein Beispiel für den Gültigkeitsbereich einer mit var deklarierten Variablen:

+ +
// myVarVariable *ist* hier sichtbar
+
+for (var myVarVariable = 0; myVarVariable < 5; myVarVariable++) {
+// myVarVariable ist in der ganzen Funktion sichtbar
+}
+
+// myVarVariable *ist* hier sichtbar
+ +

Deklariert man eine Variable, ohne ihr einen Wert zuzuweisen, ist ihr Typ undefined.

+ +

Ein sehr wichtiger Unterschied zu anderen Programmiersprachen wie Java besteht darin, dass bei JavaScript keine Blöckegültigkeitsbereiche hat, sondern nur Funktionsgültigkeitsbereiche. Wird eine Variable mit dem var Schlüsselwort in einer zusammengesetzten Statement (z.B. if-Anweisung) definiert, so ist diese Variable innerhalb der ganzen Funktion sichtbar. Jedoch ist es ab ECMAScript 2015 mit let und const Deklarationen möglich, Variablen mit Blocksichtbarkeitsbereich zu erstellen.

+ +

Operatoren

+ +

JavaScripts numerische Operatoren sind +, -, *, / und % welches der Divisionsrestoperator ist (nicht dasselbe wie Modulo). Werte werden mit = zugewiesen und es gibt zusammengesetzte Zuweisungsstatement wie += und -=. Diese werden als x = x Operator y interpretiert.

+ +
x += 5
+x = x + 5
+ +

Zum Inkrementieren und Dekrementieren kann ++ und -- verwendet werden. Diese können als Prefix oder Postfix Operatoren benutzt werden.

+ +

Mit dem + Operator ist es auch möglich, Strings zu verbinden:

+ +
'hello' + ' world'; // "hello world"
+ +

Addiert man einen String mit einer Zahl (oder einem anderen Wert), wird alles zuerst zu einem String konvertiert. Dies bereitet manchmal Probleme:

+ +
"3" + 4 + 5;  // "345"
+3 + 4 + "5"; // "75"
+ +

Das Addieren eines leeren Strings zu einem Wert ist eine hilfreiche Methode, den Wert in einen String zu konvertieren.

+ +

Vergleiche können in JavaScript mit <, >, <= und >= durchgeführt werden. Dieses funktionieren bei Strings und Zahlen. Gleichheit ist etwas komplizierter. Der Doppelgleichoperator hat einen Typzwang, was zu überraschend Ergebnissen führen kann:

+ +
123 == "123"; // true
+1 == true;    // true
+ +

Um den Typzwang zu vermeiden, benutzt man den Dreifachgleichoperator:

+ +
123 === "123"; // false
+1 === true;    // false
+ +

Des Weiteren gibt es die Operatoren != und !== für das Testen auf Ungleichheit.

+ +

Außerdem gibt es in JavaScript noch bitweise Operationen.

+ +

Kontrollstrukturen

+ +

JavaScript hat eine ähnliche Menge an Kontrollstrukturen wie andere Sprachen aus der C Familie. Bedingte Statements sind durch if und else unterstützt; man kann sie auch verketten:

+ +
var name = 'kittens';
+if (name == 'puppies') {
+  name += ' woof';
+} else if (name == 'kittens') {
+  name += ' neow';
+} else {
+  name += '!';
+}
+name == 'kittens neow';
+
+ +

JavaScript hat while- und do-while-Schleifen. Die erste ist gut für normale Schleifen. Die zweite ist für Schleifen geeignet, bei denen sichergestellt werden soll, dass der Schleifeninhalt mindestens einmal ausgeführt wird:

+ +
while (true) {
+  // Endlosschleife!
+}
+
+var input;
+do {
+  input = get_input();
+} while (inputIsNotValid(input))
+
+ +

JavaScripts for-Schleife ist die selbe wie in C und Java: Die Kontrollinformationen können in einer einzigen Zeile angegeben werden.

+ +
for (var i = 0; i < 5; i++) {
+  // Wird 5-Mal ausgeführt
+}
+
+ +

JavaScript hat zudem zwei weitere bekannte for Schleifen: for...of

+ +
for (let value of array) {
+  // Tue etwas mit value
+}
+ +

und for...in:

+ +
for (let property in object) {
+  // Tue etwas mit dem objects property
+}
+ +

Die Operatoren && und || benutzen Kurzschlusslogik, was bedeutet, dass die Ausführung des zweiten Operanden abhängig von dem ersten ist. Dieses ist nützlich für die Überprüfung auf null, bevor auf Objektattribute zugegriffen wird:

+ +
var name = o && o.getName();
+
+ +

Oder für das Abfangen von Werten (wenn falsy Werte nicht valide sind):

+ +
var name = cachedName || (cachedName = getName());
+
+ +

JavaScript besitzt einen ternären Operator für bedingte Ausdrücke:

+ +
var allowed = (age > 18) ? 'yes' : 'no';
+
+ +

Das switch Statement kann führ mehrere Zweige abhängig von einer Zahl oder einem String eingesetzt werden:

+ +
switch(action) {
+    case 'draw':
+        drawIt();
+        break;
+    case 'eat':
+        eatIt();
+        break;
+    default:
+        doNothing();
+}
+
+ +

Lässt man das break Statement weg, werden auch der folgezweig ausgeführt. Dieses Verhalten ist selten gewollt — es lohnt sich in solchen Fällen explizite Kommentare hinzuzufügen, um späteres Debugging zu unterstützen:

+ +
switch(a) {
+    case 1: // fallthrough
+    case 2:
+        eatit();
+        break;
+    default:
+        donothing();
+}
+
+ +

Die default Klausel ist optional. Wenn gewünscht, können Ausdrücke im switch und im case eingesetzt werden. Der Vergleiche zwischen beiden wird mit dem === Operator durchgeführt:

+ +
switch(1 + 3) {
+    case 2 + 2:
+        yay();
+        break;
+    default:
+        neverhappens();
+}
+
+ +

Objekte

+ +

JavaScript Objekte setzen sich aus einfachen Name-Wert-Paaren zusammen. Sie sind ähnlich wie:

+ +
    +
  • Dictionaries in Python
    • +
  • Hashes in Perl und Ruby
    • +
  • Hash tables in C und C++
    • +
  • HashMaps in Java
    • +
  • Assoziative Arrays in PHP
    • +
+ +

Der Fakt, dass diese Datenstruktur so oft eingesetzt wird, zeigt seine Vielseitigkeit. Da alles (reine Kerntypen) in JavaScript ein Objekt ist, beinhaltet jedes JavaScript-Programm natürlich eine große Menge von Suchoperationen in Hashtabellen. Gut, dass diese so schnell sind!

+ +

Der "Name"-Teil ist ein JavaScript String, während als Wert jeder JavaScript Wert in Frage kommt — auch andere Objekte. Dies ermöglicht das Erstellen von beliebig komplexen Datenstrukturen.

+ +

Es gibt zwei grundlegende Möglichkeiten, ein leeres Objekt zu erstellen:

+ +
var obj = new Object();
+
+ +

Und:

+ +
var obj = {};
+
+ +

Beide sind semantisch äquivalent. Die zweite wird "Objektliteral Syntax" genannt und ist verbreiteter. Diese Syntax ist zudem der Kern des JSON Formates und sollte immer bevorzugt genutzt werden.

+ +

"Objektliteral Syntax" kann eingesetzt werden, um ein umfassendes Objekt zu erstellen:

+ +
var obj = {
+    name: "Carrot",
+    "for": "Max",
+    details: {
+        color: "orange",
+        size: 12
+    }
+}
+
+ +

Der Zugriff auf Eigenschaften kann verkettet werden:

+ +
obj.details.color; // orange
+obj["details"]["size"]; // 12
+ +

Das folgende Beispiel erstellt einen Prototyp Person und eine Instanz dieses Prototyps you.

+ +
function Person(name, age) {
+  this.name = name;
+  this.age = age;
+}
+
+// Definiere ein Objekt
+var you = new Person('You', 24);
+// Wir erstellen eine Person mit dem Namen "You" und dem Alter 24
+ +

Nach der Erstellung kann eine Objekteigenschaft über einem von zwei möglichen Wegen erreicht werden:

+ +
obj.name = "Simon";
+var name = obj.name;
+
+ +

Und...

+ +
// Klammernotation
+obj['name'] = 'Simon';
+var name = obj['name'];
+// man kann eine Variable benutzen, um einen Schlüssel zu definieren
+var user = prompt('was ist dein Schlüssel?');
+obj[user] = prompt('was ist dein Schlüssel?');
+
+ +

Beide sind wieder semantisch äquivalent. Die zweite Methode hat den Vorteil, dass der Name der Eigenschaft als String zur Verfügung gestellt wird, was bedeutet, dass dieser zur Laufzeit berechnet werden kann. Jedoch verhindert diese Methode, dass einige JavaScript-Engines "Minifier Optimierungen" durchführen können. Sie kann außerdem eingesetzt werden, um Eigenschaften zu erreichen, die ein reservierte Schlüsselwörter als Namen haben:

+ +
obj.for = "Simon"; // Syntaxfehler, da 'for' ein reserviertes Schlüsselwort ist
+obj["for"] = "Simon"; // funktioniert
+
+ +
+

Ab ECMAScript 5 können reservierte Wörter bei Objektliteralen verwendet werden. Das bedeutet, dass keine Anführungszeichen und eckige Klammern mehr nötig sind. Siehe ES5 Spec.

+
+ +

Weitere Informationen zu Objekten und Prototypen gibt es im Artikel Object.prototype. Für eine Erklärung von Objektprototypen und die Objektprototypenkette siehe in den Artikel Vererbung und die Prototypenkette.

+ +
+

Ab ECMAScript 2015 können Schlüssel mit Variablen definiert werden, indem eckige Klammern verwendet werden. {[phoneType]: 12345} ist möglich, statt var userPhone = {}; userPhone[phoneType] = 12345 zu verwenden.

+
+ +

Arrays

+ +

Arrays sind in JavaScript ein spezieller Typ von Objekten. Sie funktionieren weitgehend wie normale Objekte (numerische Eigenschaften können nur über die []-Syntax erreicht werden), besitzen jedoch eine zusätzliche Eigenschaft length. Der Wert dieser Eigenschaft ist immer der höchsten Index des Arrays + 1.

+ +

Eine Möglichkeit ein Array zu erstellen ist die folgende:

+ +
var a = new Array();
+a[0] = 'dog';
+a[1] = 'cat';
+a[2] = 'hen';
+a.length; // 3
+ +

Eine praktischere Möglichkeit  ist die Erstellung über ein Array-Literal.

+ +
var a = ['dog', 'cat', 'hen'];
+a.length; // 3
+ +

Zu beachten ist, dass array.length nicht unbedingt der Anzahl der Elemente des Arrays entspricht. Siehe das folgende Beispiel:

+ +
var a = ['dog', 'cat', 'hen'];
+a[100] = 'fox';
+a.length; // 101
+ +

Zur Erinnerung: Der Wert von length entspricht immer dem höchsten Index + 1.

+ +

Versucht man auf einen nicht-existenten Array-Index zuzugreifen, erhält man undefined:

+ +
typeof a[90]; // undefined
+ +

Wenn Sie die obigen Angaben über [] und Länge (array.length) berücksichtigen, können Sie über ein Array iterieren, indem Sie die folgende for-Schleife verwenden:

+ +
for (var i = 0; i < a.length; i++) {
+    // Verarbeitung von a[i]
+}
+
+ +

ECMAScript (ES2015) empfiehlt die wesentlich kürzer gefasste for...of-Schleife, um über Objekte und Arrays zu iterieren:

+ +
for (const currentValue of a) {
+  // Tue etwas mit currentValue
+}
+ +

Man kann auch mit einer for...in Schleife über ein Array iterieren, wobei diese nicht über die Arrayelemente, sondern die Arrayindizes iteriert. Zudem wird bei einer solchen Schleife auch über Eigenschaften iteriert, die evtl. später in Array.prototype hinzugefügt werden. Deshalb wird diese Methode für Arrays nicht empfohlen.

+ +

In ECMAScript (ES2015) wurde mit forEach() eine weitere Schleife zur Iteration über Arrays eingeführt:

+ +
['dog', 'cat', 'hen'].forEach(function(currentValue, index, array) {
+  // Verarbeite currentValue oder array[index]
+});
+ +

Das Anhängen eines neuen Elements zu einem Array funktioniert folgendermaßen:

+ +
a.push(item);
+ +

Arrays besitzen viele Methoden. Hier findet man die Dokumentation für alle Array Methoden.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MethodennameBeschreibung
a.toString()Gibt einen String zurück, bei dem toString() jedes Objektes getrennt mit Komma ist.
a.toLocaleString()Gibt einen String zurück, bei dem toLocaleString() jedes Objektes getrennt mit Komma ist.
a.concat(item1[, item2[, ...[, itemN]]])Erstellt eine Kopie mit den neu hinzugefügten Elemente.
a.join(sep)Wandelt das Array in einen String um. Die Elemente werden durch sep getrennt.
a.pop()Entfernt das letzte Element und gibt es zurück.
a.push(item1, ..., itemN)Fügt ein oder mehrere Elemente am Ende hinzu.
a.reverse()Kehrt die Reihenfolge des Arrays um.
a.shift()Entfernt das erste Element und gibt es zurück.
a.slice(start, end)Gibt einen Teil eines Arrays zurück.
a.sort([cmpfn])Sortiert das Array. Ein Vergleichsfunktion kann optional angegeben werden.
a.splice(start, delcount[, item1[, ...[, itemN]]])Modifiziert ein Array, indem ein Teil gelöscht und durch mehrere Elemente ersetzt wird.
a.unshift(item1[, item2[, ...[, itemN]]])Fügt Elemente am Anfang des Arrays hinzu.
+ +

Funktionen

+ +

Neben Objekten gehören Funktionen zu den Kernkomponenten von JavaScript. Die Syntax für eine einfache Funktion könnte kaum einfacher sein:

+ +
function add(x, y) {
+    var total = x + y;
+    return total;
+}
+
+ +

Das Beispiel demonstriert eine einfache Funktion. Einer JavaScript-Funktion können 0 oder mehr benannte Parameter übergeben werden. Der Funktionsrumpf kann beliebig viele Anweisungen enthalten und kann seine eigene lokalen Variablen definieren, die nur in der Funktion erreichbar sind. Das return Statement kann dazu benutzt werden, um jederzeit einen Rückgabewert festzulegen und die Funktion zu beenden. Wird kein return-Statement angegeben (oder ein leeres return-Statement ohne Wert), gibt JavaScript undefined zurück.

+ +

Die benannten Parameter sind eher als Richtlinie zu verstehen, weniger als eine Pflichtangabe. Eine Funktion kann also auch ohne Angabe der Parameter aufgerufen werden, wobei die Parameter dann den Wert undefined bekommen.

+ +
add() //NaN
+// Addition mit undefined ist nicht möglich
+
+ +

Mann kann der Funktion auch mehr Parameter übergeben, als erwartet werden:

+ +
add(2, 3, 4) // 5
+// Addition der ersten beiden Parameter; 4 wird ignoriert
+
+ +

Auf den ersten Blick wirkt das komisch, jedoch haben Funktionen innerhalb des Funktionsrumpfes Zugriff auf eine zusätzliche Variable namens arguments, welche ein arrayähnliches Objekt ist, das alle der Funktion übergebenen Werte enthält. Hier eine überarbeitete add-Funktion, die beliebig viele Parameter verarbeitet:

+ +
function add() {
+    var sum = 0;
+    for (var i = 0, j = arguments.length; i < j; i++) {
+        sum += arguments[i];
+    }
+    return sum;
+}
+
+add(2, 3, 4, 5); // 14
+
+ +

Das ist jedoch nicht nützlicher als 2 + 3 + 4 + 5 zu schreiben. Deswegen erstellen wir eine Funktion, welche den Durchschnitt aller Werte in unserem Array berechnet:

+ +
function avg() {
+  var sum = 0;
+  for (var i = 0, j = arguments.length; i < j; i++) {
+    sum += arguments[i];
+  }
+  return sum / arguments.length;
+}
+
+avg(2, 3, 4, 5); // 3.5
+ +

Das ist wirklich nützlich, jedoch wirkt es noch ein bisschen lang. Um den Code ein wenig zu reduzieren, kann man den Einsatz des arguments-Arrays durch eine Rest Parameter Syntax ersetzen. Damit können beliebig viele Argumente übergeben werden und der Code bleibt minimal. Der Rest Parameter Operator wird in der Funktionsparameterliste mit dem Format ...variable geschrieben und enthält alle nicht benannten, der Funktion übergebenen Argumente in der Variable. Zudem kann man die for-Schleife durch eine for...of-Schleife ersetzen, um die Werte in der Variablen direkt verwenden zu können.

+ +
function avg(...args) {
+  var sum = 0;
+  for (let value of args) {
+    sum += value;
+  }
+  return sum / args.length;
+}
+
+avg(2, 3, 4, 5); // 3.5
+ +
+

Die Variable args in der oberen Funktion enthält alle an die Funktion übergebenen Werte.

+ +

Es ist wichtig zu beachten, dass der Einsatz des Rest Parameter Operators in einer Funktionsdeklaration alle Argumente nach der Deklaration enthält, jedoch nicht die davor. Z. B. wird bei function avg(firstValue, ...args) der erste der Funktion übergebene Wert in der Variable firstValue gespeichert und alle folgenden Werte werden in der Variable args gespeichert. Das ist eine sehr nützliche Sprachfunktion, die jedoch ein neues Problem aufwirft. Die Funktion avg() nimmt eine mit Kommata getrennte Liste von Argumenten entgegen — was ist jedoch, wenn man den Durchschnitt eines Arrays haben möchte? Man kann die Funktion folgendermaßen umschreiben:

+
+ +
function avgArray(arr) {
+  var sum = 0;
+  for (var i = 0, j =  arr.length; i < j; i++) {
+    sum += arr[i];
+  }
+  return sum / arr.length;
+}
+
+avgArray([2, 3, 4, 5]); // 3.5
+ +

Es wäre jedoch schöner, wenn man die erste Funktion wiederverwenden könnten. Glücklicherweise ist es bei JavaScript möglich, eine Funktion mit einem Array von Argumenten aufzurufen, indem man die Methode apply() benutzt, die alle Function-Objekte besitzen:

+ +
avg.apply(null, [2, 3, 4, 5]); // 3.5
+ +

Das zweite Argument der apply()-Funktion ist das Array mit den Argumenten; das erste Argument wird später bzw. weiter unten näher erklärt. Das betont noch einmal die Tatsache, dass Funktionen auch Objekte sind.

+ +
+

Man kann das gleiche Ergebnis mit dem Einsatz des Spread operator im Funktionsaufruf erreichen.

+ +

Zum Beispiel: avg(...numbers);

+
+ +

JavaScript erlaubt es, anonyme Funktionen zu erstellen:

+ +
var avg = function() {
+    var sum = 0;
+    for (var i = 0, j = arguments.length; i < j; i++) {
+        sum += arguments[i];
+    }
+    return sum / arguments.length;
+}
+
+ +

Die Semantik ist äquivalent zu function avg() Form. Es ist extrem mächtig, weil es erlaubt, an bestimmten Stellen vollständige Funktionsdefinition zu schreiben, wo normalerweise ein Ausdruck verwendet wird. Das ermöglicht allerlei klevere Tricks. Hier eine Möglichkeit, eine Variable zu verbergen — wie Variablen mit Blocksichtbarkeit in C:

+ +
var a = 1;
+var b = 2;
+
+(function() {
+  var b = 3;
+  a += b;
+})();
+
+a; // 4
+b; // 2
+ +

JavaScript erlaubt den rekursiven Aufruf von Funktionen. Das ist praktisch beim Verarbeiten von Baumstrukturen, wie es beim Browser-DOM der Fall ist.

+ +
function countChars(elm) {
+    if (elm.nodeType == 3) { // TEXT_NODE
+        return elm.nodeValue.length;
+    }
+    var count = 0;
+    for (var i = 0, child; child = elm.childNodes[i]; i++) {
+        count += countChars(child);
+    }
+    return count;
+}
+
+ +

Das hebt ein potentielles Problem mit anonymen Funktionen hervor: Wie ruft man sie rekursiv auf, wenn sie keinen Namen haben? JavaScript erlaubt hierfür die Benennung von Funktionsausdrücken. Man kann dazu benannte "IIFEs" (Immediately Invoked Function Expressions) wie unten beschrieben benutzen:

+ +
var charsInBody = (function counter(elm) {
+    if (elm.nodeType == 3) { // TEXT_NODE
+        return elm.nodeValue.length;
+    }
+    var count = 0;
+    for (var i = 0, child; child = elm.childNodes[i]; i++) {
+        count += counter(child);
+    }
+    return count;
+})(document.body);
+
+ +

Der angegebene Name im Funktionsausdruck ist nur innerhalb der selben Funktion verfügbar. Das erlaubt der JavaScript-Engine, den Code besser zu optimieren und fördert die Lesbarkeit des Codes. Der Name wird zudem im Debugger und einigen Stack Traces angezeigt, was beim Debuggen viel Zeit sparen kann.

+ +

Zu beachten ist auch hier wieder, dass JavaScript-Funktionen ebenfalls Objekte sind — wie alles andere in JavaScript. Und man kann Eigenschaften ändern und hinzufügen, wie es im oberen Abschnitt über Objekte bereits gezeigt wurde.

+ +

Benutzerdefinierte Objekte

+ +
Detaillierte Informationen zum objektorientiertem Programmieren in JavaScript finden Sie in der Einführung zu objektorientiertem Programmieren in JavaScript.
+ +

In klassischen objektorientierten Programmiersprachen sind Objekte Zusammenstellungen von Daten und Methoden, die mit den Daten arbeiten. JavaScript ist eine Prototypenbasierte Sprache, die anders als in Java oder C++ kein Klassen-Statement besitzt (was manchmal verwirrend für Programmierer ist, die bisher nur mit Sprachen mit Klassen-Statements gearbeitet haben). Stattdessen benutzt JavaScript Funktionen als Klassen. Angenommen es gibt ein Objekt person mit Feldern für Vor- und Nachnamen. Es gibt zwei Wege den Namen zu schreiben: als "Vorname Nachname" oder "Nachname, Vorname". Nutzt man die vorher beschriebenen Funktionen und Objekte, lässt sich dies z. B. so umsetzen:

+ +
function makePerson(first, last) {
+  return {
+    first: first,
+    last: last
+  };
+}
+function personFullName(person) {
+  return person.first + ' ' + person.last;
+}
+function personFullNameReversed(person) {
+  return person.last + ', ' + person.first;
+}
+
+s = makePerson("Simon", "Willison");
+personFullName(s); // "Simon Willison"
+personFullNameReversed(s); // "Willison, Simon"
+ +

Das funktioniert zwar, ist aber keine schöne Lösung. Man hat am Ende dutzende unnötiger Funktionen im globalen Namensraum. Was man braucht ist die Möglichkeit, eine Funktion an ein Objekt anzuhängen. Weil Funktionen Objekte sind, lässt sich dies einfach realisieren:

+ +
function makePerson(first, last) {
+  return {
+    first: first,
+    last: last,
+    fullName: function() {
+      return this.first + ' ' + this.last;
+    },
+    fullNameReversed: function() {
+      return this.last + ', ' + this.first;
+    }
+  };
+}
+
+s = makePerson("Simon", "Willison")
+s.fullName(); // "Simon Willison"
+s.fullNameReversed(); // "Willison, Simon"
+ +

Hier sehen Sie etwas, was vorher noch nicht eingesetzt wurde: Das this-Schlüsselwort. Wird es innerhalb einer Funktion benutzt, verweist this auf das aktuelle Objekt. Was das tatsächlich bedeutet, hängt davon ab, wie die Funktion aufgerufen wird. Wenn die Funktion mit der Punkt- oder Klammer-Notation auf einem Objekt aufgerufen wird, repräsentiert this dieses Objekt. Wird die Punkt-Notation nicht verwendet, dann verweist this auf das globale Objekt.

+ +

Zu beachten ist, dass this ein häufiger Grund für Fehler ist. Zum Beispiel:

+ +
s = makePerson("Simon", "Willison");
+var fullName = s.fullName;
+fullName(); // undefined undefined
+ +

Wenn fullName() alleine und ohne den Einsatz von s.fullName() aufgerufen wird, referenziert this das globale Objekt. Dort gibt es keine globalen Variablen first oder last, weshalb man als Rückgabewert undefined erhält.

+ +

Man kann Vorteile des this-Schlüsselwortes nutzen, um die makePerson-Funktion zu optimieren:

+ +
function Person(first, last) {
+    this.first = first;
+    this.last = last;
+    this.fullName = function() {
+        return this.first + ' ' + this.last;
+    }
+    this.fullNameReversed = function() {
+        return this.last + ', ' + this.first;
+    }
+}
+var s = new Person("Simon", "Willison");
+
+ +

Hier wird ein neues Schlüsselwort aufgeführt: new. new steht in starker Beziehung zu this. Es erstellt ein neues Objekt und ruft die nachstehende Funktion auf, wobei this dann das neue Objekt ist. Zu beachten ist, dass die Funktion keinen Wert zurückgibt, sondern das this-Objekt modifiziert. Das new gibt dann das this-Objekt an den Aufrufer zurück. Funktionen die für den Aufruf mit new konzipiert sind, nennt man Konstruktoren. Gängige Praxis ist es, diese Funktionen mit einem großen Anfangsbuchstaben zu versehen, um an den Einsatz von new zu erinnern.

+ +

Die nun optimiertere Funktion hat jedoch immernoch eine Fehlerquelle mit dem Aufruf von fullName().

+ +

Das person-Objekt wird besser, weist jedoch noch immer einige unangenehme Effekte auf: Bei jedem Erstellen eines person-Objekts werden zwei neue Funktionen erzeugt — wäre es nicht besser, wenn dieser Code wiederverwendet werden könnte?

+ +
function personFullName() {
+    return this.first + ' ' + this.last;
+}
+function personFullNameReversed() {
+    return this.last + ', ' + this.first;
+}
+function Person(first, last) {
+    this.first = first;
+    this.last = last;
+    this.fullName = personFullName;
+    this.fullNameReversed = personFullNameReversed;
+}
+
+
+ +

Das ist besser: Man erstellt die Methodenfunktionen nur einmal und referenziert zu diesen im Konstruktor. Geht das noch besser? Die Antwort ist auch hier wieder ja:

+ +
function Person(first, last) {
+  this.first = first;
+  this.last = last;
+}
+Person.prototype.fullName = function() {
+  return this.first + ' ' + this.last;
+}
+Person.prototype.fullNameReversed = function() {
+  return this.last + ', ' + this.first;
+}
+ +

Person.prototype ist ein Objekt, das sich alle Person-Instanzen teilen. Dies ist ein Teil einer Prototypen-Suchkette (mit dem speziellen Namen Prototypenkette (prototype chain)): Bei jedem Versuch, auf eine Eigenschaft von Person zuzugreifen, die nicht gesetzt ist, prüft JavaScript ob diese Eigenschaft stattdessen in Person.prototype vorhanden ist. Als Ergebnis wird alles in Person.prototype für alle Instanzen eines Konstruktors über this verfügbar.

+ +

Das ist ein unglaublich mächtiges Werkzeug. JavaScript erlaubt es Prototypen irgendwo innerhalb des Programmes zu verändern, was bedeutet, dass man Methoden zur Laufzeit zu existierenden Objekten hinzufügen kann:

+ +
s = new Person("Simon", "Willison");
+s.firstNameCaps(); // TypeError on line 1: s.firstNameCaps is not a function
+
+Person.prototype.firstNameCaps = function firstNameCaps() {
+  return this.first.toUpperCase()
+};
+s.firstNameCaps(); // "SIMON"
+ +

Interessanterweise können auch neue Eigenschaften zu Prototypen von JavaScript-Objekten hinzugefügt werden. So kann z. B. dem String-Objekt eine neue Methode hinzugefügt werden, welche den String in umgekehrter Reihenfolge zurückgibt:

+ +
var s = "Simon";
+s.reversed(); // TypeError on line 1: s.reversed is not a function
+
+String.prototype.reversed = function reversed() {
+  var r = "";
+  for (var i = this.length - 1; i >= 0; i--) {
+    r += this[i];
+  }
+  return r;
+};
+
+s.reversed(); // nomiS
+ +

Die neue Methode funktioniert sogar mit String-Literalen!

+ +
"This can now be reversed".reversed(); // desrever eb won nac sihT
+ +

Wie schon vorher erwähnt, ist der Prototyp ein Teil einer Kette. Der Anfang dieser Kette ist Object.prototype, welcher die Methode toString() enthält — das ist die Methode die aufgerufen wird, wenn ein Objekt als String repräsentiert werden soll. Das ist für das Debuggen des Person-Objekts nützlich:

+ +
var s = new Person("Simon", "Willison");
+s; // [object Object]
+
+Person.prototype.toString = function() {
+  return '<Person: ' + this.fullName() + '>';
+};
+
+s.toString(); // "<Person: Simon Willison>"
+ +

Erinnern Sie sich an die Stelle weiter oben, als avg.apply() als erstes Argument null übergeben bekommen hat? Diese Stelle können wir uns zur genaueren Betrachtung wieder heranziehen. Mit diesem ersten übergebenen Argument von apply() wird das Objekt festgelegt, welches this repräsentiert. Hier ist z. B. eine einfache Implementierung von new:

+ +
function trivialNew(constructor, ...args) {
+  var o = {}; // Create an object
+  constructor.apply(o, args);
+  return o;
+}
+ +

Das ist keine exakte Replikation von new, weil die Prototypenkette nicht angelegt wird (es wäre schwer, hier vollständig darzustellen). Das ist nichts, was man häufig benötigt, jedoch ist es nützlich darüber Bescheid zu wissen. In diesem Codeteil nennt man ...args (mit den Punkten) das sogenannte Restargument — wie der Name impliziert, enthält dieser alle restlichen Argumente.

+ +

Der Aufruf von

+ +
var bill = trivialNew(Person, "William", "Orange");
+ +

ist somit fast äquivalent zu

+ +
var bill = new Person("William", "Orange");
+ +

apply() hat eine Schwesterfunktion namens call, die ebenfalls das Setzen von this erlaubt, jedoch statt eines Arrays nimmt sie eine erweiterte Liste mit Argumenten entgegen.

+ +
function lastNameCaps() {
+  return this.last.toUpperCase();
+}
+var s = new Person("Simon", "Willison");
+lastNameCaps.call(s);
+// Das gleiche wie:
+s.lastNameCaps = lastNameCaps;
+s.lastNameCaps();
+ +

Innere Funktionen

+ +

Funktionsdeklarationen sind in JavaScript auch innerhalb von Funktionen erlaubt. Das lies sich bei der weiter oben verwendeten makePerson()-Funktion schon erkennen. Ein wichtige Eigenschaft von verschachtelten Funktionen in JavaScript ist der Zugriff auf Variablen aus der Elternfunktion:

+ +
function betterExampleNeeded() {
+    var a = 1;
+    function oneMoreThanA() {
+        return a + 1;
+    }
+    return oneMoreThanA();
+}
+
+ +

Dies bietet einen großen Nutzen beim Schreiben von einfacher wartbarem Code. Wenn eine Funktion ein oder zwei andere Funktionen benutzt, diese aber im Code nirgendwo anders benötigt werden, kann man diese Hilfsfunktionen in die Funktion schachteln, die diese schlussendlich eigentlich aufruft. Das hällt die Anzahl der globalen Funktionen niedrig, was immer gut ist.

+ +

Dieses ist ein Gegenpool zum oft verlockenden Einsatz von globalen Variablen. Wenn komplexer Code geschrieben wird, ist es oft verlockend und einfach, globale Variablen für das Teilen von Werten zwischen mehreren Funktionen zu benutzen — was aber zu einem unwartbaren Code führen kann. Geschachtelte Funktionen teilen sich Variablen aus der Elternfunktion, weshalb dieser Mechanismus gut für das Koppeln von Funktionen geeignet ist, wenn es Sinn ergibt, ohne dabei den globalen Namensraum zu verunreinigen — "lokal global" wenn man so will. Diese Technik sollte mit Vorsicht eingesetzt werden, ist jedoch eine nützliche Möglichkeit.

+ +

Closures

+ +

Nun wird einer der mächtigsten Abstraktionsmechanismen vorgestellt, den JavaScript mit sich bringt —  der jedoch oft auch für Verwirrung sorgt. Was passiert im nachfolgenden Codeschnipsel?

+ +
function makeAdder(a) {
+  return function(b) {
+    return a + b;
+  };
+}
+var x = makeAdder(5);
+var y = makeAdder(20);
+x(6); // ?
+y(7); // ?
+ +

Der Name der makeAdder-Funktion lässt es schon vermuten, was diese bewirken soll: sie erstellt neue adder-Funktionen, welche dann mit einem Argument aufgerufen werden, welches zu dem Argument addiert wird, mit dem sie erstellt wurden.

+ +

Was hier passiert ist das gleiche wie das, was vorab mit den inneren Funktionen geschehen ist: eine Funktion, die in einer anderen Funktion definiert ist, hat Zugriff auf die Variable der äußeren Funktion. Hier jedoch mit dem Unterschied, dass die äußere Funktion etwas zurückgibt und vortäuscht, dass die lokalen Variablen nicht mehr existieren. Doch bleiben diese bestehen — andernfalls könnte die adder-Funktion nicht funktionieren. Außerdem gibt es zwei verschiedene Kopien der lokalen Variablen der makeAdder()-Funktion — eine, wo a den Wert 5 hat und eine wo a den Wert 20 hat. Die Ergebnisse der beiden Funktionsaufrufe ist deswegen folgendes:

+ +
x(6) // ergibt 11
+y(7) // ergibt 27
+
+ +

Hier ist, was tatsächlich passiert. Immer, wenn JavaScript eine Funktion ausführt, wird ein Scopeobjekt erstellt, welches die lokalen Variablen enthält, die in der Funktion erstellt werden. Es wird mit jeder Variablen initialisiert, die als Funktionsparameter übergeben wird. Das ist wie mit dem globalen Objekt, welches alle globalen Variablen und Funktionen in sich vorhält, jedoch mit einigen wichtigen Unterschieden: erstens wird immer ein neues Scopeobjekt für jeden Aufruf einer Funktion erstellt und zweitens (anders als bei globalen Objekten, welche als this und in Browsern als window erreichbar sind), sind diese Scopeobjekte nicht direkt im JavaScript Code erreichbar. Es gibt zum Beispiel keinen Mechanismus zum Iterieren aller Eigenschaften eines Scopeobjekts.

+ +

Beim Aufruf der makeAdder()-Funktion wird ein Scope-Objekt erstellt, das eine Eigenschaft besitzt: a, welche das übergebene Argument der makeAdder() Funktion ist. makeAdder() gibt dann eine neu erstellte Funktion zurück. Normalerweise würde der Garbage Collector von JavaScript das für makeAdder() erstellte Scopeobjekt an dieser Stelle entsorgen, doch die zurückgegebene Funktion enthält noch immer eine Referenz auf das Scopeobjekt. Als Resultat wird das Scopeobjekt nicht entsorgt, bis es keine Referenzen mehr auf die von makeAdder() zurückgegebene Funktion gibt.

+ +

Scopeobjekte bilden eine Scopekette, die ähnlich funktioniert wie die Prototypenkette von JavaScripts Objektsystem.

+ +

Eine Closure ist eine Kombination aus einer Funktion und dem Scopeobjekt, in dem die Funktion erstellt wurde. Closures sind in der Lage, einen Status zu speichern — als solches können sie oft an Stellen von Objekten eingesetzt werden. Hier sind einige gute Einführungen zu Closures zu finden.

diff --git "a/files/de/web/javascript/aufz\303\244hlbarkeit_und_zugeh\303\266rigkeit_von_eigenschaften/index.html" "b/files/de/web/javascript/aufz\303\244hlbarkeit_und_zugeh\303\266rigkeit_von_eigenschaften/index.html" deleted file mode 100644 index 70c769be5a..0000000000 --- "a/files/de/web/javascript/aufz\303\244hlbarkeit_und_zugeh\303\266rigkeit_von_eigenschaften/index.html" +++ /dev/null @@ -1,340 +0,0 @@ ---- -title: Aufzählbarkeit und Zugehörigkeit von Eigenschaften -slug: Web/JavaScript/Aufzählbarkeit_und_Zugehörigkeit_von_Eigenschaften -tags: - - Eigenschaft - - JavaScript - - Objekt - - enumerable -translation_of: Web/JavaScript/Enumerability_and_ownership_of_properties ---- -
{{JsSidebar("More")}}
- -

Aufzählbare Eigenschaften sind jene, deren internes Statusfeld enumerable gesetzt ist.

- -

Alle aufzählbaren Eigenschaften eines Objektes sind mit for...in-Schleifen zu durchlaufen (sofern der Name der Eigenschaft kein Symbol ist), daher die Bezeichnung „aufzählbar“.
- Neben for…in gibt es weitere Möglichkeiten, die Existenz einer Eigenschaft zu erkennen, Eigenschaften aufzuzählen oder abzurufen. Siehe dazu nachfolgende Tabellen.

- -

Standardmäßig aufzählbar sind Eigenschaften, die durch einfache Zuweisung oder Initialisierung entstanden sind, nicht jedoch Eigenschaften, die durch Object.defineProperty oder ähnliche Mechanismen erzeugt wurden.

- -

Die Zugehörigkeit einer Eigenschaft ergibt sich aus dem Ort seiner Definition; dies ist entweder das Objekt selbst oder einer seiner Prototypen. Eine Eigenschaft, die im Objekt definiert wurde, gehört zu diesem Objekt.

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Aufzählbarkeit und Zugehörigkeit – Eingebaute Methoden zur Erkennung, zum Abruf und zur Aufzählung
FunktionObjektObjekt und geerbt aus Prototypenkettenur geerbt aus Prototypenkette
Erkennung - - - - - - - - - - - - - - - -
aufzählbarnicht aufzählbaraufzählbar und nicht aufzählbar
-

propertyIsEnumerable

- -

hasOwnProperty

- 		-

hasOwnProperty – aufzählbare Eigenschaften mit propertyIsEnumerable entfernt

- 		hasOwnProperty
- 		- - - - - - - - - - - - - - - -
aufzählbarnicht aufzählbaraufzählbar und nicht aufzählbar
nur mit eigenem Code möglichnur mit eigenem Code möglichin
- 		nur mit eigenem Code möglich
Abruf - - - - - - - - - - - - - - - -
aufzählbarnicht aufzählbaraufzählbar und nicht aufzählbar
-

Object.keys

- -

getOwnPropertyNames 

- -

getOwnPropertySymbols

- 		getOwnPropertyNames, getOwnPropertySymbols – aufzählbare Eigenschaften mit propertyIsEnumerable entfernt -

getOwnPropertyNames

- -

getOwnPropertySymbols

-
- 		nur mit eigenem Code möglichnur mit eigenem Code möglich
Aufzählung - - - - - - - - - - - - - - - -
aufzählbarnicht aufzählbaraufzählbar und nicht aufzählbar
-

Object.keys

- -

getOwnPropertyNames 

- -

getOwnPropertySymbols

- 		getOwnPropertyNames, getOwnPropertySymbols – aufzählbare Eigenschaften mit propertyIsEnumerable entfernt -

getOwnPropertyNames

- -

getOwnPropertySymbols

-
- 		- - - - - - - - - - - - - - - -
aufzählbarnicht aufzählbaraufzählbar und nicht aufzählbar
-

for..in

- -

(ohne Symbole)

- 		nur mit eigenem Code möglichnur mit eigenem Code möglich
- 		nur mit eigenem Code möglich
-
- -

Sichtbarkeit von Eigenschaften

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
infor..inobj.hasOwnPropertyobj.propertyIsEnumerableObject.keysObject.getOwnPropertyNamesObject.getOwnPropertyDescriptorsReflect.ownKeys()
Aufzählbarjajajajajajajaja
Nicht aufzählbarjaneinjaneinneinjajaja
Symbol als Namejaneinjajaneinneinjaja
Aufzählbar, geerbtjajaneinneinneinneinneinnein
Nicht aufzählbar, geerbtjaneinneinneinneinneinneinnein
Symbol als Name, geerbtjaneinneinneinneinneinneinnein
-
- -

Eigenschaften nach Aufzählbarkeit oder Zugehörigkeit abrufen

- -

Der nachfolgende Code ist nicht immer der effizienteste Weg, aber als einfaches Beispiel gut geeignet.

- -
    -
  • Die Existenz einer Eigenschaft erkennen: SimplePropertyRetriever.theGetMethodYouWant(obj).indexOf(prop) > -1
    • -
  • Alle Eigenschaften durchlaufen:
    - SimplePropertyRetriever.theGetMethodYouWant(obj).forEach(function (value, prop) {}); (or use filter(), map(), etc.)
    • -
- -
var SimplePropertyRetriever = {
-    getOwnEnumerables: function(obj) {
-        return this._getPropertyNames(obj, true, false, this._enumerable);
-         // Or could use for..in filtered with hasOwnProperty or just this: return Object.keys(obj);
-    },
-    getOwnNonenumerables: function(obj) {
-        return this._getPropertyNames(obj, true, false, this._notEnumerable);
-    },
-    getOwnEnumerablesAndNonenumerables: function(obj) {
-        return this._getPropertyNames(obj, true, false, this._enumerableAndNotEnumerable);
-        // Or just use: return Object.getOwnPropertyNames(obj);
-    },
-    getPrototypeEnumerables: function(obj) {
-        return this._getPropertyNames(obj, false, true, this._enumerable);
-    },
-    getPrototypeNonenumerables: function(obj) {
-        return this._getPropertyNames(obj, false, true, this._notEnumerable);
-    },
-    getPrototypeEnumerablesAndNonenumerables: function(obj) {
-        return this._getPropertyNames(obj, false, true, this._enumerableAndNotEnumerable);
-    },
-    getOwnAndPrototypeEnumerables: function(obj) {
-        return this._getPropertyNames(obj, true, true, this._enumerable);
-        // Or could use unfiltered for..in
-    },
-    getOwnAndPrototypeNonenumerables: function(obj) {
-        return this._getPropertyNames(obj, true, true, this._notEnumerable);
-    },
-    getOwnAndPrototypeEnumerablesAndNonenumerables: function(obj) {
-        return this._getPropertyNames(obj, true, true, this._enumerableAndNotEnumerable);
-    },
-    // Private static property checker callbacks
-    _enumerable: function(obj, prop) {
-        return obj.propertyIsEnumerable(prop);
-    },
-    _notEnumerable: function(obj, prop) {
-        return !obj.propertyIsEnumerable(prop);
-    },
-    _enumerableAndNotEnumerable: function(obj, prop) {
-        return true;
-    },
-    // Inspired by http://stackoverflow.com/a/8024294/271577
-    _getPropertyNames: function getAllPropertyNames(obj, iterateSelfBool, iteratePrototypeBool, includePropCb) {
-        var props = [];
-
-        do {
-            if (iterateSelfBool) {
-                Object.getOwnPropertyNames(obj).forEach(function(prop) {
-                    if (props.indexOf(prop) === -1 && includePropCb(obj, prop)) {
-                        props.push(prop);
-                    }
-                });
-            }
-            if (!iteratePrototypeBool) {
-                break;
-            }
-            iterateSelfBool = true;
-        } while (obj = Object.getPrototypeOf(obj));
-
-        return props;
-    }
-};
- -

Siehe auch

- -
    -
  • in
    • -
  • for..in
    • -
  • {{jsxref("Object.hasOwnProperty()")}}
    • -
  • {{jsxref("Object.propertyIsEnumerable()")}}
    • -
  • {{jsxref("Object.getOwnPropertyNames()")}}
    • -
  • {{jsxref("Object.keys()")}}
    • -
  • {{jsxref("Object.getOwnPropertyDescriptors()")}}
    • -
diff --git a/files/de/web/javascript/data_structures/index.html b/files/de/web/javascript/data_structures/index.html new file mode 100644 index 0000000000..d918cd7a0e --- /dev/null +++ b/files/de/web/javascript/data_structures/index.html @@ -0,0 +1,271 @@ +--- +title: JavaScript Datentypen und Datenstrukturen +slug: Web/JavaScript/Datenstrukturen +tags: + - Beginner + - JavaScript + - Types +translation_of: Web/JavaScript/Data_structures +--- +
{{jsSidebar("More")}}
+ +

Alle Programmiersprachen besitzen eingebaute Datenstrukturen. Diese unterschieden sich aber je nach Programmiersprache. Dieser Artikel versucht, die in JavaScript verfügbaren Datenstrukturen und ihre Eigenschaften zu erläutern. Außerdem werden an passenden Stellen Vergleiche zu anderen Programmiersprachen gezogen.

+ +

Dynamische Typisierung

+ +

JavaScript ist eine schwach typisierte oder dynamische Programmiersprache. Datentypen werden bei einer Variable nicht explizit deklariert und jede Variable kann mit Werten jedes Typen beschrieben (überschrieben) werden:

+ +
var foo = 42;    // foo ist jetzt eine number
+var foo = "bar"; // foo ist jetzt ein string
+var foo = true;  // foo ist jetzt ein boolean
+
+ +

Datentypen

+ +

Der aktuelle ECMAScript Standard definiert sieben Datentypen:

+ +
    +
  • Sechs Datentypen sind {{Glossary("Primitive", "primitives")}}: +
      +
    • {{Glossary("Boolean")}}
      • +
    • {{Glossary("Null")}}
      • +
    • {{Glossary("Undefined")}}
      • +
    • {{Glossary("Number")}}
      • +
    • {{Glossary("String")}}
      • +
    • {{Glossary("Symbol")}} (new in ECMAScript 2015)
      • +
    +
    • +
  • und {{Glossary("Object")}}
    • +
+ +

Primitive Werte

+ +

Alle Datentypen, bis auf Object, definieren unveränderbare Werte (Werte, die nicht verändert werden können). Zum Beispiel im Gegensatz zu C sind Strings unveränderbar. Die Werte dieser Datentypen werden als "primitive Werte" bezeichnet.

+ +

Boolean Datentyp

+ +

Boolean repräsentiert eine logische Einheit und kann zwei Werte annehmen: true und false.

+ +

Null Datentyp

+ +

Der Null Typ hat genau einen Wert: null. Siehe {{jsxref("null")}} und {{Glossary("Null")}} für mehr Details.

+ +

Undefined Datentyp

+ +

Eine Variable, der noch kein Wert zugewiesen wurde, hat den Wert undefined. Siehe {{jsxref("undefined")}} und {{Glossary("Undefined")}} für mehr Details.

+ +

Number Datentyp

+ +

Laut dem ECMAScript Standard gibt es nur einen Datentyp für Zahlen: double-precision 64-bit binary format IEEE 754 value (Zahlen zwischen -(263) und +263-1). Es gibt keinen spezifischen Datentyp für Ganzzahlen. Neben Gleitkommazahlen kann der Datentyp für Zahlen auch drei symbolische Werte annehmen: +Infinity, -Infinity und NaN (not-a-number = keine Zahl).

+ +

Um auf größere oder kleinere Werte als +/-Infinity zu prüfen, können die Konstanten {{jsxref("Number.MAX_VALUE")}} oder {{jsxref("Number.MIN_VALUE")}} verwendet werden. Ab ECMAScript 2015 kann auch geprüft werden, ob sich eine Zahl innerhalb des Bereichs der Gleitkommazahlen mit doppelter Präzision befindet. Die ist mit {{jsxref("Number.isSafeInteger()")}} als auch {{jsxref("Number.MAX_SAFE_INTEGER")}} und {{jsxref("Number.MIN_SAFE_INTEGER")}} möglich. Zahlen außerhalb diesen Bereichs sind in JavaScript nicht mehr sicher.

+ +

Der Datentyp für Zahlen hat eine Ganzzahl mit zwei Repräsentationen: 0 kann als -0 und +0 repräsentiert werden. ("0" ist ein Alias für +0). In der Praxis hat dies fast keinen Einfluss. +0 === -0 ist zum Beispiel true. Eine Division ergibt aber zwei unterschiedliche Werte:

+ +
> 42 / +0
+Infinity
+> 42 / -0
+-Infinity
+
+ +

Obwohl eine Zahl oft ihren Wert repräsentiert, bietet JavaScript einige binäre Operatoren an. Mit ihnen können zum Beispiel mehrere Boolean Werte innerhalb einer einzigen Zahl mittels Bitmaskierung repräsentiert werden. Das gilt generell als schlechte Praxis, da JavaScript andere Wege anbietet, um eine Menge von Booleans zu repräsentierten (wie zum Beispiel ein Array von Booleans oder ein Objekt mit Boolean Werten als benannte Eigenschaften). Bitmaskierung führt außerdem dazu, dass Code schwerer zu lesen, zu verstehen und zu warten ist. In sehr speziellen Anwendungsgebiete kann eine Bitmaskierung aber notwendig sein. Zum Beispiel wenn nur geringe Speichermengen verfügbar sind oder in extremen Fällen, wenn jedes übertragene Bit im Netzwerk zählt. Diese Technik sollte aber als letzter Ausweg gesehen werden, um die Größe zu optimieren.

+ +

String Datentyp

+ +

Der Datentyp String wird in JavaScript für die Repräsentation von textuellen Daten verwendet. Er ist eine Menge von "Elementen" aus 16-Bit vorzeichenlosen Ganzzahlenwerten. Jedes Element im String nimmt eine Position im String ein. Das erste Element befindet sich an der Position mit dem Index 0, das nächste beim Index 1 und so weiter. Die Länge eines String ist die Anzahl der sich darin befindenden Elemente.

+ +

In Gegensatz zu anderen Programmiersprachen wie C kann ein String in JavaScript nicht verändert werden. Das bedeutet, dass ein String nicht mehr verändert werden kann, nachdem er erstellt wurde. Es ist aber möglich einen anderen String mit der Hilfe von Operationen aus dem ursprünglichen String zu erstellen:

+ +
    +
  • Eine Teilzeichenfolge vom ursprünglichen String durch das Auswählen von bestimmten Zeichen oder mit der Methode {{jsxref("String.substr()")}}.
    • +
  • Eine Verkettung von zwei Strings mit dem Operator (+) oder {{jsxref("String.concat()")}}.
    • +
+ +

Vermeiden Sie "stringly-typing" in Ihrem Code!

+ +

Es kann verlockend sein mit String komplexe Daten zu repräsentieren. Es bringt kurzfristige Vorteile mit sich:

+ +
    +
  • Komplexe Strings können einfach durch Verkettung erstellt werden.
    • +
  • Strings sind einfacher im Debug (die Ausgabe entspricht dem Inhalt vom String).
    • +
  • Strings sind bei vielen APIs gebräuchlich (Eingabefeldern, Local Storage Werte, {{ domxref("XMLHttpRequest") }} Antworten in ihrer Eigenschaft als responseText, etc.). Dadurch kann es verlockend sein nur mit Strings zu arbeiten.
    • +
+ +

Ohne Konventionen kann jede Datenstruktur als String repräsentiert werden. Das ist aber keine gute Idee. Es könnte zum Beispiel eine Liste emuliert werden, indem die Listenelemente im String durch einen Separator getrennt werden. In diesem Fall ist ein JavaScript Array aber geeigneter, denn die Liste kann zerstört werden sobald ein Listenelement den Separator enthält. Ein Escape-Zeichen oder Ähnliches müsste verwendet werden. Dafür sind aber zusätzliche Konventionen nötig und die Wartung des Codes nimmt an Komplexität zu.

+ +

Strings sollten nur für textuelle Daten verwendet werden. Wenn komplexe Daten repräsentiert werden sollen, parsen Sie den String und verwenden Sie eine geeignete Abstraktion.

+ +

Symbol Datentyp

+ +

Symbole in JavaScript sind mit ECMAScript 2015 eingeführt worden. Ein Symbol ist ein eindeutiger und unveränderbarer primitiver Wert. Er kann als Schlüssel einer Eigenschaft eines Objekts (siehe unten) verwendet werden. In manchen Programmiersprachen werden Symbole auch Atoms genannt. Details dazu sind unter {{Glossary("Symbol")}} und dem {{jsxref("Symbol")}} Object Wrapper in JavaScript zu finden.

+ +

Objekte

+ +

Objekte sind in der Informatik Werte im Speicher, die möglicherweise über einen {{Glossary("Identifier", "identifier")}} referenziert werden.

+ +

Eigenschaften

+ +

In JavaScript können Objekte als eine Sammlung von Eigenschaften (Properties) angesehen werden. Mit der Object Literal Syntax werden die nötigsten Eigenschaften initialisiert. Danach können Eigenschaften hinzugefügt oder wieder entfernt werden. Der Wert einer Eigenschaft kann von jedem Datentyp sein. Darunter können sich auch andere Objekte befinden. Dadurch können komplexe Datenstrukturen realisiert werden. Eigenschaften werden mit einem Key identifiziert. Ein Key ist entweder ein String oder ein Symbol.

+ +

Es gibt zwei Arten von Eigenschaften, die bestimmte Attribute haben: Die Dateneigenachften und Zugriffseigenschaften.

+ +

Dateneigenschaften

+ +

Assoziiert einen Key mit einem Wert und besitzt die folgenden Attribute:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Attribute einer Dateneigenschaft
AttributDatentypBeschreibungStandardwert
[[Value]]beliebiger JavaScript DatentypDer Wert, der bei einem Get-Zugriff auf die Eigenschaft zurückgegeben wirdundefined
[[Writable]]Booleanfalse, wenn [[Value]] der Eigenschaft nicht verändert werden kann.false
[[Enumerable]]Booleantrue, wenn die Eigenschaft in for...in Schleifen aufgelistet wird. Siehe dazu auch Aufzählbarkeit und Eigentum von Eigenschaften.false
[[Configurable]]Booleanfalse, wenn die Eigenschaft nicht gelöscht und die Attribute [[Value]] und [[Writable]] nicht verändert werden können.false
+ +

Zugriffseigenschaften

+ +

Assoziiert einen Key mit einer oder zwei Accessor-Funktionen (get und set), um einen Wert zu erhalten oder zu speichern. Es besitzt die folgenden Attribute:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Attribute eines Zugriffseigenschaft
AttributDatentypBeschreibungStandardwert
[[Get]]Funktionsobjekt oder undefinedDie Funktion wird ohne ein Argument aufgerufen und gibt den Wert der Eigenschaft zurück, sobald ein Get-Zugriff auf den Wert ausgeführt wird. Siehe auch get.undefined
[[Set]]Funktionsobjekt oder undefinedDie Funktion wird mit einem Argument aufgerufen, das den Wert für die Zuweisung enthält. Sie wird immer aufgerufen, sobald eine bestimmte Eigenschaft verändert werden soll. Siehe auch set.undefined
[[Enumerable]]Booleantrue, wenn die Eigenschaft in for...in Schleifen aufgelistet wird.false
[[Configurable]]Booleanfalse, wenn die Eigenschaft nicht gelöscht und nicht zu einer Dateneigenschaft verändert werden kann.false
+ +
+

Hinweis: Attribut wird normalerweise von der JavaScript-Umgebung genutzt und man kann nicht direkt zugreifen (mehr darüber: Object.defineProperty()). Deswegen sind die Attribute in doppelten eckigen Klammern statt in einfachen.

+
+ +

"Normale" Objekte und Funktionen

+ +

Ein Objekt in JavaScript ist ein Mapping zwischen Keys und Werten. Keys sind Strings oder Symbole und Werte können von jedem Datentyp sein. Dadurch sind Objekte eine Art Hashtabelle.

+ +

Funktionen sind reguläre Objekte mit der Fähigkeit direkt aufgerufen werden zu können.

+ +

Datum

+ +

Mit der in JavaScript eingebauten Date Utility kann ein Datum repräsentiert werden.

+ +

Indizierte Collections: Arrays und typisierte Arrays

+ +

Arrays sind reguläre Objekte bei denen eine Beziehung zwischen Eigenschaften, die über Ganzzahlen indiziert werden, und der Eigenschaft 'length' besteht. Zusätzlich erben Arrays von Array.prototype, einer Helfermethoden, die die Manipulation von Arrays anbietet, wie zum Beispiel indexOf (zur Suche eines Werts im Array) oder push (um Elemente zu einem Array hinzufügen). Dadurch können Listen und Mengen über ein Array repräsentiert werden.

+ +

Typisierte Arrays sind in JavaScript mit ECMAScript Edition 2015 eingeführt worden. Sie bieten eine Array-ähnliche Sicht auf einen darunterliegenden binären Datenpuffer an. Die folgende Tabelle stellt äquivalente C Datentypen dar:

+ +

{{page("/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray", "TypedArray_objects", "", 0, 3)}}

+ +

Keyed Collections: Maps, Sets, WeakMaps, WeakSets

+ +

Diese Datenstrukturen verwenden Objektreferenzen als Keys. Sie wurden mit ECMAScript Edition 6 eingeführt. {{jsxref("Set")}} und {{jsxref("WeakSet")}} repräsentieren eine Menge von Objekten, während {{jsxref("Map")}} und {{jsxref("WeakMap")}} einen Wert mit einem Objekt assoziieren. Der Unterschied zwischen Maps und WeakMaps ist, dass bei Maps über Objekt-Keys iteriert werden kann. Das erlaubt eine spätere Optimierung der Garbage Collection.

+ +

Maps und Sets könnten in reinem ECMAScript 5 implementiert werden. Da Objekte aber nicht verglichen werden können (im Sinne von zum Beispiel "kleiner gleich"), wäre die Performance für einen Look-Up linear. Native Implementierungen (inklusive WeakMaps) können eine ungefähr logarithmische Look-Up Performance haben.

+ +

Um Daten an einen DOM-Knoten zu binden, werden normalerweise die Eigenschaften direkt auf dem Objekt gesetzt oder es werden data-* Attribute verwendet. Das hat aber den Nachteil, dass die Daten für jedes Skript in demselben Kontext verfügbar sind. Mit Maps und WeakMaps können Daten einfach privat an ein Objekt gebunden werden.

+ +

Strukturierte Daten: JSON

+ +

JSON (JavaScript Object Notation) ist ein leichtgewichtges Format zum Datenaustausch, das von JavaScript abgeleitet aber auch von vielen anderen Programmiersprachen verwendet wird. Mit JSON können universelle Datenstrukturen aufgebaut werden. Siehe {{Glossary("JSON")}} und {{jsxref("JSON")}} für mehr Details.

+ +

Mehr Objekte in der Standardbibliothek

+ +

JavaScript hat eine Standardbibliothek mit zahlreichen eingebauten Objekten. Details darüber sind unter Referenz zu finden.

+ +

Datentypen mit dem typeof Operator bestimmen

+ +

Der typeof Operator kann den Datentyp einer Variablen herausfinden. Unter der Referenzseite sind mehr Details und Grenzfälle zu finden.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('ES1')}}{{Spec2('ES1')}}initiale Definition
{{SpecName('ES5.1', '#sec-8', 'Types')}}{{Spec2('ES5.1')}} 
{{SpecName('ES2015', '#sec-ecmascript-data-types-and-values', 'ECMAScript Data Types and Values')}}{{Spec2('ES2015')}} 
{{SpecName('ESDraft', '#sec-ecmascript-data-types-and-values', 'ECMAScript Data Types and Values')}}{{Spec2('ESDraft')}} 
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/datenstrukturen/index.html b/files/de/web/javascript/datenstrukturen/index.html deleted file mode 100644 index d918cd7a0e..0000000000 --- a/files/de/web/javascript/datenstrukturen/index.html +++ /dev/null @@ -1,271 +0,0 @@ ---- -title: JavaScript Datentypen und Datenstrukturen -slug: Web/JavaScript/Datenstrukturen -tags: - - Beginner - - JavaScript - - Types -translation_of: Web/JavaScript/Data_structures ---- -
{{jsSidebar("More")}}
- -

Alle Programmiersprachen besitzen eingebaute Datenstrukturen. Diese unterschieden sich aber je nach Programmiersprache. Dieser Artikel versucht, die in JavaScript verfügbaren Datenstrukturen und ihre Eigenschaften zu erläutern. Außerdem werden an passenden Stellen Vergleiche zu anderen Programmiersprachen gezogen.

- -

Dynamische Typisierung

- -

JavaScript ist eine schwach typisierte oder dynamische Programmiersprache. Datentypen werden bei einer Variable nicht explizit deklariert und jede Variable kann mit Werten jedes Typen beschrieben (überschrieben) werden:

- -
var foo = 42;    // foo ist jetzt eine number
-var foo = "bar"; // foo ist jetzt ein string
-var foo = true;  // foo ist jetzt ein boolean
-
- -

Datentypen

- -

Der aktuelle ECMAScript Standard definiert sieben Datentypen:

- -
    -
  • Sechs Datentypen sind {{Glossary("Primitive", "primitives")}}: -
      -
    • {{Glossary("Boolean")}}
      • -
    • {{Glossary("Null")}}
      • -
    • {{Glossary("Undefined")}}
      • -
    • {{Glossary("Number")}}
      • -
    • {{Glossary("String")}}
      • -
    • {{Glossary("Symbol")}} (new in ECMAScript 2015)
      • -
    -
    • -
  • und {{Glossary("Object")}}
    • -
- -

Primitive Werte

- -

Alle Datentypen, bis auf Object, definieren unveränderbare Werte (Werte, die nicht verändert werden können). Zum Beispiel im Gegensatz zu C sind Strings unveränderbar. Die Werte dieser Datentypen werden als "primitive Werte" bezeichnet.

- -

Boolean Datentyp

- -

Boolean repräsentiert eine logische Einheit und kann zwei Werte annehmen: true und false.

- -

Null Datentyp

- -

Der Null Typ hat genau einen Wert: null. Siehe {{jsxref("null")}} und {{Glossary("Null")}} für mehr Details.

- -

Undefined Datentyp

- -

Eine Variable, der noch kein Wert zugewiesen wurde, hat den Wert undefined. Siehe {{jsxref("undefined")}} und {{Glossary("Undefined")}} für mehr Details.

- -

Number Datentyp

- -

Laut dem ECMAScript Standard gibt es nur einen Datentyp für Zahlen: double-precision 64-bit binary format IEEE 754 value (Zahlen zwischen -(263) und +263-1). Es gibt keinen spezifischen Datentyp für Ganzzahlen. Neben Gleitkommazahlen kann der Datentyp für Zahlen auch drei symbolische Werte annehmen: +Infinity, -Infinity und NaN (not-a-number = keine Zahl).

- -

Um auf größere oder kleinere Werte als +/-Infinity zu prüfen, können die Konstanten {{jsxref("Number.MAX_VALUE")}} oder {{jsxref("Number.MIN_VALUE")}} verwendet werden. Ab ECMAScript 2015 kann auch geprüft werden, ob sich eine Zahl innerhalb des Bereichs der Gleitkommazahlen mit doppelter Präzision befindet. Die ist mit {{jsxref("Number.isSafeInteger()")}} als auch {{jsxref("Number.MAX_SAFE_INTEGER")}} und {{jsxref("Number.MIN_SAFE_INTEGER")}} möglich. Zahlen außerhalb diesen Bereichs sind in JavaScript nicht mehr sicher.

- -

Der Datentyp für Zahlen hat eine Ganzzahl mit zwei Repräsentationen: 0 kann als -0 und +0 repräsentiert werden. ("0" ist ein Alias für +0). In der Praxis hat dies fast keinen Einfluss. +0 === -0 ist zum Beispiel true. Eine Division ergibt aber zwei unterschiedliche Werte:

- -
> 42 / +0
-Infinity
-> 42 / -0
--Infinity
-
- -

Obwohl eine Zahl oft ihren Wert repräsentiert, bietet JavaScript einige binäre Operatoren an. Mit ihnen können zum Beispiel mehrere Boolean Werte innerhalb einer einzigen Zahl mittels Bitmaskierung repräsentiert werden. Das gilt generell als schlechte Praxis, da JavaScript andere Wege anbietet, um eine Menge von Booleans zu repräsentierten (wie zum Beispiel ein Array von Booleans oder ein Objekt mit Boolean Werten als benannte Eigenschaften). Bitmaskierung führt außerdem dazu, dass Code schwerer zu lesen, zu verstehen und zu warten ist. In sehr speziellen Anwendungsgebiete kann eine Bitmaskierung aber notwendig sein. Zum Beispiel wenn nur geringe Speichermengen verfügbar sind oder in extremen Fällen, wenn jedes übertragene Bit im Netzwerk zählt. Diese Technik sollte aber als letzter Ausweg gesehen werden, um die Größe zu optimieren.

- -

String Datentyp

- -

Der Datentyp String wird in JavaScript für die Repräsentation von textuellen Daten verwendet. Er ist eine Menge von "Elementen" aus 16-Bit vorzeichenlosen Ganzzahlenwerten. Jedes Element im String nimmt eine Position im String ein. Das erste Element befindet sich an der Position mit dem Index 0, das nächste beim Index 1 und so weiter. Die Länge eines String ist die Anzahl der sich darin befindenden Elemente.

- -

In Gegensatz zu anderen Programmiersprachen wie C kann ein String in JavaScript nicht verändert werden. Das bedeutet, dass ein String nicht mehr verändert werden kann, nachdem er erstellt wurde. Es ist aber möglich einen anderen String mit der Hilfe von Operationen aus dem ursprünglichen String zu erstellen:

- -
    -
  • Eine Teilzeichenfolge vom ursprünglichen String durch das Auswählen von bestimmten Zeichen oder mit der Methode {{jsxref("String.substr()")}}.
    • -
  • Eine Verkettung von zwei Strings mit dem Operator (+) oder {{jsxref("String.concat()")}}.
    • -
- -

Vermeiden Sie "stringly-typing" in Ihrem Code!

- -

Es kann verlockend sein mit String komplexe Daten zu repräsentieren. Es bringt kurzfristige Vorteile mit sich:

- -
    -
  • Komplexe Strings können einfach durch Verkettung erstellt werden.
    • -
  • Strings sind einfacher im Debug (die Ausgabe entspricht dem Inhalt vom String).
    • -
  • Strings sind bei vielen APIs gebräuchlich (Eingabefeldern, Local Storage Werte, {{ domxref("XMLHttpRequest") }} Antworten in ihrer Eigenschaft als responseText, etc.). Dadurch kann es verlockend sein nur mit Strings zu arbeiten.
    • -
- -

Ohne Konventionen kann jede Datenstruktur als String repräsentiert werden. Das ist aber keine gute Idee. Es könnte zum Beispiel eine Liste emuliert werden, indem die Listenelemente im String durch einen Separator getrennt werden. In diesem Fall ist ein JavaScript Array aber geeigneter, denn die Liste kann zerstört werden sobald ein Listenelement den Separator enthält. Ein Escape-Zeichen oder Ähnliches müsste verwendet werden. Dafür sind aber zusätzliche Konventionen nötig und die Wartung des Codes nimmt an Komplexität zu.

- -

Strings sollten nur für textuelle Daten verwendet werden. Wenn komplexe Daten repräsentiert werden sollen, parsen Sie den String und verwenden Sie eine geeignete Abstraktion.

- -

Symbol Datentyp

- -

Symbole in JavaScript sind mit ECMAScript 2015 eingeführt worden. Ein Symbol ist ein eindeutiger und unveränderbarer primitiver Wert. Er kann als Schlüssel einer Eigenschaft eines Objekts (siehe unten) verwendet werden. In manchen Programmiersprachen werden Symbole auch Atoms genannt. Details dazu sind unter {{Glossary("Symbol")}} und dem {{jsxref("Symbol")}} Object Wrapper in JavaScript zu finden.

- -

Objekte

- -

Objekte sind in der Informatik Werte im Speicher, die möglicherweise über einen {{Glossary("Identifier", "identifier")}} referenziert werden.

- -

Eigenschaften

- -

In JavaScript können Objekte als eine Sammlung von Eigenschaften (Properties) angesehen werden. Mit der Object Literal Syntax werden die nötigsten Eigenschaften initialisiert. Danach können Eigenschaften hinzugefügt oder wieder entfernt werden. Der Wert einer Eigenschaft kann von jedem Datentyp sein. Darunter können sich auch andere Objekte befinden. Dadurch können komplexe Datenstrukturen realisiert werden. Eigenschaften werden mit einem Key identifiziert. Ein Key ist entweder ein String oder ein Symbol.

- -

Es gibt zwei Arten von Eigenschaften, die bestimmte Attribute haben: Die Dateneigenachften und Zugriffseigenschaften.

- -

Dateneigenschaften

- -

Assoziiert einen Key mit einem Wert und besitzt die folgenden Attribute:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Attribute einer Dateneigenschaft
AttributDatentypBeschreibungStandardwert
[[Value]]beliebiger JavaScript DatentypDer Wert, der bei einem Get-Zugriff auf die Eigenschaft zurückgegeben wirdundefined
[[Writable]]Booleanfalse, wenn [[Value]] der Eigenschaft nicht verändert werden kann.false
[[Enumerable]]Booleantrue, wenn die Eigenschaft in for...in Schleifen aufgelistet wird. Siehe dazu auch Aufzählbarkeit und Eigentum von Eigenschaften.false
[[Configurable]]Booleanfalse, wenn die Eigenschaft nicht gelöscht und die Attribute [[Value]] und [[Writable]] nicht verändert werden können.false
- -

Zugriffseigenschaften

- -

Assoziiert einen Key mit einer oder zwei Accessor-Funktionen (get und set), um einen Wert zu erhalten oder zu speichern. Es besitzt die folgenden Attribute:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Attribute eines Zugriffseigenschaft
AttributDatentypBeschreibungStandardwert
[[Get]]Funktionsobjekt oder undefinedDie Funktion wird ohne ein Argument aufgerufen und gibt den Wert der Eigenschaft zurück, sobald ein Get-Zugriff auf den Wert ausgeführt wird. Siehe auch get.undefined
[[Set]]Funktionsobjekt oder undefinedDie Funktion wird mit einem Argument aufgerufen, das den Wert für die Zuweisung enthält. Sie wird immer aufgerufen, sobald eine bestimmte Eigenschaft verändert werden soll. Siehe auch set.undefined
[[Enumerable]]Booleantrue, wenn die Eigenschaft in for...in Schleifen aufgelistet wird.false
[[Configurable]]Booleanfalse, wenn die Eigenschaft nicht gelöscht und nicht zu einer Dateneigenschaft verändert werden kann.false
- -
-

Hinweis: Attribut wird normalerweise von der JavaScript-Umgebung genutzt und man kann nicht direkt zugreifen (mehr darüber: Object.defineProperty()). Deswegen sind die Attribute in doppelten eckigen Klammern statt in einfachen.

-
- -

"Normale" Objekte und Funktionen

- -

Ein Objekt in JavaScript ist ein Mapping zwischen Keys und Werten. Keys sind Strings oder Symbole und Werte können von jedem Datentyp sein. Dadurch sind Objekte eine Art Hashtabelle.

- -

Funktionen sind reguläre Objekte mit der Fähigkeit direkt aufgerufen werden zu können.

- -

Datum

- -

Mit der in JavaScript eingebauten Date Utility kann ein Datum repräsentiert werden.

- -

Indizierte Collections: Arrays und typisierte Arrays

- -

Arrays sind reguläre Objekte bei denen eine Beziehung zwischen Eigenschaften, die über Ganzzahlen indiziert werden, und der Eigenschaft 'length' besteht. Zusätzlich erben Arrays von Array.prototype, einer Helfermethoden, die die Manipulation von Arrays anbietet, wie zum Beispiel indexOf (zur Suche eines Werts im Array) oder push (um Elemente zu einem Array hinzufügen). Dadurch können Listen und Mengen über ein Array repräsentiert werden.

- -

Typisierte Arrays sind in JavaScript mit ECMAScript Edition 2015 eingeführt worden. Sie bieten eine Array-ähnliche Sicht auf einen darunterliegenden binären Datenpuffer an. Die folgende Tabelle stellt äquivalente C Datentypen dar:

- -

{{page("/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray", "TypedArray_objects", "", 0, 3)}}

- -

Keyed Collections: Maps, Sets, WeakMaps, WeakSets

- -

Diese Datenstrukturen verwenden Objektreferenzen als Keys. Sie wurden mit ECMAScript Edition 6 eingeführt. {{jsxref("Set")}} und {{jsxref("WeakSet")}} repräsentieren eine Menge von Objekten, während {{jsxref("Map")}} und {{jsxref("WeakMap")}} einen Wert mit einem Objekt assoziieren. Der Unterschied zwischen Maps und WeakMaps ist, dass bei Maps über Objekt-Keys iteriert werden kann. Das erlaubt eine spätere Optimierung der Garbage Collection.

- -

Maps und Sets könnten in reinem ECMAScript 5 implementiert werden. Da Objekte aber nicht verglichen werden können (im Sinne von zum Beispiel "kleiner gleich"), wäre die Performance für einen Look-Up linear. Native Implementierungen (inklusive WeakMaps) können eine ungefähr logarithmische Look-Up Performance haben.

- -

Um Daten an einen DOM-Knoten zu binden, werden normalerweise die Eigenschaften direkt auf dem Objekt gesetzt oder es werden data-* Attribute verwendet. Das hat aber den Nachteil, dass die Daten für jedes Skript in demselben Kontext verfügbar sind. Mit Maps und WeakMaps können Daten einfach privat an ein Objekt gebunden werden.

- -

Strukturierte Daten: JSON

- -

JSON (JavaScript Object Notation) ist ein leichtgewichtges Format zum Datenaustausch, das von JavaScript abgeleitet aber auch von vielen anderen Programmiersprachen verwendet wird. Mit JSON können universelle Datenstrukturen aufgebaut werden. Siehe {{Glossary("JSON")}} und {{jsxref("JSON")}} für mehr Details.

- -

Mehr Objekte in der Standardbibliothek

- -

JavaScript hat eine Standardbibliothek mit zahlreichen eingebauten Objekten. Details darüber sind unter Referenz zu finden.

- -

Datentypen mit dem typeof Operator bestimmen

- -

Der typeof Operator kann den Datentyp einer Variablen herausfinden. Unter der Referenzseite sind mehr Details und Grenzfälle zu finden.

- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('ES1')}}{{Spec2('ES1')}}initiale Definition
{{SpecName('ES5.1', '#sec-8', 'Types')}}{{Spec2('ES5.1')}} 
{{SpecName('ES2015', '#sec-ecmascript-data-types-and-values', 'ECMAScript Data Types and Values')}}{{Spec2('ES2015')}} 
{{SpecName('ESDraft', '#sec-ecmascript-data-types-and-values', 'ECMAScript Data Types and Values')}}{{Spec2('ESDraft')}} 
- -

Siehe auch

- - diff --git a/files/de/web/javascript/eine_wiedereinfuehrung_in_javascript/index.html b/files/de/web/javascript/eine_wiedereinfuehrung_in_javascript/index.html deleted file mode 100644 index a306d9fd16..0000000000 --- a/files/de/web/javascript/eine_wiedereinfuehrung_in_javascript/index.html +++ /dev/null @@ -1,909 +0,0 @@ ---- -title: Eine Wiedereinführung in JavaScript -slug: Web/JavaScript/Eine_Wiedereinfuehrung_in_JavaScript -tags: - - Anleitung - - CodingScripting - - Einleitung - - Guide - - Intermediate - - JavaScript - - Lernen -translation_of: Web/JavaScript/A_re-introduction_to_JavaScript ---- -
{{jsSidebar}}
- -

Warum eine "Wieder" - Einführung? Weil {{Glossary("JavaScript")}} als die am meisten missverstandene Programmiersprache der Welt bekannt ist. Obwohl die Sprache oft als Spielzeug abgewertet wird, besitzt sie neben ihrer Einfachheit einige mächtige Sprachfunktionen. Heutzutage wird JavaScript in einer Großzahl von wichtigen Anwendungen verwendet, was zeigt, dass Wissen über diese Technologie eine wichtige Eigenschaft für jeden Web- und Mobil-Entwickler ist.

- -

Es ist sinnvoll mit einem Überblick über die Sprachgeschichte zu beginnen. JavaScript wurde im Jahr 1995 von Brendan Eich entworfen, der Ingenieur bei Netscape war. JavaScript wurde erstmals 1996 mit Netscape 2 veröffentlicht. Ursprünglich hieß die Sprache LiveScript, wurde aber wegen unglücklichen Marketingentscheidung umbenannt, die sich die Popularität der Java-Sprache von Sun Microsystem zunutze machen wollte - obwohl beide wenig gemeinsam hatten. Dies ist seither eine Quelle für Verwirrung.

- -

Einige Monate später veröffentlichte Microsoft JScript mit dem Internet Explorer 3. Diese war eine weitgehend zu JavaScript kompatibele Sprache. Einige Monate später übergab Netscape JavaScript an Ecma International, einer Europäischen Standardisierungsorganisation, welche noch im selben Jahr die ersten Edition des {{Glossary("ECMAScript")}} Standards veröffentlichten. Der Standard bekam 1999 ein bedeutendes Update mit ECMAScript Edition 3 und hält sich seither sehr stabil. Die vierte Edition des Standards wurde aufgrund von politischen Meinungsverschiedenheiten zur Komplexität der Sprache fallen gelassen. Viele Teile der vieren Edition bildeten die Basis der fünften und sechsten Edition des Standards, welche im Dezember 2009 bzw. im Juni 2015 veröffentlicht wurden.

- -
-

Aus Gründen der Vertrautheit verwenden wir ab hier die Bezeichnung "JavaScript" anstatt "ECMAScript".

-
- -

Anders als viele andere Programmiersprachen, gibt es bei JavaScript kein Konzept für Eingabe und Ausgabe. JavaScript wurde als Skriptsprache in eine Hostumgebung entworfen und es ist die Aufgabe dieser Umgebung Mechanismen für die Kommunikation mit der Außenwelt bereitzustellen. Die hierfür am meisten genutzte Hostumgebung ist der Browser, jedoch findet man Interpreter auch in vielen anderen Anwendungen, zum Beispiel Adobe Acrobat, Photoshop, SVG Bilder, Yahoo! Widget Umgebung, serverseitigen Applikationen wie node.js, NoSQL-Datenbanken wie die Open Source-Datenbank Apache CouchDB, integrierte Computer, Desktopumgebungen wie GNOME (eine der beliebtesten Desktopumgebungen für GNU/Linux Betriebssysteme) und vielen mehr.

- -

Überblick

- -

JavaScript ist eine dynamische Multi-Paradigmen-Sprache mit Typen und Operatoren, Standardobjekten und Methoden. Die Syntax basiert auf den Sprachen Java und C — viele Strukturen aus diesen Sprachen wurden in JavaScript übernommen. JavaScript unterstützt Objektorientierung mit Prototypobjekten statt Klassen (mehr darüber in Vererbung mit Prototypen und ES2015 Klassen). JavaScript unterstützt auch funktionale Programmierung — Funktionen sind Objekte, die Funktionen ermöglichen, ausführbaren Code zu speichern und wie jedes andere Objekt weitergegeben zu werden.

- -

Beginnen wir mit einer Betrachtung der Sprachbausteine. JavaScript Programme manipulieren Werte und jeder Wert ist von einem bestimmten Typ. JavaScript Typen sind:

- -
    -
  • {{jsxref("Number")}}
    • -
  • {{jsxref("String")}}
    • -
  • {{jsxref("Boolean")}}
    • -
  • {{jsxref("Function")}}
    • -
  • {{jsxref("Object")}}
    • -
  • {{jsxref("Symbol")}} (neu in ES 6)
    • -
- -

... und {{jsxref("undefined")}} und {{jsxref("null")}}, die ein wenig speziell sind. Und {{jsxref("Array")}} , die eine besonere Art von Objekt ist. Und {{jsxref("Date")}} und {{jsxref("RegExp")}}, welche man quasi mitgeliefert bekommt. Wenn man genau sein will, sind Funktionen ebenfalls eine spezielle Art von Objekten. Also sieht das Typdiagramm eher so aus:

- -
    -
  • {{jsxref("Number")}}
    • -
  • {{jsxref("String")}}
    • -
  • {{jsxref("Boolean")}}
    • -
  • {{jsxref("Symbol")}} (neu in ES2015)
    • -
  • {{jsxref("Object")}} -
      -
    • {{jsxref("Function")}}
      • -
    • {{jsxref("Array")}}
      • -
    • {{jsxref("Date")}}
      • -
    • {{jsxref("RegExp")}}
      • -
    -
    • -
  • {{jsxref("null")}}
    • -
  • {{jsxref("undefined")}}
    • -
- -

Zusätzlich gibt es noch einige vordefinierte {{jsxref("Error")}} Typen. Der Einfachheit halber beschränken wir uns im Folgenden erst einmal auf die Typen aus dem ersten Diagramm.

- -

Numbers

- -

Numbers sind in JavaScript laut der Spezifikation "doppeltpräzise 64-bit Werte im IEEE 754 Format". Das hat einige interessante Konsequenzen. Es gibt in JavaScript nichts vergleichbares wie Integer, weshalb man vorsichtig mit Arithmetik umgehen muss, wenn man Mathematik wie in C oder Java nutzt.

- -

Achte auch auf Dinge wie:

- -
0.1 + 0.2 == 0.30000000000000004
- -

In der Praxis werden Integer-Werte wie 32-Bit-Integer behandelt und einige Implementierungen speichern sie sogar so, bis sie einen Befehl ausführen sollen, der für eine Number, aber nicht für eine 32-Bit Integer gültig ist. Das kann z.B. für Bitoperationen wichtig sein.

- -

Unterstützt werden die arithmetischen Standardoperationen, inklusive Addition, Subtraktion, Modulo (oder Rest) Arithmetik und so weiter. Außerdem existiert noch ein Objekt Math für die Anwendung von mathematischen Funktionen und Konstanten, welches oben noch nicht genannt wurde:

- -
Math.sin(3.5);
-var umfang = 2 * Math.PI * r;
- -

Man kann Strings mit der eingebauten {{jsxref("Global_Objects/parseInt", "parseInt()")}} Funktion nach Integer konvertieren. Die Funktion enthält die Basis des Zahlensystems für die Konvertierung als zweiten optionalen Parameter, welcher immer angegeben werden sollte:

- -
parseInt("123", 10); // 123
-parseInt("010", 10); // 10
-
- -

In älteren Browsern werden Strings, die mit "0" anfangen als Oktalzahlen (Basis 8) interpretiert, seit 2013 ist das aber nicht mehr so. Wenn man sich bei dem Stringformat nicht sicher ist, kann das in den älteren Browsern zu überraschenden Ergebnissen führen:

- -
parseInt("010");  //  8
-parseInt("0x10"); // 16
- -

Hier sieht man, dass die {{jsxref("Global_Objects/parseInt", "parseInt()")}} Funktion den ersten String als Oktalzahl, wegen der führenden 0, und den zweiten String als Hexadezimalzahl, wegen des führenden "0x", interpretiert. Die Hexadezimalnotation ist immernoch zulässig; nur die Oktalnotation wurde entfernt, weil sie praktisch nicht mehr verwendet wird.

- -

Um eine Binärzahl in ein Integer zu ändern, verwendet man einfach die Basis 2:

- -
parseInt("11", 2); // 3
- -

Auf die gleiche Weise lassen sich auch Gleitkommazahlen mit Hilfe der Funktion {{jsxref("Global_Objects/parseFloat", "parseFloat()")}} konvertieren. Anders als bei der {{jsxref("Global_Objects/parseInt", "parseInt()")}} Funktion nutzt parseFloat() immer die Basis 10.

- -

Auch der unäre + Operator kann eingesetzt werden, um zu einer Zahl zu konvertieren:

- -
+ "42";   // 42
-+ "010";  // 10
-+ "0x10"; // 16
- -

Ein spezieller Wert mit der Bezeichnung {{jsxref("NaN")}} (für "Not a Number") wird zurückgegeben, wenn der String keinen numerischen Wert enthält:

- -
parseInt("hello", 10); // NaN
- -

NaN ist gefährlich: Wenn es als Operand in eine mathematische Operation benutzt wird, wird das Ergebnis ebenfalls NaN sein;

- -
NaN + 5; // NaN
- -

Mit der eingebauten  {{jsxref("Global_Objects/isNaN", "isNaN()")}} Funktion kann man auf NaN testen:

- -
isNaN(NaN); // true
- -

JavaScript kennt außerdem die speziellen Werte {{jsxref("Infinity")}} und -Infinity:

- -
 1 / 0; //  Infinity
--1 / 0; // -Infinity
- -

Man kann auf Infinity, -Infinity und NaN Werte mit der eingebauten Funktion {{jsxref("Global_Objects/isFinite", "isFinite()")}} testen:

- -
isFinite(1 / 0);     // false
-isFinite(-Infinity); // false
-isFinite(NaN);       // false
- -
-

Die {{jsxref("Global_Objects/parseInt", "parseInt()")}} und {{jsxref("Global_Objects/parseFloat", "parseFloat()")}} Funktionen lesen einen String, bis ein Zeichen erreicht wird, welches für das Zahlensystem unzulässig ist und geben die Zahl bis zu dieser Stelle zurück. Der unäre + Operator konvertiert den String einfach zu NaN, wenn dieser ein unerlaubtes Zeichen enthält. Probiere mal aus, den String "10.2abc" mit jeder der Methoden in der Console zu konvertieren, um die Unterschiede besser zu verstehen.

-
- -

Strings

- -

Strings sind in JavaScript eine Folge von Unicode-Zeichen. Das sollte für alle erfreulich sein, die mit Internationalisierung arbeiten. Genauer gesagt sind Strings Folgen von UTF-16 Codeeinheit; jeder Codeeinheit ist durch eine 16-Bit Zahl repräsentiert. Jedes Unicode-Zeichen besteht aus 1 oder 2 Codeeinheiten.

- -

Für ein einzelnes Zeichen, verwendet man einfach einen String mit einem Zeichen.

- -

Um die Länge eines Strings (in Codeeinheiten) herauszufinden, nutzt man die length Eigenschaft:

- -
'hello'.length; // 5
- -

Da ist die erster Begegnung mit JavaScript Objekten! Haben wir schon erwähnt, dass man auch Strings wie {{jsxref("Object", "Objekte", "", 1)}} verwenden kann? Sie haben auch {{jsxref("String", "Methoden", "#Methoden", 1)}}, um den Strings zu verändern und Informationen zu erhalten.

- -
'hello'.charAt(0); // "h"
-'hello, world'.replace('hello', 'goodbye'); // "goodbye, world"
-'hello'.toUpperCase(); // "HELLO"
- -

Andere Datentypen

- -

JavaScript unterscheidet zwischen {{jsxref("null")}}, wobei es sich um einen Wert handelt, der einen "nicht Wert" repräsentiert (und nur über das null Schlüsselwort erreichbar ist) und {{jsxref("undefined")}}, wobei es sich um einen Wert vom Typ undefined handelt, welcher für einen nicht initialisierten Wert steht - also, dass noch kein Wert zugewiesen wurde. Variablen werden später besprochen, aber in JavaScript ist es möglich Variablen zu deklarieren, ohne ihnen eine Wert zuzuweisen. Wenn das gemacht wird ist die Variable vom Typ undefined. undefined ist sogar eine Konstante.

- -

JavaScript hat einen Boolean Typ mit den möglichen Werten true und false (beide sind Schlüsselwörter). Jeder Wert kann mit den folgenden Regeln zu einem Boolean konvertiert werden:

- -
    -
  1. false, 0, leere Strings (""), NaN, null, und undefined werden false.
    2. -
  2. Alle anderen Werte werden true.
    3. -
- -

Die Konvertierung kann explizit mit der Boolean() Funktion durchgeführt werden:

- -
Boolean('');  // false
-Boolean(234); // true
- -

Das ist jedoch kaum nötig, da JavaScript die Konvertierung automatisch vornimmt, wenn ein Boolean erwartet wird, wie z.B. bei einer if-Anweisung (siehe unten). Aus diesem Grund ist oft von "true Werten" und "false Werten" die Rede, womit Werte gemeint sind, die zu true oder false werden, nachdem sie zu einem Boolean konvertiert wurden. Alternativ können diese Werte auch "truthy" und "falsy" genannt werden.

- -

Boolesche Operationen wie beispielsweise && (logisches und), || (logisches oder) und ! (logisches nicht) werden ebenfalls unterstützt (siehe unten).

- -

Variablen

- -

Neue Variablen werden in JavaScript mit einem der drei Schlüsselwort let, const oder var deklariert.

- -

let erlaubt es Variablen auf Blockebene zu deklarieren. Die deklarierte Variable ist in dem Block gültig, von dem sie umschlossen wird.

- -
let a;
-let name = "Simon";
- -

Im folgenden ist ein Beispiel für den Gültigkeitsbereich einer mit let deklarierten Variablen:

- -
// myLetVariable ist hier *nicht* sichtbar
-
-for (let myLetVariable = 0; myLetVariable < 5; myLetVariable++) {
-  // myLetVariable ist nur hier sichtbar
-}
-
-// myLetVariable ist hier *nicht* sichtbar
-
- -

const erlaubt es Variablen zu deklarieren, dessen Wert nie wieder geändert wird. Die Variable ist in dem Block sichtbar, von dem sie umschlossen wird.

- -
const Pi = 3.14;  // Variable Pi wird initialisiert
-Pi = 1;  // Führt zu einem Fehler, weil konstante (const) Variablen nicht geändert werden können.
-
- -

var ist das gebräuchlichste deklarative Schlüsselwort. Es hat nicht die Restriktionen, die die anderen beiden Schlüsselwörter haben. Das liegt daran, dass das traditionell der einzige Weg war, um eine Variable in JavaScript zu deklarieren. Eine Variable, die mit dem var Schlüsselwort definiert wird, ist in der Funktion, in der sie deklariert wird, erreichbar.

- -
var a;
-var name = 'Simon';
- -

Im folgenden ist ein Beispiel für den Gültigkeitsbereich einer mit var deklarierten Variablen:

- -
// myVarVariable *ist* hier sichtbar
-
-for (var myVarVariable = 0; myVarVariable < 5; myVarVariable++) {
-// myVarVariable ist in der ganzen Funktion sichtbar
-}
-
-// myVarVariable *ist* hier sichtbar
- -

Deklariert man eine Variable, ohne ihr einen Wert zuzuweisen, ist ihr Typ undefined.

- -

Ein sehr wichtiger Unterschied zu anderen Programmiersprachen wie Java besteht darin, dass bei JavaScript keine Blöckegültigkeitsbereiche hat, sondern nur Funktionsgültigkeitsbereiche. Wird eine Variable mit dem var Schlüsselwort in einer zusammengesetzten Statement (z.B. if-Anweisung) definiert, so ist diese Variable innerhalb der ganzen Funktion sichtbar. Jedoch ist es ab ECMAScript 2015 mit let und const Deklarationen möglich, Variablen mit Blocksichtbarkeitsbereich zu erstellen.

- -

Operatoren

- -

JavaScripts numerische Operatoren sind +, -, *, / und % welches der Divisionsrestoperator ist (nicht dasselbe wie Modulo). Werte werden mit = zugewiesen und es gibt zusammengesetzte Zuweisungsstatement wie += und -=. Diese werden als x = x Operator y interpretiert.

- -
x += 5
-x = x + 5
- -

Zum Inkrementieren und Dekrementieren kann ++ und -- verwendet werden. Diese können als Prefix oder Postfix Operatoren benutzt werden.

- -

Mit dem + Operator ist es auch möglich, Strings zu verbinden:

- -
'hello' + ' world'; // "hello world"
- -

Addiert man einen String mit einer Zahl (oder einem anderen Wert), wird alles zuerst zu einem String konvertiert. Dies bereitet manchmal Probleme:

- -
"3" + 4 + 5;  // "345"
-3 + 4 + "5"; // "75"
- -

Das Addieren eines leeren Strings zu einem Wert ist eine hilfreiche Methode, den Wert in einen String zu konvertieren.

- -

Vergleiche können in JavaScript mit <, >, <= und >= durchgeführt werden. Dieses funktionieren bei Strings und Zahlen. Gleichheit ist etwas komplizierter. Der Doppelgleichoperator hat einen Typzwang, was zu überraschend Ergebnissen führen kann:

- -
123 == "123"; // true
-1 == true;    // true
- -

Um den Typzwang zu vermeiden, benutzt man den Dreifachgleichoperator:

- -
123 === "123"; // false
-1 === true;    // false
- -

Des Weiteren gibt es die Operatoren != und !== für das Testen auf Ungleichheit.

- -

Außerdem gibt es in JavaScript noch bitweise Operationen.

- -

Kontrollstrukturen

- -

JavaScript hat eine ähnliche Menge an Kontrollstrukturen wie andere Sprachen aus der C Familie. Bedingte Statements sind durch if und else unterstützt; man kann sie auch verketten:

- -
var name = 'kittens';
-if (name == 'puppies') {
-  name += ' woof';
-} else if (name == 'kittens') {
-  name += ' neow';
-} else {
-  name += '!';
-}
-name == 'kittens neow';
-
- -

JavaScript hat while- und do-while-Schleifen. Die erste ist gut für normale Schleifen. Die zweite ist für Schleifen geeignet, bei denen sichergestellt werden soll, dass der Schleifeninhalt mindestens einmal ausgeführt wird:

- -
while (true) {
-  // Endlosschleife!
-}
-
-var input;
-do {
-  input = get_input();
-} while (inputIsNotValid(input))
-
- -

JavaScripts for-Schleife ist die selbe wie in C und Java: Die Kontrollinformationen können in einer einzigen Zeile angegeben werden.

- -
for (var i = 0; i < 5; i++) {
-  // Wird 5-Mal ausgeführt
-}
-
- -

JavaScript hat zudem zwei weitere bekannte for Schleifen: for...of

- -
for (let value of array) {
-  // Tue etwas mit value
-}
- -

und for...in:

- -
for (let property in object) {
-  // Tue etwas mit dem objects property
-}
- -

Die Operatoren && und || benutzen Kurzschlusslogik, was bedeutet, dass die Ausführung des zweiten Operanden abhängig von dem ersten ist. Dieses ist nützlich für die Überprüfung auf null, bevor auf Objektattribute zugegriffen wird:

- -
var name = o && o.getName();
-
- -

Oder für das Abfangen von Werten (wenn falsy Werte nicht valide sind):

- -
var name = cachedName || (cachedName = getName());
-
- -

JavaScript besitzt einen ternären Operator für bedingte Ausdrücke:

- -
var allowed = (age > 18) ? 'yes' : 'no';
-
- -

Das switch Statement kann führ mehrere Zweige abhängig von einer Zahl oder einem String eingesetzt werden:

- -
switch(action) {
-    case 'draw':
-        drawIt();
-        break;
-    case 'eat':
-        eatIt();
-        break;
-    default:
-        doNothing();
-}
-
- -

Lässt man das break Statement weg, werden auch der folgezweig ausgeführt. Dieses Verhalten ist selten gewollt — es lohnt sich in solchen Fällen explizite Kommentare hinzuzufügen, um späteres Debugging zu unterstützen:

- -
switch(a) {
-    case 1: // fallthrough
-    case 2:
-        eatit();
-        break;
-    default:
-        donothing();
-}
-
- -

Die default Klausel ist optional. Wenn gewünscht, können Ausdrücke im switch und im case eingesetzt werden. Der Vergleiche zwischen beiden wird mit dem === Operator durchgeführt:

- -
switch(1 + 3) {
-    case 2 + 2:
-        yay();
-        break;
-    default:
-        neverhappens();
-}
-
- -

Objekte

- -

JavaScript Objekte setzen sich aus einfachen Name-Wert-Paaren zusammen. Sie sind ähnlich wie:

- -
    -
  • Dictionaries in Python
    • -
  • Hashes in Perl und Ruby
    • -
  • Hash tables in C und C++
    • -
  • HashMaps in Java
    • -
  • Assoziative Arrays in PHP
    • -
- -

Der Fakt, dass diese Datenstruktur so oft eingesetzt wird, zeigt seine Vielseitigkeit. Da alles (reine Kerntypen) in JavaScript ein Objekt ist, beinhaltet jedes JavaScript-Programm natürlich eine große Menge von Suchoperationen in Hashtabellen. Gut, dass diese so schnell sind!

- -

Der "Name"-Teil ist ein JavaScript String, während als Wert jeder JavaScript Wert in Frage kommt — auch andere Objekte. Dies ermöglicht das Erstellen von beliebig komplexen Datenstrukturen.

- -

Es gibt zwei grundlegende Möglichkeiten, ein leeres Objekt zu erstellen:

- -
var obj = new Object();
-
- -

Und:

- -
var obj = {};
-
- -

Beide sind semantisch äquivalent. Die zweite wird "Objektliteral Syntax" genannt und ist verbreiteter. Diese Syntax ist zudem der Kern des JSON Formates und sollte immer bevorzugt genutzt werden.

- -

"Objektliteral Syntax" kann eingesetzt werden, um ein umfassendes Objekt zu erstellen:

- -
var obj = {
-    name: "Carrot",
-    "for": "Max",
-    details: {
-        color: "orange",
-        size: 12
-    }
-}
-
- -

Der Zugriff auf Eigenschaften kann verkettet werden:

- -
obj.details.color; // orange
-obj["details"]["size"]; // 12
- -

Das folgende Beispiel erstellt einen Prototyp Person und eine Instanz dieses Prototyps you.

- -
function Person(name, age) {
-  this.name = name;
-  this.age = age;
-}
-
-// Definiere ein Objekt
-var you = new Person('You', 24);
-// Wir erstellen eine Person mit dem Namen "You" und dem Alter 24
- -

Nach der Erstellung kann eine Objekteigenschaft über einem von zwei möglichen Wegen erreicht werden:

- -
obj.name = "Simon";
-var name = obj.name;
-
- -

Und...

- -
// Klammernotation
-obj['name'] = 'Simon';
-var name = obj['name'];
-// man kann eine Variable benutzen, um einen Schlüssel zu definieren
-var user = prompt('was ist dein Schlüssel?');
-obj[user] = prompt('was ist dein Schlüssel?');
-
- -

Beide sind wieder semantisch äquivalent. Die zweite Methode hat den Vorteil, dass der Name der Eigenschaft als String zur Verfügung gestellt wird, was bedeutet, dass dieser zur Laufzeit berechnet werden kann. Jedoch verhindert diese Methode, dass einige JavaScript-Engines "Minifier Optimierungen" durchführen können. Sie kann außerdem eingesetzt werden, um Eigenschaften zu erreichen, die ein reservierte Schlüsselwörter als Namen haben:

- -
obj.for = "Simon"; // Syntaxfehler, da 'for' ein reserviertes Schlüsselwort ist
-obj["for"] = "Simon"; // funktioniert
-
- -
-

Ab ECMAScript 5 können reservierte Wörter bei Objektliteralen verwendet werden. Das bedeutet, dass keine Anführungszeichen und eckige Klammern mehr nötig sind. Siehe ES5 Spec.

-
- -

Weitere Informationen zu Objekten und Prototypen gibt es im Artikel Object.prototype. Für eine Erklärung von Objektprototypen und die Objektprototypenkette siehe in den Artikel Vererbung und die Prototypenkette.

- -
-

Ab ECMAScript 2015 können Schlüssel mit Variablen definiert werden, indem eckige Klammern verwendet werden. {[phoneType]: 12345} ist möglich, statt var userPhone = {}; userPhone[phoneType] = 12345 zu verwenden.

-
- -

Arrays

- -

Arrays sind in JavaScript ein spezieller Typ von Objekten. Sie funktionieren weitgehend wie normale Objekte (numerische Eigenschaften können nur über die []-Syntax erreicht werden), besitzen jedoch eine zusätzliche Eigenschaft length. Der Wert dieser Eigenschaft ist immer der höchsten Index des Arrays + 1.

- -

Eine Möglichkeit ein Array zu erstellen ist die folgende:

- -
var a = new Array();
-a[0] = 'dog';
-a[1] = 'cat';
-a[2] = 'hen';
-a.length; // 3
- -

Eine praktischere Möglichkeit  ist die Erstellung über ein Array-Literal.

- -
var a = ['dog', 'cat', 'hen'];
-a.length; // 3
- -

Zu beachten ist, dass array.length nicht unbedingt der Anzahl der Elemente des Arrays entspricht. Siehe das folgende Beispiel:

- -
var a = ['dog', 'cat', 'hen'];
-a[100] = 'fox';
-a.length; // 101
- -

Zur Erinnerung: Der Wert von length entspricht immer dem höchsten Index + 1.

- -

Versucht man auf einen nicht-existenten Array-Index zuzugreifen, erhält man undefined:

- -
typeof a[90]; // undefined
- -

Wenn Sie die obigen Angaben über [] und Länge (array.length) berücksichtigen, können Sie über ein Array iterieren, indem Sie die folgende for-Schleife verwenden:

- -
for (var i = 0; i < a.length; i++) {
-    // Verarbeitung von a[i]
-}
-
- -

ECMAScript (ES2015) empfiehlt die wesentlich kürzer gefasste for...of-Schleife, um über Objekte und Arrays zu iterieren:

- -
for (const currentValue of a) {
-  // Tue etwas mit currentValue
-}
- -

Man kann auch mit einer for...in Schleife über ein Array iterieren, wobei diese nicht über die Arrayelemente, sondern die Arrayindizes iteriert. Zudem wird bei einer solchen Schleife auch über Eigenschaften iteriert, die evtl. später in Array.prototype hinzugefügt werden. Deshalb wird diese Methode für Arrays nicht empfohlen.

- -

In ECMAScript (ES2015) wurde mit forEach() eine weitere Schleife zur Iteration über Arrays eingeführt:

- -
['dog', 'cat', 'hen'].forEach(function(currentValue, index, array) {
-  // Verarbeite currentValue oder array[index]
-});
- -

Das Anhängen eines neuen Elements zu einem Array funktioniert folgendermaßen:

- -
a.push(item);
- -

Arrays besitzen viele Methoden. Hier findet man die Dokumentation für alle Array Methoden.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
MethodennameBeschreibung
a.toString()Gibt einen String zurück, bei dem toString() jedes Objektes getrennt mit Komma ist.
a.toLocaleString()Gibt einen String zurück, bei dem toLocaleString() jedes Objektes getrennt mit Komma ist.
a.concat(item1[, item2[, ...[, itemN]]])Erstellt eine Kopie mit den neu hinzugefügten Elemente.
a.join(sep)Wandelt das Array in einen String um. Die Elemente werden durch sep getrennt.
a.pop()Entfernt das letzte Element und gibt es zurück.
a.push(item1, ..., itemN)Fügt ein oder mehrere Elemente am Ende hinzu.
a.reverse()Kehrt die Reihenfolge des Arrays um.
a.shift()Entfernt das erste Element und gibt es zurück.
a.slice(start, end)Gibt einen Teil eines Arrays zurück.
a.sort([cmpfn])Sortiert das Array. Ein Vergleichsfunktion kann optional angegeben werden.
a.splice(start, delcount[, item1[, ...[, itemN]]])Modifiziert ein Array, indem ein Teil gelöscht und durch mehrere Elemente ersetzt wird.
a.unshift(item1[, item2[, ...[, itemN]]])Fügt Elemente am Anfang des Arrays hinzu.
- -

Funktionen

- -

Neben Objekten gehören Funktionen zu den Kernkomponenten von JavaScript. Die Syntax für eine einfache Funktion könnte kaum einfacher sein:

- -
function add(x, y) {
-    var total = x + y;
-    return total;
-}
-
- -

Das Beispiel demonstriert eine einfache Funktion. Einer JavaScript-Funktion können 0 oder mehr benannte Parameter übergeben werden. Der Funktionsrumpf kann beliebig viele Anweisungen enthalten und kann seine eigene lokalen Variablen definieren, die nur in der Funktion erreichbar sind. Das return Statement kann dazu benutzt werden, um jederzeit einen Rückgabewert festzulegen und die Funktion zu beenden. Wird kein return-Statement angegeben (oder ein leeres return-Statement ohne Wert), gibt JavaScript undefined zurück.

- -

Die benannten Parameter sind eher als Richtlinie zu verstehen, weniger als eine Pflichtangabe. Eine Funktion kann also auch ohne Angabe der Parameter aufgerufen werden, wobei die Parameter dann den Wert undefined bekommen.

- -
add() //NaN
-// Addition mit undefined ist nicht möglich
-
- -

Mann kann der Funktion auch mehr Parameter übergeben, als erwartet werden:

- -
add(2, 3, 4) // 5
-// Addition der ersten beiden Parameter; 4 wird ignoriert
-
- -

Auf den ersten Blick wirkt das komisch, jedoch haben Funktionen innerhalb des Funktionsrumpfes Zugriff auf eine zusätzliche Variable namens arguments, welche ein arrayähnliches Objekt ist, das alle der Funktion übergebenen Werte enthält. Hier eine überarbeitete add-Funktion, die beliebig viele Parameter verarbeitet:

- -
function add() {
-    var sum = 0;
-    for (var i = 0, j = arguments.length; i < j; i++) {
-        sum += arguments[i];
-    }
-    return sum;
-}
-
-add(2, 3, 4, 5); // 14
-
- -

Das ist jedoch nicht nützlicher als 2 + 3 + 4 + 5 zu schreiben. Deswegen erstellen wir eine Funktion, welche den Durchschnitt aller Werte in unserem Array berechnet:

- -
function avg() {
-  var sum = 0;
-  for (var i = 0, j = arguments.length; i < j; i++) {
-    sum += arguments[i];
-  }
-  return sum / arguments.length;
-}
-
-avg(2, 3, 4, 5); // 3.5
- -

Das ist wirklich nützlich, jedoch wirkt es noch ein bisschen lang. Um den Code ein wenig zu reduzieren, kann man den Einsatz des arguments-Arrays durch eine Rest Parameter Syntax ersetzen. Damit können beliebig viele Argumente übergeben werden und der Code bleibt minimal. Der Rest Parameter Operator wird in der Funktionsparameterliste mit dem Format ...variable geschrieben und enthält alle nicht benannten, der Funktion übergebenen Argumente in der Variable. Zudem kann man die for-Schleife durch eine for...of-Schleife ersetzen, um die Werte in der Variablen direkt verwenden zu können.

- -
function avg(...args) {
-  var sum = 0;
-  for (let value of args) {
-    sum += value;
-  }
-  return sum / args.length;
-}
-
-avg(2, 3, 4, 5); // 3.5
- -
-

Die Variable args in der oberen Funktion enthält alle an die Funktion übergebenen Werte.

- -

Es ist wichtig zu beachten, dass der Einsatz des Rest Parameter Operators in einer Funktionsdeklaration alle Argumente nach der Deklaration enthält, jedoch nicht die davor. Z. B. wird bei function avg(firstValue, ...args) der erste der Funktion übergebene Wert in der Variable firstValue gespeichert und alle folgenden Werte werden in der Variable args gespeichert. Das ist eine sehr nützliche Sprachfunktion, die jedoch ein neues Problem aufwirft. Die Funktion avg() nimmt eine mit Kommata getrennte Liste von Argumenten entgegen — was ist jedoch, wenn man den Durchschnitt eines Arrays haben möchte? Man kann die Funktion folgendermaßen umschreiben:

-
- -
function avgArray(arr) {
-  var sum = 0;
-  for (var i = 0, j =  arr.length; i < j; i++) {
-    sum += arr[i];
-  }
-  return sum / arr.length;
-}
-
-avgArray([2, 3, 4, 5]); // 3.5
- -

Es wäre jedoch schöner, wenn man die erste Funktion wiederverwenden könnten. Glücklicherweise ist es bei JavaScript möglich, eine Funktion mit einem Array von Argumenten aufzurufen, indem man die Methode apply() benutzt, die alle Function-Objekte besitzen:

- -
avg.apply(null, [2, 3, 4, 5]); // 3.5
- -

Das zweite Argument der apply()-Funktion ist das Array mit den Argumenten; das erste Argument wird später bzw. weiter unten näher erklärt. Das betont noch einmal die Tatsache, dass Funktionen auch Objekte sind.

- -
-

Man kann das gleiche Ergebnis mit dem Einsatz des Spread operator im Funktionsaufruf erreichen.

- -

Zum Beispiel: avg(...numbers);

-
- -

JavaScript erlaubt es, anonyme Funktionen zu erstellen:

- -
var avg = function() {
-    var sum = 0;
-    for (var i = 0, j = arguments.length; i < j; i++) {
-        sum += arguments[i];
-    }
-    return sum / arguments.length;
-}
-
- -

Die Semantik ist äquivalent zu function avg() Form. Es ist extrem mächtig, weil es erlaubt, an bestimmten Stellen vollständige Funktionsdefinition zu schreiben, wo normalerweise ein Ausdruck verwendet wird. Das ermöglicht allerlei klevere Tricks. Hier eine Möglichkeit, eine Variable zu verbergen — wie Variablen mit Blocksichtbarkeit in C:

- -
var a = 1;
-var b = 2;
-
-(function() {
-  var b = 3;
-  a += b;
-})();
-
-a; // 4
-b; // 2
- -

JavaScript erlaubt den rekursiven Aufruf von Funktionen. Das ist praktisch beim Verarbeiten von Baumstrukturen, wie es beim Browser-DOM der Fall ist.

- -
function countChars(elm) {
-    if (elm.nodeType == 3) { // TEXT_NODE
-        return elm.nodeValue.length;
-    }
-    var count = 0;
-    for (var i = 0, child; child = elm.childNodes[i]; i++) {
-        count += countChars(child);
-    }
-    return count;
-}
-
- -

Das hebt ein potentielles Problem mit anonymen Funktionen hervor: Wie ruft man sie rekursiv auf, wenn sie keinen Namen haben? JavaScript erlaubt hierfür die Benennung von Funktionsausdrücken. Man kann dazu benannte "IIFEs" (Immediately Invoked Function Expressions) wie unten beschrieben benutzen:

- -
var charsInBody = (function counter(elm) {
-    if (elm.nodeType == 3) { // TEXT_NODE
-        return elm.nodeValue.length;
-    }
-    var count = 0;
-    for (var i = 0, child; child = elm.childNodes[i]; i++) {
-        count += counter(child);
-    }
-    return count;
-})(document.body);
-
- -

Der angegebene Name im Funktionsausdruck ist nur innerhalb der selben Funktion verfügbar. Das erlaubt der JavaScript-Engine, den Code besser zu optimieren und fördert die Lesbarkeit des Codes. Der Name wird zudem im Debugger und einigen Stack Traces angezeigt, was beim Debuggen viel Zeit sparen kann.

- -

Zu beachten ist auch hier wieder, dass JavaScript-Funktionen ebenfalls Objekte sind — wie alles andere in JavaScript. Und man kann Eigenschaften ändern und hinzufügen, wie es im oberen Abschnitt über Objekte bereits gezeigt wurde.

- -

Benutzerdefinierte Objekte

- -
Detaillierte Informationen zum objektorientiertem Programmieren in JavaScript finden Sie in der Einführung zu objektorientiertem Programmieren in JavaScript.
- -

In klassischen objektorientierten Programmiersprachen sind Objekte Zusammenstellungen von Daten und Methoden, die mit den Daten arbeiten. JavaScript ist eine Prototypenbasierte Sprache, die anders als in Java oder C++ kein Klassen-Statement besitzt (was manchmal verwirrend für Programmierer ist, die bisher nur mit Sprachen mit Klassen-Statements gearbeitet haben). Stattdessen benutzt JavaScript Funktionen als Klassen. Angenommen es gibt ein Objekt person mit Feldern für Vor- und Nachnamen. Es gibt zwei Wege den Namen zu schreiben: als "Vorname Nachname" oder "Nachname, Vorname". Nutzt man die vorher beschriebenen Funktionen und Objekte, lässt sich dies z. B. so umsetzen:

- -
function makePerson(first, last) {
-  return {
-    first: first,
-    last: last
-  };
-}
-function personFullName(person) {
-  return person.first + ' ' + person.last;
-}
-function personFullNameReversed(person) {
-  return person.last + ', ' + person.first;
-}
-
-s = makePerson("Simon", "Willison");
-personFullName(s); // "Simon Willison"
-personFullNameReversed(s); // "Willison, Simon"
- -

Das funktioniert zwar, ist aber keine schöne Lösung. Man hat am Ende dutzende unnötiger Funktionen im globalen Namensraum. Was man braucht ist die Möglichkeit, eine Funktion an ein Objekt anzuhängen. Weil Funktionen Objekte sind, lässt sich dies einfach realisieren:

- -
function makePerson(first, last) {
-  return {
-    first: first,
-    last: last,
-    fullName: function() {
-      return this.first + ' ' + this.last;
-    },
-    fullNameReversed: function() {
-      return this.last + ', ' + this.first;
-    }
-  };
-}
-
-s = makePerson("Simon", "Willison")
-s.fullName(); // "Simon Willison"
-s.fullNameReversed(); // "Willison, Simon"
- -

Hier sehen Sie etwas, was vorher noch nicht eingesetzt wurde: Das this-Schlüsselwort. Wird es innerhalb einer Funktion benutzt, verweist this auf das aktuelle Objekt. Was das tatsächlich bedeutet, hängt davon ab, wie die Funktion aufgerufen wird. Wenn die Funktion mit der Punkt- oder Klammer-Notation auf einem Objekt aufgerufen wird, repräsentiert this dieses Objekt. Wird die Punkt-Notation nicht verwendet, dann verweist this auf das globale Objekt.

- -

Zu beachten ist, dass this ein häufiger Grund für Fehler ist. Zum Beispiel:

- -
s = makePerson("Simon", "Willison");
-var fullName = s.fullName;
-fullName(); // undefined undefined
- -

Wenn fullName() alleine und ohne den Einsatz von s.fullName() aufgerufen wird, referenziert this das globale Objekt. Dort gibt es keine globalen Variablen first oder last, weshalb man als Rückgabewert undefined erhält.

- -

Man kann Vorteile des this-Schlüsselwortes nutzen, um die makePerson-Funktion zu optimieren:

- -
function Person(first, last) {
-    this.first = first;
-    this.last = last;
-    this.fullName = function() {
-        return this.first + ' ' + this.last;
-    }
-    this.fullNameReversed = function() {
-        return this.last + ', ' + this.first;
-    }
-}
-var s = new Person("Simon", "Willison");
-
- -

Hier wird ein neues Schlüsselwort aufgeführt: new. new steht in starker Beziehung zu this. Es erstellt ein neues Objekt und ruft die nachstehende Funktion auf, wobei this dann das neue Objekt ist. Zu beachten ist, dass die Funktion keinen Wert zurückgibt, sondern das this-Objekt modifiziert. Das new gibt dann das this-Objekt an den Aufrufer zurück. Funktionen die für den Aufruf mit new konzipiert sind, nennt man Konstruktoren. Gängige Praxis ist es, diese Funktionen mit einem großen Anfangsbuchstaben zu versehen, um an den Einsatz von new zu erinnern.

- -

Die nun optimiertere Funktion hat jedoch immernoch eine Fehlerquelle mit dem Aufruf von fullName().

- -

Das person-Objekt wird besser, weist jedoch noch immer einige unangenehme Effekte auf: Bei jedem Erstellen eines person-Objekts werden zwei neue Funktionen erzeugt — wäre es nicht besser, wenn dieser Code wiederverwendet werden könnte?

- -
function personFullName() {
-    return this.first + ' ' + this.last;
-}
-function personFullNameReversed() {
-    return this.last + ', ' + this.first;
-}
-function Person(first, last) {
-    this.first = first;
-    this.last = last;
-    this.fullName = personFullName;
-    this.fullNameReversed = personFullNameReversed;
-}
-
-
- -

Das ist besser: Man erstellt die Methodenfunktionen nur einmal und referenziert zu diesen im Konstruktor. Geht das noch besser? Die Antwort ist auch hier wieder ja:

- -
function Person(first, last) {
-  this.first = first;
-  this.last = last;
-}
-Person.prototype.fullName = function() {
-  return this.first + ' ' + this.last;
-}
-Person.prototype.fullNameReversed = function() {
-  return this.last + ', ' + this.first;
-}
- -

Person.prototype ist ein Objekt, das sich alle Person-Instanzen teilen. Dies ist ein Teil einer Prototypen-Suchkette (mit dem speziellen Namen Prototypenkette (prototype chain)): Bei jedem Versuch, auf eine Eigenschaft von Person zuzugreifen, die nicht gesetzt ist, prüft JavaScript ob diese Eigenschaft stattdessen in Person.prototype vorhanden ist. Als Ergebnis wird alles in Person.prototype für alle Instanzen eines Konstruktors über this verfügbar.

- -

Das ist ein unglaublich mächtiges Werkzeug. JavaScript erlaubt es Prototypen irgendwo innerhalb des Programmes zu verändern, was bedeutet, dass man Methoden zur Laufzeit zu existierenden Objekten hinzufügen kann:

- -
s = new Person("Simon", "Willison");
-s.firstNameCaps(); // TypeError on line 1: s.firstNameCaps is not a function
-
-Person.prototype.firstNameCaps = function firstNameCaps() {
-  return this.first.toUpperCase()
-};
-s.firstNameCaps(); // "SIMON"
- -

Interessanterweise können auch neue Eigenschaften zu Prototypen von JavaScript-Objekten hinzugefügt werden. So kann z. B. dem String-Objekt eine neue Methode hinzugefügt werden, welche den String in umgekehrter Reihenfolge zurückgibt:

- -
var s = "Simon";
-s.reversed(); // TypeError on line 1: s.reversed is not a function
-
-String.prototype.reversed = function reversed() {
-  var r = "";
-  for (var i = this.length - 1; i >= 0; i--) {
-    r += this[i];
-  }
-  return r;
-};
-
-s.reversed(); // nomiS
- -

Die neue Methode funktioniert sogar mit String-Literalen!

- -
"This can now be reversed".reversed(); // desrever eb won nac sihT
- -

Wie schon vorher erwähnt, ist der Prototyp ein Teil einer Kette. Der Anfang dieser Kette ist Object.prototype, welcher die Methode toString() enthält — das ist die Methode die aufgerufen wird, wenn ein Objekt als String repräsentiert werden soll. Das ist für das Debuggen des Person-Objekts nützlich:

- -
var s = new Person("Simon", "Willison");
-s; // [object Object]
-
-Person.prototype.toString = function() {
-  return '<Person: ' + this.fullName() + '>';
-};
-
-s.toString(); // "<Person: Simon Willison>"
- -

Erinnern Sie sich an die Stelle weiter oben, als avg.apply() als erstes Argument null übergeben bekommen hat? Diese Stelle können wir uns zur genaueren Betrachtung wieder heranziehen. Mit diesem ersten übergebenen Argument von apply() wird das Objekt festgelegt, welches this repräsentiert. Hier ist z. B. eine einfache Implementierung von new:

- -
function trivialNew(constructor, ...args) {
-  var o = {}; // Create an object
-  constructor.apply(o, args);
-  return o;
-}
- -

Das ist keine exakte Replikation von new, weil die Prototypenkette nicht angelegt wird (es wäre schwer, hier vollständig darzustellen). Das ist nichts, was man häufig benötigt, jedoch ist es nützlich darüber Bescheid zu wissen. In diesem Codeteil nennt man ...args (mit den Punkten) das sogenannte Restargument — wie der Name impliziert, enthält dieser alle restlichen Argumente.

- -

Der Aufruf von

- -
var bill = trivialNew(Person, "William", "Orange");
- -

ist somit fast äquivalent zu

- -
var bill = new Person("William", "Orange");
- -

apply() hat eine Schwesterfunktion namens call, die ebenfalls das Setzen von this erlaubt, jedoch statt eines Arrays nimmt sie eine erweiterte Liste mit Argumenten entgegen.

- -
function lastNameCaps() {
-  return this.last.toUpperCase();
-}
-var s = new Person("Simon", "Willison");
-lastNameCaps.call(s);
-// Das gleiche wie:
-s.lastNameCaps = lastNameCaps;
-s.lastNameCaps();
- -

Innere Funktionen

- -

Funktionsdeklarationen sind in JavaScript auch innerhalb von Funktionen erlaubt. Das lies sich bei der weiter oben verwendeten makePerson()-Funktion schon erkennen. Ein wichtige Eigenschaft von verschachtelten Funktionen in JavaScript ist der Zugriff auf Variablen aus der Elternfunktion:

- -
function betterExampleNeeded() {
-    var a = 1;
-    function oneMoreThanA() {
-        return a + 1;
-    }
-    return oneMoreThanA();
-}
-
- -

Dies bietet einen großen Nutzen beim Schreiben von einfacher wartbarem Code. Wenn eine Funktion ein oder zwei andere Funktionen benutzt, diese aber im Code nirgendwo anders benötigt werden, kann man diese Hilfsfunktionen in die Funktion schachteln, die diese schlussendlich eigentlich aufruft. Das hällt die Anzahl der globalen Funktionen niedrig, was immer gut ist.

- -

Dieses ist ein Gegenpool zum oft verlockenden Einsatz von globalen Variablen. Wenn komplexer Code geschrieben wird, ist es oft verlockend und einfach, globale Variablen für das Teilen von Werten zwischen mehreren Funktionen zu benutzen — was aber zu einem unwartbaren Code führen kann. Geschachtelte Funktionen teilen sich Variablen aus der Elternfunktion, weshalb dieser Mechanismus gut für das Koppeln von Funktionen geeignet ist, wenn es Sinn ergibt, ohne dabei den globalen Namensraum zu verunreinigen — "lokal global" wenn man so will. Diese Technik sollte mit Vorsicht eingesetzt werden, ist jedoch eine nützliche Möglichkeit.

- -

Closures

- -

Nun wird einer der mächtigsten Abstraktionsmechanismen vorgestellt, den JavaScript mit sich bringt —  der jedoch oft auch für Verwirrung sorgt. Was passiert im nachfolgenden Codeschnipsel?

- -
function makeAdder(a) {
-  return function(b) {
-    return a + b;
-  };
-}
-var x = makeAdder(5);
-var y = makeAdder(20);
-x(6); // ?
-y(7); // ?
- -

Der Name der makeAdder-Funktion lässt es schon vermuten, was diese bewirken soll: sie erstellt neue adder-Funktionen, welche dann mit einem Argument aufgerufen werden, welches zu dem Argument addiert wird, mit dem sie erstellt wurden.

- -

Was hier passiert ist das gleiche wie das, was vorab mit den inneren Funktionen geschehen ist: eine Funktion, die in einer anderen Funktion definiert ist, hat Zugriff auf die Variable der äußeren Funktion. Hier jedoch mit dem Unterschied, dass die äußere Funktion etwas zurückgibt und vortäuscht, dass die lokalen Variablen nicht mehr existieren. Doch bleiben diese bestehen — andernfalls könnte die adder-Funktion nicht funktionieren. Außerdem gibt es zwei verschiedene Kopien der lokalen Variablen der makeAdder()-Funktion — eine, wo a den Wert 5 hat und eine wo a den Wert 20 hat. Die Ergebnisse der beiden Funktionsaufrufe ist deswegen folgendes:

- -
x(6) // ergibt 11
-y(7) // ergibt 27
-
- -

Hier ist, was tatsächlich passiert. Immer, wenn JavaScript eine Funktion ausführt, wird ein Scopeobjekt erstellt, welches die lokalen Variablen enthält, die in der Funktion erstellt werden. Es wird mit jeder Variablen initialisiert, die als Funktionsparameter übergeben wird. Das ist wie mit dem globalen Objekt, welches alle globalen Variablen und Funktionen in sich vorhält, jedoch mit einigen wichtigen Unterschieden: erstens wird immer ein neues Scopeobjekt für jeden Aufruf einer Funktion erstellt und zweitens (anders als bei globalen Objekten, welche als this und in Browsern als window erreichbar sind), sind diese Scopeobjekte nicht direkt im JavaScript Code erreichbar. Es gibt zum Beispiel keinen Mechanismus zum Iterieren aller Eigenschaften eines Scopeobjekts.

- -

Beim Aufruf der makeAdder()-Funktion wird ein Scope-Objekt erstellt, das eine Eigenschaft besitzt: a, welche das übergebene Argument der makeAdder() Funktion ist. makeAdder() gibt dann eine neu erstellte Funktion zurück. Normalerweise würde der Garbage Collector von JavaScript das für makeAdder() erstellte Scopeobjekt an dieser Stelle entsorgen, doch die zurückgegebene Funktion enthält noch immer eine Referenz auf das Scopeobjekt. Als Resultat wird das Scopeobjekt nicht entsorgt, bis es keine Referenzen mehr auf die von makeAdder() zurückgegebene Funktion gibt.

- -

Scopeobjekte bilden eine Scopekette, die ähnlich funktioniert wie die Prototypenkette von JavaScripts Objektsystem.

- -

Eine Closure ist eine Kombination aus einer Funktion und dem Scopeobjekt, in dem die Funktion erstellt wurde. Closures sind in der Lage, einen Status zu speichern — als solches können sie oft an Stellen von Objekten eingesetzt werden. Hier sind einige gute Einführungen zu Closures zu finden.

diff --git "a/files/de/web/javascript/einf\303\274hrung_in_den_gebrauch_von_xpath_in_javascript/index.html" "b/files/de/web/javascript/einf\303\274hrung_in_den_gebrauch_von_xpath_in_javascript/index.html" deleted file mode 100644 index 6af0ba9e0e..0000000000 --- "a/files/de/web/javascript/einf\303\274hrung_in_den_gebrauch_von_xpath_in_javascript/index.html" +++ /dev/null @@ -1,411 +0,0 @@ ---- -title: Einführung in den Gebrauch von XPath in JavaScript -slug: Web/JavaScript/Einführung_in_den_Gebrauch_von_XPath_in_JavaScript -translation_of: Web/XPath/Introduction_to_using_XPath_in_JavaScript ---- -

Dieses Dokument beschreibt die Schnittstelle zu XPath in JavaScript intern, in Erweiterungen und in Webseiten. Mozilla implementiert einen großen Teil von DOM 3 XPath, sodass XPath auf HTML- und XML-Dokumente angewendet werden kann.

- -

Die Hauptschnittstelle für die Anwendung von XPath ist die evaluate-Methode des document-Objekts.

- -

document.evaluate

- -

Diese Methode wertet  XPath Ausdrücke in Bezug auf ein XML basierendes Dokument (einschließlich HTML-Documente) aus und gibt ein XPathResult-Objekt zurück, das ein Einzelknoten oder eine Zusammenstellung mehrerer Knoten sein kann. Die vorhandene Dokumentation dieser Methode ist unter document.evaluate zu finden, sie ist jedoch für unseren jetzigen Bedarf ziemlich knapp gehalten. Eine umfangreichere Betrachtung wird nachfolgend beschrieben.

- -
var xpathResult = document.evaluate( xpathExpression, contextNode, namespaceResolver, resultType, result );
-
- -

Parameter

- -

Die evaluate Funktion nimmt insgesamt fünf Parameter entgegen:

- -
    -
  • xpathExpression: Eine Zeichenkette, die den auszuwertenden XPath-Ausdrucks beinhaltet.
    • -
  • contextNode: Ein Bezugsknoten im Dokument, auf den sich die Auswertung von xpathExpression beziehen soll, einschließlich sämtlicher Kindknoten. Am häufigsten wird hierfür der document-Knoten verwendet.
    • -
  • namespaceResolver: A function that will be passed any namespace prefixes contained within xpathExpression which returns a string representing the namespace URI associated with that prefix. This enables conversion between the prefixes used in the XPath expressions and the possibly different prefixes used in the document. The function can be either: -
      -
    • Created by using the createNSResolver method of a XPathEvaluator object. You should use this virtually all of the time.
      • -
    • null, which can be used for HTML documents or when no namespace prefixes are used. Note that, if the xpathExpression contains a namespace prefix, this will result in a DOMException being thrown with the code NAMESPACE_ERR.
      • -
    • A custom user-defined function. See the Using a User Defined Namespace Resolver section in the appendix for details.
      • -
    -
    • -
  • resultType: Eine Konstante, die den gewünschten Rückgabetyp als Ergebnis der Auswertung angibt. Die am häufigsten übergebene Konstante ist XPathResult.ANY_TYPE, die eine Rückgabe der Ergebnisse in in einer Weise liefert, die den sebstverständlichen Erwartungen am ehesten entspricht. Im Anhang ist ein Abschnitt zu finden, der eine vollständige Liste der der verfügbaren Konstanten enthält. Sie werden weiter unten im Abschnitt  "Festlegung des Rückgabetyps" erläutert.
    • -
  • result: Wird ein vorhandenes XPathResult-Objekt angegeben, so wird es für die Ergebnisrückgabe wiederverwendet. Bei der Angabe von null wird ein neues XPathResult-Objekt erzeugt.
    • -
- -

Rückgabewert

- -

Returns xpathResult, which is an XPathResult object of the type specified in the resultType parameter. The XPathResult Interface is defined {{ Source("dom/interfaces/xpath/nsIDOMXPathResult.idl", "here") }}.

- -

Einen Standard-Namensraumauflöser (Default Namespace Resolver) implementieren

- -

Wir erstellen einen Namensraumauflöser mit Hilfe der createNSResolver-Methode des document-Objekts.

- -
var nsResolver = document.createNSResolver( contextNode.ownerDocument == null ? contextNode.documentElement : contextNode.ownerDocument.documentElement );
-
- -

Or alternatively by using the <code>createNSResolver</code> method of a <code>XPathEvaluator</code> object. <pre> var xpEvaluator = new XPathEvaluator(); var nsResolver = xpEvaluator.createNSResolver( contextNode.ownerDocument == null ? contextNode.documentElement : contextNode.ownerDocument.documentElement ); </pre> And then pass document.evaluate, the nsResolver variable as the namespaceResolver parameter.

- -

Note: XPath defines QNames without a prefix to match only elements in the null namespace. There is no way in XPath to pick up the default namespace as applied to a regular element reference (e.g., p[@id='_myid'] for xmlns='http://www.w3.org/1999/xhtml'). To match default elements in a non-null namespace, you either have to refer to a particular element using a form such as ['namespace-uri()='http://www.w3.org/1999/xhtml' and name()='p' and @id='_myid'] (this approach works well for dynamic XPath's where the namespaces might not be known) or use prefixed name tests, and create a namespace resolver mapping the prefix to the namespace. Read more on how to create a user defined namespace resolver, if you wish to take the latter approach.

- -

Anmerkungen

- -

Adapts any DOM node to resolve namespaces so that an XPath expression can be easily evaluated relative to the context of the node where it appeared within the document. This adapter works like the DOM Level 3 method lookupNamespaceURI on nodes in resolving the namespaceURI from a given prefix using the current information available in the node's hierarchy at the time lookupNamespaceURI is called. Also correctly resolves the implicit xml prefix.

- -

Festlegung des Rückgabetyps

- -

The returned variable xpathResult from document.evaluate can either be composed of individual nodes (simple types), or a collection of nodes (node-set types).

- -

Simple Types

- -

When the desired result type in resultType is specified as either:

- -
    -
  • NUMBER_TYPE - a double
    • -
  • STRING_TYPE - a string
    • -
  • BOOLEAN_TYPE - a boolean
    • -
- -

We obtain the returned value of the expression by accessing the following properties respectively of the XPathResult object.

- -
    -
  • numberValue
    • -
  • stringValue
    • -
  • booleanValue
    • -
- -
Beispiel
- -

The following uses the XPath expression count(//p) to obtain the number of <p> elements in a HTML document:

- -
var paragraphCount = document.evaluate( 'count(//p)', document, null, XPathResult.ANY_TYPE, null );
-
-alert( 'This document contains ' + paragraphCount.numberValue + ' paragraph elements' );
-
- -

Although JavaScript allows us to convert the number to a string for display, the XPath interface will not automatically convert the numerical result if the stringValue property is requested, so the following code will not work:

- -
var paragraphCount = document.evaluate('count(//p)', document, null, XPathResult.ANY_TYPE, null );
-
-alert( 'This document contains ' + paragraphCount.stringValue + ' paragraph elements' );
-
- -

Instead it will return an exception with the code NS_DOM_TYPE_ERROR.

- -

Node-Set-Typen

- -

The XPathResult object allows node-sets to be returned in 3 principal different types:

- - - -
Iteratoren
- -

When the specified result type in the resultType parameter is either:

- -
    -
  • UNORDERED_NODE_ITERATOR_TYPE
    • -
  • ORDERED_NODE_ITERATOR_TYPE
    • -
- -

The XPathResult object returned is a node-set of matched nodes which will behave as an iterator, allowing us to access the individual nodes contained by using the iterateNext() method of the XPathResult.

- -

Once we have iterated over all of the individual matched nodes, iterateNext() will return null.

- -

Note however, that if the document is mutated (the document tree is modified) between iterations that will invalidate the iteration and the invalidIteratorState property of XPathResult is set to true, and a NS_ERROR_DOM_INVALID_STATE_ERR exception is thrown.

- -
Iterator Example
- -
var iterator = document.evaluate('//phoneNumber', documentNode, null, XPathResult.UNORDERED_NODE_ITERATOR_TYPE, null );
-
-try {
-  var thisNode = iterator.iterateNext();
-
-  while (thisNode) {
-    alert( thisNode.textContent );
-    thisNode = iterator.iterateNext();
-  }
-}
-catch (e) {
-  dump( 'Error: Document tree modified during iteration ' + e );
-}
-
- -
Momentabbilder (Snapshots)
- -

When the specified result type in the resultType parameter is either:

- -
    -
  • UNORDERED_NODE_SNAPSHOT_TYPE
    • -
  • ORDERED_NODE_SNAPSHOT_TYPE
    • -
- -

The XPathResult object returned is a static node-set of matched nodes, which allows us to access each node through the snapshotItem(itemNumber) method of the XPathResult object, where itemNumber is the index of the node to be retrieved. The total number of nodes contained can be accessed through the snapshotLength property.

- -

Snapshots do not change with document mutations, so unlike the iterators the snapshot does not become invalid, but it may not correspond to the current document, for example the nodes may have been moved, it might contain nodes that no longer exist, or new nodes could have been added.

- -
Snapshot Example
- -
var nodesSnapshot = document.evaluate('//phoneNumber', documentNode, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null );
-
-for ( var i=0 ; i < nodesSnapshot.snapshotLength; i++ )
-{
-  dump( nodesSnapshot.snapshotItem(i).textContent );
-}
-
- -
Erster Knoten
- -

When the specified result type in the resultType parameter is either:

- -
    -
  • ANY_UNORDERED_NODE_TYPE
    • -
  • FIRST_ORDERED_NODE_TYPE
    • -
- -

The XPathResult object returned is only the first found node that matched the XPath expression. This can be accessed through the singleNodeValue property of the XPathResult object. This will be null if the node set is empty.

- -

Note that, for the unordered subtype the single node returned might not be the first in document order, but for the ordered subtype you are guaranteed to get the first matched node in the document order.

- -
First Node Example
- -
var firstPhoneNumber = document.evaluate('//phoneNumber', documentNode, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null );
-
-dump( 'The first phone number found is ' + firstPhoneNumber.singleNodeValue.textContent );
-
- -

Die Konstante ANY_TYPE

- -

When the result type in the resultType parameter is specified as ANY_TYPE, the XPathResult object returned, will be whatever type that naturally results from the evaluation of the expression.

- -

It could be any of the simple types (NUMBER_TYPE, STRING_TYPE, BOOLEAN_TYPE), but, if the returned result type is a node-set then it will only be an UNORDERED_NODE_ITERATOR_TYPE.

- -

To determine that type after evaluation, we use the resultType property of the XPathResult object. The constant values of this property are defined in the appendix. None Yet =====Any_Type Example===== <pre> </pre>

- -

Beispiele

- -

Innerhalb eines HTML-Dokuments

- -

The following code is intended to be placed in any JavaScript fragment within or linked to the HTML document against which the XPath expression is to be evaluated.

- -

To extract all the <h2> heading elements in an HTML document using XPath, the xpathExpression is simply '//h2'. Where, // is the Recursive Descent Operator that matches elements with the nodeName h2 anywhere in the document tree. The full code for this is: link to introductory xpath doc

- -
var headings = document.evaluate('//h2', document, null, XPathResult.ANY_TYPE, null );
-
- -

Notice that, since HTML does not have namespaces, we have passed null for the namespaceResolver parameter.

- -

Since we wish to search over the entire document for the headings, we have used the document object itself as the contextNode.

- -

The result of this expression is an XPathResult object. If we wish to know the type of result returned, we may evaluate the resultType property of the returned object. In this case, that will evaluate to 4, an UNORDERED_NODE_ITERATOR_TYPE. This is the default return type when the result of the XPath expression is a node set. It provides access to a single node at a time and may not return nodes in a particular order. To access the returned nodes, we use the iterateNext() method of the returned object:

- -
var thisHeading = headings.iterateNext();
-
-var alertText = 'Level 2 headings in this document are:\n'
-
-while (thisHeading) {
-  alertText += thisHeading.textContent + '\n';
-  thisHeading = headings.iterateNext();
-}
-
- -

Once we iterate to a node, we have access to all the standard DOM interfaces on that node. After iterating through all the h2 elements returned from our expression, any further calls to iterateNext() will return null.

- -

Auswertung an einem XML-Dokument innerhalb einer Erweiterung

- -

The following uses an XML document located at chrome://yourextension/content/peopleDB.xml as an example.

- -
<?xml version="1.0"?>
-<people xmlns:xul = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" >
-  <person>
-	<name first="george" last="bush" />
-	<address street="1600 pennsylvania avenue" city="washington" country="usa"/>
-	<phoneNumber>202-456-1111</phoneNumber>
-  </person>
-  <person>
-	<name first="tony" last="blair" />
-	<address street="10 downing street" city="london" country="uk"/>
-	<phoneNumber>020 7925 0918</phoneNumber>
-  </person>
-</people>
-
- -

To make the contents of the XML document available within the extension, we create an XMLHttpRequest object to load the document synchronously, the variable xmlDoc will contain the document as an XMLDocument object against which we can use the evaluate method

- -

JavaScript used in the extensions xul/js documents.

- -
var req = new XMLHttpRequest();
-
-req.open("GET", "chrome://yourextension/content/peopleDB.xml", false);
-req.send(null);
-
-var xmlDoc = req.responseXML;
-
-var nsResolver = xmlDoc.createNSResolver( xmlDoc.ownerDocument == null ? xmlDoc.documentElement : xmlDoc.ownerDocument.documentElement);
-
-var personIterator = xmlDoc.evaluate('//person', xmlDoc, nsResolver, XPathResult.ANY_TYPE, null );
-
- -

Anmerkung

- -

When the XPathResult object is not defined, the constants can be retreived in privileged code using Components.interfaces.nsIDOMXPathResult.ANY_TYPE (CI.nsIDOMXPathResult). Similarly, an XPathEvaluator can be created using:

- -
Components.classes["@mozilla.org/dom/xpath-evaluator;1"].createInstance(Components.interfaces.nsIDOMXPathEvaluator)
- -

Anhang

- -

Einen benutzerdefinierten Namensauflöser implementieren

- -

This is an example for illustration only. This function will need to take namespace prefixes from the xpathExpression and return the URI that corresponds to that prefix. For example, the expression:

- -
'//xhtml:td/mathml:math'
-
- -

will select all MathML expressions that are the children of (X)HTML table data cell elements.

- -

In order to associate the 'mathml:' prefix with the namespace URI 'http://www.w3.org/1998/Math/MathML' and 'xhtml:' with the URI 'http://www.w3.org/1999/xhtml' we provide a function:

- -
function nsResolver(prefix) {
-  var ns = {
-    'xhtml' : 'http://www.w3.org/1999/xhtml',
-    'mathml': 'http://www.w3.org/1998/Math/MathML'
-  };
-  return ns[prefix] || null;
-}
-
- -

Our call to document.evaluate would then looks like:

- -
document.evaluate( '//xhtml:td/mathml:math', document, nsResolver, XPathResult.ANY_TYPE, null );
-
- -

Einen Standard-Namensrauf für XML-Dokumente implementieren

- -

As noted in the Implementing a Default Namespace Resolver previously, the default resolver does not handle the default namespace for XML documents. For example with this document:

- -
<?xml version="1.0" encoding="UTF-8"?>
-<feed xmlns="http://www.w3.org/2005/Atom">
-    <entry />
-    <entry />
-    <entry />
-</feed>
-
- -

doc.evaluate('//entry', doc, nsResolver, XPathResult.ANY_TYPE, null) will return an empty set, where nsResolver is the resolver returned by createNSResolver. Passing a null resolver doesn't work any better, either.

- -

One possible workaround is to create a custom resolver that returns the correct default namespace (the Atom namespace in this case). Note that you still have to use some namespace prefix in your XPath expression, so that the resolver function will be able to change it to your required namespace. E.g.:

- -
function resolver() {
-    return 'http://www.w3.org/2005/Atom';
-}
-doc.evaluate('//myns:entry', doc, resolver, XPathResult.ANY_TYPE, null)
-
- -

Note that a more complex resolver will be required if the document uses multiple namespaces.

- -

An approach which might work better (and allow namespaces not to be known ahead of time) is described in the next section.

- -

Using XPath functions to reference elements with a default namespace

- -

Another approach to match default elements in a non-null namespace (and one which works well for dynamic XPath expressions where the namespaces might not be known), involves referring to a particular element using a form such as [namespace-uri()='http://www.w3.org/1999/xhtml' and name()='p' and @id='_myid']. This circumvents the problem of an XPath query not being able to detect the default namespace on a regularly labeled element.

- -

Getting specifically namespaced elements and attributes regardless of prefix

- -

If one wishes to provide flexibility in namespaces (as they are intended) by not necessarily requiring a particular prefix to be used when finding a namespaced element or attribute, one must use special techniques.

- -

While one can adapt the approach in the above section to test for namespaced elements regardless of the prefix chosen (using local-name() in combination with namespace-uri() instead of name()), a more challenging situation occurs, however, if one wishes to grab an element with a particular namespaced attribute in a predicate (given the absence of implementation-independent variables in XPath 1.0).

- -

For example, one might try (incorrectly) to grab an element with a namespaced attribute as follows: var xpathlink = someElements[local-name(@*)="href" and namespace-uri(@*)='http://www.w3.org/1999/xlink'];

- -

This could inadvertently grab some elements if one of its attributes existed that had a local name of "href", but it was a different attribute which had the targeted (XLink) namespace (instead of @href).

- -

In order to accurately grab elements with the XLink @href attribute (without also being confined to predefined prefixes in a namespace resolver), one could obtain them as follows:

- -
var xpathEls = 'someElements[@*[local-name() = "href" and namespace-uri() = "http://www.w3.org/1999/xlink"]]'; // Grabs elements with any single attribute that has both the local name 'href' and the XLink namespace
-var thislevel = xml.evaluate(xpathEls, xml, null, XPathResult.ANY_TYPE, null);
-var thisitemEl = thislevel.iterateNext();
-
- -

In XPathResult definierte Konstanten

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Result Type Defined ConstantValueDescription
ANY_TYPE0A result set containing whatever type naturally results from evaluation of the expression. Note that if the result is a node-set then UNORDERED_NODE_ITERATOR_TYPE is always the resulting type.
NUMBER_TYPE1A result containing a single number. This is useful for example, in an XPath expression using the count() function.
STRING_TYPE2A result containing a single string.
BOOLEAN_TYPE3A result containing a single boolean value. This is useful for example, in an XPath expression using the not() function.
UNORDERED_NODE_ITERATOR_TYPE4A result node-set containing all the nodes matching the expression. The nodes may not necessarily be in the same order that they appear in the document.
ORDERED_NODE_ITERATOR_TYPE5A result node-set containing all the nodes matching the expression. The nodes in the result set are in the same order that they appear in the document.
UNORDERED_NODE_SNAPSHOT_TYPE6A result node-set containing snapshots of all the nodes matching the expression. The nodes may not necessarily be in the same order that they appear in the document.
ORDERED_NODE_SNAPSHOT_TYPE7A result node-set containing snapshots of all the nodes matching the expression. The nodes in the result set are in the same order that they appear in the document.
ANY_UNORDERED_NODE_TYPE8A result node-set containing any single node that matches the expression. The node is not necessarily the first node in the document that matches the expression.
FIRST_ORDERED_NODE_TYPE9A result node-set containing the first node in the document that matches the expression.
- -

Siehe auch

- - - -
-

Original Document Information

- -
    -
  • Based Upon Original Document Mozilla XPath Tutorial
    • -
  • Original Source Author: James Graham.
    • -
  • Other Contributors: James Thompson.
    • -
  • Last Updated Date: 2006-3-25.
    • -
-
diff --git a/files/de/web/javascript/enumerability_and_ownership_of_properties/index.html b/files/de/web/javascript/enumerability_and_ownership_of_properties/index.html new file mode 100644 index 0000000000..70c769be5a --- /dev/null +++ b/files/de/web/javascript/enumerability_and_ownership_of_properties/index.html @@ -0,0 +1,340 @@ +--- +title: Aufzählbarkeit und Zugehörigkeit von Eigenschaften +slug: Web/JavaScript/Aufzählbarkeit_und_Zugehörigkeit_von_Eigenschaften +tags: + - Eigenschaft + - JavaScript + - Objekt + - enumerable +translation_of: Web/JavaScript/Enumerability_and_ownership_of_properties +--- +
{{JsSidebar("More")}}
+ +

Aufzählbare Eigenschaften sind jene, deren internes Statusfeld enumerable gesetzt ist.

+ +

Alle aufzählbaren Eigenschaften eines Objektes sind mit for...in-Schleifen zu durchlaufen (sofern der Name der Eigenschaft kein Symbol ist), daher die Bezeichnung „aufzählbar“.
+ Neben for…in gibt es weitere Möglichkeiten, die Existenz einer Eigenschaft zu erkennen, Eigenschaften aufzuzählen oder abzurufen. Siehe dazu nachfolgende Tabellen.

+ +

Standardmäßig aufzählbar sind Eigenschaften, die durch einfache Zuweisung oder Initialisierung entstanden sind, nicht jedoch Eigenschaften, die durch Object.defineProperty oder ähnliche Mechanismen erzeugt wurden.

+ +

Die Zugehörigkeit einer Eigenschaft ergibt sich aus dem Ort seiner Definition; dies ist entweder das Objekt selbst oder einer seiner Prototypen. Eine Eigenschaft, die im Objekt definiert wurde, gehört zu diesem Objekt.

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Aufzählbarkeit und Zugehörigkeit – Eingebaute Methoden zur Erkennung, zum Abruf und zur Aufzählung
FunktionObjektObjekt und geerbt aus Prototypenkettenur geerbt aus Prototypenkette
Erkennung + + + + + + + + + + + + + + + +
aufzählbarnicht aufzählbaraufzählbar und nicht aufzählbar
+

propertyIsEnumerable

+ +

hasOwnProperty

+ 		+

hasOwnProperty – aufzählbare Eigenschaften mit propertyIsEnumerable entfernt

+ 		hasOwnProperty
+ 		+ + + + + + + + + + + + + + + +
aufzählbarnicht aufzählbaraufzählbar und nicht aufzählbar
nur mit eigenem Code möglichnur mit eigenem Code möglichin
+ 		nur mit eigenem Code möglich
Abruf + + + + + + + + + + + + + + + +
aufzählbarnicht aufzählbaraufzählbar und nicht aufzählbar
+

Object.keys

+ +

getOwnPropertyNames 

+ +

getOwnPropertySymbols

+ 		getOwnPropertyNames, getOwnPropertySymbols – aufzählbare Eigenschaften mit propertyIsEnumerable entfernt +

getOwnPropertyNames

+ +

getOwnPropertySymbols

+
+ 		nur mit eigenem Code möglichnur mit eigenem Code möglich
Aufzählung + + + + + + + + + + + + + + + +
aufzählbarnicht aufzählbaraufzählbar und nicht aufzählbar
+

Object.keys

+ +

getOwnPropertyNames 

+ +

getOwnPropertySymbols

+ 		getOwnPropertyNames, getOwnPropertySymbols – aufzählbare Eigenschaften mit propertyIsEnumerable entfernt +

getOwnPropertyNames

+ +

getOwnPropertySymbols

+
+ 		+ + + + + + + + + + + + + + + +
aufzählbarnicht aufzählbaraufzählbar und nicht aufzählbar
+

for..in

+ +

(ohne Symbole)

+ 		nur mit eigenem Code möglichnur mit eigenem Code möglich
+ 		nur mit eigenem Code möglich
+
+ +

Sichtbarkeit von Eigenschaften

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
infor..inobj.hasOwnPropertyobj.propertyIsEnumerableObject.keysObject.getOwnPropertyNamesObject.getOwnPropertyDescriptorsReflect.ownKeys()
Aufzählbarjajajajajajajaja
Nicht aufzählbarjaneinjaneinneinjajaja
Symbol als Namejaneinjajaneinneinjaja
Aufzählbar, geerbtjajaneinneinneinneinneinnein
Nicht aufzählbar, geerbtjaneinneinneinneinneinneinnein
Symbol als Name, geerbtjaneinneinneinneinneinneinnein
+
+ +

Eigenschaften nach Aufzählbarkeit oder Zugehörigkeit abrufen

+ +

Der nachfolgende Code ist nicht immer der effizienteste Weg, aber als einfaches Beispiel gut geeignet.

+ +
    +
  • Die Existenz einer Eigenschaft erkennen: SimplePropertyRetriever.theGetMethodYouWant(obj).indexOf(prop) > -1
    • +
  • Alle Eigenschaften durchlaufen:
    + SimplePropertyRetriever.theGetMethodYouWant(obj).forEach(function (value, prop) {}); (or use filter(), map(), etc.)
    • +
+ +
var SimplePropertyRetriever = {
+    getOwnEnumerables: function(obj) {
+        return this._getPropertyNames(obj, true, false, this._enumerable);
+         // Or could use for..in filtered with hasOwnProperty or just this: return Object.keys(obj);
+    },
+    getOwnNonenumerables: function(obj) {
+        return this._getPropertyNames(obj, true, false, this._notEnumerable);
+    },
+    getOwnEnumerablesAndNonenumerables: function(obj) {
+        return this._getPropertyNames(obj, true, false, this._enumerableAndNotEnumerable);
+        // Or just use: return Object.getOwnPropertyNames(obj);
+    },
+    getPrototypeEnumerables: function(obj) {
+        return this._getPropertyNames(obj, false, true, this._enumerable);
+    },
+    getPrototypeNonenumerables: function(obj) {
+        return this._getPropertyNames(obj, false, true, this._notEnumerable);
+    },
+    getPrototypeEnumerablesAndNonenumerables: function(obj) {
+        return this._getPropertyNames(obj, false, true, this._enumerableAndNotEnumerable);
+    },
+    getOwnAndPrototypeEnumerables: function(obj) {
+        return this._getPropertyNames(obj, true, true, this._enumerable);
+        // Or could use unfiltered for..in
+    },
+    getOwnAndPrototypeNonenumerables: function(obj) {
+        return this._getPropertyNames(obj, true, true, this._notEnumerable);
+    },
+    getOwnAndPrototypeEnumerablesAndNonenumerables: function(obj) {
+        return this._getPropertyNames(obj, true, true, this._enumerableAndNotEnumerable);
+    },
+    // Private static property checker callbacks
+    _enumerable: function(obj, prop) {
+        return obj.propertyIsEnumerable(prop);
+    },
+    _notEnumerable: function(obj, prop) {
+        return !obj.propertyIsEnumerable(prop);
+    },
+    _enumerableAndNotEnumerable: function(obj, prop) {
+        return true;
+    },
+    // Inspired by http://stackoverflow.com/a/8024294/271577
+    _getPropertyNames: function getAllPropertyNames(obj, iterateSelfBool, iteratePrototypeBool, includePropCb) {
+        var props = [];
+
+        do {
+            if (iterateSelfBool) {
+                Object.getOwnPropertyNames(obj).forEach(function(prop) {
+                    if (props.indexOf(prop) === -1 && includePropCb(obj, prop)) {
+                        props.push(prop);
+                    }
+                });
+            }
+            if (!iteratePrototypeBool) {
+                break;
+            }
+            iterateSelfBool = true;
+        } while (obj = Object.getPrototypeOf(obj));
+
+        return props;
+    }
+};
+ +

Siehe auch

+ +
    +
  • in
    • +
  • for..in
    • +
  • {{jsxref("Object.hasOwnProperty()")}}
    • +
  • {{jsxref("Object.propertyIsEnumerable()")}}
    • +
  • {{jsxref("Object.getOwnPropertyNames()")}}
    • +
  • {{jsxref("Object.keys()")}}
    • +
  • {{jsxref("Object.getOwnPropertyDescriptors()")}}
    • +
diff --git a/files/de/web/javascript/equality_comparisons_and_sameness/index.html b/files/de/web/javascript/equality_comparisons_and_sameness/index.html new file mode 100644 index 0000000000..2b9be0a283 --- /dev/null +++ b/files/de/web/javascript/equality_comparisons_and_sameness/index.html @@ -0,0 +1,424 @@ +--- +title: Vergleiche auf Gleichheit und deren Verwendung +slug: Web/JavaScript/Vergleiche_auf_Gleichheit_und_deren_Verwendung +translation_of: Web/JavaScript/Equality_comparisons_and_sameness +--- +
{{jsSidebar("Intermediate")}}
+ +
+

JavaScript bietet drei verschiedene Operationen an, um Werte zu vergleichen:

+ +
    +
  • strikte Gleichheit (oder "triple equals" or "identity") mit ===,
    • +
  • lose Gleichheit ("double equals") mit ==,
    • +
  • und Object.is (neu in ECMAScript 2015).
    • +
+ +

Die Wahl der Operation hängt von der Art des gewünschten Vergleichs auf Gleichheit ab.

+
+ +

Kurz gesagt nimmt double equals eine Typkonvertierung der Operanden vor, bevor der Vergleich der Werte gemacht wird. Bei triple equals werden die Werte ohne vorherige Typkonvertierung miteinander verglichen. Wenn sich die Datentypen der beiden Operanden unterscheiden liefert triple equals immer false zurück. Object.is verhält sich wie triple equals und bietet darüber hinaus eine spezielle Behandlung für NaN und -0 und +0 an. -0 und +0 sind für Object.is ungleich während Object.is(NaN, NaN) true ist. Laut IEEE 754 ergibt ein Vergleich von zwei NaN mit double equals oder triple equals false. Diese drei Operationen unterscheiden sich ihrere Behandlung von primitiven Datentypen. Es wird nicht geprüft, ob die beiden Operanden konzeptionell diesselbe Struktur besitzen. Für die nichtprimitiven Objekte x und y, welche diesselbe Struktur besitzen aber zwei unterschiedliche Objekte sind, ergeben die drei Operationen false.

+ +

Strikte Gleichheit mit ===

+ +

Strikte Gleichheit prüft zwei Werte auf Gleichheit. Keiner der Werte wird vor dem Vergleich implizit konvertiert. Wenn die Werte verschiedene Datentypen haben, werden die Werte als ungleich betrachtet. Anderenfalls, wenn die Werte denselben Datentyp haben und keine Zahlen sind, werden sie als gleich betrachtet, solange sie denselben Wert haben. Wenn beide Werte Zahlen sind, werden sie als gleich betrachtet, solange beide nicht NaN sind und denselben Wert haben oder der eine Wert +0 und der andere Wert -0 ist.

+ +
var num = 0;
+var obj = new String("0");
+var str = "0";
+var b = false;
+
+console.log(num === num); // true
+console.log(obj === obj); // true
+console.log(str === str); // true
+
+console.log(num === obj); // false
+console.log(num === str); // false
+console.log(obj === str); // false
+console.log(null === undefined); // false
+console.log(obj === null); // false
+console.log(obj === undefined); // false
+
+ +

Strikte Gleichheit ist fast immer die am meisten geeignete Vergleichsoperation. Für alle Werte, die keine Zahlen sind, verwendet sie die naheliegende Semantik: ein Wert ist nur mit sich selbst gleich. Für Zahlen kommt eine leicht unterschiedliche Semantik zum Einsatz, da zwei Grenzfälle berücksichtigt werden müssen.  Im ersten Grenzfall kann die Zahl 0 als Gleitkommazahl ein positives oder negatives Vorzeichen haben. Dies kann zur Repräsentation von bestimmten mathematischen Lösungen nützlich sein. Da aber in den meisten Situationen nicht zwischen +0 und -0 unterschieden wird, behandelt die strikte Gleichheit diese zwei Werte als gleich. Der zweite Grenzfall ergibt sich dadruch, dass Gleitkommazahlen einen keine-Zahl Wert haben, NaN (not-a-number). Dadurch können Lösungen für schlecht definierte mathematische Probleme dargestellt werden (z.B.: negativ unendlich plus positiv undendlich). Strikte Gleichheit behandelt NaN als ungleich zu jedem anderen Wert und sich selbst. Der einzige Fall, in dem (x !== x) true ergibt, ist, wenn x den Wert NaN hat.

+ +

Lose Gleichheit mit ==

+ +

Lose Gleichheit vergleicht zwei Werte auf deren Gleichheit, nachdem beide zu demselben Datentyp konvertiert wurden. Nach der Konvertierung (ein oder beide Werte können konvertiert werden) wird der finale Vergleich wie bei === ausgeführt.  Lose Gleichheit ist symmetrisch: A == B hat immer dieselbe Semantik wie B == A für alle Werte von A und B.

+ +

Der Vergleich auf Gleichheit wird wie folgt für Operanden mit den verschiedenen Datentypen ausgeführt:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 Operand B
  UndefinedNullNumberStringBooleanObject
Operand AUndefinedtruetruefalsefalsefalseIsFalsy(B)
NulltruetruefalsefalsefalseIsFalsy(B)
NumberfalsefalseA === BA === ToNumber(B)ToNumber(B) === AToPrimitive(B) == A
StringfalsefalseB === ToNumber(A)A === BToNumber(A) === ToNumber(B)ToPrimitive(B) == A
BooleanfalsefalseToNumber(A) === BToNumber(A) === ToNumber(B)A === Bfalse
ObjectIsFalsy(A)IsFalsy(A)ToPrimitive(A) == BToPrimitive(A) == Bfalse +

A === B

+
+ +

In der oberen Tabelle versucht ToNumber(A) sein Argument vor dem Vergleich in eine Zahl zu konvertieren. Das Verhalten ist äquivalent zu +A (der unäre + Operator).  ToPrimitive(A) versucht sein Argument, das ein Objekt ist, in einen primitiven Wert zu konvertieren. Dazu wird eine unterschiedliche Sequenz von A.toString und A.valueOf Methoden von A aufzurufen.

+ +

Traditionell und laut ECMAScript sind alle Objekte lose ungleich zu undefined und null. Aber die meisten Webbbrowser erlauben einer sehr kleinen Menge von Objekten (speziell das document.all Objekt für jede Seite), dass sie sich in bestimmten Kontexten so verhalten, als ob sie den Wert undefined emulieren.  Lose Gleichheit ist ein derartiger Kontext. Daher ergibt die Methode IsFalsy(A) genau dann true, wenn A ein Objekt ist, das undefined emuliert. In allen anderen Fällen ist ein Objekt nie lose gleich zu undefined oder null.

+ +
var num = 0;
+var obj = new String("0");
+var str = "0";
+var b = false;
+
+console.log(num == num); // true
+console.log(obj == obj); // true
+console.log(str == str); // true
+
+console.log(num == obj); // true
+console.log(num == str); // true
+console.log(obj == str); // true
+console.log(null == undefined); // true
+
+// both false, except in rare cases
+console.log(obj == null);
+console.log(obj == undefined);
+
+ +

Manche Entwickler haben die Ansicht, dass die Verwendung der losen Gleichheit fast nie eine gute Idee ist. Das Resultat des Vergleichs mit strikter Gleichheit ist einfacher vorherzusagen und die Auswertung ist schneller, da keine Konvertierung der Werte stattfindet.

+ +

Same-value Gleichheit

+ +

Same-value Gleichheit adressiert den dritten Fall: Bestimmung, ob zwei Werte in allen Kontexten funktional identisch sind. Dieser Anwendungsfall demonstriert eine Instanz des Liskovschen Substitutionsprinzip. Eine Instanz tritt auf, wenn versucht wird ein nicht veränderbares Property zu verändern:

+ +
// Add an immutable NEGATIVE_ZERO property to the Number constructor.
+Object.defineProperty(Number, "NEGATIVE_ZERO",
+                      { value: -0, writable: false, configurable: false, enumerable: false });
+
+function attemptMutation(v)
+{
+  Object.defineProperty(Number, "NEGATIVE_ZERO", { value: v });
+}
+
+ +

Object.defineProperty wird eine Exception werfen, wenn ein Versuch zum Verändern eines unveränderbares Property es verändern würde. Es passiert nichts, solange keine Veränderung stattfinden soll.  Wenn v -0 ist, wurde keine Veränderung angefragt und somit wird keine Exception geworfen. Wenn v aber +0 ist, hätte Number.NEGATIVE_ZERO nicht länger seinen unveränderbaren Wert. Wenn ein unveränderbares Property neudefiniert wird, wird der neu spezifizierte Wert intern mittels der Same-value Gleichheit mit dem aktuellen Wert verglichen.

+ +

Die Same-value Gleichheit wird von der Object.is Methode angeboten.

+ +

Abstrakte Gleichheit, strikte Gleichheit und same-value Gleichheit in der Spezifikation

+ +

In ECMAScript 5 wird der Vergleich mit == in Section 11.9.3, The Abstract Equality Algorithm beschrieben. Der === Vergleich ist in 11.9.6, The Strict Equality Algorithm zu finden. (Diese beiden Abschnitte sind kurz und verständlich. Hinweis: zuerst den Abschnitt Strict Equality Algorithm lesen) ECMAScript 5 beschreibt auch die same-value Gleichheit in Section 9.12, The SameValue Algorithm für die interne Verwendung in der JavaScript Engine. Dieser Abschnitt ist hauptsächlich derselbe wie Strict Equality Algorithm mit der Ausnahme, dass sich 11.9.6.4 und 9.12.4 in der Behandlung von Zahlen (Number) unterscheiden. ECMAScript 2015 schlägt vor, dass dieser Algorithmus über Object.is angeboten wird.

+ +

Wir können erkennen, dass mit double und triple equals, mit der Ausnahme der vorhergehenden Typkonvertierung in 11.9.6.1, der Strict Equality Algorithm eine Teilmenge des Abstract Equality Algorithm ist, weil 11.9.6.2–7 dem Abschnitt 11.9.3.1.a–f entspricht.

+ +

A model for understanding equality comparisons?

+ +

Prior to ES2015, you might have said of double equals and triple equals that one is an "enhanced" version of the other. For example, someone might say that double equals is an extended version of triple equals, because the former does everything that the latter does, but with type conversion on its operands. E.g., 6 == "6". (Alternatively, someone might say that double equals is the baseline, and triple equals is an enhanced version, because it requires the two operands to be the same type, so it adds an extra constraint. Which one is the better model for understanding depends on how you choose to view things.)

+ +

However, this way of thinking about the built-in sameness operators is not a model that can be stretched to allow a place for ES2015's Object.is on this "spectrum". Object.is isn't simply "looser" than double equals or "stricter" than triple equals, nor does it fit somewhere in between (i.e., being both stricter than double equals, but looser than triple equals). We can see from the sameness comparisons table below that this is due to the way that Object.is handles NaN. Notice that if Object.is(NaN, NaN) evaluated to false, we could say that it fits on the loose/strict spectrum as an even stricter form of triple equals, one that distinguishes between -0 and +0. The NaN handling means this is untrue, however. Unfortunately, Object.is simply has to be thought of in terms of its specific characteristics, rather than its looseness or strictness with regard to the equality operators.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Sameness Comparisons
xy=====Object.is
undefinedundefinedtruetruetrue
nullnulltruetruetrue
truetruetruetruetrue
falsefalsetruetruetrue
"foo""foo"truetruetrue
{ foo: "bar" }xtruetruetrue
00truetruetrue
+0-0truetruefalse
0falsetruefalsefalse
""falsetruefalsefalse
""0truefalsefalse
"0"0truefalsefalse
"17"17truefalsefalse
[1,2]"1,2"truefalsefalse
new String("foo")"foo"truefalsefalse
nullundefinedtruefalsefalse
nullfalsefalsefalsefalse
undefinedfalsefalsefalsefalse
{ foo: "bar" }{ foo: "bar" }falsefalsefalse
new String("foo")new String("foo")falsefalsefalse
0nullfalsefalsefalse
0NaNfalsefalsefalse
"foo"NaNfalsefalsefalse
NaNNaNfalsefalsetrue
+ +

When to use Object.is versus triple equals

+ +

Aside from the way it treats NaN, generally, the only time Object.is's special behavior towards zeros is likely to be of interest is in the pursuit of certain meta-programming schemes, especially regarding property descriptors when it is desirable for your work to mirror some of the characteristics of Object.defineProperty. If your use case does not require this, it is suggested to avoid Object.is and use === instead. Even if your requirements involve having comparisons between two NaN values evaluate to true, generally it is easier to special-case the NaN checks (using the isNaN method available from previous versions of ECMAScript) than it is to work out how surrounding computations might affect the sign of any zeros you encounter in your comparison.

+ +

Here's an in-exhaustive list of built-in methods and operators that might cause a distinction between -0 and +0 to manifest itself in your code:

+ +
+
- (unary negation)
+
+ +
+
+

It's obvious that negating 0 produces -0. But the abstraction of an expression can cause -0 to creep in when you don't realize it. For example, consider:

+ + 
let stoppingForce = obj.mass * -obj.velocity
+ +

If obj.velocity is 0 (or computes to 0), a -0 is introduced at that place and propogates out into stoppingForce.

+
+
+ +
+
Math.atan2
+
Math.ceil
+
Math.pow
+
Math.round
+
+ +
+
It's possible for a -0 to be introduced into an expression as a return value of these methods in some cases, even when no -0 exists as one of the parameters. E.g., using Math.pow to raise -Infinity to the power of any negative, odd exponent evaluates to -0. Refer to the documentation for the individual methods.
+
+ +
+
Math.floor
+
Math.max
+
Math.min
+
Math.sin
+
Math.sqrt
+
Math.tan
+
+ +
+
It's possible to get a -0 return value out of these methods in some cases where a -0 exists as one of the parameters. E.g., Math.min(-0, +0) evalutes to -0. Refer to the documentation for the individual methods.
+
+ +
+
~
+
<<
+
>>
+
Each of these operators uses the ToInt32 algorithm internally. Since there is only one representation for 0 in the internal 32-bit integer type, -0 will not survive a round trip after an inverse operation. E.g., both Object.is(~~(-0), -0) and Object.is(-0 << 2 >> 2, -0) evaluate to false.
+
+ +

Relying on Object.is when the signedness of zeros is not taken into account can be hazardous. Of course, when the intent is to distinguish between -0 and +0, it does exactly what's desired.

+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/guide/ausdruecke_und_operatoren/index.html b/files/de/web/javascript/guide/ausdruecke_und_operatoren/index.html deleted file mode 100644 index 7a0e723c6c..0000000000 --- a/files/de/web/javascript/guide/ausdruecke_und_operatoren/index.html +++ /dev/null @@ -1,965 +0,0 @@ ---- -title: Ausdrücke und Operatoren -slug: Web/JavaScript/Guide/Ausdruecke_und_Operatoren -tags: - - Beginner - - Extensions - - Guide - - JavaScript - - Operatoren - - 'l10n:priority' -translation_of: Web/JavaScript/Guide/Expressions_and_Operators ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Funktionen", "Web/JavaScript/Guide/Numbers_and_dates")}}
- -

Dieses Kapitel beschreibt JavaScript Ausdrücke und Operatoren, Zuweisungsoperatoren, Vergleichsoperatoren, Rechenoperatoren, Bit-Operatoren, Logische Operatoren, Operator zur Zeichenkettenverknüpfung, Bedingte (ternäre) Operatoren und mehr.

- -

Eine vollständige und detaillierte Liste mit Operatoren und Ausdrücken ist in den Referenzen zu finden.

- -

Operatoren

- -

JavaScript besitzt verschiedene Operatortypen. Dieser Abschnitt beschreibt die einzelnen Operatoren und beinhaltet Informationen über die Operator-Prioritäten.

- -
    -
  • {{ web.link("#Assignment_operators", "Zuweisungs-Operatoren") }}
    • -
  • {{ web.link("#Comparison_operators", "Vergleichs-Operatoren") }}
    • -
  • {{ web.link("#Arithmetic_operators", "Arithmetische Operatoren") }}
    • -
  • {{ web.link("#Bitwise_operators", "Bit-Operatoren") }}
    • -
  • {{ web.link("#Logical_operators", "Logische Operatoren") }}
    • -
  • {{ web.link("#String_operators", "String Operatoren") }}
    • -
  • {{ web.link("#Conditional_(ternary)_operator", "Bedingter (ternärer) Operator")}}
    • -
  • {{ web.link("#Comma_operator", "Komma Operator")}}
    • -
  • {{ web.link("#Unary_operators", "Unäre Operatoren")}}
    • -
  • {{ web.link("#Relational_operators", "Vergleichsoperator")}}
    • -
- -

JavaScript verfügt über beides, binäre als auch unäre Operatoren. Zudem existiert ein spezieller ternärer Operator - der Bedingungsoperator. Ein binärer Operator benötigt zwei Operanden, einen vor dem Operator und einen nach dem Operator:

- -
operand1 operator operand2
-
- -

Zum Beispiel: 3+4, oder x*y.

- -

Ein unärer Operator erwartet einen einzelnen Operanden, entweder vor, oder nach dem Operator:

- -
operator operand
-
- -

oder

- -
operand operator
-
- -

Zum Beispiel: x++, oder ++x.

- -

Zuweisungsoperatoren

- -

Ein Zuweisungsoperator weißt seinem linken Operanden einen Wert zu. Dieser Wert basiert auf dem Ergebnis des rechten Operanden. Der einfachste Zuweisungsoperator ist das "Gleich" (=), welches den Wert des rechten Operanden dem linken Operanden zuweist.

- -

Zum Beispiel: x = y (y wid der Wert von x zugewiesen).

- -

Es gibt auch zusammengesetzte Zuweisungsoperatoren, diese stellen Abkürzungen für die in der folgenden Tabelle aufgelisteten Operationen dar:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Zusammengesetzte Zuweisungsoperatoren
NameAbgekürzter OperatorAusgeschriebener Operator
Zuweisungx = yx = y
Additionx += yx = x + y
Subraktionx -= yx = x - y
Multiplikationx *= yx = x * y
Divisionx /= yx = x / y
Modulo (Division mit Rest)x %= yx = x % y
Exponentiation assignment {{experimental_inline}}x **= yx = x ** y
Left shift assignmentx <<= yx = x << y
Right shift assignmentx >>= yx = x >> y
Unsigned right shift assignmentx >>>= yx = x >>> y
Bitwise AND assignmentx &= yx = x & y
Bitwise XOR assignmentx ^= yx = x ^ y
Bitwise OR assignmentx |= yx = x | y
- -

Destrukturierung

- -

Komplexere Zuweisungen ermöglicht Javascript über die sogenannte Destrukturierung. Diese ermöglicht es, Daten aus Arrays oder Objekten mithilfe einer Syntax zu extrahieren, die die Konstruktion von Array- und Objektliteralen widerspiegelt.

- -
var foo = ["eins", "zwei", "drei"];
-
-// Ohne Destrukturierung
-var eins   = foo[0];
-var zwei   = foo[1];
-var drei   = foo[2];
-
-// mit Destrukturierung
-var [eins, zwei, drei] = foo;
- -

Vergleichsoperatoren

- -

Ein Vergleichsoperator vergleicht seine Operanden und gibt einen logischen Wert zurück, der darauf basiert, ob der Vergleich wahr ist, oder nicht.

- -

Die Operanden können numerische-, string-, logische- oder Objektwerte sein. Zeichenfolgen werden basierend auf der lexikographischen Standardreihenfolge mit unicodewerten verglichen. Wenn die beiden Operanden nicht vom selben Typ sind, versucht JavaScript in den meisten Fällen, sie in einen geeigneten Typ für den Vergleich zu konvertieren. Dieses Verhalten führt im Allgemeinen dazu, dass die Operanden numerisch verglichen werden. Die einzigen Ausnahmen für die Typumwandlung innerhalb von Vergleichen sind die Operatoren === und !==, die strenge Vergleiche durchführen. Diese Operatoren versuchen nicht, die Operanden in kompatible Typen zu konvertieren, bevor sie die Gleichheit überprüfen.

- -

Die folgende Tabelle beschreibt die Vergleichsoperatoren in Bezug auf diesen Beispielcode:

- -
var var1 = 3;
-var var2 = 4;
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Vergleichsoperatoren
OperatorBeschreibungBeispiele, die true zurückgeben
Equal (==)Gibt true zurück, wenn die Operanden gleich sind.3 == var1 -

"3" == var1

- 3 == '3'
Not equal (!=)Gibt true zurück, wenn die Operanden ungleich sind.var1 != 4
- var2 != "3"
Strict equal (===)Gibt true zurück, wenn die Operanden gleich sind und auch der Typ übereinstimmt. Weitere Informationen unter {{jsxref("Object.is")}} und sameness in JS.3 === var1
Strict not equal (!==)Gibt true zurück, wenn die Operanden vom selben Typ sind, doch nicht den selben Wert haben, oder wenn sie den selben Wert haben, doch nicht vom selben Typ sind.var1 !== "3"
- 3 !== '3'
Greater than (>)Gibt true zurück, wenn der linke Operand größer dem rechten Operanden ist.var2 > var1
- "12" > 2
Greater than or equal (>=)Gibt true zurück, wenn der linke Operand größer als, oder gleich dem linken Operanden ist.var2 >= var1
- var1 >= 3
Less than (<)Gibt true zurück, wenn der linke Operand kleiner dem rechten Operanden ist.var1 < var2
- "2" < 12
Less than or equal (<=)Gibt true zurück, wenn der linke Operand kleiner als, oder gleich dem rechten Operanden ist.var1 <= var2
- var2 <= 5
- -
-

Note: (=>) ist kein Operator, hiermit werden Arrow functions notiert.

-
- -

Arithmetische Operatoren (Rechenzeichen)

- -

Ein arithmetischer Operator nimmt numerische Werte (Literale oder Variablen) als Operanden entgegen und gibt einen einzelnen numerischen Wert zurück. Die arithmetischen Standardoperatoren sind Addition (+), Subtraktion (-), Multiplikation (*) und Division (/). Diese Operatoren funktionieren wie in den meisten anderen Programmiersprachen, wenn sie mit Fließkommazahlen verwendet werden (beachten Sie insbesondere, dass die Division durch Null {{jsxref ("Infinity")}} ergibt).

- -
1 / 2; // 0.5
-1 / 2 == 1.0 / 2.0; // this is true
-
- -

Neben den arithmetischen Standardoperatoren (+, -, * /), stellt JavaScript noch weitere Rechenzeichen zur Verfügung. Diese werden in der folgenden Tabelle aufgeführt:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Arithmetische Operatoren
OperatorBeschreibungBeispiel
Remainder (%)Binärer Operator. Gibt den ganzzahligen Rest der Division beider Operanden zurück.12 % 5 gibt 2 zurück.
Increment (++) -

Unärer Operator. Addiert 1 zu seinem Operanden.

- -

Wenn der Operator vorangestellt wird (++x), gibt er den Wert seines Operanden zurück nachdem 1 addiert wurde; Wenn der Operator nachgestellt wird (x++), gibt er den Wert seines Operanden zurück, bevor 1 addiert wurde.

- 		Wenn x gleich 3 ist, setzt ++x x auf 4 und gibt 4 zurück, wobei x++  3 zurückgibt und erst danach x auf 4 setzt.
Decrement (--) -

Unärer Operator. Subtrahiert 1 von seinem Operanden.

- -

Der Rückgabewert verhält sich analog zum increment Operator.

- 		Wenn x gleich 3 ist, setzt --x x auf 2 und gibt 2 zurück, wobei x-- 3 zurückgibt und erst danach, x auf 2 setzt.
Unary negation (-)Unärer Operator. Gibt die Negierung seines Operanden zurück.Wenn x gleich 3 ist, gibt -x -3 zurück.
Unary plus (+)Versucht, den Operanden in eine Zahl umzuwandeln, wenn dies nicht bereits der Fall ist.+"3" gibt 3 zurück.
- +true gibt 1 zurück.
Exponentiation operator (**) {{experimental_inline}}Calculates the base to the exponent power, that is, baseexponent2 ** 3 gibt 8 zurück.
- 10 ** -1 gibt 0.1 zurück.
- -

Bitweise Operatoren

- -

Ein bitweiser Operator behandelt seine Operanden als eine Menge von 32 Bits (Nullen und Einsen) und nicht als dezimale, hexadezimale oder oktale Zahlen. Zum Beispiel hat die Dezimalzahl Neun eine binäre Darstellung von 1001. Bitweise Operatoren führen ihre Operationen mit solchen binären Darstellungen aus, doch sie geben standardmäßige numerische JavaScript-Werte zurück.

- -

Die folgende Tabelle fasst die bitweisen Operatoren von JavaScript zusammen.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Bitweise Operatoren
OperatorVerwendungBeschreibung
Bitwise ANDa & bReturns a one in each bit position for which the corresponding bits of both operands are ones.
Bitwise ORa | bReturns a zero in each bit position for which the corresponding bits of both operands are zeros.
Bitwise XORa ^ bReturns a zero in each bit position for which the corresponding bits are the same.
- [Returns a one in each bit position for which the corresponding bits are different.]
Bitwise NOT~ aInverts the bits of its operand.
Left shifta << bShifts a in binary representation b bits to the left, shifting in zeros from the right.
Sign-propagating right shifta >> bShifts a in binary representation b bits to the right, discarding bits shifted off.
Zero-fill right shifta >>> bShifts a in binary representation b bits to the right, discarding bits shifted off, and shifting in zeros from the left.
- -

Bitweise logische Operatoren

- -

Konzeptuell arbeiten bitweise logische Operatoren wie folgt:

- -
    -
  • Die Operanden werden zu 32 Bit Integer Zahlen konvertiert und als Folge von Bits (Nullen und Einsen) dargestellt. Zahlen mit mehr als 32 Bits verlieren dabei ihre signifikanten Bits bis auf eine Länge von 32. Im folgenden Beispiel wird eine Zahl mit mehr als 32 Bits zu einer 32 Bit Integer Zahl konvertiert: - 
    Before: 11100110111110100000000000000110000000000001
-After:              10100000000000000110000000000001
    -
    • -
  • Jedes Bit des ersten Operanden wird mit dem korrespondierenden Bit im zweiten Operanden gepaart: Erstes Bit mit dem ersten Bit, zweites Bit mit dem zweiten Bit und so weiter.
    • -
  • Der Operator wird auf jedes paar von Bits angewendet und das Ergebnis bitweise erstellt.
    • -
- -

Zum Beispiel ist die binäre Darstellung der Zahl neun 1001, die binäre Darstellung der Zahl 15 ist 1111. Wenn die bitweisen logischen Operatoren auf diese Zahlen angewendet werden, ergeben sich folgende Ergebnisse:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Beispiele für bitweise Operatoren
AusdruckErgebnisBinäre Darstellung
15 & 991111 & 1001 = 1001
15 | 9151111 | 1001 = 1111
15 ^ 961111 ^ 1001 = 0110
~15-16~00000000...00001111 = 11111111...11110000
~9-10~00000000...00001001 = 11111111...11110110
- -

Beachte, dass alle 32 Bits invertiert werden, wenn der bitweise NOT Operator benutzt wird. Wenn dabei das höchstwertigste (ganz linke) Bit auf 1 gesetzt wird, entsteht eine negative Zahl. Note that all 32 bits are inverted using the Bitwise NOT operator, and that values with the most significant (left-most) bit set to 1 represent negative numbers (Zweierkomplement). ~x wird also genauso ausgewertet wie -x - 1.

- -

Bitweise Schiebeoperatoren

- -

Die bitweisen Schiebeoperatoren erwarten zwei Operanden. Der erste ist der Wert, der geschoben werden soll, der zweite die Anzahl der Bits, um die geschoben werden soll. Die Richtung, in die geschoben wird, wird durch den verwendeten Operator bestimmt.

- -

Schiebeoperatoren konvertieren ihre Operanden in 32 Bit Integer Zahlen und liefern als Ergebnis einen Wert vom selben Typen wir der linke Operand.

- -

Die Schiebeoperatoren sind in der folgenden Tabelle aufgelistet.

- - - - - - - - - - - - - - - - - - - - - - - - - - - -
Bitwise shift operators
OperatorDescriptionExample
Left shift
- (<<)		This operator shifts the first operand the specified number of bits to the left. Excess bits shifted off to the left are discarded. Zero bits are shifted in from the right.9<<2 yields 36, because 1001 shifted 2 bits to the left becomes 100100, which is 36.
Sign-propagating right shift (>>)This operator shifts the first operand the specified number of bits to the right. Excess bits shifted off to the right are discarded. Copies of the leftmost bit are shifted in from the left.9>>2 yields 2, because 1001 shifted 2 bits to the right becomes 10, which is 2. Likewise, -9>>2 yields -3, because the sign is preserved.
Zero-fill right shift (>>>)This operator shifts the first operand the specified number of bits to the right. Excess bits shifted off to the right are discarded. Zero bits are shifted in from the left.19>>>2 yields 4, because 10011 shifted 2 bits to the right becomes 100, which is 4. For non-negative numbers, zero-fill right shift and sign-propagating right shift yield the same result.
- -

Logische Operatoren

- -

Logische Operatoren werden normalerweise mit boolesche (logischen) Werten verwendet - hierbei geben sie dann einen booleschen Wert zurück. Die Operatoren && und || geben den Wert von einem der Operatoren zurück, sodass sie im Falle der Verwendung mit einem nicht-booleschen Wert auch einen nicht-booleschen Wert zurückgeben können. Die logischen Operatoren werden in der folgenden Tabelle beschrieben: 

- - - - - - - - - - - - - - - - - - - - - - - - - - - -
Logische Operatoren
OperatorVerwendungBeschreibung
Logical AND (&&)expr1 && expr2Gibt expr1 zurück, sofern es zu false konvertiert werden kann; ansonsten wird expr2 zurückgegeben. Insofern mit booleschen Werten verwendet, && gibt true zurück, wenn beide Operanden wahr sind; ansonsten false.
Logical OR (||)expr1 || expr2 -

Gibt expr1 zurück, sofern er zu true konvertiert werden kann. Insofern mit booleschen Werten verwendet, gibt der Operator || true zurück, wenn einer von beiden Operanden true ist; wenn beide false sind, wird false zurückgegeben. 

-
Logical NOT (!)!expr -

Gibt false zurück, wenn sein einziger Operand in true konvertiert werden kann; andernfalls gibt er true zurück. 

-
- -

Beispiele von Ausdrücken, die in false umgewandelt werden können, sind solche, die null, 0, NaN, einen leeren String ("") oder undefined sind. 

- -

Die folgenden Zeilen zeigen Beispiele des && (logisches UND) Operators.

- -
var a1 =  true && true;     // t && t returns true
-var a2 =  true && false;    // t && f returns false
-var a3 = false && true;     // f && t returns false
-var a4 = false && (3 == 4); // f && f returns false
-var a5 = "Cat" && "Dog";    // t && t returns Dog
-var a6 = false && "Cat";    // f && t returns false
-var a7 = "Cat" && false;    // t && f returns false
-
- -

Die folgenden Zeilen zeigen Beispiele des || (logisches ODER) Operators:

- -
var o1 =  true || true;     // t || t returns true
-var o2 = false || true;     // f || t returns true
-var o3 =  true || false;    // t || f returns true
-var o4 = false || (3 == 4); // f || f returns false
-var o5 = "Cat" || "Dog";    // t || t returns Cat
-var o6 = false || "Cat";    // f || t returns Cat
-var o7 = "Cat" || false;    // t || f returns Cat
-
- -

Die folgenden Zeilen zeigen Beispiele des ! (logisches NICHT) Operators:

- -
var n1 = !true;  // !t returns false
-var n2 = !false; // !f returns true
-var n3 = !"Cat"; // !t returns false
-
- -

Short-circuit-Bewertung 

- -

Da logische Ausdrücke von links nach rechts bewertet werden, werden sie auf eine mögliche "Abkürzung" (short-circuit) hin gemäß den folgenden Regeln evaluiert:

- -
    -
  • false && irgendwas wird abgekürzt als false bewertet.
    • -
  • true || irgendwas wird abgekürtz als true bewertet. 
    • -
- -

Die Regeln der Logik garantieren, dass diese Bewertungen immer korrekt sind. Der irgendwas-Operand werden in den o.g. Beispielen hierbei nicht bewertet. 

- -

String-Operatoren

- -

In addition to the comparison operators, which can be used on string values, the concatenation operator (+) concatenates two string values together, returning another string that is the union of the two operand strings.

- -

For example,

- -
console.log("my " + "string"); // console logs the string "my string".
- -

The shorthand assignment operator += can also be used to concatenate strings.

- -

For example,

- -
var mystring = "alpha";
-mystring += "bet"; // evaluates to "alphabet" and assigns this value to mystring.
- -

Conditional (ternary) operator

- -

The conditional operator is the only JavaScript operator that takes three operands. The operator can have one of two values based on a condition. The syntax is:

- -
condition ? val1 : val2
-
- -

If condition is true, the operator has the value of val1. Otherwise it has the value of val2. You can use the conditional operator anywhere you would use a standard operator.

- -

For example,

- -
var status = (age >= 18) ? "adult" : "minor";
-
- -

This statement assigns the value "adult" to the variable status if age is eighteen or more. Otherwise, it assigns the value "minor" to status.

- -

Comma operator

- -

The comma operator (,) simply evaluates both of its operands and returns the value of the last operand. This operator is primarily used inside a for loop, to allow multiple variables to be updated each time through the loop.

- -

For example, if a is a 2-dimensional array with 10 elements on a side, the following code uses the comma operator to update two variables at once. The code prints the values of the diagonal elements in the array:

- -
var x = [0,1,2,3,4,5,6,7,8,9];
-var a = [x, x, x, x, x]
-
-for (var i = 0, j = 9; i <= j; i++, j--)
-  console.log("a[" + i + "][" + j + "]= " + a[i][j]);
-
- -

Unary operators

- -

A unary operation is an operation with only one operand.

- -

delete

- -

The delete operator deletes an object, an object's property, or an element at a specified index in an array. The syntax is:

- -
delete objectName;
-delete objectName.property;
-delete objectName[index];
-delete property; // legal only within a with statement
-
- -

where objectName is the name of an object, property is an existing property, and index is an integer representing the location of an element in an array.

- -

The fourth form is legal only within a with statement, to delete a property from an object.

- -

You can use the delete operator to delete variables declared implicitly but not those declared with the var statement.

- -

If the delete operator succeeds, it sets the property or element to undefined. The delete operator returns true if the operation is possible; it returns false if the operation is not possible.

- -
x = 42;
-var y = 43;
-myobj = new Number();
-myobj.h = 4;    // create property h
-delete x;       // returns true (can delete if declared implicitly)
-delete y;       // returns false (cannot delete if declared with var)
-delete Math.PI; // returns false (cannot delete predefined properties)
-delete myobj.h; // returns true (can delete user-defined properties)
-delete myobj;   // returns true (can delete if declared implicitly)
-
- -
Deleting array elements
- -

When you delete an array element, the array length is not affected. For example, if you delete a[3], a[4] is still a[4] and a[3] is undefined.

- -

When the delete operator removes an array element, that element is no longer in the array. In the following example, trees[3] is removed with delete. However, trees[3] is still addressable and returns undefined.

- -
var trees = ["redwood", "bay", "cedar", "oak", "maple"];
-delete trees[3];
-if (3 in trees) {
-  // this does not get executed
-}
-
- -

If you want an array element to exist but have an undefined value, use the undefined keyword instead of the delete operator. In the following example, trees[3] is assigned the value undefined, but the array element still exists:

- -
var trees = ["redwood", "bay", "cedar", "oak", "maple"];
-trees[3] = undefined;
-if (3 in trees) {
-  // this gets executed
-}
-
- -

typeof

- -

The typeof operator is used in either of the following ways:

- -
typeof operand
-typeof (operand)
-
- -

The typeof operator returns a string indicating the type of the unevaluated operand. operand is the string, variable, keyword, or object for which the type is to be returned. The parentheses are optional.

- -

Suppose you define the following variables:

- -
var myFun = new Function("5 + 2");
-var shape = "round";
-var size = 1;
-var today = new Date();
-
- -

The typeof operator returns the following results for these variables:

- -
typeof myFun;     // returns "function"
-typeof shape;     // returns "string"
-typeof size;      // returns "number"
-typeof today;     // returns "object"
-typeof dontExist; // returns "undefined"
-
- -

For the keywords true and null, the typeof operator returns the following results:

- -
typeof true; // returns "boolean"
-typeof null; // returns "object"
-
- -

For a number or string, the typeof operator returns the following results:

- -
typeof 62;            // returns "number"
-typeof 'Hello world'; // returns "string"
-
- -

For property values, the typeof operator returns the type of value the property contains:

- -
typeof document.lastModified; // returns "string"
-typeof window.length;         // returns "number"
-typeof Math.LN2;              // returns "number"
-
- -

For methods and functions, the typeof operator returns results as follows:

- -
typeof blur;        // returns "function"
-typeof eval;        // returns "function"
-typeof parseInt;    // returns "function"
-typeof shape.split; // returns "function"
-
- -

For predefined objects, the typeof operator returns results as follows:

- -
typeof Date;     // returns "function"
-typeof Function; // returns "function"
-typeof Math;     // returns "object"
-typeof Option;   // returns "function"
-typeof String;   // returns "function"
-
- -

void

- -

The void operator is used in either of the following ways:

- -
void (expression)
-void expression
-
- -

The void operator specifies an expression to be evaluated without returning a value. expression is a JavaScript expression to evaluate. The parentheses surrounding the expression are optional, but it is good style to use them.

- -

You can use the void operator to specify an expression as a hypertext link. The expression is evaluated but is not loaded in place of the current document.

- -

The following code creates a hypertext link that does nothing when the user clicks it. When the user clicks the link, void(0) evaluates to undefined, which has no effect in JavaScript.

- -
Click here to do nothing
-
- -

The following code creates a hypertext link that submits a form when the user clicks it.

- -

-Click here to submit
- -

Relational operators

- -

A relational operator compares its operands and returns a Boolean value based on whether the comparison is true.

- -

in

- -

The in operator returns true if the specified property is in the specified object. The syntax is:

- -
propNameOrNumber in objectName
-
- -

where propNameOrNumber is a string or numeric expression representing a property name or array index, and objectName is the name of an object.

- -

The following examples show some uses of the in operator.

- -
// Arrays
-var trees = ["redwood", "bay", "cedar", "oak", "maple"];
-0 in trees;        // returns true
-3 in trees;        // returns true
-6 in trees;        // returns false
-"bay" in trees;    // returns false (you must specify the index number,
-                   // not the value at that index)
-"length" in trees; // returns true (length is an Array property)
-
-// built-in objects
-"PI" in Math;          // returns true
-var myString = new String("coral");
-"length" in myString;  // returns true
-
-// Custom objects
-var mycar = { make: "Honda", model: "Accord", year: 1998 };
-"make" in mycar;  // returns true
-"model" in mycar; // returns true
-
- -

instanceof

- -

The instanceof operator returns true if the specified object is of the specified object type. The syntax is:

- -
objectName instanceof objectType
-
- -

where objectName is the name of the object to compare to objectType, and objectType is an object type, such as {{jsxref("Date")}} or {{jsxref("Array")}}.

- -

Use instanceof when you need to confirm the type of an object at runtime. For example, when catching exceptions, you can branch to different exception-handling code depending on the type of exception thrown.

- -

For example, the following code uses instanceof to determine whether theDay is a Date object. Because theDay is a Date object, the statements in the if statement execute.

- -
var theDay = new Date(1995, 12, 17);
-if (theDay instanceof Date) {
-  // statements to execute
-}
-
- -

Operator precedence

- -

The precedence of operators determines the order they are applied when evaluating an expression. You can override operator precedence by using parentheses.

- -

The following table describes the precedence of operators, from highest to lowest.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Operator precedence
Operator typeIndividual operators
member. []
call / create instance() new
negation/increment! ~ - + ++ -- typeof void delete
multiply/divide* / %
addition/subtraction+ -
bitwise shift<< >> >>>
relational< <= > >= in instanceof
equality== != === !==
bitwise-and&
bitwise-xor^
bitwise-or|
logical-and&&
logical-or||
conditional?:
assignment= += -= *= /= %= <<= >>= >>>= &= ^= |=
comma,
- -

A more detailed version of this table, complete with links to additional details about each operator, may be found in JavaScript Reference.

- -

Expressions

- -

An expression is any valid unit of code that resolves to a value.

- -

Every syntactically valid expression resolves to some value but conceptually, there are two types of expressions: with side effects (for example: those that assign value to a variable) and those that in some sense evaluate and therefore resolve to a value.

- -

The expression x = 7 is an example of the first type. This expression uses the = operator to assign the value seven to the variable x. The expression itself evaluates to seven.

- -

The code 3 + 4 is an example of the second expression type. This expression uses the + operator to add three and four together without assigning the result, seven, to a variable.
-
- JavaScript has the following expression categories:

- -
    -
  • Arithmetic: evaluates to a number, for example 3.14159. (Generally uses {{ web.link("#Arithmetic_operators", "arithmetic operators") }}.)
    • -
  • String: evaluates to a character string, for example, "Fred" or "234". (Generally uses {{ web.link("#String_operators", "string operators") }}.)
    • -
  • Logical: evaluates to true or false. (Often involves {{ web.link("#Logical_operators", "logical operators") }}.)
    • -
  • Primary expressions: Basic keywords and general expressions in JavaScript.
    • -
  • Left-hand-side expressions: Left values are the destination of an assignment.
    • -
- -

Primary expressions

- -

Basic keywords and general expressions in JavaScript.

- -

this

- -

Use the this keyword to refer to the current object. In general, this refers to the calling object in a method. Use this either with the dot or the bracket notation:

- -
this["propertyName"]
-this.propertyName
-
- -

Suppose a function called validate validates an object's value property, given the object and the high and low values:

- -
function validate(obj, lowval, hival){
-  if ((obj.value < lowval) || (obj.value > hival))
-    console.log("Invalid Value!");
-}
-
- -

You could call validate in each form element's onChange event handler, using this to pass it the form element, as in the following example:

- -

-
-
Enter a number between 18 and 99:

-
-

-
-
Grouping operator

-
-
The grouping operator ( ) controls the precedence of evaluation in expressions. For example, you can override multiplication and division first, then addition and subtraction to evaluate addition first.

-
-
var a = 1;
-var b = 2;
-var c = 3;
-
-// default precedence
-a + b * c     // 7
-// evaluated by default like this
-a + (b * c)   // 7
-
-// now overriding precedence
-// addition before multiplication
-(a + b) * c   // 9
-
-// which is equivalent to
-a * c + b * c // 9
-

-
-
Comprehensions

-
-
Comprehensions are an experimental JavaScript feature, targeted to be included in a future ECMAScript version. There are two versions of comprehensions:

-
-

- 
{{experimental_inline}} {{jsxref("Operators/Array_comprehensions", "[for (x of y) x]")}}

- 
Array comprehensions.

- 
{{experimental_inline}} {{jsxref("Operators/Generator_comprehensions", "(for (x of y) y)")}}

- 
Generator comprehensions.

-

-
-
Comprehensions exist in many programming languages and allow you to quickly assemble a new array based on an existing one, for example.

-
-
[for (i of [ 1, 2, 3 ]) i*i ];
-// [ 1, 4, 9 ]
-
-var abc = [ "A", "B", "C" ];
-[for (letter of abc) letter.toLowerCase()];
-// [ "a", "b", "c" ]

-
-
Left-hand-side expressions

-
-
Left values are the destination of an assignment.

-
-
new

-
-
You can use the new operator to create an instance of a user-defined object type or of one of the built-in object types. Use new as follows:

-
-
var objectName = new objectType([param1, param2, ..., paramN]);
-

-
-
super

-
-
The super keyword is used to call functions on an object's parent. It is useful with classes to call the parent constructor, for example.

-
-
super([arguments]); // calls the parent constructor.
-super.functionOnParent([arguments]);
-

-
-
Spread operator

-
-
The spread operator allows an expression to be expanded in places where multiple arguments (for function calls) or multiple elements (for array literals) are expected.

-
-
Example: Today if you have an array and want to create a new array with the existing one being part of it, the array literal syntax is no longer sufficient and you have to fall back to imperative code, using a combination of push, splice, concat, etc. With spread syntax this becomes much more succinct:

-
-
var parts = ['shoulder', 'knees'];
-var lyrics = ['head', ...parts, 'and', 'toes'];

-
-
Similarly, the spread operator works with function calls:

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

-
-
{{PreviousNext("Web/JavaScript/Guide/Funktionen", "Web/JavaScript/Guide/Numbers_and_dates")}}

diff --git a/files/de/web/javascript/guide/control_flow_and_error_handling/index.html b/files/de/web/javascript/guide/control_flow_and_error_handling/index.html
new file mode 100644
index 0000000000..97dbba8b3e
--- /dev/null
+++ b/files/de/web/javascript/guide/control_flow_and_error_handling/index.html
@@ -0,0 +1,430 @@
+---
+title: Kontrollfluss und Fehlerbehandlung
+slug: Web/JavaScript/Guide/Kontrollfluss_und_Fehlerbehandlung
+tags:
+  - Beginner
+  - Guide
+  - JavaScript
+  - 'l10n:priority'
+translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling
+---
+
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Grammatik_und_Typen", "Web/JavaScript/Guide/Schleifen_und_Iterationen")}}

+
+
JavaScript unterstützt eine Menge von Anweisungen, speziell um Verlaufs-Anweisungen zu kontrollieren, welches eine großartige Methode ist um Interaktivität in deine Anwendung einzuarbeiten. Dieses Kapitel liefert dir ein Überblick über diese Anweisungen.

+
+
Die JavaScript Referenzen beinhalten umfassende Details über die Anweisungen in diesem Kapitel. Das Semikolon (;) als Zeichen wird genutzt um Anweisungen im JavaScript Code einzuteilen.

+
+
Jeder JavaScript Ausdruck ist auch eine Anweisung. Schau ebenfalls in Ausdrücke und Operatoren, um komplette Informationen über Ausdrücke zu erhalten.

+
+
Block-Anweisungen

+
+
Das einfachste Statement ist das Block-Statement, welches genutzt wird um Anweisungen zu gruppieren. Dieser Block wird von einem Paar geschweiften Klammer umschlossen:

+
+
{
+  statement_1;
+  statement_2;
+  .
+  .
+  .
+  statement_n;
+}
+

+
+
Beispiele

+
+
Block-Statements werden meistens mit Kontrollfluss-Statements genutzt (z. B. if, for, while).

+
+
while (x < 10) {
+  x++;
+}
+

+
+
Hier ist, { x++; } das Block-Statement.

+
+
Wichtig: JavaScript hat vor ECMAScript2015 keine Block-Scopes. Variablen, die in einem Block deklariert werden, gehören zu der Funktion oder dem Skript und das Beschreiben der Variablen führt dazu, dass diese über den Block hinaus verfügbar ist. In anderen Worten, Block-Statements definieren keinen Scope. Alleinstehende Blöcke in JavaScript können komplett andere Ergebnisse erzeugen als in C oder Java. Zum Beispiel:

+
+
var x = 1;
+{
+  var x = 2;
+}
+console.log(x); // outputs 2
+

+
+
Hier wird 2 ausgegeben, weil var x innerhalb des Blocks im gleichen Scope ist wie das var x vor dem Block. In C oder Java hätte der selbe Code 1 ausgegeben.

+
+
Seit ECMAScript2015 sind let und const Variablendeklarationen, die an den Block gebunden sind. Siehe dazu auch die Referenzseiten {{jsxref("Statements/let", "let")}} und {{jsxref("Statements/const", "const")}} an.

+
+
Bedingte Statements

+
+
Ein bedingtes Statement ist eine Menge von Befehlen, die ausgeführt werden, wenn eine Bedingung wahr ist. JavaScript unterstützt zwei bedingte Statements: if...else und switch.

+
+
if...else Anweisungen

+
+
if wird eingesetzt um Statements auszuführen, wenn eine logische Bedingung wahr wird. Mit der optionalen else-Klausel werden Statements ausgeführt, wenn die Bedingung falsch ist. Ein if-Block sieht folgendermaßen aus:

+
+
if (bedingung) {
+  statement_1;
+} else {
+  statement_2;
+}

+
+
Hier kann die Bedingung ein Ausdruck sein, der zu true oder false ausgewertet wird. Siehe Boolean nach, um zu erfahren, was zu true und was zu false ausgewertet wird. Wenn bedingung zu true ausgewertet wird, wird statement_1 ausgeführt. Andernfalls wird statement_2 ausgeführt. statement_1 und statement_2 können beliebige Statements sein, auch weitere if-Statements.

+
+
Man kann zudem Statements mit else if konstruieren, um mehrere Bedingungen sequentiell zu testen:

+
+
if (bedingung_1) {
+  statement_1;
+} else if (bedingung_2) {
+  statement_2;
+} else if (bedingung_n) {
+  statement_n;
+} else {
+  statement_last;
+}
+

+
+
Um mehrere Statements auszuführen, werden diese in Blockstatements gruppiert ({ ... }). Generell ist es guter Stil immer Block-Statements zu benutzen, besonders bei verschachtelten if-Statements.

+
+
if (bedingung) {
+  statement_1_runs_if_condition_is_true;
+  statement_2_runs_if_condition_is_true;
+} else {
+  statement_3_runs_if_condition_is_false;
+  statement_4_runs_if_condition_is_false;
+}
+

+
+
Es ist ratsam, keine einfachen Zuweisungen in Bedingungen zu verwenden, da die Zuordnung mit der Prüfung auf Gleichheit verwechselt werden kann, wenn man über den Code schaut. Verwenden Sie zum Beispiel den folgenden Code nicht:

+
+
if (x = y) {
+  /* statements here */
+}
+

+
+
Wenn eine Zuweisung in einer Bedingung benötigt wird, ist es verbreitet diese in weitere runde Klammeren zu schreiben. Zum Beispiel:

+
+
if ((x = y)) {
+  /* statements here */
+}
+

+
+
Falsy Werte

+
+
Die folgenden Werte werden zu false ausgewertet (auch bekannt als {{Glossary("Falsy")}} Werte):

+
+
    
+ 
  • false
    • 
+ 
  • undefined
    • 
+ 
  • null
    • 
+ 
  • 0
    • 
+ 
  • NaN
    • 
+ 
  • der leere string ("")
    • 
+

+
+
Alle anderen Werte, auch alle Objekte, werden zu true ausgewertet, wenn sie als Bedingung eingesetzt werden.

+
+
Es ist jedoch etwas verwirrend mit den primitiven boolean Werten true und false und den Werten des {{jsxref("Boolean")}}-Objektes, wie folgendes Beispiel zeigt:

+
+
var b = new Boolean(false);
+if (b)          // Die Bedingung wird zu true ausgewertet.
+if (b == true)  // Die Bedingung wird zu false ausgewertet.

+
+
Beispiel

+
+
Im folgenden Beispiel gibt die Funktion checkData true zurück, wenn die Anzahl der Zeichen in einem Text Objekt drei ist. Andernfalls wird ein Alert angezeigt, und false zurückgegeben.

+
+
function checkData() {
+  if (document.form1.threeChar.value.length == 3) {
+    return true;
+  } else {
+    alert("Enter exactly three characters. " +
+    document.form1.threeChar.value + " is not valid.");
+    return false;
+  }
+}
+

+
+
switch Statement

+
+
Ein switch Statement erlaubt es einen Ausdruck auszuwerten und das Resultat zu einem passenden Fall-Label (case-Label ) zuzuordnen. Wenn ein passendes Fall-Label gefunden wird, werden die zugehörigen Statements ausgeführt. Ein switch Statement sieht wie folgt aus:

+
+
switch (ausdruck) {
+  case label_1:
+    statements_1
+    [break;]
+  case label_2:
+    statements_2
+    [break;]
+    ...
+  default:
+    statements_def
+    [break;]
+}
+

+
+
Das Programm sucht als erstes nach eine case-Klausel mit einem Label, welches mit dem Wert des Ausgewerteten Ausdrucks übereinstimmt und gibt die Kontrolle zu dieser Klausel, was bedeutet, dass die zugehörigen Statements ausgeführt werden. Wenn kein passendes Label gefunden wird, sucht das Programm nach der optionalen default-Klausel und gibt die Kontrolle an diese, was bedeutet, dass die zugehörigen Statements ausgeführt werden. Wenn keine default-Klausel vorhanden ist, wird das switch beendet und das nächste Statement wird ausgeführt. Laut Konventionen ist die default-Klausel die letzte Klausel, das muss aber nicht immer so sein.

+
+
Das optionale break Statement, welches in jeder case-Klausel eingesetzt ist, sorgt daführ, dass nach der Klausel das switch Statement beendet wird und das Programm mit dem nachfolgenden Statement weiter macht. Wenn break weggelassen wird, wird das Programm mit dem nächsten Statement im switch weitermachen, was dazu führt, dass alle nachlogenden case-Klauseln und die optionale default-Klausel mit ausgeführt werden.

+
+
Beispiel

+
+
Im folgenden Beispiel wird der case "Bananas" ausgeführt, wenn fruittype zu "Bananas" ausgewertet wird. Die break Statements bewirken, dass das switch beendet wird und das nach switch stehende Statement ausgeführt wird. Wird break im case "Bananas" weggelassen, so wird der case "Cherries" mit ausgeführt.

+
+
switch (fruittype) {
+  case 'Oranges':
+    console.log('Oranges are $0.59 a pound.');
+    break;
+  case 'Apples':
+    console.log('Apples are $0.32 a pound.');
+    break;
+  case 'Bananas':
+    console.log('Bananas are $0.48 a pound.');
+    break;
+  case 'Cherries':
+    console.log('Cherries are $3.00 a pound.');
+    break;
+  case 'Mangoes':
+    console.log('Mangoes are $0.56 a pound.');
+    break;
+  case 'Papayas':
+    console.log('Mangoes and papayas are $2.79 a pound.');
+    break;
+  default:
+   console.log('Sorry, we are out of ' + fruittype + '.');
+}
+console.log("Is there anything else you'd like?");

+
+
Statements zur Fehler- bzw. Ausnahmebehandlung

+
+
Man kann mit dem throw Statement Fehler werfen (erzeugen) und diese mit dem Einsatz des try...catch Statements auffangen und verarbeiten.

+
+
+
+
Ausnahmetypen

+
+
Jedes Objekt in JavaScript kann als Fehler bzw. Ausnahme geworfen werden. Nicht alle Fehlerobjekte müssen auf die gleiche Art und Weise erstellt worden sein. Trotz des häufig Einsatzes von Zahlen oder Strings als Ausnahmen ist es deutlich effektiver die speziell für Ausnahmen erstellten Typen zu benutzen:

+
+
+
+
throw Statement

+
+
Das throw Statement wird benutzt, um eine Exception (Ausnahme / Fehler) zu werfen. Wenn eine Exception geworfen wird, so wird ein Ausdruck spezifiziert, welcher den Wert, welcher geworfen wird, spezifiziert:

+
+
throw ausdruck;
+

+
+
Man kann jeden Ausdruck werfen, nicht nur Ausdrücke eines bestimmten Typs. Der folgende Code wirft mehrere Ausnahmen verschiedenen Typs:

+
+
throw "Error2";   // String type
+throw 42;         // Number type
+throw true;       // Boolean type
+throw {toString: function() { return "I'm an object!"; } };
+

+
+
Notiz: Man kann ein Objekt beim Werfen einer Exception spezifizieren. Im catch Block können die Eigenschaften des Objektes referenziert werden.

+
+
// Erstellt ein Objekt vom Typ UserException
+function UserException (message){
+  this.message=message;
+  this.name="UserException";
+}
+
+// Macht die Konvertierung der Exception in einen schönen String, wenn die Exception
+// als String genutzt werden soll.
+// (z. B. in der Fehlerconsole)
+UserException.prototype.toString = function () {
+  return this.name + ': "' + this.message + '"';
+}
+
+// Erstellt eine Instanz der UserException und wirft diese
+throw new UserException("Value too high");

+
+
try...catch Statement

+
+
Das try...catch Statement markiert einen Block von Statements, welcher versucht wird auszuführen, und einen oder mehrere Blöcke welche auf geworfene Exceptions abfangen. Wenn eine Exception geworfen wird, fängt das try...catch Statements diese ab.

+
+
Das try...catch Statement besteht aus einem try Block, welcher ein oder mehrere Statements enthält, und null oder mehr catch Blöcken, welche Statements spezifizieren, welche eine im try Block geworfene Exception abfangen und behandeln. Das Statement versucht den try Block erfolgreich abzuarbeiten und wenn dieser nicht erfolgreich ist, wird die Kontrolle an den catch Block gegeben. Wenn ein Statement in dem try Block (oder eine im try Block aufgerufene Funktion) eine Exception wirft, wird der Kontrollfluss sofort an den catch Block übergeben. Wenn keine Exception im try Block geworfen wird, wird der catch Block übersprungen. Der optionale finally Block wird nach dem try und nach dem catch Block ausgeführt, bevor das auf das try...catch Statement folgenden Statement ausgeführt wird.

+
+
Das Folgende Beispiel benutzt ein try...catch Statement. Das Beispiel ruft eine Funktion auf, welche einen Monatsnamen aus einen Array zurückgibt, je nachdem, welcher Wert übergeben wurde. Wenn der übergebene Wert keine korrekte Monatsnummer ist (1 - 12), dann wird eine Exception mit dem Wert "InvalidMonthNo" geworfen und die Statements im catch Block setzen die monthName Variable auf unknown.

+
+
function getMonthName (mo) {
+  mo = mo-1; // Justiert Monatsnummer zu Arrayindex (1=Jan, 12=Dec)
+  var months = ["Jan","Feb","Mar","Apr","May","Jun","Jul",
+                "Aug","Sep","Oct","Nov","Dec"];
+  if (months[mo] != null) {
+    return months[mo];
+  } else {
+    throw "InvalidMonthNo"; // throw Schlüsselwort wird hier benutzt
+  }
+}
+
+try { // statements to try
+  monthName = getMonthName(myMonth); // Funktion die Exceptions werfen kann
+}
+catch (e) {
+  monthName = "unknown";
+  logMyErrors(e); // Gibt Exception Objekt weiter für Fehlerbehandlung
+}
+

+
+
Der catch Block

+
+
Man kann einen catch Block einsetzen, um alle Exceptions, die im try Block generiert werden, zu verarbeiten.

+
+
catch (catchID) {
+  statements
+}
+

+
+
Der catch Block spezifiziert einen Variable (catchID im voranstehenden Syntaxbeispiel), welcher den Wert des throw Statements enthält. Man kann über diese Variable Informationen über die geworfene Exception abfragen. JavaScript erstellt diese Variable, wenn der Programmfluss in den catch Block geht. Die Variable existiert nur in dem catch Block. Nach dem beenden des catch Blocks ist die Variable nicht mehr verfügbar.

+
+
Im nächsten Beispeil wird eine Exception geworfen. Wenn die Exception geworfen wird, wird der Programmfluss in den catch Block gegeben.

+
+
try {
+  throw "myException" // Erstellt eine Exception
+}
+catch (e) {
+  // Statements, die die Exception verarbeiten
+  logMyErrors(e) // Verarbeitet Exception Objekt zur Fehlerbehandlung
+}
+

+
+
Der finally Block

+
+
Der finally Block enthält Statements, welche nach dem try und catch Block ausgeführt werden, bevor das Statement nach dem try...catch Statement ausgeführt wird. Der finally Block wird ausgeführt, egal ob eine Exception geworfen wird oder nicht. Wenn eine Exception geworfen wird, wird der finally auch ausgeführt, wenn kein catch die Exception abfängt.

+
+
Man kann den finally Block benutzen, um Skripte fehlertoleranter zu gestalten. Zum Beispiel kann eine Ressource im finally Block geschlossen werden. Das Folgende Beispiel öffnet eine Datei und führt Statements aus, um die Datei zu benutzen (Serverseitiges JavaScript erlaubt Zugriffe auf Dateien). Wenn eine Exception geworfen wird, während die Datei geöffnet ist, sorgt der finally Block dafür, dass die Datei wieder geschlossen wird.

+
+
openMyFile();
+try {
+  writeMyFile(theData); //Das kann Exceptions werfen
+} catch(e) {
+  handleError(e); // Wenn eine Exception geworfen wird, wird sie hier verarbeitet
+} finally {
+  closeMyFile(); // Schließt immer die Ressource
+}
+

+
+
Wenn der finally Block einen Rückgabewert definiert, ist dieser der Rückgabewert des try-catch-finally Prozedur, unabhängig davon, ob return Statements im try und catch Block verwendet werden.

+
+
function f() {
+  try {
+    console.log(0);
+    throw "bogus";
+  } catch(e) {
+    console.log(1);
+    return true; // Dieses return Statement is überflüssig
+                 // weil im finally Block ebenfalls eins vorhanden ist
+    console.log(2); // wird niemals erreicht
+  } finally {
+    console.log(3);
+    return false; // überschreibt früheres return Statements
+    console.log(4); // wird niemals erreicht
+  }
+  // false wird jetzt zurückgegeben
+  console.log(5); // wird niemals erreicht
+}
+f(); // alerts 0, 1, 3; returns false
+

+
+
Das Überschreiben des Rückgabewertes durch den finally Block überschreibt auch geworfene Exceptions, wenn diese im catch geworfen werden.

+
+
function f() {
+  try {
+    throw "bogus";
+  } catch(e) {
+    console.log('caught inner "bogus"');
+    throw e; // Dieses throw Statement is überflüssig
+             // weil im finally Block ein return vorkommt
+  } finally {
+    return false; // Überschreibt das vorherige "throw"
+  }
+  // false wird zurückgegeben
+}
+
+try {
+  f();
+} catch(e) {
+  // Dieser bereich wird nie erreicht, weil
+  // die Exception durch das return im
+  // finally block überschrieben wird.
+  console.log('caught outer "bogus"');
+}
+
+// OUTPUT
+// caught inner "bogus"

+
+
Verschachtelte try...catch Statements

+
+
Man kann mehrere try...catch Statements ineinander verschachteln. Wenn ein inneres try...catch Statements keinen catch Block hat, wird ein äußeres try...catch Statement mit einem catch Block eine Exception auffangen. Mehr Informationen gibt es im Kapitel Verschachtelte try-Blöcke auf der try...catch Seite.

+
+
Nützliche Verwendung des Error Objekts

+
+
Abhängig vom der Art des Fehlers, möchte man die Möglichkeit haben einen Namen und eine Fehlernachricht zu vergeben. 'name' und 'message' Eigenschaften sind generell durch die Klasse Error (z. B. DOMException oder Error) unterstützt. Die 'message' Eigenschaft ist dabei eine String-Repräsentation des Fehlers, so wie sie bei der Konvertierung des Objektes zu einem String benötigt wird.

+
+
Wenn man beim Werfen von eigenen Exceptions die Vorteile dieser Eigenschaften nutzen möchte (wenn zum Beipsiel der catch Block nicht zwischen eigenen und System Exceptions unterscheidet), kann der Konstruktor von Error benutzt werden. Zum Beispiel:

+
+
function doSomethingErrorProne () {
+  if (ourCodeMakesAMistake()) {
+    throw (new Error('The message'));
+  } else {
+    doSomethingToGetAJavascriptError();
+  }
+}
+....
+try {
+  doSomethingErrorProne();
+}
+catch (e) {
+  console.log(e.name); // logs 'Error'
+  console.log(e.message); // logs 'The message' or a JavaScript error message)
+}

+
+
Promises

+
+
Mit ECMAScript 6 hat JavaScript die Unterstützung für {{jsxref("Promise")}} Objekte bekommen, welche zum Steuern von asynchronen Operationen genutzt wird.

+
+
Ein Promise ist in einem der folgenen Status:

+
+
    
+ 
  • pending: Anfangszustand, nicht erfolgreich oder fehlerhaft beendet.
    • 
+ 
  • fulfilled: Erfolgreiche Operation
    • 
+ 
  • rejected: Gescheiterte Operation.
    • 
+ 
  • settled: Das Promise ist entweder erfüllt oder abgelehnt, aber nicht pending.
    • 
+

+
+

+
+
Ein Bild mit XHR laden

+
+
Ein einfaches Beispiel für den Einsatz von Promise und XMLHttpRequest ist das Laden eines Bildes (Siehe MDN GitHub js-examples Repository; man kann es hier auch in Aktion sehen). Jeder Schritt ist Kommentiert und erlaubt es der Architektur des Promise und XHR zu folgen. Hier ist die unkommentierte Version, welche den Promise Ablauf zeigt, zu sehen, so dass man eine Idee davon bekommt.

+
+
function imgLoad(url) {
+  return new Promise(function(resolve, reject) {
+    var request = new XMLHttpRequest();
+    request.open('GET', url);
+    request.responseType = 'blob';
+    request.onload = function() {
+      if (request.status === 200) {
+        resolve(request.response);
+      } else {
+        reject(Error('Image didn\'t load successfully; error code:'
+                     + request.statusText));
+      }
+    };
+    request.onerror = function() {
+      reject(Error('There was a network error.'));
+    };
+    request.send();
+  });
+}

+
+
Für deteiliertere Informationen, kann man sich die {{jsxref("Promise")}} Referenz Seite und den Using Promises Guide anschauen.

+
+
{{PreviousNext("Web/JavaScript/Guide/Grammatik_und_Typen", "Web/JavaScript/Guide/Schleifen_und_Iterationen")}}

diff --git a/files/de/web/javascript/guide/details_of_the_object_model/index.html b/files/de/web/javascript/guide/details_of_the_object_model/index.html
new file mode 100644
index 0000000000..4d5e46ac26
--- /dev/null
+++ b/files/de/web/javascript/guide/details_of_the_object_model/index.html
@@ -0,0 +1,721 @@
+---
+title: Feinheiten des Objektmodells
+slug: Web/JavaScript/Guide/Feinheiten_des_Objektmodells
+tags:
+  - Guide
+  - Intermediate
+  - JavaScript
+  - Object
+  - 'l10n:priority'
+translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model
+---
+
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Mit_Objekten_arbeiten", "Web/JavaScript/Guide/Using_promises")}}

+
+
JavaScript ist eine Objektbasierte Programmiersprache, die auf Prototypen, statt auf Klassen basiert. Aufgrund dieser Tatsache ist es u. U. schwieriger zu erkennen, wie in JavaScript Objekthierarchien erstellt werden und die Vererbung von Eigenschaften und deren Werten erfolgt. Dieses Kapitel versucht diese Situation zu klären.

+
+
Dieses Kapitel geht davon aus, dass bereits Erfahrungen mit JavaScript vorhanden sind und man einfache Objekte mit Funktionen schon erstellt hat.

+
+
Klassenbasierte vs. Prototypbasierte Sprachen

+
+
Klassenbasierte, Objektorientierte Sprachen wie Java und C++ bauen auf dem Konzept von Klassen und Instanzen auf.

+
+
    
+ 
  • Eine Klasse definiert alle Eigenschaften (was Methoden und Felder in Java oder Members in C++ entspricht), welche eine Menge von Objekten charakterisiert. Eine Klasse ist ein abstrakter Bauplan für Objekte. Die Klasse repräsentiert den Aufbau ihrer Objekte. Zum Beispiel kann die Klasse Employee die Menge aller Mitarbeiter repräsentieren.
    • 
+ 
  • Eine Instanz ist auf der anderen Seite eine Instanz einer Klasse. Diese Instanz ist ein Mitglied der oben genannten Objektmenge. Zum Beispiel kann Victoria eine Instanz der Employee Klasse sein und somit einen individuellen Mitarbeiter repräsentieren. Eine Instanz hat genau die selben Eigenschaften wie die Elternklasse (keine mehr und keine weniger).
    • 
+

+
+
Eine Prototypbasierte Sprache wie JavaScript hat diese Unterscheidung nicht: es gibt einfach Objekte. Eine Prototypbasierte Sprache hat die Notation eines prototypischen Objektes, ein Objekt welches als Template genutzt wird und die initialen Eigenschaften für ein neues Objekt vorgibt. Jedes Objekt kann seine eigenen Eigenschaften spezifizieren, entweder beim Erstellen oder zur Laufzeit. Zudem kann jedes Objekt als Prototyp für ein anderes Objekt verwendet werden, was es auch dem zweiten Objekt erlaubt seine Eigenschaften mit dem ersten Objekt zu teilen.

+
+
Eine Klasse definieren

+
+
In einer Klassenbasierten Sprache definiert man Klassen in separaten Klassendefinitionen. In diesen Definitionen spezifiziert man spezielle Methoden, Konstruktoren genannt, um eine Instanz der Klasse zu erstellen. Eine Konstruktormethode spezifiziert Initialwerte für die Eigenschaften einer Instanz und kann andere Prozesse während der Erstellungszeit durchführen. Man benutzt den new Operator in Verbindung mit der Konstruktormethode, um Klasseninstanzen zu erstellen.

+
+
JavaScript folgt einem ähnlichen Modell, jedoch hat keine vom Konstruktor getrennte Klassendefinition. Stattdessen definiert man eine Konstruktorfunktion, um ein Objekt mit einer initialen Menge an Eigenschaften und Werten zu erstellen. Jede JavaScript Funktion kann als Konstruktor verwendet werden. Man benutzt den new Operator mit einer Konstruktorfunktion, um ein neues Objekt zu erstellen.

+
+
Unterklassen und Vererbung

+
+
In einer Klassenbasierten Sprache erstellt man eine Hierarchie von Klassen durch die Klassendefinition. In der Klassendefinition kann man spezifizieren, dass die neue Klasse eine Unterklasse der schon existierenden Klassen ist. Die Unterklasse erbt alle Eigenschaften von der Oberklasse und kann neue Eigenschaften hinzufügen oder vererbte verändern. Angenommen die Employee Klasse hat nur die Eigenschaften name und dept und Manager ist eine Unterklasse von Employee welche die Eigenschaft reports hinzufügt. In diesem Fall hat eine Instanz der Manager Klasse alle drei Eigenschaften: name, dept und reports.

+
+
JavaScript implementiert Vererbung so, dass man jedes Prototypobjekt mit jeder Konstruktorfunktion verbinden kann. So kann man das gleiche Employee — Manager Beispiel erstellen, jedoch mit einer leicht anderen Terminologie. Als erstes definiert man die Employee Konstruktorfunktion, welche die Eigenschaften name und dept spezifiziert. Als nächstes definiert man die Manager Konstruktorfunktion, ruft den Employee Konstruktor auf und spezifiziert die reports Eigenschaft. Letztlich weist man ein neues Objekt zu, welches von Employee.prototype stammt und als prototype für die Manager Konstruktorfunktion dient. Dann, wenn man einen neuen Manager erstellt, erbt dieser die Eigenschaften name und dept von dem Employee Objekt.

+
+
Hinzufügen und Entfernen von Eigenschaften

+
+
In Klassenbasierten Sprachen wird eine Klasse typischerweise zur Übersetzungszeit erstellt und Instanzen dieser Klasse werden zur Übersetzungs- oder Laufzeit instantiiert. Man kann die Anzahl oder die Typen von Eigenschaften einer Klasse nicht nach der Definition der Klasse verändern. In JavaScript kann man immer EIgenschaften während der Laufzeit zu Objekten hinzufügen oder von ihnen entfernen. Wenn eine Eigenschaft zu einem Objekt hinzugefügt wird, welches als Prototyp für andere Objekte fungiert, so bekommen die anderen Objekte auch diese neue Eigenschaft.

+
+
Zusammenfassung von Unterschieden

+
+
Die folgende Tabelle gibt eine kurze Zusammenfassung von einigen der Unterschiede. Der Rest des Kapitels beschreibt detailliert den Einsatz von JavaScript Konstruktoren und Prototypen, um eine Objekthierarchie zu erstellen und vergleicht dieses mit der Sprache Java.

+
+
+ 
+ 
+  
+   
+   
+  
+ 
+ 
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
Vergleich von Klassbasierten (Java) und Prototypebasierten (JavaScript) Objektsystemen
Klassenbasiert (Java)Prototypbasiert (JavaScript)
Klassen und Instanzen sind verschiedene Dinge.Alle Objekte können von anderen Objekt erben.
Definieren einer Klasse mit einer Klassendefinition; Instantiieren eine Klasse mit Konstruktormethoden.Definieren und Erstellen einer Menge von Objekten mit Konstruktorfunktionen.
Erstellt ein Objekt mit dem new Operator.Genauso.
Konstruiert eine Objekthierarchie mit Klassendefinitionen, um Unterklasse aus existierenden Klassen zu definieren.Konstruiert eine Objekthierarchie, indem ein Objekt als Prototyp mit einer Konstruktorfunktion verbunden werden.
Erbt Eigenschaften entlang der Klassenkette.Erbt Eigenschaften entlang der Prototypenkette.
Klassendefinitionen spezifizieren alle Eigenschaften von allen Klasseninstanzen. Man kann keine Eigenschaften dynamisch zur Laufzeit hinzufügen.Konstruktorfunktionen oder Prototypen spezifizieren eine initiale Menge von Eigenschaften. Man kann Eigenschaften dynamisch zu individuellen Objekten hinzufügen oder entfernen oder zu einer Menge von Objekten.

+
+
Das Mitarbeiter-Beispiel

+
+
Das restliche Kapitel benutzt die Mitarbeiterhierarchie, die in folgender Grafik dargestellt ist.

+
+

+

+
Eine einfache Objekthierarchie mit den folgenden Objekten:

+
+

+

+
+

+
    
+ 
  • Employee (Mitarbeiter) hat die Eigenschafte name (die als Initialwert einen leerer String hat) und dept (Abteilung) (die als Initialwert "general" hat).
    • 
+ 
  • Manager basiert auf Employee. Er fügt die Eigenschaft reports (Berichte) hinzu (die als Initialwert ein leeres Array hat und für ein Array von Employees vorgesehen ist).
    • 
+ 
  • WorkerBee (Arbeitsbiene) basiert ebenfalls auf Employee. Er fügt die Eigenschaft projects hinzu (die als Initialwert ein leeres Array hat und für ein Array von Strings vorgesehen ist).
    • 
+ 
  • SalesPerson (Verkäufer) basiert auf WorkerBee. Er fügt die Eigenschaft quota (Pensum) hinzu (die als Initialwert 100 hat). zudem überschreibt er die dept Eigenschaft mit dem Wert "sales", um anzudeuten, dass alle Verkäufer in der gleichen Abteilung sind.
    • 
+ 
  • Engineer (Ingenieur) basiert auf WorkerBee. Er fügt die Eigenschaft machine (Maschine) hinzu (die als Initialwert einen leeren String hat) und überschreibt die Eigenschaft dept mit dem Wert "engineering".
    • 
+

+

+

+
+
Erstellen der Hierarchie

+
+
Es gibt viele Wege, um angemessene Konstruktorfunktionen für die Mitarbeiterhierarchie zu implementieren. Welchen man auswählt hängt stark davon ab, was in der Anwendung erreicht werden soll.

+
+
Dieser Abschnitt zeigt, wie man eine sehr einfache (und vergleichbar unflexible) Definition benutzen kann, um zu demonstrieren, wie die Vererbung funktioniert. In dieser Definition ist es nicht möglich jeden Eigenschaftswert zu spezifizieren, wenn ein Objekt erstellt wird. Die neu erstellten Objekte bekommen nur die Initialwerte und können später verändert werden.

+
+
In einer echten Anwendung würde man Konstruktoren so definieren, dass man diesen Eigenschaftswerte zur Erstellzeit übergeben kann (siehe Flexiblere Konstruktoren für mehr Informationen). Für den Anfang zeigen diese Definitionen wie die Vererbung funktioniert.

+
+
Die folgenden Java und JavaScript Employee Definitionen sind gleich. Der einzige Unterschied ist, dass in Java für jede Eigenschaft ein Typ definiert sein muss, in JavaScript jedoch nicht (das liegt daran, dass Java eine stark typisierte Sprache ist, während JavaScript eine schwach typisierte Sprache ist).

+
+

+
JavaScript

+
+
function Employee() {
+  this.name = '';
+  this.dept = 'general';
+}
+

+
+


+ Java

+
+
public class Employee {
+   public String name = "";
+   public String dept = "general";
+}
+

+

+
+
Die Manager und WorkerBee Definitionen zeigen die Unterschiede bei der Spezifizierung eines Oberobjektes in der Vererbungskette. In JavaScript fügt man eine Prototypinstanz der Eigenschaft prototype der Konstruktorfunktion hinzu. Man kann dieses zu jedem Zeitpunkt nach der Definition des Konstruktors machen. In Java spezifiziert man die Oberklasse in der Klassendefinition. Man kann die Oberklasse nicht außerhalb der Klassendefinition ändern.

+
+

+
JavaScript

+
+
function Manager() {
+  Employee.call(this);
+  this.reports = [];
+}
+Manager.prototype =
+    Object.create(Employee.prototype);
+
+function WorkerBee() {
+  Employee.call(this);
+  this.projects = [];
+}
+WorkerBee.prototype =
+    Object.create(Employee.prototype);
+

+
+


+ Java

+
+
public class Manager extends Employee {
+   public Employee[] reports =
+       new Employee[0];
+}
+
+
+
+public class WorkerBee extends Employee {
+   public String[] projects = new String[0];
+}
+
+
+

+

+
+
Die Engineer und SalesPerson Definition erstellt Objekte, welche von WorkerBee und somit auch von Employee abstammen. Ein Objekt von diesen Typen hat alle Eigenschaften der vorherigen Objekte in der Vererbungskette. Zudem überschreiben diese Definitionen den Wert der geerbten dept Eigenschaft mit einem neuen Wert für diese Objekte.

+
+

+
JavaScript

+
+
function SalesPerson() {
+   WorkerBee.call(this);
+   this.dept = 'sales';
+   this.quota = 100;
+}
+SalesPerson.prototype =
+    Object.create(WorkerBee.prototype);
+
+function Engineer() {
+   WorkerBee.call(this);
+   this.dept = 'engineering';
+   this.machine = '';
+}
+Engineer.prototype =
+    Object.create(WorkerBee.prototype);
+

+
+


+ Java

+
+
public class SalesPerson extends WorkerBee {
+   public String dept = "sales";
+   public double quota = 100.0;
+}
+
+
+public class Engineer extends WorkerBee {
+   public String dept = "engineering";
+   public String machine = "";
+}
+
+

+

+
+
Mit diesen Definitionen kann man Instanzen dieser Objekte mit ihren Initialwerten und Eigenschaften erstellen. Die nächste Grafik zeigt diese JavaScript Definitionen, um neue Objekte zu erzeugen und die Werte der neuen Objekte.

+
+

+
Hinweis: Der Term Instanz hat eine spezielle technische Bedeutung in Klassenbasierten Sprachen. In diesen Sprachen ist eine Instanz eine individuelle Instanz von einer Klasse und ist fundamental anders als eine Klasse. In JavaScript gibt es diese technische Bedeutung nicht, weil JavaScript nicht zwischen Klassen und Instanzen unterscheidet. Immer wenn über JavaScript Instanzen gesprochen wird, ist das rein informell und bedeutet, dass ein Objekte mit einer Konstruktorfunktion erstellt wurde. So kann man in diesem Beispiel sagen, dass jane eine Instanz von Engineer ist. Ebenso haben die Terme Eltern, Kind, Vorfahre und Nachfahre keine formale Bedeutung in JavaScript; Man kann diese benutzen, um deutlich zu machen wo sich ein Objekt in der Prototypenkette befindet.

+

+
+
Objekte mit der einfachen Definition erstellen

+
+

+
Objekthierarchie

+
+
Die folgende Hierarchie wird mit dem Code auf der rechten Seite erstellt.

+
+

+
+
Individuelle Objekte = Jim, Sally, Mark, Fred, Jane, etc.

+ "Instanzen" erstellt vom Konstruktor

+
+
var jim = new Employee;
+// Parentheses can be omitted if the
+// constructor takes no arguments.
+// jim.name is ''
+// jim.dept is 'general'
+
+var sally = new Manager;
+// sally.name is ''
+// sally.dept is 'general'
+// sally.reports is []
+
+var mark = new WorkerBee;
+// mark.name is ''
+// mark.dept is 'general'
+// mark.projects is []
+
+var fred = new SalesPerson;
+// fred.name is ''
+// fred.dept is 'sales'
+// fred.projects is []
+// fred.quota is 100
+
+var jane = new Engineer;
+// jane.name is ''
+// jane.dept is 'engineering'
+// jane.projects is []
+// jane.machine is ''
+

+

+
+
Objekteigenschaften

+
+
Dieser Abschnitt diskutiert, wie Objekte EIgenschaften von anderen Objekten in der Prototypenkette erben und was passiert, wenn eine Eigenschaft währende der Laufzeit hinzugefügt wird.

+
+
Eigenschaften vererben

+
+
Es wird vorausgesetzt, dass das Objekt mark als WorkerBee mit dem folgenden Statement erstellt wurde:

+
+
var mark = new WorkerBee;
+

+
+
Wenn JavaScript den new Operator sieht, erstellt es ein neues generisches Objekt und setzt implizit den Wert der internen Eigenschaft [[Prototype]] auf den Wert WorkerBee.prototype und setzt die this Referenz in der WorkerBee Konstruktorfunktion auf das neu erstellte Objekt. Die interne [[Prototype]] Eigenschaft legt die Prototypenkette fest, die zum Zurückgeben von Eigenschaftswerten benutzt wird. Sobald diese Eigenschaften gesetzt sind, gibt JavaScript das neue Objekt zurück und das Zuweisungsstatement setzt die Variable mark mit diesem Objekt.

+
+
Dieser Prozess fügt keine Werte in das mark-Objekt (lokale Werte) für Eigenschaften, die mark von der Prototypenkette erbt. Wenn man nach einem Wert einer Eigenschaft fragt, prüft JavaScript erst, ob der Wert in dem Objekt existiert. Wenn dies der Fall ist, wird dieser zurückgegeben. Wenn kein lokaler Wert vorhanden ist, prüft JavaScript die Prototypenkette (über die interne [[Prototype]] Eigenschaft). Wenn ein Objekt in der Prototypenkette einen Wert für die Eigenschaft hat, wird diese zurückgegeben. Wenn keine solche Eigenschaft gefunden wird, geht JavaScript davon aus, dass das Objekt keine solche Eigenschaft hat. Dementsprechend hat das mark Objekt folgende Eigenschaften und Werte:

+
+
mark.name = '';
+mark.dept = 'general';
+mark.projects = [];
+

+
+
Das mark Objekt hat lokale Werte für die name und dept Eigenschaft über den Employee Konstruktor zugewiesen bekommen. Es wurde ein Wert für die Eigenschaft projects vom WorkerBee Konstruktor zugewiesen. Dieses gibt die Vererbung von Eigenschaften und Werten in JavaScript her. Einige Feinheiten dieses Prozesses werden in Eigenschaftsvererbung erneut besuchen behandelt.

+
+
Weil diese Konstruktoren keine instanzspezifischen Werte bereitstellen können, sind diese Informationen generisch. Die Eigenschaftswerte sind die Standardwerte, die bei der Erstellung aller mit WorkerBee erstellten Objekt genutzt werden. Man kann natürlich die Werte jeder Eigenschaft ändern. So kann man spezifische Informationen für mark wie folgt vergeben:

+
+
mark.name = 'Doe, Mark';
+mark.dept = 'admin';
+mark.projects = ['navigator'];

+
+
Eigenschaften hinzufügen

+
+
In JavaScript kann man zu jedem Objekt zur Laufzeit Eigenschaften hinzufügen. Man ist nicht nur auf die unterstützten Eigenschaften der Konstruktorfunktion angewiesen. Um eine Eigenschaft spezifisch zu einem einfachen Objekt hinzuzufügen, kann man diese wie folgt dem Objekt zuweisen:

+
+
mark.bonus = 3000;
+

+
+
Jetzt hat das mark Objekt eine bonus Eigenschaft, aber kein anderer WorkerBee hat diese Eigenschaft.

+
+
Wenn man eine neue Eigenschaft zu einem Objekt hinzufügt, welches als Prototyp für eine Konstruktorfunktion benutzt wird, fügt man die Eigenschaft zu allen Objekten hinzu, die Eigenschaften von diesem Prototypen erben. Zum Beispiel kann man eine specialty Eigenschaft zu allen employees mit dem folgenden Statement hinzufügen:

+
+
Employee.prototype.specialty = 'none';
+

+
+
Nach der Ausführung dieses Statements durch JavaScript, hat das mark Objekt auch die specialty Eigenschaft mit dem Wert "none". Die folgende Grafik zeigt den Effekt des Hinzufügens dieser Eigenschaft zum Employee Prototyp und das Überschreiben des Engineer Prototypen.

+
+


+ Eigenschaften hinzufügen

+
+
Flexiblere Konstruktoren

+
+
Mit den bisher gezeigten Konstruktorfunktionen kann man beim Erstellen einer Instanz keine Eigenschaftswerte angeben. Wie bei Java kann man Konstruktoren Argumente zum Initialisieren von Eigenschaftswerten für Instanzen übergeben. Die folgende Abbildung zeigt eine Möglichkeit, dies zu tun.

+
+


+ Spezifizieren von Eigenschaften in einem Konstruktor, Teil 1

+
+
Die folgende Tabelle zeigt die Java und JavaScript Definitionen für diese Objekte.

+
+

+
JavaScript

+
+
Java

+

+
+

+
function Employee(name, dept) {
+  this.name = name || '';
+  this.dept = dept || 'general';
+}
+

+
+
public class Employee {
+   public String name;
+   public String dept;
+   public Employee () {
+      this("", "general");
+   }
+   public Employee (String name) {
+      this(name, "general");
+   }
+   public Employee (String name, String dept) {
+      this.name = name;
+      this.dept = dept;
+   }
+}
+

+

+
+

+
function WorkerBee(projs) {
+
+ this.projects = projs || [];
+}
+WorkerBee.prototype = new Employee;
+

+
+
public class WorkerBee extends Employee {
+   public String[] projects;
+   public WorkerBee () {
+      this(new String[0]);
+   }
+   public WorkerBee (String[] projs) {
+      projects = projs;
+   }
+}
+

+

+
+

+
+function Engineer(mach) {
+   this.dept = 'engineering';
+   this.machine = mach || '';
+}
+Engineer.prototype = new WorkerBee;
+

+
+
public class Engineer extends WorkerBee {
+   public String machine;
+   public Engineer () {
+      dept = "engineering";
+      machine = "";
+   }
+   public Engineer (String mach) {
+      dept = "engineering";
+      machine = mach;
+   }
+}
+

+

+
+
Diese JavaScript Definitionen benutzen eine spezielle Syntax für das Setzen von Standardwerten:

+
+
this.name = name || '';
+

+
+
Der logische ODER Operator (||) von JavaScript wertet das erste Argument aus. Wenn das Argument zu true konvertiert wird, gibt der Operator dieses zurück. Andernfalls wird der Wert des zweiten Arguments zurückgegeben. Demnach prüft diese Zeile Code, ob name einen nützlichen Wert für die name Eigenschaft hat. Wenn das der Fall ist, wird this.name auf diesen Wert gesetzt. Andernfalls wird this.name auf den leeren String gesetzt. Dieses Kapitel nutzt diese Syntax aus Gründen der Kürze; es kann jedoch auf den ersten Blick verwirrend sein.

+
+

+
Hinweis: Das kann möglicherweise nicht wie erwartet funktionieren, wenn der Konstruktorfunktion Argumente übergeben werden, welche zu false konvertiert werden (wie 0 (null) und der leere String ("")). In diesen Fällen wird der Standardwert benutzt.

+

+
+
Mit dieser Definition, kann man beim Erstellen einer Objektinstanz spezifische Werte für die lokal definierten Eigenschaften benutzen. Man kann das folgende Statement nutzen, um einen neuen Engineer zu erstellen:

+
+
var jane = new Engineer('belau');
+

+
+
Jane's Eigenschaften sind jetzt:

+
+
jane.name == '';
+jane.dept == 'engineering';
+jane.projects == [];
+jane.machine == 'belau';
+

+
+
Zu beachten ist, dass man mit diesen Definitionen keinen Initialwert für vererbte Eigenschaft wie name spezifizieren kann. Wenn man einen Initialwert für vererbe Eigenschaften in JavaScript spezifizieren möchte, muss man mehr Code zum Konstruktor hinzufügen.

+
+
Bisher hat die Konstruktorfunktion ein generisches Objekt erstellt und dann lokale Eigenschaften und Werte für das neue Objekt angegeben. Man kann den Konstruktor weitere Eigenschaften hinzufügen lassen, indem Sie die Konstruktorfunktion für ein Objekt in der Prototypkette direkt aufrufen. Die folgende Abbildung zeigt diese neuen Definitionen.

+
+


+ Spezifizieren von Eigenschaften in einem Konstruktor, Teil 2

+
+
Sehen wir uns eine dieser Definitionen genauer an. Hier ist die neue Definition für den Engineer-Konstruktor:

+
+
function Engineer(name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, 'engineering', projs);
+  this.machine = mach || '';
+}
+

+
+
Angenommen, man erstellt ein neues Engineer-Objekt wie folgt:

+
+
var jane = new Engineer('Doe, Jane', ['navigator', 'javascript'], 'belau');
+

+
+
JavaScript folgt folgenden Schritten:

+
+
    
+ 
  1. Der new Operator erstellt ein generisches Objekt und setzt die __proto__ EIgenschaft auf Engineer.prototype.
    2. 
+ 
  2. Der new Operator übergibt das neue Objekt dem Engineer Konstruktor als Wert des this Schlüsselwortes.
    3. 
+ 
  3. Der Konstruktor erstellt eine neue Eigenschaft namens base für dieses Objekt und weist dieser den Wert des WorkerBee Konstruktors zu. Das macht den WorkerBee Konstruktor zu einer Methode des Engineer Objektes. Der Name der base Eigenschaft ist nicht festgelegt. Man kann jeden legalen Eigenschaftsnamen nutzen; base erinnert einfach an den Zweck.
    4. 
+ 
  4. Der Konstruktor ruft die base Methode auf, übergibt als Argumente zwei der Argumente des Konstruktors ("Doe, Jane" und ["navigator", "javascript"]) und zudem den String "engineering". Der explizite Einsatz von "engineering" im Konstruktor zeigt, dass alle Engineer Objekte den selben Wert für dei geerbte dept Eigenschaft haben und dieser Wert den vererbten Wert von Employee überschreibt.
    5. 
+ 
  5. Weil base eine Methode von Engineer ist, weshalb JavaScrip beim Aufruf von base das Schlüsselwort this an das erstellte Objekt aus Schritt 1 bindet. Somit übergibt die WorkerBee Funktion die "Doe, Jane" und "engineering" Argumente zu der Employee Konstruktorfunktion. Nach der Rückgabe der Employee Konstruktorfunktion verwendet die WorkerBee Funktion das restliche Argument, um die projects Eigenschaft zu setzen.
    6. 
+ 
  6. Nach der Rückgabe der base Methode initialisiert der Engineer Konstruktor die Objekteigenschaft machine mit "belau".
    7. 
+ 
  7. Nach der Rückgabe des Konstruktors weist JavaScript das neue Objekte, der jane Variablen zu.
    8. 
+

+
+
Man kann denken, dass man, nachdem der WorkerBee-Konstruktor innerhalb des Engineer-Konstruktors aufgerufen wird, die Vererbung für das Engineer-Objekte entsprechend eingerichtet hat. Das ist nicht der Fall. Der Aufruf des WorkerBee Konstruktors stellt sicher, dass ein Engineer Objekt mit den Eigenschaften beginnt, die in allen aufgerufenen Konstruktorfunktionen angegeben sind. Wenn jedoch später eine Eigenschaft zum Employee oder WorkerBee Prototyp hinzugefügt wird, wird diese Eigenschaft nicht von Engineer Objekt geerbt. Nimmt man zum Beispiel folgende Statements an:

+
+
function Engineer(name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, 'engineering', projs);
+  this.machine = mach || '';
+}
+var jane = new Engineer('Doe, Jane', ['navigator', 'javascript'], 'belau');
+Employee.prototype.specialty = 'none';
+

+
+
Das jane Objekt erbt nicht die specialty Eigenschaft. Man muss explizit den Prototypen einstellen, um dynamische Vererbung sicherzustellen. Nimmt man stattdessen folgende Statements an:

+
+
function Engineer(name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, 'engineering', projs);
+  this.machine = mach || '';
+}
+Engineer.prototype = new WorkerBee;
+var jane = new Engineer('Doe, Jane', ['navigator', 'javascript'], 'belau');
+Employee.prototype.specialty = 'none';
+

+
+
Jetzt ist der Wert der specialty Eigenschaft des jane Objektes "none".

+
+
Ein anderer Weg wür Vererbung ist der Einsatz der call() / apply() Methoden. Die folgenden Beispiele sind äquivalent:

+
+

+
function Engineer(name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, 'engineering', projs);
+  this.machine = mach || '';
+}
+

+
+
function Engineer(name, projs, mach) {
+  WorkerBee.call(this, name, 'engineering', projs);
+  this.machine = mach || '';
+}
+

+

+
+
Der Einsatz von javascript call() Methode ergibt ein sauberere Implementierung, weil base nicht mehr benötigt wird.

+
+
Eigenschaftsvererbung erneut besuchen

+
+
Im vorangegangenen Abschnitten wurde beschrieben, wie JavaScript Konstruktoren und Prototypen Hierarchien und Vererbung bereitstellt. Dieser Abschnitt diskutiert einige Feinheiten, die in der vorherigen Diskussion nicht unbedingt ersichtlich waren.

+
+
Lokale versus vererbte Werte

+
+
Wenn man auf eine Objekteigenschaft zugreift, führt JavaScript diese Schritte, wie vorhin in dem Kapitel beschrieben, durch:

+
+
    
+ 
  1. Prüft, ob der Wert lokal existiert. Ist das der Fall, wird er zurückgegeben.
    2. 
+ 
  2. Wenn kein lokaler Wert vorhanden ist, wird die Prototypenkette (über die __proto__ Eigenschaft) geprüft.
    3. 
+ 
  3. Wenn ein Objekt in der Prototypenkette einen Wert für die spezifizierte Eigenschaft hat, wird dieser zurückgegeben.
    4. 
+ 
  4. Wenn keine solche Eigenschaft gefunden wird, hat das Objekt diese Eigenschaft nicht.
    5. 
+

+
+
Das Resultat dieser Schritte hängt davon ab, wie Dinge im Code definiert sind. Das originale Beispiel hat diese Definition:

+
+
function Employee() {
+  this.name = '';
+  this.dept = 'general';
+}
+
+function WorkerBee() {
+  this.projects = [];
+}
+WorkerBee.prototype = new Employee;
+

+
+
Nimmt man mit diesen Definitionen an, man erstellt amy als eine Instanz von WorkerBee mit folgendem Statement:

+
+
var amy = new WorkerBee;
+

+
+
Das amy Objekt hat eine lokale Eigenschaft, projects. Die Werte der name und dept Eigenschaften sind nicht lokal in amy und werden über die Objekteigenschaft __proto__ von amy erreicht. Deshalb hat amy diese Eigenschaftswerte:

+
+
amy.name == '';
+amy.dept == 'general';
+amy.projects == [];
+

+
+
Nimmt man jetzt an, man ändert den Wert der name Eigenschaft in dem Employee Prototyp:

+
+
Employee.prototype.name = 'Unknown';
+

+
+
Auf den ersten Blick erwartet man, dass der neue Wert an alle Instanzen von Employee propagiert wird. Jedoch ist das falsch.

+
+
Wenn man irgendeine Instanz des Employee Objektes erstellt, bekommt die Instanz einen lokalen Wert für die name Eigenschaft (der leere String). Das bedeutet, wenn man den WorkerBee Prototyp mit einem neuen Employee Objekt einstellt, dass WorkerBee.prototype einen lokalen Wert für die name Eigenschaft hat. Wenn demnach JavaScript nach der name Eigenschaft im amy Objekt sucht (eine Instanz von WorkerBee), wird der lokale Wert der Eigenschaft WorkerBee.prototype gefunden. Demnach wird nicht tiefer in der Kette in Employee.prototype gesucht.

+
+
Wenn man den Wert einer Objekteigenschaft zur Laufzeit ändert möchte und den neuen Wert für alle Nachkommenschaften dieses Objektes haben möchte, kann man die Eigenschaft nicht in der Konstruktorfunktion des Objektes definieren. Stattdessen fügt man sie zu dem Konstruktor assoziierten Prototyp hinzu. Angenommen man ändert zum Beispiel deb vorherigen Code wie folgt:

+
+
function Employee() {
+  this.dept = 'general';    // Note that this.name (a local variable) does not appear here
+}
+Employee.prototype.name = '';    // A single copy
+
+function WorkerBee() {
+  this.projects = [];
+}
+WorkerBee.prototype = new Employee;
+
+var amy = new WorkerBee;
+
+Employee.prototype.name = 'Unknown';
+

+
+
In diesem Fall wird die name Eigenschaft von amy "Unknown".

+
+
Das Beispiel zeigt, dass wenn man Standardwerte für Objekteigenschaften haben möchte und zudem dass diese zur Laufzeit geändert werden können, muss man die Eigenschaft im Konstruktorprototypen setzen und nicht in der Konstruktorfunktion.

+
+
Instanzbeziehungen prüfen

+
+
Das Nachgucken von Eigenschaften in JavaScript prüft erst die eigenen Eigenschaften und wenn die Eigenschaft dort nicht ist die Eigenschaften der speziellen Eigenschaft __proto__. Das setzt sich rekursiv fort; der Prozess wird "nachschlagen in der Prototypenkette" genannt.

+
+
Die spezielle Eigenschaft __proto__ wird beim erstellen des Objektes gesetzt; sie wird auf den Wert der prototype Eigenschaft des Konstruktors gesetzt. Deshalb erstellt der Ausdruck new Foo() ein Objekt mit __proto__ == Foo.prototype. Folglich ändert die Änderung der Foo.prototype Eigenschaft alle Nachschlage Prozesse für alle Objekte, die mit new Foo() erstellt wurden.

+
+
Alle Objekte haben eine __proto__ Objekteigenschaft (außer Object); Alle Funktionen haben eine prototype Objekteigenschaft. So können Objekte über 'Prototypenvererbung' mit anderen Objekten verbunden werden. Man kann auf Vererbung testen, indem __proto__ eines Objekts mit einer prototype Objekt einer Funktion verglichen wird. JavaScript hat dafür eine Kurzschreibweise: der instanceof Operator prüft ein Objekt gegen eine Funktion und gibt true zurück, wenn das Objekt von dem Funktionsprototyp erbt. Zum Beispiel:

+
+
var f = new Foo();
+var isTrue = (f instanceof Foo);

+
+
Für ein detailierteres Beispiel nehmen wir an, dass wir die gleichen Definition wie in Eigenschaften vererben haben. Ein Engineer wird wie folgt erstellt:

+
+
var chris = new Engineer('Pigman, Chris', ['jsd'], 'fiji');
+

+
+
Mit diesem Objekt, sind alle folgenden Statements true:

+
+
chris.__proto__ == Engineer.prototype;
+chris.__proto__.__proto__ == WorkerBee.prototype;
+chris.__proto__.__proto__.__proto__ == Employee.prototype;
+chris.__proto__.__proto__.__proto__.__proto__ == Object.prototype;
+chris.__proto__.__proto__.__proto__.__proto__.__proto__ == null;
+

+
+
Damit kann man eine instanceOf Funktion wie folgt schreiben:

+
+
function instanceOf(object, constructor) {
+   object = object.__proto__;
+   while (object != null) {
+      if (object == constructor.prototype)
+         return true;
+      if (typeof object == 'xml') {
+        return constructor.prototype == XML.prototype;
+      }
+      object = object.__proto__;
+   }
+   return false;
+}
+

+
+
Hinweis: Die obige Implementierung überprüft den Typ des Objekts gegen "xml", um eine Eigenart der Darstellung von XML-Objekten in neueren JavaScript-Versionen zu umgehen. die wesentlichen Details sind in {{bug(634150)}}, beschrieben.

+
+
Der Einsatz der oben definierten instanceOf Funktion führt bei folgenden Ausdrücken zu true:

+
+
instanceOf(chris, Engineer)
+instanceOf(chris, WorkerBee)
+instanceOf(chris, Employee)
+instanceOf(chris, Object)
+

+
+
Jedoch ist der folgende Ausdruck false:

+
+
instanceOf(chris, SalesPerson)
+

+
+
Globale Informationen in Konstruktoren

+
+
Wenn man einen Konstruktor erstellt, muss man vorsichtig sein, wenn man globale Informationen im Konstruktor einstellt. Nimmt man zum Beispiel an, man möchte eine eindeutige ID, die automatisch für jeden neuen employee zugewiesen wird, kann man die folgende Definition für Employee benutzen:

+
+
var idCounter = 1;
+
+function Employee(name, dept) {
+   this.name = name || '';
+   this.dept = dept || 'general';
+   this.id = idCounter++;
+}
+

+
+
Wenn man mit dieser Definition ein neuen Employee erstellt, weist der Konstruktor die nächste ID in der Sequenz zu und inkrementiert dann den globalen ID-Zähler. Wenn die nächsten Statemants die folgenden sind, so ist victoria.id == 1 und harry.id == 2:

+
+
var victoria = new Employee('Pigbert, Victoria', 'pubs');
+var harry = new Employee('Tschopik, Harry', 'sales');
+

+
+
Auf den ersten Blick ist das super. Jedoch wird idCounter jedes mal, wenn ein Employee erstellt wird, wofür auch immer, inkrementiert. Wenn man eine Employee Hierarchie wie im Kapitel oben gezeigt, so wird der Employee Konstruktor für jedes einstellen des Prototypen aufgerufen. Angenommen man hat den folgenden Code:

+
+
var idCounter = 1;
+
+function Employee(name, dept) {
+   this.name = name || '';
+   this.dept = dept || 'general';
+   this.id = idCounter++;
+}
+
+function Manager(name, dept, reports) {...}
+Manager.prototype = new Employee;
+
+function WorkerBee(name, dept, projs) {...}
+WorkerBee.prototype = new Employee;
+
+function Engineer(name, projs, mach) {...}
+Engineer.prototype = new WorkerBee;
+
+function SalesPerson(name, projs, quota) {...}
+SalesPerson.prototype = new WorkerBee;
+
+var mac = new Engineer('Wood, Mac');
+

+
+
Angenommen die Definitionen lassen hier die base Eigenschaft weg und rufen den Konstruktor oberhalb in der Prototypenkette auf. In diesem Fall, bekommt das mac Objekt die id 5.

+
+
Abhängig von der Anwendung ist es sinnvoll oder auch nicht, dass der Zähler an diesen Stellen extra hochzählt. Wenn man an dem exakten Wert des Zählers interessiert ist, ist eine mögliche Lösung den folgenden Konstruktor zu nutzen:

+
+
function Employee(name, dept) {
+   this.name = name || '';
+   this.dept = dept || 'general';
+   if (name)
+      this.id = idCounter++;
+}
+

+
+
Wenn eine Instanz von Employee erstellt wird, der als Prototyp genutzt wird, übergibt man keine Argumente an den Konstruktor. Benutzt man diese Definition des Konstruktors, wird keine id vergeben und der Zäher nicht aktualisiert, wenn dem Konstruktor keine Argumente übergeben werden. Daraus folgt, dass man einem Employee einen Namen geben muss, damit er eine id erhält. In diesem Beispiel ist mac.id == 1.

+
+
Alternativ kann man WorkerBee eine Kopie des Employee Prototypenobjektes zuweisen:

+
+
WorkerBee.prototype = Object.create(Employee.prototype);
+// instead of WorkerBee.prototype = new Employee
+

+
+
Keine Mehrfachvererbung

+
+
Einige objektorientierte SPrachen erlauben Mehrfachvererbung. Das bedeutet, dass ein Objekt die Eigenschaften und Werte von mehreren Elternobjekte erben kann. JavaScript unterstützt keine Mehrfachvererbung.

+
+
Vererbung von Eigenschafteswerten funktioniert zu JavaScripts Laufzeit durch das Suchen in der Prototypenkette eines Objektes. Weil ein Objekt ein einzigen Prototypen hat, kann JavaScript nicht dynamisch von mehr als einer Prototypenkette erben.

+
+
In JavaScript kann eine Konstruktorfunkton mehrere andere Konstruktorfunktionen in sich aufrufen. Das gibt die Illusion von Mehrfachvererbung. Zum Beispiel die folgenden Statements:

+
+
function Hobbyist(hobby) {
+   this.hobby = hobby || 'scuba';
+}
+
+function Engineer(name, projs, mach, hobby) {
+   this.base1 = WorkerBee;
+   this.base1(name, 'engineering', projs);
+   this.base2 = Hobbyist;
+   this.base2(hobby);
+   this.machine = mach || '';
+}
+Engineer.prototype = new WorkerBee;
+
+var dennis = new Engineer('Doe, Dennis', ['collabra'], 'hugo');
+

+
+
Vorausgesetzt wird, die Definition von WorkerBee früher in diesem Kapitel. In diesem Fall hat das dennis Objekt die folgenden Eigenschaften:

+
+
dennis.name == 'Doe, Dennis';
+dennis.dept == 'engineering';
+dennis.projects == ['collabra'];
+dennis.machine == 'hugo';
+dennis.hobby == 'scuba';
+

+
+
dennis hat also die hobby Eigenschaften des Hobbyist Konstruktors bekommen. Setzt man jetzt noch voraus, dass danach Eigenschaften zum Konstruktorprototypen Hobbyist hinzugefügt werde:

+
+
Hobbyist.prototype.equipment = ['mask', 'fins', 'regulator', 'bcd'];
+

+
+
Das dennis Objekt erbt diese neue Eigenschaft nicht.

+
+
{{PreviousNext("Web/JavaScript/Guide/Mit_Objekten_arbeiten", "Web/JavaScript/Guide/Using_promises")}}

diff --git "a/files/de/web/javascript/guide/einf\303\274hrung/index.html" "b/files/de/web/javascript/guide/einf\303\274hrung/index.html"
deleted file mode 100644
index b38cb1b700..0000000000
--- "a/files/de/web/javascript/guide/einf\303\274hrung/index.html"
+++ /dev/null
@@ -1,140 +0,0 @@
----
-title: Einführung
-slug: Web/JavaScript/Guide/Einführung
-tags:
-  - Beginner
-  - Guide
-  - Introduction
-  - JavaScript
-  - 'l10n:priority'
-translation_of: Web/JavaScript/Guide/Introduction
----
-
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammatik_und_Typen")}}

-
-
Dieses Kapitel stellt JavaScript vor und behandelt einige grundlegende Konzepte.

-
-
Was solltest du bereits wissen

-
-
Für diese Einführung solltest du die folgenden Grundkenntnisse besitzen:

-
-
    
- 
  • Ein allgemeines Verständnis vom Internet und dem World Wide Web ({{Glossary("WWW")}}).
    • 
- 
  • Gute praktische Kenntnisse in der HyperText Markup Language ({{Glossary("HTML")}}).
    • 
- 
  • Etwas Programmiererfahrung. Falls du erst mit dem Programmieren beginnst, folge einem der Tutorials, die auf der Hauptseite zu JavaScript verlinkt sind.
    • 
-

-
-
Wo findest du Informationen zu JavaScript

-
-
Die Dokumentation zu JavaScript im MDN umfasst Folgendes:

-
-
    
- 
  • Learning the Web [de] vermittelt Informationen für Einsteiger und präsentiert grundlegende Konzepte der Programmierung und des Internets.
    • 
- 
  • JavaScript Guide [de] (dieser Artikel) gibt einen Überblick über JavaScript und die Komponenten der Sprache.
    • 
- 
  • JavaScript Referenz [de] enthält ausführliches Referenzmaterial über JavaScript.
    • 
-

-
-
Falls du dich das erste Mal mit JavaScript befasst, beginne einfach mit den Tutorials von Learning the Web [de] und dem JavaScript Guide [de]. Sobald du mit den ersten Grundlagen vertraut bist, kannst du die JavaScript Referenz [de] nutzen, um noch mehr über die einzelnen Methoden, Funktionen und Objekte von JavaScript zu erfahren.

-
-
Was ist JavaScript?

-
-
JavaScript ist eine plattformübergreifende, objektorientierte Skriptsprache. Es ist eine kompakte und ressourcenschonende Sprache. Innerhalb einer Host-Umgebung kann JavaScript mit den Objekten seiner Umgebung verknüpft werden, um diese programmatisch zu steuern.

-
-
JavaScript beinhaltet eine Standardbibliothek von Objekten wie Array, Date, und Math, sowie einen Kern an Sprachelementen wie Operatoren, Kontrollstrukturen und Anweisungen. Der JavaScript-Kern kann für eine Vielzahl von Anwendungsfällen erweitert werden, indem man ihn durch zusätzliche Objekte ergänzt. Beispiele:

-
-
    
- 
  • Clientseitiges JavaScript erweitert die Kernsprache durch die Bereitstellung von Objekten, mit denen ein Browser und sein Document Object Model (DOM) steuern lassen. Zum Beispiel ermöglichen clientseitige Erweiterungen einer Anwendung, Elemente in einem HTML-Formular anzulegen und auf Benutzerereignisse wie Mausklicks, Formulareingaben und Seitennavigation zu reagieren.
    • 
- 
  • Serverseitiges JavaScript erweitert die Kernsprache durch Bereitstellung von Objekten, die für die Ausführung von JavaScript auf einem Server von Bedeutung sind. Zum Beispiel ermöglichen es serverseitige Erweiterungen einer Applikation, mit einer Datenbank zu kommunizieren, Information von einem Aufruf der Applikation zum nächsten zu erhalten oder Änderungen an Dateien auf einem Server vorzunehmen.
    • 
-

-
-
JavaScript und Java

-
-
JavaScript und Java gleichen einander in manchen Aspekten, sind in anderen aber grundlegend verschieden. Die Sprache JavaScript ähnelt Java, verfügt jedoch nicht über Javas statische Typisierung und seine strenge Typprüfung. JavaScript folgt weitgehend der Ausdruckssyntax, den Namenskonventionen und den elementaren Kontrollstrukturen von Java, was der Grund für die Umbenennung von LiveScript in JavaScript gewesen ist.

-
-
Im Gegensatz zu Javas durch Deklarationen aufgebautes System, von zur Compile-Zeit verfügbaren Klassen, unterstützt JavaScript ein Laufzeitsystem, das auf einer kleinen Zahl an Datentypen basiert, die numerische und Boolesche Werte sowie Zeichenketten repräsentieren. JavaScript besitzt ein prototypen-basiertes Objektmodell anstatt des verbreiteteren klassenbasierten. Das prototypen-basierte Modell liefert dynamische Vererbung; das bedeutet, was vererbt wird, kann zwischen einzelnen Objekten variieren. JavaScript unterstützt zudem Funktionen ohne spezielle deklarative Anforderungen. Funktionen können Objekt Eigenschaften sein, ausgeführt als schwach typisierte Methoden.

-
-
JavaScript ist im Vergleich zu Java eine syntaktisch sehr freie Sprache. Sie müssen nicht alle Variablen, Klassen und Methoden deklarieren. Sie müssen sich nicht damit befassen, ob Methoden öffentlich, privat oder geschützt sind und Sie müssen keine Interfaces implementieren. Variablen, Parameter und Rückgabewerte von Funktionen sind nicht explizit typisiert.

-
-
Java ist eine auf schnelle Ausführung und Typsicherheit ausgelegte, klassenbasierte Programmiersprache. Typsicherheit bedeutet, dass Sie zum Beispiel keine Ganzzal in Java in eine Objektreferenz wandeln oder auf geschützten Speicher zugreifen können, indem Sie den Bytecode von Java manipulieren. Javas klassenbasiertes Modell bedeutet, dass Programme ausschließlich aus Klassen und ihren Methoden bestehen. Javas Klassenvererbung und strenge Typisierung erfordern im Allgemeinen eng gekoppelte Objekthierarchien. Wegen dieser Anforderungen ist das Programmieren in Java komplexer als in JavaScript.

-
-
Im Gegensatz dazu steht JavaScript in der Tradition einer Reihe kleiner, dynamisch typisierter Sprachen wie HyperTalk und dBase. Diese Skriptsprachen stellen, dank ihrer einfacheren Syntax, spezialisierter eingebauter Funktionalität und minimalen Anforderungen, für die Objektgenerierung Programmierwerkzeuge für einen deutlich breiteren Adressatenkreis zu Verfügung.

-
-
- 
- 
-  
-   
-   
-  
- 
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
JavaScript im Vergleich zu Java
JavaScriptJava
Objektorientiert. Keine Unterscheidung zwischen Typen von Objekten. Vererbung mittels des Prototypen-Mechanismus, jedes beliebige Objekt kann dynamisch um Eigenschaften und Methoden erweitert werden.Klassenbasiert. Objekte werden in Klassen und Instanzen unterteilt, Vererbung erfolgt vollständig über die Klassenhierarchie. Klassen und Instanzen können keine Eigenschaften und Methoden dynamisch hinzugefügt werden.
Datentypen von Variablen werden nicht deklariert (dynamische Typisierung)Datentypen von Variablen müssen deklariert werden (statische Typisierung)
Kein automatischer Schreibzugriff auf die Festplatte.Kein automatischer Schreibzugriff auf die Festplatte.

-
-
Weitere Informationen zu den Unterschieden zwischen JavaScript und Java finden Sie im Kapitel Einzelheiten des Objektmodells.

-
-
JavaScript und die ECMAScript-Spezifikation

-
-
JavaScript wird durch Ecma International standardisiert — den europäischen Verband zur Standardisierung von Informations- und Telekommunikationssystemen (ECMA war vormals ein Akronym für 'European Computer Manufacturers Association'), um eine standardisierte, internationale Programmiersprache auf der Basis von JavaScript verfügbar zu machen. Diese standardisierte Version von JavaScript, genannt ECMAScript, verhält sich in allen standardkonformen Applikationen identisch. Unternehmen können die offene Sprachdefinition verwenden, um ihre eigene Implementierung von JavaScript zu entwickeln. Der ECMAScript-Standard ist in der Spezifikation ECMA-262 dokumentiert. Unter Neu in JavaScript erfahren Sie mehr über die unterschiedlichen Versionen von JavaScript und den ECMAScript-Spezifikationen.

-
-
ECMA-262 ist auch von der ISO (International Organization for Standardization) als ISO-16262 verabschiedet. Sie finden die Spezifikation auch auf der Website von Ecma International. Die Spezifikation von ECMAScript beschreibt nicht das Document Object Model (DOM), welches durch das World Wide Web Consortium (W3C) und der WHATWG (Web Hypertext Application Technology Working Group) standardisiert wird. Das DOM definiert die Art und Weise, in der HTML-Dokumentenobjekte für Ihr Skript sichtbar sind. Um ein besseres Verständnis der verschiedenen bei der Programmierung in JavaScript eingesetzten Technologien zu entwickeln, lesen Sie den Artikel JavaScript Technologieübersicht.

-
-
JavaScript-Dokumentation vs. ECMAScript-Spezifikation

-
-
Die Spezifikation von ECMAScript besteht aus Anforderungen an eine Implementierung von ECMAScript; sie ist zweckdienlich, falls Sie standardkonforme Spracheigenschaften in Ihrer ECMAScript-Implementierung oder ihrer Laufzeitumgebung (wie SpiderMonkey in Firefox oder v8 in Chrome) realisieren wollen.

-
-
Das ECMAScript-Dokument soll nicht den Skriptprogrammierer unterstützen; nutzen Sie für Informationen zum Erstellen von Skripten die JavaScript-Dokumentation.

-
-
Die ECMAScript-Spezifikation verwendet Terminologie und Syntax, mit der JavaScript-Programmierer möglicherweise nicht vertraut sind. Obwohl sich die Beschreibung der Sprache in ECMAScript unterscheiden kann, bleibt die Sprache selbst die gleiche. JavaScript unterstützt jede Funktionalität, die in der ECMAScript-Spezifikation genannt wird.

-
-
Die JavaScript-Dokumentation beschreibt Aspekte der Sprache in für JavaScript-Programmierer passender Form.

-
-
Erste Schritte mit JavaScript

-
-
Die ersten Schritte mit JavaScript sind einfach: alles was Sie brauchen, ist einen aktuellen Browser. Diese Einführung nimmt auf einige Spracheigenschaften von JavaScript Bezug, die zur Zeit nur in den jüngsten Versionen von Firefox verfügbar sind, somit wird die Nutzung der aktuellsten Firefox-Version empfohlen.

-
-
Es gibt zwei Werkzeuge in Firefox, die zum Experimentieren mit JavaScript nützliche sind: die Web-Konsole and die JavaScript-Umgebung.

-
-
Die Web-Konsole

-
-
Die Web-Konsole zeigt Ihnen Informationen zur aktuell geladenen Webseite an und beinhaltet zudem eine Kommandozeile, die Sie nutzen können, um JavaScript-Ausdrücke im Kontext der aktuellen Seite auszuführen.

-
-
Um die Web-Konsole zu öffnen (Ctrl+Shift+K), wählen Sie "Web-Konsole" im Menü "Entwicklerwerkzeuge", das Sie im Menü von Firefox finden. Die Konsole wird am unteren Rand des Browserfensters angezeigt. Entlang des unteren Randes der Konsole befindet sich die Kommandozeile, in der Sie JavaScript eingeben können; die zugehörige Ausgabe erscheint im darüberliegenden Fensterbereich:

-
-

-
-
JavaScript-Umgebung (Scratchpad)

-
-
Die Web-Konsole eignet sich hervorragend zur Ausführung einzelner Zeilen JavaScript, möchten Sie jedoch mehrere Zeilen ausführen können, ist das nicht besonders komfortabel und Ihren Beispielcode speichern können Sie mit der Web-Konsole auch nicht. Daher ist für komplexere Beispiele die JavaScript-Umgebung die bessere Wahl.

-
-
Um die JavaScript-Umgebung zu öffnen (Shift+F4), wählen Sie "JavaScript-Umgebung" aus dem Menü "Entwicklerwerkzeuge", das Sie im Firefox-Menü finden. Die JavaScript-Umgebung öffnet sich in einem eigenen Fenster als Editor, mit dem Sie JavaScript schreiben und im Browser ausführen können. Sie können auch Skripte auf der Festplatte speichern bzw. laden.

-
-

-
-
Hello world

-
-
Beginnen Sie mit dem Programmieren in JavaScript, indem Sie die JavaScript-Umgebung öffnen und Ihr erstes "Hello World"-Programm in JavaScript schreiben:

-
-
function greetMe(yourName) {
-  alert("Hello " + yourName);
-}
-
-greetMe("World");
-

-
-
Markieren Sie den Quelltext und drücken Sie Ctrl+R, um zu schauen, ob alles funktioniert.

-
-
Auf den folgenden Seiten macht Sie diese Einführung mit Syntax und Spracheigenschaften von JavaScript vertraut, sodass Sie bald komplexere Anwendungen schreiben können.

-
-
{{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammatik_und_Typen")}}

diff --git a/files/de/web/javascript/guide/expressions_and_operators/index.html b/files/de/web/javascript/guide/expressions_and_operators/index.html
new file mode 100644
index 0000000000..7a0e723c6c
--- /dev/null
+++ b/files/de/web/javascript/guide/expressions_and_operators/index.html
@@ -0,0 +1,965 @@
+---
+title: Ausdrücke und Operatoren
+slug: Web/JavaScript/Guide/Ausdruecke_und_Operatoren
+tags:
+  - Beginner
+  - Extensions
+  - Guide
+  - JavaScript
+  - Operatoren
+  - 'l10n:priority'
+translation_of: Web/JavaScript/Guide/Expressions_and_Operators
+---
+
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Funktionen", "Web/JavaScript/Guide/Numbers_and_dates")}}

+
+
Dieses Kapitel beschreibt JavaScript Ausdrücke und Operatoren, Zuweisungsoperatoren, Vergleichsoperatoren, Rechenoperatoren, Bit-Operatoren, Logische Operatoren, Operator zur Zeichenkettenverknüpfung, Bedingte (ternäre) Operatoren und mehr.

+
+
Eine vollständige und detaillierte Liste mit Operatoren und Ausdrücken ist in den Referenzen zu finden.

+
+
Operatoren

+
+
JavaScript besitzt verschiedene Operatortypen. Dieser Abschnitt beschreibt die einzelnen Operatoren und beinhaltet Informationen über die Operator-Prioritäten.

+
+
    
+ 
  • {{ web.link("#Assignment_operators", "Zuweisungs-Operatoren") }}
    • 
+ 
  • {{ web.link("#Comparison_operators", "Vergleichs-Operatoren") }}
    • 
+ 
  • {{ web.link("#Arithmetic_operators", "Arithmetische Operatoren") }}
    • 
+ 
  • {{ web.link("#Bitwise_operators", "Bit-Operatoren") }}
    • 
+ 
  • {{ web.link("#Logical_operators", "Logische Operatoren") }}
    • 
+ 
  • {{ web.link("#String_operators", "String Operatoren") }}
    • 
+ 
  • {{ web.link("#Conditional_(ternary)_operator", "Bedingter (ternärer) Operator")}}
    • 
+ 
  • {{ web.link("#Comma_operator", "Komma Operator")}}
    • 
+ 
  • {{ web.link("#Unary_operators", "Unäre Operatoren")}}
    • 
+ 
  • {{ web.link("#Relational_operators", "Vergleichsoperator")}}
    • 
+

+
+
JavaScript verfügt über beides, binäre als auch unäre Operatoren. Zudem existiert ein spezieller ternärer Operator - der Bedingungsoperator. Ein binärer Operator benötigt zwei Operanden, einen vor dem Operator und einen nach dem Operator:

+
+
operand1 operator operand2
+

+
+
Zum Beispiel: 3+4, oder x*y.

+
+
Ein unärer Operator erwartet einen einzelnen Operanden, entweder vor, oder nach dem Operator:

+
+
operator operand
+

+
+
oder

+
+
operand operator
+

+
+
Zum Beispiel: x++, oder ++x.

+
+
Zuweisungsoperatoren

+
+
Ein Zuweisungsoperator weißt seinem linken Operanden einen Wert zu. Dieser Wert basiert auf dem Ergebnis des rechten Operanden. Der einfachste Zuweisungsoperator ist das "Gleich" (=), welches den Wert des rechten Operanden dem linken Operanden zuweist.

+
+
Zum Beispiel: x = y (y wid der Wert von x zugewiesen).

+
+
Es gibt auch zusammengesetzte Zuweisungsoperatoren, diese stellen Abkürzungen für die in der folgenden Tabelle aufgelisteten Operationen dar:

+
+
+ 
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
Zusammengesetzte Zuweisungsoperatoren
NameAbgekürzter OperatorAusgeschriebener Operator
Zuweisungx = yx = y
Additionx += yx = x + y
Subraktionx -= yx = x - y
Multiplikationx *= yx = x * y
Divisionx /= yx = x / y
Modulo (Division mit Rest)x %= yx = x % y
Exponentiation assignment {{experimental_inline}}x **= yx = x ** y
Left shift assignmentx <<= yx = x << y
Right shift assignmentx >>= yx = x >> y
Unsigned right shift assignmentx >>>= yx = x >>> y
Bitwise AND assignmentx &= yx = x & y
Bitwise XOR assignmentx ^= yx = x ^ y
Bitwise OR assignmentx |= yx = x | y

+
+
Destrukturierung

+
+
Komplexere Zuweisungen ermöglicht Javascript über die sogenannte Destrukturierung. Diese ermöglicht es, Daten aus Arrays oder Objekten mithilfe einer Syntax zu extrahieren, die die Konstruktion von Array- und Objektliteralen widerspiegelt.

+
+
var foo = ["eins", "zwei", "drei"];
+
+// Ohne Destrukturierung
+var eins   = foo[0];
+var zwei   = foo[1];
+var drei   = foo[2];
+
+// mit Destrukturierung
+var [eins, zwei, drei] = foo;

+
+
Vergleichsoperatoren

+
+
Ein Vergleichsoperator vergleicht seine Operanden und gibt einen logischen Wert zurück, der darauf basiert, ob der Vergleich wahr ist, oder nicht.

+
+
Die Operanden können numerische-, string-, logische- oder Objektwerte sein. Zeichenfolgen werden basierend auf der lexikographischen Standardreihenfolge mit unicodewerten verglichen. Wenn die beiden Operanden nicht vom selben Typ sind, versucht JavaScript in den meisten Fällen, sie in einen geeigneten Typ für den Vergleich zu konvertieren. Dieses Verhalten führt im Allgemeinen dazu, dass die Operanden numerisch verglichen werden. Die einzigen Ausnahmen für die Typumwandlung innerhalb von Vergleichen sind die Operatoren === und !==, die strenge Vergleiche durchführen. Diese Operatoren versuchen nicht, die Operanden in kompatible Typen zu konvertieren, bevor sie die Gleichheit überprüfen.

+
+
Die folgende Tabelle beschreibt die Vergleichsoperatoren in Bezug auf diesen Beispielcode:

+
+
var var1 = 3;
+var var2 = 4;
+

+
+
+ 
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
Vergleichsoperatoren
OperatorBeschreibungBeispiele, die true zurückgeben
Equal (==)Gibt true zurück, wenn die Operanden gleich sind.3 == var1
+    
"3" == var1

+    3 == '3'
Not equal (!=)Gibt true zurück, wenn die Operanden ungleich sind.var1 != 4

+    var2 != "3"
Strict equal (===)Gibt true zurück, wenn die Operanden gleich sind und auch der Typ übereinstimmt. Weitere Informationen unter {{jsxref("Object.is")}} und sameness in JS.3 === var1
Strict not equal (!==)Gibt true zurück, wenn die Operanden vom selben Typ sind, doch nicht den selben Wert haben, oder wenn sie den selben Wert haben, doch nicht vom selben Typ sind.var1 !== "3"

+    3 !== '3'
Greater than (>)Gibt true zurück, wenn der linke Operand größer dem rechten Operanden ist.var2 > var1

+    "12" > 2
Greater than or equal (>=)Gibt true zurück, wenn der linke Operand größer als, oder gleich dem linken Operanden ist.var2 >= var1

+    var1 >= 3
Less than (<)Gibt true zurück, wenn der linke Operand kleiner dem rechten Operanden ist.var1 < var2

+    "2" < 12
Less than or equal (<=)Gibt true zurück, wenn der linke Operand kleiner als, oder gleich dem rechten Operanden ist.var1 <= var2

+    var2 <= 5

+
+

+
Note: (=>) ist kein Operator, hiermit werden Arrow functions notiert.

+

+
+
Arithmetische Operatoren (Rechenzeichen)

+
+
Ein arithmetischer Operator nimmt numerische Werte (Literale oder Variablen) als Operanden entgegen und gibt einen einzelnen numerischen Wert zurück. Die arithmetischen Standardoperatoren sind Addition (+), Subtraktion (-), Multiplikation (*) und Division (/). Diese Operatoren funktionieren wie in den meisten anderen Programmiersprachen, wenn sie mit Fließkommazahlen verwendet werden (beachten Sie insbesondere, dass die Division durch Null {{jsxref ("Infinity")}} ergibt).

+
+
1 / 2; // 0.5
+1 / 2 == 1.0 / 2.0; // this is true
+

+
+
Neben den arithmetischen Standardoperatoren (+, -, * /), stellt JavaScript noch weitere Rechenzeichen zur Verfügung. Diese werden in der folgenden Tabelle aufgeführt:

+
+
+ 
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
Arithmetische Operatoren
OperatorBeschreibungBeispiel
Remainder (%)Binärer Operator. Gibt den ganzzahligen Rest der Division beider Operanden zurück.12 % 5 gibt 2 zurück.
Increment (++)
+    
Unärer Operator. Addiert 1 zu seinem Operanden.

+
+    
Wenn der Operator vorangestellt wird (++x), gibt er den Wert seines Operanden zurück nachdem 1 addiert wurde; Wenn der Operator nachgestellt wird (x++), gibt er den Wert seines Operanden zurück, bevor 1 addiert wurde.

+   		Wenn x gleich 3 ist, setzt ++x x auf 4 und gibt 4 zurück, wobei x++  3 zurückgibt und erst danach x auf 4 setzt.
Decrement (--)
+    
Unärer Operator. Subtrahiert 1 von seinem Operanden.

+
+    
Der Rückgabewert verhält sich analog zum increment Operator.

+   		Wenn x gleich 3 ist, setzt --x x auf 2 und gibt 2 zurück, wobei x-- 3 zurückgibt und erst danach, x auf 2 setzt.
Unary negation (-)Unärer Operator. Gibt die Negierung seines Operanden zurück.Wenn x gleich 3 ist, gibt -x -3 zurück.
Unary plus (+)Versucht, den Operanden in eine Zahl umzuwandeln, wenn dies nicht bereits der Fall ist.+"3" gibt 3 zurück.

+    +true gibt 1 zurück.
Exponentiation operator (**) {{experimental_inline}}Calculates the base to the exponent power, that is, baseexponent2 ** 3 gibt 8 zurück.

+    10 ** -1 gibt 0.1 zurück.

+
+
Bitweise Operatoren

+
+
Ein bitweiser Operator behandelt seine Operanden als eine Menge von 32 Bits (Nullen und Einsen) und nicht als dezimale, hexadezimale oder oktale Zahlen. Zum Beispiel hat die Dezimalzahl Neun eine binäre Darstellung von 1001. Bitweise Operatoren führen ihre Operationen mit solchen binären Darstellungen aus, doch sie geben standardmäßige numerische JavaScript-Werte zurück.

+
+
Die folgende Tabelle fasst die bitweisen Operatoren von JavaScript zusammen.

+
+
+ 
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
Bitweise Operatoren
OperatorVerwendungBeschreibung
Bitwise ANDa & bReturns a one in each bit position for which the corresponding bits of both operands are ones.
Bitwise ORa | bReturns a zero in each bit position for which the corresponding bits of both operands are zeros.
Bitwise XORa ^ bReturns a zero in each bit position for which the corresponding bits are the same.

+    [Returns a one in each bit position for which the corresponding bits are different.]
Bitwise NOT~ aInverts the bits of its operand.
Left shifta << bShifts a in binary representation b bits to the left, shifting in zeros from the right.
Sign-propagating right shifta >> bShifts a in binary representation b bits to the right, discarding bits shifted off.
Zero-fill right shifta >>> bShifts a in binary representation b bits to the right, discarding bits shifted off, and shifting in zeros from the left.

+
+
Bitweise logische Operatoren

+
+
Konzeptuell arbeiten bitweise logische Operatoren wie folgt:

+
+
    
+ 
  • Die Operanden werden zu 32 Bit Integer Zahlen konvertiert und als Folge von Bits (Nullen und Einsen) dargestellt. Zahlen mit mehr als 32 Bits verlieren dabei ihre signifikanten Bits bis auf eine Länge von 32. Im folgenden Beispiel wird eine Zahl mit mehr als 32 Bits zu einer 32 Bit Integer Zahl konvertiert:
+  
    Before: 11100110111110100000000000000110000000000001
+After:              10100000000000000110000000000001
    
+ 
    • 
+ 
  • Jedes Bit des ersten Operanden wird mit dem korrespondierenden Bit im zweiten Operanden gepaart: Erstes Bit mit dem ersten Bit, zweites Bit mit dem zweiten Bit und so weiter.
    • 
+ 
  • Der Operator wird auf jedes paar von Bits angewendet und das Ergebnis bitweise erstellt.
    • 
+

+
+
Zum Beispiel ist die binäre Darstellung der Zahl neun 1001, die binäre Darstellung der Zahl 15 ist 1111. Wenn die bitweisen logischen Operatoren auf diese Zahlen angewendet werden, ergeben sich folgende Ergebnisse:

+
+
+ 
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
Beispiele für bitweise Operatoren
AusdruckErgebnisBinäre Darstellung
15 & 991111 & 1001 = 1001
15 | 9151111 | 1001 = 1111
15 ^ 961111 ^ 1001 = 0110
~15-16~00000000...00001111 = 11111111...11110000
~9-10~00000000...00001001 = 11111111...11110110

+
+
Beachte, dass alle 32 Bits invertiert werden, wenn der bitweise NOT Operator benutzt wird. Wenn dabei das höchstwertigste (ganz linke) Bit auf 1 gesetzt wird, entsteht eine negative Zahl. Note that all 32 bits are inverted using the Bitwise NOT operator, and that values with the most significant (left-most) bit set to 1 represent negative numbers (Zweierkomplement). ~x wird also genauso ausgewertet wie -x - 1.

+
+
Bitweise Schiebeoperatoren

+
+
Die bitweisen Schiebeoperatoren erwarten zwei Operanden. Der erste ist der Wert, der geschoben werden soll, der zweite die Anzahl der Bits, um die geschoben werden soll. Die Richtung, in die geschoben wird, wird durch den verwendeten Operator bestimmt.

+
+
Schiebeoperatoren konvertieren ihre Operanden in 32 Bit Integer Zahlen und liefern als Ergebnis einen Wert vom selben Typen wir der linke Operand.

+
+
Die Schiebeoperatoren sind in der folgenden Tabelle aufgelistet.

+
+
+ 
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
Bitwise shift operators
OperatorDescriptionExample
Left shift

+    (<<)		This operator shifts the first operand the specified number of bits to the left. Excess bits shifted off to the left are discarded. Zero bits are shifted in from the right.9<<2 yields 36, because 1001 shifted 2 bits to the left becomes 100100, which is 36.
Sign-propagating right shift (>>)This operator shifts the first operand the specified number of bits to the right. Excess bits shifted off to the right are discarded. Copies of the leftmost bit are shifted in from the left.9>>2 yields 2, because 1001 shifted 2 bits to the right becomes 10, which is 2. Likewise, -9>>2 yields -3, because the sign is preserved.
Zero-fill right shift (>>>)This operator shifts the first operand the specified number of bits to the right. Excess bits shifted off to the right are discarded. Zero bits are shifted in from the left.19>>>2 yields 4, because 10011 shifted 2 bits to the right becomes 100, which is 4. For non-negative numbers, zero-fill right shift and sign-propagating right shift yield the same result.

+
+
Logische Operatoren

+
+
Logische Operatoren werden normalerweise mit boolesche (logischen) Werten verwendet - hierbei geben sie dann einen booleschen Wert zurück. Die Operatoren && und || geben den Wert von einem der Operatoren zurück, sodass sie im Falle der Verwendung mit einem nicht-booleschen Wert auch einen nicht-booleschen Wert zurückgeben können. Die logischen Operatoren werden in der folgenden Tabelle beschrieben: 

+
+
+ 
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
Logische Operatoren
OperatorVerwendungBeschreibung
Logical AND (&&)expr1 && expr2Gibt expr1 zurück, sofern es zu false konvertiert werden kann; ansonsten wird expr2 zurückgegeben. Insofern mit booleschen Werten verwendet, && gibt true zurück, wenn beide Operanden wahr sind; ansonsten false.
Logical OR (||)expr1 || expr2
+    
Gibt expr1 zurück, sofern er zu true konvertiert werden kann. Insofern mit booleschen Werten verwendet, gibt der Operator || true zurück, wenn einer von beiden Operanden true ist; wenn beide false sind, wird false zurückgegeben. 

+   
Logical NOT (!)!expr
+    
Gibt false zurück, wenn sein einziger Operand in true konvertiert werden kann; andernfalls gibt er true zurück. 

+   

+
+
Beispiele von Ausdrücken, die in false umgewandelt werden können, sind solche, die null, 0, NaN, einen leeren String ("") oder undefined sind. 

+
+
Die folgenden Zeilen zeigen Beispiele des && (logisches UND) Operators.

+
+
var a1 =  true && true;     // t && t returns true
+var a2 =  true && false;    // t && f returns false
+var a3 = false && true;     // f && t returns false
+var a4 = false && (3 == 4); // f && f returns false
+var a5 = "Cat" && "Dog";    // t && t returns Dog
+var a6 = false && "Cat";    // f && t returns false
+var a7 = "Cat" && false;    // t && f returns false
+

+
+
Die folgenden Zeilen zeigen Beispiele des || (logisches ODER) Operators:

+
+
var o1 =  true || true;     // t || t returns true
+var o2 = false || true;     // f || t returns true
+var o3 =  true || false;    // t || f returns true
+var o4 = false || (3 == 4); // f || f returns false
+var o5 = "Cat" || "Dog";    // t || t returns Cat
+var o6 = false || "Cat";    // f || t returns Cat
+var o7 = "Cat" || false;    // t || f returns Cat
+

+
+
Die folgenden Zeilen zeigen Beispiele des ! (logisches NICHT) Operators:

+
+
var n1 = !true;  // !t returns false
+var n2 = !false; // !f returns true
+var n3 = !"Cat"; // !t returns false
+

+
+
Short-circuit-Bewertung 

+
+
Da logische Ausdrücke von links nach rechts bewertet werden, werden sie auf eine mögliche "Abkürzung" (short-circuit) hin gemäß den folgenden Regeln evaluiert:

+
+
    
+ 
  • false && irgendwas wird abgekürzt als false bewertet.
    • 
+ 
  • true || irgendwas wird abgekürtz als true bewertet. 
    • 
+

+
+
Die Regeln der Logik garantieren, dass diese Bewertungen immer korrekt sind. Der irgendwas-Operand werden in den o.g. Beispielen hierbei nicht bewertet. 

+
+
String-Operatoren

+
+
In addition to the comparison operators, which can be used on string values, the concatenation operator (+) concatenates two string values together, returning another string that is the union of the two operand strings.

+
+
For example,

+
+
console.log("my " + "string"); // console logs the string "my string".

+
+
The shorthand assignment operator += can also be used to concatenate strings.

+
+
For example,

+
+
var mystring = "alpha";
+mystring += "bet"; // evaluates to "alphabet" and assigns this value to mystring.

+
+
Conditional (ternary) operator

+
+
The conditional operator is the only JavaScript operator that takes three operands. The operator can have one of two values based on a condition. The syntax is:

+
+
condition ? val1 : val2
+

+
+
If condition is true, the operator has the value of val1. Otherwise it has the value of val2. You can use the conditional operator anywhere you would use a standard operator.

+
+
For example,

+
+
var status = (age >= 18) ? "adult" : "minor";
+

+
+
This statement assigns the value "adult" to the variable status if age is eighteen or more. Otherwise, it assigns the value "minor" to status.

+
+
Comma operator

+
+
The comma operator (,) simply evaluates both of its operands and returns the value of the last operand. This operator is primarily used inside a for loop, to allow multiple variables to be updated each time through the loop.

+
+
For example, if a is a 2-dimensional array with 10 elements on a side, the following code uses the comma operator to update two variables at once. The code prints the values of the diagonal elements in the array:

+
+
var x = [0,1,2,3,4,5,6,7,8,9];
+var a = [x, x, x, x, x]
+
+for (var i = 0, j = 9; i <= j; i++, j--)
+  console.log("a[" + i + "][" + j + "]= " + a[i][j]);
+

+
+
Unary operators

+
+
A unary operation is an operation with only one operand.

+
+
delete

+
+
The delete operator deletes an object, an object's property, or an element at a specified index in an array. The syntax is:

+
+
delete objectName;
+delete objectName.property;
+delete objectName[index];
+delete property; // legal only within a with statement
+

+
+
where objectName is the name of an object, property is an existing property, and index is an integer representing the location of an element in an array.

+
+
The fourth form is legal only within a with statement, to delete a property from an object.

+
+
You can use the delete operator to delete variables declared implicitly but not those declared with the var statement.

+
+
If the delete operator succeeds, it sets the property or element to undefined. The delete operator returns true if the operation is possible; it returns false if the operation is not possible.

+
+
x = 42;
+var y = 43;
+myobj = new Number();
+myobj.h = 4;    // create property h
+delete x;       // returns true (can delete if declared implicitly)
+delete y;       // returns false (cannot delete if declared with var)
+delete Math.PI; // returns false (cannot delete predefined properties)
+delete myobj.h; // returns true (can delete user-defined properties)
+delete myobj;   // returns true (can delete if declared implicitly)
+

+
+
Deleting array elements

+
+
When you delete an array element, the array length is not affected. For example, if you delete a[3], a[4] is still a[4] and a[3] is undefined.

+
+
When the delete operator removes an array element, that element is no longer in the array. In the following example, trees[3] is removed with delete. However, trees[3] is still addressable and returns undefined.

+
+
var trees = ["redwood", "bay", "cedar", "oak", "maple"];
+delete trees[3];
+if (3 in trees) {
+  // this does not get executed
+}
+

+
+
If you want an array element to exist but have an undefined value, use the undefined keyword instead of the delete operator. In the following example, trees[3] is assigned the value undefined, but the array element still exists:

+
+
var trees = ["redwood", "bay", "cedar", "oak", "maple"];
+trees[3] = undefined;
+if (3 in trees) {
+  // this gets executed
+}
+

+
+
typeof

+
+
The typeof operator is used in either of the following ways:

+
+
typeof operand
+typeof (operand)
+

+
+
The typeof operator returns a string indicating the type of the unevaluated operand. operand is the string, variable, keyword, or object for which the type is to be returned. The parentheses are optional.

+
+
Suppose you define the following variables:

+
+
var myFun = new Function("5 + 2");
+var shape = "round";
+var size = 1;
+var today = new Date();
+

+
+
The typeof operator returns the following results for these variables:

+
+
typeof myFun;     // returns "function"
+typeof shape;     // returns "string"
+typeof size;      // returns "number"
+typeof today;     // returns "object"
+typeof dontExist; // returns "undefined"
+

+
+
For the keywords true and null, the typeof operator returns the following results:

+
+
typeof true; // returns "boolean"
+typeof null; // returns "object"
+

+
+
For a number or string, the typeof operator returns the following results:

+
+
typeof 62;            // returns "number"
+typeof 'Hello world'; // returns "string"
+

+
+
For property values, the typeof operator returns the type of value the property contains:

+
+
typeof document.lastModified; // returns "string"
+typeof window.length;         // returns "number"
+typeof Math.LN2;              // returns "number"
+

+
+
For methods and functions, the typeof operator returns results as follows:

+
+
typeof blur;        // returns "function"
+typeof eval;        // returns "function"
+typeof parseInt;    // returns "function"
+typeof shape.split; // returns "function"
+

+
+
For predefined objects, the typeof operator returns results as follows:

+
+
typeof Date;     // returns "function"
+typeof Function; // returns "function"
+typeof Math;     // returns "object"
+typeof Option;   // returns "function"
+typeof String;   // returns "function"
+

+
+
void

+
+
The void operator is used in either of the following ways:

+
+
void (expression)
+void expression
+

+
+
The void operator specifies an expression to be evaluated without returning a value. expression is a JavaScript expression to evaluate. The parentheses surrounding the expression are optional, but it is good style to use them.

+
+
You can use the void operator to specify an expression as a hypertext link. The expression is evaluated but is not loaded in place of the current document.

+
+
The following code creates a hypertext link that does nothing when the user clicks it. When the user clicks the link, void(0) evaluates to undefined, which has no effect in JavaScript.

+
+
Click here to do nothing
+

+
+
The following code creates a hypertext link that submits a form when the user clicks it.

+
+

+Click here to submit

+
+
Relational operators

+
+
A relational operator compares its operands and returns a Boolean value based on whether the comparison is true.

+
+
in

+
+
The in operator returns true if the specified property is in the specified object. The syntax is:

+
+
propNameOrNumber in objectName
+

+
+
where propNameOrNumber is a string or numeric expression representing a property name or array index, and objectName is the name of an object.

+
+
The following examples show some uses of the in operator.

+
+
// Arrays
+var trees = ["redwood", "bay", "cedar", "oak", "maple"];
+0 in trees;        // returns true
+3 in trees;        // returns true
+6 in trees;        // returns false
+"bay" in trees;    // returns false (you must specify the index number,
+                   // not the value at that index)
+"length" in trees; // returns true (length is an Array property)
+
+// built-in objects
+"PI" in Math;          // returns true
+var myString = new String("coral");
+"length" in myString;  // returns true
+
+// Custom objects
+var mycar = { make: "Honda", model: "Accord", year: 1998 };
+"make" in mycar;  // returns true
+"model" in mycar; // returns true
+

+
+
instanceof

+
+
The instanceof operator returns true if the specified object is of the specified object type. The syntax is:

+
+
objectName instanceof objectType
+

+
+
where objectName is the name of the object to compare to objectType, and objectType is an object type, such as {{jsxref("Date")}} or {{jsxref("Array")}}.

+
+
Use instanceof when you need to confirm the type of an object at runtime. For example, when catching exceptions, you can branch to different exception-handling code depending on the type of exception thrown.

+
+
For example, the following code uses instanceof to determine whether theDay is a Date object. Because theDay is a Date object, the statements in the if statement execute.

+
+
var theDay = new Date(1995, 12, 17);
+if (theDay instanceof Date) {
+  // statements to execute
+}
+

+
+
Operator precedence

+
+
The precedence of operators determines the order they are applied when evaluating an expression. You can override operator precedence by using parentheses.

+
+
The following table describes the precedence of operators, from highest to lowest.

+
+
+ 
+ 
+  
+   
+   
+  
+ 
+ 
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
Operator precedence
Operator typeIndividual operators
member. []
call / create instance() new
negation/increment! ~ - + ++ -- typeof void delete
multiply/divide* / %
addition/subtraction+ -
bitwise shift<< >> >>>
relational< <= > >= in instanceof
equality== != === !==
bitwise-and&
bitwise-xor^
bitwise-or|
logical-and&&
logical-or||
conditional?:
assignment= += -= *= /= %= <<= >>= >>>= &= ^= |=
comma,

+
+
A more detailed version of this table, complete with links to additional details about each operator, may be found in JavaScript Reference.

+
+
Expressions

+
+
An expression is any valid unit of code that resolves to a value.

+
+
Every syntactically valid expression resolves to some value but conceptually, there are two types of expressions: with side effects (for example: those that assign value to a variable) and those that in some sense evaluate and therefore resolve to a value.

+
+
The expression x = 7 is an example of the first type. This expression uses the = operator to assign the value seven to the variable x. The expression itself evaluates to seven.

+
+
The code 3 + 4 is an example of the second expression type. This expression uses the + operator to add three and four together without assigning the result, seven, to a variable.

+ 

+ JavaScript has the following expression categories:

+
+
    
+ 
  • Arithmetic: evaluates to a number, for example 3.14159. (Generally uses {{ web.link("#Arithmetic_operators", "arithmetic operators") }}.)
    • 
+ 
  • String: evaluates to a character string, for example, "Fred" or "234". (Generally uses {{ web.link("#String_operators", "string operators") }}.)
    • 
+ 
  • Logical: evaluates to true or false. (Often involves {{ web.link("#Logical_operators", "logical operators") }}.)
    • 
+ 
  • Primary expressions: Basic keywords and general expressions in JavaScript.
    • 
+ 
  • Left-hand-side expressions: Left values are the destination of an assignment.
    • 
+

+
+
Primary expressions

+
+
Basic keywords and general expressions in JavaScript.

+
+
this

+
+
Use the this keyword to refer to the current object. In general, this refers to the calling object in a method. Use this either with the dot or the bracket notation:

+
+
this["propertyName"]
+this.propertyName
+

+
+
Suppose a function called validate validates an object's value property, given the object and the high and low values:

+
+
function validate(obj, lowval, hival){
+  if ((obj.value < lowval) || (obj.value > hival))
+    console.log("Invalid Value!");
+}
+

+
+
You could call validate in each form element's onChange event handler, using this to pass it the form element, as in the following example:

+
+

+
+
Enter a number between 18 and 99:

+
+

+
+
Grouping operator

+
+
The grouping operator ( ) controls the precedence of evaluation in expressions. For example, you can override multiplication and division first, then addition and subtraction to evaluate addition first.

+
+
var a = 1;
+var b = 2;
+var c = 3;
+
+// default precedence
+a + b * c     // 7
+// evaluated by default like this
+a + (b * c)   // 7
+
+// now overriding precedence
+// addition before multiplication
+(a + b) * c   // 9
+
+// which is equivalent to
+a * c + b * c // 9
+

+
+
Comprehensions

+
+
Comprehensions are an experimental JavaScript feature, targeted to be included in a future ECMAScript version. There are two versions of comprehensions:

+
+

+ 
{{experimental_inline}} {{jsxref("Operators/Array_comprehensions", "[for (x of y) x]")}}

+ 
Array comprehensions.

+ 
{{experimental_inline}} {{jsxref("Operators/Generator_comprehensions", "(for (x of y) y)")}}

+ 
Generator comprehensions.

+

+
+
Comprehensions exist in many programming languages and allow you to quickly assemble a new array based on an existing one, for example.

+
+
[for (i of [ 1, 2, 3 ]) i*i ];
+// [ 1, 4, 9 ]
+
+var abc = [ "A", "B", "C" ];
+[for (letter of abc) letter.toLowerCase()];
+// [ "a", "b", "c" ]

+
+
Left-hand-side expressions

+
+
Left values are the destination of an assignment.

+
+
new

+
+
You can use the new operator to create an instance of a user-defined object type or of one of the built-in object types. Use new as follows:

+
+
var objectName = new objectType([param1, param2, ..., paramN]);
+

+
+
super

+
+
The super keyword is used to call functions on an object's parent. It is useful with classes to call the parent constructor, for example.

+
+
super([arguments]); // calls the parent constructor.
+super.functionOnParent([arguments]);
+

+
+
Spread operator

+
+
The spread operator allows an expression to be expanded in places where multiple arguments (for function calls) or multiple elements (for array literals) are expected.

+
+
Example: Today if you have an array and want to create a new array with the existing one being part of it, the array literal syntax is no longer sufficient and you have to fall back to imperative code, using a combination of push, splice, concat, etc. With spread syntax this becomes much more succinct:

+
+
var parts = ['shoulder', 'knees'];
+var lyrics = ['head', ...parts, 'and', 'toes'];

+
+
Similarly, the spread operator works with function calls:

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

+
+
{{PreviousNext("Web/JavaScript/Guide/Funktionen", "Web/JavaScript/Guide/Numbers_and_dates")}}

diff --git a/files/de/web/javascript/guide/feinheiten_des_objektmodells/index.html b/files/de/web/javascript/guide/feinheiten_des_objektmodells/index.html
deleted file mode 100644
index 4d5e46ac26..0000000000
--- a/files/de/web/javascript/guide/feinheiten_des_objektmodells/index.html
+++ /dev/null
@@ -1,721 +0,0 @@
----
-title: Feinheiten des Objektmodells
-slug: Web/JavaScript/Guide/Feinheiten_des_Objektmodells
-tags:
-  - Guide
-  - Intermediate
-  - JavaScript
-  - Object
-  - 'l10n:priority'
-translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model
----
-
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Mit_Objekten_arbeiten", "Web/JavaScript/Guide/Using_promises")}}

-
-
JavaScript ist eine Objektbasierte Programmiersprache, die auf Prototypen, statt auf Klassen basiert. Aufgrund dieser Tatsache ist es u. U. schwieriger zu erkennen, wie in JavaScript Objekthierarchien erstellt werden und die Vererbung von Eigenschaften und deren Werten erfolgt. Dieses Kapitel versucht diese Situation zu klären.

-
-
Dieses Kapitel geht davon aus, dass bereits Erfahrungen mit JavaScript vorhanden sind und man einfache Objekte mit Funktionen schon erstellt hat.

-
-
Klassenbasierte vs. Prototypbasierte Sprachen

-
-
Klassenbasierte, Objektorientierte Sprachen wie Java und C++ bauen auf dem Konzept von Klassen und Instanzen auf.

-
-
    
- 
  • Eine Klasse definiert alle Eigenschaften (was Methoden und Felder in Java oder Members in C++ entspricht), welche eine Menge von Objekten charakterisiert. Eine Klasse ist ein abstrakter Bauplan für Objekte. Die Klasse repräsentiert den Aufbau ihrer Objekte. Zum Beispiel kann die Klasse Employee die Menge aller Mitarbeiter repräsentieren.
    • 
- 
  • Eine Instanz ist auf der anderen Seite eine Instanz einer Klasse. Diese Instanz ist ein Mitglied der oben genannten Objektmenge. Zum Beispiel kann Victoria eine Instanz der Employee Klasse sein und somit einen individuellen Mitarbeiter repräsentieren. Eine Instanz hat genau die selben Eigenschaften wie die Elternklasse (keine mehr und keine weniger).
    • 
-

-
-
Eine Prototypbasierte Sprache wie JavaScript hat diese Unterscheidung nicht: es gibt einfach Objekte. Eine Prototypbasierte Sprache hat die Notation eines prototypischen Objektes, ein Objekt welches als Template genutzt wird und die initialen Eigenschaften für ein neues Objekt vorgibt. Jedes Objekt kann seine eigenen Eigenschaften spezifizieren, entweder beim Erstellen oder zur Laufzeit. Zudem kann jedes Objekt als Prototyp für ein anderes Objekt verwendet werden, was es auch dem zweiten Objekt erlaubt seine Eigenschaften mit dem ersten Objekt zu teilen.

-
-
Eine Klasse definieren

-
-
In einer Klassenbasierten Sprache definiert man Klassen in separaten Klassendefinitionen. In diesen Definitionen spezifiziert man spezielle Methoden, Konstruktoren genannt, um eine Instanz der Klasse zu erstellen. Eine Konstruktormethode spezifiziert Initialwerte für die Eigenschaften einer Instanz und kann andere Prozesse während der Erstellungszeit durchführen. Man benutzt den new Operator in Verbindung mit der Konstruktormethode, um Klasseninstanzen zu erstellen.

-
-
JavaScript folgt einem ähnlichen Modell, jedoch hat keine vom Konstruktor getrennte Klassendefinition. Stattdessen definiert man eine Konstruktorfunktion, um ein Objekt mit einer initialen Menge an Eigenschaften und Werten zu erstellen. Jede JavaScript Funktion kann als Konstruktor verwendet werden. Man benutzt den new Operator mit einer Konstruktorfunktion, um ein neues Objekt zu erstellen.

-
-
Unterklassen und Vererbung

-
-
In einer Klassenbasierten Sprache erstellt man eine Hierarchie von Klassen durch die Klassendefinition. In der Klassendefinition kann man spezifizieren, dass die neue Klasse eine Unterklasse der schon existierenden Klassen ist. Die Unterklasse erbt alle Eigenschaften von der Oberklasse und kann neue Eigenschaften hinzufügen oder vererbte verändern. Angenommen die Employee Klasse hat nur die Eigenschaften name und dept und Manager ist eine Unterklasse von Employee welche die Eigenschaft reports hinzufügt. In diesem Fall hat eine Instanz der Manager Klasse alle drei Eigenschaften: name, dept und reports.

-
-
JavaScript implementiert Vererbung so, dass man jedes Prototypobjekt mit jeder Konstruktorfunktion verbinden kann. So kann man das gleiche Employee — Manager Beispiel erstellen, jedoch mit einer leicht anderen Terminologie. Als erstes definiert man die Employee Konstruktorfunktion, welche die Eigenschaften name und dept spezifiziert. Als nächstes definiert man die Manager Konstruktorfunktion, ruft den Employee Konstruktor auf und spezifiziert die reports Eigenschaft. Letztlich weist man ein neues Objekt zu, welches von Employee.prototype stammt und als prototype für die Manager Konstruktorfunktion dient. Dann, wenn man einen neuen Manager erstellt, erbt dieser die Eigenschaften name und dept von dem Employee Objekt.

-
-
Hinzufügen und Entfernen von Eigenschaften

-
-
In Klassenbasierten Sprachen wird eine Klasse typischerweise zur Übersetzungszeit erstellt und Instanzen dieser Klasse werden zur Übersetzungs- oder Laufzeit instantiiert. Man kann die Anzahl oder die Typen von Eigenschaften einer Klasse nicht nach der Definition der Klasse verändern. In JavaScript kann man immer EIgenschaften während der Laufzeit zu Objekten hinzufügen oder von ihnen entfernen. Wenn eine Eigenschaft zu einem Objekt hinzugefügt wird, welches als Prototyp für andere Objekte fungiert, so bekommen die anderen Objekte auch diese neue Eigenschaft.

-
-
Zusammenfassung von Unterschieden

-
-
Die folgende Tabelle gibt eine kurze Zusammenfassung von einigen der Unterschiede. Der Rest des Kapitels beschreibt detailliert den Einsatz von JavaScript Konstruktoren und Prototypen, um eine Objekthierarchie zu erstellen und vergleicht dieses mit der Sprache Java.

-
-
- 
- 
-  
-   
-   
-  
- 
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
Vergleich von Klassbasierten (Java) und Prototypebasierten (JavaScript) Objektsystemen
Klassenbasiert (Java)Prototypbasiert (JavaScript)
Klassen und Instanzen sind verschiedene Dinge.Alle Objekte können von anderen Objekt erben.
Definieren einer Klasse mit einer Klassendefinition; Instantiieren eine Klasse mit Konstruktormethoden.Definieren und Erstellen einer Menge von Objekten mit Konstruktorfunktionen.
Erstellt ein Objekt mit dem new Operator.Genauso.
Konstruiert eine Objekthierarchie mit Klassendefinitionen, um Unterklasse aus existierenden Klassen zu definieren.Konstruiert eine Objekthierarchie, indem ein Objekt als Prototyp mit einer Konstruktorfunktion verbunden werden.
Erbt Eigenschaften entlang der Klassenkette.Erbt Eigenschaften entlang der Prototypenkette.
Klassendefinitionen spezifizieren alle Eigenschaften von allen Klasseninstanzen. Man kann keine Eigenschaften dynamisch zur Laufzeit hinzufügen.Konstruktorfunktionen oder Prototypen spezifizieren eine initiale Menge von Eigenschaften. Man kann Eigenschaften dynamisch zu individuellen Objekten hinzufügen oder entfernen oder zu einer Menge von Objekten.

-
-
Das Mitarbeiter-Beispiel

-
-
Das restliche Kapitel benutzt die Mitarbeiterhierarchie, die in folgender Grafik dargestellt ist.

-
-

-

-
Eine einfache Objekthierarchie mit den folgenden Objekten:

-
-

-

-
-

-
    
- 
  • Employee (Mitarbeiter) hat die Eigenschafte name (die als Initialwert einen leerer String hat) und dept (Abteilung) (die als Initialwert "general" hat).
    • 
- 
  • Manager basiert auf Employee. Er fügt die Eigenschaft reports (Berichte) hinzu (die als Initialwert ein leeres Array hat und für ein Array von Employees vorgesehen ist).
    • 
- 
  • WorkerBee (Arbeitsbiene) basiert ebenfalls auf Employee. Er fügt die Eigenschaft projects hinzu (die als Initialwert ein leeres Array hat und für ein Array von Strings vorgesehen ist).
    • 
- 
  • SalesPerson (Verkäufer) basiert auf WorkerBee. Er fügt die Eigenschaft quota (Pensum) hinzu (die als Initialwert 100 hat). zudem überschreibt er die dept Eigenschaft mit dem Wert "sales", um anzudeuten, dass alle Verkäufer in der gleichen Abteilung sind.
    • 
- 
  • Engineer (Ingenieur) basiert auf WorkerBee. Er fügt die Eigenschaft machine (Maschine) hinzu (die als Initialwert einen leeren String hat) und überschreibt die Eigenschaft dept mit dem Wert "engineering".
    • 
-

-

-

-
-
Erstellen der Hierarchie

-
-
Es gibt viele Wege, um angemessene Konstruktorfunktionen für die Mitarbeiterhierarchie zu implementieren. Welchen man auswählt hängt stark davon ab, was in der Anwendung erreicht werden soll.

-
-
Dieser Abschnitt zeigt, wie man eine sehr einfache (und vergleichbar unflexible) Definition benutzen kann, um zu demonstrieren, wie die Vererbung funktioniert. In dieser Definition ist es nicht möglich jeden Eigenschaftswert zu spezifizieren, wenn ein Objekt erstellt wird. Die neu erstellten Objekte bekommen nur die Initialwerte und können später verändert werden.

-
-
In einer echten Anwendung würde man Konstruktoren so definieren, dass man diesen Eigenschaftswerte zur Erstellzeit übergeben kann (siehe Flexiblere Konstruktoren für mehr Informationen). Für den Anfang zeigen diese Definitionen wie die Vererbung funktioniert.

-
-
Die folgenden Java und JavaScript Employee Definitionen sind gleich. Der einzige Unterschied ist, dass in Java für jede Eigenschaft ein Typ definiert sein muss, in JavaScript jedoch nicht (das liegt daran, dass Java eine stark typisierte Sprache ist, während JavaScript eine schwach typisierte Sprache ist).

-
-

-
JavaScript

-
-
function Employee() {
-  this.name = '';
-  this.dept = 'general';
-}
-

-
-


- Java

-
-
public class Employee {
-   public String name = "";
-   public String dept = "general";
-}
-

-

-
-
Die Manager und WorkerBee Definitionen zeigen die Unterschiede bei der Spezifizierung eines Oberobjektes in der Vererbungskette. In JavaScript fügt man eine Prototypinstanz der Eigenschaft prototype der Konstruktorfunktion hinzu. Man kann dieses zu jedem Zeitpunkt nach der Definition des Konstruktors machen. In Java spezifiziert man die Oberklasse in der Klassendefinition. Man kann die Oberklasse nicht außerhalb der Klassendefinition ändern.

-
-

-
JavaScript

-
-
function Manager() {
-  Employee.call(this);
-  this.reports = [];
-}
-Manager.prototype =
-    Object.create(Employee.prototype);
-
-function WorkerBee() {
-  Employee.call(this);
-  this.projects = [];
-}
-WorkerBee.prototype =
-    Object.create(Employee.prototype);
-

-
-


- Java

-
-
public class Manager extends Employee {
-   public Employee[] reports =
-       new Employee[0];
-}
-
-
-
-public class WorkerBee extends Employee {
-   public String[] projects = new String[0];
-}
-
-
-

-

-
-
Die Engineer und SalesPerson Definition erstellt Objekte, welche von WorkerBee und somit auch von Employee abstammen. Ein Objekt von diesen Typen hat alle Eigenschaften der vorherigen Objekte in der Vererbungskette. Zudem überschreiben diese Definitionen den Wert der geerbten dept Eigenschaft mit einem neuen Wert für diese Objekte.

-
-

-
JavaScript

-
-
function SalesPerson() {
-   WorkerBee.call(this);
-   this.dept = 'sales';
-   this.quota = 100;
-}
-SalesPerson.prototype =
-    Object.create(WorkerBee.prototype);
-
-function Engineer() {
-   WorkerBee.call(this);
-   this.dept = 'engineering';
-   this.machine = '';
-}
-Engineer.prototype =
-    Object.create(WorkerBee.prototype);
-

-
-


- Java

-
-
public class SalesPerson extends WorkerBee {
-   public String dept = "sales";
-   public double quota = 100.0;
-}
-
-
-public class Engineer extends WorkerBee {
-   public String dept = "engineering";
-   public String machine = "";
-}
-
-

-

-
-
Mit diesen Definitionen kann man Instanzen dieser Objekte mit ihren Initialwerten und Eigenschaften erstellen. Die nächste Grafik zeigt diese JavaScript Definitionen, um neue Objekte zu erzeugen und die Werte der neuen Objekte.

-
-

-
Hinweis: Der Term Instanz hat eine spezielle technische Bedeutung in Klassenbasierten Sprachen. In diesen Sprachen ist eine Instanz eine individuelle Instanz von einer Klasse und ist fundamental anders als eine Klasse. In JavaScript gibt es diese technische Bedeutung nicht, weil JavaScript nicht zwischen Klassen und Instanzen unterscheidet. Immer wenn über JavaScript Instanzen gesprochen wird, ist das rein informell und bedeutet, dass ein Objekte mit einer Konstruktorfunktion erstellt wurde. So kann man in diesem Beispiel sagen, dass jane eine Instanz von Engineer ist. Ebenso haben die Terme Eltern, Kind, Vorfahre und Nachfahre keine formale Bedeutung in JavaScript; Man kann diese benutzen, um deutlich zu machen wo sich ein Objekt in der Prototypenkette befindet.

-

-
-
Objekte mit der einfachen Definition erstellen

-
-

-
Objekthierarchie

-
-
Die folgende Hierarchie wird mit dem Code auf der rechten Seite erstellt.

-
-

-
-
Individuelle Objekte = Jim, Sally, Mark, Fred, Jane, etc.

- "Instanzen" erstellt vom Konstruktor

-
-
var jim = new Employee;
-// Parentheses can be omitted if the
-// constructor takes no arguments.
-// jim.name is ''
-// jim.dept is 'general'
-
-var sally = new Manager;
-// sally.name is ''
-// sally.dept is 'general'
-// sally.reports is []
-
-var mark = new WorkerBee;
-// mark.name is ''
-// mark.dept is 'general'
-// mark.projects is []
-
-var fred = new SalesPerson;
-// fred.name is ''
-// fred.dept is 'sales'
-// fred.projects is []
-// fred.quota is 100
-
-var jane = new Engineer;
-// jane.name is ''
-// jane.dept is 'engineering'
-// jane.projects is []
-// jane.machine is ''
-

-

-
-
Objekteigenschaften

-
-
Dieser Abschnitt diskutiert, wie Objekte EIgenschaften von anderen Objekten in der Prototypenkette erben und was passiert, wenn eine Eigenschaft währende der Laufzeit hinzugefügt wird.

-
-
Eigenschaften vererben

-
-
Es wird vorausgesetzt, dass das Objekt mark als WorkerBee mit dem folgenden Statement erstellt wurde:

-
-
var mark = new WorkerBee;
-

-
-
Wenn JavaScript den new Operator sieht, erstellt es ein neues generisches Objekt und setzt implizit den Wert der internen Eigenschaft [[Prototype]] auf den Wert WorkerBee.prototype und setzt die this Referenz in der WorkerBee Konstruktorfunktion auf das neu erstellte Objekt. Die interne [[Prototype]] Eigenschaft legt die Prototypenkette fest, die zum Zurückgeben von Eigenschaftswerten benutzt wird. Sobald diese Eigenschaften gesetzt sind, gibt JavaScript das neue Objekt zurück und das Zuweisungsstatement setzt die Variable mark mit diesem Objekt.

-
-
Dieser Prozess fügt keine Werte in das mark-Objekt (lokale Werte) für Eigenschaften, die mark von der Prototypenkette erbt. Wenn man nach einem Wert einer Eigenschaft fragt, prüft JavaScript erst, ob der Wert in dem Objekt existiert. Wenn dies der Fall ist, wird dieser zurückgegeben. Wenn kein lokaler Wert vorhanden ist, prüft JavaScript die Prototypenkette (über die interne [[Prototype]] Eigenschaft). Wenn ein Objekt in der Prototypenkette einen Wert für die Eigenschaft hat, wird diese zurückgegeben. Wenn keine solche Eigenschaft gefunden wird, geht JavaScript davon aus, dass das Objekt keine solche Eigenschaft hat. Dementsprechend hat das mark Objekt folgende Eigenschaften und Werte:

-
-
mark.name = '';
-mark.dept = 'general';
-mark.projects = [];
-

-
-
Das mark Objekt hat lokale Werte für die name und dept Eigenschaft über den Employee Konstruktor zugewiesen bekommen. Es wurde ein Wert für die Eigenschaft projects vom WorkerBee Konstruktor zugewiesen. Dieses gibt die Vererbung von Eigenschaften und Werten in JavaScript her. Einige Feinheiten dieses Prozesses werden in Eigenschaftsvererbung erneut besuchen behandelt.

-
-
Weil diese Konstruktoren keine instanzspezifischen Werte bereitstellen können, sind diese Informationen generisch. Die Eigenschaftswerte sind die Standardwerte, die bei der Erstellung aller mit WorkerBee erstellten Objekt genutzt werden. Man kann natürlich die Werte jeder Eigenschaft ändern. So kann man spezifische Informationen für mark wie folgt vergeben:

-
-
mark.name = 'Doe, Mark';
-mark.dept = 'admin';
-mark.projects = ['navigator'];

-
-
Eigenschaften hinzufügen

-
-
In JavaScript kann man zu jedem Objekt zur Laufzeit Eigenschaften hinzufügen. Man ist nicht nur auf die unterstützten Eigenschaften der Konstruktorfunktion angewiesen. Um eine Eigenschaft spezifisch zu einem einfachen Objekt hinzuzufügen, kann man diese wie folgt dem Objekt zuweisen:

-
-
mark.bonus = 3000;
-

-
-
Jetzt hat das mark Objekt eine bonus Eigenschaft, aber kein anderer WorkerBee hat diese Eigenschaft.

-
-
Wenn man eine neue Eigenschaft zu einem Objekt hinzufügt, welches als Prototyp für eine Konstruktorfunktion benutzt wird, fügt man die Eigenschaft zu allen Objekten hinzu, die Eigenschaften von diesem Prototypen erben. Zum Beispiel kann man eine specialty Eigenschaft zu allen employees mit dem folgenden Statement hinzufügen:

-
-
Employee.prototype.specialty = 'none';
-

-
-
Nach der Ausführung dieses Statements durch JavaScript, hat das mark Objekt auch die specialty Eigenschaft mit dem Wert "none". Die folgende Grafik zeigt den Effekt des Hinzufügens dieser Eigenschaft zum Employee Prototyp und das Überschreiben des Engineer Prototypen.

-
-


- Eigenschaften hinzufügen

-
-
Flexiblere Konstruktoren

-
-
Mit den bisher gezeigten Konstruktorfunktionen kann man beim Erstellen einer Instanz keine Eigenschaftswerte angeben. Wie bei Java kann man Konstruktoren Argumente zum Initialisieren von Eigenschaftswerten für Instanzen übergeben. Die folgende Abbildung zeigt eine Möglichkeit, dies zu tun.

-
-


- Spezifizieren von Eigenschaften in einem Konstruktor, Teil 1

-
-
Die folgende Tabelle zeigt die Java und JavaScript Definitionen für diese Objekte.

-
-

-
JavaScript

-
-
Java

-

-
-

-
function Employee(name, dept) {
-  this.name = name || '';
-  this.dept = dept || 'general';
-}
-

-
-
public class Employee {
-   public String name;
-   public String dept;
-   public Employee () {
-      this("", "general");
-   }
-   public Employee (String name) {
-      this(name, "general");
-   }
-   public Employee (String name, String dept) {
-      this.name = name;
-      this.dept = dept;
-   }
-}
-

-

-
-

-
function WorkerBee(projs) {
-
- this.projects = projs || [];
-}
-WorkerBee.prototype = new Employee;
-

-
-
public class WorkerBee extends Employee {
-   public String[] projects;
-   public WorkerBee () {
-      this(new String[0]);
-   }
-   public WorkerBee (String[] projs) {
-      projects = projs;
-   }
-}
-

-

-
-

-
-function Engineer(mach) {
-   this.dept = 'engineering';
-   this.machine = mach || '';
-}
-Engineer.prototype = new WorkerBee;
-

-
-
public class Engineer extends WorkerBee {
-   public String machine;
-   public Engineer () {
-      dept = "engineering";
-      machine = "";
-   }
-   public Engineer (String mach) {
-      dept = "engineering";
-      machine = mach;
-   }
-}
-

-

-
-
Diese JavaScript Definitionen benutzen eine spezielle Syntax für das Setzen von Standardwerten:

-
-
this.name = name || '';
-

-
-
Der logische ODER Operator (||) von JavaScript wertet das erste Argument aus. Wenn das Argument zu true konvertiert wird, gibt der Operator dieses zurück. Andernfalls wird der Wert des zweiten Arguments zurückgegeben. Demnach prüft diese Zeile Code, ob name einen nützlichen Wert für die name Eigenschaft hat. Wenn das der Fall ist, wird this.name auf diesen Wert gesetzt. Andernfalls wird this.name auf den leeren String gesetzt. Dieses Kapitel nutzt diese Syntax aus Gründen der Kürze; es kann jedoch auf den ersten Blick verwirrend sein.

-
-

-
Hinweis: Das kann möglicherweise nicht wie erwartet funktionieren, wenn der Konstruktorfunktion Argumente übergeben werden, welche zu false konvertiert werden (wie 0 (null) und der leere String ("")). In diesen Fällen wird der Standardwert benutzt.

-

-
-
Mit dieser Definition, kann man beim Erstellen einer Objektinstanz spezifische Werte für die lokal definierten Eigenschaften benutzen. Man kann das folgende Statement nutzen, um einen neuen Engineer zu erstellen:

-
-
var jane = new Engineer('belau');
-

-
-
Jane's Eigenschaften sind jetzt:

-
-
jane.name == '';
-jane.dept == 'engineering';
-jane.projects == [];
-jane.machine == 'belau';
-

-
-
Zu beachten ist, dass man mit diesen Definitionen keinen Initialwert für vererbte Eigenschaft wie name spezifizieren kann. Wenn man einen Initialwert für vererbe Eigenschaften in JavaScript spezifizieren möchte, muss man mehr Code zum Konstruktor hinzufügen.

-
-
Bisher hat die Konstruktorfunktion ein generisches Objekt erstellt und dann lokale Eigenschaften und Werte für das neue Objekt angegeben. Man kann den Konstruktor weitere Eigenschaften hinzufügen lassen, indem Sie die Konstruktorfunktion für ein Objekt in der Prototypkette direkt aufrufen. Die folgende Abbildung zeigt diese neuen Definitionen.

-
-


- Spezifizieren von Eigenschaften in einem Konstruktor, Teil 2

-
-
Sehen wir uns eine dieser Definitionen genauer an. Hier ist die neue Definition für den Engineer-Konstruktor:

-
-
function Engineer(name, projs, mach) {
-  this.base = WorkerBee;
-  this.base(name, 'engineering', projs);
-  this.machine = mach || '';
-}
-

-
-
Angenommen, man erstellt ein neues Engineer-Objekt wie folgt:

-
-
var jane = new Engineer('Doe, Jane', ['navigator', 'javascript'], 'belau');
-

-
-
JavaScript folgt folgenden Schritten:

-
-
    
- 
  1. Der new Operator erstellt ein generisches Objekt und setzt die __proto__ EIgenschaft auf Engineer.prototype.
    2. 
- 
  2. Der new Operator übergibt das neue Objekt dem Engineer Konstruktor als Wert des this Schlüsselwortes.
    3. 
- 
  3. Der Konstruktor erstellt eine neue Eigenschaft namens base für dieses Objekt und weist dieser den Wert des WorkerBee Konstruktors zu. Das macht den WorkerBee Konstruktor zu einer Methode des Engineer Objektes. Der Name der base Eigenschaft ist nicht festgelegt. Man kann jeden legalen Eigenschaftsnamen nutzen; base erinnert einfach an den Zweck.
    4. 
- 
  4. Der Konstruktor ruft die base Methode auf, übergibt als Argumente zwei der Argumente des Konstruktors ("Doe, Jane" und ["navigator", "javascript"]) und zudem den String "engineering". Der explizite Einsatz von "engineering" im Konstruktor zeigt, dass alle Engineer Objekte den selben Wert für dei geerbte dept Eigenschaft haben und dieser Wert den vererbten Wert von Employee überschreibt.
    5. 
- 
  5. Weil base eine Methode von Engineer ist, weshalb JavaScrip beim Aufruf von base das Schlüsselwort this an das erstellte Objekt aus Schritt 1 bindet. Somit übergibt die WorkerBee Funktion die "Doe, Jane" und "engineering" Argumente zu der Employee Konstruktorfunktion. Nach der Rückgabe der Employee Konstruktorfunktion verwendet die WorkerBee Funktion das restliche Argument, um die projects Eigenschaft zu setzen.
    6. 
- 
  6. Nach der Rückgabe der base Methode initialisiert der Engineer Konstruktor die Objekteigenschaft machine mit "belau".
    7. 
- 
  7. Nach der Rückgabe des Konstruktors weist JavaScript das neue Objekte, der jane Variablen zu.
    8. 
-

-
-
Man kann denken, dass man, nachdem der WorkerBee-Konstruktor innerhalb des Engineer-Konstruktors aufgerufen wird, die Vererbung für das Engineer-Objekte entsprechend eingerichtet hat. Das ist nicht der Fall. Der Aufruf des WorkerBee Konstruktors stellt sicher, dass ein Engineer Objekt mit den Eigenschaften beginnt, die in allen aufgerufenen Konstruktorfunktionen angegeben sind. Wenn jedoch später eine Eigenschaft zum Employee oder WorkerBee Prototyp hinzugefügt wird, wird diese Eigenschaft nicht von Engineer Objekt geerbt. Nimmt man zum Beispiel folgende Statements an:

-
-
function Engineer(name, projs, mach) {
-  this.base = WorkerBee;
-  this.base(name, 'engineering', projs);
-  this.machine = mach || '';
-}
-var jane = new Engineer('Doe, Jane', ['navigator', 'javascript'], 'belau');
-Employee.prototype.specialty = 'none';
-

-
-
Das jane Objekt erbt nicht die specialty Eigenschaft. Man muss explizit den Prototypen einstellen, um dynamische Vererbung sicherzustellen. Nimmt man stattdessen folgende Statements an:

-
-
function Engineer(name, projs, mach) {
-  this.base = WorkerBee;
-  this.base(name, 'engineering', projs);
-  this.machine = mach || '';
-}
-Engineer.prototype = new WorkerBee;
-var jane = new Engineer('Doe, Jane', ['navigator', 'javascript'], 'belau');
-Employee.prototype.specialty = 'none';
-

-
-
Jetzt ist der Wert der specialty Eigenschaft des jane Objektes "none".

-
-
Ein anderer Weg wür Vererbung ist der Einsatz der call() / apply() Methoden. Die folgenden Beispiele sind äquivalent:

-
-

-
function Engineer(name, projs, mach) {
-  this.base = WorkerBee;
-  this.base(name, 'engineering', projs);
-  this.machine = mach || '';
-}
-

-
-
function Engineer(name, projs, mach) {
-  WorkerBee.call(this, name, 'engineering', projs);
-  this.machine = mach || '';
-}
-

-

-
-
Der Einsatz von javascript call() Methode ergibt ein sauberere Implementierung, weil base nicht mehr benötigt wird.

-
-
Eigenschaftsvererbung erneut besuchen

-
-
Im vorangegangenen Abschnitten wurde beschrieben, wie JavaScript Konstruktoren und Prototypen Hierarchien und Vererbung bereitstellt. Dieser Abschnitt diskutiert einige Feinheiten, die in der vorherigen Diskussion nicht unbedingt ersichtlich waren.

-
-
Lokale versus vererbte Werte

-
-
Wenn man auf eine Objekteigenschaft zugreift, führt JavaScript diese Schritte, wie vorhin in dem Kapitel beschrieben, durch:

-
-
    
- 
  1. Prüft, ob der Wert lokal existiert. Ist das der Fall, wird er zurückgegeben.
    2. 
- 
  2. Wenn kein lokaler Wert vorhanden ist, wird die Prototypenkette (über die __proto__ Eigenschaft) geprüft.
    3. 
- 
  3. Wenn ein Objekt in der Prototypenkette einen Wert für die spezifizierte Eigenschaft hat, wird dieser zurückgegeben.
    4. 
- 
  4. Wenn keine solche Eigenschaft gefunden wird, hat das Objekt diese Eigenschaft nicht.
    5. 
-

-
-
Das Resultat dieser Schritte hängt davon ab, wie Dinge im Code definiert sind. Das originale Beispiel hat diese Definition:

-
-
function Employee() {
-  this.name = '';
-  this.dept = 'general';
-}
-
-function WorkerBee() {
-  this.projects = [];
-}
-WorkerBee.prototype = new Employee;
-

-
-
Nimmt man mit diesen Definitionen an, man erstellt amy als eine Instanz von WorkerBee mit folgendem Statement:

-
-
var amy = new WorkerBee;
-

-
-
Das amy Objekt hat eine lokale Eigenschaft, projects. Die Werte der name und dept Eigenschaften sind nicht lokal in amy und werden über die Objekteigenschaft __proto__ von amy erreicht. Deshalb hat amy diese Eigenschaftswerte:

-
-
amy.name == '';
-amy.dept == 'general';
-amy.projects == [];
-

-
-
Nimmt man jetzt an, man ändert den Wert der name Eigenschaft in dem Employee Prototyp:

-
-
Employee.prototype.name = 'Unknown';
-

-
-
Auf den ersten Blick erwartet man, dass der neue Wert an alle Instanzen von Employee propagiert wird. Jedoch ist das falsch.

-
-
Wenn man irgendeine Instanz des Employee Objektes erstellt, bekommt die Instanz einen lokalen Wert für die name Eigenschaft (der leere String). Das bedeutet, wenn man den WorkerBee Prototyp mit einem neuen Employee Objekt einstellt, dass WorkerBee.prototype einen lokalen Wert für die name Eigenschaft hat. Wenn demnach JavaScript nach der name Eigenschaft im amy Objekt sucht (eine Instanz von WorkerBee), wird der lokale Wert der Eigenschaft WorkerBee.prototype gefunden. Demnach wird nicht tiefer in der Kette in Employee.prototype gesucht.

-
-
Wenn man den Wert einer Objekteigenschaft zur Laufzeit ändert möchte und den neuen Wert für alle Nachkommenschaften dieses Objektes haben möchte, kann man die Eigenschaft nicht in der Konstruktorfunktion des Objektes definieren. Stattdessen fügt man sie zu dem Konstruktor assoziierten Prototyp hinzu. Angenommen man ändert zum Beispiel deb vorherigen Code wie folgt:

-
-
function Employee() {
-  this.dept = 'general';    // Note that this.name (a local variable) does not appear here
-}
-Employee.prototype.name = '';    // A single copy
-
-function WorkerBee() {
-  this.projects = [];
-}
-WorkerBee.prototype = new Employee;
-
-var amy = new WorkerBee;
-
-Employee.prototype.name = 'Unknown';
-

-
-
In diesem Fall wird die name Eigenschaft von amy "Unknown".

-
-
Das Beispiel zeigt, dass wenn man Standardwerte für Objekteigenschaften haben möchte und zudem dass diese zur Laufzeit geändert werden können, muss man die Eigenschaft im Konstruktorprototypen setzen und nicht in der Konstruktorfunktion.

-
-
Instanzbeziehungen prüfen

-
-
Das Nachgucken von Eigenschaften in JavaScript prüft erst die eigenen Eigenschaften und wenn die Eigenschaft dort nicht ist die Eigenschaften der speziellen Eigenschaft __proto__. Das setzt sich rekursiv fort; der Prozess wird "nachschlagen in der Prototypenkette" genannt.

-
-
Die spezielle Eigenschaft __proto__ wird beim erstellen des Objektes gesetzt; sie wird auf den Wert der prototype Eigenschaft des Konstruktors gesetzt. Deshalb erstellt der Ausdruck new Foo() ein Objekt mit __proto__ == Foo.prototype. Folglich ändert die Änderung der Foo.prototype Eigenschaft alle Nachschlage Prozesse für alle Objekte, die mit new Foo() erstellt wurden.

-
-
Alle Objekte haben eine __proto__ Objekteigenschaft (außer Object); Alle Funktionen haben eine prototype Objekteigenschaft. So können Objekte über 'Prototypenvererbung' mit anderen Objekten verbunden werden. Man kann auf Vererbung testen, indem __proto__ eines Objekts mit einer prototype Objekt einer Funktion verglichen wird. JavaScript hat dafür eine Kurzschreibweise: der instanceof Operator prüft ein Objekt gegen eine Funktion und gibt true zurück, wenn das Objekt von dem Funktionsprototyp erbt. Zum Beispiel:

-
-
var f = new Foo();
-var isTrue = (f instanceof Foo);

-
-
Für ein detailierteres Beispiel nehmen wir an, dass wir die gleichen Definition wie in Eigenschaften vererben haben. Ein Engineer wird wie folgt erstellt:

-
-
var chris = new Engineer('Pigman, Chris', ['jsd'], 'fiji');
-

-
-
Mit diesem Objekt, sind alle folgenden Statements true:

-
-
chris.__proto__ == Engineer.prototype;
-chris.__proto__.__proto__ == WorkerBee.prototype;
-chris.__proto__.__proto__.__proto__ == Employee.prototype;
-chris.__proto__.__proto__.__proto__.__proto__ == Object.prototype;
-chris.__proto__.__proto__.__proto__.__proto__.__proto__ == null;
-

-
-
Damit kann man eine instanceOf Funktion wie folgt schreiben:

-
-
function instanceOf(object, constructor) {
-   object = object.__proto__;
-   while (object != null) {
-      if (object == constructor.prototype)
-         return true;
-      if (typeof object == 'xml') {
-        return constructor.prototype == XML.prototype;
-      }
-      object = object.__proto__;
-   }
-   return false;
-}
-

-
-
Hinweis: Die obige Implementierung überprüft den Typ des Objekts gegen "xml", um eine Eigenart der Darstellung von XML-Objekten in neueren JavaScript-Versionen zu umgehen. die wesentlichen Details sind in {{bug(634150)}}, beschrieben.

-
-
Der Einsatz der oben definierten instanceOf Funktion führt bei folgenden Ausdrücken zu true:

-
-
instanceOf(chris, Engineer)
-instanceOf(chris, WorkerBee)
-instanceOf(chris, Employee)
-instanceOf(chris, Object)
-

-
-
Jedoch ist der folgende Ausdruck false:

-
-
instanceOf(chris, SalesPerson)
-

-
-
Globale Informationen in Konstruktoren

-
-
Wenn man einen Konstruktor erstellt, muss man vorsichtig sein, wenn man globale Informationen im Konstruktor einstellt. Nimmt man zum Beispiel an, man möchte eine eindeutige ID, die automatisch für jeden neuen employee zugewiesen wird, kann man die folgende Definition für Employee benutzen:

-
-
var idCounter = 1;
-
-function Employee(name, dept) {
-   this.name = name || '';
-   this.dept = dept || 'general';
-   this.id = idCounter++;
-}
-

-
-
Wenn man mit dieser Definition ein neuen Employee erstellt, weist der Konstruktor die nächste ID in der Sequenz zu und inkrementiert dann den globalen ID-Zähler. Wenn die nächsten Statemants die folgenden sind, so ist victoria.id == 1 und harry.id == 2:

-
-
var victoria = new Employee('Pigbert, Victoria', 'pubs');
-var harry = new Employee('Tschopik, Harry', 'sales');
-

-
-
Auf den ersten Blick ist das super. Jedoch wird idCounter jedes mal, wenn ein Employee erstellt wird, wofür auch immer, inkrementiert. Wenn man eine Employee Hierarchie wie im Kapitel oben gezeigt, so wird der Employee Konstruktor für jedes einstellen des Prototypen aufgerufen. Angenommen man hat den folgenden Code:

-
-
var idCounter = 1;
-
-function Employee(name, dept) {
-   this.name = name || '';
-   this.dept = dept || 'general';
-   this.id = idCounter++;
-}
-
-function Manager(name, dept, reports) {...}
-Manager.prototype = new Employee;
-
-function WorkerBee(name, dept, projs) {...}
-WorkerBee.prototype = new Employee;
-
-function Engineer(name, projs, mach) {...}
-Engineer.prototype = new WorkerBee;
-
-function SalesPerson(name, projs, quota) {...}
-SalesPerson.prototype = new WorkerBee;
-
-var mac = new Engineer('Wood, Mac');
-

-
-
Angenommen die Definitionen lassen hier die base Eigenschaft weg und rufen den Konstruktor oberhalb in der Prototypenkette auf. In diesem Fall, bekommt das mac Objekt die id 5.

-
-
Abhängig von der Anwendung ist es sinnvoll oder auch nicht, dass der Zähler an diesen Stellen extra hochzählt. Wenn man an dem exakten Wert des Zählers interessiert ist, ist eine mögliche Lösung den folgenden Konstruktor zu nutzen:

-
-
function Employee(name, dept) {
-   this.name = name || '';
-   this.dept = dept || 'general';
-   if (name)
-      this.id = idCounter++;
-}
-

-
-
Wenn eine Instanz von Employee erstellt wird, der als Prototyp genutzt wird, übergibt man keine Argumente an den Konstruktor. Benutzt man diese Definition des Konstruktors, wird keine id vergeben und der Zäher nicht aktualisiert, wenn dem Konstruktor keine Argumente übergeben werden. Daraus folgt, dass man einem Employee einen Namen geben muss, damit er eine id erhält. In diesem Beispiel ist mac.id == 1.

-
-
Alternativ kann man WorkerBee eine Kopie des Employee Prototypenobjektes zuweisen:

-
-
WorkerBee.prototype = Object.create(Employee.prototype);
-// instead of WorkerBee.prototype = new Employee
-

-
-
Keine Mehrfachvererbung

-
-
Einige objektorientierte SPrachen erlauben Mehrfachvererbung. Das bedeutet, dass ein Objekt die Eigenschaften und Werte von mehreren Elternobjekte erben kann. JavaScript unterstützt keine Mehrfachvererbung.

-
-
Vererbung von Eigenschafteswerten funktioniert zu JavaScripts Laufzeit durch das Suchen in der Prototypenkette eines Objektes. Weil ein Objekt ein einzigen Prototypen hat, kann JavaScript nicht dynamisch von mehr als einer Prototypenkette erben.

-
-
In JavaScript kann eine Konstruktorfunkton mehrere andere Konstruktorfunktionen in sich aufrufen. Das gibt die Illusion von Mehrfachvererbung. Zum Beispiel die folgenden Statements:

-
-
function Hobbyist(hobby) {
-   this.hobby = hobby || 'scuba';
-}
-
-function Engineer(name, projs, mach, hobby) {
-   this.base1 = WorkerBee;
-   this.base1(name, 'engineering', projs);
-   this.base2 = Hobbyist;
-   this.base2(hobby);
-   this.machine = mach || '';
-}
-Engineer.prototype = new WorkerBee;
-
-var dennis = new Engineer('Doe, Dennis', ['collabra'], 'hugo');
-

-
-
Vorausgesetzt wird, die Definition von WorkerBee früher in diesem Kapitel. In diesem Fall hat das dennis Objekt die folgenden Eigenschaften:

-
-
dennis.name == 'Doe, Dennis';
-dennis.dept == 'engineering';
-dennis.projects == ['collabra'];
-dennis.machine == 'hugo';
-dennis.hobby == 'scuba';
-

-
-
dennis hat also die hobby Eigenschaften des Hobbyist Konstruktors bekommen. Setzt man jetzt noch voraus, dass danach Eigenschaften zum Konstruktorprototypen Hobbyist hinzugefügt werde:

-
-
Hobbyist.prototype.equipment = ['mask', 'fins', 'regulator', 'bcd'];
-

-
-
Das dennis Objekt erbt diese neue Eigenschaft nicht.

-
-
{{PreviousNext("Web/JavaScript/Guide/Mit_Objekten_arbeiten", "Web/JavaScript/Guide/Using_promises")}}

diff --git a/files/de/web/javascript/guide/functions/index.html b/files/de/web/javascript/guide/functions/index.html
new file mode 100644
index 0000000000..3eeeb4f4e5
--- /dev/null
+++ b/files/de/web/javascript/guide/functions/index.html
@@ -0,0 +1,657 @@
+---
+title: Funktionen
+slug: Web/JavaScript/Guide/Funktionen
+tags:
+  - Beginner
+  - Functions
+  - Guide
+  - JavaScript
+  - 'l10n:priority'
+translation_of: Web/JavaScript/Guide/Functions
+---
+
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Schleifen_und_Iterationen", "Web/JavaScript/Guide/Ausdruecke_und_Operatoren")}}

+
+
Funktionen sind ein Grundbaustein in JavaScript. Eine Funktion ist eine Prozedur - eine Reihe von Anweisungen, um eine Aufgabe auszuführen oder eine Wert auszurechnen. Um Funktionen zu verwenden, müssen diese im Scope (Gültigkeitsbereich) deklariert werden, in dem sie ausgeführt werden soll.

+
+
Siehe ebenfalls in der ausführlichen Referenz über JavaScript Funktionen nach, um noch mehr Detail zu erfahren.

+
+
Funktionen definieren

+
+
Funktionsdeklaration

+
+
Eine Funktionsdefinition (auch Funktionsdeklaration oder Funktionsanweisung genannt) besteht aus dem Schlüsselwort function, gefolgt von:

+
+
    
+ 
  • Den Namen der Funktion.
    • 
+ 
  • Eine Liste von Parametern, die in runden Klammern geschrieben sind und durch Kommas getrennt sind.
    • 
+ 
  • Die JavaScript Anweisungen, die durch die Funktion definiert werden und innerhalb von geschweiften Klammern steht.
    • 
+

+
+
Das folgende Beispiel definiert eine Funktion mit dem Namen square:

+
+
function square(number) {
+  return number * number;
+}
+

+
+
Die Funktion square nimmt einen Parameter entgegen, welcher number heißt. Die Funktion besteht aus einer Anweisung, die besagt, dass der Parameter der Funktion (das ist number), multipliziert mit sich selbst, zurückgegeben werden soll. Dabei gibt das  return Statement an, welcher Wert von der Funktion zurückzugeben wird.

+
+
return number * number;
+

+
+
Bei Primitive Parameter, wie Zahlen, wird der Funktionen der Wert übergeben. Werte, die der Funktion übergeben wurden und innerhalb der Funktion geändert werden, ändert den Wert zwar innerhalb der Funktion, aber nicht global oder in der aufrufenden Funktion.

+
+
Wird ein Objekt als Parameter übergeben (z. B. ein nicht primitiver Wert wie ein  {{jsxref("Array")}} oder ein selbst definiertes Objekt) und die Funktion ändert die Objekteigenschaften, so sind die Änderungen außerhalb der Funktion sichtbar, wie im folgendem Beispiel veranschaulicht wird:

+
+
function myFunc(theObject) {       //Funktiondekleration
+  theObject.make = 'Toyota';
+}
+
+var mycar = {make: 'Honda', model: 'Accord', year: 1998};
+var x, y;
+
+x = mycar.make;  // x bekommt den Wert "Honda"
+
+myFunc(mycar);
+y = mycar.make;  // y  bekommt den Wert "Toyota"
+                 // (die make Eigenschaft wurde in der Funktion geändert)

+
+
Funktionsausdrücke

+
+
Während die Funktionsdeklarationen oben syntaktisch ein Statement sind, kann eine Funktion auch durch Funktionsausdrücke erstellt werde. Derartige Funktionen können auch anonym sein; denn Funktionen benötigten keinen Namen. So kann zum Beispiel die Funktion square auch so definiert werden:

+
+
var square = function(number) { return number * number; };
+var x = square(4); // x bekommt den Wert 16

+
+
Jedoch kann die Funktion auch einen Name haben, um sich innerhalb der Funktion selbst aufzurufen oder die Funktion im Stack Traces des Debuggers zu identifizieren zu können:

+
+
var factorial = function fac(n) { return n < 2 ? 1 : n * fac(n - 1); };
+
+console.log(factorial(3));
+

+
+
Funktionsausdrücke sind praktisch, um Funktionen als ein Argument einer anderen Funktion zu übergeben. Das folgende Beispiel zeigt die Definition einer map Funktion, die eine Funktion als ersten Parameter erwartet:

+
+
function map(f, a) {
+  var result = [],i; // erstellt ein neues Array
+  for (i = 0; i != a.length; i++)
+    result[i] = f(a[i]);
+  return result;
+}
+

+
+
Im folgenden Quelltext wird einer Funktion eine Funktion übergeben, welche zuvor durch einen Funktions-Ausdruck definiert wurde. Diese Funktion wird für jedes Element in einem Array (zweiter Parameter) ausgeführt.

+
+
function map(f, a) {
+  var result = []; // erstellt ein neues Array
+  var i;
+  for (i = 0; i < a.length; i++) {
+    result[i] = f(a[i]);
+  }
+  return result;
+}
+var f = function(x) {
+  return x * x * x;
+}
+var numbers = [0, 1, 2, 5, 10];
+var cube = map(f,numbers);
+console.log(cube);
+

+
+
gibt [0, 1, 8, 125, 1000]  zurück.

+
+
In JavaScript kann eine Funktion definiert werden, wenn eine Bedingung erfüllt ist. Zum Beispiel wird myFunc nur definiert, wenn num gleich 0 ist:

+
+
var myFunc;
+if (num === 0) {
+  myFunc = function(theObject) {
+    theObject.make = 'Toyota';
+  }
+}

+
+
Im Unterschied zu den hier gezeigten Funktionsdeklarationen, kann man auch den {{jsxref("Function")}} Konstruktor verwenden, um eine Funktion von einem String zur Laufzeit zu erstellen, ähnlich der {{jsxref("eval()")}} Funktion.

+
+
Eine Methode ist eine Funktion, die Eigenschaft eines Objektes ist. Mehr Informationen über Objekt und Methoden sind im Artikel "Mit Objekten arbeiten" zu finden.

+
+
Aufruf von Funktionen

+
+
Das Definieren einer Funktion führen diese noch nicht aus. Die Definition gibt der Funktion lediglich einen Namen und beschreibt was geschehen soll, wenn die Funktion aufgerufen wird. Erst der Aufruf ermöglicht es die Aktionen mit den angegebenen Parametern durchzuführen. Zum Beispiel wird die vorher definierte Funktion square so aufgerufen:

+
+
square(5);
+

+
+
Es wird die Funktion mit dem Argument 5 aufgerufen. Die Funktion führt ihre Anweisungen aus und gibt den Wert 25 zurück.

+
+
Funktionen müssen im Scope (Gültigkeitsbereich) sein, wenn sie aufgerufen werden, können jedoch auch erst später definiert werden, wie im folgenden Beispiel:

+
+
console.log(square(5));
+/* ... */
+function square(n) { return n * n; }
+

+
+
Der Scope einer Funktion ist die Funktion in der sie deklariert wird, oder das gesamte Programm, falls sie auf oberster Ebene deklariert wird.

+
+

+
Hinweis: Nur die oben angegebene Syntax für Funktionen wird funktionieren (function funcName(){}). Der folgende Code funktioniert nicht. Das bedeutet, dass das nur mit Funktionsdeklarationen funktioniert aber nicht mit Funktionsausdrücken.

+

+
+
console.log(square); // square ist mit dem Initialwert undefined gehoisted.
+console.log(square(5)); // TypeError: square is not a function
+var square = function(n) {
+  return n * n;
+}
+

+
+
Die Argumente einer Funktion sind nicht auf Strings und Nummern limitiert, denn es können auch ganze Objekte übergeben werden. Die showProps() Funktion (definiert in Beitrag "Arbeiten mit Objekten") ist ein Beispiel für einer Funktion, die Objekte als Argument entgegennimmt.

+
+
Eine Funktion kann sich selbst Aufrufen. Zum Beispiel berechnet folgende Funktion die Fakultät rekursiv:

+
+
function factorial(n) {
+  if ((n === 0) || (n === 1))
+    return 1;
+  else
+    return (n * factorial(n - 1));
+}
+

+
+
Die Fakultät von 1 bis 5 kann wie folgt berechnet werden:

+
+
var a, b, c, d, e;
+a = factorial(1); // a wird der Wert 1 zugewiesen
+b = factorial(2); // b wird der Wert 2 zugewiesen
+c = factorial(3); // c wird der Wert 6 zugewiesen
+d = factorial(4); // d wird der Wert 24 zugewiesen
+e = factorial(5); // e wird der Wert 120 zugewiesen
+

+
+
Es gibt aber noch weitere Möglichkeiten Funktionen aufzurufen. Oftmals gibt es Fälle, in denen Funktionen dynamisch aufgerufen werden müssen, die Anzahl der Argumente variiert oder der Kontext einer Funktion zur Laufzeit gesetzt werden muss. Das zieht nach sich, dass Funktionen selbst Objekte sind, die Methoden haben (siehe das {{jsxref("Function")}} Objekt). Eine diese Methoden ist die {{jsxref("Function.apply", "apply()")}} Methode, mit der man die oben genannten Aufgaben lösen kann.

+
+
Scopes (Gültigkeitsbereiche) von Funktionen

+
+
Variablen, die in einer Funktion definiert werden, können nicht außerhalb der Funktion erreicht werden, weil die Variablen nur im Scope (Gültigkeitbereich) der Funktion definiert sind. Im Gegensatz dazu kann eine Funktion alle Variablen und Funktionen erreichen, die in dem Scope definiert wurden, in dem auch die Funktion definiert wurde. Anders gesagt kann eine Funktion, die im globalen Scope definiert wurde, alle Variablen und Funktionen des globalen Scopes erreichen. Wenn eine Funktion in einer Funktion definiert wird, kann die innere Funktion auf alle Definitionen seiner Elternfunktion und alle Definitionen, auf die die Elternfunktion Zugriff hat, zugreifen.

+
+
// Die folgenden Variablen sind im globalen Scope definiert
+var num1 = 20,
+    num2 = 3,
+    name = 'Chamahk';
+
+// Diese Funktion ist im globalen Scope definiert
+function multiply() {
+  return num1 * num2;
+}
+
+multiply(); // gibt 60 zurück
+
+// Ein Beispiel für verschachtelte Funktionen
+function getScore() {
+  var num1 = 2,
+      num2 = 3;
+
+  function add() {
+    return name + ' scored ' + (num1 + num2);
+  }
+
+  return add();
+}
+
+getScore(); // gibt "Chamahk scored 5" zurück
+

+
+
Scope und der Funktionsstack

+
+
Rekursion

+
+
Eine Funktion kann sich selbst referenzieren und aufrufen. Dabei gibt es drei Möglichkeiten, wie eine Funktion sich selbst referenzieren kann:

+
+
    
+ 
  1. Der Funktionsname
    2. 
+ 
  2. arguments.callee
    3. 
+ 
  3. Eine im Scope liegende Variable, die auf die Funktion referenziert.
    4. 
+

+
+
Nimmt man zum Beispiel folgende Funktion:

+
+
var foo = function bar() {
+   // Anweisungen
+};
+

+
+
Folgende Anweisungen im Körper der Funktion bewirken alle das Gleiche:

+
+
    
+ 
  1. bar()
    2. 
+ 
  2. arguments.callee()
    3. 
+ 
  3. foo()
    4. 
+

+
+
Eine Funktion, die sich selbst aufruft, wird rekursive Funktion genannt. Rekursion ist dabei vergleichbar mit einer Schleife. Beide führen den selben Quelltext mehrfach aus und beide benötigen eine Bedingung (um eine unendliche Schleife zu vermeiden oder eine unendliche Rekursion zu vermeiden). Das nächste Beispiel zeigt eine Schleife:

+
+
var x = 0;
+while (x < 10) { // "x < 10" ist die Schleifenbedingung
+   // do stuff
+   x++;
+}
+

+
+
Diese Schleife kann in eine rekursive Funktion konvertiert werden, die aufgerufen wird:

+
+
function loop(x) {
+  if (x >= 10) // "x >= 10" ist die Abbruchbedingung (gleich zu "!(x < 10)")
+    return;
+  // do stuff
+  loop(x + 1); // der rekursive Aufruf
+}
+loop(0);
+

+
+
Jedoch können manche Algorithmen nicht in eine einfache Schleife umgewandelt werden. Zum Beispiel kann das Abrufen aller Knoten einer Baumstruktur (z. B. DOM) einfacher rekursiv realisieren werden:

+
+
function walkTree(node) {
+  if (node == null) //
+    return;
+  // do something with node
+  for (var i = 0; i < node.childNodes.length; i++) {
+    walkTree(node.childNodes[i]);
+  }
+}
+

+
+
Verglichen mit der Funktion loop, erzeugt hier jeder rekursive Aufruf mehrere weitere rekursive Aufrufe.

+
+
Es ist möglich jeden rekursiven Algorithmus in einen nicht rekursiven umzuwandeln, jedoch ist die Logik oftmals sehr viel komplexer und es wird ein zusätzlicher Stack benötigt. Rekursion nutzt ebenfalls einen Stack: den Funktionsstack.

+
+
Die Stack-ähnliche Funktionsweise kann in folgendem Beispiel betrachtet werden:

+
+
function foo(i) {
+  if (i < 0)
+    return;
+  console.log('begin:' + i);
+  foo(i - 1);
+  console.log('end:' + i);
+}
+foo(3);
+
+// Output:
+
+// begin: 3
+// begin: 2
+// begin: 1
+// begin: 0
+// end: 0
+// end: 1
+// end: 2
+// end: 3

+
+
Verschachtelte Funktionen und Closures

+
+
Man kann eine Funktion in eine andere verschachteln. Die verschachtelte (innere) Funktion ist privat innerhalb ihrer Containerfunktion (äußere Funktion). Sie formt auch eine Closure. Eine Closure ist ein Ausdruck, der freie Variablen enthalten kann, (typischerweise eine Funktion) zusammen mit einer Umgebung, welche die diese Variablen einschließt (und damit den Ausdruck abschließt, daher der Name closure).

+
+
Weil eine verschachtelte Funktion eine Closure ist, bedeutet das, dass sie die Argumente und Variablen ihrer Containerfunktion vererbt bekommt. Anders gesagt enthält der Scope der inneren Funktion den Scope der äußeren Funktion.

+
+
Zusammenfassend:

+
+
    
+ 
  • Die innere Funktion kann nur von Anweisungen der äußeren Funktion erreicht werden.
    • 
+ 
  • Die innere Funktion formt eine Closure: die innere Funktion kann die Argumente und Variablen der äußeren Funktion benutzen, während die äußere Funktion nicht die Argumente und Variablen der inneren Funktion nutzen kann.
    • 
+

+
+
Im folgenden Beispiel werden innere Funktionen gezeigt:

+
+
function addSquares(a, b) {
+  function square(x) {
+    return x * x;
+  }
+  return square(a) + square(b);
+}
+a = addSquares(2, 3); // gibt 13 zurück
+b = addSquares(3, 4); // gibt 25 zurück
+c = addSquares(4, 5); // gibt 41 zurück
+

+
+
Weil die innere Funktion eine Closure formt, kann die äußere Funktion aufgerufen werden und Argumente für die innere und äußere Funktion spezifizieren::

+
+
function outside(x) {
+  function inside(y) {
+    return x + y;
+  }
+  return inside;
+}
+fn_inside = outside(3);  // Man kann sich das folgendermaßen vorstellen
+                         // gib mir eine Funktion, die 3 zu einem Parameter addiert.
+result = fn_inside(5);   // gibt 8 zurück
+
+result1 = outside(3)(5); // gibt 8 zurück
+

+
+
Erhaltung von Variablen

+
+
Bemerkenswert ist, dass x erhalten wird, wenn inside zurückgegeben wird. Eine Closure muss alle Argumente und Variablen erhalten, die sie referenziert. Weil jeder Aufruf potenziell verschiedene Argumente benötigt, wird eine neue Closure für jeden Aufruf erstellt. Der Speicher kann nur freigegeben werden, wenn die zurückgegebene inside Funktion nicht mehr erreichbar ist.

+
+
Das ist nicht anders mit gespeicherten Referenzen in anderen Objekten, jedoch oftmals weniger deutlich, weil man diese nicht direkt referenziert und nicht inspizieren kann.

+
+
Mehrfach verschachtelte Funktionen

+
+
Funktionen können mehrfach verschachtelt sein, z. B. eine Funktion (A) enthält eine Funktion (B), die eine Funktion (C) enthält. Beide Funktionen, B und C sind Closures, B kann A erreichen und C kann B erreichen. Zudem kann C auch A erreichen, weil C B erreichen kann und B A erreichen kann. Deswegen kann eine Closure mehrere Scopes enthalten.; sie enthält rekursiv die Scopes der Funktion, die der Container ist. Das wird Scopeverkettung (scope chaining) genannt.

+
+
Untersuche das nächste Beispiel:

+
+
function A(x) {
+  function B(y) {
+    function C(z) {
+      console.log(x + y + z);
+    }
+    C(3);
+  }
+  B(2);
+}
+A(1); // logs 6 (1 + 2 + 3)
+

+
+
In diesem Beispiel benutzt C die Variablen y, von B, und x, von A. Das kann gemacht werden weil:

+
+
    
+ 
  1. B ist eine Closure, die A enthält, z. B. B kann die Argumente und Variablen von A benutzen.
    2. 
+ 
  2. C ist ein Closure, die B enthält.
    3. 
+ 
  3. Weil die Closure von B auf A zugreifen kann, kann die Closure von C auf die Argumente und Variablen von A und B zugreifen. Anders gesagt verkettet C den Scope von B und A in dieser Reihenfolge.
    4. 
+

+
+
Das umgekehrte ist nicht möglich. A kann nicht auf C zugreifen, weil A nicht auf die Variablen und Argumente von B zugreifen kann und C eine Variable von B ist. So bleibt C für B privat.

+
+
Namenskonflikte

+
+
Wenn zwei Argumente oder Variablen in dem Scope einer Closure mit dem gleichen Namen existieren, gibt es einen Namenskonflikt. Der innerste Scope hat dann Vorrang, was bedeutet, dass der innerste Scope die höchste Priorität hat, während der äußerste Scope die geringste Priorität hat. Das ist wegen der Scopeverkettung. Das erste Glied in der Kette ist der innerste Scope und das letzt Glied ist der äußerste Scope. Dieses ist im folgenden Beispiel zu sehen:

+
+
function outside() {
+  var x = 10;
+  function inside(x) {
+    return x;
+  }
+  return inside;
+}
+result = outside()(20); // gibt 20 statt 10 zurück
+

+
+
Der Namenskonflikt tritt beim der Anweisung return x auf und ist zwischen dem Parmeter x von inside und der Variable x von  outside. Die Scopekette ist hier {inside, outside, globales Objekt}. Dabei bekommt x von inside eine höhere Priorität als das x von outside. und 20 wird statt der 10 zurückgegeben.

+
+
Closures

+
+
Closures sind eines der mächtigsten Funktionen von JavaScript. JavaScript unterstützt das Verschachteln von Funktionen und erlaubt der inneren Funktionen den vollen Zugriff auf alle definierten Variablen und Funktionen der äußeren Funktion (und alle anderen Variablen und Funktionen die die äußere Funktion erreichen kann). Jedoch hat die äußere Funktion keinen Zugriff auf die Variablen und Funktione, die in der innere Funktion definiert werden. Das unterstützt mehr oder weniger Sicherheit für die Variablen der inneren Funktion. Wenn die innere Funktion Zugriff auf den Scope der äußeren Funktion hat, müssen die Variablen und Funktionen der äußeren Funktion länger leben, als die Ausführungen der inneren Funktion, weil die innere Funktion das Überleben der äußeren Funktion managet. Eine Closure wird erstellt, wenn die innere Funktion irgendwie in einem äußeren Scope der äußeren Funktion erreichbar gemacht wird.

+
+
var pet = function(name) {   // Die äußere Funktion definiert eine Variable "name"
+  var getName = function() {
+    return name;             // Die innere Funktion hat Zugriff auf die "name" Variable der äußeren Funktion
+  }
+  return getName;            // gibt die innere Funktion zurück
+}
+myPet = pet('Vivie');
+
+myPet();                     // gibt "Vivie" zurück
+

+
+
Es kann viel komplexer sein, als der oben gezeigte Quelltext. Ein Objekt enthält Methoden zum verändern von inneren Variablen der äußeren Funktion.

+
+
var createPet = function(name) {
+  var sex;
+
+  return {
+    setName: function(newName) {
+      name = newName;
+    },
+
+    getName: function() {
+      return name;
+    },
+
+    getSex: function() {
+      return sex;
+    },
+
+    setSex: function(newSex) {
+      if(typeof newSex === 'string' && (newSex.toLowerCase() === 'male' || newSex.toLowerCase() === 'female')) {
+        sex = newSex;
+      }
+    }
+  }
+}
+
+var pet = createPet('Vivie');
+pet.getName();                  // Vivie
+
+pet.setName('Oliver');
+pet.setSex('male');
+pet.getSex();                   // male
+pet.getName();                  // Oliver
+

+
+
Im Quelltext oben ist die name Variable der äußeren Funktion in den inneren Funktionen erreichbar und es gibt keine andere Möglichkeit die inneren Variablen zu erreichen, als über die inneren Funktion. Die innere Variable der inneren Funktion fungiert als sicherer Speicher für die äußeren Parameter und Variablen. Sie enthalten permanent und sicher die Daten mit denen die innere Funktion arbeitet. Die Funktion hat niemals eine Variable beschrieben noch hat sie einen Namen.

+
+
var getCode = (function() {
+  var secureCode = '0]Eal(eh&2';    // Ein Code der nicht von Außerhalb verändert werden soll
+
+  return function () {
+    return secureCode;
+  };
+}());
+
+getCode();    // gibt secureCode zurück.
+

+
+
Es gibt aber eine menge von Tücken, die der Einsatz von Closures mit sich bringt. Wenn eine innere Funktion eine Variable definiert, die den gleichen Namen wie eine Variable im äußeren Scope hat, kann die äußere Variable nicht mehr referenziert werden.

+
+
var createPet = function(name) {  // Äußere Funktion definiert die Variable "name"
+  return {
+    setName: function(name) {    // Innere Funktion definiert ebenfalls eine Variable "name"
+      name = name;               // Wie referenziert man die Variable "name" der äußeren Funktion?
+    }
+  }
+}
+

+
+
Einsatz des arguments Objekts

+
+
Die Argumente einer Funktion werden in einem Array-ähnlichen Objekt gewartet. In einer Funktion können die Argumente wie folgt adressiert werden:

+
+
arguments[i]
+

+
+
i ist die Ordnungsnummer des Arguments, beginnend bei null. So ist das erste übergebene Argument einer Funktion arguments[0]. Die Anzahl der übergebenen Argumente ist arguments.length.

+
+
Mit dem arguments Objekt kann man eine Funktion mit mehr Agumenten aufrufen als sie formal deklariert wurden. Das ist oft nützlich, wenn man nicht weiß, wie viele Argumente einer Funktion übergeben werden. Mit arguments.length kann die Anzahl der Argumente, die einer Funktion übergeben wurde, ermittelt werden. Über das arguments Objekt können dann alle Argumente gelesen werden.

+
+
Zum Beispiel kann es eine Funktion geben, die verschieden viele Strings zusammenfügt. Das einzige formale Argument der Funktion ist das Trennzeichen, welches die Zeichen definiert, die zwischen den Strings eingefügt werden. Im folgenden Quelltext ist die Funktion implementiert:

+
+
function myConcat(separator) {
+   var result = ''; // initialize list
+   var i;
+   // iterate through arguments
+   for (i = 1; i < arguments.length; i++) {
+      result += arguments[i] + separator;
+   }
+   return result;
+}
+

+
+
Man kann der Funktion jede Anzahl an Argumenten übergeben und die Funktion fügt die Argumente in einem String zusammen:

+
+
// returns "red, orange, blue, "
+myConcat(', ', 'red', 'orange', 'blue');
+
+// returns "elephant; giraffe; lion; cheetah; "
+myConcat('; ', 'elephant', 'giraffe', 'lion', 'cheetah');
+
+// returns "sage. basil. oregano. pepper. parsley. "
+myConcat('. ', 'sage', 'basil', 'oregano', 'pepper', 'parsley');
+

+
+

+
Hinweis: Die arguments Variable ist "Array-ähnlich", aber kein Array. Es ist Array-ähnlich indem es nummerierte Indizes und eine length Eigenschaft hat. Jedoch unterstützt es nicht alle Array-Manipulations-Methoden.

+

+
+
Siehe im {{jsxref("Function")}} Objekt in den JavaScript Referenzen für mehr Informationen.

+
+
Funktionsparameter

+
+
Mit ECMAScript 2015, gibt es zwei neue Arten von Parametern: Default-Parameter und Rest-Parameter.

+
+
Default-Parameter

+
+
In JavaScript ist der Standardwert eines Parameters undefined. In manchen Situationen ist es sinnvoll den Standardwert auf einen anderen Wert zu setzen. Das ist das Einsatzgebiet von Default-Parametern.

+
+
In der Vergangenheit war die Strategie für das Setzen von Standardwerten, dass im Körper der Funktion geprüft wird, ob ein Parameter undefined ist und ihn in diesem Fall neu zu beschreiben. Wenn im folgenden Beispiel kein Argument b übergeben wird, wird dieser undefined sein und die Auswertung von a*b wird NaN sein. Deswegen ist dieser Fall in der zweiten Zeile des Beispiels abgefangen:

+
+
function multiply(a, b) {
+  b = typeof b !== 'undefined' ?  b : 1;
+
+  return a * b;
+}
+
+multiply(5); // 5
+

+
+
Mit Default-Parametern ist die Überprüfung im Körper der Funktion nicht mehr nötig. Jetzt kann man 1 als Standardwert für b im Funktionskopf angeben:

+
+
function multiply(a, b = 1) {
+  return a * b;
+}
+
+multiply(5); // 5

+
+
Für mehr Details, siehe in den Referenzen unter Default-Parameter.

+
+
Rest-Parameter

+
+
Die Rest-Parameter Syntax ermöglicht er eine unendliche Anzahl von Argumenten als Array zu repräsentieren. Im Beispiel wird der Rest-Parameter eingesetzt um die alle Argumente ab dem zweiten Argument zu sammeln. Danach werden diese mit dem ersten Parameter multipliziert. Dieses Beispiel benutzt Pfeilfunktionen, welche in nächsten Kapitel erklärt werden:

+
+
function multiply(multiplier, ...theArgs) {
+  return theArgs.map(x => multiplier * x);
+}
+
+var arr = multiply(2, 1, 2, 3);
+console.log(arr); // [2, 4, 6]

+
+
Pfeilfunktionen

+
+
Ein Pfeilfunktions Ausdruck hat eine kürzere Syntax verglichen mit Funktionsausdrücken und bindet lexikalisch den this Wert. Pfeilfunktionen sind immer anonym. Sie dazu auch den hacks.mozilla.org Blogbeitrag: "ES6 In Depth: Arrow functions".

+
+
Zwei Faktoren haben die Einführung von Pfeilfunktionen beeinflusst: kürzere Funktionen und lexikalisches this.

+
+
Kürzere Funktionen

+
+
In manchen funktionalen Patterns sind kurze Funktionen willkommen. Vergleiche:

+
+
var a = [
+  'Hydrogen',
+  'Helium',
+  'Lithium',
+  'Beryl­lium'
+];
+
+var a2 = a.map(function(s) { return s.length; });
+
+console.log(a2); // logs [8, 6, 7, 9]
+
+var a3 = a.map( s => s.length );
+
+console.log(a3); // logs [8, 6, 7, 9]
+

+
+
Lexikalisches this

+
+
Bis es Pfeilfunktionen gab, hat jede neue Funktion sein eigenen this Wert definiert (ein neues Objekt in Fällen eines Konstruktors, undefined in Funktionsaufrufen im strict mode, das Kontextobjekt, wenn eine Funktion als Objektmethode aufgerufen wird, etc.). Das ist lästig mit objektorientierten Programmierstilen.

+
+
function Person() {
+  // The Person() constructor defines `this` as itself.
+  this.age = 0;
+
+  setInterval(function growUp() {
+    // In nonstrict mode, the growUp() function defines `this`
+    // as the global object, which is different from the `this`
+    // defined by the Person() constructor.
+    this.age++;
+  }, 1000);
+}
+
+var p = new Person();

+
+
In ECMAScript 3/5, wurde dieses Problem behoben, indem der Wert der Variablen this in einer weiteren Variablen gespeichert wird.

+
+
function Person() {
+  var self = this; // Some choose `that` instead of `self`.
+                   // Choose one and be consistent.
+  self.age = 0;
+
+  setInterval(function growUp() {
+    // The callback refers to the `self` variable of which
+    // the value is the expected object.
+    self.age++;
+  }, 1000);
+}

+
+
Alternativ kann eine gebundene Funktion  erstellt werden, so dass der Wert für this mit übergeben werden kann.

+
+
Pfeilfunktionen nutzen den this Wert des umschließenden Kontextes, so dass der folgende Quelltext wie erwartet funktioniert:

+
+
function Person() {
+  this.age = 0;
+
+  setInterval(() => {
+    this.age++; // |this| properly refers to the person object
+  }, 1000);
+}
+
+var p = new Person();

+
+
Vordefinierte Funktionen

+
+
JavaScript hat einige eingebaute Funktionen:

+
+

+ 
{{jsxref("Global_Objects/eval", "eval()")}}

+ 

+ 
Die eval() Methode wertet JavaScript Quelltext repräsentiert als String aus.

+ 

+ 
{{jsxref("Global_Objects/uneval", "uneval()")}} {{non-standard_inline}}

+ 

+ 
Die uneval() Methode erstellt einen String der Quelltext eines {{jsxref("Object")}}s repräsentiert.

+ 

+ 
{{jsxref("Global_Objects/isFinite", "isFinite()")}}

+ 

+ 
Die globale isFinite() Funktion ob ein übergebener Wert endlich ist. Der übergebene Wert wird, wenn es nötig ist, zu einer Zahl konvertiert.

+ 

+ 
{{jsxref("Global_Objects/isNaN", "isNaN()")}}

+ 
Die isNaN() Funktion überprüft, ob ein Wert {{jsxref("Global_Objects/NaN", "NaN")}} ist oder nicht. Hinweis: Wegen einigen Zwängen innerhalb der isNaN Funktion gibt es interessante Regeln; alternativ kann auch die in  ECMAScript 2015 definierte Funktion Funktion {{jsxref("Number.isNaN()")}} oder der Operator typeof verwendet werden, um einen {{jsxref("Global_Objects/NaN", "NaN")}} Wert zu erkennen.

+ 
{{jsxref("Global_Objects/parseFloat", "parseFloat()")}}

+ 

+ 
Doe parseFloat() Funktion liest einen String als Argument ein und gibt eine Gleitkommazahl zurück.

+ 

+ 
{{jsxref("Global_Objects/parseInt", "parseInt()")}}

+ 

+ 
Die parseInt() Funktion liest einen String als Argument ein und gibt eine ganze Zahl der Spezifizierten Basis zurück (die Basis ist in der Mathematik das Zahlensystem).

+ 

+ 
{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}

+ 

+ 
Die decodeURI() Methode decodiert einen Uniform Resource Identifier (URI), der vorher mit der {{jsxref("Global_Objects/encodeURI", "encodeURI")}} Funktion order einer ähnlichen Funktion erstellt wurde.

+ 

+ 
{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}

+ 

+ 
Die decodeURIComponent() Methode decodiert eine Uniform Resource Identifier (URI) Komponente, die vorher mit der {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}} Funktion oder einer ähnlichen Funktion erstellt wurde.

+ 

+ 
{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}

+ 

+ 
Die encodeURI() Methode codiert einen Uniform Resource Identifier (URI), indem jedes besondere Zeilen durch eine Sequenz aus zwei drei oder vier Zeichen escaped wird. Dieses Sequenzen Repräsentieren die UTF-8 Darstellung der Zeichen (wird nur vier escape Sequenzen von Zeichen zu zwei zwei Platzhalterzeichen umwandeln)

+ 

+ 
{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}

+ 

+ 
Die encodeURIComponent() Methode codiert eine Uniform Resource Identifier (URI) Komponente, indem jedes besondere Zeilen durch eine Sequenz aus zwei drei oder vier Zeichen escaped wird. Dieses Sequenzen Repräsentieren die UTF-8 Darstellung der Zeichen (wird nur vier escape Sequenzen von Zeichen zu zwei zwei Platzhalterzeichen umwandeln)

+ 

+ 
{{jsxref("Global_Objects/escape", "escape()")}} {{deprecated_inline}}

+ 

+ 
Die veraltete escape() Methode berechnet einen neuen String indem manche Zeichen durch Hexadezimalsequenzen ersetzt werden. Man sollte {{jsxref("Global_Objects/encodeURI", "encodeURI")}} oder {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}} stattdessen benutzen.

+ 

+ 
{{jsxref("Global_Objects/unescape", "unescape()")}} {{deprecated_inline}}

+ 

+ 
Die veraltete unescape() Methode berechnet einen neuen String indem Hexadezimalsequenzen durch die repräsentierenden Zeichen ersetzt werden. Die Hexadezimalsequenzen können von Funktionen wie {{jsxref("Global_Objects/escape", "escape")}} eingeführt werden. Weil unescape() veraltet ist, sollte man stattdessen die Funktion {{jsxref("Global_Objects/decodeURI", "decodeURI()")}} oder {{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent")}} benutzen.

+ 

+

+
+
{{PreviousNext("Web/JavaScript/Guide/Schleifen_und_Iterationen", "Web/JavaScript/Guide/Ausdruecke_und_Operatoren")}}

diff --git a/files/de/web/javascript/guide/funktionen/index.html b/files/de/web/javascript/guide/funktionen/index.html
deleted file mode 100644
index 3eeeb4f4e5..0000000000
--- a/files/de/web/javascript/guide/funktionen/index.html
+++ /dev/null
@@ -1,657 +0,0 @@
----
-title: Funktionen
-slug: Web/JavaScript/Guide/Funktionen
-tags:
-  - Beginner
-  - Functions
-  - Guide
-  - JavaScript
-  - 'l10n:priority'
-translation_of: Web/JavaScript/Guide/Functions
----
-
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Schleifen_und_Iterationen", "Web/JavaScript/Guide/Ausdruecke_und_Operatoren")}}

-
-
Funktionen sind ein Grundbaustein in JavaScript. Eine Funktion ist eine Prozedur - eine Reihe von Anweisungen, um eine Aufgabe auszuführen oder eine Wert auszurechnen. Um Funktionen zu verwenden, müssen diese im Scope (Gültigkeitsbereich) deklariert werden, in dem sie ausgeführt werden soll.

-
-
Siehe ebenfalls in der ausführlichen Referenz über JavaScript Funktionen nach, um noch mehr Detail zu erfahren.

-
-
Funktionen definieren

-
-
Funktionsdeklaration

-
-
Eine Funktionsdefinition (auch Funktionsdeklaration oder Funktionsanweisung genannt) besteht aus dem Schlüsselwort function, gefolgt von:

-
-
    
- 
  • Den Namen der Funktion.
    • 
- 
  • Eine Liste von Parametern, die in runden Klammern geschrieben sind und durch Kommas getrennt sind.
    • 
- 
  • Die JavaScript Anweisungen, die durch die Funktion definiert werden und innerhalb von geschweiften Klammern steht.
    • 
-

-
-
Das folgende Beispiel definiert eine Funktion mit dem Namen square:

-
-
function square(number) {
-  return number * number;
-}
-

-
-
Die Funktion square nimmt einen Parameter entgegen, welcher number heißt. Die Funktion besteht aus einer Anweisung, die besagt, dass der Parameter der Funktion (das ist number), multipliziert mit sich selbst, zurückgegeben werden soll. Dabei gibt das  return Statement an, welcher Wert von der Funktion zurückzugeben wird.

-
-
return number * number;
-

-
-
Bei Primitive Parameter, wie Zahlen, wird der Funktionen der Wert übergeben. Werte, die der Funktion übergeben wurden und innerhalb der Funktion geändert werden, ändert den Wert zwar innerhalb der Funktion, aber nicht global oder in der aufrufenden Funktion.

-
-
Wird ein Objekt als Parameter übergeben (z. B. ein nicht primitiver Wert wie ein  {{jsxref("Array")}} oder ein selbst definiertes Objekt) und die Funktion ändert die Objekteigenschaften, so sind die Änderungen außerhalb der Funktion sichtbar, wie im folgendem Beispiel veranschaulicht wird:

-
-
function myFunc(theObject) {       //Funktiondekleration
-  theObject.make = 'Toyota';
-}
-
-var mycar = {make: 'Honda', model: 'Accord', year: 1998};
-var x, y;
-
-x = mycar.make;  // x bekommt den Wert "Honda"
-
-myFunc(mycar);
-y = mycar.make;  // y  bekommt den Wert "Toyota"
-                 // (die make Eigenschaft wurde in der Funktion geändert)

-
-
Funktionsausdrücke

-
-
Während die Funktionsdeklarationen oben syntaktisch ein Statement sind, kann eine Funktion auch durch Funktionsausdrücke erstellt werde. Derartige Funktionen können auch anonym sein; denn Funktionen benötigten keinen Namen. So kann zum Beispiel die Funktion square auch so definiert werden:

-
-
var square = function(number) { return number * number; };
-var x = square(4); // x bekommt den Wert 16

-
-
Jedoch kann die Funktion auch einen Name haben, um sich innerhalb der Funktion selbst aufzurufen oder die Funktion im Stack Traces des Debuggers zu identifizieren zu können:

-
-
var factorial = function fac(n) { return n < 2 ? 1 : n * fac(n - 1); };
-
-console.log(factorial(3));
-

-
-
Funktionsausdrücke sind praktisch, um Funktionen als ein Argument einer anderen Funktion zu übergeben. Das folgende Beispiel zeigt die Definition einer map Funktion, die eine Funktion als ersten Parameter erwartet:

-
-
function map(f, a) {
-  var result = [],i; // erstellt ein neues Array
-  for (i = 0; i != a.length; i++)
-    result[i] = f(a[i]);
-  return result;
-}
-

-
-
Im folgenden Quelltext wird einer Funktion eine Funktion übergeben, welche zuvor durch einen Funktions-Ausdruck definiert wurde. Diese Funktion wird für jedes Element in einem Array (zweiter Parameter) ausgeführt.

-
-
function map(f, a) {
-  var result = []; // erstellt ein neues Array
-  var i;
-  for (i = 0; i < a.length; i++) {
-    result[i] = f(a[i]);
-  }
-  return result;
-}
-var f = function(x) {
-  return x * x * x;
-}
-var numbers = [0, 1, 2, 5, 10];
-var cube = map(f,numbers);
-console.log(cube);
-

-
-
gibt [0, 1, 8, 125, 1000]  zurück.

-
-
In JavaScript kann eine Funktion definiert werden, wenn eine Bedingung erfüllt ist. Zum Beispiel wird myFunc nur definiert, wenn num gleich 0 ist:

-
-
var myFunc;
-if (num === 0) {
-  myFunc = function(theObject) {
-    theObject.make = 'Toyota';
-  }
-}

-
-
Im Unterschied zu den hier gezeigten Funktionsdeklarationen, kann man auch den {{jsxref("Function")}} Konstruktor verwenden, um eine Funktion von einem String zur Laufzeit zu erstellen, ähnlich der {{jsxref("eval()")}} Funktion.

-
-
Eine Methode ist eine Funktion, die Eigenschaft eines Objektes ist. Mehr Informationen über Objekt und Methoden sind im Artikel "Mit Objekten arbeiten" zu finden.

-
-
Aufruf von Funktionen

-
-
Das Definieren einer Funktion führen diese noch nicht aus. Die Definition gibt der Funktion lediglich einen Namen und beschreibt was geschehen soll, wenn die Funktion aufgerufen wird. Erst der Aufruf ermöglicht es die Aktionen mit den angegebenen Parametern durchzuführen. Zum Beispiel wird die vorher definierte Funktion square so aufgerufen:

-
-
square(5);
-

-
-
Es wird die Funktion mit dem Argument 5 aufgerufen. Die Funktion führt ihre Anweisungen aus und gibt den Wert 25 zurück.

-
-
Funktionen müssen im Scope (Gültigkeitsbereich) sein, wenn sie aufgerufen werden, können jedoch auch erst später definiert werden, wie im folgenden Beispiel:

-
-
console.log(square(5));
-/* ... */
-function square(n) { return n * n; }
-

-
-
Der Scope einer Funktion ist die Funktion in der sie deklariert wird, oder das gesamte Programm, falls sie auf oberster Ebene deklariert wird.

-
-

-
Hinweis: Nur die oben angegebene Syntax für Funktionen wird funktionieren (function funcName(){}). Der folgende Code funktioniert nicht. Das bedeutet, dass das nur mit Funktionsdeklarationen funktioniert aber nicht mit Funktionsausdrücken.

-

-
-
console.log(square); // square ist mit dem Initialwert undefined gehoisted.
-console.log(square(5)); // TypeError: square is not a function
-var square = function(n) {
-  return n * n;
-}
-

-
-
Die Argumente einer Funktion sind nicht auf Strings und Nummern limitiert, denn es können auch ganze Objekte übergeben werden. Die showProps() Funktion (definiert in Beitrag "Arbeiten mit Objekten") ist ein Beispiel für einer Funktion, die Objekte als Argument entgegennimmt.

-
-
Eine Funktion kann sich selbst Aufrufen. Zum Beispiel berechnet folgende Funktion die Fakultät rekursiv:

-
-
function factorial(n) {
-  if ((n === 0) || (n === 1))
-    return 1;
-  else
-    return (n * factorial(n - 1));
-}
-

-
-
Die Fakultät von 1 bis 5 kann wie folgt berechnet werden:

-
-
var a, b, c, d, e;
-a = factorial(1); // a wird der Wert 1 zugewiesen
-b = factorial(2); // b wird der Wert 2 zugewiesen
-c = factorial(3); // c wird der Wert 6 zugewiesen
-d = factorial(4); // d wird der Wert 24 zugewiesen
-e = factorial(5); // e wird der Wert 120 zugewiesen
-

-
-
Es gibt aber noch weitere Möglichkeiten Funktionen aufzurufen. Oftmals gibt es Fälle, in denen Funktionen dynamisch aufgerufen werden müssen, die Anzahl der Argumente variiert oder der Kontext einer Funktion zur Laufzeit gesetzt werden muss. Das zieht nach sich, dass Funktionen selbst Objekte sind, die Methoden haben (siehe das {{jsxref("Function")}} Objekt). Eine diese Methoden ist die {{jsxref("Function.apply", "apply()")}} Methode, mit der man die oben genannten Aufgaben lösen kann.

-
-
Scopes (Gültigkeitsbereiche) von Funktionen

-
-
Variablen, die in einer Funktion definiert werden, können nicht außerhalb der Funktion erreicht werden, weil die Variablen nur im Scope (Gültigkeitbereich) der Funktion definiert sind. Im Gegensatz dazu kann eine Funktion alle Variablen und Funktionen erreichen, die in dem Scope definiert wurden, in dem auch die Funktion definiert wurde. Anders gesagt kann eine Funktion, die im globalen Scope definiert wurde, alle Variablen und Funktionen des globalen Scopes erreichen. Wenn eine Funktion in einer Funktion definiert wird, kann die innere Funktion auf alle Definitionen seiner Elternfunktion und alle Definitionen, auf die die Elternfunktion Zugriff hat, zugreifen.

-
-
// Die folgenden Variablen sind im globalen Scope definiert
-var num1 = 20,
-    num2 = 3,
-    name = 'Chamahk';
-
-// Diese Funktion ist im globalen Scope definiert
-function multiply() {
-  return num1 * num2;
-}
-
-multiply(); // gibt 60 zurück
-
-// Ein Beispiel für verschachtelte Funktionen
-function getScore() {
-  var num1 = 2,
-      num2 = 3;
-
-  function add() {
-    return name + ' scored ' + (num1 + num2);
-  }
-
-  return add();
-}
-
-getScore(); // gibt "Chamahk scored 5" zurück
-

-
-
Scope und der Funktionsstack

-
-
Rekursion

-
-
Eine Funktion kann sich selbst referenzieren und aufrufen. Dabei gibt es drei Möglichkeiten, wie eine Funktion sich selbst referenzieren kann:

-
-
    
- 
  1. Der Funktionsname
    2. 
- 
  2. arguments.callee
    3. 
- 
  3. Eine im Scope liegende Variable, die auf die Funktion referenziert.
    4. 
-

-
-
Nimmt man zum Beispiel folgende Funktion:

-
-
var foo = function bar() {
-   // Anweisungen
-};
-

-
-
Folgende Anweisungen im Körper der Funktion bewirken alle das Gleiche:

-
-
    
- 
  1. bar()
    2. 
- 
  2. arguments.callee()
    3. 
- 
  3. foo()
    4. 
-

-
-
Eine Funktion, die sich selbst aufruft, wird rekursive Funktion genannt. Rekursion ist dabei vergleichbar mit einer Schleife. Beide führen den selben Quelltext mehrfach aus und beide benötigen eine Bedingung (um eine unendliche Schleife zu vermeiden oder eine unendliche Rekursion zu vermeiden). Das nächste Beispiel zeigt eine Schleife:

-
-
var x = 0;
-while (x < 10) { // "x < 10" ist die Schleifenbedingung
-   // do stuff
-   x++;
-}
-

-
-
Diese Schleife kann in eine rekursive Funktion konvertiert werden, die aufgerufen wird:

-
-
function loop(x) {
-  if (x >= 10) // "x >= 10" ist die Abbruchbedingung (gleich zu "!(x < 10)")
-    return;
-  // do stuff
-  loop(x + 1); // der rekursive Aufruf
-}
-loop(0);
-

-
-
Jedoch können manche Algorithmen nicht in eine einfache Schleife umgewandelt werden. Zum Beispiel kann das Abrufen aller Knoten einer Baumstruktur (z. B. DOM) einfacher rekursiv realisieren werden:

-
-
function walkTree(node) {
-  if (node == null) //
-    return;
-  // do something with node
-  for (var i = 0; i < node.childNodes.length; i++) {
-    walkTree(node.childNodes[i]);
-  }
-}
-

-
-
Verglichen mit der Funktion loop, erzeugt hier jeder rekursive Aufruf mehrere weitere rekursive Aufrufe.

-
-
Es ist möglich jeden rekursiven Algorithmus in einen nicht rekursiven umzuwandeln, jedoch ist die Logik oftmals sehr viel komplexer und es wird ein zusätzlicher Stack benötigt. Rekursion nutzt ebenfalls einen Stack: den Funktionsstack.

-
-
Die Stack-ähnliche Funktionsweise kann in folgendem Beispiel betrachtet werden:

-
-
function foo(i) {
-  if (i < 0)
-    return;
-  console.log('begin:' + i);
-  foo(i - 1);
-  console.log('end:' + i);
-}
-foo(3);
-
-// Output:
-
-// begin: 3
-// begin: 2
-// begin: 1
-// begin: 0
-// end: 0
-// end: 1
-// end: 2
-// end: 3

-
-
Verschachtelte Funktionen und Closures

-
-
Man kann eine Funktion in eine andere verschachteln. Die verschachtelte (innere) Funktion ist privat innerhalb ihrer Containerfunktion (äußere Funktion). Sie formt auch eine Closure. Eine Closure ist ein Ausdruck, der freie Variablen enthalten kann, (typischerweise eine Funktion) zusammen mit einer Umgebung, welche die diese Variablen einschließt (und damit den Ausdruck abschließt, daher der Name closure).

-
-
Weil eine verschachtelte Funktion eine Closure ist, bedeutet das, dass sie die Argumente und Variablen ihrer Containerfunktion vererbt bekommt. Anders gesagt enthält der Scope der inneren Funktion den Scope der äußeren Funktion.

-
-
Zusammenfassend:

-
-
    
- 
  • Die innere Funktion kann nur von Anweisungen der äußeren Funktion erreicht werden.
    • 
- 
  • Die innere Funktion formt eine Closure: die innere Funktion kann die Argumente und Variablen der äußeren Funktion benutzen, während die äußere Funktion nicht die Argumente und Variablen der inneren Funktion nutzen kann.
    • 
-

-
-
Im folgenden Beispiel werden innere Funktionen gezeigt:

-
-
function addSquares(a, b) {
-  function square(x) {
-    return x * x;
-  }
-  return square(a) + square(b);
-}
-a = addSquares(2, 3); // gibt 13 zurück
-b = addSquares(3, 4); // gibt 25 zurück
-c = addSquares(4, 5); // gibt 41 zurück
-

-
-
Weil die innere Funktion eine Closure formt, kann die äußere Funktion aufgerufen werden und Argumente für die innere und äußere Funktion spezifizieren::

-
-
function outside(x) {
-  function inside(y) {
-    return x + y;
-  }
-  return inside;
-}
-fn_inside = outside(3);  // Man kann sich das folgendermaßen vorstellen
-                         // gib mir eine Funktion, die 3 zu einem Parameter addiert.
-result = fn_inside(5);   // gibt 8 zurück
-
-result1 = outside(3)(5); // gibt 8 zurück
-

-
-
Erhaltung von Variablen

-
-
Bemerkenswert ist, dass x erhalten wird, wenn inside zurückgegeben wird. Eine Closure muss alle Argumente und Variablen erhalten, die sie referenziert. Weil jeder Aufruf potenziell verschiedene Argumente benötigt, wird eine neue Closure für jeden Aufruf erstellt. Der Speicher kann nur freigegeben werden, wenn die zurückgegebene inside Funktion nicht mehr erreichbar ist.

-
-
Das ist nicht anders mit gespeicherten Referenzen in anderen Objekten, jedoch oftmals weniger deutlich, weil man diese nicht direkt referenziert und nicht inspizieren kann.

-
-
Mehrfach verschachtelte Funktionen

-
-
Funktionen können mehrfach verschachtelt sein, z. B. eine Funktion (A) enthält eine Funktion (B), die eine Funktion (C) enthält. Beide Funktionen, B und C sind Closures, B kann A erreichen und C kann B erreichen. Zudem kann C auch A erreichen, weil C B erreichen kann und B A erreichen kann. Deswegen kann eine Closure mehrere Scopes enthalten.; sie enthält rekursiv die Scopes der Funktion, die der Container ist. Das wird Scopeverkettung (scope chaining) genannt.

-
-
Untersuche das nächste Beispiel:

-
-
function A(x) {
-  function B(y) {
-    function C(z) {
-      console.log(x + y + z);
-    }
-    C(3);
-  }
-  B(2);
-}
-A(1); // logs 6 (1 + 2 + 3)
-

-
-
In diesem Beispiel benutzt C die Variablen y, von B, und x, von A. Das kann gemacht werden weil:

-
-
    
- 
  1. B ist eine Closure, die A enthält, z. B. B kann die Argumente und Variablen von A benutzen.
    2. 
- 
  2. C ist ein Closure, die B enthält.
    3. 
- 
  3. Weil die Closure von B auf A zugreifen kann, kann die Closure von C auf die Argumente und Variablen von A und B zugreifen. Anders gesagt verkettet C den Scope von B und A in dieser Reihenfolge.
    4. 
-

-
-
Das umgekehrte ist nicht möglich. A kann nicht auf C zugreifen, weil A nicht auf die Variablen und Argumente von B zugreifen kann und C eine Variable von B ist. So bleibt C für B privat.

-
-
Namenskonflikte

-
-
Wenn zwei Argumente oder Variablen in dem Scope einer Closure mit dem gleichen Namen existieren, gibt es einen Namenskonflikt. Der innerste Scope hat dann Vorrang, was bedeutet, dass der innerste Scope die höchste Priorität hat, während der äußerste Scope die geringste Priorität hat. Das ist wegen der Scopeverkettung. Das erste Glied in der Kette ist der innerste Scope und das letzt Glied ist der äußerste Scope. Dieses ist im folgenden Beispiel zu sehen:

-
-
function outside() {
-  var x = 10;
-  function inside(x) {
-    return x;
-  }
-  return inside;
-}
-result = outside()(20); // gibt 20 statt 10 zurück
-

-
-
Der Namenskonflikt tritt beim der Anweisung return x auf und ist zwischen dem Parmeter x von inside und der Variable x von  outside. Die Scopekette ist hier {inside, outside, globales Objekt}. Dabei bekommt x von inside eine höhere Priorität als das x von outside. und 20 wird statt der 10 zurückgegeben.

-
-
Closures

-
-
Closures sind eines der mächtigsten Funktionen von JavaScript. JavaScript unterstützt das Verschachteln von Funktionen und erlaubt der inneren Funktionen den vollen Zugriff auf alle definierten Variablen und Funktionen der äußeren Funktion (und alle anderen Variablen und Funktionen die die äußere Funktion erreichen kann). Jedoch hat die äußere Funktion keinen Zugriff auf die Variablen und Funktione, die in der innere Funktion definiert werden. Das unterstützt mehr oder weniger Sicherheit für die Variablen der inneren Funktion. Wenn die innere Funktion Zugriff auf den Scope der äußeren Funktion hat, müssen die Variablen und Funktionen der äußeren Funktion länger leben, als die Ausführungen der inneren Funktion, weil die innere Funktion das Überleben der äußeren Funktion managet. Eine Closure wird erstellt, wenn die innere Funktion irgendwie in einem äußeren Scope der äußeren Funktion erreichbar gemacht wird.

-
-
var pet = function(name) {   // Die äußere Funktion definiert eine Variable "name"
-  var getName = function() {
-    return name;             // Die innere Funktion hat Zugriff auf die "name" Variable der äußeren Funktion
-  }
-  return getName;            // gibt die innere Funktion zurück
-}
-myPet = pet('Vivie');
-
-myPet();                     // gibt "Vivie" zurück
-

-
-
Es kann viel komplexer sein, als der oben gezeigte Quelltext. Ein Objekt enthält Methoden zum verändern von inneren Variablen der äußeren Funktion.

-
-
var createPet = function(name) {
-  var sex;
-
-  return {
-    setName: function(newName) {
-      name = newName;
-    },
-
-    getName: function() {
-      return name;
-    },
-
-    getSex: function() {
-      return sex;
-    },
-
-    setSex: function(newSex) {
-      if(typeof newSex === 'string' && (newSex.toLowerCase() === 'male' || newSex.toLowerCase() === 'female')) {
-        sex = newSex;
-      }
-    }
-  }
-}
-
-var pet = createPet('Vivie');
-pet.getName();                  // Vivie
-
-pet.setName('Oliver');
-pet.setSex('male');
-pet.getSex();                   // male
-pet.getName();                  // Oliver
-

-
-
Im Quelltext oben ist die name Variable der äußeren Funktion in den inneren Funktionen erreichbar und es gibt keine andere Möglichkeit die inneren Variablen zu erreichen, als über die inneren Funktion. Die innere Variable der inneren Funktion fungiert als sicherer Speicher für die äußeren Parameter und Variablen. Sie enthalten permanent und sicher die Daten mit denen die innere Funktion arbeitet. Die Funktion hat niemals eine Variable beschrieben noch hat sie einen Namen.

-
-
var getCode = (function() {
-  var secureCode = '0]Eal(eh&2';    // Ein Code der nicht von Außerhalb verändert werden soll
-
-  return function () {
-    return secureCode;
-  };
-}());
-
-getCode();    // gibt secureCode zurück.
-

-
-
Es gibt aber eine menge von Tücken, die der Einsatz von Closures mit sich bringt. Wenn eine innere Funktion eine Variable definiert, die den gleichen Namen wie eine Variable im äußeren Scope hat, kann die äußere Variable nicht mehr referenziert werden.

-
-
var createPet = function(name) {  // Äußere Funktion definiert die Variable "name"
-  return {
-    setName: function(name) {    // Innere Funktion definiert ebenfalls eine Variable "name"
-      name = name;               // Wie referenziert man die Variable "name" der äußeren Funktion?
-    }
-  }
-}
-

-
-
Einsatz des arguments Objekts

-
-
Die Argumente einer Funktion werden in einem Array-ähnlichen Objekt gewartet. In einer Funktion können die Argumente wie folgt adressiert werden:

-
-
arguments[i]
-

-
-
i ist die Ordnungsnummer des Arguments, beginnend bei null. So ist das erste übergebene Argument einer Funktion arguments[0]. Die Anzahl der übergebenen Argumente ist arguments.length.

-
-
Mit dem arguments Objekt kann man eine Funktion mit mehr Agumenten aufrufen als sie formal deklariert wurden. Das ist oft nützlich, wenn man nicht weiß, wie viele Argumente einer Funktion übergeben werden. Mit arguments.length kann die Anzahl der Argumente, die einer Funktion übergeben wurde, ermittelt werden. Über das arguments Objekt können dann alle Argumente gelesen werden.

-
-
Zum Beispiel kann es eine Funktion geben, die verschieden viele Strings zusammenfügt. Das einzige formale Argument der Funktion ist das Trennzeichen, welches die Zeichen definiert, die zwischen den Strings eingefügt werden. Im folgenden Quelltext ist die Funktion implementiert:

-
-
function myConcat(separator) {
-   var result = ''; // initialize list
-   var i;
-   // iterate through arguments
-   for (i = 1; i < arguments.length; i++) {
-      result += arguments[i] + separator;
-   }
-   return result;
-}
-

-
-
Man kann der Funktion jede Anzahl an Argumenten übergeben und die Funktion fügt die Argumente in einem String zusammen:

-
-
// returns "red, orange, blue, "
-myConcat(', ', 'red', 'orange', 'blue');
-
-// returns "elephant; giraffe; lion; cheetah; "
-myConcat('; ', 'elephant', 'giraffe', 'lion', 'cheetah');
-
-// returns "sage. basil. oregano. pepper. parsley. "
-myConcat('. ', 'sage', 'basil', 'oregano', 'pepper', 'parsley');
-

-
-

-
Hinweis: Die arguments Variable ist "Array-ähnlich", aber kein Array. Es ist Array-ähnlich indem es nummerierte Indizes und eine length Eigenschaft hat. Jedoch unterstützt es nicht alle Array-Manipulations-Methoden.

-

-
-
Siehe im {{jsxref("Function")}} Objekt in den JavaScript Referenzen für mehr Informationen.

-
-
Funktionsparameter

-
-
Mit ECMAScript 2015, gibt es zwei neue Arten von Parametern: Default-Parameter und Rest-Parameter.

-
-
Default-Parameter

-
-
In JavaScript ist der Standardwert eines Parameters undefined. In manchen Situationen ist es sinnvoll den Standardwert auf einen anderen Wert zu setzen. Das ist das Einsatzgebiet von Default-Parametern.

-
-
In der Vergangenheit war die Strategie für das Setzen von Standardwerten, dass im Körper der Funktion geprüft wird, ob ein Parameter undefined ist und ihn in diesem Fall neu zu beschreiben. Wenn im folgenden Beispiel kein Argument b übergeben wird, wird dieser undefined sein und die Auswertung von a*b wird NaN sein. Deswegen ist dieser Fall in der zweiten Zeile des Beispiels abgefangen:

-
-
function multiply(a, b) {
-  b = typeof b !== 'undefined' ?  b : 1;
-
-  return a * b;
-}
-
-multiply(5); // 5
-

-
-
Mit Default-Parametern ist die Überprüfung im Körper der Funktion nicht mehr nötig. Jetzt kann man 1 als Standardwert für b im Funktionskopf angeben:

-
-
function multiply(a, b = 1) {
-  return a * b;
-}
-
-multiply(5); // 5

-
-
Für mehr Details, siehe in den Referenzen unter Default-Parameter.

-
-
Rest-Parameter

-
-
Die Rest-Parameter Syntax ermöglicht er eine unendliche Anzahl von Argumenten als Array zu repräsentieren. Im Beispiel wird der Rest-Parameter eingesetzt um die alle Argumente ab dem zweiten Argument zu sammeln. Danach werden diese mit dem ersten Parameter multipliziert. Dieses Beispiel benutzt Pfeilfunktionen, welche in nächsten Kapitel erklärt werden:

-
-
function multiply(multiplier, ...theArgs) {
-  return theArgs.map(x => multiplier * x);
-}
-
-var arr = multiply(2, 1, 2, 3);
-console.log(arr); // [2, 4, 6]

-
-
Pfeilfunktionen

-
-
Ein Pfeilfunktions Ausdruck hat eine kürzere Syntax verglichen mit Funktionsausdrücken und bindet lexikalisch den this Wert. Pfeilfunktionen sind immer anonym. Sie dazu auch den hacks.mozilla.org Blogbeitrag: "ES6 In Depth: Arrow functions".

-
-
Zwei Faktoren haben die Einführung von Pfeilfunktionen beeinflusst: kürzere Funktionen und lexikalisches this.

-
-
Kürzere Funktionen

-
-
In manchen funktionalen Patterns sind kurze Funktionen willkommen. Vergleiche:

-
-
var a = [
-  'Hydrogen',
-  'Helium',
-  'Lithium',
-  'Beryl­lium'
-];
-
-var a2 = a.map(function(s) { return s.length; });
-
-console.log(a2); // logs [8, 6, 7, 9]
-
-var a3 = a.map( s => s.length );
-
-console.log(a3); // logs [8, 6, 7, 9]
-

-
-
Lexikalisches this

-
-
Bis es Pfeilfunktionen gab, hat jede neue Funktion sein eigenen this Wert definiert (ein neues Objekt in Fällen eines Konstruktors, undefined in Funktionsaufrufen im strict mode, das Kontextobjekt, wenn eine Funktion als Objektmethode aufgerufen wird, etc.). Das ist lästig mit objektorientierten Programmierstilen.

-
-
function Person() {
-  // The Person() constructor defines `this` as itself.
-  this.age = 0;
-
-  setInterval(function growUp() {
-    // In nonstrict mode, the growUp() function defines `this`
-    // as the global object, which is different from the `this`
-    // defined by the Person() constructor.
-    this.age++;
-  }, 1000);
-}
-
-var p = new Person();

-
-
In ECMAScript 3/5, wurde dieses Problem behoben, indem der Wert der Variablen this in einer weiteren Variablen gespeichert wird.

-
-
function Person() {
-  var self = this; // Some choose `that` instead of `self`.
-                   // Choose one and be consistent.
-  self.age = 0;
-
-  setInterval(function growUp() {
-    // The callback refers to the `self` variable of which
-    // the value is the expected object.
-    self.age++;
-  }, 1000);
-}

-
-
Alternativ kann eine gebundene Funktion  erstellt werden, so dass der Wert für this mit übergeben werden kann.

-
-
Pfeilfunktionen nutzen den this Wert des umschließenden Kontextes, so dass der folgende Quelltext wie erwartet funktioniert:

-
-
function Person() {
-  this.age = 0;
-
-  setInterval(() => {
-    this.age++; // |this| properly refers to the person object
-  }, 1000);
-}
-
-var p = new Person();

-
-
Vordefinierte Funktionen

-
-
JavaScript hat einige eingebaute Funktionen:

-
-

- 
{{jsxref("Global_Objects/eval", "eval()")}}

- 

- 
Die eval() Methode wertet JavaScript Quelltext repräsentiert als String aus.

- 

- 
{{jsxref("Global_Objects/uneval", "uneval()")}} {{non-standard_inline}}

- 

- 
Die uneval() Methode erstellt einen String der Quelltext eines {{jsxref("Object")}}s repräsentiert.

- 

- 
{{jsxref("Global_Objects/isFinite", "isFinite()")}}

- 

- 
Die globale isFinite() Funktion ob ein übergebener Wert endlich ist. Der übergebene Wert wird, wenn es nötig ist, zu einer Zahl konvertiert.

- 

- 
{{jsxref("Global_Objects/isNaN", "isNaN()")}}

- 
Die isNaN() Funktion überprüft, ob ein Wert {{jsxref("Global_Objects/NaN", "NaN")}} ist oder nicht. Hinweis: Wegen einigen Zwängen innerhalb der isNaN Funktion gibt es interessante Regeln; alternativ kann auch die in  ECMAScript 2015 definierte Funktion Funktion {{jsxref("Number.isNaN()")}} oder der Operator typeof verwendet werden, um einen {{jsxref("Global_Objects/NaN", "NaN")}} Wert zu erkennen.

- 
{{jsxref("Global_Objects/parseFloat", "parseFloat()")}}

- 

- 
Doe parseFloat() Funktion liest einen String als Argument ein und gibt eine Gleitkommazahl zurück.

- 

- 
{{jsxref("Global_Objects/parseInt", "parseInt()")}}

- 

- 
Die parseInt() Funktion liest einen String als Argument ein und gibt eine ganze Zahl der Spezifizierten Basis zurück (die Basis ist in der Mathematik das Zahlensystem).

- 

- 
{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}

- 

- 
Die decodeURI() Methode decodiert einen Uniform Resource Identifier (URI), der vorher mit der {{jsxref("Global_Objects/encodeURI", "encodeURI")}} Funktion order einer ähnlichen Funktion erstellt wurde.

- 

- 
{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}

- 

- 
Die decodeURIComponent() Methode decodiert eine Uniform Resource Identifier (URI) Komponente, die vorher mit der {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}} Funktion oder einer ähnlichen Funktion erstellt wurde.

- 

- 
{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}

- 

- 
Die encodeURI() Methode codiert einen Uniform Resource Identifier (URI), indem jedes besondere Zeilen durch eine Sequenz aus zwei drei oder vier Zeichen escaped wird. Dieses Sequenzen Repräsentieren die UTF-8 Darstellung der Zeichen (wird nur vier escape Sequenzen von Zeichen zu zwei zwei Platzhalterzeichen umwandeln)

- 

- 
{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}

- 

- 
Die encodeURIComponent() Methode codiert eine Uniform Resource Identifier (URI) Komponente, indem jedes besondere Zeilen durch eine Sequenz aus zwei drei oder vier Zeichen escaped wird. Dieses Sequenzen Repräsentieren die UTF-8 Darstellung der Zeichen (wird nur vier escape Sequenzen von Zeichen zu zwei zwei Platzhalterzeichen umwandeln)

- 

- 
{{jsxref("Global_Objects/escape", "escape()")}} {{deprecated_inline}}

- 

- 
Die veraltete escape() Methode berechnet einen neuen String indem manche Zeichen durch Hexadezimalsequenzen ersetzt werden. Man sollte {{jsxref("Global_Objects/encodeURI", "encodeURI")}} oder {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}} stattdessen benutzen.

- 

- 
{{jsxref("Global_Objects/unescape", "unescape()")}} {{deprecated_inline}}

- 

- 
Die veraltete unescape() Methode berechnet einen neuen String indem Hexadezimalsequenzen durch die repräsentierenden Zeichen ersetzt werden. Die Hexadezimalsequenzen können von Funktionen wie {{jsxref("Global_Objects/escape", "escape")}} eingeführt werden. Weil unescape() veraltet ist, sollte man stattdessen die Funktion {{jsxref("Global_Objects/decodeURI", "decodeURI()")}} oder {{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent")}} benutzen.

- 

-

-
-
{{PreviousNext("Web/JavaScript/Guide/Schleifen_und_Iterationen", "Web/JavaScript/Guide/Ausdruecke_und_Operatoren")}}

diff --git a/files/de/web/javascript/guide/grammar_and_types/index.html b/files/de/web/javascript/guide/grammar_and_types/index.html
new file mode 100644
index 0000000000..3ca2b9936b
--- /dev/null
+++ b/files/de/web/javascript/guide/grammar_and_types/index.html
@@ -0,0 +1,699 @@
+---
+title: Grammatik und Typen
+slug: Web/JavaScript/Guide/Grammatik_und_Typen
+tags:
+  - Guide
+  - JavaScript
+  - 'l10n:priority'
+translation_of: Web/JavaScript/Guide/Grammar_and_types
+---
+
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Einführung", "Web/JavaScript/Guide/Kontrollfluss_und_Fehlerbehandlung")}}

+
+
Dieses Kapitel behandelt die grundlegende Grammatik von JavaScript, Deklaration von Variablen, Datentypen und Objektinstanzen.

+
+
Grundlagen

+
+
JavaScript leiht sich den größten Teil seiner Syntax von Java, ist aber auch von Sprachen wie Awk, Perl und Python beeinflusst.

+
+
JavaScript ist case-sensitiv (unterscheidet zwischen Groß- und Kleinschreibung) und benutzt den Unicode-Zeichensatz. Zum Beispiel kann das Wort Früh als Variablenname genutzt werden.

+
+
var Früh = "foobar";
+

+
+
Jedoch ist die Variable früh nicht dieselbe wie Früh, weil JavaScript case-sensitiv ist.

+
+
In JavaScript heißen Anweisungen "{{Glossary("Statement", "statements")}}" und werden durch ein Semikolon (;) voneinander getrennt. Ein Semikolon ist nicht nötig, wenn jedes Statement in einer neuen Zeile ist. Wenn mehrere Statements in einer Zeile geschrieben werden, sollte nach jedes mit einem Semikolon trennen. Zudem ist es gängige Praxis, hinter jedem Statement ein Semikolon zu schreiben. Leerzeichen, Tabulatoren und Zeilenumbrüche werden "Whitespace" genannt. Der Quelltext von JavaScript wird vom Interpreter von links nach rechts gelesen und in Sequenzen von Eingabe-Elementen wie JavaScript-Tokens, Steuerzeichen, Zeichenumbrüche, Kommentare und Objektinstanzen (Literale) umgewandelt. ECMAScript beschreibt für den Interpreter reservierte Schlüsselwörter sowie Objektinstanzen und hat eingebaute Regeln für die automatische Einfügung von Semikola (ASI) um Anweisungen zu beenden. Es wird jedoch empfohlen jede Anweisung mit einem Semikolon zu beenden; dies vermeidet ungewollte Nebeneffekte. Mehr Informationen dazu sind in der detaillierten Referenz über JavaScripts lexikalische Grammatik zu finden.

+
+
Kommentare

+
+
Die Syntax von Kommentaren ist dieselbe wie in C++ und in vielen anderen Sprachen:

+
+
// Einzeiliger Kommentar
+
+/* Das ist ein langer,
+ * mehrzeiliger Kommentar
+ */
+
+/* Man kann keine Kommentare, /* Verschachteln */ SyntaxError */

+
+
Kommentare sind wie Whitespaces und werden bei der Ausführung von Skripten verworfen.

+
+
Deklarationen

+
+
Es gibt drei mögliche Arten, Variablen zu deklarieren:

+
+

+ 
{{jsxref("Statements/var", "var")}}

+ 
Deklariert eine Variable. Optional wird ein Wert initialisiert.

+ 
{{jsxref("Statements/let", "let")}}

+ 
Deklariert eine Variable mit Gültigkeit im aktuellen Block. Optional wird ein Wert initialisiert.

+ 
{{jsxref("Statements/const", "const")}}

+ 
Deklariert eine Konstante mit Gültigkeit im aktuellen Block.

+

+
+
Variablen

+
+
Variablen werden benutzt, um Werte zu speichern. Dabei gibt man einer Variablen einen Namen, der {{Glossary("identifier", "Bezeichner")}} bzw. Bezeichner genannt wird und der bestimmten Regeln folgt.

+
+
Ein JavaScript Bezeichner muss mit einem Buchstaben, Unterstrich (_) oder einem Dollarzeichen ($) beginnen. Die nachfolgenden Zeichen können auch Zahlen sein. Da JavaScript case-sensitive ist, wird zwischen Groß- und Kleinschreibung unterschieden und somit repräsentiert "A" einen anderen Buchstaben als "a".

+
+
Es kann ein Großteil der ISO 8859-1 und Unicode-Zeichen benutzt werden, wie z.B. ü oder auch å, aber auch Unicode escape sequences können genutzt werden.

+
+
Beispiele für zulässige Bezeichner sind Number_hits, temp99 und _name.

+
+
Variablendeklaration

+
+
Die Deklaration einer Variable ist durch drei unterschiedliche Wege möglich:

+
+
    
+ 
  • Mit dem Schlüsselwort {{jsxref("Statements/var", "var")}}, wie var x = 42. Die Syntax kann benutzt werden, um Variablen lokal und global zu deklarieren.
    • 
+ 
  • Mit dem Zuweisen einer Variable, wie x = 42. Wenn diese Form außerhalb einer Funktion genutzt wird, wird die Variable global deklariert. Es wird eine strikte JavaScript-Warnung erzeugt. Diese Variante sollte vermieden werden.
    • 
+ 
  • Mit dem Schlüsselwort {{jsxref("Statements/let", "let")}} , wie let x = 42. Die Syntax kann benutz werden, um Variablen nur für ihren Scope (Gültigkeitsbereich) zu deklarieren. Siehe Variablen Scope.
    • 
+

+
+
Variablen auswerten

+
+
Eine Variable, die mit var ohne Initialisierung deklariert wurde, hat den Wert {{jsxref("undefined")}}.

+
+
Der Zugriff auf eine nicht initialisierte Variable und der Zugriff auf eine let-Variable, bevor diese Initialisiert wurde, erzeugt einen {{jsxref("ReferenceError")}} Fehler:

+
+
var a;
+console.log("Der Wert von a ist " + a); // Der Wert von a ist undefined
+
+console.log("Der Wert von b ist " + b); // Der Wert von b ist undefined
+var b;
+
+console.log("Der Wert von c ist " + c); // ReferenceError: c is not defined
+
+let x
+console.log("Der Wert von x ist " + x); // Der Wert von x ist undefined
+
+console.log("Der Wert von y ist " + y); // ReferenceError: y is not defined
+let y;
+

+
+
undefined kann benutzt werden, um zu überprüfen ob eine Variable einen Wert hat. Im Folgenden Codebeispiel ist der Variable input kein Wert zugewiesen worden und das if-Statement wird somit true ausgeben.

+
+
var input;
+if(input === undefined){
+  macheDas();
+} else {
+  macheDasAndere();
+}
+

+
+
undefined verhält sich wie ein false, wenn es in einem boolschen Kontext verwendet wird. Zum Beispiel wird im folgendem Codebeispiel die Funktion myFunction ausgeführt, weil das myArray Element undefined ist:

+
+
var myArray = [];
+if (!myArray[0]) myFunction();
+

+
+
undefined wird zu NaN (Not a Number) konvertiert, wenn es in einem numerischen Kontext verwendet wird:

+
+
var a;
+a + 2;  //NaN

+
+
Wenn eine {{jsxref("null")}} Variable ausgewertet wird, verhält sie sich im numerischen Kontext wie 0 und in booleschem Kontext wie false:

+
+
var n = null;
+console.log(n * 32);  // wird 0 in die Konsole eintragen
+

+
+
Variablen Scope

+
+
Wird eine Variable außerhalb eines Code-Blocks deklariert, wird sie eine globale Variable genannt, da sie jetzt in jedem Bereich verfügbar ist. Wenn eine Variable jedoch innerhalb eines Code-Blocks deklariert wird, so ist sie nur innerhalb dieses Blocks verfügbar und wird aus diesem Grund lokale Variable genannt.

+
+
JavaScript hatte vor ECMAScript 2015 keinen Block-Anweisungs Scope; daher wurde eine deklarierte Variable in einem Block immer zu der Funktion (oder dem globalen Scope) gezählt, in dem sich der Block befand. Zum Beispiel wird der folgende Quelltext 5 ausgeben, weil der Scope von x die Funktion ist bzw. der globale Kontext, in dem x deklariert wurde, und nicht der Block, in diesem Fall die if Anweisung, selbst.

+
+
if (true) {
+  var x = 5;
+}
+console.log(x);  // 5
+

+
+
Das Verhalten ändert sich, wenn man die in ECMAScript 2015 eingeführte let Deklaration benutzt.

+
+
if (true) {
+  let y = 5;
+}
+console.log(y);  // ReferenceError: y is not defined
+

+
+
Variablen hochziehen (hoisting)

+
+
Eine andere Besonderheit mit Variablen in JavaScript ist, dass man eine Variable referenzieren kann, bevor sie deklariert wurde, ohne das es zu einem Fehler kommt. Diese Konzept ist bekannt als hoisting (hochziehen); Variablen in JavaScript sind hochgezogen und quasi zum Anfang der Funktion oder des Statements gehoben worden. Immer wenn Variablen hochgezogen werden, werden sie den Wert undefined zurückgeben. So wird immer undefined zurückgegeben, wenn man die Variablen benutzt, bevor sie deklariert und initialisiert wurden.

+
+
/**
+ * Beispiel 1
+ */
+console.log(x === undefined); // true
+var x = 3;
+
+/**
+ * Beispiel 2
+ * wird den Wert undefined zurückgeben
+ */
+var myvar = "my value";
+
+(function() {
+  console.log(myvar); // undefined
+  var myvar = "local value";
+})();
+

+
+
Das obere Beispiel wird genauso interpretiert, wie das folgende Beispiel:

+
+
/**
+ * Beispiel 1
+ */
+var x;
+console.log(x === undefined); // true
+x = 3;
+
+/**
+ * Beispiel 2
+ */
+var myvar = "my value";
+
+(function() {
+  var myvar;
+  console.log(myvar); // undefined
+  myvar = "local value";
+})();
+

+
+
Wegen des Hochziehens sollten alle var Anweisungen so weit am Anfang der Funktion wie nur möglich platziert werden. Dieses Vorgehen verbessert die Qualität des Quelltextes.

+
+
In ECMAScript 2015 wird let (bzw. const) nicht an den Anfang eines Blocks hochgezogen. Das Referenzieren der Variable in dem Block, bevor diese deklariert wurde, führt zu einem {{jsxref("ReferenceError")}}. Die Variable ist in einer "temporären toten Zone", die vom Start des Blocks bis zur Deklaration der Variablen besteht.

+
+
console.log(x); // ReferenceError
+let x = 3;

+
+
Funktionen hochziehen (hoisting)

+
+
Bei Funktionen (nur Funktionsdeklarationen) werden die Deklarationen ebenfalls nach oben gezogen. Bei Funktionsausdrücken gilt das jedoch nicht.

+
+
/* Funktionsdeklaration */
+
+foo(); // "bar"
+
+function foo() {
+   console.log("bar");
+}
+
+
+/* Funktionsausdruck */
+
+baz(); // TypeError: baz ist keine Funktion
+
+var baz = function() {
+   console.log("bar2");
+};
+

+
+
Globale Variablen

+
+
Globale Variablen sind faktisch Eigenschaften des globalen Objekts. In Webseiten ist das globale Objekt das {{domxref("window")}} Objekt, so dass globale Variablen gesetzt und erreicht werden können, indem die Syntax window.variable eingesetzt wird.

+
+
Folglich kann man globale Variablen, die in einem window oder frame deklariert wurden, aus einem anderen window oder Frame erreichen, indem der window oder framename angegeben wird. Zum Beispiel kann eine Variable phoneNumber, die in einem Dokument deklariert wurde, von einem iframe mit parent.phoneNumber erreicht werden.

+
+
Konstanten

+
+
Man kann eine nur lesende, benannte Konstante mit dem Schlüsselwort {{jsxref("Statements/const", "const")}} erstellen. Die Syntax für einen Konstantenbezeichner ist dieselbe, wie für Variablenbezeichner: Er muss mit einem Buchstaben, Unterstrich oder Dollarzeichen beginnen und kann alphabetische Zeichen, numerische Zeichen und Unterstriche enthalten.

+
+
const PI = 3.14;
+

+
+
Der Wert einer Konstanten kann nicht zur Laufzeit durch Zuweisungen oder Neudeklarationen geändert werden. Konstanten müssen deswegen immer initialisiert werden.

+
+
Die Sichtbarkeitsregeln (Scope) bei Konstanten sind die gleichen, wie für let Blockscope Variablen. Wenn das Schüsselwort const weggelassen wird, wird vorausgesetzt, dass der Bezeichner eine Variable repräsentiert.

+
+
Man kann keine Konstante mit dem gleichen Namen einer Funktion oder Variablen im gleiche Gültigkeitsbereich deklarieren. Zum Beispiel:

+
+
// DAS WIRD ZU EINEM ERROR FÜHREN
+function f() {};
+const f = 5;
+
+// DAS WIRD EBENFALLS ZU EINEM ERROR FÜHREN
+function f() {
+  const g = 5;
+  var g;
+
+  //statements
+}
+

+
+
Immer, wenn Objektattribute nicht geschützt sind, werden die folgenden Anweisungen ohne Probleme ausgeführt.

+
+
const MY_OBJECT = {"key": "value"};
+MY_OBJECT.key = "otherValue";

+
+
Jedoch ist der Inhalt eines Arrays nicht geschützt, sodass folgendes Statement ohne Probleme ausgeführt wird.

+
+
const MY_ARRAY = ['HTML','CSS'];
+MY_ARRAY.push('JAVASCRIPT');
+console.log(MY_ARRAY); // logs ['HTML','CSS','JAVASCRIPT']
+

+
+
Datenstrukturen und -typen

+
+
Datentypen

+
+
Der neuste ECMAScript Standard definiert sieben Datentypen:

+
+
    
+ 
  • Sechs Datentypen sind {{Glossary("Primitive", "primitive")}} Datentypen:
+  
      
+   
    • {{Glossary("Boolean")}}. true und false.
      • 
+   
    • {{Glossary("null")}}. Eine spezielles Schlüsselwort, was einen null-Wert kennzeichnet. Weil JavaScript zwischen Groß- und Kleinschreibung unterscheidet, ist null nicht das selbe wie Null, NULL oder einen andere Variante.
      • 
+   
    • {{Glossary("undefined")}}. Ein Eigenschaft, wessen Wert nicht Definiert ist.
      • 
+   
    • {{Glossary("Number")}}. Eine ganze Zahl oder Fließkommazahl. Zum Beispiel: 42 oder 3.14159.
      • 
+   
    • {{Glossary("String")}}. Eine Sequenz von Zeichen, die einen Textwert repräsentieren Zum Beispiel: "Howdy".
      • 
+   
    • {{Glossary("Symbol")}} (neu in ECMAScript 2015). Ein Datentyp, bei dem Instanzen einzigartig und unveränderlich sind.
      • 
+  
    
+ 
    • 
+ 
  • und {{Glossary("Object")}}
    • 
+

+
+
Obwohl die Anzahl der Datentypen relativ klein ist, eröffnen sie die Möglichkeit nützliche Funktionen für Applikationen zu erstellen. {{jsxref("Object", "Objects")}} und {{jsxref("Function", "functions")}} sind die anderen fundamentalen Elemente der Sprache. Man kann sich Objekte als benannte Container für Werte und Funktionen, die die Applikation ausführen kann, vorstellen.

+
+
Datentypkonvertierungen

+
+
JavaScript ist eine dynamisch typisierte Sprache. Das bedeutet, dass man den Datentypen einer Variable bei der Deklaration nicht mit angibt. Der Datentyp wird während der Ausführung automatisch konvertiert, wenn es notwendig ist. So kann eine Variable folgendermaßen definiert werden:

+
+
var answer = 42;
+

+
+
Und Später kann der gleichen Variablen eine Zeichenkette zugewiesen werden:

+
+
answer = "Thanks for all the fish...";
+

+
+
Weil JavaScript dynamisch typisiert ist, erzeugt diese Zuweisung keinen Fehler im Programm.

+
+
In Ausdrücken, in denen Zahlen und Zeichenketten mit dem + Operator gebraucht werden, konvertiert JavaScript die Zahlen in Zeichenketten. Siehe dazu das folgende Beispiel:

+
+
x = "The answer is " + 42 // "The answer is 42"
+y = 42 + " is the answer" // "42 is the answer"
+

+
+
In Ausdrücken mit anderen Operatoren, konvertiert JavaScript zahlen nicht in Zeichenketten. Zum Beispiel:

+
+
"37" - 7 // 30
+"37" + 7 // "377"
+

+
+
Konvertieren von Zeichenketten zu Zahlen

+
+
In Fällen, in denen eine Zahl durch einen String repräsentiert wird, gibt es folgende Methoden, um die Zeichenkette in eine Zahl umzuwandeln.

+
+
    
+ 
  • {{jsxref("parseInt", "parseInt()")}}
    • 
+ 
  • {{jsxref("parseFloat", "parseFloat()")}}
    • 
+

+
+
parseInt gibt nur ganze Zahlen zurück, weshalb der Einsatz für Dezimalzahlen nicht geeignet ist. Zu einem guten Programmierstil gehört es, dass man immer die Basis bei parseInt mit angibt. Der radix Parameter der Methode gibt an, aus welchem Zahlensystem die Zahl stammt.

+
+
Eine alternative Methode, um einen String in eine Zahl zu konvertieren ist der + (unär Plus) Operator:

+
+
"1.1" + "1.1" // "1.11.1"
+(+"1.1") + (+"1.1") // 2.2
+// Hinweis: die hinzugefügten Klammern sind nur für die Lesbarkeit.

+
+
Literale

+
+
Man benutzt Literale, um in JavaScript Werte zu repräsentieren. Es sind feste Werte, keine Variablen, die man in einem Skript einsetzt. Dieses Kapitel beschreibt die folgeden Literaltypen:

+
+
    
+ 
  • {{anch("Array Literale")}}
    • 
+ 
  • {{anch("Boolean Literale")}}
    • 
+ 
  • {{anch("Gleitkomma Literale")}}
    • 
+ 
  • {{anch("Ganze Zahlen")}}
    • 
+ 
  • {{anch("Objekt Literale")}}
    • 
+ 
  • {{anch("RegExp Literale")}}
    • 
+ 
  • {{anch("String Literale")}}
    • 
+

+
+
Array Literal

+
+
Ein Array Literal ist eine Liste von null oder mehr Ausdrücken. Jeder Ausdruck repräsentiert ein Element des Arrays. Diese Elemente sind von eckigen Klammern ([]) umschlossen. Wenn ein Array mit einem Array Literal erstellt wird, wird das Array mit allen definierten Elementen initialisiert und die länge des Arrays wird auf die Menge der Elemente gesetzt.

+
+
Das folgende Beispiel erstellt das coffees Array mit drei Elementen und der Länge drei:

+
+
var coffees = ["French Roast", "Colombian", "Kona"];
+

+
+

+
Hinweis: Ein Array Literal ist eine Art von Objektinitialisierung. Sie dazu auch den Einsatz von Objektinitialisierern.

+

+
+
Wenn ein Array durch ein Literal im Toplevel Skript erstellt wird, interpretiert JavaScript das Array immer dann, wenn ein Ausdruck dieses Literal enthält. Im Gegensatz dazu wird ein Literal in einer Funktion immer neu erstellt, wenn die Funktion aufgerufen wird.

+
+
Array Literale sind ebenfalls Array Objekte. Für mehr Details siehe {{jsxref("Array")}} und Indexed collections.

+
+
Extra Kommas in Array Literalen

+
+
Man muss nicht alle Elemente in einem Array Literal spezifizieren. Wenn man zwei Kommas in einer Reihe verwendet, wird das Array mit einem undefined Element erstellt. Das folgende Beispiel erstellt das fish Array:

+
+
var fish = ["Lion", , "Angel"];
+

+
+
Dieses Array hat zwei Elemente mit Werten und ein leeres Element (fish[0] ist "Lion", fish[1] ist undefined und fish[2] ist "Angel").

+
+
Wenn man ein trennendes Komma am Ende der Elementliste hinzufügt, wird es ignoriert. Im folgenden Beispiel ist die Länge des Arrays drei. Es gibt kein myList[3]. Alle weiteren Kommas in der Liste führen zu einem neuen Element.

+
+

+
Hinweis: Trennende Kommas können in älteren Browserversionen zu Fehlern führen. Zudem ist es ein guter Stil diese Kommas zu entfernen.

+

+
+
var myList = ['home', , 'school', ];
+

+
+
Im folgenden Beispiel hat das Array vier Elemente und myList[0] und myList[2] sind nicht spezifiziert.

+
+
var myList = [ , 'home', , 'school'];
+

+
+
Im folgenden Beispiel hat das Array vier Elemente und myList[1] und myList[3] sind nicht spezifiziert. Nur das letzte Komma wird ignoriert.

+
+
var myList = ['home', , 'school', , ];
+

+
+
Das Verständnis für das Verhalten von extra Kommas ist wichtig, um JavaScript als Sprache zu verstehen. Immer, wenn man seinen eigenen Quelltext schreibt, sollten explizit fehlenden Elementen mit undefined deklariert werden, damit die Lesbarkeit und Wartbarkeit des Quelltextes besser ist.

+
+
Boolean Literale

+
+
Der Boolean Typ hat zwei Literale: true und false.

+
+
Man sollte die primitiven Werte true und false jedoch nicht mit den Werten true und false des Boolean Objektes verwechseln. Das Boolean Objekt ist eine Hülle um den primitiven Boolean Datentypen. Siehe im Artikel {{jsxref("Boolean")}} für weitere Informationen.

+
+
Numerische Literale

+
+
Ganze Zahlen können als Dezimal- (Basis 10), Hexadezimal- (Basis 16), Oktal- (Basis 8) und Binärzahl (Basis 2) ausgedrückt werden.

+
+
    
+ 
  • Eine Dezimalzahlenliteral besteht aus einer Sequenz von Ziffern ohne eine führende 0.
    • 
+ 
  • Eine führende 0 oder 0o (oder 0O) bei einem Zahlenliteral deutet eine Oktalzahl an. Oktalzahlen können nur die Ziffern 0 bis 7 enthalten.
    • 
+ 
  • Ein führendes 0x (oder 0X) deutet eine Hexadezimalzahl an. Hexadezimale Ganzzahlen können als Stellen Ziffern (0 - 9) und die Buchstaben a - f bzw. A - F enthalten. (Die Schreibweise des Buchstaben ändert nicht den Wert der Stelle. Z. B. 0xa = 0xA = 10 und 0xf = 0xF = 15.)
    • 
+ 
  • Ein führendes 0b (oder 0B) deutet eine binäre Ganzzahl an. Binäre Ganzzahlen können nur die Ziffern 0 und 1 enthalten.
    • 
+

+
+
Im folgenden Beispiel sind einige Beispiele für Zahlenliterale:

+
+
0, 117 und -345 (dezimal, Basis 10)
+015, 0001 und -0o77 (oktal, Basis 8)
+0x1123, 0x00111 und -0xF1A7 (hexadezimal, "hex", Base 16)
+0b11, 0b0011 und -0b11 (binär, Basis 2)
+

+
+
Für weitere Informationen siehe numerische Literale in der Lexikalischen Grammatik Referenz.

+
+
Gleitkomma Literale

+
+
Ein Gleitkomma Literal kann die folgenden Abschnitte beinhalten:

+
+
    
+ 
  • Eine dezimale ganze Zahl, die mit einem Vorzeichen ("+" oder "-") versehen sein kann.
    • 
+ 
  • Einen Dezimalpunkt (".").
    • 
+ 
  • Eine Nachkommazahl (weitere Dezimalzahl).
    • 
+ 
  • Einen Exponenten.
    • 
+

+
+
Der Exponent besteht aus einem "e" oder "E" gefolgt von einer ganzen Zahl, die mit einem Vorzeichen ("+" oder "-") versehen sein kann. Eine Gleitkommazahl muss mindestens aus einer Ziffer und entweder einem Dezimalpunkt oder einem "e" (oder "E") bestehen.

+
+
Kurz und knapp sieht die Syntax folgendermaßen aus:

+
+
[(+|-)][ziffern][.ziffern][(E|e)[(+|-)]ziffern]
+

+
+
Zum Beispiel:

+
+
3.1415926
+-.123456789
+-3.1E+12
+.1e-23
+

+
+
Objekt Literale

+
+
Ein Objekt Literal ist eine Liste von null oder mehr Paaren von Eigenschaftsnamen und -werten, umschlossen von geschweiften Klammern ({}). Man sollte kein Objektliteral am Anfang eines Statements benutzen. Das wird zu einem Fehler führen oder nicht wie erwartet funktionieren, weil das {-Zeichen als Anfang eines Blocks interpretiert wird.

+
+
Es folgt ein Beispiel für ein Objekt Literal. Das erste Element des car Objektes definiert eine Eigenschaft myCar und beschreibt diese mit einem neuen String "Saturn". Am zweiten Element, der getCar Eigenschaft, wird der Rückgabewert der aufgerufenen Funktion carTypes("Honda") zugewiesen. Das dritte Element, die special Eigenschaft, benutzt eine existierende Variable sales.

+
+
var sales = "Toyota";
+
+function carTypes(name) {
+  if (name === "Honda") {
+    return name;
+  } else {
+    return "Sorry, we don't sell " + name + ".";
+  }
+}
+
+var car = {
+  myCar: "Saturn",
+  getCar: carTypes("Honda"),
+  special: sales
+};
+
+console.log(car.myCar);   // Saturn
+console.log(car.getCar);  // Honda
+console.log(car.special); // Toyota
+

+
+
Für die Namen der Eigenschaften kann auch ein String oder ein Zahlen Literal verwendet werden. Für den Wert kann auch ein verschachteltes Objekt Literal genutzt werden. Das folgende Beispiel nutzt diese Optionen.

+
+
var car = { manyCars: {a: 'Saab', b: 'Jeep'}, 7: 'Mazda' };
+
+console.log(car.manyCars.b); // Jeep
+console.log(car[7]); // Mazda
+

+
+
Die Namen von Objekteigenschaften können ein String sein, was auch den leeren String beinhaltet. Wenn die Eigenschaftsnamen keine gültigen JavaScript {{Glossary("Identifier","Bezeichner")}} sind, müssen sie in Anführungszeichen geschrieben werden. Eigenschaftsnamen die keine gültigen Bezeichner sind, können nicht mit der Punktschreibweise (.) erreicht werden. Wohl aber mit der Array ähnlichen Notation ("[]").

+
+
var unusualPropertyNames = {
+  "": "An empty string",
+  "!": "Bang!"
+}
+console.log(unusualPropertyNames."");   // SyntaxError: Unexpected string
+console.log(unusualPropertyNames[""]);  // An empty string
+console.log(unusualPropertyNames.!);    // SyntaxError: Unexpected token !
+console.log(unusualPropertyNames["!"]); // Bang!

+
+
Erweiterte Objekt Literale

+
+
In ES2015 wurde das Objekt Literal dahingehend erweitert, dass der Prototyp bei der Erstellung gesetzt wird. Desweiteren sind neue Funktionalitäten hinzugekommen, die eine Kurzschreibweise für foo: foo Zuweisungen, die Definitionen für Methoden, das Aufrufen von super Methoden und die Berechnung der Eigenschaftsnamen mit Ausdrücken ermöglichen. Alle diese Funktionen bringen zum Einen Klassendefinition und Objekt Literale näher zusammen und sind somit objektbasiertes Design und zum Anderen häufig vorteilhafter und bequemer.

+
+
var obj = {
+    // __proto__
+    __proto__: theProtoObj,
+    // Shorthand for ‘handler: handler’
+    handler,
+    // Methods
+    toString() {
+     // Super calls
+     return "d " + super.toString();
+    },
+    // Computed (dynamic) property names
+    [ 'prop_' + (() => 42)() ]: 42
+};

+
+
Bitte beachten:

+
+
var foo = {a: "alpha", 2: "two"};
+console.log(foo.a);    // alpha
+console.log(foo[2]);   // two
+//console.log(foo.2);  // Error: missing ) after argument list
+//console.log(foo[a]); // Error: a is not defined
+console.log(foo["a"]); // alpha
+console.log(foo["2"]); // two
+

+
+
RegExp Literale

+
+
Ein RegExp Literal (welcher im Detail später erklärt wird) ist ein Pattern (Muster) umschlossen von Slashes (/). Das Folgende ist ein Beispiel für ein RegExp Literal:

+
+
var re = /ab+c/;

+
+
String Literale

+
+
Ein String Literal besteht aus null oder mehr Zeichen, die von doppelten (") oder einfachen (') Anführungszeichen umschlossen sind. Ein String muss immer von gleichen Anführungszeichen umschlossen sein. Entweder von einfachen oder von doppelten Anführungszeichen. Im folgenden Beispiel sind ein paar String Literale gezeigt:

+
+
"foo"
+'bar'
+"1234"
+"eine Zeile \n weitere Zeile"
+"John's cat"
+

+
+
Man kann alle Methoden des String Objektes auf einem String Literal aufrufen, denn JavaScript konvertiert das Literal automatisch in ein temporäres String Objekt, führt die Methode aus und verwirft danach das temporäre Objekt. Man kann auch die String.length Eigenschaft mit einem String Literal benutzen:

+
+
console.log("John's cat".length)
+// Wird die Anzahl der Zeichen (auch Leerzeichen) ausgeben.
+// In diesem Fall 10.
+

+
+
In ES2015, wurden zudem Template Literale eingeführt. Template Literale sind von Backticks (` `) (Gravis) umschlossen. Template Strings bieten syntaktischen Zucker für das Erstellen von Strings an. Sie sind vergleichbar mit den String Interpolations Funktionen in Perl, Python und anderen Sprachen. Optional können Marken eingefügt werden, um einen String benutzerdefiniert zu erstellen. Sie vermeiden Injection-Attacken und ermöglichen es Datenstrukturen in Strings unterzubringen.

+
+
// Standardliteral für die String erstellung
+`In JavaScript '\n' is a line-feed.`
+
+// Mehrzellige Strings
+`In JavaScript ist das
+ nicht erlaubt.`
+
+// String Interpolation
+var name = "Bob", time = "today";
+`Hello ${name}, how are you ${time}?`
+
+// Erstellung einer HTTP Anfrage.
+POST`http://foo.org/bar?a=${a}&b=${b}
+     Content-Type: application/json
+     X-Credentials: ${credentials}
+     { "foo": ${foo},
+       "bar": ${bar}}`(myOnReadyStateChangeHandler);

+
+
Man sollte String Literale benutzen, sofern man nicht explizit ein Objekt benötigt. Für weitere Informationen siehe im {{jsxref("String")}} Artikel nach.

+
+
Einsatz von Sonderzeichen in Strings

+
+
Neben den normalen Zeichen ist es auch möglich Sonderzeichen in einem String zu verwenden. Ein Beispiel ist im folgenden zu sehen:

+
+
"eine Zeile \n nächste Zeile"
+

+
+
Die folgende Tabelle Zeigt die Sonderzeichen, die in JavaScript Strings verwendet werden können:

+
+
+ 
+ 
+  
+   
+   
+  
+ 
+ 
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+  
+  
+   
+   
+  
+  
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
Table: JavaScript Sonderzeichen
ZeichenBedeutung
\0Null Byte
\bBackspace
\fForm feed
\nNew line
\rCarriage return
\tTab
\vVertical tab
\'Einfache Anführungszeichen
\"Doppelte Anführungszeichen
\\Backslash Zeichen
\XXXDas Zeichen, das im Latin-1 Encoding mit drei Oktalzahlen (XXX) Spezifiziert wird (0 bis 377). Zum Beispiel ist \251 die Oktalsequenz für das Copyrightsymbol.
\xXXZeichen, die im Latin-1 Encoding mit zwei Hexadezimalzahlen (XX) spezifiziert werden (00 bis FF). Zum Beispiel ist \xA9 die Hexadezimalsequenz für das Copyrightsymbol.
\uXXXXDie Unicode Zeichen, die mit vier Hexadezimalziffern XXXX beschreiben werden. Zum Beispiel ist \u00A9 die Hexadezimalsequenz für das Copyrightsymbol. Siehe Unicode escape Sequenzen.
\u{XXXXX}Unicode code point escapes. Zum Beispiel ist \u{2F804} das gleiche wie das einfache Unicodezeichen \uD87E\uDC04.

+
+
Escaping Zeichen

+
+
Für nicht in der Tabelle gezeigte Zeichen wird ein voranstehendes Backslash ignoriert. Der Einsatz von Backslashs ist Veraltet und sollte vermieden werden.

+
+
Man kann Anführungszeichen in einen String hinzufügen, indem ein Führendes Backslash eingesetzt wird. Das wird auch escaping der Anführungszeichen genannt. Ein Beispiel:

+
+
var quote = "He read \"The Cremation of Sam McGee\" by R.W. Service.";
+console.log(quote);
+

+
+
Das Ergebnis ist:

+
+
He read "The Cremation of Sam McGee" by R.W. Service.
+

+
+
Um ein Backslash in einem String zu verwenden, muss dieses mit einem Backslash escaped werden. Zum Beispiel muss der Pfad c:\temp wie folgt geschrieben werden:

+
+
var home = "c:\\temp";
+

+
+
Man kann zudem Zeilenumbrüche mit einem vorangegangenen Backslash escapen. Das Backslash und der Zeilenumbruch werden aus dem String entfernt.

+
+
var str = "this string \
+is broken \
+across multiple\
+lines."
+console.log(str);   // this string is broken across multiple lines.
+

+
+
JavaScript kennt keine "heredoc" Syntax. Um eine solche zu simulieren muss am Ende jeder Zeile mit einem Zeilenumbruch (\n) ein Backslash stehen:

+
+
var poem =
+"Roses are red,\n\
+Violets are blue.\n\
+Sugar is sweet,\n\
+and so is foo."
+

+
+
ECMAScript 2015 führte einen neuen Literaltyp, das Template Literal, ein. Dieses führte, für viele neue Funktionen, Strings mit mehrere Zeilen ein!

+
+
var poem =
+`Roses are red,
+Violets are blue.
+Sugar is sweet,
+and so is foo.`
+

+
+
Mehr Informationen

+
+
Dieses Kapitel beschränkt sich auf die Basissyntax für Deklarationen und Typen. Um mehr über die Sprachkonstrukte von JavaScript zu lernen siehe in die folgenden Kapitel dieses Guides:

+
+
+
+
Im nächsten Kapitel wird ein Blick auf Kontrollflüsse und Fehlerbehandlungen geworfen.

+
+
{{PreviousNext("Web/JavaScript/Guide/Einführung", "Web/JavaScript/Guide/Kontrollfluss_und_Fehlerbehandlung")}}

diff --git a/files/de/web/javascript/guide/grammatik_und_typen/index.html b/files/de/web/javascript/guide/grammatik_und_typen/index.html
deleted file mode 100644
index 3ca2b9936b..0000000000
--- a/files/de/web/javascript/guide/grammatik_und_typen/index.html
+++ /dev/null
@@ -1,699 +0,0 @@
----
-title: Grammatik und Typen
-slug: Web/JavaScript/Guide/Grammatik_und_Typen
-tags:
-  - Guide
-  - JavaScript
-  - 'l10n:priority'
-translation_of: Web/JavaScript/Guide/Grammar_and_types
----
-
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Einführung", "Web/JavaScript/Guide/Kontrollfluss_und_Fehlerbehandlung")}}

-
-
Dieses Kapitel behandelt die grundlegende Grammatik von JavaScript, Deklaration von Variablen, Datentypen und Objektinstanzen.

-
-
Grundlagen

-
-
JavaScript leiht sich den größten Teil seiner Syntax von Java, ist aber auch von Sprachen wie Awk, Perl und Python beeinflusst.

-
-
JavaScript ist case-sensitiv (unterscheidet zwischen Groß- und Kleinschreibung) und benutzt den Unicode-Zeichensatz. Zum Beispiel kann das Wort Früh als Variablenname genutzt werden.

-
-
var Früh = "foobar";
-

-
-
Jedoch ist die Variable früh nicht dieselbe wie Früh, weil JavaScript case-sensitiv ist.

-
-
In JavaScript heißen Anweisungen "{{Glossary("Statement", "statements")}}" und werden durch ein Semikolon (;) voneinander getrennt. Ein Semikolon ist nicht nötig, wenn jedes Statement in einer neuen Zeile ist. Wenn mehrere Statements in einer Zeile geschrieben werden, sollte nach jedes mit einem Semikolon trennen. Zudem ist es gängige Praxis, hinter jedem Statement ein Semikolon zu schreiben. Leerzeichen, Tabulatoren und Zeilenumbrüche werden "Whitespace" genannt. Der Quelltext von JavaScript wird vom Interpreter von links nach rechts gelesen und in Sequenzen von Eingabe-Elementen wie JavaScript-Tokens, Steuerzeichen, Zeichenumbrüche, Kommentare und Objektinstanzen (Literale) umgewandelt. ECMAScript beschreibt für den Interpreter reservierte Schlüsselwörter sowie Objektinstanzen und hat eingebaute Regeln für die automatische Einfügung von Semikola (ASI) um Anweisungen zu beenden. Es wird jedoch empfohlen jede Anweisung mit einem Semikolon zu beenden; dies vermeidet ungewollte Nebeneffekte. Mehr Informationen dazu sind in der detaillierten Referenz über JavaScripts lexikalische Grammatik zu finden.

-
-
Kommentare

-
-
Die Syntax von Kommentaren ist dieselbe wie in C++ und in vielen anderen Sprachen:

-
-
// Einzeiliger Kommentar
-
-/* Das ist ein langer,
- * mehrzeiliger Kommentar
- */
-
-/* Man kann keine Kommentare, /* Verschachteln */ SyntaxError */

-
-
Kommentare sind wie Whitespaces und werden bei der Ausführung von Skripten verworfen.

-
-
Deklarationen

-
-
Es gibt drei mögliche Arten, Variablen zu deklarieren:

-
-

- 
{{jsxref("Statements/var", "var")}}

- 
Deklariert eine Variable. Optional wird ein Wert initialisiert.

- 
{{jsxref("Statements/let", "let")}}

- 
Deklariert eine Variable mit Gültigkeit im aktuellen Block. Optional wird ein Wert initialisiert.

- 
{{jsxref("Statements/const", "const")}}

- 
Deklariert eine Konstante mit Gültigkeit im aktuellen Block.

-

-
-
Variablen

-
-
Variablen werden benutzt, um Werte zu speichern. Dabei gibt man einer Variablen einen Namen, der {{Glossary("identifier", "Bezeichner")}} bzw. Bezeichner genannt wird und der bestimmten Regeln folgt.

-
-
Ein JavaScript Bezeichner muss mit einem Buchstaben, Unterstrich (_) oder einem Dollarzeichen ($) beginnen. Die nachfolgenden Zeichen können auch Zahlen sein. Da JavaScript case-sensitive ist, wird zwischen Groß- und Kleinschreibung unterschieden und somit repräsentiert "A" einen anderen Buchstaben als "a".

-
-
Es kann ein Großteil der ISO 8859-1 und Unicode-Zeichen benutzt werden, wie z.B. ü oder auch å, aber auch Unicode escape sequences können genutzt werden.

-
-
Beispiele für zulässige Bezeichner sind Number_hits, temp99 und _name.

-
-
Variablendeklaration

-
-
Die Deklaration einer Variable ist durch drei unterschiedliche Wege möglich:

-
-
    
- 
  • Mit dem Schlüsselwort {{jsxref("Statements/var", "var")}}, wie var x = 42. Die Syntax kann benutzt werden, um Variablen lokal und global zu deklarieren.
    • 
- 
  • Mit dem Zuweisen einer Variable, wie x = 42. Wenn diese Form außerhalb einer Funktion genutzt wird, wird die Variable global deklariert. Es wird eine strikte JavaScript-Warnung erzeugt. Diese Variante sollte vermieden werden.
    • 
- 
  • Mit dem Schlüsselwort {{jsxref("Statements/let", "let")}} , wie let x = 42. Die Syntax kann benutz werden, um Variablen nur für ihren Scope (Gültigkeitsbereich) zu deklarieren. Siehe Variablen Scope.
    • 
-

-
-
Variablen auswerten

-
-
Eine Variable, die mit var ohne Initialisierung deklariert wurde, hat den Wert {{jsxref("undefined")}}.

-
-
Der Zugriff auf eine nicht initialisierte Variable und der Zugriff auf eine let-Variable, bevor diese Initialisiert wurde, erzeugt einen {{jsxref("ReferenceError")}} Fehler:

-
-
var a;
-console.log("Der Wert von a ist " + a); // Der Wert von a ist undefined
-
-console.log("Der Wert von b ist " + b); // Der Wert von b ist undefined
-var b;
-
-console.log("Der Wert von c ist " + c); // ReferenceError: c is not defined
-
-let x
-console.log("Der Wert von x ist " + x); // Der Wert von x ist undefined
-
-console.log("Der Wert von y ist " + y); // ReferenceError: y is not defined
-let y;
-

-
-
undefined kann benutzt werden, um zu überprüfen ob eine Variable einen Wert hat. Im Folgenden Codebeispiel ist der Variable input kein Wert zugewiesen worden und das if-Statement wird somit true ausgeben.

-
-
var input;
-if(input === undefined){
-  macheDas();
-} else {
-  macheDasAndere();
-}
-

-
-
undefined verhält sich wie ein false, wenn es in einem boolschen Kontext verwendet wird. Zum Beispiel wird im folgendem Codebeispiel die Funktion myFunction ausgeführt, weil das myArray Element undefined ist:

-
-
var myArray = [];
-if (!myArray[0]) myFunction();
-

-
-
undefined wird zu NaN (Not a Number) konvertiert, wenn es in einem numerischen Kontext verwendet wird:

-
-
var a;
-a + 2;  //NaN

-
-
Wenn eine {{jsxref("null")}} Variable ausgewertet wird, verhält sie sich im numerischen Kontext wie 0 und in booleschem Kontext wie false:

-
-
var n = null;
-console.log(n * 32);  // wird 0 in die Konsole eintragen
-

-
-
Variablen Scope

-
-
Wird eine Variable außerhalb eines Code-Blocks deklariert, wird sie eine globale Variable genannt, da sie jetzt in jedem Bereich verfügbar ist. Wenn eine Variable jedoch innerhalb eines Code-Blocks deklariert wird, so ist sie nur innerhalb dieses Blocks verfügbar und wird aus diesem Grund lokale Variable genannt.

-
-
JavaScript hatte vor ECMAScript 2015 keinen Block-Anweisungs Scope; daher wurde eine deklarierte Variable in einem Block immer zu der Funktion (oder dem globalen Scope) gezählt, in dem sich der Block befand. Zum Beispiel wird der folgende Quelltext 5 ausgeben, weil der Scope von x die Funktion ist bzw. der globale Kontext, in dem x deklariert wurde, und nicht der Block, in diesem Fall die if Anweisung, selbst.

-
-
if (true) {
-  var x = 5;
-}
-console.log(x);  // 5
-

-
-
Das Verhalten ändert sich, wenn man die in ECMAScript 2015 eingeführte let Deklaration benutzt.

-
-
if (true) {
-  let y = 5;
-}
-console.log(y);  // ReferenceError: y is not defined
-

-
-
Variablen hochziehen (hoisting)

-
-
Eine andere Besonderheit mit Variablen in JavaScript ist, dass man eine Variable referenzieren kann, bevor sie deklariert wurde, ohne das es zu einem Fehler kommt. Diese Konzept ist bekannt als hoisting (hochziehen); Variablen in JavaScript sind hochgezogen und quasi zum Anfang der Funktion oder des Statements gehoben worden. Immer wenn Variablen hochgezogen werden, werden sie den Wert undefined zurückgeben. So wird immer undefined zurückgegeben, wenn man die Variablen benutzt, bevor sie deklariert und initialisiert wurden.

-
-
/**
- * Beispiel 1
- */
-console.log(x === undefined); // true
-var x = 3;
-
-/**
- * Beispiel 2
- * wird den Wert undefined zurückgeben
- */
-var myvar = "my value";
-
-(function() {
-  console.log(myvar); // undefined
-  var myvar = "local value";
-})();
-

-
-
Das obere Beispiel wird genauso interpretiert, wie das folgende Beispiel:

-
-
/**
- * Beispiel 1
- */
-var x;
-console.log(x === undefined); // true
-x = 3;
-
-/**
- * Beispiel 2
- */
-var myvar = "my value";
-
-(function() {
-  var myvar;
-  console.log(myvar); // undefined
-  myvar = "local value";
-})();
-

-
-
Wegen des Hochziehens sollten alle var Anweisungen so weit am Anfang der Funktion wie nur möglich platziert werden. Dieses Vorgehen verbessert die Qualität des Quelltextes.

-
-
In ECMAScript 2015 wird let (bzw. const) nicht an den Anfang eines Blocks hochgezogen. Das Referenzieren der Variable in dem Block, bevor diese deklariert wurde, führt zu einem {{jsxref("ReferenceError")}}. Die Variable ist in einer "temporären toten Zone", die vom Start des Blocks bis zur Deklaration der Variablen besteht.

-
-
console.log(x); // ReferenceError
-let x = 3;

-
-
Funktionen hochziehen (hoisting)

-
-
Bei Funktionen (nur Funktionsdeklarationen) werden die Deklarationen ebenfalls nach oben gezogen. Bei Funktionsausdrücken gilt das jedoch nicht.

-
-
/* Funktionsdeklaration */
-
-foo(); // "bar"
-
-function foo() {
-   console.log("bar");
-}
-
-
-/* Funktionsausdruck */
-
-baz(); // TypeError: baz ist keine Funktion
-
-var baz = function() {
-   console.log("bar2");
-};
-

-
-
Globale Variablen

-
-
Globale Variablen sind faktisch Eigenschaften des globalen Objekts. In Webseiten ist das globale Objekt das {{domxref("window")}} Objekt, so dass globale Variablen gesetzt und erreicht werden können, indem die Syntax window.variable eingesetzt wird.

-
-
Folglich kann man globale Variablen, die in einem window oder frame deklariert wurden, aus einem anderen window oder Frame erreichen, indem der window oder framename angegeben wird. Zum Beispiel kann eine Variable phoneNumber, die in einem Dokument deklariert wurde, von einem iframe mit parent.phoneNumber erreicht werden.

-
-
Konstanten

-
-
Man kann eine nur lesende, benannte Konstante mit dem Schlüsselwort {{jsxref("Statements/const", "const")}} erstellen. Die Syntax für einen Konstantenbezeichner ist dieselbe, wie für Variablenbezeichner: Er muss mit einem Buchstaben, Unterstrich oder Dollarzeichen beginnen und kann alphabetische Zeichen, numerische Zeichen und Unterstriche enthalten.

-
-
const PI = 3.14;
-

-
-
Der Wert einer Konstanten kann nicht zur Laufzeit durch Zuweisungen oder Neudeklarationen geändert werden. Konstanten müssen deswegen immer initialisiert werden.

-
-
Die Sichtbarkeitsregeln (Scope) bei Konstanten sind die gleichen, wie für let Blockscope Variablen. Wenn das Schüsselwort const weggelassen wird, wird vorausgesetzt, dass der Bezeichner eine Variable repräsentiert.

-
-
Man kann keine Konstante mit dem gleichen Namen einer Funktion oder Variablen im gleiche Gültigkeitsbereich deklarieren. Zum Beispiel:

-
-
// DAS WIRD ZU EINEM ERROR FÜHREN
-function f() {};
-const f = 5;
-
-// DAS WIRD EBENFALLS ZU EINEM ERROR FÜHREN
-function f() {
-  const g = 5;
-  var g;
-
-  //statements
-}
-

-
-
Immer, wenn Objektattribute nicht geschützt sind, werden die folgenden Anweisungen ohne Probleme ausgeführt.

-
-
const MY_OBJECT = {"key": "value"};
-MY_OBJECT.key = "otherValue";

-
-
Jedoch ist der Inhalt eines Arrays nicht geschützt, sodass folgendes Statement ohne Probleme ausgeführt wird.

-
-
const MY_ARRAY = ['HTML','CSS'];
-MY_ARRAY.push('JAVASCRIPT');
-console.log(MY_ARRAY); // logs ['HTML','CSS','JAVASCRIPT']
-

-
-
Datenstrukturen und -typen

-
-
Datentypen

-
-
Der neuste ECMAScript Standard definiert sieben Datentypen:

-
-
    
- 
  • Sechs Datentypen sind {{Glossary("Primitive", "primitive")}} Datentypen:
-  
      
-   
    • {{Glossary("Boolean")}}. true und false.
      • 
-   
    • {{Glossary("null")}}. Eine spezielles Schlüsselwort, was einen null-Wert kennzeichnet. Weil JavaScript zwischen Groß- und Kleinschreibung unterscheidet, ist null nicht das selbe wie Null, NULL oder einen andere Variante.
      • 
-   
    • {{Glossary("undefined")}}. Ein Eigenschaft, wessen Wert nicht Definiert ist.
      • 
-   
    • {{Glossary("Number")}}. Eine ganze Zahl oder Fließkommazahl. Zum Beispiel: 42 oder 3.14159.
      • 
-   
    • {{Glossary("String")}}. Eine Sequenz von Zeichen, die einen Textwert repräsentieren Zum Beispiel: "Howdy".
      • 
-   
    • {{Glossary("Symbol")}} (neu in ECMAScript 2015). Ein Datentyp, bei dem Instanzen einzigartig und unveränderlich sind.
      • 
-  
    
- 
    • 
- 
  • und {{Glossary("Object")}}
    • 
-

-
-
Obwohl die Anzahl der Datentypen relativ klein ist, eröffnen sie die Möglichkeit nützliche Funktionen für Applikationen zu erstellen. {{jsxref("Object", "Objects")}} und {{jsxref("Function", "functions")}} sind die anderen fundamentalen Elemente der Sprache. Man kann sich Objekte als benannte Container für Werte und Funktionen, die die Applikation ausführen kann, vorstellen.

-
-
Datentypkonvertierungen

-
-
JavaScript ist eine dynamisch typisierte Sprache. Das bedeutet, dass man den Datentypen einer Variable bei der Deklaration nicht mit angibt. Der Datentyp wird während der Ausführung automatisch konvertiert, wenn es notwendig ist. So kann eine Variable folgendermaßen definiert werden:

-
-
var answer = 42;
-

-
-
Und Später kann der gleichen Variablen eine Zeichenkette zugewiesen werden:

-
-
answer = "Thanks for all the fish...";
-

-
-
Weil JavaScript dynamisch typisiert ist, erzeugt diese Zuweisung keinen Fehler im Programm.

-
-
In Ausdrücken, in denen Zahlen und Zeichenketten mit dem + Operator gebraucht werden, konvertiert JavaScript die Zahlen in Zeichenketten. Siehe dazu das folgende Beispiel:

-
-
x = "The answer is " + 42 // "The answer is 42"
-y = 42 + " is the answer" // "42 is the answer"
-

-
-
In Ausdrücken mit anderen Operatoren, konvertiert JavaScript zahlen nicht in Zeichenketten. Zum Beispiel:

-
-
"37" - 7 // 30
-"37" + 7 // "377"
-

-
-
Konvertieren von Zeichenketten zu Zahlen

-
-
In Fällen, in denen eine Zahl durch einen String repräsentiert wird, gibt es folgende Methoden, um die Zeichenkette in eine Zahl umzuwandeln.

-
-
    
- 
  • {{jsxref("parseInt", "parseInt()")}}
    • 
- 
  • {{jsxref("parseFloat", "parseFloat()")}}
    • 
-

-
-
parseInt gibt nur ganze Zahlen zurück, weshalb der Einsatz für Dezimalzahlen nicht geeignet ist. Zu einem guten Programmierstil gehört es, dass man immer die Basis bei parseInt mit angibt. Der radix Parameter der Methode gibt an, aus welchem Zahlensystem die Zahl stammt.

-
-
Eine alternative Methode, um einen String in eine Zahl zu konvertieren ist der + (unär Plus) Operator:

-
-
"1.1" + "1.1" // "1.11.1"
-(+"1.1") + (+"1.1") // 2.2
-// Hinweis: die hinzugefügten Klammern sind nur für die Lesbarkeit.

-
-
Literale

-
-
Man benutzt Literale, um in JavaScript Werte zu repräsentieren. Es sind feste Werte, keine Variablen, die man in einem Skript einsetzt. Dieses Kapitel beschreibt die folgeden Literaltypen:

-
-
    
- 
  • {{anch("Array Literale")}}
    • 
- 
  • {{anch("Boolean Literale")}}
    • 
- 
  • {{anch("Gleitkomma Literale")}}
    • 
- 
  • {{anch("Ganze Zahlen")}}
    • 
- 
  • {{anch("Objekt Literale")}}
    • 
- 
  • {{anch("RegExp Literale")}}
    • 
- 
  • {{anch("String Literale")}}
    • 
-

-
-
Array Literal

-
-
Ein Array Literal ist eine Liste von null oder mehr Ausdrücken. Jeder Ausdruck repräsentiert ein Element des Arrays. Diese Elemente sind von eckigen Klammern ([]) umschlossen. Wenn ein Array mit einem Array Literal erstellt wird, wird das Array mit allen definierten Elementen initialisiert und die länge des Arrays wird auf die Menge der Elemente gesetzt.

-
-
Das folgende Beispiel erstellt das coffees Array mit drei Elementen und der Länge drei:

-
-
var coffees = ["French Roast", "Colombian", "Kona"];
-

-
-

-
Hinweis: Ein Array Literal ist eine Art von Objektinitialisierung. Sie dazu auch den Einsatz von Objektinitialisierern.

-

-
-
Wenn ein Array durch ein Literal im Toplevel Skript erstellt wird, interpretiert JavaScript das Array immer dann, wenn ein Ausdruck dieses Literal enthält. Im Gegensatz dazu wird ein Literal in einer Funktion immer neu erstellt, wenn die Funktion aufgerufen wird.

-
-
Array Literale sind ebenfalls Array Objekte. Für mehr Details siehe {{jsxref("Array")}} und Indexed collections.

-
-
Extra Kommas in Array Literalen

-
-
Man muss nicht alle Elemente in einem Array Literal spezifizieren. Wenn man zwei Kommas in einer Reihe verwendet, wird das Array mit einem undefined Element erstellt. Das folgende Beispiel erstellt das fish Array:

-
-
var fish = ["Lion", , "Angel"];
-

-
-
Dieses Array hat zwei Elemente mit Werten und ein leeres Element (fish[0] ist "Lion", fish[1] ist undefined und fish[2] ist "Angel").

-
-
Wenn man ein trennendes Komma am Ende der Elementliste hinzufügt, wird es ignoriert. Im folgenden Beispiel ist die Länge des Arrays drei. Es gibt kein myList[3]. Alle weiteren Kommas in der Liste führen zu einem neuen Element.

-
-

-
Hinweis: Trennende Kommas können in älteren Browserversionen zu Fehlern führen. Zudem ist es ein guter Stil diese Kommas zu entfernen.

-

-
-
var myList = ['home', , 'school', ];
-

-
-
Im folgenden Beispiel hat das Array vier Elemente und myList[0] und myList[2] sind nicht spezifiziert.

-
-
var myList = [ , 'home', , 'school'];
-

-
-
Im folgenden Beispiel hat das Array vier Elemente und myList[1] und myList[3] sind nicht spezifiziert. Nur das letzte Komma wird ignoriert.

-
-
var myList = ['home', , 'school', , ];
-

-
-
Das Verständnis für das Verhalten von extra Kommas ist wichtig, um JavaScript als Sprache zu verstehen. Immer, wenn man seinen eigenen Quelltext schreibt, sollten explizit fehlenden Elementen mit undefined deklariert werden, damit die Lesbarkeit und Wartbarkeit des Quelltextes besser ist.

-
-
Boolean Literale

-
-
Der Boolean Typ hat zwei Literale: true und false.

-
-
Man sollte die primitiven Werte true und false jedoch nicht mit den Werten true und false des Boolean Objektes verwechseln. Das Boolean Objekt ist eine Hülle um den primitiven Boolean Datentypen. Siehe im Artikel {{jsxref("Boolean")}} für weitere Informationen.

-
-
Numerische Literale

-
-
Ganze Zahlen können als Dezimal- (Basis 10), Hexadezimal- (Basis 16), Oktal- (Basis 8) und Binärzahl (Basis 2) ausgedrückt werden.

-
-
    
- 
  • Eine Dezimalzahlenliteral besteht aus einer Sequenz von Ziffern ohne eine führende 0.
    • 
- 
  • Eine führende 0 oder 0o (oder 0O) bei einem Zahlenliteral deutet eine Oktalzahl an. Oktalzahlen können nur die Ziffern 0 bis 7 enthalten.
    • 
- 
  • Ein führendes 0x (oder 0X) deutet eine Hexadezimalzahl an. Hexadezimale Ganzzahlen können als Stellen Ziffern (0 - 9) und die Buchstaben a - f bzw. A - F enthalten. (Die Schreibweise des Buchstaben ändert nicht den Wert der Stelle. Z. B. 0xa = 0xA = 10 und 0xf = 0xF = 15.)
    • 
- 
  • Ein führendes 0b (oder 0B) deutet eine binäre Ganzzahl an. Binäre Ganzzahlen können nur die Ziffern 0 und 1 enthalten.
    • 
-

-
-
Im folgenden Beispiel sind einige Beispiele für Zahlenliterale:

-
-
0, 117 und -345 (dezimal, Basis 10)
-015, 0001 und -0o77 (oktal, Basis 8)
-0x1123, 0x00111 und -0xF1A7 (hexadezimal, "hex", Base 16)
-0b11, 0b0011 und -0b11 (binär, Basis 2)
-

-
-
Für weitere Informationen siehe numerische Literale in der Lexikalischen Grammatik Referenz.

-
-
Gleitkomma Literale

-
-
Ein Gleitkomma Literal kann die folgenden Abschnitte beinhalten:

-
-
    
- 
  • Eine dezimale ganze Zahl, die mit einem Vorzeichen ("+" oder "-") versehen sein kann.
    • 
- 
  • Einen Dezimalpunkt (".").
    • 
- 
  • Eine Nachkommazahl (weitere Dezimalzahl).
    • 
- 
  • Einen Exponenten.
    • 
-

-
-
Der Exponent besteht aus einem "e" oder "E" gefolgt von einer ganzen Zahl, die mit einem Vorzeichen ("+" oder "-") versehen sein kann. Eine Gleitkommazahl muss mindestens aus einer Ziffer und entweder einem Dezimalpunkt oder einem "e" (oder "E") bestehen.

-
-
Kurz und knapp sieht die Syntax folgendermaßen aus:

-
-
[(+|-)][ziffern][.ziffern][(E|e)[(+|-)]ziffern]
-

-
-
Zum Beispiel:

-
-
3.1415926
--.123456789
--3.1E+12
-.1e-23
-

-
-
Objekt Literale

-
-
Ein Objekt Literal ist eine Liste von null oder mehr Paaren von Eigenschaftsnamen und -werten, umschlossen von geschweiften Klammern ({}). Man sollte kein Objektliteral am Anfang eines Statements benutzen. Das wird zu einem Fehler führen oder nicht wie erwartet funktionieren, weil das {-Zeichen als Anfang eines Blocks interpretiert wird.

-
-
Es folgt ein Beispiel für ein Objekt Literal. Das erste Element des car Objektes definiert eine Eigenschaft myCar und beschreibt diese mit einem neuen String "Saturn". Am zweiten Element, der getCar Eigenschaft, wird der Rückgabewert der aufgerufenen Funktion carTypes("Honda") zugewiesen. Das dritte Element, die special Eigenschaft, benutzt eine existierende Variable sales.

-
-
var sales = "Toyota";
-
-function carTypes(name) {
-  if (name === "Honda") {
-    return name;
-  } else {
-    return "Sorry, we don't sell " + name + ".";
-  }
-}
-
-var car = {
-  myCar: "Saturn",
-  getCar: carTypes("Honda"),
-  special: sales
-};
-
-console.log(car.myCar);   // Saturn
-console.log(car.getCar);  // Honda
-console.log(car.special); // Toyota
-

-
-
Für die Namen der Eigenschaften kann auch ein String oder ein Zahlen Literal verwendet werden. Für den Wert kann auch ein verschachteltes Objekt Literal genutzt werden. Das folgende Beispiel nutzt diese Optionen.

-
-
var car = { manyCars: {a: 'Saab', b: 'Jeep'}, 7: 'Mazda' };
-
-console.log(car.manyCars.b); // Jeep
-console.log(car[7]); // Mazda
-

-
-
Die Namen von Objekteigenschaften können ein String sein, was auch den leeren String beinhaltet. Wenn die Eigenschaftsnamen keine gültigen JavaScript {{Glossary("Identifier","Bezeichner")}} sind, müssen sie in Anführungszeichen geschrieben werden. Eigenschaftsnamen die keine gültigen Bezeichner sind, können nicht mit der Punktschreibweise (.) erreicht werden. Wohl aber mit der Array ähnlichen Notation ("[]").

-
-
var unusualPropertyNames = {
-  "": "An empty string",
-  "!": "Bang!"
-}
-console.log(unusualPropertyNames."");   // SyntaxError: Unexpected string
-console.log(unusualPropertyNames[""]);  // An empty string
-console.log(unusualPropertyNames.!);    // SyntaxError: Unexpected token !
-console.log(unusualPropertyNames["!"]); // Bang!

-
-
Erweiterte Objekt Literale

-
-
In ES2015 wurde das Objekt Literal dahingehend erweitert, dass der Prototyp bei der Erstellung gesetzt wird. Desweiteren sind neue Funktionalitäten hinzugekommen, die eine Kurzschreibweise für foo: foo Zuweisungen, die Definitionen für Methoden, das Aufrufen von super Methoden und die Berechnung der Eigenschaftsnamen mit Ausdrücken ermöglichen. Alle diese Funktionen bringen zum Einen Klassendefinition und Objekt Literale näher zusammen und sind somit objektbasiertes Design und zum Anderen häufig vorteilhafter und bequemer.

-
-
var obj = {
-    // __proto__
-    __proto__: theProtoObj,
-    // Shorthand for ‘handler: handler’
-    handler,
-    // Methods
-    toString() {
-     // Super calls
-     return "d " + super.toString();
-    },
-    // Computed (dynamic) property names
-    [ 'prop_' + (() => 42)() ]: 42
-};

-
-
Bitte beachten:

-
-
var foo = {a: "alpha", 2: "two"};
-console.log(foo.a);    // alpha
-console.log(foo[2]);   // two
-//console.log(foo.2);  // Error: missing ) after argument list
-//console.log(foo[a]); // Error: a is not defined
-console.log(foo["a"]); // alpha
-console.log(foo["2"]); // two
-

-
-
RegExp Literale

-
-
Ein RegExp Literal (welcher im Detail später erklärt wird) ist ein Pattern (Muster) umschlossen von Slashes (/). Das Folgende ist ein Beispiel für ein RegExp Literal:

-
-
var re = /ab+c/;

-
-
String Literale

-
-
Ein String Literal besteht aus null oder mehr Zeichen, die von doppelten (") oder einfachen (') Anführungszeichen umschlossen sind. Ein String muss immer von gleichen Anführungszeichen umschlossen sein. Entweder von einfachen oder von doppelten Anführungszeichen. Im folgenden Beispiel sind ein paar String Literale gezeigt:

-
-
"foo"
-'bar'
-"1234"
-"eine Zeile \n weitere Zeile"
-"John's cat"
-

-
-
Man kann alle Methoden des String Objektes auf einem String Literal aufrufen, denn JavaScript konvertiert das Literal automatisch in ein temporäres String Objekt, führt die Methode aus und verwirft danach das temporäre Objekt. Man kann auch die String.length Eigenschaft mit einem String Literal benutzen:

-
-
console.log("John's cat".length)
-// Wird die Anzahl der Zeichen (auch Leerzeichen) ausgeben.
-// In diesem Fall 10.
-

-
-
In ES2015, wurden zudem Template Literale eingeführt. Template Literale sind von Backticks (` `) (Gravis) umschlossen. Template Strings bieten syntaktischen Zucker für das Erstellen von Strings an. Sie sind vergleichbar mit den String Interpolations Funktionen in Perl, Python und anderen Sprachen. Optional können Marken eingefügt werden, um einen String benutzerdefiniert zu erstellen. Sie vermeiden Injection-Attacken und ermöglichen es Datenstrukturen in Strings unterzubringen.

-
-
// Standardliteral für die String erstellung
-`In JavaScript '\n' is a line-feed.`
-
-// Mehrzellige Strings
-`In JavaScript ist das
- nicht erlaubt.`
-
-// String Interpolation
-var name = "Bob", time = "today";
-`Hello ${name}, how are you ${time}?`
-
-// Erstellung einer HTTP Anfrage.
-POST`http://foo.org/bar?a=${a}&b=${b}
-     Content-Type: application/json
-     X-Credentials: ${credentials}
-     { "foo": ${foo},
-       "bar": ${bar}}`(myOnReadyStateChangeHandler);

-
-
Man sollte String Literale benutzen, sofern man nicht explizit ein Objekt benötigt. Für weitere Informationen siehe im {{jsxref("String")}} Artikel nach.

-
-
Einsatz von Sonderzeichen in Strings

-
-
Neben den normalen Zeichen ist es auch möglich Sonderzeichen in einem String zu verwenden. Ein Beispiel ist im folgenden zu sehen:

-
-
"eine Zeile \n nächste Zeile"
-

-
-
Die folgende Tabelle Zeigt die Sonderzeichen, die in JavaScript Strings verwendet werden können:

-
-
- 
- 
-  
-   
-   
-  
- 
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-  
-  
-   
-   
-  
-  
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
Table: JavaScript Sonderzeichen
ZeichenBedeutung
\0Null Byte
\bBackspace
\fForm feed
\nNew line
\rCarriage return
\tTab
\vVertical tab
\'Einfache Anführungszeichen
\"Doppelte Anführungszeichen
\\Backslash Zeichen
\XXXDas Zeichen, das im Latin-1 Encoding mit drei Oktalzahlen (XXX) Spezifiziert wird (0 bis 377). Zum Beispiel ist \251 die Oktalsequenz für das Copyrightsymbol.
\xXXZeichen, die im Latin-1 Encoding mit zwei Hexadezimalzahlen (XX) spezifiziert werden (00 bis FF). Zum Beispiel ist \xA9 die Hexadezimalsequenz für das Copyrightsymbol.
\uXXXXDie Unicode Zeichen, die mit vier Hexadezimalziffern XXXX beschreiben werden. Zum Beispiel ist \u00A9 die Hexadezimalsequenz für das Copyrightsymbol. Siehe Unicode escape Sequenzen.
\u{XXXXX}Unicode code point escapes. Zum Beispiel ist \u{2F804} das gleiche wie das einfache Unicodezeichen \uD87E\uDC04.

-
-
Escaping Zeichen

-
-
Für nicht in der Tabelle gezeigte Zeichen wird ein voranstehendes Backslash ignoriert. Der Einsatz von Backslashs ist Veraltet und sollte vermieden werden.

-
-
Man kann Anführungszeichen in einen String hinzufügen, indem ein Führendes Backslash eingesetzt wird. Das wird auch escaping der Anführungszeichen genannt. Ein Beispiel:

-
-
var quote = "He read \"The Cremation of Sam McGee\" by R.W. Service.";
-console.log(quote);
-

-
-
Das Ergebnis ist:

-
-
He read "The Cremation of Sam McGee" by R.W. Service.
-

-
-
Um ein Backslash in einem String zu verwenden, muss dieses mit einem Backslash escaped werden. Zum Beispiel muss der Pfad c:\temp wie folgt geschrieben werden:

-
-
var home = "c:\\temp";
-

-
-
Man kann zudem Zeilenumbrüche mit einem vorangegangenen Backslash escapen. Das Backslash und der Zeilenumbruch werden aus dem String entfernt.

-
-
var str = "this string \
-is broken \
-across multiple\
-lines."
-console.log(str);   // this string is broken across multiple lines.
-

-
-
JavaScript kennt keine "heredoc" Syntax. Um eine solche zu simulieren muss am Ende jeder Zeile mit einem Zeilenumbruch (\n) ein Backslash stehen:

-
-
var poem =
-"Roses are red,\n\
-Violets are blue.\n\
-Sugar is sweet,\n\
-and so is foo."
-

-
-
ECMAScript 2015 führte einen neuen Literaltyp, das Template Literal, ein. Dieses führte, für viele neue Funktionen, Strings mit mehrere Zeilen ein!

-
-
var poem =
-`Roses are red,
-Violets are blue.
-Sugar is sweet,
-and so is foo.`
-

-
-
Mehr Informationen

-
-
Dieses Kapitel beschränkt sich auf die Basissyntax für Deklarationen und Typen. Um mehr über die Sprachkonstrukte von JavaScript zu lernen siehe in die folgenden Kapitel dieses Guides:

-
-
-
-
Im nächsten Kapitel wird ein Blick auf Kontrollflüsse und Fehlerbehandlungen geworfen.

-
-
{{PreviousNext("Web/JavaScript/Guide/Einführung", "Web/JavaScript/Guide/Kontrollfluss_und_Fehlerbehandlung")}}

diff --git a/files/de/web/javascript/guide/introduction/index.html b/files/de/web/javascript/guide/introduction/index.html
new file mode 100644
index 0000000000..b38cb1b700
--- /dev/null
+++ b/files/de/web/javascript/guide/introduction/index.html
@@ -0,0 +1,140 @@
+---
+title: Einführung
+slug: Web/JavaScript/Guide/Einführung
+tags:
+  - Beginner
+  - Guide
+  - Introduction
+  - JavaScript
+  - 'l10n:priority'
+translation_of: Web/JavaScript/Guide/Introduction
+---
+
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammatik_und_Typen")}}

+
+
Dieses Kapitel stellt JavaScript vor und behandelt einige grundlegende Konzepte.

+
+
Was solltest du bereits wissen

+
+
Für diese Einführung solltest du die folgenden Grundkenntnisse besitzen:

+
+
    
+ 
  • Ein allgemeines Verständnis vom Internet und dem World Wide Web ({{Glossary("WWW")}}).
    • 
+ 
  • Gute praktische Kenntnisse in der HyperText Markup Language ({{Glossary("HTML")}}).
    • 
+ 
  • Etwas Programmiererfahrung. Falls du erst mit dem Programmieren beginnst, folge einem der Tutorials, die auf der Hauptseite zu JavaScript verlinkt sind.
    • 
+

+
+
Wo findest du Informationen zu JavaScript

+
+
Die Dokumentation zu JavaScript im MDN umfasst Folgendes:

+
+
    
+ 
  • Learning the Web [de] vermittelt Informationen für Einsteiger und präsentiert grundlegende Konzepte der Programmierung und des Internets.
    • 
+ 
  • JavaScript Guide [de] (dieser Artikel) gibt einen Überblick über JavaScript und die Komponenten der Sprache.
    • 
+ 
  • JavaScript Referenz [de] enthält ausführliches Referenzmaterial über JavaScript.
    • 
+

+
+
Falls du dich das erste Mal mit JavaScript befasst, beginne einfach mit den Tutorials von Learning the Web [de] und dem JavaScript Guide [de]. Sobald du mit den ersten Grundlagen vertraut bist, kannst du die JavaScript Referenz [de] nutzen, um noch mehr über die einzelnen Methoden, Funktionen und Objekte von JavaScript zu erfahren.

+
+
Was ist JavaScript?

+
+
JavaScript ist eine plattformübergreifende, objektorientierte Skriptsprache. Es ist eine kompakte und ressourcenschonende Sprache. Innerhalb einer Host-Umgebung kann JavaScript mit den Objekten seiner Umgebung verknüpft werden, um diese programmatisch zu steuern.

+
+
JavaScript beinhaltet eine Standardbibliothek von Objekten wie Array, Date, und Math, sowie einen Kern an Sprachelementen wie Operatoren, Kontrollstrukturen und Anweisungen. Der JavaScript-Kern kann für eine Vielzahl von Anwendungsfällen erweitert werden, indem man ihn durch zusätzliche Objekte ergänzt. Beispiele:

+
+
    
+ 
  • Clientseitiges JavaScript erweitert die Kernsprache durch die Bereitstellung von Objekten, mit denen ein Browser und sein Document Object Model (DOM) steuern lassen. Zum Beispiel ermöglichen clientseitige Erweiterungen einer Anwendung, Elemente in einem HTML-Formular anzulegen und auf Benutzerereignisse wie Mausklicks, Formulareingaben und Seitennavigation zu reagieren.
    • 
+ 
  • Serverseitiges JavaScript erweitert die Kernsprache durch Bereitstellung von Objekten, die für die Ausführung von JavaScript auf einem Server von Bedeutung sind. Zum Beispiel ermöglichen es serverseitige Erweiterungen einer Applikation, mit einer Datenbank zu kommunizieren, Information von einem Aufruf der Applikation zum nächsten zu erhalten oder Änderungen an Dateien auf einem Server vorzunehmen.
    • 
+

+
+
JavaScript und Java

+
+
JavaScript und Java gleichen einander in manchen Aspekten, sind in anderen aber grundlegend verschieden. Die Sprache JavaScript ähnelt Java, verfügt jedoch nicht über Javas statische Typisierung und seine strenge Typprüfung. JavaScript folgt weitgehend der Ausdruckssyntax, den Namenskonventionen und den elementaren Kontrollstrukturen von Java, was der Grund für die Umbenennung von LiveScript in JavaScript gewesen ist.

+
+
Im Gegensatz zu Javas durch Deklarationen aufgebautes System, von zur Compile-Zeit verfügbaren Klassen, unterstützt JavaScript ein Laufzeitsystem, das auf einer kleinen Zahl an Datentypen basiert, die numerische und Boolesche Werte sowie Zeichenketten repräsentieren. JavaScript besitzt ein prototypen-basiertes Objektmodell anstatt des verbreiteteren klassenbasierten. Das prototypen-basierte Modell liefert dynamische Vererbung; das bedeutet, was vererbt wird, kann zwischen einzelnen Objekten variieren. JavaScript unterstützt zudem Funktionen ohne spezielle deklarative Anforderungen. Funktionen können Objekt Eigenschaften sein, ausgeführt als schwach typisierte Methoden.

+
+
JavaScript ist im Vergleich zu Java eine syntaktisch sehr freie Sprache. Sie müssen nicht alle Variablen, Klassen und Methoden deklarieren. Sie müssen sich nicht damit befassen, ob Methoden öffentlich, privat oder geschützt sind und Sie müssen keine Interfaces implementieren. Variablen, Parameter und Rückgabewerte von Funktionen sind nicht explizit typisiert.

+
+
Java ist eine auf schnelle Ausführung und Typsicherheit ausgelegte, klassenbasierte Programmiersprache. Typsicherheit bedeutet, dass Sie zum Beispiel keine Ganzzal in Java in eine Objektreferenz wandeln oder auf geschützten Speicher zugreifen können, indem Sie den Bytecode von Java manipulieren. Javas klassenbasiertes Modell bedeutet, dass Programme ausschließlich aus Klassen und ihren Methoden bestehen. Javas Klassenvererbung und strenge Typisierung erfordern im Allgemeinen eng gekoppelte Objekthierarchien. Wegen dieser Anforderungen ist das Programmieren in Java komplexer als in JavaScript.

+
+
Im Gegensatz dazu steht JavaScript in der Tradition einer Reihe kleiner, dynamisch typisierter Sprachen wie HyperTalk und dBase. Diese Skriptsprachen stellen, dank ihrer einfacheren Syntax, spezialisierter eingebauter Funktionalität und minimalen Anforderungen, für die Objektgenerierung Programmierwerkzeuge für einen deutlich breiteren Adressatenkreis zu Verfügung.

+
+
+ 
+ 
+  
+   
+   
+  
+ 
+ 
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
JavaScript im Vergleich zu Java
JavaScriptJava
Objektorientiert. Keine Unterscheidung zwischen Typen von Objekten. Vererbung mittels des Prototypen-Mechanismus, jedes beliebige Objekt kann dynamisch um Eigenschaften und Methoden erweitert werden.Klassenbasiert. Objekte werden in Klassen und Instanzen unterteilt, Vererbung erfolgt vollständig über die Klassenhierarchie. Klassen und Instanzen können keine Eigenschaften und Methoden dynamisch hinzugefügt werden.
Datentypen von Variablen werden nicht deklariert (dynamische Typisierung)Datentypen von Variablen müssen deklariert werden (statische Typisierung)
Kein automatischer Schreibzugriff auf die Festplatte.Kein automatischer Schreibzugriff auf die Festplatte.

+
+
Weitere Informationen zu den Unterschieden zwischen JavaScript und Java finden Sie im Kapitel Einzelheiten des Objektmodells.

+
+
JavaScript und die ECMAScript-Spezifikation

+
+
JavaScript wird durch Ecma International standardisiert — den europäischen Verband zur Standardisierung von Informations- und Telekommunikationssystemen (ECMA war vormals ein Akronym für 'European Computer Manufacturers Association'), um eine standardisierte, internationale Programmiersprache auf der Basis von JavaScript verfügbar zu machen. Diese standardisierte Version von JavaScript, genannt ECMAScript, verhält sich in allen standardkonformen Applikationen identisch. Unternehmen können die offene Sprachdefinition verwenden, um ihre eigene Implementierung von JavaScript zu entwickeln. Der ECMAScript-Standard ist in der Spezifikation ECMA-262 dokumentiert. Unter Neu in JavaScript erfahren Sie mehr über die unterschiedlichen Versionen von JavaScript und den ECMAScript-Spezifikationen.

+
+
ECMA-262 ist auch von der ISO (International Organization for Standardization) als ISO-16262 verabschiedet. Sie finden die Spezifikation auch auf der Website von Ecma International. Die Spezifikation von ECMAScript beschreibt nicht das Document Object Model (DOM), welches durch das World Wide Web Consortium (W3C) und der WHATWG (Web Hypertext Application Technology Working Group) standardisiert wird. Das DOM definiert die Art und Weise, in der HTML-Dokumentenobjekte für Ihr Skript sichtbar sind. Um ein besseres Verständnis der verschiedenen bei der Programmierung in JavaScript eingesetzten Technologien zu entwickeln, lesen Sie den Artikel JavaScript Technologieübersicht.

+
+
JavaScript-Dokumentation vs. ECMAScript-Spezifikation

+
+
Die Spezifikation von ECMAScript besteht aus Anforderungen an eine Implementierung von ECMAScript; sie ist zweckdienlich, falls Sie standardkonforme Spracheigenschaften in Ihrer ECMAScript-Implementierung oder ihrer Laufzeitumgebung (wie SpiderMonkey in Firefox oder v8 in Chrome) realisieren wollen.

+
+
Das ECMAScript-Dokument soll nicht den Skriptprogrammierer unterstützen; nutzen Sie für Informationen zum Erstellen von Skripten die JavaScript-Dokumentation.

+
+
Die ECMAScript-Spezifikation verwendet Terminologie und Syntax, mit der JavaScript-Programmierer möglicherweise nicht vertraut sind. Obwohl sich die Beschreibung der Sprache in ECMAScript unterscheiden kann, bleibt die Sprache selbst die gleiche. JavaScript unterstützt jede Funktionalität, die in der ECMAScript-Spezifikation genannt wird.

+
+
Die JavaScript-Dokumentation beschreibt Aspekte der Sprache in für JavaScript-Programmierer passender Form.

+
+
Erste Schritte mit JavaScript

+
+
Die ersten Schritte mit JavaScript sind einfach: alles was Sie brauchen, ist einen aktuellen Browser. Diese Einführung nimmt auf einige Spracheigenschaften von JavaScript Bezug, die zur Zeit nur in den jüngsten Versionen von Firefox verfügbar sind, somit wird die Nutzung der aktuellsten Firefox-Version empfohlen.

+
+
Es gibt zwei Werkzeuge in Firefox, die zum Experimentieren mit JavaScript nützliche sind: die Web-Konsole and die JavaScript-Umgebung.

+
+
Die Web-Konsole

+
+
Die Web-Konsole zeigt Ihnen Informationen zur aktuell geladenen Webseite an und beinhaltet zudem eine Kommandozeile, die Sie nutzen können, um JavaScript-Ausdrücke im Kontext der aktuellen Seite auszuführen.

+
+
Um die Web-Konsole zu öffnen (Ctrl+Shift+K), wählen Sie "Web-Konsole" im Menü "Entwicklerwerkzeuge", das Sie im Menü von Firefox finden. Die Konsole wird am unteren Rand des Browserfensters angezeigt. Entlang des unteren Randes der Konsole befindet sich die Kommandozeile, in der Sie JavaScript eingeben können; die zugehörige Ausgabe erscheint im darüberliegenden Fensterbereich:

+
+

+
+
JavaScript-Umgebung (Scratchpad)

+
+
Die Web-Konsole eignet sich hervorragend zur Ausführung einzelner Zeilen JavaScript, möchten Sie jedoch mehrere Zeilen ausführen können, ist das nicht besonders komfortabel und Ihren Beispielcode speichern können Sie mit der Web-Konsole auch nicht. Daher ist für komplexere Beispiele die JavaScript-Umgebung die bessere Wahl.

+
+
Um die JavaScript-Umgebung zu öffnen (Shift+F4), wählen Sie "JavaScript-Umgebung" aus dem Menü "Entwicklerwerkzeuge", das Sie im Firefox-Menü finden. Die JavaScript-Umgebung öffnet sich in einem eigenen Fenster als Editor, mit dem Sie JavaScript schreiben und im Browser ausführen können. Sie können auch Skripte auf der Festplatte speichern bzw. laden.

+
+

+
+
Hello world

+
+
Beginnen Sie mit dem Programmieren in JavaScript, indem Sie die JavaScript-Umgebung öffnen und Ihr erstes "Hello World"-Programm in JavaScript schreiben:

+
+
function greetMe(yourName) {
+  alert("Hello " + yourName);
+}
+
+greetMe("World");
+

+
+
Markieren Sie den Quelltext und drücken Sie Ctrl+R, um zu schauen, ob alles funktioniert.

+
+
Auf den folgenden Seiten macht Sie diese Einführung mit Syntax und Spracheigenschaften von JavaScript vertraut, sodass Sie bald komplexere Anwendungen schreiben können.

+
+
{{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammatik_und_Typen")}}

diff --git a/files/de/web/javascript/guide/kontrollfluss_und_fehlerbehandlung/index.html b/files/de/web/javascript/guide/kontrollfluss_und_fehlerbehandlung/index.html
deleted file mode 100644
index 97dbba8b3e..0000000000
--- a/files/de/web/javascript/guide/kontrollfluss_und_fehlerbehandlung/index.html
+++ /dev/null
@@ -1,430 +0,0 @@
----
-title: Kontrollfluss und Fehlerbehandlung
-slug: Web/JavaScript/Guide/Kontrollfluss_und_Fehlerbehandlung
-tags:
-  - Beginner
-  - Guide
-  - JavaScript
-  - 'l10n:priority'
-translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling
----
-
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Grammatik_und_Typen", "Web/JavaScript/Guide/Schleifen_und_Iterationen")}}

-
-
JavaScript unterstützt eine Menge von Anweisungen, speziell um Verlaufs-Anweisungen zu kontrollieren, welches eine großartige Methode ist um Interaktivität in deine Anwendung einzuarbeiten. Dieses Kapitel liefert dir ein Überblick über diese Anweisungen.

-
-
Die JavaScript Referenzen beinhalten umfassende Details über die Anweisungen in diesem Kapitel. Das Semikolon (;) als Zeichen wird genutzt um Anweisungen im JavaScript Code einzuteilen.

-
-
Jeder JavaScript Ausdruck ist auch eine Anweisung. Schau ebenfalls in Ausdrücke und Operatoren, um komplette Informationen über Ausdrücke zu erhalten.

-
-
Block-Anweisungen

-
-
Das einfachste Statement ist das Block-Statement, welches genutzt wird um Anweisungen zu gruppieren. Dieser Block wird von einem Paar geschweiften Klammer umschlossen:

-
-
{
-  statement_1;
-  statement_2;
-  .
-  .
-  .
-  statement_n;
-}
-

-
-
Beispiele

-
-
Block-Statements werden meistens mit Kontrollfluss-Statements genutzt (z. B. if, for, while).

-
-
while (x < 10) {
-  x++;
-}
-

-
-
Hier ist, { x++; } das Block-Statement.

-
-
Wichtig: JavaScript hat vor ECMAScript2015 keine Block-Scopes. Variablen, die in einem Block deklariert werden, gehören zu der Funktion oder dem Skript und das Beschreiben der Variablen führt dazu, dass diese über den Block hinaus verfügbar ist. In anderen Worten, Block-Statements definieren keinen Scope. Alleinstehende Blöcke in JavaScript können komplett andere Ergebnisse erzeugen als in C oder Java. Zum Beispiel:

-
-
var x = 1;
-{
-  var x = 2;
-}
-console.log(x); // outputs 2
-

-
-
Hier wird 2 ausgegeben, weil var x innerhalb des Blocks im gleichen Scope ist wie das var x vor dem Block. In C oder Java hätte der selbe Code 1 ausgegeben.

-
-
Seit ECMAScript2015 sind let und const Variablendeklarationen, die an den Block gebunden sind. Siehe dazu auch die Referenzseiten {{jsxref("Statements/let", "let")}} und {{jsxref("Statements/const", "const")}} an.

-
-
Bedingte Statements

-
-
Ein bedingtes Statement ist eine Menge von Befehlen, die ausgeführt werden, wenn eine Bedingung wahr ist. JavaScript unterstützt zwei bedingte Statements: if...else und switch.

-
-
if...else Anweisungen

-
-
if wird eingesetzt um Statements auszuführen, wenn eine logische Bedingung wahr wird. Mit der optionalen else-Klausel werden Statements ausgeführt, wenn die Bedingung falsch ist. Ein if-Block sieht folgendermaßen aus:

-
-
if (bedingung) {
-  statement_1;
-} else {
-  statement_2;
-}

-
-
Hier kann die Bedingung ein Ausdruck sein, der zu true oder false ausgewertet wird. Siehe Boolean nach, um zu erfahren, was zu true und was zu false ausgewertet wird. Wenn bedingung zu true ausgewertet wird, wird statement_1 ausgeführt. Andernfalls wird statement_2 ausgeführt. statement_1 und statement_2 können beliebige Statements sein, auch weitere if-Statements.

-
-
Man kann zudem Statements mit else if konstruieren, um mehrere Bedingungen sequentiell zu testen:

-
-
if (bedingung_1) {
-  statement_1;
-} else if (bedingung_2) {
-  statement_2;
-} else if (bedingung_n) {
-  statement_n;
-} else {
-  statement_last;
-}
-

-
-
Um mehrere Statements auszuführen, werden diese in Blockstatements gruppiert ({ ... }). Generell ist es guter Stil immer Block-Statements zu benutzen, besonders bei verschachtelten if-Statements.

-
-
if (bedingung) {
-  statement_1_runs_if_condition_is_true;
-  statement_2_runs_if_condition_is_true;
-} else {
-  statement_3_runs_if_condition_is_false;
-  statement_4_runs_if_condition_is_false;
-}
-

-
-
Es ist ratsam, keine einfachen Zuweisungen in Bedingungen zu verwenden, da die Zuordnung mit der Prüfung auf Gleichheit verwechselt werden kann, wenn man über den Code schaut. Verwenden Sie zum Beispiel den folgenden Code nicht:

-
-
if (x = y) {
-  /* statements here */
-}
-

-
-
Wenn eine Zuweisung in einer Bedingung benötigt wird, ist es verbreitet diese in weitere runde Klammeren zu schreiben. Zum Beispiel:

-
-
if ((x = y)) {
-  /* statements here */
-}
-

-
-
Falsy Werte

-
-
Die folgenden Werte werden zu false ausgewertet (auch bekannt als {{Glossary("Falsy")}} Werte):

-
-
    
- 
  • false
    • 
- 
  • undefined
    • 
- 
  • null
    • 
- 
  • 0
    • 
- 
  • NaN
    • 
- 
  • der leere string ("")
    • 
-

-
-
Alle anderen Werte, auch alle Objekte, werden zu true ausgewertet, wenn sie als Bedingung eingesetzt werden.

-
-
Es ist jedoch etwas verwirrend mit den primitiven boolean Werten true und false und den Werten des {{jsxref("Boolean")}}-Objektes, wie folgendes Beispiel zeigt:

-
-
var b = new Boolean(false);
-if (b)          // Die Bedingung wird zu true ausgewertet.
-if (b == true)  // Die Bedingung wird zu false ausgewertet.

-
-
Beispiel

-
-
Im folgenden Beispiel gibt die Funktion checkData true zurück, wenn die Anzahl der Zeichen in einem Text Objekt drei ist. Andernfalls wird ein Alert angezeigt, und false zurückgegeben.

-
-
function checkData() {
-  if (document.form1.threeChar.value.length == 3) {
-    return true;
-  } else {
-    alert("Enter exactly three characters. " +
-    document.form1.threeChar.value + " is not valid.");
-    return false;
-  }
-}
-

-
-
switch Statement

-
-
Ein switch Statement erlaubt es einen Ausdruck auszuwerten und das Resultat zu einem passenden Fall-Label (case-Label ) zuzuordnen. Wenn ein passendes Fall-Label gefunden wird, werden die zugehörigen Statements ausgeführt. Ein switch Statement sieht wie folgt aus:

-
-
switch (ausdruck) {
-  case label_1:
-    statements_1
-    [break;]
-  case label_2:
-    statements_2
-    [break;]
-    ...
-  default:
-    statements_def
-    [break;]
-}
-

-
-
Das Programm sucht als erstes nach eine case-Klausel mit einem Label, welches mit dem Wert des Ausgewerteten Ausdrucks übereinstimmt und gibt die Kontrolle zu dieser Klausel, was bedeutet, dass die zugehörigen Statements ausgeführt werden. Wenn kein passendes Label gefunden wird, sucht das Programm nach der optionalen default-Klausel und gibt die Kontrolle an diese, was bedeutet, dass die zugehörigen Statements ausgeführt werden. Wenn keine default-Klausel vorhanden ist, wird das switch beendet und das nächste Statement wird ausgeführt. Laut Konventionen ist die default-Klausel die letzte Klausel, das muss aber nicht immer so sein.

-
-
Das optionale break Statement, welches in jeder case-Klausel eingesetzt ist, sorgt daführ, dass nach der Klausel das switch Statement beendet wird und das Programm mit dem nachfolgenden Statement weiter macht. Wenn break weggelassen wird, wird das Programm mit dem nächsten Statement im switch weitermachen, was dazu führt, dass alle nachlogenden case-Klauseln und die optionale default-Klausel mit ausgeführt werden.

-
-
Beispiel

-
-
Im folgenden Beispiel wird der case "Bananas" ausgeführt, wenn fruittype zu "Bananas" ausgewertet wird. Die break Statements bewirken, dass das switch beendet wird und das nach switch stehende Statement ausgeführt wird. Wird break im case "Bananas" weggelassen, so wird der case "Cherries" mit ausgeführt.

-
-
switch (fruittype) {
-  case 'Oranges':
-    console.log('Oranges are $0.59 a pound.');
-    break;
-  case 'Apples':
-    console.log('Apples are $0.32 a pound.');
-    break;
-  case 'Bananas':
-    console.log('Bananas are $0.48 a pound.');
-    break;
-  case 'Cherries':
-    console.log('Cherries are $3.00 a pound.');
-    break;
-  case 'Mangoes':
-    console.log('Mangoes are $0.56 a pound.');
-    break;
-  case 'Papayas':
-    console.log('Mangoes and papayas are $2.79 a pound.');
-    break;
-  default:
-   console.log('Sorry, we are out of ' + fruittype + '.');
-}
-console.log("Is there anything else you'd like?");

-
-
Statements zur Fehler- bzw. Ausnahmebehandlung

-
-
Man kann mit dem throw Statement Fehler werfen (erzeugen) und diese mit dem Einsatz des try...catch Statements auffangen und verarbeiten.

-
-
-
-
Ausnahmetypen

-
-
Jedes Objekt in JavaScript kann als Fehler bzw. Ausnahme geworfen werden. Nicht alle Fehlerobjekte müssen auf die gleiche Art und Weise erstellt worden sein. Trotz des häufig Einsatzes von Zahlen oder Strings als Ausnahmen ist es deutlich effektiver die speziell für Ausnahmen erstellten Typen zu benutzen:

-
-
-
-
throw Statement

-
-
Das throw Statement wird benutzt, um eine Exception (Ausnahme / Fehler) zu werfen. Wenn eine Exception geworfen wird, so wird ein Ausdruck spezifiziert, welcher den Wert, welcher geworfen wird, spezifiziert:

-
-
throw ausdruck;
-

-
-
Man kann jeden Ausdruck werfen, nicht nur Ausdrücke eines bestimmten Typs. Der folgende Code wirft mehrere Ausnahmen verschiedenen Typs:

-
-
throw "Error2";   // String type
-throw 42;         // Number type
-throw true;       // Boolean type
-throw {toString: function() { return "I'm an object!"; } };
-

-
-
Notiz: Man kann ein Objekt beim Werfen einer Exception spezifizieren. Im catch Block können die Eigenschaften des Objektes referenziert werden.

-
-
// Erstellt ein Objekt vom Typ UserException
-function UserException (message){
-  this.message=message;
-  this.name="UserException";
-}
-
-// Macht die Konvertierung der Exception in einen schönen String, wenn die Exception
-// als String genutzt werden soll.
-// (z. B. in der Fehlerconsole)
-UserException.prototype.toString = function () {
-  return this.name + ': "' + this.message + '"';
-}
-
-// Erstellt eine Instanz der UserException und wirft diese
-throw new UserException("Value too high");

-
-
try...catch Statement

-
-
Das try...catch Statement markiert einen Block von Statements, welcher versucht wird auszuführen, und einen oder mehrere Blöcke welche auf geworfene Exceptions abfangen. Wenn eine Exception geworfen wird, fängt das try...catch Statements diese ab.

-
-
Das try...catch Statement besteht aus einem try Block, welcher ein oder mehrere Statements enthält, und null oder mehr catch Blöcken, welche Statements spezifizieren, welche eine im try Block geworfene Exception abfangen und behandeln. Das Statement versucht den try Block erfolgreich abzuarbeiten und wenn dieser nicht erfolgreich ist, wird die Kontrolle an den catch Block gegeben. Wenn ein Statement in dem try Block (oder eine im try Block aufgerufene Funktion) eine Exception wirft, wird der Kontrollfluss sofort an den catch Block übergeben. Wenn keine Exception im try Block geworfen wird, wird der catch Block übersprungen. Der optionale finally Block wird nach dem try und nach dem catch Block ausgeführt, bevor das auf das try...catch Statement folgenden Statement ausgeführt wird.

-
-
Das Folgende Beispiel benutzt ein try...catch Statement. Das Beispiel ruft eine Funktion auf, welche einen Monatsnamen aus einen Array zurückgibt, je nachdem, welcher Wert übergeben wurde. Wenn der übergebene Wert keine korrekte Monatsnummer ist (1 - 12), dann wird eine Exception mit dem Wert "InvalidMonthNo" geworfen und die Statements im catch Block setzen die monthName Variable auf unknown.

-
-
function getMonthName (mo) {
-  mo = mo-1; // Justiert Monatsnummer zu Arrayindex (1=Jan, 12=Dec)
-  var months = ["Jan","Feb","Mar","Apr","May","Jun","Jul",
-                "Aug","Sep","Oct","Nov","Dec"];
-  if (months[mo] != null) {
-    return months[mo];
-  } else {
-    throw "InvalidMonthNo"; // throw Schlüsselwort wird hier benutzt
-  }
-}
-
-try { // statements to try
-  monthName = getMonthName(myMonth); // Funktion die Exceptions werfen kann
-}
-catch (e) {
-  monthName = "unknown";
-  logMyErrors(e); // Gibt Exception Objekt weiter für Fehlerbehandlung
-}
-

-
-
Der catch Block

-
-
Man kann einen catch Block einsetzen, um alle Exceptions, die im try Block generiert werden, zu verarbeiten.

-
-
catch (catchID) {
-  statements
-}
-

-
-
Der catch Block spezifiziert einen Variable (catchID im voranstehenden Syntaxbeispiel), welcher den Wert des throw Statements enthält. Man kann über diese Variable Informationen über die geworfene Exception abfragen. JavaScript erstellt diese Variable, wenn der Programmfluss in den catch Block geht. Die Variable existiert nur in dem catch Block. Nach dem beenden des catch Blocks ist die Variable nicht mehr verfügbar.

-
-
Im nächsten Beispeil wird eine Exception geworfen. Wenn die Exception geworfen wird, wird der Programmfluss in den catch Block gegeben.

-
-
try {
-  throw "myException" // Erstellt eine Exception
-}
-catch (e) {
-  // Statements, die die Exception verarbeiten
-  logMyErrors(e) // Verarbeitet Exception Objekt zur Fehlerbehandlung
-}
-

-
-
Der finally Block

-
-
Der finally Block enthält Statements, welche nach dem try und catch Block ausgeführt werden, bevor das Statement nach dem try...catch Statement ausgeführt wird. Der finally Block wird ausgeführt, egal ob eine Exception geworfen wird oder nicht. Wenn eine Exception geworfen wird, wird der finally auch ausgeführt, wenn kein catch die Exception abfängt.

-
-
Man kann den finally Block benutzen, um Skripte fehlertoleranter zu gestalten. Zum Beispiel kann eine Ressource im finally Block geschlossen werden. Das Folgende Beispiel öffnet eine Datei und führt Statements aus, um die Datei zu benutzen (Serverseitiges JavaScript erlaubt Zugriffe auf Dateien). Wenn eine Exception geworfen wird, während die Datei geöffnet ist, sorgt der finally Block dafür, dass die Datei wieder geschlossen wird.

-
-
openMyFile();
-try {
-  writeMyFile(theData); //Das kann Exceptions werfen
-} catch(e) {
-  handleError(e); // Wenn eine Exception geworfen wird, wird sie hier verarbeitet
-} finally {
-  closeMyFile(); // Schließt immer die Ressource
-}
-

-
-
Wenn der finally Block einen Rückgabewert definiert, ist dieser der Rückgabewert des try-catch-finally Prozedur, unabhängig davon, ob return Statements im try und catch Block verwendet werden.

-
-
function f() {
-  try {
-    console.log(0);
-    throw "bogus";
-  } catch(e) {
-    console.log(1);
-    return true; // Dieses return Statement is überflüssig
-                 // weil im finally Block ebenfalls eins vorhanden ist
-    console.log(2); // wird niemals erreicht
-  } finally {
-    console.log(3);
-    return false; // überschreibt früheres return Statements
-    console.log(4); // wird niemals erreicht
-  }
-  // false wird jetzt zurückgegeben
-  console.log(5); // wird niemals erreicht
-}
-f(); // alerts 0, 1, 3; returns false
-

-
-
Das Überschreiben des Rückgabewertes durch den finally Block überschreibt auch geworfene Exceptions, wenn diese im catch geworfen werden.

-
-
function f() {
-  try {
-    throw "bogus";
-  } catch(e) {
-    console.log('caught inner "bogus"');
-    throw e; // Dieses throw Statement is überflüssig
-             // weil im finally Block ein return vorkommt
-  } finally {
-    return false; // Überschreibt das vorherige "throw"
-  }
-  // false wird zurückgegeben
-}
-
-try {
-  f();
-} catch(e) {
-  // Dieser bereich wird nie erreicht, weil
-  // die Exception durch das return im
-  // finally block überschrieben wird.
-  console.log('caught outer "bogus"');
-}
-
-// OUTPUT
-// caught inner "bogus"

-
-
Verschachtelte try...catch Statements

-
-
Man kann mehrere try...catch Statements ineinander verschachteln. Wenn ein inneres try...catch Statements keinen catch Block hat, wird ein äußeres try...catch Statement mit einem catch Block eine Exception auffangen. Mehr Informationen gibt es im Kapitel Verschachtelte try-Blöcke auf der try...catch Seite.

-
-
Nützliche Verwendung des Error Objekts

-
-
Abhängig vom der Art des Fehlers, möchte man die Möglichkeit haben einen Namen und eine Fehlernachricht zu vergeben. 'name' und 'message' Eigenschaften sind generell durch die Klasse Error (z. B. DOMException oder Error) unterstützt. Die 'message' Eigenschaft ist dabei eine String-Repräsentation des Fehlers, so wie sie bei der Konvertierung des Objektes zu einem String benötigt wird.

-
-
Wenn man beim Werfen von eigenen Exceptions die Vorteile dieser Eigenschaften nutzen möchte (wenn zum Beipsiel der catch Block nicht zwischen eigenen und System Exceptions unterscheidet), kann der Konstruktor von Error benutzt werden. Zum Beispiel:

-
-
function doSomethingErrorProne () {
-  if (ourCodeMakesAMistake()) {
-    throw (new Error('The message'));
-  } else {
-    doSomethingToGetAJavascriptError();
-  }
-}
-....
-try {
-  doSomethingErrorProne();
-}
-catch (e) {
-  console.log(e.name); // logs 'Error'
-  console.log(e.message); // logs 'The message' or a JavaScript error message)
-}

-
-
Promises

-
-
Mit ECMAScript 6 hat JavaScript die Unterstützung für {{jsxref("Promise")}} Objekte bekommen, welche zum Steuern von asynchronen Operationen genutzt wird.

-
-
Ein Promise ist in einem der folgenen Status:

-
-
    
- 
  • pending: Anfangszustand, nicht erfolgreich oder fehlerhaft beendet.
    • 
- 
  • fulfilled: Erfolgreiche Operation
    • 
- 
  • rejected: Gescheiterte Operation.
    • 
- 
  • settled: Das Promise ist entweder erfüllt oder abgelehnt, aber nicht pending.
    • 
-

-
-

-
-
Ein Bild mit XHR laden

-
-
Ein einfaches Beispiel für den Einsatz von Promise und XMLHttpRequest ist das Laden eines Bildes (Siehe MDN GitHub js-examples Repository; man kann es hier auch in Aktion sehen). Jeder Schritt ist Kommentiert und erlaubt es der Architektur des Promise und XHR zu folgen. Hier ist die unkommentierte Version, welche den Promise Ablauf zeigt, zu sehen, so dass man eine Idee davon bekommt.

-
-
function imgLoad(url) {
-  return new Promise(function(resolve, reject) {
-    var request = new XMLHttpRequest();
-    request.open('GET', url);
-    request.responseType = 'blob';
-    request.onload = function() {
-      if (request.status === 200) {
-        resolve(request.response);
-      } else {
-        reject(Error('Image didn\'t load successfully; error code:'
-                     + request.statusText));
-      }
-    };
-    request.onerror = function() {
-      reject(Error('There was a network error.'));
-    };
-    request.send();
-  });
-}

-
-
Für deteiliertere Informationen, kann man sich die {{jsxref("Promise")}} Referenz Seite und den Using Promises Guide anschauen.

-
-
{{PreviousNext("Web/JavaScript/Guide/Grammatik_und_Typen", "Web/JavaScript/Guide/Schleifen_und_Iterationen")}}

diff --git a/files/de/web/javascript/guide/loops_and_iteration/index.html b/files/de/web/javascript/guide/loops_and_iteration/index.html
new file mode 100644
index 0000000000..9f351abcd9
--- /dev/null
+++ b/files/de/web/javascript/guide/loops_and_iteration/index.html
@@ -0,0 +1,337 @@
+---
+title: Schleifen und Iterationen
+slug: Web/JavaScript/Guide/schleifen_und_iterationen
+tags:
+  - Guide
+  - JavaScript
+  - Loop
+  - Syntax
+  - 'l10n:priority'
+translation_of: Web/JavaScript/Guide/Loops_and_iteration
+---
+
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}

+
+
Schleifen sind ein einfaches Werkzeug, um einzelne Schritte wiederholt auszuführen. Dieses Kapitel des JavaScript Guide stellt die verschiedenen Statements für Iterationen vor, welche in JavaScript zur Verfügung stehen.

+
+
Man kann sich Schleifen wie eine Computerversion des Spiels vorstellen, bei dem man jemandem sagt, er soll x Schritte in eine Richtung und dann y Schritte in eine andere Richtung gehen. So kann zum Beispiel die Aussage "Gehe fünf Schritte nach Osten" mit Hilfe von Schleifen so ausgedrückt werden:

+
+
var schritt;
+for (schritt = 0; schritt < 5; schritt++) {
+  // Laufe 5 mal, mit den Werten von Schritt 0 bis 4
+  console.log('Gehe einen Schritt nach Osten');
+}
+

+
+
Es gibt viele verschiedene Arten von Schleifen, doch im Wesentlichen verrichten alle die gleiche Aufgabe: sie führen eine Aktion für eine bestimmte Anzahl an Wiederholungen aus (diese Anzahl kann auch 0 sein). Dabei ermöglichen die verschiedenen Arten von Schleifen unterschiedliche Anfangs- und Endpunkte festzulegen. Es gibt zahlreiche Situationen in denen eine Art von Schleifen einfacher zum Ergebnis führt, als eine andere.

+
+
JavaScript stellt folgende Statements für Schleifen zur Verfügung:

+
+
    
+ 
  • {{anch("for Statement")}}
    • 
+ 
  • {{anch("do...while Statement")}}
    • 
+ 
  • {{anch("while Statement")}}
    • 
+ 
  • {{anch("label Statement")}}
    • 
+ 
  • {{anch("break Statement")}}
    • 
+ 
  • {{anch("continue Statement")}}
    • 
+ 
  • {{anch("for...in Statement")}}
    • 
+ 
  • {{anch("for...of Statement")}}
    • 
+

+
+
for Statement

+
+
Eine  {{jsxref("statements/for","for Schleife")}} wird so lange durchlaufen, bis eine bestimmte Bedingung den Wert false liefert. Die for Schleife in JavaScript ist vergleichbar mit der in Java und C. Ein for Statement sieht wie folgt aus:

+
+
for ([initialerAusruck]; [Bedingung]; [erhöhenderAusdruck])
+  Anweisung
+

+
+
Bei der Ausführung einer for Schleife geschieht folgendes:

+
+
    
+ 
  1. Der Ausdruck zur Initialisierung der Schleife initialerAsudruck, wird ausgeführt, sofern dieser existiert. Dieser Ausdruck initialisiert einen oder mehrere Schleifenzähler, wobei die Syntax beliebig komplexe Ausdrücke zulässt. In diesem Ausdruck können auch Variablen deklariert werden.
    2. 
+ 
  2. Die Bedingung Bedingung wird geprüft. Wenn die Auswertung von Bedingung den Wert true ergibt, werden die Anweisungen innerhalb der Schleife ausgeführt. Ergibt die Prüfung hingegen false, wird die Schleife verlassen. Bleibt die Bedingung leer, wird immer der Wert true angenommen.
    3. 
+ 
  3. Die Anweisung wird ausgeführt. Um mehrere Anweisungen auszuführen, werden Block-Anweisungen ({ ... }) verwendet, um diese zu gruppieren.
    4. 
+ 
  4. Wenn vorhanden, wird der Ausdruck erhöhenderAusdruck ausgeführt.
    5. 
+ 
  5. Geht zu Schritt 2 zurück.
    6. 
+

+
+
Beispiel

+
+
Die folgende Funktion enthält ein for Statement, welche die Anzahl der ausgewählten Optionen aus einer Auswahlliste (ein {{HTMLElement("select")}}, welches eine Mehrfachauswahl erlaubt) ermittelt. Das for Statement deklariert eine Variable i und initialisiert diese mit dem Wert 0. Sie prüft ob i kleiner als die Anzahl der verfügbarer Optionen des <select> Elements ist, führt das nachfolgende if Statement aus und erhöht i bei jedem Schleifendurchlauf um 1.

+
+
<form name="selectForm">
+  <p>
+    <label for="musicTypes">Choose some music types, then click the button below:</label>
+    <select id="musicTypes" name="musicTypes" multiple="multiple">
+      <option selected="selected">R&B</option>
+      <option>Jazz</option>
+      <option>Blues</option>
+      <option>New Age</option>
+      <option>Classical</option>
+      <option>Opera</option>
+    </select>
+  </p>
+  <p><input id="btn" type="button" value="How many are selected?" /></p>
+</form>
+
+<script>
+function howMany(selectObject) {
+  var numberSelected = 0;
+  for (var i = 0; i < selectObject.options.length; i++) {
+    if (selectObject.options[i].selected) {
+      numberSelected++;
+    }
+  }
+  return numberSelected;
+}
+
+var btn = document.getElementById('btn');
+btn.addEventListener('click', function(){
+  alert('Number of options selected: ' + howMany(document.selectForm.musicTypes))
+});
+</script>
+
+

+
+
do...while Statement

+
+
Das {{jsxref("statements/do...while", "do...while")}} Statement wiederholt eine bestimmte Anweisung, bis eine Bedingung false ergibt. Ein do...while Statement sieht wie folgt aus:

+
+
do
+  anweisung
+while (bedingung);
+

+
+
amweisung wird dabei einmal ausgeführt, bevor die Bedingung geprüft wird. Um mehrere Anweisungen auszuführen, werden diese als Block Statement ({ ... }) gruppiert. Wenn bedingung true ist, wird die Anweisung erneut ausgeführt. Nach jeder Ausführung der Anweisungen, wird die Bedingung erneut geprüft. Sobald bedingung false ergibt, endet die Ausführung der Schleife und die nächste Anweisung nach der do...while Schleife aus wird ausgeführt.

+
+
Beispiel

+
+
Im folgenden Beispiel wird die Schleife mindestens einmal ausgeführt. Anschliessend wird die Schleife so oft durchlaufen, bis i nicht mehr kleiner als 5 ist.

+
+
var i = 0;
+do {
+  i += 1;
+  console.log(i);
+} while (i < 5);

+
+
while Statement

+
+
Ein {{jsxref("statements/while","while")}} Statement wird solange ausgeführt, wie eine bestimmte Bedingung true ergibt. Ein while Statement sieht wie folgt aus:

+
+
while (bedingung)
+  anweisung
+

+
+
Wenn die Bedingung false ist, wird die Schleife nicht weiter durchlaufen und die nächste Anweisung nach der while Schleife wird ausgeführt.

+
+
Die Prüfung der Bedingung erfolgt, bevor die Anweisungen innerhalb der Schleife ausgeführt werden. Nur wenn die Bedingung true ist, wird die Schleife ausgeführt, wobei anschliessend eine erneute Prüfung der Bedingung erfolgt. Ergibt die Bedingung false, wir mit der Anweisungen nach der while Schleife fortgefahren.

+
+
Um mehrere Anweisungen auszuführen, werden diese in einer block Anweisung ({ ... }) gruppiert.

+
+
Beispiel 1

+
+
Die folgende while Schleife wird so lange ausgeführt, wie n kleiner als 3 ist.

+
+
var n = 0;
+var x = 0;
+while (n < 3) {
+  n++;
+  x += n;
+}
+

+
+
Mit jedem Schleifendurchlauf wird n um 1 erhöht. Der Wert von n wird dann zum Wert von x addiert. Dadurch nehmen x und n die folgenden Werte an:

+
+
    
+ 
  • Nach dem ersten Durchlauf: n = 1 und x = 1
    • 
+ 
  • Nach dem zweiten Durchlauf: n = 2 und x = 3
    • 
+ 
  • Nach dem dritten Durchlauf: n = 3 und x = 6
    • 
+

+
+
Nach dem dritten Durchlauf ist die Bedingung n < 3 nicht mehr true und die Schleife wird verlassen.

+
+
Beispiel 2

+
+
Endlosschleifen müssen vermieden werden. Es ist immer sicherzustellen, dass die Bedingung irgendwann false ergibt, da die Schleife ansonsten nie endet. Die Anweisung in der folgenden while Schleife wird für immer ausgeführt, weil die Bedingung nie false ergibt:

+
+
while (true) {
+  console.log('Hello, world!');
+}

+
+
Label Statement

+
+
Ein {{jsxref("statements/label","label")}} stellt ein Statement mit einem Bezeichner bereit, welches es ermöglicht auf eine bestimmte stelle im Programm zu verweisen. So kann ein Label zum Beispiel dafür verwendet werden eine Schleife zu identifizieren und dann mit break oder continue festzulegen ob diese beendet oder weiter durchlaufen werden soll.

+
+
Die Syntax des Label Statement sieht wie folgt aus:

+
+
label :
+   anweisung
+

+
+
Der Wert von label kann jede Bezeichnung sein, der kein reserviertes JavaScript Schlüsselwort ist. Die anweisung die mit dem Label identifiziert wird, kann jede beliebige Anweisung sein.

+
+
Beispiel

+
+
In diesem Beispiel identifiziert das Label markLoop eine while Schleife.

+
+
markLoop:
+while (theMark == true) {
+   doSomething();
+}

+
+
break Statement

+
+
Um eine Schleife oder ein switch Statement zu beenden, verwendet man das {{jsxref("statements/break","break")}} Statement in Verbindung mit dem Label Statement.

+
+
    
+ 
  • Wird break ohne ein Label verwendet, so wird die innerste while, do-while, for Schleife oder switch Statement beendet und die nachfolgende Ausführung wird ausgeführt.
    • 
+ 
  • Wird break in Verbindung mit einem Label eingesetzt, wird die Anweisung beendet, die mit dem Label identifiziert wird.
    • 
+

+
+
Die Syntax von break sieht wie folgt aus:

+
+
break [label];
+

+
+
Die erste Variante der Syntax beendet die innerste Schleife oder das innerste switch Statement. Die zweite Variante beendet eine bestimmte Anweisung.

+
+
Beispiel 1

+
+
Das folgende Beispiel durchläuft die Elemente in einem Array, bis ein Element mit dem Wert von theValue gefunden wird:

+
+
for (var i = 0; i < a.length; i++) {
+  if (a[i] == theValue) {
+    break;
+  }
+}

+
+
Beispiel 2: break mit einem Label

+
+
var x = 0;
+var z = 0;
+labelCancelLoops: while (true) {
+  console.log('Outer loops: ' + x);
+  x += 1;
+  z = 1;
+  while (true) {
+    console.log('Inner loops: ' + z);
+    z += 1;
+    if (z === 10 && x === 10) {
+      break labelCancelLoops;
+    } else if (z === 10) {
+      break;
+    }
+  }
+}
+

+
+
continue Statement

+
+
Das {{jsxref("statements/continue","continue")}} Statement kann eingesetzt werden, um eine while, do-while, for Schleife oder ein Statement mit einem Label erneut auszuführen.

+
+
    
+ 
  • Wird continue ohne ein Label verwendet, wird der Durchlauf der innersten while, do-while oder for Statement beendet und der nächsten Durchlauf wird begonnen. Im Gegensatz zum break Statement, wird mit continue nicht die gesamte Schleife abgebrochen. In einer while Schleife springt das Programm zurück zur Bedingung. In einer for Schleife springt das Programm zum erhöhenden Ausdruck.
    • 
+ 
  • Wird continue mit einem Label eingesetzt, wird continue auf die Anweisungen angewendet, die durch das Label identifiziert werden.
    • 
+

+
+
Die Syntax des continue Statement sieht wie folgt aus:

+
+
continue [label];
+

+
+
Beispiel 1

+
+
Das folgende Beispiel zeigt eine while Schleife, mit einem continue Statement, die weiter ausgeführt wird, wenn i den Wert 3 hat. Dadurch erhält n die Werte 1, 3, 7 und 12.

+
+
var i = 0;
+var n = 0;
+while (i < 5) {
+  i++;
+  if (i == 3) {
+    continue;
+  }
+  n += i;
+}
+

+
+
Beispiel 2

+
+
Eine Anweisung mit dem Label checkiandj enthält eine Anweisung mit dem Label checkj. Wenn continue erreicht wird, bricht das Programm den aktuellen Schleifendurchlauf von checkj ab und setzt die Ausführung beim nächsten Durchlauf fort. Immer wenn continue erreicht wird, wird checkj erneut ausgeführt, bis dessen Bedingung false zurückliefert. Wird false zurückgeliefert, wird der Rest der checkiandj Anweisung vollendet und checkiandj wird wiederholt, bis dessen Bedingung false zurückgibt. Wird false zurückgegeben, wird das Programm bei der Anweisung nach checkiandj fortgesetzt.

+
+
Wenn continue ein Label checkiandj hätte, würde das Programm am Anfang der checkiandj Anweisung fortgesetzt werden.

+
+
var i = 0;
+var j = 10;
+checkiandj:
+  while (i < 4) {
+    console.log(i);
+    i += 1;
+    checkj:
+      while (j > 4) {
+        console.log(j);
+        j -= 1;
+        if ((j % 2) == 0) {
+          continue checkj;
+        }
+        console.log(j + ' is odd.');
+      }
+      console.log('i = ' + i);
+      console.log('j = ' + j);
+  }

+
+
for...in Statement

+
+
Das {{jsxref("statements/for...in","for...in")}} Statement durchläuft eine bestimmte Variable über alle aufzählbaren Eigenschaften eines Objekts. Für jede einzelne Eigenschaft führt JavaScript die entsprechende Anweisung aus. Ein for...in Statement sieht wie folgt aus:

+
+
for (variable in object) {
+  statements
+}
+

+
+
Beispiel

+
+
Die folgende Funktion nimmt als Argument ein Objekt und dessen Namen entgegen. Anschliessend durchläuft sie alle Eigenschaften des Objekts und liefert einen String zurück, der alle Namen und Werte der Eigenschaften des Objekts enthält.

+
+
function dump_props(obj, obj_name) {
+  var result = '';
+  for (var i in obj) {
+    result += obj_name + '.' + i + ' = ' + obj[i] + '<br>';
+  }
+  result += '<hr>';
+  return result;
+}
+

+
+
Für ein Objekt car mit den Eigenschaften make und model, sieht das Ergebnis wie folgt aus:

+
+
car.make = Ford
+car.model = Mustang
+

+
+
Arrays

+
+
Auch wenn es nahe liegt diesen Weg zu verwenden, um die Elemente eines {{jsxref("Array")}}s zu durchlaufen, würde das for...in Statement die Namen der definierten Werte und den numerischen Index zurückliefern. Daher ist es besser eine normale {{jsxref("statements/for","for")}} Schleifen mit einem numerischen Index zu verwenden, wenn Arrays durchlaufen werden sollen, da das for...in Statement neben den benutzerdefinierten Elementen auch die Eigenschaften des Arrays durchläuft, wenn man Methoden oder Eigenschaften hinzufügt oder ändert.

+
+
for...of Statement

+
+
Das {{jsxref("statements/for...of","for...of")}} Statement erstellt eine Schleife, die alle iterable objects (inklusive {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("functions/arguments","arguments")}} Objekt, etc.) durchläuft und die Anweisungen ausführt, die mit dem Wert des Durchlaufes für jede Eigenschaft übereinstimmt.

+
+
for (variable of object) {
+  statement
+}

+
+
Das folgende Beispiel zeigt den Unterschied zwischen der for...of Schleife und der {{jsxref("statements/for...in","for...in")}} Schleife. Während for...in die Namen der Eigenschaften durchläuft, durchläuft for...of die Werte der Eigenschaft:

+
+
var arr = [3, 5, 7];
+arr.foo = 'hello';
+
+for (var i in arr) {
+   console.log(i); // logs "0", "1", "2", "foo"
+}
+
+for (var i of arr) {
+   console.log(i); // logs 3, 5, 7
+}
+

+
+
{{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}

diff --git a/files/de/web/javascript/guide/mit_objekten_arbeiten/index.html b/files/de/web/javascript/guide/mit_objekten_arbeiten/index.html
deleted file mode 100644
index 2448621a4a..0000000000
--- a/files/de/web/javascript/guide/mit_objekten_arbeiten/index.html
+++ /dev/null
@@ -1,506 +0,0 @@
----
-title: Mit Objekten arbeiten
-slug: Web/JavaScript/Guide/Mit_Objekten_arbeiten
-tags:
-  - Beginner
-  - Comparing object
-  - Constructor
-  - Document
-  - Guide
-  - JavaScript
-  - Object
-  - 'l10n:priority'
-translation_of: Web/JavaScript/Guide/Working_with_Objects
----
-
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Feinheiten_des_Objektmodells")}}

-
-
JavaScript ist nach einem einfachen objekt-basierten Muster entworfen. Ein Objekt ist eine Sammlung von Eigenschaften und eine Eigenschaft ist eine Verbindung von einem Namen und einem Wert. Der Wert einer Eigenschaft kann eine Funktion sein. In diesem Fall wird die Eigenschaft Methode genannt. Zusätzlich zu Objekten, die vom Browser vordefiniert sind, können auch eigene Objekte definiert werden. Dieses Kapitel beschreibt, wie Objekte, Eigenschaften, Funktionen und Methoden benutzt und eigene Objekte erzeugt werden können.

-
-
Objekte Übersicht

-
-
Objekte in JavaScript, wie in vielen anderen Programmiersprachen, können mit Objekten aus dem realen Leben verglichen werden. Das Konzept der Objekte in JavaScript kann mit greifbaren Objekten aus der realen Welt verstanden werden.

-
-
In JavaScript ist ein Objekt eine für sich stehende Einheit mit Eigenschaften und Typ. Vergleichbar mit einer Tasse zum Beispiel. Eine Tasse ist ein Objekt mit Eigenschaften. Eine Tasse hat eine Farbe, ein Design, ein Gewicht, ein Material, aus dem sie erstellt wurde, usw. Ebenso können JavaScript Objekte Eigenschaften besitzen, die Ihre Besonderheiten definieren.

-
-
Objekte und Eigenschaften

-
-
Ein JavaScript Objekt besitzt mit ihm verbundene Eigenschaften. Eine Eigenschaft eines Objekts kann als Variable erklärt werden, die dem Objekt angeheftet ist. Objekteigenschaften sind grundsätzlich das Gleiche wie übliche Variablen ausser der Verknüpfung mit Objekten. Die Eigenschaften eines Objekts definieren seine Charakteristik. Auf die Eigenschaften eines Objekt kann mit einer einfachen Punkt-Notation zugegriffen werden:

-
-
objectName.propertyName
-

-
-
Wie bei allen JavaScript-Variablen sind Objektname (eine normale Variable) und Attribute groß-, und kleinschreibungsabhängig. Ein Attribut wird definiert, indem es einen Wert zugewiesen bekommt. Zum Beispiel: Ein Objekt namens myCar mit den Attributen make, model, und year:

-
-
var myCar = new Object();
-myCar.make = "Ford";
-myCar.model = "Mustang";
-myCar.year = 1969;
-

-
-
Nicht initialisierte Eigenschaften eines Objektes haben den Wert {{jsxref("undefined")}} (nicht {{jsxref("null")}}).

-
-
myCar.color; // undefined

-
-
Eigenschaften von JavaScript-Objekten können auch mit der Klammernotation (für weitere Informationen siehe property accessors). Objekte werden manchmal assoziative Arrays genannt da jede Eigenschaft mit einer Zeichenkette assoziiert ist mit der man auf die Eigenschaft zugreifen kann. Zum Beispiel kann man auf die Eigenschaften des Objekts myCar folgendermassen zugreifen:

-
-
myCar["make"] = "Ford";
-myCar["model"] = "Mustang";
-myCar["year"] = 1969;
-

-
-
Der Name einer Objekteigenschaft kann ein valider JavaScript String sein. Dies kann auch alles sein, was in einen String convertiert werden kann, inklusive eines leeren Strings. Immer, wenn der Name einer Eigenschaft kein valider JavaScript Bezeichner ist (zum Beispiel ein Name mit einem Leerzeichen oder einem minus oder ein Name der mit einer Ziffer beginnt), kann dieses nur über die Klammernotation erreicht werden. Diese Notation ist zusätzlich sehr hilfreich, wenn Namen von Eigenschaften dynamisch ermittelt werden (Wenn die Namen nicht bis zur Laufzeit ermittelt werden können). Im folgenden ein Beispiel:

-
-
// four variables are created and assigned in a single go,
-// separated by commas
-var myObj = new Object(),
-    str = 'myString',
-    rand = Math.random(),
-    obj = new Object();
-
-myObj.type              = 'Dot syntax';
-myObj['date created']   = 'String with space';
-myObj[str]              = 'String value';
-myObj[rand]             = 'Random Number';
-myObj[obj]              = 'Object';
-myObj['']               = 'Even an empty string';
-
-console.log(myObj);
-

-
-
Zu bemerken ist, dass alle Schlüssel in der Klammernotation zum Typ Strings konvertiert werden, weil in JavaScript nur Strings als Schlüssel bei Objekte erlaubt sind. Zum Beispiel wird im orberen Beispiel obj konvertiert wenn es in myObj benutzt wird. JavaScript ruft die obj.toString() Methode auf und benutzt den resultierenden String als neuen Schlüssel.

-
-
Man kann eine Eigenschaft auch erreichen, indem eine Variable vom Typ String benutzt wird:

-
-
var propertyName = 'make';
-myCar[propertyName] = 'Ford';
-
-propertyName = 'model';
-myCar[propertyName] = 'Mustang';
-

-
-
Man kann die Klammernotation mit for...in nutzen, um über alle enumerable (aufzählbaren) Eigenschaften eines Objektes zu iterieren. Um dieses zu zeigen wie das funktioniert, zeigt die folgende Funktion die Eigenschaften eines Objektes, wenn eine Objekt und der Name des Objektes der Funktion als Parameter übergeben werden:

-
-
function showProps(obj, objName) {
-  var result = '';
-  for (var i in obj) {
-    // obj.hasOwnProperty() wird benutzt um Eigenschaften aus der Prototypen-Kette herauszufiltern
-    if (obj.hasOwnProperty(i)) {
-      result += objName + '.' + i + ' = ' + obj[i] + '\n';
-    }
-  }
-  return result;
-}
-

-
-
So gibt der Aufruf showProps(myCar, "myCar") folgenden Rückgabewert zurück:

-
-
myCar.make = Ford
-myCar.model = Mustang
-myCar.year = 1969

-
-
Enumerate the properties of an object

-
-
Starting with ECMAScript 5, there are three native ways to list/traverse object properties:

-
-
    
- 
  • for...in loops
    
-  This method traverses all enumerable properties of an object and its prototype chain
    • 
- 
  • {{jsxref("Object.keys", "Object.keys(o)")}}
    
-  This method returns an array with all the own (not in the prototype chain) enumerable properties' names ("keys") of an object o.
    • 
- 
  • {{jsxref("Object.getOwnPropertyNames", "Object.getOwnPropertyNames(o)")}}
    
-  This method returns an array containing all own properties' names (enumerable or not) of an object o.
    • 
-

-
-
Before ECMAScript 5, there was no native way to list all properties of an object. However, this can be achieved with the following function:

-
-
function listAllProperties(o) {
-	var objectToInspect;
-	var result = [];
-
-	for(objectToInspect = o; objectToInspect !== null; objectToInspect = Object.getPrototypeOf(objectToInspect)) {
-      result = result.concat(Object.getOwnPropertyNames(objectToInspect));
-	}
-
-	return result;
-}
-

-
-
This can be useful to reveal "hidden" properties (properties in the prototype chain which are not accessible through the object, because another property has the same name earlier in the prototype chain). Listing accessible properties only can easily be done by removing duplicates in the array.

-
-
Creating new objects

-
-
JavaScript has a number of predefined objects. In addition, you can create your own objects. You can create an object using an object initializer. Alternatively, you can first create a constructor function and then instantiate an object invoking that function in conjunction with the new operator.

-
-
Using object initializers

-
-
In addition to creating objects using a constructor function, you can create objects using an object initializer. Using object initializers is sometimes referred to as creating objects with literal notation. "Object initializer" is consistent with the terminology used by C++.

-
-
The syntax for an object using an object initializer is:

-
-
var obj = { property_1:   value_1,   // property_# may be an identifier...
-            2:            value_2,   // or a number...
-            // ...,
-            'property n': value_n }; // or a string
-

-
-
where obj is the name of the new object, each property_i is an identifier (either a name, a number, or a string literal), and each value_i is an expression whose value is assigned to the property_i. The obj and assignment is optional; if you do not need to refer to this object elsewhere, you do not need to assign it to a variable. (Note that you may need to wrap the object literal in parentheses if the object appears where a statement is expected, so as not to have the literal be confused with a block statement.)

-
-
Object initializers are expressions, and each object initializer results in a new object being created whenever the statement in which it appears is executed. Identical object initializers create distinct objects that will not compare to each other as equal. Objects are created as if a call to new Object() were made; that is, objects made from object literal expressions are instances of Object.

-
-
The following statement creates an object and assigns it to the variable x if and only if the expression cond is true:

-
-
if (cond) var x = {greeting: 'hi there'};
-

-
-
The following example creates myHonda with three properties. Note that the engine property is also an object with its own properties.

-
-
var myHonda = {color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}};
-

-
-
You can also use object initializers to create arrays. See array literals.

-
-
Using a constructor function

-
-
Alternatively, you can create an object with these two steps:

-
-
    
- 
  1. Define the object type by writing a constructor function. There is a strong convention, with good reason, to use a capital initial letter.
    2. 
- 
  2. Create an instance of the object with new.
    3. 
-

-
-
To define an object type, create a function for the object type that specifies its name, properties, and methods. For example, suppose you want to create an object type for cars. You want this type of object to be called Car, and you want it to have properties for make, model, and year. To do this, you would write the following function:

-
-
function Car(make, model, year) {
-  this.make = make;
-  this.model = model;
-  this.year = year;
-}
-

-
-
Notice the use of this to assign values to the object's properties based on the values passed to the function.

-
-
Now you can create an object called mycar as follows:

-
-
var mycar = new Car('Eagle', 'Talon TSi', 1993);
-

-
-
This statement creates mycar and assigns it the specified values for its properties. Then the value of mycar.make is the string "Eagle", mycar.year is the integer 1993, and so on.

-
-
You can create any number of Car objects by calls to new. For example,

-
-
var kenscar = new Car('Nissan', '300ZX', 1992);
-var vpgscar = new Car('Mazda', 'Miata', 1990);
-

-
-
An object can have a property that is itself another object. For example, suppose you define an object called person as follows:

-
-
function Person(name, age, sex) {
-  this.name = name;
-  this.age = age;
-  this.sex = sex;
-}
-

-
-
and then instantiate two new person objects as follows:

-
-
var rand = new Person('Rand McKinnon', 33, 'M');
-var ken = new Person('Ken Jones', 39, 'M');
-

-
-
Then, you can rewrite the definition of Car to include an owner property that takes a person object, as follows:

-
-
function Car(make, model, year, owner) {
-  this.make = make;
-  this.model = model;
-  this.year = year;
-  this.owner = owner;
-}
-

-
-
To instantiate the new objects, you then use the following:

-
-
var car1 = new Car('Eagle', 'Talon TSi', 1993, rand);
-var car2 = new Car('Nissan', '300ZX', 1992, ken);
-

-
-
Notice that instead of passing a literal string or integer value when creating the new objects, the above statements pass the objects rand and ken as the arguments for the owners. Then if you want to find out the name of the owner of car2, you can access the following property:

-
-
car2.owner.name
-

-
-
Note that you can always add a property to a previously defined object. For example, the statement

-
-
car1.color = 'black';
-

-
-
adds a property color to car1, and assigns it a value of "black." However, this does not affect any other objects. To add the new property to all objects of the same type, you have to add the property to the definition of the Car object type.

-
-
Using the Object.create method

-
-
Objects can also be created using the {{jsxref("Object.create()")}} method. This method can be very useful, because it allows you to choose the prototype object for the object you want to create, without having to define a constructor function.

-
-
// Animal properties and method encapsulation
-var Animal = {
-  type: 'Invertebrates', // Default value of properties
-  displayType: function() {  // Method which will display type of Animal
-    console.log(this.type);
-  }
-};
-
-// Create new animal type called animal1
-var animal1 = Object.create(Animal);
-animal1.displayType(); // Output:Invertebrates
-
-// Create new animal type called Fishes
-var fish = Object.create(Animal);
-fish.type = 'Fishes';
-fish.displayType(); // Output:Fishes

-
-
Inheritance

-
-
All objects in JavaScript inherit from at least one other object. The object being inherited from is known as the prototype, and the inherited properties can be found in the prototype object of the constructor. See Inheritance and the prototype chain for more information.

-
-
Indexing object properties

-
-
You can refer to a property of an object either by its property name or by its ordinal index. If you initially define a property by its name, you must always refer to it by its name, and if you initially define a property by an index, you must always refer to it by its index.

-
-
This restriction applies when you create an object and its properties with a constructor function (as we did previously with the Car object type) and when you define individual properties explicitly (for example, myCar.color = "red"). If you initially define an object property with an index, such as myCar[5] = "25 mpg", you subsequently refer to the property only as myCar[5].

-
-
The exception to this rule is objects reflected from HTML, such as the forms array. You can always refer to objects in these arrays by either their ordinal number (based on where they appear in the document) or their name (if defined). For example, if the second <FORM> tag in a document has a NAME attribute of "myForm", you can refer to the form as document.forms[1] or document.forms["myForm"] or document.forms.myForm.

-
-
Defining properties for an object type

-
-
You can add a property to a previously defined object type by using the prototype property. This defines a property that is shared by all objects of the specified type, rather than by just one instance of the object. The following code adds a color property to all objects of type Car, and then assigns a value to the color property of the object car1.

-
-
Car.prototype.color = null;
-car1.color = 'black';
-

-
-
See the prototype property of the Function object in the JavaScript reference for more information.

-
-
Defining methods

-
-
A method is a function associated with an object, or, simply put, a method is a property of an object that is a function. Methods are defined the way normal functions are defined, except that they have to be assigned as the property of an object. See also method definitions for more details. An example is:

-
-
objectName.methodname = functionName;
-
-var myObj = {
-  myMethod: function(params) {
-    // ...do something
-  }
-
-  // OR THIS WORKS TOO
-
-  myOtherMethod(params) {
-    // ...do something else
-  }
-};
-

-
-
where objectName is an existing object, methodname is the name you are assigning to the method, and functionName is the name of the function.

-
-
You can then call the method in the context of the object as follows:

-
-
object.methodname(params);
-

-
-
You can define methods for an object type by including a method definition in the object constructor function. You could define a function that would format and display the properties of the previously-defined Car objects; for example,

-
-
function displayCar() {
-  var result = 'A Beautiful ' + this.year + ' ' + this.make
-    + ' ' + this.model;
-  pretty_print(result);
-}
-

-
-
where pretty_print is a function to display a horizontal rule and a string. Notice the use of this to refer to the object to which the method belongs.

-
-
You can make this function a method of Car by adding the statement

-
-
this.displayCar = displayCar;
-

-
-
to the object definition. So, the full definition of Car would now look like

-
-
function Car(make, model, year, owner) {
-  this.make = make;
-  this.model = model;
-  this.year = year;
-  this.owner = owner;
-  this.displayCar = displayCar;
-}
-

-
-
Then you can call the displayCar method for each of the objects as follows:

-
-
car1.displayCar();
-car2.displayCar();
-

-
-
Using this for object references

-
-
JavaScript has a special keyword, this, that you can use within a method to refer to the current object. For example, suppose you have a function called validate that validates an object's value property, given the object and the high and low values:

-
-
function validate(obj, lowval, hival) {
-  if ((obj.value < lowval) || (obj.value > hival)) {
-    alert('Invalid Value!');
-  }
-}
-

-
-
Then, you could call validate in each form element's onchange event handler, using this to pass it the element, as in the following example:

-
-
<input type="text" name="age" size="3"
-  onChange="validate(this, 18, 99)">
-

-
-
In general, this refers to the calling object in a method.

-
-
When combined with the form property, this can refer to the current object's parent form. In the following example, the form myForm contains a Text object and a button. When the user clicks the button, the value of the Text object is set to the form's name. The button's onclick event handler uses this.form to refer to the parent form, myForm.

-
-
<form name="myForm">
-<p><label>Form name:<input type="text" name="text1" value="Beluga"></label>
-<p><input name="button1" type="button" value="Show Form Name"
-     onclick="this.form.text1.value = this.form.name">
-</p>
-</form>

-
-
Defining getters and setters

-
-
A getter is a method that gets the value of a specific property. A setter is a method that sets the value of a specific property. You can define getters and setters on any predefined core object or user-defined object that supports the addition of new properties. The syntax for defining getters and setters uses the object literal syntax.

-
-
The following illustrates how getters and setters could work for a user-defined object o.

-
-
var o = {
-  a: 7,
-  get b() {
-    return this.a + 1;
-  },
-  set c(x) {
-    this.a = x / 2;
-  }
-};
-
-console.log(o.a); // 7
-console.log(o.b); // 8
-o.c = 50;
-console.log(o.a); // 25
-

-
-
The o object's properties are:

-
-
    
- 
  • o.a — a number
    • 
- 
  • o.b — a getter that returns o.a plus 1
    • 
- 
  • o.c — a setter that sets the value of o.a to half of the value o.c is being set to
    • 
-

-
-
Please note that function names of getters and setters defined in an object literal using "[gs]et property()" (as opposed to __define[GS]etter__ ) are not the names of the getters themselves, even though the [gs]et propertyName(){ } syntax may mislead you to think otherwise. To name a function in a getter or setter using the "[gs]et property()" syntax, define an explicitly named function programmatically using Object.defineProperty (or the Object.prototype.__defineGetter__ legacy fallback).

-
-
The following code illustrates how getters and setters can extend the {{jsxref("Date")}} prototype to add a year property to all instances of the predefined Date class. It uses the Date class's existing getFullYear and setFullYear methods to support the year property's getter and setter.

-
-
These statements define a getter and setter for the year property:

-
-
var d = Date.prototype;
-Object.defineProperty(d, 'year', {
-  get: function() { return this.getFullYear(); },
-  set: function(y) { this.setFullYear(y); }
-});
-

-
-
These statements use the getter and setter in a Date object:

-
-
var now = new Date();
-console.log(now.year); // 2000
-now.year = 2001; // 987617605170
-console.log(now);
-// Wed Apr 18 11:13:25 GMT-0700 (Pacific Daylight Time) 2001
-

-
-
In principle, getters and setters can be either

-
-
    
- 
  • defined using object initializers, or
    • 
- 
  • added later to any object at any time using a getter or setter adding method.
    • 
-

-
-
When defining getters and setters using object initializers all you need to do is to prefix a getter method with get and a setter method with set. Of course, the getter method must not expect a parameter, while the setter method expects exactly one parameter (the new value to set). For instance:

-
-
var o = {
-  a: 7,
-  get b() { return this.a + 1; },
-  set c(x) { this.a = x / 2; }
-};
-

-
-
Getters and setters can also be added to an object at any time after creation using the Object.defineProperties method. This method's first parameter is the object on which you want to define the getter or setter. The second parameter is an object whose property names are the getter or setter names, and whose property values are objects for defining the getter or setter functions. Here's an example that defines the same getter and setter used in the previous example:

-
-
var o = { a: 0 };
-
-Object.defineProperties(o, {
-    'b': { get: function() { return this.a + 1; } },
-    'c': { set: function(x) { this.a = x / 2; } }
-});
-
-o.c = 10; // Runs the setter, which assigns 10 / 2 (5) to the 'a' property
-console.log(o.b); // Runs the getter, which yields a + 1 or 6
-

-
-
Which of the two forms to choose depends on your programming style and task at hand. If you already go for the object initializer when defining a prototype you will probably most of the time choose the first form. This form is more compact and natural. However, if you need to add getters and setters later — because you did not write the prototype or particular object — then the second form is the only possible form. The second form probably best represents the dynamic nature of JavaScript — but it can make the code hard to read and understand.

-
-
Deleting properties

-
-
You can remove a non-inherited property by using the delete operator. The following code shows how to remove a property.

-
-
// Creates a new object, myobj, with two properties, a and b.
-var myobj = new Object;
-myobj.a = 5;
-myobj.b = 12;
-
-// Removes the a property, leaving myobj with only the b property.
-delete myobj.a;
-console.log ('a' in myobj); // yields "false"
-

-
-
You can also use delete to delete a global variable if the var keyword was not used to declare the variable:

-
-
g = 17;
-delete g;
-

-
-
Comparing Objects

-
-
In JavaScript objects are a reference type. Two distinct objects are never equal, even if they have the same properties. Only comparing the same object reference with itself yields true.

-
-
// Two variables, two distinct objects with the same properties
-var fruit = {name: 'apple'};
-var fruitbear = {name: 'apple'};
-
-fruit == fruitbear; // return false
-fruit === fruitbear; // return false

-
-
// Two variables, a single object
-var fruit = {name: 'apple'};
-var fruitbear = fruit;  // assign fruit object reference to fruitbear
-
-// here fruit and fruitbear are pointing to same object
-fruit == fruitbear; // return true
-fruit === fruitbear; // return true
-

-
-
fruit.name = 'grape';
-console.log(fruitbear);    // yields { name: "grape" } instead of { name: "apple" }
-

-
-
For more information about comparison operators, see Comparison operators.

-
-
See also

-
-
-
-
{{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Feinheiten_des_Objektmodells")}}

diff --git a/files/de/web/javascript/guide/schleifen_und_iterationen/index.html b/files/de/web/javascript/guide/schleifen_und_iterationen/index.html
deleted file mode 100644
index 9f351abcd9..0000000000
--- a/files/de/web/javascript/guide/schleifen_und_iterationen/index.html
+++ /dev/null
@@ -1,337 +0,0 @@
----
-title: Schleifen und Iterationen
-slug: Web/JavaScript/Guide/schleifen_und_iterationen
-tags:
-  - Guide
-  - JavaScript
-  - Loop
-  - Syntax
-  - 'l10n:priority'
-translation_of: Web/JavaScript/Guide/Loops_and_iteration
----
-
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}

-
-
Schleifen sind ein einfaches Werkzeug, um einzelne Schritte wiederholt auszuführen. Dieses Kapitel des JavaScript Guide stellt die verschiedenen Statements für Iterationen vor, welche in JavaScript zur Verfügung stehen.

-
-
Man kann sich Schleifen wie eine Computerversion des Spiels vorstellen, bei dem man jemandem sagt, er soll x Schritte in eine Richtung und dann y Schritte in eine andere Richtung gehen. So kann zum Beispiel die Aussage "Gehe fünf Schritte nach Osten" mit Hilfe von Schleifen so ausgedrückt werden:

-
-
var schritt;
-for (schritt = 0; schritt < 5; schritt++) {
-  // Laufe 5 mal, mit den Werten von Schritt 0 bis 4
-  console.log('Gehe einen Schritt nach Osten');
-}
-

-
-
Es gibt viele verschiedene Arten von Schleifen, doch im Wesentlichen verrichten alle die gleiche Aufgabe: sie führen eine Aktion für eine bestimmte Anzahl an Wiederholungen aus (diese Anzahl kann auch 0 sein). Dabei ermöglichen die verschiedenen Arten von Schleifen unterschiedliche Anfangs- und Endpunkte festzulegen. Es gibt zahlreiche Situationen in denen eine Art von Schleifen einfacher zum Ergebnis führt, als eine andere.

-
-
JavaScript stellt folgende Statements für Schleifen zur Verfügung:

-
-
    
- 
  • {{anch("for Statement")}}
    • 
- 
  • {{anch("do...while Statement")}}
    • 
- 
  • {{anch("while Statement")}}
    • 
- 
  • {{anch("label Statement")}}
    • 
- 
  • {{anch("break Statement")}}
    • 
- 
  • {{anch("continue Statement")}}
    • 
- 
  • {{anch("for...in Statement")}}
    • 
- 
  • {{anch("for...of Statement")}}
    • 
-

-
-
for Statement

-
-
Eine  {{jsxref("statements/for","for Schleife")}} wird so lange durchlaufen, bis eine bestimmte Bedingung den Wert false liefert. Die for Schleife in JavaScript ist vergleichbar mit der in Java und C. Ein for Statement sieht wie folgt aus:

-
-
for ([initialerAusruck]; [Bedingung]; [erhöhenderAusdruck])
-  Anweisung
-

-
-
Bei der Ausführung einer for Schleife geschieht folgendes:

-
-
    
- 
  1. Der Ausdruck zur Initialisierung der Schleife initialerAsudruck, wird ausgeführt, sofern dieser existiert. Dieser Ausdruck initialisiert einen oder mehrere Schleifenzähler, wobei die Syntax beliebig komplexe Ausdrücke zulässt. In diesem Ausdruck können auch Variablen deklariert werden.
    2. 
- 
  2. Die Bedingung Bedingung wird geprüft. Wenn die Auswertung von Bedingung den Wert true ergibt, werden die Anweisungen innerhalb der Schleife ausgeführt. Ergibt die Prüfung hingegen false, wird die Schleife verlassen. Bleibt die Bedingung leer, wird immer der Wert true angenommen.
    3. 
- 
  3. Die Anweisung wird ausgeführt. Um mehrere Anweisungen auszuführen, werden Block-Anweisungen ({ ... }) verwendet, um diese zu gruppieren.
    4. 
- 
  4. Wenn vorhanden, wird der Ausdruck erhöhenderAusdruck ausgeführt.
    5. 
- 
  5. Geht zu Schritt 2 zurück.
    6. 
-

-
-
Beispiel

-
-
Die folgende Funktion enthält ein for Statement, welche die Anzahl der ausgewählten Optionen aus einer Auswahlliste (ein {{HTMLElement("select")}}, welches eine Mehrfachauswahl erlaubt) ermittelt. Das for Statement deklariert eine Variable i und initialisiert diese mit dem Wert 0. Sie prüft ob i kleiner als die Anzahl der verfügbarer Optionen des <select> Elements ist, führt das nachfolgende if Statement aus und erhöht i bei jedem Schleifendurchlauf um 1.

-
-
<form name="selectForm">
-  <p>
-    <label for="musicTypes">Choose some music types, then click the button below:</label>
-    <select id="musicTypes" name="musicTypes" multiple="multiple">
-      <option selected="selected">R&B</option>
-      <option>Jazz</option>
-      <option>Blues</option>
-      <option>New Age</option>
-      <option>Classical</option>
-      <option>Opera</option>
-    </select>
-  </p>
-  <p><input id="btn" type="button" value="How many are selected?" /></p>
-</form>
-
-<script>
-function howMany(selectObject) {
-  var numberSelected = 0;
-  for (var i = 0; i < selectObject.options.length; i++) {
-    if (selectObject.options[i].selected) {
-      numberSelected++;
-    }
-  }
-  return numberSelected;
-}
-
-var btn = document.getElementById('btn');
-btn.addEventListener('click', function(){
-  alert('Number of options selected: ' + howMany(document.selectForm.musicTypes))
-});
-</script>
-
-

-
-
do...while Statement

-
-
Das {{jsxref("statements/do...while", "do...while")}} Statement wiederholt eine bestimmte Anweisung, bis eine Bedingung false ergibt. Ein do...while Statement sieht wie folgt aus:

-
-
do
-  anweisung
-while (bedingung);
-

-
-
amweisung wird dabei einmal ausgeführt, bevor die Bedingung geprüft wird. Um mehrere Anweisungen auszuführen, werden diese als Block Statement ({ ... }) gruppiert. Wenn bedingung true ist, wird die Anweisung erneut ausgeführt. Nach jeder Ausführung der Anweisungen, wird die Bedingung erneut geprüft. Sobald bedingung false ergibt, endet die Ausführung der Schleife und die nächste Anweisung nach der do...while Schleife aus wird ausgeführt.

-
-
Beispiel

-
-
Im folgenden Beispiel wird die Schleife mindestens einmal ausgeführt. Anschliessend wird die Schleife so oft durchlaufen, bis i nicht mehr kleiner als 5 ist.

-
-
var i = 0;
-do {
-  i += 1;
-  console.log(i);
-} while (i < 5);

-
-
while Statement

-
-
Ein {{jsxref("statements/while","while")}} Statement wird solange ausgeführt, wie eine bestimmte Bedingung true ergibt. Ein while Statement sieht wie folgt aus:

-
-
while (bedingung)
-  anweisung
-

-
-
Wenn die Bedingung false ist, wird die Schleife nicht weiter durchlaufen und die nächste Anweisung nach der while Schleife wird ausgeführt.

-
-
Die Prüfung der Bedingung erfolgt, bevor die Anweisungen innerhalb der Schleife ausgeführt werden. Nur wenn die Bedingung true ist, wird die Schleife ausgeführt, wobei anschliessend eine erneute Prüfung der Bedingung erfolgt. Ergibt die Bedingung false, wir mit der Anweisungen nach der while Schleife fortgefahren.

-
-
Um mehrere Anweisungen auszuführen, werden diese in einer block Anweisung ({ ... }) gruppiert.

-
-
Beispiel 1

-
-
Die folgende while Schleife wird so lange ausgeführt, wie n kleiner als 3 ist.

-
-
var n = 0;
-var x = 0;
-while (n < 3) {
-  n++;
-  x += n;
-}
-

-
-
Mit jedem Schleifendurchlauf wird n um 1 erhöht. Der Wert von n wird dann zum Wert von x addiert. Dadurch nehmen x und n die folgenden Werte an:

-
-
    
- 
  • Nach dem ersten Durchlauf: n = 1 und x = 1
    • 
- 
  • Nach dem zweiten Durchlauf: n = 2 und x = 3
    • 
- 
  • Nach dem dritten Durchlauf: n = 3 und x = 6
    • 
-

-
-
Nach dem dritten Durchlauf ist die Bedingung n < 3 nicht mehr true und die Schleife wird verlassen.

-
-
Beispiel 2

-
-
Endlosschleifen müssen vermieden werden. Es ist immer sicherzustellen, dass die Bedingung irgendwann false ergibt, da die Schleife ansonsten nie endet. Die Anweisung in der folgenden while Schleife wird für immer ausgeführt, weil die Bedingung nie false ergibt:

-
-
while (true) {
-  console.log('Hello, world!');
-}

-
-
Label Statement

-
-
Ein {{jsxref("statements/label","label")}} stellt ein Statement mit einem Bezeichner bereit, welches es ermöglicht auf eine bestimmte stelle im Programm zu verweisen. So kann ein Label zum Beispiel dafür verwendet werden eine Schleife zu identifizieren und dann mit break oder continue festzulegen ob diese beendet oder weiter durchlaufen werden soll.

-
-
Die Syntax des Label Statement sieht wie folgt aus:

-
-
label :
-   anweisung
-

-
-
Der Wert von label kann jede Bezeichnung sein, der kein reserviertes JavaScript Schlüsselwort ist. Die anweisung die mit dem Label identifiziert wird, kann jede beliebige Anweisung sein.

-
-
Beispiel

-
-
In diesem Beispiel identifiziert das Label markLoop eine while Schleife.

-
-
markLoop:
-while (theMark == true) {
-   doSomething();
-}

-
-
break Statement

-
-
Um eine Schleife oder ein switch Statement zu beenden, verwendet man das {{jsxref("statements/break","break")}} Statement in Verbindung mit dem Label Statement.

-
-
    
- 
  • Wird break ohne ein Label verwendet, so wird die innerste while, do-while, for Schleife oder switch Statement beendet und die nachfolgende Ausführung wird ausgeführt.
    • 
- 
  • Wird break in Verbindung mit einem Label eingesetzt, wird die Anweisung beendet, die mit dem Label identifiziert wird.
    • 
-

-
-
Die Syntax von break sieht wie folgt aus:

-
-
break [label];
-

-
-
Die erste Variante der Syntax beendet die innerste Schleife oder das innerste switch Statement. Die zweite Variante beendet eine bestimmte Anweisung.

-
-
Beispiel 1

-
-
Das folgende Beispiel durchläuft die Elemente in einem Array, bis ein Element mit dem Wert von theValue gefunden wird:

-
-
for (var i = 0; i < a.length; i++) {
-  if (a[i] == theValue) {
-    break;
-  }
-}

-
-
Beispiel 2: break mit einem Label

-
-
var x = 0;
-var z = 0;
-labelCancelLoops: while (true) {
-  console.log('Outer loops: ' + x);
-  x += 1;
-  z = 1;
-  while (true) {
-    console.log('Inner loops: ' + z);
-    z += 1;
-    if (z === 10 && x === 10) {
-      break labelCancelLoops;
-    } else if (z === 10) {
-      break;
-    }
-  }
-}
-

-
-
continue Statement

-
-
Das {{jsxref("statements/continue","continue")}} Statement kann eingesetzt werden, um eine while, do-while, for Schleife oder ein Statement mit einem Label erneut auszuführen.

-
-
    
- 
  • Wird continue ohne ein Label verwendet, wird der Durchlauf der innersten while, do-while oder for Statement beendet und der nächsten Durchlauf wird begonnen. Im Gegensatz zum break Statement, wird mit continue nicht die gesamte Schleife abgebrochen. In einer while Schleife springt das Programm zurück zur Bedingung. In einer for Schleife springt das Programm zum erhöhenden Ausdruck.
    • 
- 
  • Wird continue mit einem Label eingesetzt, wird continue auf die Anweisungen angewendet, die durch das Label identifiziert werden.
    • 
-

-
-
Die Syntax des continue Statement sieht wie folgt aus:

-
-
continue [label];
-

-
-
Beispiel 1

-
-
Das folgende Beispiel zeigt eine while Schleife, mit einem continue Statement, die weiter ausgeführt wird, wenn i den Wert 3 hat. Dadurch erhält n die Werte 1, 3, 7 und 12.

-
-
var i = 0;
-var n = 0;
-while (i < 5) {
-  i++;
-  if (i == 3) {
-    continue;
-  }
-  n += i;
-}
-

-
-
Beispiel 2

-
-
Eine Anweisung mit dem Label checkiandj enthält eine Anweisung mit dem Label checkj. Wenn continue erreicht wird, bricht das Programm den aktuellen Schleifendurchlauf von checkj ab und setzt die Ausführung beim nächsten Durchlauf fort. Immer wenn continue erreicht wird, wird checkj erneut ausgeführt, bis dessen Bedingung false zurückliefert. Wird false zurückgeliefert, wird der Rest der checkiandj Anweisung vollendet und checkiandj wird wiederholt, bis dessen Bedingung false zurückgibt. Wird false zurückgegeben, wird das Programm bei der Anweisung nach checkiandj fortgesetzt.

-
-
Wenn continue ein Label checkiandj hätte, würde das Programm am Anfang der checkiandj Anweisung fortgesetzt werden.

-
-
var i = 0;
-var j = 10;
-checkiandj:
-  while (i < 4) {
-    console.log(i);
-    i += 1;
-    checkj:
-      while (j > 4) {
-        console.log(j);
-        j -= 1;
-        if ((j % 2) == 0) {
-          continue checkj;
-        }
-        console.log(j + ' is odd.');
-      }
-      console.log('i = ' + i);
-      console.log('j = ' + j);
-  }

-
-
for...in Statement

-
-
Das {{jsxref("statements/for...in","for...in")}} Statement durchläuft eine bestimmte Variable über alle aufzählbaren Eigenschaften eines Objekts. Für jede einzelne Eigenschaft führt JavaScript die entsprechende Anweisung aus. Ein for...in Statement sieht wie folgt aus:

-
-
for (variable in object) {
-  statements
-}
-

-
-
Beispiel

-
-
Die folgende Funktion nimmt als Argument ein Objekt und dessen Namen entgegen. Anschliessend durchläuft sie alle Eigenschaften des Objekts und liefert einen String zurück, der alle Namen und Werte der Eigenschaften des Objekts enthält.

-
-
function dump_props(obj, obj_name) {
-  var result = '';
-  for (var i in obj) {
-    result += obj_name + '.' + i + ' = ' + obj[i] + '<br>';
-  }
-  result += '<hr>';
-  return result;
-}
-

-
-
Für ein Objekt car mit den Eigenschaften make und model, sieht das Ergebnis wie folgt aus:

-
-
car.make = Ford
-car.model = Mustang
-

-
-
Arrays

-
-
Auch wenn es nahe liegt diesen Weg zu verwenden, um die Elemente eines {{jsxref("Array")}}s zu durchlaufen, würde das for...in Statement die Namen der definierten Werte und den numerischen Index zurückliefern. Daher ist es besser eine normale {{jsxref("statements/for","for")}} Schleifen mit einem numerischen Index zu verwenden, wenn Arrays durchlaufen werden sollen, da das for...in Statement neben den benutzerdefinierten Elementen auch die Eigenschaften des Arrays durchläuft, wenn man Methoden oder Eigenschaften hinzufügt oder ändert.

-
-
for...of Statement

-
-
Das {{jsxref("statements/for...of","for...of")}} Statement erstellt eine Schleife, die alle iterable objects (inklusive {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("functions/arguments","arguments")}} Objekt, etc.) durchläuft und die Anweisungen ausführt, die mit dem Wert des Durchlaufes für jede Eigenschaft übereinstimmt.

-
-
for (variable of object) {
-  statement
-}

-
-
Das folgende Beispiel zeigt den Unterschied zwischen der for...of Schleife und der {{jsxref("statements/for...in","for...in")}} Schleife. Während for...in die Namen der Eigenschaften durchläuft, durchläuft for...of die Werte der Eigenschaft:

-
-
var arr = [3, 5, 7];
-arr.foo = 'hello';
-
-for (var i in arr) {
-   console.log(i); // logs "0", "1", "2", "foo"
-}
-
-for (var i of arr) {
-   console.log(i); // logs 3, 5, 7
-}
-

-
-
{{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}

diff --git a/files/de/web/javascript/guide/text_formatting/index.html b/files/de/web/javascript/guide/text_formatting/index.html
new file mode 100644
index 0000000000..48c45c9871
--- /dev/null
+++ b/files/de/web/javascript/guide/text_formatting/index.html
@@ -0,0 +1,257 @@
+---
+title: Textformatierung
+slug: Web/JavaScript/Guide/Textformatierung
+tags:
+  - Guide
+  - JavaScript
+  - 'l10n:priority'
+translation_of: Web/JavaScript/Guide/Text_formatting
+---
+
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}}

+
+
Dieses Kapitel gibt eine Einführung darüber, wie in JavaScript mit Strings (Zeichenfolgen) und Texten gearbeitet wird.

+
+
Strings

+
+
JavaScript's Datentyp {{Glossary("String")}} wird verwendet, um textuelle Daten zu repräsentieren. Es handelt sich um eine Reihe von Elementen, die ganzzahlige 16-Bit-Werte ohne Vorzeichen (UTF-16 Code Units) sind. Jedes Element belegt eine Position im String. Das erste Element befindet hat den Index 0, das nächste den Index 1 usw. Die Länge des Strings ist die Anzahl der Elemente, die darin enthalten sind. Strings können über String-Literale oder String-Objekte erzeugt werden.

+
+
ACHTUNG: Beim Bearbeiten dieser Seite keine Zeichen mit Zeichencode größer als U+FFFF einfügen, bis MDN bug 857438 behoben wurde ( https://bugzilla.mozilla.org/show_bug.cgi?id=857438 ).

+
+
String Literale

+
+
Einfache Strings können mittels einfacher oder doppelter Anführungszeichen erzeugt werden:

+
+
'foo'
+"bar"

+
+
Anspruchsvollere Strings können mit Escape-Sequenzen erstellt werden:

+
+
Hexadezimale Escape-Sequenzen

+
+
Die Zahl nach \x wird als hexadecimale Zahl interpretiert.

+
+
'\xA9' // "©"
+

+
+
Unicode Escape-Sequenzen

+
+
Unicode Escape-Sequenzen erfordern mindestens vier hexadezimale Ziffern nach \u.

+
+
'\u00A9' // "©"

+
+
Unicode Code Point Escapes

+
+
Diese sind neu in ECMAScript 2015. Mit Unicode Code Point Maskierung können beliebige Zeichen durch Maskierungssequenzen mit hexadezimalen Zahlen erzeugt werden, sodass die Verwendung von Unicode Code Points bis zu 0x10FFFF möglich ist. Mit einfachen Unicode Maskierungssequenz ist es oft notwendig, Surrogate-Hälften als zwei getrennte Maskierungssequenzen zu schreiben, um dasselbe Ergebnis zu erhalten.

+
+
Siehe auch {{jsxref("String.fromCodePoint()")}} oder {{jsxref("String.prototype.codePointAt()")}}.

+
+
'\u{2F804}'
+
+// das gleiche mit einfachen Unicode Escape-Sequenzen
+'\uD87E\uDC04'

+
+
String Objekte

+
+
Das {{jsxref("String")}} Objekt ist ein Wrapper für den primitiven Datentyp String.

+
+
var s = new String('foo'); // Erstellt ein String object
+console.log(s); // Ausgabe: {'0': 'f', '1': 'o', '2': 'o'}
+typeof s; // Gibt 'object' zurück
+

+
+
Beliebige Methoden des String Objekts können als Methoden eines String-Literals aufgerufen werden – JavaScript wandelt das String-Literal automatisch in ein temporäres String Objekt um, ruft die Methode auf und verwirft das temporäre String Objekt anschließend. Außerdem kann die String.length Eigenschaft mit einem String-Literal verwendet werden.

+
+
String-Literale sollten verwendet werden, außer es wird tatsächlich ein String Objekt benötigt, da String Objekte unerwartetes Verhalten aufweisen können. Beispielsweise:

+
+
var s1 = '2 + 2'; // Erzeugt ein String-Literal
+var s2 = new String('2 + 2'); // Erzeugt ein String Objekt
+eval(s1); // Gibt die Zahl 4 zurück
+eval(s2); // Gibt den String "2 + 2" zurück

+
+
Ein String Objekt hat eine Eigenschaft length, die die Anzahl von der UTF-16 Code Units im String angibt. Der folgende Code beispielsweise weist der Variable x den Wert 13 zu, da "Hello, World!" aus 13 Zeichen besteht. Jedes dieser Zeichen wird durch eine UTF-16 Code Unit dargestellt. Auf jede dieser Code Units kann durch eckige Klammern zugegriffen werden. Es können jedoch keine Zeichen geändert werden, da Strings unveränderbare Array-ähnliche Objekte sind:

+
+
var mystring = 'Hello, World!';
+var x = mystring.length;
+mystring[0] = 'L'; // hat keinen Effekt
+mystring[0]; // gibt "H" zurück
+

+
+
Zeichen mit einem Unicode-Wert größer als U+FFFF (wie z.B. manche seltene chinesiche/japanische/koreanische/vietnamesische Zeichen und einige Emoji) werden in UTF-16 als zwei Surrogate Code Units gespeichert. Ein String, der nur aus einem Zeichen, U+1F600 ("Emoji grinning face"), besteht, hätte die Länge 2. Der Zugriff auf einzelne Code Units in einem solchen String kann zu unerwünschten Effekten führen, wie z.B. die Entstehung von String mit unvollständigen Surrogate Code Units, was gegen den Unicode Standard verstößt. (Beispiele dafür sollten zu dieser Seite hinzugefügt werden, sobald MDN bug 857438 behoben wurde.) Siehe auch {{jsxref("String.fromCodePoint()")}} oder {{jsxref("String.prototype.codePointAt()")}}.

+
+
Ein String Objekt verschiedenste Methoden, unter anderem auch welche, die den String in abgewandelter Form zurückgeben, wie z.B. substring und toUpperCase.

+
+
Die folgende Tabelle gibt eine Zusammenfassung der Methoden von {{jsxref("String")}} Objekten.

+
+
+ 
+ 
+  
+   
+   
+  
+ 
+ 
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+

+ 
Methoden von String

+ 
MethodeBeschreibung
{{jsxref("String.charAt", "charAt")}}, {{jsxref("String.charCodeAt", "charCodeAt")}}, {{jsxref("String.codePointAt", "codePointAt")}}Gibt das Zeichen oder den Zeichencode an der angegebenen Stelle im String zurück.
{{jsxref("String.indexOf", "indexOf")}}, {{jsxref("String.lastIndexOf", "lastIndexOf")}}Gibt die erste bzw. letzte Position des angegebenen Teilstrings im String zurück.
{{jsxref("String.startsWith", "startsWith")}}, {{jsxref("String.endsWith", "endsWith")}}, {{jsxref("String.includes", "includes")}}Gibt zurück, ob ein String mit dem angegebenen Teilstring beginnt, endet oder den Teilstring enthält.
{{jsxref("String.concat", "concat")}}Fügt die beiden Strings zusammen und gibt diesen neuen String zurück.
{{jsxref("String.fromCharCode", "fromCharCode")}}, {{jsxref("String.fromCodePoint", "fromCodePoint")}}Erstellt einen String aus den angegebenen Unicode Codes. Es handelt sich um eine Methode der Klasse String, nicht die einer String Instanz.
{{jsxref("String.split", "split")}}Teilt ein String Objekt in ein Array von Teilstrings.
{{jsxref("String.slice", "slice")}}Gibt einen Ausschnitt des Strings als neuen String zurück.
{{jsxref("String.substring", "substring")}}, {{jsxref("String.substr", "substr")}}Gibt einen Ausschnitt des Strings zurück, der entweder durch Angabe der Start- und Endindizes oder durch Angabe des Startindex und einer Länge gebildet wird.
{{jsxref("String.match", "match")}}, {{jsxref("String.replace", "replace")}}, {{jsxref("String.search", "search")}}Verwendet Regular Expressions um Übereinstimmungen mit einem Suchmuster zu finden oder Teile des Strings zu ersetzen.
{{jsxref("String.toUpperCase", "toUpperCase")}}, {{jsxref("String.toLowerCase", "toLowerCase")}}
+    
Wandelt einen String in Groß- bzw Kleinschreibung um und gibt das Ergebnis als neuen String zurück.

+   
{{jsxref("String.normalize", "normalize")}}Gibt die Unicode Normalization Form des Strings zurück.
{{jsxref("String.repeat", "repeat")}}Gibt einen String zurück, in dem der ursprüngliche String mehrfach aneinandergereiht wurde.
{{jsxref("String.trim", "trim")}}Entfernt Leerzeichen vom Anfang und vom Ende des Strings.

+
+
Mehrzeilige Template-Strings

+
+
Template-Strings sind String-Symbole, die eingebettete Ausdrücke erlauben. Mit diesen Ausdrücken können mehrzeilige Strings und String-Interpolation genutzt werden.

+
+
Template-Strings sind anstelle von doppelten bzw. einfachen Anführungszeichen in Back-Ticks (` `) (grave accent) eingeschlossen. Template-Strings können Platzhalter beinhalten, die durch das Dollarsymbol gefolgt von geschweiften Klammern gekennzeichnet sind (${expression}).

+
+
Mehrzeilige Strings

+
+
Alle Zeichen, die einen Zeilenumbruch einleiten und sich zwischen Back-Ticks befinden, werden als Teil des Template Strings verwendet. Bei normalen Strings muss die folgende Syntax genutzt werden, um Strings mit Zeilenumbrücken über mehrere Codezeilen zu definieren:

+
+
console.log('string text line 1\n\
+string text line 2');
+// "string text line 1
+// string text line 2"

+
+
Um dasselbe Ergebnis mit Template-Strings zu erreichen, kann die folgende Schreibweise genutzt werden:

+
+
console.log(`string text line 1
+string text line 2`);
+// "string text line 1
+// string text line 2"

+
+
Erweiterung von Ausdrücken

+
+
Um Ausdrücke in normale Strings einzufügen, müsste die folgende Syntax genutzt werden:

+
+
var a = 5;
+var b = 10;
+console.log('Fifteen is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.');
+// "Fifteen is 15 and
+// not 20."

+
+
Mit Template-Strings können nun die syntaktischen Vorteile genutzt werden um solche Ersetzungen leserlicher zu machen:

+
+
var a = 5;
+var b = 10;
+console.log(`Fifteen is ${a + b} and\nnot ${2 * a + b}.`);
+// "Fifteen is 15 and
+// not 20."

+
+
Mehr Informationen sind unter Template-Strings in der JavaScript-Referenz nachzulesen. 

+
+
Internationalization

+
+
Das {{jsxref("Intl")}} Objekt ist der Namespace für das ECMAScript Internationalization API, welches sprachabhängige String-Vergleiche, Zahlen-, Datums- und Uhrzeitformate bereitstellt. Die Konstruktoren für {{jsxref("Collator")}}, {{jsxref("NumberFormat")}} und {{jsxref("DateTimeFormat")}} Objekte sind Eigenschaften des Intl Objekts.

+
+
Datums- und Uhrzeitformatierung

+
+
Das {{jsxref("DateTimeFormat")}} Objekt hilft bei der Datums- oder Uhrzeitformatierung. Im folgenden Beispiel wird ein Datum für amerikanisches Englisch formatiert. (Das Ergebnis variiert je nach eingestellter Zeitzone.)

+
+
var msPerDay = 24 * 60 * 60 * 1000;
+
+// July 17, 2014 00:00:00 UTC.
+var july172014 = new Date(msPerDay * (44 * 365 + 11 + 197));
+
+var options = { year: '2-digit', month: '2-digit', day: '2-digit',
+                hour: '2-digit', minute: '2-digit', timeZoneName: 'short' };
+var americanDateTime = new Intl.DateTimeFormat('en-US', options).format;
+
+console.log(americanDateTime(july172014)); // 07/16/14, 5:00 PM PDT
+

+
+
Zahlenformatierung

+
+
Das {{jsxref("NumberFormat")}} Objekt hilft bei der Formatierung von Zahlen, wie z.B. Währungen.

+
+
var gasPrice = new Intl.NumberFormat('en-US',
+                        { style: 'currency', currency: 'USD',
+                          minimumFractionDigits: 3 });
+
+console.log(gasPrice.format(5.259)); // $5.259
+
+var hanDecimalRMBInChina = new Intl.NumberFormat('zh-CN-u-nu-hanidec',
+                        { style: 'currency', currency: 'CNY' });
+
+console.log(hanDecimalRMBInChina.format(1314.25)); // ￥ 一,三一四.二五
+

+
+
Sortierung

+
+
Das {{jsxref("Collator")}} Objekt hilft beim Vergleichen und Sortieren von Strings.

+
+
Zum Beispiel gibt es im Deutschen zwei unterschiedliche Sortierreihenfolgen: Telefonbuchsortierung und Wörterbuchsortierung. Bei der Telefonbuchsortierung werden "ä", "ö" etc. so sortiert, als ob es sich um "ae", "oe" etc. handeln würde.

+
+
var names = ['Hochberg', 'Hönigswald', 'Holzman'];
+
+var germanPhonebook = new Intl.Collator('de-DE-u-co-phonebk');
+
+// as if sorting ["Hochberg", "Hoenigswald", "Holzman"]:
+console.log(names.sort(germanPhonebook.compare).join(', '));
+// logs "Hochberg, Hönigswald, Holzman"
+

+
+
Bei manchen Beugungsformen wird ein Vokal zu einem Umlaut, daher ist es sinnvoll, Wörterbücher so zu sortieren, dass Vokale und Umlaute gleich sortiert werden. Bei der Sortierung wird dann also "ä" wie "a" und "ö" wie "o" sortiert. Eine Ausnahme stellen Wörter dar, die sich nur im Umlaut unterscheiden. In solchen Fällen wird der Vokal vor dem Umlaut gereiht (z.B. schon vor schön). 

+
+
var germanDictionary = new Intl.Collator('de-DE-u-co-dict');
+
+// as if sorting ["Hochberg", "Honigswald", "Holzman"]:
+console.log(names.sort(germanDictionary.compare).join(', '));
+// logs "Hochberg, Holzman, Hönigswald"
+

+
+
Mehr Informationen über das {{jsxref("Intl")}} API können unter Introducing the JavaScript Internationalization API (in Englisch) nachgelesen werden.

+
+
{{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}}

diff --git a/files/de/web/javascript/guide/textformatierung/index.html b/files/de/web/javascript/guide/textformatierung/index.html
deleted file mode 100644
index 48c45c9871..0000000000
--- a/files/de/web/javascript/guide/textformatierung/index.html
+++ /dev/null
@@ -1,257 +0,0 @@
----
-title: Textformatierung
-slug: Web/JavaScript/Guide/Textformatierung
-tags:
-  - Guide
-  - JavaScript
-  - 'l10n:priority'
-translation_of: Web/JavaScript/Guide/Text_formatting
----
-
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}}

-
-
Dieses Kapitel gibt eine Einführung darüber, wie in JavaScript mit Strings (Zeichenfolgen) und Texten gearbeitet wird.

-
-
Strings

-
-
JavaScript's Datentyp {{Glossary("String")}} wird verwendet, um textuelle Daten zu repräsentieren. Es handelt sich um eine Reihe von Elementen, die ganzzahlige 16-Bit-Werte ohne Vorzeichen (UTF-16 Code Units) sind. Jedes Element belegt eine Position im String. Das erste Element befindet hat den Index 0, das nächste den Index 1 usw. Die Länge des Strings ist die Anzahl der Elemente, die darin enthalten sind. Strings können über String-Literale oder String-Objekte erzeugt werden.

-
-
ACHTUNG: Beim Bearbeiten dieser Seite keine Zeichen mit Zeichencode größer als U+FFFF einfügen, bis MDN bug 857438 behoben wurde ( https://bugzilla.mozilla.org/show_bug.cgi?id=857438 ).

-
-
String Literale

-
-
Einfache Strings können mittels einfacher oder doppelter Anführungszeichen erzeugt werden:

-
-
'foo'
-"bar"

-
-
Anspruchsvollere Strings können mit Escape-Sequenzen erstellt werden:

-
-
Hexadezimale Escape-Sequenzen

-
-
Die Zahl nach \x wird als hexadecimale Zahl interpretiert.

-
-
'\xA9' // "©"
-

-
-
Unicode Escape-Sequenzen

-
-
Unicode Escape-Sequenzen erfordern mindestens vier hexadezimale Ziffern nach \u.

-
-
'\u00A9' // "©"

-
-
Unicode Code Point Escapes

-
-
Diese sind neu in ECMAScript 2015. Mit Unicode Code Point Maskierung können beliebige Zeichen durch Maskierungssequenzen mit hexadezimalen Zahlen erzeugt werden, sodass die Verwendung von Unicode Code Points bis zu 0x10FFFF möglich ist. Mit einfachen Unicode Maskierungssequenz ist es oft notwendig, Surrogate-Hälften als zwei getrennte Maskierungssequenzen zu schreiben, um dasselbe Ergebnis zu erhalten.

-
-
Siehe auch {{jsxref("String.fromCodePoint()")}} oder {{jsxref("String.prototype.codePointAt()")}}.

-
-
'\u{2F804}'
-
-// das gleiche mit einfachen Unicode Escape-Sequenzen
-'\uD87E\uDC04'

-
-
String Objekte

-
-
Das {{jsxref("String")}} Objekt ist ein Wrapper für den primitiven Datentyp String.

-
-
var s = new String('foo'); // Erstellt ein String object
-console.log(s); // Ausgabe: {'0': 'f', '1': 'o', '2': 'o'}
-typeof s; // Gibt 'object' zurück
-

-
-
Beliebige Methoden des String Objekts können als Methoden eines String-Literals aufgerufen werden – JavaScript wandelt das String-Literal automatisch in ein temporäres String Objekt um, ruft die Methode auf und verwirft das temporäre String Objekt anschließend. Außerdem kann die String.length Eigenschaft mit einem String-Literal verwendet werden.

-
-
String-Literale sollten verwendet werden, außer es wird tatsächlich ein String Objekt benötigt, da String Objekte unerwartetes Verhalten aufweisen können. Beispielsweise:

-
-
var s1 = '2 + 2'; // Erzeugt ein String-Literal
-var s2 = new String('2 + 2'); // Erzeugt ein String Objekt
-eval(s1); // Gibt die Zahl 4 zurück
-eval(s2); // Gibt den String "2 + 2" zurück

-
-
Ein String Objekt hat eine Eigenschaft length, die die Anzahl von der UTF-16 Code Units im String angibt. Der folgende Code beispielsweise weist der Variable x den Wert 13 zu, da "Hello, World!" aus 13 Zeichen besteht. Jedes dieser Zeichen wird durch eine UTF-16 Code Unit dargestellt. Auf jede dieser Code Units kann durch eckige Klammern zugegriffen werden. Es können jedoch keine Zeichen geändert werden, da Strings unveränderbare Array-ähnliche Objekte sind:

-
-
var mystring = 'Hello, World!';
-var x = mystring.length;
-mystring[0] = 'L'; // hat keinen Effekt
-mystring[0]; // gibt "H" zurück
-

-
-
Zeichen mit einem Unicode-Wert größer als U+FFFF (wie z.B. manche seltene chinesiche/japanische/koreanische/vietnamesische Zeichen und einige Emoji) werden in UTF-16 als zwei Surrogate Code Units gespeichert. Ein String, der nur aus einem Zeichen, U+1F600 ("Emoji grinning face"), besteht, hätte die Länge 2. Der Zugriff auf einzelne Code Units in einem solchen String kann zu unerwünschten Effekten führen, wie z.B. die Entstehung von String mit unvollständigen Surrogate Code Units, was gegen den Unicode Standard verstößt. (Beispiele dafür sollten zu dieser Seite hinzugefügt werden, sobald MDN bug 857438 behoben wurde.) Siehe auch {{jsxref("String.fromCodePoint()")}} oder {{jsxref("String.prototype.codePointAt()")}}.

-
-
Ein String Objekt verschiedenste Methoden, unter anderem auch welche, die den String in abgewandelter Form zurückgeben, wie z.B. substring und toUpperCase.

-
-
Die folgende Tabelle gibt eine Zusammenfassung der Methoden von {{jsxref("String")}} Objekten.

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

- 
Methoden von String

- 
MethodeBeschreibung
{{jsxref("String.charAt", "charAt")}}, {{jsxref("String.charCodeAt", "charCodeAt")}}, {{jsxref("String.codePointAt", "codePointAt")}}Gibt das Zeichen oder den Zeichencode an der angegebenen Stelle im String zurück.
{{jsxref("String.indexOf", "indexOf")}}, {{jsxref("String.lastIndexOf", "lastIndexOf")}}Gibt die erste bzw. letzte Position des angegebenen Teilstrings im String zurück.
{{jsxref("String.startsWith", "startsWith")}}, {{jsxref("String.endsWith", "endsWith")}}, {{jsxref("String.includes", "includes")}}Gibt zurück, ob ein String mit dem angegebenen Teilstring beginnt, endet oder den Teilstring enthält.
{{jsxref("String.concat", "concat")}}Fügt die beiden Strings zusammen und gibt diesen neuen String zurück.
{{jsxref("String.fromCharCode", "fromCharCode")}}, {{jsxref("String.fromCodePoint", "fromCodePoint")}}Erstellt einen String aus den angegebenen Unicode Codes. Es handelt sich um eine Methode der Klasse String, nicht die einer String Instanz.
{{jsxref("String.split", "split")}}Teilt ein String Objekt in ein Array von Teilstrings.
{{jsxref("String.slice", "slice")}}Gibt einen Ausschnitt des Strings als neuen String zurück.
{{jsxref("String.substring", "substring")}}, {{jsxref("String.substr", "substr")}}Gibt einen Ausschnitt des Strings zurück, der entweder durch Angabe der Start- und Endindizes oder durch Angabe des Startindex und einer Länge gebildet wird.
{{jsxref("String.match", "match")}}, {{jsxref("String.replace", "replace")}}, {{jsxref("String.search", "search")}}Verwendet Regular Expressions um Übereinstimmungen mit einem Suchmuster zu finden oder Teile des Strings zu ersetzen.
{{jsxref("String.toUpperCase", "toUpperCase")}}, {{jsxref("String.toLowerCase", "toLowerCase")}}
-    
Wandelt einen String in Groß- bzw Kleinschreibung um und gibt das Ergebnis als neuen String zurück.

-   
{{jsxref("String.normalize", "normalize")}}Gibt die Unicode Normalization Form des Strings zurück.
{{jsxref("String.repeat", "repeat")}}Gibt einen String zurück, in dem der ursprüngliche String mehrfach aneinandergereiht wurde.
{{jsxref("String.trim", "trim")}}Entfernt Leerzeichen vom Anfang und vom Ende des Strings.

-
-
Mehrzeilige Template-Strings

-
-
Template-Strings sind String-Symbole, die eingebettete Ausdrücke erlauben. Mit diesen Ausdrücken können mehrzeilige Strings und String-Interpolation genutzt werden.

-
-
Template-Strings sind anstelle von doppelten bzw. einfachen Anführungszeichen in Back-Ticks (` `) (grave accent) eingeschlossen. Template-Strings können Platzhalter beinhalten, die durch das Dollarsymbol gefolgt von geschweiften Klammern gekennzeichnet sind (${expression}).

-
-
Mehrzeilige Strings

-
-
Alle Zeichen, die einen Zeilenumbruch einleiten und sich zwischen Back-Ticks befinden, werden als Teil des Template Strings verwendet. Bei normalen Strings muss die folgende Syntax genutzt werden, um Strings mit Zeilenumbrücken über mehrere Codezeilen zu definieren:

-
-
console.log('string text line 1\n\
-string text line 2');
-// "string text line 1
-// string text line 2"

-
-
Um dasselbe Ergebnis mit Template-Strings zu erreichen, kann die folgende Schreibweise genutzt werden:

-
-
console.log(`string text line 1
-string text line 2`);
-// "string text line 1
-// string text line 2"

-
-
Erweiterung von Ausdrücken

-
-
Um Ausdrücke in normale Strings einzufügen, müsste die folgende Syntax genutzt werden:

-
-
var a = 5;
-var b = 10;
-console.log('Fifteen is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.');
-// "Fifteen is 15 and
-// not 20."

-
-
Mit Template-Strings können nun die syntaktischen Vorteile genutzt werden um solche Ersetzungen leserlicher zu machen:

-
-
var a = 5;
-var b = 10;
-console.log(`Fifteen is ${a + b} and\nnot ${2 * a + b}.`);
-// "Fifteen is 15 and
-// not 20."

-
-
Mehr Informationen sind unter Template-Strings in der JavaScript-Referenz nachzulesen. 

-
-
Internationalization

-
-
Das {{jsxref("Intl")}} Objekt ist der Namespace für das ECMAScript Internationalization API, welches sprachabhängige String-Vergleiche, Zahlen-, Datums- und Uhrzeitformate bereitstellt. Die Konstruktoren für {{jsxref("Collator")}}, {{jsxref("NumberFormat")}} und {{jsxref("DateTimeFormat")}} Objekte sind Eigenschaften des Intl Objekts.

-
-
Datums- und Uhrzeitformatierung

-
-
Das {{jsxref("DateTimeFormat")}} Objekt hilft bei der Datums- oder Uhrzeitformatierung. Im folgenden Beispiel wird ein Datum für amerikanisches Englisch formatiert. (Das Ergebnis variiert je nach eingestellter Zeitzone.)

-
-
var msPerDay = 24 * 60 * 60 * 1000;
-
-// July 17, 2014 00:00:00 UTC.
-var july172014 = new Date(msPerDay * (44 * 365 + 11 + 197));
-
-var options = { year: '2-digit', month: '2-digit', day: '2-digit',
-                hour: '2-digit', minute: '2-digit', timeZoneName: 'short' };
-var americanDateTime = new Intl.DateTimeFormat('en-US', options).format;
-
-console.log(americanDateTime(july172014)); // 07/16/14, 5:00 PM PDT
-

-
-
Zahlenformatierung

-
-
Das {{jsxref("NumberFormat")}} Objekt hilft bei der Formatierung von Zahlen, wie z.B. Währungen.

-
-
var gasPrice = new Intl.NumberFormat('en-US',
-                        { style: 'currency', currency: 'USD',
-                          minimumFractionDigits: 3 });
-
-console.log(gasPrice.format(5.259)); // $5.259
-
-var hanDecimalRMBInChina = new Intl.NumberFormat('zh-CN-u-nu-hanidec',
-                        { style: 'currency', currency: 'CNY' });
-
-console.log(hanDecimalRMBInChina.format(1314.25)); // ￥ 一,三一四.二五
-

-
-
Sortierung

-
-
Das {{jsxref("Collator")}} Objekt hilft beim Vergleichen und Sortieren von Strings.

-
-
Zum Beispiel gibt es im Deutschen zwei unterschiedliche Sortierreihenfolgen: Telefonbuchsortierung und Wörterbuchsortierung. Bei der Telefonbuchsortierung werden "ä", "ö" etc. so sortiert, als ob es sich um "ae", "oe" etc. handeln würde.

-
-
var names = ['Hochberg', 'Hönigswald', 'Holzman'];
-
-var germanPhonebook = new Intl.Collator('de-DE-u-co-phonebk');
-
-// as if sorting ["Hochberg", "Hoenigswald", "Holzman"]:
-console.log(names.sort(germanPhonebook.compare).join(', '));
-// logs "Hochberg, Hönigswald, Holzman"
-

-
-
Bei manchen Beugungsformen wird ein Vokal zu einem Umlaut, daher ist es sinnvoll, Wörterbücher so zu sortieren, dass Vokale und Umlaute gleich sortiert werden. Bei der Sortierung wird dann also "ä" wie "a" und "ö" wie "o" sortiert. Eine Ausnahme stellen Wörter dar, die sich nur im Umlaut unterscheiden. In solchen Fällen wird der Vokal vor dem Umlaut gereiht (z.B. schon vor schön). 

-
-
var germanDictionary = new Intl.Collator('de-DE-u-co-dict');
-
-// as if sorting ["Hochberg", "Honigswald", "Holzman"]:
-console.log(names.sort(germanDictionary.compare).join(', '));
-// logs "Hochberg, Holzman, Hönigswald"
-

-
-
Mehr Informationen über das {{jsxref("Intl")}} API können unter Introducing the JavaScript Internationalization API (in Englisch) nachgelesen werden.

-
-
{{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}}

diff --git a/files/de/web/javascript/guide/working_with_objects/index.html b/files/de/web/javascript/guide/working_with_objects/index.html
new file mode 100644
index 0000000000..2448621a4a
--- /dev/null
+++ b/files/de/web/javascript/guide/working_with_objects/index.html
@@ -0,0 +1,506 @@
+---
+title: Mit Objekten arbeiten
+slug: Web/JavaScript/Guide/Mit_Objekten_arbeiten
+tags:
+  - Beginner
+  - Comparing object
+  - Constructor
+  - Document
+  - Guide
+  - JavaScript
+  - Object
+  - 'l10n:priority'
+translation_of: Web/JavaScript/Guide/Working_with_Objects
+---
+
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Feinheiten_des_Objektmodells")}}

+
+
JavaScript ist nach einem einfachen objekt-basierten Muster entworfen. Ein Objekt ist eine Sammlung von Eigenschaften und eine Eigenschaft ist eine Verbindung von einem Namen und einem Wert. Der Wert einer Eigenschaft kann eine Funktion sein. In diesem Fall wird die Eigenschaft Methode genannt. Zusätzlich zu Objekten, die vom Browser vordefiniert sind, können auch eigene Objekte definiert werden. Dieses Kapitel beschreibt, wie Objekte, Eigenschaften, Funktionen und Methoden benutzt und eigene Objekte erzeugt werden können.

+
+
Objekte Übersicht

+
+
Objekte in JavaScript, wie in vielen anderen Programmiersprachen, können mit Objekten aus dem realen Leben verglichen werden. Das Konzept der Objekte in JavaScript kann mit greifbaren Objekten aus der realen Welt verstanden werden.

+
+
In JavaScript ist ein Objekt eine für sich stehende Einheit mit Eigenschaften und Typ. Vergleichbar mit einer Tasse zum Beispiel. Eine Tasse ist ein Objekt mit Eigenschaften. Eine Tasse hat eine Farbe, ein Design, ein Gewicht, ein Material, aus dem sie erstellt wurde, usw. Ebenso können JavaScript Objekte Eigenschaften besitzen, die Ihre Besonderheiten definieren.

+
+
Objekte und Eigenschaften

+
+
Ein JavaScript Objekt besitzt mit ihm verbundene Eigenschaften. Eine Eigenschaft eines Objekts kann als Variable erklärt werden, die dem Objekt angeheftet ist. Objekteigenschaften sind grundsätzlich das Gleiche wie übliche Variablen ausser der Verknüpfung mit Objekten. Die Eigenschaften eines Objekts definieren seine Charakteristik. Auf die Eigenschaften eines Objekt kann mit einer einfachen Punkt-Notation zugegriffen werden:

+
+
objectName.propertyName
+

+
+
Wie bei allen JavaScript-Variablen sind Objektname (eine normale Variable) und Attribute groß-, und kleinschreibungsabhängig. Ein Attribut wird definiert, indem es einen Wert zugewiesen bekommt. Zum Beispiel: Ein Objekt namens myCar mit den Attributen make, model, und year:

+
+
var myCar = new Object();
+myCar.make = "Ford";
+myCar.model = "Mustang";
+myCar.year = 1969;
+

+
+
Nicht initialisierte Eigenschaften eines Objektes haben den Wert {{jsxref("undefined")}} (nicht {{jsxref("null")}}).

+
+
myCar.color; // undefined

+
+
Eigenschaften von JavaScript-Objekten können auch mit der Klammernotation (für weitere Informationen siehe property accessors). Objekte werden manchmal assoziative Arrays genannt da jede Eigenschaft mit einer Zeichenkette assoziiert ist mit der man auf die Eigenschaft zugreifen kann. Zum Beispiel kann man auf die Eigenschaften des Objekts myCar folgendermassen zugreifen:

+
+
myCar["make"] = "Ford";
+myCar["model"] = "Mustang";
+myCar["year"] = 1969;
+

+
+
Der Name einer Objekteigenschaft kann ein valider JavaScript String sein. Dies kann auch alles sein, was in einen String convertiert werden kann, inklusive eines leeren Strings. Immer, wenn der Name einer Eigenschaft kein valider JavaScript Bezeichner ist (zum Beispiel ein Name mit einem Leerzeichen oder einem minus oder ein Name der mit einer Ziffer beginnt), kann dieses nur über die Klammernotation erreicht werden. Diese Notation ist zusätzlich sehr hilfreich, wenn Namen von Eigenschaften dynamisch ermittelt werden (Wenn die Namen nicht bis zur Laufzeit ermittelt werden können). Im folgenden ein Beispiel:

+
+
// four variables are created and assigned in a single go,
+// separated by commas
+var myObj = new Object(),
+    str = 'myString',
+    rand = Math.random(),
+    obj = new Object();
+
+myObj.type              = 'Dot syntax';
+myObj['date created']   = 'String with space';
+myObj[str]              = 'String value';
+myObj[rand]             = 'Random Number';
+myObj[obj]              = 'Object';
+myObj['']               = 'Even an empty string';
+
+console.log(myObj);
+

+
+
Zu bemerken ist, dass alle Schlüssel in der Klammernotation zum Typ Strings konvertiert werden, weil in JavaScript nur Strings als Schlüssel bei Objekte erlaubt sind. Zum Beispiel wird im orberen Beispiel obj konvertiert wenn es in myObj benutzt wird. JavaScript ruft die obj.toString() Methode auf und benutzt den resultierenden String als neuen Schlüssel.

+
+
Man kann eine Eigenschaft auch erreichen, indem eine Variable vom Typ String benutzt wird:

+
+
var propertyName = 'make';
+myCar[propertyName] = 'Ford';
+
+propertyName = 'model';
+myCar[propertyName] = 'Mustang';
+

+
+
Man kann die Klammernotation mit for...in nutzen, um über alle enumerable (aufzählbaren) Eigenschaften eines Objektes zu iterieren. Um dieses zu zeigen wie das funktioniert, zeigt die folgende Funktion die Eigenschaften eines Objektes, wenn eine Objekt und der Name des Objektes der Funktion als Parameter übergeben werden:

+
+
function showProps(obj, objName) {
+  var result = '';
+  for (var i in obj) {
+    // obj.hasOwnProperty() wird benutzt um Eigenschaften aus der Prototypen-Kette herauszufiltern
+    if (obj.hasOwnProperty(i)) {
+      result += objName + '.' + i + ' = ' + obj[i] + '\n';
+    }
+  }
+  return result;
+}
+

+
+
So gibt der Aufruf showProps(myCar, "myCar") folgenden Rückgabewert zurück:

+
+
myCar.make = Ford
+myCar.model = Mustang
+myCar.year = 1969

+
+
Enumerate the properties of an object

+
+
Starting with ECMAScript 5, there are three native ways to list/traverse object properties:

+
+
    
+ 
  • for...in loops
    
+  This method traverses all enumerable properties of an object and its prototype chain
    • 
+ 
  • {{jsxref("Object.keys", "Object.keys(o)")}}
    
+  This method returns an array with all the own (not in the prototype chain) enumerable properties' names ("keys") of an object o.
    • 
+ 
  • {{jsxref("Object.getOwnPropertyNames", "Object.getOwnPropertyNames(o)")}}
    
+  This method returns an array containing all own properties' names (enumerable or not) of an object o.
    • 
+

+
+
Before ECMAScript 5, there was no native way to list all properties of an object. However, this can be achieved with the following function:

+
+
function listAllProperties(o) {
+	var objectToInspect;
+	var result = [];
+
+	for(objectToInspect = o; objectToInspect !== null; objectToInspect = Object.getPrototypeOf(objectToInspect)) {
+      result = result.concat(Object.getOwnPropertyNames(objectToInspect));
+	}
+
+	return result;
+}
+

+
+
This can be useful to reveal "hidden" properties (properties in the prototype chain which are not accessible through the object, because another property has the same name earlier in the prototype chain). Listing accessible properties only can easily be done by removing duplicates in the array.

+
+
Creating new objects

+
+
JavaScript has a number of predefined objects. In addition, you can create your own objects. You can create an object using an object initializer. Alternatively, you can first create a constructor function and then instantiate an object invoking that function in conjunction with the new operator.

+
+
Using object initializers

+
+
In addition to creating objects using a constructor function, you can create objects using an object initializer. Using object initializers is sometimes referred to as creating objects with literal notation. "Object initializer" is consistent with the terminology used by C++.

+
+
The syntax for an object using an object initializer is:

+
+
var obj = { property_1:   value_1,   // property_# may be an identifier...
+            2:            value_2,   // or a number...
+            // ...,
+            'property n': value_n }; // or a string
+

+
+
where obj is the name of the new object, each property_i is an identifier (either a name, a number, or a string literal), and each value_i is an expression whose value is assigned to the property_i. The obj and assignment is optional; if you do not need to refer to this object elsewhere, you do not need to assign it to a variable. (Note that you may need to wrap the object literal in parentheses if the object appears where a statement is expected, so as not to have the literal be confused with a block statement.)

+
+
Object initializers are expressions, and each object initializer results in a new object being created whenever the statement in which it appears is executed. Identical object initializers create distinct objects that will not compare to each other as equal. Objects are created as if a call to new Object() were made; that is, objects made from object literal expressions are instances of Object.

+
+
The following statement creates an object and assigns it to the variable x if and only if the expression cond is true:

+
+
if (cond) var x = {greeting: 'hi there'};
+

+
+
The following example creates myHonda with three properties. Note that the engine property is also an object with its own properties.

+
+
var myHonda = {color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}};
+

+
+
You can also use object initializers to create arrays. See array literals.

+
+
Using a constructor function

+
+
Alternatively, you can create an object with these two steps:

+
+
    
+ 
  1. Define the object type by writing a constructor function. There is a strong convention, with good reason, to use a capital initial letter.
    2. 
+ 
  2. Create an instance of the object with new.
    3. 
+

+
+
To define an object type, create a function for the object type that specifies its name, properties, and methods. For example, suppose you want to create an object type for cars. You want this type of object to be called Car, and you want it to have properties for make, model, and year. To do this, you would write the following function:

+
+
function Car(make, model, year) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+}
+

+
+
Notice the use of this to assign values to the object's properties based on the values passed to the function.

+
+
Now you can create an object called mycar as follows:

+
+
var mycar = new Car('Eagle', 'Talon TSi', 1993);
+

+
+
This statement creates mycar and assigns it the specified values for its properties. Then the value of mycar.make is the string "Eagle", mycar.year is the integer 1993, and so on.

+
+
You can create any number of Car objects by calls to new. For example,

+
+
var kenscar = new Car('Nissan', '300ZX', 1992);
+var vpgscar = new Car('Mazda', 'Miata', 1990);
+

+
+
An object can have a property that is itself another object. For example, suppose you define an object called person as follows:

+
+
function Person(name, age, sex) {
+  this.name = name;
+  this.age = age;
+  this.sex = sex;
+}
+

+
+
and then instantiate two new person objects as follows:

+
+
var rand = new Person('Rand McKinnon', 33, 'M');
+var ken = new Person('Ken Jones', 39, 'M');
+

+
+
Then, you can rewrite the definition of Car to include an owner property that takes a person object, as follows:

+
+
function Car(make, model, year, owner) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+  this.owner = owner;
+}
+

+
+
To instantiate the new objects, you then use the following:

+
+
var car1 = new Car('Eagle', 'Talon TSi', 1993, rand);
+var car2 = new Car('Nissan', '300ZX', 1992, ken);
+

+
+
Notice that instead of passing a literal string or integer value when creating the new objects, the above statements pass the objects rand and ken as the arguments for the owners. Then if you want to find out the name of the owner of car2, you can access the following property:

+
+
car2.owner.name
+

+
+
Note that you can always add a property to a previously defined object. For example, the statement

+
+
car1.color = 'black';
+

+
+
adds a property color to car1, and assigns it a value of "black." However, this does not affect any other objects. To add the new property to all objects of the same type, you have to add the property to the definition of the Car object type.

+
+
Using the Object.create method

+
+
Objects can also be created using the {{jsxref("Object.create()")}} method. This method can be very useful, because it allows you to choose the prototype object for the object you want to create, without having to define a constructor function.

+
+
// Animal properties and method encapsulation
+var Animal = {
+  type: 'Invertebrates', // Default value of properties
+  displayType: function() {  // Method which will display type of Animal
+    console.log(this.type);
+  }
+};
+
+// Create new animal type called animal1
+var animal1 = Object.create(Animal);
+animal1.displayType(); // Output:Invertebrates
+
+// Create new animal type called Fishes
+var fish = Object.create(Animal);
+fish.type = 'Fishes';
+fish.displayType(); // Output:Fishes

+
+
Inheritance

+
+
All objects in JavaScript inherit from at least one other object. The object being inherited from is known as the prototype, and the inherited properties can be found in the prototype object of the constructor. See Inheritance and the prototype chain for more information.

+
+
Indexing object properties

+
+
You can refer to a property of an object either by its property name or by its ordinal index. If you initially define a property by its name, you must always refer to it by its name, and if you initially define a property by an index, you must always refer to it by its index.

+
+
This restriction applies when you create an object and its properties with a constructor function (as we did previously with the Car object type) and when you define individual properties explicitly (for example, myCar.color = "red"). If you initially define an object property with an index, such as myCar[5] = "25 mpg", you subsequently refer to the property only as myCar[5].

+
+
The exception to this rule is objects reflected from HTML, such as the forms array. You can always refer to objects in these arrays by either their ordinal number (based on where they appear in the document) or their name (if defined). For example, if the second <FORM> tag in a document has a NAME attribute of "myForm", you can refer to the form as document.forms[1] or document.forms["myForm"] or document.forms.myForm.

+
+
Defining properties for an object type

+
+
You can add a property to a previously defined object type by using the prototype property. This defines a property that is shared by all objects of the specified type, rather than by just one instance of the object. The following code adds a color property to all objects of type Car, and then assigns a value to the color property of the object car1.

+
+
Car.prototype.color = null;
+car1.color = 'black';
+

+
+
See the prototype property of the Function object in the JavaScript reference for more information.

+
+
Defining methods

+
+
A method is a function associated with an object, or, simply put, a method is a property of an object that is a function. Methods are defined the way normal functions are defined, except that they have to be assigned as the property of an object. See also method definitions for more details. An example is:

+
+
objectName.methodname = functionName;
+
+var myObj = {
+  myMethod: function(params) {
+    // ...do something
+  }
+
+  // OR THIS WORKS TOO
+
+  myOtherMethod(params) {
+    // ...do something else
+  }
+};
+

+
+
where objectName is an existing object, methodname is the name you are assigning to the method, and functionName is the name of the function.

+
+
You can then call the method in the context of the object as follows:

+
+
object.methodname(params);
+

+
+
You can define methods for an object type by including a method definition in the object constructor function. You could define a function that would format and display the properties of the previously-defined Car objects; for example,

+
+
function displayCar() {
+  var result = 'A Beautiful ' + this.year + ' ' + this.make
+    + ' ' + this.model;
+  pretty_print(result);
+}
+

+
+
where pretty_print is a function to display a horizontal rule and a string. Notice the use of this to refer to the object to which the method belongs.

+
+
You can make this function a method of Car by adding the statement

+
+
this.displayCar = displayCar;
+

+
+
to the object definition. So, the full definition of Car would now look like

+
+
function Car(make, model, year, owner) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+  this.owner = owner;
+  this.displayCar = displayCar;
+}
+

+
+
Then you can call the displayCar method for each of the objects as follows:

+
+
car1.displayCar();
+car2.displayCar();
+

+
+
Using this for object references

+
+
JavaScript has a special keyword, this, that you can use within a method to refer to the current object. For example, suppose you have a function called validate that validates an object's value property, given the object and the high and low values:

+
+
function validate(obj, lowval, hival) {
+  if ((obj.value < lowval) || (obj.value > hival)) {
+    alert('Invalid Value!');
+  }
+}
+

+
+
Then, you could call validate in each form element's onchange event handler, using this to pass it the element, as in the following example:

+
+
<input type="text" name="age" size="3"
+  onChange="validate(this, 18, 99)">
+

+
+
In general, this refers to the calling object in a method.

+
+
When combined with the form property, this can refer to the current object's parent form. In the following example, the form myForm contains a Text object and a button. When the user clicks the button, the value of the Text object is set to the form's name. The button's onclick event handler uses this.form to refer to the parent form, myForm.

+
+
<form name="myForm">
+<p><label>Form name:<input type="text" name="text1" value="Beluga"></label>
+<p><input name="button1" type="button" value="Show Form Name"
+     onclick="this.form.text1.value = this.form.name">
+</p>
+</form>

+
+
Defining getters and setters

+
+
A getter is a method that gets the value of a specific property. A setter is a method that sets the value of a specific property. You can define getters and setters on any predefined core object or user-defined object that supports the addition of new properties. The syntax for defining getters and setters uses the object literal syntax.

+
+
The following illustrates how getters and setters could work for a user-defined object o.

+
+
var o = {
+  a: 7,
+  get b() {
+    return this.a + 1;
+  },
+  set c(x) {
+    this.a = x / 2;
+  }
+};
+
+console.log(o.a); // 7
+console.log(o.b); // 8
+o.c = 50;
+console.log(o.a); // 25
+

+
+
The o object's properties are:

+
+
    
+ 
  • o.a — a number
    • 
+ 
  • o.b — a getter that returns o.a plus 1
    • 
+ 
  • o.c — a setter that sets the value of o.a to half of the value o.c is being set to
    • 
+

+
+
Please note that function names of getters and setters defined in an object literal using "[gs]et property()" (as opposed to __define[GS]etter__ ) are not the names of the getters themselves, even though the [gs]et propertyName(){ } syntax may mislead you to think otherwise. To name a function in a getter or setter using the "[gs]et property()" syntax, define an explicitly named function programmatically using Object.defineProperty (or the Object.prototype.__defineGetter__ legacy fallback).

+
+
The following code illustrates how getters and setters can extend the {{jsxref("Date")}} prototype to add a year property to all instances of the predefined Date class. It uses the Date class's existing getFullYear and setFullYear methods to support the year property's getter and setter.

+
+
These statements define a getter and setter for the year property:

+
+
var d = Date.prototype;
+Object.defineProperty(d, 'year', {
+  get: function() { return this.getFullYear(); },
+  set: function(y) { this.setFullYear(y); }
+});
+

+
+
These statements use the getter and setter in a Date object:

+
+
var now = new Date();
+console.log(now.year); // 2000
+now.year = 2001; // 987617605170
+console.log(now);
+// Wed Apr 18 11:13:25 GMT-0700 (Pacific Daylight Time) 2001
+

+
+
In principle, getters and setters can be either

+
+
    
+ 
  • defined using object initializers, or
    • 
+ 
  • added later to any object at any time using a getter or setter adding method.
    • 
+

+
+
When defining getters and setters using object initializers all you need to do is to prefix a getter method with get and a setter method with set. Of course, the getter method must not expect a parameter, while the setter method expects exactly one parameter (the new value to set). For instance:

+
+
var o = {
+  a: 7,
+  get b() { return this.a + 1; },
+  set c(x) { this.a = x / 2; }
+};
+

+
+
Getters and setters can also be added to an object at any time after creation using the Object.defineProperties method. This method's first parameter is the object on which you want to define the getter or setter. The second parameter is an object whose property names are the getter or setter names, and whose property values are objects for defining the getter or setter functions. Here's an example that defines the same getter and setter used in the previous example:

+
+
var o = { a: 0 };
+
+Object.defineProperties(o, {
+    'b': { get: function() { return this.a + 1; } },
+    'c': { set: function(x) { this.a = x / 2; } }
+});
+
+o.c = 10; // Runs the setter, which assigns 10 / 2 (5) to the 'a' property
+console.log(o.b); // Runs the getter, which yields a + 1 or 6
+

+
+
Which of the two forms to choose depends on your programming style and task at hand. If you already go for the object initializer when defining a prototype you will probably most of the time choose the first form. This form is more compact and natural. However, if you need to add getters and setters later — because you did not write the prototype or particular object — then the second form is the only possible form. The second form probably best represents the dynamic nature of JavaScript — but it can make the code hard to read and understand.

+
+
Deleting properties

+
+
You can remove a non-inherited property by using the delete operator. The following code shows how to remove a property.

+
+
// Creates a new object, myobj, with two properties, a and b.
+var myobj = new Object;
+myobj.a = 5;
+myobj.b = 12;
+
+// Removes the a property, leaving myobj with only the b property.
+delete myobj.a;
+console.log ('a' in myobj); // yields "false"
+

+
+
You can also use delete to delete a global variable if the var keyword was not used to declare the variable:

+
+
g = 17;
+delete g;
+

+
+
Comparing Objects

+
+
In JavaScript objects are a reference type. Two distinct objects are never equal, even if they have the same properties. Only comparing the same object reference with itself yields true.

+
+
// Two variables, two distinct objects with the same properties
+var fruit = {name: 'apple'};
+var fruitbear = {name: 'apple'};
+
+fruit == fruitbear; // return false
+fruit === fruitbear; // return false

+
+
// Two variables, a single object
+var fruit = {name: 'apple'};
+var fruitbear = fruit;  // assign fruit object reference to fruitbear
+
+// here fruit and fruitbear are pointing to same object
+fruit == fruitbear; // return true
+fruit === fruitbear; // return true
+

+
+
fruit.name = 'grape';
+console.log(fruitbear);    // yields { name: "grape" } instead of { name: "apple" }
+

+
+
For more information about comparison operators, see Comparison operators.

+
+
See also

+
+
+
+
{{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Feinheiten_des_Objektmodells")}}

diff --git a/files/de/web/javascript/introduction_to_object-oriented_javascript/index.html b/files/de/web/javascript/introduction_to_object-oriented_javascript/index.html
deleted file mode 100644
index 41d67bc025..0000000000
--- a/files/de/web/javascript/introduction_to_object-oriented_javascript/index.html
+++ /dev/null
@@ -1,390 +0,0 @@
----
-title: Einführung in objektorientiertes JavaScript
-slug: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript
-tags:
-  - Constructor
-  - Encapsulation
-  - Inheritance
-  - Intermediate
-  - JavaScript
-  - Members
-  - Namespace
-  - OOP
-  - Object
-  - Object-Oriented
-translation_of: Learn/JavaScript/Objects
-translation_of_original: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript
----
-
{{jsSidebar("Introductory")}}

-
-
Im Kern ist JavaScript eine objektorientierte Programmiersprache mit mächtigen und flexiblen Fähigkeiten der {{Glossary("OOP")}}. Dieser Artikel beginnt mit einer Einführung in die objektorientierte Programmierung. Im zweiten Teil wird das Objektmodel von JavaScript erläutert. Danach folgt eine praktische Vorstellung der objektorientierten Programmierung in JavaScript. Dieser Artikel beschreibt nicht die neuere Syntax für {{jsxref("Classes", "objektorientierte Programmierung in ECMAScript 6", "", 1)}}.

-
-
JavaScript Review

-
-
Wenn Sie nicht mit den Konzepten in JavaScript, wie zum Beispiel Variablen, Typen, Funktionen und Geltungsbereich, vertraut sind, lesen Sie bitte zuerst den Artikel Eine Wiedereinführung in JavaScript. Sie können ebenfalls auf den JavaScript Guide zurückgreifen.

-
-
Objektorientierte Programmierung

-
-
Die objektorientierte Programmierung ist ein Paradigma, in dem über Abstraktion Modelle basierend auf der realen Welt erstellt werden. Es verwendet Techniken, die von zuvor etablierten Paradigmen eingeführt wurden. Darunter befinden sich Modularität, Polymorphismus und Datenkapselung. Heutzutage unterstützen viele populäre Programmiersprachen (z.B.: Java, JavaScript, C#, C++, Python, PHP, Ruby und Objective-C) die objektorientierte Programmierung (OOP).

-
-
Objektorientierte Programmierung kann als das Design einer Software unter der Verwendung von kooperierenden Objekten angesehen werden. Die traditionelle Ansicht dagegen sieht ein Programm als eine Menge von Funktionen oder noch einfacher als eine Abfolge von Instruktionen an den Computer. In der OOP kann jedes Objekt Nachrichten empfangen, Daten verarbeiten und Nachrichten an andere Objekte senden. Jedes Objekt kann als eine unabhängige kleine Maschine mit einer bestimmten Rolle oder Verantwortlichkeit angesehen werden.

-
-
Die Objektorientierte Programmierung versucht höhere Flexibilität und Wartbarkeit in Programmen zu ermöglichen und wird deshalb oft beim Software Engineering von hochskalierenden Programmen eingesetzt. Durch die starke Konzentration auf Modularität hat objektorientierter Code den Vorteil, dass er einfacher zu entwickeln und zu verstehen ist. Sie konzentriert sich direkter auf die Analyse, die Codierung und das Verstehen von komplexen Situationen und Prozeduren als weniger modulare Programmiermethoden.1

-
-
Begriffsdefinitionen

-
-

- 
{{Glossary("Namespace")}}

- 
Ein Container, der Entwicklern die Bündelung von Funktionalität unter einem eindeutigen, applikationsspezifischen Namen ermöglicht.

- 
{{Glossary("Klasse")}}

- 
Definiert die Eigenschaften eines Objekts. Sie ist die Definition einer Vorlage von Variablen und Methoden eines Objekts.

- 
{{Glossary("Objekt")}}

- 
Eine Instanz einer Klasse.

- 
{{Glossary("Eigenschaft")}}

- 
Eine Eigenschaft eines Objekts, wie zum Beispiel eine Farbe.

- 
{{Glossary("Methode")}}

- 
Eine Fähigkeit eines Objekts, wie zum Beispiel laufen. Sie ist eine Unterroutine oder Funktion, die mit der Klasse assoziiert ist.

- 
{{Glossary("Konstruktor")}}

- 
Eine spezielle Methode, die zur Instanziierung eines Objekts aufgerufen wird. Sie hat gewöhnlicherweise denselben Namen wie die Klasse, zu der sie gehört.

- 
{{Glossary("Vererbung")}}

- 
Eine Klasse kann die Eigenschaften und Fähigkeiten von anderen Klassen erben und somit für sich verwenden.

- 
{{Glossary("Datenkapselung")}}

- 
Die Datenkapselung ist eine Technik, um die Daten und die Methoden, die diese Daten verwenden, miteinander zu bündeln.

- 
{{Glossary("Abstraktion")}}

- 
Die Verknüpfung von komplexer Vererbung, Methoden und Eigenschaften eines Objekts müssen ein Modell der Realität simulieren können.

- 
{{Glossary("Polymorphismus")}}

- 
Poly bedeute "viele"  und Morphismus bedeutet "Formen". Verschiedene Klassen können dieselbe Methode oder dieselbe Eigenschaft definieren.

-

-
-
Lesen Sie bitte den Artikel {{interwiki("wikipedia", "Objektorientierte Programmierung")}} auf Wikipedia für eine umfassendere Beschreibung der objektorientierten Programmierung.

-
-
Prototypenbasierte Programmierung

-
-
Prototypenbasierte Programmierung ist eine Art der objektorientierten Programmierung bei der keine Klassen gegenwärtig sind. Die Wiederverwendung von Verhalten (bekannt als Vererbung in klassenbasierten Programmiersprachen) wird über das Dekorieren von existierenden Objekten erreicht, die als Prototyp dienen. Dieses Modell wird als klassenlose, prototyporientierte oder instanzorientierte Programmierung bezeichnet.

-
-
Das ursprüngliche (und am meisten kanonische) Beispiel einer prototypenbasierten Programmiersprache ist {{interwiki("wikipedia", "Self (Programmiersprache)")}}, welche von David Ungar and Randall Smith entwickelt wurde. Seitdem wurde die klassenlose Programmierung immer mehr populär und wurde für andere Programmiersprachen wie JavaScript, Cecil, NewtonScript, Io, MOO, REBOL, Kevo, Squeak (wenn das Viewer Framework zur Manipulation von Morphic Komponenten verwendet wird) und einige andere adoptiert.2

-
-
Objektorientierte Programmierung mit JavaScript

-
-
Namespace

-
-
Ein Namespace ist ein Container in dem Entwickler Funktionalitäten unter einem eindeutigen, applikationsspezifischen Namen zusammenfassen können. In JavaScript ist ein Namespace ein gewöhnliches Objekt, welches Methoden, Eigenschaften und Objekte enthält.

-
-

-
Im Gegensatz zu manchen anderen objektorientierten Programmiersprachen gibt es in der Sprachebene von JavaScript keinen Unterschied zwischen einem regulären Objekt und einem Namespace.

-

-
-
Die Idee hinter der Erstellung eines Namespaces in JavaScript ist simpel: es wird ein globales Objekt erstellt, welches alle Variablen, Methoden und Funktionen als Eigenschaften besitzt. Zusätzlich kann die Verwendung von Namespaces Namenskonflikten in der Applikation vorbeugen.

-
-
Es wird ein globales Objekt names MYAPP erstellt:

-
-
// global namespace
-var MYAPP = MYAPP || {};

-
-
Im obigen Code wird zuerst geprüft, ob MYAPP bereits definiert wurde (entweder in derselben oder einer anderen Datei). Wenn MYAPP bereits definiert wurde, wird das globale Objekt MYAPP verwendet. Anderenfalls wird ein leeres Objekt names MYAPP erstellt, welches später Methoden, Funktionen, Variablen und andere Objekte kapseln kann.

-
-
Innerhalb eines Namespaces können weitere Namespaces erstellt werden:

-
-
// sub namespace
-MYAPP.event = {};

-
-
Der folgende Code erstellt einen Namespace und fügt diesem Variablen, Funktionen und Methoden hinzu:

-
-
// Create container called MYAPP.commonMethod for common method and properties
-MYAPP.commonMethod = {
-  regExForName: "", // define regex for name validation
-  regExForPhone: "", // define regex for phone no validation
-  validateName: function(name){
-    // Do something with name, you can access regExForName variable
-    // using "this.regExForName"
-  },
-
-  validatePhoneNo: function(phoneNo){
-    // do something with phone number
-  }
-}
-
-// Object together with the method declarations
-MYAPP.event = {
-    addListener: function(el, type, fn) {
-    //  code stuff
-    },
-   removeListener: function(el, type, fn) {
-    // code stuff
-   },
-   getEvent: function(e) {
-   // code stuff
-   }
-
-   // Can add another method and properties
-}
-
-//Syntax for Using addListner method:
-MYAPP.event.addListener("yourel", "type", callback);

-
-
Standardmäßig eingebaute Objekte

-
-
JavaScript besitzt verschiedene Objekte im Kern. Darunter befinden sich zum Beispiel die Objekte Math, Object, Array, und String. Das folgende Beispiel zeigt, wie das Math Objekt mit der random() Methode eine Zufallszahl generiert.

-
-
console.log(Math.random());
-

-
-
Hinweis: Dieses und folgende Beispiele setzen voraus, dass {{domxref("console.log()")}} global definiert wurde. Die console.log Funktion ist kein eigentlicher Sprachteil von JavaScript, jedoch implementieren viele Browser diese zum Debuggen.

-
-
Siehe JavaScript Reference: Standard built-in objects für eine List aller Objekte im Kern von JavaScript.

-
-
Jedes Objekt in JavaScript ist eine Instanz des Objekts Object und erbt somit alle Eigenschaften und Methoden von diesem.

-
-
Eigene Objekte

-
-
Die Klasse

-
-
JavaScript ist eine prototypenbasierte Programmiersprache, welche im Gegensatz zu C++ oder Java keine class Anweisung enthält. Dies kann für Programmierer manchmal verwirrend sein, wenn sie normalerweise Programmiersprachen mit einer class Anweisung verwenden. JavaScript verwendet stattdessen Funktionen als Klassen. Die Definition einer Klasse erfolgt analog zu der einer Funktion. Im folgenden Beispiel wird eine neue Klasse namens Person definiert.

-
-
var Person = function(){ }
-

-
-
Das Objekt (Instanz einer Klasse)

-
-
Um eine neue Instanz eines Objekts obj zu erstellen, wird die Anweisung new obj ausgeführt. Das Ergebnis der Anweisung (welches den Typ obj hat) wird für eine spätere Verwendung einer Variablen zugewiesen.

-
-
Im folgenden Beispiel wird eine Klasse mit dem Namen Person definiert und zwei Objekte (person1 and person2) instanziiert.

-
-
var person1 = new Person();
-var person2 = new Person();
-

-
-
Lesen Sie bitte {{jsxref("Object.create()")}} für eine neue, alternative Methode zur Objektinstanziierung.

-
-
Der Konstruktor

-
-
Der Konstruktor wird zum Zeitpunkt der Instanziierung (wenn eine Objektinstanz erstellt wird) aufgerufen. Er ist als eine Methode der Klasse definiert. In JavaScript agiert die Funktion als Konstruktor für das Objekt. Somit muss keine Methode explizit für den Konstruktor definiert werden. Jede deklarierte Anweisung in der Klasse wird zum Zeitpunkt der Instanziierung ausgeführt.

-
-
Der Konstruktor wird zur Initialisierung der Eigenschaften oder vorbereitende Methodenaufrufe zur Verwendung des Objekts verwendet. Das Hinzufügen von Klassenmethoden und deren Definitionen verwendet eine andere Syntax, welche später im Artikel erläutert wird.

-
-
Im folgenden Beispiel loggt der Konstruktor der Klasse Person eine Nachricht, wenn ein Person Objekt instanziiert wird.

-
-
function Person() {
-  console.log('Instanz erstellt');
-}
-
-var person1 = new Person();
-var person2 = new Person();
-

-
-
Die Eigenschaft (Objektattribut)

-
-
Eigenschaften sind Variablen innerhalb einer Klasse. Jede Instanz des Objekts besitzt diese Eigenschaften. Eigenschaften sollten im Prototyp der Eigenschaft in der Klasse (Funktion) gesetzt werden, damit die Vererbung korrekt funktioniert.

-
-
Eigenschaften können innerhalb eines Objekts mit dem Schlüsselwort this, welches das aktuelle Objekt referenziert, verwendet werden. Der Zugriff (lesen oder schreiben) auf eine Eigenschaft von außerhalb der Klasse wird durch die Syntax InstanceName.Property ermöglicht. Diese Syntax ist analog zu C++, Java und zahlreichen anderen Programmiersprachen. Innerhalb der Klasse wird die Syntax this.Property zum Lesen oder Schreiben des Werts verwendet.

-
-
Im folgenden Beispiel wird die Eigenschaft firstName für die Person Klasse definiert. Bei der Instanziierung wird ihr ein Wert zugewiesen.

-
-
function Person(firstName) {
-  this.firstName = firstName;
-  console.log('Person instantiated');
-}
-
-var person1 = new Person('Alice');
-var person2 = new Person('Bob');
-
-// Zeigt die Eigenschaft firstName des Objektes
-console.log('person1 is ' + person1.firstName); // logs "person1 is Alice"
-console.log('person2 is ' + person2.firstName); // logs "person2 is Bob"
-

-
-
Die Methoden

-
-
Methoden befolgen beinahe dieselbe Logik wie Eigenschaften mit dem Unterschied, dass sie Funktionen sind und deshalb als Funktionen definiert werden. Der Aufruf einer Funktion erfolgt analog zu Eigenschaften gefolgt von () am Ende des Methodennames. Innerhalb der Klammern können der Methode Argumente übergeben werden. Um eine Methode zu definieren, muss eine Funktion einer benannten Eigenschaft der prototype Eigenschaft der Klasse zugewiesen werden. Der Name der benannten Eigenschaft dient nun als Methodenname über den die Methode auf dem Objekt aufgerufen werden kann.

-
-
Im folgenden Beispiel wird die Methode sayHello() für die Person Klasse definiert.

-
-
function Person(firstName) {
-  this.firstName = firstName;
-}
-
-Person.prototype.sayHello = function() {
-  console.log("Hello, I'm " + this.firstName);
-};
-
-var person1 = new Person("Alice");
-var person2 = new Person("Bob");
-
-// Aufrufen der Methode sayHello der Person.
-person1.sayHello(); // logs "Hello, I'm Alice"
-person2.sayHello(); // logs "Hello, I'm Bob"
-

-
-
Methoden in JavaScript sind gewöhnliche Funktionsobjekte, die als eine Eigenschaft an ein Objekt gebunden werden. Dadurch können Methoden auch "außerhalb des Kontexts" aufgerufen werden. Das folgende Beispiel veranschaulicht dies:

-
-
function Person(firstName) {
-  this.firstName = firstName;
-}
-
-Person.prototype.sayHello = function() {
-  console.log("Hello, I'm " + this.firstName);
-};
-
-var person1 = new Person("Alice");
-var person2 = new Person("Bob");
-var helloFunction = person1.sayHello;
-
-// logs "Hello, I'm Alice"
-person1.sayHello();
-
-// logs "Hello, I'm Bob"
-person2.sayHello();
-
-// logs "Hello, I'm undefined" (oder schlägt
-// mit einem TypeError im strict mode fehl)
-helloFunction();
-
-// logs true
-console.log(helloFunction === person1.sayHello);
-
-// logs true
-console.log(helloFunction === Person.prototype.sayHello);
-
-// logs "Hello, I'm Alice"
-helloFunction.call(person1);

-
-
Das Beispiel zeigt, dass alle Referenzen zur sayHello Funktion — die auf person1, auf Person.prototype, in der helloFunction Variable, etc. — dieselbe Funktion referenzieren. Der Wert von this während eines Funktionsaufrufs hängt von der Art ab, wie die Funktion aufgerufen wird. In allgemeinen Fällen, wenn die Funktion in einem Ausdruck  über die Eigenschaft aufgerufen wird — person1.sayHello() — referenziert this das Objekt, auf der die Funktion aufgerufen wird (person1). Deshalb verwendet person1.sayHello() den Namen "Alice" und person2.sayHello() den Namen "Bob". Wenn die Funktion über andere Arten aufgerufen wird, ist this unterschiedlich definiert: Der Aufruf von der Variablen aus — helloFunction() — setzt this auf das globale Objekt (window, in Webbbrowsern). Da dieses Objekt (wahrscheinlich) keine firstName Eigenschaft besitzt, gitb die Funktion "Hello, I'm undefined" aus. (Dieses Ergebnis wird im Loose Mode produziert. Im Strict Mode verhält sich die Funktion anders und es könnte ein Fehler ausgelöst werden. Um Verwirrungen zu vermeiden wird dies nicht weiter im Detail besprochen) this kann auch explizit über Function#call (oder Function#apply) definiert werden. Die geschieht in der letzten Zeile des obigen Beispiels.

-
-
Hinweis: Mehr über this können Sie unter Function#call und Function#apply finden.

-
-
Vererbung

-
-
Vererbung ist eine Methode, um eine Klasse zu erstellen, die eine spezialisierte Version von einer (Einfachvererbung) oder mehrerer (Mehrfachvererbung) Klassen ist (JavaScript unterstützt nur Einfachvererbung). Die spezialisierte Klasse wird normalerweise als child bezeichnet. Die Klasse, von der geerbt wird, wird als parent bezeichnet. Vererbung in JavaScript funktioniert indem eine Instanz der parent Klasse der child Klasse zugewiesen und dann spezialisiert wird. In modernen Webbrowsern kann die Vererbung auch mittels der Verwendung von Object.create implementiert werden.

-
-
Hinweis: JavaScript erkennt den Konstruktor prototype.constructor (siehe Object.prototype) der child Klasse nicht. Er muss manuell angegeben werden. Sehe dazu zusätzlich den Beitrag "Why is it necessary to set the prototype constructor?" (englisch) auf Stackoverflow an.

-
-
Im folgenden Beispiel wird die Klasse Student als child Klasse von Person definiert. Dann wird die Methode sayHello() neu definiert und die Methode sayGoodBye() zur Klasse Person hinzugefügt.

-
-
// Definiert den Person Konstruktor
-function Person(firstName) {
-  this.firstName = firstName;
-}
-
-// Fügt Methoden zum Person.prototype hinzu
-Person.prototype.walk = function(){
-  console.log("I am walking!");
-};
-Person.prototype.sayHello = function(){
-  console.log("Hello, I'm " + this.firstName);
-};
-
-// Definiert den Student Konstruktor
-function Student(firstName, subject) {
-  // Call the parent constructor, making sure (using Function#call)
-  // that "this" is set correctly during the call
-  Person.call(this, firstName);
-
-  // Initialize our Student-specific properties
-  this.subject = subject;
-};
-
-// Erstellt ein Student.prototype Objekt das von Person.prototype erbt.
-// Hinweis: Ein häufiger Fehler ist der Einsatz von "new Person()" beim erstellen vomeines
-// Student.prototype. Das ist falsch aus einigen Gründen, nicht nur
-// das wir keinen Parameter der Person für "firstName" mitgeben können.
-// Der korrekte Ort für den Aufruf von Person ist oben, wo wir es
-// von Student aufrufen.
-Student.prototype = Object.create(Person.prototype); // See note below
-
-// Setzt die "constructor" Eigenschaft um auf Student zu referenzieren.
-Student.prototype.constructor = Student;
-
-// Ersetzt die "sayHello" Methode
-Student.prototype.sayHello = function(){
-  console.log("Hello, I'm " + this.firstName + ". I'm studying "
-              + this.subject + ".");
-};
-
-// Fügt die "sayGoodBye" Methode hinzu
-Student.prototype.sayGoodBye = function(){
-  console.log("Goodbye!");
-};
-
-// Beispieleinsatz:
-var student1 = new Student("Janet", "Applied Physics");
-student1.sayHello();   // "Hello, I'm Janet. I'm studying Applied Physics."
-student1.walk();       // "I am walking!"
-student1.sayGoodBye(); // "Goodbye!"
-
-// Check that instanceof works correctly
-console.log(student1 instanceof Person);  // true
-console.log(student1 instanceof Student); // true
-

-
-
Unter Betrachtung der Zeile Student.prototype = Object.create(Person.prototype);: In älteren JavaScript Engines ohne Object.create, kann ein "polyfill" (auch "shim", siehe den verlinkten Artikel) oder eine Funktion, die dasselbe Ergebnis erzielt, verwendet werden:

-
-
function createObject(proto) {
-    function ctor() { }
-    ctor.prototype = proto;
-    return new ctor();
-}
-
-// Einsatz:
-Student.prototype = createObject(Person.prototype);
-

-
-
Lesen Sie Object.create, um mehr zum obigen Beispiel zu erfahren.

-
-
Stellen sie sicher, dass this zum richtigen Objekt referenziert unabhängig davon, wie das Objekt erstellt wird. Es gibt eine einfache Methode dieses sicherzustellen:

-
-
var Person = function(firstName) {
-  if (this instanceof Person) {
-    this.firstName = firstName
-  } else {
-    return new Person(firstName)
-  }
-}

-
-
Datenkapselung

-
-
Im obigen Beispiel muss die Student Klasse nicht wissen, wie die Methode walk() der Person Klasse implementiert ist, um sie verwenden zu können. Die Student Klasse muss die Methode nicht explizit definierten, solange Sie unverändert übernommen werden soll. Dabei handelt es sich um Datenkapselung, bei der jede Klasse ihre Daten und Methoden in einer Einheit bündeln.

-
-
Information Hiding ist ein gängiges Feature in anderen Programmiersprachen, bei dem Methoden und Eigenschaften als privat oder geschützt definierten werden können. Obwohl Information Hiding mit JavaScript realisiert werden kann, ist es keine Voraussetzung für objektorientierte Programmierung.3

-
-
Abstraktion

-
-
Abstraktion ist ein Mechanismus, der die Modellierung eines Teils der Problemstellung erlaubt. Dazu kann Vererbung (Spezialisierung) oder Komposition eingesetzt werden. JavaScript ermöglicht die Spezialisierung mit Vererbung. Komposition wird realiseirt, indem Instanzen einer Klasse als Werte von Eigenschaften eines Objekts gesetzt werden.

-
-
Die Function Klasse in JavaScript erbt von der Object Klasse (Spezialisierung). Die Function.prototype Eigenschaft ist eine Instanz der Object Klasse (Komposition).

-
-
var foo = function(){};
-
-// logs "foo is a Function: true"
-console.log('foo is a Function: ' + (foo instanceof Function));
-
-// logs "foo.prototype is an Object: true"
-console.log('foo.prototype is an Object: ' + (foo.prototype instanceof Object));

-
-
Polymorphismus

-
-
Wie alle Methoden und Eigenschaften innerhalb der prototype Eigenschaft definiert werden, können unterschiedliche Klassen Methoden mit demselben Namen definieren. Methoden sind im Scope der Klasse, in der sie definiert sind, verfügbar. Das gilt solange die Klassen keine parent-child Beziehung besitzen (wenn die eine Klasse nicht innerhalb einer Kette von der anderen Klasse erbt).

-
-
Anmerkungen

-
-
Die im Artikel präsentierten Techniken umfassen nicht alle Möglichkeiten der objektorientierten Programmierung in JavaScript, da JavaScript sehr flexibel in der Umsetzung der objektorientierten Programmierung ist.

-
-
Die vorgestellten Techniken zeigen nicht alle verfügbaren Hacks in JavaScript und mimen nicht die Implementierung der Objektorientiertheit in anderen Programmiersprachen.

-
-
Es gibt weitere Techniken, welche eine fortgeschrittenere objektorientierte Programmierung in JavaScript ermöglichen. Diese gehen aber über den Umfang dieses einführenden Artikels hinaus.

-
-
Referenzen

-
-
    
- 
  1. Wikipedia. "Object-oriented programming" und "Objektorientierte Programmierung"
    2. 
- 
  2. Wikipedia. "Prototype-based programming" und "Prototypenbasierte Programmierung"
    3. 
- 
  3. Wikipedia. "Encapsulation (object-oriented programming)" und "Datenkapselung (Programmierung)"
    4. 
-

-
-
Siehe auch

-
-
    
- 
  • {{jsxref("Function.prototype.call()")}}
    • 
- 
  • {{jsxref("Function.prototype.apply()")}}
    • 
- 
  • {{jsxref("Object.create()")}}
    • 
- 
  • {{jsxref("Strict_mode", "Strict mode")}}
    • 
-

diff --git a/files/de/web/javascript/javascript_technologies_overview/index.html b/files/de/web/javascript/javascript_technologies_overview/index.html
new file mode 100644
index 0000000000..ae24cb1ca3
--- /dev/null
+++ b/files/de/web/javascript/javascript_technologies_overview/index.html
@@ -0,0 +1,87 @@
+---
+title: JavaScript Technologieübersicht
+slug: Web/JavaScript/JavaScript_technologieuebersicht
+translation_of: Web/JavaScript/JavaScript_technologies_overview
+---
+
{{JsSidebar("Introductory")}}

+
+
Einleitung

+
+
Während HTML die Struktur einer Webseite definiert und CSS den Style angibt, mit dem der Inhalt der Webseite dargestellt wird, ermöglicht JavaScript das Erstellen von interaktiven Webseiten und Rich Web Applications.

+
+
Der Begriff "JavaScript" umfasst im Kontext von Web-Browsern mehrere Elemente. Darunter befinden sich der Sprachkern (ECMAScript) und einige Web APIs, die auch das DOM (Document Object Model) enthalten.

+
+
Sprachkern von JavaScript (ECMAScript)

+
+
Der Sprachkern von JavaScript wurde vom ECMA TC39 Kommittee als die Sprache ECMAScript standardisiert. Die aktuellste Version der Spezifikation ist ECMAScript 5.1.

+
+
Der Sprachkern wird auch in Umgebungen außerhalb von Webbrowsern eingesetzt, wie zum Beispiel in node.js.

+
+
Was gehört alles zu ECMAScript?

+
+
Neben anderen Dingen definiert ECMAScript folgende Punkte:

+
+
    
+ 
  • Die Sprachsyntax (Regeln zum Parsen, Schlüsselwörter, Kontrollfluss, Objektinitialisierung...)
    • 
+ 
  • Mechanismen zur Fehlerbehandlung (throw, try/catch, Erstellung von benutzerdefinierten Fehlertypen)
    • 
+ 
  • Typen (boolean, number, string, function, object...)
    • 
+ 
  • Das globale Objekt. In Webbrowsern ist dies das window Objekt. ECMAScript definiert hierbei nur die APIs, die nicht browserspezifisch sind. z.B.: parseInt, parseFloat, decodeURI, encodeURI...
    • 
+ 
  • Vererbungsmechanismus basierend auf Prototypen
    • 
+ 
  • Eingebaute Objekte und Funktionen (JSON, Math, Array.prototype Methoden, Object introspection methods...)
    • 
+ 
  • Strict mode
    • 
+

+
+
Webbrowserunterstützung

+
+
Im August 2014 implementierten die aktuellen Versionen der verbreitesten Webbrowser ECMAScript 5.1. Es sind aber noch ältere Versionen in Verwendung, welche ECMAScript 3 und nur Teile von ECMAScript 5 implementieren. Moderne Webbrowsers implementieren bereits große Teile von ECMAScript 6.

+
+
Zukunft

+
+
Die vorgeschlagene vierte Version von ECMA-262 (ECMAScript 4 oder ES4) hätte das erste große Update von ECMAScript seit der dritten Version, welche in 1999 veröffentlicht wurde, sein sollen. Im August 2008 wurde der Vorschlag zur vierten Version von ECMAScript  unter dem Projekt ECMAScript Harmony reduziert, welches zum Beispiel Proxies oder das const Schlüsselwort definiert. Der Fortschirtt kann hier verfolgt werden. Die Veröffentlichung der sechsten Hauptversion des Standards wird im Jahr 2015 erwartet.

+
+
Internationalization API

+
+
Die ECMAScript Internationalization API Specification ist eine Erweiterung zur ECMAScript Sprachspezifikation, welche vom Ecma TC39 Kommittee standardisiert wird. Die Internationalization API bietet Textvergleiche (string Vergleiche), Formatierung von Zahlen, Datum und Zeit für JavaScript Applikationen, und lässt Applikationen die Sprache wählen, um die Funktionalität für die eigenen Bedürfnisse anpassen zu können. Der Standard wurde im Dezember 2012 freigegeben. Der Status über die Implementierung in Webbrowsern ist in der Documentation von Intl object aufgezeichnet.

+
+
Die Web APIs und der DOM

+
+
WebIDL

+
+
Die WebIDL specification verbindet die DOM Technologien und ECMAScript miteinander.

+
+
Der Kern des DOM

+
+
Das Document Object Model (DOM) ist eine plattform- und sprachunabhängige Konvention zur Repräsentation und Interaktion mit Objekten in HTML, XHTML und XML Dokumenten. Objekte im DOM Baum können über Methoden angesprochen und durch Aufrufen ihrer Methoden verändert werden. Das Core Document Object Model ist von der W3C standardisiert worden. Es definiert sprachspezifische Schnittstellen, welche HTML und XML Dokuments als Objekte abstrahieren und Mechanismen zur Manipulation dieser Abstraktion. Zusätzlich definiert der DOM auch:

+
+
    
+ 
  • Die Dokumentstruktur, ein Baummodell, und die DOM Event Architektur im DOM core: Node, Element, DocumentFragment, Document, DOMImplementation, Event, EventTarget, …
    • 
+ 
  • Eine weniger strenge Definition der DOM Event Architektur und spezifische Events im DOM events.
    • 
+ 
  • Andere Definitionen wie zum Beispiel DOM Traversal und DOM Range.
    • 
+

+
+
Aus der Sicht von ECMAScript werden Objekte, die in der DOM Spezifikation definiert sind,  "host objects" genannt.

+
+
HTML DOM

+
+
HTML, die Markup-Sprache im Web, ist mit Bezug auf den DOM definiert. HTML liegt eine Schicht über den abstrakten Konzepten vom DOM Kern und definiert zusätzlich die Bedeutung von Elementen. Der HTML DOM beinhaltet zum Beispiel die className Eigenschaft von HTML Elementen oder APIs wie {{ domxref("document.body") }}.

+
+
Die HTML Spezifikation definiert auch Einschränkungen auf Documenten. So müssen zum Beispiel die direkten Kindelemente der ungeordneten Liste ul alle li Elemente sein, welche die Listeneinträge repräsentieren. Im Allgemeinen verbietet die Spezifikation auch die Verwendung von Elementen und Attributen, die nicht im Standard definiert sind.

+
+
Suchen Sie nach dem Document Objekt, Window Objekt, oder anderen DOM Elementen? Besuchen Sie die DOM Dokumentation.

+
+
Andere APIs

+
+
    
+ 
  • Die setTimeout und die setInterval Funktionen wurden zuerst auf dem Window interface im HTML Standard definiert.
    • 
+ 
  • XMLHttpRequest. API die das Senden von asynchronen HTTP Request ermöglicht.
    • 
+ 
  • CSS Object Model. Das CSSOM wird zur Abstraktion von CSS Regeln als Objekte verwendet.
    • 
+ 
  • WebWorkers. API die die Verwendung von paralleler Verarbeitung ermöglicht.
    • 
+ 
  • WebSockets. API die eine low-level bidirektionale Kommunikation ermöglicht.
    • 
+ 
  • Canvas 2D Context. Grafik API für das canvas Element.
    • 
+

+
+
Webbrowserunterstützung

+
+
Jeder Webbrowser muss erfahren, dass der DOM ein Chaos ist. Die Einheitlichkeit der Webbrowserunterstützung variiert teilweise stark von Feature zu Feature. Die Ursache dafür ist, dass viele der wichtigen DOM Features kaum oder unklare Spezifikationen hatten. Zusätzlich implementieren verschiedene Webbrowser eigene inkompatible Features für überlappende Einsatzszenarien (wie das Event Model vom Internet Explorer). Der aktuelle Trend (Stand Juni 2011) ist, das die W3C und teilweise die WHATWG ältere Features detaillierter definieren, damit die Interoperabilität verbessert werden kann. Diesem Trend folgend verbessern Webbbrowser ihre Implementierungen basierend auf den detaillierten Spezifikationen.

+
+
Eine allgemeine aber möglicherweise nicht vollkommen zuverlässiger Ansatz für cross-browser Kompatibilität ist der Einsatz einer JavaScript Bibliothek. Diese Bibliotheken abstrahieren DOM Features und gewährleisten den APIs, dass sie in verschiedenen Webbrowsern einheitlich funktionieren. Einige der meistverbreitesten Frameworks sind jQuery, prototype, und YUI.

diff --git a/files/de/web/javascript/javascript_technologieuebersicht/index.html b/files/de/web/javascript/javascript_technologieuebersicht/index.html
deleted file mode 100644
index ae24cb1ca3..0000000000
--- a/files/de/web/javascript/javascript_technologieuebersicht/index.html
+++ /dev/null
@@ -1,87 +0,0 @@
----
-title: JavaScript Technologieübersicht
-slug: Web/JavaScript/JavaScript_technologieuebersicht
-translation_of: Web/JavaScript/JavaScript_technologies_overview
----
-
{{JsSidebar("Introductory")}}

-
-
Einleitung

-
-
Während HTML die Struktur einer Webseite definiert und CSS den Style angibt, mit dem der Inhalt der Webseite dargestellt wird, ermöglicht JavaScript das Erstellen von interaktiven Webseiten und Rich Web Applications.

-
-
Der Begriff "JavaScript" umfasst im Kontext von Web-Browsern mehrere Elemente. Darunter befinden sich der Sprachkern (ECMAScript) und einige Web APIs, die auch das DOM (Document Object Model) enthalten.

-
-
Sprachkern von JavaScript (ECMAScript)

-
-
Der Sprachkern von JavaScript wurde vom ECMA TC39 Kommittee als die Sprache ECMAScript standardisiert. Die aktuellste Version der Spezifikation ist ECMAScript 5.1.

-
-
Der Sprachkern wird auch in Umgebungen außerhalb von Webbrowsern eingesetzt, wie zum Beispiel in node.js.

-
-
Was gehört alles zu ECMAScript?

-
-
Neben anderen Dingen definiert ECMAScript folgende Punkte:

-
-
    
- 
  • Die Sprachsyntax (Regeln zum Parsen, Schlüsselwörter, Kontrollfluss, Objektinitialisierung...)
    • 
- 
  • Mechanismen zur Fehlerbehandlung (throw, try/catch, Erstellung von benutzerdefinierten Fehlertypen)
    • 
- 
  • Typen (boolean, number, string, function, object...)
    • 
- 
  • Das globale Objekt. In Webbrowsern ist dies das window Objekt. ECMAScript definiert hierbei nur die APIs, die nicht browserspezifisch sind. z.B.: parseInt, parseFloat, decodeURI, encodeURI...
    • 
- 
  • Vererbungsmechanismus basierend auf Prototypen
    • 
- 
  • Eingebaute Objekte und Funktionen (JSON, Math, Array.prototype Methoden, Object introspection methods...)
    • 
- 
  • Strict mode
    • 
-

-
-
Webbrowserunterstützung

-
-
Im August 2014 implementierten die aktuellen Versionen der verbreitesten Webbrowser ECMAScript 5.1. Es sind aber noch ältere Versionen in Verwendung, welche ECMAScript 3 und nur Teile von ECMAScript 5 implementieren. Moderne Webbrowsers implementieren bereits große Teile von ECMAScript 6.

-
-
Zukunft

-
-
Die vorgeschlagene vierte Version von ECMA-262 (ECMAScript 4 oder ES4) hätte das erste große Update von ECMAScript seit der dritten Version, welche in 1999 veröffentlicht wurde, sein sollen. Im August 2008 wurde der Vorschlag zur vierten Version von ECMAScript  unter dem Projekt ECMAScript Harmony reduziert, welches zum Beispiel Proxies oder das const Schlüsselwort definiert. Der Fortschirtt kann hier verfolgt werden. Die Veröffentlichung der sechsten Hauptversion des Standards wird im Jahr 2015 erwartet.

-
-
Internationalization API

-
-
Die ECMAScript Internationalization API Specification ist eine Erweiterung zur ECMAScript Sprachspezifikation, welche vom Ecma TC39 Kommittee standardisiert wird. Die Internationalization API bietet Textvergleiche (string Vergleiche), Formatierung von Zahlen, Datum und Zeit für JavaScript Applikationen, und lässt Applikationen die Sprache wählen, um die Funktionalität für die eigenen Bedürfnisse anpassen zu können. Der Standard wurde im Dezember 2012 freigegeben. Der Status über die Implementierung in Webbrowsern ist in der Documentation von Intl object aufgezeichnet.

-
-
Die Web APIs und der DOM

-
-
WebIDL

-
-
Die WebIDL specification verbindet die DOM Technologien und ECMAScript miteinander.

-
-
Der Kern des DOM

-
-
Das Document Object Model (DOM) ist eine plattform- und sprachunabhängige Konvention zur Repräsentation und Interaktion mit Objekten in HTML, XHTML und XML Dokumenten. Objekte im DOM Baum können über Methoden angesprochen und durch Aufrufen ihrer Methoden verändert werden. Das Core Document Object Model ist von der W3C standardisiert worden. Es definiert sprachspezifische Schnittstellen, welche HTML und XML Dokuments als Objekte abstrahieren und Mechanismen zur Manipulation dieser Abstraktion. Zusätzlich definiert der DOM auch:

-
-
    
- 
  • Die Dokumentstruktur, ein Baummodell, und die DOM Event Architektur im DOM core: Node, Element, DocumentFragment, Document, DOMImplementation, Event, EventTarget, …
    • 
- 
  • Eine weniger strenge Definition der DOM Event Architektur und spezifische Events im DOM events.
    • 
- 
  • Andere Definitionen wie zum Beispiel DOM Traversal und DOM Range.
    • 
-

-
-
Aus der Sicht von ECMAScript werden Objekte, die in der DOM Spezifikation definiert sind,  "host objects" genannt.

-
-
HTML DOM

-
-
HTML, die Markup-Sprache im Web, ist mit Bezug auf den DOM definiert. HTML liegt eine Schicht über den abstrakten Konzepten vom DOM Kern und definiert zusätzlich die Bedeutung von Elementen. Der HTML DOM beinhaltet zum Beispiel die className Eigenschaft von HTML Elementen oder APIs wie {{ domxref("document.body") }}.

-
-
Die HTML Spezifikation definiert auch Einschränkungen auf Documenten. So müssen zum Beispiel die direkten Kindelemente der ungeordneten Liste ul alle li Elemente sein, welche die Listeneinträge repräsentieren. Im Allgemeinen verbietet die Spezifikation auch die Verwendung von Elementen und Attributen, die nicht im Standard definiert sind.

-
-
Suchen Sie nach dem Document Objekt, Window Objekt, oder anderen DOM Elementen? Besuchen Sie die DOM Dokumentation.

-
-
Andere APIs

-
-
    
- 
  • Die setTimeout und die setInterval Funktionen wurden zuerst auf dem Window interface im HTML Standard definiert.
    • 
- 
  • XMLHttpRequest. API die das Senden von asynchronen HTTP Request ermöglicht.
    • 
- 
  • CSS Object Model. Das CSSOM wird zur Abstraktion von CSS Regeln als Objekte verwendet.
    • 
- 
  • WebWorkers. API die die Verwendung von paralleler Verarbeitung ermöglicht.
    • 
- 
  • WebSockets. API die eine low-level bidirektionale Kommunikation ermöglicht.
    • 
- 
  • Canvas 2D Context. Grafik API für das canvas Element.
    • 
-

-
-
Webbrowserunterstützung

-
-
Jeder Webbrowser muss erfahren, dass der DOM ein Chaos ist. Die Einheitlichkeit der Webbrowserunterstützung variiert teilweise stark von Feature zu Feature. Die Ursache dafür ist, dass viele der wichtigen DOM Features kaum oder unklare Spezifikationen hatten. Zusätzlich implementieren verschiedene Webbrowser eigene inkompatible Features für überlappende Einsatzszenarien (wie das Event Model vom Internet Explorer). Der aktuelle Trend (Stand Juni 2011) ist, das die W3C und teilweise die WHATWG ältere Features detaillierter definieren, damit die Interoperabilität verbessert werden kann. Diesem Trend folgend verbessern Webbbrowser ihre Implementierungen basierend auf den detaillierten Spezifikationen.

-
-
Eine allgemeine aber möglicherweise nicht vollkommen zuverlässiger Ansatz für cross-browser Kompatibilität ist der Einsatz einer JavaScript Bibliothek. Diese Bibliotheken abstrahieren DOM Features und gewährleisten den APIs, dass sie in verschiedenen Webbrowsern einheitlich funktionieren. Einige der meistverbreitesten Frameworks sind jQuery, prototype, und YUI.

diff --git a/files/de/web/javascript/memory_management/index.html b/files/de/web/javascript/memory_management/index.html
new file mode 100644
index 0000000000..82f8977c23
--- /dev/null
+++ b/files/de/web/javascript/memory_management/index.html
@@ -0,0 +1,184 @@
+---
+title: Speicherverwaltung
+slug: Web/JavaScript/Speicherverwaltung
+tags:
+  - JavaScript
+translation_of: Web/JavaScript/Memory_Management
+---
+
{{JsSidebar("Advanced")}}

+
+
Einleitung

+
+
Bei Low-Level Programmiersprachen wie C, die zur systemnahen Programmierung eingesetzt werden, existieren Funktionen - wie z. B. malloc() und free() - womit explizit Speicher angefordert und wieder freigegeben werden kann. Bei JavaScript gibt es keine solchen Funktionen, sondern der benötigte Speicher wird bei der Erzeugung neuer Objekte (z. B. benutzerdefinierte Objekte oder vordefinierte Objekte wie String) zugewiesen. Die Speicherfreigabe erfolgt automatisch im Hintergrund durch die Garbage Collection (wörtlich: "Müllabfuhr"; automatische Speicherbereinigung). Dieser Automatismus führt oft zu Verwirrung und lässt so manchen Entwicklern irrtümlich glauben, man müsse sich über die Speicherverwaltung keine Gedanken machen.

+
+
Zyklus der Speichernutzung

+
+
Unabhängig von der eingesetzten Programmiersprache läuft der Zyklus für die Speichernutzung immer ungefähr gleich ab:

+
+
    
+ 
  1. Alloziierung/Zuweisung des benötigten Speichers.
    2. 
+ 
  2. Benutzung des Speichers (lesen, schreiben).
    3. 
+ 
  3. Freigabe des alloziierten Speichers, wenn er nicht mehr benötigt wird.
    4. 
+

+
+
Der erste und zweite Schritt erfolgt bei allen Programmiersprachen explizit. Der letzte Schritt, die Freigabe des Speichers, wird bei Low-Level-Sprachen explizit und bei höheren Programmiersprachen wie JavaScript meist implizit vorgenommen.

+
+
Speicherzuweisung bei JavaScript

+
+
Initialisierung von Werten

+
+
Um dem Programmierer die Arbeit zu erleichtern, weist JavaScript bei der Zuweisung von Werten je nach Typ automatisch die benötigte Menge an Speicher zu:

+
+

+
var n = 123; // alloziiert Speicher für eine Number
+var s = "azerty"; // alloziiert Speicher für einen String
+
+var o = {
+  a: 1,
+  b: null
+}; // alloziiert Speicher für das Objekt und enthaltene Werte
+
+var a = [1, null, "abra"]; // (wie bei Objekten) alloziiert Speicher für das Array und enthaltene Werte
+
+function f(a){
+  return a + 2;
+} // alloziiert eine Function (die ein aufrufbares Objekt ist)
+
+// Funktions-Ausdrücke alloziieren ebenfalls ein Objekt
+someElement.addEventListener('click', function(){
+  someElement.style.backgroundColor = 'blue';
+}, false);
+

+

+
+
Allokation über Funktionsaufrufe

+
+
Einige Funktionen allozieren Objekte:

+
+
var d = new Date();
+var e = document.createElement('div'); // alloziiert ein DOM-Element
+

+
+
Andere Methoden allozieren neue Werte oder Objekte:

+
+
var s = "azerty";
+var s2 = s.substr(0, 3); // s2 ist ein neuer String
+// Da Strings immutable sind, weist JavaScript evtl. hier
+// keinen neuen Speicher zu, sondern merkt sich nur [0, 3],
+// dass s2 die ersten beiden Elemente von s enthält
+
+var a = ["ouais ouais", "nan nan"];
+var a2 = ["generation", "nan nan"];
+var a3 = a.concat(a2); // neues Array mit den 4 Elementen von a und a2
+

+
+
Werte

+
+
Bei der Zuweisung von Werten wird in den Speicher geschrieben und beim Abfragen von Werten der Speicher ausgelesen. Weist man also z. B. einer Objekteigenschaft einen Wert zu oder übergibt einen Wert als Argument an eine Funktion, wird dieser in den Speicher geschrieben und beim Abfragen des Werts der Speicher ausgelesen.

+
+
Freigabe des Speichers, wenn dieser nicht mehr benötigt wird

+
+
Bei diesem Vorgang tauchen am häufigsten Probleme mit der Speicherverwaltung auf, da es keine leichte Aufgabe ist, zu entscheiden, wann der benötigte Speicher tatsächlich nicht mehr gebraucht wird. Oftmals muss der Entwickler selbst bestimmen, an welcher Stelle die Freigabe eines Speicherbereichs erfolgen soll.

+
+
Höhere Programmiersprachen setzten häufig eine Softwarekomponente namens Garbage Collector ein, dessen Aufgabe darin besteht, die Speicherallokation zu überwachen und nicht mehr benötigten Speicher wieder freizugeben. Dieser Prozess basiert auf einer Abschätzung, da das zugrundeliegende Problem - zu entscheiden, wann Speicher nicht mehr benötigt wird - unentscheidbar ist (nicht durch einen Algorithmus lösbar).

+
+
Garbage Collection

+
+
Wie oben schon erwähnt, gibt es keine eindeutige Lösung für das zugrunde liegende Problem. Aus diesem Grund implementieren Garbage Collections einen beschränkten Algorithmus. Dieser Abschnitt liefert Informationen zum Verständnis der wichtigsten Algorithmen der Garbage Collection und deren Beschränkungen.

+
+
Referenzen

+
+
Der Grundgedanke auf dem Garbage Collection-Algorithmen hauptsächlich basieren, ist die Idee der Referenz. Im Zusammenhang mit der Speicherverwaltung spricht man davon, dass ein Objekt ein anderes Objekt referenziert, wenn ersteres (entweder implizit oder explizit) Zugriff auf letzteres hat. Zum Beispiel hat ein JavaScript-Objekt eine Referenz auf dessen Prototype (implizite Referenz) und dessen Eigenschaftswerte (explizite Referenz).

+
+
In diesem Kontext wird also der Begriff Objekt etwas breiter aufgefasst, als im Zusammenhang mit JavaScript-Objekten und beinhaltet außerdem auch Sichtbarkeitsbereiche von Funktionen (bzw. den globalen Sichtbarkeitsbereich).

+
+
Referenzzählung der Garbage Collection

+
+
Dies ist der naivste Algorithmus der Garbage Collection. Er reduziert einfach "ein Objekt wird nicht mehr benötigt" auf "kein anderes Objekt referenziert auf das Objekt". Ein Objekt wird also dann von der Garbage Collection entsorgt, wenn keine Referenzen auf das Objekt existieren.

+
+
Beispiel

+
+
var o = {
+  a: {
+    b:2
+  }
+}; // 2 Objekte wurden erstellt. Das eine referenziert auf das andere als dessen Eigenschaft.
+// Das Objekt a wird referenziert, weil es der Variablen o zugewiesen wurde.
+// Da auf alle Objekte irgendwie referenziert wird, kann keines entsogt werden
+
+var o2 = o; // Die Variable 'o2' ist das zweite Objekt mit einer Referenz auf das Objekt
+o = 1; // nun hat das Objekt, das sich ursprünglich in o befand eine einzige Referenz durch 'o2'
+
+var oa = o2.a; // Referenz auf die Eigenschaft 'a' des Objekts.
+// Nun hat das Objekt 2 Referenzen: Eine als Eigenschaft, die andere als Variable 'oa'
+
+o2 = "yo"; // Das objekt, welches sich anfangs in 'o' befand hat nun keine Referenzen mehr
+// und kann von der Garbage Collection entsorgt werden.
+// Jedoch wird die Eigenschaft 'a' noch immer durch die Variable 'oa' referenziert und kann daher nicht freigegeben werden
+
+oa = null; // Nun existieren keine Refrenzen mehr auf die Eigenschaft 'a'
+// und das Objekt kann entsorgt werden.
+

+
+
Beschränkung: gegenseitige Referenzen

+
+
Dieser naive Algorithmus ist deshalb beschränkt, weil Objekte, die gegenseitig aufeinender referenzieren, gar nicht mehr benötigt werden könnten, aber nicht entsorgt werden dürfen, da noch auf sie referenziert wird.

+
+
function f(){
+  var o = {};
+  var o2 = {};
+  o.a = o2; // o referenziert o2
+  o2.a = o; // o2 referenziert o
+
+  return "azerty";
+}
+
+f();
+// die Objekte werden erzeugt und referenzieren gegenseitig aufeinander.
+// Sie werden außerhalb des Sichtbarkeitsbereichs der Funktion nicht verwendet
+// und könnten daher nach der Funktionsausführung freigegeben werden
+// Der Referenzzählungsalgorithmus erkennt jedoch nur, dass auf beide Objekte
+// noch referenziert wird und entsorgt daher keines der beiden
+

+
+
Praxisbeispiel

+
+
Bei Internet Explorer 6, 7 ist bekannt, dass sie einen Garbage Collector mit Referenzzählung für DOM-Objekte einsetzen. Es gibt daher ein bekanntes Muster für die systematische Erzeugung von Speicherlecks:

+
+
var div = document.createElement("div");
+div.onclick = function(){
+  doSomething();
+}; // Das div hat eine Referenz über die Event-Handler-Eigenschaft 'onclick'.
+// Der Handler hat auch eine Referenz auf das div, da die div-Variable
+// innerhalb Sichtbarkeitsbereich der Funktion ansprechbar ist.
+// Dieser Kreislauf sorgt dafür, dass beide Objekte nicht entsorgt werden
+// und ein Speicherleck entsteht
+

+
+
Mark-and-Sweep-Algorithmus

+
+
Dieser Algorithmus reduziert die Definition "ein Objekt wird nicht mehr gebraucht" auf "ein Objekt ist nicht erreichbar".

+
+
Der Algorithmus nimmt an, dass ein Satz von root-Objekten (bei JavaScript das globale Objekt) existiert. Der Algorithmus sucht dann von diesen Anfangsobjekten aus alle referenzierten Objekte, dann von den referenzierten Objekten alle Objekte, die auf andere Objekte referenzieren und so weiter. Auf diese Weise erkennt der Algorithmus alle erreichbaren Objekte und sammelt alle unerreichbaren Objekte.

+
+
Dieser Algorithmus ist besser als der vorherige, da Objekte, die nicht referenziert sind als unerreichbar gelten, jedoch Objekte, die unerreichbar sind, nicht unbedingt keine Referenzen haben (gegenseitige Referenz).

+
+
Im Jahr 2012 arbeiten alle modernen Browser mit einem Mark-and-Sweep-Garbage Collector. Alle Verbesserungen der letzen Jahre im Bereich der Garbage Collection bei JavaScript (generational/incremental/concurrent/parallel garbage collection) sind Verbesserungen der Implementierung des Algorithmus, jedoch keine Änderungen des Algorithmus selbst oder der Definition von "ein Objekt wird nicht mehr gebraucht".

+
+
Gegenseitige Verweise stellen kein Problem mehr dar

+
+
Bei dem Beispiel oben zu gegenseitigen Verweisen wird auf die beiden Objekte nicht mehr von einem Objekt aus verwiesen, welches über das globale Objekt erreichbar ist. Daher werden sie vom Garbage Collector als unerreichbar angesehen.

+
+
Dasselbe gilt für das nächste Beispiel. Sobald das div und der Handler unerreichbar geworden sind, werden sie vom Gabage Collector entsorgt, obwohl sie noch gegenseitig aufeinander verweisen.

+
+
Einschränkung: Objekte müssen explizit unerreichbar gemacht werden

+
+
Obwohl dies als Einschränkung gilt, gibt es in der Praxis kaum solche Situationen und deshalb denkt kaum jemand über die Garbage Collection nach.

+
+
Weitere Informationen

+
+
diff --git a/files/de/web/javascript/reference/classes/constructor/index.html b/files/de/web/javascript/reference/classes/constructor/index.html
new file mode 100644
index 0000000000..5ab83ddcd5
--- /dev/null
+++ b/files/de/web/javascript/reference/classes/constructor/index.html
@@ -0,0 +1,165 @@
+---
+title: Konstruktor
+slug: Web/JavaScript/Reference/Klassen/constructor
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Klassen
+translation_of: Web/JavaScript/Reference/Classes/constructor
+---
+
{{jsSidebar("Classes")}}

+
+
Die constructor Methode ist eine spezielle Methode für das erzeugen und initialisieren von Objekten, die mit dem Schlüsselwort class erzeugt wurden.

+
+
Syntax

+
+
constructor([Argumente]) { ... }

+
+
Beschreibung

+
+
In einer Klasse kann es nur eine Methode mit dem Namen "constructor" geben. Eine {{jsxref("SyntaxError")}} Fehlermeldung wird geworfen, wenn in einer Klasse die constructor Methode mehr als einmal vorhanden ist.

+
+
Die constructor Methode kann mit dem Schlüsselwort super die constructor Methode der Eltern-Klasse aufrufen.

+
+
Wenn man keine constructor Methode erzeugt, wird eine Standardkonstruktor verwendet.

+
+
Beispiele

+
+
Verwendung der constructor Methode

+
+
Dieser Quellcode Ausschnitt wurden vom  classes Beispiel (live Demo) übernommen.

+
+
class Square extends Polygon {
+  constructor(length) {
+    // Hier wird die constructor Methode der Eltern-Klasse aufgerufen,
+    // für die Parameter width und height wurde der übergebene length Parameter verwendet
+    super(length, length);
+    // Anmerkung: In abgeleiteten Klassen, muss die super() Methode aufgerufen werden,
+    // bevor man das 'this' Objekt verwenden kann, da es sonst zu einen Referenz Fehler kommt
+    this.name = 'Square';
+  }
+
+  get area() {
+    return this.height * this.width;
+  }
+
+  set area(value) {
+    this.area = value;
+  }
+}

+
+
Standardkonstruktoren

+
+
Wenn man keine constructor Methode anlegt, wird eine Standardkonstruktor verwendet. Für Basis Klassen ist der Standard Konstruktor:

+
+
constructor() {}
+

+
+
Für vererbte Klassen, ist das der Standardkonstruktor:

+
+
constructor(...args) {
+  super(...args);
+}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('ES2015', '#sec-static-semantics-constructormethod', 'Constructor Method')}}{{Spec2('ES2015')}}Initiale Definition.
{{SpecName('ESDraft', '#sec-static-semantics-constructormethod', 'Constructor Method')}}{{Spec2('ESDraft')}} 

+
+
Browserkompatibilität

+
+
{{CompatibilityTable}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(42.0)}}{{CompatGeckoDesktop(45)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Default constructors{{CompatUnknown}}{{CompatGeckoDesktop(45)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+   
+   
+  
+ 
+
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatChrome(42.0)}}{{CompatGeckoMobile(45)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(42.0)}}
Default constructors{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(45)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}

+

+
+
Siehe auch

+
+
diff --git a/files/de/web/javascript/reference/classes/extends/index.html b/files/de/web/javascript/reference/classes/extends/index.html
new file mode 100644
index 0000000000..29ed8c5e78
--- /dev/null
+++ b/files/de/web/javascript/reference/classes/extends/index.html
@@ -0,0 +1,172 @@
+---
+title: Erweitern
+slug: Web/JavaScript/Reference/Klassen/extends
+tags:
+  - Classes
+  - ECMAScript 2015
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Classes/extends
+---
+
{{jsSidebar("Classes")}}

+
+
Das extends Schlüsselwort wird in einer Klassendeklaration oder in einem Klassenausdruck verwendet, um eine, von einer anderen Klasse, abgeleitete Klasse zu erzeugen.

+
+
Syntax

+
+
class KindKlasse extends ElternKlasse { ... }

+
+
Beschreibung

+
+
Das Schlüsselwort extends kann verwendet werden, um von selbst erstellen Klassen als auch von standardmäßig eingebaute Objekte abzuleiten.

+
+
Das prototype Objekt, des zu erweiternden Objekt, muss entweder von Typ {{jsxref("Object")}} oder{{jsxref("null")}} sein.

+
+
Beispiele

+
+
Verwendung von extends

+
+
Das erste Beispiel erzeugt einen Klasse mit dem Namen Square, die von der Klasse Polygon abgeleitet ist. Dieses Beispiel wurde aus dieser live Demo (Quellcode) entnommen.

+
+
class Square extends Polygon {
+  constructor(length) {
+    // Hier wird die constructor Methode der Eltern-Klasse aufgerufen,
+    // für die Parameter width und height wurde der übergebene length Parameter verwendet
+    super(length, length);
+    // Anmerkung: In abgeleiteten Klassen, muss die super() Methode aufgerufen werden,
+    // bevor man das 'this' Objekt verwenden kann, da es sonst zu einen Referenz Fehler kommt
+    this.name = 'Square';
+  }
+
+  get area() {
+    return this.height * this.width;
+  }
+
+  set area(value) {
+    this.height = this.width = Math.sqrt(value);
+    this.area = value;
+  }
+}

+
+
Verwendung mit standardmäßig eingebautem Objekt

+
+
In diesem Beispiel wird das standardmäßig eingebaute {{jsxref("Date")}} Objekt erweitert. Dieses Beispiel wurde aus dieser live Demo (Quellcode) entnommen.

+
+
class myDate extends Date {
+  constructor() {
+    super();
+  }
+
+  getFormattedDate() {
+    var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
+    return this.getDate() + "-" + months[this.getMonth()] + "-" + this.getFullYear();
+  }
+}

+
+
Ableiten von null

+
+
Das Ableiten von {{jsxref("null")}} funktioniert genauso wie mit jeder anderen Klasse, mit der Ausnahme, dass das prototype Objekt nicht von {{jsxref("Object.prototype")}} abgeleitet ist.

+
+
class nullExtends extends null {
+  constructor() {}
+}
+
+Object.getPrototypeOf(nullExtends); // Function.prototype
+Object.getPrototypeOf(nullExtends.prototype) // null

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('ES2015', '#sec-class-definitions', 'extends')}}{{Spec2('ES2015')}}Initiale Definition.
{{SpecName('ESDraft', '#sec-class-definitions', 'extends')}}{{Spec2('ESDraft')}}

+
+
Browserkompatibilität

+
+
{{CompatibilityTable}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(42.0)}}{{CompatGeckoDesktop(45)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Array subclassing{{CompatChrome(43.0)}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+   
+  
+ 
+
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatGeckoMobile(45)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(42.0)}}
Array subclassing{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(43.0)}}

+

+
+
Siehe auch

+
+
diff --git a/files/de/web/javascript/reference/classes/index.html b/files/de/web/javascript/reference/classes/index.html
new file mode 100644
index 0000000000..81bec0651a
--- /dev/null
+++ b/files/de/web/javascript/reference/classes/index.html
@@ -0,0 +1,376 @@
+---
+title: Klassen
+slug: Web/JavaScript/Reference/Klassen
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Klassen
+  - Konstruktor
+  - Vererbung
+translation_of: Web/JavaScript/Reference/Classes
+---
+
{{JsSidebar("Classes")}}

+
+
JavaScript Klassen, eingeführt in ECMAScript 2015, sind syntaktischer Zucker für das bestehende, auf Prototypen basierende, Vererbungsmodell von JavaScript. Diese Syntaxerweiterung führt kein neues OOP-Modell in die Sprache ein. JS Klassen ermöglichen es, mit klarer und verständlicher Syntax Objekte zu erstellen und Vererbung in Javascript zu realisieren.

+
+
Klassendefinition

+
+
Klassen sind eigentlich Funktionen. Analog zu Funktionsausdrücken und Funktionsdeklarationen hat die Klassensyntax zwei Komponenten:

+
+
    
+ 
  • Klassenausdrücke und
    • 
+ 
  • Klassendeklarationen.
    • 
+

+
+
Klassendeklaration

+
+
Eine Möglichkeit, Klassen zu definieren ist eine Klassendeklaration. Diese wird eingeleitet durch das Schlüsselwort class, gefolgt vom Namen der Klasse (hier: "Rectangle").

+
+
class Rectangle {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+}

+
+
Hoisting

+
+
Ein wichtiger Unterschied zwischen Klassen- und Funktionsdeklarationen besteht im sogenannten {{Glossary("Hoisting")}}. Funktionsdeklarationen werden an den Anfang des Definitionsbereichs "gehoben", für Klassen gilt dies nicht. Das heißt, um auf eine Klasse zuzugreifen, muss sie zuvor definiert worden sein, sonst führt dies zu einem {{jsxref("ReferenceError")}}:

+
+
var p = new Polygon(); // ReferenceError
+
+class Polygon {}
+

+
+
Klassenausdruck

+
+
Ein Klassenausdruck ist eine weitere Möglichkeit eine Klasse zu definieren. Dabei ist es optional, hinter dem Schlüsselwort class einen Namen anzugeben. Sollte ein Name angegeben werden, so gilt dieser nur innerhalb des Klassenkörpers.

+
+
// unnamed
+var Polygon = class {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+};
+
+// named
+var Polygon = class Polygon {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+};
+

+
+
Klassenkörper und Methodendefinitionen

+
+
Der Körper der Klasse ist innerhalb der beiden geschweiften Klammern {}. Hier werden die Eigenschaften der Klasse definiert, wie Konstruktoren oder Methoden.

+
+
"Strict mode"

+
+
Der Inhalt der Klassendeklaration und des Klassenausdrucks werden im "strikten Modus" ausgeführt.

+
+
Konstruktor

+
+
Die Konstruktor-Methode ist eine spezielle Methode, um Objekte zu erzeugen und zu initialisieren. Eine Klasse kann nur eine spezielle Methode mit dem Namen "constructor" haben. Sollte es in einer Klasse mehrere "constructor"-Methoden geben, wird ein {{jsxref("SyntaxError")}} geworfen.

+
+
In der Konstruktor-Methode kann man mit dem Schlüsselwort "super", den Konstruktor der Elternklasse aufrufen.

+
+
Prototype Methoden

+
+
Siehe auch Methodendefinitionen.

+
+
class Polygon {
+  constructor(hoehe, breite) {
+    this.hoehe = hoehe;
+    this.breite = breite;
+  }
+
+  get flaeche() {
+    return this.berechneFlaeche();
+  }
+
+  berechneFlaeche() {
+    return this.hoehe * this.breite;
+  }
+}
+
+const quadrat = new Polygon(10, 10);
+
+console.log(quadrat.flaeche);

+
+
Statische Methoden

+
+
Das Schlüsselwort static definiert statische Methoden. Statische Methoden werden ohne Instanzierung einer Klasse aufgerufen und sind über eine erzeugte Instanz nicht aufrufbar. Oft werden in Applikationen statische Methoden für Hilfsfunktionen verwendet.

+
+
class Punkt {
+    constructor(x, y) {
+        this.x = x;
+        this.y = y;
+    }
+
+    static laenge(a, b) {
+        const dx = a.x - b.x;
+        const dy = a.y - b.y;
+
+        return Math.sqrt(dx*dx + dy*dy);
+    }
+}
+
+const p1 = new Punkt(5, 5);
+const p2 = new Punkt(10, 10);
+
+console.log(Punkt.laenge(p1, p2));

+
+
Boxing with prototype and static methods

+
+
Wird eine statische oder eine prototype-Methode aufgerufen, ohne dass ein Objekt in der Variable "this" liegt (oder mit "this" als Wahrheitswert, Zeichenkette, Nummer, undefiniert oder null), dann wird die Variable "this" im Funktionskörper undefined sein. Autoboxing wird nicht passieren. Das Verhalten wird das gleiche sein, sollte der Code nicht im "strict mode" geschrieben worden sein.

+
+
class Tier {
+  sprich() {
+    return this;
+  }
+  static iss() {
+    return this;
+  }
+}
+
+let obj = new Tier();
+let sprich = obj.sprich;
+sprich(); // undefined
+
+let iss = Tier.iss;
+iss(); // undefined

+
+
Falls wir den vorherigen Quelltext mit klassischen funktionsbasierten Klassen schreiben, wird Autoboxing stattfinden. Dies wird auf dem Wert passieren, der für "this" an die Funktion übergeben wurde.

+
+
function Tier() { }
+
+Tier.prototype.sprich = function() {
+  return this;
+}
+
+Tier.iss = function() {
+  return this;
+}
+
+let obj = new Tier();
+let sprich = obj.sprich;
+sprich(); // Globales Objekt
+
+let iss = Tier.iss;
+iss(); // Globales Objekt

+
+
Vererbung mittels extends

+
+
Das Schlüsselwort extends wird dafür verwendet, Klassendeklarationen und Klassenausdrücke zu erzeugen, die von einer anderen Klasse ableiten.

+
+
class Tier{
+  constructor(name) {
+    this.name = name;
+  }
+
+  sprich() {
+    console.log(this.name + ' macht ein Geräusch.');
+  }
+}
+
+class Hund extends Tier{
+  sprich() {
+    console.log(this.name + ' bellt.');
+  }
+}
+
+var h = new Hund('Wolfi');
+h.sprich();
+

+
+
Existiert in der Unterklasse ein Konstruktor, muss dieser zuerst super() aufrufen, bevor "this" verwendet werden kann.

+
+
Man kann auch traditionelle funktionsbasierte Klassen erweitern:

+
+
function Tier(name) {
+  this.name = name;
+}
+Tier.prototype.sprich = function () {
+  console.log(this.name + ' macht ein Geräusch.');
+}
+
+class Hund extends Tier {
+  sprich() {
+    super.sprich();
+    console.log(this.name + ' bellt.');
+  }
+}
+
+var h = new Hund('Wolfi');
+h.sprich();

+
+
Klassen können nicht von regulären (nicht konstruierbaren) Objekten erben. Falls von einem regulärem Objekt geerbt werden soll, kann {{jsxref("Object.setPrototypeOf()")}} verwendet werden:

+
+
var Tier = {
+  sprich() {
+    console.log(this.name + ' macht ein Geräusch.');
+  }
+};
+
+class Hund {
+  constructor(name) {
+    this.name = name;
+  }
+  sprich() {
+    console.log(this.name + ' bellt.');
+  }
+}
+
+Object.setPrototypeOf(Hund.prototype, Tier);
+
+var h = new Hund('Wolfi');
+h.sprich();

+
+
Species

+
+
Falls man zum Beispiel in einer selbst erzeugten Klasse MyArray den Konstruktor mit dem Konstruktor der {{jsxref("Array")}} Klasse überschreiben will, kann man dies mittels des species Musters erreichen.

+
+
Zum Beispiel, wenn man die {{jsxref("Array.map", "map()")}} Methode aufruft, wird der Default-Konstruktor der Klasse aufgerufen. Will man, dass stattdessen der Konstruktor der Elternklasse benutzt wird, kann man das {{jsxref("Symbol.species")}}-Symbol dafür verwenden:

+
+
class MyArray extends Array {
+  // Überschreibt species mit dem Konstruktor der Array-Klasses
+  static get [Symbol.species]() { return Array; }
+}
+var a = new MyArray(1,2,3);
+var mapped = a.map(x => x * x);
+
+console.log(mapped instanceof MyArray); // false
+console.log(mapped instanceof Array);   // true

+
+
Elternklasse Methoden mit super aufrufen

+
+
Das Schlüsselwort super kann verwendet werden, um Methoden der Elternklassen aufzurufen

+
+
class Katze{
+  constructor(name) {
+    this.name = name;
+  }
+
+  sprich() {
+    console.log(this.name + ' macht ein Geräusch.');
+  }
+}
+
+class Loewe extends Katze {
+  sprich() {
+    super.sprich();
+    console.log(this.name + ' brüllt.');
+  }
+}

+
+
Mix-ins

+
+
Abstrakte Subklassen oder mix-ins sind Vorlagen für Klassen. Eine ECMAScript-Klasse kann nur von einer einzigen Klasse ableiten, damit ist beispielsweise mehrfache Vererbung von Helferklassen nicht möglich. Die gewünschte Funktionalität muss von der Elternklasse bereitgestellt werden.

+
+
Eine Funktion die als Input eine Elternklasse nimmt und als Output eine davon abgeleitete Subklasse ausgibt, kann verwendet werden, um mix-ins in ECMAScript zu erzeugen:

+
+
var RechnerMixin = Base => class extends Base {
+  rechne() { }
+};
+
+var ZufallsGeneratorMixin = Base => class extends Base {
+  generiere() { }
+};

+
+
Eine Klasse die ein solches mix-in verwendet kann so erzeugt werden:

+
+
class Foo { }
+class Bar extends RechnerMixin(ZufallsGeneratorMixin(Foo)) { }

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ES2015')}}Ursprüngliche Definition.
{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ESDraft')}} 

+
+
Browserkompatibilität

+
+
{{CompatibilityTable}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+   
+  
+ 
+
FeatureChromeFirefox (Gecko)EdgeInternet ExplorerOperaSafari
Basic support{{CompatChrome(42.0)}}[1]

+    {{CompatChrome(49.0)}}		{{CompatGeckoDesktop(45)}}13{{CompatNo}}{{CompatNo}}{{CompatSafari(9.0)}}

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+   
+  
+ 
+
FunktionAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome für Android
Basis Unterstützung{{CompatNo}}{{CompatGeckoMobile(45)}}{{CompatUnknown}}{{CompatUnknown}}9{{CompatChrome(42.0)}}[1]

+    {{CompatChrome(49.0)}}

+

+
+
[1] Benötigt den strikten Modus. Der Support im nicht-strikte Modus verbirgt sich hinter der Flag "Experimentelle JavaScript-Funktionen", welche standardmäßig deaktiviert ist.

+
+
Siehe auch

+
+
diff --git a/files/de/web/javascript/reference/classes/static/index.html b/files/de/web/javascript/reference/classes/static/index.html
new file mode 100644
index 0000000000..9c13048498
--- /dev/null
+++ b/files/de/web/javascript/reference/classes/static/index.html
@@ -0,0 +1,136 @@
+---
+title: Statische Methoden
+slug: Web/JavaScript/Reference/Klassen/static
+tags:
+  - Classes
+  - ECMAScript 2015
+  - JavaScript
+  - Static
+translation_of: Web/JavaScript/Reference/Classes/static
+---
+
{{jsSidebar("Classes")}}

+
+
Das static Schüsselwort definiert statische Methoden für eine Klasse.

+
+
{{EmbedInteractiveExample("pages/js/classes-static.html")}}

+
+
+
+
Syntax

+
+
static methodenName() { ... }

+
+
Beschreibung

+
+
Statische Methoden werden ohne Instanzierung einer Klasse aufgerufen und sind über eine erzeugte Instanz nicht aufrufbar. Oft werden in statische Methoden für Hilfsfunktionen verwendet.

+
+
Aufruf von statischen Methoden

+
+
Von einer anderen statischen Methode

+
+
Um eine statische Methode aus einer anderen statischen Methode der gleichen Klasse aufzurufen, kann das this Schlüsselwort verwendet werden.

+
+
class StaticMethodCall {
+    static staticMethod() {
+        return 'Static method has been called';
+    }
+    static anotherStaticMethod() {
+        return this.staticMethod() + ' from another static method';
+    }
+}
+StaticMethodCall.staticMethod();
+// 'Static method has been called'
+
+StaticMethodCall.anotherStaticMethod();
+// 'Static method has been called from another static method'

+
+
Für Klassenkonstruktoren und anderen Methoden

+
+
Statische Methoden sind mit dem this Schlüsselwort nicht direkt erreichbar von nicht statischen Methoden. Man kann sie mit dem Klassennamen aufrufen: KLASSENNAME.STATISCH_METHODE_NAME oder mit der Aufrufen einer Eigenschaft von constructor: this.constructor.STATISCH_METHODE_NAME.

+
+
class StaticMethodCall{
+    constructor(){
+        console.log(StaticMethodCall.staticMethod());
+        // 'static method has been called'
+
+        console.log(this.constructor.staticMethod());
+        // 'static method has been called'
+    }
+
+    static  staticMethod(){
+        return 'static method has been called.';
+    }
+}

+
+
Beispiele

+
+
Das folgende Beispiel demonstriert mehrere Dinge:

+
+
    
+ 
  1. Wie eine statische Methode in einer Klasse implementiert wird.
    2. 
+ 
  2. Das von einer Klasse mit statischen Eigenschaften geerbt werden kann.
    3. 
+ 
  3. Wie eine statische Methode aufgerufen werden kann und wie nicht.
    4. 
+

+
+
class Triple {
+  static triple(n) {
+    if (n === undefined) {
+      n = 1;
+    }
+    return n * 3;
+  }
+}
+
+class BiggerTriple extends Triple {
+  static triple(n) {
+    return super.triple(n) * super.triple(n);
+  }
+}
+
+console.log(Triple.triple());        // 3
+console.log(Triple.triple(6));       // 18
+
+var tp = new Triple();
+
+console.log(BiggerTriple.triple(3));
+// 81 (not affected by parent's instantiation)
+
+console.log(tp.triple());
+// 'tp.triple is not a function'.
+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ES2015')}}Initiale Definition.
{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ESDraft')}} 

+
+
Browserkompatibilität

+
+
+
+
{{Compat("javascript.classes.static")}}

+
+
Siehe auch

+
+
diff --git a/files/de/web/javascript/reference/deprecated_and_obsolete_features/index.html b/files/de/web/javascript/reference/deprecated_and_obsolete_features/index.html
new file mode 100644
index 0000000000..412bddc553
--- /dev/null
+++ b/files/de/web/javascript/reference/deprecated_and_obsolete_features/index.html
@@ -0,0 +1,291 @@
+---
+title: Veraltete und abgeschaffte Features
+slug: Web/JavaScript/Reference/Veraltete_und_abgeschaffte_Features
+translation_of: Web/JavaScript/Reference/Deprecated_and_obsolete_features
+---
+
{{JsSidebar("More")}}

+
+
Diese Seite listet die Features JavaScriptes auf, die veraltet sind( das bedeutet, dass noch benutzbar, aber Entfernung geplant) und abgeschafft sind( das bedeutet: nicht länger benutzbar).

+
+
Veraltete Features

+
+
Diese veralteten Features können noch benutzt werden, aber sollten mit Vorsicht benutzt werden, da erwartet wird, dass sie in Futura endgültig abgeschafft werden. Man sollte daran arbeiten, sie von seinem Code zu entfernen.

+
+
RegExp-Eigenschaften

+
+
The following properties are deprecated. This does not affect their use in {{jsxref("String.replace", "replacement strings", "", 1)}}:

+
+
+ 
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
PropertyDescription
{{jsxref("RegExp.n", "$1-$9")}}
+    
Parenthesized substring matches, if any.

+     Warning: Using these properties can result in problems, since browser extensions can modify them. Avoid them!

+   
{{jsxref("RegExp.input", "$_")}}See input.
{{jsxref("RegExp.multiline", "$*")}}See multiline.
{{jsxref("RegExp.lastMatch", "$&")}}See lastMatch.
{{jsxref("RegExp.lastParen", "$+")}}See lastParen.
{{jsxref("RegExp.leftContext", "$`")}}See leftContext.
{{jsxref("RegExp.rightContext", "$'")}}See rightContext.
{{jsxref("RegExp.input", "input")}}The string against which a regular expression is matched.
{{jsxref("RegExp.lastMatch", "lastMatch")}}The last matched characters.
{{jsxref("RegExp.lastParen", "lastParen")}}The last parenthesized substring match, if any.
{{jsxref("RegExp.leftContext", "leftContext")}}The substring preceding the most recent match.
{{jsxref("RegExp.rightContext", "rightContext")}}The substring following the most recent match.

+
+
The following are now properties of RegExp instances, no longer of the RegExp object:

+
+
+ 
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
PropertyDescription
{{jsxref("RegExp.global", "global")}}Whether or not to test the regular expression against all possible matches in a string, or only against the first.
{{jsxref("RegExp.ignoreCase", "ignoreCase")}}Whether or not to ignore case while attempting a match in a string.
{{jsxref("RegExp.lastIndex", "lastIndex")}}The index at which to start the next match.
{{jsxref("RegExp.multiline", "multiline")}}Whether or not to search in strings across multiple lines.
{{jsxref("RegExp.source", "source")}}The text of the pattern.

+
+
RegExp methods

+
+
    
+ 
  • The {{jsxref("RegExp.compile", "compile()")}} method is deprecated.
    • 
+ 
  • The valueOf method is no longer specialized for RegExp. Use {{jsxref("Object.valueOf()")}}.
    • 
+

+
+
Function properties

+
+
    
+ 
  • The {{jsxref("Global_Objects/Function/caller", "caller")}} and {{jsxref("Global_Objects/Function/arguments", "arguments")}} properties are deprecated, because they leak the function caller. Instead of the arguments property, you should use the {{jsxref("Functions/arguments", "arguments")}} object inside function closures.
    • 
+

+
+
Legacy generator

+
+
    
+ 
  • {{jsxref("Statements/Legacy_generator_function", "Legacy generator function statement")}} and {{jsxref("Operators/Legacy_generator_function", "Legacy generator function expression")}} are deprecated. Use {{jsxref("Statements/function*", "function* statement")}} and {{jsxref("Operators/function*", "function* expression")}} instead.
    • 
+ 
  • {{jsxref("Operators/Array_comprehensions", "JS1.7/JS1.8 Array comprehension", "#Differences_to_the_older_JS1.7.2FJS1.8_comprehensions")}} and {{jsxref("Operators/Generator_comprehensions", "JS1.7/JS1.8 Generator comprehension", "#Differences_to_the_older_JS1.7.2FJS1.8_comprehensions")}} are deprecated.
    • 
+

+
+
Iterator

+
+
    
+ 
  • {{jsxref("Global_Objects/StopIteration", "StopIteration")}} is deprecated.
    • 
+ 
  • {{jsxref("Global_Objects/Iterator", "Iterator")}} is deprecated.
    • 
+

+
+
Object methods

+
+
    
+ 
  • {{jsxref("Object.watch", "watch")}} and {{jsxref("Object.unwatch", "unwatch")}} are deprecated. Use {{jsxref("Proxy")}} instead.
    • 
+ 
  • __iterator__ is deprecated.
    • 
+ 
  • {{jsxref("Object.noSuchMethod", "__noSuchMethod__")}} is deprecated. Use {{jsxref("Proxy")}} instead.
    • 
+

+
+
Date methods

+
+
    
+ 
  • {{jsxref("Global_Objects/Date/getYear", "getYear")}} and {{jsxref("Global_Objects/Date/setYear", "setYear")}} are affected by the Year-2000-Problem and have been subsumed by {{jsxref("Global_Objects/Date/getFullYear", "getFullYear")}} and {{jsxref("Global_Objects/Date/setFullYear", "setFullYear")}}.
    • 
+ 
  • You should use {{jsxref("Global_Objects/Date/toISOString", "toISOString")}} instead of the deprecated {{jsxref("Global_Objects/Date/toGMTString", "toGMTString")}} method in new code.
    • 
+ 
  • {{jsxref("Global_Objects/Date/toLocaleFormat", "toLocaleFormat")}} is deprecated.
    • 
+

+
+
Functions

+
+
    
+ 
  • {{jsxref("Operators/Expression_closures", "Expression closures", "", 1)}} are deprecated. Use regular {{jsxref("Operators/function", "functions")}} or {{jsxref("Functions/Arrow_functions", "arrow functions", "", 1)}} instead.
    • 
+

+
+
Proxy

+
+
    
+ 
  • Proxy.create and Proxy.createFunction are deprecated. Use {{jsxref("Proxy")}} instead.
    • 
+ 
  • The following traps are obsolete:
+  
      
+   
    • hasOwn ({{bug(980565)}}, Firefox 33).
      • 
+   
    • getEnumerablePropertyKeys ({{bug(783829)}}, Firefox 37)
      • 
+   
    • getOwnPropertyNames ({{bug(1007334)}}, Firefox 33)
      • 
+   
    • keys ({{bug(1007334)}}, Firefox 33)
      • 
+  
    
+ 
    • 
+

+
+
let

+
+
    
+ 
  • {{jsxref("Statements/let", "let blocks", "#let_block")}} and {{jsxref("Statements/let", "let expressions", "#let_expressions")}} are deprecated.
    • 
+

+
+
Escape sequences

+
+
    
+ 
  • Octal escape sequences (\ followed by one, two, or three octal digits) are deprecated in string and regular expression literals.
    • 
+ 
  • The {{jsxref("Global_Objects/escape", "escape")}} and {{jsxref("Global_Objects/unescape", "unescape")}} functions are deprecated. Use {{jsxref("Global_Objects/encodeURI", "encodeURI")}}, {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}}, {{jsxref("Global_Objects/decodeURI", "decodeURI")}} or {{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent")}} to encode and decode escape sequences for special characters.
    • 
+

+
+
String methods

+
+
    
+ 
  • HTML wrapper methods like {{jsxref("String.prototype.fontsize")}} and {{jsxref("String.prototype.big")}}.
    • 
+ 
  • {{jsxref("String.prototype.quote")}} is removed from Firefox 37.
    • 
+ 
  • non standard flags parameter in {{jsxref("String.prototype.search")}}, {{jsxref("String.prototype.match")}}, and {{jsxref("String.prototype.replace")}} are deprecated.
    • 
+

+
+
Obsolete features

+
+
These obsolete features have been entirely removed from JavaScript and can no longer be used as of the indicated version of JavaScript.

+
+
Object

+
+
+ 
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
PropertyDescription
{{jsxref("Global_Objects/Object/count", "__count__")}}Returns the number of enumerable properties directly on a user-defined object.
{{jsxref("Global_Objects/Object/Parent", "__parent__")}}Points to an object's context.
{{jsxref("Global_Objects/Object/eval", "Object.prototype.eval()")}}Evaluates a string of JavaScript code in the context of the specified object.
{{jsxref("Object.observe()")}}Asynchronously observing the changes to an object.
{{jsxref("Object.unobserve()")}}Remove observers.
{{jsxref("Object.getNotifier()")}}Creates an object that allows to synthetically trigger a change.

+
+
Function

+
+
+ 
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
PropertyDescription
{{jsxref("Global_Objects/Function/arity", "arity")}}Number of formal arguments.

+
+
Array

+
+
+ 
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
PropertyDescription
{{jsxref("Array.observe()")}}Asynchronously observing changes to Arrays.
{{jsxref("Array.unobserve()")}}Remove observers.

+
+
Number

+
+
    
+ 
  • {{jsxref("Number.toInteger()")}}
    • 
+

+
+
ParallelArray

+
+
    
+ 
  • {{jsxref("ParallelArray")}}
    • 
+

+
+
Statements

+
+
    
+ 
  • {{jsxref("Statements/for_each...in", "for each...in")}} is deprecated. Use {{jsxref("Statements/for...of", "for...of")}} instead.
    • 
+ 
  • Destructuring {{jsxref("Statements/for...in", "for...in")}} is deprecated. Use {{jsxref("Statements/for...of", "for...of")}} instead.
    • 
+

+
+
E4X

+
+
See E4X for more information.

+
+
Sharp variables

+
+
See Sharp variables in JavaScript for more information.

diff --git a/files/de/web/javascript/reference/deprecated_and_obsolete_features/the_legacy_iterator_protocol/index.html b/files/de/web/javascript/reference/deprecated_and_obsolete_features/the_legacy_iterator_protocol/index.html
new file mode 100644
index 0000000000..017dcea16a
--- /dev/null
+++ b/files/de/web/javascript/reference/deprecated_and_obsolete_features/the_legacy_iterator_protocol/index.html
@@ -0,0 +1,78 @@
+---
+title: The legacy Iterator protocol
+slug: >-
+  Web/JavaScript/Reference/Veraltete_und_abgeschaffte_Features/The_legacy_Iterator_protocol
+tags:
+  - ES2015
+  - JavaScript
+  - Obsolet
+  - next()
+  - veralteter Iterator
+translation_of: >-
+  Web/JavaScript/Reference/Deprecated_and_obsolete_features/The_legacy_Iterator_protocol
+---
+
{{jsSidebar("More")}}

+
+
Kein Standard. Das veraltete Iterator-Protokoll war ein SpiderMonkey-spezifisches Feature, welches in Firefox 58 entfernt wurde. Als Alternative werden for..of Schleifen und das iterator protocol empfohlen.

+
+
Das veraltete Iterator-Protokoll

+
+
Vor Version 26 implementierte Firefox ein anderes Iterator-Protokoll, welches dem ES2015 Iterator protocol Standard entspricht.

+
+
Ein Objekt ist ein veralteter Iterator, wenn es eine next()  Methode mit den folgenden Semantiken implementiert, welches zum Ende der Iteration {{jsxref("Global_Objects/StopIteration", "StopIteration")}} wirft.

+
+
+ 
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
PropertyValue
nextEine Funktion ohne Argumente, welche einen Wert zurückgibt.

+
+
Unterschied zwischen dem veralteten und dem ES2015 Iterator-Protokoll

+
+
    
+ 
  • Der Wert wurde direkt von der next Methode zurückgegeben, statt der Wert der value Eigenschaft eines Platzhalter-Objekts zu sein.
    • 
+ 
  • Das Ende der Iteration wurde durch das Werfen eines {{jsxref("Global_Objects/StopIteration", "StopIteration")}} Objekts ausgedrückt.
    • 
+

+
+
Einfaches Beispiel mit dem alten Protokoll

+
+
function kreiereIterator(array){
+    var nextIndex = 0;
+
+    return {
+       next: function(){
+           if(nextIndex < array.length){
+               return array[nextIndex++];
+           else
+               throw new StopIteration();
+       }
+    }
+}
+
+var it = kreiereIterator(['yo', 'ya']);
+
+console.log(it.next()); // 'yo'
+console.log(it.next()); // 'ya'
+try{
+    console.log(it.next());
+}
+catch(e){
+    if(e instanceof StopIteration){
+         // Iteration beendet.
+    }
+}
+

+
+
Siehe auch

+
+
diff --git a/files/de/web/javascript/reference/errors/already_has_pragma/index.html b/files/de/web/javascript/reference/errors/already_has_pragma/index.html
new file mode 100644
index 0000000000..d297d3fea9
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/already_has_pragma/index.html
@@ -0,0 +1,42 @@
+---
+title: 'Warning: -file- is being assigned a //# sourceMappingURL, but already has one'
+slug: Web/JavaScript/Reference/Fehler/Already_has_pragma
+tags:
+  - Error
+  - JavaScript
+  - Source maps
+  - Warning
+translation_of: Web/JavaScript/Reference/Errors/Already_has_pragma
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
Warning: -file- is being assigned a //# sourceMappingURL, but already has one.

+
+
Fehlertyp

+
+
Warnung. Die Ausführung von JavaScript wird nicht unterbrochen.

+
+
Was ist falsch gelaufen?

+
+
Eine Source Map wurde mehrere Male für eine JavaScript Quelle spezifiziert.

+
+
JavaScript Quellen sind oft kombiniert und minimiert, um diesen auf einem Server effizienter zu gestalten. Mit Source Maps ist es möglich den Quelltext, beim Debuggen, zu den originalen Quelldateien zu verfolgen. Es gibt zwei Möglichkeiten Source Maps zuzuweisen, einerseits mit einem Kommentar und andererseits mit dem setzen eines Headers in der JavaScriptdatei.

+
+
Beispiele

+
+
Setzen einer Source Map mit einem Kommentar in einer Datei:

+
+
//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map

+
+
Oder alternativ mit dem setzen eines Headers in einer JavaScriptdatei:

+
+
X-SourceMap: /path/to/file.js.map

+
+
Siehe auch

+
+
diff --git a/files/de/web/javascript/reference/errors/array_sort_argument/index.html b/files/de/web/javascript/reference/errors/array_sort_argument/index.html
new file mode 100644
index 0000000000..2826cbe4c0
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/array_sort_argument/index.html
@@ -0,0 +1,47 @@
+---
+title: 'TypeError: invalid Array.prototype.sort argument'
+slug: Web/JavaScript/Reference/Fehler/Array_sort_argument
+tags:
+  - Error
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Array_sort_argument
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
TypeError: invalid Array.prototype.sort argument (Firefox)
+

+
+
Fehlertyp

+
+
{{jsxref("TypeError")}}

+
+
Was ist falsch gelaufen?

+
+
Das Argument von {{jsxref("Array.prototype.sort()")}} erwartet entweder {{jsxref("undefined")}} oder eine Funktion, welche die Operanden vergleicht.

+
+
Beispiele

+
+
Nicht valide Fälle

+
+
[1, 3, 2].sort(5);  // TypeError
+
+var cmp = { asc: (x, y) => x >= y, dsc: (x, y) => x <= y };
+[1, 3, 2].sort(cmp[this.key] || 'asc');  // TypeError
+

+
+
Valide Fälle

+
+
[1, 3, 2].sort();   // [1, 2, 3]
+
+
+var cmp = { asc: (x, y) => x >= y, dsc: (x, y) => x <= y };
+[1, 3, 2].sort(cmp[this.key || 'asc']); // [1, 2, 3]

+
+
Siehe auch

+
+
    
+ 
  • {{jsxref("Array.prototype.sort()")}}
    • 
+

diff --git a/files/de/web/javascript/reference/errors/bad_octal/index.html b/files/de/web/javascript/reference/errors/bad_octal/index.html
new file mode 100644
index 0000000000..d021c0daa4
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/bad_octal/index.html
@@ -0,0 +1,54 @@
+---
+title: 'Warning: 08/09 is not a legal ECMA-262 octal constant'
+slug: Web/JavaScript/Reference/Fehler/Bad_octal
+tags:
+  - Errors
+  - JavaScript
+  - SyntaxError
+  - Warning
+translation_of: Web/JavaScript/Reference/Errors/Bad_octal
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
Warning: SyntaxError: 08 is not a legal ECMA-262 octal constant.
+Warning: SyntaxError: 09 is not a legal ECMA-262 octal constant.
+

+
+
Fehlertyp

+
+
Warnung. Die Ausführung von JavaScript wird nicht gestoppt.

+
+
Was ist falsch gelaufen?

+
+
Dezimalliterale können mit einer Null (0) beginnen, gefolgt von anderen Dezimalziffern. en alle Ziffern nach der führenden 0 kleiner als 8 sind, wird die Zal als Oktalzahl interpretiert. Weil das nicht der Fall ist mit 08 und 09, warnt JavaScript.

+
+
Zu beachten ist, dass Oktalliterale und oktal maskierte Sequenzen veraltet sind und eine zusätzliche Veraltungswarnung enthalten. Mit ECMAScript 6 und später wird diese Syntak mit einer führenden Null gefolgt von einem großen oder kleinen lateinischen Buschstaben "O" (0o or 0O) benutzt. Sie dazu die Seite lexical grammar für mehr Informationen.

+
+
Beispiele

+
+
Ungültige Oktalzahlen

+
+
08;
+09;
+// SyntaxError: 08 is not a legal ECMA-262 octal constant
+// SyntaxError: "0"-prefixed octal literals and octal escape sequences
+// are deprecated

+
+
Gültige Oktalzahlen

+
+
Einsatz von einer führenden Null gefolgt von dem Buchstaben "o";

+
+
0O755;
+0o644;
+

+
+
Siehe auch

+
+
diff --git a/files/de/web/javascript/reference/errors/bad_radix/index.html b/files/de/web/javascript/reference/errors/bad_radix/index.html
new file mode 100644
index 0000000000..25c473eb93
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/bad_radix/index.html
@@ -0,0 +1,61 @@
+---
+title: 'RangeError: radix must be an integer'
+slug: Web/JavaScript/Reference/Fehler/Bad_radix
+tags:
+  - Errors
+  - JavaScript
+  - RangeError
+translation_of: Web/JavaScript/Reference/Errors/Bad_radix
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
RangeError: radix must be an integer at least 2 and no greater than 36 (Firefox)
+RangeError: toString() radix argument must be between 2 and 36 (Chrome)
+

+
+
Fehlertyp

+
+
{{jsxref("RangeError")}}

+
+
Was ist falsch gelaufen?

+
+
Der optionale radix Parameter der {{jsxref("Number.prototype.toString()")}} Methode wurde spezifiziert. Dieser Wert muss eine ganze Zahl zwischen 2 und 36 sein, welche die Basis des Zahlensystems des repräsentierten Zahlwertes angibt. Zum Beispiel wird die Dezimalzahl (Basis 10) 169 im Hexadezimalsystem (Basis 16) als A9 repräsentiert.

+
+
Warum ist der Parameterwert auf 36 limitiert? Eine Basis größer als 10 nutzt als Ziffern Buchstaben; deswegen kann der Parameter nicht größer als 36 sein, weil das Lateinische Alphabet (welches im Englischen und vielen anderen Sprachen verwendet wird) nur 26 Buchstaben hat.

+
+
Die am meisten eingesetzten Basen sind:

+
+
+
+
Beispiele

+
+
Nicht valide Fälle

+
+
(42).toString(0);
+(42).toString(1);
+(42).toString(37);
+(42).toString(150);
+// You cannot use a string like this for formatting:
+(12071989).toString('MM-dd-yyyy');
+

+
+
Valide Fälle

+
+
(42).toString(2);     // "101010" (binary)
+(13).toString(8);     // "15"     (octal)
+(0x42).toString(10);  // "66"     (decimal)
+(100000).toString(16) // "186a0"  (hexadecimal)
+

+
+
Siehe auch

+
+
    
+ 
  • {{jsxref("Number.prototype.toString()")}}
    • 
+

diff --git a/files/de/web/javascript/reference/errors/bad_regexp_flag/index.html b/files/de/web/javascript/reference/errors/bad_regexp_flag/index.html
new file mode 100644
index 0000000000..5bf381da53
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/bad_regexp_flag/index.html
@@ -0,0 +1,105 @@
+---
+title: 'SyntaxError: invalid regular expression flag "x"'
+slug: Web/JavaScript/Reference/Fehler/Bad_regexp_flag
+tags:
+  - Error
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Bad_regexp_flag
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
SyntaxError: invalid regular expression flag "x" (Firefox)
+SyntaxError: Invalid regular expression flags (Chrome)
+

+
+
Fehlertyp

+
+
{{jsxref("SyntaxError")}}

+
+
Was ist falsch gelaufen?

+
+
Es gibt nicht valide Flags in regulären Ausdrücken im Code. In einem regulärem Ausdrucksliteral, welches aus eine Muster umschlossen von Schrägstrichen ist, kommen die Flags nach dem zweiten Schrägstrich. Sie können auch in der Konstruktorfunktion des {{jsxref("RegExp")}} Objektes angegeben werden (zweiter Parameter). Flags für reguläre Ausdrücke können einfach oder zusammen in beliebiger Reihenfolge benutzt werden, jedoch gibt es in ECMAScript nur fünf.

+
+
Um ein Flag in regulären Ausdrücken einzufügen kann folgende Syntax benutzt werden:

+
+
var re = /pattern/flags;
+

+
+
oder

+
+
var re = new RegExp('pattern', 'flags');

+
+
+ 
+ 
+  
+   
+   
+  
+ 
+ 
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
Flags von regulären Ausdrücken
FlagBeschreibung
gGlobale Suche.
iGroß- und Kleinschreibung nicht unterscheiden.
mSuche über mehrere Zeilen.
uUnicode; nimmt das Muster als eine Sequenz von Unicode Codepoints an.
yFührt eine "sticky" Suche durch, welche zutrifft, wenn der String von der Startposition aus auf das Muster zutrifft. Siehe {{jsxref("RegExp.sticky", "sticky")}}.

+
+
Beispiele

+
+
Es gibt nur fünf valide Flags für reguläre Ausdrücke.

+
+
/foo/bar;
+
+// SyntaxError: invalid regular expression flag "b"
+

+
+
Ist eine regulärer Ausdruck gewollt? Ein Ausdruck, der zwei Schrägstriche enthält wird als Literal für reguläre Ausdrücke interpretiert.

+
+
let obj = {
+  url: /docs/Web
+};
+
+// SyntaxError: invalid regular expression flag "W"
+

+
+
Oder war stattdessen ein String gemeint? Füge einfache oder doppelte Anführungszeichen hinzu, um ein Stringliteral zu erstellen.

+
+
let obj = {
+  url: '/docs/Web'
+};

+
+
Valide Flags für reguläre Ausdrücke

+
+
Siehe in der Tabelle oben für die fünf in JavaScript erlaubten validen Flags für reguläre Ausdrücke

+
+
/foo/g;
+/foo/gim;
+/foo/uy;
+

+
+
Siehe auch

+
+
diff --git a/files/de/web/javascript/reference/errors/bad_return_or_yield/index.html b/files/de/web/javascript/reference/errors/bad_return_or_yield/index.html
new file mode 100644
index 0000000000..e850455615
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/bad_return_or_yield/index.html
@@ -0,0 +1,55 @@
+---
+title: 'SyntaxError: return not in function'
+slug: Web/JavaScript/Reference/Fehler/Bad_return_or_yield
+tags:
+  - Errors
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Bad_return_or_yield
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
SyntaxError: return not in function
+SyntaxError: yield not in function
+

+
+
Fehlertyp

+
+
{{jsxref("SyntaxError")}}.

+
+
Was ist falsch gelaufen?

+
+
Ein return oder yield Statement wird außerhalb einer Funktion aufgerufen. Es kann sein, dass geschweifte Klammern fehlen. Die Statements return und yield müssen in einer Funktion sein, weil sie die Ausführung der Funktion beenden (oder pausieren und wieder starten) und dem Funktionsaufrufer einen spezifizierten Wert zurückgeben.

+
+
Beispiele

+
+
var cheer = function(score) {
+  if (score === 147)
+    return 'Maximum!';
+  };
+  if (score > 100) {
+    return 'Century!';
+  }
+}
+
+// SyntaxError: return not in function

+
+
Die geschweiften Klammern sehen auf den ersten Blick richtig aus, jedoch fehlt in dem Code eine { nach dem ersten if Statement. Korrekt währe es wir folgt:

+
+
var cheer = function(score) {
+  if (score === 147) {
+    return 'Maximum!';
+  }
+  if (score > 100) {
+    return 'Century!';
+  }
+};

+
+
Siehe auch

+
+
diff --git a/files/de/web/javascript/reference/errors/called_on_incompatible_type/index.html b/files/de/web/javascript/reference/errors/called_on_incompatible_type/index.html
new file mode 100644
index 0000000000..1915e1b829
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/called_on_incompatible_type/index.html
@@ -0,0 +1,64 @@
+---
+title: X.prototype.y called on incompatible type
+slug: Web/JavaScript/Reference/Fehler/Called_on_incompatible_type
+tags:
+  - Error
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Called_on_incompatible_type
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
TypeError: Function.prototype.toString called on incompatible object (Firefox)
+TypeError: Function.prototype.bind called on incompatible target (Firefox)
+TypeError: Method Set.prototype.add called on incompatible receiver undefined (Chrome)
+TypeError: Bind must be called on a function (Chrome)
+

+
+
Fehlertyp

+
+
{{jsxref("TypeError")}}

+
+
Was ist falsch gelaufen?

+
+
Wenn dieser Fehler auftritt, wird eine Funktion (auf eineem gegebenen Objekt) aufgerufen, wobei this nicht vom erwarteten Typ ist.

+
+
Dieser Fehler kann auftreten, wenn die {{jsxref("Function.prototype.call()")}} oder {{jsxref("Function.prototype.apply()")}} Methode mit einem this Argument genutzt werden, welches nicht dem erwarteten Typ entspricht.

+
+
Dieser Fehler kann auch auftreten, wenn eine Funktion (in einem Objekt gespeichert) als Argument in einer anderen Funktion genutzt wird. In diesem Fall ist das Objekt nicht this der Funktion. Um diesen Dall zu umgehen muss eine Lambda-Funktion unterstützt werden, welche den Aufruf markiert, oder die {{jsxref("Function.prototype.bind()")}} Funktion eingesetzt werden, um das richtige this Objekt zu nutzen.

+
+
Beispiele

+
+
Fehlerfälle

+
+
var mySet = new Set;
+['bar', 'baz'].forEach(mySet.add);
+// mySet.add ist eine Funktion, aber "mySet" wird so nicht erfasst.
+
+var myFun = function () {};
+['bar', 'baz'].forEach(myFun.bind);
+// myFun.bind ist eine Funktion, aber "myFun" wird nicht so erfasst.
+
+

+
+
Gültiger Fälle

+
+
var mySet = new Set;
+['bar', 'baz'].forEach(mySet.add.bind(mySet));
+// Das funktioniert, weil "mySet" als this an die Funktion gebunden wird.
+
+var myFun = function () {};
+['bar', 'baz'].forEach(x => myFun.bind(x));
+// Das funktioniert durch die "bind" Funktion. Es wird eine Lambda-Funktion erstellt, die die Argumente weiterleitet..
+
+

+
+
Siehe auch

+
+
    
+ 
  • {{jsxref("Function.prototype.call()")}}
    • 
+ 
  • {{jsxref("Function.prototype.apply()")}}
    • 
+ 
  • {{jsxref("Function.prototype.bind()")}}
    • 
+

diff --git a/files/de/web/javascript/reference/errors/cant_access_lexical_declaration_before_init/index.html b/files/de/web/javascript/reference/errors/cant_access_lexical_declaration_before_init/index.html
new file mode 100644
index 0000000000..16b976aef6
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/cant_access_lexical_declaration_before_init/index.html
@@ -0,0 +1,60 @@
+---
+title: 'ReferenceError: can''t access lexical declaration`X'' before initialization'
+slug: Web/JavaScript/Reference/Fehler/Cant_access_lexical_declaration_before_init
+tags:
+  - Errors
+  - JavaScript
+  - ReferenceError
+translation_of: Web/JavaScript/Reference/Errors/Cant_access_lexical_declaration_before_init
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
ReferenceError: can't access lexical declaration `X' before initialization (Firefox)
+ReferenceError: 'x' is not defined (Chrome)
+

+
+
Fehlertyp

+
+
{{jsxref("ReferenceError")}}

+
+
Was ist falsch gelaufen?

+
+
Auf eine lexikalische Variable wurde zugegriffen bevor sie deklariert wurde. Das passiert in Blockstatements, in denen auf let oder const Variablen zugegriffen wird, bevor sie definiert wurden.

+
+
Beispiele

+
+
Falsche Fälle

+
+
In diesem Fall wird die Variable "foo" in einem Blockstatement mit let neu deklariert.

+
+
function test() {
+  let foo = 33;
+  if (true) {
+    let foo = (foo + 55);
+    // ReferenceError: can't access lexical
+    // declaration `foo' before initialization
+  }
+}
+test();
+

+
+
Richtige Fälle

+
+
Um "foo" im if-Statement zu ändern, muss  let entfernt werden, welche die Neudeklaration verursacht.

+
+
function test(){
+   let foo = 33;
+   if (true) {
+      foo = (foo + 55);
+   }
+}
+test();
+

+
+
Siehe auch

+
+
diff --git a/files/de/web/javascript/reference/errors/cant_access_property/index.html b/files/de/web/javascript/reference/errors/cant_access_property/index.html
new file mode 100644
index 0000000000..98471eb28e
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/cant_access_property/index.html
@@ -0,0 +1,59 @@
+---
+title: 'TypeError: can''t access property "x" of "y"'
+slug: Web/JavaScript/Reference/Fehler/Cant_access_property
+tags:
+  - Fehler
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Cant_access_property
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
TypeError: Unable to get property {x} of undefined or null reference (Edge)
+TypeError: can't access property {x} of {y} (Firefox)
+TypeError: {y} is undefined, can't access property {x} of it (Firefox)
+TypeError: {y} is null, can't access property {x} of it (Firefox)
+
+Beispiele:
+TypeError: x is undefined, can't access property "prop" of it
+TypeError: x is null, can't access property "prop" of it
+TypeError: can't access property "prop" of undefined
+TypeError: can't access property "prop" of null
+

+
+
Fehlertyp

+
+
{{jsxref("TypeError")}}.

+
+
Was ist falsch gelaufen?

+
+
The Attributzugriff erfolgte über einen {{jsxref("undefined")}} oder {{jsxref("null")}} Wert

+
+
Beispiele

+
+
Invalide Fälle

+
+
// undefined und null sind Fälle auf denen die Methode substring nicht aufgerufen werden kann
+var foo = undefined;
+foo.substring(1); // TypeError: x is undefined, can't access property "substring" of it
+
+var foo = null;
+foo.substring(1); // TypeError: x is null, can't access property "substring" of it
+

+
+
Fehlerbehebung

+
+
Um den null pointer auf undefined oder null Werte zu beheben, kann beispielsweise der typeof Operator verwendet werden.

+
+
if (typeof foo !== 'undefined') {
+  // Hier wissen wir, dass foo definiert ist
+}

+
+
Siehe auch

+
+
    
+ 
  • {{jsxref("undefined")}}
    • 
+ 
  • {{jsxref("null")}}
    • 
+

diff --git a/files/de/web/javascript/reference/errors/cant_define_property_object_not_extensible/index.html b/files/de/web/javascript/reference/errors/cant_define_property_object_not_extensible/index.html
new file mode 100644
index 0000000000..691924f427
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/cant_define_property_object_not_extensible/index.html
@@ -0,0 +1,64 @@
+---
+title: 'TypeError: can''t define property "x": "obj" is not extensible'
+slug: Web/JavaScript/Reference/Fehler/Cant_define_property_object_not_extensible
+tags:
+  - Error
+  - Errors
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Cant_define_property_object_not_extensible
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
TypeError: can't define property "x": "obj" is not extensible (Firefox)
+TypeError: Cannot define property: "x", object is not extensible. (Chrome)
+

+
+
Fehlertyp

+
+
{{jsxref("TypeError")}}

+
+
Was ist falsch gelaufen?

+
+
Normalerweise ist ein Objekt erweiterbar und neue Eigenschaften können hinzugefügt werden. In diesem Fall markiert {{jsxref("Object.preventExtensions()")}} ein Objekt als nicht mehr erweiterbar, so dass ein Objekt nur noch die Eigenschaften haben kann, die es vor dem Aufruf hatte.

+
+
Beispiele

+
+
Im strict mode wird ein TypeError erzeugt, wenn versucht wird eine Eigenschaft zu einem nicht erweiterbaren Objekt hinzuzufügen. Im normalen Modus wird das Hinzufügen einfach ignoriert.

+
+
'use strict';
+
+var obj = {};
+Object.preventExtensions(obj);
+
+obj.x = 'foo';
+// TypeError: can't define property "x": "obj" is not extensible
+

+
+
Im strict mode und normalen Modus wird ein Fehler erzeugt, wenn {{jsxref("Object.defineProperty()")}} benutzt wird, um eine Eigenschaft zu einem nicht erweiterbaren Objekt hinzuzufügen.

+
+
var obj = { };
+Object.preventExtensions(obj);
+
+Object.defineProperty(obj,
+  'x', { value: "foo" }
+);
+// TypeError: can't define property "x": "obj" is not extensible
+

+
+
Um diesen Fehler zu vermeiden muss entweder der Aufruf von {{jsxref("Object.preventExtensions()")}} entfernt werden oder die Position des Aufrufes so verschoben werden, dass das Hinzufügen von Eigenschaften davor passiert und das Objekt erst danach als nicht erweiterbar markiert wird. Natürlich kann auch die neue Eigenschaft entfernt werden, wenn sie nicht benötigt wird.

+
+
'use strict';
+
+var obj = {};
+obj.x = 'foo'; // add property first and only then prevent extensions
+
+Object.preventExtensions(obj);

+
+
Siehe auch

+
+
    
+ 
  • {{jsxref("Object.preventExtensions()")}}
    • 
+

diff --git a/files/de/web/javascript/reference/errors/cant_delete/index.html b/files/de/web/javascript/reference/errors/cant_delete/index.html
new file mode 100644
index 0000000000..fe09735071
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/cant_delete/index.html
@@ -0,0 +1,58 @@
+---
+title: 'TypeError: property "x" is non-configurable and can''t be deleted'
+slug: Web/JavaScript/Reference/Fehler/Cant_delete
+tags:
+  - Errors
+  - JavaScript
+  - Strict Mode
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Cant_delete
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
TypeError: property "x" is non-configurable and can't be deleted. (Firefox)
+TypeError: Cannot delete property 'x' of #<Object> (Chrome)
+

+
+
Fehlertyp

+
+
{{jsxref("TypeError")}} nur im strict mode.

+
+
Was ist falsch gelaufen?

+
+
Es wurde versucht eine EIgenschaft zu löschen, obwohl die Eigenschaft nicht Konfigurierbar (non-configurable) ist. Das configurable Attribut gibt an, ob ein Eigenschaft von einem Objekt gelöscht werden kann und ob ein Attribut (anders als writable) geändert werden kann.

+
+
Dieser Fehler ist nur tritt nur im strict mode auf. In non-strict Quelltext, gibt die Operation false zurück.

+
+
Beispiele

+
+
Nicht Konfigurierbare Eigenschaften sind nicht sehr häufig, aber sie können mit {{jsxref("Object.defineProperty()")}} oder {{jsxref("Object.freeze()")}} erstellt werden.

+
+
'use strict';
+var obj = Object.freeze({name: 'Elsa', score: 157});
+delete obj.score;  // TypeError
+
+'use strict';
+var obj = {};
+Object.defineProperty(obj, 'foo', {value: 2, configurable: false});
+delete obj.foo;  // TypeError
+
+'use strict';
+var frozenArray = Object.freeze([0, 1, 2]);
+frozenArray.pop();  // TypeError
+

+
+
Es gibt auch einige nicht Konfigurierbare Eigenschaften, die in JavaScript eingebaut sind. Dazu zählen zum Beispiel die mathematischen Konstanten.

+
+
'use strict';
+delete Math.PI;  // TypeError

+
+
Siehe auch

+
+
    
+ 
  • delete operator
    • 
+ 
  • {{jsxref("Object.defineProperty()")}}
    • 
+ 
  • {{jsxref("Object.freeze()")}}
    • 
+

diff --git a/files/de/web/javascript/reference/errors/cant_redefine_property/index.html b/files/de/web/javascript/reference/errors/cant_redefine_property/index.html
new file mode 100644
index 0000000000..80ef1e384b
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/cant_redefine_property/index.html
@@ -0,0 +1,51 @@
+---
+title: 'TypeError: can''t redefine non-configurable property "x"'
+slug: Web/JavaScript/Reference/Fehler/Cant_redefine_property
+tags:
+  - Error
+  - Errors
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Cant_redefine_property
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
TypeError: can't redefine non-configurable property "x" (Firefox)
+TypeError: Cannot redefine property: "x" (Chrome)
+

+
+
Fehlertyp

+
+
{{jsxref("TypeError")}}

+
+
Was ist falsch gelaufen?

+
+
Es wurde versucht eine Eigenschaft erneut zu definieren, aber die Eigenschaft ist nicht konfigurierbar (non-configurable). Das configurable Attribut kontrolliert, ob eine Eigenschaft von einem Objekt gelöscht werden kann und seine Attribute (anders als writable) geändert werden können. Eigenschaften von einem Objekt, dass von einem Objekt-Initialisierer erstellt wurden, sind konfigurierbar. Immer, wenn zum Beispiel {{jsxref("Object.defineProperty()")}} eingesetzt wird, ist die Eigenschaft nicht ohne weiteres konfigurierbar.

+
+
Beispiele

+
+
Nicht konfigurierbare Eigenschaften mit Object.defineProperty erstellen

+
+
Die {{jsxref("Object.defineProperty()")}} Funktion erstellt nicht konfiguriertbare Eigenschaften wenn sie nicht extra als konfigurierbar spezifiziert sind.

+
+
var obj = Object.create({});
+Object.defineProperty(obj, "foo", {value: "bar"});
+
+Object.defineProperty(obj, "foo", {value: "baz"});
+// TypeError: can't redefine non-configurable property "foo"
+

+
+
Die "foo" Eigenschaft muss als Konfigurierbar eingestellt werden, wenn diese später im Quelltext erneut definiert bzw. überschrieben werden soll.

+
+
var obj = Object.create({});
+Object.defineProperty(obj, "foo", {value: "bar", configurable: true});
+Object.defineProperty(obj, "foo", {value: "baz", configurable: true});

+
+
Siehe auch

+
+
diff --git a/files/de/web/javascript/reference/errors/cyclic_object_value/index.html b/files/de/web/javascript/reference/errors/cyclic_object_value/index.html
new file mode 100644
index 0000000000..33bf4d508a
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/cyclic_object_value/index.html
@@ -0,0 +1,67 @@
+---
+title: 'TypeError: cyclic object value'
+slug: Web/JavaScript/Reference/Fehler/Cyclic_object_value
+tags:
+  - Error
+  - Errors
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Cyclic_object_value
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
TypeError: cyclic object value (Firefox)
+TypeError: Converting circular structure to JSON (Chrome and Opera)
+TypeError: Circular reference in value argument not supported (Microsoft Edge)
+

+
+
Fehlertyp

+
+
{{jsxref("TypeError")}}

+
+
Was ist falsch gelaufen?

+
+
Wenn {{jsxref("JSON.stringify()")}} aufgerufen wird, kann eine zyklische Objektreferenzstruktur nicht zu eine String konvertiert werden.

+
+
Beispiele

+
+
In eine zyklischen Struktur wie folgender

+
+
var circularReference = {otherData: 123};
+circularReference.myself = circularReference;
+

+
+
wird {{jsxref("JSON.stringify()")}} nicht funktionieren

+
+
JSON.stringify(a);
+// TypeError: cyclic object value
+

+
+
Um zyklische Referenzen zu serialisieren, kann man eine Bibliotheken benutzen (z. B. cycle.js von Douglas Crockford) oder eine eigene Lösung implementieren, welche zyklische Referenzen findet und mit serialisierbaren Werten ersetzt (oder diese entfernt).

+
+
Das folgende Codebeispiel zeigt, wie man eine zyklische Referenz mit dem Einsatz des  replacer Parameters von {{jsxref("JSON.stringify()")}} findet und filtert (das bedeutet, es gehen Daten verloren):

+
+
const getCircularReplacer = () => {
+  const seen = new WeakSet;
+  return (key, value) => {
+    if (typeof value === "object" && value !== null) {
+      if (seen.has(value)) {
+        return;
+      }
+      seen.add(value);
+    }
+    return value;
+  };
+};
+
+JSON.stringify(circularReference, getCircularReplacer());
+// {"otherData":123}

+
+
Siehe auch

+
+
    
+ 
  • {{jsxref("JSON.stringify")}}
    • 
+ 
  • cycle.js – Führt zwei Funktionen ein, JSON.decycle und JSON.retrocycle, welche es ermöglichen zyklische Strukturen aufzulösen, diese in JSON unterzubringen und sie wieder zu erstellen.
    • 
+

diff --git a/files/de/web/javascript/reference/errors/dead_object/index.html b/files/de/web/javascript/reference/errors/dead_object/index.html
new file mode 100644
index 0000000000..036e637ef4
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/dead_object/index.html
@@ -0,0 +1,50 @@
+---
+title: 'TypeError: can''t access dead object'
+slug: Web/JavaScript/Reference/Fehler/Dead_object
+tags:
+  - Addon
+  - Error
+  - Errors
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Errors/Dead_object
+---
+
{{JSSidebar("Errors")}}

+
+
Fehlermeldung

+
+
TypeError: can't access dead object
+

+
+
Fehlertyp

+
+
{{jsxref("TypeError")}}

+
+
Was ist falsch gelaufen?

+
+
Um die Speichernutzung zu verbessern und Speicherlücken zu vermeiden, verbietet Firefox Add-Ons Referenzen in das DOM Objekt zu speichern, nachdem das Elterndokument zerstört wurde. Ein totes Objekt hält eine starke Referenz zu einem DOM-Element, welche nach nach dem Zerstören in DOM existiert. Um dieses Problem zu vermeiden, sollte statt der Referenz zu einem DOM-Knoten im fremden Dokument die Referenz in einem Objekt, welches im Dokument selbst spezifiziert ist gespeichert werden und gesäubert werden, wenn das Dokument nicht mehr geladen ist, oder als weak Referenz gespeichert werden.

+
+
Prüfen, ob ein Objekt tot ist

+
+
Components.utils hat ein isDeadWrapper() Methode, welche in privilegiertem Quelltext verwendet werden sollte.

+
+
if (Components.utils.isDeadWrapper(window)) {
+  // dead
+}

+
+
Nicht privilegierter Quelltext hat keinen Zugriff auf Component.utils und sollt deswegen einfach den Fehler abfangen.

+
+
try {
+  String(window);
+}
+catch (e) {
+  console.log("window is likely dead");
+}

+
+
Siehe auch

+
+
diff --git a/files/de/web/javascript/reference/errors/delete_in_strict_mode/index.html b/files/de/web/javascript/reference/errors/delete_in_strict_mode/index.html
new file mode 100644
index 0000000000..042505e066
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/delete_in_strict_mode/index.html
@@ -0,0 +1,70 @@
+---
+title: >-
+  SyntaxError: applying the 'delete' operator to an unqualified name is
+  deprecated
+slug: Web/JavaScript/Reference/Fehler/Delete_in_strict_mode
+tags:
+  - Error
+  - Errors
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Delete_in_strict_mode
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
SyntaxError: applying the 'delete' operator to an unqualified name is deprecated (Firefox)
+SyntaxError: Delete of an unqualified identifier in strict mode. (Chrome)
+

+
+
Fehlertyp

+
+
{{jsxref("SyntaxError")}} nur im Strict Mode.

+
+
Was ist falsch gelaufen?

+
+
Normale Variablen können in JavaScript nicht mit dem delete Operator gelöscht werden. Im Strict Mode führt der Versuch des Löschens zu einem Fehler, weil es nicht erlaubt ist.

+
+
Der delete Operator kann nur Eigenschaften eines Objektes löschen. Objekteigenschaften müssen dafür Konfigurierbar sein.

+
+
Wie oft fälschlicherweise angenommen, hat die delete Operation nichts mit dem direkten freimachen von Speicher zu tun. Speicherverwaltung wird indirekt gemacht, mehr Informationen darüber auf den Seiten Speicherverwaltung und delete.

+
+
Der Fehler tritt nur im Strict Mode auf. In normalem Code gibt die Operation einfach false zurück.

+
+
Beispiele

+
+
Der Versuch eine einfache Variable zu Löschen funktioniert in JavaScript nicht unf führt im Strict Mode zu einem Fehler:

+
+
'use strict';
+
+var x;
+
+// ...
+
+delete x;
+
+// SyntaxError: applying the 'delete' operator to an unqualified name
+// is deprecated
+

+
+
Um den Inhalt einer Variable zu leeren, kann man sie auf {{jsxref("null")}} setzen:

+
+
'use strict';
+
+var x;
+
+// ...
+
+x = null;
+
+// x can be garbage collected
+

+
+
Siehe auch

+
+
diff --git a/files/de/web/javascript/reference/errors/deprecated_caller_or_arguments_usage/index.html b/files/de/web/javascript/reference/errors/deprecated_caller_or_arguments_usage/index.html
new file mode 100644
index 0000000000..15bb0e68b6
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/deprecated_caller_or_arguments_usage/index.html
@@ -0,0 +1,75 @@
+---
+title: 'ReferenceError: deprecated caller or arguments usage'
+slug: Web/JavaScript/Reference/Fehler/Deprecated_caller_or_arguments_usage
+tags:
+  - Errors
+  - JavaScript
+  - Strict Mode
+  - Warning
+translation_of: Web/JavaScript/Reference/Errors/Deprecated_caller_or_arguments_usage
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
Warning: ReferenceError: deprecated caller usage (Firefox)
+Warning: ReferenceError: deprecated arguments usage (Firefox)
+TypeError: 'callee' and 'caller' cannot be accessed in strict mode. (Safari)
+

+
+
Fehlertyp

+
+
Eine {{jsxref("ReferenceError")}} Warnung, die nur im Strict Mode auftaucht. Die JavaScript-Ausführung wird dadurch nicht angehalten.

+
+
Was ist falsch gelaufen?

+
+
Im Strict Mode wurden die Eigenschaften {{jsxref("Function.caller")}} oder {{jsxref("Function.arguments")}} benutzt, was nicht getan werden sollte. Sie sind veraltet, da sie den Funktionsaufruf verlieren, nicht standardisiert sind, schwer zu optimieren sind und möglicherweise leistungsschädigend sein können.

+
+
Beispiele

+
+
Veraltete function.caller oder arguments.callee.caller Eigenschaft

+
+
{{jsxref("Function.caller")}} und arguments.callee.caller sind veraltet (in den Referenzartikeln sind mehr Informationen dazu enthalten).

+
+
'use strict';
+
+function myFunc() {
+  if (myFunc.caller == null) {
+    return 'The function was called from the top!';
+  } else {
+    return 'This function\'s caller was ' + myFunc.caller;
+  }
+}
+
+myFunc();
+// Warning: ReferenceError: deprecated caller usage
+// "The function was called from the top!"

+
+
Function.arguments

+
+
{{jsxref("Function.arguments")}} ist veraltet (im Referenzartikel sind mehr Informationen dazu enthalten).

+
+
'use strict';
+
+function f(n) { g(n - 1); }
+
+function g(n) {
+  console.log('before: ' + g.arguments[0]);
+  if (n > 0) { f(n); }
+  console.log('after: ' + g.arguments[0]);
+}
+
+f(2);
+
+console.log('returned: ' + g.arguments);
+// Warning: ReferenceError: deprecated arguments usage
+

+
+
Siehe auch

+
+
diff --git a/files/de/web/javascript/reference/errors/deprecated_expression_closures/index.html b/files/de/web/javascript/reference/errors/deprecated_expression_closures/index.html
new file mode 100644
index 0000000000..b8c6e7ced8
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/deprecated_expression_closures/index.html
@@ -0,0 +1,78 @@
+---
+title: 'Warning: expression closures are deprecated'
+slug: Web/JavaScript/Reference/Fehler/Deprecated_expression_closures
+tags:
+  - JavaScript
+  - Warning
+translation_of: Web/JavaScript/Reference/Errors/Deprecated_expression_closures
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
Warning: expression closures are deprecated
+

+
+
Fehlertyp

+
+
Warnung. Die Ausführung von JavaScript wird nicht angehalten.

+
+
Was ist falsch gelaufen?

+
+
Die nicht standardisierte  Ausdrucks Closure Syntax (Kurzform der Funktionssyntax) ist veraltetet und sollte nicht mehr verwendet werden. Diese Syntax wird komplett entfernt ({{bug(1083458)}}) und Skripte die diese Benutzen erzeugen dann einen {{jsxref("SyntaxError")}}.

+
+
Beispiele

+
+
Veraltete Syntax

+
+
Ausdrucks Closures vermeiden geschweifte Klammern oder return Anweisungen in Funktionsdeklarationen oder in Methodendefinitionen in Objekten.

+
+
var x = function() 1;
+
+var obj = {
+  count: function() 1
+};
+

+
+
Standardsyntax

+
+
Um die nicht standardisierte Ausdrucks Closures Syntax zu Standard-ECMAScript Syntax zu konvertieren müssen geschweifte Klammern und ein return Statement hinzugefügt werden.

+
+
var x = function() { return 1; }
+
+var obj = {
+  count: function() { return 1; }
+};
+

+
+
Standardsyntax mit Arrowfunktionen

+
+
Alternativ können Arrow-Funktionen genutzt werden:

+
+
var x = () => 1;

+
+
Standardsyntax mit Kurzformmethodensyntax

+
+
Anweisungs Closures können auch in Gettern und Settern gefunden werden:

+
+
var obj = {
+  get x() 1,
+  set x(v) this.v = v
+};
+

+
+
Mit ES2015 Methodendefinitionen können diese folgendermaßen konvertiert werden :

+
+
var obj = {
+  get x() { return 1 },
+  set x(v) { this.v = v }
+};
+

+
+
Siehe auch

+
+
diff --git a/files/de/web/javascript/reference/errors/deprecated_octal/index.html b/files/de/web/javascript/reference/errors/deprecated_octal/index.html
new file mode 100644
index 0000000000..e153038950
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/deprecated_octal/index.html
@@ -0,0 +1,67 @@
+---
+title: 'SyntaxError: "0"-prefixed octal literals and octal escape seq. are deprecated'
+slug: Web/JavaScript/Reference/Fehler/Deprecated_octal
+tags:
+  - Error
+  - JavaScript
+  - Strict Mode
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Deprecated_octal
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
SyntaxError:
+"0"-prefixed octal literals and octal escape sequences are deprecated;
+for octal literals use the "0o" prefix instead
+

+
+
Fehlertyp

+
+
{{jsxref("SyntaxError")}} nur im Strict Mode.

+
+
Was ist falsch gelaufen?

+
+
Oktalliterale und oktal maskierte Sequenzen sind veraltet und führen zu einem {{jsxref("SyntaxError")}} im Strict Mode. Ab ECMAScript 2015 wird in der standardisierten Syntax eine führende null gefolgt von einem kleinen oder großen lateinischen Buchstaben "O" verwendet (0o oder 0O).

+
+
Beispiele

+
+
Oktalliteral mit führender 0

+
+
"use strict";
+
+03;
+
+// SyntaxError: "0"-prefixed octal literals and octal escape sequences
+// are deprecated

+
+
Oktal maskierte Sequenz

+
+
"use strict";
+
+"\251";
+
+// SyntaxError: "0"-prefixed octal literals and octal escape sequences
+// are deprecated
+

+
+
Valide Oktalzahlen

+
+
Einsatz einer führenden null gefolgt von "o" oder "O":

+
+
0o3;
+

+
+
Statt oktal maskierte Sequenzen können hexadezimal maskierte Sequenzen benutzt werden:

+
+
'\xA9';

+
+
Siehe auch

+
+
diff --git a/files/de/web/javascript/reference/errors/deprecated_source_map_pragma/index.html b/files/de/web/javascript/reference/errors/deprecated_source_map_pragma/index.html
new file mode 100644
index 0000000000..1f87b2bd2d
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/deprecated_source_map_pragma/index.html
@@ -0,0 +1,58 @@
+---
+title: >-
+  SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //#
+  instead
+slug: Web/JavaScript/Reference/Fehler/Deprecated_source_map_pragma
+tags:
+  - Errors
+  - JavaScript
+  - Source maps
+translation_of: Web/JavaScript/Reference/Errors/Deprecated_source_map_pragma
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
Warning: SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead
+
+Warning: SyntaxError: Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead
+

+
+
Fehlertyp

+
+
Eine Warnung die als {{jsxref("SyntaxError")}} auftritt. Die Ausführung von JavaScript wird nicht unterbrochen.

+
+
Was ist falsch gelaufen?

+
+
Es gibt eine veraltete Source-Map-Syntax im JavaScript Code.

+
+
JavaScript Code wird oft zusammengefügt und minimiert, um die Auslieferung durch einen Server effizienter zu machen. Mit Source-Maps kann beim Debuggen der ausgeführte Code auf die Original Codedateien übertragen werden.

+
+
Die Source-Map Spezifikation änderte die Syntax wegen eines Konflikts mit dem IE immer wenn die Seite nach //@cc_on war, interpretierte dieser es als bedingte Kompilierung in der IE JScript Umgebung. Der bedingte Kompilations Kommentar im IE ist eine relativ unbekannte Funktion, aber dieses machte Source-Maps von jQuery und anderen Bibliotheken kaputt.

+
+
Beispiele

+
+
Veraltete Syntax

+
+
Syntax mit dem veralteten "@" Zeichen.

+
+
//@ sourceMappingURL=http://example.com/path/to/your/sourcemap.map
+

+
+
Standard Syntax

+
+
Benutzt stattdessen ein "#" Zeichen.

+
+
//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map

+
+
Alternativ kann ein {{HTTPHeader("SourceMap")}} Header zu der JavaScript Datei gesetzt werden, um einen solchen Kommentar zu vermeiden:

+
+
SourceMap: /path/to/file.js.map

+
+
Siehe auch

+
+
diff --git a/files/de/web/javascript/reference/errors/deprecated_string_generics/index.html b/files/de/web/javascript/reference/errors/deprecated_string_generics/index.html
new file mode 100644
index 0000000000..d495448759
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/deprecated_string_generics/index.html
@@ -0,0 +1,104 @@
+---
+title: 'Warning: String.x is deprecated; use String.prototype.x instead'
+slug: Web/JavaScript/Reference/Fehler/Deprecated_String_generics
+tags:
+  - JavaScript
+  - Warning
+translation_of: Web/JavaScript/Reference/Errors/Deprecated_String_generics
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
Warning: String.charAt            is deprecated; use String.prototype.charAt            instead
+Warning: String.charCodeAt        is deprecated; use String.prototype.charCodeAt        instead
+Warning: String.concat            is deprecated; use String.prototype.concat            instead
+Warning: String.contains          is deprecated; use String.prototype.contains          instead
+Warning: String.endsWith          is deprecated; use String.prototype.endsWith          instead
+Warning: String.includes          is deprecated; use String.prototype.includes          instead
+Warning: String.indexOf           is deprecated; use String.prototype.indexOf           instead
+Warning: String.lastIndexOf       is deprecated; use String.prototype.lastIndexOf       instead
+Warning: String.localeCompare     is deprecated; use String.prototype.localeCompare     instead
+Warning: String.match             is deprecated; use String.prototype.match             instead
+Warning: String.normalize         is deprecated; use String.prototype.normalize         instead
+Warning: String.replace           is deprecated; use String.prototype.replace           instead
+Warning: String.search            is deprecated; use String.prototype.search            instead
+Warning: String.slice             is deprecated; use String.prototype.slice             instead
+Warning: String.split             is deprecated; use String.prototype.split             instead
+Warning: String.startsWith        is deprecated; use String.prototype.startsWith        instead
+Warning: String.substr            is deprecated; use String.prototype.substr            instead
+Warning: String.substring         is deprecated; use String.prototype.substring         instead
+Warning: String.toLocaleLowerCase is deprecated; use String.prototype.toLocaleLowerCase instead
+Warning: String.toLocaleUpperCase is deprecated; use String.prototype.toLocaleUpperCase instead
+Warning: String.toLowerCase       is deprecated; use String.prototype.toLowerCase       instead
+Warning: String.toUpperCase       is deprecated; use String.prototype.toUpperCase       instead
+Warning: String.trim              is deprecated; use String.prototype.trim              instead
+Warning: String.trimLeft          is deprecated; use String.prototype.trimLeft          instead
+Warning: String.trimRight         is deprecated; use String.prototype.trimRight         instead
+

+
+
Fehlertyp

+
+
Warnung. JavaScript unterbricht die Ausführung nicht.

+
+
Was ist falsch gelaufen?

+
+
Die nicht standardisierten generischen {{jsxref("String")}} Methoden sind veraltet und werden in Zukunft gelöscht (keine Browserübergreifende Unterstützung, nur in Firefox verfügbar). String-Generics stellen String-Instanzmethoden für das String-Objekt bereit, wodurch String-Methoden auf jedes Objekt angewendet werden können.

+
+
Firefox {{bug(1222552)}} dokumentiert das Entfernen von generischen String Methoden.

+
+
Beispiele

+
+
Fehlerfälle

+
+
var num = 15;
+String.replace(num, /5/, '2');

+
+
Gültige Fälle

+
+
var num = 15;
+String(num).replace(/5/, '2');
+

+
+
Shim

+
+
Das Folgende ist ein Shim zur Unterstützung nicht unterstützender Browser:

+
+
/*globals define*/
+// Assumes all supplied String instance methods already present
+// (one may use shims for these if not available)
+(function() {
+  'use strict';
+
+  var i,
+    // We could also build the array of methods with the following, but the
+    //   getOwnPropertyNames() method is non-shimable:
+    // Object.getOwnPropertyNames(String).filter(function(methodName) {
+    //   return typeof String[methodName] === 'function';
+    // });
+    methods = [
+      'contains', 'substring', 'toLowerCase', 'toUpperCase', 'charAt',
+      'charCodeAt', 'indexOf', 'lastIndexOf', 'startsWith', 'endsWith',
+      'trim', 'trimLeft', 'trimRight', 'toLocaleLowerCase', 'normalize',
+      'toLocaleUpperCase', 'localeCompare', 'match', 'search', 'slice',
+      'replace', 'split', 'substr', 'concat', 'localeCompare'
+    ],
+    methodCount = methods.length,
+    assignStringGeneric = function(methodName) {
+      var method = String.prototype[methodName];
+      String[methodName] = function(arg1) {
+        return method.apply(arg1, Array.prototype.slice.call(arguments, 1));
+      };
+    };
+
+  for (i = 0; i < methodCount; i++) {
+    assignStringGeneric(methods[i]);
+  }
+}());

+
+
Siehe auch

+
+
    
+ 
  • {{jsxref("String")}}
    • 
+ 
  • Es gibt ebenfalls {{jsxref("Global_Objects/Array", "Generische Array Methoden", "#Array_generic_methods", 1)}}  (die auch veraltet sind).
    • 
+

diff --git a/files/de/web/javascript/reference/errors/deprecated_tolocaleformat/index.html b/files/de/web/javascript/reference/errors/deprecated_tolocaleformat/index.html
new file mode 100644
index 0000000000..31cc81d9cc
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/deprecated_tolocaleformat/index.html
@@ -0,0 +1,90 @@
+---
+title: 'Warning: Date.prototype.toLocaleFormat is deprecated'
+slug: Web/JavaScript/Reference/Fehler/Deprecated_toLocaleFormat
+tags:
+  - JavaScript
+  - Warning
+translation_of: Web/JavaScript/Reference/Errors/Deprecated_toLocaleFormat
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
Warning: Date.prototype.toLocaleFormat is deprecated; consider using Intl.DateTimeFormat instead
+

+
+
Fehlertyp

+
+
Warnung. JavaScript stoppt die ausführung nicht an.

+
+
Was ist falsch gelaufen?

+
+
Die nicht standardisierte Methode {{jsxref("Date.prototype.toLocaleFormat")}} ist veraltet und sollte nicht mehr benutzt werden. Sie benutzt einen Formatstring mit dem selben Format, wie dei der C Funktion strftime(). Diese Funktion ist seit Firefox 58+ nicht mehr vorhanden.

+
+
Beispiele

+
+
Veraltete Syntax

+
+
Die {{jsxref("Date.prototype.toLocaleFormat")}} Methode ist veraltet und wird entfernt werden (keine browserübergreifende Unterstützung, nur in Firefox verfügbar).

+
+
var today = new Date();
+var date = today.toLocaleFormat('%A, %e. %B %Y');
+
+console.log(date);
+// In German locale
+// "Freitag, 10. März 2017"

+
+
Alternative Standardsyntax mit der ECMAScript Intl API

+
+
Der ECMA-402 Standard spezifiziert Standardobjekte und Methoden (ECMAScript Intl API), die sprachabhängige Datums- und Zeitformatierung erlauben (verfügbar in Chrome 24+, Firefox 29+, IE11+, Safari10+).

+
+
Man kan jetzt die {{jsxref("Date.prototype.toLocaleDateString")}} Methode einsetzen, um einen Zeitpunkt zu formatieren.

+
+
var today = new Date();
+var options = { weekday: 'long', year: 'numeric',
+                month: 'long', day: 'numeric' };
+var date = today.toLocaleDateString('de-DE', options);
+
+console.log(date);
+// "Freitag, 10. März 2017"
+

+
+
Oder man kann das {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} Objekt einsetzen, welches die meisten Berechnungen zwischenspeichert, so dass das Formatieren schneller ist. Dieses ist nützlich, wenn Zeitpunkte in einer Schleife formatiert werden.

+
+
var options = { weekday: 'long', year: 'numeric',
+                month: 'long', day: 'numeric' };
+var dateFormatter = new Intl.DateTimeFormat('de-DE', options)
+
+var dates = [Date.UTC(2012, 11, 20, 3, 0, 0),
+             Date.UTC(2014, 04, 12, 8, 0, 0)];
+
+dates.forEach(date => console.log(dateFormatter.format(date)));
+
+// "Donnerstag, 20. Dezember 2012"
+// "Montag, 12. Mai 2014"
+

+
+
Alternative Standardsyntax mit Date Methoden

+
+
Das {{jsxref("Date")}} Objekt enthält einige Methoden, um einen Benutzerdefinierten Datumsstring zu erhalten.

+
+
(new Date()).toLocaleFormat("%Y%m%d");
+// "20170310"
+

+
+
Dieses kan konvertiert werde:

+
+
let now = new Date();
+let date = now.getFullYear() * 10000 +
+          (now.getMonth() + 1) * 100 + now.getDate();
+
+console.log(date);
+// "20170310"

+
+
Siehe auch

+
+
    
+ 
  • {{jsxref("Date.prototype.toLocaleFormat")}}
    • 
+ 
  • {{jsxref("Date.prototype.toLocaleDateString")}}
    • 
+ 
  • {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}
    • 
+

diff --git a/files/de/web/javascript/reference/errors/equal_as_assign/index.html b/files/de/web/javascript/reference/errors/equal_as_assign/index.html
new file mode 100644
index 0000000000..dbe5e55b02
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/equal_as_assign/index.html
@@ -0,0 +1,54 @@
+---
+title: 'SyntaxError: test for equality (==) mistyped as assignment (=)?'
+slug: Web/JavaScript/Reference/Fehler/Equal_as_assign
+tags:
+  - Errors
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Equal_as_assign
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
Warning: SyntaxError: test for equality (==) mistyped as assignment (=)?
+

+
+
Fehlertyp

+
+
{{jsxref("SyntaxError")}} Warnung nur im strict mode.

+
+
Was ist falsch gelaufen?

+
+
Es gibt eine Zuweisung (=) an der eigentlich ein Gleichheitsprüfung (==) erwartet wird. Um das Debuggen zu unterstützen, warnt JavaScript diesen Fakt (im strict mode).

+
+
Beispiele

+
+
Zuweisung in bedingten Ausdrücken

+
+
Es ist ratsam in bedingten Ausdrücken (wie z. B. if...else) keine einfachen Zuweisungen zu verwenden, weil beim lesen des Codes eine Zuweisung mit einer Gleichheitsprüfung verwechselt werden kann. Zum Beispiel sollte folgender Code nicht verwendet werden:

+
+
if (x = y) {
+  // do the right thing
+}
+

+
+
Wenn es notwendig ist eine Zuweisung in einem bedingten Ausdruck einzusetzen, ist es verbreitet, diese mit runden Klammern einzuklammern. Zum Beispiel:

+
+
if ((x = y)) {
+  // do the right thing
+}

+
+
Andernfalls kann es sein, dass eigentliche eine Vergleichsoperation gemeint war (z. B. == oder ===):

+
+
if (x == y) {
+  // do the right thing
+}

+
+
Siehe auch

+
+
diff --git a/files/de/web/javascript/reference/errors/for-each-in_loops_are_deprecated/index.html b/files/de/web/javascript/reference/errors/for-each-in_loops_are_deprecated/index.html
new file mode 100644
index 0000000000..2651ea45ba
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/for-each-in_loops_are_deprecated/index.html
@@ -0,0 +1,168 @@
+---
+title: 'Warning: JavaScript 1.6''s for-each-in loops are deprecated'
+slug: Web/JavaScript/Reference/Fehler/For-each-in_loops_are_deprecated
+tags:
+  - JavaScript
+  - Warning
+translation_of: Web/JavaScript/Reference/Errors/For-each-in_loops_are_deprecated
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
Warning: JavaScript 1.6's for-each-in loops are deprecated; consider using ES6 for-of instead
+

+
+
Fehlertyp

+
+
Warnung

+
+
Was ist falsch gelaufen?

+
+
Das {{jsxref("Statements/for_each...in", "for each (variable in obj)")}} Statement aus JavaScript 1.6 ist veraltet und wird in naher Zukunft entfernt.

+
+
Beispiele

+
+
Objektiteration

+
+
{{jsxref("Statements/for_each...in", "for each...in")}} wurde eingesetzt, um über spezifizierte Objektwerte zu iterieren.

+
+
Veraltete Syntax

+
+
var object = { a: 10, b: 20 };
+
+for each (var x in object) {
+  console.log(x);        // 10
+                         // 20
+}
+

+
+
Alternative Standardsyntax

+
+
Man kann die Standardschleife {{jsxref("Statements/for...in", "for...in")}} benutzen, um über spezifizierte Objektschlüssel zu iterieren und jeden Wert in der Schleife auszulesen:

+
+
var object = { a: 10, b: 20 };
+
+for (var key in object) {
+  var x = object[key];
+  console.log(x);        // 10
+                         // 20
+}
+

+
+
Oder man benutzt {{jsxref("Statements/for...of", "for...of")}} (ES2015) und {{jsxref("Object.values")}} (ES2017), um ein Array von spezifizerten Werten zu bekommen und über diese zu iterieren:

+
+
var object = { a: 10, b: 20 };
+
+for (var x of Object.values(object)) {
+  console.log(x);        // 10
+                         // 20
+}
+

+
+
Arrayiteration

+
+
{{jsxref("Statements/for_each...in", "for each...in")}} wurde eingesetzt, um über spezifizierte Arrayelemente zu iterieren.

+
+
Veraltete Syntax

+
+
var array = [10, 20, 30];
+
+for each (var x in array) {
+  console.log(x);        // 10
+                         // 20
+                         // 30
+}
+

+
+
Alternative Standardsyntax

+
+
Dieses ist mit der {{jsxref("Statements/for...of", "for...of Schleife")}} (ES2015) möglich.

+
+
var array = [10, 20, 30];
+
+for (var x of array) {
+  console.log(x);        // 10
+                         // 20
+                         // 30
+}
+

+
+
Iterieren über ein Arrays oder null

+
+
{{jsxref("Statements/for_each...in", "for each...in")}} tut nichts, wenn der übergebene Wert null oder undefined ist. {{jsxref("Statements/for...of", "for...of")}} erzeugt in diesem Fall einen Fehler.

+
+
Veraltete Syntax

+
+
function func(array) {
+  for each (var x in array) {
+    console.log(x);
+  }
+}
+func([10, 20]);        // 10
+                       // 20
+func(null);            // prints nothing
+func(undefined);       // prints nothing
+

+
+
Alternative Standardsyntax

+
+
Um das {{jsxref("Statements/for_each...in", "for each...in")}} Statement neu zu schreibe, so dass null oder undefined mit {{jsxref("Statements/for...of", "for...of")}} funktionieren, muss eine Bedingung um {{jsxref("Statements/for...of", "for...of")}} verfasst werden.

+
+
function func(array) {
+  if (array) {
+    for (var x of array) {
+      console.log(x);
+    }
+  }
+}
+func([10, 20]);        // 10
+                       // 20
+func(null);            // prints nothing
+func(undefined);       // prints nothing
+

+
+
Über Objekt-Schlüssel-Werte-Paare iterieren

+
+
Veraltete Syntax

+
+
Es gibt eine veraltete Dialekt, der das Iterieren über Objekt-Schlüssel-Werte-Paare mit {{jsxref("Statements/for_each...in", "for each...in")}} und mit dem veralteten {{jsxref("Iterator")}} Objekt erlaubt.

+
+
var object = { a: 10, b: 20 };
+
+for each (var [key, value] in Iterator(object)) {
+  console.log(key, value);  // "a", 10
+                            // "b", 20
+}
+

+
+
Alternative Standardsyntax

+
+
Man kann die Standardschleife {{jsxref("Statements/for...in", "for...in")}} benutzen, um über spezifizierte Objektschlüssel zu iterieren und jeden Wert in der Schleife auszulesen:

+
+
var object = { a: 10, b: 20 };
+
+for (var key in object) {
+  var value = object[key];
+  console.log(key, value);  // "a", 10
+                            // "b", 20
+}
+

+
+
Oder man benutzt {{jsxref("Statements/for...of", "for...of")}} (ES2015) und {{jsxref("Object.values")}} (ES2017), um ein Array von spezifizerten Werten zu bekommen und über diese zu iterieren:

+
+
var object = { a: 10, b: 20 };
+
+for (var [key, value] of Object.entries(object)) {
+  console.log(key, value);  // "a", 10
+                            // "b", 20
+}
+

+
+
Siehe auch

+
+
    
+ 
  • {{jsxref("Statements/for...of", "for...of")}}
    • 
+ 
  • {{jsxref("Object.values")}}
    • 
+ 
  • {{jsxref("Object.entries")}}
    • 
+

diff --git a/files/de/web/javascript/reference/errors/getter_only/index.html b/files/de/web/javascript/reference/errors/getter_only/index.html
new file mode 100644
index 0000000000..268ee0cbf1
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/getter_only/index.html
@@ -0,0 +1,83 @@
+---
+title: 'TypeError: setting getter-only property "x"'
+slug: Web/JavaScript/Reference/Fehler/Getter_only
+tags:
+  - Error
+  - Errors
+  - JavaScript
+  - Strict Mode
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Getter_only
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
TypeError: setting getter-only property "x" (Firefox)
+TypeError: Cannot set property "prop" of #<Object> which has only a getter (Chrome)
+

+
+
Fehlertyp

+
+
{{jsxref("TypeError")}} nur im strict mode.

+
+
Was ist falsch gelaufen?

+
+
Wenn versucht wird einen neuen Wert einer Wichenschaft zuzuweisen, welche nur als Getter spezifiziert wurde. Wenn kein strict mode verwendet wird, wird dieses stillschweigend ignoriert, während im strict mode ein {{jsxref("TypeError")}} erzeugt wird.

+
+
Beispiele

+
+
Das folgende Beispiel zeigt, wie eine Eigenschaft als Getter eingestellt wird. Es wird kein Setter definiert, so dass ein TypeError erzeugt wird, wenn die temperature Eigenschaft mit dem Wert 30 beschrieben werden soll. Für mehr Details siehe auf der {{jsxref("Object.defineProperty()")}} Seite.

+
+
"use strict";
+
+function Archiver() {
+  var temperature = null;
+  Object.defineProperty(this, 'temperature', {
+    get: function() {
+      console.log('get!');
+      return temperature;
+    }
+  });
+}
+
+var arc = new Archiver();
+arc.temperature; // 'get!'
+
+arc.temperature = 30;
+// TypeError: setting getter-only property "temperature"

+
+
Um den Fehler zu beheben, muss einefach die Zeile 16 entfernt werden, weil dort der Versuch ist die temperature Eigenschaft zu beschreiben, oder es muss ein Setter definiert werden, wie zum Beispiel dieser:

+
+
"use strict";
+
+function Archiver() {
+  var temperature = null;
+  var archive = [];
+
+  Object.defineProperty(this, 'temperature', {
+    get: function() {
+      console.log('get!');
+      return temperature;
+    },
+    set: function(value) {
+      temperature = value;
+      archive.push({ val: temperature });
+    }
+  });
+
+  this.getArchive = function() { return archive; };
+}
+
+var arc = new Archiver();
+arc.temperature; // 'get!'
+arc.temperature = 11;
+arc.temperature = 13;
+arc.getArchive(); // [{ val: 11 }, { val: 13 }]

+
+
Siehe auch

+
+
    
+ 
  • {{jsxref("Object.defineProperty()")}}
    • 
+ 
  • {{jsxref("Object.defineProperties()")}}
    • 
+

diff --git a/files/de/web/javascript/reference/errors/identifier_after_number/index.html b/files/de/web/javascript/reference/errors/identifier_after_number/index.html
new file mode 100644
index 0000000000..64cb9cdfe3
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/identifier_after_number/index.html
@@ -0,0 +1,53 @@
+---
+title: 'SyntaxError: identifier starts immediately after numeric literal'
+slug: Web/JavaScript/Reference/Fehler/Identifier_after_number
+tags:
+  - Error
+  - Errors
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Identifier_after_number
+---
+
{{JSSidebar("Errors")}}

+
+
Fehlermeldung

+
+
SyntaxError: identifier starts immediately after numeric literal (Firefox)
+SyntaxError: Unexpected number (Chrome)
+

+
+
Fehlertyp

+
+
{{jsxref("SyntaxError")}}

+
+
Was ist falsch gelaufen?

+
+
Die Namen von Variablen, {{Glossary("Identifier", "Bezeichner")}} genannt, haben einige Regeln, die der Code erfüllen muss.

+
+
Ein Bezeichner in JavaScript muss mit einem Buchstaben, einem Unterstrich (_) oder einem Dollarzeichen ($) starten. Er kann nicht mit einer Ziffer beginnen. Nur nachfolgende Zeichen sind Ziffern (0-9).

+
+
Beispiele

+
+
Variablenname der mit einer Ziffer beginnt

+
+
Variablennamen dürfen in JavaScript nicht mit einer Zahl beginnen. Das folgende wird nciht funktionieren:

+
+
var 1life = 'foo';
+// SyntaxError: identifier starts immediately after numeric literal
+
+var foo = 1life;
+// SyntaxError: identifier starts immediately after numeric literal
+

+
+
Man muss die Variable neu benenne, um die führende Zahl im Namen zu vermeiden.

+
+
var life1 = 'foo';
+var foo = life1;
+

+
+
Siehe auch

+
+
diff --git a/files/de/web/javascript/reference/errors/illegal_character/index.html b/files/de/web/javascript/reference/errors/illegal_character/index.html
new file mode 100644
index 0000000000..e0c083022c
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/illegal_character/index.html
@@ -0,0 +1,80 @@
+---
+title: 'SyntaxError: illegal character'
+slug: Web/JavaScript/Reference/Fehler/Illegal_character
+tags:
+  - Error
+  - Errors
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Illegal_character
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
SyntaxError: illegal character (Firefox)
+SyntaxError: Invalid or unexpected token (Chrome)
+

+
+
Fehlertyp

+
+
{{jsxref("SyntaxError")}}

+
+
Was ist falsch gelaufen?

+
+
Es gibt ein nicht valides oder nicht erwartetes Token, welches nicht an eine Position im Code passt. Man sollte einen Editor mit Syntaxhighlighting benutzten und vorsichtig nach Verwechselungen suchen, wie einem Minuszeichen ( - ) und einem Dashzeichen ( – ) oder einfachen Anführungszeichen ( " ) und anderen Anführungszeichen ( “ ).

+
+
Beispiele

+
+
Verwechseltes Zeichen

+
+
Einige Zeichen sehen sehr ähnlich aus, aber führen dazu, dass der Code nicht interpretiert werden kann. Bekannte Beispiele dafür sind Anführungszeichen, das Minus oder das Semikolon (griechisches Fragezeichen (U+37e) sieht genauso aus)

+
+
“This looks like a string”;  // SyntaxError: illegal character
+                             // “ und ” sind nicht ", aber sehen so aus
+
+42 – 13;                     // SyntaxError: illegal character
+                             // – sind nicht -, aber sieht so aus
+
+var foo = 'bar';             // SyntaxError: illegal character
+                             // <37e> sind nicht ;, aber sieht so aus
+

+
+
Das funktioniert:

+
+
"This is actually a string";
+42 - 13;
+var foo = 'bar';
+

+
+
Einige Editoren und IDEs werden darauf hinweisen oder dieses anderes hervorheben, aber nicht alle. Wenn manchmal so etwas im Code passiert und man in der Lage ist das Problem zu finden, ist es oft das beste die Zeile zu löschen und sie neu einzutippen.

+
+
Vergessene Zeichen

+
+
Es passiert schnell, dass man ein Zeichen vergisst.

+
+
var colors = ['#000', #333', '#666'];
+// SyntaxError: illegal character
+

+
+
Man muss das fehlende Anführungszeichen ergänzen '#333'.

+
+
var colors = ['#000', '#333', '#666'];

+
+
Nicht sichtbare Zeichen

+
+
Beim Kopieren und Einfügen von Code aus externen Quellen kann es nicht valide Zeichen geben. Zum Beispiel:

+
+
var foo = 'bar';​
+// SyntaxError: illegal character
+

+
+
Wenn man den Code in einem Editor wie Vim anschaut, bemerkt man, dass ein breitenloses Leerzeichen (ZWSP) (U+200B) benutzt wird.

+
+
var foo = 'bar';​<200b>

+
+
Siehe auch

+
+
diff --git a/files/de/web/javascript/reference/errors/in_operator_no_object/index.html b/files/de/web/javascript/reference/errors/in_operator_no_object/index.html
new file mode 100644
index 0000000000..6bace66437
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/in_operator_no_object/index.html
@@ -0,0 +1,72 @@
+---
+title: 'TypeError: cannot use ''in'' operator to search for ''x'' in ''y'''
+slug: Web/JavaScript/Reference/Fehler/in_operator_no_object
+tags:
+  - Error
+  - Errors
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/in_operator_no_object
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
TypeError: right-hand side of 'in' should be an object, got 'x' (Firefox)
+TypeError: cannot use 'in' operator to search for 'x' in 'y' (Firefox, Chrome)
+

+
+
Fehlertyp

+
+
{{jsxref("TypeError")}}

+
+
Was ist falsch gelaufen?

+
+
Der in Operator kan nur für das Prüfen von Eigenschaften in Objekten genutzt werden. Man kann nicht in Strings, Nummern oder anderen primitiven Typen suchen.

+
+
Beispiele

+
+
Suchen in Strings

+
+
Im Vergleich zu anderen Programmiersprachen (z. B. Python) kann in Strings nicht mit dem in Operator gesucht werden.

+
+
"Hello" in "Hello World";
+// TypeError: cannot use 'in' operator to search for 'Hello' in 'Hello World'

+
+
Stattdessen kann zum Beispiel {{jsxref("String.prototype.indexOf()")}} eingesetzt werden.

+
+
"Hello World".indexOf("Hello") !== -1;
+// true

+
+
Der Operand kann nicht null oder undefined sein

+
+
Man muss sicherstellen, dass der Operand nicht {{jsxref("null")}} oder {{jsxref("undefined")}} ist.

+
+
var foo = null;
+"bar" in foo;
+// TypeError: cannot use 'in' operator to search for 'bar' in 'foo' (Chrome)
+// TypeError: right-hand side of 'in' should be an object, got null (Firefox)
+

+
+
Der in Operator erwartet immer ein Objekt.

+
+
var foo = { baz: "bar" };
+"bar" in foo; // false
+
+"PI" in Math; // true
+"pi" in Math; // false
+

+
+
Suchen in Arrays

+
+
Man muss vorsichtig sein, wenn der in Operator in {{jsxref("Array")}} Objekten genutzt wird. Der in Operator prüft die Indexnummern, aber nicht die Werte des Indizes.

+
+
var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple'];
+3 in trees; // true
+"oak" in trees; // false

+
+
Siehe auch

+
+
diff --git a/files/de/web/javascript/reference/errors/index.html b/files/de/web/javascript/reference/errors/index.html
new file mode 100644
index 0000000000..67809031e7
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/index.html
@@ -0,0 +1,29 @@
+---
+title: JavaScript Fehler Referenz
+slug: Web/JavaScript/Reference/Fehler
+tags:
+  - Debugging
+  - Error
+  - Errors
+  - Exception
+  - JavaScript
+  - exceptions
+translation_of: Web/JavaScript/Reference/Errors
+---
+
{{jsSidebar("Errors")}}

+
+
Unten ist eine Liste von Fehlern, die in JavaScript auftauchen können. Diese Fehler können beim Debuggen hilfreich sein, jedoch sind die Probleme nicht immer so klar. Die untenstehenden Seiten enthalten Details zu diesen Fehlern. Jeder Fehler ist ein Objekt, welches auf dem {{jsxref("Error")}} Objekt basieren und haben einen name und eine Fehlermeldung (message).

+
+
Fehler die in der Webconsole angezeigt werden enthalten manchmal einen Link zu einer der untenstehenden Seiten, um die Lösung von Problemen zu beschleunigen.

+
+
Liste von Fehlern

+
+
In dieser Liste ist jede Seite mit einem Namen (der Typ des Fehlers) und einer Fehlermeldung (eine detailliertere, verständlichere Meldung) aufgeführt. Diese beiden Eigenschaften eines Fehlers sind ein Einstiegspunkt für das Verständnis und das Lösen des Fehlers. Für mehr Informationen folge den folgenden Links!

+
+
{{ListSubPages("/en-US/docs/Web/JavaScript/Reference/Errors")}}

+
+
Siehe auch

+
+
diff --git a/files/de/web/javascript/reference/errors/invalid_array_length/index.html b/files/de/web/javascript/reference/errors/invalid_array_length/index.html
new file mode 100644
index 0000000000..34edeb2969
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/invalid_array_length/index.html
@@ -0,0 +1,77 @@
+---
+title: 'RangeError: invalid array length'
+slug: Web/JavaScript/Reference/Fehler/Invalid_array_length
+tags:
+  - Errors
+  - JavaScript
+  - RangeError
+translation_of: Web/JavaScript/Reference/Errors/Invalid_array_length
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
RangeError: invalid array length (Firefox)
+RangeError: Invalid array length (Chrome)
+RangeError: Invalid array buffer length (Chrome)
+

+
+
Fehlertyp

+
+
{{jsxref("RangeError")}}

+
+
Was ist falsch gelaufen?

+
+
entweder:

+
+
    
+ 
  • ein {{jsxref("Array")}} oder ein {{jsxref("ArrayBuffer")}} wurde mit einer negativen oder einer Zahl größer gleich 232 erzeugt, oder
    • 
+ 
  • die {{jsxref("Array.length")}} Eigenschaft  wurde auf eine negative oder eine Zahl größer gleich 232  gesetzt.
    • 
+

+
+
Warum ist die Länge von Array and ArrayBuffer limitiert? Die length Eigenschaft von Array und ArrayBuffer ist mit einem vorzeichenlosen 32-bit Integer definiert, sodass nur Werte von 0 bis 232-1 gültig sind.

+
+
Wenn man ein Array mit dem Konstruktor erzeugen möchte, statt mit der Literalnotation, sollte man aufpassem, dass das erste Argument als Länge des Arrays interpretiert wird.

+
+
Man sollte die Länge festlegen, bevor man die length Eigenschaft setzt, oder mit dem ersten Argument im Konstruktor.

+
+
Beispiele

+
+
Ungültige Fälle

+
+
new Array(Math.pow(2, 40))
+new Array(-1)
+new ArrayBuffer(Math.pow(2, 32))
+new ArrayBuffer(-1)
+
+let a = [];
+a.length = a.length - 1;         // length Eigenschaft auf -1 gesetzt
+
+let b = new Array(Math.pow(2, 32) - 1);
+b.length = b.length + 1;         // length Eigenschaft auf 2^32 gesetzt
+

+
+
Gültige Fälle

+
+
[ Math.pow(2, 40) ]                     // [ 1099511627776 ]
+[ -1 ]                                  // [ -1 ]
+new ArrayBuffer(Math.pow(2, 32) - 1)
+new ArrayBuffer(0)
+
+let a = [];
+a.length = Math.max(0, a.length - 1);
+
+let b = new Array(Math.pow(2, 32) - 1);
+b.length = Math.min(0xffffffff, b.length + 1);
+
+// 0xffffffff ist die hexadecimal Notation für 2^32 - 1
+// kann auch als (-1 >>> 0) geschrieben werden
+

+
+
Siehe auch

+
+
    
+ 
  • {{jsxref("Array")}}
    • 
+ 
  • {{jsxref("Array.length")}}
    • 
+ 
  • {{jsxref("ArrayBuffer")}}
    • 
+

diff --git a/files/de/web/javascript/reference/errors/invalid_assignment_left-hand_side/index.html b/files/de/web/javascript/reference/errors/invalid_assignment_left-hand_side/index.html
new file mode 100644
index 0000000000..6e727fb9a2
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/invalid_assignment_left-hand_side/index.html
@@ -0,0 +1,53 @@
+---
+title: 'ReferenceError: invalid assignment left-hand side'
+slug: Web/JavaScript/Reference/Fehler/Invalid_assignment_left-hand_side
+tags:
+  - Errors
+  - JavaScript
+  - ReferenceError
+translation_of: Web/JavaScript/Reference/Errors/Invalid_assignment_left-hand_side
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
ReferenceError: invalid assignment left-hand side
+

+
+
Fehlertyp

+
+
{{jsxref("ReferenceError")}}.

+
+
Was ist falsch gelaufen?

+
+
Es gibt irgendwo eine unerwartete Zuweisung. Das kann zum Beispiel durch eine nicht Übereinstimmung des Zuweisungsoperators und eines Vergleichsoperators hervorgerufen werden. Während ein einzelnes "=" Zeichen einer Variable einen Wert zuweist, vergleichen  "==" und "===" zwei Werte.

+
+
Beispiele

+
+
if (Math.PI = 3 || Math.PI = 4) {
+  console.log('no way!');
+}
+// ReferenceError: invalid assignment left-hand side
+
+var str = 'Hello, '
++= 'is it me '
++= 'you\'re looking for?';
+// ReferenceError: invalid assignment left-hand side

+
+
In dem if Statement wird ein Vergleichsoperator ("==") und für die Stringverkettung ein plus ("+") Operator benötigt.

+
+
if (Math.PI == 3 || Math.PI == 4) {
+  console.log('no way!');
+}
+
+var str = 'Hello, '
++ 'from the '
++ 'other side!';
+

+
+
Siehe auch

+
+
diff --git a/files/de/web/javascript/reference/errors/invalid_const_assignment/index.html b/files/de/web/javascript/reference/errors/invalid_const_assignment/index.html
new file mode 100644
index 0000000000..812577360a
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/invalid_const_assignment/index.html
@@ -0,0 +1,90 @@
+---
+title: 'TypeError: invalid assignment to const "x"'
+slug: Web/JavaScript/Reference/Fehler/Invalid_const_assignment
+tags:
+  - Error
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Invalid_const_assignment
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
TypeError: invalid assignment to const "x" (Firefox)
+TypeError: Assignment to constant variable. (Chrome)
+TypeError: Redeclaration of const 'x' (IE/Edge)
+

+
+
Fehlertyp

+
+
{{jsxref("TypeError")}}

+
+
Was ist falsch gelaufen?

+
+
Eine Konstante ist ein Wert, der nicht von einem Programm während der normalen Ausführung, geändert werden kann. Sie kann nicht durch erneutes Zuweisen und Neudeklarationen geändert werden. In JavaScript werden Konstanten mit dem const Schlüsselwort deklariert.

+
+
Beispiel

+
+
Nicht valide Neudeklaration

+
+
Weist eine Konstanten erneut einen Wert zu. Führt zu einem Fehler.

+
+
const COLUMNS = 80;
+
+// ...
+
+COLUMNS = 120; // TypeError: invalid assignment to const `COLUMNS'

+
+
Den Fehler auflösen

+
+
Es gibt mehrere Optionen, um den Fehler zu vermeiden. Überprüfen Sie, was mit der betreffenden Konstante erreicht werden sollte.

+
+
Umbenennen

+
+
Wenn Sie eine andere Konstante deklarieren möchten, wählen Sie einen anderen Namen und benennen Sie ihn um. Dieser konstante Name ist dann in diesem Bereich vergeben.

+
+
const COLUMNS = 80;
+const WIDE_COLUMNS = 120;

+
+
const, let or var?

+
+
Verwenden Sie nicht const, wenn Sie keine Konstante deklarieren wollten. Vielleicht soll eine Blockvariable mit let oder eine globale Variable mit var deklariert werden.

+
+
let columns = 80;
+
+// ...
+
+let columns = 120;
+

+
+
Gültigkeitsbereich

+
+
Prüfen Sie, ob Sie im richtigen Gültigkeitsbereich sind. Sollte diese Konstante in diesen Gültigkeitsbereich oder sollte diese zum Beispiel in eine Funktion.

+
+
const COLUMNS = 80;
+
+function setupBigScreenEnvironment() {
+  const COLUMNS = 120;
+}

+
+
const und Unveränderlichkeit

+
+
Die const Deklaration erstellt eine nur lesbare Referenz zu einem Wert. Das bedeutet nicht, dass der enthaltene Wert Unveränderbar ist, sondern nur, dass der Bezeichner nicht neu definiert werden kann. Wenn die Konstante zum Beispiel ein Objekt ist, kann das Objekt selbst verändert werden. Es bedeutet nur, dass der Wert in der Variable nicht verändert werden kann.

+
+
const obj = {foo: 'bar'};
+obj = {foo: 'baz'}; // TypeError: invalid assignment to const `obj'
+

+
+
Aber man kann die Eigenschaften der Variable verändern:

+
+
obj.foo = 'baz';
+obj; // Object { foo: "baz" }

+
+
Siehe auch

+
+
diff --git a/files/de/web/javascript/reference/errors/invalid_date/index.html b/files/de/web/javascript/reference/errors/invalid_date/index.html
new file mode 100644
index 0000000000..04954fe28f
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/invalid_date/index.html
@@ -0,0 +1,54 @@
+---
+title: 'RangeError: invalid date'
+slug: Web/JavaScript/Reference/Fehler/Invalid_date
+tags:
+  - Errors
+  - JavaScript
+  - RangeError
+translation_of: Web/JavaScript/Reference/Errors/Invalid_date
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
RangeError: invalid date (Firefox)
+RangeError: invalid time value (Chrome)
+RangeError: Provided date is not in valid range (Chrome)
+

+
+
Fehlertyp

+
+
{{jsxref("RangeError")}}

+
+
Was ist schief gelaufen?

+
+
Eine Zeichenfolge, die ein ungültiges Datum enthält, wurde  {{jsxref("Date")}} oder {{jsxref("Date.parse()")}} übergeben.

+
+
Beispiele

+
+
Nicht valide Fälle

+
+
Nicht erkennbare Strings oder Daten, welche nicht erlaubte Elementewerte im ISO formatierten String enthalten, geben gewöhnlich {{jsxref("NaN")}} zurück. Abhängig von der Implementierung kann es auch sein, dass nicht valide ISO Formate, einen RangeError: invalid date erzeugen, wie die folgenden Fällen in Firefox:

+
+
new Date('foo-bar 2014');
+new Date('2014-25-23').toISOString();
+new Date('foo-bar 2014').toString();
+

+
+
Das folgende gibt in Firefox {{jsxref("NaN")}} zurück.

+
+
Date.parse('foo-bar 2014'); // NaN

+
+
Für mehr Details, sollte die {{jsxref("Date.parse()")}} Dokumentation angesehen werden.

+
+
Valide Fälle

+
+
new Date('05 October 2011 14:48 UTC');

+
+
Siehe auch

+
+
    
+ 
  • {{jsxref("Date")}}
    • 
+ 
  • {{jsxref("Date.prototype.parse()")}}
    • 
+ 
  • {{jsxref("Date.prototype.toISOString()")}}
    • 
+

diff --git a/files/de/web/javascript/reference/errors/invalid_for-in_initializer/index.html b/files/de/web/javascript/reference/errors/invalid_for-in_initializer/index.html
new file mode 100644
index 0000000000..bc4bf80c70
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/invalid_for-in_initializer/index.html
@@ -0,0 +1,74 @@
+---
+title: 'SyntaxError: for-in loop head declarations may not have initializers'
+slug: Web/JavaScript/Reference/Fehler/Invalid_for-in_initializer
+tags:
+  - Error
+  - JavaScript
+  - Strict Mode
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Invalid_for-in_initializer
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
SyntaxError: for-in loop head declarations may not have initializers (Firefox)
+
+SyntaxError: for-in loop variable declaration may not have an initializer. (Chrome)
+

+
+
Fehlertyp

+
+
{{jsxref("SyntaxError")}} nur im Strict Mode.

+
+
Was ist falsch gelaufen?

+
+
Der Kopf einer  for...in Schleife enthält einen Initialisierungsausdruck. Das ist, wenn eine Variable deklariert und mit einem Wert initialisiert wird (for(var i = 0 in obj)). Ohne Strict Mode wird die Initialisierung still ignoriert und verhält sich wie for(var i in obj). Im Strict Mode wird ein SyntaxError erzeugt.

+
+
Beispiele

+
+
Das Beispiel erzeugt einen SyntaxError:

+
+
"use strict";
+
+var obj = {a: 1, b: 2, c: 3 };
+
+for (var i = 0 in obj) {
+  console.log(obj[i]);
+}
+
+// SyntaxError: for-in loop head declarations may not have initializers
+

+
+
Valide for-in Schleife

+
+
Man kann die Initialisierung (i = 0) im Kopf der for-in Schleife entfernen.

+
+
"use strict";
+
+var obj = {a: 1, b: 2, c: 3 };
+
+for (var i in obj) {
+  console.log(obj[i]);
+}
+

+
+
Array Iteration

+
+
Die for...in Schleife sollte nicht für Array Iterationen benutzt werden. Zum Iterieren von durch ein {{jsxref("Array")}} sollte eine for Schleife statt einer for-in Schleife benutzt werden. Die for Schleife erlaubt es dann auch eine Initialisierung vorzunehmen:

+
+
var arr = [ "a", "b", "c" ]
+
+for (var i = 2; i < arr.length; i++) {
+  console.log(arr[i]);
+}
+
+// "c"

+
+
Siehe auch

+
+
    
+ 
  • for...in
    • 
+ 
  • for...of – ebenfalls keine Initialisierung erlaubt (im Strict und normalen Mode).
    • 
+ 
  • for – Präferiert für das Iterieren über ein Array. Erlaubt das Initialisieren.
    • 
+

diff --git a/files/de/web/javascript/reference/errors/invalid_for-of_initializer/index.html b/files/de/web/javascript/reference/errors/invalid_for-of_initializer/index.html
new file mode 100644
index 0000000000..3270387357
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/invalid_for-of_initializer/index.html
@@ -0,0 +1,63 @@
+---
+title: >-
+  SyntaxError: a declaration in the head of a for-of loop can't have an
+  initializer
+slug: Web/JavaScript/Reference/Fehler/Invalid_for-of_initializer
+tags:
+  - Error
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Invalid_for-of_initializer
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
SyntaxError: a declaration in the head of a for-of loop can't have an initializer (Firefox)
+
+SyntaxError: for-of loop variable declaration may not have an initializer. (Chrome)
+

+
+
Fehlertyp

+
+
{{jsxref("SyntaxError")}}

+
+
Was falsch gelaufen ist?

+
+
Der Kopf einer for...of Schleife enthält einen Initialisierungsausdruck. Das ist eine Variable die deklariert und initialisiert wird |for (var i = 0 of iterable)|. Dieses ist nicht erlaubt in for...of Schleifen. Manchmal ist eine for Schleife gemeint, die eine Initialisierung erlaubt.

+
+
Beispiele

+
+
Nicht valide for...of Schleife

+
+
let iterable = [10, 20, 30];
+
+for (let value = 50 of iterable) {
+  console.log(value);
+}
+
+// SyntaxError: a declaration in the head of a for-of loop can't
+// have an initializer

+
+
Valide for...of Schleife

+
+
Man muss die Initialisierung (value = 50) im Kopf der for...of Schleife entfernen. Wenn 50 als Offset gedacht ist, kann man eine Addition in den Körper der Schleife verschieben, wie im folgenden Beispiel:

+
+
let iterable = [10, 20, 30];
+
+for (let value of iterable) {
+  value += 50;
+  console.log(value);
+}
+// 60
+// 70
+// 80
+

+
+
Siehe auch

+
+
diff --git a/files/de/web/javascript/reference/errors/invalid_right_hand_side_instanceof_operand/index.html b/files/de/web/javascript/reference/errors/invalid_right_hand_side_instanceof_operand/index.html
new file mode 100644
index 0000000000..771838b428
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/invalid_right_hand_side_instanceof_operand/index.html
@@ -0,0 +1,62 @@
+---
+title: 'TypeError: invalid ''instanceof'' operand ''x'''
+slug: Web/JavaScript/Reference/Fehler/invalid_right_hand_side_instanceof_operand
+tags:
+  - Error
+  - Errors
+  - JavaScript
+  - Reference
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/invalid_right_hand_side_instanceof_operand
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
TypeError: invalid 'instanceof' operand "x" (Firefox)
+TypeError: "x" is not a function (Firefox)
+TypeError: Right-hand side of 'instanceof' is not an object (Chrome)
+TypeError: Right-hand side of 'instanceof' is not callable (Chrome)

+
+
Fehlertyp

+
+
{{jsxref("TypeError")}}

+
+
Was ist falsch gelaufen?

+
+
Der instanceof Operator erwartet als rechten Operand einen Konstruktorobjekt, z. B. ein Objekt, welches eine prototype Eigenschaft hat und aufrufbar ist.

+
+
Beispiele

+
+
"test" instanceof ""; // TypeError: invalid 'instanceof' operand ""
+42 instanceof 0;      // TypeError: invalid 'instanceof' operand 0
+
+function Foo() {}
+var f = Foo();        // Foo() is called and returns undefined
+var x = new Foo();
+
+x instanceof f;       // TypeError: invalid 'instanceof' operand f
+x instanceof x;       // TypeError: x is not a function
+

+
+
Um diesen Fehler zu beheben, kann entweder der instanceof Operator durch einen typeof Operator ersetzt werden, oder man muss sicher stellen, dass ein Funktionsname statt einem Resultat seines Aufrufes benutzt werden.

+
+
typeof "test" == "string"; // true
+typeof 42 == "number"      // true
+
+function Foo() {}
+var f = Foo;               // Do not call Foo.
+var x = new Foo();
+
+x instanceof f;            // true
+x instanceof Foo;          // true
+

+
+
Siehe auch

+
+
+
+
 

diff --git a/files/de/web/javascript/reference/errors/is_not_iterable/index.html b/files/de/web/javascript/reference/errors/is_not_iterable/index.html
new file mode 100644
index 0000000000..21460882c7
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/is_not_iterable/index.html
@@ -0,0 +1,103 @@
+---
+title: 'TypeError: ''x'' is not iterable'
+slug: Web/JavaScript/Reference/Fehler/is_not_iterable
+tags:
+  - Error
+  - JavaScript
+  - Reference
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/is_not_iterable
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
TypeError: 'x' is not iterable (Firefox, Chrome)
+TypeError: 'x' is not a function or its return value is not iterable (Chrome)
+

+
+
Fehlertyp

+
+
{{jsxref("TypeError")}}

+
+
Was ist falsch gelaufen?

+
+
Der Wert, welcher auf der rechten Seite von for…of oder als Argument einer Funktion wie {{jsxref("Promise.all")}} oder {{jsxref("TypedArray.from")}} ist kein iterierbares Objekt. Ein iterierbares Objekt kann vom Standardtypen wie {{jsxref("Array")}}, {{jsxref("String")}} oder {{jsxref("Map")}} sein oder ein Objekt, welches das iterable Protokoll implementiert.

+
+
Beispiele

+
+
Über Objekteigenschaften iterieren

+
+
In JavaScript sind {{jsxref("Object", "Objekte")}} nicht iterierbar, außer sie implementieren das iterable Protokoll. Demnach kann man for…of nicht für das Iterieren von Objekteigenschaften benutzen.

+
+
var obj = { 'France': 'Paris', 'England': 'London' };
+for (let p of obj) { // TypeError: obj is not iterable
+    // …
+}
+

+
+
Stattdessen kann man {{jsxref("Object.keys")}} oder {{jsxref("Object.entries")}} benutzen, um über die Eigenschaften oder Einträge zu iterieren.

+
+
var obj = { 'France': 'Paris', 'England': 'London' };
+// Iterate over the property names:
+for (let country of obj.keys()) {
+    var capital = obj[country];
+    console.log(country, capital);
+}
+
+for (const [country, capital] of obj.entries())
+    console.log(country, capital);
+

+
+
Eine andere Option ist in diesem Fall der Einsatz einer {{jsxref("Map")}}:

+
+
var map = new Map;
+map.set('France', 'Paris');
+map.set('England', 'London');
+// Iterate over the property names:
+for (let country of map.keys()) {
+    let capital = map[country];
+    console.log(country, capital);
+}
+
+for (let capital of map.values())
+    console.log(capital);
+
+for (const [country, capital] of map.entries())
+    console.log(country, capital);
+

+
+
Über einen Generator iterieren

+
+
Generatoren sind Funktionen welche aufgerufen werden, um ein iterierbares Objekt zu produzieren.

+
+
function* generate(a, b) {
+  yield a;
+  yield b;
+}
+
+for (let x of generate) // TypeError: generate is not iterable
+    console.log(x);
+

+
+
Wenn dieser nicht aufgerufen wird, ist das korrespondierende {{jsxref("Function")}} Objekt des Generators aufrufbar, aber nicht iterierbar. Aufrufen des Generators Produziert ein iterierbares Objekt, welche über die Werte iteriert, die während der Ausführung des Generators zurückgegeben werden.

+
+
function* generate(a, b) {
+    yield a;
+    yield b;
+}
+
+for (let x of generate(1,2))
+    console.log(x);
+

+
+
Siehe auch

+
+
diff --git a/files/de/web/javascript/reference/errors/json_bad_parse/index.html b/files/de/web/javascript/reference/errors/json_bad_parse/index.html
new file mode 100644
index 0000000000..0aa5e6bdae
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/json_bad_parse/index.html
@@ -0,0 +1,112 @@
+---
+title: 'SyntaxError: JSON.parse: bad parsing'
+slug: Web/JavaScript/Reference/Fehler/JSON_bad_parse
+tags:
+  - Errors
+  - JSON
+  - JavaScript
+  - Method
+  - Property
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/JSON_bad_parse
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
SyntaxError: JSON.parse: unterminated string literal
+SyntaxError: JSON.parse: bad control character in string literal
+SyntaxError: JSON.parse: bad character in string literal
+SyntaxError: JSON.parse: bad Unicode escape
+SyntaxError: JSON.parse: bad escape character
+SyntaxError: JSON.parse: unterminated string
+SyntaxError: JSON.parse: no number after minus sign
+SyntaxError: JSON.parse: unexpected non-digit
+SyntaxError: JSON.parse: missing digits after decimal point
+SyntaxError: JSON.parse: unterminated fractional number
+SyntaxError: JSON.parse: missing digits after exponent indicator
+SyntaxError: JSON.parse: missing digits after exponent sign
+SyntaxError: JSON.parse: exponent part is missing a number
+SyntaxError: JSON.parse: unexpected end of data
+SyntaxError: JSON.parse: unexpected keyword
+SyntaxError: JSON.parse: unexpected character
+SyntaxError: JSON.parse: end of data while reading object contents
+SyntaxError: JSON.parse: expected property name or '}'
+SyntaxError: JSON.parse: end of data when ',' or ']' was expected
+SyntaxError: JSON.parse: expected ',' or ']' after array element
+SyntaxError: JSON.parse: end of data when property name was expected
+SyntaxError: JSON.parse: expected double-quoted property name
+SyntaxError: JSON.parse: end of data after property name when ':' was expected
+SyntaxError: JSON.parse: expected ':' after property name in object
+SyntaxError: JSON.parse: end of data after property value in object
+SyntaxError: JSON.parse: expected ',' or '}' after property value in object
+SyntaxError: JSON.parse: expected ',' or '}' after property-value pair in object literal
+SyntaxError: JSON.parse: property names must be double-quoted strings
+SyntaxError: JSON.parse: expected property name or '}'
+SyntaxError: JSON.parse: unexpected character
+SyntaxError: JSON.parse: unexpected non-whitespace character after JSON data
+

+
+
Fehlertyp

+
+
{{jsxref("SyntaxError")}}

+
+
Was ist falsch gelaufen?

+
+
{{jsxref("JSON.parse()")}} übersetzt einen String zu JSON. Dieser String muss eine gültiges JSON enthalten. Ist die Syntax fehlerhaft, wird dieser Error ausgegeben.

+
+
Beispiele

+
+
JSON.parse() erlaubt keine angehängten Kommata

+
+
Beide Zeilen werden einen SyntaxError erzeugen:

+
+
JSON.parse('[1, 2, 3, 4,]');
+JSON.parse('{"foo": 1,}');
+// SyntaxError JSON.parse: unexpected character
+// at line 1 column 14 of the JSON data
+

+
+
Das letzte trennende Komma muss in JSON vermieden werden:

+
+
JSON.parse('[1, 2, 3, 4]');
+JSON.parse('{"foo": 1}');

+
+
Eigenschaftsnamen müssen Strings mit doppelten Anführungszeichen sein

+
+
Man kann keine einfachen Anführungszeichen für Eigenschaften benutzen (wie 'foo').

+
+
JSON.parse("{'foo': 1}");
+// SyntaxError: JSON.parse: expected property name or '}'
+// at line 1 column 2 of the JSON data

+
+
Stattdessen muss "foo" benutzt werden:

+
+
JSON.parse('{"foo": 1}');

+
+
Führende Nullen und Dezimalpunkte

+
+
Man kann keine führenden Nullen (wie 01) benutzen. Nach Dezimalpunkten muss mindestens eine Stelle stehen.

+
+
JSON.parse('{"foo": 01}');
+// SyntaxError: JSON.parse: expected ',' or '}' after property value
+// in object at line 1 column 2 of the JSON data
+
+JSON.parse('{"foo": 1.}');
+// SyntaxError: JSON.parse: unterminated fractional number
+// at line 1 column 2 of the JSON data
+

+
+
Stattdessen schreibe man nur 1, ohne eine Null (also 1, statt 01) und nutze mindestens eine Ziffer nach dem Dezimalpunkt:

+
+
JSON.parse('{"foo": 1}');
+JSON.parse('{"foo": 1.0}');
+

+
+
Siehe auch

+
+
    
+ 
  • {{jsxref("JSON")}}
    • 
+ 
  • {{jsxref("JSON.parse()")}}
    • 
+ 
  • {{jsxref("JSON.stringify()")}}
    • 
+

diff --git a/files/de/web/javascript/reference/errors/malformed_formal_parameter/index.html b/files/de/web/javascript/reference/errors/malformed_formal_parameter/index.html
new file mode 100644
index 0000000000..65a89bb84a
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/malformed_formal_parameter/index.html
@@ -0,0 +1,61 @@
+---
+title: 'SyntaxError: Malformed formal parameter'
+slug: Web/JavaScript/Reference/Fehler/Malformed_formal_parameter
+tags:
+  - Error
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Malformed_formal_parameter
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
SyntaxError: malformed formal parameter (Firefox)
+

+
+
Fehlertyp

+
+
{{jsxref("SyntaxError")}}

+
+
Was ist falsch gelaufen?

+
+
Es existiert ein Function() Konstruktor mit mindestend zwei übergebenen Parametern im Quelltext. Der letzte Parameter ist der Quelltext für die neu zu erstellende Funktion. Der ganze Rest bildet die liste der Parameter der neu zu erstellenden Funktion.

+
+
Die Liste der Parameter ist manchmal nicht valide. Das kann passieren, wenn versehendlich ein Schlüsselword, wie if oder var, für die namen der Parameter verwendet werden. Ein andere Grund kann eine falsche Interpunktion in der Argumentenliste verwendet wird. Auch ein falscher Wert wie eine Zahl oder ein Objekt kann die Ursache sein.

+
+
OK, das löst mein Problem. Aber warum hast du das nicht sofort gesagt?

+
+
Zugegeben, die Formulierung in der Fehlermeldung  ist etwas seltsam.   "formal parameter" ist eine andere Art "Funktionsargument"  oder "Funktionsparameter" zu sagen. Und wir verwenden das Wort "malformed", weil alle Firefox-Ingenieure sehr große Fans des Romans Gothic Horror sind.

+
+
Beispiele

+
+
Invalide Fälle

+
+
var f = Function('x y', 'return x + y;');
+// SyntaxError (missing a comma)
+
+var f = Function('x,', 'return x;');
+// SyntaxError (extraneous comma)
+
+var f = Function(37, "alert('OK')");
+// SyntaxError (numbers can't be argument names)
+

+
+
Valide Fälle

+
+
var f = Function('x, y', 'return x + y;');  // correctly punctuated
+
+var f = Function('x', "return x;');
+
+// if you can, avoid using Function - this is much faster
+var f = function(x) { return x; };
+

+
+
Siehe auch

+
+
diff --git a/files/de/web/javascript/reference/errors/malformed_uri/index.html b/files/de/web/javascript/reference/errors/malformed_uri/index.html
new file mode 100644
index 0000000000..cf831aa4a6
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/malformed_uri/index.html
@@ -0,0 +1,66 @@
+---
+title: 'URIError: malformed URI sequence'
+slug: Web/JavaScript/Reference/Fehler/Malformed_URI
+tags:
+  - Error
+  - Errors
+  - JavaScript
+  - URIError
+translation_of: Web/JavaScript/Reference/Errors/Malformed_URI
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
URIError: malformed URI sequence (Firefox)
+URIError: URI malformed (Chrome)
+

+
+
Fehlertyp

+
+
{{jsxref("URIError")}}

+
+
Was ist falsch gelaufen?

+
+
Das URI-Kodieren oder -Dekodieren war nicht erfolgreich. Ein gegebenenes Argument der {{jsxref("decodeURI")}}-, {{jsxref("encodeURI")}}-, {{jsxref("encodeURIComponent")}}-, oder {{jsxref("decodeURIComponent")}}-Funktion ist nicht valide, wodurch die Funktion nicht richtig Kodieren oder Dekodieren kann.

+
+
Beispiele

+
+
Kodieren

+
+
Kodieren ersetzt bestimmte Zeichen durch eine Sequenz von einem, zwei, drei oder vier maskierten Zeichen, welche der UTF-8 Kodierung des Zeichens entsprechen. Ein {{jsxref("URIError")}} wird erzeugt, wenn versucht wird ein Zeichen zu kodieren, welches kein Teil des high-low-Paares ist, zum Beispiel:

+
+
encodeURI('\uD800');
+// "URIError: malformed URI sequence"
+
+encodeURI('\uDFFF');
+// "URIError: malformed URI sequence"
+

+
+
Ein high-low Paar ist ok. Zum Beispiel:

+
+
encodeURI('\uD800\uDFFF');
+// "%F0%90%8F%BF"

+
+
Dekodieren

+
+
Dekodieren ersetzt eine Sequenz maskierter Zeichen in einer URI-Komponente mit einem Zeichen, welches dieses repräsentiert. Wenn es kein solches Zeichen gibt, wird ein Fehler erzeugt:

+
+
decodeURIComponent('%E0%A4%A');
+// "URIError: malformed URI sequence"
+

+
+
Mit richiger Eingabe sollte es wie folgendermaßen aussehen:

+
+
decodeURIComponent('JavaScript_%D1%88%D0%B5%D0%BB%D0%BB%D1%8B');
+// "JavaScript_шеллы"

+
+
Siehe auch

+
+
    
+ 
  • {{jsxref("URIError")}}
    • 
+ 
  • {{jsxref("decodeURI")}}
    • 
+ 
  • {{jsxref("encodeURI")}}
    • 
+ 
  • {{jsxref("encodeURIComponent")}}
    • 
+ 
  • {{jsxref("decodeURIComponent")}}
    • 
+

diff --git a/files/de/web/javascript/reference/errors/missing_bracket_after_list/index.html b/files/de/web/javascript/reference/errors/missing_bracket_after_list/index.html
new file mode 100644
index 0000000000..b5fe14ae14
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/missing_bracket_after_list/index.html
@@ -0,0 +1,56 @@
+---
+title: 'SyntaxError: missing ] after element list'
+slug: Web/JavaScript/Reference/Fehler/Missing_bracket_after_list
+tags:
+  - Errors
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Missing_bracket_after_list
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
SyntaxError: missing ] after element list
+

+
+
Fehlertyp

+
+
{{jsxref("SyntaxError")}}.

+
+
Was ist falsch gelaufen?

+
+
Der Syntax der Array-Initialisierung enthält einen Fehler. Wahrscheinlich fehlt eine schließende eckige Klammer ("]") oder ein Komma (",").

+
+
Beispiele

+
+
Unvollständige Arrayinitialisierung

+
+
var list = [1, 2,
+
+var instruments = [
+  'Ukulele',
+  'Guitar',
+  'Piano'
+};
+
+var data = [{foo: 'bar'} {bar: 'foo'}];
+

+
+
Richtig wäre:

+
+
var list = [1, 2];
+
+var instruments = [
+ 'Ukulele',
+ 'Guitar',
+ 'Piano'
+];
+
+var data = [{foo: 'bar'}, {bar: 'foo'}];

+
+
Siehe auch

+
+
    
+ 
  • {{jsxref("Array")}}
    • 
+

diff --git a/files/de/web/javascript/reference/errors/missing_colon_after_property_id/index.html b/files/de/web/javascript/reference/errors/missing_colon_after_property_id/index.html
new file mode 100644
index 0000000000..26d515a018
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/missing_colon_after_property_id/index.html
@@ -0,0 +1,77 @@
+---
+title: 'SyntaxError: missing : after property id'
+slug: Web/JavaScript/Reference/Fehler/Missing_colon_after_property_id
+tags:
+  - Error
+  - Errors
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Missing_colon_after_property_id
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
SyntaxError: missing : after property id
+

+
+
Fehlertyp

+
+
{{jsxref("SyntaxError")}}

+
+
Was ist falsch gelaufen?

+
+
Wenn Objekte mit der Objektinitialisierungs-Syntax erstellt werden, wird ein (:) eingesetzt, um bei Eiegenschaften Schlüssel und Werte zu trennen.

+
+
var obj = { propertyKey: 'value' };
+

+
+
Examples

+
+
Doppelpunkt vs. Gleichzeichen

+
+
Der Code funktioniert nicht, weil das Gleichzeichen nicht in dieser Form in der Objektinitialisierungs-Syntax genutzt werden kann.

+
+
var obj = { propertyKey = 'value' };
+// SyntaxError: missing : after property id
+

+
+
Richtig währe der Einsatz eines Doppelpunktes oder der Einsatz von eckigen Klammern, um eine Eigenschaft nach dem erstellen des Objektes zuzuweisen.

+
+
var obj = { propertyKey: 'value' };
+
+// or alternatively
+
+var obj = { };
+obj['propertyKey'] = 'value';
+

+
+
Leere Eigenschaften

+
+
Man kann nicht wie im Beispiel leere Eigenschaften erzeugen:

+
+
var obj = { propertyKey; };
+// SyntaxError: missing : after property id
+

+
+
Wenn eine Eigenschaft ohne Wert definiert werden soll, muss {{jsxref("null")}} als Wert genutzt werden.

+
+
var obj = { propertyKey: null };

+
+
Berechnete Eigenschaften

+
+
Wenn ein Eigenschaftsname aus einem Ausdruck berechnet wird, müssen eckige Klammern genutzt werden. Anderfalls kann der Eigenschaftname nicht errechnet werden:

+
+
var obj = { 'b'+'ar': 'foo' };
+// SyntaxError: missing : after property id
+

+
+
Man muss den Ausdruck in [] setzen:

+
+
var obj = { ['b'+'ar']: 'foo' };

+
+
Siehe auch

+
+
diff --git a/files/de/web/javascript/reference/errors/missing_curly_after_function_body/index.html b/files/de/web/javascript/reference/errors/missing_curly_after_function_body/index.html
new file mode 100644
index 0000000000..b5e0239a2f
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/missing_curly_after_function_body/index.html
@@ -0,0 +1,67 @@
+---
+title: 'SyntaxError: missing } after function body'
+slug: Web/JavaScript/Reference/Fehler/Missing_curly_after_function_body
+tags:
+  - Error
+  - Errors
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Missing_curly_after_function_body
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
SyntaxError: missing } after function body
+

+
+
Fehlertyp

+
+
{{jsxref("SyntaxError")}}

+
+
Was ist falsch gelaufen?

+
+
Es gibt einen Syntaxfehler irgendwo beim erstellen von Funktionen. Man sollte prüfen, ob alle runden und geschweiften Klammern in der richtigen Reihenfolge sind. Einrückung und Formatierung des Codes hilft dabei den Fehler zu erkennen.

+
+
Beispiele

+
+
Schließende geschweifte Klammer vergessen

+
+
Oftmals fehlt eine geschweifte Klammer im Funktionsocde:

+
+
var charge = function() {
+  if (sunny) {
+    useSolarCells();
+  } else {
+    promptBikeRide();
+};
+

+
+
Richtig wäre:

+
+
var charge = function() {
+  if (sunny) {
+    useSolarCells();
+  } else {
+    promptBikeRide();
+  }
+};

+
+
Es kann deutlich verwirrender sein, wenn {{Glossary("IIFE")}}, Closures, oder andere Konstrukte, die viele verschiedene Klammern benutzt, eingesetzt werden, wie zum Beispiel:

+
+
(function() { if (true) { return false; } );
+

+
+
Oftmals hilft verschiedenes Einrücken oder doppeltes Prüfen der Einrückung, um den Fehler zu finden.

+
+
(function() {
+  if (true) {
+    return false;
+  }
+});

+
+
Siehe auch

+
+
diff --git a/files/de/web/javascript/reference/errors/missing_curly_after_property_list/index.html b/files/de/web/javascript/reference/errors/missing_curly_after_property_list/index.html
new file mode 100644
index 0000000000..41a82a9158
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/missing_curly_after_property_list/index.html
@@ -0,0 +1,51 @@
+---
+title: 'SyntaxError: missing } after property list'
+slug: Web/JavaScript/Reference/Fehler/Missing_curly_after_property_list
+tags:
+  - Errors
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Missing_curly_after_property_list
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
SyntaxError: missing } after property list
+

+
+
Fehlertyp

+
+
{{jsxref("SyntaxError")}}

+
+
Was ist falsch gelaufen?

+
+
Es gibt irgendwo in der Objektinitialisierungs-Syntax einen Fehler. Es könnte ein vergessenes Komma sein oder eine vergessene geschweifte Klammer. Es muss auch geprüft werden, die Reihenfolge der schließenden runden und geschweiften Klammern richtig ist. Den Code richtig einzurücken und zu formatieren hilft bei der Suche nach dem Fehler.

+
+
Beispiele

+
+
Vergessenes Komma

+
+
Häufig wird ein Komma bei der Objektinitialisierung vergessen:

+
+
var obj = {
+  a: 1,
+  b: { myProp: 2 }
+  c: 3
+};
+

+
+
Richtig wäre:

+
+
var obj = {
+  a: 1,
+  b: { myProp: 2 },
+  c: 3
+};
+

+
+
Siehe auch

+
+
diff --git a/files/de/web/javascript/reference/errors/missing_formal_parameter/index.html b/files/de/web/javascript/reference/errors/missing_formal_parameter/index.html
new file mode 100644
index 0000000000..19813f9c47
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/missing_formal_parameter/index.html
@@ -0,0 +1,80 @@
+---
+title: 'SyntaxError: missing formal parameter'
+slug: Web/JavaScript/Reference/Fehler/Missing_formal_parameter
+tags:
+  - Error
+  - Errors
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Missing_formal_parameter
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
SyntaxError: missing formal parameter (Firefox)
+

+
+
Fehlertyp

+
+
{{jsxref("SyntaxError")}}

+
+
Was ist falsch gelaufen?

+
+
"Formaler Parameter" ist eine andere Bezeichnung für Funktionsparameter. Einer Funktion fehlen valide Parameter. In der Deklaration einer Funktion müssen die Parameternamen {{Glossary("Identifier", "Bezeichner")}}, kein Wert einer Nummer, eines Strings oder eines Objektes. Deklarieren und Aufrufen von Funktionen sind zwei verschiedene Schritte. Deklarieren setzt Bezeichner als Parametername voraus und beim Ausführen (Aufrufen) der Funktion müssen Werte für die Funktion benutzt werden.

+
+
In {{glossary("JavaScript")}} können Bezeichner nur alphanumerische Zeichen (und "$" und "_") enthalten und können nicht mit einer Zahl beginnen. Ein Bezeichner unterscheidet sich von einem String, weil der String Daten sind und der Bezeichner teil des Codes.

+
+
Beispiele

+
+
Funktionsparameter müssen Bezeichner beim erstellen der Funktion sein. Alle diese Funktionsdeklarationen schlagen fehl, wenn ein Wert als Parameter benutzt wird:

+
+
function square(3) {
+  return number * number;
+};
+// SyntaxError: missing formal parameter
+
+function greet("Howdy") {
+  return greeting;
+};
+// SyntaxError: missing formal parameter
+
+function log({ obj: "value"}) {
+  console.log(arg)
+};
+// SyntaxError: missing formal parameter
+

+
+
Man muss einen Bezeichner für die Funktionsdeklarationen benutzen:

+
+
function square(number) {
+  return number * number;
+};
+
+function greet(greeting) {
+  return greeting;
+};
+
+function log(arg) {
+  console.log(arg)
+};

+
+
Danach kann man die Funktionen mit beliebigen Argumentwerten aufrufen:

+
+
square(2); // 4
+
+greet("Howdy"); // "Howdy"
+
+log({obj: "value"}); // Object { obj: "value" }
+

+
+
Siehe auch

+
+
diff --git a/files/de/web/javascript/reference/errors/missing_initializer_in_const/index.html b/files/de/web/javascript/reference/errors/missing_initializer_in_const/index.html
new file mode 100644
index 0000000000..49db779546
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/missing_initializer_in_const/index.html
@@ -0,0 +1,58 @@
+---
+title: 'SyntaxError: missing = in const declaration'
+slug: Web/JavaScript/Reference/Fehler/Missing_initializer_in_const
+tags:
+  - Error
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Missing_initializer_in_const
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
SyntaxError: missing = in const declaration (Firefox)
+SyntaxError: Missing initializer in const declaration (Chrome)
+

+
+
Fehlertyp

+
+
{{jsxref("SyntaxError")}}

+
+
Was ist falsch gelaufen?

+
+
Eine Konstante ist ein Wert, der während der normalen Ausführung des Programmes nicht geändert werden kann. Ihr kann kein neuer Wert zugewiesen werden und can nicht neu deklariert werden. In JavaScript werden Konstanten mit dem const Schlüsselwort deklariert. Ein Initialwert für eine Konstante wird benötigt, was bedeutet, dass der Wert im gleichen Statement wie bei der Deklaration zugewiesen werden muss (was Sinn ergibt, weil der Wert später nicht mehr geändert werden kann).

+
+
Beispiele

+
+
Fehlender Initialwert bei const

+
+
Anders wie bei var or let, muss man bei const Deklarationen einen Initialwert angeben. Folgendes erzeugt einen Fehler:

+
+
const COLUMNS;
+// SyntaxError: missing = in const declaration

+
+
Den Fehler beheben

+
+
Es gibt mehrere Möglichkeiten den Fehler zu beheben. Es muss geprüft werden, was mit der Konstanten erreicht werden soll.

+
+
Hinzufügen eines konstanten Wertes

+
+
Der Wert muss im gleichen Statement wie die Deklaration spezifiziert werden:

+
+
const COLUMNS = 80;

+
+
const, let oder var?

+
+
Es sollte kein const verwendet werden, wenn keine Konstante gemeint ist. Vielleicht ist eine Variable für den Block (let) oder eine global Variable (var) gemeint. Beide benötigen keinen Initialwert.

+
+
let columns;
+

+
+
Siehe auch

+
+
diff --git a/files/de/web/javascript/reference/errors/missing_name_after_dot_operator/index.html b/files/de/web/javascript/reference/errors/missing_name_after_dot_operator/index.html
new file mode 100644
index 0000000000..cb79bdcc03
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/missing_name_after_dot_operator/index.html
@@ -0,0 +1,68 @@
+---
+title: 'SyntaxError: missing name after . operator'
+slug: Web/JavaScript/Reference/Fehler/Missing_name_after_dot_operator
+tags:
+  - Error
+  - Errors
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Missing_name_after_dot_operator
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
SyntaxError: missing name after . operator
+

+
+
Fehlertyp

+
+
{{jsxref("SyntaxError")}}

+
+
Was ist falsch gelaufen?

+
+
Der Punktoperator (.) wird für den Zugriff auf Eigenschaften genutzt. Man muss den Namen der Eigenschaft spezifizieren, auf den man zugreifen möchte. Um berechnete Eigenschaftsnamen zu benutzen muss statt dem Punkt eckige Klammern genutzt werden. Das erlaubt es einen Ausdruck zu berechnen. Manchmal möchte man Konkatenation stattdessen erreichen. Dafür wird ein Plusoperator (+) genutzt werden.

+
+
Beispiele

+
+
Zugriff auf Eigenschaften

+
+
Zugriff auf Eigenschaften wird in JavaScript entweder mit einem Punkt oder eckigen Klammern erreicht, aber nicht beides. Eckige Klammern erlauben es auch Eigenschaftsnamen zu berechnen.

+
+
var obj = { foo: { bar: "baz", bar2: "baz2" } };
+var i = 2;
+
+obj.[foo].[bar]
+// SyntaxError: missing name after . operator
+
+obj.foo."bar"+i;
+// SyntaxError: missing name after . operator
+

+
+
Um das Problem zu lösen, muss auf das Objekt wie folgt zugegriffen werden:

+
+
obj.foo.bar; // "baz"
+// or alternatively
+obj["foo"]["bar"]; // "baz"
+
+// computed properties require square brackets
+obj.foo["bar" + i]; // "baz2"
+

+
+
Zugriff auf Eigenschaften vs. Konkatenation

+
+
Wenn man aus einer anderen Programmiersprache kommt (z. B. {{Glossary("PHP")}}), ist es einfach den Punktoperator (.) und den Konkatenationsoperator (+) zu vermischen.

+
+
console.log("Hello" . "world");
+
+// SyntaxError: missing name after . operator

+
+
Stattdessen muss man das Pluszeichen für Konkatenation benutzen:

+
+
console.log("Hello" + "World");

+
+
Siehe auch

+
+
diff --git a/files/de/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html b/files/de/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html
new file mode 100644
index 0000000000..a3da4b9edf
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html
@@ -0,0 +1,42 @@
+---
+title: 'SyntaxError: missing ) after argument list'
+slug: Web/JavaScript/Reference/Fehler/Missing_parenthesis_after_argument_list
+tags:
+  - Errors
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
SyntaxError: missing ) after argument list
+

+
+
Fehlertyp

+
+
{{jsxref("SyntaxError")}}.

+
+
Was ist falsch gelaufen?

+
+
Es gibt einen Fehler mit der Art wie die Funktion aufgerufen wird. Es kann sich hier zum Beispiel um einen Tippfehler, einem fehlenden Operator oder einen nicht richtig abgeschlossenen String handeln. 

+
+
Beispiele

+
+
Bei einem fehlenden "+" Operator,  um zwei Strings zu konkatinieren,erwartet JavaScript , dass nur "PI: " der Parameter für die "log" Funktion ist. Darum sollte danach die Funktion mit einer abschliessenden Klammer abgeschlossen werden. 

+
+
console.log("PI: " Math.PI);
+// SyntaxError: missing ) after argument list
+

+
+
Man kann den Fehler korrigieren, indem man den "+" Operator hinzufügt:

+
+
console.log("PI: " + Math.PI);
+// "PI: 3.141592653589793"

+
+
Siehe auch

+
+
diff --git a/files/de/web/javascript/reference/errors/missing_parenthesis_after_condition/index.html b/files/de/web/javascript/reference/errors/missing_parenthesis_after_condition/index.html
new file mode 100644
index 0000000000..295428a5b9
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/missing_parenthesis_after_condition/index.html
@@ -0,0 +1,70 @@
+---
+title: 'SyntaxError: missing ) after condition'
+slug: Web/JavaScript/Reference/Fehler/Missing_parenthesis_after_condition
+tags:
+  - Error
+  - Errors
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Missing_parenthesis_after_condition
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
SyntaxError: missing ) after condition
+

+
+
Fehlertyp

+
+
{{jsxref("SyntaxError")}}

+
+
Was ist falsch gelaufen?

+
+
Es gibt einen Fehler beim schreiben einer if Bedingung. In jeder Programmiersprache benötigt man Fallunterscheidungen abhängig von Eingaben. Das if Statement führt ein Statement auf, wenn eine Bedingung true wird. In JavaScript muss diese Bedingung in runden Klammern nach dem if Schlüsselwort geschrieben werden, wie dieses:

+
+
if (condition) {
+  // do something if the condition is true
+}

+
+
Beispiele

+
+
Es könnte nur ein Versehen sein, weshalb man alle runden Klammern im Code gründlich überprüfen sollte.

+
+
if (3 > Math.PI {
+  console.log("wait what?");
+}
+
+// SyntaxError: missing ) after condition
+

+
+
Um das Problem zu beheben, muss eine schließende runde Klammer nach der Bedingung geschrieben werden.

+
+
if (3 > Math.PI) {
+  console.log("wait what?");
+}

+
+
Wenn man aus einer anderen Programmiersprache kommt, passiert es schnell, dass Schlüsselwörter benutzt werden, die in JavaScript eine andere oder garkeine Bedeutung haben.

+
+
if (done is true) {
+ console.log("we are done!");
+}
+
+// SyntaxError: missing ) after condition
+

+
+
Stattdessen muss die richtige Vergleichsoperation benutzt werden. Zum Beispiel:

+
+
if (done === true) {
+ console.log("we are done!");
+}

+
+
Siehe auch

+
+
diff --git a/files/de/web/javascript/reference/errors/missing_semicolon_before_statement/index.html b/files/de/web/javascript/reference/errors/missing_semicolon_before_statement/index.html
new file mode 100644
index 0000000000..dcdf35ed94
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/missing_semicolon_before_statement/index.html
@@ -0,0 +1,67 @@
+---
+title: 'SyntaxError: missing ; before statement'
+slug: Web/JavaScript/Reference/Fehler/Missing_semicolon_before_statement
+tags:
+  - Errors
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
SyntaxError: missing ; before statement
+

+
+
Fehlertyp

+
+
{{jsxref("SyntaxError")}}.

+
+
Was ist falsch gelaufen?

+
+
Es fehlt irgendwo ein Semikolon (;). JavaScript Statements müssen durch ein Semikolon beendet werden. Einige Statements sind von der automatischen Semikolon Einfügung (ASI) betroffen, aber in diesem Fall muss man ein Semikolon geliefert werden, damit JavaScript den Quelltext korrekt lesen kann.

+
+
Meistens ist dieser Fehler eine Folge aus einem anderen Fehler, wie ein nicht escaptes Zeichen in einem String oder der falsche Einsatz von var.  Es kann auch sein, dass man zu viele runde Klammern benutzt. Wenn dieser Fehler auftritt, sollte die Syntax gründlich geprüft werden.

+
+
Beispiele

+
+
Nicht escapte Strings

+
+
Dieser Fehler kann leicht auftreten, wenn ein String nicht richtig escapt wird und die JavaScript-Umgebung schon das Ende eines Strings erwartet. Zum Beispiel:

+
+
var foo = 'Tom's bar';
+// SyntaxError: missing ; before statement

+
+
Man kann doppelte Anführungszeichen benutzen oder das Apostroph escapen:

+
+
var foo = "Tom's bar";
+var foo = 'Tom\'s bar';
+

+
+
Eigenschaften mit var deklarieren

+
+
Man kann Eigenschaften eines Objektes oder Arrays nicht mit einem var deklarieren.

+
+
var obj = {};
+var obj.foo = 'hi'; // SyntaxError missing ; before statement
+
+var array = [];
+var array[0] = 'there'; // SyntaxError missing ; before statement
+

+
+
Stattdessen muss das var Schlüsselwort vermieden werden:

+
+
var obj = {};
+obj.foo = 'hi';
+
+var array = [];
+array[0] = 'there';
+

+
+
Siehe auch

+
+
diff --git a/files/de/web/javascript/reference/errors/more_arguments_needed/index.html b/files/de/web/javascript/reference/errors/more_arguments_needed/index.html
new file mode 100644
index 0000000000..3707c5446f
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/more_arguments_needed/index.html
@@ -0,0 +1,48 @@
+---
+title: 'TypeError: More arguments needed'
+slug: Web/JavaScript/Reference/Fehler/More_arguments_needed
+tags:
+  - Errors
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/More_arguments_needed
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
TypeError: Object.create requires more than 0 arguments
+TypeError: Object.setPrototypeOf requires more than 1 argument
+TypeError: Object.defineProperties requires more than 0 arguments
+

+
+
Fehlertyp

+
+
{{jsxref("TypeError")}}.

+
+
Was ist falsch gelaufen?

+
+
Es ist ein Fehler beim Aufrufen einer Funktion aufgetaucht. Es müssen mehr Argumente übergeben werden.

+
+
Beispiele

+
+
Die {{jsxref("Object.create()")}} Methode benötigt mindestens ein Argument und die {{jsxref("Object.setPrototypeOf()")}} Methode benötigt mindestens zwei Argumente:

+
+
var obj = Object.create();
+// TypeError: Object.create requires more than 0 arguments
+
+var obj = Object.setPrototypeOf({});
+// TypeError: Object.setPrototypeOf requires more than 1 argument
+

+
+
Dieser Fehler kann behoben werden, indem {{jsxref("null")}} als Eigenschaft gesetzt wird:

+
+
var obj = Object.create(null);
+
+var obj = Object.setPrototypeOf({}, null);

+
+
Siehe auch

+
+
diff --git a/files/de/web/javascript/reference/errors/negative_repetition_count/index.html b/files/de/web/javascript/reference/errors/negative_repetition_count/index.html
new file mode 100644
index 0000000000..53c153453f
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/negative_repetition_count/index.html
@@ -0,0 +1,44 @@
+---
+title: 'RangeError: repeat count must be non-negative'
+slug: Web/JavaScript/Reference/Fehler/Negative_repetition_count
+tags:
+  - Errors
+  - JavaScript
+  - RangeError
+translation_of: Web/JavaScript/Reference/Errors/Negative_repetition_count
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
RangeError: repeat count must be non-negative (Firefox)
+RangeError: Invalid count value (Chrome)
+

+
+
Fehlertyp

+
+
{{jsxref("RangeError")}}

+
+
Was ist falsch gelaufen?

+
+
Die {{jsxref("String.prototype.repeat()")}} Methode wurde benutzt. Sie hat einen count Parameter welche die Anzahl der Wiederholungen des Strings angibt. Dieser muss zwischen 0 und kleiner positiv {{jsxref("Infinity")}} sein und kann nicht negativ sein. Das erlaubte Intervall kann wie folgt beschrieben werden: [0, +∞).

+
+
Beispiele

+
+
Falsche Fälle

+
+
'abc'.repeat(-1); // RangeError 

+
+
Richtige Fälle

+
+
'abc'.repeat(0);    // ''
+'abc'.repeat(1);    // 'abc'
+'abc'.repeat(2);    // 'abcabc'
+'abc'.repeat(3.5);  // 'abcabcabc' (count will be converted to integer)
+

+
+
Siehe auch

+
+
    
+ 
  • {{jsxref("String.prototype.repeat()")}}
    • 
+

diff --git a/files/de/web/javascript/reference/errors/no_non-null_object/index.html b/files/de/web/javascript/reference/errors/no_non-null_object/index.html
new file mode 100644
index 0000000000..a2c897c5cd
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/no_non-null_object/index.html
@@ -0,0 +1,66 @@
+---
+title: 'TypeError: "x" is not a non-null object'
+slug: Web/JavaScript/Reference/Fehler/No_non-null_object
+tags:
+  - Error
+  - Errors
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/No_non-null_object
+---
+
{{JSSidebar("Errors")}}

+
+
Fehlermeldung

+
+
TypeError: "x" is not a non-null object (Firefox)
+TypeError: Property description must be an object: "x" (Chrome)
+TypeError: Invalid value used in weak set (Chrome)
+

+
+
Fehlertyp

+
+
{{jsxref("TypeError")}}

+
+
Was ist falsch gelaufen?

+
+
Ein Objekt wird erwartete aber nicht übergeben. {{jsxref("null")}} ist kein Objekt und funktioniert nicht. In dieser Situation wird ein normales Objekt erwartet.

+
+
Beispiele

+
+
Eigehscgaftsbeschreibung erwartet

+
+
Wenn Methoden wie {{jsxref("Object.create()")}} oder {{jsxref("Object.defineProperty()")}} und {{jsxref("Object.defineProperties()")}} eingesetzt werden, wird als optionale Beschreibung ein Beschreibungsobjekt erwartet. Wenn kein Objekt übergeben wird (z. B. eine Zahl), wird ein Fehler erzeugt:

+
+
Object.defineProperty({}, 'key', 1);
+// TypeError: 1 is not a non-null object
+
+Object.defineProperty({}, 'key', null);
+// TypeError: null is not a non-null object
+

+
+
Ein valides Beschreibungsobjekt kann wie folgendes aussehen:

+
+
Object.defineProperty({}, 'key', { value: 'foo', writable: false });
+

+
+
WeakMap und WeakSet Objekte benötigen Objektschlüssel

+
+
{{jsxref("WeakMap")}} und {{jsxref("WeakSet")}} Objekte speichern Objektschlüssel. Man kann keine anderen Schlüssel verwenden.

+
+
var ws = new WeakSet();
+ws.add('foo');
+// TypeError: "foo" is not a non-null object

+
+
Stattdessen sollte folgendes verwendet werden:

+
+
ws.add({foo: 'bar'});
+ws.add(window);
+

+
+
Siehe auch

+
+
    
+ 
  • {{jsxref("Object.create()")}}
    • 
+ 
  • {{jsxref("Object.defineProperty()")}}, {{jsxref("Object.defineProperties()")}}
    • 
+ 
  • {{jsxref("WeakMap")}}, {{jsxref("WeakSet")}}
    • 
+

diff --git a/files/de/web/javascript/reference/errors/no_properties/index.html b/files/de/web/javascript/reference/errors/no_properties/index.html
new file mode 100644
index 0000000000..d5dc0328b6
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/no_properties/index.html
@@ -0,0 +1,40 @@
+---
+title: 'TypeError: "x" has no properties'
+slug: Web/JavaScript/Reference/Fehler/No_properties
+tags:
+  - Errors
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/No_properties
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
TypeError: null has no properties
+TypeError: undefined has no properties
+

+
+
Fehlertyp

+
+
{{jsxref("TypeError")}}.

+
+
Was ist falsch gelaufen?

+
+
Weder {{jsxref("null")}} noch {{jsxref("undefined")}} besitzen Eigenschaften auf die man zugreifen könnte.

+
+
Beispiele

+
+
null.foo;
+// TypeError: null has no properties
+
+undefined.bar;
+// TypeError: undefined has no properties
+

+
+
Siehe auch

+
+
    
+ 
  • {{jsxref("null")}}
    • 
+ 
  • {{jsxref("undefined")}}
    • 
+

diff --git a/files/de/web/javascript/reference/errors/no_variable_name/index.html b/files/de/web/javascript/reference/errors/no_variable_name/index.html
new file mode 100644
index 0000000000..a3b63df55d
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/no_variable_name/index.html
@@ -0,0 +1,84 @@
+---
+title: 'SyntaxError: missing variable name'
+slug: Web/JavaScript/Reference/Fehler/No_variable_name
+tags:
+  - Error
+  - Errors
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/No_variable_name
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
SyntaxError: missing variable name (Firefox)
+SyntaxError: Unexpected token = (Chrome)

+
+
Fehlertyp

+
+
{{jsxref("SyntaxError")}}

+
+
Was ist falsch gelaufen?

+
+
Einer Variablen fehlt ein Name. Das wird zu einem {{jsxref("SyntaxError")}} im Code führen. Vermutlich ist ein Komma irgendwo falsch oder man kämpft mit einem Namen. Völlig verständlich! Dinge zu benennen ist so schwer.

+
+
Beispiele

+
+
Ein Variablenname fehlt

+
+
var = "foo";
+

+
+
Es ist schwer gute Variablennamen zu vergeben. Das geht allen so.

+
+
var ohGodWhy = "foo";

+
+
Reservierte Schlüsselwörter können kein Variablenname sein

+
+
Es gibt ein paar Namen, die reservierte Schlüsselwörter sind. Diese kann man nicht benutzen.

+
+
var debugger = "whoop";
+// SyntaxError: missing variable name
+

+
+
Deklarieren von mehreren Variablen

+
+
Man muss beim Deklarieren von mehreren Variablen besonders auf Kommas aufpassen. Gibt es ein überflüssiges Komma? Wurde aus Versehen ein Komma statt eines Semikolons verwendet?

+
+
var x, y = "foo",
+var x, = "foo"
+
+var first = document.getElementById('one'),
+var second = document.getElementById('two'),
+
+// SyntaxError: missing variable name
+

+
+
Die korrigierte Version:

+
+
var x, y = "foo";
+var x = "foo";
+
+var first = document.getElementById('one');
+var second = document.getElementById('two');

+
+
Arrays

+
+
{{jsxref("Array")}}-Literale in JavaScript benötigen eckige Klammern um die Werte. Folgendes funktioniert nicht:

+
+
var arr = 1,2,3,4,5;
+// SyntaxError: missing variable name
+

+
+
Richtig ist:

+
+
var arr = [1,2,3,4,5];

+
+
Siehe auch

+
+
diff --git a/files/de/web/javascript/reference/errors/non_configurable_array_element/index.html b/files/de/web/javascript/reference/errors/non_configurable_array_element/index.html
new file mode 100644
index 0000000000..771f480dda
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/non_configurable_array_element/index.html
@@ -0,0 +1,83 @@
+---
+title: 'TypeError: can''t delete non-configurable array element'
+slug: Web/JavaScript/Reference/Fehler/Non_configurable_array_element
+tags:
+  - Error
+  - Errors
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Non_configurable_array_element
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
TypeError: can't delete non-configurable array element (Firefox)
+TypeError: Cannot delete property '2' of [object Array] (Chrome)
+

+
+
Fehlertyp

+
+
{{jsxref("TypeError")}}

+
+
Was ist falsch gelaufen?

+
+
Es wurde versucht die Länge eines Arrays zu kürzen obwohl eines der Arrayelemente nicht Konfigurierbar(non-configurable) ist. Beim Kürzen eines Arrays werden die Elemente hinter der neuen Länge gelöscht, was in dieser Situation nicht funktioniert.

+
+
Das configurable Attribut kontrolliert, ob eine Eigenschaft von einem Objekt gelöscht werden kann und seine Attribute (anders als writable) geändert werden können.

+
+
Eigenschaften von einem Objekt, dass von einem Array-Initialisierer erstellt wurden, sind konfigurierbar. Immer, wenn zum Beispiel {{jsxref("Object.defineProperty()")}} eingesetzt wird, ist die Eigenschaft nicht ohne weiteres konfigurierbar.

+
+
Beispiele

+
+
Nicht konfigurierbare Eigenschaften mit Object.defineProperty erstellen

+
+
Die {{jsxref("Object.defineProperty()")}} Funktion erstellt nicht konfiguriertbare Eigenschaften wenn sie nicht extra als konfigurierbar spezifiziert sind.

+
+
var arr = [];
+Object.defineProperty(arr, 0, {value: 0});
+Object.defineProperty(arr, 1, {value: "1"});
+
+arr.length = 1;
+// TypeError: can't delete non-configurable array element
+

+
+
Die Elemente müssen als Konfigurierbar eingestellt werden, wenn das Array später im Quelltext gekürzt werden soll.

+
+
var arr = [];
+Object.defineProperty(arr, 0, {value: 0, configurable: true});
+Object.defineProperty(arr, 1, {value: "1", configurable: true});
+
+arr.length = 1;
+

+
+
Ein Array versiegeln (seal)

+
+
Die {{jsxref("Object.seal()")}} Funktion markiert alle existirenden Elements als nicht Konfugurierbar.

+
+
var arr = [1,2,3];
+Object.seal(arr);
+
+arr.length = 1;
+// TypeError: can't delete non-configurable array element
+

+
+
Man muss den Aufruf von {{jsxref("Object.seal()")}} entfernen oder ein Kopie des Arrays machen. Im fall einer Kopie führt das Kürzen des kopierten Arrays zu keiner Änderung des Original Arrays.

+
+
var arr = [1,2,3];
+Object.seal(arr);
+
+// Copy the initial array to shorten the copy
+var copy = Array.from(arr);
+copy.length = 1;
+// arr.length == 3
+

+
+
Siehe auch

+
+
    
+ 
  • [[Configurable]]
    • 
+ 
  • {{jsxref("Array.length")}}
    • 
+ 
  • {{jsxref("Object.defineProperty()")}}
    • 
+ 
  • {{jsxref("Object.seal()")}}
    • 
+

diff --git a/files/de/web/javascript/reference/errors/not_a_codepoint/index.html b/files/de/web/javascript/reference/errors/not_a_codepoint/index.html
new file mode 100644
index 0000000000..8d72c3be4b
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/not_a_codepoint/index.html
@@ -0,0 +1,55 @@
+---
+title: 'RangeError: argument is not a valid code point'
+slug: Web/JavaScript/Reference/Fehler/Not_a_codepoint
+tags:
+  - Errors
+  - JavaScript
+  - RangeError
+translation_of: Web/JavaScript/Reference/Errors/Not_a_codepoint
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
RangeError: {0} is not a valid code point (Firefox)
+RangeError: Invalid code point {0} (Chrome)
+

+
+
Fehlertyp

+
+
{{jsxref("RangeError")}}

+
+
Was ist falsch gelaufen?

+
+
Die {{jsxref("String.fromCodePoint()")}} Methode erwartet gültige Codepoint.

+
+
Ein Codepoint  ist ein Wert im Unicode Coderaum, der als Integer im Wertebereich zwischen 0 und 0x10FFFF liegt.

+
+
Die Verwendung von {{jsxref("NaN")}} , negativen Integern (-1), nicht Integern (3.14) und Werten die größer als 0x10FFFF (1114111) sind, werden einen Fehler bei dieser Methode produzieren.

+
+
Beispiele

+
+
Ungültige Fälle

+
+
String.fromCodePoint('_');      // RangeError
+String.fromCodePoint(Infinity); // RangeError
+String.fromCodePoint(-1);       // RangeError
+String.fromCodePoint(3.14);     // RangeError
+String.fromCodePoint(3e-2);     // RangeError
+String.fromCodePoint(NaN);      // RangeError

+
+
Gültige Fälle

+
+
String.fromCodePoint(42);       // "*"
+String.fromCodePoint(65, 90);   // "AZ"
+String.fromCodePoint(0x404);    // "\u0404"
+String.fromCodePoint(0x2F804);  // "\uD87E\uDC04"
+String.fromCodePoint(194564);   // "\uD87E\uDC04"
+String.fromCodePoint(0x1D306, 0x61, 0x1D307) // "\uD834\uDF06a\uD834\uDF07"
+

+
+
Siehe auch

+
+
    
+ 
  • {{jsxref("String.fromCodePoint()")}}
    • 
+

diff --git a/files/de/web/javascript/reference/errors/not_a_constructor/index.html b/files/de/web/javascript/reference/errors/not_a_constructor/index.html
new file mode 100644
index 0000000000..42858cf706
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/not_a_constructor/index.html
@@ -0,0 +1,97 @@
+---
+title: 'TypeError: "x" is not a constructor'
+slug: Web/JavaScript/Reference/Fehler/Not_a_constructor
+tags:
+  - Fehler
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Not_a_constructor
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
TypeError: "x" is not a constructor
+
+TypeError: Math is not a constructor
+TypeError: JSON is not a constructor
+TypeError: Symbol is not a constructor
+TypeError: Reflect is not a constructor
+TypeError: Intl is not a constructor
+TypeError: SIMD is not a constructor
+TypeError: Atomics is not a constructor
+

+
+
Fehlertyp

+
+
{{jsxref("TypeError")}}

+
+
Was ist falsch gelaufen?

+
+
Es wurde versucht auf ein Objekt oder eine Variable zuzugreifen welche kein Konstruktor ist. Mehr darüber, was ein Konstruktur ist, finden Sie unter {{Glossary("constructor")}} oder in der Beschreibung des new Operators.

+
+
Es gibt viele globale Objekte, wie {{jsxref("String")}} oder {{jsxref("Array")}}, welche mittels new erstellt werden können. Jedoch funktioniert das bei einigen Objekten nicht und deren Eigenschaften und Methoden sind statisch.

+
+
Die folgenden Standard build-in Objekte sind keine Konstruktoren: {{jsxref("Math")}}, {{jsxref("JSON")}}, {{jsxref("Symbol")}}, {{jsxref("Reflect")}}, {{jsxref("Intl")}}, {{jsxref("SIMD")}}, {{jsxref("Atomics")}}.

+
+
Generelle Funktionen können ebenso nicht als Konstruktor verwendet werden.

+
+
Beispiele

+
+
Ungültige Fälle

+
+
var Car = 1;
+new Car();
+// TypeError: Car is not a constructor
+
+new Math();
+// TypeError: Math is not a constructor
+
+new Symbol();
+// TypeError: Symbol is not a constructor
+
+function* f() {};
+var obj = new f;
+// TypeError: f is not a constructor
+

+
+
Ein car Konstruktor

+
+
Stellen Sie sich vor, Sie erstellen ein Objekt vom Typ vars. Sie wollen dieses Objekt als Car bezeichen und es soll Eigenschaften für make, model und year besitzt. Um dies zu erreichen, schreiben Sie die folgende Funktion:

+
+
function Car(make, model, year) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+}
+

+
+
Jetzt können Sie wie folgt ein Objekt mit dem Namen mycar erstellen:

+
+
var mycar = new Car('Eagle', 'Talon TSi', 1993);

+
+
Promises

+
+
Bei Rückgabe eines Promises, welches sofort im Status resolved oder rejected ist, brauchen Sie kein neues Promise mit new Promise(...) erstellen und damit zu arbeiten. 

+
+
Folgendes ist nicht erlaubt (der Promise Konstruktor wird nicht korrekt aufgerufen) und wirft eine TypeError: this is not a constructor Exception.

+
+
return new Promise.resolve(true);
+

+
+
Verwenden Sie stattdessen Promise.resolve() oder die statische Methode Promise.reject():

+
+
// Das ist erlaubt, aber unnötig lang:
+return new Promise((resolve, reject) => { resolve(true); })
+
+// Alternative Verwendung der statische Methoden:
+return Promise.resolve(true);
+return Promise.reject(false);
+

+
+
Siehe auch

+
+
diff --git a/files/de/web/javascript/reference/errors/not_a_function/index.html b/files/de/web/javascript/reference/errors/not_a_function/index.html
new file mode 100644
index 0000000000..a8b66dff17
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/not_a_function/index.html
@@ -0,0 +1,124 @@
+---
+title: 'TypeError: "x" is not a function'
+slug: Web/JavaScript/Reference/Fehler/Not_a_function
+tags:
+  - Errors
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Not_a_function
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
TypeError: "x" is not a function
+

+
+
Fehlertyp

+
+
{{jsxref("TypeError")}}.

+
+
Was ist falsch gelaufen?

+
+
Es wird versucht, ein Wert wie eine Funktion aufzurufen, da aber der Wert eigentlich keine Funktion ist, kommt es zu diesem Fehler. Manchmal erwartet das Programm, dass eine Funktion erstellt wird, was aber nicht der Fall ist.

+
+
Vielleicht ist ein Tippfehler im Funktionsnamen. Manchmal besitzt das aufgerufene Objekt eine Funktion aber auch nicht. Zum Beispiel besitzen JavaScript Objekte keine map Funktion, aber JavaScript Arrays haben diese Funktion.

+
+
Es gibt viele eingebaute Funktionen, die eine (Callback-) Funktion benötigen. Es muss eine Funktion bereitgestellt werden, damit diese Methoden normal funktionieren:

+
+
    
+ 
  • Wenn mit {{jsxref("Array")}} oder {{jsxref("TypedArray")}} Objekten gearbeitet wird:
+  
      
+   
    • {{jsxref("Array.prototype.every()")}}, {{jsxref("Array.prototype.some()")}}, {{jsxref("Array.prototype.forEach()")}}, {{jsxref("Array.prototype.map()")}}, {{jsxref("Array.prototype.filter()")}}, {{jsxref("Array.prototype.reduce()")}}, {{jsxref("Array.prototype.reduceRight()")}}, {{jsxref("Array.prototype.find()")}}
      • 
+  
    
+ 
    • 
+ 
  • Wenn mit {{jsxref("Map")}} und {{jsxref("Set")}} Objekten gearbeitet wird:
+  
      
+   
    • {{jsxref("Map.prototype.forEach()")}} und {{jsxref("Set.prototype.forEach()")}}
      • 
+  
    
+ 
    • 
+

+
+
Beispiele

+
+
Ein Schreibfehler im Funktionsnamen

+
+
In diesem Fall passiert es viel zu oft, dass im Name ein Schreibfehler enthält:

+
+
var x = document.getElementByID('foo');
+// TypeError: document.getElementByID is not a function
+

+
+
Der korrekte Funktionsname ist getElementById:

+
+
var x = document.getElementById('foo');
+

+
+
Funktion wird auf dem falschen Objekt aufgerufen

+
+
Für bestimmte Methoden musst eine (callback) Funktion benutzt werden, die nur bei spezifizierten Objekten funktionieren. In diesem Beispiel wird {{jsxref("Array.prototype.map()")}} verwendet, welche nur mit {{jsxref("Array")}} Objekten funktioniert.

+
+
var obj = {a: 13, b: 37, c: 42};
+
+obj.map(function(num) {
+  return num * 2;
+});
+
+// TypeError: "x" is not a function

+
+
Stattdessen muss ein Array verwendet werden:

+
+
var numbers = [1, 4, 9];
+
+numbers.map(function(num) {
+  return num * 2;
+});
+
+// Array [2, 8, 18]
+

+
+
Funktionen teilen einen Namen mit einer existierenden Eigenschaft

+
+
Manchmal, wenn eine Klasse geschrieben wird, haben eine Eigenschaft und eine Funktion den gleichen Namen. Nach dem Aufruf der Funktion denkt der Compiler, dass die Funktion nicht mehr existiert.

+
+
var Dog = function () {
+ this.age = 11;
+ this.color = "black";
+ this.name = "Ralph";
+ return this;
+}
+
+Dog.prototype.name = function(name) {
+ this.name = name;
+ return this;
+}
+
+
+var myNewDog = new Dog();
+myNewDog.name("Cassidy"); //Uncaught TypeError: myNewDog.name is not a function
+

+
+
Stattdessen kann ein anderer Eigenschaftsname benutzt werden:

+
+
var Dog = function () {
+ this.age = 11;
+ this.color = "black";
+ this.dogName = "Ralph"; //Using this.dogName instead of .name
+ return this;
+}
+
+Dog.prototype.name = function(name) {
+ this.dogName = name;
+ return this;
+}
+
+
+var myNewDog = new Dog();
+myNewDog.name("Cassidy"); //Dog { age: 11, color: 'black', dogName: 'Cassidy' }
+

+
+
Siehe auch

+
+
diff --git a/files/de/web/javascript/reference/errors/not_defined/index.html b/files/de/web/javascript/reference/errors/not_defined/index.html
new file mode 100644
index 0000000000..030c47536b
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/not_defined/index.html
@@ -0,0 +1,70 @@
+---
+title: 'ReferenceError: "x" is not defined'
+slug: Web/JavaScript/Reference/Fehler/Not_defined
+tags:
+  - Error
+  - JavaScript
+  - ReferenceError
+translation_of: Web/JavaScript/Reference/Errors/Not_defined
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
ReferenceError: "x" is not defined
+

+
+
Fehlertyp

+
+
{{jsxref("ReferenceError")}}.

+
+
Was ist falsch gelaufen?

+
+
Es gibt eine Referenz auf eine Variable, die nicht existiert. Diese Variable muss deklariert werden; oder man muss sicherstellen, dass sie im Skript zugänglich ist; oder sich im aktuellen {{Glossary("scope")}} befindet.

+
+

+
Hinweis: Wenn Sie eine Bibliothek nutzen (wie z.B. jQuery), stellen Sie sicher, dass diese tatsächlich geladen ist, bevor Sie auf dessen Variablen (z. B. "$") zugreifen. Schreiben Sie das {{HTMLElement("script")}} Element, welches die Bibliothek lädt vor den Code, der die Bibliothek verwendet.

+

+
+
Beispiele

+
+
Variable nicht deklariert

+
+
foo.substring(1); // ReferenceError: foo is not defined
+

+
+
Die "foo" Variable ist nirgends deklariert. Die Variable muss ein String sein, damit die Methode {{jsxref("String.prototype.substring()")}} funktioniert.

+
+
var foo = "bar";
+foo.substring(1); // "ar"

+
+
Falscher Gültigkeitsbereich

+
+
Eine Variable muss im aktuellem Kontext verfügbar sein. Variablen, die innerhalb einer Funktion definiert sind, können nicht von außerhalb erreicht werden, da diese nur im Gültigkeitsbereich der Funktion existieren.

+
+
function numbers() {
+  var num1 = 2,
+      num2 = 3;
+  return num1 + num2;
+}
+
+console.log(num1); // ReferenceError "num1" is not defined.

+
+
Wobei aus einer Methode kann man auf alle Variablen und Methoden zugreifen, die im gleichen Gültigkeitsbereich definiert worden sind. Kurz gesagt, eine Methode, die im globalen Gültigkeitsbereich definiert worden ist, kann auf alle Variablen zugreifen, die im globalen Gültigkeitsbereich definiert wurden.

+
+
var num1 = 2,
+    num2 = 3;
+
+function numbers() {
+  return num1 + num2;
+}
+
+console.log(numbers()); // 5

+
+
Siehe auch

+
+
diff --git a/files/de/web/javascript/reference/errors/precision_range/index.html b/files/de/web/javascript/reference/errors/precision_range/index.html
new file mode 100644
index 0000000000..d03b4203c5
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/precision_range/index.html
@@ -0,0 +1,96 @@
+---
+title: 'RangeError: precision is out of range'
+slug: Web/JavaScript/Reference/Fehler/Precision_range
+tags:
+  - Errors
+  - JavaScript
+  - RangeError
+translation_of: Web/JavaScript/Reference/Errors/Precision_range
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
RangeError: precision {0} out of range (Firefox)
+RangeError: toExponential() argument must be between 0 and 20 (Chrome)
+RangeError: toFixed() digits argument must be between 0 and 20 (Chrome)
+RangeError: toPrecision() argument must be between 1 and 21 (Chrome)
+

+
+
Fehlertyp

+
+
{{jsxref("RangeError")}}

+
+
Was ist falsch gelaufen?

+
+
Das übergebene Argument für die Genauigkeit ist, für einer der folgenden Funktionen, ausserhalb des gültigen Bereiches:

+
+
    
+ 
  • {{jsxref("Number.prototype.toExponential()")}}
    • 
+ 
  • {{jsxref("Number.prototype.toFixed()")}}
    • 
+ 
  • {{jsxref("Number.prototype.toPrecision()")}}
    • 
+

+
+
Der gülitge Bereich für diese Methoden liegt im normal Fall zwischen 0 und 20 (oder 21). Wobei die ECMAScript Spezifikation erlaubt eine Erweiterung de Bereiches.

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
MethodFirefox (SpiderMonkey)Chrome, Opera (V8)
{{jsxref("Number.prototype.toExponential()")}}0 bis 1000 bis 20
{{jsxref("Number.prototype.toFixed()")}}-20 bis1000 bis 20
{{jsxref("Number.prototype.toPrecision()")}}1 bis 1001 bis 21

+
+
Beispiele

+
+
Ungültige Fälle

+
+
77.1234.toExponential(-1);  // RangeError
+77.1234.toExponential(101); // RangeError
+
+2.34.toFixed(-100);         // RangeError
+2.34.toFixed(1001);         // RangeError
+
+1234.5.toPrecision(-1);     // RangeError
+1234.5.toPrecision(101);    // RangeError
+

+
+
Gültige Fälle

+
+
77.1234.toExponential(4); // 7.7123e+1
+77.1234.toExponential(2); // 7.71e+1
+
+2.34.toFixed(1); // 2.3
+2.35.toFixed(1); // 2.4 (zu beachten ist, das in diesem Fall aufgerundet wird)
+
+5.123456.toPrecision(5); // 5.1235
+5.123456.toPrecision(2); // 5.1
+5.123456.toPrecision(1); // 5
+

+
+
Siehe auch

+
+
    
+ 
  • {{jsxref("Number.prototype.toExponential()")}}
    • 
+ 
  • {{jsxref("Number.prototype.toFixed()")}}
    • 
+ 
  • {{jsxref("Number.prototype.toPrecision()")}}
    • 
+

diff --git a/files/de/web/javascript/reference/errors/property_access_denied/index.html b/files/de/web/javascript/reference/errors/property_access_denied/index.html
new file mode 100644
index 0000000000..d4feb4feb7
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/property_access_denied/index.html
@@ -0,0 +1,47 @@
+---
+title: 'Error: Permission denied to access property "x"'
+slug: Web/JavaScript/Reference/Fehler/Property_access_denied
+tags:
+  - Error
+  - Errors
+  - JavaScript
+  - Security
+translation_of: Web/JavaScript/Reference/Errors/Property_access_denied
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
Error: Permission denied to access property "x"
+

+
+
Fehlertyp

+
+
{{jsxref("Error")}}.

+
+
Was ist falsch gelaufen?

+
+
Es wurde versucht auf ein Objekt zuzugreifen, wofür man nicht ausreichend berechtig ist. In den meisten Fällen handelt es sich um ein {{HTMLElement("iframe")}} Element, das von einer anderen Domäne geladen wurde und die Same-Origin Policy verletzt.

+
+
Beispiele

+
+
<!DOCTYPE html>
+<html>
+  <head>
+    <iframe id="myframe" src="http://www1.w3c-test.org/common/blank.html"></iframe>
+    <script>
+      onload = function() {
+        console.log(frames[0].document);
+        // Error: Permission denied to access property "document"
+      }
+    </script>
+  </head>
+  <body></body>
+</html>

+
+
Siehe auch

+
+
diff --git a/files/de/web/javascript/reference/errors/read-only/index.html b/files/de/web/javascript/reference/errors/read-only/index.html
new file mode 100644
index 0000000000..bb56305880
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/read-only/index.html
@@ -0,0 +1,78 @@
+---
+title: 'TypeError: "x" is read-only'
+slug: Web/JavaScript/Reference/Fehler/Read-only
+tags:
+  - Errors
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Read-only
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
TypeError: "x" is read-only (Firefox)
+TypeError: 0 is read-only (Firefox)
+TypeError: Cannot assign to read only property 'x' of #<Object> (Chrome)
+TypeError: Cannot assign to read only property '0' of [object Array] (Chrome)
+

+
+
Fehlertyp

+
+
{{jsxref("TypeError")}}

+
+
Was ist falsch gelaufen?

+
+
Die globale Variable oder Objekteigenschaften werden als nur lesbare Eigenschaften definiert (technisch wird das mit der writable Eigenschaft erreicht).

+
+
Der Fehler tritt nur im strict mode auf. Im normalen Modus wird eine Zuweisung still ignoriert.

+
+
Beispiele

+
+
Nicht valide Fälle

+
+
Nur lesbare Eigenschaften sind nicht sehr weit verbreitet, aber sie können mit {{jsxref("Object.defineProperty()")}} oder {{jsxref("Object.freeze()")}} erstellt werden.

+
+
'use strict';
+var obj = Object.freeze({name: 'Elsa', score: 157});
+obj.score = 0;  // TypeError
+
+'use strict';
+Object.defineProperty(this, 'LUNG_COUNT', {value: 2, writable: false});
+LUNG_COUNT = 3;  // TypeError
+
+'use strict';
+var frozenArray = Object.freeze([0, 1, 2]);
+frozenArray[0]++;  // TypeError
+

+
+
Zudem gibt es ein paar standard Eigenschaft in JavaScript, die nicht überschrieben werden können. Da währen zum Beispiel mathematische Konstanten.

+
+
'use strict';
+Math.PI = 4;  // TypeError
+

+
+
Die globale Variable undefined ist auch nur lesbar, sodass der berüchtigte Fehler "undefined is not a function" nicht wie folgt umgangen werden kann:

+
+
'use strict';
+undefined = function() {};  // TypeError: "undefined" is read-only
+

+
+
Valide Fälle

+
+
'use strict';
+var obj = Object.freeze({name: 'Score', points: 157});
+obj = {name: obj.name, points: 0};   // replacing it with a new object works
+
+'use strict';
+var LUNG_COUNT = 2;  // a `var` works, because it's not read-only
+LUNG_COUNT = 3;  // ok (anatomically unlikely, though)
+

+
+
Siehe auch

+
+
diff --git a/files/de/web/javascript/reference/errors/redeclared_parameter/index.html b/files/de/web/javascript/reference/errors/redeclared_parameter/index.html
new file mode 100644
index 0000000000..e80836e50f
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/redeclared_parameter/index.html
@@ -0,0 +1,61 @@
+---
+title: 'SyntaxError: redeclaration of formal parameter "x"'
+slug: Web/JavaScript/Reference/Fehler/Redeclared_parameter
+tags:
+  - Errors
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Redeclared_parameter
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
SyntaxError: redeclaration of formal parameter "x" (Firefox)
+SyntaxError: Identifier "x" has already been declared (Chrome)
+

+
+
Fehlertyp

+
+
{{jsxref("SyntaxError")}}

+
+
Was ist falsch gelaufen?

+
+
Der selbe Variablenname wird für einen Funktionsparameter benutzt und dann in einer let Zuweisung im Funktionskörper wieder neu deklariert. Das Neudeklarieren der gleichen Variablen in der selben Funktion oder im selben Block mit let ist in JavaScript nicht erlaubt.

+
+
Beispiele

+
+
In diesem Fall wird der Parameter "arg" neu deklariert.

+
+
function f(arg) {
+  let arg = 'foo';
+}
+
+// SyntaxError: redeclaration of formal parameter "arg"
+

+
+
Wenn der Wert von "arg" im Funktionskörper geändert werden soll, kann das getan werden, aber ohne die selbe Variable neu zu deklarieren. Oder anders gesagt, man kann das let Schlüsselwort weg lassen. Wenn eine neue Variable erstellt werden soll, muss sie umbenannt werden, damit es keine Konflikte mit dem Funktionsparameter mehr gibt.

+
+
function f(arg) {
+  arg = 'foo';
+}
+
+function f(arg) {
+  let bar = 'foo';
+}
+

+
+
Kompatibilitätshinweise

+
+
    
+ 
  • Vor Firefox 49 {{geckoRelease(49)}}, wurde ein {{jsxref("TypeError")}} erzeugt ({{bug(1275240)}}).
    • 
+

+
+
Siehe auch

+
+
diff --git a/files/de/web/javascript/reference/errors/reduce_of_empty_array_with_no_initial_value/index.html b/files/de/web/javascript/reference/errors/reduce_of_empty_array_with_no_initial_value/index.html
new file mode 100644
index 0000000000..a1a9a43748
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/reduce_of_empty_array_with_no_initial_value/index.html
@@ -0,0 +1,88 @@
+---
+title: 'TypeError: Reduce of empty array with no initial value'
+slug: Web/JavaScript/Reference/Fehler/Reduce_of_empty_array_with_no_initial_value
+tags:
+  - Error
+  - JavaScript
+  - Reference
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Reduce_of_empty_array_with_no_initial_value
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
TypeError: reduce of empty array with no initial value
+

+
+
Fehlertyp

+
+
{{jsxref("TypeError")}}

+
+
Was ist falsch gelaufen?

+
+
In JavaScript gibt es einige Reduktionsfunktionen:

+
+
    
+ 
  • {{jsxref("Array.prototype.reduce()")}}, {{jsxref("Array.prototype.reduceRight()")}} und
    • 
+ 
  • {{jsxref("TypedArray.prototype.reduce()")}},  {{jsxref("TypedArray.prototype.reduceRight()")}}).
    • 
+

+
+
Diese Funktionen haben den optionalen initialValue Parameter (welcher als erster Parameter beim ersten Aufruf der callback Funktion benutzt wird). Immer, wenn dieser Wert nicht angegeben wird, wird das erste Element des {{jsxref("Array", "Arrays")}} oder {{jsxref("TypedArray", "TypedArrays")}} als Initialwert benutzt. Dieser Fehler tritt auf, wenn das Array leer ist, weil es in diesem Fall keinen Initialwert gibt.

+
+
Beispiele

+
+
Nicht valide Fälle

+
+
Dieses Problem tritt öfter bei einer Kombination mit einem Filter ({{jsxref("Array.prototype.filter()")}}, {{jsxref("TypedArray.prototype.filter()")}}), welcher Elemente aus der Liste entfernt. Dieser lässt kein Element als Initialwert in der Liste zurück.

+
+
var ints = [0, -1, -2, -3, -4, -5];
+ints.filter(x => x > 0)         // Entfernt alle Elemente
+    .reduce((x, y) => x + y)    // no more elements to use for the initial value.

+
+
Der gleiche Fehler kann bei einem Tippfehler passieren oder, bei einer unerwarteten Anzahl von Elementen in einer Liste.

+
+
var names = document.getElementsByClassName("names");
+var name_list = Array.prototype.reduce.call(names, (acc, name) => acc + ", " + name);
+

+
+
Valide Fälle

+
+
Diese Problem kann mit zwei Wegen gelöst werden.

+
+
Ein Weg ist es, einen initialValue als neutrales Element des Operators anzugeben, so wie 0 bei der Addition, 1 bei der Multiplikation oder ein leerer String bei einer Konkatination.

+
+
var ints = [0, -1, -2, -3, -4, -5];
+ints.filter(x => x < 0)         // removes all elements
+    .reduce((x, y) => x + y, 0) // the initial value is the neutral element of the addition
+

+
+
Ein anderer Weg ist es den Fall eines leeren Arrays schon vor dem Aufruf von reduce zu behandeln oder einen Dummywert als Initialwert in der callback-Funktion zu benutzen.

+
+
var names = document.getElementsByClassName("names");
+
+var name_list1 = "";
+if (names1.length >= 1)
+  name_list1 = Array.prototype.reduce.call(names, (acc, name) => acc + ", " + name);
+// name_list1 == "" when names is empty.
+
+var name_list2 = Array.prototype.reduce.call(names, (acc, name) => {
+  if (acc == "") // initial value
+    return name;
+  return acc + ", " + name;
+}, "");
+// name_list2 == "" when names is empty.
+

+
+
Siehe auch

+
+
    
+ 
  • {{jsxref("Array.prototype.reduce()")}}
    • 
+ 
  • {{jsxref("Array.prototype.reduceRight()")}}
    • 
+ 
  • {{jsxref("TypedArray.prototype.reduce()")}}
    • 
+ 
  • {{jsxref("TypedArray.prototype.reduceRight()")}}
    • 
+ 
  • {{jsxref("Array")}}
    • 
+ 
  • {{jsxref("TypedArray")}}
    • 
+ 
  • {{jsxref("Array.prototype.filter()")}}
    • 
+ 
  • {{jsxref("TypedArray.prototype.filter()")}}
    • 
+

diff --git a/files/de/web/javascript/reference/errors/reserved_identifier/index.html b/files/de/web/javascript/reference/errors/reserved_identifier/index.html
new file mode 100644
index 0000000000..a483f4cd1a
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/reserved_identifier/index.html
@@ -0,0 +1,80 @@
+---
+title: 'SyntaxError: "x" is a reserved identifier'
+slug: Web/JavaScript/Reference/Fehler/Reserved_identifier
+tags:
+  - Error
+  - Errors
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Reserved_identifier
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
SyntaxError: "x" is a reserved identifier (Firefox)
+SyntaxError: Unexpected reserved word (Chrome)

+
+
Fehlertyp

+
+
{{jsxref("SyntaxError")}}

+
+
Was ist falsch gelaufen?

+
+
Reservierte Schlüsselwörter führen zu einem Fehler, wenn sie als Bezeichner verwendet werden. Im Strict Mode und im Normalen Mode führen folgende Schlüsselwörter zu einem Fehler:

+
+
    
+ 
  • enum
    • 
+

+
+
Die folgenden Schlüsselwörter führen nur im Strict Mode zu einem Fehler:

+
+
    
+ 
  • implements
    • 
+ 
  • interface
    • 
+ 
  • {{jsxref("Statements/let", "let")}}
    • 
+ 
  • package
    • 
+ 
  • private
    • 
+ 
  • protected
    • 
+ 
  • public
    • 
+ 
  • static
    • 
+

+
+
Beispiele

+
+
Reservierte Schlüsselwörter im Strict und Normalen Mode

+
+
Derenum Bezeichner ist generell reserviert.

+
+
var enum = { RED: 0, GREEN: 1, BLUE: 2 };
+// SyntaxError: enum is a reserved identifier
+

+
+
Im Strict Mode sind weitere Bezeichner reserviert.

+
+
"use strict";
+var package = ["potatoes", "rice", "fries"];
+// SyntaxError: package is a reserved identifier
+

+
+
Man muss die Variablen umbenennen.

+
+
var colorEnum = { RED: 0, GREEN: 1, BLUE: 2 };
+var list = ["potatoes", "rice", "fries"];

+
+
Ältere Browser aktualisieren

+
+
Wenn ein alter Browser eingesetzt wird, der zum Beispiel noch nicht let oder class implementiert, muss der Browser aktualisiert werden, so dass er diese neuen Sprachfunktionen unterstützt.

+
+
"use strict";
+class DocArchiver {}
+
+// SyntaxError: class is a reserved identifier
+// (throws in older browsers only, e.g. Firefox 44 and older)
+

+
+
Siehe auch

+
+
diff --git a/files/de/web/javascript/reference/errors/resulting_string_too_large/index.html b/files/de/web/javascript/reference/errors/resulting_string_too_large/index.html
new file mode 100644
index 0000000000..e3f0246d13
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/resulting_string_too_large/index.html
@@ -0,0 +1,49 @@
+---
+title: 'RangeError: repeat count must be less than infinity'
+slug: Web/JavaScript/Reference/Fehler/Resulting_string_too_large
+tags:
+  - Errors
+  - JavaScript
+  - RangeError
+translation_of: Web/JavaScript/Reference/Errors/Resulting_string_too_large
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
RangeError: repeat count must be less than infinity and not overflow maximum string size (Firefox)
+
+RangeError: Invalid count value (Chrome)
+

+
+
Fehlertyp

+
+
{{jsxref("RangeError")}}

+
+
Was ist falsch gelaufen?

+
+
Die {{jsxref("String.prototype.repeat()")}} Methode wurde benutzt. Sie hat einen count Parameter welche die Anzahl der Wiederholungen des Strings angibt. Dieser muss zwischen 0 und kleiner positiv {{jsxref("Infinity")}} sein und kann nicht negativ sein. Das erlaubte Intervall kann wie folgt beschrieben werden: [0, +∞).

+
+
Der Ergebnisstring kann zudem nicht länger als die maximale Stringlänge sein, welche sich je nach JavaScript-Umgebung unterscheiden kann. In Firefox (SpiderMonkey) ist die maximale Stringlänge 228 -1 (0xFFFFFFF).

+
+
Beispiele

+
+
Falsche Fälle

+
+
'abc'.repeat(Infinity); // RangeError
+'a'.repeat(2**28);      // RangeError
+

+
+
Richtige Fälle

+
+
'abc'.repeat(0);    // ''
+'abc'.repeat(1);    // 'abc'
+'abc'.repeat(2);    // 'abcabc'
+'abc'.repeat(3.5);  // 'abcabcabc' (count will be converted to integer)
+

+
+
Siehe auch

+
+
    
+ 
  • {{jsxref("String.prototype.repeat()")}}
    • 
+

diff --git a/files/de/web/javascript/reference/errors/stmt_after_return/index.html b/files/de/web/javascript/reference/errors/stmt_after_return/index.html
new file mode 100644
index 0000000000..be395c3b83
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/stmt_after_return/index.html
@@ -0,0 +1,77 @@
+---
+title: 'Warning: unreachable code after return statement'
+slug: Web/JavaScript/Reference/Fehler/Stmt_after_return
+tags:
+  - JavaScript
+  - Warning
+translation_of: Web/JavaScript/Reference/Errors/Stmt_after_return
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
Warning: unreachable code after return statement (Firefox)
+

+
+
Fehlertyp

+
+
Warnung

+
+
Was ist falsch gelaufen?

+
+
Nicht erreichbarer Code nach einem return Statement tritt in folgenden Fällen auf:

+
+
    
+ 
  • Wenn eine weitere Anweisung nach einer {{jsxref("Statements/return", "return")}} Anweisung folgt oder
    • 
+ 
  • wenn man eine {{jsxref("Statements/return", "return")}} Anweisung ohne abschließendes Semikolon verwendet und anschließend eine weiteren Anweisung angibt.
    • 
+

+
+
Wenn eine Anweisung nach einer gültigen return Anweisung existiert, dann wird diese Warnmeldung ausgegeben, um aufzuzeigen, das der nachfolgende Quellcode nie ausgeführt wird.

+
+
Warum sollte man Semikolons am Ende einer return Anweisung verwenden? Da im Falle einer return Anweisung ohne Semikolon, die Absicht des Entwicklers nicht klar ist. Es stellt sich die Frage, ob die Anweisung nach dem return als Rückgabewert der Methode zu sehen ist, oder sollte die Ausführung gleich beim return beendet werden. Hier zeigt die Warnung an, dass es sich um einen uneindeutige Situation handelt.

+
+
Warnungen werden nicht erzeugt wenn nach einem semikolonlosen return folgende Anweisungen folgen:

+
+
    
+ 
  • {{jsxref("Statements/throw", "throw")}}
    • 
+ 
  • {{jsxref("Statements/break", "break")}}
    • 
+ 
  • {{jsxref("Statements/var", "var")}}
    • 
+ 
  • {{jsxref("Statements/function", "function")}}
    • 
+

+
+
Beispiele

+
+
Fehlerfälle

+
+
function f() {
+  var x = 3;
+  x += 4;
+  return x;   // die return Anweisung beendet die Methode sofort.
+  x -= 3;     // somit ist dieser Code nicht erreichbar und wird nie ausgeführt
+}
+
+function f() {
+  return     // diese Zeile ist äquivalent zu `return;`
+    3 + 4;   // somit kann diese Code-Zeile nie erreicht werden
+}
+

+
+
Gültige Fälle

+
+
function f() {
+  var x = 3;
+  x += 4;
+  x -= 3;
+  return x;  // OK: return ist die letzte Anweisung in der Methode
+}
+
+function f() {
+  return 3 + 4  // OK: return ohne Semikolon, aber mit einem Ausdruck auf der gleiche Zeile
+}
+

+
+
Siehe auch

+
+
    
+ 
  • {{jsxref("Statements/return", "Automatic Semicolon Insertion", "#Automatic_Semicolon_Insertion", 1)}}
    • 
+

diff --git a/files/de/web/javascript/reference/errors/strict_non_simple_params/index.html b/files/de/web/javascript/reference/errors/strict_non_simple_params/index.html
new file mode 100644
index 0000000000..a288a81a10
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/strict_non_simple_params/index.html
@@ -0,0 +1,111 @@
+---
+title: 'SyntaxError: "use strict" not allowed in function with non-simple parameters'
+slug: Web/JavaScript/Reference/Fehler/Strict_Non_Simple_Params
+tags:
+  - Errors
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Strict_Non_Simple_Params
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
Firefox:
+SyntaxError: "use strict" not allowed in function with default parameter
+SyntaxError: "use strict" not allowed in function with rest parameter
+SyntaxError: "use strict" not allowed in function with destructuring parameter
+
+Chrome:
+SyntaxError: Illegal 'use strict' directive in function with non-simple parameter list
+

+
+
Fehlertyp

+
+
{{jsxref("SyntaxError")}}.

+
+
Was ist falsch gelaufen?

+
+
Eine "use strict" Direktive steht am Anfang einer Funktion, die einen der folgende Parameter hat:

+
+
    
+ 
  • {{jsxref("Functions/Default_parameters", "Standardparameter", "", 1)}}
    • 
+ 
  • {{jsxref("Functions/rest_parameters", "Rest Parameter", "", 1)}}
    • 
+ 
  • {{jsxref("Operators/Destructuring_assignment", "Destrukturierte Parameter", "", 1)}}
    • 
+

+
+
Eine "use strict" Direktive ist am Anfang solcher Funktionen durch die ECMAScript Spezifikation nicht erlaubt.

+
+
Beispiele

+
+
Funktionsstatement

+
+
In diesem Fall hat die Funktion sum zwei Standardparameter a=1 und b=2:

+
+
function sum(a = 1, b = 2) {
+  // SyntaxError: "use strict" not allowed in function with default parameter
+  'use strict';
+  return a + b;
+}
+

+
+
Wenn die Funktion im Strict Mode sein soll und das Skript oder die umschließende FUnktion auch für den Strict Mode in Ordnung ist, kann man die "use strict" Direktive nach außen verschieben:

+
+
'use strict';
+function sum(a = 1, b = 2) {
+  return a + b;
+}
+

+
+
Funktionsausdruck

+
+
Bei eine Funktionsausdruck kann ein andere Workaround genutzt werden:

+
+
var sum = function sum([a, b]) {
+  // SyntaxError: "use strict" not allowed in function with destructuring parameter
+  'use strict';
+  return a + b;
+};
+

+
+
Dieses kann zu folgendem Ausdruck konvertiert werden:

+
+
var sum = (function() {
+  'use strict';
+  return function sum([a, b]) {
+    return a + b;
+  };
+})();
+

+
+
Pfeilfunktionen

+
+
Wenn eine Pfeilfunktion auf die this Variable zugreift, so kann eine umschließende Pfeilfunktion benutzt werden:

+
+
var callback = (...args) => {
+  // SyntaxError: "use strict" not allowed in function with rest parameter
+  'use strict';
+  return this.run(args);
+};
+

+
+
Dieses kann zu folgendem Ausdruck konvertiert werden:

+
+
var callback = (() => {
+  'use strict';
+  return (...args) => {
+    return this.run(args);
+  };
+})();
+

+
+
Siehe auch

+
+
    
+ 
  • {{jsxref("Strict_mode", "Strict mode", "", 1)}}
    • 
+ 
  • {{jsxref("Statements/function", "function statement", "", 1)}}
    • 
+ 
  • {{jsxref("Operators/function", "function expression", "", 1)}}
    • 
+ 
  • {{jsxref("Functions/Default_parameters", "Default parameters", "", 1)}}
    • 
+ 
  • {{jsxref("Functions/rest_parameters", "Rest parameters", "", 1)}}
    • 
+ 
  • {{jsxref("Operators/Destructuring_assignment", "Destructuring parameters", "", 1)}}
    • 
+

diff --git a/files/de/web/javascript/reference/errors/too_much_recursion/index.html b/files/de/web/javascript/reference/errors/too_much_recursion/index.html
new file mode 100644
index 0000000000..0010afd90a
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/too_much_recursion/index.html
@@ -0,0 +1,54 @@
+---
+title: 'InternalError: too much recursion'
+slug: Web/JavaScript/Reference/Fehler/Too_much_recursion
+tags:
+  - Errors
+  - InternalError
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Errors/Too_much_recursion
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
InternalError: too much recursion
+

+
+
Fehlertyp

+
+
{{jsxref("InternalError")}}.

+
+
Was ist falsch gelaufen?

+
+
Eine Funktion, die sich selbst aufruft, wird rekursive Funktion genannt. In manchen Fällen ist Rekursion mit einer Schleife vergleichbar. Beide führen den gleichen Code mehrfach aus und beide brauchen eine Abbruchbedingung (um Endlosschleifen bzw. Endlosrekursion zu vermeiden). Wenn zu tiefe Rekursion oder Endlosrekursion auftritt, erzeugt JavaScript diesen Fehler.

+
+
Beispiele

+
+
Diese rekursive Methode wird bis zur Abbruchbedingung 10 mal durchlaufen.

+
+
function schleife(x) {
+  if (x >= 10) // "x >= 10" ist die Abbruchsbedingung
+    return;
+  // zu wiederholende Codezeilen
+  schleife(x + 1); // rekursiver Methodenaufruf
+}
+schleife(0);

+
+
Wird die Abbruchsbedingung auf eine zu hohe Wert gesetzt, ist die Rekursionstiefe zu hoch und es wird einen Fehler erzeugt:

+
+
function boeseSchleife(x) {
+  if (x >= 1000000000000)
+    return;
+  // zu wiederholende Codezeilen
+  boeseSchleife(x + 1);
+}
+boeseSchleife(0);
+
+// InternalError: too much recursion

+
+
Siehe auch

+
+
diff --git a/files/de/web/javascript/reference/errors/typed_array_invalid_arguments/index.html b/files/de/web/javascript/reference/errors/typed_array_invalid_arguments/index.html
new file mode 100644
index 0000000000..2e7fa8f0b3
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/typed_array_invalid_arguments/index.html
@@ -0,0 +1,77 @@
+---
+title: 'TypeError: invalid arguments'
+slug: Web/JavaScript/Reference/Fehler/Typed_array_invalid_arguments
+tags:
+  - Error
+  - Errors
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Typed_array_invalid_arguments
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
TypeError: invalid arguments (Firefox)

+
+
Fehlertyp

+
+
{{jsxref("TypeError")}}

+
+
Was ist falsch gelaufen?

+
+
Der Typed Array Konstruktor erwartet entweder

+
+
    
+ 
  • eine Länge,
    • 
+ 
  • ein anderes Typed Array,
    • 
+ 
  • Array ähnliche Objete,
    • 
+ 
  • iterierbare Objekte oder
    • 
+ 
  • ein {{jsxref("ArrayBuffer")}} Objekt,
    • 
+

+
+
um ein neues Typed Array zu erstelltn. Andere Argumente im Konstruktor erstellen kein valides Typed Array.

+
+
Beispiele

+
+
Typed Arrays, zum Beispiel ein {{jsxref("Uint8Array")}}, können nicht von einem String erstellt werden. Tatsächlich können String nicht in typisierten Arrays enthalten sein.

+
+
var ta = new Uint8Array("nope");
+// TypeError: invalid arguments
+

+
+
Verschiedene Wege um ein valides {{jsxref("Uint8Array")}} Objekt zu erstellen:

+
+
// From a length
+var uint8 = new Uint8Array(2);
+uint8[0] = 42;
+console.log(uint8[0]); // 42
+console.log(uint8.length); // 2
+console.log(uint8.BYTES_PER_ELEMENT); // 1
+
+// From an array
+var arr = new Uint8Array([21,31]);
+console.log(arr[1]); // 31
+
+// From another TypedArray
+var x = new Uint8Array([21, 31]);
+var y = new Uint8Array(x);
+console.log(y[0]); // 21
+
+// From an ArrayBuffer
+var buffer = new ArrayBuffer(8);
+var z = new Uint8Array(buffer, 1, 4);
+
+// From an iterable
+var iterable = function*(){ yield* [1,2,3]; }();
+var uint8 = new Uint8Array(iterable);
+// Uint8Array[1, 2, 3]
+

+
+
Siehe auch

+
+
    
+ 
  • Typed arrays
    • 
+ 
  • {{jsxref("ArrayBuffer")}}
    • 
+ 
  • {{jsxref("Uint8Array")}}
    • 
+

diff --git a/files/de/web/javascript/reference/errors/undeclared_var/index.html b/files/de/web/javascript/reference/errors/undeclared_var/index.html
new file mode 100644
index 0000000000..b7c8b09165
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/undeclared_var/index.html
@@ -0,0 +1,67 @@
+---
+title: 'ReferenceError: assignment to undeclared variable "x"'
+slug: Web/JavaScript/Reference/Fehler/Undeclared_var
+tags:
+  - Errors
+  - JavaScript
+  - ReferenceError
+  - Strict Mode
+translation_of: Web/JavaScript/Reference/Errors/Undeclared_var
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
ReferenceError: assignment to undeclared variable "x" (Firefox)
+ReferenceError: "x" is not defined (Chrome)
+ReferenceError: Variable undefined in strict mode (Edge)
+

+
+
Fehlertyp

+
+
{{jsxref("ReferenceError")}} Warnung nur im Strict mode.

+
+
Was ist falsch gelaufen?

+
+
Ein Wert wurde zu einer nicht deklarierten Variablen hinzugefügt. Oder mit anderen Worten, es gibt eine Zuweisung ohne das Schlüsselwort var. Es gibt einige Unterschiede zwischen deklarierten und nicht deklarierten Variablen, die zu unerwarteten Ergebnissen führen kann und weshalb der Fehler im Strict Mode erscheint.

+
+
Drei Dinge über deklarierte und nicht deklarierte Variablen:

+
+
    
+ 
  • Deklarierte Variablen gehören zu dem Ausführungskontext, in dem sie deklariert werden. Nicht deklarierte Variablen sind immer global.
    • 
+ 
  • Deklarierte Variablen werden erstellt bevor Code ausgeführt wird. Nicht deklarierte Variablen existieren erst, wenn der zugehörige Code ausgeführt wird.
    • 
+ 
  • Deklarierte Variablen sind eine nicht konfigurierbare Eigenschaft des Ausführungskontextes (Funktion oder global). Nicht deklarierte Variablen sind konfigurierbar (sie können z. B. gelöscht werden).
    • 
+

+
+
Mehr Details und Beispiele findet man auf der var Referenzseite.

+
+
Fehler mit nicht deklarierten Variablenzuweisungen gibt es nur im Strict Mode Code. Außerhalb davon wird die Warnung einfach Ignoriert.

+
+
Beispiele

+
+
Falsche Fälle

+
+
In diesem Fall ist die "bar" eine nicht deklarierte Variable.

+
+
function foo() {
+  'use strict';
+  bar = true;
+}
+foo(); // ReferenceError: assignment to undeclared variable bar
+

+
+
Richtige Fälle

+
+
Um "bar" zu einer deklarierten Variable zu machen, kann das Schlüsselwort var eingesetzt werden.

+
+
function foo() {
+  'use strict';
+  var bar = true;
+}
+foo();

+
+
Siehe auch

+
+
diff --git a/files/de/web/javascript/reference/errors/undefined_prop/index.html b/files/de/web/javascript/reference/errors/undefined_prop/index.html
new file mode 100644
index 0000000000..fe83564f59
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/undefined_prop/index.html
@@ -0,0 +1,63 @@
+---
+title: 'ReferenceError: reference to undefined property "x"'
+slug: Web/JavaScript/Reference/Fehler/Undefined_prop
+tags:
+  - Errors
+  - JavaScript
+  - ReferenceError
+  - Strict Mode
+translation_of: Web/JavaScript/Reference/Errors/Undefined_prop
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
ReferenceError: reference to undefined property "x" (Firefox)
+

+
+
Fehlertyp

+
+
{{jsxref("ReferenceError")}} Fehlermeldung tritt nur im  strikten Modus auf.

+
+
Was ist falsch gelaufen?

+
+
Es wird versucht auf eine Eigenschaft zuzugreifen, die nicht existiert. Es gibt zwei Arten um auf Eigenschaften zuzugreifen, siehe Eigenschaften Zugriffsfunktionen auf den Referenzseiten für weitere Details.

+
+
Fehler aufgrund von leeren Eigenschaftsreferenzen treten nur im Quellcode auf, der im strikten Modus geschrieben ist. Im Quellcode der nicht im strikten Modus geschrieben ist, wird der Fehler ohne Meldung ignoriert.

+
+
Beispiele

+
+
Ungültige Fälle

+
+
In diesem Fall ist die Eigenschaft "bar" undefiniert.

+
+
"use strict";
+
+var foo = {};
+foo.bar; // ReferenceError: reference to undefined property "bar"
+

+
+
Gültige Fälle

+
+
Um Fehler zu vermeiden muss man eine Eigenschaft "bar" definieren oder überprüfen, ob die Eigenschaft "bar" existiert, bevor man auf diese zugreift. (z.B.: mit Hilfe der Funktion {{jsxref("Object.prototype.hasOwnProperty()")}}).

+
+
"use strict";
+
+var foo = {};
+
+// Definiert die bar Eigenschaft
+
+foo.bar = "Mond";
+console.log(foo.bar); // "Mond"
+
+// Testet vor dem Zugriff, ob bar existiert.
+
+if (foo.hasOwnProperty("bar")) {
+  console.log(foo.bar);
+}

+
+
Siehe auch

+
+
diff --git a/files/de/web/javascript/reference/errors/unexpected_token/index.html b/files/de/web/javascript/reference/errors/unexpected_token/index.html
new file mode 100644
index 0000000000..3aff253bfd
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/unexpected_token/index.html
@@ -0,0 +1,47 @@
+---
+title: 'SyntaxError: Unexpected token'
+slug: Web/JavaScript/Reference/Fehler/Unexpected_token
+tags:
+  - Fehler
+  - JavaScript
+  - Syntaxfehler
+translation_of: Web/JavaScript/Reference/Errors/Unexpected_token
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
SyntaxError: expected expression, got "x"
+SyntaxError: expected property name, got "x"
+SyntaxError: expected target, got "x"
+SyntaxError: expected rest argument name, got "x"
+SyntaxError: expected closing parenthesis, got "x"
+SyntaxError: expected '=>' after argument list, got "x"
+

+
+
Fehlertyp

+
+
{{jsxref("SyntaxError")}}

+
+
Was ist falsch gelaufen?

+
+
Es wurde eine bestimmte Sprachenstruktur erwartet, aber etwas anderes wurde übermittelt. Es kann sich dabei um einen einfachen Tippfehler handeln.

+
+
Beispiele

+
+
Expression expected (Ausdruck erwartet)

+
+
Zum Beispiel sind Kommas am Ende eines Befehls nicht erlaubt.

+
+
for (let i = 0; i < 5,; i++) {
+  console.log(i);
+}
+// SyntaxError: expected expression, got ')'
+

+
+
Richtig wäre das Komma auszulassen oder ein weiteren Ausdruck hinzuzufügen:

+
+
for (let i = 0; i < 5; i++) {
+  console.log(i);
+}
+

diff --git a/files/de/web/javascript/reference/errors/unexpected_type/index.html b/files/de/web/javascript/reference/errors/unexpected_type/index.html
new file mode 100644
index 0000000000..601ec21d43
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/unexpected_type/index.html
@@ -0,0 +1,67 @@
+---
+title: 'TypeError: "x" is (not) "y"'
+slug: Web/JavaScript/Reference/Fehler/Unexpected_type
+tags:
+  - Errors
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Unexpected_type
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
TypeError: "x" is (not) "y"
+
+Examples:
+TypeError: "x" is undefined
+TypeError: "x" is null
+TypeError: "undefined" is not an object
+TypeError: "x" is not an object or null
+TypeError: "x" is not a symbol
+

+
+
Fehlertyp

+
+
{{jsxref("TypeError")}}.

+
+
Was ist falsch gelaufen?

+
+
Der Typ einer Variable ist unpassend. Dieser Fall tritt oft bei {{jsxref("undefined")}}- oder {{jsxref("null")}}-Werten auf.

+
+
Außerdem benötigen bestimmte Metodhen wie {{jsxref("Object.create()")}} oder {{jsxref("Symbol.keyFor()")}} einen bestimmten Typ, der bereitgestellt werden muss.

+
+
Beispiele

+
+
Ungültige Fälle

+
+
// Undefinierte und null-Fälle, bei denen die Substring-Methode nicht funktioniert
+var foo = ;
+foo.substring(1); // TypeError: foo is undefined
+
+var foo = null;
+foo.substring(1); // TypeError: foo is null
+
+
+// Bestimmte Methoden erfordern einen bestimmten Typ
+var foo = {}
+Symbol.keyFor(foo); // TypeError: foo is not a symbol
+
+var foo = 'bar'
+Object.create(foo); // TypeError: "foo" is not an object or null
+

+
+
Den Fehler beheben?

+
+
Um den Nullzeiger auf undefined- oder null-Werte zu beheben, kann z. B. der "typeof"-Operator verwendt werden.

+
+
if (typeof foo !== 'undefined') {
+  // Nun wissen wir, dass foo definiert ist, und können weitermachen.
+}

+
+
Siehe auch

+
+
    
+ 
  • {{jsxref("undefined")}}
    • 
+ 
  • {{jsxref("null")}}
    • 
+

diff --git a/files/de/web/javascript/reference/errors/unnamed_function_statement/index.html b/files/de/web/javascript/reference/errors/unnamed_function_statement/index.html
new file mode 100644
index 0000000000..6c148b6ff0
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/unnamed_function_statement/index.html
@@ -0,0 +1,115 @@
+---
+title: 'SyntaxError: function statement requires a name'
+slug: Web/JavaScript/Reference/Fehler/Unnamed_function_statement
+tags:
+  - Error
+  - Errors
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Unnamed_function_statement
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
SyntaxError: function statement requires a name [Firefox]
+SyntaxError: Unexpected token ( [Chrome]
+

+
+
Fehlertyp

+
+
{{jsxref("SyntaxError")}}

+
+
Was ist falsch gelaufen?

+
+
Es gibt eine Funktionsstatement im Code, welches einen Namen benötigt. Man muss überprüfen, wie Funktionen definiert sind und ob diese einen Namen benötigen oder ob diese Funktion ein Funktionsausdruck ist (eine {{Glossary("IIFE")}}) oder ob die Funktion im richtigen Kontext geschrieben ist.

+
+
Beispiele

+
+
Statements vs Ausdrücke

+
+
Ein Funktionsstatement (oder Funktionsdeklaration) benötigt einen Namen. Folgendes funktioniert nicht:

+
+
function () {
+  return 'Hello world';
+}
+// SyntaxError: function statement requires a name
+

+
+
Man kann stattdessen ein Funktionsausdruck (Zuweisung) nutzen:

+
+
var greet = function() {
+  return 'Hello world';
+};

+
+
Manchmal soll auch eine auch eine IIFE (Immediately Invoked Function Expression) sein, welche eine Funktion ist, die nach der Definition direkt ausgeführt wird. Dafür müssen ein paar mehr Klammern benutzt werden:

+
+
(function () {
+
+})();

+
+
Funktionen mit Labeln

+
+
Wenn man ein Funktionslabel benutzt, muss ein Funktionsnamen nach dem function Schlüsselwort stehen. Folgendes funktioniert nicht:

+
+
function Greeter() {
+  german: function () {
+    return "Moin";
+  }
+}
+// SyntaxError: function statement requires a name
+

+
+
Das folgende funktioniert:

+
+
function Greeter() {
+  german: function g() {
+    return "Moin";
+  }
+}

+
+
Objektmethoden

+
+
Wenn man eine Methode für ein Objekt erstellen möchte, muss ein Objekt erstellt werden. Die folgende Syntax ohne einen Namen nach dem function Schlüsselwort ist zulässig.

+
+
var greeter = {
+  german: function () {
+    return "Moin";
+  }
+};

+
+
Callback Syntax

+
+
Zudem sollte die Syntax bei Callbackfunktionen geprüft werden. Komma- und Klammersetzung kann schnell schwierig werden.

+
+
promise.then(
+  function() {
+    console.log("success");
+  });
+  function() {
+    console.log("error");
+}
+// SyntaxError: function statement requires a name
+

+
+
Richtig ist folgendes:

+
+
promise.then(
+  function() {
+    console.log("success");
+  },
+  function() {
+    console.log("error");
+  }
+);
+

+
+
Siehe auch

+
+
diff --git a/files/de/web/javascript/reference/errors/unterminated_string_literal/index.html b/files/de/web/javascript/reference/errors/unterminated_string_literal/index.html
new file mode 100644
index 0000000000..3d60240b51
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/unterminated_string_literal/index.html
@@ -0,0 +1,67 @@
+---
+title: 'SyntaxError: unterminated string literal'
+slug: Web/JavaScript/Reference/Fehler/Unterminated_string_literal
+tags:
+  - Errors
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Unterminated_string_literal
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
SyntaxError: unterminated string literal
+

+
+
Fehlertyp

+
+
{{jsxref("SyntaxError")}}

+
+
Was ist falsch gelaufen?

+
+
Es gibt irgendwo einen nicht beendeten {{jsxref("String")}}. Stringliterale müssen mit einfachen (') oder doppelten (") Anführungszeichen umschlossen sein. JavaScript unterscheidet nicht zwischen Strings, die mit einfachen oder doppelten Anführungszeichen umschlossen sind. Maskierte Sequenzen funktionieren in Strings mit einfachen und doppelten Anführungszeichen. Um den Fehler zu beheben, sollte folgendes überprüft werden:

+
+
    
+ 
  • Es gibt öffnende und schließende Anführungszeichen (einfache oder doppelte) für alle Stringliterale,
    • 
+ 
  • Stringliterale sind richtig maskiert,
    • 
+ 
  • Stringliterale funktionieren richtig über mehrere Zeilen, wenn es solche gibt.
    • 
+

+
+
Beispiele

+
+
MehrereZeilen

+
+
Man kann Strings nicht über mehrere Zeilen in JavaScript schreiben:

+
+
var longString = 'This is a very long string which needs
+                  to wrap across multiple lines because
+                  otherwise my code is unreadable.';
+// SyntaxError: unterminated string literal

+
+
Stattdessen muss ein + Operator, ein Backslask oder ein Templateliteral eingesetzt werden. Die + Operator Variante sieht wie folgt aus:

+
+
var longString = 'This is a very long string which needs ' +
+                 'to wrap across multiple lines because ' +
+                 'otherwise my code is unreadable.';
+

+
+
Oder man benutzt ein Backslash Zeichen ("\") am ende jeder Zeile, um anzudeuten, dass der String in der nächsten Zeile weiter geht. Man muss sicherstellen, dass keine Leerzeichen oder andere Zeichen nach dem Backslash stehen (ausgenommen der Zeilenumbruch) oder als Einrückung, ansonsten wird es nicht funktionieren. Diese Form sieht wie folgt aus:

+
+
var longString = 'This is a very long string which needs \
+to wrap across multiple lines because \
+otherwise my code is unreadable.';
+

+
+
Eine andere Möglichkeit ist der Einsatz von Templateliteralen, welche in ECMAScript 2015 Umgebungen unterstützt werden:

+
+
var longString = `This is a very long string which needs
+                  to wrap across multiple lines because
+                  otherwise my code is unreadable.`;

+
+
Siehe auch

+
+
diff --git a/files/de/web/javascript/reference/errors/var_hides_argument/index.html b/files/de/web/javascript/reference/errors/var_hides_argument/index.html
new file mode 100644
index 0000000000..f06a1d5220
--- /dev/null
+++ b/files/de/web/javascript/reference/errors/var_hides_argument/index.html
@@ -0,0 +1,56 @@
+---
+title: 'TypeError: variable "x" redeclares argument'
+slug: Web/JavaScript/Reference/Fehler/Var_hides_argument
+tags:
+  - Errors
+  - JavaScript
+  - Strict Mode
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Var_hides_argument
+---
+
{{jsSidebar("Errors")}}

+
+
Fehlermeldung

+
+
TypeError: variable "x" redeclares argument (Firefox)
+

+
+
Fehlertyp

+
+
{{jsxref("TypeError")}} Warnung nur im strict mode.

+
+
Was ist falsch gelaufen?

+
+
Der selbe Variablenname für einen Funktionsparameter und einer Neudeklaration mit einer var Zuweisung im Funktionskörper ist vorhanden. Dieses ist ein Namenskonflikt, weshalb JavaScript eine Warnung erzeugt.

+
+
Dieser Fehler ist eine Warnung, die nur im strict mode auftaucht. Ist man nicht im strict mode, so wird die Neudeklaration still ignoriert.

+
+
Beispiele

+
+
Nicht balider Fall

+
+
In diesem Fall wird die Variable "arg" neu deklariert.

+
+
'use strict';
+
+function f(arg) {
+  var arg = 'foo';
+}
+

+
+
Valider Fall

+
+
Um diese Warnung zu vermeiden kann das var Statement weggelassen werden, weil die Variable schon existiert. In anderen Fällen kann der Funktionsparameter oder die Variable umbenannt werden.

+
+
'use strict';
+
+function f(arg) {
+  arg = 'foo';
+}
+

+
+
Siehe auch

+
+
diff --git a/files/de/web/javascript/reference/fehler/already_has_pragma/index.html b/files/de/web/javascript/reference/fehler/already_has_pragma/index.html
deleted file mode 100644
index d297d3fea9..0000000000
--- a/files/de/web/javascript/reference/fehler/already_has_pragma/index.html
+++ /dev/null
@@ -1,42 +0,0 @@
----
-title: 'Warning: -file- is being assigned a //# sourceMappingURL, but already has one'
-slug: Web/JavaScript/Reference/Fehler/Already_has_pragma
-tags:
-  - Error
-  - JavaScript
-  - Source maps
-  - Warning
-translation_of: Web/JavaScript/Reference/Errors/Already_has_pragma
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
Warning: -file- is being assigned a //# sourceMappingURL, but already has one.

-
-
Fehlertyp

-
-
Warnung. Die Ausführung von JavaScript wird nicht unterbrochen.

-
-
Was ist falsch gelaufen?

-
-
Eine Source Map wurde mehrere Male für eine JavaScript Quelle spezifiziert.

-
-
JavaScript Quellen sind oft kombiniert und minimiert, um diesen auf einem Server effizienter zu gestalten. Mit Source Maps ist es möglich den Quelltext, beim Debuggen, zu den originalen Quelldateien zu verfolgen. Es gibt zwei Möglichkeiten Source Maps zuzuweisen, einerseits mit einem Kommentar und andererseits mit dem setzen eines Headers in der JavaScriptdatei.

-
-
Beispiele

-
-
Setzen einer Source Map mit einem Kommentar in einer Datei:

-
-
//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map

-
-
Oder alternativ mit dem setzen eines Headers in einer JavaScriptdatei:

-
-
X-SourceMap: /path/to/file.js.map

-
-
Siehe auch

-
-
diff --git a/files/de/web/javascript/reference/fehler/array_sort_argument/index.html b/files/de/web/javascript/reference/fehler/array_sort_argument/index.html
deleted file mode 100644
index 2826cbe4c0..0000000000
--- a/files/de/web/javascript/reference/fehler/array_sort_argument/index.html
+++ /dev/null
@@ -1,47 +0,0 @@
----
-title: 'TypeError: invalid Array.prototype.sort argument'
-slug: Web/JavaScript/Reference/Fehler/Array_sort_argument
-tags:
-  - Error
-  - JavaScript
-  - TypeError
-translation_of: Web/JavaScript/Reference/Errors/Array_sort_argument
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
TypeError: invalid Array.prototype.sort argument (Firefox)
-

-
-
Fehlertyp

-
-
{{jsxref("TypeError")}}

-
-
Was ist falsch gelaufen?

-
-
Das Argument von {{jsxref("Array.prototype.sort()")}} erwartet entweder {{jsxref("undefined")}} oder eine Funktion, welche die Operanden vergleicht.

-
-
Beispiele

-
-
Nicht valide Fälle

-
-
[1, 3, 2].sort(5);  // TypeError
-
-var cmp = { asc: (x, y) => x >= y, dsc: (x, y) => x <= y };
-[1, 3, 2].sort(cmp[this.key] || 'asc');  // TypeError
-

-
-
Valide Fälle

-
-
[1, 3, 2].sort();   // [1, 2, 3]
-
-
-var cmp = { asc: (x, y) => x >= y, dsc: (x, y) => x <= y };
-[1, 3, 2].sort(cmp[this.key || 'asc']); // [1, 2, 3]

-
-
Siehe auch

-
-
    
- 
  • {{jsxref("Array.prototype.sort()")}}
    • 
-

diff --git a/files/de/web/javascript/reference/fehler/bad_octal/index.html b/files/de/web/javascript/reference/fehler/bad_octal/index.html
deleted file mode 100644
index d021c0daa4..0000000000
--- a/files/de/web/javascript/reference/fehler/bad_octal/index.html
+++ /dev/null
@@ -1,54 +0,0 @@
----
-title: 'Warning: 08/09 is not a legal ECMA-262 octal constant'
-slug: Web/JavaScript/Reference/Fehler/Bad_octal
-tags:
-  - Errors
-  - JavaScript
-  - SyntaxError
-  - Warning
-translation_of: Web/JavaScript/Reference/Errors/Bad_octal
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
Warning: SyntaxError: 08 is not a legal ECMA-262 octal constant.
-Warning: SyntaxError: 09 is not a legal ECMA-262 octal constant.
-

-
-
Fehlertyp

-
-
Warnung. Die Ausführung von JavaScript wird nicht gestoppt.

-
-
Was ist falsch gelaufen?

-
-
Dezimalliterale können mit einer Null (0) beginnen, gefolgt von anderen Dezimalziffern. en alle Ziffern nach der führenden 0 kleiner als 8 sind, wird die Zal als Oktalzahl interpretiert. Weil das nicht der Fall ist mit 08 und 09, warnt JavaScript.

-
-
Zu beachten ist, dass Oktalliterale und oktal maskierte Sequenzen veraltet sind und eine zusätzliche Veraltungswarnung enthalten. Mit ECMAScript 6 und später wird diese Syntak mit einer führenden Null gefolgt von einem großen oder kleinen lateinischen Buschstaben "O" (0o or 0O) benutzt. Sie dazu die Seite lexical grammar für mehr Informationen.

-
-
Beispiele

-
-
Ungültige Oktalzahlen

-
-
08;
-09;
-// SyntaxError: 08 is not a legal ECMA-262 octal constant
-// SyntaxError: "0"-prefixed octal literals and octal escape sequences
-// are deprecated

-
-
Gültige Oktalzahlen

-
-
Einsatz von einer führenden Null gefolgt von dem Buchstaben "o";

-
-
0O755;
-0o644;
-

-
-
Siehe auch

-
-
diff --git a/files/de/web/javascript/reference/fehler/bad_radix/index.html b/files/de/web/javascript/reference/fehler/bad_radix/index.html
deleted file mode 100644
index 25c473eb93..0000000000
--- a/files/de/web/javascript/reference/fehler/bad_radix/index.html
+++ /dev/null
@@ -1,61 +0,0 @@
----
-title: 'RangeError: radix must be an integer'
-slug: Web/JavaScript/Reference/Fehler/Bad_radix
-tags:
-  - Errors
-  - JavaScript
-  - RangeError
-translation_of: Web/JavaScript/Reference/Errors/Bad_radix
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
RangeError: radix must be an integer at least 2 and no greater than 36 (Firefox)
-RangeError: toString() radix argument must be between 2 and 36 (Chrome)
-

-
-
Fehlertyp

-
-
{{jsxref("RangeError")}}

-
-
Was ist falsch gelaufen?

-
-
Der optionale radix Parameter der {{jsxref("Number.prototype.toString()")}} Methode wurde spezifiziert. Dieser Wert muss eine ganze Zahl zwischen 2 und 36 sein, welche die Basis des Zahlensystems des repräsentierten Zahlwertes angibt. Zum Beispiel wird die Dezimalzahl (Basis 10) 169 im Hexadezimalsystem (Basis 16) als A9 repräsentiert.

-
-
Warum ist der Parameterwert auf 36 limitiert? Eine Basis größer als 10 nutzt als Ziffern Buchstaben; deswegen kann der Parameter nicht größer als 36 sein, weil das Lateinische Alphabet (welches im Englischen und vielen anderen Sprachen verwendet wird) nur 26 Buchstaben hat.

-
-
Die am meisten eingesetzten Basen sind:

-
-
-
-
Beispiele

-
-
Nicht valide Fälle

-
-
(42).toString(0);
-(42).toString(1);
-(42).toString(37);
-(42).toString(150);
-// You cannot use a string like this for formatting:
-(12071989).toString('MM-dd-yyyy');
-

-
-
Valide Fälle

-
-
(42).toString(2);     // "101010" (binary)
-(13).toString(8);     // "15"     (octal)
-(0x42).toString(10);  // "66"     (decimal)
-(100000).toString(16) // "186a0"  (hexadecimal)
-

-
-
Siehe auch

-
-
    
- 
  • {{jsxref("Number.prototype.toString()")}}
    • 
-

diff --git a/files/de/web/javascript/reference/fehler/bad_regexp_flag/index.html b/files/de/web/javascript/reference/fehler/bad_regexp_flag/index.html
deleted file mode 100644
index 5bf381da53..0000000000
--- a/files/de/web/javascript/reference/fehler/bad_regexp_flag/index.html
+++ /dev/null
@@ -1,105 +0,0 @@
----
-title: 'SyntaxError: invalid regular expression flag "x"'
-slug: Web/JavaScript/Reference/Fehler/Bad_regexp_flag
-tags:
-  - Error
-  - JavaScript
-  - SyntaxError
-translation_of: Web/JavaScript/Reference/Errors/Bad_regexp_flag
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
SyntaxError: invalid regular expression flag "x" (Firefox)
-SyntaxError: Invalid regular expression flags (Chrome)
-

-
-
Fehlertyp

-
-
{{jsxref("SyntaxError")}}

-
-
Was ist falsch gelaufen?

-
-
Es gibt nicht valide Flags in regulären Ausdrücken im Code. In einem regulärem Ausdrucksliteral, welches aus eine Muster umschlossen von Schrägstrichen ist, kommen die Flags nach dem zweiten Schrägstrich. Sie können auch in der Konstruktorfunktion des {{jsxref("RegExp")}} Objektes angegeben werden (zweiter Parameter). Flags für reguläre Ausdrücke können einfach oder zusammen in beliebiger Reihenfolge benutzt werden, jedoch gibt es in ECMAScript nur fünf.

-
-
Um ein Flag in regulären Ausdrücken einzufügen kann folgende Syntax benutzt werden:

-
-
var re = /pattern/flags;
-

-
-
oder

-
-
var re = new RegExp('pattern', 'flags');

-
-
- 
- 
-  
-   
-   
-  
- 
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
Flags von regulären Ausdrücken
FlagBeschreibung
gGlobale Suche.
iGroß- und Kleinschreibung nicht unterscheiden.
mSuche über mehrere Zeilen.
uUnicode; nimmt das Muster als eine Sequenz von Unicode Codepoints an.
yFührt eine "sticky" Suche durch, welche zutrifft, wenn der String von der Startposition aus auf das Muster zutrifft. Siehe {{jsxref("RegExp.sticky", "sticky")}}.

-
-
Beispiele

-
-
Es gibt nur fünf valide Flags für reguläre Ausdrücke.

-
-
/foo/bar;
-
-// SyntaxError: invalid regular expression flag "b"
-

-
-
Ist eine regulärer Ausdruck gewollt? Ein Ausdruck, der zwei Schrägstriche enthält wird als Literal für reguläre Ausdrücke interpretiert.

-
-
let obj = {
-  url: /docs/Web
-};
-
-// SyntaxError: invalid regular expression flag "W"
-

-
-
Oder war stattdessen ein String gemeint? Füge einfache oder doppelte Anführungszeichen hinzu, um ein Stringliteral zu erstellen.

-
-
let obj = {
-  url: '/docs/Web'
-};

-
-
Valide Flags für reguläre Ausdrücke

-
-
Siehe in der Tabelle oben für die fünf in JavaScript erlaubten validen Flags für reguläre Ausdrücke

-
-
/foo/g;
-/foo/gim;
-/foo/uy;
-

-
-
Siehe auch

-
-
diff --git a/files/de/web/javascript/reference/fehler/bad_return_or_yield/index.html b/files/de/web/javascript/reference/fehler/bad_return_or_yield/index.html
deleted file mode 100644
index e850455615..0000000000
--- a/files/de/web/javascript/reference/fehler/bad_return_or_yield/index.html
+++ /dev/null
@@ -1,55 +0,0 @@
----
-title: 'SyntaxError: return not in function'
-slug: Web/JavaScript/Reference/Fehler/Bad_return_or_yield
-tags:
-  - Errors
-  - JavaScript
-  - SyntaxError
-translation_of: Web/JavaScript/Reference/Errors/Bad_return_or_yield
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
SyntaxError: return not in function
-SyntaxError: yield not in function
-

-
-
Fehlertyp

-
-
{{jsxref("SyntaxError")}}.

-
-
Was ist falsch gelaufen?

-
-
Ein return oder yield Statement wird außerhalb einer Funktion aufgerufen. Es kann sein, dass geschweifte Klammern fehlen. Die Statements return und yield müssen in einer Funktion sein, weil sie die Ausführung der Funktion beenden (oder pausieren und wieder starten) und dem Funktionsaufrufer einen spezifizierten Wert zurückgeben.

-
-
Beispiele

-
-
var cheer = function(score) {
-  if (score === 147)
-    return 'Maximum!';
-  };
-  if (score > 100) {
-    return 'Century!';
-  }
-}
-
-// SyntaxError: return not in function

-
-
Die geschweiften Klammern sehen auf den ersten Blick richtig aus, jedoch fehlt in dem Code eine { nach dem ersten if Statement. Korrekt währe es wir folgt:

-
-
var cheer = function(score) {
-  if (score === 147) {
-    return 'Maximum!';
-  }
-  if (score > 100) {
-    return 'Century!';
-  }
-};

-
-
Siehe auch

-
-
diff --git a/files/de/web/javascript/reference/fehler/called_on_incompatible_type/index.html b/files/de/web/javascript/reference/fehler/called_on_incompatible_type/index.html
deleted file mode 100644
index 1915e1b829..0000000000
--- a/files/de/web/javascript/reference/fehler/called_on_incompatible_type/index.html
+++ /dev/null
@@ -1,64 +0,0 @@
----
-title: X.prototype.y called on incompatible type
-slug: Web/JavaScript/Reference/Fehler/Called_on_incompatible_type
-tags:
-  - Error
-  - JavaScript
-  - TypeError
-translation_of: Web/JavaScript/Reference/Errors/Called_on_incompatible_type
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
TypeError: Function.prototype.toString called on incompatible object (Firefox)
-TypeError: Function.prototype.bind called on incompatible target (Firefox)
-TypeError: Method Set.prototype.add called on incompatible receiver undefined (Chrome)
-TypeError: Bind must be called on a function (Chrome)
-

-
-
Fehlertyp

-
-
{{jsxref("TypeError")}}

-
-
Was ist falsch gelaufen?

-
-
Wenn dieser Fehler auftritt, wird eine Funktion (auf eineem gegebenen Objekt) aufgerufen, wobei this nicht vom erwarteten Typ ist.

-
-
Dieser Fehler kann auftreten, wenn die {{jsxref("Function.prototype.call()")}} oder {{jsxref("Function.prototype.apply()")}} Methode mit einem this Argument genutzt werden, welches nicht dem erwarteten Typ entspricht.

-
-
Dieser Fehler kann auch auftreten, wenn eine Funktion (in einem Objekt gespeichert) als Argument in einer anderen Funktion genutzt wird. In diesem Fall ist das Objekt nicht this der Funktion. Um diesen Dall zu umgehen muss eine Lambda-Funktion unterstützt werden, welche den Aufruf markiert, oder die {{jsxref("Function.prototype.bind()")}} Funktion eingesetzt werden, um das richtige this Objekt zu nutzen.

-
-
Beispiele

-
-
Fehlerfälle

-
-
var mySet = new Set;
-['bar', 'baz'].forEach(mySet.add);
-// mySet.add ist eine Funktion, aber "mySet" wird so nicht erfasst.
-
-var myFun = function () {};
-['bar', 'baz'].forEach(myFun.bind);
-// myFun.bind ist eine Funktion, aber "myFun" wird nicht so erfasst.
-
-

-
-
Gültiger Fälle

-
-
var mySet = new Set;
-['bar', 'baz'].forEach(mySet.add.bind(mySet));
-// Das funktioniert, weil "mySet" als this an die Funktion gebunden wird.
-
-var myFun = function () {};
-['bar', 'baz'].forEach(x => myFun.bind(x));
-// Das funktioniert durch die "bind" Funktion. Es wird eine Lambda-Funktion erstellt, die die Argumente weiterleitet..
-
-

-
-
Siehe auch

-
-
    
- 
  • {{jsxref("Function.prototype.call()")}}
    • 
- 
  • {{jsxref("Function.prototype.apply()")}}
    • 
- 
  • {{jsxref("Function.prototype.bind()")}}
    • 
-

diff --git a/files/de/web/javascript/reference/fehler/cant_access_lexical_declaration_before_init/index.html b/files/de/web/javascript/reference/fehler/cant_access_lexical_declaration_before_init/index.html
deleted file mode 100644
index 16b976aef6..0000000000
--- a/files/de/web/javascript/reference/fehler/cant_access_lexical_declaration_before_init/index.html
+++ /dev/null
@@ -1,60 +0,0 @@
----
-title: 'ReferenceError: can''t access lexical declaration`X'' before initialization'
-slug: Web/JavaScript/Reference/Fehler/Cant_access_lexical_declaration_before_init
-tags:
-  - Errors
-  - JavaScript
-  - ReferenceError
-translation_of: Web/JavaScript/Reference/Errors/Cant_access_lexical_declaration_before_init
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
ReferenceError: can't access lexical declaration `X' before initialization (Firefox)
-ReferenceError: 'x' is not defined (Chrome)
-

-
-
Fehlertyp

-
-
{{jsxref("ReferenceError")}}

-
-
Was ist falsch gelaufen?

-
-
Auf eine lexikalische Variable wurde zugegriffen bevor sie deklariert wurde. Das passiert in Blockstatements, in denen auf let oder const Variablen zugegriffen wird, bevor sie definiert wurden.

-
-
Beispiele

-
-
Falsche Fälle

-
-
In diesem Fall wird die Variable "foo" in einem Blockstatement mit let neu deklariert.

-
-
function test() {
-  let foo = 33;
-  if (true) {
-    let foo = (foo + 55);
-    // ReferenceError: can't access lexical
-    // declaration `foo' before initialization
-  }
-}
-test();
-

-
-
Richtige Fälle

-
-
Um "foo" im if-Statement zu ändern, muss  let entfernt werden, welche die Neudeklaration verursacht.

-
-
function test(){
-   let foo = 33;
-   if (true) {
-      foo = (foo + 55);
-   }
-}
-test();
-

-
-
Siehe auch

-
-
diff --git a/files/de/web/javascript/reference/fehler/cant_access_property/index.html b/files/de/web/javascript/reference/fehler/cant_access_property/index.html
deleted file mode 100644
index 98471eb28e..0000000000
--- a/files/de/web/javascript/reference/fehler/cant_access_property/index.html
+++ /dev/null
@@ -1,59 +0,0 @@
----
-title: 'TypeError: can''t access property "x" of "y"'
-slug: Web/JavaScript/Reference/Fehler/Cant_access_property
-tags:
-  - Fehler
-  - JavaScript
-  - TypeError
-translation_of: Web/JavaScript/Reference/Errors/Cant_access_property
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
TypeError: Unable to get property {x} of undefined or null reference (Edge)
-TypeError: can't access property {x} of {y} (Firefox)
-TypeError: {y} is undefined, can't access property {x} of it (Firefox)
-TypeError: {y} is null, can't access property {x} of it (Firefox)
-
-Beispiele:
-TypeError: x is undefined, can't access property "prop" of it
-TypeError: x is null, can't access property "prop" of it
-TypeError: can't access property "prop" of undefined
-TypeError: can't access property "prop" of null
-

-
-
Fehlertyp

-
-
{{jsxref("TypeError")}}.

-
-
Was ist falsch gelaufen?

-
-
The Attributzugriff erfolgte über einen {{jsxref("undefined")}} oder {{jsxref("null")}} Wert

-
-
Beispiele

-
-
Invalide Fälle

-
-
// undefined und null sind Fälle auf denen die Methode substring nicht aufgerufen werden kann
-var foo = undefined;
-foo.substring(1); // TypeError: x is undefined, can't access property "substring" of it
-
-var foo = null;
-foo.substring(1); // TypeError: x is null, can't access property "substring" of it
-

-
-
Fehlerbehebung

-
-
Um den null pointer auf undefined oder null Werte zu beheben, kann beispielsweise der typeof Operator verwendet werden.

-
-
if (typeof foo !== 'undefined') {
-  // Hier wissen wir, dass foo definiert ist
-}

-
-
Siehe auch

-
-
    
- 
  • {{jsxref("undefined")}}
    • 
- 
  • {{jsxref("null")}}
    • 
-

diff --git a/files/de/web/javascript/reference/fehler/cant_define_property_object_not_extensible/index.html b/files/de/web/javascript/reference/fehler/cant_define_property_object_not_extensible/index.html
deleted file mode 100644
index 691924f427..0000000000
--- a/files/de/web/javascript/reference/fehler/cant_define_property_object_not_extensible/index.html
+++ /dev/null
@@ -1,64 +0,0 @@
----
-title: 'TypeError: can''t define property "x": "obj" is not extensible'
-slug: Web/JavaScript/Reference/Fehler/Cant_define_property_object_not_extensible
-tags:
-  - Error
-  - Errors
-  - JavaScript
-  - TypeError
-translation_of: Web/JavaScript/Reference/Errors/Cant_define_property_object_not_extensible
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
TypeError: can't define property "x": "obj" is not extensible (Firefox)
-TypeError: Cannot define property: "x", object is not extensible. (Chrome)
-

-
-
Fehlertyp

-
-
{{jsxref("TypeError")}}

-
-
Was ist falsch gelaufen?

-
-
Normalerweise ist ein Objekt erweiterbar und neue Eigenschaften können hinzugefügt werden. In diesem Fall markiert {{jsxref("Object.preventExtensions()")}} ein Objekt als nicht mehr erweiterbar, so dass ein Objekt nur noch die Eigenschaften haben kann, die es vor dem Aufruf hatte.

-
-
Beispiele

-
-
Im strict mode wird ein TypeError erzeugt, wenn versucht wird eine Eigenschaft zu einem nicht erweiterbaren Objekt hinzuzufügen. Im normalen Modus wird das Hinzufügen einfach ignoriert.

-
-
'use strict';
-
-var obj = {};
-Object.preventExtensions(obj);
-
-obj.x = 'foo';
-// TypeError: can't define property "x": "obj" is not extensible
-

-
-
Im strict mode und normalen Modus wird ein Fehler erzeugt, wenn {{jsxref("Object.defineProperty()")}} benutzt wird, um eine Eigenschaft zu einem nicht erweiterbaren Objekt hinzuzufügen.

-
-
var obj = { };
-Object.preventExtensions(obj);
-
-Object.defineProperty(obj,
-  'x', { value: "foo" }
-);
-// TypeError: can't define property "x": "obj" is not extensible
-

-
-
Um diesen Fehler zu vermeiden muss entweder der Aufruf von {{jsxref("Object.preventExtensions()")}} entfernt werden oder die Position des Aufrufes so verschoben werden, dass das Hinzufügen von Eigenschaften davor passiert und das Objekt erst danach als nicht erweiterbar markiert wird. Natürlich kann auch die neue Eigenschaft entfernt werden, wenn sie nicht benötigt wird.

-
-
'use strict';
-
-var obj = {};
-obj.x = 'foo'; // add property first and only then prevent extensions
-
-Object.preventExtensions(obj);

-
-
Siehe auch

-
-
    
- 
  • {{jsxref("Object.preventExtensions()")}}
    • 
-

diff --git a/files/de/web/javascript/reference/fehler/cant_delete/index.html b/files/de/web/javascript/reference/fehler/cant_delete/index.html
deleted file mode 100644
index fe09735071..0000000000
--- a/files/de/web/javascript/reference/fehler/cant_delete/index.html
+++ /dev/null
@@ -1,58 +0,0 @@
----
-title: 'TypeError: property "x" is non-configurable and can''t be deleted'
-slug: Web/JavaScript/Reference/Fehler/Cant_delete
-tags:
-  - Errors
-  - JavaScript
-  - Strict Mode
-  - TypeError
-translation_of: Web/JavaScript/Reference/Errors/Cant_delete
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
TypeError: property "x" is non-configurable and can't be deleted. (Firefox)
-TypeError: Cannot delete property 'x' of #<Object> (Chrome)
-

-
-
Fehlertyp

-
-
{{jsxref("TypeError")}} nur im strict mode.

-
-
Was ist falsch gelaufen?

-
-
Es wurde versucht eine EIgenschaft zu löschen, obwohl die Eigenschaft nicht Konfigurierbar (non-configurable) ist. Das configurable Attribut gibt an, ob ein Eigenschaft von einem Objekt gelöscht werden kann und ob ein Attribut (anders als writable) geändert werden kann.

-
-
Dieser Fehler ist nur tritt nur im strict mode auf. In non-strict Quelltext, gibt die Operation false zurück.

-
-
Beispiele

-
-
Nicht Konfigurierbare Eigenschaften sind nicht sehr häufig, aber sie können mit {{jsxref("Object.defineProperty()")}} oder {{jsxref("Object.freeze()")}} erstellt werden.

-
-
'use strict';
-var obj = Object.freeze({name: 'Elsa', score: 157});
-delete obj.score;  // TypeError
-
-'use strict';
-var obj = {};
-Object.defineProperty(obj, 'foo', {value: 2, configurable: false});
-delete obj.foo;  // TypeError
-
-'use strict';
-var frozenArray = Object.freeze([0, 1, 2]);
-frozenArray.pop();  // TypeError
-

-
-
Es gibt auch einige nicht Konfigurierbare Eigenschaften, die in JavaScript eingebaut sind. Dazu zählen zum Beispiel die mathematischen Konstanten.

-
-
'use strict';
-delete Math.PI;  // TypeError

-
-
Siehe auch

-
-
    
- 
  • delete operator
    • 
- 
  • {{jsxref("Object.defineProperty()")}}
    • 
- 
  • {{jsxref("Object.freeze()")}}
    • 
-

diff --git a/files/de/web/javascript/reference/fehler/cant_redefine_property/index.html b/files/de/web/javascript/reference/fehler/cant_redefine_property/index.html
deleted file mode 100644
index 80ef1e384b..0000000000
--- a/files/de/web/javascript/reference/fehler/cant_redefine_property/index.html
+++ /dev/null
@@ -1,51 +0,0 @@
----
-title: 'TypeError: can''t redefine non-configurable property "x"'
-slug: Web/JavaScript/Reference/Fehler/Cant_redefine_property
-tags:
-  - Error
-  - Errors
-  - JavaScript
-  - TypeError
-translation_of: Web/JavaScript/Reference/Errors/Cant_redefine_property
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
TypeError: can't redefine non-configurable property "x" (Firefox)
-TypeError: Cannot redefine property: "x" (Chrome)
-

-
-
Fehlertyp

-
-
{{jsxref("TypeError")}}

-
-
Was ist falsch gelaufen?

-
-
Es wurde versucht eine Eigenschaft erneut zu definieren, aber die Eigenschaft ist nicht konfigurierbar (non-configurable). Das configurable Attribut kontrolliert, ob eine Eigenschaft von einem Objekt gelöscht werden kann und seine Attribute (anders als writable) geändert werden können. Eigenschaften von einem Objekt, dass von einem Objekt-Initialisierer erstellt wurden, sind konfigurierbar. Immer, wenn zum Beispiel {{jsxref("Object.defineProperty()")}} eingesetzt wird, ist die Eigenschaft nicht ohne weiteres konfigurierbar.

-
-
Beispiele

-
-
Nicht konfigurierbare Eigenschaften mit Object.defineProperty erstellen

-
-
Die {{jsxref("Object.defineProperty()")}} Funktion erstellt nicht konfiguriertbare Eigenschaften wenn sie nicht extra als konfigurierbar spezifiziert sind.

-
-
var obj = Object.create({});
-Object.defineProperty(obj, "foo", {value: "bar"});
-
-Object.defineProperty(obj, "foo", {value: "baz"});
-// TypeError: can't redefine non-configurable property "foo"
-

-
-
Die "foo" Eigenschaft muss als Konfigurierbar eingestellt werden, wenn diese später im Quelltext erneut definiert bzw. überschrieben werden soll.

-
-
var obj = Object.create({});
-Object.defineProperty(obj, "foo", {value: "bar", configurable: true});
-Object.defineProperty(obj, "foo", {value: "baz", configurable: true});

-
-
Siehe auch

-
-
diff --git a/files/de/web/javascript/reference/fehler/cyclic_object_value/index.html b/files/de/web/javascript/reference/fehler/cyclic_object_value/index.html
deleted file mode 100644
index 33bf4d508a..0000000000
--- a/files/de/web/javascript/reference/fehler/cyclic_object_value/index.html
+++ /dev/null
@@ -1,67 +0,0 @@
----
-title: 'TypeError: cyclic object value'
-slug: Web/JavaScript/Reference/Fehler/Cyclic_object_value
-tags:
-  - Error
-  - Errors
-  - JavaScript
-  - TypeError
-translation_of: Web/JavaScript/Reference/Errors/Cyclic_object_value
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
TypeError: cyclic object value (Firefox)
-TypeError: Converting circular structure to JSON (Chrome and Opera)
-TypeError: Circular reference in value argument not supported (Microsoft Edge)
-

-
-
Fehlertyp

-
-
{{jsxref("TypeError")}}

-
-
Was ist falsch gelaufen?

-
-
Wenn {{jsxref("JSON.stringify()")}} aufgerufen wird, kann eine zyklische Objektreferenzstruktur nicht zu eine String konvertiert werden.

-
-
Beispiele

-
-
In eine zyklischen Struktur wie folgender

-
-
var circularReference = {otherData: 123};
-circularReference.myself = circularReference;
-

-
-
wird {{jsxref("JSON.stringify()")}} nicht funktionieren

-
-
JSON.stringify(a);
-// TypeError: cyclic object value
-

-
-
Um zyklische Referenzen zu serialisieren, kann man eine Bibliotheken benutzen (z. B. cycle.js von Douglas Crockford) oder eine eigene Lösung implementieren, welche zyklische Referenzen findet und mit serialisierbaren Werten ersetzt (oder diese entfernt).

-
-
Das folgende Codebeispiel zeigt, wie man eine zyklische Referenz mit dem Einsatz des  replacer Parameters von {{jsxref("JSON.stringify()")}} findet und filtert (das bedeutet, es gehen Daten verloren):

-
-
const getCircularReplacer = () => {
-  const seen = new WeakSet;
-  return (key, value) => {
-    if (typeof value === "object" && value !== null) {
-      if (seen.has(value)) {
-        return;
-      }
-      seen.add(value);
-    }
-    return value;
-  };
-};
-
-JSON.stringify(circularReference, getCircularReplacer());
-// {"otherData":123}

-
-
Siehe auch

-
-
    
- 
  • {{jsxref("JSON.stringify")}}
    • 
- 
  • cycle.js – Führt zwei Funktionen ein, JSON.decycle und JSON.retrocycle, welche es ermöglichen zyklische Strukturen aufzulösen, diese in JSON unterzubringen und sie wieder zu erstellen.
    • 
-

diff --git a/files/de/web/javascript/reference/fehler/dead_object/index.html b/files/de/web/javascript/reference/fehler/dead_object/index.html
deleted file mode 100644
index 036e637ef4..0000000000
--- a/files/de/web/javascript/reference/fehler/dead_object/index.html
+++ /dev/null
@@ -1,50 +0,0 @@
----
-title: 'TypeError: can''t access dead object'
-slug: Web/JavaScript/Reference/Fehler/Dead_object
-tags:
-  - Addon
-  - Error
-  - Errors
-  - JavaScript
-translation_of: Web/JavaScript/Reference/Errors/Dead_object
----
-
{{JSSidebar("Errors")}}

-
-
Fehlermeldung

-
-
TypeError: can't access dead object
-

-
-
Fehlertyp

-
-
{{jsxref("TypeError")}}

-
-
Was ist falsch gelaufen?

-
-
Um die Speichernutzung zu verbessern und Speicherlücken zu vermeiden, verbietet Firefox Add-Ons Referenzen in das DOM Objekt zu speichern, nachdem das Elterndokument zerstört wurde. Ein totes Objekt hält eine starke Referenz zu einem DOM-Element, welche nach nach dem Zerstören in DOM existiert. Um dieses Problem zu vermeiden, sollte statt der Referenz zu einem DOM-Knoten im fremden Dokument die Referenz in einem Objekt, welches im Dokument selbst spezifiziert ist gespeichert werden und gesäubert werden, wenn das Dokument nicht mehr geladen ist, oder als weak Referenz gespeichert werden.

-
-
Prüfen, ob ein Objekt tot ist

-
-
Components.utils hat ein isDeadWrapper() Methode, welche in privilegiertem Quelltext verwendet werden sollte.

-
-
if (Components.utils.isDeadWrapper(window)) {
-  // dead
-}

-
-
Nicht privilegierter Quelltext hat keinen Zugriff auf Component.utils und sollt deswegen einfach den Fehler abfangen.

-
-
try {
-  String(window);
-}
-catch (e) {
-  console.log("window is likely dead");
-}

-
-
Siehe auch

-
-
diff --git a/files/de/web/javascript/reference/fehler/delete_in_strict_mode/index.html b/files/de/web/javascript/reference/fehler/delete_in_strict_mode/index.html
deleted file mode 100644
index 042505e066..0000000000
--- a/files/de/web/javascript/reference/fehler/delete_in_strict_mode/index.html
+++ /dev/null
@@ -1,70 +0,0 @@
----
-title: >-
-  SyntaxError: applying the 'delete' operator to an unqualified name is
-  deprecated
-slug: Web/JavaScript/Reference/Fehler/Delete_in_strict_mode
-tags:
-  - Error
-  - Errors
-  - JavaScript
-  - SyntaxError
-translation_of: Web/JavaScript/Reference/Errors/Delete_in_strict_mode
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
SyntaxError: applying the 'delete' operator to an unqualified name is deprecated (Firefox)
-SyntaxError: Delete of an unqualified identifier in strict mode. (Chrome)
-

-
-
Fehlertyp

-
-
{{jsxref("SyntaxError")}} nur im Strict Mode.

-
-
Was ist falsch gelaufen?

-
-
Normale Variablen können in JavaScript nicht mit dem delete Operator gelöscht werden. Im Strict Mode führt der Versuch des Löschens zu einem Fehler, weil es nicht erlaubt ist.

-
-
Der delete Operator kann nur Eigenschaften eines Objektes löschen. Objekteigenschaften müssen dafür Konfigurierbar sein.

-
-
Wie oft fälschlicherweise angenommen, hat die delete Operation nichts mit dem direkten freimachen von Speicher zu tun. Speicherverwaltung wird indirekt gemacht, mehr Informationen darüber auf den Seiten Speicherverwaltung und delete.

-
-
Der Fehler tritt nur im Strict Mode auf. In normalem Code gibt die Operation einfach false zurück.

-
-
Beispiele

-
-
Der Versuch eine einfache Variable zu Löschen funktioniert in JavaScript nicht unf führt im Strict Mode zu einem Fehler:

-
-
'use strict';
-
-var x;
-
-// ...
-
-delete x;
-
-// SyntaxError: applying the 'delete' operator to an unqualified name
-// is deprecated
-

-
-
Um den Inhalt einer Variable zu leeren, kann man sie auf {{jsxref("null")}} setzen:

-
-
'use strict';
-
-var x;
-
-// ...
-
-x = null;
-
-// x can be garbage collected
-

-
-
Siehe auch

-
-
diff --git a/files/de/web/javascript/reference/fehler/deprecated_caller_or_arguments_usage/index.html b/files/de/web/javascript/reference/fehler/deprecated_caller_or_arguments_usage/index.html
deleted file mode 100644
index 15bb0e68b6..0000000000
--- a/files/de/web/javascript/reference/fehler/deprecated_caller_or_arguments_usage/index.html
+++ /dev/null
@@ -1,75 +0,0 @@
----
-title: 'ReferenceError: deprecated caller or arguments usage'
-slug: Web/JavaScript/Reference/Fehler/Deprecated_caller_or_arguments_usage
-tags:
-  - Errors
-  - JavaScript
-  - Strict Mode
-  - Warning
-translation_of: Web/JavaScript/Reference/Errors/Deprecated_caller_or_arguments_usage
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
Warning: ReferenceError: deprecated caller usage (Firefox)
-Warning: ReferenceError: deprecated arguments usage (Firefox)
-TypeError: 'callee' and 'caller' cannot be accessed in strict mode. (Safari)
-

-
-
Fehlertyp

-
-
Eine {{jsxref("ReferenceError")}} Warnung, die nur im Strict Mode auftaucht. Die JavaScript-Ausführung wird dadurch nicht angehalten.

-
-
Was ist falsch gelaufen?

-
-
Im Strict Mode wurden die Eigenschaften {{jsxref("Function.caller")}} oder {{jsxref("Function.arguments")}} benutzt, was nicht getan werden sollte. Sie sind veraltet, da sie den Funktionsaufruf verlieren, nicht standardisiert sind, schwer zu optimieren sind und möglicherweise leistungsschädigend sein können.

-
-
Beispiele

-
-
Veraltete function.caller oder arguments.callee.caller Eigenschaft

-
-
{{jsxref("Function.caller")}} und arguments.callee.caller sind veraltet (in den Referenzartikeln sind mehr Informationen dazu enthalten).

-
-
'use strict';
-
-function myFunc() {
-  if (myFunc.caller == null) {
-    return 'The function was called from the top!';
-  } else {
-    return 'This function\'s caller was ' + myFunc.caller;
-  }
-}
-
-myFunc();
-// Warning: ReferenceError: deprecated caller usage
-// "The function was called from the top!"

-
-
Function.arguments

-
-
{{jsxref("Function.arguments")}} ist veraltet (im Referenzartikel sind mehr Informationen dazu enthalten).

-
-
'use strict';
-
-function f(n) { g(n - 1); }
-
-function g(n) {
-  console.log('before: ' + g.arguments[0]);
-  if (n > 0) { f(n); }
-  console.log('after: ' + g.arguments[0]);
-}
-
-f(2);
-
-console.log('returned: ' + g.arguments);
-// Warning: ReferenceError: deprecated arguments usage
-

-
-
Siehe auch

-
-
diff --git a/files/de/web/javascript/reference/fehler/deprecated_expression_closures/index.html b/files/de/web/javascript/reference/fehler/deprecated_expression_closures/index.html
deleted file mode 100644
index b8c6e7ced8..0000000000
--- a/files/de/web/javascript/reference/fehler/deprecated_expression_closures/index.html
+++ /dev/null
@@ -1,78 +0,0 @@
----
-title: 'Warning: expression closures are deprecated'
-slug: Web/JavaScript/Reference/Fehler/Deprecated_expression_closures
-tags:
-  - JavaScript
-  - Warning
-translation_of: Web/JavaScript/Reference/Errors/Deprecated_expression_closures
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
Warning: expression closures are deprecated
-

-
-
Fehlertyp

-
-
Warnung. Die Ausführung von JavaScript wird nicht angehalten.

-
-
Was ist falsch gelaufen?

-
-
Die nicht standardisierte  Ausdrucks Closure Syntax (Kurzform der Funktionssyntax) ist veraltetet und sollte nicht mehr verwendet werden. Diese Syntax wird komplett entfernt ({{bug(1083458)}}) und Skripte die diese Benutzen erzeugen dann einen {{jsxref("SyntaxError")}}.

-
-
Beispiele

-
-
Veraltete Syntax

-
-
Ausdrucks Closures vermeiden geschweifte Klammern oder return Anweisungen in Funktionsdeklarationen oder in Methodendefinitionen in Objekten.

-
-
var x = function() 1;
-
-var obj = {
-  count: function() 1
-};
-

-
-
Standardsyntax

-
-
Um die nicht standardisierte Ausdrucks Closures Syntax zu Standard-ECMAScript Syntax zu konvertieren müssen geschweifte Klammern und ein return Statement hinzugefügt werden.

-
-
var x = function() { return 1; }
-
-var obj = {
-  count: function() { return 1; }
-};
-

-
-
Standardsyntax mit Arrowfunktionen

-
-
Alternativ können Arrow-Funktionen genutzt werden:

-
-
var x = () => 1;

-
-
Standardsyntax mit Kurzformmethodensyntax

-
-
Anweisungs Closures können auch in Gettern und Settern gefunden werden:

-
-
var obj = {
-  get x() 1,
-  set x(v) this.v = v
-};
-

-
-
Mit ES2015 Methodendefinitionen können diese folgendermaßen konvertiert werden :

-
-
var obj = {
-  get x() { return 1 },
-  set x(v) { this.v = v }
-};
-

-
-
Siehe auch

-
-
diff --git a/files/de/web/javascript/reference/fehler/deprecated_octal/index.html b/files/de/web/javascript/reference/fehler/deprecated_octal/index.html
deleted file mode 100644
index e153038950..0000000000
--- a/files/de/web/javascript/reference/fehler/deprecated_octal/index.html
+++ /dev/null
@@ -1,67 +0,0 @@
----
-title: 'SyntaxError: "0"-prefixed octal literals and octal escape seq. are deprecated'
-slug: Web/JavaScript/Reference/Fehler/Deprecated_octal
-tags:
-  - Error
-  - JavaScript
-  - Strict Mode
-  - SyntaxError
-translation_of: Web/JavaScript/Reference/Errors/Deprecated_octal
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
SyntaxError:
-"0"-prefixed octal literals and octal escape sequences are deprecated;
-for octal literals use the "0o" prefix instead
-

-
-
Fehlertyp

-
-
{{jsxref("SyntaxError")}} nur im Strict Mode.

-
-
Was ist falsch gelaufen?

-
-
Oktalliterale und oktal maskierte Sequenzen sind veraltet und führen zu einem {{jsxref("SyntaxError")}} im Strict Mode. Ab ECMAScript 2015 wird in der standardisierten Syntax eine führende null gefolgt von einem kleinen oder großen lateinischen Buchstaben "O" verwendet (0o oder 0O).

-
-
Beispiele

-
-
Oktalliteral mit führender 0

-
-
"use strict";
-
-03;
-
-// SyntaxError: "0"-prefixed octal literals and octal escape sequences
-// are deprecated

-
-
Oktal maskierte Sequenz

-
-
"use strict";
-
-"\251";
-
-// SyntaxError: "0"-prefixed octal literals and octal escape sequences
-// are deprecated
-

-
-
Valide Oktalzahlen

-
-
Einsatz einer führenden null gefolgt von "o" oder "O":

-
-
0o3;
-

-
-
Statt oktal maskierte Sequenzen können hexadezimal maskierte Sequenzen benutzt werden:

-
-
'\xA9';

-
-
Siehe auch

-
-
diff --git a/files/de/web/javascript/reference/fehler/deprecated_source_map_pragma/index.html b/files/de/web/javascript/reference/fehler/deprecated_source_map_pragma/index.html
deleted file mode 100644
index 1f87b2bd2d..0000000000
--- a/files/de/web/javascript/reference/fehler/deprecated_source_map_pragma/index.html
+++ /dev/null
@@ -1,58 +0,0 @@
----
-title: >-
-  SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //#
-  instead
-slug: Web/JavaScript/Reference/Fehler/Deprecated_source_map_pragma
-tags:
-  - Errors
-  - JavaScript
-  - Source maps
-translation_of: Web/JavaScript/Reference/Errors/Deprecated_source_map_pragma
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
Warning: SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead
-
-Warning: SyntaxError: Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead
-

-
-
Fehlertyp

-
-
Eine Warnung die als {{jsxref("SyntaxError")}} auftritt. Die Ausführung von JavaScript wird nicht unterbrochen.

-
-
Was ist falsch gelaufen?

-
-
Es gibt eine veraltete Source-Map-Syntax im JavaScript Code.

-
-
JavaScript Code wird oft zusammengefügt und minimiert, um die Auslieferung durch einen Server effizienter zu machen. Mit Source-Maps kann beim Debuggen der ausgeführte Code auf die Original Codedateien übertragen werden.

-
-
Die Source-Map Spezifikation änderte die Syntax wegen eines Konflikts mit dem IE immer wenn die Seite nach //@cc_on war, interpretierte dieser es als bedingte Kompilierung in der IE JScript Umgebung. Der bedingte Kompilations Kommentar im IE ist eine relativ unbekannte Funktion, aber dieses machte Source-Maps von jQuery und anderen Bibliotheken kaputt.

-
-
Beispiele

-
-
Veraltete Syntax

-
-
Syntax mit dem veralteten "@" Zeichen.

-
-
//@ sourceMappingURL=http://example.com/path/to/your/sourcemap.map
-

-
-
Standard Syntax

-
-
Benutzt stattdessen ein "#" Zeichen.

-
-
//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map

-
-
Alternativ kann ein {{HTTPHeader("SourceMap")}} Header zu der JavaScript Datei gesetzt werden, um einen solchen Kommentar zu vermeiden:

-
-
SourceMap: /path/to/file.js.map

-
-
Siehe auch

-
-
diff --git a/files/de/web/javascript/reference/fehler/deprecated_string_generics/index.html b/files/de/web/javascript/reference/fehler/deprecated_string_generics/index.html
deleted file mode 100644
index d495448759..0000000000
--- a/files/de/web/javascript/reference/fehler/deprecated_string_generics/index.html
+++ /dev/null
@@ -1,104 +0,0 @@
----
-title: 'Warning: String.x is deprecated; use String.prototype.x instead'
-slug: Web/JavaScript/Reference/Fehler/Deprecated_String_generics
-tags:
-  - JavaScript
-  - Warning
-translation_of: Web/JavaScript/Reference/Errors/Deprecated_String_generics
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
Warning: String.charAt            is deprecated; use String.prototype.charAt            instead
-Warning: String.charCodeAt        is deprecated; use String.prototype.charCodeAt        instead
-Warning: String.concat            is deprecated; use String.prototype.concat            instead
-Warning: String.contains          is deprecated; use String.prototype.contains          instead
-Warning: String.endsWith          is deprecated; use String.prototype.endsWith          instead
-Warning: String.includes          is deprecated; use String.prototype.includes          instead
-Warning: String.indexOf           is deprecated; use String.prototype.indexOf           instead
-Warning: String.lastIndexOf       is deprecated; use String.prototype.lastIndexOf       instead
-Warning: String.localeCompare     is deprecated; use String.prototype.localeCompare     instead
-Warning: String.match             is deprecated; use String.prototype.match             instead
-Warning: String.normalize         is deprecated; use String.prototype.normalize         instead
-Warning: String.replace           is deprecated; use String.prototype.replace           instead
-Warning: String.search            is deprecated; use String.prototype.search            instead
-Warning: String.slice             is deprecated; use String.prototype.slice             instead
-Warning: String.split             is deprecated; use String.prototype.split             instead
-Warning: String.startsWith        is deprecated; use String.prototype.startsWith        instead
-Warning: String.substr            is deprecated; use String.prototype.substr            instead
-Warning: String.substring         is deprecated; use String.prototype.substring         instead
-Warning: String.toLocaleLowerCase is deprecated; use String.prototype.toLocaleLowerCase instead
-Warning: String.toLocaleUpperCase is deprecated; use String.prototype.toLocaleUpperCase instead
-Warning: String.toLowerCase       is deprecated; use String.prototype.toLowerCase       instead
-Warning: String.toUpperCase       is deprecated; use String.prototype.toUpperCase       instead
-Warning: String.trim              is deprecated; use String.prototype.trim              instead
-Warning: String.trimLeft          is deprecated; use String.prototype.trimLeft          instead
-Warning: String.trimRight         is deprecated; use String.prototype.trimRight         instead
-

-
-
Fehlertyp

-
-
Warnung. JavaScript unterbricht die Ausführung nicht.

-
-
Was ist falsch gelaufen?

-
-
Die nicht standardisierten generischen {{jsxref("String")}} Methoden sind veraltet und werden in Zukunft gelöscht (keine Browserübergreifende Unterstützung, nur in Firefox verfügbar). String-Generics stellen String-Instanzmethoden für das String-Objekt bereit, wodurch String-Methoden auf jedes Objekt angewendet werden können.

-
-
Firefox {{bug(1222552)}} dokumentiert das Entfernen von generischen String Methoden.

-
-
Beispiele

-
-
Fehlerfälle

-
-
var num = 15;
-String.replace(num, /5/, '2');

-
-
Gültige Fälle

-
-
var num = 15;
-String(num).replace(/5/, '2');
-

-
-
Shim

-
-
Das Folgende ist ein Shim zur Unterstützung nicht unterstützender Browser:

-
-
/*globals define*/
-// Assumes all supplied String instance methods already present
-// (one may use shims for these if not available)
-(function() {
-  'use strict';
-
-  var i,
-    // We could also build the array of methods with the following, but the
-    //   getOwnPropertyNames() method is non-shimable:
-    // Object.getOwnPropertyNames(String).filter(function(methodName) {
-    //   return typeof String[methodName] === 'function';
-    // });
-    methods = [
-      'contains', 'substring', 'toLowerCase', 'toUpperCase', 'charAt',
-      'charCodeAt', 'indexOf', 'lastIndexOf', 'startsWith', 'endsWith',
-      'trim', 'trimLeft', 'trimRight', 'toLocaleLowerCase', 'normalize',
-      'toLocaleUpperCase', 'localeCompare', 'match', 'search', 'slice',
-      'replace', 'split', 'substr', 'concat', 'localeCompare'
-    ],
-    methodCount = methods.length,
-    assignStringGeneric = function(methodName) {
-      var method = String.prototype[methodName];
-      String[methodName] = function(arg1) {
-        return method.apply(arg1, Array.prototype.slice.call(arguments, 1));
-      };
-    };
-
-  for (i = 0; i < methodCount; i++) {
-    assignStringGeneric(methods[i]);
-  }
-}());

-
-
Siehe auch

-
-
    
- 
  • {{jsxref("String")}}
    • 
- 
  • Es gibt ebenfalls {{jsxref("Global_Objects/Array", "Generische Array Methoden", "#Array_generic_methods", 1)}}  (die auch veraltet sind).
    • 
-

diff --git a/files/de/web/javascript/reference/fehler/deprecated_tolocaleformat/index.html b/files/de/web/javascript/reference/fehler/deprecated_tolocaleformat/index.html
deleted file mode 100644
index 31cc81d9cc..0000000000
--- a/files/de/web/javascript/reference/fehler/deprecated_tolocaleformat/index.html
+++ /dev/null
@@ -1,90 +0,0 @@
----
-title: 'Warning: Date.prototype.toLocaleFormat is deprecated'
-slug: Web/JavaScript/Reference/Fehler/Deprecated_toLocaleFormat
-tags:
-  - JavaScript
-  - Warning
-translation_of: Web/JavaScript/Reference/Errors/Deprecated_toLocaleFormat
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
Warning: Date.prototype.toLocaleFormat is deprecated; consider using Intl.DateTimeFormat instead
-

-
-
Fehlertyp

-
-
Warnung. JavaScript stoppt die ausführung nicht an.

-
-
Was ist falsch gelaufen?

-
-
Die nicht standardisierte Methode {{jsxref("Date.prototype.toLocaleFormat")}} ist veraltet und sollte nicht mehr benutzt werden. Sie benutzt einen Formatstring mit dem selben Format, wie dei der C Funktion strftime(). Diese Funktion ist seit Firefox 58+ nicht mehr vorhanden.

-
-
Beispiele

-
-
Veraltete Syntax

-
-
Die {{jsxref("Date.prototype.toLocaleFormat")}} Methode ist veraltet und wird entfernt werden (keine browserübergreifende Unterstützung, nur in Firefox verfügbar).

-
-
var today = new Date();
-var date = today.toLocaleFormat('%A, %e. %B %Y');
-
-console.log(date);
-// In German locale
-// "Freitag, 10. März 2017"

-
-
Alternative Standardsyntax mit der ECMAScript Intl API

-
-
Der ECMA-402 Standard spezifiziert Standardobjekte und Methoden (ECMAScript Intl API), die sprachabhängige Datums- und Zeitformatierung erlauben (verfügbar in Chrome 24+, Firefox 29+, IE11+, Safari10+).

-
-
Man kan jetzt die {{jsxref("Date.prototype.toLocaleDateString")}} Methode einsetzen, um einen Zeitpunkt zu formatieren.

-
-
var today = new Date();
-var options = { weekday: 'long', year: 'numeric',
-                month: 'long', day: 'numeric' };
-var date = today.toLocaleDateString('de-DE', options);
-
-console.log(date);
-// "Freitag, 10. März 2017"
-

-
-
Oder man kann das {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} Objekt einsetzen, welches die meisten Berechnungen zwischenspeichert, so dass das Formatieren schneller ist. Dieses ist nützlich, wenn Zeitpunkte in einer Schleife formatiert werden.

-
-
var options = { weekday: 'long', year: 'numeric',
-                month: 'long', day: 'numeric' };
-var dateFormatter = new Intl.DateTimeFormat('de-DE', options)
-
-var dates = [Date.UTC(2012, 11, 20, 3, 0, 0),
-             Date.UTC(2014, 04, 12, 8, 0, 0)];
-
-dates.forEach(date => console.log(dateFormatter.format(date)));
-
-// "Donnerstag, 20. Dezember 2012"
-// "Montag, 12. Mai 2014"
-

-
-
Alternative Standardsyntax mit Date Methoden

-
-
Das {{jsxref("Date")}} Objekt enthält einige Methoden, um einen Benutzerdefinierten Datumsstring zu erhalten.

-
-
(new Date()).toLocaleFormat("%Y%m%d");
-// "20170310"
-

-
-
Dieses kan konvertiert werde:

-
-
let now = new Date();
-let date = now.getFullYear() * 10000 +
-          (now.getMonth() + 1) * 100 + now.getDate();
-
-console.log(date);
-// "20170310"

-
-
Siehe auch

-
-
    
- 
  • {{jsxref("Date.prototype.toLocaleFormat")}}
    • 
- 
  • {{jsxref("Date.prototype.toLocaleDateString")}}
    • 
- 
  • {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}
    • 
-

diff --git a/files/de/web/javascript/reference/fehler/equal_as_assign/index.html b/files/de/web/javascript/reference/fehler/equal_as_assign/index.html
deleted file mode 100644
index dbe5e55b02..0000000000
--- a/files/de/web/javascript/reference/fehler/equal_as_assign/index.html
+++ /dev/null
@@ -1,54 +0,0 @@
----
-title: 'SyntaxError: test for equality (==) mistyped as assignment (=)?'
-slug: Web/JavaScript/Reference/Fehler/Equal_as_assign
-tags:
-  - Errors
-  - JavaScript
-  - SyntaxError
-translation_of: Web/JavaScript/Reference/Errors/Equal_as_assign
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
Warning: SyntaxError: test for equality (==) mistyped as assignment (=)?
-

-
-
Fehlertyp

-
-
{{jsxref("SyntaxError")}} Warnung nur im strict mode.

-
-
Was ist falsch gelaufen?

-
-
Es gibt eine Zuweisung (=) an der eigentlich ein Gleichheitsprüfung (==) erwartet wird. Um das Debuggen zu unterstützen, warnt JavaScript diesen Fakt (im strict mode).

-
-
Beispiele

-
-
Zuweisung in bedingten Ausdrücken

-
-
Es ist ratsam in bedingten Ausdrücken (wie z. B. if...else) keine einfachen Zuweisungen zu verwenden, weil beim lesen des Codes eine Zuweisung mit einer Gleichheitsprüfung verwechselt werden kann. Zum Beispiel sollte folgender Code nicht verwendet werden:

-
-
if (x = y) {
-  // do the right thing
-}
-

-
-
Wenn es notwendig ist eine Zuweisung in einem bedingten Ausdruck einzusetzen, ist es verbreitet, diese mit runden Klammern einzuklammern. Zum Beispiel:

-
-
if ((x = y)) {
-  // do the right thing
-}

-
-
Andernfalls kann es sein, dass eigentliche eine Vergleichsoperation gemeint war (z. B. == oder ===):

-
-
if (x == y) {
-  // do the right thing
-}

-
-
Siehe auch

-
-
diff --git a/files/de/web/javascript/reference/fehler/for-each-in_loops_are_deprecated/index.html b/files/de/web/javascript/reference/fehler/for-each-in_loops_are_deprecated/index.html
deleted file mode 100644
index 2651ea45ba..0000000000
--- a/files/de/web/javascript/reference/fehler/for-each-in_loops_are_deprecated/index.html
+++ /dev/null
@@ -1,168 +0,0 @@
----
-title: 'Warning: JavaScript 1.6''s for-each-in loops are deprecated'
-slug: Web/JavaScript/Reference/Fehler/For-each-in_loops_are_deprecated
-tags:
-  - JavaScript
-  - Warning
-translation_of: Web/JavaScript/Reference/Errors/For-each-in_loops_are_deprecated
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
Warning: JavaScript 1.6's for-each-in loops are deprecated; consider using ES6 for-of instead
-

-
-
Fehlertyp

-
-
Warnung

-
-
Was ist falsch gelaufen?

-
-
Das {{jsxref("Statements/for_each...in", "for each (variable in obj)")}} Statement aus JavaScript 1.6 ist veraltet und wird in naher Zukunft entfernt.

-
-
Beispiele

-
-
Objektiteration

-
-
{{jsxref("Statements/for_each...in", "for each...in")}} wurde eingesetzt, um über spezifizierte Objektwerte zu iterieren.

-
-
Veraltete Syntax

-
-
var object = { a: 10, b: 20 };
-
-for each (var x in object) {
-  console.log(x);        // 10
-                         // 20
-}
-

-
-
Alternative Standardsyntax

-
-
Man kann die Standardschleife {{jsxref("Statements/for...in", "for...in")}} benutzen, um über spezifizierte Objektschlüssel zu iterieren und jeden Wert in der Schleife auszulesen:

-
-
var object = { a: 10, b: 20 };
-
-for (var key in object) {
-  var x = object[key];
-  console.log(x);        // 10
-                         // 20
-}
-

-
-
Oder man benutzt {{jsxref("Statements/for...of", "for...of")}} (ES2015) und {{jsxref("Object.values")}} (ES2017), um ein Array von spezifizerten Werten zu bekommen und über diese zu iterieren:

-
-
var object = { a: 10, b: 20 };
-
-for (var x of Object.values(object)) {
-  console.log(x);        // 10
-                         // 20
-}
-

-
-
Arrayiteration

-
-
{{jsxref("Statements/for_each...in", "for each...in")}} wurde eingesetzt, um über spezifizierte Arrayelemente zu iterieren.

-
-
Veraltete Syntax

-
-
var array = [10, 20, 30];
-
-for each (var x in array) {
-  console.log(x);        // 10
-                         // 20
-                         // 30
-}
-

-
-
Alternative Standardsyntax

-
-
Dieses ist mit der {{jsxref("Statements/for...of", "for...of Schleife")}} (ES2015) möglich.

-
-
var array = [10, 20, 30];
-
-for (var x of array) {
-  console.log(x);        // 10
-                         // 20
-                         // 30
-}
-

-
-
Iterieren über ein Arrays oder null

-
-
{{jsxref("Statements/for_each...in", "for each...in")}} tut nichts, wenn der übergebene Wert null oder undefined ist. {{jsxref("Statements/for...of", "for...of")}} erzeugt in diesem Fall einen Fehler.

-
-
Veraltete Syntax

-
-
function func(array) {
-  for each (var x in array) {
-    console.log(x);
-  }
-}
-func([10, 20]);        // 10
-                       // 20
-func(null);            // prints nothing
-func(undefined);       // prints nothing
-

-
-
Alternative Standardsyntax

-
-
Um das {{jsxref("Statements/for_each...in", "for each...in")}} Statement neu zu schreibe, so dass null oder undefined mit {{jsxref("Statements/for...of", "for...of")}} funktionieren, muss eine Bedingung um {{jsxref("Statements/for...of", "for...of")}} verfasst werden.

-
-
function func(array) {
-  if (array) {
-    for (var x of array) {
-      console.log(x);
-    }
-  }
-}
-func([10, 20]);        // 10
-                       // 20
-func(null);            // prints nothing
-func(undefined);       // prints nothing
-

-
-
Über Objekt-Schlüssel-Werte-Paare iterieren

-
-
Veraltete Syntax

-
-
Es gibt eine veraltete Dialekt, der das Iterieren über Objekt-Schlüssel-Werte-Paare mit {{jsxref("Statements/for_each...in", "for each...in")}} und mit dem veralteten {{jsxref("Iterator")}} Objekt erlaubt.

-
-
var object = { a: 10, b: 20 };
-
-for each (var [key, value] in Iterator(object)) {
-  console.log(key, value);  // "a", 10
-                            // "b", 20
-}
-

-
-
Alternative Standardsyntax

-
-
Man kann die Standardschleife {{jsxref("Statements/for...in", "for...in")}} benutzen, um über spezifizierte Objektschlüssel zu iterieren und jeden Wert in der Schleife auszulesen:

-
-
var object = { a: 10, b: 20 };
-
-for (var key in object) {
-  var value = object[key];
-  console.log(key, value);  // "a", 10
-                            // "b", 20
-}
-

-
-
Oder man benutzt {{jsxref("Statements/for...of", "for...of")}} (ES2015) und {{jsxref("Object.values")}} (ES2017), um ein Array von spezifizerten Werten zu bekommen und über diese zu iterieren:

-
-
var object = { a: 10, b: 20 };
-
-for (var [key, value] of Object.entries(object)) {
-  console.log(key, value);  // "a", 10
-                            // "b", 20
-}
-

-
-
Siehe auch

-
-
    
- 
  • {{jsxref("Statements/for...of", "for...of")}}
    • 
- 
  • {{jsxref("Object.values")}}
    • 
- 
  • {{jsxref("Object.entries")}}
    • 
-

diff --git a/files/de/web/javascript/reference/fehler/getter_only/index.html b/files/de/web/javascript/reference/fehler/getter_only/index.html
deleted file mode 100644
index 268ee0cbf1..0000000000
--- a/files/de/web/javascript/reference/fehler/getter_only/index.html
+++ /dev/null
@@ -1,83 +0,0 @@
----
-title: 'TypeError: setting getter-only property "x"'
-slug: Web/JavaScript/Reference/Fehler/Getter_only
-tags:
-  - Error
-  - Errors
-  - JavaScript
-  - Strict Mode
-  - TypeError
-translation_of: Web/JavaScript/Reference/Errors/Getter_only
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
TypeError: setting getter-only property "x" (Firefox)
-TypeError: Cannot set property "prop" of #<Object> which has only a getter (Chrome)
-

-
-
Fehlertyp

-
-
{{jsxref("TypeError")}} nur im strict mode.

-
-
Was ist falsch gelaufen?

-
-
Wenn versucht wird einen neuen Wert einer Wichenschaft zuzuweisen, welche nur als Getter spezifiziert wurde. Wenn kein strict mode verwendet wird, wird dieses stillschweigend ignoriert, während im strict mode ein {{jsxref("TypeError")}} erzeugt wird.

-
-
Beispiele

-
-
Das folgende Beispiel zeigt, wie eine Eigenschaft als Getter eingestellt wird. Es wird kein Setter definiert, so dass ein TypeError erzeugt wird, wenn die temperature Eigenschaft mit dem Wert 30 beschrieben werden soll. Für mehr Details siehe auf der {{jsxref("Object.defineProperty()")}} Seite.

-
-
"use strict";
-
-function Archiver() {
-  var temperature = null;
-  Object.defineProperty(this, 'temperature', {
-    get: function() {
-      console.log('get!');
-      return temperature;
-    }
-  });
-}
-
-var arc = new Archiver();
-arc.temperature; // 'get!'
-
-arc.temperature = 30;
-// TypeError: setting getter-only property "temperature"

-
-
Um den Fehler zu beheben, muss einefach die Zeile 16 entfernt werden, weil dort der Versuch ist die temperature Eigenschaft zu beschreiben, oder es muss ein Setter definiert werden, wie zum Beispiel dieser:

-
-
"use strict";
-
-function Archiver() {
-  var temperature = null;
-  var archive = [];
-
-  Object.defineProperty(this, 'temperature', {
-    get: function() {
-      console.log('get!');
-      return temperature;
-    },
-    set: function(value) {
-      temperature = value;
-      archive.push({ val: temperature });
-    }
-  });
-
-  this.getArchive = function() { return archive; };
-}
-
-var arc = new Archiver();
-arc.temperature; // 'get!'
-arc.temperature = 11;
-arc.temperature = 13;
-arc.getArchive(); // [{ val: 11 }, { val: 13 }]

-
-
Siehe auch

-
-
    
- 
  • {{jsxref("Object.defineProperty()")}}
    • 
- 
  • {{jsxref("Object.defineProperties()")}}
    • 
-

diff --git a/files/de/web/javascript/reference/fehler/identifier_after_number/index.html b/files/de/web/javascript/reference/fehler/identifier_after_number/index.html
deleted file mode 100644
index 64cb9cdfe3..0000000000
--- a/files/de/web/javascript/reference/fehler/identifier_after_number/index.html
+++ /dev/null
@@ -1,53 +0,0 @@
----
-title: 'SyntaxError: identifier starts immediately after numeric literal'
-slug: Web/JavaScript/Reference/Fehler/Identifier_after_number
-tags:
-  - Error
-  - Errors
-  - JavaScript
-  - SyntaxError
-translation_of: Web/JavaScript/Reference/Errors/Identifier_after_number
----
-
{{JSSidebar("Errors")}}

-
-
Fehlermeldung

-
-
SyntaxError: identifier starts immediately after numeric literal (Firefox)
-SyntaxError: Unexpected number (Chrome)
-

-
-
Fehlertyp

-
-
{{jsxref("SyntaxError")}}

-
-
Was ist falsch gelaufen?

-
-
Die Namen von Variablen, {{Glossary("Identifier", "Bezeichner")}} genannt, haben einige Regeln, die der Code erfüllen muss.

-
-
Ein Bezeichner in JavaScript muss mit einem Buchstaben, einem Unterstrich (_) oder einem Dollarzeichen ($) starten. Er kann nicht mit einer Ziffer beginnen. Nur nachfolgende Zeichen sind Ziffern (0-9).

-
-
Beispiele

-
-
Variablenname der mit einer Ziffer beginnt

-
-
Variablennamen dürfen in JavaScript nicht mit einer Zahl beginnen. Das folgende wird nciht funktionieren:

-
-
var 1life = 'foo';
-// SyntaxError: identifier starts immediately after numeric literal
-
-var foo = 1life;
-// SyntaxError: identifier starts immediately after numeric literal
-

-
-
Man muss die Variable neu benenne, um die führende Zahl im Namen zu vermeiden.

-
-
var life1 = 'foo';
-var foo = life1;
-

-
-
Siehe auch

-
-
diff --git a/files/de/web/javascript/reference/fehler/illegal_character/index.html b/files/de/web/javascript/reference/fehler/illegal_character/index.html
deleted file mode 100644
index e0c083022c..0000000000
--- a/files/de/web/javascript/reference/fehler/illegal_character/index.html
+++ /dev/null
@@ -1,80 +0,0 @@
----
-title: 'SyntaxError: illegal character'
-slug: Web/JavaScript/Reference/Fehler/Illegal_character
-tags:
-  - Error
-  - Errors
-  - JavaScript
-  - SyntaxError
-translation_of: Web/JavaScript/Reference/Errors/Illegal_character
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
SyntaxError: illegal character (Firefox)
-SyntaxError: Invalid or unexpected token (Chrome)
-

-
-
Fehlertyp

-
-
{{jsxref("SyntaxError")}}

-
-
Was ist falsch gelaufen?

-
-
Es gibt ein nicht valides oder nicht erwartetes Token, welches nicht an eine Position im Code passt. Man sollte einen Editor mit Syntaxhighlighting benutzten und vorsichtig nach Verwechselungen suchen, wie einem Minuszeichen ( - ) und einem Dashzeichen ( – ) oder einfachen Anführungszeichen ( " ) und anderen Anführungszeichen ( “ ).

-
-
Beispiele

-
-
Verwechseltes Zeichen

-
-
Einige Zeichen sehen sehr ähnlich aus, aber führen dazu, dass der Code nicht interpretiert werden kann. Bekannte Beispiele dafür sind Anführungszeichen, das Minus oder das Semikolon (griechisches Fragezeichen (U+37e) sieht genauso aus)

-
-
“This looks like a string”;  // SyntaxError: illegal character
-                             // “ und ” sind nicht ", aber sehen so aus
-
-42 – 13;                     // SyntaxError: illegal character
-                             // – sind nicht -, aber sieht so aus
-
-var foo = 'bar';             // SyntaxError: illegal character
-                             // <37e> sind nicht ;, aber sieht so aus
-

-
-
Das funktioniert:

-
-
"This is actually a string";
-42 - 13;
-var foo = 'bar';
-

-
-
Einige Editoren und IDEs werden darauf hinweisen oder dieses anderes hervorheben, aber nicht alle. Wenn manchmal so etwas im Code passiert und man in der Lage ist das Problem zu finden, ist es oft das beste die Zeile zu löschen und sie neu einzutippen.

-
-
Vergessene Zeichen

-
-
Es passiert schnell, dass man ein Zeichen vergisst.

-
-
var colors = ['#000', #333', '#666'];
-// SyntaxError: illegal character
-

-
-
Man muss das fehlende Anführungszeichen ergänzen '#333'.

-
-
var colors = ['#000', '#333', '#666'];

-
-
Nicht sichtbare Zeichen

-
-
Beim Kopieren und Einfügen von Code aus externen Quellen kann es nicht valide Zeichen geben. Zum Beispiel:

-
-
var foo = 'bar';​
-// SyntaxError: illegal character
-

-
-
Wenn man den Code in einem Editor wie Vim anschaut, bemerkt man, dass ein breitenloses Leerzeichen (ZWSP) (U+200B) benutzt wird.

-
-
var foo = 'bar';​<200b>

-
-
Siehe auch

-
-
diff --git a/files/de/web/javascript/reference/fehler/in_operator_no_object/index.html b/files/de/web/javascript/reference/fehler/in_operator_no_object/index.html
deleted file mode 100644
index 6bace66437..0000000000
--- a/files/de/web/javascript/reference/fehler/in_operator_no_object/index.html
+++ /dev/null
@@ -1,72 +0,0 @@
----
-title: 'TypeError: cannot use ''in'' operator to search for ''x'' in ''y'''
-slug: Web/JavaScript/Reference/Fehler/in_operator_no_object
-tags:
-  - Error
-  - Errors
-  - JavaScript
-  - TypeError
-translation_of: Web/JavaScript/Reference/Errors/in_operator_no_object
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
TypeError: right-hand side of 'in' should be an object, got 'x' (Firefox)
-TypeError: cannot use 'in' operator to search for 'x' in 'y' (Firefox, Chrome)
-

-
-
Fehlertyp

-
-
{{jsxref("TypeError")}}

-
-
Was ist falsch gelaufen?

-
-
Der in Operator kan nur für das Prüfen von Eigenschaften in Objekten genutzt werden. Man kann nicht in Strings, Nummern oder anderen primitiven Typen suchen.

-
-
Beispiele

-
-
Suchen in Strings

-
-
Im Vergleich zu anderen Programmiersprachen (z. B. Python) kann in Strings nicht mit dem in Operator gesucht werden.

-
-
"Hello" in "Hello World";
-// TypeError: cannot use 'in' operator to search for 'Hello' in 'Hello World'

-
-
Stattdessen kann zum Beispiel {{jsxref("String.prototype.indexOf()")}} eingesetzt werden.

-
-
"Hello World".indexOf("Hello") !== -1;
-// true

-
-
Der Operand kann nicht null oder undefined sein

-
-
Man muss sicherstellen, dass der Operand nicht {{jsxref("null")}} oder {{jsxref("undefined")}} ist.

-
-
var foo = null;
-"bar" in foo;
-// TypeError: cannot use 'in' operator to search for 'bar' in 'foo' (Chrome)
-// TypeError: right-hand side of 'in' should be an object, got null (Firefox)
-

-
-
Der in Operator erwartet immer ein Objekt.

-
-
var foo = { baz: "bar" };
-"bar" in foo; // false
-
-"PI" in Math; // true
-"pi" in Math; // false
-

-
-
Suchen in Arrays

-
-
Man muss vorsichtig sein, wenn der in Operator in {{jsxref("Array")}} Objekten genutzt wird. Der in Operator prüft die Indexnummern, aber nicht die Werte des Indizes.

-
-
var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple'];
-3 in trees; // true
-"oak" in trees; // false

-
-
Siehe auch

-
-
diff --git a/files/de/web/javascript/reference/fehler/index.html b/files/de/web/javascript/reference/fehler/index.html
deleted file mode 100644
index 67809031e7..0000000000
--- a/files/de/web/javascript/reference/fehler/index.html
+++ /dev/null
@@ -1,29 +0,0 @@
----
-title: JavaScript Fehler Referenz
-slug: Web/JavaScript/Reference/Fehler
-tags:
-  - Debugging
-  - Error
-  - Errors
-  - Exception
-  - JavaScript
-  - exceptions
-translation_of: Web/JavaScript/Reference/Errors
----
-
{{jsSidebar("Errors")}}

-
-
Unten ist eine Liste von Fehlern, die in JavaScript auftauchen können. Diese Fehler können beim Debuggen hilfreich sein, jedoch sind die Probleme nicht immer so klar. Die untenstehenden Seiten enthalten Details zu diesen Fehlern. Jeder Fehler ist ein Objekt, welches auf dem {{jsxref("Error")}} Objekt basieren und haben einen name und eine Fehlermeldung (message).

-
-
Fehler die in der Webconsole angezeigt werden enthalten manchmal einen Link zu einer der untenstehenden Seiten, um die Lösung von Problemen zu beschleunigen.

-
-
Liste von Fehlern

-
-
In dieser Liste ist jede Seite mit einem Namen (der Typ des Fehlers) und einer Fehlermeldung (eine detailliertere, verständlichere Meldung) aufgeführt. Diese beiden Eigenschaften eines Fehlers sind ein Einstiegspunkt für das Verständnis und das Lösen des Fehlers. Für mehr Informationen folge den folgenden Links!

-
-
{{ListSubPages("/en-US/docs/Web/JavaScript/Reference/Errors")}}

-
-
Siehe auch

-
-
diff --git a/files/de/web/javascript/reference/fehler/invalid_array_length/index.html b/files/de/web/javascript/reference/fehler/invalid_array_length/index.html
deleted file mode 100644
index 34edeb2969..0000000000
--- a/files/de/web/javascript/reference/fehler/invalid_array_length/index.html
+++ /dev/null
@@ -1,77 +0,0 @@
----
-title: 'RangeError: invalid array length'
-slug: Web/JavaScript/Reference/Fehler/Invalid_array_length
-tags:
-  - Errors
-  - JavaScript
-  - RangeError
-translation_of: Web/JavaScript/Reference/Errors/Invalid_array_length
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
RangeError: invalid array length (Firefox)
-RangeError: Invalid array length (Chrome)
-RangeError: Invalid array buffer length (Chrome)
-

-
-
Fehlertyp

-
-
{{jsxref("RangeError")}}

-
-
Was ist falsch gelaufen?

-
-
entweder:

-
-
    
- 
  • ein {{jsxref("Array")}} oder ein {{jsxref("ArrayBuffer")}} wurde mit einer negativen oder einer Zahl größer gleich 232 erzeugt, oder
    • 
- 
  • die {{jsxref("Array.length")}} Eigenschaft  wurde auf eine negative oder eine Zahl größer gleich 232  gesetzt.
    • 
-

-
-
Warum ist die Länge von Array and ArrayBuffer limitiert? Die length Eigenschaft von Array und ArrayBuffer ist mit einem vorzeichenlosen 32-bit Integer definiert, sodass nur Werte von 0 bis 232-1 gültig sind.

-
-
Wenn man ein Array mit dem Konstruktor erzeugen möchte, statt mit der Literalnotation, sollte man aufpassem, dass das erste Argument als Länge des Arrays interpretiert wird.

-
-
Man sollte die Länge festlegen, bevor man die length Eigenschaft setzt, oder mit dem ersten Argument im Konstruktor.

-
-
Beispiele

-
-
Ungültige Fälle

-
-
new Array(Math.pow(2, 40))
-new Array(-1)
-new ArrayBuffer(Math.pow(2, 32))
-new ArrayBuffer(-1)
-
-let a = [];
-a.length = a.length - 1;         // length Eigenschaft auf -1 gesetzt
-
-let b = new Array(Math.pow(2, 32) - 1);
-b.length = b.length + 1;         // length Eigenschaft auf 2^32 gesetzt
-

-
-
Gültige Fälle

-
-
[ Math.pow(2, 40) ]                     // [ 1099511627776 ]
-[ -1 ]                                  // [ -1 ]
-new ArrayBuffer(Math.pow(2, 32) - 1)
-new ArrayBuffer(0)
-
-let a = [];
-a.length = Math.max(0, a.length - 1);
-
-let b = new Array(Math.pow(2, 32) - 1);
-b.length = Math.min(0xffffffff, b.length + 1);
-
-// 0xffffffff ist die hexadecimal Notation für 2^32 - 1
-// kann auch als (-1 >>> 0) geschrieben werden
-

-
-
Siehe auch

-
-
    
- 
  • {{jsxref("Array")}}
    • 
- 
  • {{jsxref("Array.length")}}
    • 
- 
  • {{jsxref("ArrayBuffer")}}
    • 
-

diff --git a/files/de/web/javascript/reference/fehler/invalid_assignment_left-hand_side/index.html b/files/de/web/javascript/reference/fehler/invalid_assignment_left-hand_side/index.html
deleted file mode 100644
index 6e727fb9a2..0000000000
--- a/files/de/web/javascript/reference/fehler/invalid_assignment_left-hand_side/index.html
+++ /dev/null
@@ -1,53 +0,0 @@
----
-title: 'ReferenceError: invalid assignment left-hand side'
-slug: Web/JavaScript/Reference/Fehler/Invalid_assignment_left-hand_side
-tags:
-  - Errors
-  - JavaScript
-  - ReferenceError
-translation_of: Web/JavaScript/Reference/Errors/Invalid_assignment_left-hand_side
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
ReferenceError: invalid assignment left-hand side
-

-
-
Fehlertyp

-
-
{{jsxref("ReferenceError")}}.

-
-
Was ist falsch gelaufen?

-
-
Es gibt irgendwo eine unerwartete Zuweisung. Das kann zum Beispiel durch eine nicht Übereinstimmung des Zuweisungsoperators und eines Vergleichsoperators hervorgerufen werden. Während ein einzelnes "=" Zeichen einer Variable einen Wert zuweist, vergleichen  "==" und "===" zwei Werte.

-
-
Beispiele

-
-
if (Math.PI = 3 || Math.PI = 4) {
-  console.log('no way!');
-}
-// ReferenceError: invalid assignment left-hand side
-
-var str = 'Hello, '
-+= 'is it me '
-+= 'you\'re looking for?';
-// ReferenceError: invalid assignment left-hand side

-
-
In dem if Statement wird ein Vergleichsoperator ("==") und für die Stringverkettung ein plus ("+") Operator benötigt.

-
-
if (Math.PI == 3 || Math.PI == 4) {
-  console.log('no way!');
-}
-
-var str = 'Hello, '
-+ 'from the '
-+ 'other side!';
-

-
-
Siehe auch

-
-
diff --git a/files/de/web/javascript/reference/fehler/invalid_const_assignment/index.html b/files/de/web/javascript/reference/fehler/invalid_const_assignment/index.html
deleted file mode 100644
index 812577360a..0000000000
--- a/files/de/web/javascript/reference/fehler/invalid_const_assignment/index.html
+++ /dev/null
@@ -1,90 +0,0 @@
----
-title: 'TypeError: invalid assignment to const "x"'
-slug: Web/JavaScript/Reference/Fehler/Invalid_const_assignment
-tags:
-  - Error
-  - JavaScript
-  - TypeError
-translation_of: Web/JavaScript/Reference/Errors/Invalid_const_assignment
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
TypeError: invalid assignment to const "x" (Firefox)
-TypeError: Assignment to constant variable. (Chrome)
-TypeError: Redeclaration of const 'x' (IE/Edge)
-

-
-
Fehlertyp

-
-
{{jsxref("TypeError")}}

-
-
Was ist falsch gelaufen?

-
-
Eine Konstante ist ein Wert, der nicht von einem Programm während der normalen Ausführung, geändert werden kann. Sie kann nicht durch erneutes Zuweisen und Neudeklarationen geändert werden. In JavaScript werden Konstanten mit dem const Schlüsselwort deklariert.

-
-
Beispiel

-
-
Nicht valide Neudeklaration

-
-
Weist eine Konstanten erneut einen Wert zu. Führt zu einem Fehler.

-
-
const COLUMNS = 80;
-
-// ...
-
-COLUMNS = 120; // TypeError: invalid assignment to const `COLUMNS'

-
-
Den Fehler auflösen

-
-
Es gibt mehrere Optionen, um den Fehler zu vermeiden. Überprüfen Sie, was mit der betreffenden Konstante erreicht werden sollte.

-
-
Umbenennen

-
-
Wenn Sie eine andere Konstante deklarieren möchten, wählen Sie einen anderen Namen und benennen Sie ihn um. Dieser konstante Name ist dann in diesem Bereich vergeben.

-
-
const COLUMNS = 80;
-const WIDE_COLUMNS = 120;

-
-
const, let or var?

-
-
Verwenden Sie nicht const, wenn Sie keine Konstante deklarieren wollten. Vielleicht soll eine Blockvariable mit let oder eine globale Variable mit var deklariert werden.

-
-
let columns = 80;
-
-// ...
-
-let columns = 120;
-

-
-
Gültigkeitsbereich

-
-
Prüfen Sie, ob Sie im richtigen Gültigkeitsbereich sind. Sollte diese Konstante in diesen Gültigkeitsbereich oder sollte diese zum Beispiel in eine Funktion.

-
-
const COLUMNS = 80;
-
-function setupBigScreenEnvironment() {
-  const COLUMNS = 120;
-}

-
-
const und Unveränderlichkeit

-
-
Die const Deklaration erstellt eine nur lesbare Referenz zu einem Wert. Das bedeutet nicht, dass der enthaltene Wert Unveränderbar ist, sondern nur, dass der Bezeichner nicht neu definiert werden kann. Wenn die Konstante zum Beispiel ein Objekt ist, kann das Objekt selbst verändert werden. Es bedeutet nur, dass der Wert in der Variable nicht verändert werden kann.

-
-
const obj = {foo: 'bar'};
-obj = {foo: 'baz'}; // TypeError: invalid assignment to const `obj'
-

-
-
Aber man kann die Eigenschaften der Variable verändern:

-
-
obj.foo = 'baz';
-obj; // Object { foo: "baz" }

-
-
Siehe auch

-
-
diff --git a/files/de/web/javascript/reference/fehler/invalid_date/index.html b/files/de/web/javascript/reference/fehler/invalid_date/index.html
deleted file mode 100644
index 04954fe28f..0000000000
--- a/files/de/web/javascript/reference/fehler/invalid_date/index.html
+++ /dev/null
@@ -1,54 +0,0 @@
----
-title: 'RangeError: invalid date'
-slug: Web/JavaScript/Reference/Fehler/Invalid_date
-tags:
-  - Errors
-  - JavaScript
-  - RangeError
-translation_of: Web/JavaScript/Reference/Errors/Invalid_date
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
RangeError: invalid date (Firefox)
-RangeError: invalid time value (Chrome)
-RangeError: Provided date is not in valid range (Chrome)
-

-
-
Fehlertyp

-
-
{{jsxref("RangeError")}}

-
-
Was ist schief gelaufen?

-
-
Eine Zeichenfolge, die ein ungültiges Datum enthält, wurde  {{jsxref("Date")}} oder {{jsxref("Date.parse()")}} übergeben.

-
-
Beispiele

-
-
Nicht valide Fälle

-
-
Nicht erkennbare Strings oder Daten, welche nicht erlaubte Elementewerte im ISO formatierten String enthalten, geben gewöhnlich {{jsxref("NaN")}} zurück. Abhängig von der Implementierung kann es auch sein, dass nicht valide ISO Formate, einen RangeError: invalid date erzeugen, wie die folgenden Fällen in Firefox:

-
-
new Date('foo-bar 2014');
-new Date('2014-25-23').toISOString();
-new Date('foo-bar 2014').toString();
-

-
-
Das folgende gibt in Firefox {{jsxref("NaN")}} zurück.

-
-
Date.parse('foo-bar 2014'); // NaN

-
-
Für mehr Details, sollte die {{jsxref("Date.parse()")}} Dokumentation angesehen werden.

-
-
Valide Fälle

-
-
new Date('05 October 2011 14:48 UTC');

-
-
Siehe auch

-
-
    
- 
  • {{jsxref("Date")}}
    • 
- 
  • {{jsxref("Date.prototype.parse()")}}
    • 
- 
  • {{jsxref("Date.prototype.toISOString()")}}
    • 
-

diff --git a/files/de/web/javascript/reference/fehler/invalid_for-in_initializer/index.html b/files/de/web/javascript/reference/fehler/invalid_for-in_initializer/index.html
deleted file mode 100644
index bc4bf80c70..0000000000
--- a/files/de/web/javascript/reference/fehler/invalid_for-in_initializer/index.html
+++ /dev/null
@@ -1,74 +0,0 @@
----
-title: 'SyntaxError: for-in loop head declarations may not have initializers'
-slug: Web/JavaScript/Reference/Fehler/Invalid_for-in_initializer
-tags:
-  - Error
-  - JavaScript
-  - Strict Mode
-  - SyntaxError
-translation_of: Web/JavaScript/Reference/Errors/Invalid_for-in_initializer
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
SyntaxError: for-in loop head declarations may not have initializers (Firefox)
-
-SyntaxError: for-in loop variable declaration may not have an initializer. (Chrome)
-

-
-
Fehlertyp

-
-
{{jsxref("SyntaxError")}} nur im Strict Mode.

-
-
Was ist falsch gelaufen?

-
-
Der Kopf einer  for...in Schleife enthält einen Initialisierungsausdruck. Das ist, wenn eine Variable deklariert und mit einem Wert initialisiert wird (for(var i = 0 in obj)). Ohne Strict Mode wird die Initialisierung still ignoriert und verhält sich wie for(var i in obj). Im Strict Mode wird ein SyntaxError erzeugt.

-
-
Beispiele

-
-
Das Beispiel erzeugt einen SyntaxError:

-
-
"use strict";
-
-var obj = {a: 1, b: 2, c: 3 };
-
-for (var i = 0 in obj) {
-  console.log(obj[i]);
-}
-
-// SyntaxError: for-in loop head declarations may not have initializers
-

-
-
Valide for-in Schleife

-
-
Man kann die Initialisierung (i = 0) im Kopf der for-in Schleife entfernen.

-
-
"use strict";
-
-var obj = {a: 1, b: 2, c: 3 };
-
-for (var i in obj) {
-  console.log(obj[i]);
-}
-

-
-
Array Iteration

-
-
Die for...in Schleife sollte nicht für Array Iterationen benutzt werden. Zum Iterieren von durch ein {{jsxref("Array")}} sollte eine for Schleife statt einer for-in Schleife benutzt werden. Die for Schleife erlaubt es dann auch eine Initialisierung vorzunehmen:

-
-
var arr = [ "a", "b", "c" ]
-
-for (var i = 2; i < arr.length; i++) {
-  console.log(arr[i]);
-}
-
-// "c"

-
-
Siehe auch

-
-
    
- 
  • for...in
    • 
- 
  • for...of – ebenfalls keine Initialisierung erlaubt (im Strict und normalen Mode).
    • 
- 
  • for – Präferiert für das Iterieren über ein Array. Erlaubt das Initialisieren.
    • 
-

diff --git a/files/de/web/javascript/reference/fehler/invalid_for-of_initializer/index.html b/files/de/web/javascript/reference/fehler/invalid_for-of_initializer/index.html
deleted file mode 100644
index 3270387357..0000000000
--- a/files/de/web/javascript/reference/fehler/invalid_for-of_initializer/index.html
+++ /dev/null
@@ -1,63 +0,0 @@
----
-title: >-
-  SyntaxError: a declaration in the head of a for-of loop can't have an
-  initializer
-slug: Web/JavaScript/Reference/Fehler/Invalid_for-of_initializer
-tags:
-  - Error
-  - JavaScript
-  - SyntaxError
-translation_of: Web/JavaScript/Reference/Errors/Invalid_for-of_initializer
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
SyntaxError: a declaration in the head of a for-of loop can't have an initializer (Firefox)
-
-SyntaxError: for-of loop variable declaration may not have an initializer. (Chrome)
-

-
-
Fehlertyp

-
-
{{jsxref("SyntaxError")}}

-
-
Was falsch gelaufen ist?

-
-
Der Kopf einer for...of Schleife enthält einen Initialisierungsausdruck. Das ist eine Variable die deklariert und initialisiert wird |for (var i = 0 of iterable)|. Dieses ist nicht erlaubt in for...of Schleifen. Manchmal ist eine for Schleife gemeint, die eine Initialisierung erlaubt.

-
-
Beispiele

-
-
Nicht valide for...of Schleife

-
-
let iterable = [10, 20, 30];
-
-for (let value = 50 of iterable) {
-  console.log(value);
-}
-
-// SyntaxError: a declaration in the head of a for-of loop can't
-// have an initializer

-
-
Valide for...of Schleife

-
-
Man muss die Initialisierung (value = 50) im Kopf der for...of Schleife entfernen. Wenn 50 als Offset gedacht ist, kann man eine Addition in den Körper der Schleife verschieben, wie im folgenden Beispiel:

-
-
let iterable = [10, 20, 30];
-
-for (let value of iterable) {
-  value += 50;
-  console.log(value);
-}
-// 60
-// 70
-// 80
-

-
-
Siehe auch

-
-
diff --git a/files/de/web/javascript/reference/fehler/invalid_right_hand_side_instanceof_operand/index.html b/files/de/web/javascript/reference/fehler/invalid_right_hand_side_instanceof_operand/index.html
deleted file mode 100644
index 771838b428..0000000000
--- a/files/de/web/javascript/reference/fehler/invalid_right_hand_side_instanceof_operand/index.html
+++ /dev/null
@@ -1,62 +0,0 @@
----
-title: 'TypeError: invalid ''instanceof'' operand ''x'''
-slug: Web/JavaScript/Reference/Fehler/invalid_right_hand_side_instanceof_operand
-tags:
-  - Error
-  - Errors
-  - JavaScript
-  - Reference
-  - TypeError
-translation_of: Web/JavaScript/Reference/Errors/invalid_right_hand_side_instanceof_operand
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
TypeError: invalid 'instanceof' operand "x" (Firefox)
-TypeError: "x" is not a function (Firefox)
-TypeError: Right-hand side of 'instanceof' is not an object (Chrome)
-TypeError: Right-hand side of 'instanceof' is not callable (Chrome)

-
-
Fehlertyp

-
-
{{jsxref("TypeError")}}

-
-
Was ist falsch gelaufen?

-
-
Der instanceof Operator erwartet als rechten Operand einen Konstruktorobjekt, z. B. ein Objekt, welches eine prototype Eigenschaft hat und aufrufbar ist.

-
-
Beispiele

-
-
"test" instanceof ""; // TypeError: invalid 'instanceof' operand ""
-42 instanceof 0;      // TypeError: invalid 'instanceof' operand 0
-
-function Foo() {}
-var f = Foo();        // Foo() is called and returns undefined
-var x = new Foo();
-
-x instanceof f;       // TypeError: invalid 'instanceof' operand f
-x instanceof x;       // TypeError: x is not a function
-

-
-
Um diesen Fehler zu beheben, kann entweder der instanceof Operator durch einen typeof Operator ersetzt werden, oder man muss sicher stellen, dass ein Funktionsname statt einem Resultat seines Aufrufes benutzt werden.

-
-
typeof "test" == "string"; // true
-typeof 42 == "number"      // true
-
-function Foo() {}
-var f = Foo;               // Do not call Foo.
-var x = new Foo();
-
-x instanceof f;            // true
-x instanceof Foo;          // true
-

-
-
Siehe auch

-
-
-
-
 

diff --git a/files/de/web/javascript/reference/fehler/is_not_iterable/index.html b/files/de/web/javascript/reference/fehler/is_not_iterable/index.html
deleted file mode 100644
index 21460882c7..0000000000
--- a/files/de/web/javascript/reference/fehler/is_not_iterable/index.html
+++ /dev/null
@@ -1,103 +0,0 @@
----
-title: 'TypeError: ''x'' is not iterable'
-slug: Web/JavaScript/Reference/Fehler/is_not_iterable
-tags:
-  - Error
-  - JavaScript
-  - Reference
-  - TypeError
-translation_of: Web/JavaScript/Reference/Errors/is_not_iterable
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
TypeError: 'x' is not iterable (Firefox, Chrome)
-TypeError: 'x' is not a function or its return value is not iterable (Chrome)
-

-
-
Fehlertyp

-
-
{{jsxref("TypeError")}}

-
-
Was ist falsch gelaufen?

-
-
Der Wert, welcher auf der rechten Seite von for…of oder als Argument einer Funktion wie {{jsxref("Promise.all")}} oder {{jsxref("TypedArray.from")}} ist kein iterierbares Objekt. Ein iterierbares Objekt kann vom Standardtypen wie {{jsxref("Array")}}, {{jsxref("String")}} oder {{jsxref("Map")}} sein oder ein Objekt, welches das iterable Protokoll implementiert.

-
-
Beispiele

-
-
Über Objekteigenschaften iterieren

-
-
In JavaScript sind {{jsxref("Object", "Objekte")}} nicht iterierbar, außer sie implementieren das iterable Protokoll. Demnach kann man for…of nicht für das Iterieren von Objekteigenschaften benutzen.

-
-
var obj = { 'France': 'Paris', 'England': 'London' };
-for (let p of obj) { // TypeError: obj is not iterable
-    // …
-}
-

-
-
Stattdessen kann man {{jsxref("Object.keys")}} oder {{jsxref("Object.entries")}} benutzen, um über die Eigenschaften oder Einträge zu iterieren.

-
-
var obj = { 'France': 'Paris', 'England': 'London' };
-// Iterate over the property names:
-for (let country of obj.keys()) {
-    var capital = obj[country];
-    console.log(country, capital);
-}
-
-for (const [country, capital] of obj.entries())
-    console.log(country, capital);
-

-
-
Eine andere Option ist in diesem Fall der Einsatz einer {{jsxref("Map")}}:

-
-
var map = new Map;
-map.set('France', 'Paris');
-map.set('England', 'London');
-// Iterate over the property names:
-for (let country of map.keys()) {
-    let capital = map[country];
-    console.log(country, capital);
-}
-
-for (let capital of map.values())
-    console.log(capital);
-
-for (const [country, capital] of map.entries())
-    console.log(country, capital);
-

-
-
Über einen Generator iterieren

-
-
Generatoren sind Funktionen welche aufgerufen werden, um ein iterierbares Objekt zu produzieren.

-
-
function* generate(a, b) {
-  yield a;
-  yield b;
-}
-
-for (let x of generate) // TypeError: generate is not iterable
-    console.log(x);
-

-
-
Wenn dieser nicht aufgerufen wird, ist das korrespondierende {{jsxref("Function")}} Objekt des Generators aufrufbar, aber nicht iterierbar. Aufrufen des Generators Produziert ein iterierbares Objekt, welche über die Werte iteriert, die während der Ausführung des Generators zurückgegeben werden.

-
-
function* generate(a, b) {
-    yield a;
-    yield b;
-}
-
-for (let x of generate(1,2))
-    console.log(x);
-

-
-
Siehe auch

-
-
diff --git a/files/de/web/javascript/reference/fehler/json_bad_parse/index.html b/files/de/web/javascript/reference/fehler/json_bad_parse/index.html
deleted file mode 100644
index 0aa5e6bdae..0000000000
--- a/files/de/web/javascript/reference/fehler/json_bad_parse/index.html
+++ /dev/null
@@ -1,112 +0,0 @@
----
-title: 'SyntaxError: JSON.parse: bad parsing'
-slug: Web/JavaScript/Reference/Fehler/JSON_bad_parse
-tags:
-  - Errors
-  - JSON
-  - JavaScript
-  - Method
-  - Property
-  - SyntaxError
-translation_of: Web/JavaScript/Reference/Errors/JSON_bad_parse
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
SyntaxError: JSON.parse: unterminated string literal
-SyntaxError: JSON.parse: bad control character in string literal
-SyntaxError: JSON.parse: bad character in string literal
-SyntaxError: JSON.parse: bad Unicode escape
-SyntaxError: JSON.parse: bad escape character
-SyntaxError: JSON.parse: unterminated string
-SyntaxError: JSON.parse: no number after minus sign
-SyntaxError: JSON.parse: unexpected non-digit
-SyntaxError: JSON.parse: missing digits after decimal point
-SyntaxError: JSON.parse: unterminated fractional number
-SyntaxError: JSON.parse: missing digits after exponent indicator
-SyntaxError: JSON.parse: missing digits after exponent sign
-SyntaxError: JSON.parse: exponent part is missing a number
-SyntaxError: JSON.parse: unexpected end of data
-SyntaxError: JSON.parse: unexpected keyword
-SyntaxError: JSON.parse: unexpected character
-SyntaxError: JSON.parse: end of data while reading object contents
-SyntaxError: JSON.parse: expected property name or '}'
-SyntaxError: JSON.parse: end of data when ',' or ']' was expected
-SyntaxError: JSON.parse: expected ',' or ']' after array element
-SyntaxError: JSON.parse: end of data when property name was expected
-SyntaxError: JSON.parse: expected double-quoted property name
-SyntaxError: JSON.parse: end of data after property name when ':' was expected
-SyntaxError: JSON.parse: expected ':' after property name in object
-SyntaxError: JSON.parse: end of data after property value in object
-SyntaxError: JSON.parse: expected ',' or '}' after property value in object
-SyntaxError: JSON.parse: expected ',' or '}' after property-value pair in object literal
-SyntaxError: JSON.parse: property names must be double-quoted strings
-SyntaxError: JSON.parse: expected property name or '}'
-SyntaxError: JSON.parse: unexpected character
-SyntaxError: JSON.parse: unexpected non-whitespace character after JSON data
-

-
-
Fehlertyp

-
-
{{jsxref("SyntaxError")}}

-
-
Was ist falsch gelaufen?

-
-
{{jsxref("JSON.parse()")}} übersetzt einen String zu JSON. Dieser String muss eine gültiges JSON enthalten. Ist die Syntax fehlerhaft, wird dieser Error ausgegeben.

-
-
Beispiele

-
-
JSON.parse() erlaubt keine angehängten Kommata

-
-
Beide Zeilen werden einen SyntaxError erzeugen:

-
-
JSON.parse('[1, 2, 3, 4,]');
-JSON.parse('{"foo": 1,}');
-// SyntaxError JSON.parse: unexpected character
-// at line 1 column 14 of the JSON data
-

-
-
Das letzte trennende Komma muss in JSON vermieden werden:

-
-
JSON.parse('[1, 2, 3, 4]');
-JSON.parse('{"foo": 1}');

-
-
Eigenschaftsnamen müssen Strings mit doppelten Anführungszeichen sein

-
-
Man kann keine einfachen Anführungszeichen für Eigenschaften benutzen (wie 'foo').

-
-
JSON.parse("{'foo': 1}");
-// SyntaxError: JSON.parse: expected property name or '}'
-// at line 1 column 2 of the JSON data

-
-
Stattdessen muss "foo" benutzt werden:

-
-
JSON.parse('{"foo": 1}');

-
-
Führende Nullen und Dezimalpunkte

-
-
Man kann keine führenden Nullen (wie 01) benutzen. Nach Dezimalpunkten muss mindestens eine Stelle stehen.

-
-
JSON.parse('{"foo": 01}');
-// SyntaxError: JSON.parse: expected ',' or '}' after property value
-// in object at line 1 column 2 of the JSON data
-
-JSON.parse('{"foo": 1.}');
-// SyntaxError: JSON.parse: unterminated fractional number
-// at line 1 column 2 of the JSON data
-

-
-
Stattdessen schreibe man nur 1, ohne eine Null (also 1, statt 01) und nutze mindestens eine Ziffer nach dem Dezimalpunkt:

-
-
JSON.parse('{"foo": 1}');
-JSON.parse('{"foo": 1.0}');
-

-
-
Siehe auch

-
-
    
- 
  • {{jsxref("JSON")}}
    • 
- 
  • {{jsxref("JSON.parse()")}}
    • 
- 
  • {{jsxref("JSON.stringify()")}}
    • 
-

diff --git a/files/de/web/javascript/reference/fehler/malformed_formal_parameter/index.html b/files/de/web/javascript/reference/fehler/malformed_formal_parameter/index.html
deleted file mode 100644
index 65a89bb84a..0000000000
--- a/files/de/web/javascript/reference/fehler/malformed_formal_parameter/index.html
+++ /dev/null
@@ -1,61 +0,0 @@
----
-title: 'SyntaxError: Malformed formal parameter'
-slug: Web/JavaScript/Reference/Fehler/Malformed_formal_parameter
-tags:
-  - Error
-  - JavaScript
-  - SyntaxError
-translation_of: Web/JavaScript/Reference/Errors/Malformed_formal_parameter
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
SyntaxError: malformed formal parameter (Firefox)
-

-
-
Fehlertyp

-
-
{{jsxref("SyntaxError")}}

-
-
Was ist falsch gelaufen?

-
-
Es existiert ein Function() Konstruktor mit mindestend zwei übergebenen Parametern im Quelltext. Der letzte Parameter ist der Quelltext für die neu zu erstellende Funktion. Der ganze Rest bildet die liste der Parameter der neu zu erstellenden Funktion.

-
-
Die Liste der Parameter ist manchmal nicht valide. Das kann passieren, wenn versehendlich ein Schlüsselword, wie if oder var, für die namen der Parameter verwendet werden. Ein andere Grund kann eine falsche Interpunktion in der Argumentenliste verwendet wird. Auch ein falscher Wert wie eine Zahl oder ein Objekt kann die Ursache sein.

-
-
OK, das löst mein Problem. Aber warum hast du das nicht sofort gesagt?

-
-
Zugegeben, die Formulierung in der Fehlermeldung  ist etwas seltsam.   "formal parameter" ist eine andere Art "Funktionsargument"  oder "Funktionsparameter" zu sagen. Und wir verwenden das Wort "malformed", weil alle Firefox-Ingenieure sehr große Fans des Romans Gothic Horror sind.

-
-
Beispiele

-
-
Invalide Fälle

-
-
var f = Function('x y', 'return x + y;');
-// SyntaxError (missing a comma)
-
-var f = Function('x,', 'return x;');
-// SyntaxError (extraneous comma)
-
-var f = Function(37, "alert('OK')");
-// SyntaxError (numbers can't be argument names)
-

-
-
Valide Fälle

-
-
var f = Function('x, y', 'return x + y;');  // correctly punctuated
-
-var f = Function('x', "return x;');
-
-// if you can, avoid using Function - this is much faster
-var f = function(x) { return x; };
-

-
-
Siehe auch

-
-
diff --git a/files/de/web/javascript/reference/fehler/malformed_uri/index.html b/files/de/web/javascript/reference/fehler/malformed_uri/index.html
deleted file mode 100644
index cf831aa4a6..0000000000
--- a/files/de/web/javascript/reference/fehler/malformed_uri/index.html
+++ /dev/null
@@ -1,66 +0,0 @@
----
-title: 'URIError: malformed URI sequence'
-slug: Web/JavaScript/Reference/Fehler/Malformed_URI
-tags:
-  - Error
-  - Errors
-  - JavaScript
-  - URIError
-translation_of: Web/JavaScript/Reference/Errors/Malformed_URI
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
URIError: malformed URI sequence (Firefox)
-URIError: URI malformed (Chrome)
-

-
-
Fehlertyp

-
-
{{jsxref("URIError")}}

-
-
Was ist falsch gelaufen?

-
-
Das URI-Kodieren oder -Dekodieren war nicht erfolgreich. Ein gegebenenes Argument der {{jsxref("decodeURI")}}-, {{jsxref("encodeURI")}}-, {{jsxref("encodeURIComponent")}}-, oder {{jsxref("decodeURIComponent")}}-Funktion ist nicht valide, wodurch die Funktion nicht richtig Kodieren oder Dekodieren kann.

-
-
Beispiele

-
-
Kodieren

-
-
Kodieren ersetzt bestimmte Zeichen durch eine Sequenz von einem, zwei, drei oder vier maskierten Zeichen, welche der UTF-8 Kodierung des Zeichens entsprechen. Ein {{jsxref("URIError")}} wird erzeugt, wenn versucht wird ein Zeichen zu kodieren, welches kein Teil des high-low-Paares ist, zum Beispiel:

-
-
encodeURI('\uD800');
-// "URIError: malformed URI sequence"
-
-encodeURI('\uDFFF');
-// "URIError: malformed URI sequence"
-

-
-
Ein high-low Paar ist ok. Zum Beispiel:

-
-
encodeURI('\uD800\uDFFF');
-// "%F0%90%8F%BF"

-
-
Dekodieren

-
-
Dekodieren ersetzt eine Sequenz maskierter Zeichen in einer URI-Komponente mit einem Zeichen, welches dieses repräsentiert. Wenn es kein solches Zeichen gibt, wird ein Fehler erzeugt:

-
-
decodeURIComponent('%E0%A4%A');
-// "URIError: malformed URI sequence"
-

-
-
Mit richiger Eingabe sollte es wie folgendermaßen aussehen:

-
-
decodeURIComponent('JavaScript_%D1%88%D0%B5%D0%BB%D0%BB%D1%8B');
-// "JavaScript_шеллы"

-
-
Siehe auch

-
-
    
- 
  • {{jsxref("URIError")}}
    • 
- 
  • {{jsxref("decodeURI")}}
    • 
- 
  • {{jsxref("encodeURI")}}
    • 
- 
  • {{jsxref("encodeURIComponent")}}
    • 
- 
  • {{jsxref("decodeURIComponent")}}
    • 
-

diff --git a/files/de/web/javascript/reference/fehler/missing_bracket_after_list/index.html b/files/de/web/javascript/reference/fehler/missing_bracket_after_list/index.html
deleted file mode 100644
index b5fe14ae14..0000000000
--- a/files/de/web/javascript/reference/fehler/missing_bracket_after_list/index.html
+++ /dev/null
@@ -1,56 +0,0 @@
----
-title: 'SyntaxError: missing ] after element list'
-slug: Web/JavaScript/Reference/Fehler/Missing_bracket_after_list
-tags:
-  - Errors
-  - JavaScript
-  - SyntaxError
-translation_of: Web/JavaScript/Reference/Errors/Missing_bracket_after_list
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
SyntaxError: missing ] after element list
-

-
-
Fehlertyp

-
-
{{jsxref("SyntaxError")}}.

-
-
Was ist falsch gelaufen?

-
-
Der Syntax der Array-Initialisierung enthält einen Fehler. Wahrscheinlich fehlt eine schließende eckige Klammer ("]") oder ein Komma (",").

-
-
Beispiele

-
-
Unvollständige Arrayinitialisierung

-
-
var list = [1, 2,
-
-var instruments = [
-  'Ukulele',
-  'Guitar',
-  'Piano'
-};
-
-var data = [{foo: 'bar'} {bar: 'foo'}];
-

-
-
Richtig wäre:

-
-
var list = [1, 2];
-
-var instruments = [
- 'Ukulele',
- 'Guitar',
- 'Piano'
-];
-
-var data = [{foo: 'bar'}, {bar: 'foo'}];

-
-
Siehe auch

-
-
    
- 
  • {{jsxref("Array")}}
    • 
-

diff --git a/files/de/web/javascript/reference/fehler/missing_colon_after_property_id/index.html b/files/de/web/javascript/reference/fehler/missing_colon_after_property_id/index.html
deleted file mode 100644
index 26d515a018..0000000000
--- a/files/de/web/javascript/reference/fehler/missing_colon_after_property_id/index.html
+++ /dev/null
@@ -1,77 +0,0 @@
----
-title: 'SyntaxError: missing : after property id'
-slug: Web/JavaScript/Reference/Fehler/Missing_colon_after_property_id
-tags:
-  - Error
-  - Errors
-  - JavaScript
-  - SyntaxError
-translation_of: Web/JavaScript/Reference/Errors/Missing_colon_after_property_id
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
SyntaxError: missing : after property id
-

-
-
Fehlertyp

-
-
{{jsxref("SyntaxError")}}

-
-
Was ist falsch gelaufen?

-
-
Wenn Objekte mit der Objektinitialisierungs-Syntax erstellt werden, wird ein (:) eingesetzt, um bei Eiegenschaften Schlüssel und Werte zu trennen.

-
-
var obj = { propertyKey: 'value' };
-

-
-
Examples

-
-
Doppelpunkt vs. Gleichzeichen

-
-
Der Code funktioniert nicht, weil das Gleichzeichen nicht in dieser Form in der Objektinitialisierungs-Syntax genutzt werden kann.

-
-
var obj = { propertyKey = 'value' };
-// SyntaxError: missing : after property id
-

-
-
Richtig währe der Einsatz eines Doppelpunktes oder der Einsatz von eckigen Klammern, um eine Eigenschaft nach dem erstellen des Objektes zuzuweisen.

-
-
var obj = { propertyKey: 'value' };
-
-// or alternatively
-
-var obj = { };
-obj['propertyKey'] = 'value';
-

-
-
Leere Eigenschaften

-
-
Man kann nicht wie im Beispiel leere Eigenschaften erzeugen:

-
-
var obj = { propertyKey; };
-// SyntaxError: missing : after property id
-

-
-
Wenn eine Eigenschaft ohne Wert definiert werden soll, muss {{jsxref("null")}} als Wert genutzt werden.

-
-
var obj = { propertyKey: null };

-
-
Berechnete Eigenschaften

-
-
Wenn ein Eigenschaftsname aus einem Ausdruck berechnet wird, müssen eckige Klammern genutzt werden. Anderfalls kann der Eigenschaftname nicht errechnet werden:

-
-
var obj = { 'b'+'ar': 'foo' };
-// SyntaxError: missing : after property id
-

-
-
Man muss den Ausdruck in [] setzen:

-
-
var obj = { ['b'+'ar']: 'foo' };

-
-
Siehe auch

-
-
diff --git a/files/de/web/javascript/reference/fehler/missing_curly_after_function_body/index.html b/files/de/web/javascript/reference/fehler/missing_curly_after_function_body/index.html
deleted file mode 100644
index b5e0239a2f..0000000000
--- a/files/de/web/javascript/reference/fehler/missing_curly_after_function_body/index.html
+++ /dev/null
@@ -1,67 +0,0 @@
----
-title: 'SyntaxError: missing } after function body'
-slug: Web/JavaScript/Reference/Fehler/Missing_curly_after_function_body
-tags:
-  - Error
-  - Errors
-  - JavaScript
-  - SyntaxError
-translation_of: Web/JavaScript/Reference/Errors/Missing_curly_after_function_body
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
SyntaxError: missing } after function body
-

-
-
Fehlertyp

-
-
{{jsxref("SyntaxError")}}

-
-
Was ist falsch gelaufen?

-
-
Es gibt einen Syntaxfehler irgendwo beim erstellen von Funktionen. Man sollte prüfen, ob alle runden und geschweiften Klammern in der richtigen Reihenfolge sind. Einrückung und Formatierung des Codes hilft dabei den Fehler zu erkennen.

-
-
Beispiele

-
-
Schließende geschweifte Klammer vergessen

-
-
Oftmals fehlt eine geschweifte Klammer im Funktionsocde:

-
-
var charge = function() {
-  if (sunny) {
-    useSolarCells();
-  } else {
-    promptBikeRide();
-};
-

-
-
Richtig wäre:

-
-
var charge = function() {
-  if (sunny) {
-    useSolarCells();
-  } else {
-    promptBikeRide();
-  }
-};

-
-
Es kann deutlich verwirrender sein, wenn {{Glossary("IIFE")}}, Closures, oder andere Konstrukte, die viele verschiedene Klammern benutzt, eingesetzt werden, wie zum Beispiel:

-
-
(function() { if (true) { return false; } );
-

-
-
Oftmals hilft verschiedenes Einrücken oder doppeltes Prüfen der Einrückung, um den Fehler zu finden.

-
-
(function() {
-  if (true) {
-    return false;
-  }
-});

-
-
Siehe auch

-
-
diff --git a/files/de/web/javascript/reference/fehler/missing_curly_after_property_list/index.html b/files/de/web/javascript/reference/fehler/missing_curly_after_property_list/index.html
deleted file mode 100644
index 41a82a9158..0000000000
--- a/files/de/web/javascript/reference/fehler/missing_curly_after_property_list/index.html
+++ /dev/null
@@ -1,51 +0,0 @@
----
-title: 'SyntaxError: missing } after property list'
-slug: Web/JavaScript/Reference/Fehler/Missing_curly_after_property_list
-tags:
-  - Errors
-  - JavaScript
-  - SyntaxError
-translation_of: Web/JavaScript/Reference/Errors/Missing_curly_after_property_list
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
SyntaxError: missing } after property list
-

-
-
Fehlertyp

-
-
{{jsxref("SyntaxError")}}

-
-
Was ist falsch gelaufen?

-
-
Es gibt irgendwo in der Objektinitialisierungs-Syntax einen Fehler. Es könnte ein vergessenes Komma sein oder eine vergessene geschweifte Klammer. Es muss auch geprüft werden, die Reihenfolge der schließenden runden und geschweiften Klammern richtig ist. Den Code richtig einzurücken und zu formatieren hilft bei der Suche nach dem Fehler.

-
-
Beispiele

-
-
Vergessenes Komma

-
-
Häufig wird ein Komma bei der Objektinitialisierung vergessen:

-
-
var obj = {
-  a: 1,
-  b: { myProp: 2 }
-  c: 3
-};
-

-
-
Richtig wäre:

-
-
var obj = {
-  a: 1,
-  b: { myProp: 2 },
-  c: 3
-};
-

-
-
Siehe auch

-
-
diff --git a/files/de/web/javascript/reference/fehler/missing_formal_parameter/index.html b/files/de/web/javascript/reference/fehler/missing_formal_parameter/index.html
deleted file mode 100644
index 19813f9c47..0000000000
--- a/files/de/web/javascript/reference/fehler/missing_formal_parameter/index.html
+++ /dev/null
@@ -1,80 +0,0 @@
----
-title: 'SyntaxError: missing formal parameter'
-slug: Web/JavaScript/Reference/Fehler/Missing_formal_parameter
-tags:
-  - Error
-  - Errors
-  - JavaScript
-  - SyntaxError
-translation_of: Web/JavaScript/Reference/Errors/Missing_formal_parameter
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
SyntaxError: missing formal parameter (Firefox)
-

-
-
Fehlertyp

-
-
{{jsxref("SyntaxError")}}

-
-
Was ist falsch gelaufen?

-
-
"Formaler Parameter" ist eine andere Bezeichnung für Funktionsparameter. Einer Funktion fehlen valide Parameter. In der Deklaration einer Funktion müssen die Parameternamen {{Glossary("Identifier", "Bezeichner")}}, kein Wert einer Nummer, eines Strings oder eines Objektes. Deklarieren und Aufrufen von Funktionen sind zwei verschiedene Schritte. Deklarieren setzt Bezeichner als Parametername voraus und beim Ausführen (Aufrufen) der Funktion müssen Werte für die Funktion benutzt werden.

-
-
In {{glossary("JavaScript")}} können Bezeichner nur alphanumerische Zeichen (und "$" und "_") enthalten und können nicht mit einer Zahl beginnen. Ein Bezeichner unterscheidet sich von einem String, weil der String Daten sind und der Bezeichner teil des Codes.

-
-
Beispiele

-
-
Funktionsparameter müssen Bezeichner beim erstellen der Funktion sein. Alle diese Funktionsdeklarationen schlagen fehl, wenn ein Wert als Parameter benutzt wird:

-
-
function square(3) {
-  return number * number;
-};
-// SyntaxError: missing formal parameter
-
-function greet("Howdy") {
-  return greeting;
-};
-// SyntaxError: missing formal parameter
-
-function log({ obj: "value"}) {
-  console.log(arg)
-};
-// SyntaxError: missing formal parameter
-

-
-
Man muss einen Bezeichner für die Funktionsdeklarationen benutzen:

-
-
function square(number) {
-  return number * number;
-};
-
-function greet(greeting) {
-  return greeting;
-};
-
-function log(arg) {
-  console.log(arg)
-};

-
-
Danach kann man die Funktionen mit beliebigen Argumentwerten aufrufen:

-
-
square(2); // 4
-
-greet("Howdy"); // "Howdy"
-
-log({obj: "value"}); // Object { obj: "value" }
-

-
-
Siehe auch

-
-
diff --git a/files/de/web/javascript/reference/fehler/missing_initializer_in_const/index.html b/files/de/web/javascript/reference/fehler/missing_initializer_in_const/index.html
deleted file mode 100644
index 49db779546..0000000000
--- a/files/de/web/javascript/reference/fehler/missing_initializer_in_const/index.html
+++ /dev/null
@@ -1,58 +0,0 @@
----
-title: 'SyntaxError: missing = in const declaration'
-slug: Web/JavaScript/Reference/Fehler/Missing_initializer_in_const
-tags:
-  - Error
-  - JavaScript
-  - SyntaxError
-translation_of: Web/JavaScript/Reference/Errors/Missing_initializer_in_const
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
SyntaxError: missing = in const declaration (Firefox)
-SyntaxError: Missing initializer in const declaration (Chrome)
-

-
-
Fehlertyp

-
-
{{jsxref("SyntaxError")}}

-
-
Was ist falsch gelaufen?

-
-
Eine Konstante ist ein Wert, der während der normalen Ausführung des Programmes nicht geändert werden kann. Ihr kann kein neuer Wert zugewiesen werden und can nicht neu deklariert werden. In JavaScript werden Konstanten mit dem const Schlüsselwort deklariert. Ein Initialwert für eine Konstante wird benötigt, was bedeutet, dass der Wert im gleichen Statement wie bei der Deklaration zugewiesen werden muss (was Sinn ergibt, weil der Wert später nicht mehr geändert werden kann).

-
-
Beispiele

-
-
Fehlender Initialwert bei const

-
-
Anders wie bei var or let, muss man bei const Deklarationen einen Initialwert angeben. Folgendes erzeugt einen Fehler:

-
-
const COLUMNS;
-// SyntaxError: missing = in const declaration

-
-
Den Fehler beheben

-
-
Es gibt mehrere Möglichkeiten den Fehler zu beheben. Es muss geprüft werden, was mit der Konstanten erreicht werden soll.

-
-
Hinzufügen eines konstanten Wertes

-
-
Der Wert muss im gleichen Statement wie die Deklaration spezifiziert werden:

-
-
const COLUMNS = 80;

-
-
const, let oder var?

-
-
Es sollte kein const verwendet werden, wenn keine Konstante gemeint ist. Vielleicht ist eine Variable für den Block (let) oder eine global Variable (var) gemeint. Beide benötigen keinen Initialwert.

-
-
let columns;
-

-
-
Siehe auch

-
-
diff --git a/files/de/web/javascript/reference/fehler/missing_name_after_dot_operator/index.html b/files/de/web/javascript/reference/fehler/missing_name_after_dot_operator/index.html
deleted file mode 100644
index cb79bdcc03..0000000000
--- a/files/de/web/javascript/reference/fehler/missing_name_after_dot_operator/index.html
+++ /dev/null
@@ -1,68 +0,0 @@
----
-title: 'SyntaxError: missing name after . operator'
-slug: Web/JavaScript/Reference/Fehler/Missing_name_after_dot_operator
-tags:
-  - Error
-  - Errors
-  - JavaScript
-  - SyntaxError
-translation_of: Web/JavaScript/Reference/Errors/Missing_name_after_dot_operator
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
SyntaxError: missing name after . operator
-

-
-
Fehlertyp

-
-
{{jsxref("SyntaxError")}}

-
-
Was ist falsch gelaufen?

-
-
Der Punktoperator (.) wird für den Zugriff auf Eigenschaften genutzt. Man muss den Namen der Eigenschaft spezifizieren, auf den man zugreifen möchte. Um berechnete Eigenschaftsnamen zu benutzen muss statt dem Punkt eckige Klammern genutzt werden. Das erlaubt es einen Ausdruck zu berechnen. Manchmal möchte man Konkatenation stattdessen erreichen. Dafür wird ein Plusoperator (+) genutzt werden.

-
-
Beispiele

-
-
Zugriff auf Eigenschaften

-
-
Zugriff auf Eigenschaften wird in JavaScript entweder mit einem Punkt oder eckigen Klammern erreicht, aber nicht beides. Eckige Klammern erlauben es auch Eigenschaftsnamen zu berechnen.

-
-
var obj = { foo: { bar: "baz", bar2: "baz2" } };
-var i = 2;
-
-obj.[foo].[bar]
-// SyntaxError: missing name after . operator
-
-obj.foo."bar"+i;
-// SyntaxError: missing name after . operator
-

-
-
Um das Problem zu lösen, muss auf das Objekt wie folgt zugegriffen werden:

-
-
obj.foo.bar; // "baz"
-// or alternatively
-obj["foo"]["bar"]; // "baz"
-
-// computed properties require square brackets
-obj.foo["bar" + i]; // "baz2"
-

-
-
Zugriff auf Eigenschaften vs. Konkatenation

-
-
Wenn man aus einer anderen Programmiersprache kommt (z. B. {{Glossary("PHP")}}), ist es einfach den Punktoperator (.) und den Konkatenationsoperator (+) zu vermischen.

-
-
console.log("Hello" . "world");
-
-// SyntaxError: missing name after . operator

-
-
Stattdessen muss man das Pluszeichen für Konkatenation benutzen:

-
-
console.log("Hello" + "World");

-
-
Siehe auch

-
-
diff --git a/files/de/web/javascript/reference/fehler/missing_parenthesis_after_argument_list/index.html b/files/de/web/javascript/reference/fehler/missing_parenthesis_after_argument_list/index.html
deleted file mode 100644
index a3da4b9edf..0000000000
--- a/files/de/web/javascript/reference/fehler/missing_parenthesis_after_argument_list/index.html
+++ /dev/null
@@ -1,42 +0,0 @@
----
-title: 'SyntaxError: missing ) after argument list'
-slug: Web/JavaScript/Reference/Fehler/Missing_parenthesis_after_argument_list
-tags:
-  - Errors
-  - JavaScript
-  - SyntaxError
-translation_of: Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
SyntaxError: missing ) after argument list
-

-
-
Fehlertyp

-
-
{{jsxref("SyntaxError")}}.

-
-
Was ist falsch gelaufen?

-
-
Es gibt einen Fehler mit der Art wie die Funktion aufgerufen wird. Es kann sich hier zum Beispiel um einen Tippfehler, einem fehlenden Operator oder einen nicht richtig abgeschlossenen String handeln. 

-
-
Beispiele

-
-
Bei einem fehlenden "+" Operator,  um zwei Strings zu konkatinieren,erwartet JavaScript , dass nur "PI: " der Parameter für die "log" Funktion ist. Darum sollte danach die Funktion mit einer abschliessenden Klammer abgeschlossen werden. 

-
-
console.log("PI: " Math.PI);
-// SyntaxError: missing ) after argument list
-

-
-
Man kann den Fehler korrigieren, indem man den "+" Operator hinzufügt:

-
-
console.log("PI: " + Math.PI);
-// "PI: 3.141592653589793"

-
-
Siehe auch

-
-
diff --git a/files/de/web/javascript/reference/fehler/missing_parenthesis_after_condition/index.html b/files/de/web/javascript/reference/fehler/missing_parenthesis_after_condition/index.html
deleted file mode 100644
index 295428a5b9..0000000000
--- a/files/de/web/javascript/reference/fehler/missing_parenthesis_after_condition/index.html
+++ /dev/null
@@ -1,70 +0,0 @@
----
-title: 'SyntaxError: missing ) after condition'
-slug: Web/JavaScript/Reference/Fehler/Missing_parenthesis_after_condition
-tags:
-  - Error
-  - Errors
-  - JavaScript
-  - SyntaxError
-translation_of: Web/JavaScript/Reference/Errors/Missing_parenthesis_after_condition
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
SyntaxError: missing ) after condition
-

-
-
Fehlertyp

-
-
{{jsxref("SyntaxError")}}

-
-
Was ist falsch gelaufen?

-
-
Es gibt einen Fehler beim schreiben einer if Bedingung. In jeder Programmiersprache benötigt man Fallunterscheidungen abhängig von Eingaben. Das if Statement führt ein Statement auf, wenn eine Bedingung true wird. In JavaScript muss diese Bedingung in runden Klammern nach dem if Schlüsselwort geschrieben werden, wie dieses:

-
-
if (condition) {
-  // do something if the condition is true
-}

-
-
Beispiele

-
-
Es könnte nur ein Versehen sein, weshalb man alle runden Klammern im Code gründlich überprüfen sollte.

-
-
if (3 > Math.PI {
-  console.log("wait what?");
-}
-
-// SyntaxError: missing ) after condition
-

-
-
Um das Problem zu beheben, muss eine schließende runde Klammer nach der Bedingung geschrieben werden.

-
-
if (3 > Math.PI) {
-  console.log("wait what?");
-}

-
-
Wenn man aus einer anderen Programmiersprache kommt, passiert es schnell, dass Schlüsselwörter benutzt werden, die in JavaScript eine andere oder garkeine Bedeutung haben.

-
-
if (done is true) {
- console.log("we are done!");
-}
-
-// SyntaxError: missing ) after condition
-

-
-
Stattdessen muss die richtige Vergleichsoperation benutzt werden. Zum Beispiel:

-
-
if (done === true) {
- console.log("we are done!");
-}

-
-
Siehe auch

-
-
diff --git a/files/de/web/javascript/reference/fehler/missing_semicolon_before_statement/index.html b/files/de/web/javascript/reference/fehler/missing_semicolon_before_statement/index.html
deleted file mode 100644
index dcdf35ed94..0000000000
--- a/files/de/web/javascript/reference/fehler/missing_semicolon_before_statement/index.html
+++ /dev/null
@@ -1,67 +0,0 @@
----
-title: 'SyntaxError: missing ; before statement'
-slug: Web/JavaScript/Reference/Fehler/Missing_semicolon_before_statement
-tags:
-  - Errors
-  - JavaScript
-  - SyntaxError
-translation_of: Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
SyntaxError: missing ; before statement
-

-
-
Fehlertyp

-
-
{{jsxref("SyntaxError")}}.

-
-
Was ist falsch gelaufen?

-
-
Es fehlt irgendwo ein Semikolon (;). JavaScript Statements müssen durch ein Semikolon beendet werden. Einige Statements sind von der automatischen Semikolon Einfügung (ASI) betroffen, aber in diesem Fall muss man ein Semikolon geliefert werden, damit JavaScript den Quelltext korrekt lesen kann.

-
-
Meistens ist dieser Fehler eine Folge aus einem anderen Fehler, wie ein nicht escaptes Zeichen in einem String oder der falsche Einsatz von var.  Es kann auch sein, dass man zu viele runde Klammern benutzt. Wenn dieser Fehler auftritt, sollte die Syntax gründlich geprüft werden.

-
-
Beispiele

-
-
Nicht escapte Strings

-
-
Dieser Fehler kann leicht auftreten, wenn ein String nicht richtig escapt wird und die JavaScript-Umgebung schon das Ende eines Strings erwartet. Zum Beispiel:

-
-
var foo = 'Tom's bar';
-// SyntaxError: missing ; before statement

-
-
Man kann doppelte Anführungszeichen benutzen oder das Apostroph escapen:

-
-
var foo = "Tom's bar";
-var foo = 'Tom\'s bar';
-

-
-
Eigenschaften mit var deklarieren

-
-
Man kann Eigenschaften eines Objektes oder Arrays nicht mit einem var deklarieren.

-
-
var obj = {};
-var obj.foo = 'hi'; // SyntaxError missing ; before statement
-
-var array = [];
-var array[0] = 'there'; // SyntaxError missing ; before statement
-

-
-
Stattdessen muss das var Schlüsselwort vermieden werden:

-
-
var obj = {};
-obj.foo = 'hi';
-
-var array = [];
-array[0] = 'there';
-

-
-
Siehe auch

-
-
diff --git a/files/de/web/javascript/reference/fehler/more_arguments_needed/index.html b/files/de/web/javascript/reference/fehler/more_arguments_needed/index.html
deleted file mode 100644
index 3707c5446f..0000000000
--- a/files/de/web/javascript/reference/fehler/more_arguments_needed/index.html
+++ /dev/null
@@ -1,48 +0,0 @@
----
-title: 'TypeError: More arguments needed'
-slug: Web/JavaScript/Reference/Fehler/More_arguments_needed
-tags:
-  - Errors
-  - JavaScript
-  - TypeError
-translation_of: Web/JavaScript/Reference/Errors/More_arguments_needed
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
TypeError: Object.create requires more than 0 arguments
-TypeError: Object.setPrototypeOf requires more than 1 argument
-TypeError: Object.defineProperties requires more than 0 arguments
-

-
-
Fehlertyp

-
-
{{jsxref("TypeError")}}.

-
-
Was ist falsch gelaufen?

-
-
Es ist ein Fehler beim Aufrufen einer Funktion aufgetaucht. Es müssen mehr Argumente übergeben werden.

-
-
Beispiele

-
-
Die {{jsxref("Object.create()")}} Methode benötigt mindestens ein Argument und die {{jsxref("Object.setPrototypeOf()")}} Methode benötigt mindestens zwei Argumente:

-
-
var obj = Object.create();
-// TypeError: Object.create requires more than 0 arguments
-
-var obj = Object.setPrototypeOf({});
-// TypeError: Object.setPrototypeOf requires more than 1 argument
-

-
-
Dieser Fehler kann behoben werden, indem {{jsxref("null")}} als Eigenschaft gesetzt wird:

-
-
var obj = Object.create(null);
-
-var obj = Object.setPrototypeOf({}, null);

-
-
Siehe auch

-
-
diff --git a/files/de/web/javascript/reference/fehler/negative_repetition_count/index.html b/files/de/web/javascript/reference/fehler/negative_repetition_count/index.html
deleted file mode 100644
index 53c153453f..0000000000
--- a/files/de/web/javascript/reference/fehler/negative_repetition_count/index.html
+++ /dev/null
@@ -1,44 +0,0 @@
----
-title: 'RangeError: repeat count must be non-negative'
-slug: Web/JavaScript/Reference/Fehler/Negative_repetition_count
-tags:
-  - Errors
-  - JavaScript
-  - RangeError
-translation_of: Web/JavaScript/Reference/Errors/Negative_repetition_count
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
RangeError: repeat count must be non-negative (Firefox)
-RangeError: Invalid count value (Chrome)
-

-
-
Fehlertyp

-
-
{{jsxref("RangeError")}}

-
-
Was ist falsch gelaufen?

-
-
Die {{jsxref("String.prototype.repeat()")}} Methode wurde benutzt. Sie hat einen count Parameter welche die Anzahl der Wiederholungen des Strings angibt. Dieser muss zwischen 0 und kleiner positiv {{jsxref("Infinity")}} sein und kann nicht negativ sein. Das erlaubte Intervall kann wie folgt beschrieben werden: [0, +∞).

-
-
Beispiele

-
-
Falsche Fälle

-
-
'abc'.repeat(-1); // RangeError 

-
-
Richtige Fälle

-
-
'abc'.repeat(0);    // ''
-'abc'.repeat(1);    // 'abc'
-'abc'.repeat(2);    // 'abcabc'
-'abc'.repeat(3.5);  // 'abcabcabc' (count will be converted to integer)
-

-
-
Siehe auch

-
-
    
- 
  • {{jsxref("String.prototype.repeat()")}}
    • 
-

diff --git a/files/de/web/javascript/reference/fehler/no_non-null_object/index.html b/files/de/web/javascript/reference/fehler/no_non-null_object/index.html
deleted file mode 100644
index a2c897c5cd..0000000000
--- a/files/de/web/javascript/reference/fehler/no_non-null_object/index.html
+++ /dev/null
@@ -1,66 +0,0 @@
----
-title: 'TypeError: "x" is not a non-null object'
-slug: Web/JavaScript/Reference/Fehler/No_non-null_object
-tags:
-  - Error
-  - Errors
-  - JavaScript
-  - TypeError
-translation_of: Web/JavaScript/Reference/Errors/No_non-null_object
----
-
{{JSSidebar("Errors")}}

-
-
Fehlermeldung

-
-
TypeError: "x" is not a non-null object (Firefox)
-TypeError: Property description must be an object: "x" (Chrome)
-TypeError: Invalid value used in weak set (Chrome)
-

-
-
Fehlertyp

-
-
{{jsxref("TypeError")}}

-
-
Was ist falsch gelaufen?

-
-
Ein Objekt wird erwartete aber nicht übergeben. {{jsxref("null")}} ist kein Objekt und funktioniert nicht. In dieser Situation wird ein normales Objekt erwartet.

-
-
Beispiele

-
-
Eigehscgaftsbeschreibung erwartet

-
-
Wenn Methoden wie {{jsxref("Object.create()")}} oder {{jsxref("Object.defineProperty()")}} und {{jsxref("Object.defineProperties()")}} eingesetzt werden, wird als optionale Beschreibung ein Beschreibungsobjekt erwartet. Wenn kein Objekt übergeben wird (z. B. eine Zahl), wird ein Fehler erzeugt:

-
-
Object.defineProperty({}, 'key', 1);
-// TypeError: 1 is not a non-null object
-
-Object.defineProperty({}, 'key', null);
-// TypeError: null is not a non-null object
-

-
-
Ein valides Beschreibungsobjekt kann wie folgendes aussehen:

-
-
Object.defineProperty({}, 'key', { value: 'foo', writable: false });
-

-
-
WeakMap und WeakSet Objekte benötigen Objektschlüssel

-
-
{{jsxref("WeakMap")}} und {{jsxref("WeakSet")}} Objekte speichern Objektschlüssel. Man kann keine anderen Schlüssel verwenden.

-
-
var ws = new WeakSet();
-ws.add('foo');
-// TypeError: "foo" is not a non-null object

-
-
Stattdessen sollte folgendes verwendet werden:

-
-
ws.add({foo: 'bar'});
-ws.add(window);
-

-
-
Siehe auch

-
-
    
- 
  • {{jsxref("Object.create()")}}
    • 
- 
  • {{jsxref("Object.defineProperty()")}}, {{jsxref("Object.defineProperties()")}}
    • 
- 
  • {{jsxref("WeakMap")}}, {{jsxref("WeakSet")}}
    • 
-

diff --git a/files/de/web/javascript/reference/fehler/no_properties/index.html b/files/de/web/javascript/reference/fehler/no_properties/index.html
deleted file mode 100644
index d5dc0328b6..0000000000
--- a/files/de/web/javascript/reference/fehler/no_properties/index.html
+++ /dev/null
@@ -1,40 +0,0 @@
----
-title: 'TypeError: "x" has no properties'
-slug: Web/JavaScript/Reference/Fehler/No_properties
-tags:
-  - Errors
-  - JavaScript
-  - TypeError
-translation_of: Web/JavaScript/Reference/Errors/No_properties
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
TypeError: null has no properties
-TypeError: undefined has no properties
-

-
-
Fehlertyp

-
-
{{jsxref("TypeError")}}.

-
-
Was ist falsch gelaufen?

-
-
Weder {{jsxref("null")}} noch {{jsxref("undefined")}} besitzen Eigenschaften auf die man zugreifen könnte.

-
-
Beispiele

-
-
null.foo;
-// TypeError: null has no properties
-
-undefined.bar;
-// TypeError: undefined has no properties
-

-
-
Siehe auch

-
-
    
- 
  • {{jsxref("null")}}
    • 
- 
  • {{jsxref("undefined")}}
    • 
-

diff --git a/files/de/web/javascript/reference/fehler/no_variable_name/index.html b/files/de/web/javascript/reference/fehler/no_variable_name/index.html
deleted file mode 100644
index a3b63df55d..0000000000
--- a/files/de/web/javascript/reference/fehler/no_variable_name/index.html
+++ /dev/null
@@ -1,84 +0,0 @@
----
-title: 'SyntaxError: missing variable name'
-slug: Web/JavaScript/Reference/Fehler/No_variable_name
-tags:
-  - Error
-  - Errors
-  - JavaScript
-  - SyntaxError
-translation_of: Web/JavaScript/Reference/Errors/No_variable_name
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
SyntaxError: missing variable name (Firefox)
-SyntaxError: Unexpected token = (Chrome)

-
-
Fehlertyp

-
-
{{jsxref("SyntaxError")}}

-
-
Was ist falsch gelaufen?

-
-
Einer Variablen fehlt ein Name. Das wird zu einem {{jsxref("SyntaxError")}} im Code führen. Vermutlich ist ein Komma irgendwo falsch oder man kämpft mit einem Namen. Völlig verständlich! Dinge zu benennen ist so schwer.

-
-
Beispiele

-
-
Ein Variablenname fehlt

-
-
var = "foo";
-

-
-
Es ist schwer gute Variablennamen zu vergeben. Das geht allen so.

-
-
var ohGodWhy = "foo";

-
-
Reservierte Schlüsselwörter können kein Variablenname sein

-
-
Es gibt ein paar Namen, die reservierte Schlüsselwörter sind. Diese kann man nicht benutzen.

-
-
var debugger = "whoop";
-// SyntaxError: missing variable name
-

-
-
Deklarieren von mehreren Variablen

-
-
Man muss beim Deklarieren von mehreren Variablen besonders auf Kommas aufpassen. Gibt es ein überflüssiges Komma? Wurde aus Versehen ein Komma statt eines Semikolons verwendet?

-
-
var x, y = "foo",
-var x, = "foo"
-
-var first = document.getElementById('one'),
-var second = document.getElementById('two'),
-
-// SyntaxError: missing variable name
-

-
-
Die korrigierte Version:

-
-
var x, y = "foo";
-var x = "foo";
-
-var first = document.getElementById('one');
-var second = document.getElementById('two');

-
-
Arrays

-
-
{{jsxref("Array")}}-Literale in JavaScript benötigen eckige Klammern um die Werte. Folgendes funktioniert nicht:

-
-
var arr = 1,2,3,4,5;
-// SyntaxError: missing variable name
-

-
-
Richtig ist:

-
-
var arr = [1,2,3,4,5];

-
-
Siehe auch

-
-
diff --git a/files/de/web/javascript/reference/fehler/non_configurable_array_element/index.html b/files/de/web/javascript/reference/fehler/non_configurable_array_element/index.html
deleted file mode 100644
index 771f480dda..0000000000
--- a/files/de/web/javascript/reference/fehler/non_configurable_array_element/index.html
+++ /dev/null
@@ -1,83 +0,0 @@
----
-title: 'TypeError: can''t delete non-configurable array element'
-slug: Web/JavaScript/Reference/Fehler/Non_configurable_array_element
-tags:
-  - Error
-  - Errors
-  - JavaScript
-  - TypeError
-translation_of: Web/JavaScript/Reference/Errors/Non_configurable_array_element
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
TypeError: can't delete non-configurable array element (Firefox)
-TypeError: Cannot delete property '2' of [object Array] (Chrome)
-

-
-
Fehlertyp

-
-
{{jsxref("TypeError")}}

-
-
Was ist falsch gelaufen?

-
-
Es wurde versucht die Länge eines Arrays zu kürzen obwohl eines der Arrayelemente nicht Konfigurierbar(non-configurable) ist. Beim Kürzen eines Arrays werden die Elemente hinter der neuen Länge gelöscht, was in dieser Situation nicht funktioniert.

-
-
Das configurable Attribut kontrolliert, ob eine Eigenschaft von einem Objekt gelöscht werden kann und seine Attribute (anders als writable) geändert werden können.

-
-
Eigenschaften von einem Objekt, dass von einem Array-Initialisierer erstellt wurden, sind konfigurierbar. Immer, wenn zum Beispiel {{jsxref("Object.defineProperty()")}} eingesetzt wird, ist die Eigenschaft nicht ohne weiteres konfigurierbar.

-
-
Beispiele

-
-
Nicht konfigurierbare Eigenschaften mit Object.defineProperty erstellen

-
-
Die {{jsxref("Object.defineProperty()")}} Funktion erstellt nicht konfiguriertbare Eigenschaften wenn sie nicht extra als konfigurierbar spezifiziert sind.

-
-
var arr = [];
-Object.defineProperty(arr, 0, {value: 0});
-Object.defineProperty(arr, 1, {value: "1"});
-
-arr.length = 1;
-// TypeError: can't delete non-configurable array element
-

-
-
Die Elemente müssen als Konfigurierbar eingestellt werden, wenn das Array später im Quelltext gekürzt werden soll.

-
-
var arr = [];
-Object.defineProperty(arr, 0, {value: 0, configurable: true});
-Object.defineProperty(arr, 1, {value: "1", configurable: true});
-
-arr.length = 1;
-

-
-
Ein Array versiegeln (seal)

-
-
Die {{jsxref("Object.seal()")}} Funktion markiert alle existirenden Elements als nicht Konfugurierbar.

-
-
var arr = [1,2,3];
-Object.seal(arr);
-
-arr.length = 1;
-// TypeError: can't delete non-configurable array element
-

-
-
Man muss den Aufruf von {{jsxref("Object.seal()")}} entfernen oder ein Kopie des Arrays machen. Im fall einer Kopie führt das Kürzen des kopierten Arrays zu keiner Änderung des Original Arrays.

-
-
var arr = [1,2,3];
-Object.seal(arr);
-
-// Copy the initial array to shorten the copy
-var copy = Array.from(arr);
-copy.length = 1;
-// arr.length == 3
-

-
-
Siehe auch

-
-
    
- 
  • [[Configurable]]
    • 
- 
  • {{jsxref("Array.length")}}
    • 
- 
  • {{jsxref("Object.defineProperty()")}}
    • 
- 
  • {{jsxref("Object.seal()")}}
    • 
-

diff --git a/files/de/web/javascript/reference/fehler/not_a_codepoint/index.html b/files/de/web/javascript/reference/fehler/not_a_codepoint/index.html
deleted file mode 100644
index 8d72c3be4b..0000000000
--- a/files/de/web/javascript/reference/fehler/not_a_codepoint/index.html
+++ /dev/null
@@ -1,55 +0,0 @@
----
-title: 'RangeError: argument is not a valid code point'
-slug: Web/JavaScript/Reference/Fehler/Not_a_codepoint
-tags:
-  - Errors
-  - JavaScript
-  - RangeError
-translation_of: Web/JavaScript/Reference/Errors/Not_a_codepoint
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
RangeError: {0} is not a valid code point (Firefox)
-RangeError: Invalid code point {0} (Chrome)
-

-
-
Fehlertyp

-
-
{{jsxref("RangeError")}}

-
-
Was ist falsch gelaufen?

-
-
Die {{jsxref("String.fromCodePoint()")}} Methode erwartet gültige Codepoint.

-
-
Ein Codepoint  ist ein Wert im Unicode Coderaum, der als Integer im Wertebereich zwischen 0 und 0x10FFFF liegt.

-
-
Die Verwendung von {{jsxref("NaN")}} , negativen Integern (-1), nicht Integern (3.14) und Werten die größer als 0x10FFFF (1114111) sind, werden einen Fehler bei dieser Methode produzieren.

-
-
Beispiele

-
-
Ungültige Fälle

-
-
String.fromCodePoint('_');      // RangeError
-String.fromCodePoint(Infinity); // RangeError
-String.fromCodePoint(-1);       // RangeError
-String.fromCodePoint(3.14);     // RangeError
-String.fromCodePoint(3e-2);     // RangeError
-String.fromCodePoint(NaN);      // RangeError

-
-
Gültige Fälle

-
-
String.fromCodePoint(42);       // "*"
-String.fromCodePoint(65, 90);   // "AZ"
-String.fromCodePoint(0x404);    // "\u0404"
-String.fromCodePoint(0x2F804);  // "\uD87E\uDC04"
-String.fromCodePoint(194564);   // "\uD87E\uDC04"
-String.fromCodePoint(0x1D306, 0x61, 0x1D307) // "\uD834\uDF06a\uD834\uDF07"
-

-
-
Siehe auch

-
-
    
- 
  • {{jsxref("String.fromCodePoint()")}}
    • 
-

diff --git a/files/de/web/javascript/reference/fehler/not_a_constructor/index.html b/files/de/web/javascript/reference/fehler/not_a_constructor/index.html
deleted file mode 100644
index 42858cf706..0000000000
--- a/files/de/web/javascript/reference/fehler/not_a_constructor/index.html
+++ /dev/null
@@ -1,97 +0,0 @@
----
-title: 'TypeError: "x" is not a constructor'
-slug: Web/JavaScript/Reference/Fehler/Not_a_constructor
-tags:
-  - Fehler
-  - JavaScript
-  - TypeError
-translation_of: Web/JavaScript/Reference/Errors/Not_a_constructor
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
TypeError: "x" is not a constructor
-
-TypeError: Math is not a constructor
-TypeError: JSON is not a constructor
-TypeError: Symbol is not a constructor
-TypeError: Reflect is not a constructor
-TypeError: Intl is not a constructor
-TypeError: SIMD is not a constructor
-TypeError: Atomics is not a constructor
-

-
-
Fehlertyp

-
-
{{jsxref("TypeError")}}

-
-
Was ist falsch gelaufen?

-
-
Es wurde versucht auf ein Objekt oder eine Variable zuzugreifen welche kein Konstruktor ist. Mehr darüber, was ein Konstruktur ist, finden Sie unter {{Glossary("constructor")}} oder in der Beschreibung des new Operators.

-
-
Es gibt viele globale Objekte, wie {{jsxref("String")}} oder {{jsxref("Array")}}, welche mittels new erstellt werden können. Jedoch funktioniert das bei einigen Objekten nicht und deren Eigenschaften und Methoden sind statisch.

-
-
Die folgenden Standard build-in Objekte sind keine Konstruktoren: {{jsxref("Math")}}, {{jsxref("JSON")}}, {{jsxref("Symbol")}}, {{jsxref("Reflect")}}, {{jsxref("Intl")}}, {{jsxref("SIMD")}}, {{jsxref("Atomics")}}.

-
-
Generelle Funktionen können ebenso nicht als Konstruktor verwendet werden.

-
-
Beispiele

-
-
Ungültige Fälle

-
-
var Car = 1;
-new Car();
-// TypeError: Car is not a constructor
-
-new Math();
-// TypeError: Math is not a constructor
-
-new Symbol();
-// TypeError: Symbol is not a constructor
-
-function* f() {};
-var obj = new f;
-// TypeError: f is not a constructor
-

-
-
Ein car Konstruktor

-
-
Stellen Sie sich vor, Sie erstellen ein Objekt vom Typ vars. Sie wollen dieses Objekt als Car bezeichen und es soll Eigenschaften für make, model und year besitzt. Um dies zu erreichen, schreiben Sie die folgende Funktion:

-
-
function Car(make, model, year) {
-  this.make = make;
-  this.model = model;
-  this.year = year;
-}
-

-
-
Jetzt können Sie wie folgt ein Objekt mit dem Namen mycar erstellen:

-
-
var mycar = new Car('Eagle', 'Talon TSi', 1993);

-
-
Promises

-
-
Bei Rückgabe eines Promises, welches sofort im Status resolved oder rejected ist, brauchen Sie kein neues Promise mit new Promise(...) erstellen und damit zu arbeiten. 

-
-
Folgendes ist nicht erlaubt (der Promise Konstruktor wird nicht korrekt aufgerufen) und wirft eine TypeError: this is not a constructor Exception.

-
-
return new Promise.resolve(true);
-

-
-
Verwenden Sie stattdessen Promise.resolve() oder die statische Methode Promise.reject():

-
-
// Das ist erlaubt, aber unnötig lang:
-return new Promise((resolve, reject) => { resolve(true); })
-
-// Alternative Verwendung der statische Methoden:
-return Promise.resolve(true);
-return Promise.reject(false);
-

-
-
Siehe auch

-
-
diff --git a/files/de/web/javascript/reference/fehler/not_a_function/index.html b/files/de/web/javascript/reference/fehler/not_a_function/index.html
deleted file mode 100644
index a8b66dff17..0000000000
--- a/files/de/web/javascript/reference/fehler/not_a_function/index.html
+++ /dev/null
@@ -1,124 +0,0 @@
----
-title: 'TypeError: "x" is not a function'
-slug: Web/JavaScript/Reference/Fehler/Not_a_function
-tags:
-  - Errors
-  - JavaScript
-  - TypeError
-translation_of: Web/JavaScript/Reference/Errors/Not_a_function
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
TypeError: "x" is not a function
-

-
-
Fehlertyp

-
-
{{jsxref("TypeError")}}.

-
-
Was ist falsch gelaufen?

-
-
Es wird versucht, ein Wert wie eine Funktion aufzurufen, da aber der Wert eigentlich keine Funktion ist, kommt es zu diesem Fehler. Manchmal erwartet das Programm, dass eine Funktion erstellt wird, was aber nicht der Fall ist.

-
-
Vielleicht ist ein Tippfehler im Funktionsnamen. Manchmal besitzt das aufgerufene Objekt eine Funktion aber auch nicht. Zum Beispiel besitzen JavaScript Objekte keine map Funktion, aber JavaScript Arrays haben diese Funktion.

-
-
Es gibt viele eingebaute Funktionen, die eine (Callback-) Funktion benötigen. Es muss eine Funktion bereitgestellt werden, damit diese Methoden normal funktionieren:

-
-
    
- 
  • Wenn mit {{jsxref("Array")}} oder {{jsxref("TypedArray")}} Objekten gearbeitet wird:
-  
      
-   
    • {{jsxref("Array.prototype.every()")}}, {{jsxref("Array.prototype.some()")}}, {{jsxref("Array.prototype.forEach()")}}, {{jsxref("Array.prototype.map()")}}, {{jsxref("Array.prototype.filter()")}}, {{jsxref("Array.prototype.reduce()")}}, {{jsxref("Array.prototype.reduceRight()")}}, {{jsxref("Array.prototype.find()")}}
      • 
-  
    
- 
    • 
- 
  • Wenn mit {{jsxref("Map")}} und {{jsxref("Set")}} Objekten gearbeitet wird:
-  
      
-   
    • {{jsxref("Map.prototype.forEach()")}} und {{jsxref("Set.prototype.forEach()")}}
      • 
-  
    
- 
    • 
-

-
-
Beispiele

-
-
Ein Schreibfehler im Funktionsnamen

-
-
In diesem Fall passiert es viel zu oft, dass im Name ein Schreibfehler enthält:

-
-
var x = document.getElementByID('foo');
-// TypeError: document.getElementByID is not a function
-

-
-
Der korrekte Funktionsname ist getElementById:

-
-
var x = document.getElementById('foo');
-

-
-
Funktion wird auf dem falschen Objekt aufgerufen

-
-
Für bestimmte Methoden musst eine (callback) Funktion benutzt werden, die nur bei spezifizierten Objekten funktionieren. In diesem Beispiel wird {{jsxref("Array.prototype.map()")}} verwendet, welche nur mit {{jsxref("Array")}} Objekten funktioniert.

-
-
var obj = {a: 13, b: 37, c: 42};
-
-obj.map(function(num) {
-  return num * 2;
-});
-
-// TypeError: "x" is not a function

-
-
Stattdessen muss ein Array verwendet werden:

-
-
var numbers = [1, 4, 9];
-
-numbers.map(function(num) {
-  return num * 2;
-});
-
-// Array [2, 8, 18]
-

-
-
Funktionen teilen einen Namen mit einer existierenden Eigenschaft

-
-
Manchmal, wenn eine Klasse geschrieben wird, haben eine Eigenschaft und eine Funktion den gleichen Namen. Nach dem Aufruf der Funktion denkt der Compiler, dass die Funktion nicht mehr existiert.

-
-
var Dog = function () {
- this.age = 11;
- this.color = "black";
- this.name = "Ralph";
- return this;
-}
-
-Dog.prototype.name = function(name) {
- this.name = name;
- return this;
-}
-
-
-var myNewDog = new Dog();
-myNewDog.name("Cassidy"); //Uncaught TypeError: myNewDog.name is not a function
-

-
-
Stattdessen kann ein anderer Eigenschaftsname benutzt werden:

-
-
var Dog = function () {
- this.age = 11;
- this.color = "black";
- this.dogName = "Ralph"; //Using this.dogName instead of .name
- return this;
-}
-
-Dog.prototype.name = function(name) {
- this.dogName = name;
- return this;
-}
-
-
-var myNewDog = new Dog();
-myNewDog.name("Cassidy"); //Dog { age: 11, color: 'black', dogName: 'Cassidy' }
-

-
-
Siehe auch

-
-
diff --git a/files/de/web/javascript/reference/fehler/not_defined/index.html b/files/de/web/javascript/reference/fehler/not_defined/index.html
deleted file mode 100644
index 030c47536b..0000000000
--- a/files/de/web/javascript/reference/fehler/not_defined/index.html
+++ /dev/null
@@ -1,70 +0,0 @@
----
-title: 'ReferenceError: "x" is not defined'
-slug: Web/JavaScript/Reference/Fehler/Not_defined
-tags:
-  - Error
-  - JavaScript
-  - ReferenceError
-translation_of: Web/JavaScript/Reference/Errors/Not_defined
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
ReferenceError: "x" is not defined
-

-
-
Fehlertyp

-
-
{{jsxref("ReferenceError")}}.

-
-
Was ist falsch gelaufen?

-
-
Es gibt eine Referenz auf eine Variable, die nicht existiert. Diese Variable muss deklariert werden; oder man muss sicherstellen, dass sie im Skript zugänglich ist; oder sich im aktuellen {{Glossary("scope")}} befindet.

-
-

-
Hinweis: Wenn Sie eine Bibliothek nutzen (wie z.B. jQuery), stellen Sie sicher, dass diese tatsächlich geladen ist, bevor Sie auf dessen Variablen (z. B. "$") zugreifen. Schreiben Sie das {{HTMLElement("script")}} Element, welches die Bibliothek lädt vor den Code, der die Bibliothek verwendet.

-

-
-
Beispiele

-
-
Variable nicht deklariert

-
-
foo.substring(1); // ReferenceError: foo is not defined
-

-
-
Die "foo" Variable ist nirgends deklariert. Die Variable muss ein String sein, damit die Methode {{jsxref("String.prototype.substring()")}} funktioniert.

-
-
var foo = "bar";
-foo.substring(1); // "ar"

-
-
Falscher Gültigkeitsbereich

-
-
Eine Variable muss im aktuellem Kontext verfügbar sein. Variablen, die innerhalb einer Funktion definiert sind, können nicht von außerhalb erreicht werden, da diese nur im Gültigkeitsbereich der Funktion existieren.

-
-
function numbers() {
-  var num1 = 2,
-      num2 = 3;
-  return num1 + num2;
-}
-
-console.log(num1); // ReferenceError "num1" is not defined.

-
-
Wobei aus einer Methode kann man auf alle Variablen und Methoden zugreifen, die im gleichen Gültigkeitsbereich definiert worden sind. Kurz gesagt, eine Methode, die im globalen Gültigkeitsbereich definiert worden ist, kann auf alle Variablen zugreifen, die im globalen Gültigkeitsbereich definiert wurden.

-
-
var num1 = 2,
-    num2 = 3;
-
-function numbers() {
-  return num1 + num2;
-}
-
-console.log(numbers()); // 5

-
-
Siehe auch

-
-
diff --git a/files/de/web/javascript/reference/fehler/precision_range/index.html b/files/de/web/javascript/reference/fehler/precision_range/index.html
deleted file mode 100644
index d03b4203c5..0000000000
--- a/files/de/web/javascript/reference/fehler/precision_range/index.html
+++ /dev/null
@@ -1,96 +0,0 @@
----
-title: 'RangeError: precision is out of range'
-slug: Web/JavaScript/Reference/Fehler/Precision_range
-tags:
-  - Errors
-  - JavaScript
-  - RangeError
-translation_of: Web/JavaScript/Reference/Errors/Precision_range
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
RangeError: precision {0} out of range (Firefox)
-RangeError: toExponential() argument must be between 0 and 20 (Chrome)
-RangeError: toFixed() digits argument must be between 0 and 20 (Chrome)
-RangeError: toPrecision() argument must be between 1 and 21 (Chrome)
-

-
-
Fehlertyp

-
-
{{jsxref("RangeError")}}

-
-
Was ist falsch gelaufen?

-
-
Das übergebene Argument für die Genauigkeit ist, für einer der folgenden Funktionen, ausserhalb des gültigen Bereiches:

-
-
    
- 
  • {{jsxref("Number.prototype.toExponential()")}}
    • 
- 
  • {{jsxref("Number.prototype.toFixed()")}}
    • 
- 
  • {{jsxref("Number.prototype.toPrecision()")}}
    • 
-

-
-
Der gülitge Bereich für diese Methoden liegt im normal Fall zwischen 0 und 20 (oder 21). Wobei die ECMAScript Spezifikation erlaubt eine Erweiterung de Bereiches.

-
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
MethodFirefox (SpiderMonkey)Chrome, Opera (V8)
{{jsxref("Number.prototype.toExponential()")}}0 bis 1000 bis 20
{{jsxref("Number.prototype.toFixed()")}}-20 bis1000 bis 20
{{jsxref("Number.prototype.toPrecision()")}}1 bis 1001 bis 21

-
-
Beispiele

-
-
Ungültige Fälle

-
-
77.1234.toExponential(-1);  // RangeError
-77.1234.toExponential(101); // RangeError
-
-2.34.toFixed(-100);         // RangeError
-2.34.toFixed(1001);         // RangeError
-
-1234.5.toPrecision(-1);     // RangeError
-1234.5.toPrecision(101);    // RangeError
-

-
-
Gültige Fälle

-
-
77.1234.toExponential(4); // 7.7123e+1
-77.1234.toExponential(2); // 7.71e+1
-
-2.34.toFixed(1); // 2.3
-2.35.toFixed(1); // 2.4 (zu beachten ist, das in diesem Fall aufgerundet wird)
-
-5.123456.toPrecision(5); // 5.1235
-5.123456.toPrecision(2); // 5.1
-5.123456.toPrecision(1); // 5
-

-
-
Siehe auch

-
-
    
- 
  • {{jsxref("Number.prototype.toExponential()")}}
    • 
- 
  • {{jsxref("Number.prototype.toFixed()")}}
    • 
- 
  • {{jsxref("Number.prototype.toPrecision()")}}
    • 
-

diff --git a/files/de/web/javascript/reference/fehler/property_access_denied/index.html b/files/de/web/javascript/reference/fehler/property_access_denied/index.html
deleted file mode 100644
index d4feb4feb7..0000000000
--- a/files/de/web/javascript/reference/fehler/property_access_denied/index.html
+++ /dev/null
@@ -1,47 +0,0 @@
----
-title: 'Error: Permission denied to access property "x"'
-slug: Web/JavaScript/Reference/Fehler/Property_access_denied
-tags:
-  - Error
-  - Errors
-  - JavaScript
-  - Security
-translation_of: Web/JavaScript/Reference/Errors/Property_access_denied
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
Error: Permission denied to access property "x"
-

-
-
Fehlertyp

-
-
{{jsxref("Error")}}.

-
-
Was ist falsch gelaufen?

-
-
Es wurde versucht auf ein Objekt zuzugreifen, wofür man nicht ausreichend berechtig ist. In den meisten Fällen handelt es sich um ein {{HTMLElement("iframe")}} Element, das von einer anderen Domäne geladen wurde und die Same-Origin Policy verletzt.

-
-
Beispiele

-
-
<!DOCTYPE html>
-<html>
-  <head>
-    <iframe id="myframe" src="http://www1.w3c-test.org/common/blank.html"></iframe>
-    <script>
-      onload = function() {
-        console.log(frames[0].document);
-        // Error: Permission denied to access property "document"
-      }
-    </script>
-  </head>
-  <body></body>
-</html>

-
-
Siehe auch

-
-
diff --git a/files/de/web/javascript/reference/fehler/read-only/index.html b/files/de/web/javascript/reference/fehler/read-only/index.html
deleted file mode 100644
index bb56305880..0000000000
--- a/files/de/web/javascript/reference/fehler/read-only/index.html
+++ /dev/null
@@ -1,78 +0,0 @@
----
-title: 'TypeError: "x" is read-only'
-slug: Web/JavaScript/Reference/Fehler/Read-only
-tags:
-  - Errors
-  - JavaScript
-  - TypeError
-translation_of: Web/JavaScript/Reference/Errors/Read-only
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
TypeError: "x" is read-only (Firefox)
-TypeError: 0 is read-only (Firefox)
-TypeError: Cannot assign to read only property 'x' of #<Object> (Chrome)
-TypeError: Cannot assign to read only property '0' of [object Array] (Chrome)
-

-
-
Fehlertyp

-
-
{{jsxref("TypeError")}}

-
-
Was ist falsch gelaufen?

-
-
Die globale Variable oder Objekteigenschaften werden als nur lesbare Eigenschaften definiert (technisch wird das mit der writable Eigenschaft erreicht).

-
-
Der Fehler tritt nur im strict mode auf. Im normalen Modus wird eine Zuweisung still ignoriert.

-
-
Beispiele

-
-
Nicht valide Fälle

-
-
Nur lesbare Eigenschaften sind nicht sehr weit verbreitet, aber sie können mit {{jsxref("Object.defineProperty()")}} oder {{jsxref("Object.freeze()")}} erstellt werden.

-
-
'use strict';
-var obj = Object.freeze({name: 'Elsa', score: 157});
-obj.score = 0;  // TypeError
-
-'use strict';
-Object.defineProperty(this, 'LUNG_COUNT', {value: 2, writable: false});
-LUNG_COUNT = 3;  // TypeError
-
-'use strict';
-var frozenArray = Object.freeze([0, 1, 2]);
-frozenArray[0]++;  // TypeError
-

-
-
Zudem gibt es ein paar standard Eigenschaft in JavaScript, die nicht überschrieben werden können. Da währen zum Beispiel mathematische Konstanten.

-
-
'use strict';
-Math.PI = 4;  // TypeError
-

-
-
Die globale Variable undefined ist auch nur lesbar, sodass der berüchtigte Fehler "undefined is not a function" nicht wie folgt umgangen werden kann:

-
-
'use strict';
-undefined = function() {};  // TypeError: "undefined" is read-only
-

-
-
Valide Fälle

-
-
'use strict';
-var obj = Object.freeze({name: 'Score', points: 157});
-obj = {name: obj.name, points: 0};   // replacing it with a new object works
-
-'use strict';
-var LUNG_COUNT = 2;  // a `var` works, because it's not read-only
-LUNG_COUNT = 3;  // ok (anatomically unlikely, though)
-

-
-
Siehe auch

-
-
diff --git a/files/de/web/javascript/reference/fehler/redeclared_parameter/index.html b/files/de/web/javascript/reference/fehler/redeclared_parameter/index.html
deleted file mode 100644
index e80836e50f..0000000000
--- a/files/de/web/javascript/reference/fehler/redeclared_parameter/index.html
+++ /dev/null
@@ -1,61 +0,0 @@
----
-title: 'SyntaxError: redeclaration of formal parameter "x"'
-slug: Web/JavaScript/Reference/Fehler/Redeclared_parameter
-tags:
-  - Errors
-  - JavaScript
-  - SyntaxError
-translation_of: Web/JavaScript/Reference/Errors/Redeclared_parameter
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
SyntaxError: redeclaration of formal parameter "x" (Firefox)
-SyntaxError: Identifier "x" has already been declared (Chrome)
-

-
-
Fehlertyp

-
-
{{jsxref("SyntaxError")}}

-
-
Was ist falsch gelaufen?

-
-
Der selbe Variablenname wird für einen Funktionsparameter benutzt und dann in einer let Zuweisung im Funktionskörper wieder neu deklariert. Das Neudeklarieren der gleichen Variablen in der selben Funktion oder im selben Block mit let ist in JavaScript nicht erlaubt.

-
-
Beispiele

-
-
In diesem Fall wird der Parameter "arg" neu deklariert.

-
-
function f(arg) {
-  let arg = 'foo';
-}
-
-// SyntaxError: redeclaration of formal parameter "arg"
-

-
-
Wenn der Wert von "arg" im Funktionskörper geändert werden soll, kann das getan werden, aber ohne die selbe Variable neu zu deklarieren. Oder anders gesagt, man kann das let Schlüsselwort weg lassen. Wenn eine neue Variable erstellt werden soll, muss sie umbenannt werden, damit es keine Konflikte mit dem Funktionsparameter mehr gibt.

-
-
function f(arg) {
-  arg = 'foo';
-}
-
-function f(arg) {
-  let bar = 'foo';
-}
-

-
-
Kompatibilitätshinweise

-
-
    
- 
  • Vor Firefox 49 {{geckoRelease(49)}}, wurde ein {{jsxref("TypeError")}} erzeugt ({{bug(1275240)}}).
    • 
-

-
-
Siehe auch

-
-
diff --git a/files/de/web/javascript/reference/fehler/reduce_of_empty_array_with_no_initial_value/index.html b/files/de/web/javascript/reference/fehler/reduce_of_empty_array_with_no_initial_value/index.html
deleted file mode 100644
index a1a9a43748..0000000000
--- a/files/de/web/javascript/reference/fehler/reduce_of_empty_array_with_no_initial_value/index.html
+++ /dev/null
@@ -1,88 +0,0 @@
----
-title: 'TypeError: Reduce of empty array with no initial value'
-slug: Web/JavaScript/Reference/Fehler/Reduce_of_empty_array_with_no_initial_value
-tags:
-  - Error
-  - JavaScript
-  - Reference
-  - TypeError
-translation_of: Web/JavaScript/Reference/Errors/Reduce_of_empty_array_with_no_initial_value
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
TypeError: reduce of empty array with no initial value
-

-
-
Fehlertyp

-
-
{{jsxref("TypeError")}}

-
-
Was ist falsch gelaufen?

-
-
In JavaScript gibt es einige Reduktionsfunktionen:

-
-
    
- 
  • {{jsxref("Array.prototype.reduce()")}}, {{jsxref("Array.prototype.reduceRight()")}} und
    • 
- 
  • {{jsxref("TypedArray.prototype.reduce()")}},  {{jsxref("TypedArray.prototype.reduceRight()")}}).
    • 
-

-
-
Diese Funktionen haben den optionalen initialValue Parameter (welcher als erster Parameter beim ersten Aufruf der callback Funktion benutzt wird). Immer, wenn dieser Wert nicht angegeben wird, wird das erste Element des {{jsxref("Array", "Arrays")}} oder {{jsxref("TypedArray", "TypedArrays")}} als Initialwert benutzt. Dieser Fehler tritt auf, wenn das Array leer ist, weil es in diesem Fall keinen Initialwert gibt.

-
-
Beispiele

-
-
Nicht valide Fälle

-
-
Dieses Problem tritt öfter bei einer Kombination mit einem Filter ({{jsxref("Array.prototype.filter()")}}, {{jsxref("TypedArray.prototype.filter()")}}), welcher Elemente aus der Liste entfernt. Dieser lässt kein Element als Initialwert in der Liste zurück.

-
-
var ints = [0, -1, -2, -3, -4, -5];
-ints.filter(x => x > 0)         // Entfernt alle Elemente
-    .reduce((x, y) => x + y)    // no more elements to use for the initial value.

-
-
Der gleiche Fehler kann bei einem Tippfehler passieren oder, bei einer unerwarteten Anzahl von Elementen in einer Liste.

-
-
var names = document.getElementsByClassName("names");
-var name_list = Array.prototype.reduce.call(names, (acc, name) => acc + ", " + name);
-

-
-
Valide Fälle

-
-
Diese Problem kann mit zwei Wegen gelöst werden.

-
-
Ein Weg ist es, einen initialValue als neutrales Element des Operators anzugeben, so wie 0 bei der Addition, 1 bei der Multiplikation oder ein leerer String bei einer Konkatination.

-
-
var ints = [0, -1, -2, -3, -4, -5];
-ints.filter(x => x < 0)         // removes all elements
-    .reduce((x, y) => x + y, 0) // the initial value is the neutral element of the addition
-

-
-
Ein anderer Weg ist es den Fall eines leeren Arrays schon vor dem Aufruf von reduce zu behandeln oder einen Dummywert als Initialwert in der callback-Funktion zu benutzen.

-
-
var names = document.getElementsByClassName("names");
-
-var name_list1 = "";
-if (names1.length >= 1)
-  name_list1 = Array.prototype.reduce.call(names, (acc, name) => acc + ", " + name);
-// name_list1 == "" when names is empty.
-
-var name_list2 = Array.prototype.reduce.call(names, (acc, name) => {
-  if (acc == "") // initial value
-    return name;
-  return acc + ", " + name;
-}, "");
-// name_list2 == "" when names is empty.
-

-
-
Siehe auch

-
-
    
- 
  • {{jsxref("Array.prototype.reduce()")}}
    • 
- 
  • {{jsxref("Array.prototype.reduceRight()")}}
    • 
- 
  • {{jsxref("TypedArray.prototype.reduce()")}}
    • 
- 
  • {{jsxref("TypedArray.prototype.reduceRight()")}}
    • 
- 
  • {{jsxref("Array")}}
    • 
- 
  • {{jsxref("TypedArray")}}
    • 
- 
  • {{jsxref("Array.prototype.filter()")}}
    • 
- 
  • {{jsxref("TypedArray.prototype.filter()")}}
    • 
-

diff --git a/files/de/web/javascript/reference/fehler/reserved_identifier/index.html b/files/de/web/javascript/reference/fehler/reserved_identifier/index.html
deleted file mode 100644
index a483f4cd1a..0000000000
--- a/files/de/web/javascript/reference/fehler/reserved_identifier/index.html
+++ /dev/null
@@ -1,80 +0,0 @@
----
-title: 'SyntaxError: "x" is a reserved identifier'
-slug: Web/JavaScript/Reference/Fehler/Reserved_identifier
-tags:
-  - Error
-  - Errors
-  - JavaScript
-  - SyntaxError
-translation_of: Web/JavaScript/Reference/Errors/Reserved_identifier
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
SyntaxError: "x" is a reserved identifier (Firefox)
-SyntaxError: Unexpected reserved word (Chrome)

-
-
Fehlertyp

-
-
{{jsxref("SyntaxError")}}

-
-
Was ist falsch gelaufen?

-
-
Reservierte Schlüsselwörter führen zu einem Fehler, wenn sie als Bezeichner verwendet werden. Im Strict Mode und im Normalen Mode führen folgende Schlüsselwörter zu einem Fehler:

-
-
    
- 
  • enum
    • 
-

-
-
Die folgenden Schlüsselwörter führen nur im Strict Mode zu einem Fehler:

-
-
    
- 
  • implements
    • 
- 
  • interface
    • 
- 
  • {{jsxref("Statements/let", "let")}}
    • 
- 
  • package
    • 
- 
  • private
    • 
- 
  • protected
    • 
- 
  • public
    • 
- 
  • static
    • 
-

-
-
Beispiele

-
-
Reservierte Schlüsselwörter im Strict und Normalen Mode

-
-
Derenum Bezeichner ist generell reserviert.

-
-
var enum = { RED: 0, GREEN: 1, BLUE: 2 };
-// SyntaxError: enum is a reserved identifier
-

-
-
Im Strict Mode sind weitere Bezeichner reserviert.

-
-
"use strict";
-var package = ["potatoes", "rice", "fries"];
-// SyntaxError: package is a reserved identifier
-

-
-
Man muss die Variablen umbenennen.

-
-
var colorEnum = { RED: 0, GREEN: 1, BLUE: 2 };
-var list = ["potatoes", "rice", "fries"];

-
-
Ältere Browser aktualisieren

-
-
Wenn ein alter Browser eingesetzt wird, der zum Beispiel noch nicht let oder class implementiert, muss der Browser aktualisiert werden, so dass er diese neuen Sprachfunktionen unterstützt.

-
-
"use strict";
-class DocArchiver {}
-
-// SyntaxError: class is a reserved identifier
-// (throws in older browsers only, e.g. Firefox 44 and older)
-

-
-
Siehe auch

-
-
diff --git a/files/de/web/javascript/reference/fehler/resulting_string_too_large/index.html b/files/de/web/javascript/reference/fehler/resulting_string_too_large/index.html
deleted file mode 100644
index e3f0246d13..0000000000
--- a/files/de/web/javascript/reference/fehler/resulting_string_too_large/index.html
+++ /dev/null
@@ -1,49 +0,0 @@
----
-title: 'RangeError: repeat count must be less than infinity'
-slug: Web/JavaScript/Reference/Fehler/Resulting_string_too_large
-tags:
-  - Errors
-  - JavaScript
-  - RangeError
-translation_of: Web/JavaScript/Reference/Errors/Resulting_string_too_large
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
RangeError: repeat count must be less than infinity and not overflow maximum string size (Firefox)
-
-RangeError: Invalid count value (Chrome)
-

-
-
Fehlertyp

-
-
{{jsxref("RangeError")}}

-
-
Was ist falsch gelaufen?

-
-
Die {{jsxref("String.prototype.repeat()")}} Methode wurde benutzt. Sie hat einen count Parameter welche die Anzahl der Wiederholungen des Strings angibt. Dieser muss zwischen 0 und kleiner positiv {{jsxref("Infinity")}} sein und kann nicht negativ sein. Das erlaubte Intervall kann wie folgt beschrieben werden: [0, +∞).

-
-
Der Ergebnisstring kann zudem nicht länger als die maximale Stringlänge sein, welche sich je nach JavaScript-Umgebung unterscheiden kann. In Firefox (SpiderMonkey) ist die maximale Stringlänge 228 -1 (0xFFFFFFF).

-
-
Beispiele

-
-
Falsche Fälle

-
-
'abc'.repeat(Infinity); // RangeError
-'a'.repeat(2**28);      // RangeError
-

-
-
Richtige Fälle

-
-
'abc'.repeat(0);    // ''
-'abc'.repeat(1);    // 'abc'
-'abc'.repeat(2);    // 'abcabc'
-'abc'.repeat(3.5);  // 'abcabcabc' (count will be converted to integer)
-

-
-
Siehe auch

-
-
    
- 
  • {{jsxref("String.prototype.repeat()")}}
    • 
-

diff --git a/files/de/web/javascript/reference/fehler/stmt_after_return/index.html b/files/de/web/javascript/reference/fehler/stmt_after_return/index.html
deleted file mode 100644
index be395c3b83..0000000000
--- a/files/de/web/javascript/reference/fehler/stmt_after_return/index.html
+++ /dev/null
@@ -1,77 +0,0 @@
----
-title: 'Warning: unreachable code after return statement'
-slug: Web/JavaScript/Reference/Fehler/Stmt_after_return
-tags:
-  - JavaScript
-  - Warning
-translation_of: Web/JavaScript/Reference/Errors/Stmt_after_return
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
Warning: unreachable code after return statement (Firefox)
-

-
-
Fehlertyp

-
-
Warnung

-
-
Was ist falsch gelaufen?

-
-
Nicht erreichbarer Code nach einem return Statement tritt in folgenden Fällen auf:

-
-
    
- 
  • Wenn eine weitere Anweisung nach einer {{jsxref("Statements/return", "return")}} Anweisung folgt oder
    • 
- 
  • wenn man eine {{jsxref("Statements/return", "return")}} Anweisung ohne abschließendes Semikolon verwendet und anschließend eine weiteren Anweisung angibt.
    • 
-

-
-
Wenn eine Anweisung nach einer gültigen return Anweisung existiert, dann wird diese Warnmeldung ausgegeben, um aufzuzeigen, das der nachfolgende Quellcode nie ausgeführt wird.

-
-
Warum sollte man Semikolons am Ende einer return Anweisung verwenden? Da im Falle einer return Anweisung ohne Semikolon, die Absicht des Entwicklers nicht klar ist. Es stellt sich die Frage, ob die Anweisung nach dem return als Rückgabewert der Methode zu sehen ist, oder sollte die Ausführung gleich beim return beendet werden. Hier zeigt die Warnung an, dass es sich um einen uneindeutige Situation handelt.

-
-
Warnungen werden nicht erzeugt wenn nach einem semikolonlosen return folgende Anweisungen folgen:

-
-
    
- 
  • {{jsxref("Statements/throw", "throw")}}
    • 
- 
  • {{jsxref("Statements/break", "break")}}
    • 
- 
  • {{jsxref("Statements/var", "var")}}
    • 
- 
  • {{jsxref("Statements/function", "function")}}
    • 
-

-
-
Beispiele

-
-
Fehlerfälle

-
-
function f() {
-  var x = 3;
-  x += 4;
-  return x;   // die return Anweisung beendet die Methode sofort.
-  x -= 3;     // somit ist dieser Code nicht erreichbar und wird nie ausgeführt
-}
-
-function f() {
-  return     // diese Zeile ist äquivalent zu `return;`
-    3 + 4;   // somit kann diese Code-Zeile nie erreicht werden
-}
-

-
-
Gültige Fälle

-
-
function f() {
-  var x = 3;
-  x += 4;
-  x -= 3;
-  return x;  // OK: return ist die letzte Anweisung in der Methode
-}
-
-function f() {
-  return 3 + 4  // OK: return ohne Semikolon, aber mit einem Ausdruck auf der gleiche Zeile
-}
-

-
-
Siehe auch

-
-
    
- 
  • {{jsxref("Statements/return", "Automatic Semicolon Insertion", "#Automatic_Semicolon_Insertion", 1)}}
    • 
-

diff --git a/files/de/web/javascript/reference/fehler/strict_non_simple_params/index.html b/files/de/web/javascript/reference/fehler/strict_non_simple_params/index.html
deleted file mode 100644
index a288a81a10..0000000000
--- a/files/de/web/javascript/reference/fehler/strict_non_simple_params/index.html
+++ /dev/null
@@ -1,111 +0,0 @@
----
-title: 'SyntaxError: "use strict" not allowed in function with non-simple parameters'
-slug: Web/JavaScript/Reference/Fehler/Strict_Non_Simple_Params
-tags:
-  - Errors
-  - JavaScript
-  - TypeError
-translation_of: Web/JavaScript/Reference/Errors/Strict_Non_Simple_Params
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
Firefox:
-SyntaxError: "use strict" not allowed in function with default parameter
-SyntaxError: "use strict" not allowed in function with rest parameter
-SyntaxError: "use strict" not allowed in function with destructuring parameter
-
-Chrome:
-SyntaxError: Illegal 'use strict' directive in function with non-simple parameter list
-

-
-
Fehlertyp

-
-
{{jsxref("SyntaxError")}}.

-
-
Was ist falsch gelaufen?

-
-
Eine "use strict" Direktive steht am Anfang einer Funktion, die einen der folgende Parameter hat:

-
-
    
- 
  • {{jsxref("Functions/Default_parameters", "Standardparameter", "", 1)}}
    • 
- 
  • {{jsxref("Functions/rest_parameters", "Rest Parameter", "", 1)}}
    • 
- 
  • {{jsxref("Operators/Destructuring_assignment", "Destrukturierte Parameter", "", 1)}}
    • 
-

-
-
Eine "use strict" Direktive ist am Anfang solcher Funktionen durch die ECMAScript Spezifikation nicht erlaubt.

-
-
Beispiele

-
-
Funktionsstatement

-
-
In diesem Fall hat die Funktion sum zwei Standardparameter a=1 und b=2:

-
-
function sum(a = 1, b = 2) {
-  // SyntaxError: "use strict" not allowed in function with default parameter
-  'use strict';
-  return a + b;
-}
-

-
-
Wenn die Funktion im Strict Mode sein soll und das Skript oder die umschließende FUnktion auch für den Strict Mode in Ordnung ist, kann man die "use strict" Direktive nach außen verschieben:

-
-
'use strict';
-function sum(a = 1, b = 2) {
-  return a + b;
-}
-

-
-
Funktionsausdruck

-
-
Bei eine Funktionsausdruck kann ein andere Workaround genutzt werden:

-
-
var sum = function sum([a, b]) {
-  // SyntaxError: "use strict" not allowed in function with destructuring parameter
-  'use strict';
-  return a + b;
-};
-

-
-
Dieses kann zu folgendem Ausdruck konvertiert werden:

-
-
var sum = (function() {
-  'use strict';
-  return function sum([a, b]) {
-    return a + b;
-  };
-})();
-

-
-
Pfeilfunktionen

-
-
Wenn eine Pfeilfunktion auf die this Variable zugreift, so kann eine umschließende Pfeilfunktion benutzt werden:

-
-
var callback = (...args) => {
-  // SyntaxError: "use strict" not allowed in function with rest parameter
-  'use strict';
-  return this.run(args);
-};
-

-
-
Dieses kann zu folgendem Ausdruck konvertiert werden:

-
-
var callback = (() => {
-  'use strict';
-  return (...args) => {
-    return this.run(args);
-  };
-})();
-

-
-
Siehe auch

-
-
    
- 
  • {{jsxref("Strict_mode", "Strict mode", "", 1)}}
    • 
- 
  • {{jsxref("Statements/function", "function statement", "", 1)}}
    • 
- 
  • {{jsxref("Operators/function", "function expression", "", 1)}}
    • 
- 
  • {{jsxref("Functions/Default_parameters", "Default parameters", "", 1)}}
    • 
- 
  • {{jsxref("Functions/rest_parameters", "Rest parameters", "", 1)}}
    • 
- 
  • {{jsxref("Operators/Destructuring_assignment", "Destructuring parameters", "", 1)}}
    • 
-

diff --git a/files/de/web/javascript/reference/fehler/too_much_recursion/index.html b/files/de/web/javascript/reference/fehler/too_much_recursion/index.html
deleted file mode 100644
index 0010afd90a..0000000000
--- a/files/de/web/javascript/reference/fehler/too_much_recursion/index.html
+++ /dev/null
@@ -1,54 +0,0 @@
----
-title: 'InternalError: too much recursion'
-slug: Web/JavaScript/Reference/Fehler/Too_much_recursion
-tags:
-  - Errors
-  - InternalError
-  - JavaScript
-translation_of: Web/JavaScript/Reference/Errors/Too_much_recursion
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
InternalError: too much recursion
-

-
-
Fehlertyp

-
-
{{jsxref("InternalError")}}.

-
-
Was ist falsch gelaufen?

-
-
Eine Funktion, die sich selbst aufruft, wird rekursive Funktion genannt. In manchen Fällen ist Rekursion mit einer Schleife vergleichbar. Beide führen den gleichen Code mehrfach aus und beide brauchen eine Abbruchbedingung (um Endlosschleifen bzw. Endlosrekursion zu vermeiden). Wenn zu tiefe Rekursion oder Endlosrekursion auftritt, erzeugt JavaScript diesen Fehler.

-
-
Beispiele

-
-
Diese rekursive Methode wird bis zur Abbruchbedingung 10 mal durchlaufen.

-
-
function schleife(x) {
-  if (x >= 10) // "x >= 10" ist die Abbruchsbedingung
-    return;
-  // zu wiederholende Codezeilen
-  schleife(x + 1); // rekursiver Methodenaufruf
-}
-schleife(0);

-
-
Wird die Abbruchsbedingung auf eine zu hohe Wert gesetzt, ist die Rekursionstiefe zu hoch und es wird einen Fehler erzeugt:

-
-
function boeseSchleife(x) {
-  if (x >= 1000000000000)
-    return;
-  // zu wiederholende Codezeilen
-  boeseSchleife(x + 1);
-}
-boeseSchleife(0);
-
-// InternalError: too much recursion

-
-
Siehe auch

-
-
diff --git a/files/de/web/javascript/reference/fehler/typed_array_invalid_arguments/index.html b/files/de/web/javascript/reference/fehler/typed_array_invalid_arguments/index.html
deleted file mode 100644
index 2e7fa8f0b3..0000000000
--- a/files/de/web/javascript/reference/fehler/typed_array_invalid_arguments/index.html
+++ /dev/null
@@ -1,77 +0,0 @@
----
-title: 'TypeError: invalid arguments'
-slug: Web/JavaScript/Reference/Fehler/Typed_array_invalid_arguments
-tags:
-  - Error
-  - Errors
-  - JavaScript
-  - TypeError
-translation_of: Web/JavaScript/Reference/Errors/Typed_array_invalid_arguments
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
TypeError: invalid arguments (Firefox)

-
-
Fehlertyp

-
-
{{jsxref("TypeError")}}

-
-
Was ist falsch gelaufen?

-
-
Der Typed Array Konstruktor erwartet entweder

-
-
    
- 
  • eine Länge,
    • 
- 
  • ein anderes Typed Array,
    • 
- 
  • Array ähnliche Objete,
    • 
- 
  • iterierbare Objekte oder
    • 
- 
  • ein {{jsxref("ArrayBuffer")}} Objekt,
    • 
-

-
-
um ein neues Typed Array zu erstelltn. Andere Argumente im Konstruktor erstellen kein valides Typed Array.

-
-
Beispiele

-
-
Typed Arrays, zum Beispiel ein {{jsxref("Uint8Array")}}, können nicht von einem String erstellt werden. Tatsächlich können String nicht in typisierten Arrays enthalten sein.

-
-
var ta = new Uint8Array("nope");
-// TypeError: invalid arguments
-

-
-
Verschiedene Wege um ein valides {{jsxref("Uint8Array")}} Objekt zu erstellen:

-
-
// From a length
-var uint8 = new Uint8Array(2);
-uint8[0] = 42;
-console.log(uint8[0]); // 42
-console.log(uint8.length); // 2
-console.log(uint8.BYTES_PER_ELEMENT); // 1
-
-// From an array
-var arr = new Uint8Array([21,31]);
-console.log(arr[1]); // 31
-
-// From another TypedArray
-var x = new Uint8Array([21, 31]);
-var y = new Uint8Array(x);
-console.log(y[0]); // 21
-
-// From an ArrayBuffer
-var buffer = new ArrayBuffer(8);
-var z = new Uint8Array(buffer, 1, 4);
-
-// From an iterable
-var iterable = function*(){ yield* [1,2,3]; }();
-var uint8 = new Uint8Array(iterable);
-// Uint8Array[1, 2, 3]
-

-
-
Siehe auch

-
-
    
- 
  • Typed arrays
    • 
- 
  • {{jsxref("ArrayBuffer")}}
    • 
- 
  • {{jsxref("Uint8Array")}}
    • 
-

diff --git a/files/de/web/javascript/reference/fehler/undeclared_var/index.html b/files/de/web/javascript/reference/fehler/undeclared_var/index.html
deleted file mode 100644
index b7c8b09165..0000000000
--- a/files/de/web/javascript/reference/fehler/undeclared_var/index.html
+++ /dev/null
@@ -1,67 +0,0 @@
----
-title: 'ReferenceError: assignment to undeclared variable "x"'
-slug: Web/JavaScript/Reference/Fehler/Undeclared_var
-tags:
-  - Errors
-  - JavaScript
-  - ReferenceError
-  - Strict Mode
-translation_of: Web/JavaScript/Reference/Errors/Undeclared_var
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
ReferenceError: assignment to undeclared variable "x" (Firefox)
-ReferenceError: "x" is not defined (Chrome)
-ReferenceError: Variable undefined in strict mode (Edge)
-

-
-
Fehlertyp

-
-
{{jsxref("ReferenceError")}} Warnung nur im Strict mode.

-
-
Was ist falsch gelaufen?

-
-
Ein Wert wurde zu einer nicht deklarierten Variablen hinzugefügt. Oder mit anderen Worten, es gibt eine Zuweisung ohne das Schlüsselwort var. Es gibt einige Unterschiede zwischen deklarierten und nicht deklarierten Variablen, die zu unerwarteten Ergebnissen führen kann und weshalb der Fehler im Strict Mode erscheint.

-
-
Drei Dinge über deklarierte und nicht deklarierte Variablen:

-
-
    
- 
  • Deklarierte Variablen gehören zu dem Ausführungskontext, in dem sie deklariert werden. Nicht deklarierte Variablen sind immer global.
    • 
- 
  • Deklarierte Variablen werden erstellt bevor Code ausgeführt wird. Nicht deklarierte Variablen existieren erst, wenn der zugehörige Code ausgeführt wird.
    • 
- 
  • Deklarierte Variablen sind eine nicht konfigurierbare Eigenschaft des Ausführungskontextes (Funktion oder global). Nicht deklarierte Variablen sind konfigurierbar (sie können z. B. gelöscht werden).
    • 
-

-
-
Mehr Details und Beispiele findet man auf der var Referenzseite.

-
-
Fehler mit nicht deklarierten Variablenzuweisungen gibt es nur im Strict Mode Code. Außerhalb davon wird die Warnung einfach Ignoriert.

-
-
Beispiele

-
-
Falsche Fälle

-
-
In diesem Fall ist die "bar" eine nicht deklarierte Variable.

-
-
function foo() {
-  'use strict';
-  bar = true;
-}
-foo(); // ReferenceError: assignment to undeclared variable bar
-

-
-
Richtige Fälle

-
-
Um "bar" zu einer deklarierten Variable zu machen, kann das Schlüsselwort var eingesetzt werden.

-
-
function foo() {
-  'use strict';
-  var bar = true;
-}
-foo();

-
-
Siehe auch

-
-
diff --git a/files/de/web/javascript/reference/fehler/undefined_prop/index.html b/files/de/web/javascript/reference/fehler/undefined_prop/index.html
deleted file mode 100644
index fe83564f59..0000000000
--- a/files/de/web/javascript/reference/fehler/undefined_prop/index.html
+++ /dev/null
@@ -1,63 +0,0 @@
----
-title: 'ReferenceError: reference to undefined property "x"'
-slug: Web/JavaScript/Reference/Fehler/Undefined_prop
-tags:
-  - Errors
-  - JavaScript
-  - ReferenceError
-  - Strict Mode
-translation_of: Web/JavaScript/Reference/Errors/Undefined_prop
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
ReferenceError: reference to undefined property "x" (Firefox)
-

-
-
Fehlertyp

-
-
{{jsxref("ReferenceError")}} Fehlermeldung tritt nur im  strikten Modus auf.

-
-
Was ist falsch gelaufen?

-
-
Es wird versucht auf eine Eigenschaft zuzugreifen, die nicht existiert. Es gibt zwei Arten um auf Eigenschaften zuzugreifen, siehe Eigenschaften Zugriffsfunktionen auf den Referenzseiten für weitere Details.

-
-
Fehler aufgrund von leeren Eigenschaftsreferenzen treten nur im Quellcode auf, der im strikten Modus geschrieben ist. Im Quellcode der nicht im strikten Modus geschrieben ist, wird der Fehler ohne Meldung ignoriert.

-
-
Beispiele

-
-
Ungültige Fälle

-
-
In diesem Fall ist die Eigenschaft "bar" undefiniert.

-
-
"use strict";
-
-var foo = {};
-foo.bar; // ReferenceError: reference to undefined property "bar"
-

-
-
Gültige Fälle

-
-
Um Fehler zu vermeiden muss man eine Eigenschaft "bar" definieren oder überprüfen, ob die Eigenschaft "bar" existiert, bevor man auf diese zugreift. (z.B.: mit Hilfe der Funktion {{jsxref("Object.prototype.hasOwnProperty()")}}).

-
-
"use strict";
-
-var foo = {};
-
-// Definiert die bar Eigenschaft
-
-foo.bar = "Mond";
-console.log(foo.bar); // "Mond"
-
-// Testet vor dem Zugriff, ob bar existiert.
-
-if (foo.hasOwnProperty("bar")) {
-  console.log(foo.bar);
-}

-
-
Siehe auch

-
-
diff --git a/files/de/web/javascript/reference/fehler/unexpected_token/index.html b/files/de/web/javascript/reference/fehler/unexpected_token/index.html
deleted file mode 100644
index 3aff253bfd..0000000000
--- a/files/de/web/javascript/reference/fehler/unexpected_token/index.html
+++ /dev/null
@@ -1,47 +0,0 @@
----
-title: 'SyntaxError: Unexpected token'
-slug: Web/JavaScript/Reference/Fehler/Unexpected_token
-tags:
-  - Fehler
-  - JavaScript
-  - Syntaxfehler
-translation_of: Web/JavaScript/Reference/Errors/Unexpected_token
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
SyntaxError: expected expression, got "x"
-SyntaxError: expected property name, got "x"
-SyntaxError: expected target, got "x"
-SyntaxError: expected rest argument name, got "x"
-SyntaxError: expected closing parenthesis, got "x"
-SyntaxError: expected '=>' after argument list, got "x"
-

-
-
Fehlertyp

-
-
{{jsxref("SyntaxError")}}

-
-
Was ist falsch gelaufen?

-
-
Es wurde eine bestimmte Sprachenstruktur erwartet, aber etwas anderes wurde übermittelt. Es kann sich dabei um einen einfachen Tippfehler handeln.

-
-
Beispiele

-
-
Expression expected (Ausdruck erwartet)

-
-
Zum Beispiel sind Kommas am Ende eines Befehls nicht erlaubt.

-
-
for (let i = 0; i < 5,; i++) {
-  console.log(i);
-}
-// SyntaxError: expected expression, got ')'
-

-
-
Richtig wäre das Komma auszulassen oder ein weiteren Ausdruck hinzuzufügen:

-
-
for (let i = 0; i < 5; i++) {
-  console.log(i);
-}
-

diff --git a/files/de/web/javascript/reference/fehler/unexpected_type/index.html b/files/de/web/javascript/reference/fehler/unexpected_type/index.html
deleted file mode 100644
index 601ec21d43..0000000000
--- a/files/de/web/javascript/reference/fehler/unexpected_type/index.html
+++ /dev/null
@@ -1,67 +0,0 @@
----
-title: 'TypeError: "x" is (not) "y"'
-slug: Web/JavaScript/Reference/Fehler/Unexpected_type
-tags:
-  - Errors
-  - JavaScript
-  - TypeError
-translation_of: Web/JavaScript/Reference/Errors/Unexpected_type
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
TypeError: "x" is (not) "y"
-
-Examples:
-TypeError: "x" is undefined
-TypeError: "x" is null
-TypeError: "undefined" is not an object
-TypeError: "x" is not an object or null
-TypeError: "x" is not a symbol
-

-
-
Fehlertyp

-
-
{{jsxref("TypeError")}}.

-
-
Was ist falsch gelaufen?

-
-
Der Typ einer Variable ist unpassend. Dieser Fall tritt oft bei {{jsxref("undefined")}}- oder {{jsxref("null")}}-Werten auf.

-
-
Außerdem benötigen bestimmte Metodhen wie {{jsxref("Object.create()")}} oder {{jsxref("Symbol.keyFor()")}} einen bestimmten Typ, der bereitgestellt werden muss.

-
-
Beispiele

-
-
Ungültige Fälle

-
-
// Undefinierte und null-Fälle, bei denen die Substring-Methode nicht funktioniert
-var foo = ;
-foo.substring(1); // TypeError: foo is undefined
-
-var foo = null;
-foo.substring(1); // TypeError: foo is null
-
-
-// Bestimmte Methoden erfordern einen bestimmten Typ
-var foo = {}
-Symbol.keyFor(foo); // TypeError: foo is not a symbol
-
-var foo = 'bar'
-Object.create(foo); // TypeError: "foo" is not an object or null
-

-
-
Den Fehler beheben?

-
-
Um den Nullzeiger auf undefined- oder null-Werte zu beheben, kann z. B. der "typeof"-Operator verwendt werden.

-
-
if (typeof foo !== 'undefined') {
-  // Nun wissen wir, dass foo definiert ist, und können weitermachen.
-}

-
-
Siehe auch

-
-
    
- 
  • {{jsxref("undefined")}}
    • 
- 
  • {{jsxref("null")}}
    • 
-

diff --git a/files/de/web/javascript/reference/fehler/unnamed_function_statement/index.html b/files/de/web/javascript/reference/fehler/unnamed_function_statement/index.html
deleted file mode 100644
index 6c148b6ff0..0000000000
--- a/files/de/web/javascript/reference/fehler/unnamed_function_statement/index.html
+++ /dev/null
@@ -1,115 +0,0 @@
----
-title: 'SyntaxError: function statement requires a name'
-slug: Web/JavaScript/Reference/Fehler/Unnamed_function_statement
-tags:
-  - Error
-  - Errors
-  - JavaScript
-  - SyntaxError
-translation_of: Web/JavaScript/Reference/Errors/Unnamed_function_statement
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
SyntaxError: function statement requires a name [Firefox]
-SyntaxError: Unexpected token ( [Chrome]
-

-
-
Fehlertyp

-
-
{{jsxref("SyntaxError")}}

-
-
Was ist falsch gelaufen?

-
-
Es gibt eine Funktionsstatement im Code, welches einen Namen benötigt. Man muss überprüfen, wie Funktionen definiert sind und ob diese einen Namen benötigen oder ob diese Funktion ein Funktionsausdruck ist (eine {{Glossary("IIFE")}}) oder ob die Funktion im richtigen Kontext geschrieben ist.

-
-
Beispiele

-
-
Statements vs Ausdrücke

-
-
Ein Funktionsstatement (oder Funktionsdeklaration) benötigt einen Namen. Folgendes funktioniert nicht:

-
-
function () {
-  return 'Hello world';
-}
-// SyntaxError: function statement requires a name
-

-
-
Man kann stattdessen ein Funktionsausdruck (Zuweisung) nutzen:

-
-
var greet = function() {
-  return 'Hello world';
-};

-
-
Manchmal soll auch eine auch eine IIFE (Immediately Invoked Function Expression) sein, welche eine Funktion ist, die nach der Definition direkt ausgeführt wird. Dafür müssen ein paar mehr Klammern benutzt werden:

-
-
(function () {
-
-})();

-
-
Funktionen mit Labeln

-
-
Wenn man ein Funktionslabel benutzt, muss ein Funktionsnamen nach dem function Schlüsselwort stehen. Folgendes funktioniert nicht:

-
-
function Greeter() {
-  german: function () {
-    return "Moin";
-  }
-}
-// SyntaxError: function statement requires a name
-

-
-
Das folgende funktioniert:

-
-
function Greeter() {
-  german: function g() {
-    return "Moin";
-  }
-}

-
-
Objektmethoden

-
-
Wenn man eine Methode für ein Objekt erstellen möchte, muss ein Objekt erstellt werden. Die folgende Syntax ohne einen Namen nach dem function Schlüsselwort ist zulässig.

-
-
var greeter = {
-  german: function () {
-    return "Moin";
-  }
-};

-
-
Callback Syntax

-
-
Zudem sollte die Syntax bei Callbackfunktionen geprüft werden. Komma- und Klammersetzung kann schnell schwierig werden.

-
-
promise.then(
-  function() {
-    console.log("success");
-  });
-  function() {
-    console.log("error");
-}
-// SyntaxError: function statement requires a name
-

-
-
Richtig ist folgendes:

-
-
promise.then(
-  function() {
-    console.log("success");
-  },
-  function() {
-    console.log("error");
-  }
-);
-

-
-
Siehe auch

-
-
diff --git a/files/de/web/javascript/reference/fehler/unterminated_string_literal/index.html b/files/de/web/javascript/reference/fehler/unterminated_string_literal/index.html
deleted file mode 100644
index 3d60240b51..0000000000
--- a/files/de/web/javascript/reference/fehler/unterminated_string_literal/index.html
+++ /dev/null
@@ -1,67 +0,0 @@
----
-title: 'SyntaxError: unterminated string literal'
-slug: Web/JavaScript/Reference/Fehler/Unterminated_string_literal
-tags:
-  - Errors
-  - JavaScript
-  - SyntaxError
-translation_of: Web/JavaScript/Reference/Errors/Unterminated_string_literal
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
SyntaxError: unterminated string literal
-

-
-
Fehlertyp

-
-
{{jsxref("SyntaxError")}}

-
-
Was ist falsch gelaufen?

-
-
Es gibt irgendwo einen nicht beendeten {{jsxref("String")}}. Stringliterale müssen mit einfachen (') oder doppelten (") Anführungszeichen umschlossen sein. JavaScript unterscheidet nicht zwischen Strings, die mit einfachen oder doppelten Anführungszeichen umschlossen sind. Maskierte Sequenzen funktionieren in Strings mit einfachen und doppelten Anführungszeichen. Um den Fehler zu beheben, sollte folgendes überprüft werden:

-
-
    
- 
  • Es gibt öffnende und schließende Anführungszeichen (einfache oder doppelte) für alle Stringliterale,
    • 
- 
  • Stringliterale sind richtig maskiert,
    • 
- 
  • Stringliterale funktionieren richtig über mehrere Zeilen, wenn es solche gibt.
    • 
-

-
-
Beispiele

-
-
MehrereZeilen

-
-
Man kann Strings nicht über mehrere Zeilen in JavaScript schreiben:

-
-
var longString = 'This is a very long string which needs
-                  to wrap across multiple lines because
-                  otherwise my code is unreadable.';
-// SyntaxError: unterminated string literal

-
-
Stattdessen muss ein + Operator, ein Backslask oder ein Templateliteral eingesetzt werden. Die + Operator Variante sieht wie folgt aus:

-
-
var longString = 'This is a very long string which needs ' +
-                 'to wrap across multiple lines because ' +
-                 'otherwise my code is unreadable.';
-

-
-
Oder man benutzt ein Backslash Zeichen ("\") am ende jeder Zeile, um anzudeuten, dass der String in der nächsten Zeile weiter geht. Man muss sicherstellen, dass keine Leerzeichen oder andere Zeichen nach dem Backslash stehen (ausgenommen der Zeilenumbruch) oder als Einrückung, ansonsten wird es nicht funktionieren. Diese Form sieht wie folgt aus:

-
-
var longString = 'This is a very long string which needs \
-to wrap across multiple lines because \
-otherwise my code is unreadable.';
-

-
-
Eine andere Möglichkeit ist der Einsatz von Templateliteralen, welche in ECMAScript 2015 Umgebungen unterstützt werden:

-
-
var longString = `This is a very long string which needs
-                  to wrap across multiple lines because
-                  otherwise my code is unreadable.`;

-
-
Siehe auch

-
-
diff --git a/files/de/web/javascript/reference/fehler/var_hides_argument/index.html b/files/de/web/javascript/reference/fehler/var_hides_argument/index.html
deleted file mode 100644
index f06a1d5220..0000000000
--- a/files/de/web/javascript/reference/fehler/var_hides_argument/index.html
+++ /dev/null
@@ -1,56 +0,0 @@
----
-title: 'TypeError: variable "x" redeclares argument'
-slug: Web/JavaScript/Reference/Fehler/Var_hides_argument
-tags:
-  - Errors
-  - JavaScript
-  - Strict Mode
-  - TypeError
-translation_of: Web/JavaScript/Reference/Errors/Var_hides_argument
----
-
{{jsSidebar("Errors")}}

-
-
Fehlermeldung

-
-
TypeError: variable "x" redeclares argument (Firefox)
-

-
-
Fehlertyp

-
-
{{jsxref("TypeError")}} Warnung nur im strict mode.

-
-
Was ist falsch gelaufen?

-
-
Der selbe Variablenname für einen Funktionsparameter und einer Neudeklaration mit einer var Zuweisung im Funktionskörper ist vorhanden. Dieses ist ein Namenskonflikt, weshalb JavaScript eine Warnung erzeugt.

-
-
Dieser Fehler ist eine Warnung, die nur im strict mode auftaucht. Ist man nicht im strict mode, so wird die Neudeklaration still ignoriert.

-
-
Beispiele

-
-
Nicht balider Fall

-
-
In diesem Fall wird die Variable "arg" neu deklariert.

-
-
'use strict';
-
-function f(arg) {
-  var arg = 'foo';
-}
-

-
-
Valider Fall

-
-
Um diese Warnung zu vermeiden kann das var Statement weggelassen werden, weil die Variable schon existiert. In anderen Fällen kann der Funktionsparameter oder die Variable umbenannt werden.

-
-
'use strict';
-
-function f(arg) {
-  arg = 'foo';
-}
-

-
-
Siehe auch

-
-
diff --git a/files/de/web/javascript/reference/functions/arrow_functions/index.html b/files/de/web/javascript/reference/functions/arrow_functions/index.html
new file mode 100644
index 0000000000..a29b5ea3cf
--- /dev/null
+++ b/files/de/web/javascript/reference/functions/arrow_functions/index.html
@@ -0,0 +1,360 @@
+---
+title: Pfeilfunktionen
+slug: Web/JavaScript/Reference/Functions/Pfeilfunktionen
+tags:
+  - ECMAScript 2015
+  - Functions
+  - Intermediate
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Functions/Arrow_functions
+---
+
{{jsSidebar("Functions")}}

+
+
Der Ausdruck einer Pfeilfunktion hat eine kürzere Syntax als ein Funktionsausdruck und hat kein eigenes this, arguments, super, oder new.target. Solche Funktionsausdrücke sind am besten für Funktionen, die nicht als Methode genutzt werden, geeignet und können nicht als Konstruktoren verwendet werden.

+
+
{{EmbedInteractiveExample("pages/js/functions-arrow.html")}}

+
+
Syntax

+
+
Basis Syntax

+
+
(param1, param2, …, paramN) => { statements }
+(param1, param2, …, paramN) => expression
+// gleich zu: => { return expression; }
+
+// Klammern sind optional, wenn nur ein Parametername vorhanden ist:
+(singleParam) => { statements }
+singleParam => { statements }
+
+// Die Parameterliste für eine parameterlose Funktion muss mit einem Klammernpaar geschrieben werden
+() => { statements }
+

+
+
Fortgeschrittene Syntax

+
+
// Der Body kann eingeklammert werden, um ein Objektliteral Ausdruck zurück zu geben:
+params => ({foo: bar})
+
+// Rest Parameter und Default Parameter werden unterstützt
+(param1, param2, ...rest) => { statements }
+(param1 = defaultValue1, param2, …, paramN = defaultValueN) => {
+statements }
+
+// Destrukturierung in der Parameterliste ist ebenfalls unterstützt
+var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
+f(); // 6
+

+
+
Beschreibung

+
+
Siehe auch "ES6 In Depth: Arrow functions" on hacks.mozilla.org.

+
+
Zwei Faktoren haben die Einführung von Pfeilfunktionen beeinflusst: kürzere Funktionen und dass this nicht gebunden ist.

+
+
Kürzere Funktionen

+
+
var elements = [
+  "Hydrogen",
+  "Helium",
+  "Lithium",
+  "Beryllium"
+];
+
+elements.map(function(element) {
+  return element.length
+}); // [8, 6, 7, 9]
+
+elements.map(element => {
+  return element.length
+}); // [8, 6, 7, 9]
+
+elements.map(({length}) => length); // [8, 6, 7, 9]

+
+
Keine Bindung von this

+
+
Vor (der Einführung von) Pfeilfunktionen definierte jede Funktion ihren eigenen this-Wert (d.h. ein neues Objekt im Falle eines Konstruktors; in strict mode Funktionsaufrufen nicht definiert; bzw. das kontextuelle Objekt, wenn die Funktion als eine "Objekt-Methode" aufgerufen wurde, usw.). Dies stellte sich innerhalb eines objektorientierten Programmierstils als lästig heraus.

+
+
function Person() {
+  // Der Person() Konstruktor definiert `this` als Instanz von sich selbst.
+  this.age = 0;
+
+  setInterval(function growUp() {
+    // Im nicht Strict Modus, definiert die growUp() Funktion `this`
+    // als das globale Objekt (weil das der Ort ist, an dem growUp() ausgeführt wird),
+    // das sich von dem `this`, welches vom Person() Konstruktor definiert wurde unterscheidet.
+    this.age++;
+  }, 1000);
+}
+
+var p = new Person();

+
+
In ECMAScript 3/5 konnte dies durch Zuweisung des Wertes von this an eine Variable, welche umschlossen werden konnte, behoben werden.

+
+
function Person() {
+  var that = this;
+  that.age = 0;
+
+  setInterval(function growUp() {
+    // Der Rückruf bezieht sich auf jene `that`-Variable,
+    // deren Wert das zu erwartende Objekt ist.
+    that.age++;
+  }, 1000);
+}

+
+
Alternativ könnte eine gebundene Funktion erstellt werden, sodass der passende this-Wert an die growUp()-Funktion übergeben würde.

+
+
Eine Pfeilfunktion erstellt keinen eigenen this Kontext, wodurch this die ursprüngliche Bedeutung des umschließenden Kontextes trägt. Somit funktioniert der folgende Code wie erwartet.

+
+
function Person(){
+  this.age = 0;
+
+  setInterval(() => {
+    this.age++; // |this| bezieht sich entsprechend auf das Person-Objekt
+  }, 1000);
+}
+
+var p = new Person();

+
+
Zusammenhang mit dem Strict Mode

+
+
Vorausgesetzt, dass this aus dem umschließenden lexikalischen Kontext kommt, werden Strict Mode Regeln bezüglich this einfach ignoriert.

+
+
var f = () => {'use strict'; return this};
+f() === window; // oder das globale Objekt

+
+
Die restlichen strict mode Regeln verhalten sich normal.

+
+
Aufruf durch call oder apply

+
+
Da this in Pfeilfunktionen nicht gebunden ist, können call() oder apply() Methoden nur Argumente übergeben; this wird ignoriert:

+
+
var adder = {
+  base : 1,
+
+  add : function(a) {
+    var f = v => v + this.base;
+    return f(a);
+  },
+
+  addThruCall: function(a) {
+    var f = v => v + this.base;
+    var b = {
+      base : 2
+    };
+
+    return f.call(b, a);
+  }
+};
+
+console.log(adder.add(1));         // Dies würde 2 ausgeben
+console.log(adder.addThruCall(1)); // Dies würde nach wie vor 2 ausgeben

+
+
Keine Bindung von Argumenten

+
+
Pfeilfunktionen haben kein eigenes arguments Objekt. Somit ist arguments einfach eine Referenz auf den Namen innerhalb des umschließenden Geltungsbereichs (scope).

+
+
var arguments = [1, 2, 3];
+var arr = () => arguments[0];
+
+arr(); // 1
+
+function foo(n) {
+  var f = () => arguments[0] + n; // implizite Argumenten-Bindung von foo
+  return f();
+}
+
+foo(1); // 2

+
+
In den meisten Fällen sind Rest Parameters eine gute Alternative zum Einsatz des arguments Objektes:

+
+
function foo(n) {
+  var f = (...args) => args[0] + n;
+  return f(10);
+}
+
+foo(1); // 11

+
+
Pfeilfunktionen als Methoden

+
+
Wie angegeben, sind Ausdrücke von Pfeilfunktionen am besten geeignet für nicht-methodische Funktionen. Man sehe, was geschieht, wenn versucht wird, sie als Methoden zu verwenden.

+
+
'use strict';
+
+var obj = {
+  i: 10,
+  b: () => console.log(this.i, this),
+  c: function() {
+    console.log( this.i, this)
+  }
+}
+obj.b(); // gibt undefined, Window {...} aus (oder das globale Objekt)
+obj.c(); // gibt 10, Object {...} aus

+
+
Pfeilfunktionen definieren (binden sozusagen) kein eigenes this. Ein anderes Beispiel, das {{jsxref("Object.defineProperty()")}} betrifft:

+
+
'use strict';
+
+var obj = {
+  a: 10
+};
+
+Object.defineProperty(obj, "b", {
+  get: () => {
+    console.log(this.a, typeof this.a, this);
+    return this.a+10; // stellt das globale Objekt 'Window' dar, 'this.a' gibt daher 'undefined' zurück
+  }
+});
+

+
+
Verwendung des new Operators

+
+
Pfeilfunktionen können nicht als Konstruktoren verwendet werden. Sie führen zu einem Fehler, wenn auf ihnen ein new angewendet wird.

+
+
var Foo = () => {};
+var foo = new Foo(); // TypeError: Foo is not a constructor
+

+
+
Einsatz der prototype Eigenschaft

+
+
Pfeilfunktionen haben keine prototype Eigenschaft.

+
+
var Foo = () => {};
+console.log(Foo.prototype); // undefined
+

+
+
Verwendung des Schlüsselwortes yield

+
+
Das yield-Schlüsselwort sollte im Körper einer Pfeilfunktion nicht verwendet werden (außer wenn dies innerhalb von darin weiter verschachtelten Funktionen erlaubt ist). Als Folge können Pfeilfunktionen nicht als Generatoren verwendet werden.

+
+
Funktionskörper

+
+
Pfeilfunktionen können entweder einen "knappen" oder einen gewöhnlichen "Blockkörper" haben.

+
+
In einem knappen Körper ist lediglich ein Ausdruck nötig und eine implizite Rückgabe wird angehängt. In einem Blockkörper muss eine explizite Rückgabe-Anweisung verwendet werden.

+
+
var func = x => x * x;
+// knappe Syntax, implizierte Rückgabe
+
+var func = (x, y) => { return x + y; };
+// mit Blockkörper, explizite Rückgabe wird benötigt
+

+
+
Rückgabe von Objekt-Literalen

+
+
Man bedenke, dass die Rückgabe von Objekt-Literalen unter Verwendung der knappen Syntax params => {object:literal} nicht so ausgeführt wird, wie man es erwarten würde:

+
+
var func = () => {  foo: 1  };
+// Der Aufruf von func() gibt undefined zurück!
+
+var func = () => {  foo: function() {}  };
+// SyntaxError: function-Anweisung erfordert einen Namen

+
+
Der Grund dafür ist, dass der Code in geschweiften Klammern ({}) als eine Sequenz von Anweisungen übersetzt wird (d.h. foo wird als Bezeichner behandelt und nicht als Schlüssel eines Objekt-Literals).

+
+
Man bedenke, das Objekt-Literal in Klammern zu setzen:

+
+
var func = () => ({ foo: 1 });

+
+
Zeilenumbruch

+
+
Pfeilfunktionen können keinen Zeilenumbruch zwischen Parametern und dem Pfeil haben.

+
+
var func = ()
+           => 1;
+// SyntaxError: Ausdruck erwartet, '=>' erhalten

+
+
Übersetzungsreihenfolge

+
+
Der Pfeil innerhalb einer Pfeilfunktion ist kein Operator. Allerdings haben Pfeilfunktionen im Vergleich zu gewöhnlichen Funktionen besondere Übersetzungsregeln, welche mit der Priorität von Operatoren (operator precedence) anders interagieren.

+
+
let callback;
+
+callback = callback || function() {}; // ok
+
+callback = callback || () => {};
+// SyntaxError: invalid arrow-function arguments
+
+callback = callback || (() => {});    // ok
+

+
+
Weitere Beispiele

+
+
// Eine leere Pfeilfunktion gibt undefined zurück
+let empty = () => {};
+
+(() => "foobar")()
+// Gibt "foobar" zurück
+// (Das ist eine Immediately Invoked Function Expression
+// siehe IIFE im Glossar
+
+var simple = a => a > 15 ? 15 : a;
+simple(16); // 15
+simple(10); // 10
+
+let max = (a, b) => a > b ? a : b;
+
+// Einfaches filtering, mapping, ... von Arrays
+
+var arr = [5, 6, 13, 0, 1, 18, 23];
+
+var sum = arr.reduce((a, b) => a + b);
+// 66
+
+var even = arr.filter(v => v % 2 == 0);
+// [6, 0, 18]
+
+var double = arr.map(v => v * 2);
+// [10, 12, 26, 0, 2, 36, 46]
+
+// Weitere knappe Zusicherungsketten (promise chains)
+promise.then(a => {
+  // ...
+}).then(b => {
+   // ...
+});
+
+// Parameterlose Pfeilfunktionen, welche visuell einfacher zu verstehen sind
+setTimeout( _ => {
+  console.log("I happen sooner");
+  setTimeout( _ => {
+    // deeper code
+    console.log("I happen later");
+  }, 1);
+}, 1);

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('ES2015', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}{{Spec2('ES2015')}}Initiale Definition.
{{SpecName('ESDraft', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}{{Spec2('ESDraft')}} 

+
+
Browserkompatibilität

+
+

+
+
+
{{Compat("javascript.functions.arrow_functions")}}

+

+
+
Siehe auch

+
+
diff --git a/files/de/web/javascript/reference/functions/method_definitions/index.html b/files/de/web/javascript/reference/functions/method_definitions/index.html
new file mode 100644
index 0000000000..bf4d432627
--- /dev/null
+++ b/files/de/web/javascript/reference/functions/method_definitions/index.html
@@ -0,0 +1,230 @@
+---
+title: Methoden Definitionen
+slug: Web/JavaScript/Reference/Functions/Methoden_Definitionen
+tags:
+  - ECMAScript 2015
+  - Funktionen
+  - JavaScript
+  - Objekte
+  - Syntax
+translation_of: Web/JavaScript/Reference/Functions/Method_definitions
+---
+
{{JsSidebar("Functions")}}

+
+
Beginnend mit ECMAScript 2015 wurde eine kürzere Syntax für Methodendefinitionen in Objekt Initialisierungen eingeführt. Es ist eine Abkürzung für die Zuweisung einer Funktion an einen Methodennamen.

+
+
Syntax

+
+
var obj = {
+  property( parameters… ) {},
+  *generator( parameters… ) {},
+// also with computed keys:
+  [property]( parameters… ) {},
+  *[generator]( parameters… ) {},
+// compare ES5 getter/setter syntax:
+  get property() {},
+  set property(value) {}
+};
+

+
+
Beschreibung

+
+
Die Syntax der Kurzschreibweise ähnelt der in ECMAScript 2015 eingeführten Syntax der getter und setter.

+
+
Gegeben sei der folgende Quellcode:

+
+
var obj = {
+  foo: function() {},
+  bar: function() {}
+};

+
+
Jetzt können Sie das abkürzen zu:

+
+
var obj = {
+  foo() {},
+  bar() {}
+};

+
+

+
Hinweis: Die kurze Syntax benutzt benamte Funktionen statt anonymen Funktionen (wie in ...foo: function() {}...). Benamte Funktionen können sich vom Funktionskörper aus aufrufen (für anonyme Funktionen ist das unmöglich, weil sie keinen Bezeichner haben). Für mehr Details, siehe {{jsxref("Operators/function","function","#Beispiele")}}.

+

+
+
Kurze Generatormethoden

+
+
Generatormethoden können mit der kurzen Syntax ebenfalls definiert werden. Zu beachten ist, dass der Stern (*) in der kurzen Syntax nur vor dem Namen der Generatoreigenschaft geschrieben werden kann. * g(){} funktioniert, g *(){} funktioniert nicht.

+
+
// Using a named property (pre-ES2015)
+var obj2 = {
+  g: function*() {
+    var index = 0;
+    while(true)
+      yield index++;
+  }
+};
+
+// The same object using shorthand syntax
+var obj2 = {
+  * g() {
+    var index = 0;
+    while(true)
+      yield index++;
+  }
+};
+
+var it = obj2.g();
+console.log(it.next().value); // 0
+console.log(it.next().value); // 1

+
+
Methodendefinitionen die nicht konstruiert werden können

+
+
Alle Methodendefinitionen die keine Konstruktoren sind werden einen {{jsxref("TypeError")}} erzeugen,  wenn man versucht sie zu instantieren.

+
+
var obj = {
+  method() {},
+};
+new obj.method; // TypeError: obj.method is not a constructor
+
+var obj = {
+  * g() {}
+};
+new obj.g; // TypeError: obj.g is not a constructor (changed in ES2016)
+

+
+
Beispiele

+
+
Ein einfacher Testfall

+
+
var obj = {
+  a : "foo",
+  b(){ return this.a; }
+};
+console.log(obj.b()); // "foo"
+

+
+
Berechnete Eigenschaftsnamen

+
+
Die Kurzschreib-Syntax unterstützt auch berechnete Eigenschaftsnamen.

+
+
var bar = {
+  foo0 : function (){return 0;},
+  foo1(){return 1;},
+  ["foo" + 2](){return 2;},
+};
+
+console.log(bar.foo0()); // 0
+console.log(bar.foo1()); // 1
+console.log(bar.foo2()); // 2

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('ES2015', '#sec-method-definitions', 'Method definitions')}}{{Spec2('ES2015')}}Initiale Definition.
{{SpecName('ES7', '#sec-method-definitions', 'Method definitions')}}{{Spec2('ES7')}}Geändert, dass Generatormethoden ebenfalls nicht initialisierbar sind und einen Fehler schmeißen, wenn sie mit new eingesetzt werden.
{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}{{Spec2('ESDraft')}} 

+
+
Browserkompatibilität

+
+
{{CompatibilityTable}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Method definition shorthand{{CompatChrome("39")}}{{CompatGeckoDesktop("34")}}{{CompatNo}}{{CompatOpera("26")}}{{CompatNo}}
Generator methods are not constructable (ES2016){{CompatUnknown}}{{CompatGeckoDesktop("43")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+   
+  
+ 
+
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Method definition shorthand{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("34")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Generator methods are not constructable (ES2016){{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("43")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}

+

+
+
SpiderMonkey spezifische Hinweise

+
+
    
+ 
  • Vor SpiderMonkey 38 {{geckoRelease(38)}} waren "get" und "set" nicht valide Namen für Generatormethoden. Das wurde in {{bug(1073809)}} behoben.
    • 
+ 
  • Vor SpiderMonkey 41 {{geckoRelease(41)}} mussten geschweifte Klammern für Methoden nicht notwendiger weise benutzt werden. Jetzt sind sie vorausgesetzt, um konform zur ES2015 Spezifikation zu sein. Es wird ein {{jsxref("SyntaxError")}} in dieser und späteren Versionen erzeugt ({{bug(1150855)}}).
+  
    var o = {x() 12}; // SyntaxError
    
+ 
    • 
+ 
  • Die Restriktion, dass Generatormethoden Konstuktoren sind wurde in SpiderMonkey 41 {{geckoRelease(41)}} implementiert. Dazu siehe auch {{bug(1059908)}} und {{bug(1166950)}}
    • 
+

+
+
See also

+
+
diff --git a/files/de/web/javascript/reference/functions/methoden_definitionen/index.html b/files/de/web/javascript/reference/functions/methoden_definitionen/index.html
deleted file mode 100644
index bf4d432627..0000000000
--- a/files/de/web/javascript/reference/functions/methoden_definitionen/index.html
+++ /dev/null
@@ -1,230 +0,0 @@
----
-title: Methoden Definitionen
-slug: Web/JavaScript/Reference/Functions/Methoden_Definitionen
-tags:
-  - ECMAScript 2015
-  - Funktionen
-  - JavaScript
-  - Objekte
-  - Syntax
-translation_of: Web/JavaScript/Reference/Functions/Method_definitions
----
-
{{JsSidebar("Functions")}}

-
-
Beginnend mit ECMAScript 2015 wurde eine kürzere Syntax für Methodendefinitionen in Objekt Initialisierungen eingeführt. Es ist eine Abkürzung für die Zuweisung einer Funktion an einen Methodennamen.

-
-
Syntax

-
-
var obj = {
-  property( parameters… ) {},
-  *generator( parameters… ) {},
-// also with computed keys:
-  [property]( parameters… ) {},
-  *[generator]( parameters… ) {},
-// compare ES5 getter/setter syntax:
-  get property() {},
-  set property(value) {}
-};
-

-
-
Beschreibung

-
-
Die Syntax der Kurzschreibweise ähnelt der in ECMAScript 2015 eingeführten Syntax der getter und setter.

-
-
Gegeben sei der folgende Quellcode:

-
-
var obj = {
-  foo: function() {},
-  bar: function() {}
-};

-
-
Jetzt können Sie das abkürzen zu:

-
-
var obj = {
-  foo() {},
-  bar() {}
-};

-
-

-
Hinweis: Die kurze Syntax benutzt benamte Funktionen statt anonymen Funktionen (wie in ...foo: function() {}...). Benamte Funktionen können sich vom Funktionskörper aus aufrufen (für anonyme Funktionen ist das unmöglich, weil sie keinen Bezeichner haben). Für mehr Details, siehe {{jsxref("Operators/function","function","#Beispiele")}}.

-

-
-
Kurze Generatormethoden

-
-
Generatormethoden können mit der kurzen Syntax ebenfalls definiert werden. Zu beachten ist, dass der Stern (*) in der kurzen Syntax nur vor dem Namen der Generatoreigenschaft geschrieben werden kann. * g(){} funktioniert, g *(){} funktioniert nicht.

-
-
// Using a named property (pre-ES2015)
-var obj2 = {
-  g: function*() {
-    var index = 0;
-    while(true)
-      yield index++;
-  }
-};
-
-// The same object using shorthand syntax
-var obj2 = {
-  * g() {
-    var index = 0;
-    while(true)
-      yield index++;
-  }
-};
-
-var it = obj2.g();
-console.log(it.next().value); // 0
-console.log(it.next().value); // 1

-
-
Methodendefinitionen die nicht konstruiert werden können

-
-
Alle Methodendefinitionen die keine Konstruktoren sind werden einen {{jsxref("TypeError")}} erzeugen,  wenn man versucht sie zu instantieren.

-
-
var obj = {
-  method() {},
-};
-new obj.method; // TypeError: obj.method is not a constructor
-
-var obj = {
-  * g() {}
-};
-new obj.g; // TypeError: obj.g is not a constructor (changed in ES2016)
-

-
-
Beispiele

-
-
Ein einfacher Testfall

-
-
var obj = {
-  a : "foo",
-  b(){ return this.a; }
-};
-console.log(obj.b()); // "foo"
-

-
-
Berechnete Eigenschaftsnamen

-
-
Die Kurzschreib-Syntax unterstützt auch berechnete Eigenschaftsnamen.

-
-
var bar = {
-  foo0 : function (){return 0;},
-  foo1(){return 1;},
-  ["foo" + 2](){return 2;},
-};
-
-console.log(bar.foo0()); // 0
-console.log(bar.foo1()); // 1
-console.log(bar.foo2()); // 2

-
-
Spezifikationen

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
SpezifikationStatusKommentar
{{SpecName('ES2015', '#sec-method-definitions', 'Method definitions')}}{{Spec2('ES2015')}}Initiale Definition.
{{SpecName('ES7', '#sec-method-definitions', 'Method definitions')}}{{Spec2('ES7')}}Geändert, dass Generatormethoden ebenfalls nicht initialisierbar sind und einen Fehler schmeißen, wenn sie mit new eingesetzt werden.
{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}{{Spec2('ESDraft')}} 

-
-
Browserkompatibilität

-
-
{{CompatibilityTable}}

-
-

-
- 
-  
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-  
- 
-
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Method definition shorthand{{CompatChrome("39")}}{{CompatGeckoDesktop("34")}}{{CompatNo}}{{CompatOpera("26")}}{{CompatNo}}
Generator methods are not constructable (ES2016){{CompatUnknown}}{{CompatGeckoDesktop("43")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}

-

-
-

-
- 
-  
-   
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-   
-  
- 
-
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Method definition shorthand{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("34")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Generator methods are not constructable (ES2016){{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("43")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}

-

-
-
SpiderMonkey spezifische Hinweise

-
-
    
- 
  • Vor SpiderMonkey 38 {{geckoRelease(38)}} waren "get" und "set" nicht valide Namen für Generatormethoden. Das wurde in {{bug(1073809)}} behoben.
    • 
- 
  • Vor SpiderMonkey 41 {{geckoRelease(41)}} mussten geschweifte Klammern für Methoden nicht notwendiger weise benutzt werden. Jetzt sind sie vorausgesetzt, um konform zur ES2015 Spezifikation zu sein. Es wird ein {{jsxref("SyntaxError")}} in dieser und späteren Versionen erzeugt ({{bug(1150855)}}).
-  
    var o = {x() 12}; // SyntaxError
    
- 
    • 
- 
  • Die Restriktion, dass Generatormethoden Konstuktoren sind wurde in SpiderMonkey 41 {{geckoRelease(41)}} implementiert. Dazu siehe auch {{bug(1059908)}} und {{bug(1166950)}}
    • 
-

-
-
See also

-
-
diff --git a/files/de/web/javascript/reference/functions/pfeilfunktionen/index.html b/files/de/web/javascript/reference/functions/pfeilfunktionen/index.html
deleted file mode 100644
index a29b5ea3cf..0000000000
--- a/files/de/web/javascript/reference/functions/pfeilfunktionen/index.html
+++ /dev/null
@@ -1,360 +0,0 @@
----
-title: Pfeilfunktionen
-slug: Web/JavaScript/Reference/Functions/Pfeilfunktionen
-tags:
-  - ECMAScript 2015
-  - Functions
-  - Intermediate
-  - JavaScript
-  - Reference
-translation_of: Web/JavaScript/Reference/Functions/Arrow_functions
----
-
{{jsSidebar("Functions")}}

-
-
Der Ausdruck einer Pfeilfunktion hat eine kürzere Syntax als ein Funktionsausdruck und hat kein eigenes this, arguments, super, oder new.target. Solche Funktionsausdrücke sind am besten für Funktionen, die nicht als Methode genutzt werden, geeignet und können nicht als Konstruktoren verwendet werden.

-
-
{{EmbedInteractiveExample("pages/js/functions-arrow.html")}}

-
-
Syntax

-
-
Basis Syntax

-
-
(param1, param2, …, paramN) => { statements }
-(param1, param2, …, paramN) => expression
-// gleich zu: => { return expression; }
-
-// Klammern sind optional, wenn nur ein Parametername vorhanden ist:
-(singleParam) => { statements }
-singleParam => { statements }
-
-// Die Parameterliste für eine parameterlose Funktion muss mit einem Klammernpaar geschrieben werden
-() => { statements }
-

-
-
Fortgeschrittene Syntax

-
-
// Der Body kann eingeklammert werden, um ein Objektliteral Ausdruck zurück zu geben:
-params => ({foo: bar})
-
-// Rest Parameter und Default Parameter werden unterstützt
-(param1, param2, ...rest) => { statements }
-(param1 = defaultValue1, param2, …, paramN = defaultValueN) => {
-statements }
-
-// Destrukturierung in der Parameterliste ist ebenfalls unterstützt
-var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
-f(); // 6
-

-
-
Beschreibung

-
-
Siehe auch "ES6 In Depth: Arrow functions" on hacks.mozilla.org.

-
-
Zwei Faktoren haben die Einführung von Pfeilfunktionen beeinflusst: kürzere Funktionen und dass this nicht gebunden ist.

-
-
Kürzere Funktionen

-
-
var elements = [
-  "Hydrogen",
-  "Helium",
-  "Lithium",
-  "Beryllium"
-];
-
-elements.map(function(element) {
-  return element.length
-}); // [8, 6, 7, 9]
-
-elements.map(element => {
-  return element.length
-}); // [8, 6, 7, 9]
-
-elements.map(({length}) => length); // [8, 6, 7, 9]

-
-
Keine Bindung von this

-
-
Vor (der Einführung von) Pfeilfunktionen definierte jede Funktion ihren eigenen this-Wert (d.h. ein neues Objekt im Falle eines Konstruktors; in strict mode Funktionsaufrufen nicht definiert; bzw. das kontextuelle Objekt, wenn die Funktion als eine "Objekt-Methode" aufgerufen wurde, usw.). Dies stellte sich innerhalb eines objektorientierten Programmierstils als lästig heraus.

-
-
function Person() {
-  // Der Person() Konstruktor definiert `this` als Instanz von sich selbst.
-  this.age = 0;
-
-  setInterval(function growUp() {
-    // Im nicht Strict Modus, definiert die growUp() Funktion `this`
-    // als das globale Objekt (weil das der Ort ist, an dem growUp() ausgeführt wird),
-    // das sich von dem `this`, welches vom Person() Konstruktor definiert wurde unterscheidet.
-    this.age++;
-  }, 1000);
-}
-
-var p = new Person();

-
-
In ECMAScript 3/5 konnte dies durch Zuweisung des Wertes von this an eine Variable, welche umschlossen werden konnte, behoben werden.

-
-
function Person() {
-  var that = this;
-  that.age = 0;
-
-  setInterval(function growUp() {
-    // Der Rückruf bezieht sich auf jene `that`-Variable,
-    // deren Wert das zu erwartende Objekt ist.
-    that.age++;
-  }, 1000);
-}

-
-
Alternativ könnte eine gebundene Funktion erstellt werden, sodass der passende this-Wert an die growUp()-Funktion übergeben würde.

-
-
Eine Pfeilfunktion erstellt keinen eigenen this Kontext, wodurch this die ursprüngliche Bedeutung des umschließenden Kontextes trägt. Somit funktioniert der folgende Code wie erwartet.

-
-
function Person(){
-  this.age = 0;
-
-  setInterval(() => {
-    this.age++; // |this| bezieht sich entsprechend auf das Person-Objekt
-  }, 1000);
-}
-
-var p = new Person();

-
-
Zusammenhang mit dem Strict Mode

-
-
Vorausgesetzt, dass this aus dem umschließenden lexikalischen Kontext kommt, werden Strict Mode Regeln bezüglich this einfach ignoriert.

-
-
var f = () => {'use strict'; return this};
-f() === window; // oder das globale Objekt

-
-
Die restlichen strict mode Regeln verhalten sich normal.

-
-
Aufruf durch call oder apply

-
-
Da this in Pfeilfunktionen nicht gebunden ist, können call() oder apply() Methoden nur Argumente übergeben; this wird ignoriert:

-
-
var adder = {
-  base : 1,
-
-  add : function(a) {
-    var f = v => v + this.base;
-    return f(a);
-  },
-
-  addThruCall: function(a) {
-    var f = v => v + this.base;
-    var b = {
-      base : 2
-    };
-
-    return f.call(b, a);
-  }
-};
-
-console.log(adder.add(1));         // Dies würde 2 ausgeben
-console.log(adder.addThruCall(1)); // Dies würde nach wie vor 2 ausgeben

-
-
Keine Bindung von Argumenten

-
-
Pfeilfunktionen haben kein eigenes arguments Objekt. Somit ist arguments einfach eine Referenz auf den Namen innerhalb des umschließenden Geltungsbereichs (scope).

-
-
var arguments = [1, 2, 3];
-var arr = () => arguments[0];
-
-arr(); // 1
-
-function foo(n) {
-  var f = () => arguments[0] + n; // implizite Argumenten-Bindung von foo
-  return f();
-}
-
-foo(1); // 2

-
-
In den meisten Fällen sind Rest Parameters eine gute Alternative zum Einsatz des arguments Objektes:

-
-
function foo(n) {
-  var f = (...args) => args[0] + n;
-  return f(10);
-}
-
-foo(1); // 11

-
-
Pfeilfunktionen als Methoden

-
-
Wie angegeben, sind Ausdrücke von Pfeilfunktionen am besten geeignet für nicht-methodische Funktionen. Man sehe, was geschieht, wenn versucht wird, sie als Methoden zu verwenden.

-
-
'use strict';
-
-var obj = {
-  i: 10,
-  b: () => console.log(this.i, this),
-  c: function() {
-    console.log( this.i, this)
-  }
-}
-obj.b(); // gibt undefined, Window {...} aus (oder das globale Objekt)
-obj.c(); // gibt 10, Object {...} aus

-
-
Pfeilfunktionen definieren (binden sozusagen) kein eigenes this. Ein anderes Beispiel, das {{jsxref("Object.defineProperty()")}} betrifft:

-
-
'use strict';
-
-var obj = {
-  a: 10
-};
-
-Object.defineProperty(obj, "b", {
-  get: () => {
-    console.log(this.a, typeof this.a, this);
-    return this.a+10; // stellt das globale Objekt 'Window' dar, 'this.a' gibt daher 'undefined' zurück
-  }
-});
-

-
-
Verwendung des new Operators

-
-
Pfeilfunktionen können nicht als Konstruktoren verwendet werden. Sie führen zu einem Fehler, wenn auf ihnen ein new angewendet wird.

-
-
var Foo = () => {};
-var foo = new Foo(); // TypeError: Foo is not a constructor
-

-
-
Einsatz der prototype Eigenschaft

-
-
Pfeilfunktionen haben keine prototype Eigenschaft.

-
-
var Foo = () => {};
-console.log(Foo.prototype); // undefined
-

-
-
Verwendung des Schlüsselwortes yield

-
-
Das yield-Schlüsselwort sollte im Körper einer Pfeilfunktion nicht verwendet werden (außer wenn dies innerhalb von darin weiter verschachtelten Funktionen erlaubt ist). Als Folge können Pfeilfunktionen nicht als Generatoren verwendet werden.

-
-
Funktionskörper

-
-
Pfeilfunktionen können entweder einen "knappen" oder einen gewöhnlichen "Blockkörper" haben.

-
-
In einem knappen Körper ist lediglich ein Ausdruck nötig und eine implizite Rückgabe wird angehängt. In einem Blockkörper muss eine explizite Rückgabe-Anweisung verwendet werden.

-
-
var func = x => x * x;
-// knappe Syntax, implizierte Rückgabe
-
-var func = (x, y) => { return x + y; };
-// mit Blockkörper, explizite Rückgabe wird benötigt
-

-
-
Rückgabe von Objekt-Literalen

-
-
Man bedenke, dass die Rückgabe von Objekt-Literalen unter Verwendung der knappen Syntax params => {object:literal} nicht so ausgeführt wird, wie man es erwarten würde:

-
-
var func = () => {  foo: 1  };
-// Der Aufruf von func() gibt undefined zurück!
-
-var func = () => {  foo: function() {}  };
-// SyntaxError: function-Anweisung erfordert einen Namen

-
-
Der Grund dafür ist, dass der Code in geschweiften Klammern ({}) als eine Sequenz von Anweisungen übersetzt wird (d.h. foo wird als Bezeichner behandelt und nicht als Schlüssel eines Objekt-Literals).

-
-
Man bedenke, das Objekt-Literal in Klammern zu setzen:

-
-
var func = () => ({ foo: 1 });

-
-
Zeilenumbruch

-
-
Pfeilfunktionen können keinen Zeilenumbruch zwischen Parametern und dem Pfeil haben.

-
-
var func = ()
-           => 1;
-// SyntaxError: Ausdruck erwartet, '=>' erhalten

-
-
Übersetzungsreihenfolge

-
-
Der Pfeil innerhalb einer Pfeilfunktion ist kein Operator. Allerdings haben Pfeilfunktionen im Vergleich zu gewöhnlichen Funktionen besondere Übersetzungsregeln, welche mit der Priorität von Operatoren (operator precedence) anders interagieren.

-
-
let callback;
-
-callback = callback || function() {}; // ok
-
-callback = callback || () => {};
-// SyntaxError: invalid arrow-function arguments
-
-callback = callback || (() => {});    // ok
-

-
-
Weitere Beispiele

-
-
// Eine leere Pfeilfunktion gibt undefined zurück
-let empty = () => {};
-
-(() => "foobar")()
-// Gibt "foobar" zurück
-// (Das ist eine Immediately Invoked Function Expression
-// siehe IIFE im Glossar
-
-var simple = a => a > 15 ? 15 : a;
-simple(16); // 15
-simple(10); // 10
-
-let max = (a, b) => a > b ? a : b;
-
-// Einfaches filtering, mapping, ... von Arrays
-
-var arr = [5, 6, 13, 0, 1, 18, 23];
-
-var sum = arr.reduce((a, b) => a + b);
-// 66
-
-var even = arr.filter(v => v % 2 == 0);
-// [6, 0, 18]
-
-var double = arr.map(v => v * 2);
-// [10, 12, 26, 0, 2, 36, 46]
-
-// Weitere knappe Zusicherungsketten (promise chains)
-promise.then(a => {
-  // ...
-}).then(b => {
-   // ...
-});
-
-// Parameterlose Pfeilfunktionen, welche visuell einfacher zu verstehen sind
-setTimeout( _ => {
-  console.log("I happen sooner");
-  setTimeout( _ => {
-    // deeper code
-    console.log("I happen later");
-  }, 1);
-}, 1);

-
-
Spezifikationen

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
SpezifikationStatusKommentar
{{SpecName('ES2015', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}{{Spec2('ES2015')}}Initiale Definition.
{{SpecName('ESDraft', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}{{Spec2('ESDraft')}} 

-
-
Browserkompatibilität

-
-

-
-
-
{{Compat("javascript.functions.arrow_functions")}}

-

-
-
Siehe auch

-
-
diff --git a/files/de/web/javascript/reference/functions/rest_parameter/index.html b/files/de/web/javascript/reference/functions/rest_parameter/index.html
deleted file mode 100644
index a529c7b1d6..0000000000
--- a/files/de/web/javascript/reference/functions/rest_parameter/index.html
+++ /dev/null
@@ -1,167 +0,0 @@
----
-title: Rest Parameter
-slug: Web/JavaScript/Reference/Functions/rest_parameter
-tags:
-  - Functions
-  - JavaScript
-  - Rest
-  - Rest Parameter
-translation_of: Web/JavaScript/Reference/Functions/rest_parameters
----
-
{{jsSidebar("Functions")}}

-
-
Mit der Rest Parameter Syntax kann man beliebig viele Parameter als Array empfangen.

-
-
{{EmbedInteractiveExample("pages/js/functions-restparameters.html")}}

-
-
-
-
Syntax

-
-
function f(a, b, ...restArgs) {
-  // ...
-}
-

-
-
Beschreibung

-
-
Wenn vor dem letzten Parameter einer Funktion ... steht wird aus diesem Parameter ein Array von 0 (inklusiv) bis zu restArgs.length (exklusiv), welches weitere der Funktion übergebene Parameter enthält.

-
-
Im oberen Beispiel enthält das restArgs alle weiteren Argumente außer die ersten beiden, da diese bereits von den Variablen a und b erfasst werden.

-
-
Unterschiede zwischen Rest Parametern und dem arguments Objekt

-
-
Es gibt drei Hauptunterschiede zwischen Rest Parametern und dem arguments Objekt:

-
-
    
- 
  • Rest Parameter sind nur die jenigen, die zu einem Namen gehören (z. B. in Funktionsausdrücken formal definierte Parameter), während das arguments Objekt alle übergebenen Argumente einer Funktion enthällt.
    • 
- 
  • Das arguments Objekt ist kein echtes Array, während Rest Parameter eine Array sind, was bedeutet, dass Methoden wie sort, map, forEach oder pop direkt angewendet werden können.
    • 
- 
  • Das arguments Objekt hat zusätzliche, spezielle Funktionalität (wie die callee Eigenschaft).
    • 
-

-
-
Von arguments zu einem Array

-
-
Rest Parameter wurden eingeführt, um Standardcode zu reduzieren, welche beim Einsatz von arguments anfällt

-
-
// Before rest parameters, the following could be found:
-function f(a, b) {
-  var args = Array.prototype.slice.call(arguments, f.length);
-
-  // …
-}
-
-// to be equivalent of
-
-function f(a, b, ...args) {
-
-}
-

-
-
Destrukturierte Rest Parameter

-
-
Rest Parameter können destrukturiert werden, was bedeutet, dass sie in einzelne Variablen entpackt werden können. Siehe destrukturierende Zuweisung.

-
-
function f(...[a, b, c]) {
-  return a + b + c;
-}
-
-f(1)          // NaN (b and c are undefined)
-f(1, 2, 3)    // 6
-f(1, 2, 3, 4) // 6 (the fourth parameter is not destructured)

-
-
Beispiele

-
-
Weil theArgs ein Array ist, ist die Anzahl der Argumente mit der length Eigenschaft gegeben:

-
-
function fun1(...theArgs) {
-  console.log(theArgs.length);
-}
-
-fun1();  // 0
-fun1(5); // 1
-fun1(5, 6, 7); // 3
-

-
-
Im nächsten Beispiel wird ein Rest Parameter eingesetzt, um alle Argumente außer dem ersten in einem Array zu sammeln. Jedes wird dann mit dem ersten Argument multipliziert und als Array zurückgegeben:

-
-
function multiply(multiplier, ...theArgs) {
-  return theArgs.map(function(element) {
-    return multiplier * element;
-  });
-}
-
-var arr = multiply(2, 1, 2, 3);
-console.log(arr); // [2, 4, 6]
-

-
-
Das folgende Beispiel zeigt, dass Array Methoden auf Rest Parameter jedoch nicht auf arguments Objekten eingesetzt werden können:

-
-
function sortRestArgs(...theArgs) {
-  var sortedArgs = theArgs.sort();
-  return sortedArgs;
-}
-
-console.log(sortRestArgs(5, 3, 7, 1)); // shows 1, 3, 5, 7
-
-function sortArguments() {
-  var sortedArgs = arguments.sort();
-  return sortedArgs; // this will never happen
-}
-
-// throws a TypeError: arguments.sort is not a function
-console.log(sortArguments(5, 3, 7, 1));
-

-
-
Um Array Methoden auf einem arguments Objekt zu benutzen, muss dieses in ein echtes Array konvertiert werden.

-
-
function sortArguments() {
-  var args = Array.from(arguments);
-  var sortedArgs = args.sort();
-  return sortedArgs;
-}
-console.log(sortArguments(5, 3, 7, 1)); // 1, 3, 5, 7
-

-
-
Spezifikationen

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
SpezifikationStatusKommentar
{{SpecName('ES6', '#sec-function-definitions', 'Function Definitions')}}{{Spec2('ES6')}}Initiale Definition
{{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}}{{Spec2('ESDraft')}} 

-
-
Browserkompatibilität

-
-

-

-
-
-
{{Compat("javascript.functions.rest_parameters")}}

-

-

-
-
Siehe auch

-
-
diff --git a/files/de/web/javascript/reference/functions/rest_parameters/index.html b/files/de/web/javascript/reference/functions/rest_parameters/index.html
new file mode 100644
index 0000000000..a529c7b1d6
--- /dev/null
+++ b/files/de/web/javascript/reference/functions/rest_parameters/index.html
@@ -0,0 +1,167 @@
+---
+title: Rest Parameter
+slug: Web/JavaScript/Reference/Functions/rest_parameter
+tags:
+  - Functions
+  - JavaScript
+  - Rest
+  - Rest Parameter
+translation_of: Web/JavaScript/Reference/Functions/rest_parameters
+---
+
{{jsSidebar("Functions")}}

+
+
Mit der Rest Parameter Syntax kann man beliebig viele Parameter als Array empfangen.

+
+
{{EmbedInteractiveExample("pages/js/functions-restparameters.html")}}

+
+
+
+
Syntax

+
+
function f(a, b, ...restArgs) {
+  // ...
+}
+

+
+
Beschreibung

+
+
Wenn vor dem letzten Parameter einer Funktion ... steht wird aus diesem Parameter ein Array von 0 (inklusiv) bis zu restArgs.length (exklusiv), welches weitere der Funktion übergebene Parameter enthält.

+
+
Im oberen Beispiel enthält das restArgs alle weiteren Argumente außer die ersten beiden, da diese bereits von den Variablen a und b erfasst werden.

+
+
Unterschiede zwischen Rest Parametern und dem arguments Objekt

+
+
Es gibt drei Hauptunterschiede zwischen Rest Parametern und dem arguments Objekt:

+
+
    
+ 
  • Rest Parameter sind nur die jenigen, die zu einem Namen gehören (z. B. in Funktionsausdrücken formal definierte Parameter), während das arguments Objekt alle übergebenen Argumente einer Funktion enthällt.
    • 
+ 
  • Das arguments Objekt ist kein echtes Array, während Rest Parameter eine Array sind, was bedeutet, dass Methoden wie sort, map, forEach oder pop direkt angewendet werden können.
    • 
+ 
  • Das arguments Objekt hat zusätzliche, spezielle Funktionalität (wie die callee Eigenschaft).
    • 
+

+
+
Von arguments zu einem Array

+
+
Rest Parameter wurden eingeführt, um Standardcode zu reduzieren, welche beim Einsatz von arguments anfällt

+
+
// Before rest parameters, the following could be found:
+function f(a, b) {
+  var args = Array.prototype.slice.call(arguments, f.length);
+
+  // …
+}
+
+// to be equivalent of
+
+function f(a, b, ...args) {
+
+}
+

+
+
Destrukturierte Rest Parameter

+
+
Rest Parameter können destrukturiert werden, was bedeutet, dass sie in einzelne Variablen entpackt werden können. Siehe destrukturierende Zuweisung.

+
+
function f(...[a, b, c]) {
+  return a + b + c;
+}
+
+f(1)          // NaN (b and c are undefined)
+f(1, 2, 3)    // 6
+f(1, 2, 3, 4) // 6 (the fourth parameter is not destructured)

+
+
Beispiele

+
+
Weil theArgs ein Array ist, ist die Anzahl der Argumente mit der length Eigenschaft gegeben:

+
+
function fun1(...theArgs) {
+  console.log(theArgs.length);
+}
+
+fun1();  // 0
+fun1(5); // 1
+fun1(5, 6, 7); // 3
+

+
+
Im nächsten Beispiel wird ein Rest Parameter eingesetzt, um alle Argumente außer dem ersten in einem Array zu sammeln. Jedes wird dann mit dem ersten Argument multipliziert und als Array zurückgegeben:

+
+
function multiply(multiplier, ...theArgs) {
+  return theArgs.map(function(element) {
+    return multiplier * element;
+  });
+}
+
+var arr = multiply(2, 1, 2, 3);
+console.log(arr); // [2, 4, 6]
+

+
+
Das folgende Beispiel zeigt, dass Array Methoden auf Rest Parameter jedoch nicht auf arguments Objekten eingesetzt werden können:

+
+
function sortRestArgs(...theArgs) {
+  var sortedArgs = theArgs.sort();
+  return sortedArgs;
+}
+
+console.log(sortRestArgs(5, 3, 7, 1)); // shows 1, 3, 5, 7
+
+function sortArguments() {
+  var sortedArgs = arguments.sort();
+  return sortedArgs; // this will never happen
+}
+
+// throws a TypeError: arguments.sort is not a function
+console.log(sortArguments(5, 3, 7, 1));
+

+
+
Um Array Methoden auf einem arguments Objekt zu benutzen, muss dieses in ein echtes Array konvertiert werden.

+
+
function sortArguments() {
+  var args = Array.from(arguments);
+  var sortedArgs = args.sort();
+  return sortedArgs;
+}
+console.log(sortArguments(5, 3, 7, 1)); // 1, 3, 5, 7
+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('ES6', '#sec-function-definitions', 'Function Definitions')}}{{Spec2('ES6')}}Initiale Definition
{{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}}{{Spec2('ESDraft')}} 

+
+
Browserkompatibilität

+
+

+

+
+
+
{{Compat("javascript.functions.rest_parameters")}}

+

+

+
+
Siehe auch

+
+
diff --git a/files/de/web/javascript/reference/global_objects/array/prototypen/index.html b/files/de/web/javascript/reference/global_objects/array/prototypen/index.html
deleted file mode 100644
index dcab74024e..0000000000
--- a/files/de/web/javascript/reference/global_objects/array/prototypen/index.html
+++ /dev/null
@@ -1,183 +0,0 @@
----
-title: Array.Prototypen
-slug: Web/JavaScript/Reference/Global_Objects/Array/Prototypen
-tags:
-  - Array
-  - JavaScript
-  - Property
-translation_of: Web/JavaScript/Reference/Global_Objects/Array/prototype
----
-
{{JSRef}}

-
-
Die Array.prototype (Anordnung.Muster) Eigenschaft repräsentiert eine Schablone (Prototypen) des {{jsxref("Array")}} Konstrukteurs und erlaubt dir neue Eigenschaften und Methoden zu allen Array Objekten hinzuzufügen.

-
-
// Wenn JavaScript eine first() Methode vom Grundsatz nicht unterstützt
-// füge eine neue Methode als Rückgabewert des ersten Elements als Array zurück
-
-if (!Array.prototype.first) {
-  Array.prototype.first = function() {
-    return this[0];
-  }
-}

-
-
Beschreibung

-
-
{{jsxref("Array")}} Instanzen erben vom Array.prototype. Wie mit allen Konstrukteuren kannst du das Konstrukteur Protoypen Objekt ändern, um alle {{jsxref("Array")}} Instanzen zu verändern. Ein Beispiel: du kannst neue Methoden und Eigenschaften zu allen Array-Objekten hinzufügen und diese damit erweitern. Dies wird zum Beispiel für {{Glossary("Polyfill", "polyfilling")}} genutzt.

-
-
Ganz nebenbei: ein Array-Protoyp selbst ist ein {{jsxref("Array")}}:

-
-
Array.isArray(Array.prototype); // true
-

-
-
{{js_property_attributes(0, 0, 0)}}

-
-
Eigenschaften

-
-

- 
Array.prototype.constructor

- 
Beschreibt die Funktion um ein Objekt-Prototypen zu erstellen.

- 
{{jsxref("Array.prototype.length")}}

- 
Gibt die Nummer an Elementen in einem Array wieder.

- 
{{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}

- 
Eine Symbol-beinhaltende Eigenschaft beschreibt das ausschließen von einem mit with eingebundenden Geltungsbereich.

-

-
-
Methoden

-
-
Mutationsmethoden

-
-
Diese Methoden verändern ein Array:

-
-

- 
{{jsxref("Array.prototype.copyWithin()")}}

- 
Kopiert einen Teil eines Array Elements innerhalb eines Array.

- 
{{jsxref("Array.prototype.fill()")}}

- 
Füllt alle Elemente eines Arrays von einem Start-Index zu einem Ende-Index mit einem festen Wert.

- 
{{jsxref("Array.prototype.pop()")}}

- 
Entfernt das letzte Element von einem Array und gibt dieses Element als Rückgabewert aus.

- 
{{jsxref("Array.prototype.push()")}}

- 
Fügt eins oder mehrere Elemente zu dem Ende des Arrays hinzu und gibt die neue Länge des Arrays zurück

- 
{{jsxref("Array.prototype.reverse()")}}

- 
Dreht die Reihenfolge der Elemente in einem Array um - das erste Element wird das letzte und das letzte Element wird das erste.

- 
{{jsxref("Array.prototype.shift()")}}

- 
Entfernt das erste Element innerhalb eines Array und gibt das Element als Rückgabewert aus.

- 
{{jsxref("Array.prototype.sort()")}}

- 
Sortiert innerhalb eines Arrays die Elemente und gibt das sortierte Array aus.

- 
{{jsxref("Array.prototype.splice()")}}

- 
Fügt Elemente von einem Array hinzu und/oder entfernt diese.

- 
{{jsxref("Array.prototype.unshift()")}}

- 
Fügt ein oder mehr Elemente an erster Stelle eines Array hinzu und gibt die Länge des neuen Arrays zurück.

-

-
-
Zugriffsmethoden

-
-
Diese Methoden verändern das Array nicht und geben als Rückgabewert eine Darstellung des Arrays an.

-
-

- 
{{jsxref("Array.prototype.concat()")}}

- 
Gibt ein neues Array zusammengestellt von diesem Array und verknüpft mit anderen/ mehreren Array(s) und/ oder einem/ mehreren Wert(en).

- 
{{jsxref("Array.prototype.includes()")}}

- 
Überprüft, ob ein Array ein bestimmtes Element enthält und gibt als Rückgabewert true oder false an.

- 
{{jsxref("Array.prototype.indexOf()")}}

- 
Gibt die erste Stelle (Index) eines einzelnen, dem beschriebenen, Elements innerhalb eines Array an. Wenn das Element nicht gefunden wurde gibt er -1 zurück.

- 
{{jsxref("Array.prototype.join()")}}

- 
Verbindet alle Elemente eines Arrays zu einem String.

- 
{{jsxref("Array.prototype.lastIndexOf()")}}

- 
Gibt den letzten (höchsten) Index des beschriebenen Elements innerhalb eines Arrays aus, oder -1, wenn nichts gefunden wurde.

- 
{{jsxref("Array.prototype.slice()")}}

- 
Extrahiert einen Teil eines Arrays und gibt diesen als neues Array aus.

- 
{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}}

- 
Gibt ein Array-Literal des beschriebenen Arrays zurück; du kannst diesen Wert nutzen um ein neues Array zu erstellen. Überschreibt die {{jsxref("Object.prototype.toSource()")}} Methode.

- 
{{jsxref("Array.prototype.toString()")}}

- 
Gibt einen String zurück, welcher das Array und seine Elemente beinhaltet. Überschreibt die {{jsxref("Object.prototype.toString()")}} Methode.

- 
{{jsxref("Array.prototype.toLocaleString()")}}

- 
Gibt einen lokalen String zurück, welcher das Array und seine Elemente beschreibt. Überschreibt die {{jsxref("Object.prototype.toLocaleString()")}} Methode.

-

-
-
Zählmethoden

-
-
Einige Methoden nehmen als Argument eine Funktion an und führen diese während des Aufrufs des Arrays aus. Wenn diese Methoden aufgerufen werden, wird die Länge (length) des Arrays abgetastet und jedes Element außerhalb der dieser Länge innerhalb eines nicht aufgerufenen Callbacks hinzugefügt. Andere Änderungen zu einem Array (setzen eines Wertes oder das Löschen eines Elements) könnten Auswirkungen auf das Ergebnis der Operation haben, wenn die Methode das veränderte Element im Nachhinein besucht. Während das spezielle Verhalten dieser Methoden in einem solchen Fall gut definiert sind, solltest du dich dennoch nicht darauf verlassen, damit du andere, die deinen möglicherweise lesen - nicht verwirrt werden. Wenn du das Array verändern musst, solltest du das veränderte Array in ein neu erstelltes Array packen.

-
-

- 
{{jsxref("Array.prototype.entries()")}}

- 
Gibt ein neues Array Zähl Objekt (Array Iterator Object) zurück, welches das key/value Paar für jeden Index in dem Array innehält.

- 
{{jsxref("Array.prototype.every()")}}

- 
Gibt true zurück, wenn alle Elemente in diesem Array die zu testende Funktion bestehen.

- 
{{jsxref("Array.prototype.filter()")}}

- 
Erstellt ein neues Array mit allen Elementen dieses Arrays für welches die Filter-Funktion innerhalb den Rückgabewert true benutzt.

- 
{{jsxref("Array.prototype.find()")}}

- 
Gibt den ersten gefundenen Wert innerhalb eines Arrays wieder, wenn ein Element innerhalb des Arrays die definierte Test-Funktion besteht oder undefined wenn nichts gefunden wurde.

- 
{{jsxref("Array.prototype.findIndex()")}}

- 
Gibt den gefundenen Index im Array an, wenn ein Element in dem Array die angegebene Test-Funktion besteht - oder -1, wenn nichts gefunden wurde.

- 
{{jsxref("Array.prototype.forEach()")}}

- 
Ruft eine Funktion für jedes Element in einem Array auf.

- 
{{jsxref("Array.prototype.keys()")}}

- 

- 
Gibt einen neuen Array Iterator (Zeiger) aus, welcher die Schlüssel für jeden Index innerhalb des Arrays beinhaltet.

- 

- 
{{jsxref("Array.prototype.map()")}}

- 
Erstellt ein neues Array mit den Ergebnissen der ausgeführten definierten Funktion an jedem Element in diesem Array.

- 
{{jsxref("Array.prototype.reduce()")}}

- 
Reduziert das Array auf einen einzigen Wert, indem es jeweils zwei Elemente durch die angegebene Funktion ausführt. Optional: als zweiten Paramater einen Startwert angeben.

- 
{{jsxref("Array.prototype.reduceRight()")}}

- 
Reduziert das Array auf einen einzigen Wert, indem es jeweils zwei Elemente durch die angegebene Funktion ausführt (von rechts nach links). Optional: als zweiten Paramater einen Startwert angeben.

- 
{{jsxref("Array.prototype.some()")}}

- 

- 
Gibt true zurück, wenn mindestens ein Element in diesem Array den Test der definierten Funktion besteht.

- 

- 
{{jsxref("Array.prototype.values()")}}

- 
Gibt einen neues Array Iterator Objekt zurück, welches die Werte für jeden Index in dem Array beinhaltet.

- 
{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}}

- 
Gibt einen neues Array Iterator Objekt zurück, welches die Werte für jeden Index in dem Array beinhaltet.

-

-
-
Generische Methoden (kein Standard)

-
-
Vielen Methoden von den JavaScript Array Objekten sind für die allgemeine Anwendung an allem Objekten entwickelt wurden, welche "aussehen wie" Arrays. Der Grund ist, dass sie an allen Objekten angewandt werden könne, welche eine Längen-Eigenschaft besitzen, und welche nützlicherweise eine numerische Eigenschaft benennen (wie mit der array[5] Indizierung). Einige Methoden, solche wie {{jsxref("Array.join", "join")}}, lesen nur die Länge (length) und numerische Eigenschaften von dem Objekt an welches sie angewandt werden. Andere, wie {{jsxref("Array.reverse", "reverse")}}, erfordern eine Veränderung der numerischen Objekt- und Längen-Eigenschaften; diese Methoden können deshalb nicht von Objekten wie {{jsxref("String")}} aufgerufen werden, welche das künstliche Setzen ihrer Längen- (length)  oder numerischen Eigenschaft nicht erlauben.

-
-
Spezifikationen

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
SpezifikationStatusKommentar
{{SpecName('ES1')}}{{Spec2('ES1')}}Initiale Definition.
{{SpecName('ES5.1', '#sec-15.4.3.1', 'Array.prototype')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-array.prototype', 'Array.prototype')}}{{Spec2('ES6')}}Hinzugefügt der copyWithin(), fill(), entries(), keys(), values(), find(), findIndex() Methoden.
{{SpecName('ES7', '#sec-array.prototype', 'Array.prototype')}}{{Spec2('ES7')}}Hinzugefügt der includes() Methode.

-
-
Browserkompatibilität

-
-

-
-
-
{{Compat("javascript.builtins.Array.prototype")}}

-

-
-
Siehe auch

-
-
    
- 
  • {{jsxref("Array")}}
    • 
- 
  • {{jsxref("Function.prototype")}}
    • 
-

diff --git a/files/de/web/javascript/reference/global_objects/arraybuffer/prototype/index.html b/files/de/web/javascript/reference/global_objects/arraybuffer/prototype/index.html
deleted file mode 100644
index ee766c3529..0000000000
--- a/files/de/web/javascript/reference/global_objects/arraybuffer/prototype/index.html
+++ /dev/null
@@ -1,69 +0,0 @@
----
-title: ArrayBuffer.prototype
-slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype
-tags:
-  - ArrayBuffer
-  - JavaScript
-  - Property
-translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer
-translation_of_original: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype
----
-
{{JSRef}}

-
-
Die ArrayBuffer.prototype Eigenschaft repräsentiert den Prototyp für das {{jsxref("ArrayBuffer")}} Objekt.

-
-
{{js_property_attributes(0,0,0)}}

-
-
Beschreibung

-
-
ArrayBuffer Instanzen erben von ArrayBuffer.prototype. Wie bei allen Konstruktoren, kann der Prototype des Konstruktorobjekts geändert werden, um Änderungen für alle ArrayBuffer Instanzen zu übernehmen.

-
-
Eigenschaften

-
-

- 
ArrayBuffer.prototype.constructor

- 
Spezifiziert die Funktion, die das Prototypeobjekt erstellt. Der Initialwert ist der eingebaute Standard-ArrayBuffer-Konstruktor.

- 
{{jsxref("ArrayBuffer.prototype.byteLength")}} {{readonlyInline}}

- 
Die größe, in Bytes, des Arrays. Dieser wird bei der Erstellung des Arrays ermittelt und kan nicht geändert werden.

-

-
-
Methoden

-
-

- 
{{jsxref("ArrayBuffer.prototype.slice()")}}

- 
Gibt einen neuen ArrayBuffer zurück, welcher eine Kopie der Bytes des eigentlichen ArrayBuffer einthält. Die Kopie geht von begin (inklusiv) bis end (exclusiv). Wenn einer der Werte negativ ist, referenziert er auf den Index vom Ende des Arrays an und nicht vom Beginn des Arrays.

-

-
-
Spezifikationen

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
SpzifikationStatusKommentar
{{SpecName('ES6', '#sec-arraybuffer.prototype', 'ArrayBuffer.prototype')}}{{Spec2('ES6')}}Initiale Definition.
{{SpecName('ESDraft', '#sec-arraybuffer.prototype', 'ArrayBuffer.prototype')}}{{Spec2('ESDraft')}} 

-
-
Browserkompatibilität

-
-
-
-
{{Compat("javascript.builtins.ArrayBuffer.prototype")}}

-
-
Siehe auch

-
-
    
- 
  • {{jsxref("ArrayBuffer")}}
    • 
-

diff --git a/files/de/web/javascript/reference/global_objects/asyncfunction/prototype/index.html b/files/de/web/javascript/reference/global_objects/asyncfunction/prototype/index.html
deleted file mode 100644
index 2dc516ca5c..0000000000
--- a/files/de/web/javascript/reference/global_objects/asyncfunction/prototype/index.html
+++ /dev/null
@@ -1,61 +0,0 @@
----
-title: AsyncFunction.prototype
-slug: Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype
-tags:
-  - Experimental
-  - JavaScript
-  - Property
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype
----
-
{{JSRef}}

-
-
Die AsyncFunction.prototype Eigenschaft repräsentiert den Prototypen des {{jsxref("AsyncFunction")}} Objektes.

-
-
Beschreibung

-
-
{{jsxref("AsyncFunction")}} Objekte erben von AsyncFunction.prototype. AsyncFunction.prototype kann nicht verändert werden.

-
-
Eigenschaften

-
-

- 
AsyncFunction.constructor

- 
Der Initialwert ist {{jsxref("AsyncFunction")}}.

- 
AsyncFunction.prototype[@@toStringTag]

- 
Gibt "AsyncFunction" zurück.

-

-
-
Spezifikationen

-
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
- 
-
SpezifikationStatusKommentar
{{SpecName('ESDraft', '#sec-async-function-constructor-prototype', 'AsyncFunction.prototype')}}{{Spec2('ESDraft')}}Initiale Definition in ES2017.

-
-
Browserkompatibilität

-
-

-
-
-
{{Compat("javascript.builtins.AsyncFunction.prototype")}}

-

-
-
Siehe auch

-
-
    
- 
  • {{jsxref("AsyncFunction")}}
    • 
- 
  • {{jsxref("Function")}}
    • 
-

diff --git a/files/de/web/javascript/reference/global_objects/atomics/notify/index.html b/files/de/web/javascript/reference/global_objects/atomics/notify/index.html
new file mode 100644
index 0000000000..5ac06d7adc
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/atomics/notify/index.html
@@ -0,0 +1,93 @@
+---
+title: Atomics.notify()
+slug: Web/JavaScript/Reference/Global_Objects/Atomics/wake
+tags:
+  - Atomics
+  - JavaScript
+  - Method
+  - Shared Memory
+translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/notify
+---
+
{{JSRef}}

+
+
Die statische Atomics.notify() Methode benachrichtigt Threads, die in einer Warteschlange schlafen.

+
+

+
Hinweis: Diese Operation funktioniert nur mit einem {{jsxref("Int32Array")}}.

+

+
+
Syntax

+
+
Atomics.notify(typedArray, index, count)
+

+
+
Parameter

+
+

+ 
typedArray

+ 
Ein geteiltes {{jsxref("Int32Array")}}.

+ 
index

+ 
Die Position im typedArray, an der aufgewacht wird.

+ 
count

+ 
Anzahl der aufzuweckenden Threads. Standard ist {{jsxref("Infinity", "+Infinity")}}.

+

+
+
Rückgabewert

+
+
Anzahl an geweckten Threads.

+
+
Exceptions

+
+
    
+ 
  • Erzeugt einen {{jsxref("TypeError")}}, wenn typedArray kein  {{jsxref("Int32Array")}} ist.
    • 
+ 
  • Erzeugt ein {{jsxref("RangeError")}}, wenn der index nicht in den Grenzen von typedArray ist.
    • 
+

+
+
Beipsiele

+
+
Gegeben ist ein Int32Array:

+
+
var sab = new SharedArrayBuffer(1024);
+var int32 = new Int32Array(sab);
+

+
+
Ein lesender Thread schläft und wartet auf Position 0, ander der Wert 0 erwartet wird. Solange diese gegeben ist, geht es nicht weiter. Immer wenn ein neuer schreibender Thread einen neuen Wert speichert, wacht der Thread. Im Anschluss ist der neue Wert an der Position 0 (123).

+
+
Atomics.wait(int32, 0, 0);
+console.log(int32[0]); // 123

+
+
Ein schreibender Thread speichert einen neuen Wert und wacht den wartenden Tread nach dem Schreiben auf.

+
+
console.log(int32[0]); // 0;
+Atomics.store(int32, 0, 123);
+Atomics.notify(int32, 0, 1);

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('ESDraft', '#sec-atomics.notify', 'Atomics.notify')}}{{Spec2('ESDraft')}}Initiale Definition in ES2017.

+
+
Browserkompatibilität

+
+
+
+
{{Compat("javascript.builtins.Atomics.notify")}}

+
+
Siehe auch

+
+
    
+ 
  • {{jsxref("Atomics")}}
    • 
+ 
  • {{jsxref("Atomics.wait()")}}
    • 
+

diff --git a/files/de/web/javascript/reference/global_objects/atomics/wake/index.html b/files/de/web/javascript/reference/global_objects/atomics/wake/index.html
deleted file mode 100644
index 5ac06d7adc..0000000000
--- a/files/de/web/javascript/reference/global_objects/atomics/wake/index.html
+++ /dev/null
@@ -1,93 +0,0 @@
----
-title: Atomics.notify()
-slug: Web/JavaScript/Reference/Global_Objects/Atomics/wake
-tags:
-  - Atomics
-  - JavaScript
-  - Method
-  - Shared Memory
-translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/notify
----
-
{{JSRef}}

-
-
Die statische Atomics.notify() Methode benachrichtigt Threads, die in einer Warteschlange schlafen.

-
-

-
Hinweis: Diese Operation funktioniert nur mit einem {{jsxref("Int32Array")}}.

-

-
-
Syntax

-
-
Atomics.notify(typedArray, index, count)
-

-
-
Parameter

-
-

- 
typedArray

- 
Ein geteiltes {{jsxref("Int32Array")}}.

- 
index

- 
Die Position im typedArray, an der aufgewacht wird.

- 
count

- 
Anzahl der aufzuweckenden Threads. Standard ist {{jsxref("Infinity", "+Infinity")}}.

-

-
-
Rückgabewert

-
-
Anzahl an geweckten Threads.

-
-
Exceptions

-
-
    
- 
  • Erzeugt einen {{jsxref("TypeError")}}, wenn typedArray kein  {{jsxref("Int32Array")}} ist.
    • 
- 
  • Erzeugt ein {{jsxref("RangeError")}}, wenn der index nicht in den Grenzen von typedArray ist.
    • 
-

-
-
Beipsiele

-
-
Gegeben ist ein Int32Array:

-
-
var sab = new SharedArrayBuffer(1024);
-var int32 = new Int32Array(sab);
-

-
-
Ein lesender Thread schläft und wartet auf Position 0, ander der Wert 0 erwartet wird. Solange diese gegeben ist, geht es nicht weiter. Immer wenn ein neuer schreibender Thread einen neuen Wert speichert, wacht der Thread. Im Anschluss ist der neue Wert an der Position 0 (123).

-
-
Atomics.wait(int32, 0, 0);
-console.log(int32[0]); // 123

-
-
Ein schreibender Thread speichert einen neuen Wert und wacht den wartenden Tread nach dem Schreiben auf.

-
-
console.log(int32[0]); // 0;
-Atomics.store(int32, 0, 123);
-Atomics.notify(int32, 0, 1);

-
-
Spezifikationen

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
SpezifikationStatusKommentar
{{SpecName('ESDraft', '#sec-atomics.notify', 'Atomics.notify')}}{{Spec2('ESDraft')}}Initiale Definition in ES2017.

-
-
Browserkompatibilität

-
-
-
-
{{Compat("javascript.builtins.Atomics.notify")}}

-
-
Siehe auch

-
-
    
- 
  • {{jsxref("Atomics")}}
    • 
- 
  • {{jsxref("Atomics.wait()")}}
    • 
-

diff --git a/files/de/web/javascript/reference/global_objects/boolean/prototype/index.html b/files/de/web/javascript/reference/global_objects/boolean/prototype/index.html
deleted file mode 100644
index 62a430fac2..0000000000
--- a/files/de/web/javascript/reference/global_objects/boolean/prototype/index.html
+++ /dev/null
@@ -1,84 +0,0 @@
----
-title: Boolean.prototype
-slug: Web/JavaScript/Reference/Global_Objects/Boolean/prototype
-tags:
-  - Boolean
-  - JavaScript
-  - Property
-  - Prototype
-translation_of: Web/JavaScript/Reference/Global_Objects/Boolean
-translation_of_original: Web/JavaScript/Reference/Global_Objects/Boolean/prototype
----
-
{{JSRef}}

-
-
Die Boolean.prototype Eigenschaft repräsentiert den Prototypen des  {{jsxref("Boolean")}} Konstruktors.

-
-
 

-
-
{{js_property_attributes(0, 0, 0)}}

-
-
{{EmbedInteractiveExample("pages/js/boolean-constructor.html")}}

-
-
-
-
Beschreibung

-
-
{{jsxref("Boolean")}} Instanzen ergen von from Boolean.prototype. Man kann das prototype Objekt benutzen, um Eigenschaften und Methoden zu allen {{jsxref("Boolean")}} Instanzen hinzuzufügen.

-
-
Eigenschaften

-
-

- 
Boolean.prototype.constructor

- 
Gibt die Funktion, die einen Instanz des Prototypen erstellt zurück. Im Standardfall ist das die Funktion {{jsxref("Boolean")}}.

-

-
-
Methoden

-
-

- 
{{jsxref("Boolean.prototype.toSource()")}} {{non-standard_inline}}

- 
Gibt den Quelltext des {{jsxref("Boolean")}} Objektes als String zurück. Man kann diesen String benutzen um ein gleiches Objekt zu erstellen. Diese Methode überschreibt die {{jsxref("Object.prototype.toSource()")}} Methode.

- 
{{jsxref("Boolean.prototype.toString()")}}

- 
Gibt einen String "true" oder "false" zurück, abhängig vom Wert des Objektes. Diese Methode überschreibt die {{jsxref("Object.prototype.toString()")}} Methode.

- 
{{jsxref("Boolean.prototype.valueOf()")}}

- 
Gibt einen primitiven Wert des {{jsxref("Boolean")}} Objektes zurück. Diese Methode überschreibt die {{jsxref("Object.prototype.valueOf()")}} Methode.

-

-
-
Spezifikationen

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
SpezifikationStatusKommentar
{{SpecName('ES1')}}{{Spec2('ES1')}}Initiale Definition. Implementiert in JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.6.3.1', 'Boolean.prototype')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-boolean.prototype', 'Boolean.prototype')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-boolean.prototype', 'Boolean.prototype')}}{{Spec2('ESDraft')}} 

-
-
Browserkompatibilität

-
-

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

-

diff --git a/files/de/web/javascript/reference/global_objects/dataview/prototype/index.html b/files/de/web/javascript/reference/global_objects/dataview/prototype/index.html
deleted file mode 100644
index e03aff8a8d..0000000000
--- a/files/de/web/javascript/reference/global_objects/dataview/prototype/index.html
+++ /dev/null
@@ -1,110 +0,0 @@
----
-title: DataView.prototype
-slug: Web/JavaScript/Reference/Global_Objects/DataView/prototype
-tags:
-  - DataView
-  - JavaScript
-  - Prototype
-translation_of: Web/JavaScript/Reference/Global_Objects/DataView
-translation_of_original: Web/JavaScript/Reference/Global_Objects/DataView/prototype
----
-
{{JSRef}}

-
-
Die DataView.prototype Eigenschaft repräsentiert den Prototypen für das {{jsxref("DataView")}} Objekt.

-
-
{{js_property_attributes(0,0,0)}}

-
-
Beschreibung

-
-
DataView Instanzen erben von DataView.prototype. Wie bei allen Konstruktoren, können Änderungen am Prototypen Änderungen in allen DataView Instanzen zur folge haben.

-
-
Eigenschaften

-
-

- 
DataView.prototype.constructor

- 
Spezifiziert die Funktion, die ein Objekt des Prototypen erstellt. Der initialwert ist der Standard eingebaute DataView Konstruktor

- 
{{jsxref("DataView.prototype.buffer")}} {{readonlyInline}}

- 
Der {{jsxref("ArrayBuffer")}}, der von dieser Ansicht repräsentiert wird. Wird bei der Erstellung erzeugt und deswegen kann nur lesend darauf zugegriffen werden.

- 
{{jsxref("DataView.prototype.byteLength")}} {{readonlyInline}}

- 
Die Länge (in Bytes) von dieser Ansicht, von Beginn des {{jsxref("ArrayBuffer")}}. Wird bei der Erstellung erzeugt und deswegen kann nur lesend darauf zugegriffen werden.

- 
{{jsxref("DataView.prototype.byteOffset")}} {{readonlyInline}}

- 
Das Offset (in Bytes) von dieser Ansicht, von Beginn des {{jsxref("ArrayBuffer")}}. Wird bei der Erstellung erzeugt und deswegen kann nur lesend darauf zugegriffen werden.

-

-
-
Methoden

-
-
Lesend

-
-

- 
{{jsxref("DataView.prototype.getInt8()")}}

- 
Gibt eine 8-Bit ganze Zahl mit Vorzeichen (byte) eines spezifizierten Byte-Offsets vom Start der Ansicht zurück.

- 
{{jsxref("DataView.prototype.getUint8()")}}

- 
Gibt eine 8-Bit vorzeichenlose ganze Zahl (unsigned byte) eines spezifizierten Byte-Offsets vom Start der Ansicht zurück.

- 
{{jsxref("DataView.prototype.getInt16()")}}

- 
Gibt eine 16-Bit ganze Zahl mit Vorzeichen (short) eines spezifizierten Byte-Offsets vom Start der Ansicht zurück.

- 
{{jsxref("DataView.prototype.getUint16()")}}

- 
Gibt eine 16-Bit vorzeichenlose ganze Zahl (unsigned short) eines spezifizierten Byte-Offsets vom Start der Ansicht zurück.

- 
{{jsxref("DataView.prototype.getInt32()")}}

- 
Gibt eine 32-Bit ganze Zahl mit Vorzeichen (long) eines spezifizierten Byte-Offsets vom Start der Ansicht zurück.

- 
{{jsxref("DataView.prototype.getUint32()")}}

- 
Gibt eine 32-Bit vorzeichenlose ganze Zahl (unsigned long) eines spezifizierten Byte-Offsets vom Start der Ansicht zurück.

- 
{{jsxref("DataView.prototype.getFloat32()")}}

- 
Gibt eine 32-Bit Gleitkommazahl mit Vorzeichen (float) eines spezifizierten Byte-Offsets vom Start der Ansicht zurück

- 
{{jsxref("DataView.prototype.getFloat64()")}}

- 
Gibt eine 64-Bit Gleitkommazahl mit Vorzeichen (double) eines spezifizierten Byte-Offsets vom Start der Ansicht zurück

-

-
-
Schreibend

-
-

- 
{{jsxref("DataView.prototype.setInt8()")}}

- 
Speichert eine ganze 8-Bit Zahl mit Vorzeichen (byte) an einem spezifizierten Offset vom Start der Ansicht.

- 
{{jsxref("DataView.prototype.setUint8()")}}

- 
Speichert eine ganze vorzeichenlose 8-Bit Zahl (unsigned byte) an einem spezifizierten Offset vom Start der Ansicht.

- 
{{jsxref("DataView.prototype.setInt16()")}}

- 
Speichert eine ganze 16-Bit Zahl mit Vorzeichen (short) an einem spezifizierten Offset vom Start der Ansicht.

- 
{{jsxref("DataView.prototype.setUint16()")}}

- 
Speichert eine ganze vorzeichenlose 16-Bit Zahl (unsigned short) an einem spezifizierten Offset vom Start der Ansicht.

- 
{{jsxref("DataView.prototype.setInt32()")}}

- 
Speichert eine ganze 32-Bit Zahl mit Vorzeichen (long) an einem spezifizierten Offset vom Start der Ansicht.

- 
{{jsxref("DataView.prototype.setUint32()")}}

- 
Speichert eine ganze vorzeichenlose 32-Bit Zahl (unsigned long) an einem spezifizierten Offset vom Start der Ansicht.

- 
{{jsxref("DataView.prototype.setFloat32()")}}

- 
Speichert eine 32-Bit Gleitkommazahl mit Vorzeichen (float) an einem spezifizierten Offset vom Start der Ansicht.

- 
{{jsxref("DataView.prototype.setFloat64()")}}

- 
Speichert eine 64-Bit Gleitkommazahl mit Vorzeichen (double) an einem spezifizierten Offset vom Start der Ansicht.

-

-
-
Spezifikationen

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
SpezifikationStatusKommentar
{{SpecName('ES6', '#sec-dataview.prototype', 'DataView.prototype')}}{{Spec2('ES6')}}Initiale Definition.
{{SpecName('ESDraft', '#sec-dataview.prototype', 'DataView.prototype')}}{{Spec2('ESDraft')}} 

-
-
Browserkompatibilität

-
-
-
-
{{Compat("javascript.builtins.DataView.prototype")}}

-
-
Siehe auch

-
-
    
- 
  • {{jsxref("DataView")}}
    • 
-

diff --git a/files/de/web/javascript/reference/global_objects/date/prototype/index.html b/files/de/web/javascript/reference/global_objects/date/prototype/index.html
deleted file mode 100644
index ab69ff1528..0000000000
--- a/files/de/web/javascript/reference/global_objects/date/prototype/index.html
+++ /dev/null
@@ -1,183 +0,0 @@
----
-title: Date.prototype
-slug: Web/JavaScript/Reference/Global_Objects/Date/prototype
-tags:
-  - Date
-  - JavaScript
-  - Property
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Date
-translation_of_original: Web/JavaScript/Reference/Global_Objects/Date/prototype
----
-
{{JSRef}}

-
-
Die Date.prototype-Eigenschaft ist der Prototype für den {{jsxref("Date")}}-Konstruktor

-
-
{{js_property_attributes(0, 0, 1)}}

-
-
Beschreibung

-
-
JavaScript-{{jsxref("Date")}}-Instanzen erben von Date.prototype. Man kann das Konstruktorprototype-Objekt ändern, um Eigenschaften und Methoden aller {{jsxref("Date")}}-Instanzen zu ändern.

-
-
Für die Kompatibilität mit Jahrtausendsrechnungen (in anderen Worten, um das Jahr 2000 mit einzukalkulieren), sollte man das Jahr immer in voller Länge spezifizieren; zum Beispiel sollte 1998 und nicht 98 benutzt werden. Zur Unterstützung der Spezifizierung des vollen Jahres hat JavaScript die Methoden {{jsxref("Date.prototype.getFullYear()", "getFullYear()")}}, {{jsxref("Date.prototype.setFullYear()", "setFullYear()")}}, {{jsxref("Date.prototype.getUTCFullYear()", "getUTCFullYear()")}} und {{jsxref("Date.prototype.setUTCFullYear()", "setUTCFullYear()")}}.

-
-
Mit Einführung von ECMAScript 6 ist das Date.prototype-Objekt ein normales Objekt. Es ist keine Instanz von {{jsxref("Date")}}.

-
-
Eigenschaften

-
-

- 
Date.prototype.constructor

- 
Eine Funktion, die Instanzen erzeugen kann. Der {{jsxref("Date")}}-Konstruktor ist der Standard.

-

-
-
Methoden

-
-
Getter

-
-

- 
{{jsxref("Date.prototype.getDate()")}}

- 
Gibt den Tag des Monats (1 - 31) eines Datums gemäß der Ortszeit zurück.

- 
{{jsxref("Date.prototype.getDay()")}}

- 
Gibt den Tag der Woche (0 - 6) eines Datums gemäß der Ortszeit zurück.

- 
{{jsxref("Date.prototype.getFullYear()")}}

- 
Gibt das Jahr (4 Ziffern für 4 ziffrige Jahre) eines Datums gemäß der Ortszeit zurück.

- 
{{jsxref("Date.prototype.getHours()")}}

- 
Gibt die Stunde (0 - 23) eines Datums gemäß der Ortszeit zurück.

- 
{{jsxref("Date.prototype.getMilliseconds()")}}

- 
Gibt die Millisekunden (0 - 999) eines Datums gemäß der Ortszeit zurück.

- 
{{jsxref("Date.prototype.getMinutes()")}}

- 
Gibt die Minuten (0 - 59) eines Datums gemäß der Ortszeit zurück.

- 
{{jsxref("Date.prototype.getMonth()")}}

- 
Gibt den Monat (0 - 11) eines Datums gemäß der Ortszeit zurück.

- 
{{jsxref("Date.prototype.getSeconds()")}}

- 
Gibt die Sekunden (0 - 59) eines Datums gemäß der Ortszeit zurück.

- 
{{jsxref("Date.prototype.getTime()")}}

- 
Gibt den nummerischen Wert eines Datums als Millisekunden seit 1. Januar 1970 00:00:00 UTC (negativ für frühere Daten) zurück.

- 
{{jsxref("Date.prototype.getTimezoneOffset()")}}

- 
Gibt den Zeitzonenunterschied in Minuten für die aktuelle Region zurück.

- 
{{jsxref("Date.prototype.getUTCDate()")}}

- 
Gibt den Tag des Monats (1 - 31) eines Datums gemäß der Weltzeit zurück.

- 
{{jsxref("Date.prototype.getUTCDay()")}}

- 
Gibt den Tag der Woche (0 - 6) eines Datums gemäß der Weltzeit zurück.

- 
{{jsxref("Date.prototype.getUTCFullYear()")}}

- 
Gibt das Jahr (4 Ziffern für 4 ziffrige Jahre) eines Datums gemäß der Weltzeit zurück.

- 
{{jsxref("Date.prototype.getUTCHours()")}}

- 
Gibt die Stunden (0 - 23) eines Datums gemäß der Weltzeit zurück.

- 
{{jsxref("Date.prototype.getUTCMilliseconds()")}}

- 
Gibt die Millisekunden (0 - 999) eines Datums gemäß der Weltzeit zurück.

- 
{{jsxref("Date.prototype.getUTCMinutes()")}}

- 
Gibt die Minuten (0 - 59) eines Datums gemäß der Weltzeit zurück.

- 
{{jsxref("Date.prototype.getUTCMonth()")}}

- 
Gibt den Monat (0 - 11) eines Datums gemäß der Weltzeit zurück.

- 
{{jsxref("Date.prototype.getUTCSeconds()")}}

- 
Gibt die Sekunden (0 - 59) eines Datums gemäß der Weltzeit zurück.

- 
{{jsxref("Date.prototype.getYear()")}} {{deprecated_inline}}

- 
Gibt das Jahr (nur 2 - 3 Ziffern) eines Datums gemäß der Ortszeit zurück. Stattdessen sollte {{jsxref("Date.prototype.getFullYear()", "getFullYear()")}} benutzt werden.

-

-
-
Setter

-
-

- 
{{jsxref("Date.prototype.setDate()")}}

- 
Setzt den Tag des Monats eines Datums gemäß der Ortszeit.

- 
{{jsxref("Date.prototype.setFullYear()")}}

- 
Setzt das Jahr (4 Ziffern für vierstellige Jahre) eines Datums gemäß der Ortszeit.

- 
{{jsxref("Date.prototype.setHours()")}}

- 
Setzt die Stunden eines Datums gemäß der Ortszeit.

- 
{{jsxref("Date.prototype.setMilliseconds()")}}

- 
Setzt die Millisekunden eines Datums gemäß der Ortszeit.

- 
{{jsxref("Date.prototype.setMinutes()")}}

- 
Setzt die Minuten eines Datums gemäß der Ortszeit.

- 
{{jsxref("Date.prototype.setMonth()")}}

- 
Setzt den Monat eines Datums gemäß der Ortszeit.

- 
{{jsxref("Date.prototype.setSeconds()")}}

- 
Setzt die Sekunden eines Datums gemäß der Ortszeit.

- 
{{jsxref("Date.prototype.setTime()")}}

- 
Setzt ein {{jsxref("Date")}} Objekt auf die Zeit, mit der Anzahl der Millisekunden seit dem 1. Januar 1970 00:00:00UTC. Negative Zahlen sind für frühere Daten erlaubt.

- 
{{jsxref("Date.prototype.setUTCDate()")}}

- 
Setzt den Tag des Monats eines Datums gemäß der Weltzeit.

- 
{{jsxref("Date.prototype.setUTCFullYear()")}}

- 
Setzt das Jahr (4 Ziffern für 4 ziffrige Jahre) eines Datums gemäß der Weltzeit.

- 
{{jsxref("Date.prototype.setUTCHours()")}}

- 
Setzt die Stunde eines Datums gemäß der Weltzeit.

- 
{{jsxref("Date.prototype.setUTCMilliseconds()")}}

- 
Setzt die Millisekunden eines Datums gemäß der Weltzeit.

- 
{{jsxref("Date.prototype.setUTCMinutes()")}}

- 
Setzt die Minuten eines Datums gemäß der Weltzeit.

- 
{{jsxref("Date.prototype.setUTCMonth()")}}

- 
Setzt den Monat eines Datums gemäß der Weltzeit.

- 
{{jsxref("Date.prototype.setUTCSeconds()")}}

- 
Setzt die Sekunden eines Datums gemäß der Weltzeit.

- 
{{jsxref("Date.prototype.setYear()")}} {{deprecated_inline}}

- 
Setzt das Jahr (nur 2 - 3 Ziffern) eines Datums gemäß der Ortszeit. Stattdessen sollte {{jsxref("Date.prototype.setFullYear()", "setFullYear()")}} benutzt werden.

-

-
-
Konvertierungsgetter

-
-

- 
{{jsxref("Date.prototype.toDateString()")}}

- 
Gibt das Datum als menschlich lesbaren String zurück (z. B. Thu Apr 12 2018). 

- 
{{jsxref("Date.prototype.toISOString()")}}

- 
Konvertiert ein Datum zu einem String im erweiterten ISO-8601-Format.

- 
{{jsxref("Date.prototype.toJSON()")}}

- 
Gibt eine String-Repräsentation eines {{jsxref("Date")}}-Objektes zurück. Dabei wird die {{jsxref("Date.prototype.toISOString()", "toISOString()")}}-Methode eingesetzt. Gedacht für den Einsatz von {{jsxref("JSON.stringify()")}}.

- 
{{jsxref("Date.prototype.toGMTString()")}} {{deprecated_inline}}

- 
Gibt eine String-Repräsentation eines {{jsxref("Date")}}-Objektes auf Basis der GMT-(UT)-Zeitzone zurück. Stattdessen sollte {{jsxref("Date.prototype.toUTCString()", "toUTCString()")}} eingesetzt werden.

- 
{{jsxref("Date.prototype.toLocaleDateString()")}}

- 
Gibt einen String mit ortssensitiver Repräsentation eines Datums zurück. Dieses Datum basiert auf den Systemeinstellungen.

- 
{{jsxref("Date.prototype.toLocaleFormat()")}} {{non-standard_inline}}

- 
Konvertiert ein Datum zu einem String mithilfe eines Formatierungsstrings.

- 
{{jsxref("Date.prototype.toLocaleString()")}}

- 
Gibt einen String mit ortssensitiver Repräsentation eines Datums zurück. Diese Method überschreibt die  {{jsxref("Object.prototype.toLocaleString()")}}-Methode.

- 
{{jsxref("Date.prototype.toLocaleTimeString()")}}

- 
Gibt einen String mit ortssensitiver Repräsentation der Zeit eines Datums zurück. Diese Zeit basiert auf den Systemeinstellungen.

- 
{{jsxref("Date.prototype.toSource()")}} {{non-standard_inline}}

- 
Gibt einen String-Repräsentation des Quelltextes zurück (gleich dem {{jsxref("Date")}}-Objekt). Man kann diese Methode einsetzen um ein neues Objekt zu erstellen. Diese Methode überschreibt die {{jsxref("Object.prototype.toSource()")}}-Methode

- 
{{jsxref("Date.prototype.toString()")}}

- 
Gibt eine String-Repräsentation eines {{jsxref("Date")}}-Objektes zurück. Diese Methode überschreibt die {{jsxref("Object.prototype.toString()")}} Methode.

- 
{{jsxref("Date.prototype.toTimeString()")}}

- 
Gibt die Zeit eines Datums als menschlich lesbaren String zurück.

- 
{{jsxref("Date.prototype.toUTCString()")}}

- 
Konvertiert das Datum zu einem String unter Einsatz der UTC-Zeitzone.

- 
{{jsxref("Date.prototype.valueOf()")}}

- 
Gibt ein primitiven Wert eines {{jsxref("Date")}}-Objektes zurück. Diese Methode überschreibt die {{jsxref("Object.prototype.valueOf()")}}-Methode.

-

-
-
Spezifikationen

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
SpecificationStatusKommentar
{{SpecName('ES1')}}{{Spec2('ES1')}}Initiale Definition. Implementiert in JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.9.5', 'Date.prototype')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-properties-of-the-date-prototype-object', 'Date.prototype')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-properties-of-the-date-prototype-object', 'Date.prototype')}}{{Spec2('ESDraft')}} 

-
-
Browserkompatibilität

-
-
-
-
{{Compat("javascript.builtins.Date.prototype")}}

diff --git a/files/de/web/javascript/reference/global_objects/error/prototype/index.html b/files/de/web/javascript/reference/global_objects/error/prototype/index.html
deleted file mode 100644
index 2a48748822..0000000000
--- a/files/de/web/javascript/reference/global_objects/error/prototype/index.html
+++ /dev/null
@@ -1,114 +0,0 @@
----
-title: Error.prototype
-slug: Web/JavaScript/Reference/Global_Objects/Error/prototype
-tags:
-  - Error
-  - JavaScript
-  - Property
-translation_of: Web/JavaScript/Reference/Global_Objects/Error
-translation_of_original: Web/JavaScript/Reference/Global_Objects/Error/prototype
----
-
{{JSRef}}

-
-
Die Error.prototype Eigenschaft repräsentiert den Prototypen für den {{jsxref("Error")}} Konstruktor.

-
-
{{js_property_attributes(0, 0, 0)}}

-
-
Beschreibung

-
-
Alle {{jsxref("Error")}} Instanzen und Instanzen von {{jsxref("Global_Objects/Error", "nicht generischen Errors", "#Error_types", 1)}} erben von Error.prototype. Wie bei jeder Konstruktorfunktion, kann man den Prototypen des Konstruktors einsetzen, um Eigenschaften oder Methoden bei allen erstellten Instanzen hinzuzufügen.

-
-
Eigenschaften

-
-
Standard-Eigenschaften

-
-

- 
Error.prototype.constructor

- 
Spezifiziert die Funktion, die einen Prototypen einer Instanz erstellt.

- 
{{jsxref("Error.prototype.message")}}

- 
Errornachricht.

- 
{{jsxref("Error.prototype.name")}}

- 
Errorname.

-

-
-
Vendor-spezifische Erweiterungen

-
-
{{non-standard_header}}

-
-
Microsoft

-
-

- 
{{jsxref("Error.prototype.description")}} {{non-standard_inline}}

- 
Errorbeschreibung. Ist das gleiche wie {{jsxref("Error.prototype.message")}}

- 
{{jsxref("Error.prototype.number")}} {{non-standard_inline}}

- 
Errornummer.

-

-
-
Mozilla

-
-

- 
{{jsxref("Error.prototype.fileName")}} {{non-standard_inline}}

- 
Pfad zu der Datei, die der der Error ausgelöst wurde.

- 
{{jsxref("Error.prototype.lineNumber")}} {{non-standard_inline}}

- 
Zeilennummer in der Datei, in der der Error ausgelöst wurde.

- 
{{jsxref("Error.prototype.columnNumber")}} {{non-standard_inline}}

- 
Spaltennummer in der Zeile, in der der Error ausgelöst wurde.

- 
{{jsxref("Error.prototype.stack")}} {{non-standard_inline}}

- 
Stacktrace.

-

-
-
Methoden

-
-

- 
{{jsxref("Error.prototype.toSource()")}} {{non-standard_inline}}

- 
Gibt einen String zurück, der den Quelltext eines spezifischen {{jsxref("Error")}} Objektes beinhaltet. Man kann diesen einsetzen, um ein neues Objekt zu erstellen. Überschreibt die {{jsxref("Object.prototype.toSource()")}} Methode.

- 
{{jsxref("Error.prototype.toString()")}}

- 
Gibt einen String zurück, der das Objekt repräsentiert. Überschreibt die {{jsxref("Object.prototype.toString()")}} Methode.

-

-
-
Spezifikationen

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
SpezifikationStatusKommentar
{{SpecName('ES1')}}{{Spec2('ES1')}}Initiale Definition. Implementiert in JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.11.3.1', 'Error')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-error.prototype', 'Error')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-error.prototype', 'Error')}}{{Spec2('ESDraft')}} 

-
-
Browserkompatibilität

-
-

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

-

-
-
Siehe auch

-
-
    
- 
  • {{jsxref("Error")}}
    • 
- 
  • {{jsxref("Object.prototype")}}
    • 
-

diff --git a/files/de/web/javascript/reference/global_objects/evalerror/prototype/index.html b/files/de/web/javascript/reference/global_objects/evalerror/prototype/index.html
deleted file mode 100644
index 7de0a353bc..0000000000
--- a/files/de/web/javascript/reference/global_objects/evalerror/prototype/index.html
+++ /dev/null
@@ -1,90 +0,0 @@
----
-title: EvalError.prototype
-slug: Web/JavaScript/Reference/Global_Objects/EvalError/prototype
-tags:
-  - Error
-  - EvalError
-  - JavaScript
-  - Property
-translation_of: Web/JavaScript/Reference/Global_Objects/EvalError
-translation_of_original: Web/JavaScript/Reference/Global_Objects/EvalError/prototype
----
-
{{JSRef}}

-
-
Die EvalError.prototype Eigenschaft repräsentiert den Prototypen des {{jsxref("EvalError")}} Konstruktors.

-
-
{{js_property_attributes(0, 0, 0)}}

-
-
Beschreibung

-
-
Alle {{jsxref("EvalError")}} Instanzen erben von EvalError.prototype. Man kann den Prototypen benutzen, um Eigenschaften oder Methoden für alle Instanzen hinzuzufügen.

-
-
Eigenschaften

-
-

- 
EvalError.prototype.constructor

- 
Spezifiziert die Funktion, die einen Instanzprototypen erstellt.

- 
{{jsxref("Error.prototype.message", "EvalError.prototype.message")}}

- 
Fehlernachricht. Obwohl ECMA-262 spezifiziert, dass {{jsxref("EvalError")}} seine eigene message Eigenschaft haben soll, wird diese in SpiderMonkey von {{jsxref("Error.prototype.message")}} geerbt.

- 
{{jsxref("Error.prototype.name", "EvalError.prototype.name")}}

- 
Fehlername. Geerbt von {{jsxref("Error")}}.

- 
{{jsxref("Error.prototype.fileName", "EvalError.prototype.fileName")}}

- 
Pfad zur Datei, die der der Fehler ausgelöst hat. Geerbt von {{jsxref("Error")}}.

- 
{{jsxref("Error.prototype.lineNumber", "EvalError.prototype.lineNumber")}}

- 
Zeilennummer in der Datei, in der der Fehler ausgelöst wurde. Geerbt von {{jsxref("Error")}}.

- 
{{jsxref("Error.prototype.columnNumber", "EvalError.prototype.columnNumber")}}

- 
Dpaltennummer in der Zeile, in der der Fehler ausgelöst wurde. Geerbt von {{jsxref("Error")}}.

- 
{{jsxref("Error.prototype.stack", "EvalError.prototype.stack")}}

- 
Stacktrace. Geerbt von {{jsxref("Error")}}.

-

-
-
Methoden

-
-
Obwohl des {{jsxref("EvalError")}} Prototypobjekt keine eigene Methode enthält, erben {{jsxref("EvalError")}} Instanzen einige Methoden durch die Prototypenkette.

-
-
Spezifikationen

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
SpezifikationStatusKommentar
{{SpecName('ES3')}}{{Spec2('ES3')}}Initiale Definition.
{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}{{Spec2('ES5.1')}}Definiert als NativeError.prototype.
{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ES6')}}Definiert als NativeError.prototype.
{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ESDraft')}}Definiert als NativeError.prototype.

-
-
Browserkompatibilität

-
-

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

-

-
-
Siehe auch

-
-
    
- 
  • {{jsxref("Error.prototype")}}
    • 
- 
  • {{jsxref("Function.prototype")}}
    • 
-

diff --git a/files/de/web/javascript/reference/global_objects/function/prototype/index.html b/files/de/web/javascript/reference/global_objects/function/prototype/index.html
deleted file mode 100644
index 44598455e8..0000000000
--- a/files/de/web/javascript/reference/global_objects/function/prototype/index.html
+++ /dev/null
@@ -1,100 +0,0 @@
----
-title: Function.prototype
-slug: Web/JavaScript/Reference/Global_Objects/Function/prototype
-tags:
-  - Function
-  - JavaScript
-  - Property
-  - Prototype
-translation_of: Web/JavaScript/Reference/Global_Objects/Function
-translation_of_original: Web/JavaScript/Reference/Global_Objects/Function/prototype
----
-
{{JSRef}}

-
-
Die Function.prototype Eigenschaft repräsentiert das {{jsxref("Function")}} Prototyp Objekt.

-
-
Beschreibung

-
-
{{jsxref("Function")}} Objekte erben von Function.prototype.  Function.prototype kann nicht modifiziert werden.

-
-
Eigenschaften

-
-

- 
{{jsxref("Function.arguments")}} {{deprecated_inline}}

- 
Ein Array, welches die der Funktion übergebenen Parameter enthält. Dieses ist veraltet als Eigenschaft von {{jsxref("Function")}}. Stattdessen sollte das {{jsxref("Functions/arguments", "arguments")}} Objekt in einer Funktion benutzt werden

- 
{{jsxref("Function.arity")}} {{obsolete_inline}}

- 
Wurde benutzt, um die Anzahl der erwarteten Argumente einer Funktion einzustellen, ist jedoch entfernt. Stattdessen kann die {{jsxref("Function.length", "length")}} Eigenschaft genutzt werden.

- 
{{jsxref("Function.caller")}} {{non-standard_inline}}

- 
Spezifizert die Funktion, die die aktuelle Funktion aufgerufen hat.

- 
{{jsxref("Function.length")}}

- 
Spezifizert die Anzahl der Parameter, die eine Funktion erwartet.

- 
{{jsxref("Function.name")}}

- 
Der Name einer Funktion.

- 
{{jsxref("Function.displayName")}} {{non-standard_inline}}

- 
Der angezeigte Name einer Funktion.

- 
Function.prototype.constructor

- 
Spezifiziert die Funktion, die ein Objekt Prototyp erstellt. Mehr Informationen bei {{jsxref("Object.prototype.constructor")}}.

-

-
-
Methoden

-
-

- 
{{jsxref("Function.prototype.apply()")}}

- 
Führt eine Funktion aus und setzt das this Objekt mit einem übergebenen wert. Parameter können in einem {{jsxref("Array")}} Objekt übergeben werden.

- 
{{jsxref("Function.prototype.bind()")}}

- 
Erstellt eine neue Funktion, die beim Aufruf einen angegebenen Wert für this hat, wobei die Argumentfolge vor dem Aufruf der neuen Funktion fest steht.

- 
{{jsxref("Function.prototype.call()")}}

- 
Führt eine Funktion aus und setzt this auf einen übergebenen Wert. Parameter können übergeben werden.

- 
{{jsxref("Function.prototype.isGenerator()")}} {{non-standard_inline}}

- 
Gibt true zurück, wenn die Funktion ein Generator ist, anderfalls false.

- 
{{jsxref("Function.prototype.toSource()")}} {{non-standard_inline}}

- 
Gibt eine Stringrepräsentation des Quelltextes einer Funktion zurück. Sie überschreibt die {{jsxref("Object.prototype.toSource")}} Methode.

- 
{{jsxref("Function.prototype.toString()")}}

- 
Gibt eine Stringrepräsentation des Quelltextes einer Funktion zurück. Sie überschreibt die {{jsxref("Object.prototype.toString")}} Methode.

-

-
-
Spezifikationen

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
SpezifikationStatusKommentar
{{SpecName('ES1')}}{{Spec2('ES1')}}Initiale Definition. Implementiert in JavaScript 1.1
{{SpecName('ES5.1', '#sec-15.3.5.2', 'Function.prototype')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-function-instances-prototype', 'Function.prototype')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-function-instances-prototype', 'Function.prototype')}}{{Spec2('ESDraft')}} 

-
-
Browserkompatibilität

-
-

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

-

-
-
Siehe auch

-
-
    
- 
  • {{jsxref("Function")}}
    • 
-

diff --git a/files/de/web/javascript/reference/global_objects/generatorfunction/prototype/index.html b/files/de/web/javascript/reference/global_objects/generatorfunction/prototype/index.html
deleted file mode 100644
index e514a8c9d7..0000000000
--- a/files/de/web/javascript/reference/global_objects/generatorfunction/prototype/index.html
+++ /dev/null
@@ -1,67 +0,0 @@
----
-title: GeneratorFunction.prototype
-slug: Web/JavaScript/Reference/Global_Objects/GeneratorFunction/prototype
-tags:
-  - ECMAScript 2015
-  - GeneratorFunction
-  - Iterator
-  - JavaScript
-  - Property
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/GeneratorFunction
-translation_of_original: Web/JavaScript/Reference/Global_Objects/GeneratorFunction/prototype
----
-
{{JSRef}}

-
-
Die GeneratorFunction.prototype Eigenschaft repräsentiert den Prototypen des {{jsxref("GeneratorFunction")}} Objektes.

-
-
Beschreibung

-
-
{{jsxref("GeneratorFunction")}} Objekt erbt von GeneratorFunction.prototype. GeneratorFunction.prototype kann nicht verändert werden.

-
-
Eigenschaften

-
-

- 
GeneratorFunction.constructor

- 
Der initiale Wert von {{jsxref("GeneratorFunction")}}.

- 
GeneratorFunction.prototype.prototype

- 
Der Wert ist %GeneratorPrototype%.

-

-
-
Spezifikationen

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
SpezifikationStatusKommentar
{{SpecName('ES2015', '#sec-generatorfunction.prototype', 'GeneratorFunction.prototype')}}{{Spec2('ES2015')}}Initiale Definition.
{{SpecName('ESDraft', '#sec-generatorfunction.prototype', 'GeneratorFunction.prototype')}}{{Spec2('ESDraft')}} 

-
-
Browserkompatibilität

-
-

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

-

-
-
Siehe auch

-
-
    
- 
  • {{jsxref("GeneratorFunction")}}
    • 
- 
  • {{jsxref("Function")}}
    • 
-

diff --git a/files/de/web/javascript/reference/global_objects/internalerror/prototype/index.html b/files/de/web/javascript/reference/global_objects/internalerror/prototype/index.html
deleted file mode 100644
index 8ed0c2de4b..0000000000
--- a/files/de/web/javascript/reference/global_objects/internalerror/prototype/index.html
+++ /dev/null
@@ -1,62 +0,0 @@
----
-title: InternalError.prototype
-slug: Web/JavaScript/Reference/Global_Objects/InternalError/prototype
-tags:
-  - Error
-  - InternalError
-  - JavaScript
-  - Property
-translation_of: Web/JavaScript/Reference/Global_Objects/InternalError
-translation_of_original: Web/JavaScript/Reference/Global_Objects/InternalError/prototype
----
-
{{JSRef}} {{non-standard_header}}

-
-
Die InternalError.prototype Eigenschaft repräsentiert den Prototypen des {{jsxref("InternalError")}} Konstruktors.

-
-
{{js_property_attributes(0, 0, 0)}}

-
-
Beschreibung

-
-
Alle {{jsxref("InternalError")}} Instanzen erben von InternalError.prototype. Man kann den Prototypen benutzt, um Eigenschaften oder Methoden für alle Instanzen hinzuzufügen.

-
-
Eigenschaften

-
-

- 
InternalError.prototype.constructor

- 
Spezifiziert die Funktion, die einen Instanzen Prototyp erstellt.

- 
{{jsxref("Error.prototype.message", "InternalError.prototype.message")}}

- 
Fehlermeldung. Geerbt von {{jsxref("Error")}}.

- 
{{jsxref("Error.prototype.name", "InternalError.prototype.name")}}

- 
Fehlername. Geerbt von {{jsxref("Error")}}.

- 
{{jsxref("Error.prototype.fileName", "InternalError.prototype.fileName")}}

- 
Pfad zur Datei, in der der Fehler auftritt. Geerbt von {{jsxref("Error")}}.

- 
{{jsxref("Error.prototype.lineNumber", "InternalError.prototype.lineNumber")}}

- 
Zeilennummer, in der Datei, in der der Fehler auftritt. Geerbt von {{jsxref("Error")}}.

- 
{{jsxref("Error.prototype.columnNumber", "InternalError.prototype.columnNumber")}}

- 
Spaltennummer, in der Zeile, in der der Fehler auftritt. Geerbt von {{jsxref("Error")}}.

- 
{{jsxref("Error.prototype.stack", "InternalError.prototype.stack")}}

- 
Stacktrace. Geerbt von {{jsxref("Error")}}.

-

-
-
Methoden

-
-
Obwohl das {{jsxref("InternalError")}} Prototypobjekt keine eigenen Methoden besitzt, erben {{jsxref("InternalError")}} Instanzen einige Methoden durch die Prototypenkette.

-
-
Spezifikationen

-
-
In keiner Spezifikation enthalten.

-
-
Browserkompatibilität

-
-

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

-

-
-
Siehe auch

-
-
    
- 
  • {{jsxref("Error.prototype")}}
    • 
- 
  • {{jsxref("Function.prototype")}}
    • 
-

diff --git a/files/de/web/javascript/reference/global_objects/intl/collator/prototype/index.html b/files/de/web/javascript/reference/global_objects/intl/collator/prototype/index.html
deleted file mode 100644
index 2b041c3f26..0000000000
--- a/files/de/web/javascript/reference/global_objects/intl/collator/prototype/index.html
+++ /dev/null
@@ -1,80 +0,0 @@
----
-title: Intl.Collator.prototype
-slug: Web/JavaScript/Reference/Global_Objects/Intl/Collator/prototype
-tags:
-  - Collator
-  - Internationalization
-  - JavaScript
-  - Property
-  - Prototype
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Collator
-translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/Collator/prototype
----
-
{{JSRef}}

-
-
Die Intl.Collator.prototype Eigenschaft repräsentiert das Prototypobjekt für den {{jsxref("Collator", "Intl.Collator")}} Konstruktor.

-
-
{{js_property_attributes(0, 0, 0)}}

-
-
Beschreibung

-
-
Siehe im Beitrag {{jsxref("Collator")}} für eine Beschreibung von Intl.Collator Instanzen.

-
-
{{jsxref("Collator", "Intl.Collator")}} Instanzen erben von Intl.Collator.prototype. Änderungen am Prototypobjekt werden an alle {{jsxref("Collator", "Intl.Collator")}} Instanzen vererbt.

-
-
Eigenschaften

-
-

- 
{{jsxref("Collator.compare", "Intl.Collator.prototype.compare")}}

- 
Getter; gibt eine Funktion zurück, die zwei Strings abhängig vom der Sortierreihenfolge des {{jsxref("Global_Objects/Collator", "Intl.Collator")}} Objektes vergleicht.

- 
Intl.Collator.prototype.constructor

- 
Eine Referenz zu {{jsxref("Global_Objects/Collator", "Intl.Collator")}}.

-

-
-
Methoden

-
-

- 
{{jsxref("Collator.resolvedOptions", "Intl.Collator.prototype.resolvedOptions()")}}

- 
Gibt ein neues Objekt mit Eigenschaften zu Gebiets- und Collation-Optionen, die bei der Initialisierung des Objekte ermittelt wurden.

-

-
-
Spezifikationen

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
SpezifikationStatusKommentar
{{SpecName('ES Int 1.0', '#sec-10.2.1', 'Intl.Collator.prototype')}}{{Spec2('ES Int 1.0')}}Initiale Definition.
{{SpecName('ES Int 2.0', '#sec-10.2.1', 'Intl.Collator.prototype')}}{{Spec2('ES Int 2.0')}} 
{{SpecName('ES Int Draft', '#sec-Intl.Collator.prototype', 'Intl.Collator.prototype')}}{{Spec2('ES Int Draft')}} 

-
-
Browserkompatibilität

-
-

-
-
-
{{Compat("javascript.builtins.Intl.Collator.prototype")}}

-

-
-
Siehe auch

-
-
    
- 
  • {{jsxref("Collator", "Intl.Collator")}}
    • 
-

diff --git a/files/de/web/javascript/reference/global_objects/intl/datetimeformat/prototype/index.html b/files/de/web/javascript/reference/global_objects/intl/datetimeformat/prototype/index.html
deleted file mode 100644
index ab0a86d286..0000000000
--- a/files/de/web/javascript/reference/global_objects/intl/datetimeformat/prototype/index.html
+++ /dev/null
@@ -1,84 +0,0 @@
----
-title: Intl.DateTimeFormat.prototype
-slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype
-tags:
-  - DateTimeFormat
-  - Internationalization
-  - JavaScript
-  - Property
-  - Prototype
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
-translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype
----
-
{{JSRef}}

-
-
Die Intl.DateTimeFormat.prototype Eigenschaft ist ein Prototyp Objekt für den {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} Konstruktor.

-
-
 

-
-
{{js_property_attributes(0, 0, 0)}}

-
-
Beschreibung

-
-
Für eine Beschreibung von Intl.DateTimeFormat Instanzen siehe im Artikel {{jsxref("DateTimeFormat")}} nach.

-
-
{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} Instanzen erben von Intl.DateTimeFormat.prototype. Änderungen in der Eigenschaft prototype wirken sich auf alle Instanzen von {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} aus.

-
-
Eigenschaften

-
-

- 
Intl.DateTimeFormat.prototype.constructor

- 
Eine Referenz zu {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}.

- 
{{jsxref("DateTimeFormat.format", "Intl.DateTimeFormat.prototype.format")}}

- 
Getter, der eine Funktion, die für das Formatieren von Datums- und Zeitangaben nach den Optionen des {{jsxref("DateTimeFormat", "DateTimeFormat")}} ermöglicht, wird zurückgegeben.

-

-
-
Methoden

-
-

- 
{{jsxref("DateTimeFormat.formatToParts", "Intl.DateTimeFormat.prototype.formatToParts()")}}

- 
Gibt ein {{jsxref("Array")}} von Objekten zurück, die den formatierten String in Teilen repräsentiert. Das kann eingesetzt werden, um ein benutzerdefiniertes Format zu erstellen.

- 
{{jsxref("DateTimeFormat.resolvedOptions", "Intl.DateTimeFormat.prototype.resolvedOptions()")}}

- 
Gibt ein neues Objekt mit den Eigenschaften der Sprache und des Formates zum Erstellungszeitpunkt des Objektes zurück.

-

-
-
Spezifikationen

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
SpezifikationStatusKommentar
{{SpecName('ES Int 1.0', '#sec-12.2.1', 'Intl.DateTimeFormat.prototype')}}{{Spec2('ES Int 1.0')}}Initiale Definition.
{{SpecName('ES Int 2.0', '#sec-12.2.1', 'Intl.DateTimeFormat.prototype')}}{{Spec2('ES Int 2.0')}} 
{{SpecName('ES Int Draft', '#sec-Intl.DateTimeFormat.prototype', 'Intl.DateTimeFormat.prototype')}}{{Spec2('ES Int Draft')}} 

-
-
Browserkompatibilität

-
-

-
-
-
{{Compat("javascript.builtins.Intl.DateTimeFormat.prototype")}}

-

-
-
Siehe auch

-
-
    
- 
  • {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}
    • 
-

diff --git a/files/de/web/javascript/reference/global_objects/intl/numberformat/prototype/index.html b/files/de/web/javascript/reference/global_objects/intl/numberformat/prototype/index.html
deleted file mode 100644
index 142aefbfcc..0000000000
--- a/files/de/web/javascript/reference/global_objects/intl/numberformat/prototype/index.html
+++ /dev/null
@@ -1,82 +0,0 @@
----
-title: Intl.NumberFormat.prototype
-slug: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype
-tags:
-  - Internationalization
-  - JavaScript
-  - NumberFormat
-  - Property
-  - Prototype
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
-translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype
----
-
{{JSRef}}

-
-
Die Intl.NumberFormat.prototype Eigenschaft repräsentiert das Prototypobjekt für einen {{jsxref("NumberFormat", "Intl.NumberFormat")}} Konstruktor.

-
-
{{js_property_attributes(0, 0, 0)}}

-
-
Beschreibung

-
-
Siehe {{jsxref("NumberFormat")}} für eine Beschreibung von Intl.NumberFormat Instanzen.

-
-
{{jsxref("NumberFormat", "Intl.NumberFormat")}} Instanzen erben von Intl.NumberFormat.prototype. Veränderungen am Prototypobjekt werden an alle {{jsxref("NumberFormat", "Intl.NumberFormat")}} Instanzen vererbt.

-
-
Eigenschaften

-
-

- 
Intl.NumberFormat.prototype.constructor

- 
Eine Referenz zu Intl.NumberFormat.

- 
{{jsxref("NumberFormat.format", "Intl.NumberFormat.prototype.format")}}

- 
Getter; gibt eine Funktion zurück, die eine Zahl nach den Sprach- und Formatierungsoptionen dieses {{jsxref("NumberFormat")}} Objektes formatiert.

-

-
-
Methoden

-
-

- 
{{jsxref("NumberFormat.formatToParts", "Intl.NumberFormat.prototype.formatToParts()")}}

- 
Gibt ein {{jsxref("Array")}} mit Objekten zurück, welche die Repräsentation des Zahlenstrings in Teilen enthalten, die für sprachsicheres Formatieren genutzt werden können.

- 
{{jsxref("NumberFormat.resolvedOptions", "Intl.NumberFormat.prototype.resolvedOptions()")}}

- 
Gibt ein neues Objekt mit eigenschaften zurück, die Sprach- und Formatierungsoptionen enthält, die bei der Initialisierung des Objektes errechnet wurden.

-

-
-
Spezifikationen

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
SpezifikationStatusKomment
{{SpecName('ES Int 1.0', '#sec-11.2.1', 'Intl.NumberFormat.prototype')}}{{Spec2('ES Int 1.0')}}Initiale Definition.
{{SpecName('ES Int 2.0', '#sec-11.2.1', 'Intl.NumberFormat.prototype')}}{{Spec2('ES Int 2.0')}} 
{{SpecName('ES Int Draft', '#sec-Intl.NumberFormat.prototype', 'Intl.NumberFormat.prototype')}}{{Spec2('ES Int Draft')}} 

-
-
Browserkompatibilität

-
-

-
-
-
{{Compat("javascript.builtins.Intl.NumberFormat.prototype")}}

-

-
-
Siehe auch

-
-
    
- 
  • {{jsxref("NumberFormat", "Intl.NumberFormat")}}
    • 
-

diff --git a/files/de/web/javascript/reference/global_objects/map/prototype/index.html b/files/de/web/javascript/reference/global_objects/map/prototype/index.html
deleted file mode 100644
index 35399160b1..0000000000
--- a/files/de/web/javascript/reference/global_objects/map/prototype/index.html
+++ /dev/null
@@ -1,87 +0,0 @@
----
-title: Map.prototype
-slug: Web/JavaScript/Reference/Global_Objects/Map/prototype
-tags:
-  - JavaScript
-  - Map
-  - Property
-translation_of: Web/JavaScript/Reference/Global_Objects/Map
-translation_of_original: Web/JavaScript/Reference/Global_Objects/Map/prototype
----
-
{{JSRef}}

-
-
Die Map.prototype Eigenschaft repräsentiert den Prototyp für den {{jsxref("Map")}} Konstruktor.

-
-
{{js_property_attributes(0,0,0)}}

-
-
Beschreibung

-
-
{{jsxref("Map")}} Instanzen erben von {{jsxref("Map.prototype")}}. Man kann das prototype Objekt des Konstruktors nutzen, um Eigenschaften oder Methoden für alle map Instanzen hinzuzufügen.

-
-
Eigenschaften

-
-

- 
Map.prototype.constructor

- 
Gibt die Funktion zurück, die einen Instanzenprototype erstellt. Der Standardwert ist die {{jsxref("Map")}} Funktion.

- 
{{jsxref("Map.prototype.size")}}

- 
Gibt die Anzahl an Schlüssel/Werte-Paaren in dem Map Objekt zurück.

-

-
-
Methoden

-
-

- 
{{jsxref("Map.prototype.clear()")}}

- 
Entfernt alle Schlüssel/Werte-Paare von dem Map Objekt.

- 
{{jsxref("Map.delete", "Map.prototype.delete(schlüssel)")}}

- 
Gibt true zurück, wenn ein Element im Map Objekt existiert und gelöscht wird, oder false wenn das Element nicht existiert. Map.prototype.has(schlüssel) wird danach false zurückgeben.

- 
{{jsxref("Map.prototype.entries()")}}

- 
Gibt ein neues Iterator Objekt mit allen [Schlüssel, Wert] Paaren als Array von jedem Element in dem Map Objekt in Einfügereihenfolge zurück.

- 
{{jsxref("Map.forEach", "Map.prototype.forEach(callbackFn[, thisArg])")}}

- 
Ruft callbackFn einmal für jedes Schlüssel/Wert Paar in dem Map Objekt in der Einfügereihenfolge aus. Wenn ein thisArg Parameter angegeben ist, wird dieser als this für jeden Funktionsaufruf benutzt.

- 
{{jsxref("Map.get", "Map.prototype.get(schlüssel)")}}

- 
Gibt den Wert zu dem zugehörigen schlüssel zurück oder undefined wenn dieser nicht existiert.

- 
{{jsxref("Map.has", "Map.prototype.has(schlüssel)")}}

- 
Gibt einen boolean zurück, der angibt, ob ein Wert mit den schlüssel in einem Map Objekt vorhanden ist oder nicht.

- 
{{jsxref("Map.prototype.keys()")}}

- 
Gibt ein neues Iterator Objekt mit allen Schlüsseln von jedem Element in dem Map Objekt in Einfügereihenfolge zurück.

- 
{{jsxref("Map.set", "Map.prototype.set(schlüssel, wert)")}}

- 
Setzt den wert für einen schlüssel im Map Objekt. Gibt das Map Objekt zurück.

- 
{{jsxref("Map.prototype.values()")}}

- 
Gibt ein neues Iterator Objekt mit allen Werten von jedem Element in dem Map Objekt in Einfügereihenfolge zurück.

- 
{{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}

- 
Gibt ein neues Iterator Objekt mit allen [Schlüssel, Wert] Paaren als Array von jedem Element in dem Map Objekt in Einfügereihenfolge zurück.

-

-
-
Spezifikationen

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
SpezifikationStatusKommentar
{{SpecName('ES2015', '#sec-map.prototype', 'Map.prototype')}}{{Spec2('ES2015')}}Initiale Definition.
{{SpecName('ESDraft', '#sec-map.prototype', 'Map.prototype')}}{{Spec2('ESDraft')}}

-
-
Browserkompatibilität

-
-
-
-
{{Compat("javascript.builtins.Map.prototype")}}

-
-
Siehe auch

-
-
    
- 
  • {{jsxref("Set.prototype")}}
    • 
-

diff --git a/files/de/web/javascript/reference/global_objects/math/math.random/index.html b/files/de/web/javascript/reference/global_objects/math/math.random/index.html
deleted file mode 100644
index 6097229c1a..0000000000
--- a/files/de/web/javascript/reference/global_objects/math/math.random/index.html
+++ /dev/null
@@ -1,112 +0,0 @@
----
-title: Math.random()
-slug: Web/JavaScript/Reference/Global_Objects/Math/math.random
-tags:
-  - JavaScript
-  - Math
-  - Method
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Math/random
----
-
{{JSRef}}

-
-
Die Math.random() Funktion gibt eine Pseudozufallszahl in Form einer Gleitkommazahl im Bereich von 0 - 1 (0 inklusiv, aber 1 nicht) annähernd gleichverteilt zurück, die dann zur gewünschten Größe skaliert werden kann. Die Zufallszahl wird von der Implementierung bestimmt; sie kann nicht vom Benutzer ausgewählt oder zurückgesetzt werden.

-
-
{{EmbedInteractiveExample("pages/js/math-random.html")}}

-
-

-
Math.random() stellt keine kryprografisch sicheren Zufallszahlen bereit. Verwenden Sie sie auf keinen Fall für etwas, das  in Verbindung mit Sicherheit steht. Benutzen Sie stattdessen die Web Crypto API, genauer gesagt die {{domxref("RandomSource.getRandomValues()", "window.crypto.getRandomValues()")}}-Methode.

-

-
-
Syntax

-
-
Math.random()

-
-
Rückgabewert

-
-
Eine pseudozufällige Gleitkommazahl zwischen 0 (inklusiv) und 1 (exklusiv).

-
-
Beispiele

-
-
Beachten Sie, dass, weil Zahlen in JavaScript IEEE 754 Gleitkommazahlen sind, mit dem Verhalten zur nächsten geraden Zahl zu runden, die Bereiche für die folgenden Funktionen - mit Ausnahme für Math.random() selbst - nicht exakt sind.

- Wenn extrem große Grenzen (253 oder höher) gewählt werden, ist es in äußerst seltenen Fällen möglich, dass die eigentlich ausgeschlossenen Obergrenzen mit eingerechnet werden.

-
-
Erzeugt eine Zufallszahl zwischen 0 (inklusive) und 1 (exklusive)

-
-
function getRandom() {
-  return Math.random();
-}
-

-
-
Erzeugt eine Zufallszahl zwischen zwei Zahlen

-
-
Das Beispiel gibt eine zufällige Zahl zwischen zwei Zahlen zurück. Der Rückgabewert is größer oder gleich min und kleiner als max.

-
-
function getRandomArbitrary(min, max) {
-  return Math.random() * (max - min) + min;
-}
-

-
-
Erzeugt eine ganze Zufallszahl zwischen zwei Zahlen

-
-
Das Beispiel gibt eine zufällige ganze Zahl zwischen den spezifizierten Werten zurück. Der Wert ist nicht kleiner als min (oder der nächstgrößeren ganzen Zahl von min, wenn min keine ganze Zahl ist) und ist kleiner als  (aber nicht gleich) max.

-
-
function getRandomInt(min, max) {
-  min = Math.ceil(min);
-  max = Math.floor(max);
-  return Math.floor(Math.random() * (max - min)) + min;
-}
-

-
-

-
Es könnte verlockend sein, Math.round() zu verwenden, um das Ergebnis zu erreichen, aber das würde dazu führen, dass die zufälligen Zahlen einer ungleichmäßigen Verteilung folgen würden, die möglicherweise nicht den geforderten Bedürfnisse entsprechen würde.

-

-
-
Erzeugt eine ganze Zufallszahl zwischen zwei Zahlen (inklusiv)

-
-
Die obere getRandomInt() Funktion hat ein inklusives Minimum und ein exklusives Maximum. Was ist, wenn sowohl das Minimum als auch das Maximum inklusive sein sollen? Die getRandomIntInclusive() Funktion ermöglicht dieses:

-
-
function getRandomIntInclusive(min, max) {
-  min = Math.ceil(min);
-  max = Math.floor(max);
-  return Math.floor(Math.random() * (max - min +1)) + min;
-}
-

-
-
Spezifikationen

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
SpezifikationStatusKommentar
{{SpecName('ES1')}}{{Spec2('ES1')}}Initiale Definition. JavaScript 1.0 (nur auf UNIX) / JavaScript 1.1 (auf allen Plattformen).
{{SpecName('ES5.1', '#sec-15.8.2.14', 'Math.random')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-math.random', 'Math.random')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-math.random', 'Math.random')}}{{Spec2('ESDraft')}}

-
-
Browserkompatibilität

-
-
-
-
{{Compat("javascript.builtins.Math.random")}}

diff --git a/files/de/web/javascript/reference/global_objects/math/random/index.html b/files/de/web/javascript/reference/global_objects/math/random/index.html
new file mode 100644
index 0000000000..6097229c1a
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/math/random/index.html
@@ -0,0 +1,112 @@
+---
+title: Math.random()
+slug: Web/JavaScript/Reference/Global_Objects/Math/math.random
+tags:
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/random
+---
+
{{JSRef}}

+
+
Die Math.random() Funktion gibt eine Pseudozufallszahl in Form einer Gleitkommazahl im Bereich von 0 - 1 (0 inklusiv, aber 1 nicht) annähernd gleichverteilt zurück, die dann zur gewünschten Größe skaliert werden kann. Die Zufallszahl wird von der Implementierung bestimmt; sie kann nicht vom Benutzer ausgewählt oder zurückgesetzt werden.

+
+
{{EmbedInteractiveExample("pages/js/math-random.html")}}

+
+

+
Math.random() stellt keine kryprografisch sicheren Zufallszahlen bereit. Verwenden Sie sie auf keinen Fall für etwas, das  in Verbindung mit Sicherheit steht. Benutzen Sie stattdessen die Web Crypto API, genauer gesagt die {{domxref("RandomSource.getRandomValues()", "window.crypto.getRandomValues()")}}-Methode.

+

+
+
Syntax

+
+
Math.random()

+
+
Rückgabewert

+
+
Eine pseudozufällige Gleitkommazahl zwischen 0 (inklusiv) und 1 (exklusiv).

+
+
Beispiele

+
+
Beachten Sie, dass, weil Zahlen in JavaScript IEEE 754 Gleitkommazahlen sind, mit dem Verhalten zur nächsten geraden Zahl zu runden, die Bereiche für die folgenden Funktionen - mit Ausnahme für Math.random() selbst - nicht exakt sind.

+ Wenn extrem große Grenzen (253 oder höher) gewählt werden, ist es in äußerst seltenen Fällen möglich, dass die eigentlich ausgeschlossenen Obergrenzen mit eingerechnet werden.

+
+
Erzeugt eine Zufallszahl zwischen 0 (inklusive) und 1 (exklusive)

+
+
function getRandom() {
+  return Math.random();
+}
+

+
+
Erzeugt eine Zufallszahl zwischen zwei Zahlen

+
+
Das Beispiel gibt eine zufällige Zahl zwischen zwei Zahlen zurück. Der Rückgabewert is größer oder gleich min und kleiner als max.

+
+
function getRandomArbitrary(min, max) {
+  return Math.random() * (max - min) + min;
+}
+

+
+
Erzeugt eine ganze Zufallszahl zwischen zwei Zahlen

+
+
Das Beispiel gibt eine zufällige ganze Zahl zwischen den spezifizierten Werten zurück. Der Wert ist nicht kleiner als min (oder der nächstgrößeren ganzen Zahl von min, wenn min keine ganze Zahl ist) und ist kleiner als  (aber nicht gleich) max.

+
+
function getRandomInt(min, max) {
+  min = Math.ceil(min);
+  max = Math.floor(max);
+  return Math.floor(Math.random() * (max - min)) + min;
+}
+

+
+

+
Es könnte verlockend sein, Math.round() zu verwenden, um das Ergebnis zu erreichen, aber das würde dazu führen, dass die zufälligen Zahlen einer ungleichmäßigen Verteilung folgen würden, die möglicherweise nicht den geforderten Bedürfnisse entsprechen würde.

+

+
+
Erzeugt eine ganze Zufallszahl zwischen zwei Zahlen (inklusiv)

+
+
Die obere getRandomInt() Funktion hat ein inklusives Minimum und ein exklusives Maximum. Was ist, wenn sowohl das Minimum als auch das Maximum inklusive sein sollen? Die getRandomIntInclusive() Funktion ermöglicht dieses:

+
+
function getRandomIntInclusive(min, max) {
+  min = Math.ceil(min);
+  max = Math.floor(max);
+  return Math.floor(Math.random() * (max - min +1)) + min;
+}
+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('ES1')}}{{Spec2('ES1')}}Initiale Definition. JavaScript 1.0 (nur auf UNIX) / JavaScript 1.1 (auf allen Plattformen).
{{SpecName('ES5.1', '#sec-15.8.2.14', 'Math.random')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-math.random', 'Math.random')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-math.random', 'Math.random')}}{{Spec2('ESDraft')}}

+
+
Browserkompatibilität

+
+
+
+
{{Compat("javascript.builtins.Math.random")}}

diff --git a/files/de/web/javascript/reference/global_objects/number/prototype/index.html b/files/de/web/javascript/reference/global_objects/number/prototype/index.html
deleted file mode 100644
index f44a20d90d..0000000000
--- a/files/de/web/javascript/reference/global_objects/number/prototype/index.html
+++ /dev/null
@@ -1,90 +0,0 @@
----
-title: Number.prototype
-slug: Web/JavaScript/Reference/Global_Objects/Number/prototype
-tags:
-  - JavaScript
-  - Number
-  - Property
-  - Prototype
-translation_of: Web/JavaScript/Reference/Global_Objects/Number
-translation_of_original: Web/JavaScript/Reference/Global_Objects/Number/prototype
----
-
{{JSRef}}

-
-
Die Eigenschaft Number.prototype repräsentiert den Prototypen für den {{jsxref("Number")}} Konstruktor.

-
-
{{js_property_attributes(0, 0, 0)}}

-
-
Beschreibung

-
-
Alle {{jsxref("Number")}} Instanzen erben von Number.prototype. Das prototype Objekt des {{jsxref("Number")}} Konstruktors kann verändert werden um alle Instanzen von {{jsxref( "Number")}} zu erweitern.

-
-
Eigenschaften

-
-

- 
Number.prototype.constructor

- 
Gibt die Funktion zurück, die die Instanz dieses Objektes erzeugt hat. Als Standardwert ist das das {{jsxref("Number")}} Objekt.

-

-
-
Methoden

-
-

- 
{{jsxref("Number.prototype.toExponential()")}}

- 
Gibt eine Zeichenkette (string) zurück, die die Nummer in Exponential Notation repräsentiert.

- 
{{jsxref("Number.prototype.toFixed()")}}

- 
Gibt eine Zeichenkette (string) zurück, die die Nummer als Festkommazahl repräsentiert.

- 
{{jsxref("Number.prototype.toLocaleString()")}}

- 
Gibt eine Zeichenkette (string) zurück, die die sprachenübliche Repräsentation der Nummer repräsentiert. Überschreibt die  {{jsxref("Object.prototype.toLocaleString()")}} Methode.

- 
{{jsxref("Number.prototype.toPrecision()")}}

- 
Gibt eine Zeichenzette (string) zurück, die die Zahl in einer bestimmten Genauigkeit als Festkommazahl repräsentiert.

- 
{{jsxref("Number.prototype.toSource()")}} {{non-standard_inline}}

- 
Gibt ein Objektliteral zurück, welches das {{jsxref("Number")}} Objekt spezifiziert. Diese Methode kann genutzt werden, um ein neues Objekt zu erzeugen. Überschreibt die {{jsxref("Object.prototype.toSource()")}} Methode.

- 
{{jsxref("Number.prototype.toString()")}}

- 
Gibt eine Zeichenkette (string) zurück, die die Zahl in einer bestimmten Basis repräsentiert. Überschreibt die {{jsxref("Object.prototype.toString()")}} Methode.

- 
{{jsxref("Number.prototype.valueOf()")}}

- 
Gibt einen primitiven Wert des Objektes zurück. Überschreibt die {{jsxref("Object.prototype.valueOf()")}} Methode.

-

-
-
Spezifikationen

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
SpezifikationStatusKommentar
{{SpecName('ES1')}}{{Spec2('ES1')}}Initiale Definition. Implementiert in JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.7.4', 'Number')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-properties-of-the-number-prototype-object', 'Number')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-properties-of-the-number-prototype-object', 'Number')}}{{Spec2('ESDraft')}} 

-
-
Browserkompatibilität

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

-
-
Siehe auch

-
-
    
- 
  • {{jsxref("Number")}}
    • 
-

diff --git a/files/de/web/javascript/reference/global_objects/object/prototype/index.html b/files/de/web/javascript/reference/global_objects/object/prototype/index.html
deleted file mode 100644
index d6fdd3de2b..0000000000
--- a/files/de/web/javascript/reference/global_objects/object/prototype/index.html
+++ /dev/null
@@ -1,220 +0,0 @@
----
-title: Object.prototype
-slug: Web/JavaScript/Reference/Global_Objects/Object/prototype
-translation_of: Web/JavaScript/Reference/Global_Objects/Object
-translation_of_original: Web/JavaScript/Reference/Global_Objects/Object/prototype
----
-
{{JSRef}}

-
-
Das Object.prototype Attribut repräsentiert das Prototype Objekt von {{jsxref("Object")}}.

-
-
{{js_property_attributes(0, 0, 0)}}

-
-
Beschreibung

-
-
Alle Objekte in JavaScript stammen von {{jsxref("Object")}}; alle Objekte erben Methoden und Attribute von Object.prototype, wobei diese  überschrieben werden können (mit Ausnahme von Objekten mit einem null-Prototyp, sprich Object.create(null)). Die Prototypen anderer Konstruktoren zum Beispiel, überschreiben das constructor Attribut und stellen ihre eigenen Methoden zur Verfügung {{jsxref("Object.prototype.toString()", "toString()")}}. Änderungen am  Object prototype Objekt werden an alle Objekte weitergeleitet, solange die betroffenen Attribute und Methoden nicht zuvor in der Kette der Prototypen überschrieben wurden.

-
-
Attribute

-
-

- 
{{jsxref("Object.prototype.constructor")}}

- 
Die Funktion, die den Prototypen eines Objekts erstellt.

- 
{{jsxref("Object.prototype.__proto__")}} {{non-standard_inline}}

- 
Zeigt auf das Objekt, das als bei der Initialisierung des Objektes als Prototyp diente.

- 
{{jsxref("Object.prototype.__noSuchMethod__")}} {{non-standard_inline}}

- 
Erlaubt das Erstellen einer Funktion, die dann ausgeführt wird, wenn ein undefiniertes Objekt als Methode aufgerufen wird.

- 
{{jsxref("Object.prototype.count","Object.prototype.__count__")}} {{obsolete_inline}}

- 
Wurde benutzt um die Anzahl der aufzählbaren Attribute direkt durch das Objekt zurückzugeben; mittlerweile entfernt.

- 
{{jsxref("Object.prototype.parent","Object.prototype.__parent__")}} {{obsolete_inline}}

- 
Wurde benutzt um auf den Kontext eines Objektes zu verweisen; mittlerweile entfernt.

-

-
-
Methoden

-
-

- 
{{jsxref("Object.prototype.__defineGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}

- 
Verknüpft eine Funktion mit einem Attribut, das, wenn darauf zugegriffen wird eine Funktion ausführt und deren Rückgabewert zurück gibt.

- 
{{jsxref("Object.prototype.__defineSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}

- 
Verknüpft eine Funktion mit einem Attribut, das, wenn dieses gesetzt werden soll, eine Funktion ausführt, die das Attribut modifiziert.

- 
{{jsxref("Object.prototype.__lookupGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}

- 
Gibt die Funktion zurück, die mit dem spezifizierten Attribut über die Methode {{jsxref("Object.prototype.__defineGetter__()", "__defineGetter__()")}} verknüpft ist.

- 
{{jsxref("Object.prototype.__lookupSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}

- 
Gibt die Funktion zurück, die mit dem spezifizierten Attribut über die Methode {{jsxref("Object.prototype.__defineSetter__()", "__defineSetter__()")}} verknüpft ist.

- 
{{jsxref("Object.prototype.hasOwnProperty()")}}

- 
Gibt einen Boolean Wert zurück, der anzeigt, ob ein Attribut ein direktes Attribut dieses Objekts ist, oder über Vererbung durch einen Prototypen hinzugefügt wurde.

- 
{{jsxref("Object.prototype.isPrototypeOf()")}}

- 
Gibt einen Boolean Wert zurück, der anzeigt, ob das spezifizierte Objekt in der Prototyp-Kette des Objekts, das diese Funktion aufruft, enthalten ist.

- 
{{jsxref("Object.prototype.propertyIsEnumerable()")}}

- 
Gibt einen Boolean Wert zurück, der anzeigt, ob das interne ECMAScript [[Enumerable]] attribute gesetzt ist.

- 
{{jsxref("Object.prototype.toSource()")}} {{non-standard_inline}}

- 
Liefert einen String zurück, der die Quelle eines Objekt-Literals enthält, und das Objekt darstellt, das diese Funktion aufruft; man kann diesen Wert benutzen, um ein neues Objekt zu erstellen.

- 
{{jsxref("Object.prototype.toLocaleString()")}}

- 
Ruft {{jsxref("Object.toString", "toString()")}} auf.

- 
{{jsxref("Object.prototype.toString()")}}

- 
Gibt eine String-Darstellung des Objekts zurück.

- 
{{jsxref("Object.prototype.unwatch()")}} {{non-standard_inline}}

- 
Entfernt einen Kontrollpunkt von einem Attribut des Objekts.

- 
{{jsxref("Object.prototype.valueOf()")}}

- 
Gibt den primitiven Wert des spezifizierten Objekts zurück.

- 
{{jsxref("Object.prototype.watch()")}} {{non-standard_inline}}

- 
Fügt einem Attribut des Objekts einen Kontrollpunkt hinzu.

- 
{{jsxref("Object.prototype.eval()")}} {{obsolete_inline}}

- 
Wurde genutzt, um einen String bestehend aus JavaScript Code, im Kontext des aktuellen Objekts auszuwerten; wurde entfernt;

-

-
-
Beispiele

-
-
Weil JavaScript keine klassischen Sub-Klassen-Funktionalität hat, sind Prototypen ein guter Weg, um "Base Class" Objekte mit bestimmten Funktionen zu erstellen, die als Objekte fungieren. Zum Beispiel:

-
-
var Person = function() {
-  this.canTalk = true;
-};
-
-Person.prototype.greet = function() {
-  if (this.canTalk) {
-    console.log('Hi, I am ' + this.name);
-  }
-};
-
-var Employee = function(name, title) {
-  Person.call(this);
-  this.name = name;
-  this.title = title;
-};
-
-Employee.prototype = Object.create(Person.prototype);
-Employee.prototype.constructor = Employee;
-
-Employee.prototype.greet = function() {
-  if (this.canTalk) {
-    console.log('Hi, I am ' + this.name + ', the ' + this.title);
-  }
-};
-
-var Customer = function(name) {
-  Person.call(this);
-  this.name = name;
-};
-
-Customer.prototype = Object.create(Person.prototype);
-Customer.prototype.constructor = Customer;
-
-var Mime = function(name) {
-  Person.call(this);
-  this.name = name;
-  this.canTalk = false;
-};
-
-Mime.prototype = Object.create(Person.prototype);
-Mime.prototype.constructor = Mime;
-
-var bob = new Employee('Bob', 'Builder');
-var joe = new Customer('Joe');
-var rg = new Employee('Red Green', 'Handyman');
-var mike = new Customer('Mike');
-var mime = new Mime('Mime');
-
-bob.greet();
-// Hi, I am Bob, the Builder
-
-joe.greet();
-// Hi, I am Joe
-
-rg.greet();
-// Hi, I am Red Green, the Handyman
-
-mike.greet();
-// Hi, I am Mike
-
-mime.greet();
-

-
-
Spezifikationen

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition. Implemented in JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.2.3.1', 'Object.prototype')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-object.prototype', 'Object.prototype')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-object.prototype', 'Object.prototype')}}{{Spec2('ESDraft')}} 

-
-
Browser Kompatibilität

-
-
{{CompatibilityTable}}

-
-

-
- 
-  
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-  
- 
-
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}

-

-
-

-
- 
-  
-   
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-   
-  
- 
-
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}

-

-
-
See also

-
-
diff --git a/files/de/web/javascript/reference/global_objects/rangeerror/prototype/index.html b/files/de/web/javascript/reference/global_objects/rangeerror/prototype/index.html
deleted file mode 100644
index fba99e1e5a..0000000000
--- a/files/de/web/javascript/reference/global_objects/rangeerror/prototype/index.html
+++ /dev/null
@@ -1,129 +0,0 @@
----
-title: RangeError.prototype
-slug: Web/JavaScript/Reference/Global_Objects/RangeError/prototype
-translation_of: Web/JavaScript/Reference/Global_Objects/RangeError
-translation_of_original: Web/JavaScript/Reference/Global_Objects/RangeError/prototype
----
-
{{JSRef}}

-
-
Die RangeError.prototype Eigenschaft repräsentiert den Prototypen des {{jsxref("RangeError")}} Konstruktoren.

-
-
{{js_property_attributes(0, 0, 0)}}

-
-
Beschreibung

-
-
Alle {{jsxref("RangeError")}} Instanzen erben vom RangeError.prototype. Man kann den Prototypen nutzen um Eigenschaften oder Methoden allen Instanzen hinzuzufügen.

-
-
Eigenschaften

-
-

- 
RangeError.prototype.constructor

- 
Spezifiziert die Funktion welche den Prototypen einer Instanz erschaffen hat.

- 
{{jsxref("Error.prototype.message", "RangeError.prototype.message")}}

- 
Fehlermeldung. Obwohl ECMA-262 angibt, dass {{jsxref("RangeError")}} seine eigene message Eigenschaft versorgen sollte, erbt es in SpiderMonkey die {{jsxref("Error.prototype.message")}}.

- 
{{jsxref("Error.prototype.name", "RangeError.prototype.name")}}

- 
Fehlername. Geerbt von {{jsxref("Error")}}.

- 
{{jsxref("Error.prototype.fileName", "RangeError.prototype.fileName")}}

- 
Der Dateipfad verursacht diesen Fehler. Geerbt von {{jsxref("Error")}}.

- 
{{jsxref("Error.prototype.lineNumber", "RangeError.prototype.lineNumber")}}

- 
Die Zeile in der Datei, bei der der Fehler auftritt. Geerbt von {{jsxref("Error")}}.

- 
{{jsxref("Error.prototype.columnNumber", "RangeError.prototype.columnNumber")}}

- 
Die Spaltennummer der Zeile , bei der der Fehler auftritt. Geerbt von {{jsxref("Error")}}.

- 
{{jsxref("Error.prototype.stack", "RangeError.prototype.stack")}}

- 
Stack - Ablaufverfolgung. Geerbt von {{jsxref("Error")}}.

-

-
-
Methoden

-
-
 Obwohl das {{jsxref("RangeError")}} Prototypobjekt keine eigenen Methoden beinhaltet, beerben {{jsxref("RangeError")}} Instanzen einige Methoden durch die Prototypenkette.

-
-
Spezifikationen

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
SpezifikationStatusBeschreibung
{{SpecName('ES3')}}{{Spec2('ES3')}}Initialdefinition.
{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}{{Spec2('ES5.1')}}Definiert als NativeError.prototype.
{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ES6')}}Definiert als NativeError.prototype.
{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ESDraft')}}Definiert als NativeError.prototype.

-
-
Browserkompatibilität

-
-
{{CompatibilityTable}}

-
-

-
- 
-  
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-  
- 
-
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}

-

-
-

-
- 
-  
-   
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-   
-  
- 
-
MerkmalAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}

-

-
-
Siehe auch

-
-
    
- 
  • {{jsxref("Error.prototype")}}
    • 
- 
  • {{jsxref("Function.prototype")}}
    • 
-

diff --git a/files/de/web/javascript/reference/global_objects/string/prototype/index.html b/files/de/web/javascript/reference/global_objects/string/prototype/index.html
deleted file mode 100644
index aad1a12ead..0000000000
--- a/files/de/web/javascript/reference/global_objects/string/prototype/index.html
+++ /dev/null
@@ -1,190 +0,0 @@
----
-title: String.prototype
-slug: Web/JavaScript/Reference/Global_Objects/String/prototype
-tags:
-  - Eigentum
-  - JavaScript
-  - Prototyp
-  - Referenz
-  - Strang
-  - String
-translation_of: Web/JavaScript/Reference/Global_Objects/String
-translation_of_original: Web/JavaScript/Reference/Global_Objects/String/prototype
----
-
{{JSRef}}

-
-
Die String.prototypeEigenschaft repräsentiert das Prototypobjekt {{jsxref ("String")}}.

-
-
{{js_property_attributes(0, 0, 0)}}

-
-
Beschreibung

-
-
Alle {{jsxref ("String")}} Instanzen erben von String.prototype. Änderungen am StringPrototypobjekt werden an alle Instanzen von {{jsxref ("String")}} weitergegeben.

-
-
Eigenschaften

-
-

- 
String.prototype.constructor

- 
Gibt die Funktion an, mit der der Prototyp eines Objekts erstellt wird.

- 
{{jsxref ("String.prototype.length")}}

- 
Reflektiert die Länge der Zeichenfolge.

- 
N

- 
Wird verwendet, um auf das Zeichen an der N- ten Position zuzugreifen, wobei N eine ganze Zahl zwischen 0 und eins ist, die kleiner als der Wert von {{jsxref ("String.length", "length")} ist. Diese Eigenschaften sind schreibgeschützt.

-

-
-
Methods

-
-
Methoden

-
-
Methoden, die nichts mit HTML zu tun haben

-
-

- 
{{jsxref ("String.prototype.charAt ()")}}

- 
Gibt das Zeichen (genau eine UTF-16-Codeeinheit) am angegebenen Index zurück.

- 
{{jsxref ("String.prototype.charCodeAt ()")}}

- 
Gibt eine Zahl zurück, die der UTF-16-Code-Einheitswert am angegebenen Index ist.

- 
{{jsxref ("String.prototype.codePointAt ()")}}

- 
Gibt eine nicht negative Ganzzahl zurück, die der Codepunktwert des UTF-16-codierten Codepunkts ab dem angegebenen Index ist.

- 
{{jsxref ("String.prototype.concat ()")}}

- 
Kombiniert den Text zweier Zeichenfolgen und gibt eine neue Zeichenfolge zurück.

- 
{{jsxref ("String.prototype.includes ()")}}

- 
Legt fest, ob eine Zeichenfolge in einer anderen Zeichenfolge gefunden werden darf.

- 
{{jsxref ("String.prototype.endsWith ()")}}

- 
Bestimmt, ob eine Zeichenfolge mit den Zeichen einer anderen Zeichenfolge endet.

- 
{{jsxref ("String.prototype.indexOf ()")}}

- 
Gibt den Index innerhalb des aufrufenden {{jsxref ("String")}} Objekts des ersten Vorkommens des angegebenen Werts zurück oder -1, falls nicht gefunden.

- 
{{jsxref ("String.prototype.lastIndexOf ()")}}

- 
Gibt den Index innerhalb des aufrufenden {{jsxref ("String")}} Objekts des letzten Vorkommens des angegebenen Werts zurück oder -1, falls nicht gefunden.

- 
{{jsxref ("String.prototype.localeCompare ()")}}

- 
Gibt eine Zahl zurück, die angibt, ob eine Referenzzeichenfolge vor oder nach der angegebenen Zeichenfolge in Sortierreihenfolge steht oder mit dieser übereinstimmt.

- 
{{jsxref ("String.prototype.match ()")}}

- 
Wird verwendet, um einen regulären Ausdruck mit einer Zeichenfolge abzugleichen.

- 
{{jsxref ("String.prototype.matchAll ()")}}

- 
Gibt einen Iterator aller Übereinstimmungen zurück.

- 
{{jsxref ("String.prototype.normalize ()")}}

- 
Gibt die Unicode-Normalisierungsform des aufrufenden Zeichenfolgenwerts zurück.

- 
{{jsxref ("String.prototype.padEnd ()")}}

- 
Füllt die aktuelle Zeichenfolge am Ende mit einer bestimmten Zeichenfolge auf, um aus einer bestimmten Länge eine neue Zeichenfolge zu erstellen.

- 
{{jsxref ("String.prototype.padStart ()")}}

- 
Füllt die aktuelle Zeichenfolge von Anfang an mit einer bestimmten Zeichenfolge auf, um aus einer bestimmten Länge eine neue Zeichenfolge zu erstellen.

- 
{{jsxref ("String.prototype.quote ()")}} {{obsolete_inline}}

- 
Umschließt die Zeichenfolge in doppelte Anführungszeichen (" "").

- 
{{jsxref ("String.prototype.repeat ()")}}

- 
Gibt eine Zeichenfolge zurück, die aus den Elementen des Objekts besteht, die zu den angegebenen Zeiten wiederholt wurden.

- 
{{jsxref ("String.prototype.replace ()")}}

- 
Wird verwendet, um eine Übereinstimmung zwischen einem regulären Ausdruck und einer Zeichenfolge zu finden und die übereinstimmende Teilzeichenfolge durch eine neue Teilzeichenfolge zu ersetzen.

- 
{{jsxref ("String.prototype.search ()")}}

- 
Führt die Suche nach einer Übereinstimmung zwischen einem regulären Ausdruck und einer angegebenen Zeichenfolge aus.

- 
{{jsxref ("String.prototype.slice ()")}}

- 
Extrahiert einen Abschnitt einer Zeichenfolge und gibt eine neue Zeichenfolge zurück.

- 
{{jsxref ("String.prototype.split ()")}}

- 
Teilt ein {{jsxref ("Global_Objects / String", "String")}} -Objekt in ein Array von Zeichenfolgen auf, indem die Zeichenfolge in Teilzeichenfolgen aufgeteilt wird.

- 
{{jsxref ("String.prototype.startsWith ()")}}

- 
Legt fest, ob eine Zeichenfolge mit den Zeichen einer anderen Zeichenfolge beginnt.

- 
{{jsxref ("String.prototype.substr ()")}} {{deprecated_inline}}

- 
Gibt die Zeichen in einer Zeichenfolge zurück, die an der angegebenen Position mit der angegebenen Anzahl von Zeichen beginnt.

- 
{{jsxref ("String.prototype.substring ()")}}

- 
Gibt die Zeichen in einer Zeichenfolge zwischen zwei Indizes in die Zeichenfolge zurück.

- 
{{jsxref ("String.prototype.toLocaleLowerCase ()")}}

- 
Die Zeichen in einer Zeichenfolge werden unter Berücksichtigung des aktuellen Gebietsschemas in Kleinbuchstaben konvertiert. Für die meisten Sprachen wird das Gleiche wie {{jsxref ("String.prototype.toLowerCase ()", "toLowerCase ()")}} zurückgegeben.

- 
{{jsxref ("String.prototype.toLocaleUpperCase ()")}}

- 
Die Zeichen in einer Zeichenfolge werden unter Berücksichtigung des aktuellen Gebietsschemas in Großbuchstaben umgewandelt. Für die meisten Sprachen wird das Gleiche wie {{jsxref ("String.prototype.toUpperCase ()", "toUpperCase ()")}} zurückgegeben.

- 
{{jsxref ("String.prototype.toLowerCase ()")}}

- 
Gibt den aufrufenden Zeichenfolgenwert zurück, der in Kleinbuchstaben konvertiert wurde.

- 
{{jsxref ("String.prototype.toSource ()")}} {{non-standard_inline}}

- 
Gibt ein Objektliteral zurück, das das angegebene Objekt darstellt. Mit diesem Wert können Sie ein neues Objekt erstellen. Überschreibt die Methode {{jsxref ("Object.prototype.toSource ()")}}.

- 
{{jsxref ("String.prototype.toString ()")}}

- 
Gibt eine Zeichenfolge zurück, die das angegebene Objekt darstellt. Überschreibt die Methode {{jsxref ("Object.prototype.toString ()")}}.

- 
{{jsxref ("String.prototype.toUpperCase ()")}}

- 
Gibt den aufrufenden Zeichenfolgenwert zurück, der in Großbuchstaben konvertiert wurde.

- 
{{jsxref ("String.prototype.trim ()")}}

- 
Schneidet Leerzeichen vom Anfang und Ende der Zeichenfolge ab. Teil des ECMAScript 5-Standards.

- 
{{jsxref ("String.prototype.trimStart ()")}}

- {{jsxref ("String.prototype.trimLeft ()")}}

- 
Schneidet Leerzeichen vom Anfang der Zeichenfolge ab.

- 
{{jsxref ("String.prototype.trimEnd ()")}}

- {{jsxref ("String.prototype.trimRight ()")}

- 
Schneidet Leerzeichen vom Ende der Zeichenfolge ab.

- 
{{jsxref ("String.prototype.valueOf ()")}}

- 
Gibt den Grundwert des angegebenen Objekts zurück. Überschreibt die Methode {{jsxref ("Object.prototype.valueOf ()")}}.

- 
{{jsxref ("String.prototype. @@ iterator ()", "String.prototype [@@ iterator] ()")}}

- 
Gibt ein neues IteratorObjekt zurück, das die Codepunkte eines String-Werts durchläuft und jeden Codepunkt als String-Wert zurückgibt.

-

-
-
HTML-Wrapper-Methoden

-
-
Diese Methoden sind nur eingeschränkt einsetzbar, da sie nur einen Teil der verfügbaren HTML-Tags und -Attribute bereitstellen.

-
-

- 
{{jsxref ("String.prototype.anchor ()")}} {{deprecated_inline}}

- 
{{htmlattrxref ("name", "a", "<a name=\"name\">")}} (Hypertext-Ziel)

- 
{{jsxref ("String.prototype.big ()")}} {{deprecated_inline}}

- 
{{HTMLElement ("big")}}

- 
{{jsxref ("String.prototype.blink ()")}} {{deprecated_inline}}

- 
{{HTMLElement ("blinken")}}

- 
{{jsxref ("String.prototype.bold ()")}} {{deprecated_inline}}

- 
{{HTMLElement ("b")}}

- 
{{jsxref ("String.prototype.fixed ()")}} {{deprecated_inline}}

- 
{{HTMLElement ("tt")}}

- 
{{jsxref ("String.prototype.fontcolor ()")}} {{deprecated_inline}}

- 
{{htmlattrxref ("color", "font", "<font color = \" color \ ">")}}

- 
{{jsxref ("String.prototype.fontsize ()")}} {{deprecated_inline}}

- 
{{htmlattrxref ("size", "font", "<font size = \" size \ ">")}}

- 
{{jsxref ("String.prototype.italics ()")}} {{deprecated_inline}}

- 
{{HTMLElement ("i")}}

- 
{{jsxref ("String.prototype.link ()")}} {{deprecated_inline}}

- 
{{htmlattrxref ("href", "a", "<a href=\"url\">")}} (Link zu URL)

- 
{{jsxref ("String.prototype.small ()")}} {{deprecated_inline}}

- 
{{HTMLElement ("small")}}

- 
{{jsxref ("String.prototype.strike ()")}} {{deprecated_inline}}

- 
{{HTMLElement ("strike")}}

- 
{{jsxref ("String.prototype.sub ()")}} {{deprecated_inline}}

- 
{{HTMLElement ("sub")}}

- 
{{jsxref ("String.prototype.sup ()")}} {{deprecated_inline}}

- 
{{HTMLElement ("sup")}}

-

-
-
Specifications

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Anfangsdefinition.
{{SpecName('ES5.1', '#sec-15.5.3.1', 'String.prototype')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-string.prototype', 'String.prototype')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-string.prototype', 'String.prototype')}}{{Spec2('ESDraft')}}

-
-
Browser-Kompatibilität

-
-
-
-
{{Compat("javascript.builtins.String.prototype")}}

-
-
Sieh auch

-
-
    
- 
  • {{jsxref("String")}}
    • 
- 
  • {{jsxref("Function.prototype")}}
    • 
-

diff --git a/files/de/web/javascript/reference/global_objects/string/search/index.html b/files/de/web/javascript/reference/global_objects/string/search/index.html
new file mode 100644
index 0000000000..5fb838010a
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/string/search/index.html
@@ -0,0 +1,105 @@
+---
+title: String.prototype.search()
+slug: Web/JavaScript/Reference/Global_Objects/String/suchen
+tags:
+  - JavaScript
+  - Méthode
+  - Prototyp
+  - Referenz
+  - Regulärer Ausdruck
+  - Zeichenkette
+translation_of: Web/JavaScript/Reference/Global_Objects/String/search
+---
+
{{JSRef}}

+
+
Die search() methode führt eine Suche für eine Übereinstimmung von einem Regulären Ausdruck und diesem {{jsxref("String")}} Objekt.

+
+
{{EmbedInteractiveExample("pages/js/string-search.html")}}

+
+
+
+
Syntax

+
+
str.search(regexp)

+
+
Parameter

+
+

+ 
regexp

+ 
Ein Regulär-Ausdruck Objekt. Wenn ein nicht-RegExp Objekt obj eingereicht wird, wird es durch new RegExp(obj) zu {{jsxref("RegExp")}} konvertiert.

+

+
+
Rückgabewert

+
+
Die erste übereinstimmung zwischen dem Regulären Audruck und und der gegebenen Zeichenkette; wenn nicht gefunden, -1.

+
+
Beschreibung

+
+
Wenn du wissen willst ob ein Muster gefunden wurde, und was sein Index ist nutze search() (wenn du nur wissen willst ob es das gibt nutze die ähnliche {{jsxref("RegExp.prototype.test()", "test()")}} Methode auf dem RegExp Prototyp, der einen boolean zurückgibt); für mehr informationen (aber langsamererere Ausführung) nutze {{jsxref("String.prototype.match()", "match()")}} (ähnlich zum Ausdruck {{jsxref("RegExp.prototype.exec()", "exec()")}}).

+
+
Beispiele

+
+
+
+
Das folgende Beispiel durchsucht eine Zeichenkette mit 2 verschiedenen regex Objekten, um eine erfolgreiche, und unerfolgreiche Suche zu zeigen.

+
+
var str = "hey LukE";
+var re = /[A-Z]/g;
+var re2 = /[.]/g;
+console.log(str.search(re)); // gibt 4 zurück, was der Index des ersten Großbuchstaben "L" ist.
+console.log(str.search(re2)); // gibt -1 zurück kann "." nicht finden

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('ES3')}}{{Spec2('ES3')}}Initielle Definition. Eingeführt in JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.5.4.12', 'String.prototype.search')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-string.prototype.search', 'String.prototype.search')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-string.prototype.search', 'String.prototype.search')}}{{Spec2('ESDraft')}}

+
+
Browser Kompatibilität

+
+
+
+
{{Compat("javascript.builtins.String.search")}}

+
+
Gecko-spezifische Hinweise

+
+
    
+ 
  • flags war ein nicht-standard Zweitargument nur in Gecko verfügbar: str.search(regexp, flags)
    • 
+ 
  • Vorher {{Gecko("8.0")}}, search() war falsch eingeführt; wenn es ohne oder mit {{jsxref("undefined")}} parametern Ausgeführt wurde, würde es mit 'undefined' übereinstimmen, anstatt mit einer leeren Zeichenkette übereinzustimmen. Das wurde behoben; jetzt ist 'a'.search() und 'a'.search(undefined) korrekt und geben 0 zurück.
    • 
+ 
  • Ab Gecko 39 {{geckoRelease(39)}}, gibt das nicht-Standard flag Argument eine Konsolenwarnung ({{bug(1142351)}}).
    • 
+ 
  • Ab Gecko 47 {{geckoRelease(47)}}, ist das nicht-Standard flag Argument nicht länger unterstützt in nicht-veröffentlichten Builds und wird bald vollständig entfernt ({{bug(1245801)}}).
    • 
+ 
  • Ab Gecko 49 {{geckoRelease(49)}}, ist das nicht-Standard flag Argument nicht länger unterstützt ({{bug(1108382)}}).
    • 
+

+
+
Siehe auch

+
+
    
+ 
  • {{jsxref("String.prototype.match()")}}
    • 
+ 
  • {{jsxref("RegExp.prototype.exec()")}}
    • 
+

diff --git a/files/de/web/javascript/reference/global_objects/string/suchen/index.html b/files/de/web/javascript/reference/global_objects/string/suchen/index.html
deleted file mode 100644
index 5fb838010a..0000000000
--- a/files/de/web/javascript/reference/global_objects/string/suchen/index.html
+++ /dev/null
@@ -1,105 +0,0 @@
----
-title: String.prototype.search()
-slug: Web/JavaScript/Reference/Global_Objects/String/suchen
-tags:
-  - JavaScript
-  - Méthode
-  - Prototyp
-  - Referenz
-  - Regulärer Ausdruck
-  - Zeichenkette
-translation_of: Web/JavaScript/Reference/Global_Objects/String/search
----
-
{{JSRef}}

-
-
Die search() methode führt eine Suche für eine Übereinstimmung von einem Regulären Ausdruck und diesem {{jsxref("String")}} Objekt.

-
-
{{EmbedInteractiveExample("pages/js/string-search.html")}}

-
-
-
-
Syntax

-
-
str.search(regexp)

-
-
Parameter

-
-

- 
regexp

- 
Ein Regulär-Ausdruck Objekt. Wenn ein nicht-RegExp Objekt obj eingereicht wird, wird es durch new RegExp(obj) zu {{jsxref("RegExp")}} konvertiert.

-

-
-
Rückgabewert

-
-
Die erste übereinstimmung zwischen dem Regulären Audruck und und der gegebenen Zeichenkette; wenn nicht gefunden, -1.

-
-
Beschreibung

-
-
Wenn du wissen willst ob ein Muster gefunden wurde, und was sein Index ist nutze search() (wenn du nur wissen willst ob es das gibt nutze die ähnliche {{jsxref("RegExp.prototype.test()", "test()")}} Methode auf dem RegExp Prototyp, der einen boolean zurückgibt); für mehr informationen (aber langsamererere Ausführung) nutze {{jsxref("String.prototype.match()", "match()")}} (ähnlich zum Ausdruck {{jsxref("RegExp.prototype.exec()", "exec()")}}).

-
-
Beispiele

-
-
-
-
Das folgende Beispiel durchsucht eine Zeichenkette mit 2 verschiedenen regex Objekten, um eine erfolgreiche, und unerfolgreiche Suche zu zeigen.

-
-
var str = "hey LukE";
-var re = /[A-Z]/g;
-var re2 = /[.]/g;
-console.log(str.search(re)); // gibt 4 zurück, was der Index des ersten Großbuchstaben "L" ist.
-console.log(str.search(re2)); // gibt -1 zurück kann "." nicht finden

-
-
Spezifikationen

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
SpezifikationStatusKommentar
{{SpecName('ES3')}}{{Spec2('ES3')}}Initielle Definition. Eingeführt in JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.5.4.12', 'String.prototype.search')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-string.prototype.search', 'String.prototype.search')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-string.prototype.search', 'String.prototype.search')}}{{Spec2('ESDraft')}}

-
-
Browser Kompatibilität

-
-
-
-
{{Compat("javascript.builtins.String.search")}}

-
-
Gecko-spezifische Hinweise

-
-
    
- 
  • flags war ein nicht-standard Zweitargument nur in Gecko verfügbar: str.search(regexp, flags)
    • 
- 
  • Vorher {{Gecko("8.0")}}, search() war falsch eingeführt; wenn es ohne oder mit {{jsxref("undefined")}} parametern Ausgeführt wurde, würde es mit 'undefined' übereinstimmen, anstatt mit einer leeren Zeichenkette übereinzustimmen. Das wurde behoben; jetzt ist 'a'.search() und 'a'.search(undefined) korrekt und geben 0 zurück.
    • 
- 
  • Ab Gecko 39 {{geckoRelease(39)}}, gibt das nicht-Standard flag Argument eine Konsolenwarnung ({{bug(1142351)}}).
    • 
- 
  • Ab Gecko 47 {{geckoRelease(47)}}, ist das nicht-Standard flag Argument nicht länger unterstützt in nicht-veröffentlichten Builds und wird bald vollständig entfernt ({{bug(1245801)}}).
    • 
- 
  • Ab Gecko 49 {{geckoRelease(49)}}, ist das nicht-Standard flag Argument nicht länger unterstützt ({{bug(1108382)}}).
    • 
-

-
-
Siehe auch

-
-
    
- 
  • {{jsxref("String.prototype.match()")}}
    • 
- 
  • {{jsxref("RegExp.prototype.exec()")}}
    • 
-

diff --git a/files/de/web/javascript/reference/global_objects/string/trimend/index.html b/files/de/web/javascript/reference/global_objects/string/trimend/index.html
new file mode 100644
index 0000000000..b66e15f474
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/string/trimend/index.html
@@ -0,0 +1,58 @@
+---
+title: String.prototype.trimRight()
+slug: Web/JavaScript/Reference/Global_Objects/String/TrimRight
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/trimEnd
+---
+
{{JSRef}} {{non-standard_header}}

+
+
Die trimRight() Methode entfernt Leerzeichen vom rechten Ende der Zeichenkette.

+
+
Syntax

+
+
str.trimRight()

+
+
Rückgabewert

+
+
Ein neuen String, der den alten String ohne Whitespaces auf der rechten Seite beinhaltet.

+
+
Beschreibung

+
+
Die trimRight() Methode gibt die Zeichenkette ohne Leerzeichen am rechten Ende zurück. trimRight() manipuliert nicht den Wert der Zeichenkette.

+
+
Beispiel

+
+
trimRight() verwenden

+
+
Im folgenden Beispiel wird die Funktionalität dieser Methode dargestellt.

+
+
var str = '   foo  ';
+
+console.log(str.length);  // 8
+
+str = str.trimRight();
+console.log(str.length);  // 6
+console.log(str);         // '   foo'
+

+
+
Spezifikationen

+
+
Gehört keinem Standard an. Hinzugefügt in JavaScript 1.8.1.

+
+
Browserkompatibilität

+
+
+
+
{{Compat("javascript.builtins.String.trimRight")}}

+
+
Siehe auch

+
+
    
+ 
  • {{jsxref("String.prototype.trim()")}}
    • 
+ 
  • {{jsxref("String.prototype.trimLeft()")}} {{non-standard_inline}}
    • 
+

diff --git a/files/de/web/javascript/reference/global_objects/string/trimleft/index.html b/files/de/web/javascript/reference/global_objects/string/trimleft/index.html
deleted file mode 100644
index db5dbd55cb..0000000000
--- a/files/de/web/javascript/reference/global_objects/string/trimleft/index.html
+++ /dev/null
@@ -1,58 +0,0 @@
----
-title: String.prototype.trimLeft()
-slug: Web/JavaScript/Reference/Global_Objects/String/TrimLeft
-tags:
-  - JavaScript
-  - Method
-  - Prototype
-  - Reference
-  - String
-translation_of: Web/JavaScript/Reference/Global_Objects/String/trimStart
----
-
{{JSRef}} {{non-standard_header}}

-
-
Die trimLeft() Methode entfernt Leerzeichen vom linken Ende der Zeichenkette.

-
-
Syntax

-
-
str.trimLeft()

-
-
Rückgabewert

-
-
Ein neuen String, der den alten String ohne Whitespaces auf der linken Seite beinhaltet.

-
-
Beschreibung

-
-
Die trimLeft() Methode gibt die Zeichenkette ohne Leerzeichen am linken Ende zurück. trimLeft() manipuliert nicht den Wert der Zeichenkette.

-
-
Beispiel

-
-
trimLeft() verwenden

-
-
Im folgenden Beispiel wird die Funktionalität dieser Methode dargestellt.

-
-
var str = '   foo  ';
-
-console.log(str.length);  // 8
-
-str = str.trimLeft();
-console.log(str.length);  // 5
-console.log(str);         // 'foo  '
-

-
-
Spezifikationen

-
-
Gehört keinem Standard an. Hinzugefügt in JavaScript 1.8.1.

-
-
Browserkompatibilität

-
-
-
-
{{Compat("javascript.builtins.String.trimLeft")}}

-
-
Siehe auch

-
-
    
- 
  • {{jsxref("String.prototype.trim()")}}
    • 
- 
  • {{jsxref("String.prototype.trimRight()")}} {{non-standard_inline}}
    • 
-

diff --git a/files/de/web/javascript/reference/global_objects/string/trimright/index.html b/files/de/web/javascript/reference/global_objects/string/trimright/index.html
deleted file mode 100644
index b66e15f474..0000000000
--- a/files/de/web/javascript/reference/global_objects/string/trimright/index.html
+++ /dev/null
@@ -1,58 +0,0 @@
----
-title: String.prototype.trimRight()
-slug: Web/JavaScript/Reference/Global_Objects/String/TrimRight
-tags:
-  - JavaScript
-  - Method
-  - Prototype
-  - Reference
-  - String
-translation_of: Web/JavaScript/Reference/Global_Objects/String/trimEnd
----
-
{{JSRef}} {{non-standard_header}}

-
-
Die trimRight() Methode entfernt Leerzeichen vom rechten Ende der Zeichenkette.

-
-
Syntax

-
-
str.trimRight()

-
-
Rückgabewert

-
-
Ein neuen String, der den alten String ohne Whitespaces auf der rechten Seite beinhaltet.

-
-
Beschreibung

-
-
Die trimRight() Methode gibt die Zeichenkette ohne Leerzeichen am rechten Ende zurück. trimRight() manipuliert nicht den Wert der Zeichenkette.

-
-
Beispiel

-
-
trimRight() verwenden

-
-
Im folgenden Beispiel wird die Funktionalität dieser Methode dargestellt.

-
-
var str = '   foo  ';
-
-console.log(str.length);  // 8
-
-str = str.trimRight();
-console.log(str.length);  // 6
-console.log(str);         // '   foo'
-

-
-
Spezifikationen

-
-
Gehört keinem Standard an. Hinzugefügt in JavaScript 1.8.1.

-
-
Browserkompatibilität

-
-
-
-
{{Compat("javascript.builtins.String.trimRight")}}

-
-
Siehe auch

-
-
    
- 
  • {{jsxref("String.prototype.trim()")}}
    • 
- 
  • {{jsxref("String.prototype.trimLeft()")}} {{non-standard_inline}}
    • 
-

diff --git a/files/de/web/javascript/reference/global_objects/string/trimstart/index.html b/files/de/web/javascript/reference/global_objects/string/trimstart/index.html
new file mode 100644
index 0000000000..db5dbd55cb
--- /dev/null
+++ b/files/de/web/javascript/reference/global_objects/string/trimstart/index.html
@@ -0,0 +1,58 @@
+---
+title: String.prototype.trimLeft()
+slug: Web/JavaScript/Reference/Global_Objects/String/TrimLeft
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/trimStart
+---
+
{{JSRef}} {{non-standard_header}}

+
+
Die trimLeft() Methode entfernt Leerzeichen vom linken Ende der Zeichenkette.

+
+
Syntax

+
+
str.trimLeft()

+
+
Rückgabewert

+
+
Ein neuen String, der den alten String ohne Whitespaces auf der linken Seite beinhaltet.

+
+
Beschreibung

+
+
Die trimLeft() Methode gibt die Zeichenkette ohne Leerzeichen am linken Ende zurück. trimLeft() manipuliert nicht den Wert der Zeichenkette.

+
+
Beispiel

+
+
trimLeft() verwenden

+
+
Im folgenden Beispiel wird die Funktionalität dieser Methode dargestellt.

+
+
var str = '   foo  ';
+
+console.log(str.length);  // 8
+
+str = str.trimLeft();
+console.log(str.length);  // 5
+console.log(str);         // 'foo  '
+

+
+
Spezifikationen

+
+
Gehört keinem Standard an. Hinzugefügt in JavaScript 1.8.1.

+
+
Browserkompatibilität

+
+
+
+
{{Compat("javascript.builtins.String.trimLeft")}}

+
+
Siehe auch

+
+
    
+ 
  • {{jsxref("String.prototype.trim()")}}
    • 
+ 
  • {{jsxref("String.prototype.trimRight()")}} {{non-standard_inline}}
    • 
+

diff --git a/files/de/web/javascript/reference/global_objects/syntaxerror/prototype/index.html b/files/de/web/javascript/reference/global_objects/syntaxerror/prototype/index.html
deleted file mode 100644
index eaa648d375..0000000000
--- a/files/de/web/javascript/reference/global_objects/syntaxerror/prototype/index.html
+++ /dev/null
@@ -1,89 +0,0 @@
----
-title: SyntaxError.prototype
-slug: Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype
-tags:
-  - Error
-  - JavaScript
-  - Property
-  - Prototype
-  - SyntaxError
-translation_of: Web/JavaScript/Reference/Global_Objects/SyntaxError
-translation_of_original: Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype
----
-
{{JSRef}}

-
-
Die SyntaxError.prototype Eigenschaft repräsentiert die Eigenschaft die Eigenschaft für den {{jsxref("SyntaxError")}} Konstruktor.

-
-
Beschreibung

-
-
Alle {{jsxref("SyntaxError")}} Instanzen erben von SyntaxError.prototype. Man kann den Prototypen einsetzen, um Eigenschaften oder Methoden für allen Instanzen hinzuzufügen.

-
-
Eigenschaften

-
-

- 
SyntaxError.prototype.constructor

- 
Spezifiziert die Funktion, die einen Instanz des Prototypen erstellt.

- 
{{jsxref("Error.prototype.message", "SyntaxError.prototype.message")}}

- 
Fehlermeldung. Obwohl ECMA-262 Spezifiziert, dass {{jsxref("SyntaxError")}} eine eigene message Eigenschaft haben sollte, erbt dieser in SpiderMonkey die Eigenschaft {{jsxref("Error.prototype.message")}}.

- 
{{jsxref("Error.prototype.name", "SyntaxError.prototype.name")}}

- 
Fehlername. Vererbt von {{jsxref("Error")}}.

- 
{{jsxref("Error.prototype.fileName", "SyntaxError.prototype.fileName")}}

- 
Pfad zur Datei, in der der Fehler erzeugt wurde. Vererbt von {{jsxref("Error")}}.

- 
{{jsxref("Error.prototype.lineNumber", "SyntaxError.prototype.lineNumber")}}

- 
Zeilennummer, in der der Fehler erzeugt wurde. Vererbt von {{jsxref("Error")}}.

- 
{{jsxref("Error.prototype.columnNumber", "SyntaxError.prototype.columnNumber")}}

- 
Spaltennummer, in der der Fehler erzeugt wurde. Vererbt von {{jsxref("Error")}}.

- 
{{jsxref("Error.prototype.stack", "SyntaxError.prototype.stack")}} {{non-standard_inline}}

- 
Stack trace. Vererbt von {{jsxref("Error")}}.

-

-
-
Methoden

-
-
Obwohl das {{jsxref("SyntaxError")}} Prototypobjekt keine Methoden enthält, haben {{jsxref("SyntaxError")}} Instanzen einige Vererbte Methoden durch die Prototypenkette.

-
-
Spezifikationen

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
SpezifikationStatusKommentar
{{SpecName('ES3')}}{{Spec2('ES3')}}Initiale Definition.
{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}{{Spec2('ES5.1')}}Definiert als NativeError.prototype.
{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ES6')}}Definiert als NativeError.prototype.
{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ESDraft')}}Definiert als NativeError.prototype.

-
-
Browserkompatibilität

-
-

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

-

-
-
Siehe auch

-
-
    
- 
  • {{jsxref("Error.prototype")}}
    • 
- 
  • {{jsxref("Function.prototype")}}
    • 
-

diff --git a/files/de/web/javascript/reference/global_objects/typeerror/prototype/index.html b/files/de/web/javascript/reference/global_objects/typeerror/prototype/index.html
deleted file mode 100644
index 6c7e61d363..0000000000
--- a/files/de/web/javascript/reference/global_objects/typeerror/prototype/index.html
+++ /dev/null
@@ -1,89 +0,0 @@
----
-title: TypeError.prototype
-slug: Web/JavaScript/Reference/Global_Objects/TypeError/prototype
-tags:
-  - Error
-  - JavaScript
-  - Property
-  - Prototype
-  - TypeError
-translation_of: Web/JavaScript/Reference/Global_Objects/TypeError
-translation_of_original: Web/JavaScript/Reference/Global_Objects/TypeError/prototype
----
-
{{JSRef}}

-
-
Die TypeError.prototype Eigenschaft repräsentiert den prototype des {{jsxref("TypeError")}} Konstruktors.

-
-
Beschreibung

-
-
Alle {{jsxref("TypeError")}} Instanzen erben von TypeError.prototype. Dem prototype können über alle Instanzen hinweg Eigenschaften und Methoden hinzugefügt werden.

-
-
Eigenschaften

-
-

- 
TypeError.prototype.constructor

- 
Spezifiziert die Instanz erstellende Funktion.

- 
{{jsxref("Error.prototype.message", "TypeError.prototype.message")}}

- 
Fehlermeldung. ECMA-262 spezifiziert, dass {{jsxref("TypeError")}} eine eigene message Eigenschaft zur Verfügung stellen soll. In SpiderMonkey jedoch, erbt es von {{jsxref("Error.prototype.message")}}.

- 
{{jsxref("Error.prototype.name", "TypeError.prototype.name")}}

- 
Fehlerbezeichnung. Geerbt von {{jsxref("Error")}}.

- 
{{jsxref("Error.prototype.fileName", "TypeError.prototype.fileName")}}

- 
Pfad zur Datei, welche den Fehler verursachte. Geerbt von {{jsxref("Error")}}.

- 
{{jsxref("Error.prototype.lineNumber", "TypeError.prototype.lineNumber")}}

- 
Zeile in welcher der Fehler verusacht wurde. Geerbt von {{jsxref("Error")}}.

- 
{{jsxref("Error.prototype.columnNumber", "TypeError.prototype.columnNumber")}}

- 
Zeichennummer der Zeile in welcher der Fehler verursacht wurde. Geerbt von {{jsxref("Error")}}.

- 
{{jsxref("Error.prototype.stack", "TypeError.prototype.stack")}}

- 
Stack trace. Geerbt von {{jsxref("Error")}}.

-

-
-
Methoden

-
-
Das {{jsxref("TypeError")}} prototype Objekt beinhaltet keine eigenen Methoden, jedoch erben {{jsxref("TypeError")}} Instanzen einige Methoden durch die Prototypenkette.

-
-
Spezifikationen

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
SpezifikationStatusKommentar
{{SpecName('ES3', '#sec-15.11.7.6', 'NativeError.prototype')}}{{Spec2('ES3')}}Initiale Definition
{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}{{Spec2('ES5.1')}}Definiert als NativeError.prototype.
{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ES6')}}Definiert als NativeError.prototype.
{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ESDraft')}} 

-
-
Browserkompatibilität

-
-

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

-

-
-
Siehe auch

-
-
    
- 
  • {{jsxref("Error.prototype")}}
    • 
- 
  • {{jsxref("Function.prototype")}}
    • 
-

diff --git a/files/de/web/javascript/reference/klassen/constructor/index.html b/files/de/web/javascript/reference/klassen/constructor/index.html
deleted file mode 100644
index 5ab83ddcd5..0000000000
--- a/files/de/web/javascript/reference/klassen/constructor/index.html
+++ /dev/null
@@ -1,165 +0,0 @@
----
-title: Konstruktor
-slug: Web/JavaScript/Reference/Klassen/constructor
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Klassen
-translation_of: Web/JavaScript/Reference/Classes/constructor
----
-
{{jsSidebar("Classes")}}

-
-
Die constructor Methode ist eine spezielle Methode für das erzeugen und initialisieren von Objekten, die mit dem Schlüsselwort class erzeugt wurden.

-
-
Syntax

-
-
constructor([Argumente]) { ... }

-
-
Beschreibung

-
-
In einer Klasse kann es nur eine Methode mit dem Namen "constructor" geben. Eine {{jsxref("SyntaxError")}} Fehlermeldung wird geworfen, wenn in einer Klasse die constructor Methode mehr als einmal vorhanden ist.

-
-
Die constructor Methode kann mit dem Schlüsselwort super die constructor Methode der Eltern-Klasse aufrufen.

-
-
Wenn man keine constructor Methode erzeugt, wird eine Standardkonstruktor verwendet.

-
-
Beispiele

-
-
Verwendung der constructor Methode

-
-
Dieser Quellcode Ausschnitt wurden vom  classes Beispiel (live Demo) übernommen.

-
-
class Square extends Polygon {
-  constructor(length) {
-    // Hier wird die constructor Methode der Eltern-Klasse aufgerufen,
-    // für die Parameter width und height wurde der übergebene length Parameter verwendet
-    super(length, length);
-    // Anmerkung: In abgeleiteten Klassen, muss die super() Methode aufgerufen werden,
-    // bevor man das 'this' Objekt verwenden kann, da es sonst zu einen Referenz Fehler kommt
-    this.name = 'Square';
-  }
-
-  get area() {
-    return this.height * this.width;
-  }
-
-  set area(value) {
-    this.area = value;
-  }
-}

-
-
Standardkonstruktoren

-
-
Wenn man keine constructor Methode anlegt, wird eine Standardkonstruktor verwendet. Für Basis Klassen ist der Standard Konstruktor:

-
-
constructor() {}
-

-
-
Für vererbte Klassen, ist das der Standardkonstruktor:

-
-
constructor(...args) {
-  super(...args);
-}

-
-
Spezifikationen

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
SpezifikationStatusKommentar
{{SpecName('ES2015', '#sec-static-semantics-constructormethod', 'Constructor Method')}}{{Spec2('ES2015')}}Initiale Definition.
{{SpecName('ESDraft', '#sec-static-semantics-constructormethod', 'Constructor Method')}}{{Spec2('ESDraft')}} 

-
-
Browserkompatibilität

-
-
{{CompatibilityTable}}

-
-

-
- 
-  
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-  
- 
-
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(42.0)}}{{CompatGeckoDesktop(45)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Default constructors{{CompatUnknown}}{{CompatGeckoDesktop(45)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}

-

-
-

-
- 
-  
-   
-   
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-   
-   
-  
- 
-
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatChrome(42.0)}}{{CompatGeckoMobile(45)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(42.0)}}
Default constructors{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(45)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}

-

-
-
Siehe auch

-
-
diff --git a/files/de/web/javascript/reference/klassen/extends/index.html b/files/de/web/javascript/reference/klassen/extends/index.html
deleted file mode 100644
index 29ed8c5e78..0000000000
--- a/files/de/web/javascript/reference/klassen/extends/index.html
+++ /dev/null
@@ -1,172 +0,0 @@
----
-title: Erweitern
-slug: Web/JavaScript/Reference/Klassen/extends
-tags:
-  - Classes
-  - ECMAScript 2015
-  - JavaScript
-translation_of: Web/JavaScript/Reference/Classes/extends
----
-
{{jsSidebar("Classes")}}

-
-
Das extends Schlüsselwort wird in einer Klassendeklaration oder in einem Klassenausdruck verwendet, um eine, von einer anderen Klasse, abgeleitete Klasse zu erzeugen.

-
-
Syntax

-
-
class KindKlasse extends ElternKlasse { ... }

-
-
Beschreibung

-
-
Das Schlüsselwort extends kann verwendet werden, um von selbst erstellen Klassen als auch von standardmäßig eingebaute Objekte abzuleiten.

-
-
Das prototype Objekt, des zu erweiternden Objekt, muss entweder von Typ {{jsxref("Object")}} oder{{jsxref("null")}} sein.

-
-
Beispiele

-
-
Verwendung von extends

-
-
Das erste Beispiel erzeugt einen Klasse mit dem Namen Square, die von der Klasse Polygon abgeleitet ist. Dieses Beispiel wurde aus dieser live Demo (Quellcode) entnommen.

-
-
class Square extends Polygon {
-  constructor(length) {
-    // Hier wird die constructor Methode der Eltern-Klasse aufgerufen,
-    // für die Parameter width und height wurde der übergebene length Parameter verwendet
-    super(length, length);
-    // Anmerkung: In abgeleiteten Klassen, muss die super() Methode aufgerufen werden,
-    // bevor man das 'this' Objekt verwenden kann, da es sonst zu einen Referenz Fehler kommt
-    this.name = 'Square';
-  }
-
-  get area() {
-    return this.height * this.width;
-  }
-
-  set area(value) {
-    this.height = this.width = Math.sqrt(value);
-    this.area = value;
-  }
-}

-
-
Verwendung mit standardmäßig eingebautem Objekt

-
-
In diesem Beispiel wird das standardmäßig eingebaute {{jsxref("Date")}} Objekt erweitert. Dieses Beispiel wurde aus dieser live Demo (Quellcode) entnommen.

-
-
class myDate extends Date {
-  constructor() {
-    super();
-  }
-
-  getFormattedDate() {
-    var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
-    return this.getDate() + "-" + months[this.getMonth()] + "-" + this.getFullYear();
-  }
-}

-
-
Ableiten von null

-
-
Das Ableiten von {{jsxref("null")}} funktioniert genauso wie mit jeder anderen Klasse, mit der Ausnahme, dass das prototype Objekt nicht von {{jsxref("Object.prototype")}} abgeleitet ist.

-
-
class nullExtends extends null {
-  constructor() {}
-}
-
-Object.getPrototypeOf(nullExtends); // Function.prototype
-Object.getPrototypeOf(nullExtends.prototype) // null

-
-
Spezifikationen

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
SpezifikationStatusKommentar
{{SpecName('ES2015', '#sec-class-definitions', 'extends')}}{{Spec2('ES2015')}}Initiale Definition.
{{SpecName('ESDraft', '#sec-class-definitions', 'extends')}}{{Spec2('ESDraft')}}

-
-
Browserkompatibilität

-
-
{{CompatibilityTable}}

-
-

-
- 
-  
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-  
- 
-
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(42.0)}}{{CompatGeckoDesktop(45)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Array subclassing{{CompatChrome(43.0)}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}

-

-
-

-
- 
-  
-   
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-   
-  
- 
-
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatGeckoMobile(45)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(42.0)}}
Array subclassing{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(43.0)}}

-

-
-
Siehe auch

-
-
diff --git a/files/de/web/javascript/reference/klassen/index.html b/files/de/web/javascript/reference/klassen/index.html
deleted file mode 100644
index 81bec0651a..0000000000
--- a/files/de/web/javascript/reference/klassen/index.html
+++ /dev/null
@@ -1,376 +0,0 @@
----
-title: Klassen
-slug: Web/JavaScript/Reference/Klassen
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Klassen
-  - Konstruktor
-  - Vererbung
-translation_of: Web/JavaScript/Reference/Classes
----
-
{{JsSidebar("Classes")}}

-
-
JavaScript Klassen, eingeführt in ECMAScript 2015, sind syntaktischer Zucker für das bestehende, auf Prototypen basierende, Vererbungsmodell von JavaScript. Diese Syntaxerweiterung führt kein neues OOP-Modell in die Sprache ein. JS Klassen ermöglichen es, mit klarer und verständlicher Syntax Objekte zu erstellen und Vererbung in Javascript zu realisieren.

-
-
Klassendefinition

-
-
Klassen sind eigentlich Funktionen. Analog zu Funktionsausdrücken und Funktionsdeklarationen hat die Klassensyntax zwei Komponenten:

-
-
    
- 
  • Klassenausdrücke und
    • 
- 
  • Klassendeklarationen.
    • 
-

-
-
Klassendeklaration

-
-
Eine Möglichkeit, Klassen zu definieren ist eine Klassendeklaration. Diese wird eingeleitet durch das Schlüsselwort class, gefolgt vom Namen der Klasse (hier: "Rectangle").

-
-
class Rectangle {
-  constructor(height, width) {
-    this.height = height;
-    this.width = width;
-  }
-}

-
-
Hoisting

-
-
Ein wichtiger Unterschied zwischen Klassen- und Funktionsdeklarationen besteht im sogenannten {{Glossary("Hoisting")}}. Funktionsdeklarationen werden an den Anfang des Definitionsbereichs "gehoben", für Klassen gilt dies nicht. Das heißt, um auf eine Klasse zuzugreifen, muss sie zuvor definiert worden sein, sonst führt dies zu einem {{jsxref("ReferenceError")}}:

-
-
var p = new Polygon(); // ReferenceError
-
-class Polygon {}
-

-
-
Klassenausdruck

-
-
Ein Klassenausdruck ist eine weitere Möglichkeit eine Klasse zu definieren. Dabei ist es optional, hinter dem Schlüsselwort class einen Namen anzugeben. Sollte ein Name angegeben werden, so gilt dieser nur innerhalb des Klassenkörpers.

-
-
// unnamed
-var Polygon = class {
-  constructor(height, width) {
-    this.height = height;
-    this.width = width;
-  }
-};
-
-// named
-var Polygon = class Polygon {
-  constructor(height, width) {
-    this.height = height;
-    this.width = width;
-  }
-};
-

-
-
Klassenkörper und Methodendefinitionen

-
-
Der Körper der Klasse ist innerhalb der beiden geschweiften Klammern {}. Hier werden die Eigenschaften der Klasse definiert, wie Konstruktoren oder Methoden.

-
-
"Strict mode"

-
-
Der Inhalt der Klassendeklaration und des Klassenausdrucks werden im "strikten Modus" ausgeführt.

-
-
Konstruktor

-
-
Die Konstruktor-Methode ist eine spezielle Methode, um Objekte zu erzeugen und zu initialisieren. Eine Klasse kann nur eine spezielle Methode mit dem Namen "constructor" haben. Sollte es in einer Klasse mehrere "constructor"-Methoden geben, wird ein {{jsxref("SyntaxError")}} geworfen.

-
-
In der Konstruktor-Methode kann man mit dem Schlüsselwort "super", den Konstruktor der Elternklasse aufrufen.

-
-
Prototype Methoden

-
-
Siehe auch Methodendefinitionen.

-
-
class Polygon {
-  constructor(hoehe, breite) {
-    this.hoehe = hoehe;
-    this.breite = breite;
-  }
-
-  get flaeche() {
-    return this.berechneFlaeche();
-  }
-
-  berechneFlaeche() {
-    return this.hoehe * this.breite;
-  }
-}
-
-const quadrat = new Polygon(10, 10);
-
-console.log(quadrat.flaeche);

-
-
Statische Methoden

-
-
Das Schlüsselwort static definiert statische Methoden. Statische Methoden werden ohne Instanzierung einer Klasse aufgerufen und sind über eine erzeugte Instanz nicht aufrufbar. Oft werden in Applikationen statische Methoden für Hilfsfunktionen verwendet.

-
-
class Punkt {
-    constructor(x, y) {
-        this.x = x;
-        this.y = y;
-    }
-
-    static laenge(a, b) {
-        const dx = a.x - b.x;
-        const dy = a.y - b.y;
-
-        return Math.sqrt(dx*dx + dy*dy);
-    }
-}
-
-const p1 = new Punkt(5, 5);
-const p2 = new Punkt(10, 10);
-
-console.log(Punkt.laenge(p1, p2));

-
-
Boxing with prototype and static methods

-
-
Wird eine statische oder eine prototype-Methode aufgerufen, ohne dass ein Objekt in der Variable "this" liegt (oder mit "this" als Wahrheitswert, Zeichenkette, Nummer, undefiniert oder null), dann wird die Variable "this" im Funktionskörper undefined sein. Autoboxing wird nicht passieren. Das Verhalten wird das gleiche sein, sollte der Code nicht im "strict mode" geschrieben worden sein.

-
-
class Tier {
-  sprich() {
-    return this;
-  }
-  static iss() {
-    return this;
-  }
-}
-
-let obj = new Tier();
-let sprich = obj.sprich;
-sprich(); // undefined
-
-let iss = Tier.iss;
-iss(); // undefined

-
-
Falls wir den vorherigen Quelltext mit klassischen funktionsbasierten Klassen schreiben, wird Autoboxing stattfinden. Dies wird auf dem Wert passieren, der für "this" an die Funktion übergeben wurde.

-
-
function Tier() { }
-
-Tier.prototype.sprich = function() {
-  return this;
-}
-
-Tier.iss = function() {
-  return this;
-}
-
-let obj = new Tier();
-let sprich = obj.sprich;
-sprich(); // Globales Objekt
-
-let iss = Tier.iss;
-iss(); // Globales Objekt

-
-
Vererbung mittels extends

-
-
Das Schlüsselwort extends wird dafür verwendet, Klassendeklarationen und Klassenausdrücke zu erzeugen, die von einer anderen Klasse ableiten.

-
-
class Tier{
-  constructor(name) {
-    this.name = name;
-  }
-
-  sprich() {
-    console.log(this.name + ' macht ein Geräusch.');
-  }
-}
-
-class Hund extends Tier{
-  sprich() {
-    console.log(this.name + ' bellt.');
-  }
-}
-
-var h = new Hund('Wolfi');
-h.sprich();
-

-
-
Existiert in der Unterklasse ein Konstruktor, muss dieser zuerst super() aufrufen, bevor "this" verwendet werden kann.

-
-
Man kann auch traditionelle funktionsbasierte Klassen erweitern:

-
-
function Tier(name) {
-  this.name = name;
-}
-Tier.prototype.sprich = function () {
-  console.log(this.name + ' macht ein Geräusch.');
-}
-
-class Hund extends Tier {
-  sprich() {
-    super.sprich();
-    console.log(this.name + ' bellt.');
-  }
-}
-
-var h = new Hund('Wolfi');
-h.sprich();

-
-
Klassen können nicht von regulären (nicht konstruierbaren) Objekten erben. Falls von einem regulärem Objekt geerbt werden soll, kann {{jsxref("Object.setPrototypeOf()")}} verwendet werden:

-
-
var Tier = {
-  sprich() {
-    console.log(this.name + ' macht ein Geräusch.');
-  }
-};
-
-class Hund {
-  constructor(name) {
-    this.name = name;
-  }
-  sprich() {
-    console.log(this.name + ' bellt.');
-  }
-}
-
-Object.setPrototypeOf(Hund.prototype, Tier);
-
-var h = new Hund('Wolfi');
-h.sprich();

-
-
Species

-
-
Falls man zum Beispiel in einer selbst erzeugten Klasse MyArray den Konstruktor mit dem Konstruktor der {{jsxref("Array")}} Klasse überschreiben will, kann man dies mittels des species Musters erreichen.

-
-
Zum Beispiel, wenn man die {{jsxref("Array.map", "map()")}} Methode aufruft, wird der Default-Konstruktor der Klasse aufgerufen. Will man, dass stattdessen der Konstruktor der Elternklasse benutzt wird, kann man das {{jsxref("Symbol.species")}}-Symbol dafür verwenden:

-
-
class MyArray extends Array {
-  // Überschreibt species mit dem Konstruktor der Array-Klasses
-  static get [Symbol.species]() { return Array; }
-}
-var a = new MyArray(1,2,3);
-var mapped = a.map(x => x * x);
-
-console.log(mapped instanceof MyArray); // false
-console.log(mapped instanceof Array);   // true

-
-
Elternklasse Methoden mit super aufrufen

-
-
Das Schlüsselwort super kann verwendet werden, um Methoden der Elternklassen aufzurufen

-
-
class Katze{
-  constructor(name) {
-    this.name = name;
-  }
-
-  sprich() {
-    console.log(this.name + ' macht ein Geräusch.');
-  }
-}
-
-class Loewe extends Katze {
-  sprich() {
-    super.sprich();
-    console.log(this.name + ' brüllt.');
-  }
-}

-
-
Mix-ins

-
-
Abstrakte Subklassen oder mix-ins sind Vorlagen für Klassen. Eine ECMAScript-Klasse kann nur von einer einzigen Klasse ableiten, damit ist beispielsweise mehrfache Vererbung von Helferklassen nicht möglich. Die gewünschte Funktionalität muss von der Elternklasse bereitgestellt werden.

-
-
Eine Funktion die als Input eine Elternklasse nimmt und als Output eine davon abgeleitete Subklasse ausgibt, kann verwendet werden, um mix-ins in ECMAScript zu erzeugen:

-
-
var RechnerMixin = Base => class extends Base {
-  rechne() { }
-};
-
-var ZufallsGeneratorMixin = Base => class extends Base {
-  generiere() { }
-};

-
-
Eine Klasse die ein solches mix-in verwendet kann so erzeugt werden:

-
-
class Foo { }
-class Bar extends RechnerMixin(ZufallsGeneratorMixin(Foo)) { }

-
-
Spezifikationen

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
SpezifikationStatusKommentar
{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ES2015')}}Ursprüngliche Definition.
{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ESDraft')}} 

-
-
Browserkompatibilität

-
-
{{CompatibilityTable}}

-
-

-
- 
-  
-   
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-   
-  
- 
-
FeatureChromeFirefox (Gecko)EdgeInternet ExplorerOperaSafari
Basic support{{CompatChrome(42.0)}}[1]

-    {{CompatChrome(49.0)}}		{{CompatGeckoDesktop(45)}}13{{CompatNo}}{{CompatNo}}{{CompatSafari(9.0)}}

-

-
-

-
- 
-  
-   
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-   
-  
- 
-
FunktionAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome für Android
Basis Unterstützung{{CompatNo}}{{CompatGeckoMobile(45)}}{{CompatUnknown}}{{CompatUnknown}}9{{CompatChrome(42.0)}}[1]

-    {{CompatChrome(49.0)}}

-

-
-
[1] Benötigt den strikten Modus. Der Support im nicht-strikte Modus verbirgt sich hinter der Flag "Experimentelle JavaScript-Funktionen", welche standardmäßig deaktiviert ist.

-
-
Siehe auch

-
-
diff --git a/files/de/web/javascript/reference/klassen/static/index.html b/files/de/web/javascript/reference/klassen/static/index.html
deleted file mode 100644
index 9c13048498..0000000000
--- a/files/de/web/javascript/reference/klassen/static/index.html
+++ /dev/null
@@ -1,136 +0,0 @@
----
-title: Statische Methoden
-slug: Web/JavaScript/Reference/Klassen/static
-tags:
-  - Classes
-  - ECMAScript 2015
-  - JavaScript
-  - Static
-translation_of: Web/JavaScript/Reference/Classes/static
----
-
{{jsSidebar("Classes")}}

-
-
Das static Schüsselwort definiert statische Methoden für eine Klasse.

-
-
{{EmbedInteractiveExample("pages/js/classes-static.html")}}

-
-
-
-
Syntax

-
-
static methodenName() { ... }

-
-
Beschreibung

-
-
Statische Methoden werden ohne Instanzierung einer Klasse aufgerufen und sind über eine erzeugte Instanz nicht aufrufbar. Oft werden in statische Methoden für Hilfsfunktionen verwendet.

-
-
Aufruf von statischen Methoden

-
-
Von einer anderen statischen Methode

-
-
Um eine statische Methode aus einer anderen statischen Methode der gleichen Klasse aufzurufen, kann das this Schlüsselwort verwendet werden.

-
-
class StaticMethodCall {
-    static staticMethod() {
-        return 'Static method has been called';
-    }
-    static anotherStaticMethod() {
-        return this.staticMethod() + ' from another static method';
-    }
-}
-StaticMethodCall.staticMethod();
-// 'Static method has been called'
-
-StaticMethodCall.anotherStaticMethod();
-// 'Static method has been called from another static method'

-
-
Für Klassenkonstruktoren und anderen Methoden

-
-
Statische Methoden sind mit dem this Schlüsselwort nicht direkt erreichbar von nicht statischen Methoden. Man kann sie mit dem Klassennamen aufrufen: KLASSENNAME.STATISCH_METHODE_NAME oder mit der Aufrufen einer Eigenschaft von constructor: this.constructor.STATISCH_METHODE_NAME.

-
-
class StaticMethodCall{
-    constructor(){
-        console.log(StaticMethodCall.staticMethod());
-        // 'static method has been called'
-
-        console.log(this.constructor.staticMethod());
-        // 'static method has been called'
-    }
-
-    static  staticMethod(){
-        return 'static method has been called.';
-    }
-}

-
-
Beispiele

-
-
Das folgende Beispiel demonstriert mehrere Dinge:

-
-
    
- 
  1. Wie eine statische Methode in einer Klasse implementiert wird.
    2. 
- 
  2. Das von einer Klasse mit statischen Eigenschaften geerbt werden kann.
    3. 
- 
  3. Wie eine statische Methode aufgerufen werden kann und wie nicht.
    4. 
-

-
-
class Triple {
-  static triple(n) {
-    if (n === undefined) {
-      n = 1;
-    }
-    return n * 3;
-  }
-}
-
-class BiggerTriple extends Triple {
-  static triple(n) {
-    return super.triple(n) * super.triple(n);
-  }
-}
-
-console.log(Triple.triple());        // 3
-console.log(Triple.triple(6));       // 18
-
-var tp = new Triple();
-
-console.log(BiggerTriple.triple(3));
-// 81 (not affected by parent's instantiation)
-
-console.log(tp.triple());
-// 'tp.triple is not a function'.
-

-
-
Spezifikationen

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
SpezifikationStatusKommentar
{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ES2015')}}Initiale Definition.
{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ESDraft')}} 

-
-
Browserkompatibilität

-
-
-
-
{{Compat("javascript.classes.static")}}

-
-
Siehe auch

-
-
diff --git a/files/de/web/javascript/reference/operators/bitwise_operatoren/index.html b/files/de/web/javascript/reference/operators/bitwise_operatoren/index.html
deleted file mode 100644
index 598d43df68..0000000000
--- a/files/de/web/javascript/reference/operators/bitwise_operatoren/index.html
+++ /dev/null
@@ -1,575 +0,0 @@
----
-title: Bitweise Operatoren
-slug: Web/JavaScript/Reference/Operators/Bitwise_Operatoren
-tags:
-  - JavaScript
-  - Operator
-  - Reference
-translation_of: Web/JavaScript/Reference/Operators
-translation_of_original: Web/JavaScript/Reference/Operators/Bitwise_Operators
----
-
{{jsSidebar("Operators")}}

-
-
Bitweise Operatoren werden auf Sequenzen aus 32 bit (Nullen und Einsen) angewandt im Gegensatz zu Operatoren, die mit Dezimal-, Hexadezimal- oder Oktalzahlen (numbers) arbeiten. Beispielsweise hat die Dezimalzahl neun die binäre Darstellung 1001. Auch wenn Bitweise Operatoren mit Binärdarstellungen arbeiten, sind deren Ausgabewerte Javascript Standardzahlenwerte.

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

-
-
-
-
Die folgende Tabelle fasst Javascripts Bitweise Operatoren zusammen:

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
OperatorEinsatzBeschreibung
Bitweises UNDa & bGibt 1 in jeder Bit Position zurück, an welcher beide Operanden 1 sind.
Bitweises ODERa | bGibt 1 in jeder Bit Position zurück, an welcher einer oder beide Operanden 1 sind.
Bitweises XORa ^ bGibt 1 in jeder Bit Position zurück, an welcher einer aber nicht beide Operanden 1 sind.
Bitweise Negation~ aInvertiert die Bits des Operanden
Linksverschiebunga << bVerschiebt a in binärer Repräsentation b (< 32) Bits nach links, von Rechts werden Nullen hereingeschoben.
Vorzeichen propagierende Rechtsverschiebunga >> bVerschiebt a in binärer Repräsentation b (< 32) Bits nach rechts, herausgeschobene Bits werden verworfen.
Null füllende Rechtsverschiebunga >>> bVerschiebt a in binärer Repräsentation b (< 32) Bits nach rechts, herausgeschobene Bits werden verworfen und Nullen werden von links hereingeschoben.

-
-
Vorzeichenbehaftete 32-Bit Integer

-
-
Die Operanden aller Bitweisen Operationen werden in vorzeichenbehaftete 32-Bit Integer im Zweierkomplementformat konvertiert. Zweierkomplementformat bedeutet, dass das Gegenstück einer negative Zahl alle Bits invertiert (Bitweise Negation einer Zahl oder auch Einerkomplement einer Zahl) plus eins ist. Zum Beispiel die codierte Integer 314:

-
-
00000000000000000000000100111010
-

-
-
Im Folgenden ist ~314 codiert, d. h. das Einerkomplement von 314:

-
-
11111111111111111111111011000101
-

-
-
Anschließend wird -314 codiert, d. h. das Zweierkomplement 314:

-
-
11111111111111111111111011000110
-

-
-
Das Zweierkomplement garantiert, dass das Bit ganz links 0 ist, wenn die Zahl Positiv ist und 1 ist, wenn die Zahl negativ ist. Dieses wird das Vorzeichenbit genannt.

-
-
Die Zahl 0 ist ein Integer, der komplett aus 0 Bits besteht.

-
-
0 (base 10) = 00000000000000000000000000000000 (base 2)
-

-
-
Die Zahl -1 ist ein Integer der komplett aus 1 Bits besteht.

-
-
-1 (base 10) = 11111111111111111111111111111111 (base 2)
-

-
-
Die Zahl -2147483648 (hexadezimale Repräsentation: -0x80000000) ist der Integer, welcher komplett aus 0 Bits besteht, außer dem ersten Bit (linkes Bit).

-
-
-2147483648 (base 10) = 10000000000000000000000000000000 (base 2)
-

-
-
Die Zahl 2147483647 (hexadezimale Repräsentation: -0x7fffffff) ist der Integer, welcher komplett aus 1 Bits besteht, außer dem ersten Bit (linkes Bit).

-
-
2147483647 (base 10) = 01111111111111111111111111111111 (base 2)
-

-
-
Die Zahlen -2147483648 und 2147483647 sind die minimalen und Maximalen Integers, die mit 32-Bit vorzeichenbehafteten Zahlen repräsentiert werden können.

-
-
Bitweise logische Operatoren

-
-
Konzeptionell arbeiten die bitweisen logischen Operatoren wie folgt:

-
-
    
- 
  • Die Operanden werden in 32-Bit Integer konvertiert und als Serie von Bits (null und eins) ausgedrückt. Bei Zahlen mit mehr als 32 Bits, werden die höchstwertigen Bits verworfen. Zum Beispiel wird der folgende Integer mit mehr als 32 Bits zu einem 32 Bit Integer konvertiert::
-  
    Vorher:   11100110111110100000000000000110000000000001
-Nachher:              10100000000000000110000000000001
    
- 
    • 
- 
  • Jedes Bit im ersten Operanden wird mit dem korrespondierenden Bit im zweiten Operanden gepaart: erstes Bit zu erstem, zweites Bit zu zweitem Bit, und so weiter.
    • 
- 
  • Der Operator wird auf jedem Bitpaar angewendet und das Ergebnis wird Bitweise konstruiert.
    • 
-

-
-
& (Bitweises UND)

-
-
Führt die UND Operation auf jedem Bitpaar durch. a UND b ergibt 1, wenn beide a und b 1 sind. Die Wahrheitstabelle für den UND Operator ist:

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
aba UND b
000
010
100
111

-
-
.    9 (Basis 10) = 00000000000000000000000000001001 (Basis 2)
-    14 (Basis 10) = 00000000000000000000000000001110 (Basis 2)
-                    --------------------------------
-14 & 9 (Basis 10) = 00000000000000000000000000001000 (Basis 2) = 8 (Basis 10)
-

-
-
Bitweises verUNDen jeder Zahl x mit 0 ergibt 0. Bitweises verUNDen jeder Zahl x mit -1 ergibt x.

-
-
| (Bitweises ODER)

-
-
Führt die ODER Operation auf jedem Bitpaar durch. a ODER b ergibt 1, wenn einer, a oder b, 1 sind. Die Wahrheitstabelle für den ODER Operator ist:

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
aba ODER b
000
011
101
111

-
-
.    9 (Basis 10) = 00000000000000000000000000001001 (Basis 2)
-    14 (Basis 10) = 00000000000000000000000000001110 (Basis 2)
-                    --------------------------------
-14 | 9 (Basis 10) = 00000000000000000000000000001111 (Basis 2) = 15 (Basis 10)
-

-
-
Bitweises verODERn jeder Zahl x mit 0 ergibt x. Bitweises verODERn jeder Zahl x mit -1 ergibt -1.

-
-
^ (Bitweises XOR)

-
-
Führt die XOR Operation auf jedem Bitpaar durch. a XOR b ergibt 1, wenn sich a und b, unterscheiden. Die Wahrheitstabelle für den XOR Operator ist:

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
aba XOR b
000
011
101
110

-
-
.    9 (Basis 10) = 00000000000000000000000000001001 (Basis 2)
-    14 (Basis 10) = 00000000000000000000000000001110 (Basis 2)
-                    --------------------------------
-14 ^ 9 (Basis 10) = 00000000000000000000000000000111 (Basis 2) = 7 (Basis 10)
-

-
-
Bitweises verXORn jeder Zahl x mit 0 ergibt x. Bitweises verXORn jeder Zahl x mit -1 ergibt ~x.

-
-
~ (Bitweise Negation)

-
-
Führt die Negationsoperation auf jedem Bit durch. NICHT a ergibt ergibt den invertierten Wert (d. h. das Einerkomplement) von a. Die Wahrheitstabelle für den Negationsoperator ist:

-
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
aNICHT a
01
10

-
-
 9 (Basis 10) = 00000000000000000000000000001001 (Basis 2)
-                --------------------------------
-~9 (Basis 10) = 11111111111111111111111111110110 (Basis 2) = -10 (Basis 10)
-

-
-
Bitweises Negieren jeder Zahl x ergibt -(x + 1). Zum Beispiel ergibt ~-5 4.

-
-
Beispiel mit indexOf:

-
-
var str = 'rawr';
-var searchFor = 'a';
-
-// Das ist eine alternativer Weg um if (-1*str.indexOf('a') <= 0) zu tippen
-if (~str.indexOf(searchFor)) {
-  // searchFor is in the string
-} else {
-  // searchFor is not in the string
-}
-
-// Hier die Werte, die von (~str.indexOf(searchFor)) zurück gegeben werden
-// r == -1
-// a == -2
-// w == -3
-

-
-
Bitweise Verschiebeoperatoren

-
-
Die bitweisen Verschiebeoperatoren (shift Operatoren) haben zwei Operanden: Der erste ist der Anteil, der verschoben werden soll und der zweite ist die Anzahl der Positionen, um die der erste Operand verschoben werden soll. Die Richtung der Verschiebung wird durch den eingesetzten Operator festgelegt.

-
-
Verschiebeoperatoren konvertieren ihre Operanden in 32-Bit Integers in Bit-Endian Reihenfolge und geben als Resultat den gleichen Typ des linken Operanden zurück. Der rechte Operand sollte kleiner als 32 sein, aber wenn das nicht so ist, werden nur die kleinsten fünf Bits verwendet.

-
-
<< (Linksverschiebung)

-
-
Dieser Operator verschiebt den ersten Operand um die spezifizierte Anzahl von Bits nach links. Überflüssige Bits, die nach links verschoben wurden, werden verworfen. Von rechts wird mit 0-Bits aufgefüllt.

-
-
Zum Beispiel ergibt 9 << 2 36:

-
-
.    9 (Basis 10): 00000000000000000000000000001001 (Basis 2)
-                   --------------------------------
-9 << 2 (Basis 10): 00000000000000000000000000100100 (Basis 2) = 36 (Basis 10)
-

-
-
Bitweises Verschieben jeder Zahl x nach links mit y Bits ergibt x * 2 ** y.

-
-
>> (Vorzeichen propagierende Rechtsverschiebung)

-
-
Dieser Operator verschiebt den ersten Operand um die spezifizierte Anzahl von Bits nach rechts. Überflüssige Bits, die nach rechts verschoben wurden, werden verworfen. Kopien des linken Bits (Vorzeichenbits) werden von links hereingeschoben. Weil das neue Vorzeichenbit immer das selbe wie das alte Vorzeichenbit ist, ändert sich das linke Bit nicht. Daher kommt der Name "Vorzeichen propagierend" her.

-
-
Zum Beispiel ergibt 9 >> 2 2:

-
-
.    9 (base 10): 00000000000000000000000000001001 (base 2)
-                  --------------------------------
-9 >> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10)
-

-
-
Likewise, -9 >> 2 yields -3, because the sign is preserved:

-
-
.    -9 (Basis 10): 11111111111111111111111111110111 (Basis 2)
-                    --------------------------------
--9 >> 2 (Basis 10): 11111111111111111111111111111101 (Basis 2) = -3 (Basis 10)
-

-
-
>>> (Null füllende Rechtsverschiebung)

-
-
Dieser Operator verschiebt den ersten Operand um die spezifizierte Anzahl von Bits nach rechts. Überflüssige Bits, die nach rechts verschoben wurden, werden verworfen. Von link wird mit 0-Bits aufgefüllt. Das Vorzeichenbit wird 0, so dass das Ergebnis nie negativ ist.

-
-
Für nicht negative Zahlen ist das Ergebnis bei der Null füllenden Rechtsverschiebung und bei der Vorzeichen propagierenden Rechtsverschiebung das selbe. Zum Beispiel ergibt 9 >>> 2 2, das selbe wie 9 >> 2:

-
-
.     9 (Basis 10): 00000000000000000000000000001001 (Basis 2)
-                    --------------------------------
-9 >>> 2 (Basis 10): 00000000000000000000000000000010 (Basis 2) = 2 (Basis 10)
-

-
-
Jedoch ist das nicht der Fall für negative Zahlen. Zum Beispiel ergibt -9 >>> 2 1073741821, was sich unterschiedet von -9 >> 2 (was -3 ergibt):

-
-
.     -9 (Basis 10): 11111111111111111111111111110111 (Basis 2)
-                     --------------------------------
--9 >>> 2 (Basis 10): 00111111111111111111111111111101 (Basis 2) = 1073741821 (Basis 10)
-

-
-
Beispiele

-
-
Flags und Bitmasken

-
-
Die bitweisen logischen Operatoren werden häufig eingesetzt, um Sequenzen von Flags zu erstellen, zu manipulieren und zu lesen, welche wie binäre Variablen sind. Variablen können statt dieser Sequenzen genutzt werden, aber binäre Flags verbrauchen weniger Speicher (um den Faktor 32).

-
-
Angenommen es gibt 4 Flags:

-
-
    
- 
  • Flag A: Man hat ein Ameisenproblem
    • 
- 
  • Flag B: Man besitzt eine Fledermaus
    • 
- 
  • Flag C: Man besitzt eine Katze
    • 
- 
  • Flag D: Man besitzt eine Ente
    • 
-

-
-
Diese Flags sind durch eine Sequenz von Bits repräsentiert: DCBA. Wenn ein Flag gesetzt wird, hat es den Wert 1. Wenn ein Flag geleert wird, hat es den Wert 0. Angenommen eine Variable flags hat den binären Wert 0101:

-
-
var flags = 5;   // binär 0101
-

-
-
Dieser Wert zeigt an:

-
-
    
- 
  • Flag A ist true (man hat ein Ameisenproblem);
    • 
- 
  • Flag B ist false (man hat keine Fledermaus);
    • 
- 
  • Flag C ist true (man hat eine Katze);
    • 
- 
  • Flag D ist false (man hat keine Ente);
    • 
-

-
-
Weil Bitweise Operatoren mit 32-Bit arbeiten, ist 0101 eigentlich 00000000000000000000000000000101, aber die führenden nullen können vernachlässigt werden, weil sie keine Informationen enthalten.

-
-
Eine Bitmaske ist eine Sequenz von Bits, die Flags manipulieren und/oder lesen kann. Typisch ist es, dass eine "primitive" Bitmaske für jedes Flag definiert ist:

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

-
-
Neue Bitmasken können erstellt werden, indem bitweise logische Operatoren auf den primitiven Bitmasken angewendet werden. Zum Beispiel kann die Bitmaske 1011 mit VerODERn von FLAG_A, FLAG_B und FLAG_D erstellt werden:

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

-
-
Individuelle Flagwerte können durch das VerUNDen mit einer Bitmaske extrahiert werden, wobei jedes Bit mit dem Wert eins das korrespondierende Flag extrahiert. Die Bitmaske wirft nicht relevante Flags heraus, indem Nullen verUNDet werden (daher der Begriff "Bitmaske"). Zum Beispiel kann die Bitmaske 0100 genutzt werden, um zu sehen, ob Flag C gesetzt ist:

-
-
// Wenn man eine Katze besitzt
-if (flags & FLAG_C) { // 0101 & 0100 => 0100 => true
-   // tu irgendetwas
-}
-

-
-
Eine Bitmaske mit mehreren gesetzten Flags funktioniert wie ein "entweder/oder". Zum Beispiel sind die beiden folgenden Ansätze äquivalent:

-
-
// wenn man eine Fledermaus besitzt oder eine Katze besitzt
-// (0101 & 0010) || (0101 & 0100) => 0000 || 0100 => true
-if ((flags & FLAG_B) || (flags & FLAG_C)) {
-   // do stuff
-}
-

-
-
// wenn man eine Fledermaus oder eine Katze besitzt
-var mask = FLAG_B | FLAG_C; // 0010 | 0100 => 0110
-if (flags & mask) { // 0101 & 0110 => 0100 => true
-   // do stuff
-}
-

-
-
Flags können mit VerODERung mit einer Bitmaske gesetzt werden, wobei jedes Bit in der Bitmaske mit dem Wert 1 wird das korrespondierende Flag setzen, wenn es noch nicht gesetzt ist. Zum Beispiel kann die Bitmaske 1100 benutzt werden, um die Flags C und D zu setze:

-
-
// ja, man besitzt eine Katze und eine Ente
-var mask = FLAG_C | FLAG_D; // 0100 | 1000 => 1100
-flags |= mask;   // 0101 | 1100 => 1101
-

-
-
Flags können mit VerUNDung mit einer Bitmaske geleert werden, wobei jedes Bit in der Bitmaske mit dem Wert 0 wird das korrespondierende Flag geleert, wenn es noch nicht geleert ist. Die Bitmaske dafür kann mit Negation primitiver Bitmasken erstellt werden Zum Beispiel kann die Bitmaske 1010 benutzt werden, um die Flags A und C zu leeren:

-
-
// no, we don't have an ant problem or own a cat
-var mask = ~(FLAG_A | FLAG_C); // ~0101 => 1010
-flags &= mask;   // 1101 & 1010 => 1000
-

-
-
The mask could also have been created with ~FLAG_A & ~FLAG_C (De Morgan's law):

-
-
// nein, mat hat kein Problem mit Ameisen und man besitzt keine Katze
-var mask = ~FLAG_A & ~FLAG_C;
-flags &= mask;   // 1101 & 1010 => 1000
-

-
-
Flags können mit VerXORung mit einer Bitmaske umgeschaltet werden, wobei jedes Bit in der Bitmaske mit dem Wert 1 wird das korrespondierende Flag umschaltet. Zum Beispiel kann die Bitmaske 0110 benutzt werden, um die Flags B und C umzuschalten:

-
-
// wenn man keine Fledermaus besitzt und und jetzt eine bekommt
-// and wenn man eine hat und die Fledermaus verabschiedet
-// das gleiche für eine Katze
-var mask = FLAG_B | FLAG_C;
-flags = flags ^ mask;   // 1100 ^ 0110 => 1010
-

-
-
Alle Flags können mit dem Negationsoperator umgedreht werden:

-
-
// entering parallel universe...
-flags = ~flags;    // ~1010 => 0101
-

-
-
Konvertierungsbeispiele

-
-
Konvertierung eines binär String zu einer dezimal Number:

-
-
var sBinString = '1011';
-var nMyNumber = parseInt(sBinString, 2);
-alert(nMyNumber); // prints 11, i.e. 1011
-

-
-
Konvertierung einer dezimal Number zu einem binär String:

-
-
var nMyNumber = 11;
-var sBinString = nMyNumber.toString(2);
-alert(sBinString); // prints 1011, i.e. 11
-

-
-
Bitmaskenerstellung automatisieren

-
-
Man kann, wie folgt, mehrere Masken von einer Menge von Boolean Werten erstellen:

-
-
function createMask() {
-  var nMask = 0, nFlag = 0, nLen = arguments.length > 32 ? 32 : arguments.length;
-  for (nFlag; nFlag < nLen; nMask |= arguments[nFlag] << nFlag++);
-  return nMask;
-}
-var mask1 = createMask(true, true, false, true); // 11, i.e.: 1011
-var mask2 = createMask(false, false, true); // 4, i.e.: 0100
-var mask3 = createMask(true); // 1, i.e.: 0001
-// etc.
-
-alert(mask1); // prints 11, i.e.: 1011
-

-
-
Umgedrehter Algorithmus: Ein Array von Booleanen von einer Bitmaske

-
-
Wenn man ein Array mit Boolean Werten von einer Bitmaske haben möchte, kann man folgenden Code benutzen:

-
-
function arrayFromMask(nMask) {
-  // nMask must be between -2147483648 and 2147483647
-  if (nMask > 0x7fffffff || nMask < -0x80000000) {
-    throw new TypeError('arrayFromMask - out of range');
-  }
-  for (var nShifted = nMask, aFromMask = []; nShifted;
-       aFromMask.push(Boolean(nShifted & 1)), nShifted >>>= 1);
-  return aFromMask;
-}
-
-var array1 = arrayFromMask(11);
-var array2 = arrayFromMask(4);
-var array3 = arrayFromMask(1);
-
-alert('[' + array1.join(', ') + ']');
-// prints "[true, true, false, true]", i.e.: 11, i.e.: 1011
-

-
-
Man kann beide Algorithmen gleichzeitig testen:

-
-
var nTest = 19; // our custom mask
-var nResult = createMask.apply(this, arrayFromMask(nTest));
-
-alert(nResult); // 19
-

-
-
Nur aus didaktischen Gründen (weil dort die Number.toString(2) Methode ist), zeigen wir, wie es möglich ist den arrayFromMask Algorithmus zu verändern, um einen String mit der Binärrepräsentation der Number statt eines Arrays von Booleanen:

-
-
function createBinaryString(nMask) {
-  // nMask must be between -2147483648 and 2147483647
-  for (var nFlag = 0, nShifted = nMask, sMask = ''; nFlag < 32;
-       nFlag++, sMask += String(nShifted >>> 31), nShifted <<= 1);
-  return sMask;
-}
-
-var string1 = createBinaryString(11);
-var string2 = createBinaryString(4);
-var string3 = createBinaryString(1);
-
-alert(string1);
-// prints 00000000000000000000000000001011, i.e. 11
-

-
-
Spezifikationen

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
SpezifikationStatusKommentar
{{SpecName('ES1')}}{{Spec2('ES1')}}Initiale Definition.
{{SpecName('ES5.1', '#sec-11.7')}}{{Spec2('ES5.1')}}Definiert in verschiedenen Abschnitten der Spezifikation: Bitwise NOT operator, Bitwise shift operators, Binary bitwise operators
{{SpecName('ES6', '#sec-bitwise-shift-operators')}}{{Spec2('ES6')}}Definiert in verschiedenen Abschnitten der Spezifikation: Bitwise NOT operator, Bitwise shift operators, Binary bitwise operators
{{SpecName('ESDraft', '#sec-bitwise-shift-operators')}}{{Spec2('ESDraft')}}Definiert in verschiedenen Abschnitten der Spezifikation: Bitwise NOT operator, Bitwise shift operators, Binary bitwise operators

-
-
Browserkompatibilität

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

-
-
Siehe auch

-
-
diff --git a/files/de/web/javascript/reference/operators/decrement/index.html b/files/de/web/javascript/reference/operators/decrement/index.html
new file mode 100644
index 0000000000..16b185b35c
--- /dev/null
+++ b/files/de/web/javascript/reference/operators/decrement/index.html
@@ -0,0 +1,82 @@
+---
+title: Dekrement (--)
+slug: Web/JavaScript/Reference/Operators/Dekrement
+tags:
+  - Dekrement
+  - Dekrement-Operator
+  - Dekrementieren
+translation_of: Web/JavaScript/Reference/Operators/Decrement
+---
+
{{jsSidebar("Operators")}}

+
+
Der Dekrement-Operator (--) dekrementiert den Operanden um eins, zieht als eins vom Operanden ab und gibt einen Wert zurück.

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

+
+

+
+
+
+
Syntax

+
+
Operator: x-- or --x
+

+
+
Description

+
+
Wenn der Dekrement-Operator als Postfix benutzt wird, also der Operator hinter dem Operanden steht (z.B. x--), wird der Operand um eins reduziert aber der Wert vor dem Dekrementieren zurückgegeben. 

+
+
Wird der Dekrement-Operator als Präfix genutzt, steht also der Operator vor dem Operanden (z. B. --x), wird der Operator um eins reduziert und der Wert nach dieser Dekrementierung zurückgegeben.

+
+
Examples

+
+
Postfix decrement

+
+
let x = 3;
+y = x--;
+
+// y = 3
+// x = 2
+

+
+
Prefix decrement

+
+
let a = 2;
+b = --a;
+
+// a = 1
+// b = 1
+

+
+
Specifications

+
+
+ 
+  
+   
+  
+  
+   
+  
+ 
+
Specification
{{SpecName('ESDraft', '#sec-postfix-decrement-operator', 'Decrement operator')}}

+
+
Browser compatibility

+
+
+
+
{{Compat("javascript.operators.decrement")}}

+
+
See also

+
+
diff --git a/files/de/web/javascript/reference/operators/dekrement/index.html b/files/de/web/javascript/reference/operators/dekrement/index.html
deleted file mode 100644
index 16b185b35c..0000000000
--- a/files/de/web/javascript/reference/operators/dekrement/index.html
+++ /dev/null
@@ -1,82 +0,0 @@
----
-title: Dekrement (--)
-slug: Web/JavaScript/Reference/Operators/Dekrement
-tags:
-  - Dekrement
-  - Dekrement-Operator
-  - Dekrementieren
-translation_of: Web/JavaScript/Reference/Operators/Decrement
----
-
{{jsSidebar("Operators")}}

-
-
Der Dekrement-Operator (--) dekrementiert den Operanden um eins, zieht als eins vom Operanden ab und gibt einen Wert zurück.

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

-
-

-
-
-
-
Syntax

-
-
Operator: x-- or --x
-

-
-
Description

-
-
Wenn der Dekrement-Operator als Postfix benutzt wird, also der Operator hinter dem Operanden steht (z.B. x--), wird der Operand um eins reduziert aber der Wert vor dem Dekrementieren zurückgegeben. 

-
-
Wird der Dekrement-Operator als Präfix genutzt, steht also der Operator vor dem Operanden (z. B. --x), wird der Operator um eins reduziert und der Wert nach dieser Dekrementierung zurückgegeben.

-
-
Examples

-
-
Postfix decrement

-
-
let x = 3;
-y = x--;
-
-// y = 3
-// x = 2
-

-
-
Prefix decrement

-
-
let a = 2;
-b = --a;
-
-// a = 1
-// b = 1
-

-
-
Specifications

-
-
- 
-  
-   
-  
-  
-   
-  
- 
-
Specification
{{SpecName('ESDraft', '#sec-postfix-decrement-operator', 'Decrement operator')}}

-
-
Browser compatibility

-
-
-
-
{{Compat("javascript.operators.decrement")}}

-
-
See also

-
-
diff --git a/files/de/web/javascript/reference/operators/destructuring_assignment/index.html b/files/de/web/javascript/reference/operators/destructuring_assignment/index.html
new file mode 100644
index 0000000000..1ece290e90
--- /dev/null
+++ b/files/de/web/javascript/reference/operators/destructuring_assignment/index.html
@@ -0,0 +1,404 @@
+---
+title: Destrukturierende Zuweisung
+slug: Web/JavaScript/Reference/Operators/Destrukturierende_Zuweisung
+tags:
+  - Destructuring
+  - ECMAScript 2015
+  - JavaScript
+  - Operator
+translation_of: Web/JavaScript/Reference/Operators/Destructuring_assignment
+---
+
{{jsSidebar("Operators")}}

+
+
Die destrukturierende Zuweisung ermöglicht es, Daten aus Arrays oder Objekten zu extrahieren, und zwar mit Hilfe einer Syntax, die der Konstruktion von Array- und Objekt-Literalen nachempfunden ist.

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

+
+
+
+
Syntax

+
+
var a, b, rest;
+[a, b] = [10, 20];
+console.log(a); // 10
+console.log(b); // 20
+
+[a, b, ...rest] = [10, 20, 30, 40, 50];
+console.log(a); // 10
+console.log(b): // 20
+console.log(rest); // [30, 40, 50]
+
+({ a, b } = { a: 10, b: 20 });
+console.log(a); // 10
+console.log(b); // 20
+
+
+// Stage 3 Vorschlag
+({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40 });
+console.log(a); // 10
+console.log(b); // 20
+console.log(rest); // {c: 30, d: 40}
+

+
+
Beschreibung

+
+
Die Objekt- und Array-Literal Ausdrücke stellen einen einfachen Weg für die Erstellung von ad hoc Datenpaketen zur Verfügung.

+
+
var x = [1, 2, 3, 4, 5];

+
+
Die destrukturierende Zuweisung nutzt eine ähnliche Syntax, aber auf der linken Seite der Zuweisung, um zu definieren, welche Werte von der Quellvariablen ausgepackt werden muss.

+
+
var x = [1, 2, 3, 4, 5];
+var [y, z] = x;
+console.log(y); // 1
+console.log(z); // 2
+

+
+
Diese Fähigkeit ist so ähnlich wie in den Sprachen Perl und Python.

+
+
Array-Destrukturierung

+
+
Einfaches Variablenzuweisung

+
+
var foo = ['one', 'two', 'three'];
+
+var [one, two, three] = foo;
+console.log(one); // "one"
+console.log(two); // "two"
+console.log(three); // "three"
+

+
+
Zuweisung separat von Deklaration

+
+
Eine destrukturierende Zuweisung kann ohne Deklaration im Zuweisungsstatement vorgenommen werden.

+
+
var a, b;
+
+[a, b] = [1, 2];
+console.log(a); // 1
+console.log(b); // 2

+
+
Standardwerte

+
+
Einer Variablen kann ein Standardwert zugewiesen werden, welcher greift, wenn der Wert im Fall vom auspacken des Arrays undefined ist.

+
+
var a, b;
+
+[a=5, b=7] = [1];
+console.log(a); // 1
+console.log(b); // 7

+
+
Variablen tauschen

+
+
Zwei Variablenwerte können mit destrukturierenden Zuweisungen vertauscht werden.

+
+
Ohne destrukturierende Zuweisung benötigt man für den Tausch zweier Werte eine temporäre Variable (oder, in manchen Low-level Sprachen, den XOR-swap Trick).

+
+
var a = 1;
+var b = 3;
+
+[a, b] = [b, a];
+console.log(a); // 3
+console.log(b); // 1

+
+
Array von Funktion zurückgeben und einlesen

+
+
Es ist immer möglich einen Array von einer Funktion zurückzugeben. Destrukturierung kann mit dem Arrayrückgabewert verwendet werden um mehrerer Werte auszuwählen.

+
+
In diesem Beispiel gibt f() den Wert [1, 2] zurück, welcher in einer Zeile mittels Destrukturierung eingelesen werden kann.

+
+
function f() {
+  return [1, 2];
+}
+
+var a, b;
+[a, b] = f();
+console.log(a); // 1
+console.log(b); // 2
+

+
+
Rückgabewerte teilweise ignorieren

+
+
Man kann auch Rückgabewerte, an denen man nicht interessiert ist, ignorieren:

+
+
function f() {
+  return [1, 2, 3];
+}
+
+var [a, , b] = f();
+console.log("A ist " + a + " B ist " + b);
+

+
+
Nach Ausführung dieses Codes ist a =1 und b = 3. Der Wert 2 wird ignoriert. Auf diese Art kann man jegliche (auch alle) zurückgegebene Werte ignorieren. Zum Beispiel:

+
+
[,,] = f();

+
+
Den Rest eines Arrays einer Variablen zuweisen

+
+
Wenn ein Array destrukturiert wird, kann man beim Auspacken den restlichen Teil eines Arrays einer Varaible mit dem Restpattern zuweisen:

+
+
var [a, ...b] = [1, 2, 3];
+console.log(a); // 1
+console.log(b); // [2, 3]

+
+
Zu beachten ist, dass ein {{jsxref("SyntaxError")}} erzeugt wird, wenn auf der linken Seite des Restelements ein trennendes Komma steht:

+
+
var [a, ...b,] = [1, 2, 3];
+// SyntaxError: rest element may not have a trailing comma

+
+
Auspacken von Treffern eines regulären Ausdrucks

+
+
Wenn die Methode exec() für reguläre Ausdrücke einen Treffer findet, gibt sie ein Array zurück, das erstens, den gesamten, passenden Teil des Strings und dann die Teile des Strings enthält, die den einzelnen geklammerten Gruppen im regulären Ausdruck entsprechen. Destrukturierende erlaubt es die Teile aus diesem Array auf einfache Art herauszuziehen, wobei der String mit dem kompletten Treffer ignoriert werden kann, falls er nicht benötigt wird.

+
+
function parseProtocol(url) {
+  var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
+  if(!parsedURL) {
+    return false;
+  }
+  console.log(parsedURL); // ["https://developer.mozilla.org/en-US/Web/JavaScript", "https", "developer.mozilla.org", "en-US/Web/JavaScript"]
+
+  var [, protocol, fullhost, fullpath] = parsedURL;
+  return protocol;
+}
+
+console.log(parseProtocol('https://developer.mozilla.org/en-US/Web/JavaScript')); // "https"
+

+
+
Objektdestrukturierung

+
+
Einfache Zuweisung

+
+
var o = {p: 42, q: true};
+var {p, q} = o;
+
+console.log(p); // 42
+console.log(q); // true
+

+
+
Zuweisung ohne Deklaration

+
+
Die destrukturierende Zuweisung kann ohne eine Deklaration im Zuweisungs-Statement durchgeführt werden.

+
+
var a, b;
+
+({a, b} = {a: 1, b: 2});

+
+

+
Die runden Klammern ( ... ) wird benötigt wenn man die destrukturierende Zuweisung mit Objektliteralen ohne eine Deklaration durchführen möchte.

+
+
{a, b} = {a: 1, b: 2} ist keine valide eigenständige Syntax, weil {a, b} auf der linken Seite als ein Block und nicht als Objektliteral erkannt wird.

+
+
({a, b} = {a: 1, b: 2}) ist genauso gültig wie var {a, b} = {a: 1, b: 2}

+
+
HINWEIS: Der ( ... ) Ausdruck muss durch ein vorangestelltes Semikolen benutzt werden oder es führt eine Funktion aus der vorherigen Zeile aus.

+

+
+
Zu neuen Varaiblennamen zuweisen

+
+
Eine Eigenschaft kann aus einem Objekt ausgepackt werden und zu einer Variablen mit einem anderen Namen zugewiesen werden.

+
+
var o = {p: 42, q: true};
+var {p: foo, q: bar} = o;
+
+console.log(foo); // 42
+console.log(bar); // true

+
+
Standardwerte

+
+
Einer Variablen können Standardwerte zugewiesen werden, wenn der ausgepackte Wert aus dem Objekt undefined ist.

+
+
var {a = 10, b = 5} = {a: 3};
+
+console.log(a); // 3
+console.log(b); // 5

+
+
Zuweisen eines neuen Variablennamen und eines Standardwertes

+
+
Eine Eigenschaft kann sowohl 1) aus einem Objekt ausgepackt werden und einer Variablen mit einem andern Namen zugewiesen werden und 2) einen Standardwert unterstützen, wenn der ausgepackte Wert undefined ist.

+
+
var {a:aa = 10, b:bb = 5} = {a: 3};
+
+console.log(aa); // 3
+console.log(bb); // 5

+
+
Standardwerte für Funktionsparamter setzen

+
+
ES5 Version

+
+
function drawES5Chart(options) {
+  options = options === undefined ? {} : options;
+  var size = options.size === undefined ? 'big' : options.size;
+  var cords = options.cords === undefined ? { x: 0, y: 0 } : options.cords;
+  var radius = options.radius === undefined ? 25 : options.radius;
+  console.log(size, cords, radius);
+  // jetzt zeichnen wir endlich ein paar Charts
+}
+
+drawES5Chart({
+  cords: { x: 18, y: 30 },
+  radius: 30
+});

+
+
ES2015-Version

+
+
function drawES2015Chart({size = 'big', cords = { x: 0, y: 0 }, radius = 25} = {})
+{
+  console.log(size, cords, radius);
+  // zeichne ein paar Graphen
+}
+
+drawES2015Chart({
+  cords: { x: 18, y: 30 },
+  radius: 30
+});

+
+

+
In der Funktionssignatur für drawES2015Chart oben ist der destrukturierten linken Seite ein leeres Objektliteral zugewiesen, auf der rechten Seite: {size = 'big', cords = {x: 0, y: 0}, radius = 25} = {}. Man kann die Funktion auch ohne die rechte Zuweisungsseite schreiben. Wenn jedoch die Zuweisung auf der rechten Seite weglassen wird, sucht die Funktion nach mindestens einem Argument, das beim Aufruf bereitgestellt wird, während man in der aktuellen Form einfach drawES2015Chart() aufrufen kann, ohne Parameter anzugeben. Das aktuelle Design ist nützlich, wenn man die Funktion, ohne Parameter anzugeben, aufrufen möchte. Das andere ist nützlich, um sicherzustellen , dass ein Objekt an die Funktion übergeben wird.

+

+
+
Destrukturierung von verschachtelten Objekten und Arrays

+
+
var metadata = {
+    title: "Scratchpad",
+    translations: [
+      {
+        locale: "de",
+        localization_tags: [ ],
+        last_edit: "2014-04-14T08:43:37",
+        url: "/de/docs/Tools/Scratchpad",
+        title: "JavaScript-Umgebung"
+      }
+    ],
+    url: "/en-US/docs/Tools/Scratchpad"
+};
+
+var { title: englishTitle, translations: [{ title: localeTitle }] } = metadata;
+
+console.log(englishTitle); // "Scratchpad"
+console.log(localeTitle);  // "JavaScript-Umgebung"

+
+
"for of" Iteration und Destrukturierung

+
+
var people = [
+  {
+    name: "Mike Smith",
+    family: {
+      mother: "Jane Smith",
+      father: "Harry Smith",
+      sister: "Samantha Smith"
+    },
+    age: 35
+  },
+  {
+    name: "Tom Jones",
+    family: {
+      mother: "Norah Jones",
+      father: "Richard Jones",
+      brother: "Howard Jones"
+    },
+    age: 25
+  }
+];
+
+for (var {name: n, family: { father: f } } of people) {
+  console.log("Name: " + n + ", Father: " + f);
+}
+
+// "Name: Mike Smith, Father: Harry Smith"
+// "Name: Tom Jones, Father: Richard Jones"

+
+
Auspacken von Objektfeldern, die als Funktionsparameter übergeben werden

+
+
function userId({id}) {
+  return id;
+}
+
+function whois({displayName: displayName, fullName: {firstName: name}}){
+  console.log(displayName + " is " + name);
+}
+
+var user = {
+  id: 42,
+  displayName: "jdoe",
+  fullName: {
+      firstName: "John",
+      lastName: "Doe"
+  }
+};
+
+console.log("userId: " + userId(user)); // "userId: 42"
+whois(user); // "jdoe is John"

+
+
Dies ermittelt id, displayName und firstName vom user Objekt und gibt sie aus.

+
+
Berechnete Objekteigenschaftsnamen und Destrukturierung

+
+
Berechnete Eigenschaftsnamen, wie bei Objektliteralen, können bei der Destruktierung verwendet werden.

+
+
let key = "z";
+let { [key]: foo } = { z: "bar" };
+
+console.log(foo); // "bar"
+

+
+
Rest in Objektdestrukturierung

+
+
Die Rest/Spread Eigenschaften für den ECMAScript Vorschlag (Stage 3) fügt die Rest-Syntax zur Destrukturierung hinzu. Rest Eigenschaften sammeln die restlichen, eigenen, aufzählbaren Eigenschaftsschlüssel, die noch nicht von der Destrukturierung erfasst wurden, auf.

+
+
var {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
+a; // 10
+b; // 20
+rest; // { c: 30, d: 40 }

+
+
Ungültige JavaScript Bezeichner als Eigenschaftsnamen

+
+
Destrukturierung kann mit Eigenschaftsnamen benutzt werden, die keine gültigen JavaScript Bezeichner sind, indem ein alternativer valider Beizeichner angegeben wird.

+
+
const foo = { 'fizz-buzz': true }
+const { 'fizz-buzz': fizzBuzz } = foo
+
+console.log(fizzBuzz); // "true"
+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('ES2015', '#sec-destructuring-assignment', 'Destructuring assignment')}}{{Spec2('ES2015')}}Initiale Definition.
{{SpecName('ESDraft', '#sec-destructuring-assignment', 'Destructuring assignment')}}{{Spec2('ESDraft')}} 
Rest/Spread Properties for ECMAScriptDraftStage 3 Entwurf.

+
+
Browserkompatibilität

+
+

+
+
+
{{Compat("javascript.operators.destructuring")}}

+

+
+
Siehe auch

+
+
diff --git a/files/de/web/javascript/reference/operators/destrukturierende_zuweisung/index.html b/files/de/web/javascript/reference/operators/destrukturierende_zuweisung/index.html
deleted file mode 100644
index 1ece290e90..0000000000
--- a/files/de/web/javascript/reference/operators/destrukturierende_zuweisung/index.html
+++ /dev/null
@@ -1,404 +0,0 @@
----
-title: Destrukturierende Zuweisung
-slug: Web/JavaScript/Reference/Operators/Destrukturierende_Zuweisung
-tags:
-  - Destructuring
-  - ECMAScript 2015
-  - JavaScript
-  - Operator
-translation_of: Web/JavaScript/Reference/Operators/Destructuring_assignment
----
-
{{jsSidebar("Operators")}}

-
-
Die destrukturierende Zuweisung ermöglicht es, Daten aus Arrays oder Objekten zu extrahieren, und zwar mit Hilfe einer Syntax, die der Konstruktion von Array- und Objekt-Literalen nachempfunden ist.

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

-
-
-
-
Syntax

-
-
var a, b, rest;
-[a, b] = [10, 20];
-console.log(a); // 10
-console.log(b); // 20
-
-[a, b, ...rest] = [10, 20, 30, 40, 50];
-console.log(a); // 10
-console.log(b): // 20
-console.log(rest); // [30, 40, 50]
-
-({ a, b } = { a: 10, b: 20 });
-console.log(a); // 10
-console.log(b); // 20
-
-
-// Stage 3 Vorschlag
-({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40 });
-console.log(a); // 10
-console.log(b); // 20
-console.log(rest); // {c: 30, d: 40}
-

-
-
Beschreibung

-
-
Die Objekt- und Array-Literal Ausdrücke stellen einen einfachen Weg für die Erstellung von ad hoc Datenpaketen zur Verfügung.

-
-
var x = [1, 2, 3, 4, 5];

-
-
Die destrukturierende Zuweisung nutzt eine ähnliche Syntax, aber auf der linken Seite der Zuweisung, um zu definieren, welche Werte von der Quellvariablen ausgepackt werden muss.

-
-
var x = [1, 2, 3, 4, 5];
-var [y, z] = x;
-console.log(y); // 1
-console.log(z); // 2
-

-
-
Diese Fähigkeit ist so ähnlich wie in den Sprachen Perl und Python.

-
-
Array-Destrukturierung

-
-
Einfaches Variablenzuweisung

-
-
var foo = ['one', 'two', 'three'];
-
-var [one, two, three] = foo;
-console.log(one); // "one"
-console.log(two); // "two"
-console.log(three); // "three"
-

-
-
Zuweisung separat von Deklaration

-
-
Eine destrukturierende Zuweisung kann ohne Deklaration im Zuweisungsstatement vorgenommen werden.

-
-
var a, b;
-
-[a, b] = [1, 2];
-console.log(a); // 1
-console.log(b); // 2

-
-
Standardwerte

-
-
Einer Variablen kann ein Standardwert zugewiesen werden, welcher greift, wenn der Wert im Fall vom auspacken des Arrays undefined ist.

-
-
var a, b;
-
-[a=5, b=7] = [1];
-console.log(a); // 1
-console.log(b); // 7

-
-
Variablen tauschen

-
-
Zwei Variablenwerte können mit destrukturierenden Zuweisungen vertauscht werden.

-
-
Ohne destrukturierende Zuweisung benötigt man für den Tausch zweier Werte eine temporäre Variable (oder, in manchen Low-level Sprachen, den XOR-swap Trick).

-
-
var a = 1;
-var b = 3;
-
-[a, b] = [b, a];
-console.log(a); // 3
-console.log(b); // 1

-
-
Array von Funktion zurückgeben und einlesen

-
-
Es ist immer möglich einen Array von einer Funktion zurückzugeben. Destrukturierung kann mit dem Arrayrückgabewert verwendet werden um mehrerer Werte auszuwählen.

-
-
In diesem Beispiel gibt f() den Wert [1, 2] zurück, welcher in einer Zeile mittels Destrukturierung eingelesen werden kann.

-
-
function f() {
-  return [1, 2];
-}
-
-var a, b;
-[a, b] = f();
-console.log(a); // 1
-console.log(b); // 2
-

-
-
Rückgabewerte teilweise ignorieren

-
-
Man kann auch Rückgabewerte, an denen man nicht interessiert ist, ignorieren:

-
-
function f() {
-  return [1, 2, 3];
-}
-
-var [a, , b] = f();
-console.log("A ist " + a + " B ist " + b);
-

-
-
Nach Ausführung dieses Codes ist a =1 und b = 3. Der Wert 2 wird ignoriert. Auf diese Art kann man jegliche (auch alle) zurückgegebene Werte ignorieren. Zum Beispiel:

-
-
[,,] = f();

-
-
Den Rest eines Arrays einer Variablen zuweisen

-
-
Wenn ein Array destrukturiert wird, kann man beim Auspacken den restlichen Teil eines Arrays einer Varaible mit dem Restpattern zuweisen:

-
-
var [a, ...b] = [1, 2, 3];
-console.log(a); // 1
-console.log(b); // [2, 3]

-
-
Zu beachten ist, dass ein {{jsxref("SyntaxError")}} erzeugt wird, wenn auf der linken Seite des Restelements ein trennendes Komma steht:

-
-
var [a, ...b,] = [1, 2, 3];
-// SyntaxError: rest element may not have a trailing comma

-
-
Auspacken von Treffern eines regulären Ausdrucks

-
-
Wenn die Methode exec() für reguläre Ausdrücke einen Treffer findet, gibt sie ein Array zurück, das erstens, den gesamten, passenden Teil des Strings und dann die Teile des Strings enthält, die den einzelnen geklammerten Gruppen im regulären Ausdruck entsprechen. Destrukturierende erlaubt es die Teile aus diesem Array auf einfache Art herauszuziehen, wobei der String mit dem kompletten Treffer ignoriert werden kann, falls er nicht benötigt wird.

-
-
function parseProtocol(url) {
-  var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
-  if(!parsedURL) {
-    return false;
-  }
-  console.log(parsedURL); // ["https://developer.mozilla.org/en-US/Web/JavaScript", "https", "developer.mozilla.org", "en-US/Web/JavaScript"]
-
-  var [, protocol, fullhost, fullpath] = parsedURL;
-  return protocol;
-}
-
-console.log(parseProtocol('https://developer.mozilla.org/en-US/Web/JavaScript')); // "https"
-

-
-
Objektdestrukturierung

-
-
Einfache Zuweisung

-
-
var o = {p: 42, q: true};
-var {p, q} = o;
-
-console.log(p); // 42
-console.log(q); // true
-

-
-
Zuweisung ohne Deklaration

-
-
Die destrukturierende Zuweisung kann ohne eine Deklaration im Zuweisungs-Statement durchgeführt werden.

-
-
var a, b;
-
-({a, b} = {a: 1, b: 2});

-
-

-
Die runden Klammern ( ... ) wird benötigt wenn man die destrukturierende Zuweisung mit Objektliteralen ohne eine Deklaration durchführen möchte.

-
-
{a, b} = {a: 1, b: 2} ist keine valide eigenständige Syntax, weil {a, b} auf der linken Seite als ein Block und nicht als Objektliteral erkannt wird.

-
-
({a, b} = {a: 1, b: 2}) ist genauso gültig wie var {a, b} = {a: 1, b: 2}

-
-
HINWEIS: Der ( ... ) Ausdruck muss durch ein vorangestelltes Semikolen benutzt werden oder es führt eine Funktion aus der vorherigen Zeile aus.

-

-
-
Zu neuen Varaiblennamen zuweisen

-
-
Eine Eigenschaft kann aus einem Objekt ausgepackt werden und zu einer Variablen mit einem anderen Namen zugewiesen werden.

-
-
var o = {p: 42, q: true};
-var {p: foo, q: bar} = o;
-
-console.log(foo); // 42
-console.log(bar); // true

-
-
Standardwerte

-
-
Einer Variablen können Standardwerte zugewiesen werden, wenn der ausgepackte Wert aus dem Objekt undefined ist.

-
-
var {a = 10, b = 5} = {a: 3};
-
-console.log(a); // 3
-console.log(b); // 5

-
-
Zuweisen eines neuen Variablennamen und eines Standardwertes

-
-
Eine Eigenschaft kann sowohl 1) aus einem Objekt ausgepackt werden und einer Variablen mit einem andern Namen zugewiesen werden und 2) einen Standardwert unterstützen, wenn der ausgepackte Wert undefined ist.

-
-
var {a:aa = 10, b:bb = 5} = {a: 3};
-
-console.log(aa); // 3
-console.log(bb); // 5

-
-
Standardwerte für Funktionsparamter setzen

-
-
ES5 Version

-
-
function drawES5Chart(options) {
-  options = options === undefined ? {} : options;
-  var size = options.size === undefined ? 'big' : options.size;
-  var cords = options.cords === undefined ? { x: 0, y: 0 } : options.cords;
-  var radius = options.radius === undefined ? 25 : options.radius;
-  console.log(size, cords, radius);
-  // jetzt zeichnen wir endlich ein paar Charts
-}
-
-drawES5Chart({
-  cords: { x: 18, y: 30 },
-  radius: 30
-});

-
-
ES2015-Version

-
-
function drawES2015Chart({size = 'big', cords = { x: 0, y: 0 }, radius = 25} = {})
-{
-  console.log(size, cords, radius);
-  // zeichne ein paar Graphen
-}
-
-drawES2015Chart({
-  cords: { x: 18, y: 30 },
-  radius: 30
-});

-
-

-
In der Funktionssignatur für drawES2015Chart oben ist der destrukturierten linken Seite ein leeres Objektliteral zugewiesen, auf der rechten Seite: {size = 'big', cords = {x: 0, y: 0}, radius = 25} = {}. Man kann die Funktion auch ohne die rechte Zuweisungsseite schreiben. Wenn jedoch die Zuweisung auf der rechten Seite weglassen wird, sucht die Funktion nach mindestens einem Argument, das beim Aufruf bereitgestellt wird, während man in der aktuellen Form einfach drawES2015Chart() aufrufen kann, ohne Parameter anzugeben. Das aktuelle Design ist nützlich, wenn man die Funktion, ohne Parameter anzugeben, aufrufen möchte. Das andere ist nützlich, um sicherzustellen , dass ein Objekt an die Funktion übergeben wird.

-

-
-
Destrukturierung von verschachtelten Objekten und Arrays

-
-
var metadata = {
-    title: "Scratchpad",
-    translations: [
-      {
-        locale: "de",
-        localization_tags: [ ],
-        last_edit: "2014-04-14T08:43:37",
-        url: "/de/docs/Tools/Scratchpad",
-        title: "JavaScript-Umgebung"
-      }
-    ],
-    url: "/en-US/docs/Tools/Scratchpad"
-};
-
-var { title: englishTitle, translations: [{ title: localeTitle }] } = metadata;
-
-console.log(englishTitle); // "Scratchpad"
-console.log(localeTitle);  // "JavaScript-Umgebung"

-
-
"for of" Iteration und Destrukturierung

-
-
var people = [
-  {
-    name: "Mike Smith",
-    family: {
-      mother: "Jane Smith",
-      father: "Harry Smith",
-      sister: "Samantha Smith"
-    },
-    age: 35
-  },
-  {
-    name: "Tom Jones",
-    family: {
-      mother: "Norah Jones",
-      father: "Richard Jones",
-      brother: "Howard Jones"
-    },
-    age: 25
-  }
-];
-
-for (var {name: n, family: { father: f } } of people) {
-  console.log("Name: " + n + ", Father: " + f);
-}
-
-// "Name: Mike Smith, Father: Harry Smith"
-// "Name: Tom Jones, Father: Richard Jones"

-
-
Auspacken von Objektfeldern, die als Funktionsparameter übergeben werden

-
-
function userId({id}) {
-  return id;
-}
-
-function whois({displayName: displayName, fullName: {firstName: name}}){
-  console.log(displayName + " is " + name);
-}
-
-var user = {
-  id: 42,
-  displayName: "jdoe",
-  fullName: {
-      firstName: "John",
-      lastName: "Doe"
-  }
-};
-
-console.log("userId: " + userId(user)); // "userId: 42"
-whois(user); // "jdoe is John"

-
-
Dies ermittelt id, displayName und firstName vom user Objekt und gibt sie aus.

-
-
Berechnete Objekteigenschaftsnamen und Destrukturierung

-
-
Berechnete Eigenschaftsnamen, wie bei Objektliteralen, können bei der Destruktierung verwendet werden.

-
-
let key = "z";
-let { [key]: foo } = { z: "bar" };
-
-console.log(foo); // "bar"
-

-
-
Rest in Objektdestrukturierung

-
-
Die Rest/Spread Eigenschaften für den ECMAScript Vorschlag (Stage 3) fügt die Rest-Syntax zur Destrukturierung hinzu. Rest Eigenschaften sammeln die restlichen, eigenen, aufzählbaren Eigenschaftsschlüssel, die noch nicht von der Destrukturierung erfasst wurden, auf.

-
-
var {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
-a; // 10
-b; // 20
-rest; // { c: 30, d: 40 }

-
-
Ungültige JavaScript Bezeichner als Eigenschaftsnamen

-
-
Destrukturierung kann mit Eigenschaftsnamen benutzt werden, die keine gültigen JavaScript Bezeichner sind, indem ein alternativer valider Beizeichner angegeben wird.

-
-
const foo = { 'fizz-buzz': true }
-const { 'fizz-buzz': fizzBuzz } = foo
-
-console.log(fizzBuzz); // "true"
-

-
-
Spezifikationen

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
SpezifikationStatusKommentar
{{SpecName('ES2015', '#sec-destructuring-assignment', 'Destructuring assignment')}}{{Spec2('ES2015')}}Initiale Definition.
{{SpecName('ESDraft', '#sec-destructuring-assignment', 'Destructuring assignment')}}{{Spec2('ESDraft')}} 
Rest/Spread Properties for ECMAScriptDraftStage 3 Entwurf.

-
-
Browserkompatibilität

-
-

-
-
-
{{Compat("javascript.operators.destructuring")}}

-

-
-
Siehe auch

-
-
diff --git a/files/de/web/javascript/reference/operators/increment/index.html b/files/de/web/javascript/reference/operators/increment/index.html
new file mode 100644
index 0000000000..74289b92e1
--- /dev/null
+++ b/files/de/web/javascript/reference/operators/increment/index.html
@@ -0,0 +1,80 @@
+---
+title: Inkrement (++)
+slug: Web/JavaScript/Reference/Operators/Inkrement
+tags:
+  - Inkrement
+  - Inkrement-Operator
+  - Inkrementieren
+translation_of: Web/JavaScript/Reference/Operators/Increment
+---
+
{{jsSidebar("Operators")}}

+
+
Der Inkrement-Operator (++) inkrementiert einen Operanden, addiert also eins hinzu und gibt einen Wert zurück.

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

+
+
+
+
Syntax

+
+
Operator: x++ or ++x
+

+
+
Description

+
+
Wird der Inkrement-Operator als Postfix benutzt, wobei der Operator hinter dem Operanden steht (z.B. x++), wird der Operand um eins erhöht und der Wert vor dem Inkrementieren zurück gegeben.

+
+
Wird der Inkrement-Operator als Prefix benutzt, wobei der Operator vor dem Operanden steht (z.B. ++x), wird der Operand um eins erhöht und der Wert nach dem Inkrementieren  zurück gegeben.

+
+
Examples

+
+
Postfix increment

+
+
let x = 3;
+y = x++;
+
+// y = 3
+// x = 4
+

+
+
Prefix increment

+
+
let a = 2;
+b = ++a;
+
+// a = 3
+// b = 3
+

+
+
Specifications

+
+
+ 
+  
+   
+  
+  
+   
+  
+ 
+
Specification
{{SpecName('ESDraft', '#sec-postfix-increment-operator', 'Increment operator')}}

+
+
Browser compatibility

+
+
+
+
{{Compat("javascript.operators.increment")}}

+
+
See also

+
+
diff --git a/files/de/web/javascript/reference/operators/inkrement/index.html b/files/de/web/javascript/reference/operators/inkrement/index.html
deleted file mode 100644
index 74289b92e1..0000000000
--- a/files/de/web/javascript/reference/operators/inkrement/index.html
+++ /dev/null
@@ -1,80 +0,0 @@
----
-title: Inkrement (++)
-slug: Web/JavaScript/Reference/Operators/Inkrement
-tags:
-  - Inkrement
-  - Inkrement-Operator
-  - Inkrementieren
-translation_of: Web/JavaScript/Reference/Operators/Increment
----
-
{{jsSidebar("Operators")}}

-
-
Der Inkrement-Operator (++) inkrementiert einen Operanden, addiert also eins hinzu und gibt einen Wert zurück.

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

-
-
-
-
Syntax

-
-
Operator: x++ or ++x
-

-
-
Description

-
-
Wird der Inkrement-Operator als Postfix benutzt, wobei der Operator hinter dem Operanden steht (z.B. x++), wird der Operand um eins erhöht und der Wert vor dem Inkrementieren zurück gegeben.

-
-
Wird der Inkrement-Operator als Prefix benutzt, wobei der Operator vor dem Operanden steht (z.B. ++x), wird der Operand um eins erhöht und der Wert nach dem Inkrementieren  zurück gegeben.

-
-
Examples

-
-
Postfix increment

-
-
let x = 3;
-y = x++;
-
-// y = 3
-// x = 4
-

-
-
Prefix increment

-
-
let a = 2;
-b = ++a;
-
-// a = 3
-// b = 3
-

-
-
Specifications

-
-
- 
-  
-   
-  
-  
-   
-  
- 
-
Specification
{{SpecName('ESDraft', '#sec-postfix-increment-operator', 'Increment operator')}}

-
-
Browser compatibility

-
-
-
-
{{Compat("javascript.operators.increment")}}

-
-
See also

-
-
diff --git a/files/de/web/javascript/reference/operators/logische_operatoren/index.html b/files/de/web/javascript/reference/operators/logische_operatoren/index.html
deleted file mode 100644
index 6a20e85b79..0000000000
--- a/files/de/web/javascript/reference/operators/logische_operatoren/index.html
+++ /dev/null
@@ -1,247 +0,0 @@
----
-title: Logische Operatoren
-slug: Web/JavaScript/Reference/Operators/Logische_Operatoren
-tags:
-  - JavaScript
-  - Logic
-  - Logical Operators
-  - Not
-  - Operator
-  - Reference
-  - and
-  - or
-translation_of: Web/JavaScript/Reference/Operators
-translation_of_original: Web/JavaScript/Reference/Operators/Logical_Operators
----
-
{{jsSidebar("Operators")}}

-
-
Logische Operatoren werden typischerweise im Zusammenhang mit {{jsxref("Boolean")}} (logischen) Werten verwendet. Die Operatoren && (Logisches UND) und || (Logisches ODER) geben dabei den Wert von einem der Operanden zurück. Sind die Operanden mit nicht-booleschen Werten belegt, geben diese Operatoren entsprechend nicht-boolesche Werte zurück.

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

-
-
-
-
Beschreibung

-
-
In der folgenden Tabelle werden die logischen Operatoren erläutert.

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
OperatorVerwendungBeschreibung
Logisches UND (&&)ausdruck1 && ausdruck2Gibt ausdruck1 zurück, wenn er zu false konvertiert werden kann; anderfalls wird ausdruck2 zurückgegeben. Sind beide Operanden true, gibt && true zurück, Andernfalls false.
Logisches ODER (||)ausdruck1 || ausdruck2Gibt ausdruck1 zurück, wenn er zu true konvertiert werden kann; andernfalls wird ausdruck2 zurückgegeben. Ist einer der Operanden true, gibt || true zurück.
Logisches NICHT (!)!ausdruckGibt false zurück, wenn der Operand zu true konvertiert werden kann. Andernfalls wird true zurückgegeben.

-
-
Wenn ein Wert zu true konvertiert werden kann, wird er {{Glossary("truthy")}} genannt. Wenn ein Wert zu false konvertiert werden kann, wird er {{Glossary("falsy")}} genannt.

-
-
Beispiele für Ausdrücke, die zu false konvertiert werden können:

-
-
    
- 
  • null
    • 
- 
  • NaN
    • 
- 
  • 0
    • 
- 
  • leerer String ("" oder '')
    • 
- 
  • undefined
    • 
-

-
-
Auch wenn die Operatoren && und || mit nichtbooleschen Operanden verwendet werden können, gehören sie trotzdem zur Gruppe der logischen Operatoren, da ihre Rückgabewerte immer zu booleschen Werten konvertiert werden können.

-
-
Kurschlussauswertung (Short-Circuit Evaluation)

-
-
Logische Ausdrücke werden von links nach rechts ausgewertet und hierbei wird anhand der folgenden Regeln getestet, ob Kurzschlussauswertungen möglich sind:

-
-
    
- 
  • false && (irgendwas) wird kurzerhand zu false.
    • 
- 
  • true || (irgendwas) wird kurzerhand zu true.
    • 
-

-
-
Die Regeln der Logik garantieren, dass diese Auswertungen immer korrekt sind. Zu beachten ist, dass der irgendwas Teil nicht ausgewertet wird, so dass keine Seiteneffekte die von diesem Teil ausgehen ausgeführt werden. Zu beachten ist zudem, dass der irgendwas Teil ein einzelner Ausdruck ist (wie die Klammern anzeigen).

-
-
Beispielhaft betrachten wir die folgenden äquivalenten Funktionen:

-
-
function shortCircuitEvaluation() {
-  // Logisches ODER (||)
-  doSomething() || doSomethingElse();
-
-  // Logisches UND (&&)
-  doSomething() && doSomethingElse();
-}
-
-function equivalentEvaluation() {
-
-  // Logisches ODER (||)
-  var orFlag = doSomething();
-  if (!orFlag) {
-    doSomethingElse();
-  }
-
-  // Logisches UND (&&)
-  var andFlag = doSomething();
-  if (andFlag) {
-    doSomethingElse();
-  }
-}
-

-
-
Die folgenden Ausdrücke sind aufgrund der Operatorrangfolgen nicht äquivalent und betont, wie wichtig es ist, dass der rechte Operand ein einzelner Ausdruck ist (gruppiert, falls in Klammern erforderlich).

-
-
false &&  true || true      // wird zu true
-false && (true || true)     // wird zu false

-
-
Logisches UND (&&)

-
-
Im Folgenden sind Beispiele des && (logisches UND) Operators zu sehen.

-
-
a1 = true  && true      // t && t wird zu true
-a2 = true  && false     // t && f wird zu false
-a3 = false && true      // f && t wird zu false
-a4 = false && (3 == 4)  // f && f wird zu false
-a5 = 'Cat' && 'Dog'     // t && t wird zu "Dog"
-a6 = false && 'Cat'     // f && t wird zu false
-a7 = 'Cat' && false     // t && f wird zu false
-a8 = ''    && false     // f && f wird zu ""
-a9 = false && ''        // f && f wird zu false
-

-
-
Logisches ODER (||)

-
-
Im Folgenden sind Beispiele des || (logisches ODER) Operators zu sehen.

-
-
o1 = true  || true       // t || t wird zu true
-o2 = false || true       // f || t wird zu true
-o3 = true  || false      // t || f wird zu true
-o4 = false || (3 == 4)   // f || f wird zu false
-o5 = 'Cat' || 'Dog'      // t || t wird zu "Cat"
-o6 = false || 'Cat'      // f || t wird zu "Cat"
-o7 = 'Cat' || false      // t || f wird zu "Cat"
-o8 = ''    || false      // f || f wird zu false
-o9 = false || ''         // f || f wird zu ""
-

-
-
Logisches NICHT (!)

-
-
Im Folgenden sind Beispiele des ! (logisches NICHT) Operators zu sehen.

-
-
n1 = !true              // !t wird zu false
-n2 = !false             // !f wird zu true
-n3 = !"Cat"             // !t wird zu false
-

-
-
Konvertierungsregeln

-
-
Konvertierung von UND zu ODER

-
-
Die folgende Operation nutzt Booleane:

-
-
bCondition1 && bCondition2

-
-
ist äquivalent zum folgenden Ausdruck:

-
-
!(!bCondition1 || !bCondition2)

-
-
Konvertierung von ODER zu UND

-
-
Die folgende Operation nutzt Booleane:

-
-
bCondition1 || bCondition2

-
-
ist äquivalent zu folgendem Ausdruck:

-
-
!(!bCondition1 && !bCondition2)

-
-
Negierung des logischen NICHT

-
-
Die folgende Operation nutzt Booleane:

-
-
!!bCondition

-
-
ist äquivalent mit:

-
-
bCondition

-
-
Klammern in logischen Ausdrücken auflösen

-
-
Ein logischer Ausdruck wird von links nach rechts ausgewertet. Es ist immer möglich runde Klammern von einem komplexen Ausdruck zu entfernen, wenn einige Regeln beachtet werden.

-
-
Geschachteltes AND entfernen

-
-
Die folgende Operation nutzt Booleane:

-
-
bCondition1 || (bCondition2 && bCondition3)

-
-
ist äquivalent mit:

-
-
bCondition1 || bCondition2 && bCondition3

-
-
Geschachteltes OR entfernen

-
-
Die folgende Operation nutzt Booleane:

-
-
bCondition1 && (bCondition2 || bCondition3)

-
-
ist äquivalent mit:

-
-
!(!bCondition1 || !bCondition2 && !bCondition3)

-
-
Spezifikationen

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
SpezifikationStatusKommentar
{{SpecName('ES1')}}{{Spec2('ES1')}}Initiale Definition.
{{SpecName('ES5.1', '#sec-11.11')}}{{Spec2('ES5.1')}}Definiert in mehreren Kapiteln der Spezifikation: Logical NOT Operator, Binary Logical Operators
{{SpecName('ES6', '#sec-binary-logical-operators')}}{{Spec2('ES6')}}Definiert in mehreren Kapiteln der Spezifikation: Logical NOT Operator, Binary Logical Operators
{{SpecName('ESDraft', '#sec-binary-logical-operators')}}{{Spec2('ESDraft')}}Definiert in mehreren Kapiteln der Spezifikation: Logical NOT Operator, Binary Logical Operators

-
-
Browserkompatibilität

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

-
-
Siehe auch

-
-
    
- 
  • {{jsxref("Operators/Bitwise_Operators", "Bitweise Operatoren")}}
    • 
- 
  • {{jsxref("Boolean")}}
    • 
-

diff --git a/files/de/web/javascript/reference/operators/modulo/index.html b/files/de/web/javascript/reference/operators/modulo/index.html
deleted file mode 100644
index 19403ab883..0000000000
--- a/files/de/web/javascript/reference/operators/modulo/index.html
+++ /dev/null
@@ -1,78 +0,0 @@
----
-title: Modulo (%)
-slug: Web/JavaScript/Reference/Operators/Modulo
-tags:
-  - Division mit Rest
-  - Divisionsalgorithmus
-  - Restwert
-  - Restwertberechnung
-translation_of: Web/JavaScript/Reference/Operators/Remainder
----
-
{{jsSidebar("Operators")}}

-
-
Der Modulo-Operator (%) gibt den Restwert zurück, der übrig bleibt wenn ein Operand durch einen anderen geteilt wird. Das Vorzeichen ergibt sich aus der Wahl der Quotienten.

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

-
-

-
-
-
-
Syntax

-
-
Operator: var1 % var2
-

-
-
Examples

-
-
Remainder with positive dividend

-
-
 12 % 5  //  2
- 1 % -2 //  1
- 1 % 2  //  1
- 2 % 3  //  2
-5.5 % 2 // 1.5
-

-
-
Remainder with negative dividend

-
-
-12 % 5 // -2
--1 % 2  // -1
--4 % 2  // -0

-
-
Remainder with NaN

-
-
NaN % 2 // NaN

-
-
Specifications

-
-
- 
-  
-   
-  
-  
-   
-  
- 
-
Specification
{{SpecName('ESDraft', '#sec-multiplicative-operators', 'Remainder operator')}}

-
-
Browser compatibility

-
-
-
-
{{Compat("javascript.operators.remainder")}}

-
-
See also

-
-
diff --git a/files/de/web/javascript/reference/operators/object_initializer/index.html b/files/de/web/javascript/reference/operators/object_initializer/index.html
new file mode 100644
index 0000000000..32c30b7f16
--- /dev/null
+++ b/files/de/web/javascript/reference/operators/object_initializer/index.html
@@ -0,0 +1,315 @@
+---
+title: Objekt Initialisierer
+slug: Web/JavaScript/Reference/Operators/Objekt_Initialisierer
+tags:
+  - ECMAScript 2015
+  - JSON
+  - JavaScript
+  - Literal
+  - Methods
+  - Object
+  - Primary Expression
+  - computed
+  - mutation
+  - properties
+translation_of: Web/JavaScript/Reference/Operators/Object_initializer
+---
+
{{JsSidebar("Operators")}}

+
+
Objekte können mit new Object(), Object.create(), oder mit der literal Notation (Initialisierungs Notation) initialisiert werden. Ein Objekt Initialisierer ist eine Komma getrennte Liste von null oder mehreren Paaren von Eigenschafts-Namen und zugehörigen Werten eines Objektes, eingeschlossen in geschwungene Klammern ({}).

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

+
+
+
+
Syntax

+
+
var o = {};
+var o = { a: "foo", b: 42, c: {} };
+
+var a = "foo", b = 42, c = {};
+var o = { a: a, b: b, c: c };
+
+var o = {
+  property: function ([parameters]) {},
+  get property() {},
+  set property(value) {},
+};
+

+
+
Neue Schreibweisen in ECMAScript 2015

+
+
Man sollte in der Kompatibilitätstabelle die Unterstützung dieser Schreibweisen nachschlagen. In Umgebungen, die diese nicht unterstützen, entstehen Syntaxfehler.

+
+
// Kurzschreibweisen für Eigenschaftsnamen (ES2015)
+var a = "foo", b = 42, c = {};
+var o = { a, b, c };
+
+// Kurzschreibweise Methoden Namen (ES2015)
+var o = {
+  property([parameters]) {}
+};
+
+// Berechnete Eigenschaftsnamen (ES2015)
+var prop = "foo";
+var o = {
+  [prop]: "hey",
+  ["b" + "ar"]: "there",
+};

+
+
Beschreibung

+
+
Ein Objekt Initialisierer ist ein Ausdruck welcher die Initialisierung eines {{jsxref("Object")}} beschreibt. Objekte bestehen aus Eigenschaften, welche verwendet werden, um ein Objekt zu beschreiben. Die Werte der Objekt Eigenschaften können {{Glossary("primitive")}} Datentypen oder andere Objekte enthalten.

+
+
Objekte erzeugen

+
+
Ein leeres Objekt ohne Eigenschaften kann wie folgt erzeugt werden:

+
+
var object = {};

+
+
Jedoch: die Vorteile der literalen oder Initialisierer Notation versetzen Sie in die Lage, Objekte inklusive Eigenschaften, innerhalb geschwungener Klammern, schneller zu erzeugen. Sie schreiben einfach eine Liste von Schlüssel:Werte Paaren, getrennt durch ein Komma. Der folgende Quellcode erzeugt ein Objekt mit drei Eigenschaften mit den Schlüsseln "foo", "age" und "baz". Die Werte dieser Schlüssel sind: die Zeichenkette "bar", die Zahl 42 und die dritte Eigenschaft hat ein anderes Objekt als Wert.

+
+
var object = {
+  foo: "bar",
+  age: 42,
+  baz: { myProp: 12 },
+}

+
+
Auf Eigenschaften zugreifen

+
+
Sobald ein Objekt erzeugt worden ist, möchte man auf seine Eigenschaften lesend oder schreibend zugreifen. Auf die Eigenschaften eines Objektes kann mit der Punktnotation oder der Klammer-Notation zugegriffen werden. Siehe Eigenschaftszugriffe für weiter Informationen.

+
+
object.foo; // "bar"
+object["age"]; // 42
+
+object.foo = "baz";
+

+
+
Eigenschaften definieren

+
+
Wir haben bereits gelernt, wie man Eigenschaften mit Hilfe der Initialisierungs Syntax schreibt. Oft gibt es Variablen im Code, die Sie in einem Objekt verwenden möchten. Man sieht oft Quellcode wie den folgenden: 

+
+
var a = "foo",
+    b = 42,
+    c = {};
+
+var o = {
+  a: a,
+  b: b,
+  c: c
+};

+
+
Mit ECMAScript 2015 ist eine kürzere Schreibweise verfügbar, um das Gleiche zu erreichen:

+
+
var a = "foo",
+    b = 42,
+    c = {};
+
+// Kurzschreibweise für Eigenschaftsnamen in ES2015
+var o = { a, b, c };
+
+// In anderen Worten
+console.log(); // true

+
+
Doppelte Eigenschaftsnamen

+
+
Bei Verwendung des gleichen Namens für Ihre Eigenschaften, wird die zweite Eigenschaft die erste überschreiben.

+
+
var a = {x: 1, x: 2};
+console.log(a); // { x: 2}
+

+
+
Im strikten Modus von ECMAScript 5 wurden doppelte Eigenschaftsnamen als {{jsxref("SyntaxError")}} gewertet. Mit der Einführung von berechneten Eigenschaftsnamen in ECMAScript 2015 wurde diese Einschränkung entfernt, was Duplikate zur Laufzeit möglich macht.

+
+
function haveES2015DuplicatePropertySemantics(){
+  "use strict";
+  try {
+    ({ prop: 1, prop: 2 });
+
+    // No error thrown, duplicate property names allowed in strict mode
+    return true;
+  } catch (e) {
+    // Error thrown, duplicates prohibited in strict mode
+    return false;
+  }
+}

+
+
Methoden Definitionen

+
+
Eine Eigenschaft eines Objekts kann auch auf eine Funktion oder einen Getter oder Setter-Methode verweisen.

+
+
var o = {
+  property: function ([parameters]) {},
+  get property() {},
+  set property(value) {},
+};

+
+
In ECMAScript 2015 gibt es eine kürzere Schreibweise, mit der das Schlüsselwort "function" überflüssig wird.

+
+
// Kurzschreibweise für Methoden Namen (ES2015)
+var o = {
+  property([parameters]) {},
+  * generator() {}
+};

+
+
In ECMAScript 2015 gibt es eine Möglichkeit Eigenschaften mit einer Generatorfunktion zu definierten:

+
+
var o = {
+  *generator() {
+    ........
+  }
+};

+
+
Diese ist gleich zur ES5 ähnlichen Notation (aber ECMAScript 5 hat keine Generatorfunktionen):

+
+
var o = {
+  generator = function* () {
+    ........
+  }
+}

+
+
Für weitere Informationen und Beispiele zu Methoden, siehe Methodendefinitionen.

+
+
Berechnete Bezeichnernamen

+
+
Beginnend mit ECMAScript 2015, unterstützt die Objekt Initialisierer Syntax auch berechnete Bezeichnernamen für Objekt Eigenschaften. Das gestatt dem Programmierer einen Ausdruck in eckigen Klammern anzugeben, aus welchem der Bezeichnernamen für die Objekt Eigenschaft berechnet wird. Die Schreibweise dafür ist analog zu der Klammer-Notation für den Zugriff auf Objekt Eigenschaften welche Sie bereits benutzt haben. Dieselbe Syntax kann nun für Eigenschaften Bezeichner verwendet werden:

+
+
// Computed property names (ES2015)
+var i = 0;
+var a = {
+  ["foo" + ++i]: i,
+  ["foo" + ++i]: i,
+  ["foo" + ++i]: i
+};
+
+console.log(a.foo1); // 1
+console.log(a.foo2); // 2
+console.log(a.foo3); // 3
+
+var param = 'size';
+var config = {
+  [param]: 12,
+  ["mobile" + param.charAt(0).toUpperCase() + param.slice(1)]: 4
+};
+
+console.log(config); // { size: 12, mobileSize: 4 }

+
+
Spread Eigenschaften

+
+
Die Vorschlag von Rest/Spread Eigenschaft für ECMAScript (Stage 4) fügt Spread Eigenschaften zu Objektliteralen hinzu. Er kopiert eigene aufzählbare Eigenschaften des genutzten Objektes in ein neues Objekt.

+
+
Oberflächliches Clonen (ausgenommen Eigenschaften) oder Verschmelzen von Objekten ist nun mit einer Kürzeren Syntax als {{jsxref("Object.assign()")}} möglich.

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

+
+
Zu beachten ist, dass {{jsxref("Object.assign()")}} Setters benutzt, was der Spread Operator nicht macht.

+
+
Prototypmutationen

+
+
Eine Eigenschaft Definition der Form __proto__: Wert oder "__proto__": Wert erzeugt keine Eigenschaft mit dem Namen __proto__. Wenn der angegebene Wert ein Objekt oder null ist, wird stattdessen der [[Prototyp]] des erzeugten Objektes auf den angegebenen Wert geändert. (Das Objekt wird nicht verändert, falls der Wert kein Objekt oder null ist.)

+
+
var obj1 = {};
+assert(Object.getPrototypeOf(obj1) === Object.prototype);
+
+var obj2 = { __proto__: null };
+assert(Object.getPrototypeOf(obj2) === null);
+
+var protoObj = {};
+var obj3 = { "__proto__": protoObj };
+assert(Object.getPrototypeOf(obj3) === protoObj);
+
+var obj4 = { __proto__: "not an object or null" };
+assert(Object.getPrototypeOf(obj4) === Object.prototype);
+assert(!obj4.hasOwnProperty("__proto__"));
+

+
+
Pro Objekt-Literal ist nur eine einzelne Prototypmutation erlaubt: mehrfache Prototyp Mutationen führen zu einem Syntax Fehler.

+
+
Eigenschaftsdefinitionen welche nicht von der Doppelpunkt Notation Gebrauch machen, sind keine Prototyp Mutationen: es sind Eigenschaftsdefinitionen die sich verhalten wie jede andere Definition von Eigenschaftsbezeichnern auch.

+
+
var __proto__ = "variable";
+
+var obj1 = { __proto__ };
+assert(Object.getPrototypeOf(obj1) === Object.prototype);
+assert(obj1.hasOwnProperty("__proto__"));
+assert(obj1.__proto__ === "variable");
+
+var obj2 = { __proto__() { return "hello"; } };
+assert(obj2.__proto__() === "hello");
+
+var obj3 = { ["__prot" + "o__"]: 17 };
+assert(obj3.__proto__ === 17);
+

+
+
Objektliteral-Notation vs JSON

+
+
Die Objekt-Literal Notation ist nicht dasselbe wie die JavaScript Object Notation (JSON). Obwohl sie ähnlich aussehen, gibt es Unterschiede zwischen ihnen:

+
+
    
+ 
  • JSON erlaubt nur Eigenschaftsdefinitionen mit "Eigenschaft": Wert Syntax. Der Eigenschaftsname muss in doppelten Anführungszeichen geschrieben werden, und die Definition kann nicht in Kurzschreibweise erfolgen.
    • 
+ 
  • In JSON können die Werte nur Strings, Zahlen, Arrays, true, false, null oder  andere (JSON) Objekte sein.
    • 
+ 
  • Ein Funktionswert (siehe "Methoden" oben) kann in JSON keinem Wert zugeordnet werden.
    • 
+ 
  • Objekte wie {{jsxref ("Date")}} werden nach dem Aufruf von {{jsxref ("JSON.parse()")}}, in einen String umgewandelt, .
    • 
+ 
  • {{jsxref("JSON.parse()")}} weist berechnete Eigenschaftsnamen zurück und wirft eine Fehlermeldung.
    • 
+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('ES1')}}{{Spec2('ES1')}}Initiale Definition.
{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}{{Spec2('ES5.1')}}Getter und Setter hinzugefügt.
{{SpecName('ES2015', '#sec-object-initializer', 'Object Initializer')}}{{Spec2('ES2015')}}Kurzschreibweise für Methoden-/Eigenschaftsnamen und berechnete Eigenschaftsnamen hinzugefügt.
{{SpecName('ESDraft', '#sec-object-initializer', 'Object Initializer')}}{{Spec2('ESDraft')}}
Rest/Spread Properties for ECMAScript EntwurfStage 4 (Fertig).

+
+
Browserkompatibilität

+
+

+
+
+
{{Compat("javascript.operators.object_initializer")}}

+

+
+
Siehe auch

+
+
diff --git a/files/de/web/javascript/reference/operators/objekt_initialisierer/index.html b/files/de/web/javascript/reference/operators/objekt_initialisierer/index.html
deleted file mode 100644
index 32c30b7f16..0000000000
--- a/files/de/web/javascript/reference/operators/objekt_initialisierer/index.html
+++ /dev/null
@@ -1,315 +0,0 @@
----
-title: Objekt Initialisierer
-slug: Web/JavaScript/Reference/Operators/Objekt_Initialisierer
-tags:
-  - ECMAScript 2015
-  - JSON
-  - JavaScript
-  - Literal
-  - Methods
-  - Object
-  - Primary Expression
-  - computed
-  - mutation
-  - properties
-translation_of: Web/JavaScript/Reference/Operators/Object_initializer
----
-
{{JsSidebar("Operators")}}

-
-
Objekte können mit new Object(), Object.create(), oder mit der literal Notation (Initialisierungs Notation) initialisiert werden. Ein Objekt Initialisierer ist eine Komma getrennte Liste von null oder mehreren Paaren von Eigenschafts-Namen und zugehörigen Werten eines Objektes, eingeschlossen in geschwungene Klammern ({}).

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

-
-
-
-
Syntax

-
-
var o = {};
-var o = { a: "foo", b: 42, c: {} };
-
-var a = "foo", b = 42, c = {};
-var o = { a: a, b: b, c: c };
-
-var o = {
-  property: function ([parameters]) {},
-  get property() {},
-  set property(value) {},
-};
-

-
-
Neue Schreibweisen in ECMAScript 2015

-
-
Man sollte in der Kompatibilitätstabelle die Unterstützung dieser Schreibweisen nachschlagen. In Umgebungen, die diese nicht unterstützen, entstehen Syntaxfehler.

-
-
// Kurzschreibweisen für Eigenschaftsnamen (ES2015)
-var a = "foo", b = 42, c = {};
-var o = { a, b, c };
-
-// Kurzschreibweise Methoden Namen (ES2015)
-var o = {
-  property([parameters]) {}
-};
-
-// Berechnete Eigenschaftsnamen (ES2015)
-var prop = "foo";
-var o = {
-  [prop]: "hey",
-  ["b" + "ar"]: "there",
-};

-
-
Beschreibung

-
-
Ein Objekt Initialisierer ist ein Ausdruck welcher die Initialisierung eines {{jsxref("Object")}} beschreibt. Objekte bestehen aus Eigenschaften, welche verwendet werden, um ein Objekt zu beschreiben. Die Werte der Objekt Eigenschaften können {{Glossary("primitive")}} Datentypen oder andere Objekte enthalten.

-
-
Objekte erzeugen

-
-
Ein leeres Objekt ohne Eigenschaften kann wie folgt erzeugt werden:

-
-
var object = {};

-
-
Jedoch: die Vorteile der literalen oder Initialisierer Notation versetzen Sie in die Lage, Objekte inklusive Eigenschaften, innerhalb geschwungener Klammern, schneller zu erzeugen. Sie schreiben einfach eine Liste von Schlüssel:Werte Paaren, getrennt durch ein Komma. Der folgende Quellcode erzeugt ein Objekt mit drei Eigenschaften mit den Schlüsseln "foo", "age" und "baz". Die Werte dieser Schlüssel sind: die Zeichenkette "bar", die Zahl 42 und die dritte Eigenschaft hat ein anderes Objekt als Wert.

-
-
var object = {
-  foo: "bar",
-  age: 42,
-  baz: { myProp: 12 },
-}

-
-
Auf Eigenschaften zugreifen

-
-
Sobald ein Objekt erzeugt worden ist, möchte man auf seine Eigenschaften lesend oder schreibend zugreifen. Auf die Eigenschaften eines Objektes kann mit der Punktnotation oder der Klammer-Notation zugegriffen werden. Siehe Eigenschaftszugriffe für weiter Informationen.

-
-
object.foo; // "bar"
-object["age"]; // 42
-
-object.foo = "baz";
-

-
-
Eigenschaften definieren

-
-
Wir haben bereits gelernt, wie man Eigenschaften mit Hilfe der Initialisierungs Syntax schreibt. Oft gibt es Variablen im Code, die Sie in einem Objekt verwenden möchten. Man sieht oft Quellcode wie den folgenden: 

-
-
var a = "foo",
-    b = 42,
-    c = {};
-
-var o = {
-  a: a,
-  b: b,
-  c: c
-};

-
-
Mit ECMAScript 2015 ist eine kürzere Schreibweise verfügbar, um das Gleiche zu erreichen:

-
-
var a = "foo",
-    b = 42,
-    c = {};
-
-// Kurzschreibweise für Eigenschaftsnamen in ES2015
-var o = { a, b, c };
-
-// In anderen Worten
-console.log(); // true

-
-
Doppelte Eigenschaftsnamen

-
-
Bei Verwendung des gleichen Namens für Ihre Eigenschaften, wird die zweite Eigenschaft die erste überschreiben.

-
-
var a = {x: 1, x: 2};
-console.log(a); // { x: 2}
-

-
-
Im strikten Modus von ECMAScript 5 wurden doppelte Eigenschaftsnamen als {{jsxref("SyntaxError")}} gewertet. Mit der Einführung von berechneten Eigenschaftsnamen in ECMAScript 2015 wurde diese Einschränkung entfernt, was Duplikate zur Laufzeit möglich macht.

-
-
function haveES2015DuplicatePropertySemantics(){
-  "use strict";
-  try {
-    ({ prop: 1, prop: 2 });
-
-    // No error thrown, duplicate property names allowed in strict mode
-    return true;
-  } catch (e) {
-    // Error thrown, duplicates prohibited in strict mode
-    return false;
-  }
-}

-
-
Methoden Definitionen

-
-
Eine Eigenschaft eines Objekts kann auch auf eine Funktion oder einen Getter oder Setter-Methode verweisen.

-
-
var o = {
-  property: function ([parameters]) {},
-  get property() {},
-  set property(value) {},
-};

-
-
In ECMAScript 2015 gibt es eine kürzere Schreibweise, mit der das Schlüsselwort "function" überflüssig wird.

-
-
// Kurzschreibweise für Methoden Namen (ES2015)
-var o = {
-  property([parameters]) {},
-  * generator() {}
-};

-
-
In ECMAScript 2015 gibt es eine Möglichkeit Eigenschaften mit einer Generatorfunktion zu definierten:

-
-
var o = {
-  *generator() {
-    ........
-  }
-};

-
-
Diese ist gleich zur ES5 ähnlichen Notation (aber ECMAScript 5 hat keine Generatorfunktionen):

-
-
var o = {
-  generator = function* () {
-    ........
-  }
-}

-
-
Für weitere Informationen und Beispiele zu Methoden, siehe Methodendefinitionen.

-
-
Berechnete Bezeichnernamen

-
-
Beginnend mit ECMAScript 2015, unterstützt die Objekt Initialisierer Syntax auch berechnete Bezeichnernamen für Objekt Eigenschaften. Das gestatt dem Programmierer einen Ausdruck in eckigen Klammern anzugeben, aus welchem der Bezeichnernamen für die Objekt Eigenschaft berechnet wird. Die Schreibweise dafür ist analog zu der Klammer-Notation für den Zugriff auf Objekt Eigenschaften welche Sie bereits benutzt haben. Dieselbe Syntax kann nun für Eigenschaften Bezeichner verwendet werden:

-
-
// Computed property names (ES2015)
-var i = 0;
-var a = {
-  ["foo" + ++i]: i,
-  ["foo" + ++i]: i,
-  ["foo" + ++i]: i
-};
-
-console.log(a.foo1); // 1
-console.log(a.foo2); // 2
-console.log(a.foo3); // 3
-
-var param = 'size';
-var config = {
-  [param]: 12,
-  ["mobile" + param.charAt(0).toUpperCase() + param.slice(1)]: 4
-};
-
-console.log(config); // { size: 12, mobileSize: 4 }

-
-
Spread Eigenschaften

-
-
Die Vorschlag von Rest/Spread Eigenschaft für ECMAScript (Stage 4) fügt Spread Eigenschaften zu Objektliteralen hinzu. Er kopiert eigene aufzählbare Eigenschaften des genutzten Objektes in ein neues Objekt.

-
-
Oberflächliches Clonen (ausgenommen Eigenschaften) oder Verschmelzen von Objekten ist nun mit einer Kürzeren Syntax als {{jsxref("Object.assign()")}} möglich.

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

-
-
Zu beachten ist, dass {{jsxref("Object.assign()")}} Setters benutzt, was der Spread Operator nicht macht.

-
-
Prototypmutationen

-
-
Eine Eigenschaft Definition der Form __proto__: Wert oder "__proto__": Wert erzeugt keine Eigenschaft mit dem Namen __proto__. Wenn der angegebene Wert ein Objekt oder null ist, wird stattdessen der [[Prototyp]] des erzeugten Objektes auf den angegebenen Wert geändert. (Das Objekt wird nicht verändert, falls der Wert kein Objekt oder null ist.)

-
-
var obj1 = {};
-assert(Object.getPrototypeOf(obj1) === Object.prototype);
-
-var obj2 = { __proto__: null };
-assert(Object.getPrototypeOf(obj2) === null);
-
-var protoObj = {};
-var obj3 = { "__proto__": protoObj };
-assert(Object.getPrototypeOf(obj3) === protoObj);
-
-var obj4 = { __proto__: "not an object or null" };
-assert(Object.getPrototypeOf(obj4) === Object.prototype);
-assert(!obj4.hasOwnProperty("__proto__"));
-

-
-
Pro Objekt-Literal ist nur eine einzelne Prototypmutation erlaubt: mehrfache Prototyp Mutationen führen zu einem Syntax Fehler.

-
-
Eigenschaftsdefinitionen welche nicht von der Doppelpunkt Notation Gebrauch machen, sind keine Prototyp Mutationen: es sind Eigenschaftsdefinitionen die sich verhalten wie jede andere Definition von Eigenschaftsbezeichnern auch.

-
-
var __proto__ = "variable";
-
-var obj1 = { __proto__ };
-assert(Object.getPrototypeOf(obj1) === Object.prototype);
-assert(obj1.hasOwnProperty("__proto__"));
-assert(obj1.__proto__ === "variable");
-
-var obj2 = { __proto__() { return "hello"; } };
-assert(obj2.__proto__() === "hello");
-
-var obj3 = { ["__prot" + "o__"]: 17 };
-assert(obj3.__proto__ === 17);
-

-
-
Objektliteral-Notation vs JSON

-
-
Die Objekt-Literal Notation ist nicht dasselbe wie die JavaScript Object Notation (JSON). Obwohl sie ähnlich aussehen, gibt es Unterschiede zwischen ihnen:

-
-
    
- 
  • JSON erlaubt nur Eigenschaftsdefinitionen mit "Eigenschaft": Wert Syntax. Der Eigenschaftsname muss in doppelten Anführungszeichen geschrieben werden, und die Definition kann nicht in Kurzschreibweise erfolgen.
    • 
- 
  • In JSON können die Werte nur Strings, Zahlen, Arrays, true, false, null oder  andere (JSON) Objekte sein.
    • 
- 
  • Ein Funktionswert (siehe "Methoden" oben) kann in JSON keinem Wert zugeordnet werden.
    • 
- 
  • Objekte wie {{jsxref ("Date")}} werden nach dem Aufruf von {{jsxref ("JSON.parse()")}}, in einen String umgewandelt, .
    • 
- 
  • {{jsxref("JSON.parse()")}} weist berechnete Eigenschaftsnamen zurück und wirft eine Fehlermeldung.
    • 
-

-
-
Spezifikationen

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
SpezifikationStatusKommentar
{{SpecName('ES1')}}{{Spec2('ES1')}}Initiale Definition.
{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}{{Spec2('ES5.1')}}Getter und Setter hinzugefügt.
{{SpecName('ES2015', '#sec-object-initializer', 'Object Initializer')}}{{Spec2('ES2015')}}Kurzschreibweise für Methoden-/Eigenschaftsnamen und berechnete Eigenschaftsnamen hinzugefügt.
{{SpecName('ESDraft', '#sec-object-initializer', 'Object Initializer')}}{{Spec2('ESDraft')}}
Rest/Spread Properties for ECMAScript EntwurfStage 4 (Fertig).

-
-
Browserkompatibilität

-
-

-
-
-
{{Compat("javascript.operators.object_initializer")}}

-

-
-
Siehe auch

-
-
diff --git a/files/de/web/javascript/reference/operators/optional_chaining/index.html b/files/de/web/javascript/reference/operators/optional_chaining/index.html
new file mode 100644
index 0000000000..8ef763b3cd
--- /dev/null
+++ b/files/de/web/javascript/reference/operators/optional_chaining/index.html
@@ -0,0 +1,194 @@
+---
+title: Optionale Verkettung
+slug: Web/JavaScript/Reference/Operators/Optionale_Verkettung
+tags:
+  - Experimentell
+  - JavaScript
+  - Operator
+  - Optionale Verkettung
+  - Referenz
+  - Verkettung
+translation_of: Web/JavaScript/Reference/Operators/Optional_chaining
+---
+
{{JSSidebar("Operators")}}

+
+
{{SeeCompatTable}}

+
+
Der Optionale-Verkettungs-Operator (Optional Chaining) ?. ermöglicht es, einen Wert aus einer Eigenschaft tief innerhalb einer Verkettung von Objekt-Eigenschaften auszulesen, ohne dabei explizit überprüfen zu müssen, ob jede Referenz in der Kette valide ist.Der ?. Operator funktioniert ähnlich wie der . -Verkettungs Operator, außer dass er keinen Fehler bei einem {{glossary("nullish")}} ({{JSxRef("null")}} oder {{JSxRef("undefined")}}) Wert auswirft, sondern stattdessen den Ausdruck beendet und undefined zurückgibt. Wird er mit Funktionsaufrufen verwendet, wirft der Aufruf undefined zurück, wenn die Funktion nicht existiert.

+
+
Das Ergebnis sind kürzere und einfacherere Anweisungen wenn auf verkettete Eigenschaften zugegriffen wird, bei denen die Möglichkeit besteht, dass sie fehlen. Er kann außerdem hilfreich sein, wenn man den Inhalt eines Objektes erhalten möchte wenn es keine Garantie dafür gibt welche Eigenschaften benötigt werden.

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

+
+

+
+
+
+
Syntax

+
+
obj?.prop
+obj?.[expr]
+arr?.[index]
+func?.(args)
+

+
+
Beschreibung

+
+
Der Optionale-Verkettungs-Operator ermöglicht einen Weg auf Werte in einer Verkettung aus Eigenschaften zuzugreifen, wenn die Möglichkeit existiert, dass eine der Referenzen oder Funktionen in der Kette undefined oder null sind.

+
+
Als Beispiel nehmen wir ein Objekt obj, dass eine verschachtelte Struktur besitzt. Ohne Optionale Verkettung müssen wir beim Zugriff auf einen Wert jede Referenz innerhalb der Kette auf ihre Existenz überprüfen:

+
+
let nestedProp = obj.first && obj.first.second;

+
+
Der Wert von obj.first wird darauf geprüft nicht-null (und nicht-undefined) zu sein und erst dann greifen wir auf den Wert obj.first.second zu. Dies verhindet einen Fehler der auftreten würde wenn wir direkt obj.first.second ansprechen ohne zuvor obj.first zu prüfen.

+
+
Mit dem Optionale-Verkettungs-Operator (?.) allerdings müssen wir nicht explizit testen und können eine Abkürzung auf Basis des Wertes von obj.first nutzen bevor auf auf obj.first.second zugreifen:

+
+
let nestedProp = obj.first?.second;

+
+
Durch die Verwendung des ?.-Operators statt nur dem . stellet JavaScript sicher, dass zuvor geprüft wird ob obj.first nicht null oder undefined ist bevor auf obj.first.second zugegriffen wird. Wenn obj.first null oder undefined ist, wird der Ausdruck automatisch sofort beendet und wirft den Wert undefined zurück

+
+
Das ist dasselbe wie folgender Ausdruck:

+
+
let nestedProp = ((obj.first === null || obj.first === undefined) ? undefined : obj.first.second);

+
+
Optionale Verkettung mit Funktionsaufrufen

+
+
Optionale Verkettung kann verwendet werden um Funktionen aufzurufen, die womöglich nicht existeiren. Das kann hilfreich sein wenn man z.B. eine API verwenden möchte die möglicherweise nicht verfügbar ist, entweder durch das Alter der Implementierung oder weil die Funktionalität nicht für das Gerät verfügbar ist.

+
+
Verwendet man optionale Verkettung mit Funktionsaufrufen, wird der Ausdruck automatisch undefined zurückwerfen, sollte die Funktion nicht existieren:

+
+
let result = someInterface.customMethod?.();

+
+

+
Note: Wenn eine Eigenschaft mit dem Namen existiert, die aber keine Funktion ist, wird ?. trotzdem eine {{JSxRef("TypeError")}} Ausnahme auslösen (x.y ist keine Funktion).

+

+
+
Optionale Callbacks oder Event Handler handhaben

+
+
If you use callbacks or fetch methods from an object with a destructuring assignment, you may have non-existent values that you cannot call as functions unless you have tested their existence. Using ?., you can avoid this extra test:

+
+
// Written as of ES2019
+function doSomething(onContent, onError) {
+  try {
+    // ... do something with the data
+  }
+  catch (err) {
+    if (onError) { // Testing if onError really exists
+      onError(err.message);
+    }
+  }
+}
+

+
+
// Using optional chaining with function calls
+function doSomething(onContent, onError) {
+  try {
+   // ... do something with the data
+  }
+  catch (err) {
+    onError?.(err.message); // no exception if onError is undefined
+  }
+}
+

+
+
Optional chaining with expressions

+
+
You can also use the optional chaining operator when accessing properties with an expression using the bracket notation of the property accessor:

+
+
let nestedProp = obj?.['prop' + 'Name'];
+

+
+
Array item access with optional chaining

+
+
let arrayItem = arr?.[42];

+
+
Examples

+
+
Basic example

+
+
This example looks for the value of the name property for the member bar in a map when there is no such member. The result is therefore undefined.

+
+
let myMap = new Map();
+myMap.set("foo", {name: "baz", desc: "inga"});
+
+let nameBar = myMap.get("bar")?.name;

+
+
Short-circuiting evaluation

+
+
When using optional chaining with expressions, if the left operand is null or undefined, the expression will not be evaluated. For instance:

+
+
let potentiallyNullObj = null;
+let x = 0;
+let prop = potentiallyNullObj?.[x++];
+
+console.log(x); // 0 as x was not incremented
+

+
+
Stacking the optional chaining operator

+
+
With nested structures, it is possible to use optional chaining multiple times:

+
+
let customer = {
+  name: "Carl",
+  details: {
+    age: 82,
+    location: "Paradise Falls" // detailed address is unknown
+  }
+};
+let customerCity = customer.details?.address?.city;
+
+// … this also works with optional chaining function call
+let duration = vacations.trip?.getTime?.();
+

+
+
Combining with the nullish coalescing operator

+
+
The nullish coalescing operator may be used after optional chaining in order to build a default value when none was found:

+
+
let customer = {
+  name: "Carl",
+  details: { age: 82 }
+};
+const customerCity = customer?.city ?? "Unknown city";
+console.log(customerCity); // Unknown city

+
+
Specifications

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpecificationStatusComment
Proposal for the "optional chaining" operatorStage 4

+
+
Browser compatibility

+
+

+
+
+
{{Compat("javascript.operators.optional_chaining")}}

+

+
+
Implementation Progress

+
+
The following table provides a daily implementation status for this feature, because this feature has not yet reached cross-browser stability. The data is generated by running the relevant feature tests in Test262, the standard test suite of JavaScript, in the nightly build, or latest release of each browser's JavaScript engine.

+
+
{{EmbedTest262ReportResultsTable("optional-chaining")}}

+
+
See also

+
+
    
+ 
  • The {{JSxRef("Operators/Nullish_Coalescing_Operator", "Nullish Coalescing Operator", '', 1)}}
    • 
+ 
  • TC39 proposals
    • 
+

diff --git a/files/de/web/javascript/reference/operators/optionale_verkettung/index.html b/files/de/web/javascript/reference/operators/optionale_verkettung/index.html
deleted file mode 100644
index 8ef763b3cd..0000000000
--- a/files/de/web/javascript/reference/operators/optionale_verkettung/index.html
+++ /dev/null
@@ -1,194 +0,0 @@
----
-title: Optionale Verkettung
-slug: Web/JavaScript/Reference/Operators/Optionale_Verkettung
-tags:
-  - Experimentell
-  - JavaScript
-  - Operator
-  - Optionale Verkettung
-  - Referenz
-  - Verkettung
-translation_of: Web/JavaScript/Reference/Operators/Optional_chaining
----
-
{{JSSidebar("Operators")}}

-
-
{{SeeCompatTable}}

-
-
Der Optionale-Verkettungs-Operator (Optional Chaining) ?. ermöglicht es, einen Wert aus einer Eigenschaft tief innerhalb einer Verkettung von Objekt-Eigenschaften auszulesen, ohne dabei explizit überprüfen zu müssen, ob jede Referenz in der Kette valide ist.Der ?. Operator funktioniert ähnlich wie der . -Verkettungs Operator, außer dass er keinen Fehler bei einem {{glossary("nullish")}} ({{JSxRef("null")}} oder {{JSxRef("undefined")}}) Wert auswirft, sondern stattdessen den Ausdruck beendet und undefined zurückgibt. Wird er mit Funktionsaufrufen verwendet, wirft der Aufruf undefined zurück, wenn die Funktion nicht existiert.

-
-
Das Ergebnis sind kürzere und einfacherere Anweisungen wenn auf verkettete Eigenschaften zugegriffen wird, bei denen die Möglichkeit besteht, dass sie fehlen. Er kann außerdem hilfreich sein, wenn man den Inhalt eines Objektes erhalten möchte wenn es keine Garantie dafür gibt welche Eigenschaften benötigt werden.

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

-
-

-
-
-
-
Syntax

-
-
obj?.prop
-obj?.[expr]
-arr?.[index]
-func?.(args)
-

-
-
Beschreibung

-
-
Der Optionale-Verkettungs-Operator ermöglicht einen Weg auf Werte in einer Verkettung aus Eigenschaften zuzugreifen, wenn die Möglichkeit existiert, dass eine der Referenzen oder Funktionen in der Kette undefined oder null sind.

-
-
Als Beispiel nehmen wir ein Objekt obj, dass eine verschachtelte Struktur besitzt. Ohne Optionale Verkettung müssen wir beim Zugriff auf einen Wert jede Referenz innerhalb der Kette auf ihre Existenz überprüfen:

-
-
let nestedProp = obj.first && obj.first.second;

-
-
Der Wert von obj.first wird darauf geprüft nicht-null (und nicht-undefined) zu sein und erst dann greifen wir auf den Wert obj.first.second zu. Dies verhindet einen Fehler der auftreten würde wenn wir direkt obj.first.second ansprechen ohne zuvor obj.first zu prüfen.

-
-
Mit dem Optionale-Verkettungs-Operator (?.) allerdings müssen wir nicht explizit testen und können eine Abkürzung auf Basis des Wertes von obj.first nutzen bevor auf auf obj.first.second zugreifen:

-
-
let nestedProp = obj.first?.second;

-
-
Durch die Verwendung des ?.-Operators statt nur dem . stellet JavaScript sicher, dass zuvor geprüft wird ob obj.first nicht null oder undefined ist bevor auf obj.first.second zugegriffen wird. Wenn obj.first null oder undefined ist, wird der Ausdruck automatisch sofort beendet und wirft den Wert undefined zurück

-
-
Das ist dasselbe wie folgender Ausdruck:

-
-
let nestedProp = ((obj.first === null || obj.first === undefined) ? undefined : obj.first.second);

-
-
Optionale Verkettung mit Funktionsaufrufen

-
-
Optionale Verkettung kann verwendet werden um Funktionen aufzurufen, die womöglich nicht existeiren. Das kann hilfreich sein wenn man z.B. eine API verwenden möchte die möglicherweise nicht verfügbar ist, entweder durch das Alter der Implementierung oder weil die Funktionalität nicht für das Gerät verfügbar ist.

-
-
Verwendet man optionale Verkettung mit Funktionsaufrufen, wird der Ausdruck automatisch undefined zurückwerfen, sollte die Funktion nicht existieren:

-
-
let result = someInterface.customMethod?.();

-
-

-
Note: Wenn eine Eigenschaft mit dem Namen existiert, die aber keine Funktion ist, wird ?. trotzdem eine {{JSxRef("TypeError")}} Ausnahme auslösen (x.y ist keine Funktion).

-

-
-
Optionale Callbacks oder Event Handler handhaben

-
-
If you use callbacks or fetch methods from an object with a destructuring assignment, you may have non-existent values that you cannot call as functions unless you have tested their existence. Using ?., you can avoid this extra test:

-
-
// Written as of ES2019
-function doSomething(onContent, onError) {
-  try {
-    // ... do something with the data
-  }
-  catch (err) {
-    if (onError) { // Testing if onError really exists
-      onError(err.message);
-    }
-  }
-}
-

-
-
// Using optional chaining with function calls
-function doSomething(onContent, onError) {
-  try {
-   // ... do something with the data
-  }
-  catch (err) {
-    onError?.(err.message); // no exception if onError is undefined
-  }
-}
-

-
-
Optional chaining with expressions

-
-
You can also use the optional chaining operator when accessing properties with an expression using the bracket notation of the property accessor:

-
-
let nestedProp = obj?.['prop' + 'Name'];
-

-
-
Array item access with optional chaining

-
-
let arrayItem = arr?.[42];

-
-
Examples

-
-
Basic example

-
-
This example looks for the value of the name property for the member bar in a map when there is no such member. The result is therefore undefined.

-
-
let myMap = new Map();
-myMap.set("foo", {name: "baz", desc: "inga"});
-
-let nameBar = myMap.get("bar")?.name;

-
-
Short-circuiting evaluation

-
-
When using optional chaining with expressions, if the left operand is null or undefined, the expression will not be evaluated. For instance:

-
-
let potentiallyNullObj = null;
-let x = 0;
-let prop = potentiallyNullObj?.[x++];
-
-console.log(x); // 0 as x was not incremented
-

-
-
Stacking the optional chaining operator

-
-
With nested structures, it is possible to use optional chaining multiple times:

-
-
let customer = {
-  name: "Carl",
-  details: {
-    age: 82,
-    location: "Paradise Falls" // detailed address is unknown
-  }
-};
-let customerCity = customer.details?.address?.city;
-
-// … this also works with optional chaining function call
-let duration = vacations.trip?.getTime?.();
-

-
-
Combining with the nullish coalescing operator

-
-
The nullish coalescing operator may be used after optional chaining in order to build a default value when none was found:

-
-
let customer = {
-  name: "Carl",
-  details: { age: 82 }
-};
-const customerCity = customer?.city ?? "Unknown city";
-console.log(customerCity); // Unknown city

-
-
Specifications

-
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
- 
-
SpecificationStatusComment
Proposal for the "optional chaining" operatorStage 4

-
-
Browser compatibility

-
-

-
-
-
{{Compat("javascript.operators.optional_chaining")}}

-

-
-
Implementation Progress

-
-
The following table provides a daily implementation status for this feature, because this feature has not yet reached cross-browser stability. The data is generated by running the relevant feature tests in Test262, the standard test suite of JavaScript, in the nightly build, or latest release of each browser's JavaScript engine.

-
-
{{EmbedTest262ReportResultsTable("optional-chaining")}}

-
-
See also

-
-
    
- 
  • The {{JSxRef("Operators/Nullish_Coalescing_Operator", "Nullish Coalescing Operator", '', 1)}}
    • 
- 
  • TC39 proposals
    • 
-

diff --git a/files/de/web/javascript/reference/operators/remainder/index.html b/files/de/web/javascript/reference/operators/remainder/index.html
new file mode 100644
index 0000000000..19403ab883
--- /dev/null
+++ b/files/de/web/javascript/reference/operators/remainder/index.html
@@ -0,0 +1,78 @@
+---
+title: Modulo (%)
+slug: Web/JavaScript/Reference/Operators/Modulo
+tags:
+  - Division mit Rest
+  - Divisionsalgorithmus
+  - Restwert
+  - Restwertberechnung
+translation_of: Web/JavaScript/Reference/Operators/Remainder
+---
+
{{jsSidebar("Operators")}}

+
+
Der Modulo-Operator (%) gibt den Restwert zurück, der übrig bleibt wenn ein Operand durch einen anderen geteilt wird. Das Vorzeichen ergibt sich aus der Wahl der Quotienten.

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

+
+

+
+
+
+
Syntax

+
+
Operator: var1 % var2
+

+
+
Examples

+
+
Remainder with positive dividend

+
+
 12 % 5  //  2
+ 1 % -2 //  1
+ 1 % 2  //  1
+ 2 % 3  //  2
+5.5 % 2 // 1.5
+

+
+
Remainder with negative dividend

+
+
-12 % 5 // -2
+-1 % 2  // -1
+-4 % 2  // -0

+
+
Remainder with NaN

+
+
NaN % 2 // NaN

+
+
Specifications

+
+
+ 
+  
+   
+  
+  
+   
+  
+ 
+
Specification
{{SpecName('ESDraft', '#sec-multiplicative-operators', 'Remainder operator')}}

+
+
Browser compatibility

+
+
+
+
{{Compat("javascript.operators.remainder")}}

+
+
See also

+
+
diff --git a/files/de/web/javascript/reference/operators/spread_operator/index.html b/files/de/web/javascript/reference/operators/spread_operator/index.html
deleted file mode 100644
index ee125663f4..0000000000
--- a/files/de/web/javascript/reference/operators/spread_operator/index.html
+++ /dev/null
@@ -1,220 +0,0 @@
----
-title: Spread-Operator
-slug: Web/JavaScript/Reference/Operators/Spread_operator
-tags:
-  - ECMAScript 2015
-  - Iterator
-  - JavaScript
-  - Operator
-translation_of: Web/JavaScript/Reference/Operators/Spread_syntax
-translation_of_original: Web/JavaScript/Reference/Operators/Spread_operator
----
-
{{jsSidebar("Operators")}}

-
-
Mit der Spread-Syntax kann ein einzelner Ausdruck dort expandiert werden, wo mehrere Argumente (bei Funktionsaufrufen), mehrere Elemente (für Array-Literale) oder mehrere Variablen (für destrukturierende Anweisungen) erwartet werden.

-
-
Syntax

-
-
Für Funktionsaufrufe:

-
-
myFunction(...iterableObj);
-

-
-
Für Array-Literale:

-
-
[...iterableObj, 4, 5, 6]

-
-
Beispiele

-
-
Ein besseres "apply"

-
-
Beispiel: Für gewöhnlich wird {{jsxref( "Function.prototype.apply")}} verwendet, wenn man die Elemente eines Arrays als Argumente eines Funktionsaufrufs nutzen möchte:

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

-
-
Mit dem ES2015 Spread-Operator kann das nun wie folgt geschrieben werden:

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

-
-
Die Spread-Syntax kann für jedes beliebige Argument der Argumentliste verwendet werden, und sie kann auch mehrmals verwendet werden:

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

-
-
Ein mächtigeres Array-Literal

-
-
Beispiel: Wenn man ohne den Spread-Operator ein neues Array erstellen will, bei dem ein Teil davon ein bereits bestehendes Array sein soll, dann ist die Array-Literal-Syntax nicht mehr ausreichend und man muss auf imperative Programmierung mit einer Kombination aus push, splice, concat, etc. zurückgreifen. Mit der Spread-Syntax jedoch kann das viel prägnanter ausgedrückt werden:

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

-
-
Genau wie der Spread-Operator für Argumentlisten kann ... überall im Array-Literal verwendet werden, auch mehrmals.

-
-
"Apply" für "new"

-
-
Beispiel: In ES5 kann new nicht mit apply kombiniert werden (nach den ES5-Regeln führt apply einen [[Call]] aus, keinen [[Construct]]). Die Spread-Syntax von ES2015 unterstützt dies auf ganz natürliche Weise:

-
-
var dateFields = readDateFields(database);
-var d = new Date(...dateFields);

-
-
Ein Array kopieren

-
-
var arr = [1,2,3];
-var arr2 = [...arr]; // wie arr.slice()
-arr2.push(4);        // arr2 wird [1,2,3,4], arr bleibt unverändert.

-
-
Ein besseres "push"

-
-
Beispiel: {{jsxref("Global_Objects/Array/push", "push")}} wird oft verwendet um alle Elemente eines Arrays an das Ende eines bestehenden Arrays anzuhängen. Das wird in ES5 oft wie folgt umgesetzt:

-
-
var arr1 = [0, 1, 2];
-var arr2 = [3, 4, 5];
-// Append all items from arr2 onto arr1
-Array.prototype.push.apply(arr1, arr2);

-
-
Mit dem Spread-Operator von ES2015 wird daraus:

-
-
var arr1 = [0, 1, 2];
-var arr2 = [3, 4, 5];
-arr1.push(...arr2);

-
-
Nur "apply" für iterables

-
-
var obj = {"key1":"value1"};
-function myFunction(x) {
-    console.log(x) // undefined
-}
-myFunction(...obj);
-var args = [...obj];
-console.log(args, args.length); // [] 0

-
-
Rest-Syntax (Parameter)

-
-
Rest-Syntax sieht genauso aus wie die Spread-Syntax und wird für das Destrukturieren von Arrays und Objekten eingesetzt. Rest-Syntax ist sozusagen das Gegenteil von Spread-Syntax:  Spread klappt die einzelnen Bestandteile eines Arrays aus, während Rest verschiedene einzelne Elemente zu einem Array zusammenfasst.

-
-
Spezifikationen

-
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
SpezifikationStatusKommentar
{{SpecName('ES2015', '#sec-array-initializer')}}{{Spec2('ES2015')}}Definiert in verschiedenen Abschnitten der Spezifikation: Array Initializer, Argument Lists
{{SpecName('ESDraft', '#sec-array-initializer')}}{{Spec2('ESDraft')}} 

-
-
Browser-Kompatibilität

-
-
{{CompatibilityTable}}

-
-

-
- 
-  
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-  
- 
-
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Spread-Operation innerhalb von Array-Literalen{{CompatChrome("46")}}{{CompatGeckoDesktop("16")}}{{CompatIE("Edge")}}{{CompatNo}}7.1
Spread-Operation innerhalb von Funktionsaufrufen{{CompatChrome("46")}}{{CompatGeckoDesktop("27")}}{{CompatIE("Edge")}}{{CompatNo}}7.1
Spread-Operation beim Destrukturieren ("destructuring"){{CompatChrome("49")}}{{CompatGeckoDesktop("34")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}

-

-
-

-
- 
-  
-   
-   
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-   
-   
-  
- 
-
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Spread-Operation innerhalb von Array-Literalen{{CompatNo}}{{CompatChrome("46")}}{{CompatGeckoMobile("16")}}{{CompatNo}}{{CompatNo}}8{{CompatChrome("46")}}
Spread-Operation innerhalb von Funktionsaufrufen{{CompatNo}}{{CompatChrome("46")}}{{CompatGeckoMobile("27")}}{{CompatNo}}{{CompatNo}}8{{CompatChrome("46")}}
Spread-Operation beim Destrukturieren ("destructuring"){{CompatNo}}{{CompatNo}}{{CompatGeckoDesktop("34")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}

-

-
-
Siehe auch

-
-
diff --git a/files/de/web/javascript/reference/operators/vergleichsoperatoren/index.html b/files/de/web/javascript/reference/operators/vergleichsoperatoren/index.html
deleted file mode 100644
index ceedd1eb07..0000000000
--- a/files/de/web/javascript/reference/operators/vergleichsoperatoren/index.html
+++ /dev/null
@@ -1,244 +0,0 @@
----
-title: Vergleichsoperatoren
-slug: Web/JavaScript/Reference/Operators/Vergleichsoperatoren
-tags:
-  - JavaScript
-  - Operator
-  - Reference
-translation_of: Web/JavaScript/Reference/Operators
-translation_of_original: Web/JavaScript/Reference/Operators/Comparison_Operators
----
-
{{jsSidebar("Operators")}}

-
-
JavaScript kennt sowohl den strikten als auch den Typ konvertierenden Vergleich. Ein strikter Vergleich (z. B. ===) gibt nur true zurück, wenn der gleiche Typ und der gleiche Wert vorhanden sind. Der häufiger verwendete abstrakte Vergleich (z. B. ==) wandelt die Operanden in den gleichen Typen um, bevor sie verglichen werden. Bei relationalen Vergleichsoperatoren (z. B. <=) werden die Operanden vor dem Vergleich zuerst in elementare Datentypen konvertiert und dann in gleiche Typen umgewandelt.

-
-
Strings werden entsprechend der lexikographischen Ordnung, basierend auf den Unicode, verglichen.

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

-
-
-
-
Merkmale von Vergleichen:

-
-
    
- 
  • Zwei Strings sind strikt gleich, wenn sie die gleiche Abfolge von Zeichen, die gleiche Länge und die gleichen Zeichen in übereinstimmenden Positionen haben.
    • 
- 
  • Zwei Zahlen sind strikt gleich, wenn sie numerisch gleich sind (den gleichen Zahlwert haben). NaN ist mit nichts gleich, auch nicht mit sich selbst. +0 und -0 sind strikt gleich zueinander.
    • 
- 
  • Zwei Boolesche Operanden sind exakt gleich wenn beide true oder beide false sind.
    • 
- 
  • Zwei unterschiedliche Objekte sind niemals gleich, weder in strikten noch nicht-strikten Vergleichen.
    • 
- 
  • Ein Ausdruck, der Objekte vergleicht, gilt nur als true, wenn die Operanden auf das gleiche Objekt zeigen.
    • 
- 
  • Die Typen Null und undefined sind immer strikt gleich zu sich selbst und abstrakt gleich zueinander.
    • 
-

-
-
Gleichheitsoperatoren

-
-
Gleichheit (==)

-
-
Der Gleichheitsoperator konvertiert die Operanden, wenn sie nicht vom gleichen Typs sind und prüft dann auf strikte Gleichheit. Sind beide Operanden Objekte, vergleicht JavaScript die Referenzen; Referenzen gelten als gleich, wenn sie auf das gleiche Objekt im Speicher zeigen.

-
-
Syntax

-
-
x == y
-

-
-
Beispiele

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

-
-
Ungleichheit (!=)

-
-
Der Ungleichheitsoperator gibt true zurück, wenn die Operanden nicht gleich sind. Wenn die beiden Operanden nicht vom gleichen Typ sind, versucht JavaScript die Operanden in einen, für den Vergleich passenden Typ, umzuwandeln. Wenn beide Operanden Objekte sind, vergleicht JavaScript die Referenzen; Referenzen sind ungleich, wenn sie auf verschiedene Objekte im Speicher verweisen.

-
-
Syntax

-
-
x != y

-
-
Beispiele

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

-
-
Identität / strikte Gleichheit (===)

-
-
Der Identitätsoperator gibt true zurück, wenn die Operanden strikt gleich sind (siehe oben) ohne eine Typkonvertierung

-
-
Syntax

-
-
x === y

-
-
Beispiele

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

-
-
Nicht identisch / Strikte Ungleichheit (!==)

-
-
Der strikte Ungleichheitsoperator gibt true zurück, wenn die Operanden nicht vom gleichen Typ sind bzw. ungleich sind.

-
-
Syntax

-
-
x !== y

-
-
Beispiele

-
-
3 !== '3' // true
-4 !== 3   // true
-

-
-
Relationale Operatoren

-
-
Jeder dieser Operatoren wird die valueOf() Funktion aufrufen, bevor ein Vergleich durchgeführt wird.

-
-
Größer-als-Operator (>)

-
-
Der Größer-als-Operator gibt true zurück, wenn der linke Operand größer als der rechte Operand ist.

-
-
Syntax

-
-
x > y

-
-
Beispiele

-
-
4 > 3 // true
-

-
-
Größer-oder-gleich-Operator (>=)

-
-
Der Größer-oder-gleich-Operator gibt true zurück, wenn der linke Operand größer als oder gleich dem rechten Operanden ist.

-
-
Syntax

-
-
 x >= y

-
-
Beispiele

-
-
4 >= 3 // true
-3 >= 3 // true
-

-
-
Kleiner-als-Operator (<)

-
-
Der Kleiner-als-Operator gibt true zurück, wenn der linke Operand kleiner als der rechte Operand ist.

-
-
Syntax

-
-
 x < y

-
-
Beispiele

-
-
3 < 4 // true
-

-
-
Kleiner-oder-gleich-Operator (<=)

-
-
Der Kleiner-oder-gleich-Operator gibt true zurück, wenn der linke Operand kleiner oder gleich dem rechten Operanden ist.

-
-
Syntax

-
-
 x <= y

-
-
Beispiele

-
-
3 <= 4 // true
-

-
-
Die Gleichheitsoperatoren anwenden

-
-
Die Standard-Gleichheitsoperatoren (== und !=) benutzen den Abstract Equality Comparison Algorithmus, um zwei Operanden zu vergleichen. Sind die Operanden unterschiedlichen Typs, wird vor dem Vergleich zuerst versucht sie in gleiche Typen umzuwandeln; z.B. wird beim Ausdruck 5 == '5'  das Zeichen auf der rechten Seite in eine Zahl konvertiert.

-
-
Die strikten Gleichheitsoperatoren (=== und !==) benutzen den Strict Equality Comparison Algorithmus und sind dafür gedacht, Operanden des gleichen Typs zu vergleichen. Wenn die Operanden von unterschiedlichen Typen sind, ist das Ergebnis immer false, wie 5 !== '5'.

-
-
Strikte Gleichheitsoperatoren sollten verwendet werden, wenn die Operanden sowohl einen bestimmten Typen als auch Wert haben sollen. Ansonsten benutzt man die abstrakten Gleichheitsoperatoren, die es einem erlauben Operanden unterschiedlicher Typen zu vergleichen.

-
-
Wenn beim Vergleich eine Typkonvertierung vorgenommen wird (z.B. beim nicht-strikten Vergleich), konvertiert JavaScript in die Typen {{jsxref("String")}}, {{jsxref("Number")}}, {{jsxref("Boolean")}} und {{jsxref("Object")}} und führt den Vergleich dann aus:

-
-
    
- 
  • Wenn eine Zahl und eine Zeichenkette verglichen werden, wird die Zeichenkette zu einem Zahlenwert umgewandelt. JavaScript versucht das numerische Zeichenliteral in einen Wert des Typs Number zu wandeln. Zuerst wird der mathematische Wert des numerischen Zeichenliterals ermittelt. Danach wird der Wert auf den nächsten Wert des Typs Number gerundet.
    • 
- 
  • Wenn einer der Operanden ein Boolescher Typ ist, wird der Operand zur 1 konveriert wenn er true ist und zur +0 wenn false.
    • 
- 
  • Wenn ein Objekt mit einer Zahl oder einer Zeichenkette verglichen wird,  versucht JavaScript den Defaultwert für das Objekt zurückzugeben. Operatoren versuchen das Objekt in einen elementaren Wert (String oder Number) umzuwandeln, indem sie die valueOf und toString Methoden der Objekte benutzen. Kann ein Objekt nicht umgewandelt werden, wird ein Laufzeitfehler erzeugt.
    • 
- 
  • Ein Objekt wird nur dann in einen elementaren Datentypen umgewandelt, wenn sein Vergleichsoperand ein elementarer Datentyp ist. Sind beide Operanden Objekte, werden sie als Objekte verglichen und der Gleichheitstest liefert nur dann true, wenn beide auf das gleiche Objekt zeigen.
    • 
-

-
-
Hinweis: String Objekte sind vom Typ Objekte, nicht String! String Objekte werden selten eingesetzt, so dass das folgende Ergebnis überraschend sein kann:

-
-
// true, da beide Operanden vom Typ String sind (string primitives)
-'foo' === 'foo'
-
-var a = new String('foo');
-var b = new String('foo');
-
-// false, da a und b auf verschiedene Objekte zeigen
-a == b
-
-// false, da a und b auf verschiedene Objekte zeigen
-a === b
-
-// true, da a und 'foo' verschiedene Typen sind und das Objekt (a)
-// vor dem Vergleich zum String 'foo' umgewandelt wird
-a == 'foo' 

-
-
Spezifikationen

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
SpezifikationStatusKommentar
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial Definition. Implementiert in JavaScript 1.0
{{SpecName('ES3')}}{{Spec2('ES3')}}Fügt === und !== Operatoren hinzu. Implementiert in JavaScript 1.3
{{SpecName('ES5.1', '#sec-11.8')}}{{Spec2('ES5.1')}}In verschiedenen Kapiteln der Spezifikation definiert: Relational Operators, Equality Operators
{{SpecName('ES6', '#sec-relational-operators')}}{{Spec2('ES6')}}In verschiedenen Kapiteln der Spezifikation definiert: Relational Operators, Equality Operators
{{SpecName('ESDraft', '#sec-relational-operators')}}{{Spec2('ESDraft')}}In verschiedenen Kapiteln der Spezifikation definiert: Relational Operators, Equality Operators

-
-
Browserkompatibilität

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

-
-
Siehe auch

-
-
diff --git a/files/de/web/javascript/reference/operators/zuweisungsoperator/index.html b/files/de/web/javascript/reference/operators/zuweisungsoperator/index.html
deleted file mode 100644
index 5df33bfe62..0000000000
--- a/files/de/web/javascript/reference/operators/zuweisungsoperator/index.html
+++ /dev/null
@@ -1,413 +0,0 @@
----
-title: Zuweisungsoperator
-slug: Web/JavaScript/Reference/Operators/Zuweisungsoperator
-tags:
-  - JavaScript
-  - Operator
-translation_of: Web/JavaScript/Reference/Operators#Assignment_operators
-translation_of_original: Web/JavaScript/Reference/Operators/Assignment_Operators
----
-
{{jsSidebar("Operators")}}

-
-
Ein Zuweisungsoperator weist dem linken Operanten einen Wert auf Basis des rechten Operanten zu.

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

-
-
-
-
Überblick

-
-
Der Basiszuweisungsoperator ist das Gleich (=), welches den Wert des rechten Operanten dem linken Operanten zuweist. So wird bei x = y der Wert von y x zugewiesen. Die anderen Zuweisungsoperatoren sind Kurzformen für Standardoperationen, wie es in den folgenden Definition und Beispielen gezeigt wird.

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
NameKurzformoperatorBedeutung
Zuweisungx = yx = y
Additionszuweisungx += yx = x + y
Subtraktionszuweisungx -= yx = x - y
Multiplikationszuweisungx *= yx = x * y
Divisionszuweisungx /= yx = x / y
Restzuweisungx %= yx = x % y
Potenzierungszuweisungx **= yx = x ** y
Links verschiebende Zuweisungx <<= yx = x << y
Rechts verschiebende Zuweisungx >>= yx = x >> y
Vorzeichenlose rechts verschiebende Zuweisungx >>>= yx = x >>> y
Bitweise AND Zuweisungx &= yx = x & y
Bitweise XOR Zuweisungx ^= yx = x ^ y
Bitweise OR Zuweisungx |= yx = x | y

-
-
Zuweisung

-
-
Einfacher Zuweisungsoperator, welcher den Wert zu einer Variablen zuweist. Der Zuweisungsoperator gibt den zugewiesenen Wert zurück. Eine Verkettung der Zuweisungsoperatoren ist möglich, um einen Wert mehreren Variablen zuzuweisen. Sie in den Beispielen.

-
-
Syntax

-
-
Operator: x = y
-

-
-
Beispiele

-
-
// Folgende Variablen sind vorausgesetzt
-//  x = 5
-//  y = 10
-//  z = 25
-
-x = y     // x ist 10
-x = y = z // x, y und z sind alle 25
-

-
-
Additionszuweisung

-
-
Der Additionszuweisungsoperator addiert den Wert des rechten Operanten zu einer Variablen und weist das Ergebnis der Variablen zu. Die Typen der Operanten entscheiden über das Verhalten des Additionszuweisungsoperator. Addition oder Konkatination sind möglich. Siehe beim {{jsxref("Operators/Arithmetic_Operators", "Additionsoperator", "#Addition", 1)}} für mehr Details nach.

-
-
Syntax

-
-
Operator:  x += y
-Bedeutung: x  = x + y
-

-
-
Beispiele

-
-
// Die folgenden Variablen werden vorausgesetzt
-//  foo = 'foo'
-//  bar = 5
-//  baz = true
-
-
-// Number + Number -> Addition
-bar += 2 // 7
-
-// Boolean + Number -> Addition
-baz += 1 // 2
-
-// Boolean + Boolean -> Addition
-baz += false // 1
-
-// Number + String -> Konkationation
-bar += 'foo' // "5foo"
-
-// String + Boolean -> Konkatination
-foo += false // "foofalse"
-
-// String + String -> Konkationation
-foo += 'bar' // "foobar"
-

-
-
Subtraktionszuweisung

-
-
Der Subtraktionszuweisungsoperator subtahiert den Wert des rechten Operanten von einer Variablen und weist das Ergebnis der Variablen zu. Siehe beim {{jsxref("Operators/Arithmetic_Operators", "Subraktionsoperator", "#Subtraction", 1)}} für mehr Details nach.

-
-
Syntax

-
-
Operator:  x -= y
-Bedeutung: x  = x - y
-

-
-
Beispiele

-
-
// Die folgenden Variablen werden vorausgesetzt
-//  bar = 5
-
-bar -= 2     // 3
-bar -= 'foo' // NaN
-

-
-
Multiplikationszuweisung

-
-
Der Multiplikationszuweisungsoperator multipliziert den Wert des rechten Operanten zu einer Variablen und weist das Ergebnis der Variablen zu. Siehe beim {{jsxref("Operators/Arithmetic_Operators", "Multiplikationsoperator", "#Multiplication", 1)}} für mehr Details nach.

-
-
Syntax

-
-
Operator:  x *= y
-Bedeutung: x  = x * y
-

-
-
Beispiele

-
-
// Die folgenden Variablen werden vorausgesetzt
-//  bar = 5
-
-bar *= 2     // 10
-bar *= 'foo' // NaN
-

-
-
Divisionszuweisung

-
-
Der Divisionszuweisungsoperator dividiert eine Variable durch den rechten Operanten zu und weist das Ergebnis der Variablen zu. Siehe beim {{jsxref("Operators/Arithmetic_Operators", "Divisionsoperator", "#Division", 1)}} für mehr Details nach.

-
-
Syntax

-
-
Operator:  x /= y
-Bedeutung: x  = x / y
-

-
-
Beispiele

-
-
// Die folgenden Variablen werden vorausgesetzt
-//  bar = 5
-
-bar /= 2     // 2.5
-bar /= 'foo' // NaN
-bar /= 0     // Infinity
-

-
-
Restzuweisung

-
-
Der Restzuweisungsoperator dividiert einer Variable durch den rechten Operanten und weist den Rest des Ergebnis der Variablen zu. Siehe beim {{jsxref("Operators/Arithmetic_Operators", "Restoperator", "#Remainder", 1)}} für mehr Details nach.

-
-
Syntax

-
-
Operator:  x %= y
-Bedeutung: x  = x % y
-

-
-
Beispiele

-
-
// Die folgenden Variablen werden vorausgesetzt
-//  bar = 5
-
-bar %= 2     // 1
-bar %= 'foo' // NaN
-bar %= 0     // NaN
-

-
-
Potenzierungszuweisung

-
-
Der Potenzierungszuweisungsoperator potenziert einer Variable mit den rechten Operanten und weist das Ergebnis der Variablen zu. Siehe beim {{jsxref("Operators/Arithmetic_Operators", "Exponentialoperator", "#Exponentiation", 1)}} für mehr Details nach.

-
-
Syntax

-
-
Operator:  x **= y
-Bedeutung: x  = x ** y
-

-
-
Beispiele

-
-
// Die folgenden Variablen werden vorausgesetzt
-//  bar = 5
-
-bar **= 2     // 25
-bar **= 'foo' // NaN

-
-
-
-
Der links verschiebende Zuweisungsoperator verschiebt um die Anzahl Bits im rechten Operanten in der Variablen und weist das Ergebnis der Variablen zu. Siehe beim {{jsxref("Operators/Bitwise_Operators", "links verschiebenden Operator", "#Left_shift", 1)}} für mehr Details nach.

-
-
Syntax

-
-
Operator:  x <<= y
-Bedeutung: x   = x << y
-

-
-
Beispiele

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

-
-
Rechts verschiebende Zuweisung

-
-
Der rechts verschiebende Zuweisungsoperator verschiebt um die Anzahl Bits im rechten Operanten in der Variablen und weist das Ergebnis der Variablen zu. Siehe beim {{jsxref("Operators/Bitwise_Operators", "rechts verschiebenden Operator", "#Right_shift", 1)}} für mehr Details nach.

-
-
Syntax

-
-
Operator:  x >>= y
-Bedeutung: x   = x >> y
-

-
-
Beispiele

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

-
-
Vorzeichenlose rechts verschiebende Zuweisung

-
-
Der vorzeichenlose rechts verschiebende Zuweisungsoperator verschiebt um die Anzahl Bits im rechten Operanten in der Variablen und weist das Ergebnis der Variablen zu. Siehe beim {{jsxref("Operators/Bitwise_Operators", "vorzeichenlose rechts verschiebenden Operator", "#Unsigned_right_shift", 1)}} für mehr Details nach.

-
-
Syntax

-
-
Operator:  x >>>= y
-Bedeutung: x    = x >>> y
-

-
-
Beispiele

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

-
-
Bitweise UND Zuweisung

-
-
Der bitweise UND Zuweisungsoperator nutzt die Bitrepräsentation beider Operanten, führt eine bitweises UND Operation aus und weist das Ergebnis der Variablen zu. Siehe beim {{jsxref("Operators/Bitwise_Operators", "bitweisen UND Operator", "#Bitwise_AND", 1)}} für mehr Details nach.

-
-
Syntax

-
-
Operator:  x &= y
-Bedeutung: x  = x & y
-

-
-
Beispiele

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

-
-
Bitweise XOR Zuweisung

-
-
Der bitweise XOR Zuweisungsoperator nutzt die Bitrepräsentation beider Operanten, führt eine bitweises XOR Operation aus und weist das Ergebnis der Variablen zu. Siehe beim {{jsxref("Operators/Bitwise_Operators", "bitweisen XOR Operator", "#Bitwise_XOR", 1)}} für mehr Details nach.

-
-
Syntax

-
-
Operator:  x ^= y
-Bedeutung: x  = x ^ y
-

-
-
Beispiele

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

-
-
Bitweise ODER Zuweisung

-
-
Der bitweise ODER Zuweisungsoperator nutzt die Bitrepräsentation beider Operanten, führt eine bitweises ODER Operation aus und weist das Ergebnis der Variablen zu. Siehe beim {{jsxref("Operators/Bitwise_Operators", "bitweisen ODER Operator", "#Bitwise_OR", 1)}} für mehr Details nach.

-
-
Syntax

-
-
Operator:  x |= y
-Bedeutung: x  = x | y
-

-
-
Beispiele

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

-
-
Beispiele

-
-
Linker Operant mit anderem Zuweisungsoperator

-
-
In ungewöhnlichen Situationen kann ein Zuweisungsoperator (z. B. x += y) nicht identisch mit der äquivalenten Zuweisung (hier x = x + y). Wenn der linke Operant einer Zuweisung selbst eine Zuweisung enthält, wird der linke Operant nur einem ausgewertet. Zum Beispiel:

-
-
a[i++] += 5         // i wird einmal ausgewertet
-a[i++] = a[i++] + 5 // i wird zweimal ausgewertet
-

-
-
Spezifikationen

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
SpezifikationStatusKommentar
{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}{{Spec2('ESDraft')}} 
{{SpecName('ES2015', '#sec-assignment-operators', 'Assignment operators')}}{{Spec2('ES2015')}} 
{{SpecName('ES5.1', '#sec-11.13', 'Assignment operators')}}{{Spec2('ES5.1')}} 
{{SpecName('ES1', '#sec-11.13', 'Assignment operators')}}{{Spec2('ES1')}}Initiale Definition.

-
-
Browserkompatibilität

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

-
-
Siehe auch

-
-
diff --git a/files/de/web/javascript/reference/statements/default/index.html b/files/de/web/javascript/reference/statements/default/index.html
deleted file mode 100644
index f8845c9591..0000000000
--- a/files/de/web/javascript/reference/statements/default/index.html
+++ /dev/null
@@ -1,121 +0,0 @@
----
-title: default
-slug: Web/JavaScript/Reference/Statements/default
-tags:
-  - JavaScript
-  - Keyword
-translation_of: Web/JavaScript/Reference/Statements/switch
-translation_of_original: Web/JavaScript/Reference/Statements/default
----
-
{{jsSidebar("Statements")}}

-
-
Das default Schlüsselwort kann in JavaScript in zwei Situationen verwendet werden: Innerhalb eines {{jsxref("Statements/switch", "switch")}} Statements, oder mit einem {{jsxref("Statements/export", "export")}} Statement.

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

-
-
-
-
Syntax

-
-
Innerhalb eines {{jsxref("Statements/switch", "switch")}} Statements:

-
-
switch (expression) {
-  case value1:
-    // Das Statement wird ausgeführt, wenn das Ergebnis der expression mit value1 übereinstimmt
-    [break;]
-  default:
-    // Das Statement wird ausgeführt, wenn keiner Werte mit dem Wert der expression übereinstimmt
-    [break;]
-}

-
-
Mit dem {{jsxref("Statements/export", "export")}} Statement:

-
-
export default nameN 

-
-
Beschreibung

-
-
Für mehr Informationen, siehe die

-
-
    
- 
  • {{jsxref("Statements/switch", "switch")}} Statement und
    • 
- 
  • {{jsxref("Statements/export", "export")}} Statement Seiten
    • 
-

-
-
Beispiele

-
-
Verwenden von default in switch Statements

-
-
Wenn im folgenden Beispiel expr den Wert "Oranges" oder "Apples" hat, wird das Programm die jeweiligen Werte abgleichen und das dazugehörige Statement ausführen. Das default Schlüsselwort hilft, alle übrigen (nicht speziell behandelten) Fälle zu behandeln.

-
-
switch (expr) {
-  case 'Oranges':
-    console.log('Oranges are $0.59 a pound.');
-    break;
-  case 'Apples':
-    console.log('Apples are $0.32 a pound.');
-    break;
-  default:
-    console.log('Sorry, we are out of ' + expr + '.');
-}

-
-
Verwenden von default mit export

-
-
Wenn Sie einen einzelnen Wert oder einen "fallback" Wert für ein Modul brauchen, können Sie einen default export verwenden:

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

-
-
Dann kann der default export in einem anderen Skript direkt importiert werden:

-
-
// module "my-module.js"
-import myFunction from 'my-module';
-console.log(cube(3)); // 27
-

-
-
Spezifikationen

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
SpezifikationStatusKommentar
{{SpecName('ES6', '#sec-switch-statement', 'switch statement')}}{{Spec2('ES6')}} 
{{SpecName('ES6', '#sec-exports', 'Exports')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}{{Spec2('ESDraft')}} 
{{SpecName('ESDraft', '#sec-exports', 'Exports')}}{{Spec2('ESDraft')}} 

-
-
Browserkompatibilität

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

-
-
Siehe auch

-
-
    
- 
  • {{jsxref("Statements/export", "export")}}
    • 
- 
  • {{jsxref("Statements/switch", "switch")}}
    • 
-

diff --git a/files/de/web/javascript/reference/statements/function/index.html b/files/de/web/javascript/reference/statements/function/index.html
new file mode 100644
index 0000000000..64a54347bc
--- /dev/null
+++ b/files/de/web/javascript/reference/statements/function/index.html
@@ -0,0 +1,190 @@
+---
+title: Funktion
+slug: Web/JavaScript/Reference/Statements/funktion
+translation_of: Web/JavaScript/Reference/Statements/function
+---
+
{{jsSidebar("Statements")}}

+
+
Die Funktionsdeklaration definiert eine Funktion mit den angegebenen Parametern.

+
+
Es kann auch eine Funktion mit dem {{jsxref("Function")}}-Konstruktor und einem {{jsxref("Operators/function", "Funktionsausdruck")}} deklariert werden.

+
+
Syntax

+
+
function name([param,[, param,[..., param]]]) {
+   [statements]
+}
+

+
+

+ 
name

+ 
Der Funktionsname.

+

+
+

+ 
param

+ 
Der Name des Arguments, der an die Funktion übergeben werden soll. Eine Funktion kann bis zu 255 Argumente haben.

+

+
+

+ 
statements

+ 
Die Ausdrücke, aus denen der Funktionskörper besteht.

+

+
+
Beschreibung

+
+
Eine Funktion, die mit der Funktionsdeklaration erstellt wurde, ist ein Function -Objekt und hat alle Eigenschaften, Methoden und Verhalten des Function-Objekts. Siehe {{jsxref("Function")}} für detaillierte Information über Funktionen.

+
+
Eine Funktion kann auch mit einem Ausdruck erzeugt werden (siehe {{jsxref("Operators/function", "function expression")}}).

+
+
Standardmäßig geben Funktionen undefined zurück. Um einen beliebigen anderen Wert zurückzugeben muss die Funktion einen {{jsxref("Statements/return", "return")}}-Ausdruck haben, der den Wert der Rückgabe angibt.

+
+
Bedingungskreierte Funktionen

+
+
Funktionen können bedingungskreiert werden. Das heißt: Eine Funktionsanweisung kann innerhalb einer if-Anweisung verschachtelt werden. Die meisten modernen Browser, abseits von Mozilla, werden solche konditionsbasierten Deklarationen als unkonditionelle Deklarationen behandeln und die Funktion erstellen, ob wahr oder nicht, siehe dieser Artikel für eine Übersicht. Deshalb sollten sie so nicht verwendet werden. Stattdessen sollten Funktionsausdrücke für eine konditionelle Erstellung verwendet werden.

+
+
Hochziehen der Funktionsdeklaration

+
+
Funktionsdeklarationen in Javascript ziehen die Funktionsdefinition hoch. D. h. Funktionen können benutzt werden noch bevor sie deklariert wurden:

+
+
hochgezogen(); // loggt "foo"
+
+function hochgezogen() {
+  console.log("foo");
+}
+

+
+
Zu beachten ist aber, dass {{jsxref("Operators/function", "Funktionsausdrücke")}} nicht hochgezogen werden:

+
+
nichtHochgezogen(); // TypeError: nichtHochgezogen is not a function
+
+var nichtHochgezogen = function() {
+   console.log("bar");
+};
+

+
+
Beispiele

+
+
Mit function

+
+
Der folgende Code deklariert eine Funktion, die die Summe aller Verkäufe zurückgibt, wenn sie die Anzahl der verkauften Einheiten a, b, und c übergeben bekommt.

+
+
function berechne_verkäufe(einheit_a, einheit_b, einheit_c) {
+   return einheit_a*79 + einheit_b * 129 + einheit_c * 699;
+}
+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-13', 'Function definition')}}{{Spec2('ES5.1')}} 
{{SpecName('ES3', '#sec-13', 'Function definition')}}{{Spec2('ES3')}} 
{{SpecName('ES1', '#sec-13', 'Function definition')}}{{Spec2('ES1')}}Initial definition. Implemented in JavaScript 1.0.

+
+
Browserkompatibilität

+
+
{{CompatibilityTable}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Allowed in sloppy mode{{CompatChrome(49.0)}}    

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+   
+  
+ 
+
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Allowed in sloppy mode{{CompatNo}}
+    
{{CompatChrome(49.0)}}

+   		    

+

+
+
Siehe auch

+
+
    
+ 
  • {{jsxref("Functions_and_function_scope", "Functions and function scope")}}
    • 
+ 
  • {{jsxref("Function")}}
    • 
+ 
  • {{jsxref("Operators/function", "function expression")}}
    • 
+ 
  • {{jsxref("Statements/function*", "function* statement")}}
    • 
+ 
  • {{jsxref("Operators/function*", "function* expression")}}
    • 
+ 
  • {{jsxref("Functions/Arrow_functions", "Arrow functions")}}
    • 
+ 
  • {{jsxref("GeneratorFunction")}}
    • 
+

diff --git a/files/de/web/javascript/reference/statements/funktion/index.html b/files/de/web/javascript/reference/statements/funktion/index.html
deleted file mode 100644
index 64a54347bc..0000000000
--- a/files/de/web/javascript/reference/statements/funktion/index.html
+++ /dev/null
@@ -1,190 +0,0 @@
----
-title: Funktion
-slug: Web/JavaScript/Reference/Statements/funktion
-translation_of: Web/JavaScript/Reference/Statements/function
----
-
{{jsSidebar("Statements")}}

-
-
Die Funktionsdeklaration definiert eine Funktion mit den angegebenen Parametern.

-
-
Es kann auch eine Funktion mit dem {{jsxref("Function")}}-Konstruktor und einem {{jsxref("Operators/function", "Funktionsausdruck")}} deklariert werden.

-
-
Syntax

-
-
function name([param,[, param,[..., param]]]) {
-   [statements]
-}
-

-
-

- 
name

- 
Der Funktionsname.

-

-
-

- 
param

- 
Der Name des Arguments, der an die Funktion übergeben werden soll. Eine Funktion kann bis zu 255 Argumente haben.

-

-
-

- 
statements

- 
Die Ausdrücke, aus denen der Funktionskörper besteht.

-

-
-
Beschreibung

-
-
Eine Funktion, die mit der Funktionsdeklaration erstellt wurde, ist ein Function -Objekt und hat alle Eigenschaften, Methoden und Verhalten des Function-Objekts. Siehe {{jsxref("Function")}} für detaillierte Information über Funktionen.

-
-
Eine Funktion kann auch mit einem Ausdruck erzeugt werden (siehe {{jsxref("Operators/function", "function expression")}}).

-
-
Standardmäßig geben Funktionen undefined zurück. Um einen beliebigen anderen Wert zurückzugeben muss die Funktion einen {{jsxref("Statements/return", "return")}}-Ausdruck haben, der den Wert der Rückgabe angibt.

-
-
Bedingungskreierte Funktionen

-
-
Funktionen können bedingungskreiert werden. Das heißt: Eine Funktionsanweisung kann innerhalb einer if-Anweisung verschachtelt werden. Die meisten modernen Browser, abseits von Mozilla, werden solche konditionsbasierten Deklarationen als unkonditionelle Deklarationen behandeln und die Funktion erstellen, ob wahr oder nicht, siehe dieser Artikel für eine Übersicht. Deshalb sollten sie so nicht verwendet werden. Stattdessen sollten Funktionsausdrücke für eine konditionelle Erstellung verwendet werden.

-
-
Hochziehen der Funktionsdeklaration

-
-
Funktionsdeklarationen in Javascript ziehen die Funktionsdefinition hoch. D. h. Funktionen können benutzt werden noch bevor sie deklariert wurden:

-
-
hochgezogen(); // loggt "foo"
-
-function hochgezogen() {
-  console.log("foo");
-}
-

-
-
Zu beachten ist aber, dass {{jsxref("Operators/function", "Funktionsausdrücke")}} nicht hochgezogen werden:

-
-
nichtHochgezogen(); // TypeError: nichtHochgezogen is not a function
-
-var nichtHochgezogen = function() {
-   console.log("bar");
-};
-

-
-
Beispiele

-
-
Mit function

-
-
Der folgende Code deklariert eine Funktion, die die Summe aller Verkäufe zurückgibt, wenn sie die Anzahl der verkauften Einheiten a, b, und c übergeben bekommt.

-
-
function berechne_verkäufe(einheit_a, einheit_b, einheit_c) {
-   return einheit_a*79 + einheit_b * 129 + einheit_c * 699;
-}
-

-
-
Spezifikationen

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
SpezifikationStatusKommentar
{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-13', 'Function definition')}}{{Spec2('ES5.1')}} 
{{SpecName('ES3', '#sec-13', 'Function definition')}}{{Spec2('ES3')}} 
{{SpecName('ES1', '#sec-13', 'Function definition')}}{{Spec2('ES1')}}Initial definition. Implemented in JavaScript 1.0.

-
-
Browserkompatibilität

-
-
{{CompatibilityTable}}

-
-

-
- 
-  
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-  
- 
-
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Allowed in sloppy mode{{CompatChrome(49.0)}}    

-

-
-

-
- 
-  
-   
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-   
-  
- 
-
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Allowed in sloppy mode{{CompatNo}}
-    
{{CompatChrome(49.0)}}

-   		    

-

-
-
Siehe auch

-
-
    
- 
  • {{jsxref("Functions_and_function_scope", "Functions and function scope")}}
    • 
- 
  • {{jsxref("Function")}}
    • 
- 
  • {{jsxref("Operators/function", "function expression")}}
    • 
- 
  • {{jsxref("Statements/function*", "function* statement")}}
    • 
- 
  • {{jsxref("Operators/function*", "function* expression")}}
    • 
- 
  • {{jsxref("Functions/Arrow_functions", "Arrow functions")}}
    • 
- 
  • {{jsxref("GeneratorFunction")}}
    • 
-

diff --git a/files/de/web/javascript/reference/template_literals/index.html b/files/de/web/javascript/reference/template_literals/index.html
new file mode 100644
index 0000000000..54885ed5a3
--- /dev/null
+++ b/files/de/web/javascript/reference/template_literals/index.html
@@ -0,0 +1,219 @@
+---
+title: Template-Strings
+slug: Web/JavaScript/Reference/template_strings
+translation_of: Web/JavaScript/Reference/Template_literals
+---
+
{{JsSidebar("More")}}

+
+
Template-Strings sind {{jsxref("String", "String-Symbole")}}, die über mehrere Zeilen gehende Zeichenketten sowie eingebettete Javascript-Ausdrücke ermöglichen.

+
+
Syntax

+
+
`string text`
+
+`string text line 1
+ string text line 2`
+
+`string text ${expression} string text`
+
+tag `string text ${expression} string text`
+

+
+
Beschreibung

+
+
Template-Strings sind anstelle von doppelten bzw. einfachen Anführungszeichen in zwei Akzente Gravis ` (Französisch: accent grave, Englisch: backtick) eingeschlossen.

+
+
Sie können Platzhalter beinhalten, die durch das Dollarsymbol gefolgt von geschweiften Klammern gekennzeichnet sind (${expression}). Auf diese Weise dienen sie als Vorlagen (Englisch: template), die, zentral definiert, während des Programmablaufs an verschiedenen Stellen individuell eingesetzt werden können.

+
+
Die Ausdrücke in den Platzhaltern sowie der Text selbst können an eine optionale Funktion übergeben werden. Falls vor dem Template-String ein Ausdruck vorhanden ist (hier als tag bezeichnet), wird der Template-String „Tagged Template String“ genannt. In diesem Fall wird der tag-Ausdruck (üblicherweise eine Funktion) mit dem verarbeiteten Template-String aufgerufen, um den Text vor der Ausgabe zu bearbeiten.

+
+
Ein Gravis kann in einen Template-String durch Maskieren mit dem Rückstrich \ eingefügt werden:

+
+
`\`` === '`' // --> true

+
+
Der Gravis und das einfache Anführungszeichen

+
+
Der Gravis befindet sich auf deutschen Tastaturen rechts neben dem ß und ist nur zusammen mit der Hochstelltaste und einer anschließenden Betätigung der Leertaste zu erreichen.

+
+
Das Zeichen wird gelegentlich mit dem einfachen Anführungszeichen ' verwechselt; dieses befindet sich rechts neben dem Ä.

+
+
Im normalen Sprachgebrauch wird es meist zusammen mit den Tasten e oder a genutzt um è bzw. à zu schreiben, analog zur Notwendigkeit einer zusätzlichen Betätigung der Leertaste für ` alleine.

+
+
Mehrzeilige Zeichenketten

+
+
In normale Zeichenketten sind Zeilenumbrüche nur durch Einfügen der Sequenz \n zu erreichen:

+
+
console.log("string text line 1\nstring text line 2");
+// Ausgabe:
+// string text line 1
+// string text line 2
+
+// Identische Ausgabe, jedoch deutlicher durch Trennung:
+console.log("string text line 1\n" +
+"string text line 2");
+

+
+
Das gleiche Ergebnis kann mit Template-Strings einfacher und übersichtlicher erreicht werden, indem der Text so, wie er erscheinen soll, über mehrere Zeilen geschrieben wird:

+
+
console.log(`string text line 1
+string text line 2`);
+// Ausgabe:
+// string text line 1
+// string text line 2

+
+
Ausdrücke in Zeichenketten

+
+
Um Javascript-Ausdrücke in normale Strings einzufügen, müsste die folgende Syntax genutzt werden:

+
+
var a = 5;
+var b = 10;
+console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + ".");
+// Ausgabe:
+// Fifteen is 15 and
+// not 20.

+
+
Mit Template-Strings können nun die syntaktischen Vorteile genutzt werden um solche Ersetzungen leserlicher zu machen:

+
+
var a = 5;
+var b = 10;
+console.log(`Fifteen is ${a + b} and
+not ${2 * a + b}.`);
+// Ausgabe:
+// Fifteen is 15 and
+// not 20.

+
+
Verschachtelte Vorlagen

+
+
Das Verschachteln von Template-Strings ist manchmal die einfachste und lesbarste Möglichkeit, konfigurierbare Vorlagen zu erhalten, denn auch innerhalb von ${ } können Template-Strings verwendet werden

+
+
Die nachfolgenden drei Beispiele haben eine identische Funktion:

+
+
ECMAScript 5:

+
+
let classes = 'header';
+classes += (isLargeScreen() ?
+  '' : item.isCollapsed ?
+    ' icon-expander' : ' icon-collapser');
+

+
+
Eine nicht verschachtelte Vorlage mit ECMAScript 2015:

+
+
const classes = `header ${ isLargeScreen() ? '' :
+  (item.isCollapsed ? 'icon-expander' : 'icon-collapser') }`;

+
+
Verschachtelte Vorlage mit ECMAScript 2015:

+
+
const classes = `header ${ isLargeScreen() ? '' :
+  `icon-${item.isCollapsed ? 'expander' : 'collapser'}` }`;

+
+
Tagged Template-Strings

+
+
Eine erweiterte Form der Template-Strings sind Tagged Template-Strings. Mit ihnen kann die Ausgabe von Template-Strings mit einer Funktion ändern.

+
+
Das erste Argument enthält ein Array von Strings ("Hello" und "world" in diesem Beispiel). Alle Argumente nach dem ersten sind die Werte der verarbeiteten (manchmal auch cooked genannt, „vorgekocht“) Ausdrücke (hier: "15" und "50").

+
+
Im folgenden Beispiel heißt die Funktion tag, was aber keinen besonderen Grund hat, da sie jeden gewünschten Namen haben kann.

+
+
var a = 5;
+var b = 10;
+
+function tag(strings, ...values) {
+  console.log(strings[0]); // "Hello "
+  console.log(strings[1]); // " world "
+  console.log(values[0]);  // 15
+  console.log(values[1]);  // 50
+
+  return "Bazinga!";
+}
+
+tag`Hello ${ a + b } world ${ a * b}`;
+// "Bazinga!"
+

+
+
Tag-Funktionen müssen keinen String zurückgeben, wie das folgende Beispiel zeigt.

+
+
function template(strings, ...keys) {
+  return (function(...values) {
+    var dict = values[values.length - 1] || {};
+    var result = [strings[0]];
+    keys.forEach(function(key, i) {
+      var value = Number.isInteger(key) ? values[key] : dict[key];
+      result.push(value, strings[i + 1]);
+    });
+    return result.join('');
+  });
+}
+
+var t1Closure = template`${0}${1}${0}!`;
+t1Closure('Y', 'A');  // "YAY!"
+var t2Closure = template`${0} ${'foo'}!`;
+t2Closure('Hello', {foo: 'World'});  // "Hello World!"
+

+
+
Raw Strings

+
+
Die Eigenschaft raw, verfügbar für das erste Argument eines Tagged Template-Strings, erlaubt den Zugriff auf den unverarbeiteten String, also ohne Escape-Sequenzen auszuwerten.

+
+
function tag(strings, ...values) {
+  console.log(strings.raw[0]);
+  // "string text line 1 \\n string text line 2"
+}
+
+tag`string text line 1 \n string text line 2`;
+

+
+
Zusätzlich exisitert die Methode {{jsxref("String.raw()")}} um unverarbeitete Strings zu erstellen, genauso wie sie die vorgegebene Template-Funktion und String-Verknüpfung erstellen würde.

+
+
String.raw`Hi\n${2+3}!`;
+// "Hi\\n5!"
+
+str.length;
+// 6
+
+str.split('').join(',');
+// "H,i,\,n,5,!"
+

+
+
Sicherheit

+
+
Template-Strings SOLLTEN NIEMALS von Nutzern erstellt werden, denen nicht vertraut werden kann, da diese Zugriff auf Variablen und Funktionen haben.

+
+
`${console.warn("this is",this)}`; // "this is" Window
+
+let a = 10;
+console.warn(`${a+=20}`); // "30"
+console.warn(a); // 30
+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('ES6', '#sec-template-literals', 'Template Literals')}}{{Spec2('ES6')}}Erste Definition. Definiert in mehreren Abschnitten der Spezifikation: Template Literals, Tagged Templates

+
+
Browserkompatibilität

+
+
+
+
{{Compat("javascript.grammar.template_literals")}}

+
+
See also

+
+
diff --git a/files/de/web/javascript/reference/template_strings/index.html b/files/de/web/javascript/reference/template_strings/index.html
deleted file mode 100644
index 54885ed5a3..0000000000
--- a/files/de/web/javascript/reference/template_strings/index.html
+++ /dev/null
@@ -1,219 +0,0 @@
----
-title: Template-Strings
-slug: Web/JavaScript/Reference/template_strings
-translation_of: Web/JavaScript/Reference/Template_literals
----
-
{{JsSidebar("More")}}

-
-
Template-Strings sind {{jsxref("String", "String-Symbole")}}, die über mehrere Zeilen gehende Zeichenketten sowie eingebettete Javascript-Ausdrücke ermöglichen.

-
-
Syntax

-
-
`string text`
-
-`string text line 1
- string text line 2`
-
-`string text ${expression} string text`
-
-tag `string text ${expression} string text`
-

-
-
Beschreibung

-
-
Template-Strings sind anstelle von doppelten bzw. einfachen Anführungszeichen in zwei Akzente Gravis ` (Französisch: accent grave, Englisch: backtick) eingeschlossen.

-
-
Sie können Platzhalter beinhalten, die durch das Dollarsymbol gefolgt von geschweiften Klammern gekennzeichnet sind (${expression}). Auf diese Weise dienen sie als Vorlagen (Englisch: template), die, zentral definiert, während des Programmablaufs an verschiedenen Stellen individuell eingesetzt werden können.

-
-
Die Ausdrücke in den Platzhaltern sowie der Text selbst können an eine optionale Funktion übergeben werden. Falls vor dem Template-String ein Ausdruck vorhanden ist (hier als tag bezeichnet), wird der Template-String „Tagged Template String“ genannt. In diesem Fall wird der tag-Ausdruck (üblicherweise eine Funktion) mit dem verarbeiteten Template-String aufgerufen, um den Text vor der Ausgabe zu bearbeiten.

-
-
Ein Gravis kann in einen Template-String durch Maskieren mit dem Rückstrich \ eingefügt werden:

-
-
`\`` === '`' // --> true

-
-
Der Gravis und das einfache Anführungszeichen

-
-
Der Gravis befindet sich auf deutschen Tastaturen rechts neben dem ß und ist nur zusammen mit der Hochstelltaste und einer anschließenden Betätigung der Leertaste zu erreichen.

-
-
Das Zeichen wird gelegentlich mit dem einfachen Anführungszeichen ' verwechselt; dieses befindet sich rechts neben dem Ä.

-
-
Im normalen Sprachgebrauch wird es meist zusammen mit den Tasten e oder a genutzt um è bzw. à zu schreiben, analog zur Notwendigkeit einer zusätzlichen Betätigung der Leertaste für ` alleine.

-
-
Mehrzeilige Zeichenketten

-
-
In normale Zeichenketten sind Zeilenumbrüche nur durch Einfügen der Sequenz \n zu erreichen:

-
-
console.log("string text line 1\nstring text line 2");
-// Ausgabe:
-// string text line 1
-// string text line 2
-
-// Identische Ausgabe, jedoch deutlicher durch Trennung:
-console.log("string text line 1\n" +
-"string text line 2");
-

-
-
Das gleiche Ergebnis kann mit Template-Strings einfacher und übersichtlicher erreicht werden, indem der Text so, wie er erscheinen soll, über mehrere Zeilen geschrieben wird:

-
-
console.log(`string text line 1
-string text line 2`);
-// Ausgabe:
-// string text line 1
-// string text line 2

-
-
Ausdrücke in Zeichenketten

-
-
Um Javascript-Ausdrücke in normale Strings einzufügen, müsste die folgende Syntax genutzt werden:

-
-
var a = 5;
-var b = 10;
-console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + ".");
-// Ausgabe:
-// Fifteen is 15 and
-// not 20.

-
-
Mit Template-Strings können nun die syntaktischen Vorteile genutzt werden um solche Ersetzungen leserlicher zu machen:

-
-
var a = 5;
-var b = 10;
-console.log(`Fifteen is ${a + b} and
-not ${2 * a + b}.`);
-// Ausgabe:
-// Fifteen is 15 and
-// not 20.

-
-
Verschachtelte Vorlagen

-
-
Das Verschachteln von Template-Strings ist manchmal die einfachste und lesbarste Möglichkeit, konfigurierbare Vorlagen zu erhalten, denn auch innerhalb von ${ } können Template-Strings verwendet werden

-
-
Die nachfolgenden drei Beispiele haben eine identische Funktion:

-
-
ECMAScript 5:

-
-
let classes = 'header';
-classes += (isLargeScreen() ?
-  '' : item.isCollapsed ?
-    ' icon-expander' : ' icon-collapser');
-

-
-
Eine nicht verschachtelte Vorlage mit ECMAScript 2015:

-
-
const classes = `header ${ isLargeScreen() ? '' :
-  (item.isCollapsed ? 'icon-expander' : 'icon-collapser') }`;

-
-
Verschachtelte Vorlage mit ECMAScript 2015:

-
-
const classes = `header ${ isLargeScreen() ? '' :
-  `icon-${item.isCollapsed ? 'expander' : 'collapser'}` }`;

-
-
Tagged Template-Strings

-
-
Eine erweiterte Form der Template-Strings sind Tagged Template-Strings. Mit ihnen kann die Ausgabe von Template-Strings mit einer Funktion ändern.

-
-
Das erste Argument enthält ein Array von Strings ("Hello" und "world" in diesem Beispiel). Alle Argumente nach dem ersten sind die Werte der verarbeiteten (manchmal auch cooked genannt, „vorgekocht“) Ausdrücke (hier: "15" und "50").

-
-
Im folgenden Beispiel heißt die Funktion tag, was aber keinen besonderen Grund hat, da sie jeden gewünschten Namen haben kann.

-
-
var a = 5;
-var b = 10;
-
-function tag(strings, ...values) {
-  console.log(strings[0]); // "Hello "
-  console.log(strings[1]); // " world "
-  console.log(values[0]);  // 15
-  console.log(values[1]);  // 50
-
-  return "Bazinga!";
-}
-
-tag`Hello ${ a + b } world ${ a * b}`;
-// "Bazinga!"
-

-
-
Tag-Funktionen müssen keinen String zurückgeben, wie das folgende Beispiel zeigt.

-
-
function template(strings, ...keys) {
-  return (function(...values) {
-    var dict = values[values.length - 1] || {};
-    var result = [strings[0]];
-    keys.forEach(function(key, i) {
-      var value = Number.isInteger(key) ? values[key] : dict[key];
-      result.push(value, strings[i + 1]);
-    });
-    return result.join('');
-  });
-}
-
-var t1Closure = template`${0}${1}${0}!`;
-t1Closure('Y', 'A');  // "YAY!"
-var t2Closure = template`${0} ${'foo'}!`;
-t2Closure('Hello', {foo: 'World'});  // "Hello World!"
-

-
-
Raw Strings

-
-
Die Eigenschaft raw, verfügbar für das erste Argument eines Tagged Template-Strings, erlaubt den Zugriff auf den unverarbeiteten String, also ohne Escape-Sequenzen auszuwerten.

-
-
function tag(strings, ...values) {
-  console.log(strings.raw[0]);
-  // "string text line 1 \\n string text line 2"
-}
-
-tag`string text line 1 \n string text line 2`;
-

-
-
Zusätzlich exisitert die Methode {{jsxref("String.raw()")}} um unverarbeitete Strings zu erstellen, genauso wie sie die vorgegebene Template-Funktion und String-Verknüpfung erstellen würde.

-
-
String.raw`Hi\n${2+3}!`;
-// "Hi\\n5!"
-
-str.length;
-// 6
-
-str.split('').join(',');
-// "H,i,\,n,5,!"
-

-
-
Sicherheit

-
-
Template-Strings SOLLTEN NIEMALS von Nutzern erstellt werden, denen nicht vertraut werden kann, da diese Zugriff auf Variablen und Funktionen haben.

-
-
`${console.warn("this is",this)}`; // "this is" Window
-
-let a = 10;
-console.warn(`${a+=20}`); // "30"
-console.warn(a); // 30
-

-
-
Spezifikationen

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
SpezifikationStatusKommentar
{{SpecName('ES6', '#sec-template-literals', 'Template Literals')}}{{Spec2('ES6')}}Erste Definition. Definiert in mehreren Abschnitten der Spezifikation: Template Literals, Tagged Templates

-
-
Browserkompatibilität

-
-
-
-
{{Compat("javascript.grammar.template_literals")}}

-
-
See also

-
-
diff --git a/files/de/web/javascript/reference/veraltete_und_abgeschaffte_features/index.html b/files/de/web/javascript/reference/veraltete_und_abgeschaffte_features/index.html
deleted file mode 100644
index 412bddc553..0000000000
--- a/files/de/web/javascript/reference/veraltete_und_abgeschaffte_features/index.html
+++ /dev/null
@@ -1,291 +0,0 @@
----
-title: Veraltete und abgeschaffte Features
-slug: Web/JavaScript/Reference/Veraltete_und_abgeschaffte_Features
-translation_of: Web/JavaScript/Reference/Deprecated_and_obsolete_features
----
-
{{JsSidebar("More")}}

-
-
Diese Seite listet die Features JavaScriptes auf, die veraltet sind( das bedeutet, dass noch benutzbar, aber Entfernung geplant) und abgeschafft sind( das bedeutet: nicht länger benutzbar).

-
-
Veraltete Features

-
-
Diese veralteten Features können noch benutzt werden, aber sollten mit Vorsicht benutzt werden, da erwartet wird, dass sie in Futura endgültig abgeschafft werden. Man sollte daran arbeiten, sie von seinem Code zu entfernen.

-
-
RegExp-Eigenschaften

-
-
The following properties are deprecated. This does not affect their use in {{jsxref("String.replace", "replacement strings", "", 1)}}:

-
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
PropertyDescription
{{jsxref("RegExp.n", "$1-$9")}}
-    
Parenthesized substring matches, if any.

-     Warning: Using these properties can result in problems, since browser extensions can modify them. Avoid them!

-   
{{jsxref("RegExp.input", "$_")}}See input.
{{jsxref("RegExp.multiline", "$*")}}See multiline.
{{jsxref("RegExp.lastMatch", "$&")}}See lastMatch.
{{jsxref("RegExp.lastParen", "$+")}}See lastParen.
{{jsxref("RegExp.leftContext", "$`")}}See leftContext.
{{jsxref("RegExp.rightContext", "$'")}}See rightContext.
{{jsxref("RegExp.input", "input")}}The string against which a regular expression is matched.
{{jsxref("RegExp.lastMatch", "lastMatch")}}The last matched characters.
{{jsxref("RegExp.lastParen", "lastParen")}}The last parenthesized substring match, if any.
{{jsxref("RegExp.leftContext", "leftContext")}}The substring preceding the most recent match.
{{jsxref("RegExp.rightContext", "rightContext")}}The substring following the most recent match.

-
-
The following are now properties of RegExp instances, no longer of the RegExp object:

-
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
PropertyDescription
{{jsxref("RegExp.global", "global")}}Whether or not to test the regular expression against all possible matches in a string, or only against the first.
{{jsxref("RegExp.ignoreCase", "ignoreCase")}}Whether or not to ignore case while attempting a match in a string.
{{jsxref("RegExp.lastIndex", "lastIndex")}}The index at which to start the next match.
{{jsxref("RegExp.multiline", "multiline")}}Whether or not to search in strings across multiple lines.
{{jsxref("RegExp.source", "source")}}The text of the pattern.

-
-
RegExp methods

-
-
    
- 
  • The {{jsxref("RegExp.compile", "compile()")}} method is deprecated.
    • 
- 
  • The valueOf method is no longer specialized for RegExp. Use {{jsxref("Object.valueOf()")}}.
    • 
-

-
-
Function properties

-
-
    
- 
  • The {{jsxref("Global_Objects/Function/caller", "caller")}} and {{jsxref("Global_Objects/Function/arguments", "arguments")}} properties are deprecated, because they leak the function caller. Instead of the arguments property, you should use the {{jsxref("Functions/arguments", "arguments")}} object inside function closures.
    • 
-

-
-
Legacy generator

-
-
    
- 
  • {{jsxref("Statements/Legacy_generator_function", "Legacy generator function statement")}} and {{jsxref("Operators/Legacy_generator_function", "Legacy generator function expression")}} are deprecated. Use {{jsxref("Statements/function*", "function* statement")}} and {{jsxref("Operators/function*", "function* expression")}} instead.
    • 
- 
  • {{jsxref("Operators/Array_comprehensions", "JS1.7/JS1.8 Array comprehension", "#Differences_to_the_older_JS1.7.2FJS1.8_comprehensions")}} and {{jsxref("Operators/Generator_comprehensions", "JS1.7/JS1.8 Generator comprehension", "#Differences_to_the_older_JS1.7.2FJS1.8_comprehensions")}} are deprecated.
    • 
-

-
-
Iterator

-
-
    
- 
  • {{jsxref("Global_Objects/StopIteration", "StopIteration")}} is deprecated.
    • 
- 
  • {{jsxref("Global_Objects/Iterator", "Iterator")}} is deprecated.
    • 
-

-
-
Object methods

-
-
    
- 
  • {{jsxref("Object.watch", "watch")}} and {{jsxref("Object.unwatch", "unwatch")}} are deprecated. Use {{jsxref("Proxy")}} instead.
    • 
- 
  • __iterator__ is deprecated.
    • 
- 
  • {{jsxref("Object.noSuchMethod", "__noSuchMethod__")}} is deprecated. Use {{jsxref("Proxy")}} instead.
    • 
-

-
-
Date methods

-
-
    
- 
  • {{jsxref("Global_Objects/Date/getYear", "getYear")}} and {{jsxref("Global_Objects/Date/setYear", "setYear")}} are affected by the Year-2000-Problem and have been subsumed by {{jsxref("Global_Objects/Date/getFullYear", "getFullYear")}} and {{jsxref("Global_Objects/Date/setFullYear", "setFullYear")}}.
    • 
- 
  • You should use {{jsxref("Global_Objects/Date/toISOString", "toISOString")}} instead of the deprecated {{jsxref("Global_Objects/Date/toGMTString", "toGMTString")}} method in new code.
    • 
- 
  • {{jsxref("Global_Objects/Date/toLocaleFormat", "toLocaleFormat")}} is deprecated.
    • 
-

-
-
Functions

-
-
    
- 
  • {{jsxref("Operators/Expression_closures", "Expression closures", "", 1)}} are deprecated. Use regular {{jsxref("Operators/function", "functions")}} or {{jsxref("Functions/Arrow_functions", "arrow functions", "", 1)}} instead.
    • 
-

-
-
Proxy

-
-
    
- 
  • Proxy.create and Proxy.createFunction are deprecated. Use {{jsxref("Proxy")}} instead.
    • 
- 
  • The following traps are obsolete:
-  
      
-   
    • hasOwn ({{bug(980565)}}, Firefox 33).
      • 
-   
    • getEnumerablePropertyKeys ({{bug(783829)}}, Firefox 37)
      • 
-   
    • getOwnPropertyNames ({{bug(1007334)}}, Firefox 33)
      • 
-   
    • keys ({{bug(1007334)}}, Firefox 33)
      • 
-  
    
- 
    • 
-

-
-
let

-
-
    
- 
  • {{jsxref("Statements/let", "let blocks", "#let_block")}} and {{jsxref("Statements/let", "let expressions", "#let_expressions")}} are deprecated.
    • 
-

-
-
Escape sequences

-
-
    
- 
  • Octal escape sequences (\ followed by one, two, or three octal digits) are deprecated in string and regular expression literals.
    • 
- 
  • The {{jsxref("Global_Objects/escape", "escape")}} and {{jsxref("Global_Objects/unescape", "unescape")}} functions are deprecated. Use {{jsxref("Global_Objects/encodeURI", "encodeURI")}}, {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}}, {{jsxref("Global_Objects/decodeURI", "decodeURI")}} or {{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent")}} to encode and decode escape sequences for special characters.
    • 
-

-
-
String methods

-
-
    
- 
  • HTML wrapper methods like {{jsxref("String.prototype.fontsize")}} and {{jsxref("String.prototype.big")}}.
    • 
- 
  • {{jsxref("String.prototype.quote")}} is removed from Firefox 37.
    • 
- 
  • non standard flags parameter in {{jsxref("String.prototype.search")}}, {{jsxref("String.prototype.match")}}, and {{jsxref("String.prototype.replace")}} are deprecated.
    • 
-

-
-
Obsolete features

-
-
These obsolete features have been entirely removed from JavaScript and can no longer be used as of the indicated version of JavaScript.

-
-
Object

-
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
PropertyDescription
{{jsxref("Global_Objects/Object/count", "__count__")}}Returns the number of enumerable properties directly on a user-defined object.
{{jsxref("Global_Objects/Object/Parent", "__parent__")}}Points to an object's context.
{{jsxref("Global_Objects/Object/eval", "Object.prototype.eval()")}}Evaluates a string of JavaScript code in the context of the specified object.
{{jsxref("Object.observe()")}}Asynchronously observing the changes to an object.
{{jsxref("Object.unobserve()")}}Remove observers.
{{jsxref("Object.getNotifier()")}}Creates an object that allows to synthetically trigger a change.

-
-
Function

-
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
PropertyDescription
{{jsxref("Global_Objects/Function/arity", "arity")}}Number of formal arguments.

-
-
Array

-
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
PropertyDescription
{{jsxref("Array.observe()")}}Asynchronously observing changes to Arrays.
{{jsxref("Array.unobserve()")}}Remove observers.

-
-
Number

-
-
    
- 
  • {{jsxref("Number.toInteger()")}}
    • 
-

-
-
ParallelArray

-
-
    
- 
  • {{jsxref("ParallelArray")}}
    • 
-

-
-
Statements

-
-
    
- 
  • {{jsxref("Statements/for_each...in", "for each...in")}} is deprecated. Use {{jsxref("Statements/for...of", "for...of")}} instead.
    • 
- 
  • Destructuring {{jsxref("Statements/for...in", "for...in")}} is deprecated. Use {{jsxref("Statements/for...of", "for...of")}} instead.
    • 
-

-
-
E4X

-
-
See E4X for more information.

-
-
Sharp variables

-
-
See Sharp variables in JavaScript for more information.

diff --git a/files/de/web/javascript/reference/veraltete_und_abgeschaffte_features/the_legacy_iterator_protocol/index.html b/files/de/web/javascript/reference/veraltete_und_abgeschaffte_features/the_legacy_iterator_protocol/index.html
deleted file mode 100644
index 017dcea16a..0000000000
--- a/files/de/web/javascript/reference/veraltete_und_abgeschaffte_features/the_legacy_iterator_protocol/index.html
+++ /dev/null
@@ -1,78 +0,0 @@
----
-title: The legacy Iterator protocol
-slug: >-
-  Web/JavaScript/Reference/Veraltete_und_abgeschaffte_Features/The_legacy_Iterator_protocol
-tags:
-  - ES2015
-  - JavaScript
-  - Obsolet
-  - next()
-  - veralteter Iterator
-translation_of: >-
-  Web/JavaScript/Reference/Deprecated_and_obsolete_features/The_legacy_Iterator_protocol
----
-
{{jsSidebar("More")}}

-
-
Kein Standard. Das veraltete Iterator-Protokoll war ein SpiderMonkey-spezifisches Feature, welches in Firefox 58 entfernt wurde. Als Alternative werden for..of Schleifen und das iterator protocol empfohlen.

-
-
Das veraltete Iterator-Protokoll

-
-
Vor Version 26 implementierte Firefox ein anderes Iterator-Protokoll, welches dem ES2015 Iterator protocol Standard entspricht.

-
-
Ein Objekt ist ein veralteter Iterator, wenn es eine next()  Methode mit den folgenden Semantiken implementiert, welches zum Ende der Iteration {{jsxref("Global_Objects/StopIteration", "StopIteration")}} wirft.

-
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
PropertyValue
nextEine Funktion ohne Argumente, welche einen Wert zurückgibt.

-
-
Unterschied zwischen dem veralteten und dem ES2015 Iterator-Protokoll

-
-
    
- 
  • Der Wert wurde direkt von der next Methode zurückgegeben, statt der Wert der value Eigenschaft eines Platzhalter-Objekts zu sein.
    • 
- 
  • Das Ende der Iteration wurde durch das Werfen eines {{jsxref("Global_Objects/StopIteration", "StopIteration")}} Objekts ausgedrückt.
    • 
-

-
-
Einfaches Beispiel mit dem alten Protokoll

-
-
function kreiereIterator(array){
-    var nextIndex = 0;
-
-    return {
-       next: function(){
-           if(nextIndex < array.length){
-               return array[nextIndex++];
-           else
-               throw new StopIteration();
-       }
-    }
-}
-
-var it = kreiereIterator(['yo', 'ya']);
-
-console.log(it.next()); // 'yo'
-console.log(it.next()); // 'ya'
-try{
-    console.log(it.next());
-}
-catch(e){
-    if(e instanceof StopIteration){
-         // Iteration beendet.
-    }
-}
-

-
-
Siehe auch

-
-
diff --git a/files/de/web/javascript/speicherverwaltung/index.html b/files/de/web/javascript/speicherverwaltung/index.html
deleted file mode 100644
index 82f8977c23..0000000000
--- a/files/de/web/javascript/speicherverwaltung/index.html
+++ /dev/null
@@ -1,184 +0,0 @@
----
-title: Speicherverwaltung
-slug: Web/JavaScript/Speicherverwaltung
-tags:
-  - JavaScript
-translation_of: Web/JavaScript/Memory_Management
----
-
{{JsSidebar("Advanced")}}

-
-
Einleitung

-
-
Bei Low-Level Programmiersprachen wie C, die zur systemnahen Programmierung eingesetzt werden, existieren Funktionen - wie z. B. malloc() und free() - womit explizit Speicher angefordert und wieder freigegeben werden kann. Bei JavaScript gibt es keine solchen Funktionen, sondern der benötigte Speicher wird bei der Erzeugung neuer Objekte (z. B. benutzerdefinierte Objekte oder vordefinierte Objekte wie String) zugewiesen. Die Speicherfreigabe erfolgt automatisch im Hintergrund durch die Garbage Collection (wörtlich: "Müllabfuhr"; automatische Speicherbereinigung). Dieser Automatismus führt oft zu Verwirrung und lässt so manchen Entwicklern irrtümlich glauben, man müsse sich über die Speicherverwaltung keine Gedanken machen.

-
-
Zyklus der Speichernutzung

-
-
Unabhängig von der eingesetzten Programmiersprache läuft der Zyklus für die Speichernutzung immer ungefähr gleich ab:

-
-
    
- 
  1. Alloziierung/Zuweisung des benötigten Speichers.
    2. 
- 
  2. Benutzung des Speichers (lesen, schreiben).
    3. 
- 
  3. Freigabe des alloziierten Speichers, wenn er nicht mehr benötigt wird.
    4. 
-

-
-
Der erste und zweite Schritt erfolgt bei allen Programmiersprachen explizit. Der letzte Schritt, die Freigabe des Speichers, wird bei Low-Level-Sprachen explizit und bei höheren Programmiersprachen wie JavaScript meist implizit vorgenommen.

-
-
Speicherzuweisung bei JavaScript

-
-
Initialisierung von Werten

-
-
Um dem Programmierer die Arbeit zu erleichtern, weist JavaScript bei der Zuweisung von Werten je nach Typ automatisch die benötigte Menge an Speicher zu:

-
-

-
var n = 123; // alloziiert Speicher für eine Number
-var s = "azerty"; // alloziiert Speicher für einen String
-
-var o = {
-  a: 1,
-  b: null
-}; // alloziiert Speicher für das Objekt und enthaltene Werte
-
-var a = [1, null, "abra"]; // (wie bei Objekten) alloziiert Speicher für das Array und enthaltene Werte
-
-function f(a){
-  return a + 2;
-} // alloziiert eine Function (die ein aufrufbares Objekt ist)
-
-// Funktions-Ausdrücke alloziieren ebenfalls ein Objekt
-someElement.addEventListener('click', function(){
-  someElement.style.backgroundColor = 'blue';
-}, false);
-

-

-
-
Allokation über Funktionsaufrufe

-
-
Einige Funktionen allozieren Objekte:

-
-
var d = new Date();
-var e = document.createElement('div'); // alloziiert ein DOM-Element
-

-
-
Andere Methoden allozieren neue Werte oder Objekte:

-
-
var s = "azerty";
-var s2 = s.substr(0, 3); // s2 ist ein neuer String
-// Da Strings immutable sind, weist JavaScript evtl. hier
-// keinen neuen Speicher zu, sondern merkt sich nur [0, 3],
-// dass s2 die ersten beiden Elemente von s enthält
-
-var a = ["ouais ouais", "nan nan"];
-var a2 = ["generation", "nan nan"];
-var a3 = a.concat(a2); // neues Array mit den 4 Elementen von a und a2
-

-
-
Werte

-
-
Bei der Zuweisung von Werten wird in den Speicher geschrieben und beim Abfragen von Werten der Speicher ausgelesen. Weist man also z. B. einer Objekteigenschaft einen Wert zu oder übergibt einen Wert als Argument an eine Funktion, wird dieser in den Speicher geschrieben und beim Abfragen des Werts der Speicher ausgelesen.

-
-
Freigabe des Speichers, wenn dieser nicht mehr benötigt wird

-
-
Bei diesem Vorgang tauchen am häufigsten Probleme mit der Speicherverwaltung auf, da es keine leichte Aufgabe ist, zu entscheiden, wann der benötigte Speicher tatsächlich nicht mehr gebraucht wird. Oftmals muss der Entwickler selbst bestimmen, an welcher Stelle die Freigabe eines Speicherbereichs erfolgen soll.

-
-
Höhere Programmiersprachen setzten häufig eine Softwarekomponente namens Garbage Collector ein, dessen Aufgabe darin besteht, die Speicherallokation zu überwachen und nicht mehr benötigten Speicher wieder freizugeben. Dieser Prozess basiert auf einer Abschätzung, da das zugrundeliegende Problem - zu entscheiden, wann Speicher nicht mehr benötigt wird - unentscheidbar ist (nicht durch einen Algorithmus lösbar).

-
-
Garbage Collection

-
-
Wie oben schon erwähnt, gibt es keine eindeutige Lösung für das zugrunde liegende Problem. Aus diesem Grund implementieren Garbage Collections einen beschränkten Algorithmus. Dieser Abschnitt liefert Informationen zum Verständnis der wichtigsten Algorithmen der Garbage Collection und deren Beschränkungen.

-
-
Referenzen

-
-
Der Grundgedanke auf dem Garbage Collection-Algorithmen hauptsächlich basieren, ist die Idee der Referenz. Im Zusammenhang mit der Speicherverwaltung spricht man davon, dass ein Objekt ein anderes Objekt referenziert, wenn ersteres (entweder implizit oder explizit) Zugriff auf letzteres hat. Zum Beispiel hat ein JavaScript-Objekt eine Referenz auf dessen Prototype (implizite Referenz) und dessen Eigenschaftswerte (explizite Referenz).

-
-
In diesem Kontext wird also der Begriff Objekt etwas breiter aufgefasst, als im Zusammenhang mit JavaScript-Objekten und beinhaltet außerdem auch Sichtbarkeitsbereiche von Funktionen (bzw. den globalen Sichtbarkeitsbereich).

-
-
Referenzzählung der Garbage Collection

-
-
Dies ist der naivste Algorithmus der Garbage Collection. Er reduziert einfach "ein Objekt wird nicht mehr benötigt" auf "kein anderes Objekt referenziert auf das Objekt". Ein Objekt wird also dann von der Garbage Collection entsorgt, wenn keine Referenzen auf das Objekt existieren.

-
-
Beispiel

-
-
var o = {
-  a: {
-    b:2
-  }
-}; // 2 Objekte wurden erstellt. Das eine referenziert auf das andere als dessen Eigenschaft.
-// Das Objekt a wird referenziert, weil es der Variablen o zugewiesen wurde.
-// Da auf alle Objekte irgendwie referenziert wird, kann keines entsogt werden
-
-var o2 = o; // Die Variable 'o2' ist das zweite Objekt mit einer Referenz auf das Objekt
-o = 1; // nun hat das Objekt, das sich ursprünglich in o befand eine einzige Referenz durch 'o2'
-
-var oa = o2.a; // Referenz auf die Eigenschaft 'a' des Objekts.
-// Nun hat das Objekt 2 Referenzen: Eine als Eigenschaft, die andere als Variable 'oa'
-
-o2 = "yo"; // Das objekt, welches sich anfangs in 'o' befand hat nun keine Referenzen mehr
-// und kann von der Garbage Collection entsorgt werden.
-// Jedoch wird die Eigenschaft 'a' noch immer durch die Variable 'oa' referenziert und kann daher nicht freigegeben werden
-
-oa = null; // Nun existieren keine Refrenzen mehr auf die Eigenschaft 'a'
-// und das Objekt kann entsorgt werden.
-

-
-
Beschränkung: gegenseitige Referenzen

-
-
Dieser naive Algorithmus ist deshalb beschränkt, weil Objekte, die gegenseitig aufeinender referenzieren, gar nicht mehr benötigt werden könnten, aber nicht entsorgt werden dürfen, da noch auf sie referenziert wird.

-
-
function f(){
-  var o = {};
-  var o2 = {};
-  o.a = o2; // o referenziert o2
-  o2.a = o; // o2 referenziert o
-
-  return "azerty";
-}
-
-f();
-// die Objekte werden erzeugt und referenzieren gegenseitig aufeinander.
-// Sie werden außerhalb des Sichtbarkeitsbereichs der Funktion nicht verwendet
-// und könnten daher nach der Funktionsausführung freigegeben werden
-// Der Referenzzählungsalgorithmus erkennt jedoch nur, dass auf beide Objekte
-// noch referenziert wird und entsorgt daher keines der beiden
-

-
-
Praxisbeispiel

-
-
Bei Internet Explorer 6, 7 ist bekannt, dass sie einen Garbage Collector mit Referenzzählung für DOM-Objekte einsetzen. Es gibt daher ein bekanntes Muster für die systematische Erzeugung von Speicherlecks:

-
-
var div = document.createElement("div");
-div.onclick = function(){
-  doSomething();
-}; // Das div hat eine Referenz über die Event-Handler-Eigenschaft 'onclick'.
-// Der Handler hat auch eine Referenz auf das div, da die div-Variable
-// innerhalb Sichtbarkeitsbereich der Funktion ansprechbar ist.
-// Dieser Kreislauf sorgt dafür, dass beide Objekte nicht entsorgt werden
-// und ein Speicherleck entsteht
-

-
-
Mark-and-Sweep-Algorithmus

-
-
Dieser Algorithmus reduziert die Definition "ein Objekt wird nicht mehr gebraucht" auf "ein Objekt ist nicht erreichbar".

-
-
Der Algorithmus nimmt an, dass ein Satz von root-Objekten (bei JavaScript das globale Objekt) existiert. Der Algorithmus sucht dann von diesen Anfangsobjekten aus alle referenzierten Objekte, dann von den referenzierten Objekten alle Objekte, die auf andere Objekte referenzieren und so weiter. Auf diese Weise erkennt der Algorithmus alle erreichbaren Objekte und sammelt alle unerreichbaren Objekte.

-
-
Dieser Algorithmus ist besser als der vorherige, da Objekte, die nicht referenziert sind als unerreichbar gelten, jedoch Objekte, die unerreichbar sind, nicht unbedingt keine Referenzen haben (gegenseitige Referenz).

-
-
Im Jahr 2012 arbeiten alle modernen Browser mit einem Mark-and-Sweep-Garbage Collector. Alle Verbesserungen der letzen Jahre im Bereich der Garbage Collection bei JavaScript (generational/incremental/concurrent/parallel garbage collection) sind Verbesserungen der Implementierung des Algorithmus, jedoch keine Änderungen des Algorithmus selbst oder der Definition von "ein Objekt wird nicht mehr gebraucht".

-
-
Gegenseitige Verweise stellen kein Problem mehr dar

-
-
Bei dem Beispiel oben zu gegenseitigen Verweisen wird auf die beiden Objekte nicht mehr von einem Objekt aus verwiesen, welches über das globale Objekt erreichbar ist. Daher werden sie vom Garbage Collector als unerreichbar angesehen.

-
-
Dasselbe gilt für das nächste Beispiel. Sobald das div und der Handler unerreichbar geworden sind, werden sie vom Gabage Collector entsorgt, obwohl sie noch gegenseitig aufeinander verweisen.

-
-
Einschränkung: Objekte müssen explizit unerreichbar gemacht werden

-
-
Obwohl dies als Einschränkung gilt, gibt es in der Praxis kaum solche Situationen und deshalb denkt kaum jemand über die Garbage Collection nach.

-
-
Weitere Informationen

-
-
diff --git a/files/de/web/javascript/vergleiche_auf_gleichheit_und_deren_verwendung/index.html b/files/de/web/javascript/vergleiche_auf_gleichheit_und_deren_verwendung/index.html
deleted file mode 100644
index 2b9be0a283..0000000000
--- a/files/de/web/javascript/vergleiche_auf_gleichheit_und_deren_verwendung/index.html
+++ /dev/null
@@ -1,424 +0,0 @@
----
-title: Vergleiche auf Gleichheit und deren Verwendung
-slug: Web/JavaScript/Vergleiche_auf_Gleichheit_und_deren_Verwendung
-translation_of: Web/JavaScript/Equality_comparisons_and_sameness
----
-
{{jsSidebar("Intermediate")}}

-
-

-
JavaScript bietet drei verschiedene Operationen an, um Werte zu vergleichen:

-
-
    
- 
  • strikte Gleichheit (oder "triple equals" or "identity") mit ===,
    • 
- 
  • lose Gleichheit ("double equals") mit ==,
    • 
- 
  • und Object.is (neu in ECMAScript 2015).
    • 
-

-
-
Die Wahl der Operation hängt von der Art des gewünschten Vergleichs auf Gleichheit ab.

-

-
-
Kurz gesagt nimmt double equals eine Typkonvertierung der Operanden vor, bevor der Vergleich der Werte gemacht wird. Bei triple equals werden die Werte ohne vorherige Typkonvertierung miteinander verglichen. Wenn sich die Datentypen der beiden Operanden unterscheiden liefert triple equals immer false zurück. Object.is verhält sich wie triple equals und bietet darüber hinaus eine spezielle Behandlung für NaN und -0 und +0 an. -0 und +0 sind für Object.is ungleich während Object.is(NaN, NaN) true ist. Laut IEEE 754 ergibt ein Vergleich von zwei NaN mit double equals oder triple equals false. Diese drei Operationen unterscheiden sich ihrere Behandlung von primitiven Datentypen. Es wird nicht geprüft, ob die beiden Operanden konzeptionell diesselbe Struktur besitzen. Für die nichtprimitiven Objekte x und y, welche diesselbe Struktur besitzen aber zwei unterschiedliche Objekte sind, ergeben die drei Operationen false.

-
-
Strikte Gleichheit mit ===

-
-
Strikte Gleichheit prüft zwei Werte auf Gleichheit. Keiner der Werte wird vor dem Vergleich implizit konvertiert. Wenn die Werte verschiedene Datentypen haben, werden die Werte als ungleich betrachtet. Anderenfalls, wenn die Werte denselben Datentyp haben und keine Zahlen sind, werden sie als gleich betrachtet, solange sie denselben Wert haben. Wenn beide Werte Zahlen sind, werden sie als gleich betrachtet, solange beide nicht NaN sind und denselben Wert haben oder der eine Wert +0 und der andere Wert -0 ist.

-
-
var num = 0;
-var obj = new String("0");
-var str = "0";
-var b = false;
-
-console.log(num === num); // true
-console.log(obj === obj); // true
-console.log(str === str); // true
-
-console.log(num === obj); // false
-console.log(num === str); // false
-console.log(obj === str); // false
-console.log(null === undefined); // false
-console.log(obj === null); // false
-console.log(obj === undefined); // false
-

-
-
Strikte Gleichheit ist fast immer die am meisten geeignete Vergleichsoperation. Für alle Werte, die keine Zahlen sind, verwendet sie die naheliegende Semantik: ein Wert ist nur mit sich selbst gleich. Für Zahlen kommt eine leicht unterschiedliche Semantik zum Einsatz, da zwei Grenzfälle berücksichtigt werden müssen.  Im ersten Grenzfall kann die Zahl 0 als Gleitkommazahl ein positives oder negatives Vorzeichen haben. Dies kann zur Repräsentation von bestimmten mathematischen Lösungen nützlich sein. Da aber in den meisten Situationen nicht zwischen +0 und -0 unterschieden wird, behandelt die strikte Gleichheit diese zwei Werte als gleich. Der zweite Grenzfall ergibt sich dadruch, dass Gleitkommazahlen einen keine-Zahl Wert haben, NaN (not-a-number). Dadurch können Lösungen für schlecht definierte mathematische Probleme dargestellt werden (z.B.: negativ unendlich plus positiv undendlich). Strikte Gleichheit behandelt NaN als ungleich zu jedem anderen Wert und sich selbst. Der einzige Fall, in dem (x !== x) true ergibt, ist, wenn x den Wert NaN hat.

-
-
Lose Gleichheit mit ==

-
-
Lose Gleichheit vergleicht zwei Werte auf deren Gleichheit, nachdem beide zu demselben Datentyp konvertiert wurden. Nach der Konvertierung (ein oder beide Werte können konvertiert werden) wird der finale Vergleich wie bei === ausgeführt.  Lose Gleichheit ist symmetrisch: A == B hat immer dieselbe Semantik wie B == A für alle Werte von A und B.

-
-
Der Vergleich auf Gleichheit wird wie folgt für Operanden mit den verschiedenen Datentypen ausgeführt:

-
-
- 
-  
-   
-   
-  
- 
- 
-  
-   
-   
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-   
-  
- 
-
 Operand B
  UndefinedNullNumberStringBooleanObject
Operand AUndefinedtruetruefalsefalsefalseIsFalsy(B)
NulltruetruefalsefalsefalseIsFalsy(B)
NumberfalsefalseA === BA === ToNumber(B)ToNumber(B) === AToPrimitive(B) == A
StringfalsefalseB === ToNumber(A)A === BToNumber(A) === ToNumber(B)ToPrimitive(B) == A
BooleanfalsefalseToNumber(A) === BToNumber(A) === ToNumber(B)A === Bfalse
ObjectIsFalsy(A)IsFalsy(A)ToPrimitive(A) == BToPrimitive(A) == Bfalse
-    
A === B

-   

-
-
In der oberen Tabelle versucht ToNumber(A) sein Argument vor dem Vergleich in eine Zahl zu konvertieren. Das Verhalten ist äquivalent zu +A (der unäre + Operator).  ToPrimitive(A) versucht sein Argument, das ein Objekt ist, in einen primitiven Wert zu konvertieren. Dazu wird eine unterschiedliche Sequenz von A.toString und A.valueOf Methoden von A aufzurufen.

-
-
Traditionell und laut ECMAScript sind alle Objekte lose ungleich zu undefined und null. Aber die meisten Webbbrowser erlauben einer sehr kleinen Menge von Objekten (speziell das document.all Objekt für jede Seite), dass sie sich in bestimmten Kontexten so verhalten, als ob sie den Wert undefined emulieren.  Lose Gleichheit ist ein derartiger Kontext. Daher ergibt die Methode IsFalsy(A) genau dann true, wenn A ein Objekt ist, das undefined emuliert. In allen anderen Fällen ist ein Objekt nie lose gleich zu undefined oder null.

-
-
var num = 0;
-var obj = new String("0");
-var str = "0";
-var b = false;
-
-console.log(num == num); // true
-console.log(obj == obj); // true
-console.log(str == str); // true
-
-console.log(num == obj); // true
-console.log(num == str); // true
-console.log(obj == str); // true
-console.log(null == undefined); // true
-
-// both false, except in rare cases
-console.log(obj == null);
-console.log(obj == undefined);
-

-
-
Manche Entwickler haben die Ansicht, dass die Verwendung der losen Gleichheit fast nie eine gute Idee ist. Das Resultat des Vergleichs mit strikter Gleichheit ist einfacher vorherzusagen und die Auswertung ist schneller, da keine Konvertierung der Werte stattfindet.

-
-
Same-value Gleichheit

-
-
Same-value Gleichheit adressiert den dritten Fall: Bestimmung, ob zwei Werte in allen Kontexten funktional identisch sind. Dieser Anwendungsfall demonstriert eine Instanz des Liskovschen Substitutionsprinzip. Eine Instanz tritt auf, wenn versucht wird ein nicht veränderbares Property zu verändern:

-
-
// Add an immutable NEGATIVE_ZERO property to the Number constructor.
-Object.defineProperty(Number, "NEGATIVE_ZERO",
-                      { value: -0, writable: false, configurable: false, enumerable: false });
-
-function attemptMutation(v)
-{
-  Object.defineProperty(Number, "NEGATIVE_ZERO", { value: v });
-}
-

-
-
Object.defineProperty wird eine Exception werfen, wenn ein Versuch zum Verändern eines unveränderbares Property es verändern würde. Es passiert nichts, solange keine Veränderung stattfinden soll.  Wenn v -0 ist, wurde keine Veränderung angefragt und somit wird keine Exception geworfen. Wenn v aber +0 ist, hätte Number.NEGATIVE_ZERO nicht länger seinen unveränderbaren Wert. Wenn ein unveränderbares Property neudefiniert wird, wird der neu spezifizierte Wert intern mittels der Same-value Gleichheit mit dem aktuellen Wert verglichen.

-
-
Die Same-value Gleichheit wird von der Object.is Methode angeboten.

-
-
Abstrakte Gleichheit, strikte Gleichheit und same-value Gleichheit in der Spezifikation

-
-
In ECMAScript 5 wird der Vergleich mit == in Section 11.9.3, The Abstract Equality Algorithm beschrieben. Der === Vergleich ist in 11.9.6, The Strict Equality Algorithm zu finden. (Diese beiden Abschnitte sind kurz und verständlich. Hinweis: zuerst den Abschnitt Strict Equality Algorithm lesen) ECMAScript 5 beschreibt auch die same-value Gleichheit in Section 9.12, The SameValue Algorithm für die interne Verwendung in der JavaScript Engine. Dieser Abschnitt ist hauptsächlich derselbe wie Strict Equality Algorithm mit der Ausnahme, dass sich 11.9.6.4 und 9.12.4 in der Behandlung von Zahlen (Number) unterscheiden. ECMAScript 2015 schlägt vor, dass dieser Algorithmus über Object.is angeboten wird.

-
-
Wir können erkennen, dass mit double und triple equals, mit der Ausnahme der vorhergehenden Typkonvertierung in 11.9.6.1, der Strict Equality Algorithm eine Teilmenge des Abstract Equality Algorithm ist, weil 11.9.6.2–7 dem Abschnitt 11.9.3.1.a–f entspricht.

-
-
A model for understanding equality comparisons?

-
-
Prior to ES2015, you might have said of double equals and triple equals that one is an "enhanced" version of the other. For example, someone might say that double equals is an extended version of triple equals, because the former does everything that the latter does, but with type conversion on its operands. E.g., 6 == "6". (Alternatively, someone might say that double equals is the baseline, and triple equals is an enhanced version, because it requires the two operands to be the same type, so it adds an extra constraint. Which one is the better model for understanding depends on how you choose to view things.)

-
-
However, this way of thinking about the built-in sameness operators is not a model that can be stretched to allow a place for ES2015's Object.is on this "spectrum". Object.is isn't simply "looser" than double equals or "stricter" than triple equals, nor does it fit somewhere in between (i.e., being both stricter than double equals, but looser than triple equals). We can see from the sameness comparisons table below that this is due to the way that Object.is handles NaN. Notice that if Object.is(NaN, NaN) evaluated to false, we could say that it fits on the loose/strict spectrum as an even stricter form of triple equals, one that distinguishes between -0 and +0. The NaN handling means this is untrue, however. Unfortunately, Object.is simply has to be thought of in terms of its specific characteristics, rather than its looseness or strictness with regard to the equality operators.

-
-
- 
- 
-  
-   
-   
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-  
- 
-
Sameness Comparisons
xy=====Object.is
undefinedundefinedtruetruetrue
nullnulltruetruetrue
truetruetruetruetrue
falsefalsetruetruetrue
"foo""foo"truetruetrue
{ foo: "bar" }xtruetruetrue
00truetruetrue
+0-0truetruefalse
0falsetruefalsefalse
""falsetruefalsefalse
""0truefalsefalse
"0"0truefalsefalse
"17"17truefalsefalse
[1,2]"1,2"truefalsefalse
new String("foo")"foo"truefalsefalse
nullundefinedtruefalsefalse
nullfalsefalsefalsefalse
undefinedfalsefalsefalsefalse
{ foo: "bar" }{ foo: "bar" }falsefalsefalse
new String("foo")new String("foo")falsefalsefalse
0nullfalsefalsefalse
0NaNfalsefalsefalse
"foo"NaNfalsefalsefalse
NaNNaNfalsefalsetrue

-
-
When to use Object.is versus triple equals

-
-
Aside from the way it treats NaN, generally, the only time Object.is's special behavior towards zeros is likely to be of interest is in the pursuit of certain meta-programming schemes, especially regarding property descriptors when it is desirable for your work to mirror some of the characteristics of Object.defineProperty. If your use case does not require this, it is suggested to avoid Object.is and use === instead. Even if your requirements involve having comparisons between two NaN values evaluate to true, generally it is easier to special-case the NaN checks (using the isNaN method available from previous versions of ECMAScript) than it is to work out how surrounding computations might affect the sign of any zeros you encounter in your comparison.

-
-
Here's an in-exhaustive list of built-in methods and operators that might cause a distinction between -0 and +0 to manifest itself in your code:

-
-

- 
- (unary negation)

-

-
-

- 

- 
It's obvious that negating 0 produces -0. But the abstraction of an expression can cause -0 to creep in when you don't realize it. For example, consider:

-
- 
let stoppingForce = obj.mass * -obj.velocity

-
- 
If obj.velocity is 0 (or computes to 0), a -0 is introduced at that place and propogates out into stoppingForce.

- 

-

-
-

- 
Math.atan2

- 
Math.ceil

- 
Math.pow

- 
Math.round

-

-
-

- 
It's possible for a -0 to be introduced into an expression as a return value of these methods in some cases, even when no -0 exists as one of the parameters. E.g., using Math.pow to raise -Infinity to the power of any negative, odd exponent evaluates to -0. Refer to the documentation for the individual methods.

-

-
-

- 
Math.floor

- 
Math.max

- 
Math.min

- 
Math.sin

- 
Math.sqrt

- 
Math.tan

-

-
-

- 
It's possible to get a -0 return value out of these methods in some cases where a -0 exists as one of the parameters. E.g., Math.min(-0, +0) evalutes to -0. Refer to the documentation for the individual methods.

-

-
-

- 
~

- 
<<

- 
>>

- 
Each of these operators uses the ToInt32 algorithm internally. Since there is only one representation for 0 in the internal 32-bit integer type, -0 will not survive a round trip after an inverse operation. E.g., both Object.is(~~(-0), -0) and Object.is(-0 << 2 >> 2, -0) evaluate to false.

-

-
-
Relying on Object.is when the signedness of zeros is not taken into account can be hazardous. Of course, when the intent is to distinguish between -0 and +0, it does exactly what's desired.

-
-
Siehe auch

-
-
diff --git a/files/de/web/mathml/attribute/values/index.html b/files/de/web/mathml/attribute/values/index.html
new file mode 100644
index 0000000000..04a059b217
--- /dev/null
+++ b/files/de/web/mathml/attribute/values/index.html
@@ -0,0 +1,146 @@
+---
+title: Werte
+slug: Web/MathML/Attribute/Werte
+tags:
+  - MathML
+  - Referenz
+translation_of: Web/MathML/Attribute/Values
+---
+
Maßangaben

+
+
Für Angaben von Größen und Abständen in den Attributen der Darstellungselemente kennt MathML verschiedene Maßeinheiten und Konstanten:

+
+
Einheiten

+
+
+ 
+  
+   
+   
+  
+ 
+ 
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
EinheitBeschreibung
emEinheit, die sich auf die Schriftgröße bezieht. 1 em entspricht etwa der Breite des Großbuchstabens M. Siehe auch {{ Cssxref("font-size", "font-size") }}.
exEinheit, die sich auf die Schriftgröße bezieht. 1 ex entspricht etwa der Höhe des Kleinbuchstabens x. In vielen Schriftarten gilt auch 1ex ≈ 0.5em. Siehe auch {{ Cssxref("font-size", "font-size") }}.
pxPixel (Bildschirmpunkte)
inZoll (1 Zoll = 2,54 Zentimeter)
cmZentimeter
mmMillimeter
ptPunkt (1 Punkt = 1/72 Zoll)
pcPica (1 Pica = 12 Punkt)
%Prozent vom Standardwert.

+
+
Konstanten

+
+
+ 
+  
+   
+   
+  
+ 
+ 
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+ 
+  
+   
+  
+ 
+ 
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
KonstanteWert
veryverythinmathspace1/18em
verythinmathspace2/18em
thinmathspace3/18em
mediummathspace4/18em
thickmathspace5/18em
verythickmathspace6/18em
veryverythickmathspace7/18em
Negative Konstante, seit Gecko 7.0 {{ geckoRelease("7.0") }} ({{ bug(650530) }})
negativeveryverythinmathspace-1/18em
negativeverythinmathspace-2/18em
negativethinmathspace-3/18em
negativemediummathspace-4/18em
negativethickmathspace-5/18em
negativeverythickmathspace-6/18em
negativeveryverythickmathspace-7/18em

+
+
Anmerkung: Namedspace gilt in MathML 3 als veraltet (siehe Namedspace binding is deprecated) und wird seit Gecko 15.0 nicht mehr unterstützt {{ geckoRelease("15.0") }} (bug 673759).

+
+
Siehe auch

+
+
diff --git a/files/de/web/mathml/attribute/werte/index.html b/files/de/web/mathml/attribute/werte/index.html
deleted file mode 100644
index 04a059b217..0000000000
--- a/files/de/web/mathml/attribute/werte/index.html
+++ /dev/null
@@ -1,146 +0,0 @@
----
-title: Werte
-slug: Web/MathML/Attribute/Werte
-tags:
-  - MathML
-  - Referenz
-translation_of: Web/MathML/Attribute/Values
----
-
Maßangaben

-
-
Für Angaben von Größen und Abständen in den Attributen der Darstellungselemente kennt MathML verschiedene Maßeinheiten und Konstanten:

-
-
Einheiten

-
-
- 
-  
-   
-   
-  
- 
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
EinheitBeschreibung
emEinheit, die sich auf die Schriftgröße bezieht. 1 em entspricht etwa der Breite des Großbuchstabens M. Siehe auch {{ Cssxref("font-size", "font-size") }}.
exEinheit, die sich auf die Schriftgröße bezieht. 1 ex entspricht etwa der Höhe des Kleinbuchstabens x. In vielen Schriftarten gilt auch 1ex ≈ 0.5em. Siehe auch {{ Cssxref("font-size", "font-size") }}.
pxPixel (Bildschirmpunkte)
inZoll (1 Zoll = 2,54 Zentimeter)
cmZentimeter
mmMillimeter
ptPunkt (1 Punkt = 1/72 Zoll)
pcPica (1 Pica = 12 Punkt)
%Prozent vom Standardwert.

-
-
Konstanten

-
-
- 
-  
-   
-   
-  
- 
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
- 
-  
-   
-  
- 
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
KonstanteWert
veryverythinmathspace1/18em
verythinmathspace2/18em
thinmathspace3/18em
mediummathspace4/18em
thickmathspace5/18em
verythickmathspace6/18em
veryverythickmathspace7/18em
Negative Konstante, seit Gecko 7.0 {{ geckoRelease("7.0") }} ({{ bug(650530) }})
negativeveryverythinmathspace-1/18em
negativeverythinmathspace-2/18em
negativethinmathspace-3/18em
negativemediummathspace-4/18em
negativethickmathspace-5/18em
negativeverythickmathspace-6/18em
negativeveryverythickmathspace-7/18em

-
-
Anmerkung: Namedspace gilt in MathML 3 als veraltet (siehe Namedspace binding is deprecated) und wird seit Gecko 15.0 nicht mehr unterstützt {{ geckoRelease("15.0") }} (bug 673759).

-
-
Siehe auch

-
-
diff --git a/files/de/web/mathml/beispiele/index.html b/files/de/web/mathml/beispiele/index.html
deleted file mode 100644
index 4d387e8110..0000000000
--- a/files/de/web/mathml/beispiele/index.html
+++ /dev/null
@@ -1,19 +0,0 @@
----
-title: Beispiele
-slug: Web/MathML/Beispiele
-tags:
-  - Anfänger
-  - Beispiel
-  - MathML
-translation_of: Web/MathML/Examples
----
-
Hier gibt es einige Beispiele, die helfen können zu verstehen, wie mathematische Konzepte im Web-Umfeld dargestellt werden können.

-
-

- 
Satz des Pythagoras

- 
Einfaches Beispiel: der Beweis des Satzes des Pythagoras.

- 
Lösungsformel für die Quadratische Gleichung

- 
Zeigt die Ableitung der Quadratischen Gleichung.

- 
MathML Härte-Test

- 
Umfangreicher MathML-Test.

-

diff --git a/files/de/web/mathml/beispiele/mathml_satz_des_pythagoras/index.html b/files/de/web/mathml/beispiele/mathml_satz_des_pythagoras/index.html
deleted file mode 100644
index 3da8248ee6..0000000000
--- a/files/de/web/mathml/beispiele/mathml_satz_des_pythagoras/index.html
+++ /dev/null
@@ -1,85 +0,0 @@
----
-title: Beweis des Satzes des Pythagoras
-slug: Web/MathML/Beispiele/MathML_Satz_des_Pythagoras
-tags:
-  - Anfänger
-  - Beispiel
-  - MathML
-translation_of: Web/MathML/Examples/MathML_Pythagorean_Theorem
----
-
Wir erbringen einen Beweis für den Satz des Pythagoras für rechtwinklige Dreiecke:    a 2  +   b 2  =   c 2  

-
-
Ohne Angabe des display-Attributes wird die Gleichung inline, also im laufenden Text dargestellt. Die Einrückungen dienen der Übersichtlichkeit. Über die von HTML bekannten Regeln gibt es hier keine Besonderheiten.

-
-
<math>
-  <mrow>
-    <msup><mi> a </mi><mn>2</mn></msup>
-    <mo> + </mo>
-    <msup><mi> b </mi><mn>2</mn></msup>
-    <mo> = </mo>
-    <msup><mi> c </mi><mn>2</mn></msup>
-  </mrow>
-</math>
-

-
-
Wir zeigen dass das große Quadrat flächengleich dem inneren Quadrat (Kantenlänge: Hypothenuse) plus die Flächen der vier kleinen Dreiecke:        (   a   +   b   )    2      =     c 2  +   4   ⋅  (   1   2    a  b  )      a 2  +   2  a  b   +   b 2    =     c 2  +   2  a  b       a 2  +   b 2    =     c 2    

-
-
Die Lösung der Gleichung wird im Fluss der Seite als Block dargestellt und mtable mit passender Ausrichtung der Spalten sorgt dafür, dass die Gleichungen sauber untereinander gesetzt werden.

-
-
<math style="display: block;">
-  <mtable columnalign="right center left">
-    <mtr>
-      <mtd>
-        <msup>
-          <mrow> <mo> ( </mo> <mi> a </mi> <mo> + </mo> <mi> b </mi> <mo> ) </mo> </mrow> <mn> 2 </mn>
-        </msup>
-      </mtd>
-      <mtd>
-        <mo> = </mo>
-      </mtd>
-      <mtd>
-        <msup> <mi> c </mi> <mn> 2 </mn> </msup>
-        <mo> + </mo>
-        <mn> 4 </mn>
-        <mo> ⋅ </mo>
-        <mo> ( </mo> <mfrac> <mn> 1 </mn> <mn> 2 </mn> </mfrac> <mi> a </mi> <mi> b </mi> <mo> ) </mo>
-      </mtd>
-    </mtr>
-    <mtr>
-      <mtd>
-        <msup> <mi> a </mi> <mn> 2 </mn> </msup>
-        <mo> + </mo>
-        <mn> 2 </mn>
-        <mi> a </mi>
-        <mi> b </mi>
-        <mo> + </mo>
-        <msup> <mi> b </mi> <mn> 2 </mn> </msup>
-      </mtd>
-      <mtd>
-        <mo> = </mo>
-      </mtd>
-      <mtd>
-        <msup> <mi> c </mi> <mn> 2 </mn> </msup>
-        <mo> + </mo>
-        <mn> 2 </mn>
-        <mi> a </mi>
-        <mi> b </mi>
-      </mtd>
-    </mtr>
-    <mtr>
-      <mtd>
-        <msup> <mi> a </mi> <mn> 2 </mn> </msup>
-        <mo> + </mo>
-        <msup> <mi> b </mi> <mn> 2 </mn> </msup>
-      </mtd>
-      <mtd>
-        <mo> = </mo>
-      </mtd>
-      <mtd>
-        <msup> <mi> c </mi> <mn> 2 </mn> </msup>
-      </mtd>
-    </mtr>
-  </mtable>
-</math>

-
-
Siehe https://de.wikipedia.org/wiki/Satz_des_Pythagoras#Beweise

diff --git a/files/de/web/mathml/beispiele/quadratische_gleichung/index.html b/files/de/web/mathml/beispiele/quadratische_gleichung/index.html
deleted file mode 100644
index 29a4f32e8f..0000000000
--- a/files/de/web/mathml/beispiele/quadratische_gleichung/index.html
+++ /dev/null
@@ -1,106 +0,0 @@
----
-title: Lösungsformel für die Quadratische Gleichung
-slug: Web/MathML/Beispiele/Quadratische_Gleichung
-tags:
-  - Beispiel
-  - MathML
-translation_of: Web/MathML/Examples/Deriving_the_Quadratic_Formula
----
-
Lösungsformel der Quadratischen Gleichung (mit quadratischer Ergänzung)

-
-
         a ⁢  x 2   +  b ⁢ x   +  c  = 0         a ⁢  x 2   +  b ⁢ x   = - c         x 2   +    b  a  ⁤ x   =   -c  a     Division durch a           x 2   +    b  a  ⁤ x  +      b   2 a    2   =   - c ( 4 a )   a ( 4 a )    +     b 2    4  a 2      quadratische Ergänzung         ( x  +    b   2 a  ) ( x  +    b   2 a  ) =    b 2   -  4 a c   4  a 2       binomische Formel           ( x  +    b   2 a  )  2  =    b 2   -  4 a c   4  a 2               x  +    b   2 a   =     b 2   -  4 a c   4  a 2                x  =   -b   2 a  ±{C}     b 2   -  4 a c   4  a 2        Scheitelpunktberechnung          x  =   -  b ±{C}   b 2   -  4 a c   2 a         

-
-
Zur Erläuterung hier der Quelltext der letzten beiden Zeilen. mtable erleichtert die Anordnung mehrerer, zusammengehöriger Gleichungen und Erläuterungen untereinander.

-
-
<math>
-  <mtable columnalign="left">
-    <mtr>
-      <mtd>
-        <mrow>
-          <mrow>
-            <mrow>
-              <mi>x</mi>
-            </mrow>
-            <mo>=</mo>
-            <mfrac>
-              <mrow>
-                <mo>-</mo><mi>b</mi>
-              </mrow>
-              <mrow>
-                <mn>2</mn><mi>a</mi>
-              </mrow>
-            </mfrac>
-            <mo>±</mo>
-            <mrow>
-              <mo>{</mo><mi>C</mi><mo>}</mo>
-            </mrow>
-            <msqrt>
-              <mfrac>
-                <mrow>
-                  <msup><mi>b</mi><mn>2</mn></msup>
-                  <mo>-</mo>
-                  <mn>4</mn>
-                  <mi>a</mi>
-                  <mi>c</mi>
-                </mrow>
-                <mrow>
-                  <mn>4</mn>
-                  <msup><mi>a</mi><mn>2</mn></msup>
-                </mrow>
-              </mfrac>
-            </msqrt>
-          </mrow>
-          <mspace depth="1ex" height="0.5ex" width="2ex"></mspace>
-        </mrow>
-      </mtd>
-      <mtd>
-        <mrow>
-          <mtext mathcolor="red" mathsize="10pt">Scheitelpunktberechnung</mtext>
-        </mrow>
-      </mtd>
-    </mtr>
-    <mtr>
-      <mtd>
-        <mrow>
-          <mrow>
-            </mspace>
-            <mrow>
-              <mi>x</mi>
-            </mrow>
-            <mo>=</mo>
-            <mfrac>
-              <mrow>
-                <mo>-</mo>
-                <mi>b</mi>
-                <mo>±</mo>
-                <mrow>
-                  <mo>{</mo><mi>C</mi><mo>}</mo>
-                </mrow>
-                <msqrt>
-                  <msup><mi>b</mi><mn>2</mn></msup>
-                  <mo>-</mo>
-                  <mn>4</mn>
-                  <mi>a</mi>
-                  <mi>c</mi>
-                </msqrt>
-              </mrow>
-              <mrow>
-                <mn>2</mn>
-                <mi>a</mi>
-              </mrow>
-            </mfrac>
-          </mrow>
-          <mspace depth="1ex" height="0.5ex" width="2ex">
-          </mspace>
-          <mrow>
-            <mtext mathcolor="red" mathsize="10pt"></mtext>
-          </mrow>
-        </mrow>
-      </mtd>
-    </mtr>
-  </mtable>
-</math>

-
-
 

-
-
Siehe https://de.wikipedia.org/wiki/Quadratische_Gleichung#L.C3.B6sungen_der_quadratischen_Gleichung_mit_reellen_Koeffizienten

diff --git a/files/de/web/mathml/examples/deriving_the_quadratic_formula/index.html b/files/de/web/mathml/examples/deriving_the_quadratic_formula/index.html
new file mode 100644
index 0000000000..29a4f32e8f
--- /dev/null
+++ b/files/de/web/mathml/examples/deriving_the_quadratic_formula/index.html
@@ -0,0 +1,106 @@
+---
+title: Lösungsformel für die Quadratische Gleichung
+slug: Web/MathML/Beispiele/Quadratische_Gleichung
+tags:
+  - Beispiel
+  - MathML
+translation_of: Web/MathML/Examples/Deriving_the_Quadratic_Formula
+---
+
Lösungsformel der Quadratischen Gleichung (mit quadratischer Ergänzung)

+
+
         a ⁢  x 2   +  b ⁢ x   +  c  = 0         a ⁢  x 2   +  b ⁢ x   = - c         x 2   +    b  a  ⁤ x   =   -c  a     Division durch a           x 2   +    b  a  ⁤ x  +      b   2 a    2   =   - c ( 4 a )   a ( 4 a )    +     b 2    4  a 2      quadratische Ergänzung         ( x  +    b   2 a  ) ( x  +    b   2 a  ) =    b 2   -  4 a c   4  a 2       binomische Formel           ( x  +    b   2 a  )  2  =    b 2   -  4 a c   4  a 2               x  +    b   2 a   =     b 2   -  4 a c   4  a 2                x  =   -b   2 a  ±{C}     b 2   -  4 a c   4  a 2        Scheitelpunktberechnung          x  =   -  b ±{C}   b 2   -  4 a c   2 a         

+
+
Zur Erläuterung hier der Quelltext der letzten beiden Zeilen. mtable erleichtert die Anordnung mehrerer, zusammengehöriger Gleichungen und Erläuterungen untereinander.

+
+
<math>
+  <mtable columnalign="left">
+    <mtr>
+      <mtd>
+        <mrow>
+          <mrow>
+            <mrow>
+              <mi>x</mi>
+            </mrow>
+            <mo>=</mo>
+            <mfrac>
+              <mrow>
+                <mo>-</mo><mi>b</mi>
+              </mrow>
+              <mrow>
+                <mn>2</mn><mi>a</mi>
+              </mrow>
+            </mfrac>
+            <mo>±</mo>
+            <mrow>
+              <mo>{</mo><mi>C</mi><mo>}</mo>
+            </mrow>
+            <msqrt>
+              <mfrac>
+                <mrow>
+                  <msup><mi>b</mi><mn>2</mn></msup>
+                  <mo>-</mo>
+                  <mn>4</mn>
+                  <mi>a</mi>
+                  <mi>c</mi>
+                </mrow>
+                <mrow>
+                  <mn>4</mn>
+                  <msup><mi>a</mi><mn>2</mn></msup>
+                </mrow>
+              </mfrac>
+            </msqrt>
+          </mrow>
+          <mspace depth="1ex" height="0.5ex" width="2ex"></mspace>
+        </mrow>
+      </mtd>
+      <mtd>
+        <mrow>
+          <mtext mathcolor="red" mathsize="10pt">Scheitelpunktberechnung</mtext>
+        </mrow>
+      </mtd>
+    </mtr>
+    <mtr>
+      <mtd>
+        <mrow>
+          <mrow>
+            </mspace>
+            <mrow>
+              <mi>x</mi>
+            </mrow>
+            <mo>=</mo>
+            <mfrac>
+              <mrow>
+                <mo>-</mo>
+                <mi>b</mi>
+                <mo>±</mo>
+                <mrow>
+                  <mo>{</mo><mi>C</mi><mo>}</mo>
+                </mrow>
+                <msqrt>
+                  <msup><mi>b</mi><mn>2</mn></msup>
+                  <mo>-</mo>
+                  <mn>4</mn>
+                  <mi>a</mi>
+                  <mi>c</mi>
+                </msqrt>
+              </mrow>
+              <mrow>
+                <mn>2</mn>
+                <mi>a</mi>
+              </mrow>
+            </mfrac>
+          </mrow>
+          <mspace depth="1ex" height="0.5ex" width="2ex">
+          </mspace>
+          <mrow>
+            <mtext mathcolor="red" mathsize="10pt"></mtext>
+          </mrow>
+        </mrow>
+      </mtd>
+    </mtr>
+  </mtable>
+</math>

+
+
 

+
+
Siehe https://de.wikipedia.org/wiki/Quadratische_Gleichung#L.C3.B6sungen_der_quadratischen_Gleichung_mit_reellen_Koeffizienten

diff --git a/files/de/web/mathml/examples/index.html b/files/de/web/mathml/examples/index.html
new file mode 100644
index 0000000000..4d387e8110
--- /dev/null
+++ b/files/de/web/mathml/examples/index.html
@@ -0,0 +1,19 @@
+---
+title: Beispiele
+slug: Web/MathML/Beispiele
+tags:
+  - Anfänger
+  - Beispiel
+  - MathML
+translation_of: Web/MathML/Examples
+---
+
Hier gibt es einige Beispiele, die helfen können zu verstehen, wie mathematische Konzepte im Web-Umfeld dargestellt werden können.

+
+

+ 
Satz des Pythagoras

+ 
Einfaches Beispiel: der Beweis des Satzes des Pythagoras.

+ 
Lösungsformel für die Quadratische Gleichung

+ 
Zeigt die Ableitung der Quadratischen Gleichung.

+ 
MathML Härte-Test

+ 
Umfangreicher MathML-Test.

+

diff --git a/files/de/web/mathml/examples/mathml_pythagorean_theorem/index.html b/files/de/web/mathml/examples/mathml_pythagorean_theorem/index.html
new file mode 100644
index 0000000000..3da8248ee6
--- /dev/null
+++ b/files/de/web/mathml/examples/mathml_pythagorean_theorem/index.html
@@ -0,0 +1,85 @@
+---
+title: Beweis des Satzes des Pythagoras
+slug: Web/MathML/Beispiele/MathML_Satz_des_Pythagoras
+tags:
+  - Anfänger
+  - Beispiel
+  - MathML
+translation_of: Web/MathML/Examples/MathML_Pythagorean_Theorem
+---
+
Wir erbringen einen Beweis für den Satz des Pythagoras für rechtwinklige Dreiecke:    a 2  +   b 2  =   c 2  

+
+
Ohne Angabe des display-Attributes wird die Gleichung inline, also im laufenden Text dargestellt. Die Einrückungen dienen der Übersichtlichkeit. Über die von HTML bekannten Regeln gibt es hier keine Besonderheiten.

+
+
<math>
+  <mrow>
+    <msup><mi> a </mi><mn>2</mn></msup>
+    <mo> + </mo>
+    <msup><mi> b </mi><mn>2</mn></msup>
+    <mo> = </mo>
+    <msup><mi> c </mi><mn>2</mn></msup>
+  </mrow>
+</math>
+

+
+
Wir zeigen dass das große Quadrat flächengleich dem inneren Quadrat (Kantenlänge: Hypothenuse) plus die Flächen der vier kleinen Dreiecke:        (   a   +   b   )    2      =     c 2  +   4   ⋅  (   1   2    a  b  )      a 2  +   2  a  b   +   b 2    =     c 2  +   2  a  b       a 2  +   b 2    =     c 2    

+
+
Die Lösung der Gleichung wird im Fluss der Seite als Block dargestellt und mtable mit passender Ausrichtung der Spalten sorgt dafür, dass die Gleichungen sauber untereinander gesetzt werden.

+
+
<math style="display: block;">
+  <mtable columnalign="right center left">
+    <mtr>
+      <mtd>
+        <msup>
+          <mrow> <mo> ( </mo> <mi> a </mi> <mo> + </mo> <mi> b </mi> <mo> ) </mo> </mrow> <mn> 2 </mn>
+        </msup>
+      </mtd>
+      <mtd>
+        <mo> = </mo>
+      </mtd>
+      <mtd>
+        <msup> <mi> c </mi> <mn> 2 </mn> </msup>
+        <mo> + </mo>
+        <mn> 4 </mn>
+        <mo> ⋅ </mo>
+        <mo> ( </mo> <mfrac> <mn> 1 </mn> <mn> 2 </mn> </mfrac> <mi> a </mi> <mi> b </mi> <mo> ) </mo>
+      </mtd>
+    </mtr>
+    <mtr>
+      <mtd>
+        <msup> <mi> a </mi> <mn> 2 </mn> </msup>
+        <mo> + </mo>
+        <mn> 2 </mn>
+        <mi> a </mi>
+        <mi> b </mi>
+        <mo> + </mo>
+        <msup> <mi> b </mi> <mn> 2 </mn> </msup>
+      </mtd>
+      <mtd>
+        <mo> = </mo>
+      </mtd>
+      <mtd>
+        <msup> <mi> c </mi> <mn> 2 </mn> </msup>
+        <mo> + </mo>
+        <mn> 2 </mn>
+        <mi> a </mi>
+        <mi> b </mi>
+      </mtd>
+    </mtr>
+    <mtr>
+      <mtd>
+        <msup> <mi> a </mi> <mn> 2 </mn> </msup>
+        <mo> + </mo>
+        <msup> <mi> b </mi> <mn> 2 </mn> </msup>
+      </mtd>
+      <mtd>
+        <mo> = </mo>
+      </mtd>
+      <mtd>
+        <msup> <mi> c </mi> <mn> 2 </mn> </msup>
+      </mtd>
+    </mtr>
+  </mtable>
+</math>

+
+
Siehe https://de.wikipedia.org/wiki/Satz_des_Pythagoras#Beweise

diff --git a/files/de/web/opensearch/index.html b/files/de/web/opensearch/index.html
new file mode 100644
index 0000000000..154f66b01c
--- /dev/null
+++ b/files/de/web/opensearch/index.html
@@ -0,0 +1,161 @@
+---
+title: OpenSearch Plugin für Firefox erstellen
+slug: OpenSearch_Plugin_für_Firefox_erstellen
+tags:
+  - Add-ons
+  - OpenSearch
+translation_of: Web/OpenSearch
+---
+
OpenSearch

+
{{ fx_minversion_header(2) }}

+
Firefox 2 unterstützt das OpenSearch(engl.) Beschreibungsformat für Such-Plugins. Plugins, die OpenSearch description syntax(engl.) verwenden, sind kompatibel mit IE 7 und Firefox. Daher sind sie das empfohlene Format für das Web.

+
Firefox unterstützt zudem zusätzliche Suchoptionen, die nicht im OpenSearch description syntax(engl.) genannt werden, wie zum Beispiel Suchvorschläge und das SearchForm Element. Dieser Artikel bezieht sich auf die Erstellung von OpenSearch-kompatiblen Such-Plugins, die die zusätzlichen Firefox-spezifischen Funktionen unterstützen.

+
OpenSearch Beschreibungsdateien können auch automatisch erkannt und von Webseiten installiert werden.

+
OpenSearch Beschreibungsdatei

+
Die XML Datei, die eine Suchmaschine beschreibt, ist sehr einfach aufgebaut. Eine Vorlage findet sich unterhalb. Die fett markierten Abschnitte müssen angepasst werden, je nach dem was auf Ihre Suchmaschine zutrifft.

+
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/"
+                       xmlns:moz="http://www.mozilla.org/2006/browser/search/">
+<ShortName>engineName</ShortName>
+<Description>engineDescription</Description>
+<InputEncoding>inputEncoding</InputEncoding>
+<Image width="16" height="16" type="image/x-icon">data:image/x-icon;base64,imageData</Image>
+<Url type="text/html" method="method" template="searchURL">
+  <Param name="paramName1" value="paramValue1"/>
+  ...
+  <Param name="paramNameN" value="paramValueN"/>
+</Url>
+<Url type="application/x-suggestions+json" template="suggestionURL"/>
+<moz:SearchForm>searchFormURL</moz:SearchForm>
+</OpenSearchDescription>
+

+

+ 

+  ShortName

+ 

+  Ein kurzer Name für Ihre Suchmaschine.

+ 

+  Einschränkungen: Der Wert muss 16 oder weniger Zeichen enthalten und darf kein HTML oder sonstiges Markup enthalten.

+

+

+ 

+  Description

+ 

+  Eine kurze Beschreibung der Suchmaschine.

+ 

+  Einschränkungen: Der Wert muss 1024 oder weniger Zeichen enthalten und darf kein HTML oder sonstiges Markup enthalten.

+

+

+ 

+  InputEncoding

+ 

+  Das Encoding, welches für die eingegeben Daten verwendet werden soll. Beispiel: <InputEncoding>UTF-8</InputEncoding>.

+

+

+ 

+  Image

+ 

+  URI zu einem Icon, welches die Suchmaschine repräsentiert. Nach Möglichkeit sollten Suchmaschinen ein 16x16 großes Bild des Typs "image/x-icon" und ein 64x64 großes Bild des Typs "image/jpeg" oder "image/png" bereitstellten. Der Link kann auch das data: URI scheme verwenden. Ein hilfreiches Tool zum Erstellen der data URIs lässt sich hier finden: The data: URI kitchen.
+  
<Image height="16" width="16" type="image/x-icon">http://example.com/favicon.ico</Image>
+  Oder
+<Image height="16" width="16">data:image/x-icon;base64,AAABAAEAEBAAA ... DAAA=</Image>
+

+  Firefox speichert das Icon als eine base64 data: URI im Cache (Such-Plugins werden im "searchplugins" Ordner im Profil gespeichert). http: URIs werden auf data: URIs umgewandelt, wenn diese vorhanden sind.

+

+

+ 

+  Url

+ 

+  Gibt die URL oder die URLs an, die zur Suche verwendet werden sollen. Das method Attribut gibt an, ob eine GET oder POST Anfrage verwendet wird. Das template Attribut gibt die Basis-URL für die Suchanfrage an.

+ 

+  

+   Hinweis: Der Internet Explorer 7 unterstützt keine POST Anfragen.

+ 

+

+

+ 

+  Es gibt zwei URL-Typen, die Firefox unterstützt:

+

+
    
+ 
  • type="text/html" wird benutzt, um die URL für die Suchanfrage selbst festzulegen.
    • 
+ 
  • type="application/x-suggestions+json" wird benutzt, um die URL anzugeben, die die Suchvorschläge enthält.
    • 
+

+

+ 

+  Für jeden URL-Typ können Sie {searchTerms} einsetzen, um dort den Suchausdruck des Benutzers einzufügen. Andere unterstützte dynamische Suchparameter sind unter OpenSearch 1.1 parameters beschrieben.

+

+

+ 

+  Für Suchvorschläge wird die festgelegte Vorlage verwendet, um eine Liste im JavaScript Object Notation (JSON) Format zu erhalten. Für weitere Details zur Implementierung von Suchvorschlägen, siehe Suchvorschläge in Such-Plugins unterstützen.

+

+
Image:SearchSuggestionSample.png

+

+ 

+  Param

+ 

+  Die Parameter, die durch die Suchanfrage laufen müssen, als Schlüssel/Wert Paare. Wenn Werte festgelegt werden, können Sie {searchTerms} verwenden, um den Suchausdruck vom Benutzer in der Suchleiste einzufügen.

+ 

+  

+   Hinweis: Der Internet Explorer 7 unterstützt dieses Element nicht.

+ 

+

+

+ 

+  SearchForm

+ 

+  Die URL zur der Suchseite auf der Seite, für die das Plugin erstellt wurde. Das bietet einen Weg für den Benutzer an, die Seite direkt zu besuchen, auf der er suchen möchte.

+ 

+  

+   Hinweis: Da dieses Element Firefox-spezifisch ist und nicht Teil der OpenSearch Spezifikation ist, verwenden wir das "moz:" XML Namespace Präfix im Beispiel oben, um sicher zu stellen, dass andere Browser dieses Element ignorieren.

+ 

+

+
Automatische Erkennung von Such-Plugins

+
Eine Webseite, die ein Such-Plugin anbietet, kann dieses bemerkbar machen, sodass Firefox Benutzer dieses einfach herunterladen und installieren können.

+
Um die automatisch Erkennung zu unterstützen, müssen Sie einfach einen Link im <head> Ihrer Webseite hinzufügen:

+
<link rel="search" type="application/opensearchdescription+xml" title="searchTitle" href="pluginURL">
+

+
Ersetzen Sie die kursiven Einträge, wie unten erklärt:

+

+ 

+  searchTitle

+ 

+  Der Name der Suche, etwa "MDC Suche" oder "Yahoo! Suche". Dieser Wert sollte mit dem ShortName Ihres Plugins übereinstimmen.

+

+

+ 

+  pluginURL

+ 

+  Die URL zum XML Such-Plugin, von welchem der Browser das Plugin herunterladen kann.

+

+
Wenn Ihre Seite mehrere Such-Plugins anbietet, können Sie diese Zeile für Zeile angeben. Zum Beispiel:

+
<link rel="search" type="application/opensearchdescription+xml" title="MySite: By Author" href="http://www.mysite.com/mysiteauthor.xml">
+<link rel="search" type="application/opensearchdescription+xml" title="MySite: By Title" href="http://www.mysite.com/mysitetitle.xml">
+

+
Dadurch bietet Ihre Seite sowohl die Such nach Autor und nach Titel als separate Möglichkeiten an.

+
Automatische Aktualisierungen für OpenSearch Plugins bereitstellen

+
{{ fx_minversion_note(3.5, "Dieser Abschnitt beschreibt Funktionen, die in Firefox 3.5 eingeführt wurden.") }}

+
Ab Firefox 3.5 können OpenSearch Plugins automatsch aktualisiert werden. Um dies zu unterstützen, muss ein zusätzliches Url Element des Typs "application/opensearchdescription+xml" eingefügt werden. Das rel Attribut muss "self" lauten und das template Attribut muss die URL des OpenSearch Dokuments sein, welches automatisch aktualisiert werden muss.

+
Zum Beispiel:

+
<Url type="application/opensearchdescription+xml"
+     rel="self"
+     template="http://www.foo.com/mysearchdescription.xml" />
+

+
Tipps zur Problemlösung

+
Falls sich ein Fehler in Ihr Such-Plugin XML eingeschlichen hat, können Fehler beim Hinzufügen von Such-Plugin auftreten. Die Fehlermeldungen sind meist nicht sehr hilfreich, die folgenden Tipps können Ihnen aber vielleicht helfen das Problem zu finden.

+
    
+ 
  • Ihr Server sollte OpenSearch Plugins mit dem MIME type application/opensearchdescription+xml ausliefern.
    • 
+ 
  • Stellen Sie sicher, dass die XML Datei des Plugins wohlgeformt ist. Das können Sie überprüfen, indem Sie die Datei direkt in Firefox aufrufen. Ampersands in der template URL müssen mit &amp; maskiert werden und Tags müssen mit einem Slash oder einem schließenden Tag geschlossen werden.
    • 
+ 
  • Das xmlns Attribut ist wichtig, ohne diesem taucht die Fehlermeldung auf: "Firefox could not download the search plugin from: (URL)".
    • 
+ 
  • Achten Sie darauf, dass Sie eine text/html URL einfügen müssen — Such-Plugins mit Atom oder RSS URL Typen (was gültig wäre, Firefox aber nicht unterstützt) werden ebenfalls zum Fehler "could not download the search plugin" führen.
    • 
+ 
  • Favicons aus einer entfernten Quelle dürfen nicht größer als 10KB sein (siehe {{ Bug(361923) }}).
    • 
+

+
Zusätzlich bietet das Such-Plugin einen Log-Mechanismus, der von Plugin Entwicklern verwendet werden kann. Verwenden Sie about:config um die Einstellung 'browser.search.log' auf true zu setzen. Logging Informationen werden in Firefox's Fehlerkonsole (Extras->Fehlerkonsole) erscheinen, wenn Such-Plugins hinzugefügt werden.

+
Referenzmaterial

+
+
{{ languages( { "en": "en/Creating_OpenSearch_plugins_for_Firefox", "ca": "ca/Creaci\u00f3_de_connectors_OpenSearch_per_al_Firefox", "fr": "fr/Cr\u00e9ation_de_plugins_OpenSearch_pour_Firefox", "ja": "ja/Creating_OpenSearch_plugins_for_Firefox", "pl": "pl/Tworzenie_wtyczek_OpenSearch_dla_Firefoksa", "pt": "pt/Criando_plugins_OpenSearch_para_o_Firefox" } ) }}

diff --git a/files/de/web/security/public_key_pinning/index.html b/files/de/web/security/public_key_pinning/index.html
deleted file mode 100644
index 337b9b600e..0000000000
--- a/files/de/web/security/public_key_pinning/index.html
+++ /dev/null
@@ -1,147 +0,0 @@
----
-title: HTTP Public Key Pinning (HPKP)
-slug: Web/Security/Public_Key_Pinning
-tags:
-  - Anleitung
-  - HPKP
-  - HTTP
-  - Sicherheit
-  - Webentwicklung
-translation_of: Web/HTTP/Public_Key_Pinning
----
-
{{HTTPSidebar}}

-
-
Die Public Key Pinning Erweiterung für HTTP ({{Glossary("HPKP")}}) ist ein Sicherheitsfeature, das einem Webclient mitteilt, einen spezifischen kryptographischen Schlüssel mit einem bestimmten Webserver in Verbindung zu bringen um {{Glossary("MITM")}} mit gefälschten Zertifikaten zu vermeiden.

-
-
Um die Echtheit des öffentlichen Schlüssels eines Servers in {{Glossary("TLS")}}-Sessions sicherzustellen, wird dieser in ein X.509-Zertifikat gepackt, welches meistens von einer Zertifizierungsstelle ({{GLossary("CA")}}) signiert wird. Webclients wie Browser vertrauen vielen Zertifizierungsstellen, die Zertifikate für beliebige Domainnamen erstellen können. Wenn ein Angreifer dazu in der Lage ist, eine einzelne Zertifizierungsstelle zu infiltrieren, kann er MITM-Angriffe auf verschiedene TLS-Verbindungen starten. HPKP kann diese Gefahr für das {{Glossary("HTTPS")}}-Protokoll dadurch umgehen, dass dem Client mitgeteilt wird, welcher öffentliche Schlüssel zu einem bestimmten Webserver gehört.

-
-
HPKP is ein Trust on First Use ({{Glossary("TOFU")}}) ("Bei der ersten Benutzung vertrauen") Verfahren. Beim ersten Webseitenbesuch übermittelt der Server einen HTTP-Header um dem Client zu zeigen, welche öffentliche Schlüssel zu ihm gehören. Der Client speichert diese Information für eine angegebene Zeit. Wenn der Client die Webseite erneut besucht, erwartet er, dass mindestens ein Zertifikat der Zertifikatkette einen öffentlichen Schlüssel enthält, dessen Fingerprint dem Client bereits per HPKP bekannt ist. Wenn der Server einen unbekannten öffentlichen Schlüssel liefert, sollte der Client einen Fehler anzeigen.

-
-
Firefox (und Chrome) deaktivieren die Pin Validierung für Pinned Hosts mit Zertifikatketten, die bei einem benutzerdefinierten trust anchor terminieren (anstatt bei einem eingebauten trust anchor). Dies bedeutet, dass alle Pinning-Nichteinhaltungen für Nutzer ignoriert werden, welche ein Root-Zertifikat importiert haben.

-
-
HPKP aktivieren

-
-
Dieses Feature kann einfach aktiviert werden indem ein {{HTTPHeader("Public-Key-Pins")}} HTTP-Header beim Aufruf der Seite über HTTPS zurückgegeben wird:

-
-
Public-Key-Pins: pin-sha256="base64=="; max-age=expireTime [; includeSubdomains][; report-uri="reportURI"]
-

-
-

- 
pin-sha256

- 
Der Parameter beinhaltet einen Base64 codierten Subject Public Key Information ({{Glossary("SPKI")}}) Fingerprint. Es ist auch möglich mehrere Pins zu verschiedenen öffentlichen Schlüsseln zu definieren. Einige Browser werden hier zukünftig neben SHA-256 evtl. weitere Hash-Algorithmen erlauben. Weiter unten ist beschrieben, wie diese Informationen entweder aus dem Zertifikat oder der Schlüsseldatei extrahiert werden können.

- 
max-age

- 
Die Zeit (in Sekunden) in Sekunden, die ein Browser sich merken soll, dass auf diese Seite nur bei Benutzung eines der öffentlichen Schlüssel zugegriffen werden darf.

- 
includeSubdomains {{ optional_inline() }}

- 
Wenn dieser optionale Parameter angegeben wird, wird die Regel auch auf alle Subdomains der Site angewandt.

- 
report-uri {{ optional_inline() }}

- 
Wenn dieser optionale Parameter angegeben wird, werden Pinvalidierungsfehlschläge an die angegebene URL gemeldet.

-

-
-

-
Anmerkung: Die aktuelle Spezifikation verlangt die Aufnahme eines zweiten Pins für einen Backup-Schlüssel, der noch nicht in der Produktion verwendet wird. Dies ermöglicht es, den öffentlichen Schlüssel des Servers zu ändern, ohne die Zugänglichkeit für Clients zu beeinträchtigen, die die Pins bereits bemerkt haben. Dies ist z.B. dann wichtig, wenn der alte Schlüssel beschädigt wird.

-

-
-
Base64-enkodierte Public Key Informationen extrahieren

-
-

-
Note: Während das folgende Beispiel zeigt, wie man einen Pin auf ein Serverzertifikat setzt, wird empfohlen, den Pin auf das Zwischenzertifikat der CA zu setzen, die das Serverzertifikat ausgestellt hat, um Verlängerungen und Rotationen von Zertifikaten zu erleichtern.

-

-
-
First you need to extract the public key information from your certificate or key file and encode them using Base64.

-
-
The following commands will help you extract the Base64 encoded information from a key file, a certificate signing request, or a certificate.

-
-
openssl rsa -in my-key-file.key -outform der -pubout | openssl dgst -sha256 -binary | openssl enc -base64

-
-
openssl req -in my-signing-request.csr -pubkey -noout | openssl rsa -pubin -outform der | openssl dgst -sha256 -binary | openssl enc -base64

-
-
openssl x509 -in my-certificate.crt -pubkey -noout | openssl rsa -pubin -outform der | openssl dgst -sha256 -binary | openssl enc -base64

-
-
The following command will extract the Base64 encoded information for a website.

-
-
openssl s_client -connect www.example.com:443 | openssl x509 -pubkey -noout | openssl rsa -pubin -outform der | openssl dgst -sha256 -binary | openssl enc -base64

-
-
Beispiel für ein HPKP-Header

-
-
Public-Key-Pins: pin-sha256="cUPcTAZWKaASuYWhhneDttWpY3oBAkE3h2+soZS7sWs="; pin-sha256="M8HztCzM3elUxkcjR2S5P4hhyBNf6lHkmjAHKhpGPWE="; max-age=5184000; includeSubdomains; report-uri="https://www.example.net/hpkp-report"

-
-
In this example, pin-sha256="cUPcTAZWKaASuYWhhneDttWpY3oBAkE3h2+soZS7sWs=" pins the server's public key used in production. The second pin declaration pin-sha256="M8HztCzM3elUxkcjR2S5P4hhyBNf6lHkmjAHKhpGPWE=" also pins the backup key. max-age=5184000 tells the client to store this information for two month, which is a reasonable time limit according to the IETF RFC. This key pinning is also valid for all subdomains, which is told by the includeSubdomains declaration. Finally, report-uri="https://www.example.net/hpkp-report" explains where to report pin validation failures.

-
-
Setting up your webserver to include the HPKP header

-
-
The concrete steps necessary to deliver the HPKP header depend on the web server you use.

-
-

-
Note: These examples use a max-age of two months and include all subdomains. It is advised to verify that this setup will work for your server.

-

-
-

-
HPKP hat das Potential Nutzer für eine lange Zeit auszusperren, wenn es inkorrekt genutzt wird! Die Benutzung von Backup-Zertifikaten und/oder das Pinnen der Zertifizierungsstelle wird dringend empfohlen.

-

-
-
Apache

-
-
HPKP kann im Apache Webserver beispielsweise mit der folgenden Konfiguration aktiviert werden. Die Parameter müssen dann nur noch auf das Zielsystem angepasst werden. Das Apache Modul mod_headers wird benötigt.

-
-
Header always set Public-Key-Pins "pin-sha256=\"base64+primary==\"; pin-sha256=\"base64+backup==\"; max-age=5184000; includeSubDomains"
-

-
-
Nginx

-
-
Adding the following line and inserting the appropriate pin-sha256="..." values will enable HPKP on your nginx. This requires the ngx_http_headers_module.

-
-
add_header Public-Key-Pins 'pin-sha256="base64+primary=="; pin-sha256="base64+backup=="; max-age=5184000; includeSubDomains';

-
-
Lighttpd

-
-
The following line with your relevant key information (pin-sha256="..." fields) will enable HPKP on lighttpd.

-
-
setenv.add-response-header  = ( "Public-Key-Pins" => "pin-sha256=\"base64+primary==\"; pin-sha256=\"base64+backup==\"; max-age=5184000; includeSubDomains")

-
-
Note: This requires the mod_setenv server.module loaded which can be included by the following if not already loaded.

-
-
server.modules += ( "mod_setenv" )

-
-
IIS

-
-
Add the following line to the Web.config file to send the Public-Key-Pins header:

-
-
<system.webServer>
-  ...
-
-  <httpProtocol>
-    <customHeaders>
-      <add name="Public-Key-Pins" value="pin-sha256=&quot;base64+primary==&quot;; pin-sha256=&quot;base64+backup==&quot;; max-age=5184000; includeSubDomains" />
-    </customHeaders>
-  </httpProtocol>
-
-  ...
-</system.webServer>

-
-
Browserkompatibilität

-
-
-
-
{{Compat("http.headers.Public-Key-Pins")}}

-
-
Spezifikationen

-
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
SpezifikationTitel
{{RFC("7469", "Public-Key-Pins", "2.1")}}Public Key Pinning Erweiterung für HTTP

-
-
Siehe auch

-
-
    
- 
  • {{HTTPHeader("Public-Key-Pins")}}
    • 
- 
  • {{HTTPHeader("Public-Key-Pins-Report-Only")}}
    • 
-

diff --git "a/files/de/web/svg/tutorial/einf\303\274hrung/index.html" "b/files/de/web/svg/tutorial/einf\303\274hrung/index.html"
deleted file mode 100644
index 9e4250ed20..0000000000
--- "a/files/de/web/svg/tutorial/einf\303\274hrung/index.html"
+++ /dev/null
@@ -1,21 +0,0 @@
----
-title: Einführung
-slug: Web/SVG/Tutorial/Einführung
-tags:
-  - SVG
-  - 'SVG:Tutorial'
-translation_of: Web/SVG/Tutorial/Introduction
----
-
{{ PreviousNext("SVG/Tutorial", "SVG/Tutorial/Erste_Schritte") }}

-

-
SVG ist eine XML-Sprache, vergleichbar mit XHTML, die zum zeichnen von Grafiken benutzt werden kann (wie die Grafik auf der rechten Seite). Die Bilder können entweder mit den benötigten Linien und Formen, oder durch Veränderungen an bereits bestehende Rasterbildern erstellt werden. Eine Kombinationen aus beiden Möglichkeiten ist auch möglich. Das Bild und deren Komponenten können auch umgewandelt, zusammengestellt oder gefiltert werden, um das Aussehen komplett zu verändern.

-
SVG erschien im Jahre 1999 nachdem mehrere Formate zum W3C eingeschickt wurden und gescheitert sind, um ratifiziert zu werden. Während die Spezifikationen im Laufe der Zeit erweitert wurden, sind die Browserimplementationen nur langsam fortgeschritten, und so gibt es nur wenige SVG-Inhalte, die heutzutage im Web genutzt werden (2009). Die Implementationen werden nur langsam weiterentwickelt, während HTML:Canvas oder Adobe Flash sehr schnell weiterentwickelt werden und dadurch schon sehr ausgereift sind. SVG bietet Vorteile gegenüber beiden Technologien: Eine DOM Schnittstelle ist verfügbar und es wird keine Drittanbieter-Erweiterung für den Browser benötigt, um die Inhalte darzustellen. Ob man SVG verwendet oder nicht, hängt häufig davon ab, wofür es verwendet werden soll.

-
Vor dem Beginn

-
Es gibt eine Reihe von Grafikprogramme, wie zum Beispiel Inkscape, welche kostenlos sind und SVG als natives Dateiformat benutzen. Dieses Tutorial hält sich jedoch an einen Texteditor ihrer Wahl, um SVG Dateien zu erstellen. Die Idee ist, SVG als solches zu verstehen und das geht am Besten, in dem man selbst Hand anlegt, um ein bisschen Markup zu schreiben. Nicht alle SVG Viewer sind gleich und daher ist die Wahrscheinlichkeit groß, dass etwas, was für eine bestimmte Anwendung geschrieben wurde, nicht exakt gleich in einem anderem Programm aussieht. Das liegt einfach an der unterschiedlichen Unterstützung der SVG Spezifikation oder anderen Technologien, die ebenfalls verwendet werden (wie JavaScript oder CSS).

-
SVG wird nicht in allen modernen Browsern vollständig unterstützt (obwohl es nach und nach kommt). Eine ziemlich vollständige Liste von SVG Viewern findet sich im SVG Wiki. Firefox unterstützt einige SVG Inhalte seit Version 1.5 und mit jedem Release kommt ein Stück dazu. Mit diesem Tutorial kann das MDC vielleicht einigen Entwicklern helfen, auf dem neustem Stand, im Vergleich der Gecko Implementation mit anderen Implementationen, zu bleiben.

-
Bevor man anfängt sich mit SVG auseinander zu setzen, sollte ein grundlegendes Verständnis von XML oder anderen Auszeichnungssprachen wie HTML vorhanden sein. Falls Sie nicht so ganz mit XML vertraut sein sollten, sind hier ein paar Richtlinien an die man sich halten sollte:

-
     
  • SVG Elemente und Attribute sollten alle so geschrieben werden, wie sie hier gezeigt werden, da XML case-sensitiv ist. (im Gegensatz zu HTML)
    •  
  • Atrributwerte müssen in SVG in Anführungszeichen gesetzt werden, auch wenn sie Zahlen sind.
    • 
-

-
SVG ist eine große Spezifikation. Dieses Tutorial versucht die Grundlagen zu behandeln. Wenn Sie erstmal mit den Grundlagen vertraut sind, sollten Sie in der Lage sein die Elementreferenz und die Schnittstellenreferenz zu verwenden, um alles Weitere zu finden.

-
{{ PreviousNext("SVG/Tutorial", "SVG/Tutorial/Erste_Schritte") }}

-
{{ languages( { "en": "en/SVG/Tutorial/Introduction", "fr": "fr/SVG/Tutoriel/Introduction", "ja": "ja/SVG/Tutorial/Introduction" } ) }}

diff --git a/files/de/web/svg/tutorial/introduction/index.html b/files/de/web/svg/tutorial/introduction/index.html
new file mode 100644
index 0000000000..9e4250ed20
--- /dev/null
+++ b/files/de/web/svg/tutorial/introduction/index.html
@@ -0,0 +1,21 @@
+---
+title: Einführung
+slug: Web/SVG/Tutorial/Einführung
+tags:
+  - SVG
+  - 'SVG:Tutorial'
+translation_of: Web/SVG/Tutorial/Introduction
+---
+
{{ PreviousNext("SVG/Tutorial", "SVG/Tutorial/Erste_Schritte") }}

+

+
SVG ist eine XML-Sprache, vergleichbar mit XHTML, die zum zeichnen von Grafiken benutzt werden kann (wie die Grafik auf der rechten Seite). Die Bilder können entweder mit den benötigten Linien und Formen, oder durch Veränderungen an bereits bestehende Rasterbildern erstellt werden. Eine Kombinationen aus beiden Möglichkeiten ist auch möglich. Das Bild und deren Komponenten können auch umgewandelt, zusammengestellt oder gefiltert werden, um das Aussehen komplett zu verändern.

+
SVG erschien im Jahre 1999 nachdem mehrere Formate zum W3C eingeschickt wurden und gescheitert sind, um ratifiziert zu werden. Während die Spezifikationen im Laufe der Zeit erweitert wurden, sind die Browserimplementationen nur langsam fortgeschritten, und so gibt es nur wenige SVG-Inhalte, die heutzutage im Web genutzt werden (2009). Die Implementationen werden nur langsam weiterentwickelt, während HTML:Canvas oder Adobe Flash sehr schnell weiterentwickelt werden und dadurch schon sehr ausgereift sind. SVG bietet Vorteile gegenüber beiden Technologien: Eine DOM Schnittstelle ist verfügbar und es wird keine Drittanbieter-Erweiterung für den Browser benötigt, um die Inhalte darzustellen. Ob man SVG verwendet oder nicht, hängt häufig davon ab, wofür es verwendet werden soll.

+
Vor dem Beginn

+
Es gibt eine Reihe von Grafikprogramme, wie zum Beispiel Inkscape, welche kostenlos sind und SVG als natives Dateiformat benutzen. Dieses Tutorial hält sich jedoch an einen Texteditor ihrer Wahl, um SVG Dateien zu erstellen. Die Idee ist, SVG als solches zu verstehen und das geht am Besten, in dem man selbst Hand anlegt, um ein bisschen Markup zu schreiben. Nicht alle SVG Viewer sind gleich und daher ist die Wahrscheinlichkeit groß, dass etwas, was für eine bestimmte Anwendung geschrieben wurde, nicht exakt gleich in einem anderem Programm aussieht. Das liegt einfach an der unterschiedlichen Unterstützung der SVG Spezifikation oder anderen Technologien, die ebenfalls verwendet werden (wie JavaScript oder CSS).

+
SVG wird nicht in allen modernen Browsern vollständig unterstützt (obwohl es nach und nach kommt). Eine ziemlich vollständige Liste von SVG Viewern findet sich im SVG Wiki. Firefox unterstützt einige SVG Inhalte seit Version 1.5 und mit jedem Release kommt ein Stück dazu. Mit diesem Tutorial kann das MDC vielleicht einigen Entwicklern helfen, auf dem neustem Stand, im Vergleich der Gecko Implementation mit anderen Implementationen, zu bleiben.

+
Bevor man anfängt sich mit SVG auseinander zu setzen, sollte ein grundlegendes Verständnis von XML oder anderen Auszeichnungssprachen wie HTML vorhanden sein. Falls Sie nicht so ganz mit XML vertraut sein sollten, sind hier ein paar Richtlinien an die man sich halten sollte:

+
     
  • SVG Elemente und Attribute sollten alle so geschrieben werden, wie sie hier gezeigt werden, da XML case-sensitiv ist. (im Gegensatz zu HTML)
    •  
  • Atrributwerte müssen in SVG in Anführungszeichen gesetzt werden, auch wenn sie Zahlen sind.
    • 
+

+
SVG ist eine große Spezifikation. Dieses Tutorial versucht die Grundlagen zu behandeln. Wenn Sie erstmal mit den Grundlagen vertraut sind, sollten Sie in der Lage sein die Elementreferenz und die Schnittstellenreferenz zu verwenden, um alles Weitere zu finden.

+
{{ PreviousNext("SVG/Tutorial", "SVG/Tutorial/Erste_Schritte") }}

+
{{ languages( { "en": "en/SVG/Tutorial/Introduction", "fr": "fr/SVG/Tutoriel/Introduction", "ja": "ja/SVG/Tutorial/Introduction" } ) }}

diff --git a/files/de/web/svg/tutorial/paths/index.html b/files/de/web/svg/tutorial/paths/index.html
new file mode 100644
index 0000000000..fcf1e30859
--- /dev/null
+++ b/files/de/web/svg/tutorial/paths/index.html
@@ -0,0 +1,239 @@
+---
+title: Pfade
+slug: Web/SVG/Tutorial/Pfade
+tags:
+  - Fortgeschritten
+  - HilfeBenötigt
+  - InhaltBenötigt
+  - SVG
+  - 'SVG:Tutorial'
+translation_of: Web/SVG/Tutorial/Paths
+---
+
{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}

+
+
Das <path> Element ist das mächtigste Element in der SVG Sammlung der grundlegenden Elemente. Man kann es zur Erstellung von Linien, Kurven, Bögen und weiterem verwenden.

+
+
Pfade bilden komplexe Formen beim Kombinieren mehrerer gerader Linien oder Kurven. Komplexe Formen, die nur aus geraden Linien bestehen, können als Polylines erstellt werden. Während Polylines und Pfade ähnlich aussehende Formen bilden können benötigen Polylines viele kleine geraden Linien um Kurven zu simulieren und werden nicht gut auf grössere Grössen skaliert. Ein gutes Verständnis der Pfade ist wichtig beim zeichen von SVGs. Während das Erstellen komplexer Pfade mit einem XML Editor oder Texteditor nicht empfohlen wird, hilft das Verständnis derer Funktionsweise Anzeigeprobleme in SVGs zu identifizieren und zu beheben.

+
+
Die Form eines Pfad-Elements wird durch ein Attribut definiert: {{ SVGAttr("d") }} (weiteres in grundlegende Formen). Das "d" Attribut beinhaltet eine Folge an Befehlen und deren benötigten Parametern.

+
+
Jeder dieser Befehle wird instanziert (z.B. das Erstellen einer Klasse, deren Benennung oder deren Lokalisierung) mit einem bestimmten Buchstaben. Beispielsweise: Verschiebe zur x- und y-Koordinate (10, 10). Der "Move to" Befehl wird mit dem Buchstaben M aufgerufen. Wenn der Parser zu diesem Buchstaben kommt, weiss er, dass eine Verschiebung zu einem Punkt erwünscht ist. Um nun also eine Verschiebung zu (10, 10) vorzunehmen, würde man den Befehl "M 10 10" benutzen. Danach liest der Parser der nächsten Befehl aus.

+
+
Alle dieser Befehle gibt es in zwei Varianten. Ein Grossbuchstabe gibt absolute Koordinaten auf der Seite an und ein Kleinbuchstabe gibt relative Koordinaten (z.B. verschiebe vom vorherigen Punkt 10px nach oben und 7px nach links).

+
+
Koordinaten im "d" Attribute sind immer einheitslos und somit im Benutzerkoordinatensystem. Später wird erläutert, wie Pfade transformiert werden können um anderen Bedürfnissen gerecht zu werden.

+
+
Linienbefehle

+
+
Es gibt fünf Linienbefehle für <path> Elemente. Der erste Befehl ist der "Move To" Befehl oder M, welcher oben beschrieben wurde. Er benötigt zwei Argumente, eine  Koordinate 'x' und eine Koordinate 'y' zu denen verschoben werden soll. Falls sich der Cursor bereits irgendwo auf der Seite befindet, wird keine Linie gezeichnet, um diese beiden Punkte zu verbinden. Der "Move To" Befehl erscheint am Anfang von Pfaddefinitionen, um festzulegen, wo mit der Zeichnung begonnen werden soll. z.B. :

+
+
M x y
+

+
+
oder

+
+
m dx dy

+
+
Im folgenden Beispiel habe wir nur einen Punkt bei (10,10). Beachten Sie allerdings, dass er nicht angezeigt würde, falls sie den Pfad normal zeichnen. Zum Beispiel:

+
+
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
+
+  <path d="M10 10"/>
+
+  <!-- Punkte -->
+  <circle cx="10" cy="10" r="2" fill="red"/>
+
+</svg>

+
+
Es gibt drei Befehle, mit denen Linien gezeichnet werden können. Am typischsten ist der "Line To" Befehl, aufgerufen mit L. L benötigt zwei Parameter – x und y Koordinaten – und zeichnet eine Linie von der aktuellen Position zu einer neuen Position.

+
+
 L x y (oder l dx dy)
+

+
+
Es gibt zwei abgekürzte Formen um horizontale und vertikale Linien zu zeichnen. H zeichnet eine horizontale Line und V zeichnet eine vertikale Linie. Beide Befehle benötigen nur ein Argument, da sie nur in eine Richtung verschieben.

+
+
 H x (oder h dx)
+ V y (oder v dy)
+

+
+
Eine einfache Anwendung ist das Zeichnen einer Form. Wir werden mit einem Rechteck beginnen (die Art, die auch einfacher mit dem <rect> Element erstellt werden könnte). Es wird nur aus horizontalen und vertikalen Linien zusammengestellt:

+
+

+
+
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
+
+  <path d="M10 10 H 90 V 90 H 10 L 10 10"/>
+
+  <!-- Punkte -->
+  <circle cx="10" cy="10" r="2" fill="red"/>
+  <circle cx="90" cy="90" r="2" fill="red"/>
+  <circle cx="90" cy="10" r="2" fill="red"/>
+  <circle cx="10" cy="90" r="2" fill="red"/>
+
+</svg>

+
+
Wir können die obige Pfaddefinition ein wenig kürzen, indem wir den "Close Path" Befehl verwenden, welcher mit Z aufgerufen wird. Dieser Befehl zeichnet eine gerade Linie von der aktuellen Position zum ersten Punkt des Pfades. Er wird oft am Ende eines Pfad Elements verwendet, allerdings nicht immer. Es gibt keinen unterschied zwischen dem gross oder klein geschriebenen Befehl.

+
+
 Z (oder z)
+

+
+
Unser Pfad könnte also zu folgendem abgekürzt werden:

+
+
 <path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/>
+

+
+
Sie können auch die relative Form dieser Befehle verwenden, um das gleiche Bild zu zeichnen. Relative Befehle werden mit Kleinbuchstaben aufgerufen und anstatt den Cursor auf eine genaue Koordinate zu bewegen, bewegen sie ihn relativ zu seiner letzten Position. Da unsere Box beispielsweise 80 x 80 ist, hätte das Pfad-Element so geschrieben werden können:

+
+
 <path d="M10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="black"/>
+

+
+
Der Pfad bewegt sich zu Punkt (10,10) und bewegt sich dann horizontal um 80 Punkte nach rechts, dann um 80 Punkte nach unten, dann um 80 Punkte nach links und dann zurück zum Anfang.

+
+
In diesen Beispielen wäre es wahrscheinlich einfacher, die Elemente <polygon> oder <polyline> zu verwenden. Allerdings werden Pfade beim Zeichnen von SVG so oft verwendet, dass Entwickler es stattdessen bequemer finden, diese zu verwenden. Es gibt keine wirkliche Leistungseinbußen oder -verbesserungen für die Nutzung des einen oder anderen.

+
+
Kurvenbefehle

+
+
Es gibt drei verschiedene Befehle, mit denen Sie gleichmäßige Kurven erstellen können. Zwei dieser Kurven sind Bezier-Kurven, und die dritte ist ein "Bogen" oder Teil eines Kreises. Möglicherweise haben Sie bereits praktische Erfahrungen mit Bezier-Kurven mit Pfadwerkzeugen in Inkscape, Illustrator oder Photoshop gesammelt. Eine vollständige Beschreibung der Mathematik hinter Bezier-Kurven finden Sie in einer Referenz wie der auf Wikipedia. Es gibt eine unendliche Anzahl von Bezier-Kurven, aber nur zwei einfache sind in Pfadelementen verfügbar: eine kubische, die mit C aufgerufen wird, und eine quadratische, die mit Q aufgerufen wird.

+
+
Bezier-Kurven

+
+
Die kubische Kurve C, ist die etwas komplexere Kurve. Kubische Beziers nehmen zwei Kontrollpunkte für jeden Punkt in Anspruch. Um einen kubischen Bezier zu erstellen, müssen Sie daher drei Koordinatenpaare angeben.

+
+
 C x1 y1, x2 y2, x y (oder c dx1 dy1, dx2 dy2, dx dy)
+

+
+
Das letzte Koordinatenpaar hier (x,y) ist der Punkt, an welchem die Linie enden soll. Die anderen beiden sind Kontrollpunkte. (x1,y1) ist der Kontrollpunkt für die Anfangsposition Ihrer Kurve, und (x2,y2) ist der Kontrollpunkt der Endposition. Die Kontrollpunkte beschreiben im Wesentlichen die Neigung Ihrer Linie ab den jeweiligen Punkten. Die Bezier-Funktion erstellt dann eine gleichmäßige Kurve, die Sie von der Neigung, die Sie am Anfang Ihrer Linie festgelegt haben, auf die Neigung am anderen Ende verschiebt.

+
+
Cubic Bézier Curves with grid

+
+
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
+
+  <path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>
+  <path d="M70 10 C 70 20, 120 20, 120 10" stroke="black" fill="transparent"/>
+  <path d="M130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/>
+  <path d="M10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/>
+  <path d="M70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/>
+  <path d="M130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/>
+  <path d="M10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/>
+  <path d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/>
+  <path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/>
+
+</svg>
+

+
+
Das obige Beispiel erstellt neun kubische Bezier-Kurven. Wenn sich die Kurven nach rechts bewegen, werden die Kontrollpunkte horizontal gespreizt. Wenn sich die Kurven nach unten bewegen, werden sie weiter von den Endpunkten getrennt. Zu beachten ist hier, dass die Kurve in Richtung des ersten Kontrollpunktes beginnt und sich dann so biegt, dass sie in Richtung des zweiten Kontrollpunktes verläuft.

+
+
Es ist möglich, mehrere Bezier-Kurven aneinander zu reihen, um erweiterte, gleichmäßige Formen zu erzeugen. Häufig ist der Kontrollpunkt auf der einen Seite eines Punktes eine Reflexion des Kontrollpunktes auf der anderen Seite, um die Steigung konstant zu halten. In diesem Fall können Sie eine abgekürzte Version des kubischen Bezier verwenden, die durch den Befehl S (oder s) definiert wird.

+
+
 S x2 y2, x y (oder s dx2 dy2, dx dy)
+

+
+
S erstellt den selben Kurventyp wie zuvor. Wenn er aber einem anderen S- oder C-Befehl folgt, wird angenommen, dass der erste Kontrollpunkt eine Reflexion des zuvor verwendeten ist. Folgt der Befehl S nicht einem anderen S- oder C-Befehl, so wird die aktuelle Position des Cursors als erster Kontrollpunkt verwendet. In diesem Fall ist das Ergebnis das gleiche wie das, was der Q-Befehl mit den gleichen Parametern ergeben hätte. Ein Beispiel für diese Syntax ist unten dargestellt, und in der Abbildung links sind die angegebenen Kontrollpunkte rot und der daraus abgeleitete Kontrollpunkt blau dargestellt.

+
+
ShortCut_Cubic_Bezier_with_grid.png

+
+
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
+</svg>

+
+
Die andere Art von Bezierkurve, die quadratische Kurve, die mit Q aufgerufen wird, ist eigentlich eine einfachere Kurve als die kubische. Sie benötigt einen Kontrollpunkt, der die Neigung der Kurve sowohl am Startpunkt als auch am Endpunkt bestimmt. Es werden zwei Argumente benötigt: der Kontrollpunkt und der Endpunkt der Kurve. Beachten Sie, dass die Koordinatendeltas für q beide relativ zum vorherigen Punkt sind (d.h. dx und dy sind nicht relativ zu dx1 und dx2).

+
+
 Q x1 y1, x y (oder q dx1 dy1, dx dy)
+

+
+
Quadratic Bézier with grid

+
+
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/>
+</svg>

+
+
Genau wie bei der kubischen Bezierkurve gibt es eine Abkürzung zum Aneinanderreihen mehrerer quadratischer Beziers, die mit T aufgerufen wird.

+
+
 T x y (oder t dx dy)
+

+
+
Diese Abkürzung betrachtet den vorherigen Kontrollpunkt, den Sie verwendet haben, und leitet daraus einen neuen ab. Das bedeutet, dass Sie nach Ihrem ersten Kontrollpunkt ziemlich komplexe Formen erstellen können, indem Sie nur Endpunkte angeben.

+
+

+
Das funktioniert nur, wenn der vorherige Befehl ein Q- oder T-Befehl war. Wenn dies nicht der Fall ist, wird davon ausgegangen, dass der Kontrollpunkt derselbe wie der vorherige Punkt ist, und Sie zeichnen nur Linien.

+

+
+
Shortcut_Quadratic_Bezier_with_grid.png

+
+
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/>
+</svg>

+
+
Beide Kurven liefern ähnliche Ergebnisse, obwohl die kubische Form Ihnen mehr Freiheit bei der Gestaltung Ihrer Kurve gibt. Die Entscheidung, welche Kurve Sie verwenden möchten, hängt von der Symmetrie ab, die Ihre Linie hat.

+
+
Bögen

+
+
Die andere Art von Kurvenlinie, die Sie mit SVG erstellen können, ist der Bogen, der mit A aufgerufen wird. Bogen sind Kreis- oder Ellipsenabschnitte. Bei einem gegebenen x-Radius und y-Radius gibt es zwei Ellipsen, die zwei beliebige Punkte verbinden können (sofern sie sich im Kreisradius befinden). Entlang einer dieser Kreise gibt es zwei mögliche Pfade, die Sie wählen können, um die Punkte zu verbinden, so dass in jeder Situation vier mögliche Bögen zur Verfügung stehen. Aus diesem Grund sind bei Bögen eine ganze Reihe von Argumenten erforderlich:

+
+
 A rx ry x-Achsen-Drehung Bogen-Flag Ausschwenkungs-Flag x y
+ a rx ry x-Achsen-Drehung Bogen-Flag Ausschwenkungs-Flag dx dy
+

+
+
An seinem Anfang nimmt das Bogenelement zwei Argumente für den x-Radius und den y-Radius auf. Falls benötigt, schlagen sie Ellipsen nach, um deren Verhaltensweisen zu verstehen. Die letzten beiden Argumente bezeichnen die x- und y-Koordinaten um den Konturverlauf zu beenden. Zusammen bilden diese vier Werte die Grundstruktur des Bogens.

+
+
Der dritte Parameter beschreibt die Drehung des Bogens. Dies lässt sich am besten an einem Beispiel erklären:

+
+
SVGArcs_XAxisRotation_with_grid

+
+
<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 315
+           L 110 215
+           A 30 50 0 0 1 162.55 162.45
+           L 172.55 152.45
+           A 30 50 -45 0 1 215.1 109.9
+           L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
+</svg>

+
+
Dieses Beispiel zeigt ein Pfad-Element, welches diagonal über die Seite verläuft. In dessen Mitte wurden zwei elliptische Bögen (x-Radius = 30, y-Radius = 50) ausgeschnitten. Im ersten Bogen wurde die x-Achsen-Rotation bei 0 gelassen, damit die Ellipse, um die der Bogen verläuft (in grau abgebildet) gerade nach oben und unten ausgerichtet wird. Im zweiten Bogen wurde die x-Achsen-Rotation allerdings auf -45 Grad gesetzt. Das dreht die Ellipse, damit sie mit der kürzeren Achse der Pfadrichtung ausgerichtet wird, wie im Beispielbild durch die zweite Ellipse dargestellt.

+
+
Für die ungedrehte Ellipse im obigen Bild gibt es zwei verschiedene Bögen, zwischen denen gewählt werden kann, nicht vier, da die Linie, die vom Anfang bis zum Ende des Bogens durch die Mitte der Ellipse verläuft. In einem leicht veränderten Beispiel können Sie die zwei Ellipsen sehen, die die vier verschiedenen Bögen bilden.

+
+
Show the 4 arcs on the Ellipse example

+
+
<svg xmlns="http://www.w3.org/2000/svg" width="320" height="320">
+  <path d="M10 315
+           L 110 215
+           A 36 60 0 0 1 150.71 170.29
+           L 172.55 152.45
+           A 30 50 -45 0 1 215.1 109.9
+           L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
+  <circle cx="150.71" cy="170.29" r="2" fill="red"/>
+  <circle cx="110" cy="215" r="2" fill="red"/>
+  <ellipse cx="144.931" cy="229.512" rx="36" ry="60" fill="transparent" stroke="blue"/>
+  <ellipse cx="115.779" cy="155.778" rx="36" ry="60" fill="transparent" stroke="blue"/>
+</svg>
+

+
+
Beachten Sie, dass jede der blauen Ellipsen aus zwei Bögen besteht, je nachdem, ob Sie im oder gegen den Uhrzeigersinn verfahren. Jede Ellipse hat einen kurzen und einen langen Bogen. Die beiden Ellipsen sind nur Spiegelungen voneinander. Sie werden entlang der Linie gespiegelt, die sich aus den Start->Endpunkten ergibt.

+
+
Wenn die Start->Endpunkte weiter entfernt sind, als der x- und y-Radius der Ellipse reicht, werden die Radien der Ellipse minimal erweitert, so dass sie die Start->Endpunkte erreichen können. Der interaktive Codepen am Ende dieser Seite zeigt dies exemplarisch. Um festzustellen, ob die Radien Ihrer Ellipse groß genug sind, um erweitert werden zu müssen, müssen Sie ein Gleichungssystem wie dieses auf Wolfram Alpha lösen. Diese Berechnung gilt für die nicht rotierende Ellipse mit Start->Ende (110, 215)->(150.71, 170.29). Die Lösung, (x, y), ist das Zentrum der Ellipse(n). Die Lösung wird imaginär sein, falls Ihre Ellipsenradien zu klein sind. Diese zweite Berechnung bezieht sich auf die nicht rotierende Ellipse mit Start->Ende (110, 215)->(162.55, 162.45). Die Lösung hat eine kleine Imaginärkomponente, da die Ellipse nur knapp erweitert wurde.

+
+
Die vier verschiedenen oben genannten Pfade werden durch die nächsten beiden Argument-Flags bestimmt. Wie bereits erwähnt, gibt es immer noch zwei mögliche Ellipsen für den Pfad, um sich zu bewegen, und zwei verschiedene mögliche Pfade auf beiden Ellipsen, was vier mögliche Pfade ergibt. Das erste Argument ist das Bogen-Flag. Es bestimmt einfach, ob der Bogen größer oder kleiner als 180 Grad sein soll; am Ende bestimmt dieses Flag, in welche Richtung sich der Bogen um einen gegebenen Kreis bewegt. Das zweite Argument ist das Ausschwenkungs-Flag. Es legt fest, ob sich der Bogen in positiven oder negativen Winkeln bewegen soll, was im Wesentlichen bestimmt, um welchen der beiden Kreise Sie sich bewegen werden. Das folgende Beispiel zeigt alle vier möglichen Kombinationen sowie die beiden Kreise für die einzelnen Fälle.

+
+

+
+
<svg width="325" height="325" xmlns="http://www.w3.org/2000/svg">
+  <path d="M80 80
+           A 45 45, 0, 0, 0, 125 125
+           L 125 80 Z" fill="green"/>
+  <path d="M230 80
+           A 45 45, 0, 1, 0, 275 125
+           L 275 80 Z" fill="red"/>
+  <path d="M80 230
+           A 45 45, 0, 0, 1, 125 275
+           L 125 230 Z" fill="purple"/>
+  <path d="M230 230
+           A 45 45, 0, 1, 1, 275 275
+           L 275 230 Z" fill="blue"/>
+</svg>

+
+
Bögen sind eine einfache Möglichkeit, Kreise oder Ellipsen in Ihren Zeichnungen zu erstellen. Zum Beispiel würde ein Kreisdiagramm für jedes Stück einen anderen Bogen erfordern.

+
+
Falls sie SVG aus Canvas herleiten können Bögen die meisten Verständnisprobleme verursachen, allerdings sind sie auch viel mächtiger. Vollständige Kreise und Ellipsen sind eigentlich die einzigen Formen, bei denen SVG-Bögen Probleme beim Zeichnen haben. Da der Start- und Endpunkt für jeden Pfad, der um einen Kreis verläuft, der gleiche Punkt ist, gibt es eine unendliche Anzahl von Kreisen, die ausgewählt werden können, und der tatsächliche Pfad ist undefiniert. Es ist möglich, sie anzunähern, indem man den Start- und Endpunkt des Pfades leicht schräg stellt und ihn dann mit einem anderen Pfadsegment verbindet. Beispielsweise können Sie für jeden Halbkreis einen Kreis mit einem Bogen erstellen. An diesem Punkt ist es oft einfacher, ein Kreis- oder Ellipsen-Element zu verwenden. Diese interaktive Codepen könnte ihnen vieleicht beim Verständnis der Konzepte hinter SVG Bögen zu verstehen: http://codepen.io/lingtalfi/pen/yaLWJG (nur in Chrome und Firefox getestet, funktioniert möglicherweise nicht in Ihrem Browser)

+
+
{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}

diff --git a/files/de/web/svg/tutorial/pfade/index.html b/files/de/web/svg/tutorial/pfade/index.html
deleted file mode 100644
index fcf1e30859..0000000000
--- a/files/de/web/svg/tutorial/pfade/index.html
+++ /dev/null
@@ -1,239 +0,0 @@
----
-title: Pfade
-slug: Web/SVG/Tutorial/Pfade
-tags:
-  - Fortgeschritten
-  - HilfeBenötigt
-  - InhaltBenötigt
-  - SVG
-  - 'SVG:Tutorial'
-translation_of: Web/SVG/Tutorial/Paths
----
-
{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}

-
-
Das <path> Element ist das mächtigste Element in der SVG Sammlung der grundlegenden Elemente. Man kann es zur Erstellung von Linien, Kurven, Bögen und weiterem verwenden.

-
-
Pfade bilden komplexe Formen beim Kombinieren mehrerer gerader Linien oder Kurven. Komplexe Formen, die nur aus geraden Linien bestehen, können als Polylines erstellt werden. Während Polylines und Pfade ähnlich aussehende Formen bilden können benötigen Polylines viele kleine geraden Linien um Kurven zu simulieren und werden nicht gut auf grössere Grössen skaliert. Ein gutes Verständnis der Pfade ist wichtig beim zeichen von SVGs. Während das Erstellen komplexer Pfade mit einem XML Editor oder Texteditor nicht empfohlen wird, hilft das Verständnis derer Funktionsweise Anzeigeprobleme in SVGs zu identifizieren und zu beheben.

-
-
Die Form eines Pfad-Elements wird durch ein Attribut definiert: {{ SVGAttr("d") }} (weiteres in grundlegende Formen). Das "d" Attribut beinhaltet eine Folge an Befehlen und deren benötigten Parametern.

-
-
Jeder dieser Befehle wird instanziert (z.B. das Erstellen einer Klasse, deren Benennung oder deren Lokalisierung) mit einem bestimmten Buchstaben. Beispielsweise: Verschiebe zur x- und y-Koordinate (10, 10). Der "Move to" Befehl wird mit dem Buchstaben M aufgerufen. Wenn der Parser zu diesem Buchstaben kommt, weiss er, dass eine Verschiebung zu einem Punkt erwünscht ist. Um nun also eine Verschiebung zu (10, 10) vorzunehmen, würde man den Befehl "M 10 10" benutzen. Danach liest der Parser der nächsten Befehl aus.

-
-
Alle dieser Befehle gibt es in zwei Varianten. Ein Grossbuchstabe gibt absolute Koordinaten auf der Seite an und ein Kleinbuchstabe gibt relative Koordinaten (z.B. verschiebe vom vorherigen Punkt 10px nach oben und 7px nach links).

-
-
Koordinaten im "d" Attribute sind immer einheitslos und somit im Benutzerkoordinatensystem. Später wird erläutert, wie Pfade transformiert werden können um anderen Bedürfnissen gerecht zu werden.

-
-
Linienbefehle

-
-
Es gibt fünf Linienbefehle für <path> Elemente. Der erste Befehl ist der "Move To" Befehl oder M, welcher oben beschrieben wurde. Er benötigt zwei Argumente, eine  Koordinate 'x' und eine Koordinate 'y' zu denen verschoben werden soll. Falls sich der Cursor bereits irgendwo auf der Seite befindet, wird keine Linie gezeichnet, um diese beiden Punkte zu verbinden. Der "Move To" Befehl erscheint am Anfang von Pfaddefinitionen, um festzulegen, wo mit der Zeichnung begonnen werden soll. z.B. :

-
-
M x y
-

-
-
oder

-
-
m dx dy

-
-
Im folgenden Beispiel habe wir nur einen Punkt bei (10,10). Beachten Sie allerdings, dass er nicht angezeigt würde, falls sie den Pfad normal zeichnen. Zum Beispiel:

-
-
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
-
-  <path d="M10 10"/>
-
-  <!-- Punkte -->
-  <circle cx="10" cy="10" r="2" fill="red"/>
-
-</svg>

-
-
Es gibt drei Befehle, mit denen Linien gezeichnet werden können. Am typischsten ist der "Line To" Befehl, aufgerufen mit L. L benötigt zwei Parameter – x und y Koordinaten – und zeichnet eine Linie von der aktuellen Position zu einer neuen Position.

-
-
 L x y (oder l dx dy)
-

-
-
Es gibt zwei abgekürzte Formen um horizontale und vertikale Linien zu zeichnen. H zeichnet eine horizontale Line und V zeichnet eine vertikale Linie. Beide Befehle benötigen nur ein Argument, da sie nur in eine Richtung verschieben.

-
-
 H x (oder h dx)
- V y (oder v dy)
-

-
-
Eine einfache Anwendung ist das Zeichnen einer Form. Wir werden mit einem Rechteck beginnen (die Art, die auch einfacher mit dem <rect> Element erstellt werden könnte). Es wird nur aus horizontalen und vertikalen Linien zusammengestellt:

-
-

-
-
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
-
-  <path d="M10 10 H 90 V 90 H 10 L 10 10"/>
-
-  <!-- Punkte -->
-  <circle cx="10" cy="10" r="2" fill="red"/>
-  <circle cx="90" cy="90" r="2" fill="red"/>
-  <circle cx="90" cy="10" r="2" fill="red"/>
-  <circle cx="10" cy="90" r="2" fill="red"/>
-
-</svg>

-
-
Wir können die obige Pfaddefinition ein wenig kürzen, indem wir den "Close Path" Befehl verwenden, welcher mit Z aufgerufen wird. Dieser Befehl zeichnet eine gerade Linie von der aktuellen Position zum ersten Punkt des Pfades. Er wird oft am Ende eines Pfad Elements verwendet, allerdings nicht immer. Es gibt keinen unterschied zwischen dem gross oder klein geschriebenen Befehl.

-
-
 Z (oder z)
-

-
-
Unser Pfad könnte also zu folgendem abgekürzt werden:

-
-
 <path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/>
-

-
-
Sie können auch die relative Form dieser Befehle verwenden, um das gleiche Bild zu zeichnen. Relative Befehle werden mit Kleinbuchstaben aufgerufen und anstatt den Cursor auf eine genaue Koordinate zu bewegen, bewegen sie ihn relativ zu seiner letzten Position. Da unsere Box beispielsweise 80 x 80 ist, hätte das Pfad-Element so geschrieben werden können:

-
-
 <path d="M10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="black"/>
-

-
-
Der Pfad bewegt sich zu Punkt (10,10) und bewegt sich dann horizontal um 80 Punkte nach rechts, dann um 80 Punkte nach unten, dann um 80 Punkte nach links und dann zurück zum Anfang.

-
-
In diesen Beispielen wäre es wahrscheinlich einfacher, die Elemente <polygon> oder <polyline> zu verwenden. Allerdings werden Pfade beim Zeichnen von SVG so oft verwendet, dass Entwickler es stattdessen bequemer finden, diese zu verwenden. Es gibt keine wirkliche Leistungseinbußen oder -verbesserungen für die Nutzung des einen oder anderen.

-
-
Kurvenbefehle

-
-
Es gibt drei verschiedene Befehle, mit denen Sie gleichmäßige Kurven erstellen können. Zwei dieser Kurven sind Bezier-Kurven, und die dritte ist ein "Bogen" oder Teil eines Kreises. Möglicherweise haben Sie bereits praktische Erfahrungen mit Bezier-Kurven mit Pfadwerkzeugen in Inkscape, Illustrator oder Photoshop gesammelt. Eine vollständige Beschreibung der Mathematik hinter Bezier-Kurven finden Sie in einer Referenz wie der auf Wikipedia. Es gibt eine unendliche Anzahl von Bezier-Kurven, aber nur zwei einfache sind in Pfadelementen verfügbar: eine kubische, die mit C aufgerufen wird, und eine quadratische, die mit Q aufgerufen wird.

-
-
Bezier-Kurven

-
-
Die kubische Kurve C, ist die etwas komplexere Kurve. Kubische Beziers nehmen zwei Kontrollpunkte für jeden Punkt in Anspruch. Um einen kubischen Bezier zu erstellen, müssen Sie daher drei Koordinatenpaare angeben.

-
-
 C x1 y1, x2 y2, x y (oder c dx1 dy1, dx2 dy2, dx dy)
-

-
-
Das letzte Koordinatenpaar hier (x,y) ist der Punkt, an welchem die Linie enden soll. Die anderen beiden sind Kontrollpunkte. (x1,y1) ist der Kontrollpunkt für die Anfangsposition Ihrer Kurve, und (x2,y2) ist der Kontrollpunkt der Endposition. Die Kontrollpunkte beschreiben im Wesentlichen die Neigung Ihrer Linie ab den jeweiligen Punkten. Die Bezier-Funktion erstellt dann eine gleichmäßige Kurve, die Sie von der Neigung, die Sie am Anfang Ihrer Linie festgelegt haben, auf die Neigung am anderen Ende verschiebt.

-
-
Cubic Bézier Curves with grid

-
-
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
-
-  <path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>
-  <path d="M70 10 C 70 20, 120 20, 120 10" stroke="black" fill="transparent"/>
-  <path d="M130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/>
-  <path d="M10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/>
-  <path d="M70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/>
-  <path d="M130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/>
-  <path d="M10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/>
-  <path d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/>
-  <path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/>
-
-</svg>
-

-
-
Das obige Beispiel erstellt neun kubische Bezier-Kurven. Wenn sich die Kurven nach rechts bewegen, werden die Kontrollpunkte horizontal gespreizt. Wenn sich die Kurven nach unten bewegen, werden sie weiter von den Endpunkten getrennt. Zu beachten ist hier, dass die Kurve in Richtung des ersten Kontrollpunktes beginnt und sich dann so biegt, dass sie in Richtung des zweiten Kontrollpunktes verläuft.

-
-
Es ist möglich, mehrere Bezier-Kurven aneinander zu reihen, um erweiterte, gleichmäßige Formen zu erzeugen. Häufig ist der Kontrollpunkt auf der einen Seite eines Punktes eine Reflexion des Kontrollpunktes auf der anderen Seite, um die Steigung konstant zu halten. In diesem Fall können Sie eine abgekürzte Version des kubischen Bezier verwenden, die durch den Befehl S (oder s) definiert wird.

-
-
 S x2 y2, x y (oder s dx2 dy2, dx dy)
-

-
-
S erstellt den selben Kurventyp wie zuvor. Wenn er aber einem anderen S- oder C-Befehl folgt, wird angenommen, dass der erste Kontrollpunkt eine Reflexion des zuvor verwendeten ist. Folgt der Befehl S nicht einem anderen S- oder C-Befehl, so wird die aktuelle Position des Cursors als erster Kontrollpunkt verwendet. In diesem Fall ist das Ergebnis das gleiche wie das, was der Q-Befehl mit den gleichen Parametern ergeben hätte. Ein Beispiel für diese Syntax ist unten dargestellt, und in der Abbildung links sind die angegebenen Kontrollpunkte rot und der daraus abgeleitete Kontrollpunkt blau dargestellt.

-
-
ShortCut_Cubic_Bezier_with_grid.png

-
-
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
-  <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
-</svg>

-
-
Die andere Art von Bezierkurve, die quadratische Kurve, die mit Q aufgerufen wird, ist eigentlich eine einfachere Kurve als die kubische. Sie benötigt einen Kontrollpunkt, der die Neigung der Kurve sowohl am Startpunkt als auch am Endpunkt bestimmt. Es werden zwei Argumente benötigt: der Kontrollpunkt und der Endpunkt der Kurve. Beachten Sie, dass die Koordinatendeltas für q beide relativ zum vorherigen Punkt sind (d.h. dx und dy sind nicht relativ zu dx1 und dx2).

-
-
 Q x1 y1, x y (oder q dx1 dy1, dx dy)
-

-
-
Quadratic Bézier with grid

-
-
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
-  <path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/>
-</svg>

-
-
Genau wie bei der kubischen Bezierkurve gibt es eine Abkürzung zum Aneinanderreihen mehrerer quadratischer Beziers, die mit T aufgerufen wird.

-
-
 T x y (oder t dx dy)
-

-
-
Diese Abkürzung betrachtet den vorherigen Kontrollpunkt, den Sie verwendet haben, und leitet daraus einen neuen ab. Das bedeutet, dass Sie nach Ihrem ersten Kontrollpunkt ziemlich komplexe Formen erstellen können, indem Sie nur Endpunkte angeben.

-
-

-
Das funktioniert nur, wenn der vorherige Befehl ein Q- oder T-Befehl war. Wenn dies nicht der Fall ist, wird davon ausgegangen, dass der Kontrollpunkt derselbe wie der vorherige Punkt ist, und Sie zeichnen nur Linien.

-

-
-
Shortcut_Quadratic_Bezier_with_grid.png

-
-
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
-  <path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/>
-</svg>

-
-
Beide Kurven liefern ähnliche Ergebnisse, obwohl die kubische Form Ihnen mehr Freiheit bei der Gestaltung Ihrer Kurve gibt. Die Entscheidung, welche Kurve Sie verwenden möchten, hängt von der Symmetrie ab, die Ihre Linie hat.

-
-
Bögen

-
-
Die andere Art von Kurvenlinie, die Sie mit SVG erstellen können, ist der Bogen, der mit A aufgerufen wird. Bogen sind Kreis- oder Ellipsenabschnitte. Bei einem gegebenen x-Radius und y-Radius gibt es zwei Ellipsen, die zwei beliebige Punkte verbinden können (sofern sie sich im Kreisradius befinden). Entlang einer dieser Kreise gibt es zwei mögliche Pfade, die Sie wählen können, um die Punkte zu verbinden, so dass in jeder Situation vier mögliche Bögen zur Verfügung stehen. Aus diesem Grund sind bei Bögen eine ganze Reihe von Argumenten erforderlich:

-
-
 A rx ry x-Achsen-Drehung Bogen-Flag Ausschwenkungs-Flag x y
- a rx ry x-Achsen-Drehung Bogen-Flag Ausschwenkungs-Flag dx dy
-

-
-
An seinem Anfang nimmt das Bogenelement zwei Argumente für den x-Radius und den y-Radius auf. Falls benötigt, schlagen sie Ellipsen nach, um deren Verhaltensweisen zu verstehen. Die letzten beiden Argumente bezeichnen die x- und y-Koordinaten um den Konturverlauf zu beenden. Zusammen bilden diese vier Werte die Grundstruktur des Bogens.

-
-
Der dritte Parameter beschreibt die Drehung des Bogens. Dies lässt sich am besten an einem Beispiel erklären:

-
-
SVGArcs_XAxisRotation_with_grid

-
-
<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
-  <path d="M10 315
-           L 110 215
-           A 30 50 0 0 1 162.55 162.45
-           L 172.55 152.45
-           A 30 50 -45 0 1 215.1 109.9
-           L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
-</svg>

-
-
Dieses Beispiel zeigt ein Pfad-Element, welches diagonal über die Seite verläuft. In dessen Mitte wurden zwei elliptische Bögen (x-Radius = 30, y-Radius = 50) ausgeschnitten. Im ersten Bogen wurde die x-Achsen-Rotation bei 0 gelassen, damit die Ellipse, um die der Bogen verläuft (in grau abgebildet) gerade nach oben und unten ausgerichtet wird. Im zweiten Bogen wurde die x-Achsen-Rotation allerdings auf -45 Grad gesetzt. Das dreht die Ellipse, damit sie mit der kürzeren Achse der Pfadrichtung ausgerichtet wird, wie im Beispielbild durch die zweite Ellipse dargestellt.

-
-
Für die ungedrehte Ellipse im obigen Bild gibt es zwei verschiedene Bögen, zwischen denen gewählt werden kann, nicht vier, da die Linie, die vom Anfang bis zum Ende des Bogens durch die Mitte der Ellipse verläuft. In einem leicht veränderten Beispiel können Sie die zwei Ellipsen sehen, die die vier verschiedenen Bögen bilden.

-
-
Show the 4 arcs on the Ellipse example

-
-
<svg xmlns="http://www.w3.org/2000/svg" width="320" height="320">
-  <path d="M10 315
-           L 110 215
-           A 36 60 0 0 1 150.71 170.29
-           L 172.55 152.45
-           A 30 50 -45 0 1 215.1 109.9
-           L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
-  <circle cx="150.71" cy="170.29" r="2" fill="red"/>
-  <circle cx="110" cy="215" r="2" fill="red"/>
-  <ellipse cx="144.931" cy="229.512" rx="36" ry="60" fill="transparent" stroke="blue"/>
-  <ellipse cx="115.779" cy="155.778" rx="36" ry="60" fill="transparent" stroke="blue"/>
-</svg>
-

-
-
Beachten Sie, dass jede der blauen Ellipsen aus zwei Bögen besteht, je nachdem, ob Sie im oder gegen den Uhrzeigersinn verfahren. Jede Ellipse hat einen kurzen und einen langen Bogen. Die beiden Ellipsen sind nur Spiegelungen voneinander. Sie werden entlang der Linie gespiegelt, die sich aus den Start->Endpunkten ergibt.

-
-
Wenn die Start->Endpunkte weiter entfernt sind, als der x- und y-Radius der Ellipse reicht, werden die Radien der Ellipse minimal erweitert, so dass sie die Start->Endpunkte erreichen können. Der interaktive Codepen am Ende dieser Seite zeigt dies exemplarisch. Um festzustellen, ob die Radien Ihrer Ellipse groß genug sind, um erweitert werden zu müssen, müssen Sie ein Gleichungssystem wie dieses auf Wolfram Alpha lösen. Diese Berechnung gilt für die nicht rotierende Ellipse mit Start->Ende (110, 215)->(150.71, 170.29). Die Lösung, (x, y), ist das Zentrum der Ellipse(n). Die Lösung wird imaginär sein, falls Ihre Ellipsenradien zu klein sind. Diese zweite Berechnung bezieht sich auf die nicht rotierende Ellipse mit Start->Ende (110, 215)->(162.55, 162.45). Die Lösung hat eine kleine Imaginärkomponente, da die Ellipse nur knapp erweitert wurde.

-
-
Die vier verschiedenen oben genannten Pfade werden durch die nächsten beiden Argument-Flags bestimmt. Wie bereits erwähnt, gibt es immer noch zwei mögliche Ellipsen für den Pfad, um sich zu bewegen, und zwei verschiedene mögliche Pfade auf beiden Ellipsen, was vier mögliche Pfade ergibt. Das erste Argument ist das Bogen-Flag. Es bestimmt einfach, ob der Bogen größer oder kleiner als 180 Grad sein soll; am Ende bestimmt dieses Flag, in welche Richtung sich der Bogen um einen gegebenen Kreis bewegt. Das zweite Argument ist das Ausschwenkungs-Flag. Es legt fest, ob sich der Bogen in positiven oder negativen Winkeln bewegen soll, was im Wesentlichen bestimmt, um welchen der beiden Kreise Sie sich bewegen werden. Das folgende Beispiel zeigt alle vier möglichen Kombinationen sowie die beiden Kreise für die einzelnen Fälle.

-
-

-
-
<svg width="325" height="325" xmlns="http://www.w3.org/2000/svg">
-  <path d="M80 80
-           A 45 45, 0, 0, 0, 125 125
-           L 125 80 Z" fill="green"/>
-  <path d="M230 80
-           A 45 45, 0, 1, 0, 275 125
-           L 275 80 Z" fill="red"/>
-  <path d="M80 230
-           A 45 45, 0, 0, 1, 125 275
-           L 125 230 Z" fill="purple"/>
-  <path d="M230 230
-           A 45 45, 0, 1, 1, 275 275
-           L 275 230 Z" fill="blue"/>
-</svg>

-
-
Bögen sind eine einfache Möglichkeit, Kreise oder Ellipsen in Ihren Zeichnungen zu erstellen. Zum Beispiel würde ein Kreisdiagramm für jedes Stück einen anderen Bogen erfordern.

-
-
Falls sie SVG aus Canvas herleiten können Bögen die meisten Verständnisprobleme verursachen, allerdings sind sie auch viel mächtiger. Vollständige Kreise und Ellipsen sind eigentlich die einzigen Formen, bei denen SVG-Bögen Probleme beim Zeichnen haben. Da der Start- und Endpunkt für jeden Pfad, der um einen Kreis verläuft, der gleiche Punkt ist, gibt es eine unendliche Anzahl von Kreisen, die ausgewählt werden können, und der tatsächliche Pfad ist undefiniert. Es ist möglich, sie anzunähern, indem man den Start- und Endpunkt des Pfades leicht schräg stellt und ihn dann mit einem anderen Pfadsegment verbindet. Beispielsweise können Sie für jeden Halbkreis einen Kreis mit einem Bogen erstellen. An diesem Punkt ist es oft einfacher, ein Kreis- oder Ellipsen-Element zu verwenden. Diese interaktive Codepen könnte ihnen vieleicht beim Verständnis der Konzepte hinter SVG Bögen zu verstehen: http://codepen.io/lingtalfi/pen/yaLWJG (nur in Chrome und Firefox getestet, funktioniert möglicherweise nicht in Ihrem Browser)

-
-
{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}

diff --git a/files/de/web/svg/tutorial/svg_fonts/index.html b/files/de/web/svg/tutorial/svg_fonts/index.html
new file mode 100644
index 0000000000..57d826cb5e
--- /dev/null
+++ b/files/de/web/svg/tutorial/svg_fonts/index.html
@@ -0,0 +1,99 @@
+---
+title: SVG-Schriftarten
+slug: Web/SVG/Tutorial/SVG_Schriftarten
+translation_of: Web/SVG/Tutorial/SVG_fonts
+---
+
{{ PreviousNext("Web/SVG/Tutorial/Filter_effects", "Web/SVG/Tutorial/SVG_Image_Tag") }}

+
+
Als SVG spezifiziert wurde, war die Unterstützung für Web-Schriftarten in Browsern noch nicht sehr verbreitet. Weil ein Zugriff auf die richtige Schriftart für das korrekte Rendern jedoch so wichtig ist, wurde SVG eine Technologie zur Beschreibung von Schriftarten hinzugefügt, um dies zu ermöglichen. Dabei war eine Kompatibilität mit anderen Formaten wie PostScript oder OTF nicht vorgesehen, sondern vielmehr als ein einfaches Mittel, um Informationen über Zeichen fürs Rendern in SVG einbetten zu können.

+
+
SVG-Schriftarten werden gegenwärtig nur durch Safari und Android-Browser unterstützt. 

+
+

+ 
Im Internet Explorer wurde eine Implementierung nicht berücksichtigt, in Chrome 38 wurde sie entfernt (auch in Opera 25) und Firefox hat es auf unbestimmte Zeit verschoben, um sich auf WOFF konzentrieren zu können. Andere Tools jedoch wie Adobe SVG Viewer-Plugin, Batik und Teile von Inkscape unterstützen das Einbetten von SVG-Schriftarten.

+

+
+
Das grundlegende Tag zur Definition einer SVG-Schriftart ist {{ SVGElement("font") }}.

+
+
Eine Schriftart definieren

+
+
Es sind einige Angaben nötig, um eine Schriftart in SVG einzubetten. Gezeigt wird das Beispiel aus der Spezifikation und an ihm werden die Details erklärt.

+
+
<font id="Font1" horiz-adv-x="1000">
+  <font-face font-family="Super Sans" font-weight="bold" font-style="normal"
+      units-per-em="1000" cap-height="600" x-height="400"
+      ascent="700" descent="300"
+      alphabetic="0" mathematical="350" ideographic="400" hanging="500">
+    <font-face-src>
+      <font-face-name name="Super Sans Bold"/>
+    </font-face-src>
+  </font-face>
+  <missing-glyph><path d="M0,0h200v200h-200z"/></missing-glyph>
+  <glyph unicode="!" horiz-adv-x="300"><!-- Umrisslinie von ! --></glyph>
+  <glyph unicode="@"><!-- Umrisslinie von @ --></glyph>
+  <!-- weitere Zeichen -->
+</font>
+

+
+
Am Anfang steht das {{ SVGElement("font") }}-Tag. Es enthält das Attribut id, das einen späteren Zugriff (Referenzierung) mittels URI (siehe unten) ermöglicht. Das Attribut horiz-adv-x legt fest, wie breit ein Zeichen durchschnittlich verglichen zur path-Definition eines einzelnen Zeichens ist. Der Wert 1000 legt einen vernünftigen Wert fest, um damit zu arbeiten. Es gibt weitere Attribute, die helfen, den Kasten näher zu definieren, in dem das Zeichen erstellt werden soll.

+
+
Das {{ SVGElement("font-face") }}-Tag ist das SVG-Gegenstück zu CSS @font-face. Darin werden Grundeinstellungen der fertigen Schriftart wie Schriftstärke, Stil usw. definiert. Im obigen Beispiel ist das erste und wichtigste Attribut font-family, sein Wert (im Beispiel "Super Sans") ermöglicht in CSS und in SVG mittels font-family den Zugriff auf die Schriftart. Die Attribute font-weight und font-style erledigen dieselben Aufgaben wie ihre Gegenstücke in CSS. Alle folgenden Attribute sind Rendering-Anweisungen für die Schriftart-Layout-Maschine, zum Beispiel, wie viele Zeichen Gesamthöhen haben, die über der Höhe des Kleinbuchstabens x liegen.

+
+
Das Kind-Tag {{ SVGElement("font-face-src") }} entspricht dem src-Descriptor bei @font-face in CSS. Mittels der Kinder-Tags {{ SVGElement("font-face-name") }} und {{ SVGElement("font-face-uri") }} können auf externe Quellen verwiesen werden. Am obigen Beispiel gezeigt: Wenn dem Renderer lokal eine Schriftart namens "Super Sans Bold" verfügbar ist, soll er diese stattdessen benutzen.

+
+
Das {{ SVGElement("missing-glyph") }}-Tag wird benutzt, um ein Zeichen zu definieren, das angezeigt wird, falls in der Schriftart kein Zeichen an dieser Stelle definiert wurde und auch kein Ausweichmechanismus zur Verfügung steht. Am Beispiel der Definition des Missing-Glyph (im obigen Beispiel) kann gezeigt werden, wie Zeichen gemacht werden: Einfach irgendeine beliebige SVG-Form oder -Pfad einfügen. 

+
+
Auch andere SVG-Tags können hier benutzt werden, zum Beispiel {{ SVGElement("filter") }}, {{ SVGElement("a") }} oder {{ SVGElement("script") }}. Für einfache Zeichen aber kann ein Attribut d hinzugefügt werden. Es definiert den Umriss des Zeichens genau so, wie es beim path-Tag geschieht.

+
+
Ein beliebiges Zeichen wird schließlich mit {{ SVGElement("glyph") }} definiert. Das wichtigste Attribut dabei ist unicode. Es legt den Unicode-Codepoint fest, also ob das definierte Zeichen zum Beispiel anstelle des Buchstabens "F" stehen soll. Wird das Attribut {{htmlattrxref("lang")}} eingesetzt, kann die Verwendung auf eine bestimmte Sprache eingeschränkt werden (abhängig von der Angabe bei xml:lang). Und noch mal, es kann beliebiges SVG genutzt werden, um ein Zeichen zu definieren, was den, der die Schriftart nutzt, sehr unstützt.

+
+
Die Tags {{ SVGElement("hkern") }} und {{ SVGElement("vkern") }} können in font eingesetzt werden. Beide benötigen die Attribute u1 und u2 und das Attribut k, mit dessen Hilfe der Abstand zwischen u1 und u2 individuell verringert werden kann. Das folgende Beispiel rückt "A" und "V" näher zusammen, als es der Standardabstand eigentlich vorsieht.

+
+
<hkern u1="A" u2="V" k="20" />
+

+
+
Auf eine Schriftart zugreifen

+
+
Wenn die Schriftart fertig ist, kann im {{ SVGElement("text") }}-Tag mit dem Attribut font-family auf sie zugegriffen werden:

+
+
<font>
+  <font-face font-family="Super Sans" />
+  <!-- und so weiter -->
+</font>
+
+<text font-family="Super Sans">Mein Text benutzt Super Sans</text>
+

+
+
Die Kombination des Attributs mit anderen Tags ermöglicht, die Schriftart an beliebiger Stelle definieren zu können.

+
+
Option: CSS @font-face benutzen

+
+
@font-face kann benutzt werden, um Zugriff auf externe (und auch nicht-externe) Schriftarten zu bekommen:

+
+
<font id="Super_Sans">
+  <!-- und so weiter -->
+</font>
+
+<style type="text/css">
+@font-face {
+  font-family: "Super Sans";
+  src: url(#Super_Sans);
+}
+</style>
+
+<text font-family="Super Sans">Mein Text benutzt Super Sans</text>

+
+
Option: Zugriff auf eine externe Schriftart

+
+
Das oben erwähnte font-face-uri-Tag ermöglicht den Zugriff auf externe Schriftarten, was eine noch weitere Wiederverwendbarkeit ermöglicht:

+
+
<font>
+  <font-face font-family="Super Sans">
+    <font-face-src>
+      <font-face-uri xlink:href="fonts.svg#Super_Sans" />
+    </font-face-src>
+  </font-face>
+</font>
+

+
+
{{ PreviousNext("Web/SVG/Tutorial/Filter_effects", "Web/SVG/Tutorial/SVG_Image_Tag") }}

diff --git a/files/de/web/svg/tutorial/svg_schriftarten/index.html b/files/de/web/svg/tutorial/svg_schriftarten/index.html
deleted file mode 100644
index 57d826cb5e..0000000000
--- a/files/de/web/svg/tutorial/svg_schriftarten/index.html
+++ /dev/null
@@ -1,99 +0,0 @@
----
-title: SVG-Schriftarten
-slug: Web/SVG/Tutorial/SVG_Schriftarten
-translation_of: Web/SVG/Tutorial/SVG_fonts
----
-
{{ PreviousNext("Web/SVG/Tutorial/Filter_effects", "Web/SVG/Tutorial/SVG_Image_Tag") }}

-
-
Als SVG spezifiziert wurde, war die Unterstützung für Web-Schriftarten in Browsern noch nicht sehr verbreitet. Weil ein Zugriff auf die richtige Schriftart für das korrekte Rendern jedoch so wichtig ist, wurde SVG eine Technologie zur Beschreibung von Schriftarten hinzugefügt, um dies zu ermöglichen. Dabei war eine Kompatibilität mit anderen Formaten wie PostScript oder OTF nicht vorgesehen, sondern vielmehr als ein einfaches Mittel, um Informationen über Zeichen fürs Rendern in SVG einbetten zu können.

-
-
SVG-Schriftarten werden gegenwärtig nur durch Safari und Android-Browser unterstützt. 

-
-

- 
Im Internet Explorer wurde eine Implementierung nicht berücksichtigt, in Chrome 38 wurde sie entfernt (auch in Opera 25) und Firefox hat es auf unbestimmte Zeit verschoben, um sich auf WOFF konzentrieren zu können. Andere Tools jedoch wie Adobe SVG Viewer-Plugin, Batik und Teile von Inkscape unterstützen das Einbetten von SVG-Schriftarten.

-

-
-
Das grundlegende Tag zur Definition einer SVG-Schriftart ist {{ SVGElement("font") }}.

-
-
Eine Schriftart definieren

-
-
Es sind einige Angaben nötig, um eine Schriftart in SVG einzubetten. Gezeigt wird das Beispiel aus der Spezifikation und an ihm werden die Details erklärt.

-
-
<font id="Font1" horiz-adv-x="1000">
-  <font-face font-family="Super Sans" font-weight="bold" font-style="normal"
-      units-per-em="1000" cap-height="600" x-height="400"
-      ascent="700" descent="300"
-      alphabetic="0" mathematical="350" ideographic="400" hanging="500">
-    <font-face-src>
-      <font-face-name name="Super Sans Bold"/>
-    </font-face-src>
-  </font-face>
-  <missing-glyph><path d="M0,0h200v200h-200z"/></missing-glyph>
-  <glyph unicode="!" horiz-adv-x="300"><!-- Umrisslinie von ! --></glyph>
-  <glyph unicode="@"><!-- Umrisslinie von @ --></glyph>
-  <!-- weitere Zeichen -->
-</font>
-

-
-
Am Anfang steht das {{ SVGElement("font") }}-Tag. Es enthält das Attribut id, das einen späteren Zugriff (Referenzierung) mittels URI (siehe unten) ermöglicht. Das Attribut horiz-adv-x legt fest, wie breit ein Zeichen durchschnittlich verglichen zur path-Definition eines einzelnen Zeichens ist. Der Wert 1000 legt einen vernünftigen Wert fest, um damit zu arbeiten. Es gibt weitere Attribute, die helfen, den Kasten näher zu definieren, in dem das Zeichen erstellt werden soll.

-
-
Das {{ SVGElement("font-face") }}-Tag ist das SVG-Gegenstück zu CSS @font-face. Darin werden Grundeinstellungen der fertigen Schriftart wie Schriftstärke, Stil usw. definiert. Im obigen Beispiel ist das erste und wichtigste Attribut font-family, sein Wert (im Beispiel "Super Sans") ermöglicht in CSS und in SVG mittels font-family den Zugriff auf die Schriftart. Die Attribute font-weight und font-style erledigen dieselben Aufgaben wie ihre Gegenstücke in CSS. Alle folgenden Attribute sind Rendering-Anweisungen für die Schriftart-Layout-Maschine, zum Beispiel, wie viele Zeichen Gesamthöhen haben, die über der Höhe des Kleinbuchstabens x liegen.

-
-
Das Kind-Tag {{ SVGElement("font-face-src") }} entspricht dem src-Descriptor bei @font-face in CSS. Mittels der Kinder-Tags {{ SVGElement("font-face-name") }} und {{ SVGElement("font-face-uri") }} können auf externe Quellen verwiesen werden. Am obigen Beispiel gezeigt: Wenn dem Renderer lokal eine Schriftart namens "Super Sans Bold" verfügbar ist, soll er diese stattdessen benutzen.

-
-
Das {{ SVGElement("missing-glyph") }}-Tag wird benutzt, um ein Zeichen zu definieren, das angezeigt wird, falls in der Schriftart kein Zeichen an dieser Stelle definiert wurde und auch kein Ausweichmechanismus zur Verfügung steht. Am Beispiel der Definition des Missing-Glyph (im obigen Beispiel) kann gezeigt werden, wie Zeichen gemacht werden: Einfach irgendeine beliebige SVG-Form oder -Pfad einfügen. 

-
-
Auch andere SVG-Tags können hier benutzt werden, zum Beispiel {{ SVGElement("filter") }}, {{ SVGElement("a") }} oder {{ SVGElement("script") }}. Für einfache Zeichen aber kann ein Attribut d hinzugefügt werden. Es definiert den Umriss des Zeichens genau so, wie es beim path-Tag geschieht.

-
-
Ein beliebiges Zeichen wird schließlich mit {{ SVGElement("glyph") }} definiert. Das wichtigste Attribut dabei ist unicode. Es legt den Unicode-Codepoint fest, also ob das definierte Zeichen zum Beispiel anstelle des Buchstabens "F" stehen soll. Wird das Attribut {{htmlattrxref("lang")}} eingesetzt, kann die Verwendung auf eine bestimmte Sprache eingeschränkt werden (abhängig von der Angabe bei xml:lang). Und noch mal, es kann beliebiges SVG genutzt werden, um ein Zeichen zu definieren, was den, der die Schriftart nutzt, sehr unstützt.

-
-
Die Tags {{ SVGElement("hkern") }} und {{ SVGElement("vkern") }} können in font eingesetzt werden. Beide benötigen die Attribute u1 und u2 und das Attribut k, mit dessen Hilfe der Abstand zwischen u1 und u2 individuell verringert werden kann. Das folgende Beispiel rückt "A" und "V" näher zusammen, als es der Standardabstand eigentlich vorsieht.

-
-
<hkern u1="A" u2="V" k="20" />
-

-
-
Auf eine Schriftart zugreifen

-
-
Wenn die Schriftart fertig ist, kann im {{ SVGElement("text") }}-Tag mit dem Attribut font-family auf sie zugegriffen werden:

-
-
<font>
-  <font-face font-family="Super Sans" />
-  <!-- und so weiter -->
-</font>
-
-<text font-family="Super Sans">Mein Text benutzt Super Sans</text>
-

-
-
Die Kombination des Attributs mit anderen Tags ermöglicht, die Schriftart an beliebiger Stelle definieren zu können.

-
-
Option: CSS @font-face benutzen

-
-
@font-face kann benutzt werden, um Zugriff auf externe (und auch nicht-externe) Schriftarten zu bekommen:

-
-
<font id="Super_Sans">
-  <!-- und so weiter -->
-</font>
-
-<style type="text/css">
-@font-face {
-  font-family: "Super Sans";
-  src: url(#Super_Sans);
-}
-</style>
-
-<text font-family="Super Sans">Mein Text benutzt Super Sans</text>

-
-
Option: Zugriff auf eine externe Schriftart

-
-
Das oben erwähnte font-face-uri-Tag ermöglicht den Zugriff auf externe Schriftarten, was eine noch weitere Wiederverwendbarkeit ermöglicht:

-
-
<font>
-  <font-face font-family="Super Sans">
-    <font-face-src>
-      <font-face-uri xlink:href="fonts.svg#Super_Sans" />
-    </font-face-src>
-  </font-face>
-</font>
-

-
-
{{ PreviousNext("Web/SVG/Tutorial/Filter_effects", "Web/SVG/Tutorial/SVG_Image_Tag") }}

diff --git a/files/de/web/web_components/custom_elements/index.html b/files/de/web/web_components/custom_elements/index.html
deleted file mode 100644
index f6b3761646..0000000000
--- a/files/de/web/web_components/custom_elements/index.html
+++ /dev/null
@@ -1,259 +0,0 @@
----
-title: Benutzerdefinierte Elemente
-slug: Web/Web_Components/Custom_Elements
-translation_of: Web/Web_Components/Using_custom_elements
-translation_of_original: Web/Web_Components/Custom_Elements
----
-
Benutzerdefinierte Elemente sind stellen die Möglichkeit bereit, benutzerdefinierte HTML-Elements zu schaffen. Sie können eigenes durch JavaScript beschriebenes Verhalten und CSS-Styling haben. Sie sind Teil der Web-Components, können aber auch unabhängig von diesen benutzt werden.

-
-

-
Note: Benutzerdefinierte Elemente gelten erst seit Kurzem als stabil definiert und Teile des MDN weisen Dokumentation für veraltete APIs früherer Spezifikationsentwürfe auf.

-

-
-
Obwohl es bereits möglich war, benutzerdefinierte Tag-Namen wie <mytag> zu schaffen, sie mit CSS zu stylen und via JavaScript ihr Verhalten zu beschreiben, haben benutzerdefinierte Elemente ihre Daseinsberechtigung. Ihr großer Vorteil ist das Vorhandensein so genannter Lebenszyklus-Reaktionen, die es erlauben, Methoden zu bestimmten Momenten des "Lebenszyklus" des Elementes aufzurufen. So kann beispielsweise Verhalten beschrieben werden, dass ausgeführt wird, wenn das Element dem DOM hinzugefügt wird ("connected"), wenn es aus diesem entfernt wird ("disconnected") oder sich seine Attribute ändern.

-
-
Die Schlüsselmethode für benutzerdefinierte Elemente ist die {{domxref("CustomElementRegistry.define()")}}-Methode, die benutzt werden kann, um ein neues benutzerdefinierte Elemente zu erschaffen. Dieses neue Element wird dann für jede seiner Instanzen diese neue Klasse anstelle des standardmäßig verwendeten {{domxref("HTMLUnknownElement")}} benutzen. Benutzerdefinierte Elemente können auch auf nativen Elementen wie  <button> basieren, indem sie folgende Syntax benutzen: <button is="my-button"> Sie werden dann benutzerdefinierte eingebaute Elemente genannt.

-
-
Methoden benutzerdefinierter Elemente

-
-
Benutzerdefinierte Elemente besitzen folgende Methoden:

-
-

- 
constructor()

- 
Wird aufgerufen, wenn eine Element erzeugt und erweitert wird.

- 
connectedCallback()

- 
Wird aufgerufen, wenn das Element in das Dokument eingefügt wird, auch wenn es nur der Shadow Tree ist

- 
disconnectedCallback()

- 
Wird aufgerufen, wenn das Element aus dem Dokument entfernt wird.

- 
attributeChangedCallback(attributeName, oldValue, newValue, namespace)

- 
Wird aufgerufen, wenn Attribute des Elements geändert, angefügt, entfernt oder ersetzt werden. Wird nur für beobachtete Attribute aufgerufen.

- 
adoptedCallback(oldDocument, newDocument)

- 
Wird aufgerufen, wenn das Element in ein neues Dokument übernommen wird.

-

-
-
Beispiele

-
-
Benutzerdefinierte Elemente müssen die class Syntax benutzen, die in neueren JavaScript-Versionen bereit steht.

-
-
HTML-Datei:

-
-
Wenn unter diesem Text nichts steht, unterstützt ihr Browser keine benutzerdefinierten Elemente.
-<x-product data-name="Ruby" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/ruby.png" data-url="http://example.com/1"></x-product>
-<x-product data-name="JavaScript" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/javascript.png" data-url="http://example.com/2"></x-product>
-<x-product data-name="Python" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/python.png" data-url="http://example.com/3"></x-product>

-
-
JS-Datei:

-
-
// Klasse für das Element erzeugen
-class XProduct extends HTMLElement {
-  constructor() {
-    // super() muss immer als erstes im Konstruktor aufgerufen werden
-    super();
-
-    // Shadow-Root erzeugen
-    var shadow = this.attachShadow({mode: 'open'});
-
-    // Standard img-Element erzeugen und Attribute setzen
-    var img = document.createElement('img');
-    img.alt = this.getAttribute('data-name');
-    img.src = this.getAttribute('data-img');
-    img.width = '150';
-    img.height = '150';
-    img.className = 'product-img';
-
-    // Bild der Shadow-Root hinzufügen.
-    shadow.appendChild(img);
-
-    // Event-Listener zum Bild hinzufügen.
-    img.addEventListener('click', () => {
-      window.location = this.getAttribute('data-url');
-    });
-
-    // Link zum Produkt erzeugen.
-    var link = document.createElement('a');
-    link.innerText = this.getAttribute('data-name');
-    link.href = this.getAttribute('data-url');
-    link.className = 'product-name';
-
-    // Link der Shadow-Root hinzufügen.
-    shadow.appendChild(link);
-  }
-}
-
-// Neues Element definieren
-customElements.define('x-product', XProduct);
-

-
-
CSS-Datei:

-
-
body {
-  background: #F7F7F7;
-}
-
-x-product {
-  display: inline-block;
-  float: left;
-  margin: 0.5em;
-  border-radius: 3px;
-  background: #FFF;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
-  font-family: Helvetica, arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-}
-
-x-product::slotted(.product-img) {
-  cursor: pointer;
-  background: #FFF;
-  margin: 0.5em;
-}
-
-x-product::slotted(.product-name) {
-  display: block;
-  text-align: center;
-  text-decoration: none;
-  color: #08C;
-  border-top: 1px solid #EEE;
-  font-weight: bold;
-  padding: 0.75em 0;
-}
-

-
-
Unten kann das Live-Beispiel des obigen Codes gesehen werden:

-
-
{{ EmbedLiveSample('Example', '1500', '250', '', 'Web/Web_Components/Custom_Elements') }}

-
-
Beobachtete Attribute

-
-
Um benachrichtigt zu werden, wenn Attribute verändert werden, muss eine Liste von beobachteten Attributen bei der Initialisierung des Elements angelegt werden, in dem eine statische observedAttributes get-Methode der Klasse des Elementes hinzugefügt wird, die ein Array mit den entsprechenden Attributsnamen zurückgibt.

-
-
JS-Datei:

-
-
class HelloElement extends HTMLElement {
-  // Das 'name'-Attribut beobachten.
-  static get observedAttributes() {return ['name']; }
-
-  // Auf Attributsänderungen reagieren.
-  attributeChangedCallback(attr, oldValue, newValue) {
-    if (attr == 'name') {
-      this.textContent = `Hello, ${newValue}`;
-    }
-  }
-}
-
-// Neues Element definieren
-customElements.define('hello-element', HelloElement);
-

-
-
HTML-Datei:

-
-
<hello-element name="Anita"></hello-element>

-
-
Unten kann das Live-Beispiel des obigen Codes gesehen werden:

-
-
{{ EmbedLiveSample('Observed_attributes', '750', '100', '', 'Web/Web_Components/Custom_Elements') }}

-
-
Spezifikationen

-
-
Benutzerdefinierte Elemente sind in der folgenden Spezifikation definiert:

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
SpezifikationStatusKommentar
The HTML Standard: Custom elementsLS 

-
-
Browserkompatibilität

-
-
{{CompatibilityTable}}

-
-

-
- 
-  
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-  
- 
-
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatNo}}{{CompatChrome(59.0)}}{{CompatNo}}{{CompatOpera(47.0)}}10.1
Benutzerdefinierte eingebaute Elemente{{CompatNo}}{{CompatChrome(59.0)}}{{CompatNo}}{{CompatOpera(47.0)}}{{CompatNo}}

-

-
-

-
- 
-  
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-  
- 
-
FeatureFirefox Mobile (Gecko)Chrome for AndroidIE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatNo}}{{CompatChrome(56.0)}}{{CompatNo}}{{CompatOpera(47.0)}}10.1
Benutzerdefinierte eingebaute Elemente{{CompatNo}}{{CompatChrome(56.0)}}{{CompatNo}}{{CompatOpera(47.0)}}{{CompatNo}}

-

-
-
1. Firefox hat eine "dom.webcomponents.enabled"-Eigenschaft in about:config, dennoch ist sind benutzerdefinierte Elemente nicht verfügbar, wenn diese auf true gesetzt wurde.

-
-
-
-
-
-
Resources

-
-
diff --git a/files/de/web/webapi/index.html b/files/de/web/webapi/index.html
deleted file mode 100644
index 0726dd787a..0000000000
--- a/files/de/web/webapi/index.html
+++ /dev/null
@@ -1,134 +0,0 @@
----
-title: WebAPI
-slug: Web/WebAPI
-tags:
-  - Apps
-  - DOM
-  - Firefox OS
-  - Mobile
-translation_of: Web/API
-translation_of_original: WebAPI
----
-
WebAPI ist ein Begriff, der auf eine Palette von Zugangs APIs verweist, die Web-Anwendungen erlaubt auf Geräte-Hardware (wie z. B. den Batteriestatus oder die Vibrations Hardware) zu zugreifen. Der Zugriff auf Daten (z. B. Kalender oder Kontakte), die auf dem Gerät gespeichert wurden ist ebenso möglich. Durch das Hinzufügen dieser APIs, hoffen wir, dass das Web um Funktionen erweitert wird, die proprietär Plattformen schon länger bereitstellen.

-
-

-
Hinweis: More of this documentation has been written than it looks like; links are not all added yet. We're actively working on improving this and expect to see things much better over the next couple of weeks. See the WebAPI doc status page, where we're tracking work on WebAPI docs.

-

-
-

-
Hinweis: Eine kurze Erläuterung der einzelnen Plaketten finden Sie in der Dokumentation für gepackte Apps.

-

-
-

-

-
Kommunikations APIs

-
-

- 
Netzwerkinformation API

- 
Stellt grundlegende Informationen über die aktuelle Netzwerkverbindung so wie Verbindungsgeschwindigkeit zur verfügung.

- 
Bluetooth {{NonStandardBadge}}

- 
Die WebBluetooth API bietet Low-Level-Zugriff auf die Bluetooth-Hardware des Geräts.

- 
Mobile Verbindung API {{NonStandardBadge}}

- 
Bietet Informationen über die Mobilfunk-Konnektivität des Gerätes, Signalstärke, Bedieninformationen, usw.

- 
Netzwerkstatistik API {{NonStandardBadge}}

- 
Zeichnet die Datennutzung auf und stellt diese Daten privilegierten Anwendungen zurverfügung.

- 
TCP Socket API {{NonStandardBadge}}

- 
Bietet Low-Level-Sockets und SSL-Unterstützung.

- 
Telefonie {{NonStandardBadge}}

- 
Ermöglicht Apps Anrufe zu tätigen, entgegen zu nehmen und die integrierte Telefonie-Benutzeroberfläche zu nutzen.

- 
WebSMS {{NonStandardBadge}}

- 
Ermöglicht Apps SMS-Nachrichten zu senden und zu empfangen, sowie den Zugriff und die Verwaltung der auf dem Gerät gespeicherten Nachrichten.

- 
WiFi-Informations API {{NonStandardBadge}}

- 
Eine privilegierte API, die Informationen über Signalstärke, den Namen des aktuellen Netzwerks und Verfügbare WiFi-Netzwerke bereit stellt.

-

-
-
Hardware Zugriff APIs

-
-

- 
Umgebungslichtsensor API

- 
Bietet Zugriff auf den Umgebungslichtsensor der es einer App möglich macht die Umgebungslichtstärke in der Umgebung des Geräts erfassen können.

- 
Batteriestatus API

- 
Enthält Informationen über den Ladezustand der Batterie und ob das Gerät gerade and den Strom angeschlossen ist.

- 
Geolocation API

- 
Stellt Informationen zu physischen Standort des Gerätes bereit.

- 
Zeiger Sperr API

- 
Ermöglicht Apps den Zugriff auf die Maus zu sperren und gewährt den Zugang zu Bewegung Deltas anstatt absoluten Koordinaten; das ist großartig für Spiele.

- 
Annäherungs API

- 
Mit dieser API können Sie eine Annäherung an das Gerät erfassen, wie durch ein Objekt oder das Gesicht des Benutzers.

- 
Geräte Ausrichtungs API

- 
Bietet Benachrichtigung, wenn sich die Ausrichtung des Gerätes ändert.

- 
Bildschirmausrichtungs API

- 
Bietet Benachrichtigung, wenn sich die Ausrichtung des Bildschirms ändert. Diese API ermöglicht ihrer App fest zu legen welche Ausrichtung sie bevorzugt.

- 
Vibrations API

- 
Ermöglicht Apps die Vibrations Hardware des Geräts zu steuern (für Dinge wie haptisches Feedback in Spielen). Dies ist nicht für Dinge wie Benachrichtigungs Vibrationen bestimmt. Siehe Alarm API.

- 
Kamera API {{NonStandardBadge}}

- 
Ermöglicht es Apps, Fotos und / oder Videoaufnahmen mit der in das Gerät integrierten Kamera zu machen.

- 
Energieverwaltungs API {{NonStandardBadge}}

- 
Ermöglicht Apps das Ein-und Ausschalten von Bildschirm, CPU, Netzgerät und so weiter. Auch bietet es Unterstützung für das Lauschen auf und das Untersuchen von Ressourcensperre Events.

-

-
-
Alles anzeigen...

-

-
-

-
Datenverwaltungs APIs

-
-

- 
FileHandle API {{NonStandardBadge}}

- 
Bietet Unterstützung für schreibbare Dateien mit Sperr Unterstützung.

- 
IndexedDB

- 
Client-seitige Speicherung von strukturierten Daten mit Unterstützung für High-Performance-Suchanfragen.

- 
Einstellungen API {{NonStandardBadge}}

- 
Bietet Apps die Möglichkeit, systemweite Konfigurationsoptionen, die dauerhaft auf dem Gerät gespeichert sind, zu prüfen und zu ändern.

-

-
-
Weitere APIs

-
-

- 
Alarm API

- 
Ermöglicht es Apps, Benachrichtigungen zeitlich festzulegen. Bietet auch Unterstützung dafür, eine App zu einem bestimmten Zeitpunkt automatisch zu starten.

- 
Einfache Push API

- 
Lässt die Plattform Benachrichtigungsmeldungen an bestimmte Anwendungen senden.

- 
Web Meldungen

- 
Ermöglicht Anwendungen das Senden von Meldungen, welche auf Systemebene angezeigt werden.

- 
Apps API {{NonStandardBadge}}

- 
Die Open WebApps API unterstützt die Installation und Verwaltung von Web-Apps. Darüber hinaus wird Unterstützung für die Ermittlung von Zahlungsinformationen für Apps bereitgestellt.

- 
Web Activities {{NonStandardBadge}}

- 
Ermöglicht einer App das Delegieren einer Aktivität an eine andere Anwendung; beispielsweise könnte eine App eine andere App bitten, ein Foto auszuwählen (oder zu erstellen) und dieses zurückzuliefern. Normalerweise kann der Anwender konfigurieren, welche Apps für welche Tätigkeiten eingesetzt werden.

- 
Web-Bezahlung API {{NonStandardBadge}}

- 
Ermöglicht es Web-Inhalten, Zahlungen und Erstattungen für virtuelle Güter zu initiieren.

- 
Browser API {{NonStandardBadge}}

- 
Bietet Unterstützung für den Aufbau eines Web-Browsers komplett mit Web-Technologien (im Wesentlichen, einen Browser in einem Browser).

-

-
-

- 
Idle API

- 
Ermöglicht Apps Benachrichtigungen zu erhalten, wenn der Benutzer das Gerät nicht aktiv verwendet.

- 
Berechtigungen API {{NonStandardBadge}}

- 
Verwaltet App-Berechtigungen an einem zentralen Ort. Wird von der Einstellungen-App verwendet.

- 
Zeit/Uhr API {{NonStandardBadge}}

- 
Bietet Unterstützung für die Einstellung der aktuellen Uhrzeit. Die Zeitzone wird eingestellt mit der Einstellungen API.

-

-
-
WebAPI Community

-
-
Wenn Sie Hilfe mit diesen APIs benötigen, gibt es mehrere Möglichkeiten, sprechen sie mit Entwicklern.

-
-
    
- 
  • Wenden Sie sich an das WebAPI Forum: {{DiscussionList("dev-webapi", "mozilla.dev.webapi")}}
    • 
- 
  • Besuchen Sie den WebAPI IRC-Kanal: #webapi
    • 
-

-
-
Don't forget about the netiquette...

-
-
-
-
-

-

-
-
 

diff --git a/files/de/web/webapi/verwenden_von_geolocation/index.html b/files/de/web/webapi/verwenden_von_geolocation/index.html
deleted file mode 100644
index 65be452a5a..0000000000
--- a/files/de/web/webapi/verwenden_von_geolocation/index.html
+++ /dev/null
@@ -1,291 +0,0 @@
----
-title: Verwenden von geolocation
-slug: Web/WebAPI/verwenden_von_geolocation
-translation_of: Web/API/Geolocation_API
----
-
Die "geolocation"-API ermöglicht es Nutzern, einer Web-Applikation die eigene Position mitzuteilen. Um die Privatsphäre des Nutzers zu schützen, wird dieser vorher um Erlaubnis gebeten und muss der Übermittlung zustimmen.

-
-
Das geolocation-Objekt

-
-
Die geolocation-API wird durch das {{domxref("window.navigator.geolocation","navigator.geolocation")}}-Objekt offengelegt.

-
-
Wenn das Objekt existiert, sind die geolocation-Services vorhanden und nutzbar. Sie können die Funktionstüchtigkeit daher wie folgt testen:

-
-
if ("geolocation" in navigator) {
-  /* geolocation funktioniert */
-} else {
-  /* geolocation funktioniert NICHT */
-}
-

-
-

-
Notiz: In Firefox 24 und älteren Versionen hat "geolocation" in navigator immer true zurückgegeben, auch wenn die API ausgeschaltet war. Dies wurde mit Firefox 25 gelöst um mit dem Standard kompatibel zu sein. ({{ bug(884921) }})

-

-
-
Die derzeitige Position abfragen

-
-
Um die derzeitige Position des Nutzers zu erhalten, können Sie die Methode {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}} aufrufen. Dies startet eine asynchrone Anfrage für den Abruf der Position zu initiieren. Wenn die Position erhalten wurde, wird die übergebene Callback-Funktion ausgeführt. Sie können optional auch eine zweite Callback-Funktion übergeben, welche im Falle eines Fehlers ausgeführt wird. Ein dritter, optionaler Parameter ist ein Konfigurationsobjekt, in dem Sie das maximale Alter der zurückgegeben Position, die maximale Wartezeit für die Anfrage und den Wunsch für eine hohe Genauigkeit festlegegen können.

-
-

-
Notiz: Standardmäßig versucht {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}} so schnell wie möglich mit einer geringen Genauigkeit zu antworten. Es ist nützlich wenn Sie eine schnelle Antwort benötigen, unabhängig von der Genauigkeit. Beispielsweise Geräte mit einem GPS können eine Minute oder länger benötigen um eine neue Position zu erhalten, also kann es möglich sein, dass weniger genaue Daten (Ort der IP oder von WLANs) zurückgegeben werden.

-

-
-
navigator.geolocation.getCurrentPosition(function(position) {
-  do_something(position.coords.latitude, position.coords.longitude);
-});

-
-
Das obige Beispiel wird die Funktion do_something() ausführen, wenn eine Position erhalten wurde.

-
-
Die derzeitige Position überwachen

-
-
Wenn sich die Positionsdaten ändern (entweder über die Bewegung des Gerätes oder den Erhalt genauere Geolokationsdaten), können Sie eine Callback-Funktion erstellen, die mit der erneuerten Positionsinformation arbeitet. Dies ist über die Funktion {{domxref("window.navigator.geolocation.watchPosition()","watchPosition()")}} möglich, welche die gleichen Eingabeparameter wie {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}}. besitzt. Die Callback-Funktion wird mehrere Male ausgeführt, dies erlaubt dem Browser die Position aufgrund von Bewegungen oder genaueren Positionsdaten, durch das Verwenden von anderen (langsameren) Methoden, zu erneuern. Die Fehler-Callback-Funktion, welche wie auch in {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}},  hier optional ist, kann auch mehrfach aufgerufen werden.

-
-

-
Notiz: Sie können  {{domxref("window.navigator.geolocation.watchPosition()","watchPosition()")}} auch ohne ein vorangestellten Aufruf von {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}} nutzen.

-

-
-
var watchID = navigator.geolocation.watchPosition(function(position) {
-  do_something(position.coords.latitude, position.coords.longitude);
-});

-
-
Die Methode {{domxref("window.navigator.geolocation.watchPosition()","watchPosition()")}} gibt eine numerische ID zurück, die für die eindeutige Identifikation des Positionsüberwachers verwendet werden kann; diese können Sie in der Methode {{domxref("window.navigator.geolocation.clearWatch()","clearWatch()")}} nutzen, um die Positionsüberwachung zu beenden.

-
-
navigator.geolocation.clearWatch(watchID);
-

-
-
Anpassen der Antwort

-
-
Sowohl {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}} als auch {{domxref("window.navigator.geolocation.watchPosition()","watchPosition()")}} nehmen einen Erfolgs-Callback an, einen optionalen Fehler-Callback und ein optionales PositionOptions-Objekt.

-
-
{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","PositionOptions")}}

-
-
Ein Aufruf von {{domxref("window.navigator.geolocation.watchPosition()","watchPosition")}} könnte wie folgt aussehen:

-
-
function geo_success(position) {
-  do_something(position.coords.latitude, position.coords.longitude);
-}
-
-function geo_error() {
-  alert("Entschuldigung, keine Positionsinformationen sind verfügbar.");
-}
-
-var geo_options = {
-  enableHighAccuracy: true,
-  maximumAge        : 30000,
-  timeout           : 27000
-};
-
-var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, geo_options);

-
-
Ein (englisches) Beispiel von watchPosition in Aktion: http://www.thedotproduct.org/experiments/geo/

- 

-
-
Darstellung einer Position

-
-
Die Position des Nutzers wird durch ein Position-Objekt dargestellt, welches ein Coordinates-Objekt referenziert.

-
-
{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","Position")}}

-
-
{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","Coordinates")}}

-
-
Fehlerbehandlung

-
-
Die Fehler-Callback-Funktion, wenn im Aufruf von getCurrentPosition() oder watchPosition() vorhanden, nimmt ein PositionError-Objekt als ersten Parameter an.

-
-
function errorCallback(error) {
-  alert('ERROR(' + error.code + '): ' + error.message);
-};
-

-
-
{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","PositionError")}}

-
-
Geolokations-Live-Beispiel

-
-
-
-
HTML Content

-
-
<p><button onclick="geoFindMe()">Zeige meine Position an</button></p>
-<div id="out"></div>
-

-
-
JavaScript Content

-
-
function geoFindMe() {
-  var output = document.getElementById("out");
-
-  if (!navigator.geolocation){
-    output.innerHTML = "<p>Geolokation wird von ihrem Browser nicht unterstützt</p>";
-    return;
-  }
-
-  function success(position) {
-    var latitude  = position.coords.latitude;
-    var longitude = position.coords.longitude;
-
-    output.innerHTML = '<p>Die Latitude ist ' + latitude + '° <br>Die Longitude ist ' + longitude + '°</p>';
-
-    var img = new Image();
-    img.src = "http://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=300x300&sensor=false";
-
-    output.appendChild(img);
-  };
-
-  function error() {
-    output.innerHTML = "Es war nicht möglich Sie zu lokalisieren";
-  };
-
-  output.innerHTML = "<p>Lokalisieren…</p>";
-
-  navigator.geolocation.getCurrentPosition(success, error);
-}
-

-
-
Demo:

-
-
{{ EmbedLiveSample('Geolokations-Live-Beispiel',350,410) }}

-
-
Für die Erlaubnis fragen

-
-
Jedes Add-On von addons.mozilla.org, welches dieses Feature nutzt, muss explizit, ähnlich der automatischen Frage von Websites, nach Erlaubnis fragen. Die Antwort des Nutzers wird in einer Konfiguration gespeichert, welche von pref-Parameter bestimmt wird, wenn möglich. Die Funktion, die als callback-Parameter verwendet wird mit einem boolischen Wert aufgerufen, welcher die Antwort des Nutzers anzeigt. Wenn dieser true ist, kann das Add-On Geolokationsdaten nutzen.

-
-
function prompt(window, pref, message, callback) {
-    let branch = Components.classes["@mozilla.org/preferences-service;1"]
-                           .getService(Components.interfaces.nsIPrefBranch);
-
-    if (branch.getPrefType(pref) === branch.PREF_STRING) {
-        switch (branch.getCharPref(pref)) {
-        case "always":
-            return callback(true);
-        case "never":
-            return callback(false);
-        }
-    }
-
-    let done = false;
-
-    function remember(value, result) {
-        return function() {
-            done = true;
-            branch.setCharPref(pref, value);
-            callback(result);
-        }
-    }
-
-    let self = window.PopupNotifications.show(
-        window.gBrowser.selectedBrowser,
-        "geolocation",
-        message,
-        "geo-notification-icon",
-        {
-            label: "Ort teilen",
-            accessKey: "S",
-            callback: function(notification) {
-                done = true;
-                callback(true);
-            }
-        }, [
-            {
-                label: "Immer teilen",
-                accessKey: "A",
-                callback: remember("always", true)
-            },
-            {
-                label: "Niemals teilen",
-                accessKey: "N",
-                callback: remember("never", false)
-            }
-        ], {
-            eventCallback: function(event) {
-                if (event === "dismissed") {
-                    if (!done) callback(false);
-                    done = true;
-                    window.PopupNotifications.remove(self);
-                }
-            },
-            persistWhileVisible: true
-        });
-}
-
-prompt(window,
-       "extensions.foo-addon.allowGeolocation",
-       "Foo Add-on möchte deinen Ort abrufen.",
-       function callback(allowed) { alert(allowed); });
-

-
-
Browser compatibility

-
-
{{ CompatibilityTable() }}

-
-
 

-
-

-
- 
-  
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-  
- 
-
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundsätzlicher Support5{{CompatGeckoDesktop("1.9.1")}}910.60

-    Removed in 15.0

-    Reintroduced in 16.0		5

-

-
-

-
- 
-  
-   
-   
-   
-   
-   
-   
-   
-  
-  
-   
-   
-   
-   
-   
-   
-   
-  
- 
-
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundsätzlicher Support2.111{{CompatGeckoMobile("4")}}1010.603.2

-

-
-
Gecko-Notizen

-
-
Firefox besitzt Support für das Lokalisieren über WLAN-Informationen durch die "Google Location"-Services. In einer Transaktion zwischen Firefox und Google werden die Daten übetragen, inklusive Daten des WLAN-Zugriffspunktes, einem Zugriffstoken (ähnlich wie ein zweiwöchiger Cookie), und der IP-Adresse des Nutzers. Für mehr Informationen sollten Sie Mozillas und Googles Datenschutzbestimmungen lesen, welche den Rahmen der Datennutzung angeben.

-
-
Siehe auch

-
-
diff --git "a/files/de/web/xml/xml_einf\303\274hrung/index.html" "b/files/de/web/xml/xml_einf\303\274hrung/index.html"
deleted file mode 100644
index 43b0433193..0000000000
--- "a/files/de/web/xml/xml_einf\303\274hrung/index.html"
+++ /dev/null
@@ -1,63 +0,0 @@
----
-title: XML_Einführung
-slug: Web/XML/XML_Einführung
-tags:
-  - XML
-translation_of: Web/XML/XML_introduction
----
-
Was ist XML?

-
XML ist eine Auszeichnungssprache ähnlich wie HTML. XML steht für Extensible Markup Language (Erweiterbare Auszeichnungssprache) und ist eine Standardisierte Spezifikation, die für allgemeingültige Zwecke genutzt werden kann. Das bedeutet, dass, im Gegensatz zu anderen Auszeichnungssprachen, XML nicht vordefiniert ist, sodass eigene Tags definiert werden müssen. Die hauptsächliche Aufgabe der Sprache besteht darin, Daten über unterschiedliche Systeme auszutauschen, so wie im Internet.

-
Es gibt eine Vielzahl an Sprachen, die auf XML basieren: Einige Beispiele sind: XHTML, MathML, SVG, XUL, XBL, RSS, und RDF.

-
"Korrektes" XML

-
Ein XML-Dokument kann erst dann als korrekt bezeichnet werden, wenn es wohlgeformt (well-formed) ist, was bedeutet, dass es allen Syntaxregeln für XML entspricht. Die meisten Browser (einschließlich Mozilla) bieten einen Debugger, der bei nicht wohlgeformten Dokumenten warnt.

-
Ein Beispiel für ein Dokument, welches nicht korrekt formatiert ist, wäre ein Element mit einem öffnenden aber ohne einem schließenden Tag und welches nicht selbst-schließend ist. Das folgende Beispiel ist demnach fehlerhaft:

-
Beispiel

-
<nachricht>
- <warnung>
-   Hallo Welt
-</nachricht>
-

-
Das korrekte Beispiel würde so aussehen:

-
 

-
<nachricht>
- <warnung>
-   Hallo Welt
- </warnung>
-</nachricht>
-

-
Damit ein XML Dokument valide ist, müssen einige semantische Regeln erfüllt sein, welche normalerweise in einem XML Schema oder einer Dokumenttyp-Definition festgelegt werden. Ein Beispiel für nicht valides XML wäre ein Dokument, das ein nicht definiertes Tag enthält. Zum Beispiel, wenn ein warnung Tag niemals zuvor definiert wurde.

-
Entities

-
Wie in HTML, gibt es in XML sogenannte Entities, um spezielle, reservierte Zeichen (wie das Größer-als-Zeichen, welches für Tags benutzt wird) zu verwenden. Es gibt fünf nennenswerte, die man wissen sollte:

-
&lt; 	< 	      Kleiner-als-Zeichen
-&gt; 	> 	      Größer-als-Zeichen
-&amp; 	& 	      Ampersand (Und Zeichen).
-&quot; 	" 	      Anführungszeichen.
-&apos; 	' 	      Apostroph.
-

-
Da nur fünf Entities deklariert sind, können weitere mittels der Dokumenttyp-Definition hinzugefügt werden.

-
 <?xml version="1.0" encoding="UTF-8"?>
- <!DOCTYPE body [
-     <!ENTITY warnung "Warnung: Irgendetwas ist schief gelaufen... Bitte lade neu und versuch es nochmal.">
- ]>
- <body>
-   <nachricht> &warnung; </nachricht>
- </body>
-

-
XML Darstellung

-
Normalerweise wird XML zur Beschreibung von Daten benutzt, es gibt allerdings Wege, um XML-Daten darzustellen. Ohne eine Darstellungsart festzulegen, wird  der rohe XML-Code im Browser angezeigt.

-
Eine Art XML darzustellen ist, CSS in XML mittels der xml-stylesheet Anweisung zu integrieren:

-
<?xml-stylesheet type="text/css" href="stylesheet.css"?>

-
Oder aber man benutzt das mächtige XSLT, das XML-Daten in HTML umwandeln kann oder auch in viele andere Dinge; die Möglichkeiten sind fast grenzenlos.

-
<?xml-stylesheet type="text/xsl" href="transform.xsl"?>

-
Empfehlungen

-
Dieser Artikel bietet nur eine schnelle Einführung in XML mit ein paar kleinen Beispielen, die einen Einblick liefern und Lust auf mehr machen sollen. Für weitere Details über XML, gibt es einige tiefer gehende Artikel im Web.

-
Um ein besseres Verständnis für XML zu bekommen bietet sich auch an, mehr über die HyperText Markup Language (HTML) zu lernen.

-
Einige nützliche Links (Englisch):

-
-

-
Informationen zu diesem Dokument

-
-

-
{{ languages( { "en": "en/XML_Introduction", "es": "es/Introducci\u00f3n_a_XML", "fr": "fr/Introduction_\u00e0_XML", "ja": "ja/XML_Introduction", "pl": "pl/Wprowadzenie_do_XML-a", "zh-cn": "cn/XML_\u4ecb\u7ecd" } ) }}

diff --git a/files/de/web/xml/xml_introduction/index.html b/files/de/web/xml/xml_introduction/index.html
new file mode 100644
index 0000000000..43b0433193
--- /dev/null
+++ b/files/de/web/xml/xml_introduction/index.html
@@ -0,0 +1,63 @@
+---
+title: XML_Einführung
+slug: Web/XML/XML_Einführung
+tags:
+  - XML
+translation_of: Web/XML/XML_introduction
+---
+
Was ist XML?

+
XML ist eine Auszeichnungssprache ähnlich wie HTML. XML steht für Extensible Markup Language (Erweiterbare Auszeichnungssprache) und ist eine Standardisierte Spezifikation, die für allgemeingültige Zwecke genutzt werden kann. Das bedeutet, dass, im Gegensatz zu anderen Auszeichnungssprachen, XML nicht vordefiniert ist, sodass eigene Tags definiert werden müssen. Die hauptsächliche Aufgabe der Sprache besteht darin, Daten über unterschiedliche Systeme auszutauschen, so wie im Internet.

+
Es gibt eine Vielzahl an Sprachen, die auf XML basieren: Einige Beispiele sind: XHTML, MathML, SVG, XUL, XBL, RSS, und RDF.

+
"Korrektes" XML

+
Ein XML-Dokument kann erst dann als korrekt bezeichnet werden, wenn es wohlgeformt (well-formed) ist, was bedeutet, dass es allen Syntaxregeln für XML entspricht. Die meisten Browser (einschließlich Mozilla) bieten einen Debugger, der bei nicht wohlgeformten Dokumenten warnt.

+
Ein Beispiel für ein Dokument, welches nicht korrekt formatiert ist, wäre ein Element mit einem öffnenden aber ohne einem schließenden Tag und welches nicht selbst-schließend ist. Das folgende Beispiel ist demnach fehlerhaft:

+
Beispiel

+
<nachricht>
+ <warnung>
+   Hallo Welt
+</nachricht>
+

+
Das korrekte Beispiel würde so aussehen:

+
 

+
<nachricht>
+ <warnung>
+   Hallo Welt
+ </warnung>
+</nachricht>
+

+
Damit ein XML Dokument valide ist, müssen einige semantische Regeln erfüllt sein, welche normalerweise in einem XML Schema oder einer Dokumenttyp-Definition festgelegt werden. Ein Beispiel für nicht valides XML wäre ein Dokument, das ein nicht definiertes Tag enthält. Zum Beispiel, wenn ein warnung Tag niemals zuvor definiert wurde.

+
Entities

+
Wie in HTML, gibt es in XML sogenannte Entities, um spezielle, reservierte Zeichen (wie das Größer-als-Zeichen, welches für Tags benutzt wird) zu verwenden. Es gibt fünf nennenswerte, die man wissen sollte:

+
&lt; 	< 	      Kleiner-als-Zeichen
+&gt; 	> 	      Größer-als-Zeichen
+&amp; 	& 	      Ampersand (Und Zeichen).
+&quot; 	" 	      Anführungszeichen.
+&apos; 	' 	      Apostroph.
+

+
Da nur fünf Entities deklariert sind, können weitere mittels der Dokumenttyp-Definition hinzugefügt werden.

+
 <?xml version="1.0" encoding="UTF-8"?>
+ <!DOCTYPE body [
+     <!ENTITY warnung "Warnung: Irgendetwas ist schief gelaufen... Bitte lade neu und versuch es nochmal.">
+ ]>
+ <body>
+   <nachricht> &warnung; </nachricht>
+ </body>
+

+
XML Darstellung

+
Normalerweise wird XML zur Beschreibung von Daten benutzt, es gibt allerdings Wege, um XML-Daten darzustellen. Ohne eine Darstellungsart festzulegen, wird  der rohe XML-Code im Browser angezeigt.

+
Eine Art XML darzustellen ist, CSS in XML mittels der xml-stylesheet Anweisung zu integrieren:

+
<?xml-stylesheet type="text/css" href="stylesheet.css"?>

+
Oder aber man benutzt das mächtige XSLT, das XML-Daten in HTML umwandeln kann oder auch in viele andere Dinge; die Möglichkeiten sind fast grenzenlos.

+
<?xml-stylesheet type="text/xsl" href="transform.xsl"?>

+
Empfehlungen

+
Dieser Artikel bietet nur eine schnelle Einführung in XML mit ein paar kleinen Beispielen, die einen Einblick liefern und Lust auf mehr machen sollen. Für weitere Details über XML, gibt es einige tiefer gehende Artikel im Web.

+
Um ein besseres Verständnis für XML zu bekommen bietet sich auch an, mehr über die HyperText Markup Language (HTML) zu lernen.

+
Einige nützliche Links (Englisch):

+
+

+
Informationen zu diesem Dokument

+
+

+
{{ languages( { "en": "en/XML_Introduction", "es": "es/Introducci\u00f3n_a_XML", "fr": "fr/Introduction_\u00e0_XML", "ja": "ja/XML_Introduction", "pl": "pl/Wprowadzenie_do_XML-a", "zh-cn": "cn/XML_\u4ecb\u7ecd" } ) }}

diff --git a/files/de/web/xpath/introduction_to_using_xpath_in_javascript/index.html b/files/de/web/xpath/introduction_to_using_xpath_in_javascript/index.html
new file mode 100644
index 0000000000..6af0ba9e0e
--- /dev/null
+++ b/files/de/web/xpath/introduction_to_using_xpath_in_javascript/index.html
@@ -0,0 +1,411 @@
+---
+title: Einführung in den Gebrauch von XPath in JavaScript
+slug: Web/JavaScript/Einführung_in_den_Gebrauch_von_XPath_in_JavaScript
+translation_of: Web/XPath/Introduction_to_using_XPath_in_JavaScript
+---
+
Dieses Dokument beschreibt die Schnittstelle zu XPath in JavaScript intern, in Erweiterungen und in Webseiten. Mozilla implementiert einen großen Teil von DOM 3 XPath, sodass XPath auf HTML- und XML-Dokumente angewendet werden kann.

+
+
Die Hauptschnittstelle für die Anwendung von XPath ist die evaluate-Methode des document-Objekts.

+
+
document.evaluate

+
+
Diese Methode wertet  XPath Ausdrücke in Bezug auf ein XML basierendes Dokument (einschließlich HTML-Documente) aus und gibt ein XPathResult-Objekt zurück, das ein Einzelknoten oder eine Zusammenstellung mehrerer Knoten sein kann. Die vorhandene Dokumentation dieser Methode ist unter document.evaluate zu finden, sie ist jedoch für unseren jetzigen Bedarf ziemlich knapp gehalten. Eine umfangreichere Betrachtung wird nachfolgend beschrieben.

+
+
var xpathResult = document.evaluate( xpathExpression, contextNode, namespaceResolver, resultType, result );
+

+
+
Parameter

+
+
Die evaluate Funktion nimmt insgesamt fünf Parameter entgegen:

+
+
    
+ 
  • xpathExpression: Eine Zeichenkette, die den auszuwertenden XPath-Ausdrucks beinhaltet.
    • 
+ 
  • contextNode: Ein Bezugsknoten im Dokument, auf den sich die Auswertung von xpathExpression beziehen soll, einschließlich sämtlicher Kindknoten. Am häufigsten wird hierfür der document-Knoten verwendet.
    • 
+ 
  • namespaceResolver: A function that will be passed any namespace prefixes contained within xpathExpression which returns a string representing the namespace URI associated with that prefix. This enables conversion between the prefixes used in the XPath expressions and the possibly different prefixes used in the document. The function can be either:
+  
      
+   
    • Created by using the createNSResolver method of a XPathEvaluator object. You should use this virtually all of the time.
      • 
+   
    • null, which can be used for HTML documents or when no namespace prefixes are used. Note that, if the xpathExpression contains a namespace prefix, this will result in a DOMException being thrown with the code NAMESPACE_ERR.
      • 
+   
    • A custom user-defined function. See the Using a User Defined Namespace Resolver section in the appendix for details.
      • 
+  
    
+ 
    • 
+ 
  • resultType: Eine Konstante, die den gewünschten Rückgabetyp als Ergebnis der Auswertung angibt. Die am häufigsten übergebene Konstante ist XPathResult.ANY_TYPE, die eine Rückgabe der Ergebnisse in in einer Weise liefert, die den sebstverständlichen Erwartungen am ehesten entspricht. Im Anhang ist ein Abschnitt zu finden, der eine vollständige Liste der der verfügbaren Konstanten enthält. Sie werden weiter unten im Abschnitt  "Festlegung des Rückgabetyps" erläutert.
    • 
+ 
  • result: Wird ein vorhandenes XPathResult-Objekt angegeben, so wird es für die Ergebnisrückgabe wiederverwendet. Bei der Angabe von null wird ein neues XPathResult-Objekt erzeugt.
    • 
+

+
+
Rückgabewert

+
+
Returns xpathResult, which is an XPathResult object of the type specified in the resultType parameter. The XPathResult Interface is defined {{ Source("dom/interfaces/xpath/nsIDOMXPathResult.idl", "here") }}.

+
+
Einen Standard-Namensraumauflöser (Default Namespace Resolver) implementieren

+
+
Wir erstellen einen Namensraumauflöser mit Hilfe der createNSResolver-Methode des document-Objekts.

+
+
var nsResolver = document.createNSResolver( contextNode.ownerDocument == null ? contextNode.documentElement : contextNode.ownerDocument.documentElement );
+

+
+
Or alternatively by using the <code>createNSResolver</code> method of a <code>XPathEvaluator</code> object. <pre> var xpEvaluator = new XPathEvaluator(); var nsResolver = xpEvaluator.createNSResolver( contextNode.ownerDocument == null ? contextNode.documentElement : contextNode.ownerDocument.documentElement ); </pre> And then pass document.evaluate, the nsResolver variable as the namespaceResolver parameter.

+
+
Note: XPath defines QNames without a prefix to match only elements in the null namespace. There is no way in XPath to pick up the default namespace as applied to a regular element reference (e.g., p[@id='_myid'] for xmlns='http://www.w3.org/1999/xhtml'). To match default elements in a non-null namespace, you either have to refer to a particular element using a form such as ['namespace-uri()='http://www.w3.org/1999/xhtml' and name()='p' and @id='_myid'] (this approach works well for dynamic XPath's where the namespaces might not be known) or use prefixed name tests, and create a namespace resolver mapping the prefix to the namespace. Read more on how to create a user defined namespace resolver, if you wish to take the latter approach.

+
+
Anmerkungen

+
+
Adapts any DOM node to resolve namespaces so that an XPath expression can be easily evaluated relative to the context of the node where it appeared within the document. This adapter works like the DOM Level 3 method lookupNamespaceURI on nodes in resolving the namespaceURI from a given prefix using the current information available in the node's hierarchy at the time lookupNamespaceURI is called. Also correctly resolves the implicit xml prefix.

+
+
Festlegung des Rückgabetyps

+
+
The returned variable xpathResult from document.evaluate can either be composed of individual nodes (simple types), or a collection of nodes (node-set types).

+
+
Simple Types

+
+
When the desired result type in resultType is specified as either:

+
+
    
+ 
  • NUMBER_TYPE - a double
    • 
+ 
  • STRING_TYPE - a string
    • 
+ 
  • BOOLEAN_TYPE - a boolean
    • 
+

+
+
We obtain the returned value of the expression by accessing the following properties respectively of the XPathResult object.

+
+
    
+ 
  • numberValue
    • 
+ 
  • stringValue
    • 
+ 
  • booleanValue
    • 
+

+
+
Beispiel

+
+
The following uses the XPath expression count(//p) to obtain the number of <p> elements in a HTML document:

+
+
var paragraphCount = document.evaluate( 'count(//p)', document, null, XPathResult.ANY_TYPE, null );
+
+alert( 'This document contains ' + paragraphCount.numberValue + ' paragraph elements' );
+

+
+
Although JavaScript allows us to convert the number to a string for display, the XPath interface will not automatically convert the numerical result if the stringValue property is requested, so the following code will not work:

+
+
var paragraphCount = document.evaluate('count(//p)', document, null, XPathResult.ANY_TYPE, null );
+
+alert( 'This document contains ' + paragraphCount.stringValue + ' paragraph elements' );
+

+
+
Instead it will return an exception with the code NS_DOM_TYPE_ERROR.

+
+
Node-Set-Typen

+
+
The XPathResult object allows node-sets to be returned in 3 principal different types:

+
+
+
+
Iteratoren

+
+
When the specified result type in the resultType parameter is either:

+
+
    
+ 
  • UNORDERED_NODE_ITERATOR_TYPE
    • 
+ 
  • ORDERED_NODE_ITERATOR_TYPE
    • 
+

+
+
The XPathResult object returned is a node-set of matched nodes which will behave as an iterator, allowing us to access the individual nodes contained by using the iterateNext() method of the XPathResult.

+
+
Once we have iterated over all of the individual matched nodes, iterateNext() will return null.

+
+
Note however, that if the document is mutated (the document tree is modified) between iterations that will invalidate the iteration and the invalidIteratorState property of XPathResult is set to true, and a NS_ERROR_DOM_INVALID_STATE_ERR exception is thrown.

+
+
Iterator Example

+
+
var iterator = document.evaluate('//phoneNumber', documentNode, null, XPathResult.UNORDERED_NODE_ITERATOR_TYPE, null );
+
+try {
+  var thisNode = iterator.iterateNext();
+
+  while (thisNode) {
+    alert( thisNode.textContent );
+    thisNode = iterator.iterateNext();
+  }
+}
+catch (e) {
+  dump( 'Error: Document tree modified during iteration ' + e );
+}
+

+
+
Momentabbilder (Snapshots)

+
+
When the specified result type in the resultType parameter is either:

+
+
    
+ 
  • UNORDERED_NODE_SNAPSHOT_TYPE
    • 
+ 
  • ORDERED_NODE_SNAPSHOT_TYPE
    • 
+

+
+
The XPathResult object returned is a static node-set of matched nodes, which allows us to access each node through the snapshotItem(itemNumber) method of the XPathResult object, where itemNumber is the index of the node to be retrieved. The total number of nodes contained can be accessed through the snapshotLength property.

+
+
Snapshots do not change with document mutations, so unlike the iterators the snapshot does not become invalid, but it may not correspond to the current document, for example the nodes may have been moved, it might contain nodes that no longer exist, or new nodes could have been added.

+
+
Snapshot Example

+
+
var nodesSnapshot = document.evaluate('//phoneNumber', documentNode, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null );
+
+for ( var i=0 ; i < nodesSnapshot.snapshotLength; i++ )
+{
+  dump( nodesSnapshot.snapshotItem(i).textContent );
+}
+

+
+
Erster Knoten

+
+
When the specified result type in the resultType parameter is either:

+
+
    
+ 
  • ANY_UNORDERED_NODE_TYPE
    • 
+ 
  • FIRST_ORDERED_NODE_TYPE
    • 
+

+
+
The XPathResult object returned is only the first found node that matched the XPath expression. This can be accessed through the singleNodeValue property of the XPathResult object. This will be null if the node set is empty.

+
+
Note that, for the unordered subtype the single node returned might not be the first in document order, but for the ordered subtype you are guaranteed to get the first matched node in the document order.

+
+
First Node Example

+
+
var firstPhoneNumber = document.evaluate('//phoneNumber', documentNode, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null );
+
+dump( 'The first phone number found is ' + firstPhoneNumber.singleNodeValue.textContent );
+

+
+
Die Konstante ANY_TYPE

+
+
When the result type in the resultType parameter is specified as ANY_TYPE, the XPathResult object returned, will be whatever type that naturally results from the evaluation of the expression.

+
+
It could be any of the simple types (NUMBER_TYPE, STRING_TYPE, BOOLEAN_TYPE), but, if the returned result type is a node-set then it will only be an UNORDERED_NODE_ITERATOR_TYPE.

+
+
To determine that type after evaluation, we use the resultType property of the XPathResult object. The constant values of this property are defined in the appendix. None Yet =====Any_Type Example===== <pre> </pre>

+
+
Beispiele

+
+
Innerhalb eines HTML-Dokuments

+
+
The following code is intended to be placed in any JavaScript fragment within or linked to the HTML document against which the XPath expression is to be evaluated.

+
+
To extract all the <h2> heading elements in an HTML document using XPath, the xpathExpression is simply '//h2'. Where, // is the Recursive Descent Operator that matches elements with the nodeName h2 anywhere in the document tree. The full code for this is: link to introductory xpath doc

+
+
var headings = document.evaluate('//h2', document, null, XPathResult.ANY_TYPE, null );
+

+
+
Notice that, since HTML does not have namespaces, we have passed null for the namespaceResolver parameter.

+
+
Since we wish to search over the entire document for the headings, we have used the document object itself as the contextNode.

+
+
The result of this expression is an XPathResult object. If we wish to know the type of result returned, we may evaluate the resultType property of the returned object. In this case, that will evaluate to 4, an UNORDERED_NODE_ITERATOR_TYPE. This is the default return type when the result of the XPath expression is a node set. It provides access to a single node at a time and may not return nodes in a particular order. To access the returned nodes, we use the iterateNext() method of the returned object:

+
+
var thisHeading = headings.iterateNext();
+
+var alertText = 'Level 2 headings in this document are:\n'
+
+while (thisHeading) {
+  alertText += thisHeading.textContent + '\n';
+  thisHeading = headings.iterateNext();
+}
+

+
+
Once we iterate to a node, we have access to all the standard DOM interfaces on that node. After iterating through all the h2 elements returned from our expression, any further calls to iterateNext() will return null.

+
+
Auswertung an einem XML-Dokument innerhalb einer Erweiterung

+
+
The following uses an XML document located at chrome://yourextension/content/peopleDB.xml as an example.

+
+
<?xml version="1.0"?>
+<people xmlns:xul = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" >
+  <person>
+	<name first="george" last="bush" />
+	<address street="1600 pennsylvania avenue" city="washington" country="usa"/>
+	<phoneNumber>202-456-1111</phoneNumber>
+  </person>
+  <person>
+	<name first="tony" last="blair" />
+	<address street="10 downing street" city="london" country="uk"/>
+	<phoneNumber>020 7925 0918</phoneNumber>
+  </person>
+</people>
+

+
+
To make the contents of the XML document available within the extension, we create an XMLHttpRequest object to load the document synchronously, the variable xmlDoc will contain the document as an XMLDocument object against which we can use the evaluate method

+
+
JavaScript used in the extensions xul/js documents.

+
+
var req = new XMLHttpRequest();
+
+req.open("GET", "chrome://yourextension/content/peopleDB.xml", false);
+req.send(null);
+
+var xmlDoc = req.responseXML;
+
+var nsResolver = xmlDoc.createNSResolver( xmlDoc.ownerDocument == null ? xmlDoc.documentElement : xmlDoc.ownerDocument.documentElement);
+
+var personIterator = xmlDoc.evaluate('//person', xmlDoc, nsResolver, XPathResult.ANY_TYPE, null );
+

+
+
Anmerkung

+
+
When the XPathResult object is not defined, the constants can be retreived in privileged code using Components.interfaces.nsIDOMXPathResult.ANY_TYPE (CI.nsIDOMXPathResult). Similarly, an XPathEvaluator can be created using:

+
+
Components.classes["@mozilla.org/dom/xpath-evaluator;1"].createInstance(Components.interfaces.nsIDOMXPathEvaluator)

+
+
Anhang

+
+
Einen benutzerdefinierten Namensauflöser implementieren

+
+
This is an example for illustration only. This function will need to take namespace prefixes from the xpathExpression and return the URI that corresponds to that prefix. For example, the expression:

+
+
'//xhtml:td/mathml:math'
+

+
+
will select all MathML expressions that are the children of (X)HTML table data cell elements.

+
+
In order to associate the 'mathml:' prefix with the namespace URI 'http://www.w3.org/1998/Math/MathML' and 'xhtml:' with the URI 'http://www.w3.org/1999/xhtml' we provide a function:

+
+
function nsResolver(prefix) {
+  var ns = {
+    'xhtml' : 'http://www.w3.org/1999/xhtml',
+    'mathml': 'http://www.w3.org/1998/Math/MathML'
+  };
+  return ns[prefix] || null;
+}
+

+
+
Our call to document.evaluate would then looks like:

+
+
document.evaluate( '//xhtml:td/mathml:math', document, nsResolver, XPathResult.ANY_TYPE, null );
+

+
+
Einen Standard-Namensrauf für XML-Dokumente implementieren

+
+
As noted in the Implementing a Default Namespace Resolver previously, the default resolver does not handle the default namespace for XML documents. For example with this document:

+
+
<?xml version="1.0" encoding="UTF-8"?>
+<feed xmlns="http://www.w3.org/2005/Atom">
+    <entry />
+    <entry />
+    <entry />
+</feed>
+

+
+
doc.evaluate('//entry', doc, nsResolver, XPathResult.ANY_TYPE, null) will return an empty set, where nsResolver is the resolver returned by createNSResolver. Passing a null resolver doesn't work any better, either.

+
+
One possible workaround is to create a custom resolver that returns the correct default namespace (the Atom namespace in this case). Note that you still have to use some namespace prefix in your XPath expression, so that the resolver function will be able to change it to your required namespace. E.g.:

+
+
function resolver() {
+    return 'http://www.w3.org/2005/Atom';
+}
+doc.evaluate('//myns:entry', doc, resolver, XPathResult.ANY_TYPE, null)
+

+
+
Note that a more complex resolver will be required if the document uses multiple namespaces.

+
+
An approach which might work better (and allow namespaces not to be known ahead of time) is described in the next section.

+
+
Using XPath functions to reference elements with a default namespace

+
+
Another approach to match default elements in a non-null namespace (and one which works well for dynamic XPath expressions where the namespaces might not be known), involves referring to a particular element using a form such as [namespace-uri()='http://www.w3.org/1999/xhtml' and name()='p' and @id='_myid']. This circumvents the problem of an XPath query not being able to detect the default namespace on a regularly labeled element.

+
+
Getting specifically namespaced elements and attributes regardless of prefix

+
+
If one wishes to provide flexibility in namespaces (as they are intended) by not necessarily requiring a particular prefix to be used when finding a namespaced element or attribute, one must use special techniques.

+
+
While one can adapt the approach in the above section to test for namespaced elements regardless of the prefix chosen (using local-name() in combination with namespace-uri() instead of name()), a more challenging situation occurs, however, if one wishes to grab an element with a particular namespaced attribute in a predicate (given the absence of implementation-independent variables in XPath 1.0).

+
+
For example, one might try (incorrectly) to grab an element with a namespaced attribute as follows: var xpathlink = someElements[local-name(@*)="href" and namespace-uri(@*)='http://www.w3.org/1999/xlink'];

+
+
This could inadvertently grab some elements if one of its attributes existed that had a local name of "href", but it was a different attribute which had the targeted (XLink) namespace (instead of @href).

+
+
In order to accurately grab elements with the XLink @href attribute (without also being confined to predefined prefixes in a namespace resolver), one could obtain them as follows:

+
+
var xpathEls = 'someElements[@*[local-name() = "href" and namespace-uri() = "http://www.w3.org/1999/xlink"]]'; // Grabs elements with any single attribute that has both the local name 'href' and the XLink namespace
+var thislevel = xml.evaluate(xpathEls, xml, null, XPathResult.ANY_TYPE, null);
+var thisitemEl = thislevel.iterateNext();
+

+
+
In XPathResult definierte Konstanten

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
Result Type Defined ConstantValueDescription
ANY_TYPE0A result set containing whatever type naturally results from evaluation of the expression. Note that if the result is a node-set then UNORDERED_NODE_ITERATOR_TYPE is always the resulting type.
NUMBER_TYPE1A result containing a single number. This is useful for example, in an XPath expression using the count() function.
STRING_TYPE2A result containing a single string.
BOOLEAN_TYPE3A result containing a single boolean value. This is useful for example, in an XPath expression using the not() function.
UNORDERED_NODE_ITERATOR_TYPE4A result node-set containing all the nodes matching the expression. The nodes may not necessarily be in the same order that they appear in the document.
ORDERED_NODE_ITERATOR_TYPE5A result node-set containing all the nodes matching the expression. The nodes in the result set are in the same order that they appear in the document.
UNORDERED_NODE_SNAPSHOT_TYPE6A result node-set containing snapshots of all the nodes matching the expression. The nodes may not necessarily be in the same order that they appear in the document.
ORDERED_NODE_SNAPSHOT_TYPE7A result node-set containing snapshots of all the nodes matching the expression. The nodes in the result set are in the same order that they appear in the document.
ANY_UNORDERED_NODE_TYPE8A result node-set containing any single node that matches the expression. The node is not necessarily the first node in the document that matches the expression.
FIRST_ORDERED_NODE_TYPE9A result node-set containing the first node in the document that matches the expression.

+
+
Siehe auch

+
+
+
+

+
Original Document Information

+
+
    
+ 
  • Based Upon Original Document Mozilla XPath Tutorial
    • 
+ 
  • Original Source Author: James Graham.
    • 
+ 
  • Other Contributors: James Thompson.
    • 
+ 
  • Last Updated Date: 2006-3-25.
    • 
+

+

-- 
cgit v1.2.3-54-g00ecf


From 12b585b8e60a2877ff64dc6dc5ab058c43652f47 Mon Sep 17 00:00:00 2001
From: Florian Merz 
Date: Thu, 11 Feb 2021 14:45:38 +0100
Subject: unslug de: modify

---
 files/de/_redirects.txt                            |  715 +-
 files/de/_wikihistory.json                         | 9740 ++++++++++----------
 files/de/conflicting/glossary/doctype/index.html   |    3 +-
 .../building_blocks/values_and_units/index.html    |    3 +-
 .../learn/css/first_steps/how_css_works/index.html |    3 +-
 .../index.html                                     |    4 +-
 .../conflicting/learn/css/first_steps/index.html   |    5 +-
 .../learn/javascript/objects/index.html            |    3 +-
 .../mdn/contribute/getting_started/index.html      |    3 +-
 files/de/conflicting/mdn/contribute/index.html     |    3 +-
 files/de/conflicting/mozilla/add-ons/index.html    |    3 +-
 files/de/conflicting/web/accessibility/index.html  |    3 +-
 .../web/api/document_object_model/index.html       |    3 +-
 .../index.html                                     |    3 +-
 files/de/conflicting/web/api/index.html            |    3 +-
 .../web/api/windoworworkerglobalscope/index.html   |    3 +-
 .../web/css/_doublecolon_placeholder/index.html    |    7 +-
 .../web/css/css_basic_user_interface/index.html    |    3 +-
 .../basic_concepts_of_flexbox/index.html           |    3 +-
 files/de/conflicting/web/css/cursor/index.html     |    3 +-
 .../index.html                                     |    3 +-
 files/de/conflicting/web/css/float/index.html      |    3 +-
 .../de/conflicting/web/css/font-variant/index.html |    3 +-
 files/de/conflicting/web/css/width/index.html      |    3 +-
 files/de/conflicting/web/guide/index.html          |    3 +-
 files/de/conflicting/web/html/element/index.html   |    3 +-
 .../global_objects/arraybuffer/index.html          |    3 +-
 .../reference/global_objects/boolean/index.html    |    3 +-
 .../reference/global_objects/dataview/index.html   |    3 +-
 .../reference/global_objects/date/index.html       |    3 +-
 .../reference/global_objects/error/index.html      |    3 +-
 .../reference/global_objects/evalerror/index.html  |    3 +-
 .../reference/global_objects/function/index.html   |    3 +-
 .../global_objects/generatorfunction/index.html    |    3 +-
 .../global_objects/internalerror/index.html        |    3 +-
 .../global_objects/intl/collator/index.html        |    3 +-
 .../global_objects/intl/datetimeformat/index.html  |    3 +-
 .../global_objects/intl/numberformat/index.html    |    3 +-
 .../reference/global_objects/map/index.html        |    3 +-
 .../reference/global_objects/number/index.html     |    3 +-
 .../reference/global_objects/object/index.html     |    3 +-
 .../reference/global_objects/rangeerror/index.html |    3 +-
 .../reference/global_objects/string/index.html     |    3 +-
 .../global_objects/syntaxerror/index.html          |    3 +-
 .../reference/global_objects/typeerror/index.html  |    3 +-
 .../web/javascript/reference/operators/index.html  |    3 +-
 .../reference/operators/spread_syntax/index.html   |    3 +-
 .../index.html                                     |    4 +-
 .../index.html                                     |    4 +-
 .../index.html                                     |    4 +-
 .../reference/statements/switch/index.html         |    3 +-
 .../web/progressive_web_apps/index.html            |    3 +-
 .../using_custom_elements/index.html               |    3 +-
 files/de/glossary/abstraction/index.html           |    3 +-
 files/de/glossary/algorithm/index.html             |    3 +-
 files/de/glossary/asynchronous/index.html          |    3 +-
 files/de/glossary/bandwidth/index.html             |    3 +-
 files/de/glossary/class/index.html                 |    3 +-
 files/de/glossary/constructor/index.html           |    3 +-
 .../cors-safelisted_request_header/index.html      |    3 +-
 files/de/glossary/css_preprocessor/index.html      |    3 +-
 files/de/glossary/empty_element/index.html         |    3 +-
 files/de/glossary/encapsulation/index.html         |    3 +-
 files/de/glossary/first-class_function/index.html  |    3 +-
 files/de/glossary/forbidden_header_name/index.html |    3 +-
 .../glossary/information_architecture/index.html   |    3 +-
 files/de/glossary/localization/index.html          |    3 +-
 files/de/glossary/object/index.html                |    3 +-
 files/de/glossary/primitive/index.html             |    3 +-
 files/de/glossary/protocol/index.html              |    3 +-
 files/de/glossary/statement/index.html             |    3 +-
 files/de/glossary/type/index.html                  |    3 +-
 files/de/glossary/vendor_prefix/index.html         |    3 +-
 .../how_does_the_internet_work/index.html          |    3 +-
 .../cascade_and_inheritance/index.html             |    3 +-
 .../learn/css/building_blocks/selectors/index.html |    3 +-
 .../building_blocks/values_and_units/index.html    |    3 +-
 .../first_steps/how_css_is_structured/index.html   |    3 +-
 .../learn/css/first_steps/how_css_works/index.html |    3 +-
 .../learn/css/styling_text/fundamentals/index.html |    3 +-
 files/de/learn/forms/index.html                    |    3 +-
 .../dealing_with_files/index.html                  |    3 +-
 .../how_the_web_works/index.html                   |    3 +-
 .../javascript_basics/index.html                   |    3 +-
 .../advanced_text_formatting/index.html            |    3 +-
 .../creating_hyperlinks/index.html                 |    3 +-
 .../introduction_to_html/debugging_html/index.html |    3 +-
 .../document_and_website_structure/index.html      |    3 +-
 .../getting_started/index.html                     |    3 +-
 .../html_text_fundamentals/index.html              |    3 +-
 .../de/learn/html/introduction_to_html/index.html  |    3 +-
 .../marking_up_a_letter/index.html                 |    3 +-
 .../structuring_a_page_of_content/index.html       |    3 +-
 .../the_head_metadata_in_html/index.html           |    3 +-
 files/de/learn/html/tables/basics/index.html       |    3 +-
 .../javascript/building_blocks/events/index.html   |    3 +-
 .../de/learn/javascript/building_blocks/index.html |    3 +-
 .../first_steps/a_first_splash/index.html          |    3 +-
 .../first_steps/silly_story_generator/index.html   |    3 +-
 .../first_steps/what_is_javascript/index.html      |    3 +-
 files/de/learn/server-side/first_steps/index.html  |    3 +-
 .../first_steps/introduction/index.html            |    3 +-
 files/de/mdn/about/index.html                      |    3 +-
 files/de/mdn/at_ten/history_of_mdn/index.html      |    3 +-
 files/de/mdn/at_ten/index.html                     |    3 +-
 .../mdn/guidelines/writing_style_guide/index.html  |    3 +-
 .../mdn/structures/compatibility_tables/index.html |    3 +-
 files/de/mdn/tools/index.html                      |    3 +-
 .../tools/kumascript/troubleshooting/index.html    |    3 +-
 files/de/mdn/yari/index.html                       |    3 +-
 .../add-ons/webextensions/api/bookmarks/index.html |    3 +-
 .../add-ons/webextensions/examples/index.html      |    3 +-
 .../working_with_the_tabs_api/index.html           |    3 +-
 .../your_first_webextension/index.html             |    3 +-
 .../your_second_webextension/index.html            |    3 +-
 .../so_you_just_built_firefox/index.html           |    5 +-
 .../mozilla/developer_guide/source_code/index.html |    3 +-
 .../index.html                                     |    3 +-
 files/de/mozilla/firefox/releases/1.5/index.html   |    3 +-
 .../1.5/using_firefox_1.5_caching/index.html       |    3 +-
 files/de/mozilla/firefox/releases/3.5/index.html   |    3 +-
 files/de/mozilla/firefox/releases/3/index.html     |    3 +-
 .../releases/3/updating_extensions/index.html      |    3 +-
 .../3/updating_web_applications/index.html         |    3 +-
 .../de/orphaned/learn/how_to_contribute/index.html |    3 +-
 .../orphaned/mdn/about/linking_to_mdn/index.html   |    3 +-
 files/de/orphaned/mdn/community/index.html         |    3 +-
 .../mdn/community/whats_happening/index.html       |    3 +-
 .../howto/create_an_mdn_account/index.html         |    3 +-
 .../howto/do_a_technical_review/index.html         |    3 +-
 .../howto/do_an_editorial_review/index.html        |    3 +-
 .../property_template/index.html                   |    3 +-
 .../howto/set_the_summary_for_a_page/index.html    |    3 +-
 .../howto/tag_javascript_pages/index.html          |    3 +-
 .../index.html                                     |    5 +-
 .../tools/add-ons/dom_inspector/index.html         |    3 +-
 files/de/orphaned/tools/add-ons/index.html         |    5 +-
 files/de/orphaned/tools/webide_clone/index.html    |    3 +-
 files/de/orphaned/web/css/index/index.html         |    3 +-
 .../web/html/global_attributes/dropzone/index.html |    3 +-
 .../global_objects/array/prototype/index.html      |    3 +-
 .../asyncfunction/prototype/index.html             |    3 +-
 files/de/tools/3d_view/index.html                  |    3 +-
 files/de/tools/accessibility_inspector/index.html  |    3 +-
 files/de/tools/browser_toolbox/index.html          |    3 +-
 files/de/tools/network_monitor/index.html          |    3 +-
 .../page_inspector/how_to/edit_fonts/index.html    |    3 +-
 .../how_to/examine_event_listeners/index.html      |    3 +-
 .../how_to/examine_grid_layouts/index.html         |    3 +-
 files/de/tools/page_inspector/index.html           |    3 +-
 .../page_inspector/keyboard_shortcuts/index.html   |    3 +-
 files/de/tools/responsive_design_mode/index.html   |    3 +-
 files/de/tools/shader_editor/index.html            |    3 +-
 files/de/tools/web_console/helpers/index.html      |    3 +-
 files/de/tools/web_console/index.html              |    3 +-
 .../index.html                                     |    3 +-
 .../aria/aria_live_regions/index.html              |    3 +-
 .../accessibility/aria/aria_techniques/index.html  |    3 +-
 files/de/web/accessibility/aria/index.html         |    3 +-
 files/de/web/accessibility/index.html              |    3 +-
 .../index.html                                     |    3 +-
 .../baseaudiocontext/decodeaudiodata/index.html    |    3 +-
 files/de/web/api/canvas_api/index.html             |    3 +-
 .../tutorial/advanced_animations/index.html        |    3 +-
 .../tutorial/applying_styles_and_colors/index.html |    3 +-
 .../tutorial/basic_animations/index.html           |    3 +-
 .../api/canvas_api/tutorial/basic_usage/index.html |    3 +-
 .../canvas_api/tutorial/drawing_shapes/index.html  |    3 +-
 .../canvas_api/tutorial/drawing_text/index.html    |    3 +-
 files/de/web/api/canvas_api/tutorial/index.html    |    3 +-
 .../tutorial/optimizing_canvas/index.html          |    3 +-
 .../canvas_api/tutorial/using_images/index.html    |    3 +-
 .../api/document/readystatechange_event/index.html |    3 +-
 files/de/web/api/document_object_model/index.html  |    3 +-
 files/de/web/api/file/type/index.html              |    3 +-
 .../using_files_from_web_applications/index.html   |    3 +-
 files/de/web/api/fullscreen_api/index.html         |    3 +-
 files/de/web/api/geolocation_api/index.html        |    3 +-
 files/de/web/api/history_api/index.html            |    3 +-
 files/de/web/api/html_drag_and_drop_api/index.html |    3 +-
 .../de/web/api/htmlelement/change_event/index.html |    3 +-
 files/de/web/api/htmlelement/innertext/index.html  |    3 +-
 files/de/web/api/htmlheadelement/index.html        |    3 +-
 .../basic_concepts_behind_indexeddb/index.html     |    3 +-
 .../api/indexeddb_api/using_indexeddb/index.html   |    3 +-
 .../web-based_protocol_handlers/index.html         |    3 +-
 .../index.html                                     |    3 +-
 .../animating_objects_with_webgl/index.html        |    3 +-
 .../animating_textures_in_webgl/index.html         |    3 +-
 .../creating_3d_objects_using_webgl/index.html     |    3 +-
 .../tutorial/getting_started_with_webgl/index.html |    3 +-
 .../tutorial/lighting_in_webgl/index.html          |    3 +-
 .../index.html                                     |    5 +-
 .../tutorial/using_textures_in_webgl/index.html    |    3 +-
 files/de/web/api/websockets_api/index.html         |    3 +-
 .../writing_websocket_servers/index.html           |    3 +-
 .../api/window/domcontentloaded_event/index.html   |    3 +-
 files/de/web/api/window/load_event/index.html      |    3 +-
 .../api/windoworworkerglobalscope/btoa/index.html  |    3 +-
 .../web/api/windoworworkerglobalscope/index.html   |    3 +-
 .../settimeout/index.html                          |    3 +-
 files/de/web/css/@media/aural/index.html           |    3 +-
 files/de/web/css/_colon_autofill/index.html        |    5 +-
 .../de/web/css/_colon_placeholder-shown/index.html |    7 +-
 files/de/web/css/_colon_user-invalid/index.html    |    5 +-
 files/de/web/css/actual_value/index.html           |    3 +-
 .../web/css/adjacent_sibling_combinator/index.html |    3 +-
 files/de/web/css/attribute_selectors/index.html    |    3 +-
 files/de/web/css/box-flex/index.html               |    3 +-
 files/de/web/css/box-ordinal-group/index.html      |    5 +-
 files/de/web/css/box-pack/index.html               |    3 +-
 files/de/web/css/child_combinator/index.html       |    3 +-
 files/de/web/css/class_selectors/index.html        |    3 +-
 files/de/web/css/color_value/index.html            |    3 +-
 .../de/web/css/compositing_and_blending/index.html |    3 +-
 files/de/web/css/computed_value/index.html         |    3 +-
 .../css_animations/using_css_animations/index.html |    3 +-
 .../box-shadow_generator/index.html                |    3 +-
 .../web/css/css_backgrounds_and_borders/index.html |    3 +-
 .../resizing_background_images/index.html          |    3 +-
 .../using_multiple_backgrounds/index.html          |    3 +-
 files/de/web/css/css_box_model/index.html          |    3 +-
 .../introduction_to_the_css_box_model/index.html   |    3 +-
 .../mastering_margin_collapsing/index.html         |    3 +-
 files/de/web/css/css_color/index.html              |    3 +-
 .../css/css_colors/color_picker_tool/index.html    |    3 +-
 .../using_multi-column_layouts/index.html          |    3 +-
 .../basic_concepts_of_flexbox/index.html           |    3 +-
 .../ordering_flex_items/index.html                 |    3 +-
 .../css/css_images/using_css_gradients/index.html  |    3 +-
 .../consistent_list_indentation/index.html         |    3 +-
 .../using_css_counters/index.html                  |    3 +-
 files/de/web/css/css_masking/index.html            |    3 +-
 files/de/web/css/css_motion_path/index.html        |    3 +-
 files/de/web/css/css_namespaces/index.html         |    3 +-
 files/de/web/css/css_text_decoration/index.html    |    3 +-
 .../css_transforms/using_css_transforms/index.html |    3 +-
 files/de/web/css/css_types/index.html              |    3 +-
 files/de/web/css/gap/index.html                    |    3 +-
 files/de/web/css/id_selectors/index.html           |    3 +-
 files/de/web/css/inheritance/index.html            |    3 +-
 files/de/web/css/initial_value/index.html          |    3 +-
 files/de/web/css/mask-origin/index.html            |    3 +-
 files/de/web/css/mask-repeat/index.html            |    3 +-
 files/de/web/css/overflow-wrap/index.html          |    3 +-
 files/de/web/css/reference/index.html              |    3 +-
 files/de/web/css/replaced_element/index.html       |    3 +-
 files/de/web/css/shorthand_properties/index.html   |    3 +-
 files/de/web/css/specificity/index.html            |    3 +-
 files/de/web/css/url()/index.html                  |    3 +-
 files/de/web/css/user-modify/index.html            |    3 +-
 files/de/web/css/user-select/index.html            |    5 +-
 .../de/web/css/value_definition_syntax/index.html  |    3 +-
 files/de/web/guide/ajax/getting_started/index.html |    3 +-
 .../web/guide/html/content_categories/index.html   |    3 +-
 .../de/web/guide/html/editable_content/index.html  |    3 +-
 files/de/web/guide/html/html5/index.html           |    3 +-
 .../using_html_sections_and_outlines/index.html    |    3 +-
 files/de/web/guide/mobile/index.html               |    3 +-
 files/de/web/html/block-level_elements/index.html  |    3 +-
 .../web/html/element/heading_elements/index.html   |    3 +-
 .../html/global_attributes/accesskey/index.html    |    3 +-
 .../global_attributes/autocapitalize/index.html    |    3 +-
 .../de/web/html/global_attributes/class/index.html |    3 +-
 .../global_attributes/contenteditable/index.html   |    3 +-
 .../html/global_attributes/contextmenu/index.html  |    3 +-
 files/de/web/html/global_attributes/dir/index.html |    3 +-
 .../html/global_attributes/draggable/index.html    |    3 +-
 .../web/html/global_attributes/hidden/index.html   |    3 +-
 files/de/web/html/global_attributes/id/index.html  |    3 +-
 files/de/web/html/global_attributes/index.html     |    3 +-
 .../html/global_attributes/inputmode/index.html    |    3 +-
 files/de/web/html/global_attributes/is/index.html  |    3 +-
 .../de/web/html/global_attributes/lang/index.html  |    3 +-
 .../de/web/html/global_attributes/style/index.html |    3 +-
 .../web/html/global_attributes/tabindex/index.html |    3 +-
 .../de/web/html/global_attributes/title/index.html |    3 +-
 .../html/global_attributes/translate/index.html    |    3 +-
 files/de/web/html/inline_elements/index.html       |    3 +-
 files/de/web/html/reference/index.html             |    3 +-
 files/de/web/http/caching/index.html               |    3 +-
 .../corsmissingallowheaderfrompreflight/index.html |    3 +-
 .../cors/errors/corsmissingalloworigin/index.html  |    3 +-
 files/de/web/http/public_key_pinning/index.html    |    3 +-
 .../a_re-introduction_to_javascript/index.html     |    3 +-
 files/de/web/javascript/data_structures/index.html |    3 +-
 .../index.html                                     |    3 +-
 .../equality_comparisons_and_sameness/index.html   |    3 +-
 .../control_flow_and_error_handling/index.html     |    5 +-
 .../guide/details_of_the_object_model/index.html   |    5 +-
 .../guide/expressions_and_operators/index.html     |    5 +-
 files/de/web/javascript/guide/functions/index.html |    5 +-
 .../javascript/guide/grammar_and_types/index.html  |    5 +-
 .../web/javascript/guide/introduction/index.html   |    5 +-
 .../guide/loops_and_iteration/index.html           |    5 +-
 .../javascript/guide/text_formatting/index.html    |    5 +-
 .../guide/working_with_objects/index.html          |    5 +-
 .../javascript_technologies_overview/index.html    |    3 +-
 .../de/web/javascript/memory_management/index.html |    3 +-
 .../reference/classes/constructor/index.html       |    3 +-
 .../reference/classes/extends/index.html           |    3 +-
 .../de/web/javascript/reference/classes/index.html |    3 +-
 .../javascript/reference/classes/static/index.html |    3 +-
 .../deprecated_and_obsolete_features/index.html    |    3 +-
 .../the_legacy_iterator_protocol/index.html        |    4 +-
 .../reference/errors/already_has_pragma/index.html |    3 +-
 .../errors/array_sort_argument/index.html          |    3 +-
 .../reference/errors/bad_octal/index.html          |    3 +-
 .../reference/errors/bad_radix/index.html          |    3 +-
 .../reference/errors/bad_regexp_flag/index.html    |    3 +-
 .../errors/bad_return_or_yield/index.html          |    3 +-
 .../errors/called_on_incompatible_type/index.html  |    3 +-
 .../index.html                                     |    3 +-
 .../errors/cant_access_property/index.html         |    3 +-
 .../index.html                                     |    3 +-
 .../reference/errors/cant_delete/index.html        |    3 +-
 .../errors/cant_redefine_property/index.html       |    3 +-
 .../errors/cyclic_object_value/index.html          |    3 +-
 .../reference/errors/dead_object/index.html        |    3 +-
 .../errors/delete_in_strict_mode/index.html        |    3 +-
 .../index.html                                     |    3 +-
 .../deprecated_expression_closures/index.html      |    3 +-
 .../reference/errors/deprecated_octal/index.html   |    3 +-
 .../errors/deprecated_source_map_pragma/index.html |    3 +-
 .../errors/deprecated_string_generics/index.html   |    3 +-
 .../errors/deprecated_tolocaleformat/index.html    |    3 +-
 .../reference/errors/equal_as_assign/index.html    |    3 +-
 .../for-each-in_loops_are_deprecated/index.html    |    3 +-
 .../reference/errors/getter_only/index.html        |    3 +-
 .../errors/identifier_after_number/index.html      |    3 +-
 .../reference/errors/illegal_character/index.html  |    3 +-
 .../errors/in_operator_no_object/index.html        |    3 +-
 .../de/web/javascript/reference/errors/index.html  |    3 +-
 .../errors/invalid_array_length/index.html         |    3 +-
 .../invalid_assignment_left-hand_side/index.html   |    3 +-
 .../errors/invalid_const_assignment/index.html     |    3 +-
 .../reference/errors/invalid_date/index.html       |    3 +-
 .../errors/invalid_for-in_initializer/index.html   |    3 +-
 .../errors/invalid_for-of_initializer/index.html   |    3 +-
 .../index.html                                     |    3 +-
 .../reference/errors/is_not_iterable/index.html    |    3 +-
 .../reference/errors/json_bad_parse/index.html     |    3 +-
 .../errors/malformed_formal_parameter/index.html   |    3 +-
 .../reference/errors/malformed_uri/index.html      |    3 +-
 .../errors/missing_bracket_after_list/index.html   |    3 +-
 .../missing_colon_after_property_id/index.html     |    3 +-
 .../missing_curly_after_function_body/index.html   |    3 +-
 .../missing_curly_after_property_list/index.html   |    3 +-
 .../errors/missing_formal_parameter/index.html     |    3 +-
 .../errors/missing_initializer_in_const/index.html |    3 +-
 .../missing_name_after_dot_operator/index.html     |    3 +-
 .../index.html                                     |    3 +-
 .../missing_parenthesis_after_condition/index.html |    3 +-
 .../missing_semicolon_before_statement/index.html  |    3 +-
 .../errors/more_arguments_needed/index.html        |    3 +-
 .../errors/negative_repetition_count/index.html    |    3 +-
 .../reference/errors/no_non-null_object/index.html |    3 +-
 .../reference/errors/no_properties/index.html      |    3 +-
 .../reference/errors/no_variable_name/index.html   |    3 +-
 .../non_configurable_array_element/index.html      |    3 +-
 .../reference/errors/not_a_codepoint/index.html    |    3 +-
 .../reference/errors/not_a_constructor/index.html  |    3 +-
 .../reference/errors/not_a_function/index.html     |    3 +-
 .../reference/errors/not_defined/index.html        |    3 +-
 .../reference/errors/precision_range/index.html    |    3 +-
 .../errors/property_access_denied/index.html       |    3 +-
 .../reference/errors/read-only/index.html          |    3 +-
 .../errors/redeclared_parameter/index.html         |    3 +-
 .../index.html                                     |    3 +-
 .../errors/reserved_identifier/index.html          |    3 +-
 .../errors/resulting_string_too_large/index.html   |    3 +-
 .../reference/errors/stmt_after_return/index.html  |    3 +-
 .../errors/strict_non_simple_params/index.html     |    3 +-
 .../reference/errors/too_much_recursion/index.html |    3 +-
 .../typed_array_invalid_arguments/index.html       |    3 +-
 .../reference/errors/undeclared_var/index.html     |    3 +-
 .../reference/errors/undefined_prop/index.html     |    3 +-
 .../reference/errors/unexpected_token/index.html   |    3 +-
 .../reference/errors/unexpected_type/index.html    |    3 +-
 .../errors/unnamed_function_statement/index.html   |    3 +-
 .../errors/unterminated_string_literal/index.html  |    3 +-
 .../reference/errors/var_hides_argument/index.html |    3 +-
 .../reference/functions/arrow_functions/index.html |    3 +-
 .../functions/method_definitions/index.html        |    3 +-
 .../reference/functions/rest_parameters/index.html |    3 +-
 .../global_objects/atomics/notify/index.html       |    3 +-
 .../global_objects/math/random/index.html          |    3 +-
 .../global_objects/string/search/index.html        |    3 +-
 .../global_objects/string/trimend/index.html       |    3 +-
 .../global_objects/string/trimstart/index.html     |    3 +-
 .../reference/operators/decrement/index.html       |    3 +-
 .../operators/destructuring_assignment/index.html  |    3 +-
 .../reference/operators/increment/index.html       |    3 +-
 .../operators/object_initializer/index.html        |    3 +-
 .../operators/optional_chaining/index.html         |    3 +-
 .../reference/operators/remainder/index.html       |    3 +-
 .../reference/statements/function/index.html       |    3 +-
 .../reference/template_literals/index.html         |    3 +-
 files/de/web/mathml/attribute/values/index.html    |    3 +-
 .../deriving_the_quadratic_formula/index.html      |    3 +-
 files/de/web/mathml/examples/index.html            |    3 +-
 .../examples/mathml_pythagorean_theorem/index.html |    3 +-
 files/de/web/opensearch/index.html                 |    3 +-
 files/de/web/svg/tutorial/introduction/index.html  |    5 +-
 files/de/web/svg/tutorial/paths/index.html         |    5 +-
 files/de/web/svg/tutorial/svg_fonts/index.html     |    3 +-
 files/de/web/xml/xml_introduction/index.html       |    3 +-
 .../index.html                                     |    3 +-
 408 files changed, 6270 insertions(+), 5456 deletions(-)

(limited to 'files/de/web')

diff --git a/files/de/_redirects.txt b/files/de/_redirects.txt
index f9d8a02fda..edfd74c3af 100644
--- a/files/de/_redirects.txt
+++ b/files/de/_redirects.txt
@@ -1,13 +1,14 @@
 # FROM-URL	TO-URL
 /de/docs/AJAX	/de/docs/Web/Guide/AJAX
 /de/docs/Apps/Progressiv	/de/docs/Web/Progressive_web_apps
-/de/docs/Barrierefreiheit	/de/docs/Web/Barrierefreiheit
-/de/docs/Barrierefreiheit/ARIA	/de/docs/Web/Barrierefreiheit/ARIA
-/de/docs/Barrierefreiheit/ARIA/ARIA_Live_Regionen	/de/docs/Web/Barrierefreiheit/ARIA/ARIA_Live_Regionen
-/de/docs/Barrierefreiheit/An_overview_of_accessible_web_applications_and_widgets	/de/docs/Web/Barrierefreiheit/An_overview_of_accessible_web_applications_and_widgets
-/de/docs/Barrierefreiheit/Webentwicklung	/de/docs/Web/Barrierefreiheit/Webentwicklung
+/de/docs/Barrierefreiheit	/de/docs/Web/Accessibility
+/de/docs/Barrierefreiheit/ARIA	/de/docs/Web/Accessibility/ARIA
+/de/docs/Barrierefreiheit/ARIA/ARIA_Live_Regionen	/de/docs/Web/Accessibility/ARIA/ARIA_Live_Regions
+/de/docs/Barrierefreiheit/An_overview_of_accessible_web_applications_and_widgets	/de/docs/Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets
+/de/docs/Barrierefreiheit/Webentwicklung	/de/docs/conflicting/Web/Accessibility
+/de/docs/Benutzen_des_Zwischenspeichers_in_Firefox_1.5_(caching)	/de/docs/Mozilla/Firefox/Releases/1.5/Using_Firefox_1.5_caching
 /de/docs/Bug-Entdecken_Leitfaden	/de/docs/Richtlinien_zum_Schreiben_eines_Bugreports
-/de/docs/Building_an_Extension	/de/docs/Erweiterung_erstellen
+/de/docs/Building_an_Extension	/de/docs/conflicting/Mozilla/Add-ons
 /de/docs/CSS	/de/docs/Web/CSS
 /de/docs/CSS/-moz-border-radius	/de/docs/Web/CSS/border-radius
 /de/docs/CSS/-moz-border-radius-bottomleft	/de/docs/Web/CSS/border-bottom-left-radius
@@ -17,35 +18,35 @@
 /de/docs/CSS/-moz-box-shadow	/de/docs/Web/CSS/box-shadow
 /de/docs/CSS/-moz-image-region	/de/docs/Web/CSS/-moz-image-region
 /de/docs/CSS/-moz-user-input	/de/docs/Web/CSS/-moz-user-input
-/de/docs/CSS/-moz-user-modify	/de/docs/Web/CSS/-moz-user-modify
-/de/docs/CSS/-moz-user-select	/de/docs/Web/CSS/-moz-user-select
+/de/docs/CSS/-moz-user-modify	/de/docs/Web/CSS/user-modify
+/de/docs/CSS/-moz-user-select	/de/docs/Web/CSS/user-select
 /de/docs/CSS/:empty	/de/docs/Web/CSS/:empty
 /de/docs/CSS/:lang	/de/docs/Web/CSS/:lang
 /de/docs/CSS/@import	/de/docs/Web/CSS/@import
-/de/docs/CSS/Attributselektoren	/de/docs/Web/CSS/Attributselektoren
+/de/docs/CSS/Attributselektoren	/de/docs/Web/CSS/Attribute_selectors
 /de/docs/CSS/Border-bottom-width	/de/docs/Web/CSS/Border-bottom-width
 /de/docs/CSS/Border-left-width	/de/docs/Web/CSS/Border-left-width
 /de/docs/CSS/Border-right-width	/de/docs/Web/CSS/Border-right-width
 /de/docs/CSS/Border-top-width	/de/docs/Web/CSS/Border-top-width
 /de/docs/CSS/Bottom	/de/docs/Web/CSS/Bottom
-/de/docs/CSS/Boxmodell	/de/docs/Web/CSS/CSS_Boxmodell/Einführung_in_das_CSS_Boxmodell
-/de/docs/CSS/CSS_Reference/Property_Template	/de/docs/Web/CSS/Property_Template
+/de/docs/CSS/Boxmodell	/de/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
+/de/docs/CSS/CSS_Reference/Property_Template	/de/docs/orphaned/MDN/Contribute/Howto/Document_a_CSS_property/Property_template
 /de/docs/CSS/CSS_Werte_Geltung	/de/docs/Web/CSS
 /de/docs/CSS/CSS_animated_properties	/de/docs/Web/CSS
 /de/docs/CSS/CSS_animierbare_Eigenschaften	/de/docs/Web/CSS
 /de/docs/CSS/CSS_prozentuale_werte	/de/docs/Web/CSS
 /de/docs/CSS/CSS_werte_syntax	/de/docs/Web/CSS
-/de/docs/CSS/Einführung	/de/docs/Web/Guide/CSS/Getting_started
-/de/docs/CSS/Farben	/de/docs/Web/CSS/Farben
-/de/docs/CSS/Getting_Started	/de/docs/Web/Guide/CSS/Getting_started
-/de/docs/CSS/Getting_Started-weiterleitung-1	/de/docs/Web/Guide/CSS/Getting_started
-/de/docs/CSS/Initialwert	/de/docs/Web/CSS/Initialwert
+/de/docs/CSS/Einführung	/de/docs/conflicting/Learn/CSS/First_steps
+/de/docs/CSS/Farben	/de/docs/Web/CSS/color_value
+/de/docs/CSS/Getting_Started	/de/docs/conflicting/Learn/CSS/First_steps
+/de/docs/CSS/Getting_Started-weiterleitung-1	/de/docs/conflicting/Learn/CSS/First_steps
+/de/docs/CSS/Initialwert	/de/docs/Web/CSS/initial_value
 /de/docs/CSS/Left	/de/docs/Web/CSS/Left
 /de/docs/CSS/Right	/de/docs/Web/CSS/Right
 /de/docs/CSS/Top	/de/docs/Web/CSS/Top
-/de/docs/CSS/Vererbung	/de/docs/Web/CSS/Vererbung
-/de/docs/CSS/Vorlage	/de/docs/Web/CSS/Property_Template
-/de/docs/CSS/Wertdefinitionssyntax	/de/docs/Web/CSS/Wertdefinitionssyntax
+/de/docs/CSS/Vererbung	/de/docs/Web/CSS/inheritance
+/de/docs/CSS/Vorlage	/de/docs/orphaned/MDN/Contribute/Howto/Document_a_CSS_property/Property_template
+/de/docs/CSS/Wertdefinitionssyntax	/de/docs/Web/CSS/Value_definition_syntax
 /de/docs/CSS/background	/de/docs/Web/CSS/background
 /de/docs/CSS/background-attachment	/de/docs/Web/CSS/background-attachment
 /de/docs/CSS/background-clip	/de/docs/Web/CSS/background-clip
@@ -55,7 +56,7 @@
 /de/docs/CSS/background-position	/de/docs/Web/CSS/background-position
 /de/docs/CSS/background-repeat	/de/docs/Web/CSS/background-repeat
 /de/docs/CSS/background-size	/de/docs/Web/CSS/background-size
-/de/docs/CSS/berechneter_Wert	/de/docs/Web/CSS/berechneter_Wert
+/de/docs/CSS/berechneter_Wert	/de/docs/Web/CSS/computed_value
 /de/docs/CSS/border	/de/docs/Web/CSS/border
 /de/docs/CSS/border-bottom	/de/docs/Web/CSS/border-bottom
 /de/docs/CSS/border-bottom-color	/de/docs/Web/CSS/border-bottom-color
@@ -121,20 +122,21 @@
 /de/docs/CSS/vertical-align	/de/docs/Web/CSS/vertical-align
 /de/docs/CSS/visibility	/de/docs/Web/CSS/visibility
 /de/docs/CSS/width	/de/docs/Web/CSS/width
+/de/docs/CSS3_Columns	/de/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts
 /de/docs/CSS:-moz-border-radius	/de/docs/Web/CSS/border-radius
 /de/docs/CSS:-moz-border-radius-bottomleft	/de/docs/Web/CSS/border-bottom-left-radius
 /de/docs/CSS:-moz-border-radius-bottomright	/de/docs/Web/CSS/border-bottom-right-radius
 /de/docs/CSS:-moz-border-radius-topleft	/de/docs/Web/CSS/border-top-left-radius
 /de/docs/CSS:-moz-border-radius-topright	/de/docs/Web/CSS/border-top-right-radius
 /de/docs/CSS:-moz-user-input	/de/docs/Web/CSS/-moz-user-input
-/de/docs/CSS:-moz-user-modify	/de/docs/Web/CSS/-moz-user-modify
-/de/docs/CSS:-moz-user-select	/de/docs/Web/CSS/-moz-user-select
+/de/docs/CSS:-moz-user-modify	/de/docs/Web/CSS/user-modify
+/de/docs/CSS:-moz-user-select	/de/docs/Web/CSS/user-select
 /de/docs/CSS::empty	/de/docs/Web/CSS/:empty
 /de/docs/CSS::lang	/de/docs/Web/CSS/:lang
 /de/docs/CSS:@import	/de/docs/Web/CSS/@import
-/de/docs/CSS:Boxmodell	/de/docs/Web/CSS/CSS_Boxmodell/Einführung_in_das_CSS_Boxmodell
-/de/docs/CSS:Farben	/de/docs/Web/CSS/Farben
-/de/docs/CSS:Vorlage	/de/docs/Web/CSS/Property_Template
+/de/docs/CSS:Boxmodell	/de/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
+/de/docs/CSS:Farben	/de/docs/Web/CSS/color_value
+/de/docs/CSS:Vorlage	/de/docs/orphaned/MDN/Contribute/Howto/Document_a_CSS_property/Property_template
 /de/docs/CSS:background	/de/docs/Web/CSS/background
 /de/docs/CSS:background-attachment	/de/docs/Web/CSS/background-attachment
 /de/docs/CSS:background-color	/de/docs/Web/CSS/background-color
@@ -193,7 +195,7 @@
 /de/docs/CSS:vertical-align	/de/docs/Web/CSS/vertical-align
 /de/docs/CSS:visibility	/de/docs/Web/CSS/visibility
 /de/docs/CSS:width	/de/docs/Web/CSS/width
-/de/docs/CSS_Referenz	/de/docs/Web/CSS/CSS_Referenz
+/de/docs/CSS_Referenz	/de/docs/Web/CSS/Reference
 /de/docs/CSS_Referenz/Mozilla_CSS_Erweiterungen	/de/docs/Web/CSS/Mozilla_Extensions
 /de/docs/CSS_in_HTML_einbinden	/de/docs/Web/CSS/@import
 /de/docs/Code_snippets	/de/docs/Codeschnipsel
@@ -204,6 +206,7 @@
 /de/docs/Creating_a_Skin_for_Firefox/install.rdf	/de/docs/Theme_erstellen/install.rdf
 /de/docs/Creating_a_Skin_for_Firefox:contents.rdf	/de/docs/Theme_erstellen/contents.rdf
 /de/docs/Creating_a_Skin_for_Firefox:install.rdf	/de/docs/Theme_erstellen/install.rdf
+/de/docs/DOM	/de/docs/Web/API/Document_Object_Model
 /de/docs/DOM/File.fileName	/de/docs/Web/API/File/fileName
 /de/docs/DOM/File.fileSize	/de/docs/Web/API/File/fileSize
 /de/docs/DOM/File.getAsText	/de/docs/Web/API/File/getAsText
@@ -217,6 +220,7 @@
 /de/docs/DOM/Node.previousSibling	/de/docs/Web/API/Node/previousSibling
 /de/docs/DOM/Node.replaceChild	/de/docs/Web/API/Node/replaceChild
 /de/docs/DOM/Node.textContent	/de/docs/Web/API/Node/textContent
+/de/docs/DOM/Ueber_das_Document_Object_Model	/de/docs/conflicting/Web/API/Document_Object_Model
 /de/docs/DOM/XMLHttpRequest	/de/docs/Web/API/XMLHttpRequest
 /de/docs/DOM/document	/de/docs/Web/API/Document
 /de/docs/DOM/document.createElement	/de/docs/Web/API/Document/createElement
@@ -224,30 +228,59 @@
 /de/docs/DOM/window	/de/docs/Web/API/Window
 /de/docs/DOM/window.dump	/de/docs/Web/API/Window/dump
 /de/docs/DOM/window.openDialog	/de/docs/Web/API/Window/openDialog
-/de/docs/DOM/window.setTimeout	/de/docs/Web/API/WindowTimers/setTimeout
+/de/docs/DOM/window.setTimeout	/de/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout
+/de/docs/DOM_Inspector	/de/docs/orphaned/Tools/Add-ons/DOM_Inspector
 /de/docs/Developer_Guide	/de/docs/Mozilla/Developer_guide
-/de/docs/Developer_Guide/firefox_erfolgreich_erstellt	/de/docs/Mozilla/Developer_guide/firefox_erfolgreich_erstellt
-/de/docs/Eine_erste_Erweiterung_erstellen	/de/docs/Erweiterung_erstellen
-/de/docs/Einführung_in_den_Gebrauch_von_XPath_in_JavaScript	/de/docs/Web/JavaScript/Einführung_in_den_Gebrauch_von_XPath_in_JavaScript
+/de/docs/Developer_Guide/firefox_erfolgreich_erstellt	/de/docs/Mozilla/Developer_guide/So_you_just_built_Firefox
+/de/docs/DragDrop	/de/docs/Web/API/HTML_Drag_and_Drop_API
+/de/docs/Eine_erste_Erweiterung_erstellen	/de/docs/conflicting/Mozilla/Add-ons
+/de/docs/Einführung_in_den_Gebrauch_von_XPath_in_JavaScript	/de/docs/Web/XPath/Introduction_to_using_XPath_in_JavaScript
 /de/docs/Entwicklerhandbuch	/de/docs/Mozilla/Developer_guide
-/de/docs/Entwicklerhandbuch/Quelltexte	/de/docs/Mozilla/Developer_guide/Quelltexte
-/de/docs/Firefox_1.5_Beta	/de/docs/Firefox_1.5_für_Entwickler
+/de/docs/Entwicklerhandbuch/Quelltexte	/de/docs/Mozilla/Developer_guide/Source_Code
+/de/docs/Erweiterung_erstellen	/de/docs/conflicting/Mozilla/Add-ons
+/de/docs/Erweiterungen_für_Firefox_3_aktualisieren	/de/docs/Mozilla/Firefox/Releases/3/Updating_extensions
+/de/docs/Farbverläufe_in_CSS	/de/docs/Web/CSS/CSS_Images/Using_CSS_gradients
+/de/docs/Firefox_1.5_Beta	/de/docs/Mozilla/Firefox/Releases/1.5
+/de/docs/Firefox_1.5_für_Entwickler	/de/docs/Mozilla/Firefox/Releases/1.5
+/de/docs/Firefox_1.5_für_Entwickler/Changing_the_priority_of_HTTP_requests	/de/docs/Mozilla/Firefox/Releases/1.5/Changing_the_priority_of_HTTP_requests
+/de/docs/Firefox_3.5_für_Entwickler	/de/docs/Mozilla/Firefox/Releases/3.5
+/de/docs/Firefox_3_für_Entwickler	/de/docs/Mozilla/Firefox/Releases/3
+/de/docs/Glossary/Abstraktion	/de/docs/Glossary/Abstraction
+/de/docs/Glossary/Algorithmus	/de/docs/Glossary/Algorithm
+/de/docs/Glossary/Anweisung	/de/docs/Glossary/Statement
+/de/docs/Glossary/Asynchron	/de/docs/Glossary/Asynchronous
+/de/docs/Glossary/Bandbreite	/de/docs/Glossary/Bandwidth
+/de/docs/Glossary/CORS-zugelassener-anfrage-header	/de/docs/Glossary/CORS-safelisted_request_header
+/de/docs/Glossary/CSS_Praeprozessor	/de/docs/Glossary/CSS_preprocessor
+/de/docs/Glossary/DTD	/de/docs/conflicting/Glossary/Doctype
+/de/docs/Glossary/Datenkapselung	/de/docs/Glossary/Encapsulation
+/de/docs/Glossary/Funktion_erster-Klasse	/de/docs/Glossary/First-class_Function
+/de/docs/Glossary/Herstellerpräfix	/de/docs/Glossary/Vendor_Prefix
+/de/docs/Glossary/Informationsarchitektur	/de/docs/Glossary/Information_architecture
+/de/docs/Glossary/Klasse	/de/docs/Glossary/Class
+/de/docs/Glossary/Konstruktor	/de/docs/Glossary/Constructor
+/de/docs/Glossary/Leeres_Element	/de/docs/Glossary/Empty_element
+/de/docs/Glossary/Objekt	/de/docs/Glossary/Object
+/de/docs/Glossary/Protokoll	/de/docs/Glossary/Protocol
+/de/docs/Glossary/Typ	/de/docs/Glossary/Type
+/de/docs/Glossary/einfache_datenelemente	/de/docs/Glossary/Primitive
+/de/docs/Glossary/verbotener_header_name	/de/docs/Glossary/Forbidden_header_name
 /de/docs/HTML	/de/docs/Web/HTML
-/de/docs/HTML/Block-level_elemente	/de/docs/Web/HTML/Block-level_elemente
+/de/docs/HTML/Block-level_elemente	/de/docs/Web/HTML/Block-level_elements
 /de/docs/HTML/Element	/de/docs/Web/HTML/Element
 /de/docs/HTML/Element/Input	/de/docs/Web/HTML/Element/Input
 /de/docs/HTML/Element/b	/de/docs/Web/HTML/Element/b
 /de/docs/HTML/Element/br	/de/docs/Web/HTML/Element/br
 /de/docs/HTML/Element/canvas	/de/docs/Web/HTML/Element/canvas
 /de/docs/HTML/Element/datalist	/de/docs/Web/HTML/Element/datalist
-/de/docs/HTML/Element/h1	/de/docs/Web/HTML/Element/h1-h6
-/de/docs/HTML/Element/h1-h6	/de/docs/Web/HTML/Element/h1-h6
-/de/docs/HTML/Element/h2	/de/docs/Web/HTML/Element/h1-h6
-/de/docs/HTML/Element/h3	/de/docs/Web/HTML/Element/h1-h6
-/de/docs/HTML/Element/h4	/de/docs/Web/HTML/Element/h1-h6
-/de/docs/HTML/Element/h5	/de/docs/Web/HTML/Element/h1-h6
-/de/docs/HTML/Element/h6	/de/docs/Web/HTML/Element/h1-h6
-/de/docs/HTML/Element/head	/de/docs/Web/HTML/Element/head
+/de/docs/HTML/Element/h1	/de/docs/Web/HTML/Element/Heading_Elements
+/de/docs/HTML/Element/h1-h6	/de/docs/Web/HTML/Element/Heading_Elements
+/de/docs/HTML/Element/h2	/de/docs/Web/HTML/Element/Heading_Elements
+/de/docs/HTML/Element/h3	/de/docs/Web/HTML/Element/Heading_Elements
+/de/docs/HTML/Element/h4	/de/docs/Web/HTML/Element/Heading_Elements
+/de/docs/HTML/Element/h5	/de/docs/Web/HTML/Element/Heading_Elements
+/de/docs/HTML/Element/h6	/de/docs/Web/HTML/Element/Heading_Elements
+/de/docs/HTML/Element/head	/de/docs/Web/API/HTMLHeadElement
 /de/docs/HTML/Element/hr	/de/docs/Web/HTML/Element/hr
 /de/docs/HTML/Element/html	/de/docs/Web/HTML/Element/html
 /de/docs/HTML/Element/iframe	/de/docs/Web/HTML/Element/iframe
@@ -260,20 +293,20 @@
 /de/docs/HTML/Element/time	/de/docs/Web/HTML/Element/time
 /de/docs/HTML/Element/ul	/de/docs/Web/HTML/Element/ul
 /de/docs/HTML/Element/var	/de/docs/Web/HTML/Element/var
-/de/docs/HTML/HTML5	/de/docs/Web/HTML/HTML5
-/de/docs/HTML/HTML5/HTML5_element_list	/de/docs/Web/HTML/HTML5/HTML5_element_list
-/de/docs/HTML/HTML5/liste_der_HTML5_elemente	/de/docs/Web/HTML/HTML5/HTML5_element_list
-/de/docs/HTML/Inline_elemente	/de/docs/Web/HTML/Inline_elemente
+/de/docs/HTML/HTML5	/de/docs/Web/Guide/HTML/HTML5
+/de/docs/HTML/HTML5/HTML5_element_list	/de/docs/conflicting/Web/HTML/Element
+/de/docs/HTML/HTML5/liste_der_HTML5_elemente	/de/docs/conflicting/Web/HTML/Element
+/de/docs/HTML/Inline_elemente	/de/docs/Web/HTML/Inline_elements
 /de/docs/HTML/Using_the_application_cache	/de/docs/Web/HTML/Using_the_application_cache
 /de/docs/HTML:Element	/de/docs/Web/HTML/Element
 /de/docs/HTML:Element:b	/de/docs/Web/HTML/Element/b
-/de/docs/HTML:Element:h1	/de/docs/Web/HTML/Element/h1-h6
-/de/docs/HTML:Element:h2	/de/docs/Web/HTML/Element/h1-h6
-/de/docs/HTML:Element:h3	/de/docs/Web/HTML/Element/h1-h6
-/de/docs/HTML:Element:h4	/de/docs/Web/HTML/Element/h1-h6
-/de/docs/HTML:Element:h5	/de/docs/Web/HTML/Element/h1-h6
-/de/docs/HTML:Element:h6	/de/docs/Web/HTML/Element/h1-h6
-/de/docs/HTML:Element:head	/de/docs/Web/HTML/Element/head
+/de/docs/HTML:Element:h1	/de/docs/Web/HTML/Element/Heading_Elements
+/de/docs/HTML:Element:h2	/de/docs/Web/HTML/Element/Heading_Elements
+/de/docs/HTML:Element:h3	/de/docs/Web/HTML/Element/Heading_Elements
+/de/docs/HTML:Element:h4	/de/docs/Web/HTML/Element/Heading_Elements
+/de/docs/HTML:Element:h5	/de/docs/Web/HTML/Element/Heading_Elements
+/de/docs/HTML:Element:h6	/de/docs/Web/HTML/Element/Heading_Elements
+/de/docs/HTML:Element:head	/de/docs/Web/API/HTMLHeadElement
 /de/docs/HTML:Element:hr	/de/docs/Web/HTML/Element/hr
 /de/docs/HTML:Element:html	/de/docs/Web/HTML/Element/html
 /de/docs/HTML:Element:iframe	/de/docs/Web/HTML/Element/iframe
@@ -287,25 +320,25 @@
 /de/docs/Hauptseite	/de/docs/Web
 /de/docs/IndexedDB	/de/docs/Web/API/IndexedDB_API
 /de/docs/IndexedDB/Browser_storage_limits_and_eviction_criteria	/de/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria
-/de/docs/IndexedDB/Grundkonzepte_hinter_IndexedDB	/de/docs/Web/API/IndexedDB_API/Grundkonzepte_hinter_IndexedDB
-/de/docs/IndexedDB/IndexedDB_verwenden	/de/docs/Web/API/IndexedDB_API/IndexedDB_verwenden
+/de/docs/IndexedDB/Grundkonzepte_hinter_IndexedDB	/de/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB
+/de/docs/IndexedDB/IndexedDB_verwenden	/de/docs/Web/API/IndexedDB_API/Using_IndexedDB
 /de/docs/JavaScript	/de/docs/Web/JavaScript
-/de/docs/JavaScript/Eine_Wiedereinfuehrung_in_JavaScript	/de/docs/Web/JavaScript/Eine_Wiedereinfuehrung_in_JavaScript
+/de/docs/JavaScript/Eine_Wiedereinfuehrung_in_JavaScript	/de/docs/Web/JavaScript/A_re-introduction_to_JavaScript
 /de/docs/JavaScript/Guide	/de/docs/Web/JavaScript/Guide
-/de/docs/JavaScript/Guide/Ausdruecke_und_Operatoren	/de/docs/Web/JavaScript/Guide/Ausdruecke_und_Operatoren
+/de/docs/JavaScript/Guide/Ausdruecke_und_Operatoren	/de/docs/Web/JavaScript/Guide/Expressions_and_Operators
 /de/docs/JavaScript/Guide/Closures	/de/docs/Web/JavaScript/Closures
-/de/docs/JavaScript/Guide/Feinheiten_des_Objektmodells	/de/docs/Web/JavaScript/Guide/Feinheiten_des_Objektmodells
-/de/docs/JavaScript/Guide/Funktionen	/de/docs/Web/JavaScript/Guide/Funktionen
-/de/docs/JavaScript/Guide/Mit_Objekten_arbeiten	/de/docs/Web/JavaScript/Guide/Mit_Objekten_arbeiten
+/de/docs/JavaScript/Guide/Feinheiten_des_Objektmodells	/de/docs/Web/JavaScript/Guide/Details_of_the_Object_Model
+/de/docs/JavaScript/Guide/Funktionen	/de/docs/Web/JavaScript/Guide/Functions
+/de/docs/JavaScript/Guide/Mit_Objekten_arbeiten	/de/docs/Web/JavaScript/Guide/Working_with_Objects
 /de/docs/JavaScript/Guide/Regular_Expressions	/de/docs/Web/JavaScript/Guide/Regular_Expressions
-/de/docs/JavaScript/Guide/Statements	/de/docs/Web/JavaScript/Guide/Kontrollfluss_und_Fehlerbehandlung
-/de/docs/JavaScript/Guide/Ueber_JavaScript	/de/docs/Web/JavaScript/Guide/Einführung
-/de/docs/JavaScript/Guide/Ueber_diese_Einfuehrung	/de/docs/Web/JavaScript/Guide/Einführung
+/de/docs/JavaScript/Guide/Statements	/de/docs/Web/JavaScript/Guide/Control_flow_and_error_handling
+/de/docs/JavaScript/Guide/Ueber_JavaScript	/de/docs/Web/JavaScript/Guide/Introduction
+/de/docs/JavaScript/Guide/Ueber_diese_Einfuehrung	/de/docs/Web/JavaScript/Guide/Introduction
 /de/docs/JavaScript/Guide/Vererbung_ueberdacht	/de/docs/Web/JavaScript/Inheritance_and_the_prototype_chain
 /de/docs/JavaScript/Guide/Vordefinierte_Kernobjekte	/de/docs/Web/JavaScript/Guide
-/de/docs/JavaScript/Guide/Werte_Variablen_und_Literale	/de/docs/Web/JavaScript/Guide/Grammatik_und_Typen
-/de/docs/JavaScript/Guide/Über_Javascript	/de/docs/Web/JavaScript/Guide/Einführung
-/de/docs/JavaScript/Guide/Über_diese_Einführung	/de/docs/Web/JavaScript/Guide/Einführung
+/de/docs/JavaScript/Guide/Werte_Variablen_und_Literale	/de/docs/Web/JavaScript/Guide/Grammar_and_types
+/de/docs/JavaScript/Guide/Über_Javascript	/de/docs/Web/JavaScript/Guide/Introduction
+/de/docs/JavaScript/Guide/Über_diese_Einführung	/de/docs/Web/JavaScript/Guide/Introduction
 /de/docs/JavaScript/Javascript_lernen_für_Anfänger	/de/docs/Web/JavaScript/Guide
 /de/docs/JavaScript/Language_Resources	/de/docs/Web/JavaScript/Language_Resources
 /de/docs/JavaScript/Reference	/de/docs/Web/JavaScript/Reference
@@ -327,24 +360,25 @@
 /de/docs/JavaScript/Reference/Global_Objects/RegExp	/de/docs/Web/JavaScript/Reference/Global_Objects/RegExp
 /de/docs/JavaScript/Reference/Global_Objects/String	/de/docs/Web/JavaScript/Reference/Global_Objects/String
 /de/docs/JavaScript/Reference/Global_Objects/String/replace	/de/docs/Web/JavaScript/Reference/Global_Objects/String/replace
-/de/docs/JavaScript/Speicherverwaltung	/de/docs/Web/JavaScript/Speicherverwaltung
+/de/docs/JavaScript/Speicherverwaltung	/de/docs/Web/JavaScript/Memory_Management
 /de/docs/JavaScript/java_guide	/de/docs/Web/JavaScript/Guide
 /de/docs/JavaScript/javascript_guide	/de/docs/Web/JavaScript/Guide
-/de/docs/JavaScript/javascript_guide/Anweisungen	/de/docs/Web/JavaScript/Guide/Kontrollfluss_und_Fehlerbehandlung
-/de/docs/JavaScript/javascript_guide/Ausdrücke_und_Operatoren	/de/docs/Web/JavaScript/Guide/Ausdruecke_und_Operatoren
-/de/docs/JavaScript/javascript_guide/Funktionen	/de/docs/Web/JavaScript/Guide/Funktionen
-/de/docs/JavaScript/javascript_guide/Javascript_Übersicht	/de/docs/Web/JavaScript/Guide/Einführung
-/de/docs/JavaScript/javascript_guide/Mit_Objekten_arbeiten	/de/docs/Web/JavaScript/Guide/Mit_Objekten_arbeiten
+/de/docs/JavaScript/javascript_guide/Anweisungen	/de/docs/Web/JavaScript/Guide/Control_flow_and_error_handling
+/de/docs/JavaScript/javascript_guide/Ausdrücke_und_Operatoren	/de/docs/Web/JavaScript/Guide/Expressions_and_Operators
+/de/docs/JavaScript/javascript_guide/Funktionen	/de/docs/Web/JavaScript/Guide/Functions
+/de/docs/JavaScript/javascript_guide/Javascript_Übersicht	/de/docs/Web/JavaScript/Guide/Introduction
+/de/docs/JavaScript/javascript_guide/Mit_Objekten_arbeiten	/de/docs/Web/JavaScript/Guide/Working_with_Objects
 /de/docs/JavaScript/javascript_guide/Reguläre_Ausdrücke	/de/docs/Web/JavaScript/Guide/Regular_Expressions
-/de/docs/JavaScript/javascript_guide/Werte,_Variable_und_Literale	/de/docs/Web/JavaScript/Guide/Grammatik_und_Typen
-/de/docs/JavaScript/javascript_guide/Werte,_Variablen_und_Literale	/de/docs/Web/JavaScript/Guide/Grammatik_und_Typen
-/de/docs/JavaScript/javascript_guide/ueber_javascript	/de/docs/Web/JavaScript/Guide/Einführung
-/de/docs/JavaScript/javascript_guide/ueber_javascript/Über_Javascript	/de/docs/Web/JavaScript/Guide/Einführung
-/de/docs/JavaScript/javascript_guide/Über_Javascript	/de/docs/Web/JavaScript/Guide/Einführung
-/de/docs/JavaScript/javascript_guide/Über_diese_Einführung	/de/docs/Web/JavaScript/Guide/Einführung
-/de/docs/JavaScript/ueber_JavaScript	/de/docs/Web/JavaScript/Guide/Einführung
-/de/docs/JavaScript/ueber_JavaScript/Über_Javascript	/de/docs/Web/JavaScript/Guide/Einführung
-/de/docs/JavaScript/Über_Javascript	/de/docs/Web/JavaScript/Guide/Einführung
+/de/docs/JavaScript/javascript_guide/Werte,_Variable_und_Literale	/de/docs/Web/JavaScript/Guide/Grammar_and_types
+/de/docs/JavaScript/javascript_guide/Werte,_Variablen_und_Literale	/de/docs/Web/JavaScript/Guide/Grammar_and_types
+/de/docs/JavaScript/javascript_guide/ueber_javascript	/de/docs/Web/JavaScript/Guide/Introduction
+/de/docs/JavaScript/javascript_guide/ueber_javascript/Über_Javascript	/de/docs/Web/JavaScript/Guide/Introduction
+/de/docs/JavaScript/javascript_guide/Über_Javascript	/de/docs/Web/JavaScript/Guide/Introduction
+/de/docs/JavaScript/javascript_guide/Über_diese_Einführung	/de/docs/Web/JavaScript/Guide/Introduction
+/de/docs/JavaScript/ueber_JavaScript	/de/docs/Web/JavaScript/Guide/Introduction
+/de/docs/JavaScript/ueber_JavaScript/Über_Javascript	/de/docs/Web/JavaScript/Guide/Introduction
+/de/docs/JavaScript/Über_Javascript	/de/docs/Web/JavaScript/Guide/Introduction
+/de/docs/Learn/CSS/Building_blocks/Werten_Einheiten	/de/docs/Learn/CSS/Building_blocks/Values_and_units
 /de/docs/Learn/CSS/Introduction_to_CSS	/en-US/docs/Learn/CSS/First_steps
 /de/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors	/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors
 /de/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance	/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance
@@ -355,16 +389,68 @@
 /de/docs/Learn/CSS/Introduction_to_CSS/Syntax	/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured
 /de/docs/Learn/CSS/Introduction_to_CSS/Values_and_units	/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
 /de/docs/Learn/CSS/Styling_boxes	/en-US/docs/Learn/CSS/Building_blocks
+/de/docs/Learn/Common_questions/Wie_das_Internet_funktioniert	/de/docs/Learn/Common_questions/How_does_the_Internet_work
+/de/docs/Learn/Getting_started_with_the_web/JavaScript_basis	/de/docs/Learn/Getting_started_with_the_web/JavaScript_basics
+/de/docs/Learn/Getting_started_with_the_web/Wie_das_Internet_funktioniert	/de/docs/Learn/Getting_started_with_the_web/How_the_Web_works
+/de/docs/Learn/Getting_started_with_the_web/dateien_nutzen	/de/docs/Learn/Getting_started_with_the_web/Dealing_with_files
+/de/docs/Learn/HTML/Einführung_in_HTML	/de/docs/Learn/HTML/Introduction_to_HTML
+/de/docs/Learn/HTML/Einführung_in_HTML/Der_Kopf_Metadaten_in_HTML	/de/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
+/de/docs/Learn/HTML/Einführung_in_HTML/Document_and_website_structure	/de/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure
+/de/docs/Learn/HTML/Einführung_in_HTML/Einfache_Textformatierung_in_HTML	/de/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals
+/de/docs/Learn/HTML/Einführung_in_HTML/Erstellen_von_Hyperlinks	/de/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks
+/de/docs/Learn/HTML/Einführung_in_HTML/Fehlersuche_in_HTML	/de/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML
+/de/docs/Learn/HTML/Einführung_in_HTML/Fortgeschrittene_Textformatierung	/de/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting
+/de/docs/Learn/HTML/Einführung_in_HTML/Lerne_HTML_kennen	/de/docs/Learn/HTML/Introduction_to_HTML/Getting_started
+/de/docs/Learn/HTML/Einführung_in_HTML/Marking_up_a_letter	/de/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter
+/de/docs/Learn/HTML/Einführung_in_HTML/Structuring_a_page_of_content	/de/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content
+/de/docs/Learn/HTML/Forms	/de/docs/Learn/Forms
+/de/docs/Learn/HTML/Tables/Grund_tabelle_HTML	/de/docs/Learn/HTML/Tables/Basics
+/de/docs/Learn/JavaScript/Bausteine	/de/docs/Learn/JavaScript/Building_blocks
+/de/docs/Learn/JavaScript/Bausteine/Ereignisse	/de/docs/Learn/JavaScript/Building_blocks/Events
+/de/docs/Learn/JavaScript/First_steps/Erster_Blick	/de/docs/Learn/JavaScript/First_steps/A_first_splash
+/de/docs/Learn/JavaScript/First_steps/Was_ist_JavaScript	/de/docs/Learn/JavaScript/First_steps/What_is_JavaScript
+/de/docs/Learn/JavaScript/First_steps/lustige_geschichten_generator	/de/docs/Learn/JavaScript/First_steps/Silly_story_generator
+/de/docs/Learn/Mitarbeiten	/de/docs/orphaned/Learn/How_to_contribute
+/de/docs/Learn/Server-side/Erste_Schritte	/de/docs/Learn/Server-side/First_steps
+/de/docs/Learn/Server-side/Erste_Schritte/Introduction	/de/docs/Learn/Server-side/First_steps/Introduction
+/de/docs/Lokalisierung	/de/docs/Glossary/Localization
+/de/docs/MDN/Community	/de/docs/orphaned/MDN/Community
+/de/docs/MDN/Community/Bleibe_auf_dem_Laufenden	/de/docs/orphaned/MDN/Community/Whats_happening
 /de/docs/MDN/Contribute/Content	/de/docs/MDN/Guidelines
-/de/docs/MDN/Contribute/Content/Style_guide	/de/docs/MDN/Guidelines/Style_guide
+/de/docs/MDN/Contribute/Content/Style_guide	/de/docs/MDN/Guidelines/Writing_style_guide
 /de/docs/MDN/Contribute/Guidelines	/de/docs/MDN/Guidelines
-/de/docs/MDN/Contribute/Guidelines/Style_guide	/de/docs/MDN/Guidelines/Style_guide
+/de/docs/MDN/Contribute/Guidelines/Style_guide	/de/docs/MDN/Guidelines/Writing_style_guide
+/de/docs/MDN/Contribute/Howto/Do_a_technical_review	/de/docs/orphaned/MDN/Contribute/Howto/Do_a_technical_review
+/de/docs/MDN/Contribute/Howto/Do_an_editorial_review	/de/docs/orphaned/MDN/Contribute/Howto/Do_an_editorial_review
+/de/docs/MDN/Contribute/Howto/ERstellung_eines_MDN_Profils	/de/docs/orphaned/MDN/Contribute/Howto/Create_an_MDN_account
+/de/docs/MDN/Contribute/Howto/Schlagwörter_für_JavaScript_Seiten	/de/docs/orphaned/MDN/Contribute/Howto/Tag_JavaScript_pages
+/de/docs/MDN/Contribute/Howto/Set_the_summary_for_a_page	/de/docs/orphaned/MDN/Contribute/Howto/Set_the_summary_for_a_page
 /de/docs/MDN/Contribute/Structures	/de/docs/MDN/Structures
-/de/docs/MDN/Contribute/Structures/Kompatibilitaets_Tabellen	/de/docs/MDN/Structures/Kompatibilitaets_Tabellen
+/de/docs/MDN/Contribute/Structures/Kompatibilitaets_Tabellen	/de/docs/MDN/Structures/Compatibility_tables
+/de/docs/MDN/Contribute/zu_tun_im_MDN	/de/docs/conflicting/MDN/Contribute/Getting_started
 /de/docs/MDN/Erste_Schritte	/de/docs/MDN/Contribute/Getting_started
 /de/docs/MDN/Feedback	/de/docs/MDN/Contribute/Feedback
+/de/docs/MDN/Guidelines/Style_guide	/de/docs/MDN/Guidelines/Writing_style_guide
+/de/docs/MDN/Kuma	/de/docs/MDN/Yari
+/de/docs/MDN/Kuma/Beheben_von_KumaScript_Fehlern	/de/docs/MDN/Tools/KumaScript/Troubleshooting
+/de/docs/MDN/Structures/Kompatibilitaets_Tabellen	/de/docs/MDN/Structures/Compatibility_tables
+/de/docs/MDN/nutzer_leitfaden	/de/docs/MDN/Tools
+/de/docs/MDN/Über	/de/docs/MDN/About
+/de/docs/MDN/Über/Link_zu_MDN	/de/docs/orphaned/MDN/About/Linking_to_MDN
+/de/docs/MDN_at_ten	/de/docs/MDN/At_ten
+/de/docs/MDN_at_ten/History_of_MDN	/de/docs/MDN/At_ten/History_of_MDN
+/de/docs/MDN_at_ten/Zum_MDN_beitragen	/de/docs/conflicting/MDN/Contribute
+/de/docs/Mozilla/Add-ons/WebExtensions/API/Lesezeich.	/de/docs/Mozilla/Add-ons/WebExtensions/API/bookmarks
+/de/docs/Mozilla/Add-ons/WebExtensions/Arbeiten_mit_Taps_API	/de/docs/Mozilla/Add-ons/WebExtensions/Working_with_the_Tabs_API
+/de/docs/Mozilla/Add-ons/WebExtensions/Beispiele	/de/docs/Mozilla/Add-ons/WebExtensions/Examples
+/de/docs/Mozilla/Add-ons/WebExtensions/Deine_erste_WebErweiterung	/de/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension
+/de/docs/Mozilla/Add-ons/WebExtensions/Deine_zweite_Erweiterung	/de/docs/Mozilla/Add-ons/WebExtensions/Your_second_WebExtension
+/de/docs/Mozilla/Developer_guide/Quelltexte	/de/docs/Mozilla/Developer_guide/Source_Code
+/de/docs/Mozilla/Developer_guide/firefox_erfolgreich_erstellt	/de/docs/Mozilla/Developer_guide/So_you_just_built_Firefox
 /de/docs/Mozilla_entwickeln	/de/docs/Mozilla/Developer_guide
 /de/docs/Online_and_offline_events	/de/docs/Web/API/NavigatorOnLine/Online_and_offline_events
+/de/docs/OpenSearch_Plugin_für_Firefox_erstellen	/de/docs/Web/OpenSearch
+/de/docs/Plugins/Flash-Aktivierung:_Browser-Vergleich	/de/docs/orphaned/Plugins/Flash_Activation:_Browser_Comparison
 /de/docs/Profilmanager	/de/docs/Profile_Manager
 /de/docs/QA/Stress_Testing	/de/docs/Qualitätssicherung/Stress_Testing
 /de/docs/QA:Stress_Testing	/de/docs/Qualitätssicherung/Stress_Testing
@@ -373,30 +459,73 @@
 /de/docs/SVG/Element/animate	/de/docs/Web/SVG/Element/animate
 /de/docs/SVG/Element/foreignObject	/de/docs/Web/SVG/Element/foreignObject
 /de/docs/SVG/Tutorial	/de/docs/Web/SVG/Tutorial
-/de/docs/SVG/Tutorial/Einführung	/de/docs/Web/SVG/Tutorial/Einführung
-/de/docs/Suche_Plugins	/de/docs/OpenSearch_Plugin_für_Firefox_erstellen
+/de/docs/SVG/Tutorial/Einführung	/de/docs/Web/SVG/Tutorial/Introduction
+/de/docs/Suche_Plugins	/de/docs/Web/OpenSearch
 /de/docs/Theme_erstellen:Einführung	/de/docs/Theme_erstellen/Einführung
 /de/docs/Theme_erstellen:UUID	/de/docs/Theme_erstellen/UUID
 /de/docs/Theme_erstellen:contents.rdf	/de/docs/Theme_erstellen/contents.rdf
 /de/docs/Theme_erstellen:install.rdf	/de/docs/Theme_erstellen/install.rdf
 /de/docs/Themen	/de/docs/Themes
-/de/docs/Tools/Seiten_Inspektor/Style_panel	/de/docs/Tools/Seiten_Inspektor
-/de/docs/Verwenden_des_Cache_beim_Firefox_1.5	/de/docs/Benutzen_des_Zwischenspeichers_in_Firefox_1.5_(caching)
+/de/docs/Tools/3D_untersuchung	/de/docs/Tools/3D_View
+/de/docs/Tools/Add-ons	/de/docs/orphaned/Tools/Add-ons
+/de/docs/Tools/Barrierefreiheits_inspektor	/de/docs/Tools/Accessibility_inspector
+/de/docs/Tools/Browser_Werkzeuge	/de/docs/Tools/Browser_Toolbox
+/de/docs/Tools/Page_Inspector/How_to/Event_Listener_untersuchen	/de/docs/Tools/Page_Inspector/How_to/Examine_event_listeners
+/de/docs/Tools/Page_Inspector/How_to/Raster_Layout_untersuchen	/de/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts
+/de/docs/Tools/Page_Inspector/How_to/Schriftarten_Bearbeitung	/de/docs/Tools/Page_Inspector/How_to/Edit_fonts
+/de/docs/Tools/Seiten_Inspektor	/de/docs/Tools/Page_Inspector
+/de/docs/Tools/Seiten_Inspektor/Style_panel	/de/docs/Tools/Page_Inspector
+/de/docs/Tools/Seiten_Inspektor/Tastenkombinationen	/de/docs/Tools/Page_Inspector/Keyboard_shortcuts
+/de/docs/Tools/Shader-Editor	/de/docs/Tools/Shader_Editor
+/de/docs/Tools/WebIDE_clone	/de/docs/orphaned/Tools/WebIDE_clone
+/de/docs/Tools/Web_Konsole	/de/docs/Tools/Web_Console
+/de/docs/Tools/Web_Konsole/Hilfe	/de/docs/Tools/Web_Console/Helpers
+/de/docs/Tools/bildschirmgroessen-testen	/de/docs/Tools/Responsive_Design_Mode
+/de/docs/Tools/netzwerkanalyse	/de/docs/Tools/Network_Monitor
+/de/docs/Updating_web_applications_for_Firefox_3	/de/docs/Mozilla/Firefox/Releases/3/Updating_web_applications
+/de/docs/Verwenden_des_Cache_beim_Firefox_1.5	/de/docs/Mozilla/Firefox/Releases/1.5/Using_Firefox_1.5_caching
+/de/docs/Web/API/AudioContext/decodeAudioData	/de/docs/Web/API/BaseAudioContext/decodeAudioData
 /de/docs/Web/API/CSSRule.cssText	/de/docs/Web/API/CSSRule/cssText
 /de/docs/Web/API/Element.querySelector	/de/docs/Web/API/Element/querySelector
+/de/docs/Web/API/File/Typ	/de/docs/Web/API/File/type
+/de/docs/Web/API/File/Zugriff_auf_Dateien_von_Webapplikationen	/de/docs/Web/API/File/Using_files_from_web_applications
+/de/docs/Web/API/IndexedDB_API/Grundkonzepte_hinter_IndexedDB	/de/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB
+/de/docs/Web/API/IndexedDB_API/IndexedDB_verwenden	/de/docs/Web/API/IndexedDB_API/Using_IndexedDB
 /de/docs/Web/API/MozMobileConnection.selectNetworkAutomatically	/de/docs/Web/API/MozMobileConnection/selectNetworkAutomatically
+/de/docs/Web/API/Navigator/registerProtocolHandler/Webbasierte_protokoll-handler	/de/docs/Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers
 /de/docs/Web/API/Node.cloneNode	/de/docs/Web/API/Node/cloneNode
-/de/docs/Web/API/WebGL_API/3D-Objekte_mit_WebGL_erstellen	/de/docs/Web/API/WebGL_API/Tutorial/3D-Objekte_mit_WebGL_erstellen
-/de/docs/Web/API/WebGL_API/Animierte_Texturen_in_WebGL	/de/docs/Web/API/WebGL_API/Tutorial/Animierte_Texturen_in_WebGL
-/de/docs/Web/API/WebGL_API/Beleuchtung_in_WebGL	/de/docs/Web/API/WebGL_API/Tutorial/Beleuchtung_in_WebGL
-/de/docs/Web/API/WebGL_API/Einführung_in_WebGL	/de/docs/Web/API/WebGL_API/Tutorial/Einführung_in_WebGL
-/de/docs/Web/API/WebGL_API/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen	/de/docs/Web/API/WebGL_API/Tutorial/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen
-/de/docs/Web/API/WebGL_API/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext	/de/docs/Web/API/WebGL_API/Tutorial/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext
-/de/docs/Web/API/WebGL_API/Objekte_mit_WebGL_animieren	/de/docs/Web/API/WebGL_API/Tutorial/Objekte_mit_WebGL_animieren
-/de/docs/Web/API/WebGL_API/Texturen_in_WebGL_verwenden	/de/docs/Web/API/WebGL_API/Tutorial/Texturen_in_WebGL_verwenden
+/de/docs/Web/API/Node/innerText	/de/docs/Web/API/HTMLElement/innerText
+/de/docs/Web/API/Vollbild_API	/de/docs/Web/API/Fullscreen_API
+/de/docs/Web/API/WebGL_API/3D-Objekte_mit_WebGL_erstellen	/de/docs/Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL
+/de/docs/Web/API/WebGL_API/Animierte_Texturen_in_WebGL	/de/docs/Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL
+/de/docs/Web/API/WebGL_API/Beleuchtung_in_WebGL	/de/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL
+/de/docs/Web/API/WebGL_API/Einführung_in_WebGL	/de/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL
+/de/docs/Web/API/WebGL_API/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen	/de/docs/Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL
+/de/docs/Web/API/WebGL_API/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext	/de/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context
+/de/docs/Web/API/WebGL_API/Objekte_mit_WebGL_animieren	/de/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL
+/de/docs/Web/API/WebGL_API/Texturen_in_WebGL_verwenden	/de/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL
+/de/docs/Web/API/WebGL_API/Tutorial/3D-Objekte_mit_WebGL_erstellen	/de/docs/Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL
+/de/docs/Web/API/WebGL_API/Tutorial/Animierte_Texturen_in_WebGL	/de/docs/Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL
+/de/docs/Web/API/WebGL_API/Tutorial/Beleuchtung_in_WebGL	/de/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL
+/de/docs/Web/API/WebGL_API/Tutorial/Einführung_in_WebGL	/de/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL
+/de/docs/Web/API/WebGL_API/Tutorial/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen	/de/docs/Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL
+/de/docs/Web/API/WebGL_API/Tutorial/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext	/de/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context
+/de/docs/Web/API/WebGL_API/Tutorial/Objekte_mit_WebGL_animieren	/de/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL
+/de/docs/Web/API/WebGL_API/Tutorial/Texturen_in_WebGL_verwenden	/de/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL
 /de/docs/Web/API/Window.alert	/de/docs/Web/API/Window/alert
-/de/docs/Web/API/Window/setTimeout	/de/docs/Web/API/WindowTimers/setTimeout
+/de/docs/Web/API/Window/setTimeout	/de/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout
+/de/docs/Web/API/WindowBase64	/de/docs/Web/API/WindowOrWorkerGlobalScope
+/de/docs/Web/API/WindowBase64/btoa	/de/docs/Web/API/WindowOrWorkerGlobalScope/btoa
+/de/docs/Web/API/WindowTimers	/de/docs/conflicting/Web/API/WindowOrWorkerGlobalScope
+/de/docs/Web/API/WindowTimers/setTimeout	/de/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout
 /de/docs/Web/API/document.documentElement	/de/docs/Web/API/Document/documentElement
+/de/docs/Web/Barrierefreiheit	/de/docs/Web/Accessibility
+/de/docs/Web/Barrierefreiheit/ARIA	/de/docs/Web/Accessibility/ARIA
+/de/docs/Web/Barrierefreiheit/ARIA/ARIA_Live_Regionen	/de/docs/Web/Accessibility/ARIA/ARIA_Live_Regions
+/de/docs/Web/Barrierefreiheit/ARIA/ARIA_Techniken	/de/docs/Web/Accessibility/ARIA/ARIA_Techniques
+/de/docs/Web/Barrierefreiheit/An_overview_of_accessible_web_applications_and_widgets	/de/docs/Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets
+/de/docs/Web/Barrierefreiheit/Tastaturgesteuerte_JavaScript_Komponenten	/de/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets
+/de/docs/Web/Barrierefreiheit/Webentwicklung	/de/docs/conflicting/Web/Accessibility
 /de/docs/Web/CSS/-moz-alias	/de/docs/Web/CSS/cursor
 /de/docs/Web/CSS/-moz-appearance	/de/docs/Web/CSS/appearance
 /de/docs/Web/CSS/-moz-background-inline-policy	/de/docs/Web/CSS/box-decoration-break
@@ -405,15 +534,47 @@
 /de/docs/Web/CSS/-moz-border-radius-bottomright	/de/docs/Web/CSS/border-bottom-right-radius
 /de/docs/Web/CSS/-moz-border-radius-topleft	/de/docs/Web/CSS/border-top-left-radius
 /de/docs/Web/CSS/-moz-border-radius-topright	/de/docs/Web/CSS/border-top-right-radius
+/de/docs/Web/CSS/-moz-box-flex	/de/docs/Web/CSS/box-flex
+/de/docs/Web/CSS/-moz-box-ordinal-group	/de/docs/Web/CSS/box-ordinal-group
+/de/docs/Web/CSS/-moz-box-pack	/de/docs/Web/CSS/box-pack
 /de/docs/Web/CSS/-moz-box-shadow	/de/docs/Web/CSS/box-shadow
+/de/docs/Web/CSS/-moz-cell	/de/docs/conflicting/Web/CSS/cursor
 /de/docs/Web/CSS/-moz-context-menu	/de/docs/Web/CSS/cursor
 /de/docs/Web/CSS/-moz-copy	/de/docs/Web/CSS/cursor
 /de/docs/Web/CSS/-moz-spinning	/de/docs/Web/CSS/cursor
-/de/docs/Web/CSS/Adjacent_sibling_combinator	/de/docs/Web/CSS/Angrenzende_Geschwisterselektoren
-/de/docs/Web/CSS/Adjacent_sibling_selectors	/de/docs/Web/CSS/Angrenzende_Geschwisterselektoren
-/de/docs/Web/CSS/Boxmodell	/de/docs/Web/CSS/CSS_Boxmodell/Einführung_in_das_CSS_Boxmodell
-/de/docs/Web/CSS/CSS_Box_Model	/de/docs/Web/CSS/CSS_Boxmodell
-/de/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator	/de/docs/Web/CSS/CSS_Boxmodell/Box-shadow_generator
+/de/docs/Web/CSS/-moz-user-modify	/de/docs/Web/CSS/user-modify
+/de/docs/Web/CSS/-moz-user-select	/de/docs/Web/CSS/user-select
+/de/docs/Web/CSS/-webkit-mask-origin	/de/docs/Web/CSS/mask-origin
+/de/docs/Web/CSS/-webkit-mask-repeat	/de/docs/Web/CSS/mask-repeat
+/de/docs/Web/CSS/:-moz-placeholder	/de/docs/Web/CSS/:placeholder-shown
+/de/docs/Web/CSS/:-moz-ui-invalid	/de/docs/Web/CSS/:user-invalid
+/de/docs/Web/CSS/:-webkit-autofill	/de/docs/Web/CSS/:autofill
+/de/docs/Web/CSS/::-moz-placeholder	/de/docs/conflicting/Web/CSS/::placeholder
+/de/docs/Web/CSS/Adjacent_sibling_selectors	/de/docs/Web/CSS/Adjacent_sibling_combinator
+/de/docs/Web/CSS/Alias	/de/docs/conflicting/Web/CSS/cursor_35a62ea3f10b688a3a87ccfe07779743
+/de/docs/Web/CSS/Angrenzende_Geschwisterselektoren	/de/docs/Web/CSS/Adjacent_sibling_combinator
+/de/docs/Web/CSS/Attributselektoren	/de/docs/Web/CSS/Attribute_selectors
+/de/docs/Web/CSS/Aural	/de/docs/Web/CSS/@media/aural
+/de/docs/Web/CSS/Boxmodell	/de/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
+/de/docs/Web/CSS/CSS_Animations/CSS_Animationen_nutzen	/de/docs/Web/CSS/CSS_Animations/Using_CSS_animations
+/de/docs/Web/CSS/CSS_Background_and_Borders	/de/docs/Web/CSS/CSS_Backgrounds_and_Borders
+/de/docs/Web/CSS/CSS_Background_and_Borders/Mehrere_Hintergründe_in_CSS_verwenden	/de/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds
+/de/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator	/de/docs/Web/CSS/CSS_Background_and_Borders/Box-shadow_generator
+/de/docs/Web/CSS/CSS_Boxmodell	/de/docs/Web/CSS/CSS_Box_Model
+/de/docs/Web/CSS/CSS_Boxmodell/Box-shadow_generator	/de/docs/Web/CSS/CSS_Background_and_Borders/Box-shadow_generator
+/de/docs/Web/CSS/CSS_Boxmodell/Einführung_in_das_CSS_Boxmodell	/de/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
+/de/docs/Web/CSS/CSS_Boxmodell/Zusammenfallen_von_Außenabständen_meistern	/de/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
+/de/docs/Web/CSS/CSS_Colors	/de/docs/Web/CSS/CSS_Color
+/de/docs/Web/CSS/CSS_Colors/farbauswahl_werkzeug	/de/docs/Web/CSS/CSS_Colors/Color_picker_tool
+/de/docs/Web/CSS/CSS_Compositing_and_Blending	/de/docs/Web/CSS/Compositing_and_Blending
+/de/docs/Web/CSS/CSS_Flexible_Box_Layout/Flex_Elemente_Sortieren	/de/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items
+/de/docs/Web/CSS/CSS_Flexible_Box_Layout/Grundlegende_Konzepte_der_Flexbox	/de/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
+/de/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes	/de/docs/conflicting/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
+/de/docs/Web/CSS/CSS_Lists_and_Counters/CSS_Zähler_verwenden	/de/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters
+/de/docs/Web/CSS/CSS_Lists_and_Counters/Konsistente_Listeneinrückung	/de/docs/Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation
+/de/docs/Web/CSS/CSS_Masken	/de/docs/Web/CSS/CSS_Masking
+/de/docs/Web/CSS/CSS_Namensräume	/de/docs/Web/CSS/CSS_Namespaces
+/de/docs/Web/CSS/CSS_Referenz	/de/docs/Web/CSS/Reference
 /de/docs/Web/CSS/CSS_Referenz/::backdrop	/de/docs/Web/CSS/::backdrop
 /de/docs/Web/CSS/CSS_Referenz/	/de/docs/Web/CSS/basic-shape
 /de/docs/Web/CSS/CSS_Referenz/@viewport	/de/docs/Web/CSS/@viewport
@@ -421,113 +582,355 @@
 /de/docs/Web/CSS/CSS_Referenz/Webkit_Extensions	/de/docs/Web/CSS/WebKit_Extensions
 /de/docs/Web/CSS/CSS_Referenz/line-break	/de/docs/Web/CSS/line-break
 /de/docs/Web/CSS/CSS_Referenz/mix-blend-mode	/de/docs/Web/CSS/mix-blend-mode
+/de/docs/Web/CSS/CSS_Textdekoration	/de/docs/Web/CSS/CSS_Text_Decoration
+/de/docs/Web/CSS/CSS_Transforms/CSS_Transformationen_verwenden	/de/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms
+/de/docs/Web/CSS/CSS_Typen	/de/docs/Web/CSS/CSS_Types
+/de/docs/Web/CSS/CSS_User_Interface	/de/docs/conflicting/Web/CSS/CSS_Basic_User_Interface
 /de/docs/Web/CSS/CSS_Werte_Geltung	/de/docs/Web/CSS
 /de/docs/Web/CSS/CSS_animierbare_Eigenschaften	/de/docs/Web/CSS
 /de/docs/Web/CSS/CSS_prozentuale_werte	/de/docs/Web/CSS
 /de/docs/Web/CSS/CSS_werte_syntax	/de/docs/Web/CSS
-/de/docs/Web/CSS/Child_selectors	/de/docs/Web/CSS/Kindselektoren
-/de/docs/Web/CSS/Getting_Started	/de/docs/Web/Guide/CSS/Getting_started
+/de/docs/Web/CSS/Child_selectors	/de/docs/Web/CSS/Child_combinator
+/de/docs/Web/CSS/Farben	/de/docs/Web/CSS/color_value
+/de/docs/Web/CSS/Getting_Started	/de/docs/conflicting/Learn/CSS/First_steps
+/de/docs/Web/CSS/ID-Selektoren	/de/docs/Web/CSS/ID_selectors
+/de/docs/Web/CSS/Index	/de/docs/orphaned/Web/CSS/Index
+/de/docs/Web/CSS/Initialwert	/de/docs/Web/CSS/initial_value
+/de/docs/Web/CSS/Kindselektoren	/de/docs/Web/CSS/Child_combinator
+/de/docs/Web/CSS/Klassenselektoren	/de/docs/Web/CSS/Class_selectors
+/de/docs/Web/CSS/Kurzformat_Eigenschaft	/de/docs/Web/CSS/Shorthand_properties
+/de/docs/Web/CSS/Motion_Path	/de/docs/Web/CSS/CSS_Motion_Path
+/de/docs/Web/CSS/Property_Template	/de/docs/orphaned/MDN/Contribute/Howto/Document_a_CSS_property/Property_template
 /de/docs/Web/CSS/Pseudoklasse	/de/docs/Web/CSS/Pseudo-classes
-/de/docs/Web/CSS/Referenz	/de/docs/Web/CSS/CSS_Referenz
-/de/docs/Web/CSS/Replaced_element	/de/docs/Web/CSS/ersetztes_Element
+/de/docs/Web/CSS/Referenz	/de/docs/Web/CSS/Reference
+/de/docs/Web/CSS/Spezifität	/de/docs/Web/CSS/Specificity
+/de/docs/Web/CSS/Vererbung	/de/docs/Web/CSS/inheritance
+/de/docs/Web/CSS/Wertdefinitionssyntax	/de/docs/Web/CSS/Value_definition_syntax
 /de/docs/Web/CSS/attr	/de/docs/Web/CSS/attr()
+/de/docs/Web/CSS/auto	/de/docs/conflicting/Web/CSS/width
+/de/docs/Web/CSS/berechneter_Wert	/de/docs/Web/CSS/computed_value
 /de/docs/Web/CSS/calc	/de/docs/Web/CSS/calc()
+/de/docs/Web/CSS/ersetztes_Element	/de/docs/Web/CSS/Replaced_element
+/de/docs/Web/CSS/grid-gap	/de/docs/Web/CSS/gap
 /de/docs/Web/CSS/hidden	/de/docs/Web/CSS/visibility
 /de/docs/Web/CSS/linear-gradient	/de/docs/Web/CSS/linear-gradient()
 /de/docs/Web/CSS/marks	/de/docs/Web/CSS/@page/marks
 /de/docs/Web/CSS/mq-boolean	/de/docs/Web/CSS/Media_Queries/Using_media_queries
+/de/docs/Web/CSS/none	/de/docs/conflicting/Web/CSS/float
+/de/docs/Web/CSS/normal	/de/docs/conflicting/Web/CSS/font-variant
+/de/docs/Web/CSS/tatsächlicher_Wert	/de/docs/Web/CSS/actual_value
+/de/docs/Web/CSS/url	/de/docs/Web/CSS/url()
 /de/docs/Web/CSS/visible	/de/docs/Web/CSS/visibility
+/de/docs/Web/CSS/word-wrap	/de/docs/Web/CSS/overflow-wrap
+/de/docs/Web/Events/DOMContentLoaded	/de/docs/Web/API/Window/DOMContentLoaded_event
+/de/docs/Web/Events/change	/de/docs/Web/API/HTMLElement/change_event
 /de/docs/Web/Events/fullscreenchange	/de/docs/Web/API/Document/fullscreenchange_event
+/de/docs/Web/Events/load	/de/docs/Web/API/Window/load_event
+/de/docs/Web/Events/readystatechange	/de/docs/Web/API/Document/readystatechange_event
 /de/docs/Web/Events/submit	/de/docs/Web/API/HTMLFormElement/submit_event
 /de/docs/Web/Events/webglcontextcreationerror	/de/docs/Web/API/HTMLCanvasElement/webglcontextcreationerror_event
 /de/docs/Web/Events/webglcontextlost	/de/docs/Web/API/HTMLCanvasElement/webglcontextlost_event
 /de/docs/Web/Events/webglcontextrestored	/de/docs/Web/API/HTMLCanvasElement/webglcontextrestored_event
+/de/docs/Web/Guide/AJAX/Erste_Schritte	/de/docs/Web/Guide/AJAX/Getting_Started
 /de/docs/Web/Guide/CSS	/de/docs/Learn/CSS
-/de/docs/Web/Guide/CSS/CSS_Animationen_nutzen	/de/docs/Web/CSS/CSS_Animations/CSS_Animationen_nutzen
-/de/docs/Web/Guide/CSS/Flexible_boxes	/de/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
-/de/docs/Web/Guide/CSS/mehrere_Hintergründe_verwenden	/de/docs/Web/CSS/CSS_Background_and_Borders/Mehrere_Hintergründe_in_CSS_verwenden
+/de/docs/Web/Guide/CSS/CSS_Animationen_nutzen	/de/docs/Web/CSS/CSS_Animations/Using_CSS_animations
+/de/docs/Web/Guide/CSS/Flexible_boxes	/de/docs/conflicting/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
+/de/docs/Web/Guide/CSS/Getting_started	/de/docs/conflicting/Learn/CSS/First_steps
+/de/docs/Web/Guide/CSS/Getting_started/Farbe	/de/docs/conflicting/Learn/CSS/Building_blocks/Values_and_units
+/de/docs/Web/Guide/CSS/Getting_started/Kaskadierung_und_vererbung	/de/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance
+/de/docs/Web/Guide/CSS/Getting_started/Lesbares_CSS	/de/docs/Learn/CSS/First_steps/How_CSS_is_structured
+/de/docs/Web/Guide/CSS/Getting_started/Selektoren	/de/docs/Learn/CSS/Building_blocks/Selectors
+/de/docs/Web/Guide/CSS/Getting_started/Textstyles	/de/docs/Learn/CSS/Styling_text/Fundamentals
+/de/docs/Web/Guide/CSS/Getting_started/Was_ist_CSS	/de/docs/Learn/CSS/First_steps/How_CSS_works
+/de/docs/Web/Guide/CSS/Getting_started/Why_use_CSS	/de/docs/conflicting/Learn/CSS/First_steps/How_CSS_works
+/de/docs/Web/Guide/CSS/Getting_started/Wie_CSS_funktioniert	/de/docs/conflicting/Learn/CSS/First_steps/How_CSS_works_0e31d13696060558e208fc6c734ae400
+/de/docs/Web/Guide/CSS/Scaling_background_images	/de/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images
+/de/docs/Web/Guide/CSS/mehrere_Hintergründe_verwenden	/de/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds
+/de/docs/Web/Guide/DOM	/de/docs/conflicting/Web/API/Document_Object_Model_656f0e51418b39c498011268be9b3a10
+/de/docs/Web/Guide/DOM/Manipulating_the_browser_history	/de/docs/Web/API/History_API
 /de/docs/Web/Guide/HTML	/de/docs/Learn/HTML
-/de/docs/Web/Guide/HTML/Einführung	/de/docs/Learn/HTML/Einführung_in_HTML
-/de/docs/Web/HTML/Element/h1	/de/docs/Web/HTML/Element/h1-h6
-/de/docs/Web/HTML/Element/h2	/de/docs/Web/HTML/Element/h1-h6
-/de/docs/Web/HTML/Element/h3	/de/docs/Web/HTML/Element/h1-h6
-/de/docs/Web/HTML/Element/h4	/de/docs/Web/HTML/Element/h1-h6
-/de/docs/Web/HTML/Element/h5	/de/docs/Web/HTML/Element/h1-h6
-/de/docs/Web/HTML/Element/h6	/de/docs/Web/HTML/Element/h1-h6
-/de/docs/Web/JavaScript/Datenstruktures	/de/docs/Web/JavaScript/Datenstrukturen
+/de/docs/Web/Guide/HTML/Canvas_Tutorial	/de/docs/Web/API/Canvas_API/Tutorial
+/de/docs/Web/Guide/HTML/Canvas_Tutorial/Advanced_animations	/de/docs/Web/API/Canvas_API/Tutorial/Advanced_animations
+/de/docs/Web/Guide/HTML/Canvas_Tutorial/Applying_styles_and_colors	/de/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors
+/de/docs/Web/Guide/HTML/Canvas_Tutorial/Basic_animations	/de/docs/Web/API/Canvas_API/Tutorial/Basic_animations
+/de/docs/Web/Guide/HTML/Canvas_Tutorial/Bilder	/de/docs/Web/API/Canvas_API/Tutorial/Using_images
+/de/docs/Web/Guide/HTML/Canvas_Tutorial/Canvas_optimieren	/de/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas
+/de/docs/Web/Guide/HTML/Canvas_Tutorial/Drawing_text	/de/docs/Web/API/Canvas_API/Tutorial/Drawing_text
+/de/docs/Web/Guide/HTML/Canvas_Tutorial/Formen_zeichnen	/de/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes
+/de/docs/Web/Guide/HTML/Canvas_Tutorial/Grundlagen	/de/docs/Web/API/Canvas_API/Tutorial/Basic_usage
+/de/docs/Web/Guide/HTML/Content_Editable	/de/docs/Web/Guide/HTML/Editable_content
+/de/docs/Web/Guide/HTML/Einführung	/de/docs/Learn/HTML/Introduction_to_HTML
+/de/docs/Web/Guide/HTML/Inhaltskategorien	/de/docs/Web/Guide/HTML/Content_categories
+/de/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document	/de/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines
+/de/docs/Web/HTML/Block-level_elemente	/de/docs/Web/HTML/Block-level_elements
+/de/docs/Web/HTML/Canvas	/de/docs/Web/API/Canvas_API
+/de/docs/Web/HTML/Element/h1	/de/docs/Web/HTML/Element/Heading_Elements
+/de/docs/Web/HTML/Element/h1-h6	/de/docs/Web/HTML/Element/Heading_Elements
+/de/docs/Web/HTML/Element/h2	/de/docs/Web/HTML/Element/Heading_Elements
+/de/docs/Web/HTML/Element/h3	/de/docs/Web/HTML/Element/Heading_Elements
+/de/docs/Web/HTML/Element/h4	/de/docs/Web/HTML/Element/Heading_Elements
+/de/docs/Web/HTML/Element/h5	/de/docs/Web/HTML/Element/Heading_Elements
+/de/docs/Web/HTML/Element/h6	/de/docs/Web/HTML/Element/Heading_Elements
+/de/docs/Web/HTML/Element/head	/de/docs/Web/API/HTMLHeadElement
+/de/docs/Web/HTML/Globale_Attribute	/de/docs/Web/HTML/Global_attributes
+/de/docs/Web/HTML/Globale_Attribute/accesskey	/de/docs/Web/HTML/Global_attributes/accesskey
+/de/docs/Web/HTML/Globale_Attribute/autocapitalize	/de/docs/Web/HTML/Global_attributes/autocapitalize
+/de/docs/Web/HTML/Globale_Attribute/class	/de/docs/Web/HTML/Global_attributes/class
+/de/docs/Web/HTML/Globale_Attribute/contenteditable	/de/docs/Web/HTML/Global_attributes/contenteditable
+/de/docs/Web/HTML/Globale_Attribute/dir	/de/docs/Web/HTML/Global_attributes/dir
+/de/docs/Web/HTML/Globale_Attribute/draggable	/de/docs/Web/HTML/Global_attributes/draggable
+/de/docs/Web/HTML/Globale_Attribute/dropzone	/de/docs/orphaned/Web/HTML/Global_attributes/dropzone
+/de/docs/Web/HTML/Globale_Attribute/hidden	/de/docs/Web/HTML/Global_attributes/hidden
+/de/docs/Web/HTML/Globale_Attribute/id	/de/docs/Web/HTML/Global_attributes/id
+/de/docs/Web/HTML/Globale_Attribute/inputmode	/de/docs/Web/HTML/Global_attributes/inputmode
+/de/docs/Web/HTML/Globale_Attribute/is	/de/docs/Web/HTML/Global_attributes/is
+/de/docs/Web/HTML/Globale_Attribute/kontextmenu	/de/docs/Web/HTML/Global_attributes/contextmenu
+/de/docs/Web/HTML/Globale_Attribute/lang	/de/docs/Web/HTML/Global_attributes/lang
+/de/docs/Web/HTML/Globale_Attribute/style	/de/docs/Web/HTML/Global_attributes/style
+/de/docs/Web/HTML/Globale_Attribute/tabindex	/de/docs/Web/HTML/Global_attributes/tabindex
+/de/docs/Web/HTML/Globale_Attribute/title	/de/docs/Web/HTML/Global_attributes/title
+/de/docs/Web/HTML/Globale_Attribute/translate	/de/docs/Web/HTML/Global_attributes/translate
+/de/docs/Web/HTML/HTML5	/de/docs/Web/Guide/HTML/HTML5
+/de/docs/Web/HTML/HTML5/HTML5_element_list	/de/docs/conflicting/Web/HTML/Element
+/de/docs/Web/HTML/Inline_elemente	/de/docs/Web/HTML/Inline_elements
+/de/docs/Web/HTML/Referenz	/de/docs/Web/HTML/Reference
+/de/docs/Web/HTTP/CORS/Errors/CORSFehlenderAllowHeaderAusPreflight	/de/docs/Web/HTTP/CORS/Errors/CORSMissingAllowHeaderFromPreflight
+/de/docs/Web/HTTP/CORS/Errors/CORSFehltQuelleErlauben	/de/docs/Web/HTTP/CORS/Errors/CORSMissingAllowOrigin
+/de/docs/Web/HTTP/Caching_FAQ	/de/docs/Web/HTTP/Caching
+/de/docs/Web/JavaScript/Aufzählbarkeit_und_Zugehörigkeit_von_Eigenschaften	/de/docs/Web/JavaScript/Enumerability_and_ownership_of_properties
+/de/docs/Web/JavaScript/Datenstrukturen	/de/docs/Web/JavaScript/Data_structures
+/de/docs/Web/JavaScript/Datenstruktures	/de/docs/Web/JavaScript/Data_structures
+/de/docs/Web/JavaScript/Eine_Wiedereinfuehrung_in_JavaScript	/de/docs/Web/JavaScript/A_re-introduction_to_JavaScript
+/de/docs/Web/JavaScript/Einführung_in_den_Gebrauch_von_XPath_in_JavaScript	/de/docs/Web/XPath/Introduction_to_using_XPath_in_JavaScript
+/de/docs/Web/JavaScript/Guide/Ausdruecke_und_Operatoren	/de/docs/Web/JavaScript/Guide/Expressions_and_Operators
 /de/docs/Web/JavaScript/Guide/Closures	/de/docs/Web/JavaScript/Closures
-/de/docs/Web/JavaScript/Guide/Statements	/de/docs/Web/JavaScript/Guide/Kontrollfluss_und_Fehlerbehandlung
-/de/docs/Web/JavaScript/Guide/Ueber_JavaScript	/de/docs/Web/JavaScript/Guide/Einführung
-/de/docs/Web/JavaScript/Guide/Ueber_diese_Einfuehrung	/de/docs/Web/JavaScript/Guide/Einführung
+/de/docs/Web/JavaScript/Guide/Einführung	/de/docs/Web/JavaScript/Guide/Introduction
+/de/docs/Web/JavaScript/Guide/Feinheiten_des_Objektmodells	/de/docs/Web/JavaScript/Guide/Details_of_the_Object_Model
+/de/docs/Web/JavaScript/Guide/Funktionen	/de/docs/Web/JavaScript/Guide/Functions
+/de/docs/Web/JavaScript/Guide/Grammatik_und_Typen	/de/docs/Web/JavaScript/Guide/Grammar_and_types
+/de/docs/Web/JavaScript/Guide/Kontrollfluss_und_Fehlerbehandlung	/de/docs/Web/JavaScript/Guide/Control_flow_and_error_handling
+/de/docs/Web/JavaScript/Guide/Mit_Objekten_arbeiten	/de/docs/Web/JavaScript/Guide/Working_with_Objects
+/de/docs/Web/JavaScript/Guide/Statements	/de/docs/Web/JavaScript/Guide/Control_flow_and_error_handling
+/de/docs/Web/JavaScript/Guide/Textformatierung	/de/docs/Web/JavaScript/Guide/Text_formatting
+/de/docs/Web/JavaScript/Guide/Ueber_JavaScript	/de/docs/Web/JavaScript/Guide/Introduction
+/de/docs/Web/JavaScript/Guide/Ueber_diese_Einfuehrung	/de/docs/Web/JavaScript/Guide/Introduction
 /de/docs/Web/JavaScript/Guide/Vererbung_ueberdacht	/de/docs/Web/JavaScript/Inheritance_and_the_prototype_chain
-/de/docs/Web/JavaScript/Guide/Vergleiche_auf_Gleichheit_und_deren_Verwendung	/de/docs/Web/JavaScript/Vergleiche_auf_Gleichheit_und_deren_Verwendung
+/de/docs/Web/JavaScript/Guide/Vergleiche_auf_Gleichheit_und_deren_Verwendung	/de/docs/Web/JavaScript/Equality_comparisons_and_sameness
 /de/docs/Web/JavaScript/Guide/Vordefinierte_Kernobjekte	/de/docs/Web/JavaScript/Guide
-/de/docs/Web/JavaScript/Guide/Werte_Variablen_und_Literale	/de/docs/Web/JavaScript/Guide/Grammatik_und_Typen
-/de/docs/Web/JavaScript/Guide/Über_Javascript	/de/docs/Web/JavaScript/Guide/Einführung
-/de/docs/Web/JavaScript/Guide/Über_diese_Einführung	/de/docs/Web/JavaScript/Guide/Einführung
+/de/docs/Web/JavaScript/Guide/Werte_Variablen_und_Literale	/de/docs/Web/JavaScript/Guide/Grammar_and_types
+/de/docs/Web/JavaScript/Guide/schleifen_und_iterationen	/de/docs/Web/JavaScript/Guide/Loops_and_iteration
+/de/docs/Web/JavaScript/Guide/Über_Javascript	/de/docs/Web/JavaScript/Guide/Introduction
+/de/docs/Web/JavaScript/Guide/Über_diese_Einführung	/de/docs/Web/JavaScript/Guide/Introduction
+/de/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript	/de/docs/conflicting/Learn/JavaScript/Objects
+/de/docs/Web/JavaScript/JavaScript_technologieuebersicht	/de/docs/Web/JavaScript/JavaScript_technologies_overview
 /de/docs/Web/JavaScript/Javascript_lernen_für_Anfänger	/de/docs/Web/JavaScript/Guide
 /de/docs/Web/JavaScript/Reference/Anweisungen	/de/docs/Web/JavaScript/Reference/Statements
 /de/docs/Web/JavaScript/Reference/Anweisungen/const	/de/docs/Web/JavaScript/Reference/Statements/const
 /de/docs/Web/JavaScript/Reference/Anweisungen/for...in	/de/docs/Web/JavaScript/Reference/Statements/for...in
 /de/docs/Web/JavaScript/Reference/Anweisungen/let	/de/docs/Web/JavaScript/Reference/Statements/let
 /de/docs/Web/JavaScript/Reference/Anweisungen/var	/de/docs/Web/JavaScript/Reference/Statements/var
+/de/docs/Web/JavaScript/Reference/Fehler	/de/docs/Web/JavaScript/Reference/Errors
+/de/docs/Web/JavaScript/Reference/Fehler/Already_has_pragma	/de/docs/Web/JavaScript/Reference/Errors/Already_has_pragma
+/de/docs/Web/JavaScript/Reference/Fehler/Array_sort_argument	/de/docs/Web/JavaScript/Reference/Errors/Array_sort_argument
+/de/docs/Web/JavaScript/Reference/Fehler/Bad_octal	/de/docs/Web/JavaScript/Reference/Errors/Bad_octal
+/de/docs/Web/JavaScript/Reference/Fehler/Bad_radix	/de/docs/Web/JavaScript/Reference/Errors/Bad_radix
+/de/docs/Web/JavaScript/Reference/Fehler/Bad_regexp_flag	/de/docs/Web/JavaScript/Reference/Errors/Bad_regexp_flag
+/de/docs/Web/JavaScript/Reference/Fehler/Bad_return_or_yield	/de/docs/Web/JavaScript/Reference/Errors/Bad_return_or_yield
+/de/docs/Web/JavaScript/Reference/Fehler/Called_on_incompatible_type	/de/docs/Web/JavaScript/Reference/Errors/Called_on_incompatible_type
+/de/docs/Web/JavaScript/Reference/Fehler/Cant_access_lexical_declaration_before_init	/de/docs/Web/JavaScript/Reference/Errors/Cant_access_lexical_declaration_before_init
+/de/docs/Web/JavaScript/Reference/Fehler/Cant_access_property	/de/docs/Web/JavaScript/Reference/Errors/Cant_access_property
+/de/docs/Web/JavaScript/Reference/Fehler/Cant_define_property_object_not_extensible	/de/docs/Web/JavaScript/Reference/Errors/Cant_define_property_object_not_extensible
+/de/docs/Web/JavaScript/Reference/Fehler/Cant_delete	/de/docs/Web/JavaScript/Reference/Errors/Cant_delete
+/de/docs/Web/JavaScript/Reference/Fehler/Cant_redefine_property	/de/docs/Web/JavaScript/Reference/Errors/Cant_redefine_property
+/de/docs/Web/JavaScript/Reference/Fehler/Cyclic_object_value	/de/docs/Web/JavaScript/Reference/Errors/Cyclic_object_value
+/de/docs/Web/JavaScript/Reference/Fehler/Dead_object	/de/docs/Web/JavaScript/Reference/Errors/Dead_object
+/de/docs/Web/JavaScript/Reference/Fehler/Delete_in_strict_mode	/de/docs/Web/JavaScript/Reference/Errors/Delete_in_strict_mode
+/de/docs/Web/JavaScript/Reference/Fehler/Deprecated_String_generics	/de/docs/Web/JavaScript/Reference/Errors/Deprecated_String_generics
+/de/docs/Web/JavaScript/Reference/Fehler/Deprecated_caller_or_arguments_usage	/de/docs/Web/JavaScript/Reference/Errors/Deprecated_caller_or_arguments_usage
+/de/docs/Web/JavaScript/Reference/Fehler/Deprecated_expression_closures	/de/docs/Web/JavaScript/Reference/Errors/Deprecated_expression_closures
+/de/docs/Web/JavaScript/Reference/Fehler/Deprecated_octal	/de/docs/Web/JavaScript/Reference/Errors/Deprecated_octal
+/de/docs/Web/JavaScript/Reference/Fehler/Deprecated_source_map_pragma	/de/docs/Web/JavaScript/Reference/Errors/Deprecated_source_map_pragma
+/de/docs/Web/JavaScript/Reference/Fehler/Deprecated_toLocaleFormat	/de/docs/Web/JavaScript/Reference/Errors/Deprecated_toLocaleFormat
+/de/docs/Web/JavaScript/Reference/Fehler/Equal_as_assign	/de/docs/Web/JavaScript/Reference/Errors/Equal_as_assign
+/de/docs/Web/JavaScript/Reference/Fehler/For-each-in_loops_are_deprecated	/de/docs/Web/JavaScript/Reference/Errors/For-each-in_loops_are_deprecated
+/de/docs/Web/JavaScript/Reference/Fehler/Getter_only	/de/docs/Web/JavaScript/Reference/Errors/Getter_only
+/de/docs/Web/JavaScript/Reference/Fehler/Identifier_after_number	/de/docs/Web/JavaScript/Reference/Errors/Identifier_after_number
+/de/docs/Web/JavaScript/Reference/Fehler/Illegal_character	/de/docs/Web/JavaScript/Reference/Errors/Illegal_character
+/de/docs/Web/JavaScript/Reference/Fehler/Invalid_array_length	/de/docs/Web/JavaScript/Reference/Errors/Invalid_array_length
+/de/docs/Web/JavaScript/Reference/Fehler/Invalid_assignment_left-hand_side	/de/docs/Web/JavaScript/Reference/Errors/Invalid_assignment_left-hand_side
+/de/docs/Web/JavaScript/Reference/Fehler/Invalid_const_assignment	/de/docs/Web/JavaScript/Reference/Errors/Invalid_const_assignment
+/de/docs/Web/JavaScript/Reference/Fehler/Invalid_date	/de/docs/Web/JavaScript/Reference/Errors/Invalid_date
+/de/docs/Web/JavaScript/Reference/Fehler/Invalid_for-in_initializer	/de/docs/Web/JavaScript/Reference/Errors/Invalid_for-in_initializer
+/de/docs/Web/JavaScript/Reference/Fehler/Invalid_for-of_initializer	/de/docs/Web/JavaScript/Reference/Errors/Invalid_for-of_initializer
+/de/docs/Web/JavaScript/Reference/Fehler/JSON_bad_parse	/de/docs/Web/JavaScript/Reference/Errors/JSON_bad_parse
+/de/docs/Web/JavaScript/Reference/Fehler/Malformed_URI	/de/docs/Web/JavaScript/Reference/Errors/Malformed_URI
+/de/docs/Web/JavaScript/Reference/Fehler/Malformed_formal_parameter	/de/docs/Web/JavaScript/Reference/Errors/Malformed_formal_parameter
+/de/docs/Web/JavaScript/Reference/Fehler/Missing_bracket_after_list	/de/docs/Web/JavaScript/Reference/Errors/Missing_bracket_after_list
+/de/docs/Web/JavaScript/Reference/Fehler/Missing_colon_after_property_id	/de/docs/Web/JavaScript/Reference/Errors/Missing_colon_after_property_id
+/de/docs/Web/JavaScript/Reference/Fehler/Missing_curly_after_function_body	/de/docs/Web/JavaScript/Reference/Errors/Missing_curly_after_function_body
+/de/docs/Web/JavaScript/Reference/Fehler/Missing_curly_after_property_list	/de/docs/Web/JavaScript/Reference/Errors/Missing_curly_after_property_list
+/de/docs/Web/JavaScript/Reference/Fehler/Missing_formal_parameter	/de/docs/Web/JavaScript/Reference/Errors/Missing_formal_parameter
+/de/docs/Web/JavaScript/Reference/Fehler/Missing_initializer_in_const	/de/docs/Web/JavaScript/Reference/Errors/Missing_initializer_in_const
+/de/docs/Web/JavaScript/Reference/Fehler/Missing_name_after_dot_operator	/de/docs/Web/JavaScript/Reference/Errors/Missing_name_after_dot_operator
+/de/docs/Web/JavaScript/Reference/Fehler/Missing_parenthesis_after_argument_list	/de/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list
+/de/docs/Web/JavaScript/Reference/Fehler/Missing_parenthesis_after_condition	/de/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_condition
+/de/docs/Web/JavaScript/Reference/Fehler/Missing_semicolon_before_statement	/de/docs/Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement
+/de/docs/Web/JavaScript/Reference/Fehler/More_arguments_needed	/de/docs/Web/JavaScript/Reference/Errors/More_arguments_needed
+/de/docs/Web/JavaScript/Reference/Fehler/Negative_repetition_count	/de/docs/Web/JavaScript/Reference/Errors/Negative_repetition_count
+/de/docs/Web/JavaScript/Reference/Fehler/No_non-null_object	/de/docs/Web/JavaScript/Reference/Errors/No_non-null_object
+/de/docs/Web/JavaScript/Reference/Fehler/No_properties	/de/docs/Web/JavaScript/Reference/Errors/No_properties
+/de/docs/Web/JavaScript/Reference/Fehler/No_variable_name	/de/docs/Web/JavaScript/Reference/Errors/No_variable_name
+/de/docs/Web/JavaScript/Reference/Fehler/Non_configurable_array_element	/de/docs/Web/JavaScript/Reference/Errors/Non_configurable_array_element
+/de/docs/Web/JavaScript/Reference/Fehler/Not_a_codepoint	/de/docs/Web/JavaScript/Reference/Errors/Not_a_codepoint
+/de/docs/Web/JavaScript/Reference/Fehler/Not_a_constructor	/de/docs/Web/JavaScript/Reference/Errors/Not_a_constructor
+/de/docs/Web/JavaScript/Reference/Fehler/Not_a_function	/de/docs/Web/JavaScript/Reference/Errors/Not_a_function
+/de/docs/Web/JavaScript/Reference/Fehler/Not_defined	/de/docs/Web/JavaScript/Reference/Errors/Not_defined
+/de/docs/Web/JavaScript/Reference/Fehler/Precision_range	/de/docs/Web/JavaScript/Reference/Errors/Precision_range
+/de/docs/Web/JavaScript/Reference/Fehler/Property_access_denied	/de/docs/Web/JavaScript/Reference/Errors/Property_access_denied
+/de/docs/Web/JavaScript/Reference/Fehler/Read-only	/de/docs/Web/JavaScript/Reference/Errors/Read-only
+/de/docs/Web/JavaScript/Reference/Fehler/Redeclared_parameter	/de/docs/Web/JavaScript/Reference/Errors/Redeclared_parameter
+/de/docs/Web/JavaScript/Reference/Fehler/Reduce_of_empty_array_with_no_initial_value	/de/docs/Web/JavaScript/Reference/Errors/Reduce_of_empty_array_with_no_initial_value
+/de/docs/Web/JavaScript/Reference/Fehler/Reserved_identifier	/de/docs/Web/JavaScript/Reference/Errors/Reserved_identifier
+/de/docs/Web/JavaScript/Reference/Fehler/Resulting_string_too_large	/de/docs/Web/JavaScript/Reference/Errors/Resulting_string_too_large
+/de/docs/Web/JavaScript/Reference/Fehler/Stmt_after_return	/de/docs/Web/JavaScript/Reference/Errors/Stmt_after_return
+/de/docs/Web/JavaScript/Reference/Fehler/Strict_Non_Simple_Params	/de/docs/Web/JavaScript/Reference/Errors/Strict_Non_Simple_Params
+/de/docs/Web/JavaScript/Reference/Fehler/Too_much_recursion	/de/docs/Web/JavaScript/Reference/Errors/Too_much_recursion
+/de/docs/Web/JavaScript/Reference/Fehler/Typed_array_invalid_arguments	/de/docs/Web/JavaScript/Reference/Errors/Typed_array_invalid_arguments
+/de/docs/Web/JavaScript/Reference/Fehler/Undeclared_var	/de/docs/Web/JavaScript/Reference/Errors/Undeclared_var
+/de/docs/Web/JavaScript/Reference/Fehler/Undefined_prop	/de/docs/Web/JavaScript/Reference/Errors/Undefined_prop
+/de/docs/Web/JavaScript/Reference/Fehler/Unexpected_token	/de/docs/Web/JavaScript/Reference/Errors/Unexpected_token
+/de/docs/Web/JavaScript/Reference/Fehler/Unexpected_type	/de/docs/Web/JavaScript/Reference/Errors/Unexpected_type
+/de/docs/Web/JavaScript/Reference/Fehler/Unnamed_function_statement	/de/docs/Web/JavaScript/Reference/Errors/Unnamed_function_statement
+/de/docs/Web/JavaScript/Reference/Fehler/Unterminated_string_literal	/de/docs/Web/JavaScript/Reference/Errors/Unterminated_string_literal
+/de/docs/Web/JavaScript/Reference/Fehler/Var_hides_argument	/de/docs/Web/JavaScript/Reference/Errors/Var_hides_argument
+/de/docs/Web/JavaScript/Reference/Fehler/in_operator_no_object	/de/docs/Web/JavaScript/Reference/Errors/in_operator_no_object
+/de/docs/Web/JavaScript/Reference/Fehler/invalid_right_hand_side_instanceof_operand	/de/docs/Web/JavaScript/Reference/Errors/invalid_right_hand_side_instanceof_operand
+/de/docs/Web/JavaScript/Reference/Fehler/is_not_iterable	/de/docs/Web/JavaScript/Reference/Errors/is_not_iterable
+/de/docs/Web/JavaScript/Reference/Functions/Methoden_Definitionen	/de/docs/Web/JavaScript/Reference/Functions/Method_definitions
+/de/docs/Web/JavaScript/Reference/Functions/Pfeilfunktionen	/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions
+/de/docs/Web/JavaScript/Reference/Functions/rest_parameter	/de/docs/Web/JavaScript/Reference/Functions/rest_parameters
+/de/docs/Web/JavaScript/Reference/Global_Objects/Array/Prototypen	/de/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Array/prototype
 /de/docs/Web/JavaScript/Reference/Global_Objects/Array/flatten	/de/docs/Web/JavaScript/Reference/Global_Objects/Array/flat
+/de/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype	/de/docs/conflicting/Web/JavaScript/Reference/Global_Objects/ArrayBuffer
+/de/docs/Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype	/de/docs/orphaned/Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype
+/de/docs/Web/JavaScript/Reference/Global_Objects/Atomics/wake	/de/docs/Web/JavaScript/Reference/Global_Objects/Atomics/notify
+/de/docs/Web/JavaScript/Reference/Global_Objects/Boolean/prototype	/de/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Boolean
 /de/docs/Web/JavaScript/Reference/Global_Objects/Collator	/de/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator
 /de/docs/Web/JavaScript/Reference/Global_Objects/Collator/compare	/de/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/compare
-/de/docs/Web/JavaScript/Reference/Global_Objects/Collator/prototype	/de/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/prototype
+/de/docs/Web/JavaScript/Reference/Global_Objects/Collator/prototype	/de/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Intl/Collator
 /de/docs/Web/JavaScript/Reference/Global_Objects/Collator/resolvedOptions	/de/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/resolvedOptions
 /de/docs/Web/JavaScript/Reference/Global_Objects/Collator/supportedLocalesOf	/de/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/supportedLocalesOf
+/de/docs/Web/JavaScript/Reference/Global_Objects/DataView/prototype	/de/docs/conflicting/Web/JavaScript/Reference/Global_Objects/DataView
+/de/docs/Web/JavaScript/Reference/Global_Objects/Date/prototype	/de/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Date
 /de/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat	/de/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
 /de/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/format	/de/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format
 /de/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/formatToParts	/de/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatToParts
-/de/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/prototype	/de/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype
+/de/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/prototype	/de/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
 /de/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/resolvedOptions	/de/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/resolvedOptions
 /de/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/supportedLocalesOf	/de/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/supportedLocalesOf
+/de/docs/Web/JavaScript/Reference/Global_Objects/Error/prototype	/de/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Error
+/de/docs/Web/JavaScript/Reference/Global_Objects/EvalError/prototype	/de/docs/conflicting/Web/JavaScript/Reference/Global_Objects/EvalError
+/de/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype	/de/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Function
+/de/docs/Web/JavaScript/Reference/Global_Objects/GeneratorFunction/prototype	/de/docs/conflicting/Web/JavaScript/Reference/Global_Objects/GeneratorFunction
+/de/docs/Web/JavaScript/Reference/Global_Objects/InternalError/prototype	/de/docs/conflicting/Web/JavaScript/Reference/Global_Objects/InternalError
+/de/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/prototype	/de/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Intl/Collator
+/de/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype	/de/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
+/de/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype	/de/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+/de/docs/Web/JavaScript/Reference/Global_Objects/Map/prototype	/de/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Map
+/de/docs/Web/JavaScript/Reference/Global_Objects/Math/math.random	/de/docs/Web/JavaScript/Reference/Global_Objects/Math/random
+/de/docs/Web/JavaScript/Reference/Global_Objects/Number/prototype	/de/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Number
 /de/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat	/de/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
 /de/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat/format	/de/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/format
-/de/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat/prototype	/de/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype
+/de/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat/prototype	/de/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
 /de/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat/supportedLocalesOf	/de/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/supportedLocalesOf
+/de/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype	/de/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Object
 /de/docs/Web/JavaScript/Reference/Global_Objects/PluralRules	/de/docs/Web/JavaScript/Reference/Global_Objects/Intl/PluralRules
 /de/docs/Web/JavaScript/Reference/Global_Objects/PluralRules/supportedLocalesOf	/de/docs/Web/JavaScript/Reference/Global_Objects/Intl/PluralRules/supportedLocalesOf
+/de/docs/Web/JavaScript/Reference/Global_Objects/RangeError/prototype	/de/docs/conflicting/Web/JavaScript/Reference/Global_Objects/RangeError
+/de/docs/Web/JavaScript/Reference/Global_Objects/String/TrimLeft	/de/docs/Web/JavaScript/Reference/Global_Objects/String/trimStart
+/de/docs/Web/JavaScript/Reference/Global_Objects/String/TrimRight	/de/docs/Web/JavaScript/Reference/Global_Objects/String/trimEnd
+/de/docs/Web/JavaScript/Reference/Global_Objects/String/prototype	/de/docs/conflicting/Web/JavaScript/Reference/Global_Objects/String
+/de/docs/Web/JavaScript/Reference/Global_Objects/String/suchen	/de/docs/Web/JavaScript/Reference/Global_Objects/String/search
+/de/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype	/de/docs/conflicting/Web/JavaScript/Reference/Global_Objects/SyntaxError
+/de/docs/Web/JavaScript/Reference/Global_Objects/TypeError/prototype	/de/docs/conflicting/Web/JavaScript/Reference/Global_Objects/TypeError
+/de/docs/Web/JavaScript/Reference/Klassen	/de/docs/Web/JavaScript/Reference/Classes
+/de/docs/Web/JavaScript/Reference/Klassen/constructor	/de/docs/Web/JavaScript/Reference/Classes/constructor
+/de/docs/Web/JavaScript/Reference/Klassen/extends	/de/docs/Web/JavaScript/Reference/Classes/extends
+/de/docs/Web/JavaScript/Reference/Klassen/static	/de/docs/Web/JavaScript/Reference/Classes/static
 /de/docs/Web/JavaScript/Reference/Methods_Index	/de/docs/Web/JavaScript/Reference
 /de/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators	/de/docs/Web/JavaScript/Reference/Operators
+/de/docs/Web/JavaScript/Reference/Operators/Bitwise_Operatoren	/de/docs/conflicting/Web/JavaScript/Reference/Operators
+/de/docs/Web/JavaScript/Reference/Operators/Dekrement	/de/docs/Web/JavaScript/Reference/Operators/Decrement
+/de/docs/Web/JavaScript/Reference/Operators/Destrukturierende_Zuweisung	/de/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
+/de/docs/Web/JavaScript/Reference/Operators/Inkrement	/de/docs/Web/JavaScript/Reference/Operators/Increment
+/de/docs/Web/JavaScript/Reference/Operators/Logische_Operatoren	/de/docs/conflicting/Web/JavaScript/Reference/Operators_8b4515dbed18a24ecb01bfe0755ca163
+/de/docs/Web/JavaScript/Reference/Operators/Modulo	/de/docs/Web/JavaScript/Reference/Operators/Remainder
+/de/docs/Web/JavaScript/Reference/Operators/Objekt_Initialisierer	/de/docs/Web/JavaScript/Reference/Operators/Object_initializer
+/de/docs/Web/JavaScript/Reference/Operators/Optionale_Verkettung	/de/docs/Web/JavaScript/Reference/Operators/Optional_chaining
+/de/docs/Web/JavaScript/Reference/Operators/Spread_operator	/de/docs/conflicting/Web/JavaScript/Reference/Operators/Spread_syntax
+/de/docs/Web/JavaScript/Reference/Operators/Vergleichsoperatoren	/de/docs/conflicting/Web/JavaScript/Reference/Operators_5b3986b830cf68059c03079ef10ff039
+/de/docs/Web/JavaScript/Reference/Operators/Zuweisungsoperator	/de/docs/conflicting/Web/JavaScript/Reference/Operators_bf514126b51a6e9b7591809ecc554076
 /de/docs/Web/JavaScript/Reference/Properties_Index	/de/docs/Web/JavaScript/Reference
+/de/docs/Web/JavaScript/Reference/Statements/default	/de/docs/conflicting/Web/JavaScript/Reference/Statements/switch
+/de/docs/Web/JavaScript/Reference/Statements/funktion	/de/docs/Web/JavaScript/Reference/Statements/function
+/de/docs/Web/JavaScript/Reference/Veraltete_und_abgeschaffte_Features	/de/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features
+/de/docs/Web/JavaScript/Reference/Veraltete_und_abgeschaffte_Features/The_legacy_Iterator_protocol	/de/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features/The_legacy_Iterator_protocol
+/de/docs/Web/JavaScript/Reference/template_strings	/de/docs/Web/JavaScript/Reference/Template_literals
+/de/docs/Web/JavaScript/Speicherverwaltung	/de/docs/Web/JavaScript/Memory_Management
 /de/docs/Web/JavaScript/Tutorials	/de/docs/Web/JavaScript
+/de/docs/Web/JavaScript/Vergleiche_auf_Gleichheit_und_deren_Verwendung	/de/docs/Web/JavaScript/Equality_comparisons_and_sameness
 /de/docs/Web/JavaScript/java_guide	/de/docs/Web/JavaScript/Guide
 /de/docs/Web/JavaScript/javascript_guide	/de/docs/Web/JavaScript/Guide
-/de/docs/Web/JavaScript/javascript_guide/Ausdrücke_und_Operatoren	/de/docs/Web/JavaScript/Guide/Ausdruecke_und_Operatoren
-/de/docs/Web/JavaScript/javascript_guide/Javascript_Übersicht	/de/docs/Web/JavaScript/Guide/Einführung
-/de/docs/Web/JavaScript/javascript_guide/Werte,_Variable_und_Literale	/de/docs/Web/JavaScript/Guide/Grammatik_und_Typen
-/de/docs/Web/JavaScript/javascript_guide/Werte,_Variablen_und_Literale	/de/docs/Web/JavaScript/Guide/Grammatik_und_Typen
-/de/docs/Web/JavaScript/javascript_guide/ueber_javascript	/de/docs/Web/JavaScript/Guide/Einführung
-/de/docs/Web/JavaScript/javascript_guide/ueber_javascript/Über_Javascript	/de/docs/Web/JavaScript/Guide/Einführung
-/de/docs/Web/JavaScript/javascript_guide/Über_Javascript	/de/docs/Web/JavaScript/Guide/Einführung
-/de/docs/Web/JavaScript/javascript_guide/Über_diese_Einführung	/de/docs/Web/JavaScript/Guide/Einführung
-/de/docs/Web/JavaScript/ueber_JavaScript	/de/docs/Web/JavaScript/Guide/Einführung
-/de/docs/Web/JavaScript/ueber_JavaScript/Über_Javascript	/de/docs/Web/JavaScript/Guide/Einführung
-/de/docs/Web/JavaScript/Über_Javascript	/de/docs/Web/JavaScript/Guide/Einführung
+/de/docs/Web/JavaScript/javascript_guide/Ausdrücke_und_Operatoren	/de/docs/Web/JavaScript/Guide/Expressions_and_Operators
+/de/docs/Web/JavaScript/javascript_guide/Javascript_Übersicht	/de/docs/Web/JavaScript/Guide/Introduction
+/de/docs/Web/JavaScript/javascript_guide/Werte,_Variable_und_Literale	/de/docs/Web/JavaScript/Guide/Grammar_and_types
+/de/docs/Web/JavaScript/javascript_guide/Werte,_Variablen_und_Literale	/de/docs/Web/JavaScript/Guide/Grammar_and_types
+/de/docs/Web/JavaScript/javascript_guide/ueber_javascript	/de/docs/Web/JavaScript/Guide/Introduction
+/de/docs/Web/JavaScript/javascript_guide/ueber_javascript/Über_Javascript	/de/docs/Web/JavaScript/Guide/Introduction
+/de/docs/Web/JavaScript/javascript_guide/Über_Javascript	/de/docs/Web/JavaScript/Guide/Introduction
+/de/docs/Web/JavaScript/javascript_guide/Über_diese_Einführung	/de/docs/Web/JavaScript/Guide/Introduction
+/de/docs/Web/JavaScript/ueber_JavaScript	/de/docs/Web/JavaScript/Guide/Introduction
+/de/docs/Web/JavaScript/ueber_JavaScript/Über_Javascript	/de/docs/Web/JavaScript/Guide/Introduction
+/de/docs/Web/JavaScript/Über_Javascript	/de/docs/Web/JavaScript/Guide/Introduction
+/de/docs/Web/MathML/Attribute/Werte	/de/docs/Web/MathML/Attribute/Values
+/de/docs/Web/MathML/Beispiele	/de/docs/Web/MathML/Examples
+/de/docs/Web/MathML/Beispiele/MathML_Satz_des_Pythagoras	/de/docs/Web/MathML/Examples/MathML_Pythagorean_Theorem
+/de/docs/Web/MathML/Beispiele/Quadratische_Gleichung	/de/docs/Web/MathML/Examples/Deriving_the_Quadratic_Formula
+/de/docs/Web/SVG/Tutorial/Einführung	/de/docs/Web/SVG/Tutorial/Introduction
+/de/docs/Web/SVG/Tutorial/Pfade	/de/docs/Web/SVG/Tutorial/Paths
+/de/docs/Web/SVG/Tutorial/SVG_Schriftarten	/de/docs/Web/SVG/Tutorial/SVG_fonts
+/de/docs/Web/Security/Public_Key_Pinning	/de/docs/Web/HTTP/Public_Key_Pinning
+/de/docs/Web/WebAPI	/de/docs/conflicting/Web/API
+/de/docs/Web/WebAPI/verwenden_von_geolocation	/de/docs/Web/API/Geolocation_API
 /de/docs/Web/WebGL	/de/docs/Web/API/WebGL_API
-/de/docs/Web/WebGL/3D-Objekte_mit_WebGL_erstellen	/de/docs/Web/API/WebGL_API/Tutorial/3D-Objekte_mit_WebGL_erstellen
-/de/docs/Web/WebGL/Animierte_Texturen_in_WebGL	/de/docs/Web/API/WebGL_API/Tutorial/Animierte_Texturen_in_WebGL
-/de/docs/Web/WebGL/Beleuchtung_in_WebGL	/de/docs/Web/API/WebGL_API/Tutorial/Beleuchtung_in_WebGL
-/de/docs/Web/WebGL/Einführung_in_WebGL	/de/docs/Web/API/WebGL_API/Tutorial/Einführung_in_WebGL
-/de/docs/Web/WebGL/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen	/de/docs/Web/API/WebGL_API/Tutorial/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen
-/de/docs/Web/WebGL/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext	/de/docs/Web/API/WebGL_API/Tutorial/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext
-/de/docs/Web/WebGL/Objekte_mit_WebGL_animieren	/de/docs/Web/API/WebGL_API/Tutorial/Objekte_mit_WebGL_animieren
-/de/docs/Web/WebGL/Texturen_in_WebGL_verwenden	/de/docs/Web/API/WebGL_API/Tutorial/Texturen_in_WebGL_verwenden
+/de/docs/Web/WebGL/3D-Objekte_mit_WebGL_erstellen	/de/docs/Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL
+/de/docs/Web/WebGL/Animierte_Texturen_in_WebGL	/de/docs/Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL
+/de/docs/Web/WebGL/Beleuchtung_in_WebGL	/de/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL
+/de/docs/Web/WebGL/Einführung_in_WebGL	/de/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL
+/de/docs/Web/WebGL/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen	/de/docs/Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL
+/de/docs/Web/WebGL/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext	/de/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context
+/de/docs/Web/WebGL/Objekte_mit_WebGL_animieren	/de/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL
+/de/docs/Web/WebGL/Texturen_in_WebGL_verwenden	/de/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL
+/de/docs/Web/Web_Components/Custom_Elements	/de/docs/conflicting/Web/Web_Components/Using_custom_elements
+/de/docs/Web/XML/XML_Einführung	/de/docs/Web/XML/XML_introduction
 /de/docs/WebGL	/de/docs/Web/API/WebGL_API
-/de/docs/WebGL/3D-Objekte_mit_WebGL_erstellen	/de/docs/Web/API/WebGL_API/Tutorial/3D-Objekte_mit_WebGL_erstellen
-/de/docs/WebGL/Animierte_Texturen_in_WebGL	/de/docs/Web/API/WebGL_API/Tutorial/Animierte_Texturen_in_WebGL
-/de/docs/WebGL/Beleuchtung_in_WebGL	/de/docs/Web/API/WebGL_API/Tutorial/Beleuchtung_in_WebGL
-/de/docs/WebGL/Einführung_in_WebGL	/de/docs/Web/API/WebGL_API/Tutorial/Einführung_in_WebGL
-/de/docs/WebGL/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen	/de/docs/Web/API/WebGL_API/Tutorial/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen
-/de/docs/WebGL/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext	/de/docs/Web/API/WebGL_API/Tutorial/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext
-/de/docs/WebGL/Objekte_mit_WebGL_animieren	/de/docs/Web/API/WebGL_API/Tutorial/Objekte_mit_WebGL_animieren
-/de/docs/WebGL/Texturen_in_WebGL_verwenden	/de/docs/Web/API/WebGL_API/Tutorial/Texturen_in_WebGL_verwenden
-/de/docs/Webbasierte_protokoll-handler	/de/docs/Web/API/Navigator/registerProtocolHandler/Webbasierte_protokoll-handler
+/de/docs/WebGL/3D-Objekte_mit_WebGL_erstellen	/de/docs/Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL
+/de/docs/WebGL/Animierte_Texturen_in_WebGL	/de/docs/Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL
+/de/docs/WebGL/Beleuchtung_in_WebGL	/de/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL
+/de/docs/WebGL/Einführung_in_WebGL	/de/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL
+/de/docs/WebGL/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen	/de/docs/Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL
+/de/docs/WebGL/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext	/de/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context
+/de/docs/WebGL/Objekte_mit_WebGL_animieren	/de/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL
+/de/docs/WebGL/Texturen_in_WebGL_verwenden	/de/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL
+/de/docs/WebSockets	/de/docs/Web/API/WebSockets_API
+/de/docs/WebSockets/Writing_WebSocket_servers	/de/docs/Web/API/WebSockets_API/Writing_WebSocket_servers
+/de/docs/Web_Development/Mobile	/de/docs/Web/Guide/Mobile
+/de/docs/Web_Development/Mobile/Responsive_design	/de/docs/conflicting/Web/Progressive_web_apps
+/de/docs/Webbasierte_protokoll-handler	/de/docs/Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers
+/de/docs/Webentwicklung	/de/docs/conflicting/Web/Guide
 /de/docs/Werkzeuge	/de/docs/Tools
-/de/docs/XML_Einführung	/de/docs/Web/XML/XML_Einführung
+/de/docs/XML_Einführung	/de/docs/Web/XML/XML_introduction
 /de/docs/XSLT	/de/docs/Web/XSLT
-/de/docs/Zugriff_auf_Dateien_von_Webapplikationen	/de/docs/Web/API/File/Zugriff_auf_Dateien_von_Webapplikationen
+/de/docs/Zugriff_auf_Dateien_von_Webapplikationen	/de/docs/Web/API/File/Using_files_from_web_applications
 /de/docs/en	/en-US/
 /de/docs/install.rdf	/de/docs/Installationsmanifest
diff --git a/files/de/_wikihistory.json b/files/de/_wikihistory.json
index 66f75b8ac8..4da1fe1867 100644
--- a/files/de/_wikihistory.json
+++ b/files/de/_wikihistory.json
@@ -1,136 +1,4 @@
 {
-  "Benutzen_des_Zwischenspeichers_in_Firefox_1.5_(caching)": {
-    "modified": "2019-03-24T00:04:22.542Z",
-    "contributors": [
-      "wbamberg",
-      "fscholz",
-      "-=Renegade=-",
-      "Doozer"
-    ]
-  },
-  "CSS3_Columns": {
-    "modified": "2019-03-24T00:05:49.925Z",
-    "contributors": [
-      "SJW",
-      "fscholz",
-      "Mapag"
-    ]
-  },
-  "DOM": {
-    "modified": "2019-03-24T00:03:18.662Z",
-    "contributors": [
-      "TheNT87",
-      "Barfooz",
-      "ethertank",
-      "fscholz",
-      "Crash",
-      "Takenbot",
-      "M@d Man"
-    ]
-  },
-  "DOM/Ueber_das_Document_Object_Model": {
-    "modified": "2019-12-23T07:48:22.460Z",
-    "contributors": [
-      "Cerberooo",
-      "StevenS77",
-      "Barfooz"
-    ]
-  },
-  "DOM_Inspector": {
-    "modified": "2020-07-16T22:36:24.131Z",
-    "contributors": [
-      "wbamberg",
-      "nw520"
-    ]
-  },
-  "DragDrop": {
-    "modified": "2019-03-23T23:26:04.264Z",
-    "contributors": [
-      "drewp"
-    ]
-  },
-  "Erweiterung_erstellen": {
-    "modified": "2019-03-24T00:04:52.753Z",
-    "contributors": [
-      "tregagnon",
-      "fscholz",
-      "SeSchneider",
-      "Yozh88",
-      "Jules Papillon",
-      "Alopix",
-      "Pl4yer",
-      "Masterdschecker",
-      "Michael2402",
-      "Undertaker",
-      "Thomas147",
-      "Felix.Schwarz",
-      "Verruckt",
-      "Slosd",
-      "Philipp",
-      "Indigo",
-      "Jonny",
-      "Takenbot",
-      "Manuel Strehl",
-      "Ar-sch.de",
-      "DDSD",
-      "Dria"
-    ]
-  },
-  "Erweiterungen_für_Firefox_3_aktualisieren": {
-    "modified": "2019-12-13T20:33:28.025Z",
-    "contributors": [
-      "wbamberg",
-      "fscholz",
-      "Sheppy",
-      "Editmonkey",
-      "Jules Papillon"
-    ]
-  },
-  "Farbverläufe_in_CSS": {
-    "modified": "2019-03-23T23:13:15.166Z",
-    "contributors": [
-      "Bennyville",
-      "wizAmit",
-      "slayslot",
-      "Sebastianz",
-      "floEdelmann"
-    ]
-  },
-  "Firefox_1.5_für_Entwickler": {
-    "modified": "2019-03-24T00:04:17.420Z",
-    "contributors": [
-      "wbamberg",
-      "fscholz",
-      "Jules Papillon",
-      "Agoist",
-      "Umifa",
-      "Crash"
-    ]
-  },
-  "Firefox_1.5_für_Entwickler/Changing_the_priority_of_HTTP_requests": {
-    "modified": "2019-10-30T20:00:38.264Z",
-    "contributors": [
-      "sklicek"
-    ]
-  },
-  "Firefox_3.5_für_Entwickler": {
-    "modified": "2019-03-24T00:04:29.361Z",
-    "contributors": [
-      "wbamberg",
-      "Timmi",
-      "fscholz",
-      "niels"
-    ]
-  },
-  "Firefox_3_für_Entwickler": {
-    "modified": "2019-03-24T00:04:33.617Z",
-    "contributors": [
-      "wbamberg",
-      "fscholz",
-      "niels",
-      "Lukas Skywalker"
-    ]
-  },
   "Games": {
     "modified": "2019-09-09T15:31:03.156Z",
     "contributors": [
@@ -219,14 +87,6 @@
       "Tyrandus"
     ]
   },
-  "Glossary/Abstraktion": {
-    "modified": "2019-03-23T22:15:58.737Z",
-    "contributors": [
-      "Sebastianz",
-      "ursingold",
-      "t1m0fej"
-    ]
-  },
   "Glossary/Accessibility": {
     "modified": "2019-03-18T21:41:37.798Z",
     "contributors": [
@@ -239,20 +99,6 @@
       "duckymirror"
     ]
   },
-  "Glossary/Algorithmus": {
-    "modified": "2019-03-23T22:10:22.994Z",
-    "contributors": [
-      "herbmaier",
-      "Tyrandus"
-    ]
-  },
-  "Glossary/Anweisung": {
-    "modified": "2019-04-20T19:38:11.191Z",
-    "contributors": [
-      "GreenPepper",
-      "Tyrandus"
-    ]
-  },
   "Glossary/Apple_Safari": {
     "modified": "2019-03-23T22:12:52.875Z",
     "contributors": [
@@ -266,12 +112,6 @@
       "Siphalor"
     ]
   },
-  "Glossary/Asynchron": {
-    "modified": "2019-06-18T06:50:55.111Z",
-    "contributors": [
-      "dbraun"
-    ]
-  },
   "Glossary/Attribute": {
     "modified": "2019-03-23T22:12:44.567Z",
     "contributors": [
@@ -279,13 +119,6 @@
       "Siphalor"
     ]
   },
-  "Glossary/Bandbreite": {
-    "modified": "2019-03-23T22:08:37.747Z",
-    "contributors": [
-      "sigoa",
-      "Rebecca70"
-    ]
-  },
   "Glossary/Block": {
     "modified": "2019-03-23T22:10:15.560Z",
     "contributors": [
@@ -343,12 +176,6 @@
       "timvancleef"
     ]
   },
-  "Glossary/CORS-zugelassener-anfrage-header": {
-    "modified": "2020-01-30T18:28:06.437Z",
-    "contributors": [
-      "TorbenKoehn"
-    ]
-  },
   "Glossary/CRLF": {
     "modified": "2019-07-03T15:43:20.749Z",
     "contributors": [
@@ -364,12 +191,6 @@
       "Siphalor"
     ]
   },
-  "Glossary/CSS_Praeprozessor": {
-    "modified": "2019-03-18T21:36:27.239Z",
-    "contributors": [
-      "Sixl-Daniel"
-    ]
-  },
   "Glossary/Cache": {
     "modified": "2019-03-18T21:14:43.666Z",
     "contributors": [
@@ -455,24 +276,12 @@
       "PercyGitarrist"
     ]
   },
-  "Glossary/DTD": {
-    "modified": "2019-07-04T23:44:01.071Z",
-    "contributors": [
-      "PercyGitarrist"
-    ]
-  },
   "Glossary/Data_structure": {
     "modified": "2019-07-16T20:37:24.466Z",
     "contributors": [
       "christianheinrichs"
     ]
   },
-  "Glossary/Datenkapselung": {
-    "modified": "2020-09-30T06:05:42.392Z",
-    "contributors": [
-      "Klingohle"
-    ]
-  },
   "Glossary/Denial_of_Service": {
     "modified": "2019-01-17T02:56:58.052Z",
     "contributors": [
@@ -544,12 +353,6 @@
       "Klingohle"
     ]
   },
-  "Glossary/Funktion_erster-Klasse": {
-    "modified": "2019-03-18T21:30:30.219Z",
-    "contributors": [
-      "king-tom"
-    ]
-  },
   "Glossary/GPU": {
     "modified": "2019-01-17T02:50:36.393Z",
     "contributors": [
@@ -608,13 +411,6 @@
       "cob"
     ]
   },
-  "Glossary/Herstellerpräfix": {
-    "modified": "2019-03-23T22:29:22.756Z",
-    "contributors": [
-      "Tyrandus",
-      "1903Daniel"
-    ]
-  },
   "Glossary/Hoisting": {
     "modified": "2019-03-18T20:48:10.960Z",
     "contributors": [
@@ -670,12 +466,6 @@
       "PercyGitarrist"
     ]
   },
-  "Glossary/Informationsarchitektur": {
-    "modified": "2019-03-18T21:18:25.933Z",
-    "contributors": [
-      "tschach"
-    ]
-  },
   "Glossary/Internet": {
     "modified": "2019-03-23T22:09:31.438Z",
     "contributors": [
@@ -705,24 +495,6 @@
       "Siphalor"
     ]
   },
-  "Glossary/Klasse": {
-    "modified": "2019-03-18T21:37:57.063Z",
-    "contributors": [
-      "duckymirror"
-    ]
-  },
-  "Glossary/Konstruktor": {
-    "modified": "2019-03-23T22:04:35.334Z",
-    "contributors": [
-      "klug_mario"
-    ]
-  },
-  "Glossary/Leeres_Element": {
-    "modified": "2019-03-18T21:32:36.396Z",
-    "contributors": [
-      "axelrindle"
-    ]
-  },
   "Glossary/Local_scope": {
     "modified": "2020-04-28T14:50:32.479Z",
     "contributors": [
@@ -792,12 +564,6 @@
       "CloudMaker97"
     ]
   },
-  "Glossary/Objekt": {
-    "modified": "2019-03-23T22:08:37.828Z",
-    "contributors": [
-      "LazerPhil"
-    ]
-  },
   "Glossary/Operand": {
     "modified": "2020-04-28T14:20:36.934Z",
     "contributors": [
@@ -835,12 +601,6 @@
       "tschach"
     ]
   },
-  "Glossary/Protokoll": {
-    "modified": "2019-03-23T22:09:31.349Z",
-    "contributors": [
-      "Anonymous"
-    ]
-  },
   "Glossary/Prototype": {
     "modified": "2020-07-08T01:49:32.204Z",
     "contributors": [
@@ -981,12 +741,6 @@
       "Shiryk"
     ]
   },
-  "Glossary/Typ": {
-    "modified": "2020-04-04T13:54:03.839Z",
-    "contributors": [
-      "axelrindle"
-    ]
-  },
   "Glossary/Type_Conversion": {
     "modified": "2020-04-04T13:56:57.290Z",
     "contributors": [
@@ -1124,13 +878,6 @@
       "CloudMaker97"
     ]
   },
-  "Glossary/einfache_datenelemente": {
-    "modified": "2019-03-23T22:46:44.221Z",
-    "contributors": [
-      "Siphalor",
-      "andreas_inkoeln"
-    ]
-  },
   "Glossary/firewall": {
     "modified": "2019-07-16T21:05:22.003Z",
     "contributors": [
@@ -1162,12 +909,6 @@
       "Siphalor"
     ]
   },
-  "Glossary/verbotener_header_name": {
-    "modified": "2019-03-23T22:03:16.612Z",
-    "contributors": [
-      "timmyRS"
-    ]
-  },
   "Glossary/webm": {
     "modified": "2019-03-18T21:18:37.955Z",
     "contributors": [
@@ -1230,12 +971,6 @@
       "hellschu"
     ]
   },
-  "Learn/CSS/Building_blocks/Werten_Einheiten": {
-    "modified": "2020-07-16T22:28:56.210Z",
-    "contributors": [
-      "GiovanniHD201E"
-    ]
-  },
   "Learn/CSS/CSS_layout": {
     "modified": "2020-08-05T14:18:54.916Z",
     "contributors": [
@@ -1270,13 +1005,6 @@
       "LH-10"
     ]
   },
-  "Learn/Common_questions/Wie_das_Internet_funktioniert": {
-    "modified": "2020-07-16T22:35:36.371Z",
-    "contributors": [
-      "frankwinter",
-      "NetiHeft"
-    ]
-  },
   "Learn/Getting_started_with_the_web": {
     "modified": "2020-11-24T12:50:40.168Z",
     "contributors": [
@@ -1334,24 +1062,6 @@
       "d_jan"
     ]
   },
-  "Learn/Getting_started_with_the_web/JavaScript_basis": {
-    "modified": "2020-07-16T22:35:08.850Z",
-    "contributors": [
-      "jorgemontoyab",
-      "urewig",
-      "loicyondjeu",
-      "ilonaherr",
-      "SaschaHeyer",
-      "fxmt",
-      "Shidigital",
-      "hapeit",
-      "danielsimon1",
-      "nuracubeTranslations",
-      "QuaGS",
-      "monja-schreppel",
-      "Purple-Vampire"
-    ]
-  },
   "Learn/Getting_started_with_the_web/Publishing_your_website": {
     "modified": "2020-07-16T22:34:23.783Z",
     "contributors": [
@@ -1372,24 +1082,6 @@
       "d_jan"
     ]
   },
-  "Learn/Getting_started_with_the_web/Wie_das_Internet_funktioniert": {
-    "modified": "2020-07-16T22:33:59.338Z",
-    "contributors": [
-      "Shidigital"
-    ]
-  },
-  "Learn/Getting_started_with_the_web/dateien_nutzen": {
-    "modified": "2020-07-16T22:34:32.214Z",
-    "contributors": [
-      "michaelhochleitner",
-      "Aryx",
-      "vosspl",
-      "Shidigital",
-      "Bissmarc",
-      "janjo",
-      "d_jan"
-    ]
-  },
   "Learn/HTML": {
     "modified": "2020-07-16T22:22:15.700Z",
     "contributors": [
@@ -1401,88 +1093,6 @@
       "Trollderim"
     ]
   },
-  "Learn/HTML/Einführung_in_HTML": {
-    "modified": "2020-07-16T22:22:45.948Z",
-    "contributors": [
-      "PercyGitarrist",
-      "mprofitl",
-      "LeifMensing",
-      "Shidigital"
-    ]
-  },
-  "Learn/HTML/Einführung_in_HTML/Der_Kopf_Metadaten_in_HTML": {
-    "modified": "2020-07-16T22:23:17.212Z",
-    "contributors": [
-      "Shidigital"
-    ]
-  },
-  "Learn/HTML/Einführung_in_HTML/Document_and_website_structure": {
-    "modified": "2020-07-16T22:24:03.053Z",
-    "contributors": [
-      "DiscW0rld",
-      "fdeberle",
-      "Shidigital",
-      "Woehe2010",
-      "fataly01"
-    ]
-  },
-  "Learn/HTML/Einführung_in_HTML/Einfache_Textformatierung_in_HTML": {
-    "modified": "2020-07-16T22:23:30.695Z",
-    "contributors": [
-      "Hofei",
-      "Shidigital"
-    ]
-  },
-  "Learn/HTML/Einführung_in_HTML/Erstellen_von_Hyperlinks": {
-    "modified": "2020-07-16T22:23:43.017Z",
-    "contributors": [
-      "Shidigital"
-    ]
-  },
-  "Learn/HTML/Einführung_in_HTML/Fehlersuche_in_HTML": {
-    "modified": "2020-07-16T22:24:11.946Z",
-    "contributors": [
-      "LeniTastic",
-      "Shidigital"
-    ]
-  },
-  "Learn/HTML/Einführung_in_HTML/Fortgeschrittene_Textformatierung": {
-    "modified": "2020-07-16T22:23:51.933Z",
-    "contributors": [
-      "Shidigital"
-    ]
-  },
-  "Learn/HTML/Einführung_in_HTML/Lerne_HTML_kennen": {
-    "modified": "2020-11-19T12:58:27.172Z",
-    "contributors": [
-      "fiji-flo",
-      "Kometheus",
-      "nitramrelpmur",
-      "Shidigital"
-    ]
-  },
-  "Learn/HTML/Einführung_in_HTML/Marking_up_a_letter": {
-    "modified": "2020-07-16T22:23:11.514Z",
-    "contributors": [
-      "DiscW0rld",
-      "LeniTastic",
-      "msifrt"
-    ]
-  },
-  "Learn/HTML/Einführung_in_HTML/Structuring_a_page_of_content": {
-    "modified": "2020-07-16T22:24:17.990Z",
-    "contributors": [
-      "DiscW0rld"
-    ]
-  },
-  "Learn/HTML/Forms": {
-    "modified": "2020-07-16T22:20:54.604Z",
-    "contributors": [
-      "Ryuno-Ki",
-      "PercyGitarrist",
-      "F.nn"
-    ]
-  },
   "Learn/HTML/Multimedia_and_embedding": {
     "modified": "2020-10-08T13:45:43.288Z",
     "contributors": [
@@ -1502,12 +1112,6 @@
       "PercyGitarrist"
     ]
   },
-  "Learn/HTML/Tables/Grund_tabelle_HTML": {
-    "modified": "2020-07-16T22:25:19.143Z",
-    "contributors": [
-      "GiovanniHD201E"
-    ]
-  },
   "Learn/JavaScript": {
     "modified": "2020-07-16T22:29:37.369Z",
     "contributors": [
@@ -1515,19 +1119,6 @@
       "DrunkenTaunt"
     ]
   },
-  "Learn/JavaScript/Bausteine": {
-    "modified": "2020-07-16T22:31:06.733Z",
-    "contributors": [
-      "Osslack"
-    ]
-  },
-  "Learn/JavaScript/Bausteine/Ereignisse": {
-    "modified": "2020-07-16T22:31:36.524Z",
-    "contributors": [
-      "kaip-e",
-      "GiovanniHD201E"
-    ]
-  },
   "Learn/JavaScript/First_steps": {
     "modified": "2020-07-16T22:29:48.847Z",
     "contributors": [
@@ -1535,13 +1126,6 @@
       "Elllenn"
     ]
   },
-  "Learn/JavaScript/First_steps/Erster_Blick": {
-    "modified": "2020-07-16T22:30:16.778Z",
-    "contributors": [
-      "GiovanniHD201E",
-      "Thomas-Zenkel"
-    ]
-  },
   "Learn/JavaScript/First_steps/Useful_string_methods": {
     "modified": "2020-07-16T22:30:45.510Z",
     "contributors": [
@@ -1555,24 +1139,6 @@
       "mermolaev"
     ]
   },
-  "Learn/JavaScript/First_steps/Was_ist_JavaScript": {
-    "modified": "2020-09-29T09:38:57.543Z",
-    "contributors": [
-      "Devoryo",
-      "mchoeti",
-      "GreenPepper",
-      "hpawe01",
-      "Bissmarc",
-      "woiddale",
-      "JorisGutjahr"
-    ]
-  },
-  "Learn/JavaScript/First_steps/lustige_geschichten_generator": {
-    "modified": "2020-07-16T22:31:00.101Z",
-    "contributors": [
-      "Strubinator"
-    ]
-  },
   "Learn/JavaScript/Objects": {
     "modified": "2020-07-16T22:31:47.973Z",
     "contributors": [
@@ -1614,14 +1180,6 @@
       "Timbuktu1982"
     ]
   },
-  "Learn/Mitarbeiten": {
-    "modified": "2020-07-16T22:33:42.823Z",
-    "contributors": [
-      "SphinxKnight",
-      "1000eyes",
-      "der_rofler"
-    ]
-  },
   "Learn/Server-side": {
     "modified": "2020-07-16T22:35:55.694Z",
     "contributors": [
@@ -1629,20 +1187,6 @@
       "PercyGitarrist"
     ]
   },
-  "Learn/Server-side/Erste_Schritte": {
-    "modified": "2020-07-16T22:36:07.662Z",
-    "contributors": [
-      "LeifMensing",
-      "Dschubba"
-    ]
-  },
-  "Learn/Server-side/Erste_Schritte/Introduction": {
-    "modified": "2020-07-16T22:36:12.624Z",
-    "contributors": [
-      "NetiHeft",
-      "Dschubba"
-    ]
-  },
   "Learn/Server-side/Express_Nodejs": {
     "modified": "2020-07-16T22:37:51.185Z",
     "contributors": [
@@ -1669,18 +1213,6 @@
       "wbamberg"
     ]
   },
-  "Lokalisierung": {
-    "modified": "2019-03-24T00:15:25.257Z",
-    "contributors": [
-      "taralushi",
-      "fscholz",
-      "WayneSchlegel",
-      "DirkS",
-      "maik666",
-      "René Schwarz",
-      "Ak120"
-    ]
-  },
   "MDN": {
     "modified": "2019-09-10T15:39:15.802Z",
     "contributors": [
@@ -1694,27 +1226,6 @@
       "Sheppy"
     ]
   },
-  "MDN/Community": {
-    "modified": "2019-06-15T16:58:37.273Z",
-    "contributors": [
-      "sklicek",
-      "rs-github",
-      "wbamberg",
-      "BavarianMax",
-      "Jeremie",
-      "SvenSaarland",
-      "msebastian100",
-      "Stefan_hr4u"
-    ]
-  },
-  "MDN/Community/Bleibe_auf_dem_Laufenden": {
-    "modified": "2019-03-23T23:27:28.266Z",
-    "contributors": [
-      "wbamberg",
-      "Sebastianz",
-      "UweDirk"
-    ]
-  },
   "MDN/Contribute": {
     "modified": "2019-03-23T23:20:05.396Z",
     "contributors": [
@@ -1761,22 +1272,6 @@
       "Tutz"
     ]
   },
-  "MDN/Contribute/Howto/Do_a_technical_review": {
-    "modified": "2019-01-16T19:26:44.220Z",
-    "contributors": [
-      "wbamberg",
-      "jordylol2006",
-      "Sebastianz"
-    ]
-  },
-  "MDN/Contribute/Howto/Do_an_editorial_review": {
-    "modified": "2019-01-16T19:26:12.299Z",
-    "contributors": [
-      "wbamberg",
-      "sigoa",
-      "Sebastianz"
-    ]
-  },
   "MDN/Contribute/Howto/Document_a_CSS_property": {
     "modified": "2020-02-19T18:56:54.852Z",
     "contributors": [
@@ -1786,34 +1281,6 @@
       "teoli"
     ]
   },
-  "MDN/Contribute/Howto/ERstellung_eines_MDN_Profils": {
-    "modified": "2019-07-28T03:19:41.741Z",
-    "contributors": [
-      "wbamberg",
-      "darkfeile",
-      "lutzip0",
-      "Dev201",
-      "jumpball",
-      "jogi23",
-      "Clonkh"
-    ]
-  },
-  "MDN/Contribute/Howto/Schlagwörter_für_JavaScript_Seiten": {
-    "modified": "2019-01-16T21:20:05.744Z",
-    "contributors": [
-      "wbamberg",
-      "hictox"
-    ]
-  },
-  "MDN/Contribute/Howto/Set_the_summary_for_a_page": {
-    "modified": "2019-01-16T19:16:53.470Z",
-    "contributors": [
-      "wbamberg",
-      "githubsvc",
-      "4680",
-      "maxsu"
-    ]
-  },
   "MDN/Contribute/Howto/Tag": {
     "modified": "2019-07-04T23:25:18.289Z",
     "contributors": [
@@ -1827,13 +1294,6 @@
       "clone"
     ]
   },
-  "MDN/Contribute/zu_tun_im_MDN": {
-    "modified": "2019-01-16T20:30:11.342Z",
-    "contributors": [
-      "wbamberg",
-      "dario.bloch"
-    ]
-  },
   "MDN/Guidelines": {
     "modified": "2020-09-30T15:28:44.297Z",
     "contributors": [
@@ -1843,37 +1303,6 @@
       "Sheppy"
     ]
   },
-  "MDN/Guidelines/Style_guide": {
-    "modified": "2020-09-30T15:28:44.875Z",
-    "contributors": [
-      "chrisdavidmills",
-      "stephanduesterhoeft",
-      "jswisher",
-      "Dschubba",
-      "wbamberg",
-      "Jeremie",
-      "PaddyKfg",
-      "Montana7755"
-    ]
-  },
-  "MDN/Kuma": {
-    "modified": "2020-04-22T10:45:47.041Z",
-    "contributors": [
-      "clemens.klapp",
-      "SphinxKnight",
-      "wbamberg",
-      "JorisGutjahr",
-      "Jeremie",
-      "Sheppy"
-    ]
-  },
-  "MDN/Kuma/Beheben_von_KumaScript_Fehlern": {
-    "modified": "2019-01-16T21:24:01.701Z",
-    "contributors": [
-      "wbamberg",
-      "rolandm"
-    ]
-  },
   "MDN/Structures": {
     "modified": "2020-09-30T09:04:48.225Z",
     "contributors": [
@@ -1883,68 +1312,12 @@
       "hartmann2012"
     ]
   },
-  "MDN/Structures/Kompatibilitaets_Tabellen": {
-    "modified": "2020-10-15T22:06:38.248Z",
+  "Mozilla": {
+    "modified": "2019-03-23T23:36:50.960Z",
     "contributors": [
-      "chrisdavidmills",
-      "thunderhook",
-      "wbamberg",
-      "jogemu"
-    ]
-  },
-  "MDN/nutzer_leitfaden": {
-    "modified": "2019-03-23T22:50:19.741Z",
-    "contributors": [
-      "wbamberg",
-      "jezdez",
-      "LeindK"
-    ]
-  },
-  "MDN/Über": {
-    "modified": "2019-09-10T08:51:50.833Z",
-    "contributors": [
-      "SphinxKnight",
-      "Streamities",
-      "wbamberg",
-      "rs-github"
-    ]
-  },
-  "MDN/Über/Link_zu_MDN": {
-    "modified": "2019-01-17T03:01:28.772Z",
-    "contributors": [
-      "wbamberg",
-      "sklicek"
-    ]
-  },
-  "MDN_at_ten": {
-    "modified": "2019-03-23T22:49:50.216Z",
-    "contributors": [
-      "1000eyes",
-      "stephaniehobson",
-      "Evotopid",
-      "Sheppy"
-    ]
-  },
-  "MDN_at_ten/History_of_MDN": {
-    "modified": "2019-03-23T22:49:53.083Z",
-    "contributors": [
-      "stephaniehobson",
-      "Sebastianz"
-    ]
-  },
-  "MDN_at_ten/Zum_MDN_beitragen": {
-    "modified": "2020-02-19T18:50:24.408Z",
-    "contributors": [
-      "jswisher",
-      "1000eyes"
-    ]
-  },
-  "Mozilla": {
-    "modified": "2019-03-23T23:36:50.960Z",
-    "contributors": [
-      "lucago",
-      "ethertank",
-      "ziyunfei"
+      "lucago",
+      "ethertank",
+      "ziyunfei"
     ]
   },
   "Mozilla/Add-ons": {
@@ -1992,14 +1365,6 @@
       "andrewtruongmoz"
     ]
   },
-  "Mozilla/Add-ons/WebExtensions/API/Lesezeich.": {
-    "modified": "2020-10-15T21:55:55.060Z",
-    "contributors": [
-      "wbamberg",
-      "nw520",
-      "matschibatschi"
-    ]
-  },
   "Mozilla/Add-ons/WebExtensions/API/browserAction": {
     "modified": "2020-10-15T22:26:32.419Z"
   },
@@ -2028,44 +1393,12 @@
       "Asozialist"
     ]
   },
-  "Mozilla/Add-ons/WebExtensions/Arbeiten_mit_Taps_API": {
-    "modified": "2019-06-11T16:28:12.442Z",
-    "contributors": [
-      "Patrick5555"
-    ]
-  },
-  "Mozilla/Add-ons/WebExtensions/Beispiele": {
-    "modified": "2019-03-18T21:04:08.698Z",
-    "contributors": [
-      "StefanM"
-    ]
-  },
   "Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs": {
     "modified": "2020-10-15T20:55:14.782Z",
     "contributors": [
       "frido1973"
     ]
   },
-  "Mozilla/Add-ons/WebExtensions/Deine_erste_WebErweiterung": {
-    "modified": "2019-07-04T07:03:49.181Z",
-    "contributors": [
-      "trych",
-      "SyntaxCacao",
-      "HillOTech",
-      "Asozialist",
-      "twizzz",
-      "serv-inc",
-      "Draphar",
-      "flosommerfeld"
-    ]
-  },
-  "Mozilla/Add-ons/WebExtensions/Deine_zweite_Erweiterung": {
-    "modified": "2019-07-04T06:11:16.199Z",
-    "contributors": [
-      "trych",
-      "Draphar"
-    ]
-  },
   "Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools": {
     "modified": "2019-10-28T22:25:20.040Z",
     "contributors": [
@@ -2130,22 +1463,6 @@
       "PowerToaster"
     ]
   },
-  "Mozilla/Developer_guide/Quelltexte": {
-    "modified": "2019-03-24T00:04:33.890Z",
-    "contributors": [
-      "chrisdavidmills",
-      "fscholz",
-      "Anonymous",
-      "gamemaster7riesen"
-    ]
-  },
-  "Mozilla/Developer_guide/firefox_erfolgreich_erstellt": {
-    "modified": "2019-03-23T22:13:23.971Z",
-    "contributors": [
-      "chrisdavidmills",
-      "friedger"
-    ]
-  },
   "Mozilla/Firefox": {
     "modified": "2020-01-18T12:42:37.514Z",
     "contributors": [
@@ -2255,21 +1572,6 @@
       "Conzz"
     ]
   },
-  "OpenSearch_Plugin_für_Firefox_erstellen": {
-    "modified": "2019-03-24T00:04:54.552Z",
-    "contributors": [
-      "fscholz",
-      "Lexhawkins"
-    ]
-  },
-  "Plugins/Flash-Aktivierung:_Browser-Vergleich": {
-    "modified": "2019-03-23T22:03:23.868Z",
-    "contributors": [
-      "Artist-sumo",
-      "Sheppy",
-      "HoLuLuLu"
-    ]
-  },
   "Tools": {
     "modified": "2020-07-16T22:44:14.027Z",
     "contributors": [
@@ -2296,28 +1598,6 @@
       "AlexPl"
     ]
   },
-  "Tools/3D_untersuchung": {
-    "modified": "2020-07-16T22:34:25.058Z",
-    "contributors": [
-      "wbamberg",
-      "pollti",
-      "SJW"
-    ]
-  },
-  "Tools/Add-ons": {
-    "modified": "2020-07-16T22:36:23.223Z",
-    "contributors": [
-      "wbamberg",
-      "mfluehr"
-    ]
-  },
-  "Tools/Barrierefreiheits_inspektor": {
-    "modified": "2020-07-16T22:36:39.466Z",
-    "contributors": [
-      "hrfischer1983",
-      "hellschu"
-    ]
-  },
   "Tools/Browser_Console": {
     "modified": "2020-07-16T22:35:42.070Z",
     "contributors": [
@@ -2325,15 +1605,6 @@
       "atze79"
     ]
   },
-  "Tools/Browser_Werkzeuge": {
-    "modified": "2020-07-16T22:35:55.309Z",
-    "contributors": [
-      "wbamberg",
-      "res60",
-      "Dev_Falko",
-      "Microgamer"
-    ]
-  },
   "Tools/Debugger": {
     "modified": "2020-07-16T22:35:04.001Z",
     "contributors": [
@@ -2416,28 +1687,6 @@
       "sidgan"
     ]
   },
-  "Tools/Page_Inspector/How_to/Event_Listener_untersuchen": {
-    "modified": "2020-07-16T22:34:35.556Z",
-    "contributors": [
-      "wbamberg",
-      "Sebastianz"
-    ]
-  },
-  "Tools/Page_Inspector/How_to/Raster_Layout_untersuchen": {
-    "modified": "2020-07-16T22:34:46.944Z",
-    "contributors": [
-      "oolong32",
-      "wbamberg",
-      "Micky261"
-    ]
-  },
-  "Tools/Page_Inspector/How_to/Schriftarten_Bearbeitung": {
-    "modified": "2020-08-13T20:23:50.743Z",
-    "contributors": [
-      "cama240601",
-      "GiovanniHD201E"
-    ]
-  },
   "Tools/Paint_Flashing_Tool": {
     "modified": "2020-07-16T22:35:43.400Z",
     "contributors": [
@@ -2484,31 +1733,6 @@
       "popeye007"
     ]
   },
-  "Tools/Seiten_Inspektor": {
-    "modified": "2020-07-16T22:34:26.882Z",
-    "contributors": [
-      "wbamberg",
-      "maybe",
-      "mozjan",
-      "One",
-      "MikeWalde",
-      "libelle17"
-    ]
-  },
-  "Tools/Seiten_Inspektor/Tastenkombinationen": {
-    "modified": "2020-07-16T22:34:50.445Z",
-    "contributors": [
-      "GiovanniHD201E"
-    ]
-  },
-  "Tools/Shader-Editor": {
-    "modified": "2020-07-16T22:35:54.224Z",
-    "contributors": [
-      "wbamberg",
-      "olhaar",
-      "cgtom"
-    ]
-  },
   "Tools/Storage_Inspector": {
     "modified": "2020-07-16T22:36:09.538Z",
     "contributors": [
@@ -2554,66 +1778,12 @@
       "Helmcke42"
     ]
   },
-  "Tools/WebIDE_clone": {
-    "modified": "2019-03-23T23:03:21.499Z",
-    "contributors": [
-      "wbamberg",
-      "VJSchneid",
-      "maybe",
-      "AARADEANCA"
-    ]
-  },
-  "Tools/Web_Konsole": {
-    "modified": "2020-07-16T22:34:04.628Z",
-    "contributors": [
-      "Loilo",
-      "SphinxKnight",
-      "talikanews",
-      "wbamberg",
-      "realsplatscream",
-      "kleinegnomfee",
-      "maybe",
-      "PsychoMg",
-      "mozjan"
-    ]
-  },
-  "Tools/Web_Konsole/Hilfe": {
-    "modified": "2020-07-16T22:34:11.469Z",
-    "contributors": [
-      "wbamberg",
-      "AlexFunk",
-      "mherczegh"
-    ]
-  },
   "Tools/about:debugging": {
     "modified": "2020-08-16T17:45:15.524Z",
     "contributors": [
       "papacemal"
     ]
   },
-  "Tools/bildschirmgroessen-testen": {
-    "modified": "2020-07-16T22:35:21.080Z",
-    "contributors": [
-      "wbamberg",
-      "mozjan"
-    ]
-  },
-  "Tools/netzwerkanalyse": {
-    "modified": "2020-07-16T22:35:29.556Z",
-    "contributors": [
-      "wbamberg",
-      "ThomasLendo"
-    ]
-  },
-  "Updating_web_applications_for_Firefox_3": {
-    "modified": "2019-03-24T00:04:30.175Z",
-    "contributors": [
-      "wbamberg",
-      "Sheppy",
-      "fscholz",
-      "niels"
-    ]
-  },
   "Web": {
     "modified": "2019-09-19T09:01:12.041Z",
     "contributors": [
@@ -2665,12 +1835,6 @@
       "mwalter"
     ]
   },
-  "Web/API/AudioContext/decodeAudioData": {
-    "modified": "2019-03-23T22:38:20.001Z",
-    "contributors": [
-      "Thalhammer"
-    ]
-  },
   "Web/API/AudioDestinationNode": {
     "modified": "2019-03-23T22:30:19.717Z",
     "contributors": [
@@ -3419,23 +2583,6 @@
       "fscholz"
     ]
   },
-  "Web/API/File/Typ": {
-    "modified": "2020-10-15T22:20:09.678Z",
-    "contributors": [
-      "sklicek"
-    ]
-  },
-  "Web/API/File/Zugriff_auf_Dateien_von_Webapplikationen": {
-    "modified": "2019-03-18T20:49:17.436Z",
-    "contributors": [
-      "Holger.Persch",
-      "MatthiasApsel",
-      "gunnarbittersmann",
-      "chrisdavidmills",
-      "icy",
-      "matschu"
-    ]
-  },
   "Web/API/File/fileName": {
     "modified": "2019-03-23T23:33:53.570Z",
     "contributors": [
@@ -3701,32 +2848,12 @@
       "grubec"
     ]
   },
-  "Web/API/IndexedDB_API/Grundkonzepte_hinter_IndexedDB": {
-    "modified": "2020-01-13T04:47:55.526Z",
+  "Web/API/KeyboardEvent": {
+    "modified": "2019-03-18T21:09:07.273Z",
     "contributors": [
-      "chrisdavidmills",
-      "gmagholder",
-      "Julini"
-    ]
-  },
-  "Web/API/IndexedDB_API/IndexedDB_verwenden": {
-    "modified": "2020-01-13T04:47:56.201Z",
-    "contributors": [
-      "chrisdavidmills",
-      "p.root",
-      "mdieblich",
-      "floheller",
-      "HendrikRunte",
-      "Nys",
-      "Julini"
-    ]
-  },
-  "Web/API/KeyboardEvent": {
-    "modified": "2019-03-18T21:09:07.273Z",
-    "contributors": [
-      "fscholz",
-      "wbamberg",
-      "th1nk3th"
+      "fscholz",
+      "wbamberg",
+      "th1nk3th"
     ]
   },
   "Web/API/KeyboardEvent/altKey": {
@@ -3787,13 +2914,6 @@
       "chrisdavidmills"
     ]
   },
-  "Web/API/Navigator/registerProtocolHandler/Webbasierte_protokoll-handler": {
-    "modified": "2019-03-23T22:33:54.067Z",
-    "contributors": [
-      "chrisdavidmills",
-      "Faibk"
-    ]
-  },
   "Web/API/Navigator/sendBeacon": {
     "modified": "2019-03-23T22:27:50.837Z",
     "contributors": [
@@ -3878,12 +2998,6 @@
       "dekatko"
     ]
   },
-  "Web/API/Node/innerText": {
-    "modified": "2019-03-23T22:05:48.154Z",
-    "contributors": [
-      "dekatko"
-    ]
-  },
   "Web/API/Node/lastChild": {
     "modified": "2019-03-23T23:38:33.584Z",
     "contributors": [
@@ -4203,15 +3317,6 @@
       "Keviddle"
     ]
   },
-  "Web/API/Vollbild_API": {
-    "modified": "2019-07-07T13:00:37.918Z",
-    "contributors": [
-      "wbamberg",
-      "lazercaveman",
-      "Johann150",
-      "axelrindle"
-    ]
-  },
   "Web/API/WebGLActiveInfo": {
     "modified": "2019-03-23T22:35:02.340Z",
     "contributors": [
@@ -4263,72 +3368,6 @@
       "fscholz"
     ]
   },
-  "Web/API/WebGL_API/Tutorial/3D-Objekte_mit_WebGL_erstellen": {
-    "modified": "2019-03-24T00:04:47.020Z",
-    "contributors": [
-      "fscholz",
-      "teoli"
-    ]
-  },
-  "Web/API/WebGL_API/Tutorial/Animierte_Texturen_in_WebGL": {
-    "modified": "2019-03-24T00:04:47.741Z",
-    "contributors": [
-      "fscholz",
-      "teoli"
-    ]
-  },
-  "Web/API/WebGL_API/Tutorial/Beleuchtung_in_WebGL": {
-    "modified": "2019-03-24T00:04:49.766Z",
-    "contributors": [
-      "fscholz",
-      "teoli"
-    ]
-  },
-  "Web/API/WebGL_API/Tutorial/Einführung_in_WebGL": {
-    "modified": "2019-03-24T00:05:30.371Z",
-    "contributors": [
-      "noxafy",
-      "Oliver_Schafeld",
-      "H3ndr1k",
-      "xhallix",
-      "manni66",
-      "fscholz",
-      "teoli"
-    ]
-  },
-  "Web/API/WebGL_API/Tutorial/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen": {
-    "modified": "2019-03-24T00:09:11.465Z",
-    "contributors": [
-      "fscholz",
-      "teoli",
-      "WNC7"
-    ]
-  },
-  "Web/API/WebGL_API/Tutorial/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext": {
-    "modified": "2019-03-18T20:49:18.784Z",
-    "contributors": [
-      "jsinge",
-      "noxafy",
-      "fscholz",
-      "teoli",
-      "TimN",
-      "WNC7"
-    ]
-  },
-  "Web/API/WebGL_API/Tutorial/Objekte_mit_WebGL_animieren": {
-    "modified": "2019-03-18T21:15:16.400Z",
-    "contributors": [
-      "fscholz",
-      "teoli"
-    ]
-  },
-  "Web/API/WebGL_API/Tutorial/Texturen_in_WebGL_verwenden": {
-    "modified": "2019-03-24T00:04:48.015Z",
-    "contributors": [
-      "fscholz",
-      "teoli"
-    ]
-  },
   "Web/API/WebSocket": {
     "modified": "2019-10-02T19:29:23.339Z",
     "contributors": [
@@ -4580,18 +3619,6 @@
       "Dargmuesli"
     ]
   },
-  "Web/API/WindowBase64": {
-    "modified": "2019-03-23T22:50:32.909Z",
-    "contributors": [
-      "teoli"
-    ]
-  },
-  "Web/API/WindowBase64/btoa": {
-    "modified": "2019-03-23T22:50:32.544Z",
-    "contributors": [
-      "cami"
-    ]
-  },
   "Web/API/WindowEventHandlers": {
     "modified": "2019-03-23T22:50:03.877Z",
     "contributors": [
@@ -4618,22 +3645,6 @@
       "Oliver_Schafeld"
     ]
   },
-  "Web/API/WindowTimers": {
-    "modified": "2019-03-23T23:01:42.969Z",
-    "contributors": [
-      "teoli"
-    ]
-  },
-  "Web/API/WindowTimers/setTimeout": {
-    "modified": "2019-03-23T23:36:28.621Z",
-    "contributors": [
-      "mdnde",
-      "Eschon",
-      "fscholz",
-      "c0ffm3k4r",
-      "wartab"
-    ]
-  },
   "Web/API/Worker": {
     "modified": "2019-03-18T21:45:39.485Z",
     "contributors": [
@@ -4682,62 +3693,6 @@
       "chrisdavidmills"
     ]
   },
-  "Web/Barrierefreiheit": {
-    "modified": "2019-09-09T14:09:32.470Z",
-    "contributors": [
-      "SphinxKnight",
-      "alippold",
-      "teoli",
-      "fscholz",
-      "Mgalpha"
-    ]
-  },
-  "Web/Barrierefreiheit/ARIA": {
-    "modified": "2019-03-23T23:21:04.985Z",
-    "contributors": [
-      "a.lippold",
-      "marc-se",
-      "iMeta",
-      "eminor",
-      "teoli"
-    ]
-  },
-  "Web/Barrierefreiheit/ARIA/ARIA_Live_Regionen": {
-    "modified": "2019-03-23T23:15:24.210Z",
-    "contributors": [
-      "teoli",
-      "eminor"
-    ]
-  },
-  "Web/Barrierefreiheit/ARIA/ARIA_Techniken": {
-    "modified": "2019-03-18T21:43:56.504Z",
-    "contributors": [
-      "juliankern"
-    ]
-  },
-  "Web/Barrierefreiheit/An_overview_of_accessible_web_applications_and_widgets": {
-    "modified": "2019-03-23T23:17:39.742Z",
-    "contributors": [
-      "juliankern",
-      "christophfink",
-      "teoli",
-      "eminor"
-    ]
-  },
-  "Web/Barrierefreiheit/Tastaturgesteuerte_JavaScript_Komponenten": {
-    "modified": "2019-03-23T23:11:54.393Z",
-    "contributors": [
-      "eminor"
-    ]
-  },
-  "Web/Barrierefreiheit/Webentwicklung": {
-    "modified": "2019-03-18T20:35:27.144Z",
-    "contributors": [
-      "chrisdavidmills",
-      "teoli",
-      "eminor"
-    ]
-  },
   "Web/CSS": {
     "modified": "2020-12-03T15:50:42.872Z",
     "contributors": [
@@ -4756,37 +3711,6 @@
       "Yor.feix"
     ]
   },
-  "Web/CSS/-moz-box-flex": {
-    "modified": "2020-10-15T21:40:01.205Z",
-    "contributors": [
-      "chrisdavidmills",
-      "SJW",
-      "teoli",
-      "crasher666",
-      "Sebastianz"
-    ]
-  },
-  "Web/CSS/-moz-box-ordinal-group": {
-    "modified": "2019-03-23T22:45:29.807Z",
-    "contributors": [
-      "Sebastianz"
-    ]
-  },
-  "Web/CSS/-moz-box-pack": {
-    "modified": "2020-10-15T21:39:56.493Z",
-    "contributors": [
-      "SJW",
-      "teoli",
-      "Sebastianz"
-    ]
-  },
-  "Web/CSS/-moz-cell": {
-    "modified": "2019-03-23T23:11:42.748Z",
-    "contributors": [
-      "Sebastianz",
-      "teoli"
-    ]
-  },
   "Web/CSS/-moz-float-edge": {
     "modified": "2019-03-23T22:44:51.739Z",
     "contributors": [
@@ -4875,24 +3799,6 @@
       "Michael2402"
     ]
   },
-  "Web/CSS/-moz-user-modify": {
-    "modified": "2019-03-24T00:04:27.330Z",
-    "contributors": [
-      "teoli",
-      "Sebastianz",
-      "fscholz",
-      "SJW",
-      "Michael2402"
-    ]
-  },
-  "Web/CSS/-moz-user-select": {
-    "modified": "2019-03-24T00:03:51.678Z",
-    "contributors": [
-      "fscholz",
-      "SJW",
-      "Michael2402"
-    ]
-  },
   "Web/CSS/-webkit-box-reflect": {
     "modified": "2019-03-23T22:45:19.920Z",
     "contributors": [
@@ -4900,12 +3806,6 @@
       "Sebastianz"
     ]
   },
-  "Web/CSS/-webkit-mask-origin": {
-    "modified": "2019-03-23T22:44:52.161Z",
-    "contributors": [
-      "Sebastianz"
-    ]
-  },
   "Web/CSS/-webkit-mask-position-x": {
     "modified": "2019-03-18T21:41:43.515Z",
     "contributors": [
@@ -4920,12 +3820,6 @@
       "felixhaeberle"
     ]
   },
-  "Web/CSS/-webkit-mask-repeat": {
-    "modified": "2019-03-23T22:45:10.485Z",
-    "contributors": [
-      "Sebastianz"
-    ]
-  },
   "Web/CSS/-webkit-mask-repeat-x": {
     "modified": "2019-03-18T21:41:42.607Z",
     "contributors": [
@@ -5080,13 +3974,6 @@
       "Sebastianz"
     ]
   },
-  "Web/CSS/:-moz-placeholder": {
-    "modified": "2019-03-23T23:11:34.619Z",
-    "contributors": [
-      "teoli",
-      "Sebastianz"
-    ]
-  },
   "Web/CSS/:-moz-submit-invalid": {
     "modified": "2020-10-15T21:39:39.769Z",
     "contributors": [
@@ -5100,13 +3987,6 @@
       "Sebastianz"
     ]
   },
-  "Web/CSS/:-moz-ui-invalid": {
-    "modified": "2019-03-23T22:42:35.620Z",
-    "contributors": [
-      "teoli",
-      "Sebastianz"
-    ]
-  },
   "Web/CSS/:-moz-ui-valid": {
     "modified": "2019-03-23T22:42:34.212Z",
     "contributors": [
@@ -5128,13 +4008,6 @@
       "Sebastianz"
     ]
   },
-  "Web/CSS/:-webkit-autofill": {
-    "modified": "2019-03-23T22:43:43.075Z",
-    "contributors": [
-      "teoli",
-      "Sebastianz"
-    ]
-  },
   "Web/CSS/::-moz-page": {
     "modified": "2019-03-23T22:44:43.530Z",
     "contributors": [
@@ -5149,14 +4022,6 @@
       "Sebastianz"
     ]
   },
-  "Web/CSS/::-moz-placeholder": {
-    "modified": "2019-03-23T23:08:23.797Z",
-    "contributors": [
-      "teoli",
-      "Sebastianz",
-      "icy"
-    ]
-  },
   "Web/CSS/::-moz-progress-bar": {
     "modified": "2019-03-23T22:44:41.295Z",
     "contributors": [
@@ -5544,46 +4409,16 @@
       "holgerjakobs"
     ]
   },
-  "Web/CSS/Alias": {
-    "modified": "2019-03-23T22:43:38.581Z",
-    "contributors": [
-      "Sebastianz"
-    ]
-  },
   "Web/CSS/Alternative_style_sheets": {
     "modified": "2019-03-23T22:43:32.591Z",
     "contributors": [
       "Sebastianz"
     ]
   },
-  "Web/CSS/Angrenzende_Geschwisterselektoren": {
-    "modified": "2020-10-15T21:39:56.944Z",
-    "contributors": [
-      "ExE-Boss",
-      "Sebastianz"
-    ]
-  },
-  "Web/CSS/At-rule": {
-    "modified": "2019-03-23T22:44:51.883Z",
-    "contributors": [
-      "Claas",
-      "Sebastianz"
-    ]
-  },
-  "Web/CSS/Attributselektoren": {
-    "modified": "2020-10-15T21:25:18.388Z",
-    "contributors": [
-      "SJW",
-      "Sebastianz",
-      "hansspiess",
-      "fscholz",
-      "iGadget",
-      "J5lx"
-    ]
-  },
-  "Web/CSS/Aural": {
-    "modified": "2019-03-23T22:45:45.488Z",
+  "Web/CSS/At-rule": {
+    "modified": "2019-03-23T22:44:51.883Z",
     "contributors": [
+      "Claas",
       "Sebastianz"
     ]
   },
@@ -5643,27 +4478,6 @@
       "teoli"
     ]
   },
-  "Web/CSS/CSS_Animations/CSS_Animationen_nutzen": {
-    "modified": "2020-04-22T06:24:42.427Z",
-    "contributors": [
-      "Ryuno-Ki",
-      "hamvocke",
-      "hudri",
-      "JorisGutjahr",
-      "awaigand",
-      "Honig",
-      "connexo",
-      "SphinxKnight",
-      "teoli",
-      "Simu"
-    ]
-  },
-  "Web/CSS/CSS_Background_and_Borders": {
-    "modified": "2019-03-23T22:44:11.176Z",
-    "contributors": [
-      "teoli"
-    ]
-  },
   "Web/CSS/CSS_Background_and_Borders/Border-image_generator": {
     "modified": "2019-03-18T21:15:52.768Z",
     "contributors": [
@@ -5676,51 +4490,12 @@
       "Sebastianz"
     ]
   },
-  "Web/CSS/CSS_Background_and_Borders/Mehrere_Hintergründe_in_CSS_verwenden": {
-    "modified": "2019-03-23T23:02:41.693Z",
-    "contributors": [
-      "terwortH",
-      "benmann",
-      "teoli",
-      "Sebastianz",
-      "srhjg"
-    ]
-  },
   "Web/CSS/CSS_Basic_User_Interface": {
     "modified": "2019-03-18T21:18:47.038Z",
     "contributors": [
       "SphinxKnight"
     ]
   },
-  "Web/CSS/CSS_Boxmodell": {
-    "modified": "2019-03-23T22:43:35.662Z",
-    "contributors": [
-      "Sebastianz",
-      "teoli"
-    ]
-  },
-  "Web/CSS/CSS_Boxmodell/Box-shadow_generator": {
-    "modified": "2019-03-18T20:43:44.623Z",
-    "contributors": [
-      "BychekRU",
-      "Sebastianz"
-    ]
-  },
-  "Web/CSS/CSS_Boxmodell/Einführung_in_das_CSS_Boxmodell": {
-    "modified": "2019-03-24T00:03:52.006Z",
-    "contributors": [
-      "Sebastianz",
-      "fscholz",
-      "SJW",
-      "Michael2402"
-    ]
-  },
-  "Web/CSS/CSS_Boxmodell/Zusammenfallen_von_Außenabständen_meistern": {
-    "modified": "2019-03-23T22:41:18.965Z",
-    "contributors": [
-      "Sebastianz"
-    ]
-  },
   "Web/CSS/CSS_Charsets": {
     "modified": "2020-10-15T21:40:18.836Z",
     "contributors": [
@@ -5728,19 +4503,6 @@
       "Sebastianz"
     ]
   },
-  "Web/CSS/CSS_Colors": {
-    "modified": "2019-03-23T22:45:11.820Z",
-    "contributors": [
-      "Sebastianz",
-      "teoli"
-    ]
-  },
-  "Web/CSS/CSS_Colors/farbauswahl_werkzeug": {
-    "modified": "2019-03-23T22:45:05.902Z",
-    "contributors": [
-      "22samuelk"
-    ]
-  },
   "Web/CSS/CSS_Columns": {
     "modified": "2019-07-23T07:54:16.299Z",
     "contributors": [
@@ -5748,12 +4510,6 @@
       "Sebastianz"
     ]
   },
-  "Web/CSS/CSS_Compositing_and_Blending": {
-    "modified": "2019-03-23T22:41:20.151Z",
-    "contributors": [
-      "Sebastianz"
-    ]
-  },
   "Web/CSS/CSS_Conditional_Rules": {
     "modified": "2019-03-23T22:41:19.119Z",
     "contributors": [
@@ -5778,33 +4534,6 @@
       "Gerak842"
     ]
   },
-  "Web/CSS/CSS_Flexible_Box_Layout/Flex_Elemente_Sortieren": {
-    "modified": "2020-10-26T12:12:41.192Z",
-    "contributors": [
-      "Raqhael"
-    ]
-  },
-  "Web/CSS/CSS_Flexible_Box_Layout/Grundlegende_Konzepte_der_Flexbox": {
-    "modified": "2019-03-18T21:33:01.162Z",
-    "contributors": [
-      "prproksch",
-      "td8"
-    ]
-  },
-  "Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes": {
-    "modified": "2019-03-18T20:58:13.468Z",
-    "contributors": [
-      "KadirTopal",
-      "wiegels",
-      "AccNeeder",
-      "rroehrig",
-      "thorsten.rinne",
-      "fscholz",
-      "elker",
-      "thandwerker",
-      "Honig"
-    ]
-  },
   "Web/CSS/CSS_Fonts": {
     "modified": "2019-03-23T22:42:29.712Z",
     "contributors": [
@@ -5852,38 +4581,12 @@
       "Sebastianz"
     ]
   },
-  "Web/CSS/CSS_Lists_and_Counters/CSS_Zähler_verwenden": {
-    "modified": "2019-03-23T22:41:18.157Z",
-    "contributors": [
-      "Sebastianz"
-    ]
-  },
-  "Web/CSS/CSS_Lists_and_Counters/Konsistente_Listeneinrückung": {
-    "modified": "2019-03-23T22:42:20.521Z",
-    "contributors": [
-      "Sebastianz"
-    ]
-  },
   "Web/CSS/CSS_Logical_Properties": {
     "modified": "2019-03-23T22:42:21.102Z",
     "contributors": [
       "Sebastianz"
     ]
   },
-  "Web/CSS/CSS_Masken": {
-    "modified": "2020-10-15T21:41:26.449Z",
-    "contributors": [
-      "SJW",
-      "Sebastianz"
-    ]
-  },
-  "Web/CSS/CSS_Namensräume": {
-    "modified": "2020-10-15T21:41:25.833Z",
-    "contributors": [
-      "SJW",
-      "Sebastianz"
-    ]
-  },
   "Web/CSS/CSS_Positioning": {
     "modified": "2020-11-24T17:04:06.334Z",
     "contributors": [
@@ -5939,23 +4642,6 @@
       "Johuspect"
     ]
   },
-  "Web/CSS/CSS_Referenz": {
-    "modified": "2019-03-24T00:14:12.141Z",
-    "contributors": [
-      "SJW",
-      "plathub",
-      "Claas",
-      "condottiero1985",
-      "Sebastianz",
-      "fscholz",
-      "tregagnon",
-      "Jürgen Jeka",
-      "The Witcher",
-      "Michael2402",
-      "Jech",
-      "Nathymig"
-    ]
-  },
   "Web/CSS/CSS_Ruby": {
     "modified": "2019-03-23T22:43:34.576Z",
     "contributors": [
@@ -5988,13 +4674,6 @@
       "Sebastianz"
     ]
   },
-  "Web/CSS/CSS_Textdekoration": {
-    "modified": "2019-07-23T07:57:58.435Z",
-    "contributors": [
-      "SphinxKnight",
-      "Sebastianz"
-    ]
-  },
   "Web/CSS/CSS_Transforms": {
     "modified": "2019-03-23T22:43:34.303Z",
     "contributors": [
@@ -6003,34 +4682,12 @@
       "teoli"
     ]
   },
-  "Web/CSS/CSS_Transforms/CSS_Transformationen_verwenden": {
-    "modified": "2020-12-14T10:35:58.609Z",
-    "contributors": [
-      "Johuspect",
-      "Sebastianz"
-    ]
-  },
   "Web/CSS/CSS_Transitions": {
     "modified": "2019-03-23T22:43:32.259Z",
     "contributors": [
       "Sebastianz"
     ]
   },
-  "Web/CSS/CSS_Typen": {
-    "modified": "2020-04-21T12:32:32.615Z",
-    "contributors": [
-      "kleinesfilmroellchen",
-      "Claas"
-    ]
-  },
-  "Web/CSS/CSS_User_Interface": {
-    "modified": "2019-03-23T22:43:34.455Z",
-    "contributors": [
-      "SphinxKnight",
-      "ExE-Boss",
-      "Sebastianz"
-    ]
-  },
   "Web/CSS/CSS_Values_and_Units": {
     "modified": "2020-12-11T17:02:10.559Z",
     "contributors": [
@@ -6049,58 +4706,6 @@
       "Johuspect"
     ]
   },
-  "Web/CSS/Farben": {
-    "modified": "2020-10-15T21:14:08.521Z",
-    "contributors": [
-      "Borgitowner",
-      "SJW",
-      "Sebastianz",
-      "Simplexible",
-      "fscholz",
-      "Jürgen Jeka",
-      "Michael2402"
-    ]
-  },
-  "Web/CSS/ID-Selektoren": {
-    "modified": "2020-10-15T21:41:21.317Z",
-    "contributors": [
-      "SJW",
-      "Sebastianz"
-    ]
-  },
-  "Web/CSS/Index": {
-    "modified": "2019-01-16T19:56:04.663Z",
-    "contributors": [
-      "Sebastianz"
-    ]
-  },
-  "Web/CSS/Initialwert": {
-    "modified": "2019-03-23T22:18:48.927Z",
-    "contributors": [
-      "Sebastianz"
-    ]
-  },
-  "Web/CSS/Kindselektoren": {
-    "modified": "2020-10-15T21:41:20.031Z",
-    "contributors": [
-      "SJW",
-      "iCON",
-      "Sebastianz"
-    ]
-  },
-  "Web/CSS/Klassenselektoren": {
-    "modified": "2020-10-15T21:41:19.898Z",
-    "contributors": [
-      "SJW",
-      "Sebastianz"
-    ]
-  },
-  "Web/CSS/Kurzformat_Eigenschaft": {
-    "modified": "2020-11-22T12:51:55.372Z",
-    "contributors": [
-      "Johuspect"
-    ]
-  },
   "Web/CSS/Layout_mode": {
     "modified": "2019-03-23T22:43:30.465Z",
     "contributors": [
@@ -6148,12 +4753,6 @@
       "teoli"
     ]
   },
-  "Web/CSS/Motion_Path": {
-    "modified": "2019-03-23T22:43:35.895Z",
-    "contributors": [
-      "Sebastianz"
-    ]
-  },
   "Web/CSS/Mozilla_Extensions": {
     "modified": "2019-03-24T00:14:14.332Z",
     "contributors": [
@@ -6174,18 +4773,6 @@
       "Sebastianz"
     ]
   },
-  "Web/CSS/Property_Template": {
-    "modified": "2019-01-16T14:33:16.131Z",
-    "contributors": [
-      "wbamberg",
-      "SphinxKnight",
-      "Sebastianz",
-      "fscholz",
-      "ethertank",
-      "The Witcher",
-      "Michael2402"
-    ]
-  },
   "Web/CSS/Pseudo-classes": {
     "modified": "2019-03-23T23:23:46.291Z",
     "contributors": [
@@ -6212,12 +4799,6 @@
       "The Witcher"
     ]
   },
-  "Web/CSS/Spezifität": {
-    "modified": "2019-03-23T23:11:49.533Z",
-    "contributors": [
-      "Sebastianz"
-    ]
-  },
   "Web/CSS/Tools": {
     "modified": "2019-03-23T22:43:38.676Z",
     "contributors": [
@@ -6266,12 +4847,6 @@
       "Sebastianz"
     ]
   },
-  "Web/CSS/Vererbung": {
-    "modified": "2019-03-23T23:13:09.412Z",
-    "contributors": [
-      "Sebastianz"
-    ]
-  },
   "Web/CSS/Visual_formatting_model": {
     "modified": "2020-12-14T11:39:39.796Z",
     "contributors": [
@@ -6286,17 +4861,8 @@
       "SJW"
     ]
   },
-  "Web/CSS/Wertdefinitionssyntax": {
-    "modified": "2019-03-23T23:11:56.504Z",
-    "contributors": [
-      "Sebastianz",
-      "Prinz_Rana",
-      "Krenair",
-      "prayash"
-    ]
-  },
-  "Web/CSS/align-content": {
-    "modified": "2020-10-15T21:29:16.776Z",
+  "Web/CSS/align-content": {
+    "modified": "2020-10-15T21:29:16.776Z",
     "contributors": [
       "SJW",
       "fscholz",
@@ -6442,12 +5008,6 @@
       "screeny05"
     ]
   },
-  "Web/CSS/auto": {
-    "modified": "2019-03-23T23:23:49.598Z",
-    "contributors": [
-      "SJW"
-    ]
-  },
   "Web/CSS/backdrop-filter": {
     "modified": "2020-10-15T21:39:39.277Z",
     "contributors": [
@@ -6574,12 +5134,6 @@
       "Sebastianz"
     ]
   },
-  "Web/CSS/berechneter_Wert": {
-    "modified": "2019-03-23T23:13:10.466Z",
-    "contributors": [
-      "Sebastianz"
-    ]
-  },
   "Web/CSS/border": {
     "modified": "2020-10-15T21:12:38.393Z",
     "contributors": [
@@ -7145,12 +5699,6 @@
       "Michael2402"
     ]
   },
-  "Web/CSS/ersetztes_Element": {
-    "modified": "2019-03-23T22:00:32.824Z",
-    "contributors": [
-      "Sebastianz"
-    ]
-  },
   "Web/CSS/filter": {
     "modified": "2020-10-15T21:28:35.076Z",
     "contributors": [
@@ -7294,13 +5842,6 @@
       "ksm2"
     ]
   },
-  "Web/CSS/grid-gap": {
-    "modified": "2020-10-15T22:00:43.740Z",
-    "contributors": [
-      "AlexWayhill",
-      "Craeckerffm"
-    ]
-  },
   "Web/CSS/grid-template-areas": {
     "modified": "2020-10-15T22:02:47.559Z",
     "contributors": [
@@ -7581,19 +6122,6 @@
       "MaxKoehler"
     ]
   },
-  "Web/CSS/none": {
-    "modified": "2019-03-23T23:23:49.504Z",
-    "contributors": [
-      "SJW"
-    ]
-  },
-  "Web/CSS/normal": {
-    "modified": "2019-03-23T23:23:47.885Z",
-    "contributors": [
-      "dio",
-      "SJW"
-    ]
-  },
   "Web/CSS/number": {
     "modified": "2020-10-15T21:25:33.936Z",
     "contributors": [
@@ -7886,13 +6414,6 @@
       "Johuspect"
     ]
   },
-  "Web/CSS/tatsächlicher_Wert": {
-    "modified": "2019-03-23T22:43:32.481Z",
-    "contributors": [
-      "schlagi123",
-      "Sebastianz"
-    ]
-  },
   "Web/CSS/text-align": {
     "modified": "2020-12-04T16:04:32.676Z",
     "contributors": [
@@ -8110,12 +6631,6 @@
       "Sebastianz"
     ]
   },
-  "Web/CSS/url": {
-    "modified": "2020-10-15T22:01:29.787Z",
-    "contributors": [
-      "valentinprotiuc"
-    ]
-  },
   "Web/CSS/vertical-align": {
     "modified": "2020-12-14T03:38:21.570Z",
     "contributors": [
@@ -8191,18 +6706,6 @@
       "Sebastianz"
     ]
   },
-  "Web/CSS/word-wrap": {
-    "modified": "2020-10-15T21:38:14.535Z",
-    "contributors": [
-      "SJW",
-      "ksuess",
-      "screeny05",
-      "Clubfan22",
-      "fscholz",
-      "Sebastianz",
-      "spiegelp"
-    ]
-  },
   "Web/CSS/z-index": {
     "modified": "2020-12-11T11:04:07.765Z",
     "contributors": [
@@ -8233,41 +6736,6 @@
       "teoli"
     ]
   },
-  "Web/Events/DOMContentLoaded": {
-    "modified": "2019-04-30T14:16:07.184Z",
-    "contributors": [
-      "wbamberg",
-      "timvancleef",
-      "forrestkirby",
-      "fscholz",
-      "Sewi",
-      "horlabs"
-    ]
-  },
-  "Web/Events/change": {
-    "modified": "2019-03-23T23:08:15.170Z",
-    "contributors": [
-      "fscholz",
-      "spiegelp"
-    ]
-  },
-  "Web/Events/load": {
-    "modified": "2019-09-11T09:06:16.530Z",
-    "contributors": [
-      "wbamberg",
-      "fscholz",
-      "LeoDecking"
-    ]
-  },
-  "Web/Events/readystatechange": {
-    "modified": "2019-03-23T22:13:59.735Z",
-    "contributors": [
-      "fscholz",
-      "mdnde",
-      "cussack",
-      "Lepstr"
-    ]
-  },
   "Web/Guide": {
     "modified": "2019-03-23T23:28:10.493Z",
     "contributors": [
@@ -8288,380 +6756,157 @@
       "M@d Man"
     ]
   },
-  "Web/Guide/AJAX/Erste_Schritte": {
-    "modified": "2020-08-11T10:37:53.338Z",
+  "Web/Guide/Events": {
+    "modified": "2019-03-18T21:10:49.464Z",
     "contributors": [
-      "merlincom"
+      "stef4412",
+      "gportioli"
     ]
   },
-  "Web/Guide/CSS/Getting_started": {
-    "modified": "2019-03-24T00:05:49.642Z",
+  "Web/Guide/Events/Creating_and_triggering_events": {
+    "modified": "2019-03-18T20:36:47.550Z",
     "contributors": [
-      "teoli",
-      "fscholz",
-      "DavidWalsh"
+      "td8"
     ]
   },
-  "Web/Guide/CSS/Getting_started/Farbe": {
-    "modified": "2019-03-23T23:08:03.393Z",
+  "Web/Guide/Graphics": {
+    "modified": "2019-03-23T23:05:58.536Z",
     "contributors": [
-      "spiegelp",
-      "thkoch"
+      "mdschweda",
+      "Aloso",
+      "Cginybetty"
     ]
   },
-  "Web/Guide/CSS/Getting_started/Kaskadierung_und_vererbung": {
-    "modified": "2019-03-23T22:49:16.030Z",
+  "Web/HTML": {
+    "modified": "2019-09-10T15:19:11.194Z",
     "contributors": [
-      "spiegelp"
+      "SphinxKnight",
+      "NoldoArnion",
+      "Darkterror45",
+      "sigoa",
+      "lumberplumber",
+      "Draussenduscher",
+      "VJSchneid",
+      "skl",
+      "alippold",
+      "fscholz",
+      "kklein",
+      "LexAndreessen",
+      "Henry-usa",
+      "Timmi"
     ]
   },
-  "Web/Guide/CSS/Getting_started/Lesbares_CSS": {
-    "modified": "2019-03-23T22:41:33.439Z",
+  "Web/HTML/Applying_color": {
+    "modified": "2019-03-18T21:41:16.488Z",
     "contributors": [
-      "spiegelp"
+      "DasRudelndeRudel",
+      "fhwfzfge"
     ]
   },
-  "Web/Guide/CSS/Getting_started/Selektoren": {
-    "modified": "2019-03-23T23:11:23.467Z",
+  "Web/HTML/Attributes": {
+    "modified": "2020-08-17T16:24:34.561Z",
     "contributors": [
-      "woiddale",
-      "spiegelp",
-      "hpkainz"
+      "Gitti039",
+      "steemit-halloworld",
+      "lkreimann",
+      "schlagi123",
+      "LazerPhil",
+      "Anonymous",
+      "StevenS77"
     ]
   },
-  "Web/Guide/CSS/Getting_started/Textstyles": {
-    "modified": "2019-03-23T22:49:16.242Z",
+  "Web/HTML/Element": {
+    "modified": "2020-01-27T05:32:14.694Z",
     "contributors": [
-      "spiegelp"
+      "lucas-walter",
+      "PascalKlassen",
+      "SJW",
+      "schlagi123",
+      "denis.zygann@gmail.com",
+      "teoli",
+      "ethertank",
+      "adrianfischer",
+      "fscholz",
+      "Crash"
     ]
   },
-  "Web/Guide/CSS/Getting_started/Was_ist_CSS": {
-    "modified": "2020-05-05T12:04:06.710Z",
+  "Web/HTML/Element/Frame": {
+    "modified": "2020-10-15T22:10:35.778Z",
     "contributors": [
-      "Helge-HH",
-      "fhwfzfge",
-      "msc1979",
-      "fscholz",
-      "Palmstroem",
-      "barning"
+      "thunderhook"
     ]
   },
-  "Web/Guide/CSS/Getting_started/Why_use_CSS": {
-    "modified": "2019-03-23T22:57:29.159Z",
+  "Web/HTML/Element/Input": {
+    "modified": "2020-03-21T07:28:26.249Z",
     "contributors": [
-      "fhwfzfge",
-      "Palmstroem"
+      "Ryuno-Ki",
+      "evayde",
+      "accessabilly",
+      "Skasi",
+      "JorisGutjahr",
+      "chrillek",
+      "yannick_versley",
+      "Sebastianz",
+      "dio",
+      "teoli",
+      "thaddeus"
     ]
   },
-  "Web/Guide/CSS/Getting_started/Wie_CSS_funktioniert": {
-    "modified": "2019-03-23T22:57:04.436Z",
+  "Web/HTML/Element/Input/button": {
+    "modified": "2020-01-04T13:22:17.254Z",
     "contributors": [
-      "Palmstroem"
+      "use-x",
+      "Breaker222",
+      "Sebastianz",
+      "Sweapz"
     ]
   },
-  "Web/Guide/CSS/Scaling_background_images": {
-    "modified": "2019-03-23T23:06:19.663Z",
+  "Web/HTML/Element/Input/checkbox": {
+    "modified": "2020-10-15T22:29:32.835Z",
     "contributors": [
-      "sos4nt",
-      "mrstork",
-      "webwirbel"
+      "clemens.klapp"
     ]
   },
-  "Web/Guide/DOM": {
-    "modified": "2019-03-23T23:28:11.671Z",
+  "Web/HTML/Element/Shadow": {
+    "modified": "2019-04-09T10:21:03.813Z",
     "contributors": [
-      "Sheppy"
+      "nnscr",
+      "AndreasSchantl"
     ]
   },
-  "Web/Guide/DOM/Manipulating_the_browser_history": {
-    "modified": "2019-03-23T23:28:10.854Z",
+  "Web/HTML/Element/a": {
+    "modified": "2019-03-23T23:13:37.609Z",
     "contributors": [
-      "wanst",
-      "NiklasMerz",
-      "daniel-evers",
-      "Adowrath",
-      "serv-inc",
-      "Oliver_Schafeld",
-      "BugHunter2k",
-      "christian314159",
-      "darksider3"
+      "dio",
+      "dhcgn",
+      "Abro",
+      "omicron81",
+      "Type-Style",
+      "Sebastianz",
+      "skl",
+      "Lucky42"
     ]
   },
-  "Web/Guide/Events": {
-    "modified": "2019-03-18T21:10:49.464Z",
+  "Web/HTML/Element/abbr": {
+    "modified": "2020-10-15T21:28:46.526Z",
     "contributors": [
-      "stef4412",
-      "gportioli"
+      "SebinNyshkim",
+      "Sebastianz",
+      "fscholz"
     ]
   },
-  "Web/Guide/Events/Creating_and_triggering_events": {
-    "modified": "2019-03-18T20:36:47.550Z",
+  "Web/HTML/Element/acronym": {
+    "modified": "2020-10-15T21:28:43.905Z",
     "contributors": [
-      "td8"
+      "SebinNyshkim",
+      "kklein"
     ]
   },
-  "Web/Guide/Graphics": {
-    "modified": "2019-03-23T23:05:58.536Z",
+  "Web/HTML/Element/address": {
+    "modified": "2019-03-23T23:13:25.598Z",
     "contributors": [
-      "mdschweda",
-      "Aloso",
-      "Cginybetty"
-    ]
-  },
-  "Web/Guide/HTML/Canvas_Tutorial": {
-    "modified": "2020-07-31T10:20:16.447Z",
-    "contributors": [
-      "mgrubinger",
-      "sigoa",
-      "surferboy250",
-      "GeorgKern",
-      "Leun4m",
-      "medium-endian",
-      "manni66",
-      "pixunil"
-    ]
-  },
-  "Web/Guide/HTML/Canvas_Tutorial/Advanced_animations": {
-    "modified": "2019-03-23T22:48:52.383Z",
-    "contributors": [
-      "teoli",
-      "jumpball"
-    ]
-  },
-  "Web/Guide/HTML/Canvas_Tutorial/Applying_styles_and_colors": {
-    "modified": "2019-10-10T16:33:46.525Z",
-    "contributors": [
-      "Sebastianz",
-      "GeorgKern"
-    ]
-  },
-  "Web/Guide/HTML/Canvas_Tutorial/Basic_animations": {
-    "modified": "2019-03-18T21:45:29.279Z",
-    "contributors": [
-      "RmnWtnkmp"
-    ]
-  },
-  "Web/Guide/HTML/Canvas_Tutorial/Bilder": {
-    "modified": "2019-03-23T23:12:04.746Z",
-    "contributors": [
-      "sombrastudios",
-      "teoli",
-      "Leun4m",
-      "thedaft",
-      "pixunil"
-    ]
-  },
-  "Web/Guide/HTML/Canvas_Tutorial/Canvas_optimieren": {
-    "modified": "2019-03-18T21:47:09.896Z",
-    "contributors": [
-      "SimonBuxx"
-    ]
-  },
-  "Web/Guide/HTML/Canvas_Tutorial/Drawing_text": {
-    "modified": "2019-03-18T21:38:17.565Z",
-    "contributors": [
-      "Johann150"
-    ]
-  },
-  "Web/Guide/HTML/Canvas_Tutorial/Formen_zeichnen": {
-    "modified": "2019-10-06T12:20:20.273Z",
-    "contributors": [
-      "I_I",
-      "oezpeda",
-      "Siphalor",
-      "teoli",
-      "Leun4m",
-      "thedaft",
-      "pixunil"
-    ]
-  },
-  "Web/Guide/HTML/Canvas_Tutorial/Grundlagen": {
-    "modified": "2019-10-06T12:11:53.548Z",
-    "contributors": [
-      "I_I",
-      "fheckl",
-      "FelixLehmann",
-      "P5ych0",
-      "teoli",
-      "Leun4m",
-      "medium-endian",
-      "pixunil"
-    ]
-  },
-  "Web/Guide/HTML/Content_Editable": {
-    "modified": "2020-02-12T02:09:56.043Z",
-    "contributors": [
-      "blackjack4494",
-      "lxdiamond"
-    ]
-  },
-  "Web/Guide/HTML/Inhaltskategorien": {
-    "modified": "2020-07-16T11:12:55.534Z",
-    "contributors": [
-      "matthiasulrich",
-      "Sebastianz",
-      "jumpball"
-    ]
-  },
-  "Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document": {
-    "modified": "2019-03-18T20:37:20.242Z",
-    "contributors": [
-      "SebinNyshkim",
-      "BlackRebell89"
-    ]
-  },
-  "Web/HTML": {
-    "modified": "2019-09-10T15:19:11.194Z",
-    "contributors": [
-      "SphinxKnight",
-      "NoldoArnion",
-      "Darkterror45",
-      "sigoa",
-      "lumberplumber",
-      "Draussenduscher",
-      "VJSchneid",
-      "skl",
-      "alippold",
-      "fscholz",
-      "kklein",
-      "LexAndreessen",
-      "Henry-usa",
-      "Timmi"
-    ]
-  },
-  "Web/HTML/Applying_color": {
-    "modified": "2019-03-18T21:41:16.488Z",
-    "contributors": [
-      "DasRudelndeRudel",
-      "fhwfzfge"
-    ]
-  },
-  "Web/HTML/Attributes": {
-    "modified": "2020-08-17T16:24:34.561Z",
-    "contributors": [
-      "Gitti039",
-      "steemit-halloworld",
-      "lkreimann",
-      "schlagi123",
-      "LazerPhil",
-      "Anonymous",
-      "StevenS77"
-    ]
-  },
-  "Web/HTML/Block-level_elemente": {
-    "modified": "2020-05-07T06:16:30.382Z",
-    "contributors": [
-      "zuzuzu",
-      "Loilo",
-      "mdschweda",
-      "drgn",
-      "VJSchneid",
-      "teoli",
-      "lukas.oppermann"
-    ]
-  },
-  "Web/HTML/Canvas": {
-    "modified": "2019-03-23T23:16:11.989Z",
-    "contributors": [
-      "sigoa",
-      "petacat",
-      "Aloso",
-      "barning",
-      "andreas.remdt"
-    ]
-  },
-  "Web/HTML/Element": {
-    "modified": "2020-01-27T05:32:14.694Z",
-    "contributors": [
-      "lucas-walter",
-      "PascalKlassen",
-      "SJW",
-      "schlagi123",
-      "denis.zygann@gmail.com",
-      "teoli",
-      "ethertank",
-      "adrianfischer",
-      "fscholz",
-      "Crash"
-    ]
-  },
-  "Web/HTML/Element/Frame": {
-    "modified": "2020-10-15T22:10:35.778Z",
-    "contributors": [
-      "thunderhook"
-    ]
-  },
-  "Web/HTML/Element/Input": {
-    "modified": "2020-03-21T07:28:26.249Z",
-    "contributors": [
-      "Ryuno-Ki",
-      "evayde",
-      "accessabilly",
-      "Skasi",
-      "JorisGutjahr",
-      "chrillek",
-      "yannick_versley",
-      "Sebastianz",
-      "dio",
-      "teoli",
-      "thaddeus"
-    ]
-  },
-  "Web/HTML/Element/Input/button": {
-    "modified": "2020-01-04T13:22:17.254Z",
-    "contributors": [
-      "use-x",
-      "Breaker222",
-      "Sebastianz",
-      "Sweapz"
-    ]
-  },
-  "Web/HTML/Element/Input/checkbox": {
-    "modified": "2020-10-15T22:29:32.835Z",
-    "contributors": [
-      "clemens.klapp"
-    ]
-  },
-  "Web/HTML/Element/Shadow": {
-    "modified": "2019-04-09T10:21:03.813Z",
-    "contributors": [
-      "nnscr",
-      "AndreasSchantl"
-    ]
-  },
-  "Web/HTML/Element/a": {
-    "modified": "2019-03-23T23:13:37.609Z",
-    "contributors": [
-      "dio",
-      "dhcgn",
-      "Abro",
-      "omicron81",
-      "Type-Style",
-      "Sebastianz",
-      "skl",
-      "Lucky42"
-    ]
-  },
-  "Web/HTML/Element/abbr": {
-    "modified": "2020-10-15T21:28:46.526Z",
-    "contributors": [
-      "SebinNyshkim",
-      "Sebastianz",
-      "fscholz"
-    ]
-  },
-  "Web/HTML/Element/acronym": {
-    "modified": "2020-10-15T21:28:43.905Z",
-    "contributors": [
-      "SebinNyshkim",
-      "kklein"
-    ]
-  },
-  "Web/HTML/Element/address": {
-    "modified": "2019-03-23T23:13:25.598Z",
-    "contributors": [
-      "Sebastianz",
-      "kklein"
+      "Sebastianz",
+      "kklein"
     ]
   },
   "Web/HTML/Element/applet": {
@@ -8941,23 +7186,6 @@
       "kklein"
     ]
   },
-  "Web/HTML/Element/h1-h6": {
-    "modified": "2019-03-24T00:04:35.426Z",
-    "contributors": [
-      "schlagi123",
-      "teoli",
-      "fscholz"
-    ]
-  },
-  "Web/HTML/Element/head": {
-    "modified": "2019-03-24T00:04:41.043Z",
-    "contributors": [
-      "schlagi123",
-      "teoli",
-      "fscholz",
-      "Crash"
-    ]
-  },
   "Web/HTML/Element/header": {
     "modified": "2019-03-23T23:12:58.526Z",
     "contributors": [
@@ -9317,172 +7545,6 @@
       "spiegelp"
     ]
   },
-  "Web/HTML/Globale_Attribute": {
-    "modified": "2020-10-15T21:26:14.135Z",
-    "contributors": [
-      "LoVo666",
-      "qjubic",
-      "pixunil"
-    ]
-  },
-  "Web/HTML/Globale_Attribute/accesskey": {
-    "modified": "2020-10-15T22:03:59.818Z",
-    "contributors": [
-      "Claas"
-    ]
-  },
-  "Web/HTML/Globale_Attribute/autocapitalize": {
-    "modified": "2020-10-15T22:05:02.265Z",
-    "contributors": [
-      "alaskaa"
-    ]
-  },
-  "Web/HTML/Globale_Attribute/class": {
-    "modified": "2019-03-23T22:53:31.655Z",
-    "contributors": [
-      "sigoa",
-      "lxdiamond"
-    ]
-  },
-  "Web/HTML/Globale_Attribute/contenteditable": {
-    "modified": "2019-03-18T21:36:35.603Z",
-    "contributors": [
-      "4223",
-      "Claas"
-    ]
-  },
-  "Web/HTML/Globale_Attribute/dir": {
-    "modified": "2020-10-15T22:05:39.463Z",
-    "contributors": [
-      "RewoSiedge"
-    ]
-  },
-  "Web/HTML/Globale_Attribute/draggable": {
-    "modified": "2019-03-23T22:47:23.466Z",
-    "contributors": [
-      "schlagi123",
-      "RmnWtnkmp",
-      "rstarke-dd"
-    ]
-  },
-  "Web/HTML/Globale_Attribute/dropzone": {
-    "modified": "2020-10-15T21:40:11.332Z",
-    "contributors": [
-      "kaljak",
-      "RmnWtnkmp"
-    ]
-  },
-  "Web/HTML/Globale_Attribute/hidden": {
-    "modified": "2020-10-15T21:38:08.779Z",
-    "contributors": [
-      "fscholz",
-      "Oliver_Schafeld",
-      "RmnWtnkmp",
-      "skl"
-    ]
-  },
-  "Web/HTML/Globale_Attribute/id": {
-    "modified": "2019-03-18T21:47:05.388Z",
-    "contributors": [
-      "BlaM",
-      "skl"
-    ]
-  },
-  "Web/HTML/Globale_Attribute/inputmode": {
-    "modified": "2020-10-15T22:14:49.189Z",
-    "contributors": [
-      "sklicek"
-    ]
-  },
-  "Web/HTML/Globale_Attribute/is": {
-    "modified": "2020-10-15T22:23:53.794Z",
-    "contributors": [
-      "LoVo666"
-    ]
-  },
-  "Web/HTML/Globale_Attribute/kontextmenu": {
-    "modified": "2020-03-26T16:11:41.701Z",
-    "contributors": [
-      "MarcusRiemer",
-      "SphinxKnight",
-      "ctexxx"
-    ]
-  },
-  "Web/HTML/Globale_Attribute/lang": {
-    "modified": "2020-10-15T21:51:21.501Z",
-    "contributors": [
-      "kaljak",
-      "RmnWtnkmp"
-    ]
-  },
-  "Web/HTML/Globale_Attribute/style": {
-    "modified": "2020-08-18T11:36:01.283Z",
-    "contributors": [
-      "FelixSchwarz",
-      "tairt",
-      "RmnWtnkmp"
-    ]
-  },
-  "Web/HTML/Globale_Attribute/tabindex": {
-    "modified": "2020-10-15T22:17:29.883Z",
-    "contributors": [
-      "Michael-1",
-      "vssn"
-    ]
-  },
-  "Web/HTML/Globale_Attribute/title": {
-    "modified": "2019-03-23T22:32:47.288Z",
-    "contributors": [
-      "alaskaa",
-      "klausinger",
-      "eluchsinger"
-    ]
-  },
-  "Web/HTML/Globale_Attribute/translate": {
-    "modified": "2019-10-21T21:28:23.890Z",
-    "contributors": [
-      "LoVo666"
-    ]
-  },
-  "Web/HTML/HTML5": {
-    "modified": "2019-03-23T23:33:45.828Z",
-    "contributors": [
-      "suriyaa",
-      "teoli",
-      "timausk",
-      "thorsten.rinne",
-      "matze",
-      "nothine"
-    ]
-  },
-  "Web/HTML/HTML5/HTML5_element_list": {
-    "modified": "2019-03-23T23:37:56.525Z",
-    "contributors": [
-      "gk-freiheit",
-      "rawcat",
-      "teoli",
-      "AickeSchulz",
-      "jwl"
-    ]
-  },
-  "Web/HTML/Inline_elemente": {
-    "modified": "2019-03-23T23:18:01.940Z",
-    "contributors": [
-      "Aryx",
-      "petergloor",
-      "teoli",
-      "lukas.oppermann"
-    ]
-  },
-  "Web/HTML/Referenz": {
-    "modified": "2019-09-09T07:16:32.387Z",
-    "contributors": [
-      "SphinxKnight",
-      "mprofitl",
-      "wbamberg",
-      "legalbit"
-    ]
-  },
   "Web/HTML/Using_the_application_cache": {
     "modified": "2019-03-23T23:31:27.651Z",
     "contributors": [
@@ -9539,33 +7601,12 @@
       "quicksanddiver"
     ]
   },
-  "Web/HTTP/CORS/Errors/CORSFehlenderAllowHeaderAusPreflight": {
-    "modified": "2020-03-31T09:46:01.871Z",
-    "contributors": [
-      "cradloff"
-    ]
-  },
-  "Web/HTTP/CORS/Errors/CORSFehltQuelleErlauben": {
-    "modified": "2019-07-24T08:48:05.259Z",
-    "contributors": [
-      "kai-oswald",
-      "SAvB"
-    ]
-  },
   "Web/HTTP/CORS/Errors/CORSRequestNotHttp": {
     "modified": "2019-05-21T09:09:00.472Z",
     "contributors": [
       "EastFreezian"
     ]
   },
-  "Web/HTTP/Caching_FAQ": {
-    "modified": "2019-03-23T23:05:15.113Z",
-    "contributors": [
-      "jugmac00",
-      "Johann150",
-      "VoodooDS"
-    ]
-  },
   "Web/HTTP/Headers": {
     "modified": "2019-05-30T17:47:25.618Z",
     "contributors": [
@@ -9873,12 +7914,6 @@
       "loki"
     ]
   },
-  "Web/JavaScript/Aufzählbarkeit_und_Zugehörigkeit_von_Eigenschaften": {
-    "modified": "2020-05-27T07:04:55.127Z",
-    "contributors": [
-      "zuzuzu"
-    ]
-  },
   "Web/JavaScript/Closures": {
     "modified": "2020-08-14T08:33:52.378Z",
     "contributors": [
@@ -9899,54 +7934,6 @@
       "eminor"
     ]
   },
-  "Web/JavaScript/Datenstrukturen": {
-    "modified": "2020-03-12T19:40:01.103Z",
-    "contributors": [
-      "BenjHawk",
-      "GR_Fuchs",
-      "fL03",
-      "schlagi123",
-      "twarncke",
-      "yampus",
-      "ChristianLuxem",
-      "nodexo",
-      "fscholz",
-      "siggi-heltau",
-      "FabianBeiner",
-      "spiegelp"
-    ]
-  },
-  "Web/JavaScript/Eine_Wiedereinfuehrung_in_JavaScript": {
-    "modified": "2020-05-19T18:28:46.915Z",
-    "contributors": [
-      "AlexanderLaska",
-      "Timbuktu1982",
-      "Dusty4848",
-      "Meiqian",
-      "Nikolai_Kucksdorf",
-      "kisjoke91",
-      "Space42",
-      "Univream",
-      "tomscholz",
-      "schlagi123",
-      "PinheadLarry",
-      "sigoa",
-      "acetous",
-      "martinhoffmann",
-      "Coke_and_Pepsi",
-      "ibafluss",
-      "creitiv",
-      "fscholz",
-      "eminor"
-    ]
-  },
-  "Web/JavaScript/Einführung_in_den_Gebrauch_von_XPath_in_JavaScript": {
-    "modified": "2019-03-23T22:12:16.123Z",
-    "contributors": [
-      "chrisdavidmills",
-      "QClonesClan"
-    ]
-  },
   "Web/JavaScript/EventLoop": {
     "modified": "2020-03-12T19:41:21.053Z",
     "contributors": [
@@ -9971,142 +7958,27 @@
       "marc971"
     ]
   },
-  "Web/JavaScript/Guide/Ausdruecke_und_Operatoren": {
-    "modified": "2020-03-12T19:38:40.241Z",
+  "Web/JavaScript/Guide/Indexed_collections": {
+    "modified": "2020-03-12T19:46:38.832Z",
     "contributors": [
-      "occcy",
-      "stefboll",
-      "HaayeHenricus",
-      "schlagi123",
-      "MelanieVeigl",
-      "Kevinci",
-      "fscholz",
-      "DavidWalsh",
-      "eminor"
+      "G_hi3"
     ]
   },
-  "Web/JavaScript/Guide/Einführung": {
-    "modified": "2020-03-12T19:40:52.952Z",
+  "Web/JavaScript/Guide/Keyed_collections": {
+    "modified": "2020-07-15T01:51:42.838Z",
     "contributors": [
-      "woiddale",
-      "schlagi123",
-      "aldec-dv",
-      "NedNisW",
-      "janjo",
-      "Chtheile",
-      "miniemuff",
-      "fscholz",
-      "Sir.Codewright"
+      "kre",
+      "Cerberooo",
+      "cami",
+      "Julian-B90",
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Guide/Feinheiten_des_Objektmodells": {
-    "modified": "2020-10-03T02:52:53.149Z",
+  "Web/JavaScript/Guide/Meta_programming": {
+    "modified": "2020-03-12T19:47:40.641Z",
     "contributors": [
-      "c0dewalker",
-      "wbamberg",
-      "schlagi123",
-      "sigoa",
-      "DoctypeRosenthal",
-      "Venhaus",
-      "crasher666",
-      "IngoB",
-      "fscholz",
-      "eminor"
-    ]
-  },
-  "Web/JavaScript/Guide/Funktionen": {
-    "modified": "2020-03-12T19:38:37.078Z",
-    "contributors": [
-      "dmho",
-      "cami",
-      "loicyondjeu",
-      "stefboll",
-      "woiddale",
-      "schlagi123",
-      "b-lack",
-      "vetoCode",
-      "fscholz",
-      "eminor"
-    ]
-  },
-  "Web/JavaScript/Guide/Grammatik_und_Typen": {
-    "modified": "2020-09-16T18:03:08.891Z",
-    "contributors": [
-      "FFFutureflo",
-      "Tionran",
-      "schlagi123",
-      "TomasRiker",
-      "aldec-dv",
-      "SaschaHeyer",
-      "yampus",
-      "FocusCookie",
-      "Randomfinger",
-      "NedNisW",
-      "vetoCode",
-      "didierCH",
-      "baxstar",
-      "fscholz",
-      "siggi-heltau",
-      "eminor",
-      "NickRussler",
-      "Hans_Mueller"
-    ]
-  },
-  "Web/JavaScript/Guide/Indexed_collections": {
-    "modified": "2020-03-12T19:46:38.832Z",
-    "contributors": [
-      "G_hi3"
-    ]
-  },
-  "Web/JavaScript/Guide/Keyed_collections": {
-    "modified": "2020-07-15T01:51:42.838Z",
-    "contributors": [
-      "kre",
-      "Cerberooo",
-      "cami",
-      "Julian-B90",
-      "schlagi123"
-    ]
-  },
-  "Web/JavaScript/Guide/Kontrollfluss_und_Fehlerbehandlung": {
-    "modified": "2020-03-12T19:37:55.717Z",
-    "contributors": [
-      "cami",
-      "deklesen",
-      "woiddale",
-      "schlagi123",
-      "SaschaHeyer",
-      "PreCodeEU",
-      "StevenS77",
-      "jwhitlock",
-      "KarolineCat",
-      "fscholz",
-      "vsenol",
-      "eminor"
-    ]
-  },
-  "Web/JavaScript/Guide/Meta_programming": {
-    "modified": "2020-03-12T19:47:40.641Z",
-    "contributors": [
-      "mschleeweiss",
-      "schlagi123"
-    ]
-  },
-  "Web/JavaScript/Guide/Mit_Objekten_arbeiten": {
-    "modified": "2020-03-12T19:38:32.446Z",
-    "contributors": [
-      "schlagi123",
-      "Dr-Oetker",
-      "SphinxKnight",
-      "papper371",
-      "timosperisen",
-      "serv-inc",
-      "fw-zirkusdigitalo",
-      "fscholz",
-      "DavidWalsh",
-      "stephaniehobson",
-      "cyclodev",
-      "eminor"
+      "mschleeweiss",
+      "schlagi123"
     ]
   },
   "Web/JavaScript/Guide/Modules": {
@@ -10138,14 +8010,6 @@
       "eminor"
     ]
   },
-  "Web/JavaScript/Guide/Textformatierung": {
-    "modified": "2020-03-12T19:46:53.213Z",
-    "contributors": [
-      "schlagi123",
-      "patpir",
-      "SEBv15"
-    ]
-  },
   "Web/JavaScript/Guide/Using_promises": {
     "modified": "2020-07-30T16:41:03.762Z",
     "contributors": [
@@ -10154,14 +8018,6 @@
       "matze19831211"
     ]
   },
-  "Web/JavaScript/Guide/schleifen_und_iterationen": {
-    "modified": "2020-03-12T19:43:05.832Z",
-    "contributors": [
-      "schlagi123",
-      "j0ck",
-      "moreadrenalin"
-    ]
-  },
   "Web/JavaScript/Inheritance_and_the_prototype_chain": {
     "modified": "2020-03-12T19:41:37.015Z",
     "contributors": [
@@ -10176,31 +8032,6 @@
       "antonharald"
     ]
   },
-  "Web/JavaScript/Introduction_to_Object-Oriented_JavaScript": {
-    "modified": "2020-03-12T19:39:48.552Z",
-    "contributors": [
-      "ant1d0t",
-      "nemo182",
-      "christianhegedues",
-      "BurnerPat",
-      "schlagi123",
-      "neverendingo",
-      "creitiv",
-      "DunklesBlut88",
-      "paesku",
-      "bricks",
-      "fabiankreutz",
-      "spiegelp"
-    ]
-  },
-  "Web/JavaScript/JavaScript_technologieuebersicht": {
-    "modified": "2020-03-12T19:39:42.418Z",
-    "contributors": [
-      "lesch",
-      "fl1p",
-      "spiegelp"
-    ]
-  },
   "Web/JavaScript/Language_Resources": {
     "modified": "2020-03-12T19:38:27.478Z",
     "contributors": [
@@ -10231,4008 +8062,6105 @@
       "timbernasley"
     ]
   },
-  "Web/JavaScript/Reference/Fehler": {
-    "modified": "2020-03-12T19:43:41.868Z",
+  "Web/JavaScript/Reference/Functions": {
+    "modified": "2020-10-15T21:32:23.734Z",
     "contributors": [
+      "steevn",
+      "ibiBgOR",
+      "julianpollmann",
       "schlagi123",
-      "akumagamo"
+      "P0lip"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Already_has_pragma": {
-    "modified": "2020-03-12T19:47:20.172Z",
+  "Web/JavaScript/Reference/Functions/Default_parameters": {
+    "modified": "2020-10-15T21:51:29.730Z",
     "contributors": [
-      "schlagi123"
+      "schlagi123",
+      "Eiknheimer",
+      "serv-inc",
+      "StevenS77",
+      "kdex",
+      "leonschwanitz"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Array_sort_argument": {
-    "modified": "2020-03-12T19:47:33.148Z",
+  "Web/JavaScript/Reference/Functions/arguments": {
+    "modified": "2020-10-15T21:32:34.952Z",
     "contributors": [
-      "schlagi123"
+      "tonitone",
+      "StefKrie",
+      "haveyaseen",
+      "schlagi123",
+      "niorad",
+      "a-ctor",
+      "fscholz"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Bad_octal": {
-    "modified": "2020-03-12T19:47:25.600Z",
+  "Web/JavaScript/Reference/Functions/arguments/@@iterator": {
+    "modified": "2020-10-15T22:04:50.730Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Bad_radix": {
-    "modified": "2020-03-12T19:47:40.678Z",
+  "Web/JavaScript/Reference/Functions/arguments/callee": {
+    "modified": "2020-10-15T21:32:40.831Z",
     "contributors": [
-      "schlagi123"
+      "schlagi123",
+      "fscholz"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Bad_regexp_flag": {
-    "modified": "2020-03-12T19:47:43.378Z",
+  "Web/JavaScript/Reference/Functions/arguments/length": {
+    "modified": "2020-10-15T21:32:35.168Z",
     "contributors": [
-      "schlagi123"
+      "schlagi123",
+      "fscholz"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Bad_return_or_yield": {
-    "modified": "2020-03-12T19:47:36.755Z",
+  "Web/JavaScript/Reference/Functions/get": {
+    "modified": "2020-10-15T22:04:49.671Z",
     "contributors": [
-      "schlagi123"
+      "schlagi123",
+      "JPeer264"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Called_on_incompatible_type": {
-    "modified": "2020-03-12T19:47:23.087Z",
+  "Web/JavaScript/Reference/Functions/set": {
+    "modified": "2020-10-15T22:04:49.802Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Cant_access_lexical_declaration_before_init": {
-    "modified": "2020-03-12T19:47:39.951Z",
+  "Web/JavaScript/Reference/Global_Objects": {
+    "modified": "2020-03-12T19:38:16.835Z",
     "contributors": [
-      "schlagi123"
+      "jazevo",
+      "schlagi123",
+      "Deppenapostroph",
+      "SphinxKnight",
+      "timbernasley",
+      "fscholz",
+      "ziyunfei"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Cant_access_property": {
-    "modified": "2020-03-12T19:48:57.195Z",
+  "Web/JavaScript/Reference/Global_Objects/Array": {
+    "modified": "2020-10-15T21:25:30.625Z",
     "contributors": [
-      "micschwarz"
+      "grumpy-cat",
+      "SebinNyshkim",
+      "schlagi123",
+      "henje",
+      "JayEn84",
+      "Eiknheimer",
+      "StevenS77",
+      "kdex",
+      "antonharald",
+      "fscholz",
+      "Airblader"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Cant_define_property_object_not_extensible": {
-    "modified": "2020-03-12T19:47:37.913Z",
+  "Web/JavaScript/Reference/Global_Objects/Array/@@iterator": {
+    "modified": "2020-10-15T22:01:02.252Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Cant_delete": {
-    "modified": "2020-03-12T19:47:33.700Z",
+  "Web/JavaScript/Reference/Global_Objects/Array/@@species": {
+    "modified": "2020-10-15T22:01:02.767Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Cant_redefine_property": {
-    "modified": "2020-03-12T19:47:33.994Z",
+  "Web/JavaScript/Reference/Global_Objects/Array/@@unscopables": {
+    "modified": "2020-10-15T22:01:03.125Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Cyclic_object_value": {
-    "modified": "2020-03-12T19:47:32.067Z",
+  "Web/JavaScript/Reference/Global_Objects/Array/Reduce": {
+    "modified": "2020-10-15T21:52:43.889Z",
     "contributors": [
-      "martinr1604",
-      "schlagi123"
+      "duckymirror",
+      "isnot2bad",
+      "NiklasMerz",
+      "schlagi123",
+      "molerat619",
+      "LeisureLarry",
+      "sol-idsnake",
+      "istvank",
+      "StevenS77"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Dead_object": {
-    "modified": "2020-03-12T19:47:34.842Z",
+  "Web/JavaScript/Reference/Global_Objects/Array/ReduceRight": {
+    "modified": "2020-10-15T21:52:47.826Z",
     "contributors": [
-      "schlagi123"
+      "schlagi123",
+      "StevenS77"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Delete_in_strict_mode": {
-    "modified": "2020-03-12T19:47:47.727Z",
+  "Web/JavaScript/Reference/Global_Objects/Array/concat": {
+    "modified": "2020-10-15T21:34:08.129Z",
     "contributors": [
-      "schlagi123"
+      "schlagi123",
+      "ghost23",
+      "pecoes",
+      "oliver-j",
+      "FelixSebastianLange"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Deprecated_String_generics": {
-    "modified": "2020-03-12T19:47:17.153Z",
+  "Web/JavaScript/Reference/Global_Objects/Array/copyWithin": {
+    "modified": "2020-10-15T21:38:19.886Z",
     "contributors": [
-      "schlagi123"
+      "schlagi123",
+      "GR_Fuchs",
+      "Flummi",
+      "oliver-j"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Deprecated_caller_or_arguments_usage": {
-    "modified": "2020-03-12T19:47:44.593Z",
+  "Web/JavaScript/Reference/Global_Objects/Array/entries": {
+    "modified": "2020-10-15T21:38:18.243Z",
     "contributors": [
-      "schlagi123"
+      "Tharkun86",
+      "schlagi123",
+      "oliver-j",
+      "AndyTheDandy"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Deprecated_expression_closures": {
-    "modified": "2020-03-12T19:47:23.525Z",
+  "Web/JavaScript/Reference/Global_Objects/Array/every": {
+    "modified": "2020-10-15T21:47:07.289Z",
     "contributors": [
-      "schlagi123"
+      "schlagi123",
+      "orion-z",
+      "longstone"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Deprecated_octal": {
-    "modified": "2020-03-12T19:47:46.456Z",
+  "Web/JavaScript/Reference/Global_Objects/Array/fill": {
+    "modified": "2020-10-15T21:38:18.545Z",
     "contributors": [
-      "schlagi123"
+      "schlagi123",
+      "Andreas_Dyballa",
+      "oliver-j",
+      "AndyTheDandy"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Deprecated_source_map_pragma": {
-    "modified": "2020-03-12T19:47:46.265Z",
+  "Web/JavaScript/Reference/Global_Objects/Array/filter": {
+    "modified": "2020-12-01T06:41:38.166Z",
     "contributors": [
-      "schlagi123"
+      "Gismo1337",
+      "caca123-nz",
+      "SebinNyshkim",
+      "michelgotta",
+      "schlagi123",
+      "xdevs23",
+      "midnightmare",
+      "oliver-j",
+      "occcy"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Deprecated_toLocaleFormat": {
-    "modified": "2020-03-12T19:47:24.103Z",
+  "Web/JavaScript/Reference/Global_Objects/Array/find": {
+    "modified": "2020-10-15T21:34:07.173Z",
     "contributors": [
-      "schlagi123"
+      "SebinNyshkim",
+      "schlagi123",
+      "mrkosim",
+      "psychotammi",
+      "mreu",
+      "db6edr",
+      "oliver-j",
+      "MelanieVeigl"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Equal_as_assign": {
-    "modified": "2020-03-12T19:47:33.976Z",
+  "Web/JavaScript/Reference/Global_Objects/Array/findIndex": {
+    "modified": "2020-10-15T21:50:45.238Z",
     "contributors": [
-      "schlagi123"
+      "SebinNyshkim",
+      "schlagi123",
+      "psychotammi",
+      "sosnet",
+      "labcode-de"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/For-each-in_loops_are_deprecated": {
-    "modified": "2020-03-12T19:47:22.797Z",
+  "Web/JavaScript/Reference/Global_Objects/Array/flat": {
+    "modified": "2020-10-15T22:01:54.920Z",
     "contributors": [
+      "fscholz",
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Getter_only": {
-    "modified": "2020-03-12T19:47:33.589Z",
+  "Web/JavaScript/Reference/Global_Objects/Array/flatMap": {
+    "modified": "2020-10-15T22:02:19.086Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Identifier_after_number": {
-    "modified": "2020-03-12T19:47:39.577Z",
+  "Web/JavaScript/Reference/Global_Objects/Array/forEach": {
+    "modified": "2020-10-15T21:31:37.392Z",
     "contributors": [
-      "schlagi123"
+      "SebinNyshkim",
+      "schlagi123",
+      "Martin.Kraft",
+      "Anonymous",
+      "StevenS77",
+      "L15t3",
+      "langco",
+      "sudave",
+      "olastor"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Illegal_character": {
-    "modified": "2020-03-12T19:47:40.583Z",
+  "Web/JavaScript/Reference/Global_Objects/Array/from": {
+    "modified": "2020-10-15T21:38:18.396Z",
     "contributors": [
-      "schlagi123"
+      "manfredkogler",
+      "schlagi123",
+      "Maugo",
+      "odysseuscm",
+      "kdex",
+      "oliver-j",
+      "stehefan"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Invalid_array_length": {
-    "modified": "2020-03-12T19:43:36.993Z",
+  "Web/JavaScript/Reference/Global_Objects/Array/includes": {
+    "modified": "2020-10-15T21:39:40.373Z",
     "contributors": [
+      "oliver-gramberg",
+      "MichelBahl",
+      "mikakruschel",
       "schlagi123",
-      "yampus",
-      "akumagamo"
+      "adabru"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Invalid_assignment_left-hand_side": {
-    "modified": "2020-03-12T19:46:39.233Z",
+  "Web/JavaScript/Reference/Global_Objects/Array/indexOf": {
+    "modified": "2020-10-15T21:39:59.907Z",
     "contributors": [
+      "SebinNyshkim",
       "schlagi123",
-      "Cripi"
+      "Athyrion"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Invalid_const_assignment": {
-    "modified": "2020-03-12T19:47:33.651Z",
+  "Web/JavaScript/Reference/Global_Objects/Array/isArray": {
+    "modified": "2020-10-15T21:26:02.361Z",
     "contributors": [
-      "schlagi123"
+      "schlagi123",
+      "oliver-j",
+      "fscholz",
+      "yacchatta"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Invalid_date": {
-    "modified": "2020-03-12T19:47:16.548Z",
+  "Web/JavaScript/Reference/Global_Objects/Array/join": {
+    "modified": "2020-10-15T21:32:45.888Z",
     "contributors": [
+      "SebinNyshkim",
+      "timlg07",
       "schlagi123",
-      "fire-stone"
+      "wattafot",
+      "Saschlong",
+      "mieth"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Invalid_for-in_initializer": {
-    "modified": "2020-03-12T19:47:50.395Z",
+  "Web/JavaScript/Reference/Global_Objects/Array/keys": {
+    "modified": "2020-10-15T21:55:10.261Z",
     "contributors": [
-      "schlagi123"
+      "jfi",
+      "schlagi123",
+      "Arlind"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Invalid_for-of_initializer": {
-    "modified": "2020-03-12T19:47:46.412Z",
+  "Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf": {
+    "modified": "2020-10-15T21:55:15.610Z",
     "contributors": [
-      "schlagi123"
+      "schlagi123",
+      "Arlind"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/JSON_bad_parse": {
-    "modified": "2020-03-12T19:47:34.652Z",
+  "Web/JavaScript/Reference/Global_Objects/Array/length": {
+    "modified": "2020-10-15T21:38:16.165Z",
     "contributors": [
+      "jfi",
       "schlagi123",
-      "Jannik99"
+      "AndyTheDandy"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Malformed_URI": {
-    "modified": "2020-05-11T08:04:02.475Z",
+  "Web/JavaScript/Reference/Global_Objects/Array/map": {
+    "modified": "2020-10-15T21:32:29.489Z",
     "contributors": [
-      "Skasi",
-      "schlagi123"
+      "mwiehl",
+      "felix_geenen",
+      "SebinNyshkim",
+      "MerlindlH",
+      "schlagi123",
+      "kdex",
+      "FNGR2911",
+      "annnoo",
+      "StevenS77",
+      "schellmax",
+      "justb81",
+      "mexn",
+      "leMaik",
+      "derhagen",
+      "Arminmsg"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Malformed_formal_parameter": {
-    "modified": "2020-03-12T19:43:43.986Z",
+  "Web/JavaScript/Reference/Global_Objects/Array/of": {
+    "modified": "2020-10-15T21:38:18.269Z",
     "contributors": [
-      "schlagi123"
+      "schlagi123",
+      "dennissterzenbach",
+      "almai",
+      "mormahr",
+      "oliver-j"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Missing_bracket_after_list": {
-    "modified": "2020-03-12T19:46:42.895Z",
+  "Web/JavaScript/Reference/Global_Objects/Array/pop": {
+    "modified": "2020-10-15T21:25:28.942Z",
     "contributors": [
       "schlagi123",
-      "Stolzenhain"
+      "maoberlehner",
+      "fscholz",
+      "Airblader"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Missing_colon_after_property_id": {
-    "modified": "2020-03-12T19:47:39.916Z",
+  "Web/JavaScript/Reference/Global_Objects/Array/push": {
+    "modified": "2020-10-15T21:25:28.923Z",
     "contributors": [
-      "schlagi123"
+      "SebinNyshkim",
+      "schlagi123",
+      "k7sleeper",
+      "marzepani",
+      "yacchatta",
+      "Arminmsg",
+      "fscholz",
+      "Airblader"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Missing_curly_after_function_body": {
-    "modified": "2020-03-12T19:47:34.109Z",
+  "Web/JavaScript/Reference/Global_Objects/Array/reverse": {
+    "modified": "2020-10-15T21:25:28.957Z",
     "contributors": [
-      "schlagi123"
+      "schlagi123",
+      "cepharum",
+      "vog",
+      "mieth",
+      "fscholz",
+      "Airblader"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Missing_curly_after_property_list": {
-    "modified": "2020-03-12T19:45:33.319Z",
+  "Web/JavaScript/Reference/Global_Objects/Array/shift": {
+    "modified": "2020-10-15T21:25:29.071Z",
     "contributors": [
       "schlagi123",
-      "fire-stone"
+      "OlegBr",
+      "HendrikRunte",
+      "fscholz",
+      "Airblader"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Missing_formal_parameter": {
-    "modified": "2020-03-12T19:47:38.482Z",
+  "Web/JavaScript/Reference/Global_Objects/Array/slice": {
+    "modified": "2020-10-15T21:38:17.986Z",
     "contributors": [
-      "schlagi123"
+      "DATADEER",
+      "schlagi123",
+      "wiegels",
+      "OlegBr",
+      "oliver-j"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Missing_initializer_in_const": {
-    "modified": "2020-03-12T19:47:35.587Z",
+  "Web/JavaScript/Reference/Global_Objects/Array/some": {
+    "modified": "2020-10-15T21:51:10.415Z",
     "contributors": [
-      "schlagi123"
+      "schlagi123",
+      "Jumace",
+      "ddBenny",
+      "MaxKr",
+      "StevenS77",
+      "ThorstenHans"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Missing_name_after_dot_operator": {
-    "modified": "2020-03-12T19:47:35.523Z",
+  "Web/JavaScript/Reference/Global_Objects/Array/sort": {
+    "modified": "2020-10-15T21:50:45.209Z",
     "contributors": [
-      "sicLotus",
-      "schlagi123"
+      "SebinNyshkim",
+      "schlagi123",
+      "xerox",
+      "Huargh"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Missing_parenthesis_after_argument_list": {
-    "modified": "2020-03-12T19:44:04.052Z",
+  "Web/JavaScript/Reference/Global_Objects/Array/splice": {
+    "modified": "2020-10-15T21:30:49.791Z",
     "contributors": [
+      "montapro",
+      "Huegelkoenig",
+      "SebinNyshkim",
+      "leon-jasper",
+      "GateKeeper",
+      "Horitsu",
+      "Breaker222",
       "schlagi123",
-      "iimog",
-      "rolandbgd",
-      "akumagamo"
+      "ndresx",
+      "n4nos",
+      "valentinmanthei",
+      "Andorxor",
+      "rillke",
+      "cepharum",
+      "TMR",
+      "BlaM",
+      "shentschel",
+      "casarock",
+      "depoulo",
+      "rhulha"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Missing_parenthesis_after_condition": {
-    "modified": "2020-03-12T19:47:39.363Z",
+  "Web/JavaScript/Reference/Global_Objects/Array/toLocaleString": {
+    "modified": "2020-10-15T21:59:23.526Z",
     "contributors": [
-      "schlagi123"
+      "schlagi123",
+      "SphinxKnight",
+      "vssn"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Missing_semicolon_before_statement": {
-    "modified": "2020-03-12T19:44:24.631Z",
+  "Web/JavaScript/Reference/Global_Objects/Array/toSource": {
+    "modified": "2020-10-15T22:01:02.840Z",
     "contributors": [
-      "flufflepuff91",
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/More_arguments_needed": {
-    "modified": "2020-03-12T19:47:35.019Z",
+  "Web/JavaScript/Reference/Global_Objects/Array/toString": {
+    "modified": "2020-10-15T21:55:07.803Z",
     "contributors": [
-      "schlagi123"
+      "schlagi123",
+      "Arlind"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Negative_repetition_count": {
-    "modified": "2020-03-12T19:47:46.475Z",
+  "Web/JavaScript/Reference/Global_Objects/Array/unshift": {
+    "modified": "2020-10-15T21:47:41.247Z",
     "contributors": [
-      "schlagi123"
+      "schlagi123",
+      "stefanwimmer128"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/No_non-null_object": {
-    "modified": "2020-03-12T19:47:33.684Z",
+  "Web/JavaScript/Reference/Global_Objects/Array/values": {
+    "modified": "2020-10-15T21:47:50.418Z",
     "contributors": [
-      "schlagi123"
+      "schlagi123",
+      "Semnodime"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/No_properties": {
-    "modified": "2020-03-12T19:46:21.338Z",
+  "Web/JavaScript/Reference/Global_Objects/ArrayBuffer": {
+    "modified": "2020-10-15T21:54:09.221Z",
     "contributors": [
       "schlagi123",
-      "timosperisen"
+      "bpaetzold",
+      "Steinweber",
+      "ionree"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/No_variable_name": {
-    "modified": "2020-03-12T19:47:35.139Z",
+  "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/@@species": {
+    "modified": "2020-10-15T22:01:09.595Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Non_configurable_array_element": {
-    "modified": "2020-03-12T19:47:37.860Z",
+  "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/byteLength": {
+    "modified": "2020-10-15T22:01:09.711Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Not_a_codepoint": {
-    "modified": "2020-03-12T19:44:01.592Z",
-    "contributors": [
-      "schlagi123",
-      "akumagamo"
-    ]
-  },
-  "Web/JavaScript/Reference/Fehler/Not_a_constructor": {
-    "modified": "2020-03-12T19:46:54.349Z",
+  "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/isView": {
+    "modified": "2020-10-15T22:01:15.297Z",
     "contributors": [
-      "NiklasMerz",
-      "schlagi123",
-      "klug_mario"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Not_a_function": {
-    "modified": "2020-03-12T19:45:23.396Z",
+  "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/slice": {
+    "modified": "2020-10-15T22:01:09.307Z",
     "contributors": [
-      "flufflepuff91",
-      "schlagi123",
-      "fire-stone"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Not_defined": {
-    "modified": "2020-03-12T19:44:11.129Z",
+  "Web/JavaScript/Reference/Global_Objects/AsyncFunction": {
+    "modified": "2020-10-15T22:01:12.299Z",
     "contributors": [
-      "flufflepuff91",
       "schlagi123",
-      "BennoKieselstein",
-      "Bernd_L",
-      "akumagamo"
+      "fscholz"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Precision_range": {
-    "modified": "2020-03-12T19:44:05.096Z",
+  "Web/JavaScript/Reference/Global_Objects/Atomics": {
+    "modified": "2020-10-15T22:01:14.609Z",
     "contributors": [
-      "schlagi123",
-      "akumagamo"
+      "Cortys",
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Property_access_denied": {
-    "modified": "2020-03-12T19:44:01.071Z",
+  "Web/JavaScript/Reference/Global_Objects/Atomics/add": {
+    "modified": "2020-10-15T22:01:23.490Z",
     "contributors": [
-      "schlagi123",
-      "akumagamo"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Read-only": {
-    "modified": "2020-03-12T19:47:33.685Z",
+  "Web/JavaScript/Reference/Global_Objects/Atomics/and": {
+    "modified": "2020-10-15T22:01:14.178Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Redeclared_parameter": {
-    "modified": "2020-03-12T19:47:37.067Z",
+  "Web/JavaScript/Reference/Global_Objects/Atomics/compareExchange": {
+    "modified": "2020-10-15T22:01:23.524Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Reduce_of_empty_array_with_no_initial_value": {
-    "modified": "2020-03-12T19:47:39.369Z",
+  "Web/JavaScript/Reference/Global_Objects/Atomics/exchange": {
+    "modified": "2020-10-15T22:01:23.804Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Reserved_identifier": {
-    "modified": "2020-03-12T19:47:46.391Z",
+  "Web/JavaScript/Reference/Global_Objects/Atomics/isLockFree": {
+    "modified": "2020-10-15T22:01:23.367Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Resulting_string_too_large": {
-    "modified": "2020-03-12T19:47:46.172Z",
+  "Web/JavaScript/Reference/Global_Objects/Atomics/load": {
+    "modified": "2020-10-15T22:01:23.437Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Stmt_after_return": {
-    "modified": "2020-03-12T19:43:39.489Z",
+  "Web/JavaScript/Reference/Global_Objects/Atomics/or": {
+    "modified": "2020-10-15T22:01:12.332Z",
     "contributors": [
-      "schlagi123",
-      "akumagamo"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Strict_Non_Simple_Params": {
-    "modified": "2020-03-12T19:47:45.620Z",
+  "Web/JavaScript/Reference/Global_Objects/Atomics/store": {
+    "modified": "2020-10-15T22:01:23.350Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Too_much_recursion": {
-    "modified": "2020-03-12T19:43:58.453Z",
+  "Web/JavaScript/Reference/Global_Objects/Atomics/sub": {
+    "modified": "2020-10-15T22:01:23.514Z",
     "contributors": [
-      "schlagi123",
-      "olhaar",
-      "yampus",
-      "julmot",
-      "akumagamo"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Typed_array_invalid_arguments": {
-    "modified": "2020-03-12T19:47:33.971Z",
+  "Web/JavaScript/Reference/Global_Objects/Atomics/wait": {
+    "modified": "2020-10-15T22:01:24.450Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Undeclared_var": {
-    "modified": "2020-03-12T19:47:43.541Z",
+  "Web/JavaScript/Reference/Global_Objects/Atomics/xor": {
+    "modified": "2020-10-15T22:01:13.324Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Undefined_prop": {
-    "modified": "2020-03-12T19:44:10.591Z",
+  "Web/JavaScript/Reference/Global_Objects/Boolean": {
+    "modified": "2020-10-15T21:34:05.047Z",
     "contributors": [
       "schlagi123",
-      "ThomasFe",
-      "akumagamo"
+      "FatihSyrox",
+      "rbarisic"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Unexpected_token": {
-    "modified": "2020-03-12T19:45:02.701Z",
+  "Web/JavaScript/Reference/Global_Objects/Boolean/toSource": {
+    "modified": "2020-10-15T21:45:27.090Z",
     "contributors": [
-      "schlagi123",
-      "albasiba"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Unexpected_type": {
-    "modified": "2020-03-12T19:45:54.249Z",
+  "Web/JavaScript/Reference/Global_Objects/Boolean/toString": {
+    "modified": "2020-10-15T21:45:27.278Z",
     "contributors": [
-      "schlagi123",
-      "thegeg",
-      "SusiHutzler",
-      "fire-stone",
-      "netalp"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Unnamed_function_statement": {
-    "modified": "2020-03-12T19:47:45.907Z",
+  "Web/JavaScript/Reference/Global_Objects/Boolean/valueOf": {
+    "modified": "2020-10-15T21:45:25.930Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Unterminated_string_literal": {
-    "modified": "2020-03-12T19:47:34.534Z",
+  "Web/JavaScript/Reference/Global_Objects/DataView": {
+    "modified": "2020-10-15T21:46:54.170Z",
     "contributors": [
-      "schlagi123"
+      "schlagi123",
+      "fscholz"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/Var_hides_argument": {
-    "modified": "2020-03-12T19:47:33.618Z",
+  "Web/JavaScript/Reference/Global_Objects/DataView/buffer": {
+    "modified": "2020-10-15T21:46:47.193Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/in_operator_no_object": {
-    "modified": "2020-03-12T19:47:34.037Z",
+  "Web/JavaScript/Reference/Global_Objects/DataView/byteLength": {
+    "modified": "2020-10-15T21:47:07.178Z",
     "contributors": [
-      "matthias85",
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/invalid_right_hand_side_instanceof_operand": {
-    "modified": "2020-03-12T19:47:33.003Z",
+  "Web/JavaScript/Reference/Global_Objects/DataView/byteOffset": {
+    "modified": "2020-10-15T21:47:08.642Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Fehler/is_not_iterable": {
-    "modified": "2020-03-12T19:48:02.116Z",
+  "Web/JavaScript/Reference/Global_Objects/DataView/getFloat32": {
+    "modified": "2020-10-15T21:47:06.658Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Functions": {
-    "modified": "2020-10-15T21:32:23.734Z",
+  "Web/JavaScript/Reference/Global_Objects/DataView/getFloat64": {
+    "modified": "2020-10-15T21:47:05.154Z",
     "contributors": [
-      "steevn",
-      "ibiBgOR",
-      "julianpollmann",
-      "schlagi123",
-      "P0lip"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Functions/Default_parameters": {
-    "modified": "2020-10-15T21:51:29.730Z",
+  "Web/JavaScript/Reference/Global_Objects/DataView/getInt16": {
+    "modified": "2020-10-15T21:47:04.973Z",
     "contributors": [
-      "schlagi123",
-      "Eiknheimer",
-      "serv-inc",
-      "StevenS77",
-      "kdex",
-      "leonschwanitz"
+      "Univream",
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Functions/Methoden_Definitionen": {
-    "modified": "2020-03-12T19:40:25.737Z",
+  "Web/JavaScript/Reference/Global_Objects/DataView/getInt32": {
+    "modified": "2020-10-15T21:47:05.070Z",
     "contributors": [
-      "kdex",
-      "schlagi123",
-      "siggi-heltau"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Functions/Pfeilfunktionen": {
-    "modified": "2020-10-15T21:50:51.602Z",
+  "Web/JavaScript/Reference/Global_Objects/DataView/getInt8": {
+    "modified": "2020-10-15T21:47:04.948Z",
     "contributors": [
-      "schlagi123",
-      "Sixl-Daniel",
-      "kdex",
-      "sja",
-      "Eiknheimer",
-      "GuidoSchweizer",
-      "mhash17"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Functions/arguments": {
-    "modified": "2020-10-15T21:32:34.952Z",
+  "Web/JavaScript/Reference/Global_Objects/DataView/getUint16": {
+    "modified": "2020-10-15T21:47:05.220Z",
     "contributors": [
-      "tonitone",
-      "StefKrie",
-      "haveyaseen",
-      "schlagi123",
-      "niorad",
-      "a-ctor",
-      "fscholz"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Functions/arguments/@@iterator": {
-    "modified": "2020-10-15T22:04:50.730Z",
+  "Web/JavaScript/Reference/Global_Objects/DataView/getUint32": {
+    "modified": "2020-10-15T21:47:05.094Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Functions/arguments/callee": {
-    "modified": "2020-10-15T21:32:40.831Z",
+  "Web/JavaScript/Reference/Global_Objects/DataView/getUint8": {
+    "modified": "2020-10-15T21:47:05.304Z",
     "contributors": [
-      "schlagi123",
-      "fscholz"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Functions/arguments/length": {
-    "modified": "2020-10-15T21:32:35.168Z",
+  "Web/JavaScript/Reference/Global_Objects/DataView/setFloat32": {
+    "modified": "2020-10-15T21:47:06.918Z",
     "contributors": [
-      "schlagi123",
-      "fscholz"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Functions/get": {
-    "modified": "2020-10-15T22:04:49.671Z",
+  "Web/JavaScript/Reference/Global_Objects/DataView/setFloat64": {
+    "modified": "2020-10-15T21:47:05.889Z",
     "contributors": [
-      "schlagi123",
-      "JPeer264"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Functions/rest_parameter": {
-    "modified": "2020-10-15T21:56:07.951Z",
+  "Web/JavaScript/Reference/Global_Objects/DataView/setInt16": {
+    "modified": "2020-10-15T21:47:06.130Z",
     "contributors": [
-      "sonicdoe",
-      "schlagi123",
-      "Simmarith"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Functions/set": {
-    "modified": "2020-10-15T22:04:49.802Z",
+  "Web/JavaScript/Reference/Global_Objects/DataView/setInt32": {
+    "modified": "2020-10-15T21:47:06.080Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects": {
-    "modified": "2020-03-12T19:38:16.835Z",
-    "contributors": [
-      "jazevo",
-      "schlagi123",
-      "Deppenapostroph",
-      "SphinxKnight",
-      "timbernasley",
-      "fscholz",
-      "ziyunfei"
-    ]
-  },
-  "Web/JavaScript/Reference/Global_Objects/Array": {
-    "modified": "2020-10-15T21:25:30.625Z",
+  "Web/JavaScript/Reference/Global_Objects/DataView/setInt8": {
+    "modified": "2020-10-15T21:47:06.022Z",
     "contributors": [
-      "grumpy-cat",
-      "SebinNyshkim",
-      "schlagi123",
-      "henje",
-      "JayEn84",
-      "Eiknheimer",
-      "StevenS77",
-      "kdex",
-      "antonharald",
-      "fscholz",
-      "Airblader"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Array/@@iterator": {
-    "modified": "2020-10-15T22:01:02.252Z",
+  "Web/JavaScript/Reference/Global_Objects/DataView/setUint16": {
+    "modified": "2020-10-15T21:47:06.573Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Array/@@species": {
-    "modified": "2020-10-15T22:01:02.767Z",
+  "Web/JavaScript/Reference/Global_Objects/DataView/setUint32": {
+    "modified": "2020-10-15T21:47:07.408Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Array/@@unscopables": {
-    "modified": "2020-10-15T22:01:03.125Z",
+  "Web/JavaScript/Reference/Global_Objects/DataView/setUint8": {
+    "modified": "2020-10-15T21:47:06.396Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Array/Prototypen": {
-    "modified": "2020-10-15T21:52:42.525Z",
+  "Web/JavaScript/Reference/Global_Objects/Date": {
+    "modified": "2020-10-15T21:26:50.406Z",
     "contributors": [
-      "Stoeoeoe",
+      "Coding-Boss",
+      "pop1989bb",
+      "1siegi",
+      "Streamities",
+      "herbmaier",
       "schlagi123",
-      "StevenS77"
+      "tweini",
+      "mreu",
+      "JohannesStadler",
+      "cedisupersoccer",
+      "xhronos",
+      "decatur",
+      "fscholz",
+      "teoli",
+      "IchMoritz"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Array/Reduce": {
-    "modified": "2020-10-15T21:52:43.889Z",
+  "Web/JavaScript/Reference/Global_Objects/Date/@@toPrimitive": {
+    "modified": "2020-10-15T21:45:49.430Z",
     "contributors": [
-      "duckymirror",
-      "isnot2bad",
-      "NiklasMerz",
-      "schlagi123",
-      "molerat619",
-      "LeisureLarry",
-      "sol-idsnake",
-      "istvank",
-      "StevenS77"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Array/ReduceRight": {
-    "modified": "2020-10-15T21:52:47.826Z",
+  "Web/JavaScript/Reference/Global_Objects/Date/UTC": {
+    "modified": "2020-10-15T21:46:03.247Z",
     "contributors": [
+      "herbmaier",
       "schlagi123",
-      "StevenS77"
+      "jaller94"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Array/concat": {
-    "modified": "2020-10-15T21:34:08.129Z",
+  "Web/JavaScript/Reference/Global_Objects/Date/getDay": {
+    "modified": "2020-10-15T21:45:27.743Z",
     "contributors": [
-      "schlagi123",
-      "ghost23",
-      "pecoes",
-      "oliver-j",
-      "FelixSebastianLange"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Array/copyWithin": {
-    "modified": "2020-10-15T21:38:19.886Z",
+  "Web/JavaScript/Reference/Global_Objects/Date/getFullYear": {
+    "modified": "2020-10-15T21:45:26.276Z",
     "contributors": [
-      "schlagi123",
-      "GR_Fuchs",
-      "Flummi",
-      "oliver-j"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Array/entries": {
-    "modified": "2020-10-15T21:38:18.243Z",
+  "Web/JavaScript/Reference/Global_Objects/Date/getHours": {
+    "modified": "2020-10-15T21:45:25.193Z",
     "contributors": [
-      "Tharkun86",
-      "schlagi123",
-      "oliver-j",
-      "AndyTheDandy"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Array/every": {
-    "modified": "2020-10-15T21:47:07.289Z",
+  "Web/JavaScript/Reference/Global_Objects/Date/getMilliseconds": {
+    "modified": "2020-10-15T21:45:26.861Z",
     "contributors": [
-      "schlagi123",
-      "orion-z",
-      "longstone"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Array/fill": {
-    "modified": "2020-10-15T21:38:18.545Z",
+  "Web/JavaScript/Reference/Global_Objects/Date/getMinutes": {
+    "modified": "2020-10-15T21:45:26.279Z",
     "contributors": [
-      "schlagi123",
-      "Andreas_Dyballa",
-      "oliver-j",
-      "AndyTheDandy"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Array/filter": {
-    "modified": "2020-12-01T06:41:38.166Z",
+  "Web/JavaScript/Reference/Global_Objects/Date/getMonth": {
+    "modified": "2020-10-15T21:45:28.693Z",
     "contributors": [
-      "Gismo1337",
-      "caca123-nz",
-      "SebinNyshkim",
-      "michelgotta",
-      "schlagi123",
-      "xdevs23",
-      "midnightmare",
-      "oliver-j",
-      "occcy"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Array/find": {
-    "modified": "2020-10-15T21:34:07.173Z",
+  "Web/JavaScript/Reference/Global_Objects/Date/getSeconds": {
+    "modified": "2020-10-15T21:45:29.298Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/getTime": {
+    "modified": "2020-10-15T21:45:29.479Z",
     "contributors": [
-      "SebinNyshkim",
       "schlagi123",
-      "mrkosim",
-      "psychotammi",
-      "mreu",
-      "db6edr",
-      "oliver-j",
-      "MelanieVeigl"
+      "davidwittenbrink"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Array/findIndex": {
-    "modified": "2020-10-15T21:50:45.238Z",
+  "Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset": {
+    "modified": "2020-10-15T21:45:28.937Z",
     "contributors": [
-      "SebinNyshkim",
       "schlagi123",
-      "psychotammi",
-      "sosnet",
-      "labcode-de"
+      "douira",
+      "ozcelebi"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Array/flat": {
-    "modified": "2020-10-15T22:01:54.920Z",
+  "Web/JavaScript/Reference/Global_Objects/Date/getUTCDate": {
+    "modified": "2020-10-15T21:45:20.226Z",
     "contributors": [
-      "fscholz",
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Array/flatMap": {
-    "modified": "2020-10-15T22:02:19.086Z",
+  "Web/JavaScript/Reference/Global_Objects/Date/getUTCDay": {
+    "modified": "2020-10-15T21:45:21.504Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Array/forEach": {
-    "modified": "2020-10-15T21:31:37.392Z",
+  "Web/JavaScript/Reference/Global_Objects/Date/getUTCFullYear": {
+    "modified": "2020-10-15T21:45:23.446Z",
     "contributors": [
-      "SebinNyshkim",
-      "schlagi123",
-      "Martin.Kraft",
-      "Anonymous",
-      "StevenS77",
-      "L15t3",
-      "langco",
-      "sudave",
-      "olastor"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Array/from": {
-    "modified": "2020-10-15T21:38:18.396Z",
+  "Web/JavaScript/Reference/Global_Objects/Date/getUTCHours": {
+    "modified": "2020-10-15T21:45:19.205Z",
     "contributors": [
-      "manfredkogler",
-      "schlagi123",
-      "Maugo",
-      "odysseuscm",
-      "kdex",
-      "oliver-j",
-      "stehefan"
+      "dotperinch",
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Array/includes": {
-    "modified": "2020-10-15T21:39:40.373Z",
+  "Web/JavaScript/Reference/Global_Objects/Date/getUTCMilliseconds": {
+    "modified": "2020-10-15T21:45:30.061Z",
     "contributors": [
-      "oliver-gramberg",
-      "MichelBahl",
-      "mikakruschel",
-      "schlagi123",
-      "adabru"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Array/indexOf": {
-    "modified": "2020-10-15T21:39:59.907Z",
+  "Web/JavaScript/Reference/Global_Objects/Date/getUTCMinutes": {
+    "modified": "2020-10-15T21:45:24.536Z",
     "contributors": [
-      "SebinNyshkim",
-      "schlagi123",
-      "Athyrion"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Array/isArray": {
-    "modified": "2020-10-15T21:26:02.361Z",
+  "Web/JavaScript/Reference/Global_Objects/Date/getUTCMonth": {
+    "modified": "2020-10-15T21:45:18.574Z",
     "contributors": [
       "schlagi123",
-      "oliver-j",
-      "fscholz",
-      "yacchatta"
+      "Artenuvielle"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Array/join": {
-    "modified": "2020-10-15T21:32:45.888Z",
+  "Web/JavaScript/Reference/Global_Objects/Date/getUTCSeconds": {
+    "modified": "2020-10-15T21:45:22.596Z",
     "contributors": [
-      "SebinNyshkim",
-      "timlg07",
       "schlagi123",
-      "wattafot",
-      "Saschlong",
-      "mieth"
+      "HendrikRunte"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Array/keys": {
-    "modified": "2020-10-15T21:55:10.261Z",
+  "Web/JavaScript/Reference/Global_Objects/Date/getYear": {
+    "modified": "2020-10-15T21:45:31.158Z",
     "contributors": [
-      "jfi",
-      "schlagi123",
-      "Arlind"
+      "danieldiekmeier",
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf": {
-    "modified": "2020-10-15T21:55:15.610Z",
+  "Web/JavaScript/Reference/Global_Objects/Date/now": {
+    "modified": "2020-10-15T21:29:19.444Z",
     "contributors": [
+      "Khazl",
       "schlagi123",
-      "Arlind"
+      "J000S",
+      "gurix",
+      "fscholz",
+      "LOK"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Array/length": {
-    "modified": "2020-10-15T21:38:16.165Z",
-    "contributors": [
-      "jfi",
-      "schlagi123",
-      "AndyTheDandy"
-    ]
-  },
-  "Web/JavaScript/Reference/Global_Objects/Array/map": {
-    "modified": "2020-10-15T21:32:29.489Z",
-    "contributors": [
-      "mwiehl",
-      "felix_geenen",
-      "SebinNyshkim",
-      "MerlindlH",
-      "schlagi123",
-      "kdex",
-      "FNGR2911",
-      "annnoo",
-      "StevenS77",
-      "schellmax",
-      "justb81",
-      "mexn",
-      "leMaik",
-      "derhagen",
-      "Arminmsg"
-    ]
-  },
-  "Web/JavaScript/Reference/Global_Objects/Array/of": {
-    "modified": "2020-10-15T21:38:18.269Z",
-    "contributors": [
-      "schlagi123",
-      "dennissterzenbach",
-      "almai",
-      "mormahr",
-      "oliver-j"
-    ]
-  },
-  "Web/JavaScript/Reference/Global_Objects/Array/pop": {
-    "modified": "2020-10-15T21:25:28.942Z",
+  "Web/JavaScript/Reference/Global_Objects/Date/parse": {
+    "modified": "2020-10-15T21:30:28.964Z",
     "contributors": [
+      "BuZZ-T",
       "schlagi123",
-      "maoberlehner",
-      "fscholz",
-      "Airblader"
+      "PapaBravo",
+      "GottZ",
+      "TheSuspiciousWombat",
+      "MrMartiniMo",
+      "danieldiekmeier",
+      "Drasive"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Array/push": {
-    "modified": "2020-10-15T21:25:28.923Z",
+  "Web/JavaScript/Reference/Global_Objects/Date/setDate": {
+    "modified": "2020-10-15T21:45:35.204Z",
     "contributors": [
-      "SebinNyshkim",
-      "schlagi123",
-      "k7sleeper",
-      "marzepani",
-      "yacchatta",
-      "Arminmsg",
-      "fscholz",
-      "Airblader"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Array/reverse": {
-    "modified": "2020-10-15T21:25:28.957Z",
+  "Web/JavaScript/Reference/Global_Objects/Date/setFullYear": {
+    "modified": "2020-10-15T21:45:37.723Z",
     "contributors": [
+      "dritter",
       "schlagi123",
-      "cepharum",
-      "vog",
-      "mieth",
-      "fscholz",
-      "Airblader"
+      "derhofbauer"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Array/shift": {
-    "modified": "2020-10-15T21:25:29.071Z",
+  "Web/JavaScript/Reference/Global_Objects/Date/setHours": {
+    "modified": "2020-10-15T21:45:35.032Z",
     "contributors": [
-      "schlagi123",
-      "OlegBr",
-      "HendrikRunte",
-      "fscholz",
-      "Airblader"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Array/slice": {
-    "modified": "2020-10-15T21:38:17.986Z",
+  "Web/JavaScript/Reference/Global_Objects/Date/setMilliseconds": {
+    "modified": "2020-10-15T21:45:36.061Z",
     "contributors": [
-      "DATADEER",
-      "schlagi123",
-      "wiegels",
-      "OlegBr",
-      "oliver-j"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Array/some": {
-    "modified": "2020-10-15T21:51:10.415Z",
+  "Web/JavaScript/Reference/Global_Objects/Date/setMinutes": {
+    "modified": "2020-10-15T21:45:36.748Z",
     "contributors": [
-      "schlagi123",
-      "Jumace",
-      "ddBenny",
-      "MaxKr",
-      "StevenS77",
-      "ThorstenHans"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Array/sort": {
-    "modified": "2020-10-15T21:50:45.209Z",
+  "Web/JavaScript/Reference/Global_Objects/Date/setMonth": {
+    "modified": "2020-10-15T21:45:38.160Z",
     "contributors": [
-      "SebinNyshkim",
-      "schlagi123",
-      "xerox",
-      "Huargh"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Array/splice": {
-    "modified": "2020-10-15T21:30:49.791Z",
+  "Web/JavaScript/Reference/Global_Objects/Date/setSeconds": {
+    "modified": "2020-10-15T21:45:36.906Z",
     "contributors": [
-      "montapro",
-      "Huegelkoenig",
-      "SebinNyshkim",
-      "leon-jasper",
-      "GateKeeper",
-      "Horitsu",
-      "Breaker222",
-      "schlagi123",
-      "ndresx",
-      "n4nos",
-      "valentinmanthei",
-      "Andorxor",
-      "rillke",
-      "cepharum",
-      "TMR",
-      "BlaM",
-      "shentschel",
-      "casarock",
-      "depoulo",
-      "rhulha"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Array/toLocaleString": {
-    "modified": "2020-10-15T21:59:23.526Z",
+  "Web/JavaScript/Reference/Global_Objects/Date/setTime": {
+    "modified": "2020-10-15T21:33:01.056Z",
     "contributors": [
       "schlagi123",
-      "SphinxKnight",
-      "vssn"
+      "jhnnslschnr"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Array/toSource": {
-    "modified": "2020-10-15T22:01:02.840Z",
+  "Web/JavaScript/Reference/Global_Objects/Date/setUTCDate": {
+    "modified": "2020-10-15T21:45:41.852Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Array/toString": {
-    "modified": "2020-10-15T21:55:07.803Z",
+  "Web/JavaScript/Reference/Global_Objects/Date/setUTCFullYear": {
+    "modified": "2020-10-15T21:45:48.630Z",
     "contributors": [
-      "schlagi123",
-      "Arlind"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Array/unshift": {
-    "modified": "2020-10-15T21:47:41.247Z",
+  "Web/JavaScript/Reference/Global_Objects/Date/setUTCHours": {
+    "modified": "2020-10-15T21:45:48.619Z",
     "contributors": [
       "schlagi123",
-      "stefanwimmer128"
+      "stephtr"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Array/values": {
-    "modified": "2020-10-15T21:47:50.418Z",
+  "Web/JavaScript/Reference/Global_Objects/Date/setUTCMilliseconds": {
+    "modified": "2020-10-15T21:45:41.573Z",
     "contributors": [
-      "schlagi123",
-      "Semnodime"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/ArrayBuffer": {
-    "modified": "2020-10-15T21:54:09.221Z",
+  "Web/JavaScript/Reference/Global_Objects/Date/setUTCMinutes": {
+    "modified": "2020-10-15T21:45:41.649Z",
     "contributors": [
-      "schlagi123",
-      "bpaetzold",
-      "Steinweber",
-      "ionree"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/@@species": {
-    "modified": "2020-10-15T22:01:09.595Z",
+  "Web/JavaScript/Reference/Global_Objects/Date/setUTCMonth": {
+    "modified": "2020-10-15T21:45:41.116Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/byteLength": {
-    "modified": "2020-10-15T22:01:09.711Z",
+  "Web/JavaScript/Reference/Global_Objects/Date/setUTCSeconds": {
+    "modified": "2020-10-15T21:45:41.484Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/isView": {
-    "modified": "2020-10-15T22:01:15.297Z",
+  "Web/JavaScript/Reference/Global_Objects/Date/setYear": {
+    "modified": "2020-10-15T21:45:41.405Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype": {
-    "modified": "2020-10-15T22:01:15.339Z",
+  "Web/JavaScript/Reference/Global_Objects/Date/toDateString": {
+    "modified": "2020-10-15T21:45:49.664Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/slice": {
-    "modified": "2020-10-15T22:01:09.307Z",
+  "Web/JavaScript/Reference/Global_Objects/Date/toGMTString": {
+    "modified": "2020-10-15T21:45:51.459Z",
     "contributors": [
-      "schlagi123"
+      "schlagi123",
+      "bentzibentz"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/AsyncFunction": {
-    "modified": "2020-10-15T22:01:12.299Z",
+  "Web/JavaScript/Reference/Global_Objects/Date/toISOString": {
+    "modified": "2020-10-15T21:45:50.222Z",
     "contributors": [
+      "NiklasMerz",
+      "schnellboot",
+      "botic",
       "schlagi123",
-      "fscholz"
+      "WikiMarc"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype": {
-    "modified": "2020-10-15T22:01:09.829Z",
+  "Web/JavaScript/Reference/Global_Objects/Date/toJSON": {
+    "modified": "2020-10-15T21:42:32.875Z",
     "contributors": [
-      "schlagi123"
+      "schlagi123",
+      "Chips100"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Atomics": {
-    "modified": "2020-10-15T22:01:14.609Z",
+  "Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString": {
+    "modified": "2020-10-15T21:45:58.511Z",
     "contributors": [
-      "Cortys",
-      "schlagi123"
+      "schlagi123",
+      "gunnarbittersmann"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Atomics/add": {
-    "modified": "2020-10-15T22:01:23.490Z",
+  "Web/JavaScript/Reference/Global_Objects/Date/toLocaleString": {
+    "modified": "2020-10-15T21:45:59.947Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Atomics/and": {
-    "modified": "2020-10-15T22:01:14.178Z",
+  "Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString": {
+    "modified": "2020-10-15T21:46:02.185Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Atomics/compareExchange": {
-    "modified": "2020-10-15T22:01:23.524Z",
+  "Web/JavaScript/Reference/Global_Objects/Date/toSource": {
+    "modified": "2020-10-15T21:45:56.411Z",
     "contributors": [
+      "teoli",
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Atomics/exchange": {
-    "modified": "2020-10-15T22:01:23.804Z",
+  "Web/JavaScript/Reference/Global_Objects/Date/toString": {
+    "modified": "2020-10-15T21:45:57.842Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Atomics/isLockFree": {
-    "modified": "2020-10-15T22:01:23.367Z",
+  "Web/JavaScript/Reference/Global_Objects/Date/toTimeString": {
+    "modified": "2020-10-15T21:45:50.302Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Atomics/load": {
-    "modified": "2020-10-15T22:01:23.437Z",
+  "Web/JavaScript/Reference/Global_Objects/Date/toUTCString": {
+    "modified": "2020-10-15T21:45:55.020Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Atomics/or": {
-    "modified": "2020-10-15T22:01:12.332Z",
+  "Web/JavaScript/Reference/Global_Objects/Date/valueOf": {
+    "modified": "2020-10-15T21:45:55.002Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Atomics/store": {
-    "modified": "2020-10-15T22:01:23.350Z",
+  "Web/JavaScript/Reference/Global_Objects/Error": {
+    "modified": "2020-10-15T21:46:20.812Z",
     "contributors": [
-      "schlagi123"
+      "Flur3x",
+      "nnals",
+      "schlagi123",
+      "jens1o",
+      "shaedrich",
+      "andreasf",
+      "AlexanderFradiani"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Atomics/sub": {
-    "modified": "2020-10-15T22:01:23.514Z",
+  "Web/JavaScript/Reference/Global_Objects/Error/Stack": {
+    "modified": "2020-10-15T21:48:37.021Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Atomics/wait": {
-    "modified": "2020-10-15T22:01:24.450Z",
+  "Web/JavaScript/Reference/Global_Objects/Error/columnNumber": {
+    "modified": "2020-10-15T21:46:22.573Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Atomics/wake": {
-    "modified": "2020-10-15T22:01:24.441Z",
+  "Web/JavaScript/Reference/Global_Objects/Error/fileName": {
+    "modified": "2020-10-15T21:46:29.467Z",
     "contributors": [
-      "Cortys",
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Atomics/xor": {
-    "modified": "2020-10-15T22:01:13.324Z",
+  "Web/JavaScript/Reference/Global_Objects/Error/lineNumber": {
+    "modified": "2020-10-15T21:46:24.762Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Boolean": {
-    "modified": "2020-10-15T21:34:05.047Z",
-    "contributors": [
-      "schlagi123",
-      "FatihSyrox",
-      "rbarisic"
-    ]
-  },
-  "Web/JavaScript/Reference/Global_Objects/Boolean/prototype": {
-    "modified": "2020-10-15T21:45:26.885Z",
+  "Web/JavaScript/Reference/Global_Objects/Error/message": {
+    "modified": "2020-10-15T21:46:22.605Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Boolean/toSource": {
-    "modified": "2020-10-15T21:45:27.090Z",
+  "Web/JavaScript/Reference/Global_Objects/Error/name": {
+    "modified": "2020-10-15T21:46:26.394Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Boolean/toString": {
-    "modified": "2020-10-15T21:45:27.278Z",
+  "Web/JavaScript/Reference/Global_Objects/Error/toSource": {
+    "modified": "2020-10-15T21:46:53.703Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Boolean/valueOf": {
-    "modified": "2020-10-15T21:45:25.930Z",
+  "Web/JavaScript/Reference/Global_Objects/Error/toString": {
+    "modified": "2020-10-15T21:46:20.003Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/DataView": {
-    "modified": "2020-10-15T21:46:54.170Z",
+  "Web/JavaScript/Reference/Global_Objects/EvalError": {
+    "modified": "2020-10-15T22:01:27.828Z",
     "contributors": [
       "schlagi123",
       "fscholz"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/DataView/buffer": {
-    "modified": "2020-10-15T21:46:47.193Z",
+  "Web/JavaScript/Reference/Global_Objects/Float32Array": {
+    "modified": "2020-10-15T22:01:33.350Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/DataView/byteLength": {
-    "modified": "2020-10-15T21:47:07.178Z",
+  "Web/JavaScript/Reference/Global_Objects/Float64Array": {
+    "modified": "2020-10-15T22:01:34.687Z",
     "contributors": [
+      "pastparty",
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/DataView/byteOffset": {
-    "modified": "2020-10-15T21:47:08.642Z",
+  "Web/JavaScript/Reference/Global_Objects/Function": {
+    "modified": "2020-10-15T21:30:33.103Z",
     "contributors": [
-      "schlagi123"
+      "woiddale",
+      "schlagi123",
+      "TDesjardins",
+      "StevenS77",
+      "Mingun"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/DataView/getFloat32": {
-    "modified": "2020-10-15T21:47:06.658Z",
+  "Web/JavaScript/Reference/Global_Objects/Function/apply": {
+    "modified": "2020-10-15T21:47:39.222Z",
     "contributors": [
-      "schlagi123"
+      "schlagi123",
+      "fscholz"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/DataView/getFloat64": {
-    "modified": "2020-10-15T21:47:05.154Z",
+  "Web/JavaScript/Reference/Global_Objects/Function/arguments": {
+    "modified": "2020-10-15T22:01:34.868Z",
     "contributors": [
+      "rossler123",
+      "trollkotze",
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/DataView/getInt16": {
-    "modified": "2020-10-15T21:47:04.973Z",
+  "Web/JavaScript/Reference/Global_Objects/Function/bind": {
+    "modified": "2020-10-15T21:37:23.019Z",
     "contributors": [
-      "Univream",
-      "schlagi123"
+      "axelrindle",
+      "chikovanreuden",
+      "rendner",
+      "matz3",
+      "schlagi123",
+      "Leitschiff",
+      "roman.seidelsohn",
+      "sepastian"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/DataView/getInt32": {
-    "modified": "2020-10-15T21:47:05.070Z",
+  "Web/JavaScript/Reference/Global_Objects/Function/call": {
+    "modified": "2020-10-15T21:30:32.549Z",
     "contributors": [
-      "schlagi123"
+      "ffriedl89",
+      "alexander-heimbuch",
+      "schlagi123",
+      "Oekel",
+      "Abro",
+      "haryl",
+      "loki",
+      "nelf"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/DataView/getInt8": {
-    "modified": "2020-10-15T21:47:04.948Z",
+  "Web/JavaScript/Reference/Global_Objects/Function/caller": {
+    "modified": "2020-10-15T22:01:48.453Z",
     "contributors": [
+      "buschco",
+      "Obiwahn",
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/DataView/getUint16": {
-    "modified": "2020-10-15T21:47:05.220Z",
+  "Web/JavaScript/Reference/Global_Objects/Function/displayName": {
+    "modified": "2020-10-15T22:01:52.215Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/DataView/getUint32": {
-    "modified": "2020-10-15T21:47:05.094Z",
+  "Web/JavaScript/Reference/Global_Objects/Function/length": {
+    "modified": "2020-10-15T21:34:09.689Z",
     "contributors": [
-      "schlagi123"
+      "schlagi123",
+      "Eiknheimer",
+      "timoweiss"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/DataView/getUint8": {
-    "modified": "2020-10-15T21:47:05.304Z",
+  "Web/JavaScript/Reference/Global_Objects/Function/name": {
+    "modified": "2020-10-15T21:37:34.115Z",
     "contributors": [
-      "schlagi123"
+      "BoyTheBoy",
+      "schlagi123",
+      "Eiknheimer",
+      "MoritzKn",
+      "DavidVollmers"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/DataView/prototype": {
-    "modified": "2020-10-15T21:46:53.689Z",
+  "Web/JavaScript/Reference/Global_Objects/Function/toSource": {
+    "modified": "2020-10-15T22:01:47.277Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/DataView/setFloat32": {
-    "modified": "2020-10-15T21:47:06.918Z",
+  "Web/JavaScript/Reference/Global_Objects/Function/toString": {
+    "modified": "2020-10-15T22:01:46.451Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/DataView/setFloat64": {
-    "modified": "2020-10-15T21:47:05.889Z",
+  "Web/JavaScript/Reference/Global_Objects/Generator": {
+    "modified": "2020-10-15T22:01:57.503Z",
     "contributors": [
-      "schlagi123"
+      "schlagi123",
+      "fscholz"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/DataView/setInt16": {
-    "modified": "2020-10-15T21:47:06.130Z",
+  "Web/JavaScript/Reference/Global_Objects/Generator/next": {
+    "modified": "2020-10-15T22:01:55.076Z",
     "contributors": [
+      "GarfieldKlon",
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/DataView/setInt32": {
-    "modified": "2020-10-15T21:47:06.080Z",
+  "Web/JavaScript/Reference/Global_Objects/Generator/return": {
+    "modified": "2020-10-15T22:01:56.757Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/DataView/setInt8": {
-    "modified": "2020-10-15T21:47:06.022Z",
+  "Web/JavaScript/Reference/Global_Objects/Generator/throw": {
+    "modified": "2020-10-15T22:01:58.175Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/DataView/setUint16": {
-    "modified": "2020-10-15T21:47:06.573Z",
+  "Web/JavaScript/Reference/Global_Objects/GeneratorFunction": {
+    "modified": "2020-10-15T22:02:04.667Z",
     "contributors": [
-      "schlagi123"
+      "schlagi123",
+      "fscholz"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/DataView/setUint32": {
-    "modified": "2020-10-15T21:47:07.408Z",
+  "Web/JavaScript/Reference/Global_Objects/Infinity": {
+    "modified": "2020-10-15T21:32:07.008Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/DataView/setUint8": {
-    "modified": "2020-10-15T21:47:06.396Z",
+  "Web/JavaScript/Reference/Global_Objects/Int16Array": {
+    "modified": "2020-10-15T22:01:32.923Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Date": {
-    "modified": "2020-10-15T21:26:50.406Z",
+  "Web/JavaScript/Reference/Global_Objects/Int32Array": {
+    "modified": "2020-10-15T22:01:33.440Z",
     "contributors": [
-      "Coding-Boss",
-      "pop1989bb",
-      "1siegi",
-      "Streamities",
-      "herbmaier",
-      "schlagi123",
-      "tweini",
-      "mreu",
-      "JohannesStadler",
-      "cedisupersoccer",
-      "xhronos",
-      "decatur",
-      "fscholz",
-      "teoli",
-      "IchMoritz"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Date/@@toPrimitive": {
-    "modified": "2020-10-15T21:45:49.430Z",
+  "Web/JavaScript/Reference/Global_Objects/Int8Array": {
+    "modified": "2020-10-15T22:01:34.152Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Date/UTC": {
-    "modified": "2020-10-15T21:46:03.247Z",
+  "Web/JavaScript/Reference/Global_Objects/InternalError": {
+    "modified": "2020-10-15T22:02:06.176Z",
     "contributors": [
-      "herbmaier",
       "schlagi123",
-      "jaller94"
+      "fscholz"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Date/getDay": {
-    "modified": "2020-10-15T21:45:27.743Z",
+  "Web/JavaScript/Reference/Global_Objects/Intl": {
+    "modified": "2020-10-15T22:02:07.140Z",
     "contributors": [
+      "TorstenDittmann",
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Date/getFullYear": {
-    "modified": "2020-10-15T21:45:26.276Z",
+  "Web/JavaScript/Reference/Global_Objects/Intl/Collator": {
+    "modified": "2020-10-15T22:02:08.820Z",
     "contributors": [
-      "schlagi123"
+      "fscholz",
+      "schlagi123",
+      "wbamberg"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Date/getHours": {
-    "modified": "2020-10-15T21:45:25.193Z",
+  "Web/JavaScript/Reference/Global_Objects/Intl/Collator/compare": {
+    "modified": "2020-10-15T22:02:10.077Z",
     "contributors": [
+      "fscholz",
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Date/getMilliseconds": {
-    "modified": "2020-10-15T21:45:26.861Z",
+  "Web/JavaScript/Reference/Global_Objects/Intl/Collator/resolvedOptions": {
+    "modified": "2020-10-15T22:02:19.729Z",
     "contributors": [
+      "fscholz",
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Date/getMinutes": {
-    "modified": "2020-10-15T21:45:26.279Z",
+  "Web/JavaScript/Reference/Global_Objects/Intl/Collator/supportedLocalesOf": {
+    "modified": "2020-10-15T22:02:18.509Z",
     "contributors": [
+      "fscholz",
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Date/getMonth": {
-    "modified": "2020-10-15T21:45:28.693Z",
+  "Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat": {
+    "modified": "2020-10-15T21:45:59.649Z",
     "contributors": [
+      "fscholz",
+      "gunnarbittersmann",
+      "BuZZ-T",
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Date/getSeconds": {
-    "modified": "2020-10-15T21:45:29.298Z",
+  "Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format": {
+    "modified": "2020-10-15T22:02:19.143Z",
     "contributors": [
+      "fscholz",
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Date/getTime": {
-    "modified": "2020-10-15T21:45:29.479Z",
-    "contributors": [
-      "schlagi123",
-      "davidwittenbrink"
-    ]
-  },
-  "Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset": {
-    "modified": "2020-10-15T21:45:28.937Z",
-    "contributors": [
-      "schlagi123",
-      "douira",
-      "ozcelebi"
-    ]
-  },
-  "Web/JavaScript/Reference/Global_Objects/Date/getUTCDate": {
-    "modified": "2020-10-15T21:45:20.226Z",
+  "Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatToParts": {
+    "modified": "2020-10-15T22:02:19.130Z",
     "contributors": [
+      "fscholz",
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Date/getUTCDay": {
-    "modified": "2020-10-15T21:45:21.504Z",
+  "Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/resolvedOptions": {
+    "modified": "2020-10-15T22:03:23.205Z",
     "contributors": [
+      "fscholz",
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Date/getUTCFullYear": {
-    "modified": "2020-10-15T21:45:23.446Z",
+  "Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/supportedLocalesOf": {
+    "modified": "2020-10-15T22:02:43.009Z",
     "contributors": [
+      "fscholz",
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Date/getUTCHours": {
-    "modified": "2020-10-15T21:45:19.205Z",
+  "Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat": {
+    "modified": "2020-10-15T21:45:21.440Z",
     "contributors": [
-      "dotperinch",
-      "schlagi123"
+      "fscholz",
+      "nw520",
+      "schlagi123",
+      "sdeitmer"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Date/getUTCMilliseconds": {
-    "modified": "2020-10-15T21:45:30.061Z",
+  "Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/format": {
+    "modified": "2020-10-15T22:03:25.553Z",
     "contributors": [
+      "fscholz",
+      "apfelbox",
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Date/getUTCMinutes": {
-    "modified": "2020-10-15T21:45:24.536Z",
+  "Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/supportedLocalesOf": {
+    "modified": "2020-10-15T22:02:57.962Z",
     "contributors": [
+      "fscholz",
+      "SebastianSpeitel",
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Date/getUTCMonth": {
-    "modified": "2020-10-15T21:45:18.574Z",
+  "Web/JavaScript/Reference/Global_Objects/Intl/PluralRules": {
+    "modified": "2020-10-15T22:02:58.225Z",
     "contributors": [
-      "schlagi123",
-      "Artenuvielle"
+      "fscholz"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Date/getUTCSeconds": {
-    "modified": "2020-10-15T21:45:22.596Z",
+  "Web/JavaScript/Reference/Global_Objects/Intl/PluralRules/supportedLocalesOf": {
+    "modified": "2020-10-15T22:02:59.909Z",
     "contributors": [
-      "schlagi123",
-      "HendrikRunte"
+      "fscholz",
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Date/getYear": {
-    "modified": "2020-10-15T21:45:31.158Z",
+  "Web/JavaScript/Reference/Global_Objects/Intl/getCanonicalLocales": {
+    "modified": "2020-10-15T22:02:08.681Z",
     "contributors": [
-      "danieldiekmeier",
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Date/now": {
-    "modified": "2020-10-15T21:29:19.444Z",
+  "Web/JavaScript/Reference/Global_Objects/JSON": {
+    "modified": "2020-10-15T21:34:42.140Z",
     "contributors": [
-      "Khazl",
       "schlagi123",
-      "J000S",
-      "gurix",
-      "fscholz",
-      "LOK"
+      "RewoSiedge",
+      "Abro",
+      "markokr"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Date/parse": {
-    "modified": "2020-10-15T21:30:28.964Z",
+  "Web/JavaScript/Reference/Global_Objects/JSON/parse": {
+    "modified": "2020-10-15T21:34:37.174Z",
     "contributors": [
-      "BuZZ-T",
       "schlagi123",
-      "PapaBravo",
-      "GottZ",
-      "TheSuspiciousWombat",
-      "MrMartiniMo",
-      "danieldiekmeier",
-      "Drasive"
+      "mdnde",
+      "fscholz",
+      "ccoenen",
+      "maxkl",
+      "dguhl"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Date/prototype": {
-    "modified": "2020-10-15T21:45:25.297Z",
+  "Web/JavaScript/Reference/Global_Objects/JSON/stringify": {
+    "modified": "2020-10-15T21:38:21.975Z",
     "contributors": [
+      "duckymirror",
+      "powerpaul17",
       "schlagi123",
-      "Schollator"
+      "einfallstoll",
+      "sahin",
+      "DoctypeRosenthal",
+      "HighTower79",
+      "m3t4lukas",
+      "blub0hr"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Date/setDate": {
-    "modified": "2020-10-15T21:45:35.204Z",
+  "Web/JavaScript/Reference/Global_Objects/Map": {
+    "modified": "2020-10-15T21:39:41.133Z",
     "contributors": [
-      "schlagi123"
+      "verij51",
+      "Streamities",
+      "kdex",
+      "Flonk",
+      "schlagi123",
+      "the-bluesnik",
+      "GinoHereIam",
+      "Chris-CR",
+      "Fearodin"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Date/setFullYear": {
-    "modified": "2020-10-15T21:45:37.723Z",
+  "Web/JavaScript/Reference/Global_Objects/Map/@@iterator": {
+    "modified": "2020-10-15T22:01:27.148Z",
     "contributors": [
-      "dritter",
-      "schlagi123",
-      "derhofbauer"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Date/setHours": {
-    "modified": "2020-10-15T21:45:35.032Z",
+  "Web/JavaScript/Reference/Global_Objects/Map/@@species": {
+    "modified": "2020-10-15T22:01:26.820Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Date/setMilliseconds": {
-    "modified": "2020-10-15T21:45:36.061Z",
+  "Web/JavaScript/Reference/Global_Objects/Map/@@toStringTag": {
+    "modified": "2020-10-15T22:01:26.636Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Date/setMinutes": {
-    "modified": "2020-10-15T21:45:36.748Z",
+  "Web/JavaScript/Reference/Global_Objects/Map/clear": {
+    "modified": "2020-10-15T22:01:24.339Z",
     "contributors": [
+      "shaedrich",
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Date/setMonth": {
-    "modified": "2020-10-15T21:45:38.160Z",
+  "Web/JavaScript/Reference/Global_Objects/Map/delete": {
+    "modified": "2020-10-15T22:01:25.242Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Date/setSeconds": {
-    "modified": "2020-10-15T21:45:36.906Z",
+  "Web/JavaScript/Reference/Global_Objects/Map/entries": {
+    "modified": "2020-10-15T22:01:26.606Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Date/setTime": {
-    "modified": "2020-10-15T21:33:01.056Z",
+  "Web/JavaScript/Reference/Global_Objects/Map/forEach": {
+    "modified": "2020-10-15T21:53:59.055Z",
     "contributors": [
       "schlagi123",
-      "jhnnslschnr"
+      "Techworker"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Date/setUTCDate": {
-    "modified": "2020-10-15T21:45:41.852Z",
+  "Web/JavaScript/Reference/Global_Objects/Map/get": {
+    "modified": "2020-10-15T22:01:25.184Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Date/setUTCFullYear": {
-    "modified": "2020-10-15T21:45:48.630Z",
+  "Web/JavaScript/Reference/Global_Objects/Map/has": {
+    "modified": "2020-10-15T22:01:25.655Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Date/setUTCHours": {
-    "modified": "2020-10-15T21:45:48.619Z",
+  "Web/JavaScript/Reference/Global_Objects/Map/keys": {
+    "modified": "2020-10-15T21:57:34.550Z",
     "contributors": [
       "schlagi123",
-      "stephtr"
+      "patpir"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Date/setUTCMilliseconds": {
-    "modified": "2020-10-15T21:45:41.573Z",
+  "Web/JavaScript/Reference/Global_Objects/Map/set": {
+    "modified": "2020-10-15T22:01:24.339Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Date/setUTCMinutes": {
-    "modified": "2020-10-15T21:45:41.649Z",
+  "Web/JavaScript/Reference/Global_Objects/Map/size": {
+    "modified": "2020-10-15T22:01:24.292Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Date/setUTCMonth": {
-    "modified": "2020-10-15T21:45:41.116Z",
+  "Web/JavaScript/Reference/Global_Objects/Map/values": {
+    "modified": "2020-10-15T22:01:25.714Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Date/setUTCSeconds": {
-    "modified": "2020-10-15T21:45:41.484Z",
+  "Web/JavaScript/Reference/Global_Objects/Math": {
+    "modified": "2020-10-15T21:32:16.402Z",
     "contributors": [
-      "schlagi123"
+      "schlagi123",
+      "Artist-sumo"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Date/setYear": {
-    "modified": "2020-10-15T21:45:41.405Z",
+  "Web/JavaScript/Reference/Global_Objects/Math/E": {
+    "modified": "2020-10-15T21:32:14.403Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Date/toDateString": {
-    "modified": "2020-10-15T21:45:49.664Z",
+  "Web/JavaScript/Reference/Global_Objects/Math/LN10": {
+    "modified": "2020-10-15T21:32:13.398Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Date/toGMTString": {
-    "modified": "2020-10-15T21:45:51.459Z",
+  "Web/JavaScript/Reference/Global_Objects/Math/LN2": {
+    "modified": "2020-10-15T21:32:14.601Z",
     "contributors": [
-      "schlagi123",
-      "bentzibentz"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Date/toISOString": {
-    "modified": "2020-10-15T21:45:50.222Z",
+  "Web/JavaScript/Reference/Global_Objects/Math/LOG10E": {
+    "modified": "2020-10-15T21:32:15.382Z",
     "contributors": [
-      "NiklasMerz",
-      "schnellboot",
-      "botic",
-      "schlagi123",
-      "WikiMarc"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Date/toJSON": {
-    "modified": "2020-10-15T21:42:32.875Z",
+  "Web/JavaScript/Reference/Global_Objects/Math/LOG2E": {
+    "modified": "2020-10-15T21:32:15.299Z",
     "contributors": [
-      "schlagi123",
-      "Chips100"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString": {
-    "modified": "2020-10-15T21:45:58.511Z",
+  "Web/JavaScript/Reference/Global_Objects/Math/PI": {
+    "modified": "2020-10-15T21:32:12.966Z",
     "contributors": [
+      "intxcc",
       "schlagi123",
-      "gunnarbittersmann"
+      "JulianBuerger",
+      "KillerCodeMonkey"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Date/toLocaleString": {
-    "modified": "2020-10-15T21:45:59.947Z",
+  "Web/JavaScript/Reference/Global_Objects/Math/SQRT1_2": {
+    "modified": "2020-10-15T21:32:13.657Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString": {
-    "modified": "2020-10-15T21:46:02.185Z",
+  "Web/JavaScript/Reference/Global_Objects/Math/SQRT2": {
+    "modified": "2020-10-15T21:32:13.993Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Date/toSource": {
-    "modified": "2020-10-15T21:45:56.411Z",
+  "Web/JavaScript/Reference/Global_Objects/Math/acos": {
+    "modified": "2020-10-15T21:32:14.868Z",
     "contributors": [
-      "teoli",
-      "schlagi123"
+      "schlagi123",
+      "hictox"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Date/toString": {
-    "modified": "2020-10-15T21:45:57.842Z",
+  "Web/JavaScript/Reference/Global_Objects/Math/acosh": {
+    "modified": "2020-10-15T21:38:20.524Z",
     "contributors": [
-      "schlagi123"
+      "schlagi123",
+      "hictox"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Date/toTimeString": {
-    "modified": "2020-10-15T21:45:50.302Z",
+  "Web/JavaScript/Reference/Global_Objects/Math/asin": {
+    "modified": "2020-10-15T21:38:20.385Z",
     "contributors": [
-      "schlagi123"
+      "schlagi123",
+      "hictox"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Date/toUTCString": {
-    "modified": "2020-10-15T21:45:55.020Z",
+  "Web/JavaScript/Reference/Global_Objects/Math/asinh": {
+    "modified": "2020-10-15T21:38:17.929Z",
     "contributors": [
-      "schlagi123"
+      "schlagi123",
+      "hictox"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Date/valueOf": {
-    "modified": "2020-10-15T21:45:55.002Z",
+  "Web/JavaScript/Reference/Global_Objects/Math/atan": {
+    "modified": "2020-10-15T21:38:19.032Z",
     "contributors": [
-      "schlagi123"
+      "schlagi123",
+      "hictox"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Error": {
-    "modified": "2020-10-15T21:46:20.812Z",
+  "Web/JavaScript/Reference/Global_Objects/Math/atan2": {
+    "modified": "2020-10-15T21:38:18.649Z",
     "contributors": [
-      "Flur3x",
-      "nnals",
       "schlagi123",
-      "jens1o",
-      "shaedrich",
-      "andreasf",
-      "AlexanderFradiani"
+      "hictox"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Error/Stack": {
-    "modified": "2020-10-15T21:48:37.021Z",
+  "Web/JavaScript/Reference/Global_Objects/Math/cbrt": {
+    "modified": "2020-10-15T21:38:16.861Z",
     "contributors": [
-      "schlagi123"
+      "itsdevdom",
+      "schlagi123",
+      "hictox"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Error/columnNumber": {
-    "modified": "2020-10-15T21:46:22.573Z",
+  "Web/JavaScript/Reference/Global_Objects/Math/ceil": {
+    "modified": "2020-10-15T21:32:47.773Z",
     "contributors": [
-      "schlagi123"
+      "scor-ch",
+      "schlagi123",
+      "LuiSlacker",
+      "hictox",
+      "hanswer01"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Error/fileName": {
-    "modified": "2020-10-15T21:46:29.467Z",
+  "Web/JavaScript/Reference/Global_Objects/Math/clz32": {
+    "modified": "2020-10-15T21:45:08.913Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Error/lineNumber": {
-    "modified": "2020-10-15T21:46:24.762Z",
+  "Web/JavaScript/Reference/Global_Objects/Math/cos": {
+    "modified": "2020-10-15T21:45:11.097Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Error/message": {
-    "modified": "2020-10-15T21:46:22.605Z",
+  "Web/JavaScript/Reference/Global_Objects/Math/cosh": {
+    "modified": "2020-10-15T21:45:13.156Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Error/name": {
-    "modified": "2020-10-15T21:46:26.394Z",
+  "Web/JavaScript/Reference/Global_Objects/Math/exp": {
+    "modified": "2020-10-15T21:45:11.971Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Error/prototype": {
-    "modified": "2020-10-15T21:46:17.159Z",
+  "Web/JavaScript/Reference/Global_Objects/Math/expm1": {
+    "modified": "2020-10-15T21:45:13.158Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Error/toSource": {
-    "modified": "2020-10-15T21:46:53.703Z",
+  "Web/JavaScript/Reference/Global_Objects/Math/floor": {
+    "modified": "2020-10-15T21:40:05.734Z",
+    "contributors": [
+      "schlagi123",
+      "mcmunder",
+      "flottokarotto"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/fround": {
+    "modified": "2020-10-15T21:45:14.992Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Error/toString": {
-    "modified": "2020-10-15T21:46:20.003Z",
+  "Web/JavaScript/Reference/Global_Objects/Math/hypot": {
+    "modified": "2020-10-15T21:45:16.601Z",
     "contributors": [
+      "gunnarbittersmann",
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/EvalError": {
-    "modified": "2020-10-15T22:01:27.828Z",
+  "Web/JavaScript/Reference/Global_Objects/Math/imul": {
+    "modified": "2020-10-15T21:45:04.964Z",
     "contributors": [
-      "schlagi123",
-      "fscholz"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/EvalError/prototype": {
-    "modified": "2020-10-15T22:01:29.746Z",
+  "Web/JavaScript/Reference/Global_Objects/Math/log": {
+    "modified": "2020-10-23T10:19:29.166Z",
     "contributors": [
+      "sttzr",
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Float32Array": {
-    "modified": "2020-10-15T22:01:33.350Z",
+  "Web/JavaScript/Reference/Global_Objects/Math/log10": {
+    "modified": "2020-10-15T21:45:15.451Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Float64Array": {
-    "modified": "2020-10-15T22:01:34.687Z",
+  "Web/JavaScript/Reference/Global_Objects/Math/log1p": {
+    "modified": "2020-10-15T21:45:15.457Z",
     "contributors": [
-      "pastparty",
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Function": {
-    "modified": "2020-10-15T21:30:33.103Z",
+  "Web/JavaScript/Reference/Global_Objects/Math/log2": {
+    "modified": "2020-10-15T21:45:15.290Z",
     "contributors": [
-      "woiddale",
-      "schlagi123",
-      "TDesjardins",
-      "StevenS77",
-      "Mingun"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Function/apply": {
-    "modified": "2020-10-15T21:47:39.222Z",
+  "Web/JavaScript/Reference/Global_Objects/Math/max": {
+    "modified": "2020-10-15T21:37:55.703Z",
     "contributors": [
+      "tzimmermann",
       "schlagi123",
-      "fscholz"
+      "screeny05",
+      "Elytherion",
+      "ptitmouton"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Function/arguments": {
-    "modified": "2020-10-15T22:01:34.868Z",
+  "Web/JavaScript/Reference/Global_Objects/Math/min": {
+    "modified": "2020-10-15T21:33:32.757Z",
     "contributors": [
-      "rossler123",
-      "trollkotze",
-      "schlagi123"
+      "Stnieder",
+      "schlagi123",
+      "cedrichaase",
+      "SSchnitzler"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Function/bind": {
-    "modified": "2020-10-15T21:37:23.019Z",
+  "Web/JavaScript/Reference/Global_Objects/Math/pow": {
+    "modified": "2020-10-15T21:39:55.052Z",
     "contributors": [
-      "axelrindle",
-      "chikovanreuden",
-      "rendner",
-      "matz3",
       "schlagi123",
-      "Leitschiff",
-      "roman.seidelsohn",
-      "sepastian"
+      "alice-wl"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Function/call": {
-    "modified": "2020-10-15T21:30:32.549Z",
+  "Web/JavaScript/Reference/Global_Objects/Math/round": {
+    "modified": "2020-10-15T21:34:19.737Z",
     "contributors": [
-      "ffriedl89",
-      "alexander-heimbuch",
+      "aserraric",
       "schlagi123",
-      "Oekel",
-      "Abro",
-      "haryl",
-      "loki",
-      "nelf"
+      "RefToDev",
+      "Krayzeee92",
+      "DanMyshkin",
+      "michaelkoehne"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Function/caller": {
-    "modified": "2020-10-15T22:01:48.453Z",
+  "Web/JavaScript/Reference/Global_Objects/Math/sign": {
+    "modified": "2020-10-15T21:45:13.058Z",
     "contributors": [
-      "buschco",
-      "Obiwahn",
-      "schlagi123"
+      "schlagi123",
+      "cedrichaase"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Function/displayName": {
-    "modified": "2020-10-15T22:01:52.215Z",
+  "Web/JavaScript/Reference/Global_Objects/Math/sin": {
+    "modified": "2020-10-15T21:45:12.206Z",
     "contributors": [
+      "ModellbahnFreak",
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Function/length": {
-    "modified": "2020-10-15T21:34:09.689Z",
+  "Web/JavaScript/Reference/Global_Objects/Math/sinh": {
+    "modified": "2020-10-15T21:45:14.822Z",
     "contributors": [
-      "schlagi123",
-      "Eiknheimer",
-      "timoweiss"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Function/name": {
-    "modified": "2020-10-15T21:37:34.115Z",
+  "Web/JavaScript/Reference/Global_Objects/Math/sqrt": {
+    "modified": "2020-10-15T21:45:14.468Z",
     "contributors": [
-      "BoyTheBoy",
-      "schlagi123",
-      "Eiknheimer",
-      "MoritzKn",
-      "DavidVollmers"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Function/prototype": {
-    "modified": "2020-10-15T22:01:36.587Z",
+  "Web/JavaScript/Reference/Global_Objects/Math/tan": {
+    "modified": "2020-10-15T21:45:14.142Z",
     "contributors": [
-      "xdevs23",
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Function/toSource": {
-    "modified": "2020-10-15T22:01:47.277Z",
+  "Web/JavaScript/Reference/Global_Objects/Math/tanh": {
+    "modified": "2020-10-15T21:45:13.983Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Function/toString": {
-    "modified": "2020-10-15T22:01:46.451Z",
+  "Web/JavaScript/Reference/Global_Objects/Math/trunc": {
+    "modified": "2020-10-15T21:45:15.988Z",
     "contributors": [
-      "schlagi123"
+      "4typen",
+      "schlagi123",
+      "giffeler"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Generator": {
-    "modified": "2020-10-15T22:01:57.503Z",
+  "Web/JavaScript/Reference/Global_Objects/NaN": {
+    "modified": "2020-10-15T21:24:05.253Z",
     "contributors": [
       "schlagi123",
-      "fscholz"
+      "boppy",
+      "SphinxKnight",
+      "fscholz",
+      "Jens_Verneuer"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Generator/next": {
-    "modified": "2020-10-15T22:01:55.076Z",
+  "Web/JavaScript/Reference/Global_Objects/Number": {
+    "modified": "2020-10-15T21:26:52.848Z",
     "contributors": [
-      "GarfieldKlon",
-      "schlagi123"
+      "schlagi123",
+      "mreu",
+      "StevenS77",
+      "mrcktz",
+      "fscholz",
+      "AngelSankturio"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Generator/return": {
-    "modified": "2020-10-15T22:01:56.757Z",
+  "Web/JavaScript/Reference/Global_Objects/Number/EPSILON": {
+    "modified": "2020-10-15T21:26:52.886Z",
     "contributors": [
-      "schlagi123"
+      "mitch3ls",
+      "schlagi123",
+      "Steditor",
+      "Tilli81",
+      "fscholz",
+      "AngelSankturio"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Generator/throw": {
-    "modified": "2020-10-15T22:01:58.175Z",
+  "Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER": {
+    "modified": "2020-10-15T21:45:17.017Z",
     "contributors": [
+      "EpsilonBoo",
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/GeneratorFunction": {
-    "modified": "2020-10-15T22:02:04.667Z",
+  "Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE": {
+    "modified": "2020-10-15T21:45:17.604Z",
     "contributors": [
       "schlagi123",
-      "fscholz"
+      "Fuzzyma"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/GeneratorFunction/prototype": {
-    "modified": "2020-10-15T22:02:06.474Z",
+  "Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER": {
+    "modified": "2020-10-15T21:45:17.586Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Infinity": {
-    "modified": "2020-10-15T21:32:07.008Z",
+  "Web/JavaScript/Reference/Global_Objects/Number/MIN_VALUE": {
+    "modified": "2020-10-30T06:50:59.921Z",
     "contributors": [
+      "thefabicraft-github",
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Int16Array": {
-    "modified": "2020-10-15T22:01:32.923Z",
+  "Web/JavaScript/Reference/Global_Objects/Number/NEGATIVE_INFINITY": {
+    "modified": "2020-10-15T21:32:05.912Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Int32Array": {
-    "modified": "2020-10-15T22:01:33.440Z",
+  "Web/JavaScript/Reference/Global_Objects/Number/NaN": {
+    "modified": "2020-10-15T21:31:59.627Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Int8Array": {
-    "modified": "2020-10-15T22:01:34.152Z",
+  "Web/JavaScript/Reference/Global_Objects/Number/POSITIVE_INFINITY": {
+    "modified": "2020-10-15T21:32:00.956Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/InternalError": {
-    "modified": "2020-10-15T22:02:06.176Z",
-    "contributors": [
-      "schlagi123",
-      "fscholz"
-    ]
-  },
-  "Web/JavaScript/Reference/Global_Objects/InternalError/prototype": {
-    "modified": "2020-10-15T22:02:05.813Z",
+  "Web/JavaScript/Reference/Global_Objects/Number/isFinite": {
+    "modified": "2020-10-15T21:32:05.695Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Intl": {
-    "modified": "2020-10-15T22:02:07.140Z",
+  "Web/JavaScript/Reference/Global_Objects/Number/isInteger": {
+    "modified": "2020-10-15T21:45:17.315Z",
     "contributors": [
-      "TorstenDittmann",
-      "schlagi123"
+      "schlagi123",
+      "MauriceAyasse"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Intl/Collator": {
-    "modified": "2020-10-15T22:02:08.820Z",
+  "Web/JavaScript/Reference/Global_Objects/Number/isNaN": {
+    "modified": "2020-10-15T21:32:02.637Z",
     "contributors": [
-      "fscholz",
       "schlagi123",
-      "wbamberg"
+      "mazilema",
+      "renemaas"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Intl/Collator/compare": {
-    "modified": "2020-10-15T22:02:10.077Z",
+  "Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger": {
+    "modified": "2020-10-15T21:45:20.941Z",
     "contributors": [
-      "fscholz",
+      "Frdnspnzr",
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Intl/Collator/prototype": {
-    "modified": "2020-10-15T22:02:09.634Z",
+  "Web/JavaScript/Reference/Global_Objects/Number/parseFloat": {
+    "modified": "2020-10-15T21:45:17.199Z",
     "contributors": [
-      "fscholz",
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Intl/Collator/resolvedOptions": {
-    "modified": "2020-10-15T22:02:19.729Z",
+  "Web/JavaScript/Reference/Global_Objects/Number/parseInt": {
+    "modified": "2020-10-15T21:45:18.357Z",
     "contributors": [
-      "fscholz",
-      "schlagi123"
+      "schlagi123",
+      "daugsbi",
+      "DennisAhaus"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Intl/Collator/supportedLocalesOf": {
-    "modified": "2020-10-15T22:02:18.509Z",
+  "Web/JavaScript/Reference/Global_Objects/Number/toExponential": {
+    "modified": "2020-10-15T21:45:19.048Z",
     "contributors": [
-      "fscholz",
+      "joebau0815",
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat": {
-    "modified": "2020-10-15T21:45:59.649Z",
+  "Web/JavaScript/Reference/Global_Objects/Number/toFixed": {
+    "modified": "2020-10-15T21:45:19.906Z",
     "contributors": [
-      "fscholz",
       "gunnarbittersmann",
-      "BuZZ-T",
-      "schlagi123"
+      "schlagi123",
+      "mack3457",
+      "mzur",
+      "phax"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format": {
-    "modified": "2020-10-15T22:02:19.143Z",
+  "Web/JavaScript/Reference/Global_Objects/Number/toLocaleString": {
+    "modified": "2020-10-15T21:45:20.416Z",
     "contributors": [
-      "fscholz",
-      "schlagi123"
+      "Hanmac",
+      "schlagi123",
+      "mreu",
+      "sdeitmer",
+      "PierreCorell"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatToParts": {
-    "modified": "2020-10-15T22:02:19.130Z",
+  "Web/JavaScript/Reference/Global_Objects/Number/toPrecision": {
+    "modified": "2020-10-15T21:45:20.364Z",
     "contributors": [
-      "fscholz",
-      "schlagi123"
+      "schlagi123",
+      "phax"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype": {
-    "modified": "2020-10-15T21:46:02.893Z",
+  "Web/JavaScript/Reference/Global_Objects/Number/toSource": {
+    "modified": "2020-10-15T21:45:18.319Z",
     "contributors": [
-      "fscholz",
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/resolvedOptions": {
-    "modified": "2020-10-15T22:03:23.205Z",
+  "Web/JavaScript/Reference/Global_Objects/Number/toString": {
+    "modified": "2020-10-15T21:45:18.952Z",
     "contributors": [
-      "fscholz",
-      "schlagi123"
+      "schlagi123",
+      "giffeler"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/supportedLocalesOf": {
-    "modified": "2020-10-15T22:02:43.009Z",
+  "Web/JavaScript/Reference/Global_Objects/Number/valueOf": {
+    "modified": "2020-10-15T21:45:19.158Z",
     "contributors": [
-      "fscholz",
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat": {
-    "modified": "2020-10-15T21:45:21.440Z",
+  "Web/JavaScript/Reference/Global_Objects/Object": {
+    "modified": "2020-10-15T21:21:51.304Z",
     "contributors": [
+      "bobbor",
+      "wbamberg",
       "fscholz",
-      "nw520",
-      "schlagi123",
-      "sdeitmer"
+      "mholland1337"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/format": {
-    "modified": "2020-10-15T22:03:25.553Z",
+  "Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__": {
+    "modified": "2019-03-23T22:08:08.241Z",
     "contributors": [
-      "fscholz",
-      "apfelbox",
-      "schlagi123"
+      "Christian2507"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype": {
-    "modified": "2020-10-15T22:03:24.903Z",
+  "Web/JavaScript/Reference/Global_Objects/Object/assign": {
+    "modified": "2020-10-15T21:46:53.703Z",
     "contributors": [
-      "fscholz",
-      "schlagi123"
+      "Stefie",
+      "schlagi123",
+      "Yogu",
+      "henrymoews",
+      "KuhnEDV"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/supportedLocalesOf": {
-    "modified": "2020-10-15T22:02:57.962Z",
+  "Web/JavaScript/Reference/Global_Objects/Object/constructor": {
+    "modified": "2019-03-23T23:24:06.881Z",
     "contributors": [
+      "Olli64",
       "fscholz",
-      "SebastianSpeitel",
-      "schlagi123"
+      "Airblader"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Intl/PluralRules": {
-    "modified": "2020-10-15T22:02:58.225Z",
+  "Web/JavaScript/Reference/Global_Objects/Object/create": {
+    "modified": "2019-03-23T23:03:06.202Z",
     "contributors": [
-      "fscholz"
+      "arothweiler",
+      "peter30mar2017",
+      "fmsy",
+      "BurnerPat",
+      "Hendrikto"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Intl/PluralRules/supportedLocalesOf": {
-    "modified": "2020-10-15T22:02:59.909Z",
+  "Web/JavaScript/Reference/Global_Objects/Object/defineProperty": {
+    "modified": "2019-07-01T07:52:37.430Z",
     "contributors": [
-      "fscholz",
-      "schlagi123"
+      "JanSchuermannPH",
+      "Univream",
+      "tvormweg"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Intl/getCanonicalLocales": {
-    "modified": "2020-10-15T22:02:08.681Z",
+  "Web/JavaScript/Reference/Global_Objects/Object/entries": {
+    "modified": "2020-10-15T22:19:15.987Z",
     "contributors": [
-      "schlagi123"
+      "franca"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/JSON": {
-    "modified": "2020-10-15T21:34:42.140Z",
+  "Web/JavaScript/Reference/Global_Objects/Object/freeze": {
+    "modified": "2020-10-15T21:33:52.609Z",
     "contributors": [
+      "SebinNyshkim",
+      "christophfriedrich",
+      "asilberschneider",
+      "clemenshelm",
       "schlagi123",
-      "RewoSiedge",
-      "Abro",
-      "markokr"
+      "sbusch",
+      "in0x"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/JSON/parse": {
-    "modified": "2020-10-15T21:34:37.174Z",
+  "Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames": {
+    "modified": "2019-03-23T22:20:00.098Z",
     "contributors": [
-      "schlagi123",
-      "mdnde",
-      "fscholz",
-      "ccoenen",
-      "maxkl",
-      "dguhl"
+      "janbiasi"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/JSON/stringify": {
-    "modified": "2020-10-15T21:38:21.975Z",
+  "Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf": {
+    "modified": "2019-03-23T22:16:28.123Z",
     "contributors": [
-      "duckymirror",
-      "powerpaul17",
-      "schlagi123",
-      "einfallstoll",
-      "sahin",
-      "DoctypeRosenthal",
-      "HighTower79",
-      "m3t4lukas",
-      "blub0hr"
+      "StevenS77",
+      "klausbx"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Map": {
-    "modified": "2020-10-15T21:39:41.133Z",
+  "Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty": {
+    "modified": "2019-03-23T22:50:54.746Z",
     "contributors": [
-      "verij51",
-      "Streamities",
-      "kdex",
-      "Flonk",
+      "bambebituna",
+      "ilkercat",
       "schlagi123",
-      "the-bluesnik",
-      "GinoHereIam",
-      "Chris-CR",
-      "Fearodin"
+      "juicyarts"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Map/@@iterator": {
-    "modified": "2020-10-15T22:01:27.148Z",
+  "Web/JavaScript/Reference/Global_Objects/Object/is": {
+    "modified": "2020-10-15T21:25:28.677Z",
     "contributors": [
-      "schlagi123"
+      "rioderelfte",
+      "SphinxKnight",
+      "kdex",
+      "level420",
+      "giffeler",
+      "StevenS77",
+      "fscholz",
+      "Airblader"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Map/@@species": {
-    "modified": "2020-10-15T22:01:26.820Z",
+  "Web/JavaScript/Reference/Global_Objects/Object/isExtensible": {
+    "modified": "2019-03-23T22:15:34.012Z",
     "contributors": [
-      "schlagi123"
+      "dthdyver"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Map/@@toStringTag": {
-    "modified": "2020-10-15T22:01:26.636Z",
+  "Web/JavaScript/Reference/Global_Objects/Object/isFrozen": {
+    "modified": "2020-10-15T22:20:16.815Z",
     "contributors": [
-      "schlagi123"
+      "bobbor"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Map/clear": {
-    "modified": "2020-10-15T22:01:24.339Z",
-    "contributors": [
-      "shaedrich",
-      "schlagi123"
-    ]
-  },
-  "Web/JavaScript/Reference/Global_Objects/Map/delete": {
-    "modified": "2020-10-15T22:01:25.242Z",
+  "Web/JavaScript/Reference/Global_Objects/Object/keys": {
+    "modified": "2019-03-23T23:05:44.528Z",
     "contributors": [
-      "schlagi123"
+      "p2k",
+      "kdex",
+      "schlagi123",
+      "cepharum",
+      "Bavragor"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Map/entries": {
-    "modified": "2020-10-15T22:01:26.606Z",
+  "Web/JavaScript/Reference/Global_Objects/Object/proto": {
+    "modified": "2019-04-16T09:05:23.152Z",
     "contributors": [
-      "schlagi123"
+      "barcmoehm",
+      "StevenS77"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Map/forEach": {
-    "modified": "2020-10-15T21:53:59.055Z",
+  "Web/JavaScript/Reference/Global_Objects/Object/toSource": {
+    "modified": "2019-03-23T22:08:15.191Z",
     "contributors": [
-      "schlagi123",
-      "Techworker"
+      "teoli",
+      "Christian2507"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Map/get": {
-    "modified": "2020-10-15T22:01:25.184Z",
+  "Web/JavaScript/Reference/Global_Objects/Object/valueOf": {
+    "modified": "2020-10-15T22:05:39.564Z",
     "contributors": [
-      "schlagi123"
+      "paulkoegel",
+      "dennissterzenbach"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Map/has": {
-    "modified": "2020-10-15T22:01:25.655Z",
+  "Web/JavaScript/Reference/Global_Objects/Object/values": {
+    "modified": "2019-03-18T20:58:26.548Z",
     "contributors": [
-      "schlagi123"
+      "filmor",
+      "rhoio",
+      "andresattler"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Map/keys": {
-    "modified": "2020-10-15T21:57:34.550Z",
+  "Web/JavaScript/Reference/Global_Objects/Promise": {
+    "modified": "2020-09-11T07:37:54.436Z",
     "contributors": [
-      "schlagi123",
-      "patpir"
+      "sebenns",
+      "semmelbroesl",
+      "Dschubba",
+      "mrmoree",
+      "CorvusRohan",
+      "jnnkm",
+      "SphinxKnight",
+      "0xflotus",
+      "HendrikRunte",
+      "1blankz7"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Map/prototype": {
-    "modified": "2020-10-15T22:01:26.449Z",
+  "Web/JavaScript/Reference/Global_Objects/Promise/all": {
+    "modified": "2020-10-15T21:33:48.453Z",
     "contributors": [
-      "Morphbreed",
-      "schlagi123"
+      "Dschubba",
+      "anniekao",
+      "SphinxKnight",
+      "kdex",
+      "davidrockt",
+      "Sharian"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Map/set": {
-    "modified": "2020-10-15T22:01:24.339Z",
+  "Web/JavaScript/Reference/Global_Objects/Promise/finally": {
+    "modified": "2020-10-15T22:05:15.072Z",
     "contributors": [
-      "schlagi123"
+      "tminich",
+      "wasabiNorman"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Map/size": {
-    "modified": "2020-10-15T22:01:24.292Z",
+  "Web/JavaScript/Reference/Global_Objects/Promise/race": {
+    "modified": "2020-10-15T22:04:13.810Z",
     "contributors": [
-      "schlagi123"
+      "pkimmlinger",
+      "cepharum",
+      "DaAitch"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Map/values": {
-    "modified": "2020-10-15T22:01:25.714Z",
+  "Web/JavaScript/Reference/Global_Objects/Promise/reject": {
+    "modified": "2020-10-15T21:53:18.040Z",
     "contributors": [
-      "schlagi123"
+      "ManuelKiessling",
+      "marco-a",
+      "modev"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Math": {
-    "modified": "2020-10-15T21:32:16.402Z",
+  "Web/JavaScript/Reference/Global_Objects/Promise/then": {
+    "modified": "2019-03-23T22:48:57.241Z",
     "contributors": [
-      "schlagi123",
-      "Artist-sumo"
+      "dbraun",
+      "SphinxKnight",
+      "kdex",
+      "DanielMSchmidt",
+      "florianb"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Math/E": {
-    "modified": "2020-10-15T21:32:14.403Z",
+  "Web/JavaScript/Reference/Global_Objects/RangeError": {
+    "modified": "2019-03-23T22:12:22.680Z",
     "contributors": [
-      "schlagi123"
+      "jameshkramer"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Math/LN10": {
-    "modified": "2020-10-15T21:32:13.398Z",
+  "Web/JavaScript/Reference/Global_Objects/Reflect": {
+    "modified": "2020-10-15T22:13:20.309Z",
     "contributors": [
-      "schlagi123"
+      "Tjerk-Haaye-Henricus"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Math/LN2": {
-    "modified": "2020-10-15T21:32:14.601Z",
+  "Web/JavaScript/Reference/Global_Objects/Reflect/apply": {
+    "modified": "2020-10-15T22:13:35.547Z",
     "contributors": [
-      "schlagi123"
+      "Tjerk-Haaye-Henricus"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Math/LOG10E": {
-    "modified": "2020-10-15T21:32:15.382Z",
+  "Web/JavaScript/Reference/Global_Objects/Reflect/construct": {
+    "modified": "2020-10-15T22:13:50.733Z",
     "contributors": [
-      "schlagi123"
+      "Tjerk-Haaye-Henricus"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Math/LOG2E": {
-    "modified": "2020-10-15T21:32:15.299Z",
+  "Web/JavaScript/Reference/Global_Objects/RegExp": {
+    "modified": "2020-08-17T16:16:42.469Z",
     "contributors": [
-      "schlagi123"
+      "MoPaMo",
+      "ModProg",
+      "D3rT1m",
+      "wbamberg",
+      "rmcproductions",
+      "Wiimm",
+      "doeck",
+      "StevenS77",
+      "Abro",
+      "Simmarith",
+      "fscholz",
+      "powerswitch",
+      "def00111",
+      "clone",
+      "lightspirit"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Math/PI": {
-    "modified": "2020-10-15T21:32:12.966Z",
+  "Web/JavaScript/Reference/Global_Objects/RegExp/flags": {
+    "modified": "2020-10-15T22:08:09.837Z",
     "contributors": [
-      "intxcc",
-      "schlagi123",
-      "JulianBuerger",
-      "KillerCodeMonkey"
+      "vortami"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Math/SQRT1_2": {
-    "modified": "2020-10-15T21:32:13.657Z",
+  "Web/JavaScript/Reference/Global_Objects/RegExp/input": {
+    "modified": "2019-03-23T22:37:59.302Z",
     "contributors": [
-      "schlagi123"
+      "teoli",
+      "RewoSiedge",
+      "jumpball"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Math/SQRT2": {
-    "modified": "2020-10-15T21:32:13.993Z",
+  "Web/JavaScript/Reference/Global_Objects/RegExp/test": {
+    "modified": "2020-10-15T22:29:51.696Z",
     "contributors": [
-      "schlagi123"
+      "MrFootwork",
+      "jan.kaiser1952"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Math/acos": {
-    "modified": "2020-10-15T21:32:14.868Z",
+  "Web/JavaScript/Reference/Global_Objects/Set": {
+    "modified": "2020-11-14T21:15:03.891Z",
     "contributors": [
+      "ottahe",
+      "MichaelGellings",
+      "cami",
+      "AndyLnd",
+      "mdnde2",
+      "Flonk",
       "schlagi123",
-      "hictox"
+      "sspringer82"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Math/acosh": {
-    "modified": "2020-10-15T21:38:20.524Z",
+  "Web/JavaScript/Reference/Global_Objects/Set/add": {
+    "modified": "2020-11-14T20:25:16.685Z",
     "contributors": [
-      "schlagi123",
-      "hictox"
+      "ottahe"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Math/asin": {
-    "modified": "2020-10-15T21:38:20.385Z",
+  "Web/JavaScript/Reference/Global_Objects/Set/delete": {
+    "modified": "2020-11-14T20:17:34.638Z",
     "contributors": [
-      "schlagi123",
-      "hictox"
+      "ottahe"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Math/asinh": {
-    "modified": "2020-10-15T21:38:17.929Z",
+  "Web/JavaScript/Reference/Global_Objects/Set/has": {
+    "modified": "2019-03-23T22:10:20.086Z",
     "contributors": [
-      "schlagi123",
-      "hictox"
+      "mdnde2",
+      "psychotammi"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Math/atan": {
-    "modified": "2020-10-15T21:38:19.032Z",
+  "Web/JavaScript/Reference/Global_Objects/String": {
+    "modified": "2020-10-15T21:30:10.579Z",
     "contributors": [
+      "kdex",
+      "Anonymous",
       "schlagi123",
-      "hictox"
+      "fscholz"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Math/atan2": {
-    "modified": "2020-10-15T21:38:18.649Z",
+  "Web/JavaScript/Reference/Global_Objects/String/Trim": {
+    "modified": "2020-10-15T21:34:43.401Z",
     "contributors": [
       "schlagi123",
-      "hictox"
+      "janpawellek",
+      "Codebryo"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Math/cbrt": {
-    "modified": "2020-10-15T21:38:16.861Z",
+  "Web/JavaScript/Reference/Global_Objects/String/charAt": {
+    "modified": "2019-05-13T20:26:27.144Z",
     "contributors": [
-      "itsdevdom",
-      "schlagi123",
-      "hictox"
+      "Huegelkoenig",
+      "PascalAOMS"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Math/ceil": {
-    "modified": "2020-10-15T21:32:47.773Z",
+  "Web/JavaScript/Reference/Global_Objects/String/concat": {
+    "modified": "2019-03-23T22:36:31.275Z",
     "contributors": [
-      "scor-ch",
       "schlagi123",
-      "LuiSlacker",
-      "hictox",
-      "hanswer01"
+      "Saschlong"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Math/clz32": {
-    "modified": "2020-10-15T21:45:08.913Z",
+  "Web/JavaScript/Reference/Global_Objects/String/endsWith": {
+    "modified": "2019-03-23T22:28:08.246Z",
     "contributors": [
-      "schlagi123"
+      "THX138"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Math/cos": {
-    "modified": "2020-10-15T21:45:11.097Z",
+  "Web/JavaScript/Reference/Global_Objects/String/fromCharCode": {
+    "modified": "2019-03-23T22:22:43.486Z",
     "contributors": [
-      "schlagi123"
+      "NielsNet",
+      "Huargh"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Math/cosh": {
-    "modified": "2020-10-15T21:45:13.156Z",
+  "Web/JavaScript/Reference/Global_Objects/String/includes": {
+    "modified": "2020-10-15T21:49:46.614Z",
     "contributors": [
-      "schlagi123"
+      "vssn",
+      "kdex",
+      "PascalAOMS"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Math/exp": {
-    "modified": "2020-10-15T21:45:11.971Z",
+  "Web/JavaScript/Reference/Global_Objects/String/indexOf": {
+    "modified": "2019-03-23T23:04:28.715Z",
     "contributors": [
-      "schlagi123"
+      "JohannesKuehnel",
+      "schlagi123",
+      "sroe",
+      "pascalhofmann",
+      "c4re"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Math/expm1": {
-    "modified": "2020-10-15T21:45:13.158Z",
+  "Web/JavaScript/Reference/Global_Objects/String/lastIndexOf": {
+    "modified": "2019-03-23T22:56:44.027Z",
     "contributors": [
-      "schlagi123"
+      "BenB",
+      "Chips100",
+      "flottokarotto"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Math/floor": {
-    "modified": "2020-10-15T21:40:05.734Z",
+  "Web/JavaScript/Reference/Global_Objects/String/length": {
+    "modified": "2020-10-15T21:34:41.966Z",
     "contributors": [
+      "Stuhl",
       "schlagi123",
-      "mcmunder",
+      "labcode-de",
       "flottokarotto"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Math/fround": {
-    "modified": "2020-10-15T21:45:14.992Z",
-    "contributors": [
-      "schlagi123"
-    ]
-  },
-  "Web/JavaScript/Reference/Global_Objects/Math/hypot": {
-    "modified": "2020-10-15T21:45:16.601Z",
+  "Web/JavaScript/Reference/Global_Objects/String/match": {
+    "modified": "2020-10-15T21:54:33.157Z",
     "contributors": [
-      "gunnarbittersmann",
-      "schlagi123"
+      "alberts+",
+      "d4rkne55",
+      "Tosch110",
+      "afoeder",
+      "tobiasherber"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Math/imul": {
-    "modified": "2020-10-15T21:45:04.964Z",
+  "Web/JavaScript/Reference/Global_Objects/String/raw": {
+    "modified": "2019-03-23T22:34:12.947Z",
     "contributors": [
-      "schlagi123"
+      "kdex",
+      "bfncs",
+      "schlagi123",
+      "cnu301"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Math/log": {
-    "modified": "2020-10-23T10:19:29.166Z",
+  "Web/JavaScript/Reference/Global_Objects/String/repeat": {
+    "modified": "2020-10-15T22:06:26.477Z",
     "contributors": [
-      "sttzr",
-      "schlagi123"
+      "AlexWayhill"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Math/log10": {
-    "modified": "2020-10-15T21:45:15.451Z",
+  "Web/JavaScript/Reference/Global_Objects/String/replace": {
+    "modified": "2019-11-20T12:28:26.785Z",
     "contributors": [
-      "schlagi123"
+      "fools-mate",
+      "danieldiekmeier",
+      "kkoop",
+      "HdHeiniDev",
+      "giffeler",
+      "TobiGe",
+      "fancyFranci",
+      "schlagi123",
+      "Saschlong",
+      "mower",
+      "tspaeth",
+      "fscholz",
+      "powerswitch"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Math/log1p": {
-    "modified": "2020-10-15T21:45:15.457Z",
+  "Web/JavaScript/Reference/Global_Objects/String/slice": {
+    "modified": "2019-03-23T22:18:04.121Z",
     "contributors": [
-      "schlagi123"
+      "napengam",
+      "didierCH",
+      "jay-bricksoft"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Math/log2": {
-    "modified": "2020-10-15T21:45:15.290Z",
+  "Web/JavaScript/Reference/Global_Objects/String/split": {
+    "modified": "2020-10-15T21:34:44.394Z",
     "contributors": [
-      "schlagi123"
+      "SebinNyshkim",
+      "Ruupatt",
+      "shaedrich",
+      "virtusmaior",
+      "josephinepanda"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Math/math.random": {
-    "modified": "2020-10-15T21:36:41.048Z",
+  "Web/JavaScript/Reference/Global_Objects/String/startsWith": {
+    "modified": "2019-09-27T21:50:55.652Z",
     "contributors": [
-      "grumpy-cat",
+      "daluege",
+      "MWojt",
+      "kdex",
+      "Aaric",
       "schlagi123",
-      "cami",
-      "serv-inc",
-      "Dargmuesli"
+      "christ2go"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Math/max": {
-    "modified": "2020-10-15T21:37:55.703Z",
+  "Web/JavaScript/Reference/Global_Objects/String/substr": {
+    "modified": "2019-03-26T09:57:55.345Z",
     "contributors": [
-      "tzimmermann",
+      "F4k3rzZ",
       "schlagi123",
-      "screeny05",
-      "Elytherion",
-      "ptitmouton"
+      "jazzpi"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Math/min": {
-    "modified": "2020-10-15T21:33:32.757Z",
+  "Web/JavaScript/Reference/Global_Objects/String/substring": {
+    "modified": "2019-05-22T10:50:37.923Z",
     "contributors": [
-      "Stnieder",
-      "schlagi123",
-      "cedrichaase",
-      "SSchnitzler"
+      "DragonPerl",
+      "thebigbla",
+      "KillerCodeMonkey"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Math/pow": {
-    "modified": "2020-10-15T21:39:55.052Z",
+  "Web/JavaScript/Reference/Global_Objects/String/toLowerCase": {
+    "modified": "2020-10-15T21:37:54.853Z",
     "contributors": [
       "schlagi123",
-      "alice-wl"
+      "Chips100"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Math/round": {
-    "modified": "2020-10-15T21:34:19.737Z",
+  "Web/JavaScript/Reference/Global_Objects/String/toUpperCase": {
+    "modified": "2019-03-23T22:31:03.601Z",
     "contributors": [
-      "aserraric",
-      "schlagi123",
-      "RefToDev",
-      "Krayzeee92",
-      "DanMyshkin",
-      "michaelkoehne"
+      "nextlevelshit",
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Math/sign": {
-    "modified": "2020-10-15T21:45:13.058Z",
+  "Web/JavaScript/Reference/Global_Objects/SyntaxError": {
+    "modified": "2020-10-15T21:46:23.938Z",
     "contributors": [
       "schlagi123",
-      "cedrichaase"
+      "fscholz"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Math/sin": {
-    "modified": "2020-10-15T21:45:12.206Z",
+  "Web/JavaScript/Reference/Global_Objects/TypeError": {
+    "modified": "2020-10-15T21:51:09.089Z",
     "contributors": [
-      "ModellbahnFreak",
-      "schlagi123"
+      "schlagi123",
+      "Sheggy"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Math/sinh": {
-    "modified": "2020-10-15T21:45:14.822Z",
+  "Web/JavaScript/Reference/Global_Objects/WebAssembly": {
+    "modified": "2020-10-15T22:14:29.365Z",
     "contributors": [
-      "schlagi123"
+      "vssn"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Math/sqrt": {
-    "modified": "2020-10-15T21:45:14.468Z",
+  "Web/JavaScript/Reference/Global_Objects/WebAssembly/compile": {
+    "modified": "2020-10-15T22:14:53.372Z",
     "contributors": [
-      "schlagi123"
+      "vssn"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Math/tan": {
-    "modified": "2020-10-15T21:45:14.142Z",
+  "Web/JavaScript/Reference/Global_Objects/WebAssembly/compileStreaming": {
+    "modified": "2020-10-15T22:15:11.252Z",
     "contributors": [
-      "schlagi123"
+      "vssn"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Math/tanh": {
-    "modified": "2020-10-15T21:45:13.983Z",
+  "Web/JavaScript/Reference/Global_Objects/decodeURIComponent": {
+    "modified": "2020-03-12T19:44:41.805Z",
     "contributors": [
-      "schlagi123"
+      "Saerdn"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Math/trunc": {
-    "modified": "2020-10-15T21:45:15.988Z",
+  "Web/JavaScript/Reference/Global_Objects/encodeURI": {
+    "modified": "2020-03-12T19:46:14.428Z",
     "contributors": [
-      "4typen",
-      "schlagi123",
-      "giffeler"
+      "eras0r",
+      "knurzl"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/NaN": {
-    "modified": "2020-10-15T21:24:05.253Z",
+  "Web/JavaScript/Reference/Global_Objects/encodeURIComponent": {
+    "modified": "2020-03-12T19:42:09.480Z",
     "contributors": [
-      "schlagi123",
-      "boppy",
-      "SphinxKnight",
-      "fscholz",
-      "Jens_Verneuer"
+      "giffeler",
+      "kaenganxt",
+      "dbohn",
+      "ViciousPecan"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Number": {
-    "modified": "2020-10-15T21:26:52.848Z",
+  "Web/JavaScript/Reference/Global_Objects/escape": {
+    "modified": "2020-03-12T19:44:36.899Z",
     "contributors": [
-      "schlagi123",
-      "mreu",
-      "StevenS77",
-      "mrcktz",
-      "fscholz",
-      "AngelSankturio"
+      "gappeh"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Number/EPSILON": {
-    "modified": "2020-10-15T21:26:52.886Z",
+  "Web/JavaScript/Reference/Global_Objects/globalThis": {
+    "modified": "2020-10-15T22:34:14.804Z",
     "contributors": [
-      "mitch3ls",
-      "schlagi123",
-      "Steditor",
-      "Tilli81",
-      "fscholz",
-      "AngelSankturio"
+      "vssn"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER": {
-    "modified": "2020-10-15T21:45:17.017Z",
+  "Web/JavaScript/Reference/Global_Objects/isFinite": {
+    "modified": "2020-10-15T21:32:05.093Z",
     "contributors": [
-      "EpsilonBoo",
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE": {
-    "modified": "2020-10-15T21:45:17.604Z",
+  "Web/JavaScript/Reference/Global_Objects/isNaN": {
+    "modified": "2020-10-15T21:32:07.461Z",
     "contributors": [
+      "Steditor",
       "schlagi123",
-      "Fuzzyma"
+      "SerkanSipahi",
+      "mazilema",
+      "zf2timo"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER": {
-    "modified": "2020-10-15T21:45:17.586Z",
+  "Web/JavaScript/Reference/Global_Objects/null": {
+    "modified": "2020-10-15T21:32:16.691Z",
     "contributors": [
-      "schlagi123"
+      "schlagi123",
+      "HolgerJeromin",
+      "cuatro"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Number/MIN_VALUE": {
-    "modified": "2020-10-30T06:50:59.921Z",
+  "Web/JavaScript/Reference/Global_Objects/parseFloat": {
+    "modified": "2020-10-15T21:34:09.121Z",
     "contributors": [
-      "thefabicraft-github",
-      "schlagi123"
+      "hellerim",
+      "schlagi123",
+      "bsotodo",
+      "crood"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Number/NEGATIVE_INFINITY": {
-    "modified": "2020-10-15T21:32:05.912Z",
+  "Web/JavaScript/Reference/Global_Objects/parseInt": {
+    "modified": "2020-10-15T21:45:22.117Z",
     "contributors": [
-      "schlagi123"
+      "schlagi123",
+      "giffeler",
+      "macahi",
+      "mazilema"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Number/NaN": {
-    "modified": "2020-10-15T21:31:59.627Z",
+  "Web/JavaScript/Reference/Global_Objects/undefined": {
+    "modified": "2020-10-15T21:32:16.777Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Number/POSITIVE_INFINITY": {
-    "modified": "2020-10-15T21:32:00.956Z",
+  "Web/JavaScript/Reference/Global_Objects/unescape": {
+    "modified": "2020-03-12T19:41:42.907Z",
     "contributors": [
-      "schlagi123"
+      "thusslack"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Number/isFinite": {
-    "modified": "2020-10-15T21:32:05.695Z",
+  "Web/JavaScript/Reference/Global_Objects/uneval": {
+    "modified": "2020-03-12T19:44:53.530Z",
     "contributors": [
-      "schlagi123"
+      "teoli",
+      "SamBrishes"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Number/isInteger": {
-    "modified": "2020-10-15T21:45:17.315Z",
+  "Web/JavaScript/Reference/Iteration_protocols": {
+    "modified": "2020-03-12T19:47:50.502Z",
     "contributors": [
-      "schlagi123",
-      "MauriceAyasse"
+      "P215W",
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Number/isNaN": {
-    "modified": "2020-10-15T21:32:02.637Z",
+  "Web/JavaScript/Reference/Lexical_grammar": {
+    "modified": "2020-10-15T22:03:30.555Z",
     "contributors": [
-      "schlagi123",
-      "mazilema",
-      "renemaas"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger": {
-    "modified": "2020-10-15T21:45:20.941Z",
+  "Web/JavaScript/Reference/Operators": {
+    "modified": "2020-10-15T21:31:28.975Z",
     "contributors": [
-      "Frdnspnzr",
-      "schlagi123"
+      "schlagi123",
+      "fscholz",
+      "loki"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Number/parseFloat": {
-    "modified": "2020-10-15T21:45:17.199Z",
+  "Web/JavaScript/Reference/Operators/Addition": {
+    "modified": "2020-10-15T22:34:37.156Z",
     "contributors": [
-      "schlagi123"
+      "cs.schueler"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Number/parseInt": {
-    "modified": "2020-10-15T21:45:18.357Z",
+  "Web/JavaScript/Reference/Operators/Comma_Operator": {
+    "modified": "2020-10-15T21:59:30.294Z",
     "contributors": [
       "schlagi123",
-      "daugsbi",
-      "DennisAhaus"
+      "vssn"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Number/prototype": {
-    "modified": "2020-10-15T21:45:14.479Z",
+  "Web/JavaScript/Reference/Operators/Conditional_Operator": {
+    "modified": "2020-10-15T21:41:29.204Z",
     "contributors": [
+      "Coding-Boss",
+      "nopeJS",
+      "Binnox",
       "schlagi123",
-      "doeck"
+      "JWPapi",
+      "chauthai",
+      "terrluhr"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Number/toExponential": {
-    "modified": "2020-10-15T21:45:19.048Z",
+  "Web/JavaScript/Reference/Operators/Grouping": {
+    "modified": "2020-10-15T22:05:46.615Z",
     "contributors": [
-      "joebau0815",
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Number/toFixed": {
-    "modified": "2020-10-15T21:45:19.906Z",
+  "Web/JavaScript/Reference/Operators/Operator_Precedence": {
+    "modified": "2020-03-12T19:43:04.570Z",
     "contributors": [
-      "gunnarbittersmann",
+      "oliver-gramberg",
+      "Heronils",
       "schlagi123",
-      "mack3457",
-      "mzur",
-      "phax"
+      "Karpfador",
+      "dcodeIO",
+      "LK-Reichl-F",
+      "wLikeFish"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Number/toLocaleString": {
-    "modified": "2020-10-15T21:45:20.416Z",
+  "Web/JavaScript/Reference/Operators/Pipeline_operator": {
+    "modified": "2020-10-15T22:05:45.089Z",
     "contributors": [
-      "Hanmac",
-      "schlagi123",
-      "mreu",
-      "sdeitmer",
-      "PierreCorell"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Number/toPrecision": {
-    "modified": "2020-10-15T21:45:20.364Z",
+  "Web/JavaScript/Reference/Operators/Property_Accessors": {
+    "modified": "2020-10-15T21:55:35.876Z",
     "contributors": [
       "schlagi123",
-      "phax"
-    ]
-  },
-  "Web/JavaScript/Reference/Global_Objects/Number/toSource": {
-    "modified": "2020-10-15T21:45:18.319Z",
-    "contributors": [
-      "schlagi123"
+      "timosperisen"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Number/toString": {
-    "modified": "2020-10-15T21:45:18.952Z",
+  "Web/JavaScript/Reference/Operators/Spread_syntax": {
+    "modified": "2020-10-15T22:05:09.977Z",
     "contributors": [
+      "mischah",
+      "shaedrich",
       "schlagi123",
-      "giffeler"
+      "mschleeweiss"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Number/valueOf": {
-    "modified": "2020-10-15T21:45:19.158Z",
+  "Web/JavaScript/Reference/Operators/async_function": {
+    "modified": "2020-10-15T22:05:47.683Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Object": {
-    "modified": "2020-10-15T21:21:51.304Z",
+  "Web/JavaScript/Reference/Operators/await": {
+    "modified": "2020-10-15T22:05:59.887Z",
     "contributors": [
-      "bobbor",
-      "wbamberg",
-      "fscholz",
-      "mholland1337"
+      "joebau0815",
+      "saschbro",
+      "chrkhl",
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__": {
-    "modified": "2019-03-23T22:08:08.241Z",
+  "Web/JavaScript/Reference/Operators/class": {
+    "modified": "2020-03-12T19:42:53.976Z",
     "contributors": [
-      "Christian2507"
+      "kdex",
+      "Eiknheimer",
+      "schlagi123",
+      "terrluhr"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Object/assign": {
-    "modified": "2020-10-15T21:46:53.703Z",
+  "Web/JavaScript/Reference/Operators/delete": {
+    "modified": "2020-10-15T21:38:04.252Z",
     "contributors": [
-      "Stefie",
+      "kowarschick",
       "schlagi123",
-      "Yogu",
-      "henrymoews",
-      "KuhnEDV"
+      "pascaliske",
+      "enexusde",
+      "CaptainStone",
+      "olhaar"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Object/constructor": {
-    "modified": "2019-03-23T23:24:06.881Z",
+  "Web/JavaScript/Reference/Operators/function": {
+    "modified": "2020-10-15T21:56:30.909Z",
     "contributors": [
-      "Olli64",
-      "fscholz",
-      "Airblader"
+      "m5yu",
+      "jakobpack",
+      "schlagi123",
+      "christianrhansen",
+      "vssn",
+      "amelzer"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Object/create": {
-    "modified": "2019-03-23T23:03:06.202Z",
+  "Web/JavaScript/Reference/Operators/function*": {
+    "modified": "2020-10-15T22:05:42.272Z",
     "contributors": [
-      "arothweiler",
-      "peter30mar2017",
-      "fmsy",
-      "BurnerPat",
-      "Hendrikto"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Object/defineProperty": {
-    "modified": "2019-07-01T07:52:37.430Z",
+  "Web/JavaScript/Reference/Operators/in": {
+    "modified": "2020-10-15T21:39:06.431Z",
     "contributors": [
-      "JanSchuermannPH",
-      "Univream",
-      "tvormweg"
+      "mfranzke",
+      "schlagi123",
+      "kdex",
+      "xergon"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Object/entries": {
-    "modified": "2020-10-15T22:19:15.987Z",
+  "Web/JavaScript/Reference/Operators/instanceof": {
+    "modified": "2020-10-15T21:39:26.955Z",
     "contributors": [
-      "franca"
+      "schlagi123",
+      "HolgerJeromin",
+      "flipace",
+      "weedukind"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Object/freeze": {
-    "modified": "2020-10-15T21:33:52.609Z",
+  "Web/JavaScript/Reference/Operators/new": {
+    "modified": "2020-10-15T21:38:03.135Z",
     "contributors": [
-      "SebinNyshkim",
-      "christophfriedrich",
-      "asilberschneider",
-      "clemenshelm",
+      "FelixSab",
       "schlagi123",
-      "sbusch",
-      "in0x"
+      "Maugo",
+      "michiruckstuhl",
+      "danbru1211"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames": {
-    "modified": "2019-03-23T22:20:00.098Z",
+  "Web/JavaScript/Reference/Operators/new.target": {
+    "modified": "2020-10-15T22:05:44.821Z",
     "contributors": [
-      "janbiasi"
+      "hporten",
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf": {
-    "modified": "2019-03-23T22:16:28.123Z",
+  "Web/JavaScript/Reference/Operators/super": {
+    "modified": "2020-10-15T21:47:20.372Z",
     "contributors": [
-      "StevenS77",
-      "klausbx"
+      "schlagi123",
+      "kdex",
+      "Skycro"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty": {
-    "modified": "2019-03-23T22:50:54.746Z",
+  "Web/JavaScript/Reference/Operators/this": {
+    "modified": "2020-10-15T21:46:51.232Z",
     "contributors": [
-      "bambebituna",
-      "ilkercat",
+      "KratosAurion",
       "schlagi123",
-      "juicyarts"
+      "kelthuzad",
+      "eluchsinger"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Object/is": {
-    "modified": "2020-10-15T21:25:28.677Z",
+  "Web/JavaScript/Reference/Operators/typeof": {
+    "modified": "2020-11-06T10:38:36.219Z",
     "contributors": [
-      "rioderelfte",
+      "mschleeweiss",
+      "schlagi123",
+      "dmarku"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/void": {
+    "modified": "2020-10-15T21:34:41.746Z",
+    "contributors": [
+      "schlagi123",
+      "amelzer",
+      "JohannesDienst"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/yield": {
+    "modified": "2020-10-15T22:05:44.303Z",
+    "contributors": [
+      "kevinfoerster",
+      "ionxenia",
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/yield*": {
+    "modified": "2020-10-15T22:05:43.798Z",
+    "contributors": [
+      "jborsch",
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements": {
+    "modified": "2020-10-15T21:30:44.678Z",
+    "contributors": [
+      "Galajda",
+      "schlagi123",
+      "JorisGutjahr",
+      "fscholz",
+      "SphinxKnight",
+      "timbernasley"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/Empty": {
+    "modified": "2020-03-12T19:43:34.145Z",
+    "contributors": [
+      "KuhnEDV"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/async_function": {
+    "modified": "2020-10-15T22:13:51.356Z",
+    "contributors": [
+      "Dodo-the-Coder",
+      "vssn",
+      "Galajda"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/block": {
+    "modified": "2020-10-15T21:32:12.580Z",
+    "contributors": [
+      "zuzuzu",
+      "yampus",
+      "mdschweda",
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/break": {
+    "modified": "2020-03-12T19:40:27.998Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/class": {
+    "modified": "2020-03-12T19:43:47.910Z",
+    "contributors": [
+      "kdex",
+      "Idrinth",
+      "schlagi123",
+      "eluchsinger"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/const": {
+    "modified": "2020-10-15T21:32:07.805Z",
+    "contributors": [
+      "zuzuzu",
+      "evayde",
+      "timlg07",
       "SphinxKnight",
       "kdex",
-      "level420",
-      "giffeler",
-      "StevenS77",
+      "marcelglaeser",
+      "andreashofer123",
       "fscholz",
-      "Airblader"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Object/isExtensible": {
-    "modified": "2019-03-23T22:15:34.012Z",
+  "Web/JavaScript/Reference/Statements/continue": {
+    "modified": "2020-10-15T21:45:50.193Z",
     "contributors": [
-      "dthdyver"
+      "schlagi123",
+      "KuhnEDV"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Object/isFrozen": {
-    "modified": "2020-10-15T22:20:16.815Z",
+  "Web/JavaScript/Reference/Statements/debugger": {
+    "modified": "2020-10-15T22:30:09.075Z",
     "contributors": [
-      "bobbor"
+      "zuzuzu"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Object/keys": {
-    "modified": "2019-03-23T23:05:44.528Z",
+  "Web/JavaScript/Reference/Statements/do...while": {
+    "modified": "2020-03-12T19:42:19.798Z",
     "contributors": [
-      "p2k",
+      "schlagi123",
+      "jumpball"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/export": {
+    "modified": "2020-10-15T21:41:31.690Z",
+    "contributors": [
+      "hoelzlmanuel",
+      "wheelmaker24",
+      "xchange11",
+      "schlagi123",
+      "Snapstromegon",
+      "thomaskempel",
+      "yampus",
+      "rroehrig",
+      "tuffi111",
+      "sbusch"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/for": {
+    "modified": "2020-03-12T19:42:06.001Z",
+    "contributors": [
+      "schlagi123",
+      "Elyasin"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/for...in": {
+    "modified": "2020-05-27T10:00:58.351Z",
+    "contributors": [
+      "zuzuzu",
+      "baasti",
+      "koedev",
+      "Vitroxyn",
+      "schlagi123",
+      "KuhnEDV",
+      "JohannesDienst",
+      "fscholz",
+      "lupo72"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/for...of": {
+    "modified": "2020-03-12T19:41:38.990Z",
+    "contributors": [
+      "pastparty",
+      "Xan2063",
+      "SphinxKnight",
       "kdex",
+      "Narigo"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/function*": {
+    "modified": "2020-10-15T21:45:47.005Z",
+    "contributors": [
+      "oliver-gramberg",
+      "arothweiler",
       "schlagi123",
-      "cepharum",
-      "Bavragor"
+      "xstable",
+      "yampus",
+      "kdex",
+      "KuhnEDV"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Object/proto": {
-    "modified": "2019-04-16T09:05:23.152Z",
+  "Web/JavaScript/Reference/Statements/if...else": {
+    "modified": "2020-10-15T21:32:18.484Z",
     "contributors": [
-      "barcmoehm",
-      "StevenS77"
+      "schlagi123",
+      "yampus"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Object/prototype": {
-    "modified": "2019-03-23T22:30:41.741Z",
+  "Web/JavaScript/Reference/Statements/import": {
+    "modified": "2020-10-15T21:39:21.688Z",
     "contributors": [
-      "peter30mar2017",
-      "fl1p"
+      "fmeyertoens",
+      "kdex",
+      "Snapstromegon",
+      "Kani1013",
+      "michaelze",
+      "yampus",
+      "yannick_versley",
+      "BennyAlex",
+      "Marzelpan",
+      "schlagi123",
+      "Breaker222",
+      "Simmarith",
+      "matbad"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Object/toSource": {
-    "modified": "2019-03-23T22:08:15.191Z",
+  "Web/JavaScript/Reference/Statements/label": {
+    "modified": "2020-03-12T19:43:50.191Z",
     "contributors": [
-      "teoli",
-      "Christian2507"
+      "schlagi123",
+      "eluchsinger"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Object/valueOf": {
-    "modified": "2020-10-15T22:05:39.564Z",
+  "Web/JavaScript/Reference/Statements/let": {
+    "modified": "2020-03-12T19:40:29.227Z",
     "contributors": [
-      "paulkoegel",
-      "dennissterzenbach"
+      "evayde",
+      "rs-github",
+      "cami",
+      "Flonk",
+      "kdex",
+      "sigoa",
+      "TheFaithfulCritic",
+      "FliegenKLATSCH",
+      "gtmn",
+      "rimace",
+      "schlagi123",
+      "AndreeWille",
+      "th-we",
+      "chk1",
+      "fscholz"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Object/values": {
-    "modified": "2019-03-18T20:58:26.548Z",
+  "Web/JavaScript/Reference/Statements/return": {
+    "modified": "2020-03-12T19:44:07.700Z",
     "contributors": [
-      "filmor",
-      "rhoio",
-      "andresattler"
+      "christophfriedrich",
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/switch": {
+    "modified": "2020-03-12T19:41:30.012Z",
+    "contributors": [
+      "schlagi123",
+      "Elyasin"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/throw": {
+    "modified": "2020-03-12T19:43:13.297Z",
+    "contributors": [
+      "StanE"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/try...catch": {
+    "modified": "2020-03-12T19:45:01.106Z",
+    "contributors": [
+      "SpikePy",
+      "timomeh",
+      "stepdate"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/var": {
+    "modified": "2020-03-12T19:40:22.049Z",
+    "contributors": [
+      "rs-github",
+      "trillerpfeife",
+      "Epiglottis",
+      "schlagi123",
+      "rkoch",
+      "th-we",
+      "fscholz"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/while": {
+    "modified": "2020-10-15T21:37:40.413Z",
+    "contributors": [
+      "dmho",
+      "schlagi123",
+      "Jintzo",
+      "Elyasin"
+    ]
+  },
+  "Web/JavaScript/Reference/Strict_mode": {
+    "modified": "2020-05-27T12:41:43.793Z",
+    "contributors": [
+      "zuzuzu",
+      "SebinNyshkim",
+      "fscholz"
+    ]
+  },
+  "Web/JavaScript/Typed_arrays": {
+    "modified": "2020-03-12T19:40:57.461Z",
+    "contributors": [
+      "flying-sheep",
+      "ksm2",
+      "Adowrath",
+      "schlagi123",
+      "sspringer82",
+      "fscholz",
+      "rogerraetzel"
+    ]
+  },
+  "Web/Manifest": {
+    "modified": "2020-08-31T08:04:51.977Z",
+    "contributors": [
+      "Zyndoras",
+      "gpion",
+      "SphinxKnight",
+      "tomknig",
+      "Lanseuo",
+      "lionralfs",
+      "hrjhn",
+      "McSodbrenner",
+      "fscholz",
+      "mojoaxel",
+      "tempelgogo",
+      "yzanomi"
+    ]
+  },
+  "Web/Manifest/short_name": {
+    "modified": "2020-10-15T22:31:31.945Z",
+    "contributors": [
+      "kevin98"
+    ]
+  },
+  "Web/MathML": {
+    "modified": "2019-03-23T22:48:05.789Z",
+    "contributors": [
+      "Draussenduscher",
+      "jumpball"
+    ]
+  },
+  "Web/MathML/Attribute": {
+    "modified": "2020-12-10T08:16:36.851Z",
+    "contributors": [
+      "Borgitowner",
+      "Draussenduscher"
+    ]
+  },
+  "Web/MathML/Element": {
+    "modified": "2019-03-23T22:41:28.276Z",
+    "contributors": [
+      "Draussenduscher"
+    ]
+  },
+  "Web/MathML/Element/maction": {
+    "modified": "2019-03-23T22:35:35.054Z",
+    "contributors": [
+      "Draussenduscher"
+    ]
+  },
+  "Web/MathML/Element/math": {
+    "modified": "2019-03-18T21:15:50.121Z",
+    "contributors": [
+      "Draussenduscher"
+    ]
+  },
+  "Web/MathML/Element/menclose": {
+    "modified": "2019-03-23T22:35:37.131Z",
+    "contributors": [
+      "Draussenduscher"
+    ]
+  },
+  "Web/MathML/Element/merror": {
+    "modified": "2019-03-23T22:35:42.535Z",
+    "contributors": [
+      "Draussenduscher"
+    ]
+  },
+  "Web/MathML/Element/mfenced": {
+    "modified": "2019-03-23T22:35:44.635Z",
+    "contributors": [
+      "Draussenduscher"
+    ]
+  },
+  "Web/MathML/Element/mfrac": {
+    "modified": "2019-03-23T22:39:13.573Z",
+    "contributors": [
+      "Draussenduscher"
+    ]
+  },
+  "Web/MathML/Element/mi": {
+    "modified": "2019-03-23T22:39:56.494Z",
+    "contributors": [
+      "Draussenduscher"
+    ]
+  },
+  "Web/MathML/Element/mn": {
+    "modified": "2019-03-23T22:40:17.694Z",
+    "contributors": [
+      "Draussenduscher"
+    ]
+  },
+  "Web/MathML/Element/mo": {
+    "modified": "2019-03-23T22:40:19.804Z",
+    "contributors": [
+      "Draussenduscher"
+    ]
+  },
+  "Web/MathML/Element/mover": {
+    "modified": "2019-03-23T22:35:41.970Z",
+    "contributors": [
+      "Draussenduscher"
+    ]
+  },
+  "Web/MathML/Element/mpadded": {
+    "modified": "2019-03-23T22:35:41.097Z",
+    "contributors": [
+      "Draussenduscher"
+    ]
+  },
+  "Web/MathML/Element/mphantom": {
+    "modified": "2019-03-23T22:35:42.968Z",
+    "contributors": [
+      "Draussenduscher"
+    ]
+  },
+  "Web/MathML/Element/mroot": {
+    "modified": "2019-03-23T22:40:25.676Z",
+    "contributors": [
+      "Draussenduscher",
+      "jumpball"
+    ]
+  },
+  "Web/MathML/Element/mrow": {
+    "modified": "2019-03-23T22:40:55.520Z",
+    "contributors": [
+      "Draussenduscher"
+    ]
+  },
+  "Web/MathML/Element/ms": {
+    "modified": "2019-03-23T22:35:40.687Z",
+    "contributors": [
+      "Draussenduscher"
+    ]
+  },
+  "Web/MathML/Element/mspace": {
+    "modified": "2019-03-23T22:35:41.572Z",
+    "contributors": [
+      "Draussenduscher"
+    ]
+  },
+  "Web/MathML/Element/msqrt": {
+    "modified": "2019-03-23T22:40:04.280Z",
+    "contributors": [
+      "Draussenduscher"
+    ]
+  },
+  "Web/MathML/Element/mstyle": {
+    "modified": "2020-10-15T21:41:26.425Z",
+    "contributors": [
+      "bershanskiy",
+      "Draussenduscher"
+    ]
+  },
+  "Web/MathML/Element/msub": {
+    "modified": "2019-03-18T21:15:46.910Z",
+    "contributors": [
+      "Draussenduscher"
+    ]
+  },
+  "Web/MathML/Element/msubsup": {
+    "modified": "2019-03-23T22:35:33.789Z",
+    "contributors": [
+      "Draussenduscher"
+    ]
+  },
+  "Web/MathML/Element/msup": {
+    "modified": "2019-03-23T22:35:34.021Z",
+    "contributors": [
+      "Draussenduscher"
+    ]
+  },
+  "Web/MathML/Element/mtable": {
+    "modified": "2019-03-23T22:35:58.744Z",
+    "contributors": [
+      "Draussenduscher"
+    ]
+  },
+  "Web/MathML/Element/mtd": {
+    "modified": "2019-03-23T22:36:01.471Z",
+    "contributors": [
+      "Draussenduscher"
+    ]
+  },
+  "Web/MathML/Element/mtext": {
+    "modified": "2019-03-23T22:35:39.496Z",
+    "contributors": [
+      "Draussenduscher"
+    ]
+  },
+  "Web/MathML/Element/mtr": {
+    "modified": "2019-03-23T22:36:03.515Z",
+    "contributors": [
+      "Draussenduscher"
+    ]
+  },
+  "Web/MathML/Element/munder": {
+    "modified": "2019-03-23T22:35:33.540Z",
+    "contributors": [
+      "Draussenduscher"
+    ]
+  },
+  "Web/MathML/Element/munderover": {
+    "modified": "2019-03-23T22:35:34.263Z",
+    "contributors": [
+      "Draussenduscher"
+    ]
+  },
+  "Web/Performance": {
+    "modified": "2020-05-22T10:23:33.706Z",
+    "contributors": [
+      "chrisdavidmills"
+    ]
+  },
+  "Web/Performance/dns-prefetch": {
+    "modified": "2020-05-22T10:23:34.773Z",
+    "contributors": [
+      "chryxf"
+    ]
+  },
+  "Web/Progressive_web_apps": {
+    "modified": "2019-08-19T03:49:08.791Z",
+    "contributors": [
+      "fschaupp",
+      "chrisdavidmills",
+      "friedger"
+    ]
+  },
+  "Web/Reference": {
+    "modified": "2020-07-03T18:35:25.162Z",
+    "contributors": [
+      "duckymirror",
+      "fhwfzfge",
+      "Patrick_St.",
+      "Nickolay"
+    ]
+  },
+  "Web/Reference/API": {
+    "modified": "2019-03-23T23:18:19.126Z",
+    "contributors": [
+      "goligo",
+      "Hanibal1963",
+      "AngelSankturio"
+    ]
+  },
+  "Web/SVG": {
+    "modified": "2019-03-24T00:13:09.048Z",
+    "contributors": [
+      "teoli",
+      "ethertank",
+      "DavidWalsh",
+      "nicolasmn",
+      "fscholz",
+      "Mickiboy",
+      "-=Renegade=-",
+      "Ak120"
+    ]
+  },
+  "Web/SVG/Attribute": {
+    "modified": "2019-03-23T22:14:31.297Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/SVG/Attribute/class": {
+    "modified": "2019-03-23T22:11:26.719Z",
+    "contributors": [
+      "grobmeier"
+    ]
+  },
+  "Web/SVG/Attribute/preserveAspectRatio": {
+    "modified": "2019-09-30T23:24:10.073Z",
+    "contributors": [
+      "JackLeEmmerdeur",
+      "jbvsusj"
+    ]
+  },
+  "Web/SVG/Element": {
+    "modified": "2019-03-23T23:33:28.131Z",
+    "contributors": [
+      "Sebastianz",
+      "teoli",
+      "ethertank"
+    ]
+  },
+  "Web/SVG/Element/animate": {
+    "modified": "2020-10-15T21:26:19.629Z",
+    "contributors": [
+      "Dschubba",
+      "Sebastianz",
+      "fscholz",
+      "teoli",
+      "martin_ti"
+    ]
+  },
+  "Web/SVG/Element/circle": {
+    "modified": "2019-03-23T23:02:17.743Z",
+    "contributors": [
+      "wbamberg",
+      "Sebastianz",
+      "Oliver_Schafeld",
+      "ppk42"
+    ]
+  },
+  "Web/SVG/Element/foreignObject": {
+    "modified": "2019-03-23T23:21:17.052Z",
+    "contributors": [
+      "Sebastianz",
+      "gluecksmelodie",
+      "teoli",
+      "powerswitch"
+    ]
+  },
+  "Web/SVG/Element/path": {
+    "modified": "2020-10-15T22:17:06.133Z",
+    "contributors": [
+      "MyLittlePenguin"
+    ]
+  },
+  "Web/SVG/Element/polygon": {
+    "modified": "2019-03-23T22:09:13.846Z",
+    "contributors": [
+      "Peremptor"
+    ]
+  },
+  "Web/SVG/Element/rect": {
+    "modified": "2019-03-18T21:41:17.238Z",
+    "contributors": [
+      "philSixZero"
+    ]
+  },
+  "Web/SVG/Element/svg": {
+    "modified": "2020-10-15T21:43:06.785Z",
+    "contributors": [
+      "Volker-E",
+      "Dschubba",
+      "mattenmad"
+    ]
+  },
+  "Web/SVG/Element/textPath": {
+    "modified": "2019-03-23T22:46:20.244Z",
+    "contributors": [
+      "Sebastianz",
+      "modellking"
+    ]
+  },
+  "Web/SVG/Element/view": {
+    "modified": "2019-03-18T21:15:30.402Z",
+    "contributors": [
+      "Crucion"
+    ]
+  },
+  "Web/SVG/Namespaces_Crash_Course": {
+    "modified": "2019-03-23T22:26:27.398Z",
+    "contributors": [
+      "bgueth",
+      "Oliver_Schafeld"
+    ]
+  },
+  "Web/SVG/Tutorial": {
+    "modified": "2019-01-16T14:32:30.945Z",
+    "contributors": [
+      "teoli",
+      "fscholz",
+      "Mickiboy"
+    ]
+  },
+  "Web/SVG/Tutorial/Fills_and_Strokes": {
+    "modified": "2019-03-23T22:15:38.417Z",
+    "contributors": [
+      "kevinfoerster",
+      "sebastianbarfurth"
+    ]
+  },
+  "Web/SVG/Tutorial/SVG_Image_Tag": {
+    "modified": "2019-04-14T13:23:03.557Z",
+    "contributors": [
+      "Heupferdchenritter",
+      "RmnWtnkmp"
+    ]
+  },
+  "Web/SVG/Tutorial/Tools_for_SVG": {
+    "modified": "2019-04-14T13:43:24.617Z",
+    "contributors": [
+      "Heupferdchenritter"
+    ]
+  },
+  "Web/Security": {
+    "modified": "2019-09-10T16:31:42.422Z",
+    "contributors": [
+      "SphinxKnight",
+      "Dschubba",
+      "marumari"
+    ]
+  },
+  "Web/Security/Certificate_Transparency": {
+    "modified": "2020-05-12T09:08:53.446Z",
+    "contributors": [
+      "dennissterzenbach"
+    ]
+  },
+  "Web/Web_Components": {
+    "modified": "2019-03-18T20:58:34.307Z",
+    "contributors": [
+      "SetTrend",
+      "vssn",
+      "pkos98",
+      "dreitzner",
+      "DomenicDenicola"
+    ]
+  },
+  "Web/Web_Components/Using_custom_elements": {
+    "modified": "2020-03-12T05:58:55.117Z",
+    "contributors": [
+      "napengam",
+      "stekoe",
+      "hermann77",
+      "Maik",
+      "td8"
+    ]
+  },
+  "Web/XML": {
+    "modified": "2019-03-24T00:03:04.279Z",
+    "contributors": [
+      "ExE-Boss"
+    ]
+  },
+  "Web/XSLT": {
+    "modified": "2019-03-24T00:03:43.722Z",
+    "contributors": [
+      "ExE-Boss",
+      "ysi",
+      "fscholz",
+      "Joda"
+    ]
+  },
+  "Mozilla/Firefox/Releases/1.5/Using_Firefox_1.5_caching": {
+    "modified": "2019-03-24T00:04:22.542Z",
+    "contributors": [
+      "wbamberg",
+      "fscholz",
+      "-=Renegade=-",
+      "Doozer"
+    ]
+  },
+  "Web/CSS/CSS_Columns/Using_multi-column_layouts": {
+    "modified": "2019-03-24T00:05:49.925Z",
+    "contributors": [
+      "SJW",
+      "fscholz",
+      "Mapag"
+    ]
+  },
+  "orphaned/Tools/Add-ons/DOM_Inspector": {
+    "modified": "2020-07-16T22:36:24.131Z",
+    "contributors": [
+      "wbamberg",
+      "nw520"
+    ]
+  },
+  "Mozilla/Firefox/Releases/3/Updating_extensions": {
+    "modified": "2019-12-13T20:33:28.025Z",
+    "contributors": [
+      "wbamberg",
+      "fscholz",
+      "Sheppy",
+      "Editmonkey",
+      "Jules Papillon"
+    ]
+  },
+  "Web/CSS/CSS_Images/Using_CSS_gradients": {
+    "modified": "2019-03-23T23:13:15.166Z",
+    "contributors": [
+      "Bennyville",
+      "wizAmit",
+      "slayslot",
+      "Sebastianz",
+      "floEdelmann"
+    ]
+  },
+  "Mozilla/Firefox/Releases/1.5/Changing_the_priority_of_HTTP_requests": {
+    "modified": "2019-10-30T20:00:38.264Z",
+    "contributors": [
+      "sklicek"
+    ]
+  },
+  "Mozilla/Firefox/Releases/1.5": {
+    "modified": "2019-03-24T00:04:17.420Z",
+    "contributors": [
+      "wbamberg",
+      "fscholz",
+      "Jules Papillon",
+      "Agoist",
+      "Umifa",
+      "Crash"
+    ]
+  },
+  "Mozilla/Firefox/Releases/3": {
+    "modified": "2019-03-24T00:04:33.617Z",
+    "contributors": [
+      "wbamberg",
+      "fscholz",
+      "niels",
+      "Lukas Skywalker"
+    ]
+  },
+  "Mozilla/Firefox/Releases/3.5": {
+    "modified": "2019-03-24T00:04:29.361Z",
+    "contributors": [
+      "wbamberg",
+      "Timmi",
+      "fscholz",
+      "niels"
+    ]
+  },
+  "Glossary/Abstraction": {
+    "modified": "2019-03-23T22:15:58.737Z",
+    "contributors": [
+      "Sebastianz",
+      "ursingold",
+      "t1m0fej"
+    ]
+  },
+  "Glossary/Algorithm": {
+    "modified": "2019-03-23T22:10:22.994Z",
+    "contributors": [
+      "herbmaier",
+      "Tyrandus"
+    ]
+  },
+  "Glossary/Statement": {
+    "modified": "2019-04-20T19:38:11.191Z",
+    "contributors": [
+      "GreenPepper",
+      "Tyrandus"
+    ]
+  },
+  "Glossary/Asynchronous": {
+    "modified": "2019-06-18T06:50:55.111Z",
+    "contributors": [
+      "dbraun"
+    ]
+  },
+  "Glossary/Bandwidth": {
+    "modified": "2019-03-23T22:08:37.747Z",
+    "contributors": [
+      "sigoa",
+      "Rebecca70"
+    ]
+  },
+  "Glossary/CORS-safelisted_request_header": {
+    "modified": "2020-01-30T18:28:06.437Z",
+    "contributors": [
+      "TorbenKoehn"
+    ]
+  },
+  "Glossary/CSS_preprocessor": {
+    "modified": "2019-03-18T21:36:27.239Z",
+    "contributors": [
+      "Sixl-Daniel"
+    ]
+  },
+  "Glossary/Encapsulation": {
+    "modified": "2020-09-30T06:05:42.392Z",
+    "contributors": [
+      "Klingohle"
+    ]
+  },
+  "Glossary/Primitive": {
+    "modified": "2019-03-23T22:46:44.221Z",
+    "contributors": [
+      "Siphalor",
+      "andreas_inkoeln"
+    ]
+  },
+  "Glossary/First-class_Function": {
+    "modified": "2019-03-18T21:30:30.219Z",
+    "contributors": [
+      "king-tom"
+    ]
+  },
+  "Glossary/Vendor_Prefix": {
+    "modified": "2019-03-23T22:29:22.756Z",
+    "contributors": [
+      "Tyrandus",
+      "1903Daniel"
+    ]
+  },
+  "Glossary/Information_architecture": {
+    "modified": "2019-03-18T21:18:25.933Z",
+    "contributors": [
+      "tschach"
+    ]
+  },
+  "Glossary/Class": {
+    "modified": "2019-03-18T21:37:57.063Z",
+    "contributors": [
+      "duckymirror"
+    ]
+  },
+  "Glossary/Constructor": {
+    "modified": "2019-03-23T22:04:35.334Z",
+    "contributors": [
+      "klug_mario"
+    ]
+  },
+  "Glossary/Empty_element": {
+    "modified": "2019-03-18T21:32:36.396Z",
+    "contributors": [
+      "axelrindle"
+    ]
+  },
+  "Glossary/Object": {
+    "modified": "2019-03-23T22:08:37.828Z",
+    "contributors": [
+      "LazerPhil"
+    ]
+  },
+  "Glossary/Protocol": {
+    "modified": "2019-03-23T22:09:31.349Z",
+    "contributors": [
+      "Anonymous"
+    ]
+  },
+  "Glossary/Type": {
+    "modified": "2020-04-04T13:54:03.839Z",
+    "contributors": [
+      "axelrindle"
+    ]
+  },
+  "Glossary/Forbidden_header_name": {
+    "modified": "2019-03-23T22:03:16.612Z",
+    "contributors": [
+      "timmyRS"
+    ]
+  },
+  "Learn/Common_questions/How_does_the_Internet_work": {
+    "modified": "2020-07-16T22:35:36.371Z",
+    "contributors": [
+      "frankwinter",
+      "NetiHeft"
+    ]
+  },
+  "Learn/CSS/Building_blocks/Values_and_units": {
+    "modified": "2020-07-16T22:28:56.210Z",
+    "contributors": [
+      "GiovanniHD201E"
+    ]
+  },
+  "Learn/Getting_started_with_the_web/Dealing_with_files": {
+    "modified": "2020-07-16T22:34:32.214Z",
+    "contributors": [
+      "michaelhochleitner",
+      "Aryx",
+      "vosspl",
+      "Shidigital",
+      "Bissmarc",
+      "janjo",
+      "d_jan"
+    ]
+  },
+  "Learn/Getting_started_with_the_web/JavaScript_basics": {
+    "modified": "2020-07-16T22:35:08.850Z",
+    "contributors": [
+      "jorgemontoyab",
+      "urewig",
+      "loicyondjeu",
+      "ilonaherr",
+      "SaschaHeyer",
+      "fxmt",
+      "Shidigital",
+      "hapeit",
+      "danielsimon1",
+      "nuracubeTranslations",
+      "QuaGS",
+      "monja-schreppel",
+      "Purple-Vampire"
+    ]
+  },
+  "Learn/Getting_started_with_the_web/How_the_Web_works": {
+    "modified": "2020-07-16T22:33:59.338Z",
+    "contributors": [
+      "Shidigital"
+    ]
+  },
+  "Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML": {
+    "modified": "2020-07-16T22:23:17.212Z",
+    "contributors": [
+      "Shidigital"
+    ]
+  },
+  "Learn/HTML/Introduction_to_HTML/Document_and_website_structure": {
+    "modified": "2020-07-16T22:24:03.053Z",
+    "contributors": [
+      "DiscW0rld",
+      "fdeberle",
+      "Shidigital",
+      "Woehe2010",
+      "fataly01"
+    ]
+  },
+  "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals": {
+    "modified": "2020-07-16T22:23:30.695Z",
+    "contributors": [
+      "Hofei",
+      "Shidigital"
+    ]
+  },
+  "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks": {
+    "modified": "2020-07-16T22:23:43.017Z",
+    "contributors": [
+      "Shidigital"
+    ]
+  },
+  "Learn/HTML/Introduction_to_HTML/Debugging_HTML": {
+    "modified": "2020-07-16T22:24:11.946Z",
+    "contributors": [
+      "LeniTastic",
+      "Shidigital"
+    ]
+  },
+  "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting": {
+    "modified": "2020-07-16T22:23:51.933Z",
+    "contributors": [
+      "Shidigital"
+    ]
+  },
+  "Learn/HTML/Introduction_to_HTML": {
+    "modified": "2020-07-16T22:22:45.948Z",
+    "contributors": [
+      "PercyGitarrist",
+      "mprofitl",
+      "LeifMensing",
+      "Shidigital"
+    ]
+  },
+  "Learn/HTML/Introduction_to_HTML/Getting_started": {
+    "modified": "2020-11-19T12:58:27.172Z",
+    "contributors": [
+      "fiji-flo",
+      "Kometheus",
+      "nitramrelpmur",
+      "Shidigital"
+    ]
+  },
+  "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter": {
+    "modified": "2020-07-16T22:23:11.514Z",
+    "contributors": [
+      "DiscW0rld",
+      "LeniTastic",
+      "msifrt"
+    ]
+  },
+  "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content": {
+    "modified": "2020-07-16T22:24:17.990Z",
+    "contributors": [
+      "DiscW0rld"
+    ]
+  },
+  "Learn/Forms": {
+    "modified": "2020-07-16T22:20:54.604Z",
+    "contributors": [
+      "Ryuno-Ki",
+      "PercyGitarrist",
+      "F.nn"
+    ]
+  },
+  "Learn/HTML/Tables/Basics": {
+    "modified": "2020-07-16T22:25:19.143Z",
+    "contributors": [
+      "GiovanniHD201E"
+    ]
+  },
+  "Learn/JavaScript/Building_blocks/Events": {
+    "modified": "2020-07-16T22:31:36.524Z",
+    "contributors": [
+      "kaip-e",
+      "GiovanniHD201E"
+    ]
+  },
+  "Learn/JavaScript/Building_blocks": {
+    "modified": "2020-07-16T22:31:06.733Z",
+    "contributors": [
+      "Osslack"
+    ]
+  },
+  "Learn/JavaScript/First_steps/A_first_splash": {
+    "modified": "2020-07-16T22:30:16.778Z",
+    "contributors": [
+      "GiovanniHD201E",
+      "Thomas-Zenkel"
+    ]
+  },
+  "Learn/JavaScript/First_steps/Silly_story_generator": {
+    "modified": "2020-07-16T22:31:00.101Z",
+    "contributors": [
+      "Strubinator"
+    ]
+  },
+  "Learn/JavaScript/First_steps/What_is_JavaScript": {
+    "modified": "2020-09-29T09:38:57.543Z",
+    "contributors": [
+      "Devoryo",
+      "mchoeti",
+      "GreenPepper",
+      "hpawe01",
+      "Bissmarc",
+      "woiddale",
+      "JorisGutjahr"
+    ]
+  },
+  "orphaned/Learn/How_to_contribute": {
+    "modified": "2020-07-16T22:33:42.823Z",
+    "contributors": [
+      "SphinxKnight",
+      "1000eyes",
+      "der_rofler"
+    ]
+  },
+  "Learn/Server-side/First_steps": {
+    "modified": "2020-07-16T22:36:07.662Z",
+    "contributors": [
+      "LeifMensing",
+      "Dschubba"
+    ]
+  },
+  "Learn/Server-side/First_steps/Introduction": {
+    "modified": "2020-07-16T22:36:12.624Z",
+    "contributors": [
+      "NetiHeft",
+      "Dschubba"
+    ]
+  },
+  "Glossary/Localization": {
+    "modified": "2019-03-24T00:15:25.257Z",
+    "contributors": [
+      "taralushi",
+      "fscholz",
+      "WayneSchlegel",
+      "DirkS",
+      "maik666",
+      "René Schwarz",
+      "Ak120"
+    ]
+  },
+  "MDN/At_ten/History_of_MDN": {
+    "modified": "2019-03-23T22:49:53.083Z",
+    "contributors": [
+      "stephaniehobson",
+      "Sebastianz"
+    ]
+  },
+  "MDN/At_ten": {
+    "modified": "2019-03-23T22:49:50.216Z",
+    "contributors": [
+      "1000eyes",
+      "stephaniehobson",
+      "Evotopid",
+      "Sheppy"
+    ]
+  },
+  "conflicting/MDN/Contribute": {
+    "modified": "2020-02-19T18:50:24.408Z",
+    "contributors": [
+      "jswisher",
+      "1000eyes"
+    ]
+  },
+  "orphaned/MDN/Community/Whats_happening": {
+    "modified": "2019-03-23T23:27:28.266Z",
+    "contributors": [
+      "wbamberg",
+      "Sebastianz",
+      "UweDirk"
+    ]
+  },
+  "orphaned/MDN/Community": {
+    "modified": "2019-06-15T16:58:37.273Z",
+    "contributors": [
+      "sklicek",
+      "rs-github",
+      "wbamberg",
+      "BavarianMax",
+      "Jeremie",
+      "SvenSaarland",
+      "msebastian100",
+      "Stefan_hr4u"
+    ]
+  },
+  "orphaned/MDN/Contribute/Howto/Do_a_technical_review": {
+    "modified": "2019-01-16T19:26:44.220Z",
+    "contributors": [
+      "wbamberg",
+      "jordylol2006",
+      "Sebastianz"
+    ]
+  },
+  "orphaned/MDN/Contribute/Howto/Do_an_editorial_review": {
+    "modified": "2019-01-16T19:26:12.299Z",
+    "contributors": [
+      "wbamberg",
+      "sigoa",
+      "Sebastianz"
+    ]
+  },
+  "orphaned/MDN/Contribute/Howto/Create_an_MDN_account": {
+    "modified": "2019-07-28T03:19:41.741Z",
+    "contributors": [
+      "wbamberg",
+      "darkfeile",
+      "lutzip0",
+      "Dev201",
+      "jumpball",
+      "jogi23",
+      "Clonkh"
+    ]
+  },
+  "orphaned/MDN/Contribute/Howto/Tag_JavaScript_pages": {
+    "modified": "2019-01-16T21:20:05.744Z",
+    "contributors": [
+      "wbamberg",
+      "hictox"
+    ]
+  },
+  "orphaned/MDN/Contribute/Howto/Set_the_summary_for_a_page": {
+    "modified": "2019-01-16T19:16:53.470Z",
+    "contributors": [
+      "wbamberg",
+      "githubsvc",
+      "4680",
+      "maxsu"
+    ]
+  },
+  "MDN/Guidelines/Writing_style_guide": {
+    "modified": "2020-09-30T15:28:44.875Z",
+    "contributors": [
+      "chrisdavidmills",
+      "stephanduesterhoeft",
+      "jswisher",
+      "Dschubba",
+      "wbamberg",
+      "Jeremie",
+      "PaddyKfg",
+      "Montana7755"
+    ]
+  },
+  "MDN/Tools/KumaScript/Troubleshooting": {
+    "modified": "2019-01-16T21:24:01.701Z",
+    "contributors": [
+      "wbamberg",
+      "rolandm"
+    ]
+  },
+  "MDN/Yari": {
+    "modified": "2020-04-22T10:45:47.041Z",
+    "contributors": [
+      "clemens.klapp",
+      "SphinxKnight",
+      "wbamberg",
+      "JorisGutjahr",
+      "Jeremie",
+      "Sheppy"
+    ]
+  },
+  "MDN/Structures/Compatibility_tables": {
+    "modified": "2020-10-15T22:06:38.248Z",
+    "contributors": [
+      "chrisdavidmills",
+      "thunderhook",
+      "wbamberg",
+      "jogemu"
+    ]
+  },
+  "MDN/About": {
+    "modified": "2019-09-10T08:51:50.833Z",
+    "contributors": [
+      "SphinxKnight",
+      "Streamities",
+      "wbamberg",
+      "rs-github"
+    ]
+  },
+  "orphaned/MDN/About/Linking_to_MDN": {
+    "modified": "2019-01-17T03:01:28.772Z",
+    "contributors": [
+      "wbamberg",
+      "sklicek"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/API/bookmarks": {
+    "modified": "2020-10-15T21:55:55.060Z",
+    "contributors": [
+      "wbamberg",
+      "nw520",
+      "matschibatschi"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/Working_with_the_Tabs_API": {
+    "modified": "2019-06-11T16:28:12.442Z",
+    "contributors": [
+      "Patrick5555"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/Examples": {
+    "modified": "2019-03-18T21:04:08.698Z",
+    "contributors": [
+      "StefanM"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/Your_first_WebExtension": {
+    "modified": "2019-07-04T07:03:49.181Z",
+    "contributors": [
+      "trych",
+      "SyntaxCacao",
+      "HillOTech",
+      "Asozialist",
+      "twizzz",
+      "serv-inc",
+      "Draphar",
+      "flosommerfeld"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/Your_second_WebExtension": {
+    "modified": "2019-07-04T06:11:16.199Z",
+    "contributors": [
+      "trych",
+      "Draphar"
+    ]
+  },
+  "Mozilla/Developer_guide/So_you_just_built_Firefox": {
+    "modified": "2019-03-23T22:13:23.971Z",
+    "contributors": [
+      "chrisdavidmills",
+      "friedger"
+    ]
+  },
+  "Mozilla/Developer_guide/Source_Code": {
+    "modified": "2019-03-24T00:04:33.890Z",
+    "contributors": [
+      "chrisdavidmills",
+      "fscholz",
+      "Anonymous",
+      "gamemaster7riesen"
+    ]
+  },
+  "Web/OpenSearch": {
+    "modified": "2019-03-24T00:04:54.552Z",
+    "contributors": [
+      "fscholz",
+      "Lexhawkins"
+    ]
+  },
+  "orphaned/Plugins/Flash_Activation:_Browser_Comparison": {
+    "modified": "2019-03-23T22:03:23.868Z",
+    "contributors": [
+      "Artist-sumo",
+      "Sheppy",
+      "HoLuLuLu"
+    ]
+  },
+  "Tools/3D_View": {
+    "modified": "2020-07-16T22:34:25.058Z",
+    "contributors": [
+      "wbamberg",
+      "pollti",
+      "SJW"
+    ]
+  },
+  "orphaned/Tools/Add-ons": {
+    "modified": "2020-07-16T22:36:23.223Z",
+    "contributors": [
+      "wbamberg",
+      "mfluehr"
+    ]
+  },
+  "Tools/Accessibility_inspector": {
+    "modified": "2020-07-16T22:36:39.466Z",
+    "contributors": [
+      "hrfischer1983",
+      "hellschu"
+    ]
+  },
+  "Tools/Responsive_Design_Mode": {
+    "modified": "2020-07-16T22:35:21.080Z",
+    "contributors": [
+      "wbamberg",
+      "mozjan"
+    ]
+  },
+  "Tools/Browser_Toolbox": {
+    "modified": "2020-07-16T22:35:55.309Z",
+    "contributors": [
+      "wbamberg",
+      "res60",
+      "Dev_Falko",
+      "Microgamer"
+    ]
+  },
+  "Tools/Network_Monitor": {
+    "modified": "2020-07-16T22:35:29.556Z",
+    "contributors": [
+      "wbamberg",
+      "ThomasLendo"
+    ]
+  },
+  "Tools/Page_Inspector/How_to/Examine_event_listeners": {
+    "modified": "2020-07-16T22:34:35.556Z",
+    "contributors": [
+      "wbamberg",
+      "Sebastianz"
+    ]
+  },
+  "Tools/Page_Inspector/How_to/Examine_grid_layouts": {
+    "modified": "2020-07-16T22:34:46.944Z",
+    "contributors": [
+      "oolong32",
+      "wbamberg",
+      "Micky261"
+    ]
+  },
+  "Tools/Page_Inspector/How_to/Edit_fonts": {
+    "modified": "2020-08-13T20:23:50.743Z",
+    "contributors": [
+      "cama240601",
+      "GiovanniHD201E"
+    ]
+  },
+  "Tools/Page_Inspector": {
+    "modified": "2020-07-16T22:34:26.882Z",
+    "contributors": [
+      "wbamberg",
+      "maybe",
+      "mozjan",
+      "One",
+      "MikeWalde",
+      "libelle17"
+    ]
+  },
+  "Tools/Page_Inspector/Keyboard_shortcuts": {
+    "modified": "2020-07-16T22:34:50.445Z",
+    "contributors": [
+      "GiovanniHD201E"
+    ]
+  },
+  "Tools/Shader_Editor": {
+    "modified": "2020-07-16T22:35:54.224Z",
+    "contributors": [
+      "wbamberg",
+      "olhaar",
+      "cgtom"
+    ]
+  },
+  "Tools/Web_Console/Helpers": {
+    "modified": "2020-07-16T22:34:11.469Z",
+    "contributors": [
+      "wbamberg",
+      "AlexFunk",
+      "mherczegh"
+    ]
+  },
+  "Tools/Web_Console": {
+    "modified": "2020-07-16T22:34:04.628Z",
+    "contributors": [
+      "Loilo",
+      "SphinxKnight",
+      "talikanews",
+      "wbamberg",
+      "realsplatscream",
+      "kleinegnomfee",
+      "maybe",
+      "PsychoMg",
+      "mozjan"
+    ]
+  },
+  "orphaned/Tools/WebIDE_clone": {
+    "modified": "2019-03-23T23:03:21.499Z",
+    "contributors": [
+      "wbamberg",
+      "VJSchneid",
+      "maybe",
+      "AARADEANCA"
+    ]
+  },
+  "Mozilla/Firefox/Releases/3/Updating_web_applications": {
+    "modified": "2019-03-24T00:04:30.175Z",
+    "contributors": [
+      "wbamberg",
+      "Sheppy",
+      "fscholz",
+      "niels"
+    ]
+  },
+  "Web/API/BaseAudioContext/decodeAudioData": {
+    "modified": "2019-03-23T22:38:20.001Z",
+    "contributors": [
+      "Thalhammer"
+    ]
+  },
+  "Web/API/File/type": {
+    "modified": "2020-10-15T22:20:09.678Z",
+    "contributors": [
+      "sklicek"
+    ]
+  },
+  "Web/API/File/Using_files_from_web_applications": {
+    "modified": "2019-03-18T20:49:17.436Z",
+    "contributors": [
+      "Holger.Persch",
+      "MatthiasApsel",
+      "gunnarbittersmann",
+      "chrisdavidmills",
+      "icy",
+      "matschu"
+    ]
+  },
+  "Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB": {
+    "modified": "2020-01-13T04:47:55.526Z",
+    "contributors": [
+      "chrisdavidmills",
+      "gmagholder",
+      "Julini"
+    ]
+  },
+  "Web/API/IndexedDB_API/Using_IndexedDB": {
+    "modified": "2020-01-13T04:47:56.201Z",
+    "contributors": [
+      "chrisdavidmills",
+      "p.root",
+      "mdieblich",
+      "floheller",
+      "HendrikRunte",
+      "Nys",
+      "Julini"
+    ]
+  },
+  "Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers": {
+    "modified": "2019-03-23T22:33:54.067Z",
+    "contributors": [
+      "chrisdavidmills",
+      "Faibk"
+    ]
+  },
+  "Web/API/HTMLElement/innerText": {
+    "modified": "2019-03-23T22:05:48.154Z",
+    "contributors": [
+      "dekatko"
+    ]
+  },
+  "Web/API/Fullscreen_API": {
+    "modified": "2019-07-07T13:00:37.918Z",
+    "contributors": [
+      "wbamberg",
+      "lazercaveman",
+      "Johann150",
+      "axelrindle"
+    ]
+  },
+  "Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL": {
+    "modified": "2019-03-24T00:04:47.020Z",
+    "contributors": [
+      "fscholz",
+      "teoli"
+    ]
+  },
+  "Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL": {
+    "modified": "2019-03-24T00:04:47.741Z",
+    "contributors": [
+      "fscholz",
+      "teoli"
+    ]
+  },
+  "Web/API/WebGL_API/Tutorial/Lighting_in_WebGL": {
+    "modified": "2019-03-24T00:04:49.766Z",
+    "contributors": [
+      "fscholz",
+      "teoli"
+    ]
+  },
+  "Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL": {
+    "modified": "2019-03-24T00:05:30.371Z",
+    "contributors": [
+      "noxafy",
+      "Oliver_Schafeld",
+      "H3ndr1k",
+      "xhallix",
+      "manni66",
+      "fscholz",
+      "teoli"
+    ]
+  },
+  "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL": {
+    "modified": "2019-03-24T00:09:11.465Z",
+    "contributors": [
+      "fscholz",
+      "teoli",
+      "WNC7"
+    ]
+  },
+  "Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context": {
+    "modified": "2019-03-18T20:49:18.784Z",
+    "contributors": [
+      "jsinge",
+      "noxafy",
+      "fscholz",
+      "teoli",
+      "TimN",
+      "WNC7"
+    ]
+  },
+  "Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL": {
+    "modified": "2019-03-18T21:15:16.400Z",
+    "contributors": [
+      "fscholz",
+      "teoli"
+    ]
+  },
+  "Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL": {
+    "modified": "2019-03-24T00:04:48.015Z",
+    "contributors": [
+      "fscholz",
+      "teoli"
+    ]
+  },
+  "Web/API/WindowOrWorkerGlobalScope/btoa": {
+    "modified": "2019-03-23T22:50:32.544Z",
+    "contributors": [
+      "cami"
+    ]
+  },
+  "Web/API/WindowOrWorkerGlobalScope/setTimeout": {
+    "modified": "2019-03-23T23:36:28.621Z",
+    "contributors": [
+      "mdnde",
+      "Eschon",
+      "fscholz",
+      "c0ffm3k4r",
+      "wartab"
+    ]
+  },
+  "Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets": {
+    "modified": "2019-03-23T23:17:39.742Z",
+    "contributors": [
+      "juliankern",
+      "christophfink",
+      "teoli",
+      "eminor"
+    ]
+  },
+  "Web/Accessibility/ARIA/ARIA_Live_Regions": {
+    "modified": "2019-03-23T23:15:24.210Z",
+    "contributors": [
+      "teoli",
+      "eminor"
+    ]
+  },
+  "Web/Accessibility/ARIA/ARIA_Techniques": {
+    "modified": "2019-03-18T21:43:56.504Z",
+    "contributors": [
+      "juliankern"
+    ]
+  },
+  "Web/Accessibility/ARIA": {
+    "modified": "2019-03-23T23:21:04.985Z",
+    "contributors": [
+      "a.lippold",
+      "marc-se",
+      "iMeta",
+      "eminor",
+      "teoli"
+    ]
+  },
+  "Web/Accessibility": {
+    "modified": "2019-09-09T14:09:32.470Z",
+    "contributors": [
+      "SphinxKnight",
+      "alippold",
+      "teoli",
+      "fscholz",
+      "Mgalpha"
+    ]
+  },
+  "Web/Accessibility/Keyboard-navigable_JavaScript_widgets": {
+    "modified": "2019-03-23T23:11:54.393Z",
+    "contributors": [
+      "eminor"
+    ]
+  },
+  "Web/CSS/:user-invalid": {
+    "modified": "2019-03-23T22:42:35.620Z",
+    "contributors": [
+      "teoli",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/:autofill": {
+    "modified": "2019-03-23T22:43:43.075Z",
+    "contributors": [
+      "teoli",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/box-flex": {
+    "modified": "2020-10-15T21:40:01.205Z",
+    "contributors": [
+      "chrisdavidmills",
+      "SJW",
+      "teoli",
+      "crasher666",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/box-pack": {
+    "modified": "2020-10-15T21:39:56.493Z",
+    "contributors": [
+      "SJW",
+      "teoli",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/user-modify": {
+    "modified": "2019-03-24T00:04:27.330Z",
+    "contributors": [
+      "teoli",
+      "Sebastianz",
+      "fscholz",
+      "SJW",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/user-select": {
+    "modified": "2019-03-24T00:03:51.678Z",
+    "contributors": [
+      "fscholz",
+      "SJW",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/Adjacent_sibling_combinator": {
+    "modified": "2020-10-15T21:39:56.944Z",
+    "contributors": [
+      "ExE-Boss",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/Attribute_selectors": {
+    "modified": "2020-10-15T21:25:18.388Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz",
+      "hansspiess",
+      "fscholz",
+      "iGadget",
+      "J5lx"
+    ]
+  },
+  "Web/CSS/@media/aural": {
+    "modified": "2019-03-23T22:45:45.488Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/computed_value": {
+    "modified": "2019-03-23T23:13:10.466Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/CSS_Animations/Using_CSS_animations": {
+    "modified": "2020-04-22T06:24:42.427Z",
+    "contributors": [
+      "Ryuno-Ki",
+      "hamvocke",
+      "hudri",
+      "JorisGutjahr",
+      "awaigand",
+      "Honig",
+      "connexo",
+      "SphinxKnight",
+      "teoli",
+      "Simu"
+    ]
+  },
+  "Web/CSS/CSS_Background_and_Borders/Box-shadow_generator": {
+    "modified": "2019-03-18T20:43:44.623Z",
+    "contributors": [
+      "BychekRU",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model": {
+    "modified": "2019-03-24T00:03:52.006Z",
+    "contributors": [
+      "Sebastianz",
+      "fscholz",
+      "SJW",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/CSS_Box_Model": {
+    "modified": "2019-03-23T22:43:35.662Z",
+    "contributors": [
+      "Sebastianz",
+      "teoli"
+    ]
+  },
+  "Web/CSS/CSS_Box_Model/Mastering_margin_collapsing": {
+    "modified": "2019-03-23T22:41:18.965Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/CSS_Colors/Color_picker_tool": {
+    "modified": "2019-03-23T22:45:05.902Z",
+    "contributors": [
+      "22samuelk"
+    ]
+  },
+  "Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items": {
+    "modified": "2020-10-26T12:12:41.192Z",
+    "contributors": [
+      "Raqhael"
+    ]
+  },
+  "Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox": {
+    "modified": "2019-03-18T21:33:01.162Z",
+    "contributors": [
+      "prproksch",
+      "td8"
+    ]
+  },
+  "Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters": {
+    "modified": "2019-03-23T22:41:18.157Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation": {
+    "modified": "2019-03-23T22:42:20.521Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/CSS_Masking": {
+    "modified": "2020-10-15T21:41:26.449Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/CSS_Namespaces": {
+    "modified": "2020-10-15T21:41:25.833Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/Reference": {
+    "modified": "2019-03-24T00:14:12.141Z",
+    "contributors": [
+      "SJW",
+      "plathub",
+      "Claas",
+      "condottiero1985",
+      "Sebastianz",
+      "fscholz",
+      "tregagnon",
+      "Jürgen Jeka",
+      "The Witcher",
+      "Michael2402",
+      "Jech",
+      "Nathymig"
+    ]
+  },
+  "Web/CSS/CSS_Text_Decoration": {
+    "modified": "2019-07-23T07:57:58.435Z",
+    "contributors": [
+      "SphinxKnight",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/CSS_Transforms/Using_CSS_transforms": {
+    "modified": "2020-12-14T10:35:58.609Z",
+    "contributors": [
+      "Johuspect",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/CSS_Types": {
+    "modified": "2020-04-21T12:32:32.615Z",
+    "contributors": [
+      "kleinesfilmroellchen",
+      "Claas"
+    ]
+  },
+  "Web/CSS/Replaced_element": {
+    "modified": "2019-03-23T22:00:32.824Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/color_value": {
+    "modified": "2020-10-15T21:14:08.521Z",
+    "contributors": [
+      "Borgitowner",
+      "SJW",
+      "Sebastianz",
+      "Simplexible",
+      "fscholz",
+      "Jürgen Jeka",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/ID_selectors": {
+    "modified": "2020-10-15T21:41:21.317Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz"
+    ]
+  },
+  "orphaned/Web/CSS/Index": {
+    "modified": "2019-01-16T19:56:04.663Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/initial_value": {
+    "modified": "2019-03-23T22:18:48.927Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/Child_combinator": {
+    "modified": "2020-10-15T21:41:20.031Z",
+    "contributors": [
+      "SJW",
+      "iCON",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/Class_selectors": {
+    "modified": "2020-10-15T21:41:19.898Z",
+    "contributors": [
+      "SJW",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/Shorthand_properties": {
+    "modified": "2020-11-22T12:51:55.372Z",
+    "contributors": [
+      "Johuspect"
+    ]
+  },
+  "Web/CSS/CSS_Motion_Path": {
+    "modified": "2019-03-23T22:43:35.895Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "orphaned/MDN/Contribute/Howto/Document_a_CSS_property/Property_template": {
+    "modified": "2019-01-16T14:33:16.131Z",
+    "contributors": [
+      "wbamberg",
+      "SphinxKnight",
+      "Sebastianz",
+      "fscholz",
+      "ethertank",
+      "The Witcher",
+      "Michael2402"
+    ]
+  },
+  "Web/CSS/Specificity": {
+    "modified": "2019-03-23T23:11:49.533Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/actual_value": {
+    "modified": "2019-03-23T22:43:32.481Z",
+    "contributors": [
+      "schlagi123",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/inheritance": {
+    "modified": "2019-03-23T23:13:09.412Z",
+    "contributors": [
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/Value_definition_syntax": {
+    "modified": "2019-03-23T23:11:56.504Z",
+    "contributors": [
+      "Sebastianz",
+      "Prinz_Rana",
+      "Krenair",
+      "prayash"
+    ]
+  },
+  "Web/CSS/overflow-wrap": {
+    "modified": "2020-10-15T21:38:14.535Z",
+    "contributors": [
+      "SJW",
+      "ksuess",
+      "screeny05",
+      "Clubfan22",
+      "fscholz",
+      "Sebastianz",
+      "spiegelp"
+    ]
+  },
+  "Web/API/HTMLElement/change_event": {
+    "modified": "2019-03-23T23:08:15.170Z",
+    "contributors": [
+      "fscholz",
+      "spiegelp"
+    ]
+  },
+  "Web/API/Window/DOMContentLoaded_event": {
+    "modified": "2019-04-30T14:16:07.184Z",
+    "contributors": [
+      "wbamberg",
+      "timvancleef",
+      "forrestkirby",
+      "fscholz",
+      "Sewi",
+      "horlabs"
+    ]
+  },
+  "Web/API/Window/load_event": {
+    "modified": "2019-09-11T09:06:16.530Z",
+    "contributors": [
+      "wbamberg",
+      "fscholz",
+      "LeoDecking"
+    ]
+  },
+  "Web/API/Document/readystatechange_event": {
+    "modified": "2019-03-23T22:13:59.735Z",
+    "contributors": [
+      "fscholz",
+      "mdnde",
+      "cussack",
+      "Lepstr"
+    ]
+  },
+  "Web/Guide/AJAX/Getting_Started": {
+    "modified": "2020-08-11T10:37:53.338Z",
+    "contributors": [
+      "merlincom"
+    ]
+  },
+  "Web/API/History_API": {
+    "modified": "2019-03-23T23:28:10.854Z",
+    "contributors": [
+      "wanst",
+      "NiklasMerz",
+      "daniel-evers",
+      "Adowrath",
+      "serv-inc",
+      "Oliver_Schafeld",
+      "BugHunter2k",
+      "christian314159",
+      "darksider3"
+    ]
+  },
+  "Web/API/Canvas_API/Tutorial/Advanced_animations": {
+    "modified": "2019-03-23T22:48:52.383Z",
+    "contributors": [
+      "teoli",
+      "jumpball"
+    ]
+  },
+  "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors": {
+    "modified": "2019-10-10T16:33:46.525Z",
+    "contributors": [
+      "Sebastianz",
+      "GeorgKern"
+    ]
+  },
+  "Web/API/Canvas_API/Tutorial/Basic_animations": {
+    "modified": "2019-03-18T21:45:29.279Z",
+    "contributors": [
+      "RmnWtnkmp"
+    ]
+  },
+  "Web/API/Canvas_API/Tutorial/Using_images": {
+    "modified": "2019-03-23T23:12:04.746Z",
+    "contributors": [
+      "sombrastudios",
+      "teoli",
+      "Leun4m",
+      "thedaft",
+      "pixunil"
+    ]
+  },
+  "Web/API/Canvas_API/Tutorial/Optimizing_canvas": {
+    "modified": "2019-03-18T21:47:09.896Z",
+    "contributors": [
+      "SimonBuxx"
+    ]
+  },
+  "Web/API/Canvas_API/Tutorial/Drawing_text": {
+    "modified": "2019-03-18T21:38:17.565Z",
+    "contributors": [
+      "Johann150"
+    ]
+  },
+  "Web/API/Canvas_API/Tutorial/Drawing_shapes": {
+    "modified": "2019-10-06T12:20:20.273Z",
+    "contributors": [
+      "I_I",
+      "oezpeda",
+      "Siphalor",
+      "teoli",
+      "Leun4m",
+      "thedaft",
+      "pixunil"
+    ]
+  },
+  "Web/API/Canvas_API/Tutorial/Basic_usage": {
+    "modified": "2019-10-06T12:11:53.548Z",
+    "contributors": [
+      "I_I",
+      "fheckl",
+      "FelixLehmann",
+      "P5ych0",
+      "teoli",
+      "Leun4m",
+      "medium-endian",
+      "pixunil"
+    ]
+  },
+  "Web/API/Canvas_API/Tutorial": {
+    "modified": "2020-07-31T10:20:16.447Z",
+    "contributors": [
+      "mgrubinger",
+      "sigoa",
+      "surferboy250",
+      "GeorgKern",
+      "Leun4m",
+      "medium-endian",
+      "manni66",
+      "pixunil"
+    ]
+  },
+  "Web/Guide/HTML/Editable_content": {
+    "modified": "2020-02-12T02:09:56.043Z",
+    "contributors": [
+      "blackjack4494",
+      "lxdiamond"
+    ]
+  },
+  "Web/Guide/HTML/Content_categories": {
+    "modified": "2020-07-16T11:12:55.534Z",
+    "contributors": [
+      "matthiasulrich",
+      "Sebastianz",
+      "jumpball"
+    ]
+  },
+  "Web/Guide/HTML/Using_HTML_sections_and_outlines": {
+    "modified": "2019-03-18T20:37:20.242Z",
+    "contributors": [
+      "SebinNyshkim",
+      "BlackRebell89"
+    ]
+  },
+  "Web/HTML/Block-level_elements": {
+    "modified": "2020-05-07T06:16:30.382Z",
+    "contributors": [
+      "zuzuzu",
+      "Loilo",
+      "mdschweda",
+      "drgn",
+      "VJSchneid",
+      "teoli",
+      "lukas.oppermann"
+    ]
+  },
+  "Web/API/Canvas_API": {
+    "modified": "2019-03-23T23:16:11.989Z",
+    "contributors": [
+      "sigoa",
+      "petacat",
+      "Aloso",
+      "barning",
+      "andreas.remdt"
+    ]
+  },
+  "Web/HTML/Element/Heading_Elements": {
+    "modified": "2019-03-24T00:04:35.426Z",
+    "contributors": [
+      "schlagi123",
+      "teoli",
+      "fscholz"
+    ]
+  },
+  "Web/API/HTMLHeadElement": {
+    "modified": "2019-03-24T00:04:41.043Z",
+    "contributors": [
+      "schlagi123",
+      "teoli",
+      "fscholz",
+      "Crash"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Promise": {
-    "modified": "2020-09-11T07:37:54.436Z",
+  "Web/HTML/Global_attributes/accesskey": {
+    "modified": "2020-10-15T22:03:59.818Z",
     "contributors": [
-      "sebenns",
-      "semmelbroesl",
-      "Dschubba",
-      "mrmoree",
-      "CorvusRohan",
-      "jnnkm",
-      "SphinxKnight",
-      "0xflotus",
-      "HendrikRunte",
-      "1blankz7"
+      "Claas"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Promise/all": {
-    "modified": "2020-10-15T21:33:48.453Z",
+  "Web/HTML/Global_attributes/autocapitalize": {
+    "modified": "2020-10-15T22:05:02.265Z",
     "contributors": [
-      "Dschubba",
-      "anniekao",
-      "SphinxKnight",
-      "kdex",
-      "davidrockt",
-      "Sharian"
+      "alaskaa"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Promise/finally": {
-    "modified": "2020-10-15T22:05:15.072Z",
+  "Web/HTML/Global_attributes/class": {
+    "modified": "2019-03-23T22:53:31.655Z",
     "contributors": [
-      "tminich",
-      "wasabiNorman"
+      "sigoa",
+      "lxdiamond"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Promise/race": {
-    "modified": "2020-10-15T22:04:13.810Z",
+  "Web/HTML/Global_attributes/contenteditable": {
+    "modified": "2019-03-18T21:36:35.603Z",
     "contributors": [
-      "pkimmlinger",
-      "cepharum",
-      "DaAitch"
+      "4223",
+      "Claas"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Promise/reject": {
-    "modified": "2020-10-15T21:53:18.040Z",
+  "Web/HTML/Global_attributes/dir": {
+    "modified": "2020-10-15T22:05:39.463Z",
     "contributors": [
-      "ManuelKiessling",
-      "marco-a",
-      "modev"
+      "RewoSiedge"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Promise/then": {
-    "modified": "2019-03-23T22:48:57.241Z",
+  "Web/HTML/Global_attributes/draggable": {
+    "modified": "2019-03-23T22:47:23.466Z",
     "contributors": [
-      "dbraun",
-      "SphinxKnight",
-      "kdex",
-      "DanielMSchmidt",
-      "florianb"
+      "schlagi123",
+      "RmnWtnkmp",
+      "rstarke-dd"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/RangeError": {
-    "modified": "2019-03-23T22:12:22.680Z",
+  "orphaned/Web/HTML/Global_attributes/dropzone": {
+    "modified": "2020-10-15T21:40:11.332Z",
     "contributors": [
-      "jameshkramer"
+      "kaljak",
+      "RmnWtnkmp"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/RangeError/prototype": {
-    "modified": "2019-03-23T22:12:08.670Z",
+  "Web/HTML/Global_attributes/hidden": {
+    "modified": "2020-10-15T21:38:08.779Z",
     "contributors": [
-      "ThomasFe"
+      "fscholz",
+      "Oliver_Schafeld",
+      "RmnWtnkmp",
+      "skl"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Reflect": {
-    "modified": "2020-10-15T22:13:20.309Z",
+  "Web/HTML/Global_attributes/id": {
+    "modified": "2019-03-18T21:47:05.388Z",
     "contributors": [
-      "Tjerk-Haaye-Henricus"
+      "BlaM",
+      "skl"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Reflect/apply": {
-    "modified": "2020-10-15T22:13:35.547Z",
+  "Web/HTML/Global_attributes": {
+    "modified": "2020-10-15T21:26:14.135Z",
     "contributors": [
-      "Tjerk-Haaye-Henricus"
+      "LoVo666",
+      "qjubic",
+      "pixunil"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Reflect/construct": {
-    "modified": "2020-10-15T22:13:50.733Z",
+  "Web/HTML/Global_attributes/inputmode": {
+    "modified": "2020-10-15T22:14:49.189Z",
     "contributors": [
-      "Tjerk-Haaye-Henricus"
+      "sklicek"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/RegExp": {
-    "modified": "2020-08-17T16:16:42.469Z",
+  "Web/HTML/Global_attributes/is": {
+    "modified": "2020-10-15T22:23:53.794Z",
     "contributors": [
-      "MoPaMo",
-      "ModProg",
-      "D3rT1m",
-      "wbamberg",
-      "rmcproductions",
-      "Wiimm",
-      "doeck",
-      "StevenS77",
-      "Abro",
-      "Simmarith",
-      "fscholz",
-      "powerswitch",
-      "def00111",
-      "clone",
-      "lightspirit"
+      "LoVo666"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/RegExp/flags": {
-    "modified": "2020-10-15T22:08:09.837Z",
+  "Web/HTML/Global_attributes/contextmenu": {
+    "modified": "2020-03-26T16:11:41.701Z",
     "contributors": [
-      "vortami"
+      "MarcusRiemer",
+      "SphinxKnight",
+      "ctexxx"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/RegExp/input": {
-    "modified": "2019-03-23T22:37:59.302Z",
+  "Web/HTML/Global_attributes/lang": {
+    "modified": "2020-10-15T21:51:21.501Z",
     "contributors": [
-      "teoli",
-      "RewoSiedge",
-      "jumpball"
+      "kaljak",
+      "RmnWtnkmp"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/RegExp/test": {
-    "modified": "2020-10-15T22:29:51.696Z",
+  "Web/HTML/Global_attributes/style": {
+    "modified": "2020-08-18T11:36:01.283Z",
     "contributors": [
-      "MrFootwork",
-      "jan.kaiser1952"
+      "FelixSchwarz",
+      "tairt",
+      "RmnWtnkmp"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Set": {
-    "modified": "2020-11-14T21:15:03.891Z",
+  "Web/HTML/Global_attributes/tabindex": {
+    "modified": "2020-10-15T22:17:29.883Z",
     "contributors": [
-      "ottahe",
-      "MichaelGellings",
-      "cami",
-      "AndyLnd",
-      "mdnde2",
-      "Flonk",
-      "schlagi123",
-      "sspringer82"
+      "Michael-1",
+      "vssn"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Set/add": {
-    "modified": "2020-11-14T20:25:16.685Z",
+  "Web/HTML/Global_attributes/title": {
+    "modified": "2019-03-23T22:32:47.288Z",
     "contributors": [
-      "ottahe"
+      "alaskaa",
+      "klausinger",
+      "eluchsinger"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Set/delete": {
-    "modified": "2020-11-14T20:17:34.638Z",
+  "Web/HTML/Global_attributes/translate": {
+    "modified": "2019-10-21T21:28:23.890Z",
     "contributors": [
-      "ottahe"
+      "LoVo666"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/Set/has": {
-    "modified": "2019-03-23T22:10:20.086Z",
+  "Web/Guide/HTML/HTML5": {
+    "modified": "2019-03-23T23:33:45.828Z",
     "contributors": [
-      "mdnde2",
-      "psychotammi"
+      "suriyaa",
+      "teoli",
+      "timausk",
+      "thorsten.rinne",
+      "matze",
+      "nothine"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/String": {
-    "modified": "2020-10-15T21:30:10.579Z",
+  "Web/HTML/Inline_elements": {
+    "modified": "2019-03-23T23:18:01.940Z",
     "contributors": [
-      "kdex",
-      "Anonymous",
-      "schlagi123",
-      "fscholz"
+      "Aryx",
+      "petergloor",
+      "teoli",
+      "lukas.oppermann"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/String/Trim": {
-    "modified": "2020-10-15T21:34:43.401Z",
+  "Web/HTML/Reference": {
+    "modified": "2019-09-09T07:16:32.387Z",
     "contributors": [
-      "schlagi123",
-      "janpawellek",
-      "Codebryo"
+      "SphinxKnight",
+      "mprofitl",
+      "wbamberg",
+      "legalbit"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/String/TrimLeft": {
-    "modified": "2020-10-15T21:48:35.629Z",
+  "Web/HTTP/Caching": {
+    "modified": "2019-03-23T23:05:15.113Z",
     "contributors": [
-      "teoli",
-      "schlagi123"
+      "jugmac00",
+      "Johann150",
+      "VoodooDS"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/String/TrimRight": {
-    "modified": "2020-10-15T21:47:40.889Z",
+  "Web/HTTP/CORS/Errors/CORSMissingAllowHeaderFromPreflight": {
+    "modified": "2020-03-31T09:46:01.871Z",
     "contributors": [
-      "teoli",
-      "schlagi123",
-      "Zertrax"
+      "cradloff"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/String/charAt": {
-    "modified": "2019-05-13T20:26:27.144Z",
+  "Web/HTTP/CORS/Errors/CORSMissingAllowOrigin": {
+    "modified": "2019-07-24T08:48:05.259Z",
     "contributors": [
-      "Huegelkoenig",
-      "PascalAOMS"
+      "kai-oswald",
+      "SAvB"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/String/concat": {
-    "modified": "2019-03-23T22:36:31.275Z",
+  "Web/JavaScript/Enumerability_and_ownership_of_properties": {
+    "modified": "2020-05-27T07:04:55.127Z",
     "contributors": [
-      "schlagi123",
-      "Saschlong"
+      "zuzuzu"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/String/endsWith": {
-    "modified": "2019-03-23T22:28:08.246Z",
+  "Web/JavaScript/Data_structures": {
+    "modified": "2020-03-12T19:40:01.103Z",
     "contributors": [
-      "THX138"
+      "BenjHawk",
+      "GR_Fuchs",
+      "fL03",
+      "schlagi123",
+      "twarncke",
+      "yampus",
+      "ChristianLuxem",
+      "nodexo",
+      "fscholz",
+      "siggi-heltau",
+      "FabianBeiner",
+      "spiegelp"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/String/fromCharCode": {
-    "modified": "2019-03-23T22:22:43.486Z",
+  "Web/JavaScript/A_re-introduction_to_JavaScript": {
+    "modified": "2020-05-19T18:28:46.915Z",
     "contributors": [
-      "NielsNet",
-      "Huargh"
+      "AlexanderLaska",
+      "Timbuktu1982",
+      "Dusty4848",
+      "Meiqian",
+      "Nikolai_Kucksdorf",
+      "kisjoke91",
+      "Space42",
+      "Univream",
+      "tomscholz",
+      "schlagi123",
+      "PinheadLarry",
+      "sigoa",
+      "acetous",
+      "martinhoffmann",
+      "Coke_and_Pepsi",
+      "ibafluss",
+      "creitiv",
+      "fscholz",
+      "eminor"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/String/includes": {
-    "modified": "2020-10-15T21:49:46.614Z",
+  "Web/XPath/Introduction_to_using_XPath_in_JavaScript": {
+    "modified": "2019-03-23T22:12:16.123Z",
     "contributors": [
-      "vssn",
-      "kdex",
-      "PascalAOMS"
+      "chrisdavidmills",
+      "QClonesClan"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/String/indexOf": {
-    "modified": "2019-03-23T23:04:28.715Z",
+  "Web/JavaScript/Guide/Expressions_and_Operators": {
+    "modified": "2020-03-12T19:38:40.241Z",
     "contributors": [
-      "JohannesKuehnel",
+      "occcy",
+      "stefboll",
+      "HaayeHenricus",
       "schlagi123",
-      "sroe",
-      "pascalhofmann",
-      "c4re"
-    ]
-  },
-  "Web/JavaScript/Reference/Global_Objects/String/lastIndexOf": {
-    "modified": "2019-03-23T22:56:44.027Z",
-    "contributors": [
-      "BenB",
-      "Chips100",
-      "flottokarotto"
+      "MelanieVeigl",
+      "Kevinci",
+      "fscholz",
+      "DavidWalsh",
+      "eminor"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/String/length": {
-    "modified": "2020-10-15T21:34:41.966Z",
+  "Web/JavaScript/Guide/Introduction": {
+    "modified": "2020-03-12T19:40:52.952Z",
     "contributors": [
-      "Stuhl",
+      "woiddale",
       "schlagi123",
-      "labcode-de",
-      "flottokarotto"
+      "aldec-dv",
+      "NedNisW",
+      "janjo",
+      "Chtheile",
+      "miniemuff",
+      "fscholz",
+      "Sir.Codewright"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/String/match": {
-    "modified": "2020-10-15T21:54:33.157Z",
+  "Web/JavaScript/Guide/Details_of_the_Object_Model": {
+    "modified": "2020-10-03T02:52:53.149Z",
     "contributors": [
-      "alberts+",
-      "d4rkne55",
-      "Tosch110",
-      "afoeder",
-      "tobiasherber"
+      "c0dewalker",
+      "wbamberg",
+      "schlagi123",
+      "sigoa",
+      "DoctypeRosenthal",
+      "Venhaus",
+      "crasher666",
+      "IngoB",
+      "fscholz",
+      "eminor"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/String/prototype": {
-    "modified": "2020-10-15T22:24:44.810Z",
+  "Web/JavaScript/Guide/Functions": {
+    "modified": "2020-03-12T19:38:37.078Z",
     "contributors": [
-      "Symtex99"
+      "dmho",
+      "cami",
+      "loicyondjeu",
+      "stefboll",
+      "woiddale",
+      "schlagi123",
+      "b-lack",
+      "vetoCode",
+      "fscholz",
+      "eminor"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/String/raw": {
-    "modified": "2019-03-23T22:34:12.947Z",
+  "Web/JavaScript/Guide/Grammar_and_types": {
+    "modified": "2020-09-16T18:03:08.891Z",
     "contributors": [
-      "kdex",
-      "bfncs",
+      "FFFutureflo",
+      "Tionran",
       "schlagi123",
-      "cnu301"
+      "TomasRiker",
+      "aldec-dv",
+      "SaschaHeyer",
+      "yampus",
+      "FocusCookie",
+      "Randomfinger",
+      "NedNisW",
+      "vetoCode",
+      "didierCH",
+      "baxstar",
+      "fscholz",
+      "siggi-heltau",
+      "eminor",
+      "NickRussler",
+      "Hans_Mueller"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/String/repeat": {
-    "modified": "2020-10-15T22:06:26.477Z",
+  "Web/JavaScript/Guide/Control_flow_and_error_handling": {
+    "modified": "2020-03-12T19:37:55.717Z",
     "contributors": [
-      "AlexWayhill"
+      "cami",
+      "deklesen",
+      "woiddale",
+      "schlagi123",
+      "SaschaHeyer",
+      "PreCodeEU",
+      "StevenS77",
+      "jwhitlock",
+      "KarolineCat",
+      "fscholz",
+      "vsenol",
+      "eminor"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/String/replace": {
-    "modified": "2019-11-20T12:28:26.785Z",
+  "Web/JavaScript/Guide/Working_with_Objects": {
+    "modified": "2020-03-12T19:38:32.446Z",
     "contributors": [
-      "fools-mate",
-      "danieldiekmeier",
-      "kkoop",
-      "HdHeiniDev",
-      "giffeler",
-      "TobiGe",
-      "fancyFranci",
       "schlagi123",
-      "Saschlong",
-      "mower",
-      "tspaeth",
+      "Dr-Oetker",
+      "SphinxKnight",
+      "papper371",
+      "timosperisen",
+      "serv-inc",
+      "fw-zirkusdigitalo",
       "fscholz",
-      "powerswitch"
+      "DavidWalsh",
+      "stephaniehobson",
+      "cyclodev",
+      "eminor"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/String/slice": {
-    "modified": "2019-03-23T22:18:04.121Z",
+  "Web/JavaScript/Guide/Loops_and_iteration": {
+    "modified": "2020-03-12T19:43:05.832Z",
     "contributors": [
-      "napengam",
-      "didierCH",
-      "jay-bricksoft"
+      "schlagi123",
+      "j0ck",
+      "moreadrenalin"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/String/split": {
-    "modified": "2020-10-15T21:34:44.394Z",
+  "Web/JavaScript/Guide/Text_formatting": {
+    "modified": "2020-03-12T19:46:53.213Z",
     "contributors": [
-      "SebinNyshkim",
-      "Ruupatt",
-      "shaedrich",
-      "virtusmaior",
-      "josephinepanda"
+      "schlagi123",
+      "patpir",
+      "SEBv15"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/String/startsWith": {
-    "modified": "2019-09-27T21:50:55.652Z",
+  "Web/JavaScript/JavaScript_technologies_overview": {
+    "modified": "2020-03-12T19:39:42.418Z",
     "contributors": [
-      "daluege",
-      "MWojt",
-      "kdex",
-      "Aaric",
-      "schlagi123",
-      "christ2go"
+      "lesch",
+      "fl1p",
+      "spiegelp"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/String/substr": {
-    "modified": "2019-03-26T09:57:55.345Z",
+  "Web/JavaScript/Reference/Errors/Already_has_pragma": {
+    "modified": "2020-03-12T19:47:20.172Z",
     "contributors": [
-      "F4k3rzZ",
-      "schlagi123",
-      "jazzpi"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/String/substring": {
-    "modified": "2019-05-22T10:50:37.923Z",
+  "Web/JavaScript/Reference/Errors/Array_sort_argument": {
+    "modified": "2020-03-12T19:47:33.148Z",
     "contributors": [
-      "DragonPerl",
-      "thebigbla",
-      "KillerCodeMonkey"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/String/suchen": {
-    "modified": "2020-10-15T22:11:40.635Z",
+  "Web/JavaScript/Reference/Errors/Bad_octal": {
+    "modified": "2020-03-12T19:47:25.600Z",
     "contributors": [
-      "tobipch",
-      "blackjack4494",
-      "Cr4zyG4m3rLP"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/String/toLowerCase": {
-    "modified": "2020-10-15T21:37:54.853Z",
+  "Web/JavaScript/Reference/Errors/Bad_radix": {
+    "modified": "2020-03-12T19:47:40.678Z",
     "contributors": [
-      "schlagi123",
-      "Chips100"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/String/toUpperCase": {
-    "modified": "2019-03-23T22:31:03.601Z",
+  "Web/JavaScript/Reference/Errors/Bad_regexp_flag": {
+    "modified": "2020-03-12T19:47:43.378Z",
     "contributors": [
-      "nextlevelshit",
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/SyntaxError": {
-    "modified": "2020-10-15T21:46:23.938Z",
+  "Web/JavaScript/Reference/Errors/Bad_return_or_yield": {
+    "modified": "2020-03-12T19:47:36.755Z",
     "contributors": [
-      "schlagi123",
-      "fscholz"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype": {
-    "modified": "2020-10-15T21:46:29.639Z",
+  "Web/JavaScript/Reference/Errors/Called_on_incompatible_type": {
+    "modified": "2020-03-12T19:47:23.087Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/TypeError": {
-    "modified": "2020-10-15T21:51:09.089Z",
+  "Web/JavaScript/Reference/Errors/Cant_access_lexical_declaration_before_init": {
+    "modified": "2020-03-12T19:47:39.951Z",
     "contributors": [
-      "schlagi123",
-      "Sheggy"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/TypeError/prototype": {
-    "modified": "2020-10-15T21:58:39.373Z",
+  "Web/JavaScript/Reference/Errors/Cant_access_property": {
+    "modified": "2020-03-12T19:48:57.195Z",
     "contributors": [
-      "schlagi123",
-      "Sheggy"
+      "micschwarz"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/WebAssembly": {
-    "modified": "2020-10-15T22:14:29.365Z",
+  "Web/JavaScript/Reference/Errors/Cant_define_property_object_not_extensible": {
+    "modified": "2020-03-12T19:47:37.913Z",
     "contributors": [
-      "vssn"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/WebAssembly/compile": {
-    "modified": "2020-10-15T22:14:53.372Z",
+  "Web/JavaScript/Reference/Errors/Cant_delete": {
+    "modified": "2020-03-12T19:47:33.700Z",
     "contributors": [
-      "vssn"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/WebAssembly/compileStreaming": {
-    "modified": "2020-10-15T22:15:11.252Z",
+  "Web/JavaScript/Reference/Errors/Cant_redefine_property": {
+    "modified": "2020-03-12T19:47:33.994Z",
     "contributors": [
-      "vssn"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/decodeURIComponent": {
-    "modified": "2020-03-12T19:44:41.805Z",
+  "Web/JavaScript/Reference/Errors/Cyclic_object_value": {
+    "modified": "2020-03-12T19:47:32.067Z",
     "contributors": [
-      "Saerdn"
+      "martinr1604",
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/encodeURI": {
-    "modified": "2020-03-12T19:46:14.428Z",
+  "Web/JavaScript/Reference/Errors/Dead_object": {
+    "modified": "2020-03-12T19:47:34.842Z",
     "contributors": [
-      "eras0r",
-      "knurzl"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/encodeURIComponent": {
-    "modified": "2020-03-12T19:42:09.480Z",
-    "contributors": [
-      "giffeler",
-      "kaenganxt",
-      "dbohn",
-      "ViciousPecan"
+  "Web/JavaScript/Reference/Errors/Delete_in_strict_mode": {
+    "modified": "2020-03-12T19:47:47.727Z",
+    "contributors": [
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/escape": {
-    "modified": "2020-03-12T19:44:36.899Z",
+  "Web/JavaScript/Reference/Errors/Deprecated_caller_or_arguments_usage": {
+    "modified": "2020-03-12T19:47:44.593Z",
     "contributors": [
-      "gappeh"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/globalThis": {
-    "modified": "2020-10-15T22:34:14.804Z",
+  "Web/JavaScript/Reference/Errors/Deprecated_expression_closures": {
+    "modified": "2020-03-12T19:47:23.525Z",
     "contributors": [
-      "vssn"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/isFinite": {
-    "modified": "2020-10-15T21:32:05.093Z",
+  "Web/JavaScript/Reference/Errors/Deprecated_octal": {
+    "modified": "2020-03-12T19:47:46.456Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/isNaN": {
-    "modified": "2020-10-15T21:32:07.461Z",
+  "Web/JavaScript/Reference/Errors/Deprecated_source_map_pragma": {
+    "modified": "2020-03-12T19:47:46.265Z",
     "contributors": [
-      "Steditor",
-      "schlagi123",
-      "SerkanSipahi",
-      "mazilema",
-      "zf2timo"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/null": {
-    "modified": "2020-10-15T21:32:16.691Z",
+  "Web/JavaScript/Reference/Errors/Deprecated_String_generics": {
+    "modified": "2020-03-12T19:47:17.153Z",
     "contributors": [
-      "schlagi123",
-      "HolgerJeromin",
-      "cuatro"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/parseFloat": {
-    "modified": "2020-10-15T21:34:09.121Z",
+  "Web/JavaScript/Reference/Errors/Deprecated_toLocaleFormat": {
+    "modified": "2020-03-12T19:47:24.103Z",
     "contributors": [
-      "hellerim",
-      "schlagi123",
-      "bsotodo",
-      "crood"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/parseInt": {
-    "modified": "2020-10-15T21:45:22.117Z",
+  "Web/JavaScript/Reference/Errors/Equal_as_assign": {
+    "modified": "2020-03-12T19:47:33.976Z",
     "contributors": [
-      "schlagi123",
-      "giffeler",
-      "macahi",
-      "mazilema"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/undefined": {
-    "modified": "2020-10-15T21:32:16.777Z",
+  "Web/JavaScript/Reference/Errors/For-each-in_loops_are_deprecated": {
+    "modified": "2020-03-12T19:47:22.797Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/unescape": {
-    "modified": "2020-03-12T19:41:42.907Z",
+  "Web/JavaScript/Reference/Errors/Getter_only": {
+    "modified": "2020-03-12T19:47:33.589Z",
     "contributors": [
-      "thusslack"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Global_Objects/uneval": {
-    "modified": "2020-03-12T19:44:53.530Z",
+  "Web/JavaScript/Reference/Errors/Identifier_after_number": {
+    "modified": "2020-03-12T19:47:39.577Z",
     "contributors": [
-      "teoli",
-      "SamBrishes"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Iteration_protocols": {
-    "modified": "2020-03-12T19:47:50.502Z",
+  "Web/JavaScript/Reference/Errors/Illegal_character": {
+    "modified": "2020-03-12T19:47:40.583Z",
     "contributors": [
-      "P215W",
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Klassen": {
-    "modified": "2020-03-12T19:41:32.478Z",
+  "Web/JavaScript/Reference/Errors/in_operator_no_object": {
+    "modified": "2020-03-12T19:47:34.037Z",
     "contributors": [
-      "schlagi123",
-      "Daniel_Sixl",
-      "Husi012",
-      "dehenne",
-      "DPangerl",
-      "jaller94",
-      "chiborg",
-      "akumagamo",
-      "neutr0nis",
-      "LevitatingOrange"
+      "matthias85",
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Klassen/constructor": {
-    "modified": "2020-03-12T19:43:34.404Z",
+  "Web/JavaScript/Reference/Errors": {
+    "modified": "2020-03-12T19:43:41.868Z",
     "contributors": [
-      "kdex",
       "schlagi123",
       "akumagamo"
     ]
   },
-  "Web/JavaScript/Reference/Klassen/extends": {
-    "modified": "2020-03-12T19:43:31.080Z",
+  "Web/JavaScript/Reference/Errors/Invalid_array_length": {
+    "modified": "2020-03-12T19:43:36.993Z",
     "contributors": [
-      "hporten",
-      "kdex",
-      "buboh",
       "schlagi123",
+      "yampus",
       "akumagamo"
     ]
   },
-  "Web/JavaScript/Reference/Klassen/static": {
-    "modified": "2020-10-15T21:45:38.442Z",
+  "Web/JavaScript/Reference/Errors/Invalid_assignment_left-hand_side": {
+    "modified": "2020-03-12T19:46:39.233Z",
     "contributors": [
-      "kdex",
       "schlagi123",
-      "Nimelrian",
-      "jahe",
-      "marvhock",
-      "kannix",
-      "akumagamo"
+      "Cripi"
     ]
   },
-  "Web/JavaScript/Reference/Lexical_grammar": {
-    "modified": "2020-10-15T22:03:30.555Z",
+  "Web/JavaScript/Reference/Errors/Invalid_const_assignment": {
+    "modified": "2020-03-12T19:47:33.651Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Operators": {
-    "modified": "2020-10-15T21:31:28.975Z",
+  "Web/JavaScript/Reference/Errors/Invalid_date": {
+    "modified": "2020-03-12T19:47:16.548Z",
     "contributors": [
       "schlagi123",
-      "fscholz",
-      "loki"
-    ]
-  },
-  "Web/JavaScript/Reference/Operators/Addition": {
-    "modified": "2020-10-15T22:34:37.156Z",
-    "contributors": [
-      "cs.schueler"
+      "fire-stone"
     ]
   },
-  "Web/JavaScript/Reference/Operators/Bitwise_Operatoren": {
-    "modified": "2020-10-15T21:51:28.246Z",
+  "Web/JavaScript/Reference/Errors/Invalid_for-in_initializer": {
+    "modified": "2020-03-12T19:47:50.395Z",
     "contributors": [
-      "fscholz",
-      "kaljak",
-      "schlagi123",
-      "mizhac",
-      "MemoWalk"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Operators/Comma_Operator": {
-    "modified": "2020-10-15T21:59:30.294Z",
+  "Web/JavaScript/Reference/Errors/Invalid_for-of_initializer": {
+    "modified": "2020-03-12T19:47:46.412Z",
     "contributors": [
-      "schlagi123",
-      "vssn"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Operators/Conditional_Operator": {
-    "modified": "2020-10-15T21:41:29.204Z",
+  "Web/JavaScript/Reference/Errors/invalid_right_hand_side_instanceof_operand": {
+    "modified": "2020-03-12T19:47:33.003Z",
     "contributors": [
-      "Coding-Boss",
-      "nopeJS",
-      "Binnox",
-      "schlagi123",
-      "JWPapi",
-      "chauthai",
-      "terrluhr"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Operators/Dekrement": {
-    "modified": "2020-10-15T22:34:53.783Z",
+  "Web/JavaScript/Reference/Errors/is_not_iterable": {
+    "modified": "2020-03-12T19:48:02.116Z",
     "contributors": [
-      "Klingohle"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Operators/Destrukturierende_Zuweisung": {
-    "modified": "2020-10-15T21:41:28.452Z",
+  "Web/JavaScript/Reference/Errors/JSON_bad_parse": {
+    "modified": "2020-03-12T19:47:34.652Z",
     "contributors": [
-      "manner",
-      "ldtr89",
-      "Aoke87",
-      "apguru",
       "schlagi123",
-      "himynameissteve",
-      "kdex",
-      "yampus",
-      "chaoran-chen",
-      "Alexa",
-      "sbusch"
+      "Jannik99"
     ]
   },
-  "Web/JavaScript/Reference/Operators/Grouping": {
-    "modified": "2020-10-15T22:05:46.615Z",
+  "Web/JavaScript/Reference/Errors/Malformed_formal_parameter": {
+    "modified": "2020-03-12T19:43:43.986Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Operators/Inkrement": {
-    "modified": "2020-10-15T22:34:54.059Z",
+  "Web/JavaScript/Reference/Errors/Malformed_URI": {
+    "modified": "2020-05-11T08:04:02.475Z",
     "contributors": [
-      "Klingohle"
+      "Skasi",
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Operators/Logische_Operatoren": {
-    "modified": "2020-10-15T21:43:07.470Z",
+  "Web/JavaScript/Reference/Errors/Missing_bracket_after_list": {
+    "modified": "2020-03-12T19:46:42.895Z",
     "contributors": [
       "schlagi123",
-      "LeisureLarry",
-      "Webastronaut"
+      "Stolzenhain"
     ]
   },
-  "Web/JavaScript/Reference/Operators/Modulo": {
-    "modified": "2020-10-15T22:34:54.665Z",
+  "Web/JavaScript/Reference/Errors/Missing_colon_after_property_id": {
+    "modified": "2020-03-12T19:47:39.916Z",
     "contributors": [
-      "Klingohle"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Operators/Objekt_Initialisierer": {
-    "modified": "2020-10-15T21:32:25.926Z",
+  "Web/JavaScript/Reference/Errors/Missing_curly_after_function_body": {
+    "modified": "2020-03-12T19:47:34.109Z",
     "contributors": [
-      "Callirius",
-      "fmeyertoens",
-      "schlagi123",
-      "JohannesDienst",
-      "nnmrts",
-      "kdex",
-      "siggi-heltau"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Operators/Operator_Precedence": {
-    "modified": "2020-03-12T19:43:04.570Z",
+  "Web/JavaScript/Reference/Errors/Missing_curly_after_property_list": {
+    "modified": "2020-03-12T19:45:33.319Z",
     "contributors": [
-      "oliver-gramberg",
-      "Heronils",
       "schlagi123",
-      "Karpfador",
-      "dcodeIO",
-      "LK-Reichl-F",
-      "wLikeFish"
-    ]
-  },
-  "Web/JavaScript/Reference/Operators/Optionale_Verkettung": {
-    "modified": "2020-10-15T22:26:51.885Z",
-    "contributors": [
-      "TorbenKoehn"
+      "fire-stone"
     ]
   },
-  "Web/JavaScript/Reference/Operators/Pipeline_operator": {
-    "modified": "2020-10-15T22:05:45.089Z",
+  "Web/JavaScript/Reference/Errors/Missing_formal_parameter": {
+    "modified": "2020-03-12T19:47:38.482Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Operators/Property_Accessors": {
-    "modified": "2020-10-15T21:55:35.876Z",
+  "Web/JavaScript/Reference/Errors/Missing_initializer_in_const": {
+    "modified": "2020-03-12T19:47:35.587Z",
     "contributors": [
-      "schlagi123",
-      "timosperisen"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Operators/Spread_operator": {
-    "modified": "2020-03-12T19:42:35.849Z",
+  "Web/JavaScript/Reference/Errors/Missing_name_after_dot_operator": {
+    "modified": "2020-03-12T19:47:35.523Z",
     "contributors": [
-      "developitz",
-      "mschleeweiss",
-      "kdex",
-      "theRealBaccata",
-      "schlagi123",
-      "sbusch",
-      "olhaar"
+      "sicLotus",
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Operators/Spread_syntax": {
-    "modified": "2020-10-15T22:05:09.977Z",
+  "Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list": {
+    "modified": "2020-03-12T19:44:04.052Z",
     "contributors": [
-      "mischah",
-      "shaedrich",
       "schlagi123",
-      "mschleeweiss"
+      "iimog",
+      "rolandbgd",
+      "akumagamo"
     ]
   },
-  "Web/JavaScript/Reference/Operators/Vergleichsoperatoren": {
-    "modified": "2020-10-15T21:37:40.074Z",
+  "Web/JavaScript/Reference/Errors/Missing_parenthesis_after_condition": {
+    "modified": "2020-03-12T19:47:39.363Z",
     "contributors": [
-      "Hocdoc",
-      "christophfriedrich",
-      "schlagi123",
-      "Elyasin",
-      "loki"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Operators/Zuweisungsoperator": {
-    "modified": "2020-10-15T21:48:40.239Z",
+  "Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement": {
+    "modified": "2020-03-12T19:44:24.631Z",
     "contributors": [
-      "wbamberg",
+      "flufflepuff91",
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Operators/async_function": {
-    "modified": "2020-10-15T22:05:47.683Z",
+  "Web/JavaScript/Reference/Errors/More_arguments_needed": {
+    "modified": "2020-03-12T19:47:35.019Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Operators/await": {
-    "modified": "2020-10-15T22:05:59.887Z",
+  "Web/JavaScript/Reference/Errors/Negative_repetition_count": {
+    "modified": "2020-03-12T19:47:46.475Z",
     "contributors": [
-      "joebau0815",
-      "saschbro",
-      "chrkhl",
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Operators/class": {
-    "modified": "2020-03-12T19:42:53.976Z",
+  "Web/JavaScript/Reference/Errors/No_non-null_object": {
+    "modified": "2020-03-12T19:47:33.684Z",
     "contributors": [
-      "kdex",
-      "Eiknheimer",
-      "schlagi123",
-      "terrluhr"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Operators/delete": {
-    "modified": "2020-10-15T21:38:04.252Z",
+  "Web/JavaScript/Reference/Errors/No_properties": {
+    "modified": "2020-03-12T19:46:21.338Z",
     "contributors": [
-      "kowarschick",
       "schlagi123",
-      "pascaliske",
-      "enexusde",
-      "CaptainStone",
-      "olhaar"
+      "timosperisen"
     ]
   },
-  "Web/JavaScript/Reference/Operators/function": {
-    "modified": "2020-10-15T21:56:30.909Z",
+  "Web/JavaScript/Reference/Errors/No_variable_name": {
+    "modified": "2020-03-12T19:47:35.139Z",
     "contributors": [
-      "m5yu",
-      "jakobpack",
-      "schlagi123",
-      "christianrhansen",
-      "vssn",
-      "amelzer"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Operators/function*": {
-    "modified": "2020-10-15T22:05:42.272Z",
+  "Web/JavaScript/Reference/Errors/Non_configurable_array_element": {
+    "modified": "2020-03-12T19:47:37.860Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Operators/in": {
-    "modified": "2020-10-15T21:39:06.431Z",
+  "Web/JavaScript/Reference/Errors/Not_a_codepoint": {
+    "modified": "2020-03-12T19:44:01.592Z",
     "contributors": [
-      "mfranzke",
       "schlagi123",
-      "kdex",
-      "xergon"
+      "akumagamo"
     ]
   },
-  "Web/JavaScript/Reference/Operators/instanceof": {
-    "modified": "2020-10-15T21:39:26.955Z",
+  "Web/JavaScript/Reference/Errors/Not_a_constructor": {
+    "modified": "2020-03-12T19:46:54.349Z",
     "contributors": [
+      "NiklasMerz",
       "schlagi123",
-      "HolgerJeromin",
-      "flipace",
-      "weedukind"
+      "klug_mario"
     ]
   },
-  "Web/JavaScript/Reference/Operators/new": {
-    "modified": "2020-10-15T21:38:03.135Z",
+  "Web/JavaScript/Reference/Errors/Not_a_function": {
+    "modified": "2020-03-12T19:45:23.396Z",
     "contributors": [
-      "FelixSab",
+      "flufflepuff91",
       "schlagi123",
-      "Maugo",
-      "michiruckstuhl",
-      "danbru1211"
+      "fire-stone"
     ]
   },
-  "Web/JavaScript/Reference/Operators/new.target": {
-    "modified": "2020-10-15T22:05:44.821Z",
+  "Web/JavaScript/Reference/Errors/Not_defined": {
+    "modified": "2020-03-12T19:44:11.129Z",
     "contributors": [
-      "hporten",
-      "schlagi123"
+      "flufflepuff91",
+      "schlagi123",
+      "BennoKieselstein",
+      "Bernd_L",
+      "akumagamo"
     ]
   },
-  "Web/JavaScript/Reference/Operators/super": {
-    "modified": "2020-10-15T21:47:20.372Z",
+  "Web/JavaScript/Reference/Errors/Precision_range": {
+    "modified": "2020-03-12T19:44:05.096Z",
     "contributors": [
       "schlagi123",
-      "kdex",
-      "Skycro"
+      "akumagamo"
     ]
   },
-  "Web/JavaScript/Reference/Operators/this": {
-    "modified": "2020-10-15T21:46:51.232Z",
+  "Web/JavaScript/Reference/Errors/Property_access_denied": {
+    "modified": "2020-03-12T19:44:01.071Z",
     "contributors": [
-      "KratosAurion",
       "schlagi123",
-      "kelthuzad",
-      "eluchsinger"
+      "akumagamo"
     ]
   },
-  "Web/JavaScript/Reference/Operators/typeof": {
-    "modified": "2020-11-06T10:38:36.219Z",
+  "Web/JavaScript/Reference/Errors/Read-only": {
+    "modified": "2020-03-12T19:47:33.685Z",
     "contributors": [
-      "mschleeweiss",
-      "schlagi123",
-      "dmarku"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Operators/void": {
-    "modified": "2020-10-15T21:34:41.746Z",
+  "Web/JavaScript/Reference/Errors/Redeclared_parameter": {
+    "modified": "2020-03-12T19:47:37.067Z",
     "contributors": [
-      "schlagi123",
-      "amelzer",
-      "JohannesDienst"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Operators/yield": {
-    "modified": "2020-10-15T22:05:44.303Z",
+  "Web/JavaScript/Reference/Errors/Reduce_of_empty_array_with_no_initial_value": {
+    "modified": "2020-03-12T19:47:39.369Z",
     "contributors": [
-      "kevinfoerster",
-      "ionxenia",
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Operators/yield*": {
-    "modified": "2020-10-15T22:05:43.798Z",
+  "Web/JavaScript/Reference/Errors/Reserved_identifier": {
+    "modified": "2020-03-12T19:47:46.391Z",
     "contributors": [
-      "jborsch",
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Statements": {
-    "modified": "2020-10-15T21:30:44.678Z",
+  "Web/JavaScript/Reference/Errors/Resulting_string_too_large": {
+    "modified": "2020-03-12T19:47:46.172Z",
     "contributors": [
-      "Galajda",
-      "schlagi123",
-      "JorisGutjahr",
-      "fscholz",
-      "SphinxKnight",
-      "timbernasley"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Statements/Empty": {
-    "modified": "2020-03-12T19:43:34.145Z",
+  "Web/JavaScript/Reference/Errors/Stmt_after_return": {
+    "modified": "2020-03-12T19:43:39.489Z",
     "contributors": [
-      "KuhnEDV"
+      "schlagi123",
+      "akumagamo"
     ]
   },
-  "Web/JavaScript/Reference/Statements/async_function": {
-    "modified": "2020-10-15T22:13:51.356Z",
+  "Web/JavaScript/Reference/Errors/Strict_Non_Simple_Params": {
+    "modified": "2020-03-12T19:47:45.620Z",
     "contributors": [
-      "Dodo-the-Coder",
-      "vssn",
-      "Galajda"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Statements/block": {
-    "modified": "2020-10-15T21:32:12.580Z",
+  "Web/JavaScript/Reference/Errors/Too_much_recursion": {
+    "modified": "2020-03-12T19:43:58.453Z",
     "contributors": [
-      "zuzuzu",
+      "schlagi123",
+      "olhaar",
       "yampus",
-      "mdschweda",
+      "julmot",
+      "akumagamo"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Typed_array_invalid_arguments": {
+    "modified": "2020-03-12T19:47:33.971Z",
+    "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Statements/break": {
-    "modified": "2020-03-12T19:40:27.998Z",
+  "Web/JavaScript/Reference/Errors/Undeclared_var": {
+    "modified": "2020-03-12T19:47:43.541Z",
     "contributors": [
       "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Statements/class": {
-    "modified": "2020-03-12T19:43:47.910Z",
+  "Web/JavaScript/Reference/Errors/Undefined_prop": {
+    "modified": "2020-03-12T19:44:10.591Z",
     "contributors": [
-      "kdex",
-      "Idrinth",
       "schlagi123",
-      "eluchsinger"
+      "ThomasFe",
+      "akumagamo"
     ]
   },
-  "Web/JavaScript/Reference/Statements/const": {
-    "modified": "2020-10-15T21:32:07.805Z",
+  "Web/JavaScript/Reference/Errors/Unexpected_token": {
+    "modified": "2020-03-12T19:45:02.701Z",
     "contributors": [
-      "zuzuzu",
-      "evayde",
-      "timlg07",
-      "SphinxKnight",
-      "kdex",
-      "marcelglaeser",
-      "andreashofer123",
-      "fscholz",
-      "schlagi123"
+      "schlagi123",
+      "albasiba"
     ]
   },
-  "Web/JavaScript/Reference/Statements/continue": {
-    "modified": "2020-10-15T21:45:50.193Z",
+  "Web/JavaScript/Reference/Errors/Unexpected_type": {
+    "modified": "2020-03-12T19:45:54.249Z",
     "contributors": [
       "schlagi123",
-      "KuhnEDV"
+      "thegeg",
+      "SusiHutzler",
+      "fire-stone",
+      "netalp"
     ]
   },
-  "Web/JavaScript/Reference/Statements/debugger": {
-    "modified": "2020-10-15T22:30:09.075Z",
+  "Web/JavaScript/Reference/Errors/Unnamed_function_statement": {
+    "modified": "2020-03-12T19:47:45.907Z",
     "contributors": [
-      "zuzuzu"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Statements/default": {
-    "modified": "2020-10-15T21:46:29.118Z",
+  "Web/JavaScript/Reference/Errors/Unterminated_string_literal": {
+    "modified": "2020-03-12T19:47:34.534Z",
     "contributors": [
-      "schlagi123",
-      "eluchsinger"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Statements/do...while": {
-    "modified": "2020-03-12T19:42:19.798Z",
+  "Web/JavaScript/Reference/Errors/Var_hides_argument": {
+    "modified": "2020-03-12T19:47:33.618Z",
+    "contributors": [
+      "schlagi123"
+    ]
+  },
+  "Web/JavaScript/Reference/Functions/Method_definitions": {
+    "modified": "2020-03-12T19:40:25.737Z",
     "contributors": [
+      "kdex",
       "schlagi123",
-      "jumpball"
+      "siggi-heltau"
     ]
   },
-  "Web/JavaScript/Reference/Statements/export": {
-    "modified": "2020-10-15T21:41:31.690Z",
+  "Web/JavaScript/Reference/Functions/Arrow_functions": {
+    "modified": "2020-10-15T21:50:51.602Z",
     "contributors": [
-      "hoelzlmanuel",
-      "wheelmaker24",
-      "xchange11",
       "schlagi123",
-      "Snapstromegon",
-      "thomaskempel",
-      "yampus",
-      "rroehrig",
-      "tuffi111",
-      "sbusch"
+      "Sixl-Daniel",
+      "kdex",
+      "sja",
+      "Eiknheimer",
+      "GuidoSchweizer",
+      "mhash17"
     ]
   },
-  "Web/JavaScript/Reference/Statements/for": {
-    "modified": "2020-03-12T19:42:06.001Z",
+  "Web/JavaScript/Reference/Functions/rest_parameters": {
+    "modified": "2020-10-15T21:56:07.951Z",
     "contributors": [
+      "sonicdoe",
       "schlagi123",
-      "Elyasin"
+      "Simmarith"
     ]
   },
-  "Web/JavaScript/Reference/Statements/for...in": {
-    "modified": "2020-05-27T10:00:58.351Z",
+  "orphaned/Web/JavaScript/Reference/Global_Objects/Array/prototype": {
+    "modified": "2020-10-15T21:52:42.525Z",
     "contributors": [
-      "zuzuzu",
-      "baasti",
-      "koedev",
-      "Vitroxyn",
+      "Stoeoeoe",
       "schlagi123",
-      "KuhnEDV",
-      "JohannesDienst",
-      "fscholz",
-      "lupo72"
+      "StevenS77"
     ]
   },
-  "Web/JavaScript/Reference/Statements/for...of": {
-    "modified": "2020-03-12T19:41:38.990Z",
+  "orphaned/Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype": {
+    "modified": "2020-10-15T22:01:09.829Z",
     "contributors": [
-      "pastparty",
-      "Xan2063",
-      "SphinxKnight",
-      "kdex",
-      "Narigo"
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Statements/function*": {
-    "modified": "2020-10-15T21:45:47.005Z",
+  "Web/JavaScript/Reference/Global_Objects/Atomics/notify": {
+    "modified": "2020-10-15T22:01:24.441Z",
     "contributors": [
-      "oliver-gramberg",
-      "arothweiler",
-      "schlagi123",
-      "xstable",
-      "yampus",
-      "kdex",
-      "KuhnEDV"
+      "Cortys",
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Statements/funktion": {
-    "modified": "2020-03-12T19:42:16.537Z",
+  "Web/JavaScript/Reference/Global_Objects/Math/random": {
+    "modified": "2020-10-15T21:36:41.048Z",
     "contributors": [
-      "yampus",
-      "trillerpfeife",
-      "neverendingo"
+      "grumpy-cat",
+      "schlagi123",
+      "cami",
+      "serv-inc",
+      "Dargmuesli"
     ]
   },
-  "Web/JavaScript/Reference/Statements/if...else": {
-    "modified": "2020-10-15T21:32:18.484Z",
+  "Web/JavaScript/Reference/Global_Objects/String/search": {
+    "modified": "2020-10-15T22:11:40.635Z",
+    "contributors": [
+      "tobipch",
+      "blackjack4494",
+      "Cr4zyG4m3rLP"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/trimStart": {
+    "modified": "2020-10-15T21:48:35.629Z",
     "contributors": [
-      "schlagi123",
-      "yampus"
+      "teoli",
+      "schlagi123"
     ]
   },
-  "Web/JavaScript/Reference/Statements/import": {
-    "modified": "2020-10-15T21:39:21.688Z",
+  "Web/JavaScript/Reference/Global_Objects/String/trimEnd": {
+    "modified": "2020-10-15T21:47:40.889Z",
     "contributors": [
-      "fmeyertoens",
-      "kdex",
-      "Snapstromegon",
-      "Kani1013",
-      "michaelze",
-      "yampus",
-      "yannick_versley",
-      "BennyAlex",
-      "Marzelpan",
+      "teoli",
       "schlagi123",
-      "Breaker222",
-      "Simmarith",
-      "matbad"
+      "Zertrax"
     ]
   },
-  "Web/JavaScript/Reference/Statements/label": {
-    "modified": "2020-03-12T19:43:50.191Z",
+  "Web/JavaScript/Reference/Classes/constructor": {
+    "modified": "2020-03-12T19:43:34.404Z",
     "contributors": [
+      "kdex",
       "schlagi123",
-      "eluchsinger"
+      "akumagamo"
     ]
   },
-  "Web/JavaScript/Reference/Statements/let": {
-    "modified": "2020-03-12T19:40:29.227Z",
+  "Web/JavaScript/Reference/Classes/extends": {
+    "modified": "2020-03-12T19:43:31.080Z",
     "contributors": [
-      "evayde",
-      "rs-github",
-      "cami",
-      "Flonk",
+      "hporten",
       "kdex",
-      "sigoa",
-      "TheFaithfulCritic",
-      "FliegenKLATSCH",
-      "gtmn",
-      "rimace",
+      "buboh",
       "schlagi123",
-      "AndreeWille",
-      "th-we",
-      "chk1",
-      "fscholz"
+      "akumagamo"
     ]
   },
-  "Web/JavaScript/Reference/Statements/return": {
-    "modified": "2020-03-12T19:44:07.700Z",
+  "Web/JavaScript/Reference/Classes": {
+    "modified": "2020-03-12T19:41:32.478Z",
     "contributors": [
-      "christophfriedrich",
-      "schlagi123"
+      "schlagi123",
+      "Daniel_Sixl",
+      "Husi012",
+      "dehenne",
+      "DPangerl",
+      "jaller94",
+      "chiborg",
+      "akumagamo",
+      "neutr0nis",
+      "LevitatingOrange"
     ]
   },
-  "Web/JavaScript/Reference/Statements/switch": {
-    "modified": "2020-03-12T19:41:30.012Z",
+  "Web/JavaScript/Reference/Classes/static": {
+    "modified": "2020-10-15T21:45:38.442Z",
     "contributors": [
+      "kdex",
       "schlagi123",
-      "Elyasin"
+      "Nimelrian",
+      "jahe",
+      "marvhock",
+      "kannix",
+      "akumagamo"
     ]
   },
-  "Web/JavaScript/Reference/Statements/throw": {
-    "modified": "2020-03-12T19:43:13.297Z",
+  "Web/JavaScript/Reference/Operators/Decrement": {
+    "modified": "2020-10-15T22:34:53.783Z",
     "contributors": [
-      "StanE"
+      "Klingohle"
     ]
   },
-  "Web/JavaScript/Reference/Statements/try...catch": {
-    "modified": "2020-03-12T19:45:01.106Z",
+  "Web/JavaScript/Reference/Operators/Destructuring_assignment": {
+    "modified": "2020-10-15T21:41:28.452Z",
     "contributors": [
-      "SpikePy",
-      "timomeh",
-      "stepdate"
+      "manner",
+      "ldtr89",
+      "Aoke87",
+      "apguru",
+      "schlagi123",
+      "himynameissteve",
+      "kdex",
+      "yampus",
+      "chaoran-chen",
+      "Alexa",
+      "sbusch"
     ]
   },
-  "Web/JavaScript/Reference/Statements/var": {
-    "modified": "2020-03-12T19:40:22.049Z",
+  "Web/JavaScript/Reference/Operators/Increment": {
+    "modified": "2020-10-15T22:34:54.059Z",
     "contributors": [
-      "rs-github",
-      "trillerpfeife",
-      "Epiglottis",
-      "schlagi123",
-      "rkoch",
-      "th-we",
-      "fscholz"
+      "Klingohle"
     ]
   },
-  "Web/JavaScript/Reference/Statements/while": {
-    "modified": "2020-10-15T21:37:40.413Z",
+  "Web/JavaScript/Reference/Operators/Remainder": {
+    "modified": "2020-10-15T22:34:54.665Z",
     "contributors": [
-      "dmho",
-      "schlagi123",
-      "Jintzo",
-      "Elyasin"
+      "Klingohle"
     ]
   },
-  "Web/JavaScript/Reference/Strict_mode": {
-    "modified": "2020-05-27T12:41:43.793Z",
+  "Web/JavaScript/Reference/Operators/Object_initializer": {
+    "modified": "2020-10-15T21:32:25.926Z",
     "contributors": [
-      "zuzuzu",
-      "SebinNyshkim",
-      "fscholz"
+      "Callirius",
+      "fmeyertoens",
+      "schlagi123",
+      "JohannesDienst",
+      "nnmrts",
+      "kdex",
+      "siggi-heltau"
     ]
   },
-  "Web/JavaScript/Reference/Veraltete_und_abgeschaffte_Features": {
-    "modified": "2020-03-12T19:43:15.969Z",
+  "Web/JavaScript/Reference/Operators/Optional_chaining": {
+    "modified": "2020-10-15T22:26:51.885Z",
     "contributors": [
-      "PointedEars",
-      "jumpball"
+      "TorbenKoehn"
     ]
   },
-  "Web/JavaScript/Reference/Veraltete_und_abgeschaffte_Features/The_legacy_Iterator_protocol": {
-    "modified": "2020-03-12T19:48:53.999Z",
+  "Web/JavaScript/Reference/Statements/function": {
+    "modified": "2020-03-12T19:42:16.537Z",
     "contributors": [
-      "ctexxx"
+      "yampus",
+      "trillerpfeife",
+      "neverendingo"
     ]
   },
-  "Web/JavaScript/Reference/template_strings": {
+  "Web/JavaScript/Reference/Template_literals": {
     "modified": "2020-10-15T21:38:21.925Z",
     "contributors": [
       "zuzuzu",
@@ -14247,7 +14175,20 @@
       "stehefan"
     ]
   },
-  "Web/JavaScript/Speicherverwaltung": {
+  "Web/JavaScript/Reference/Deprecated_and_obsolete_features": {
+    "modified": "2020-03-12T19:43:15.969Z",
+    "contributors": [
+      "PointedEars",
+      "jumpball"
+    ]
+  },
+  "Web/JavaScript/Reference/Deprecated_and_obsolete_features/The_legacy_Iterator_protocol": {
+    "modified": "2020-03-12T19:48:53.999Z",
+    "contributors": [
+      "ctexxx"
+    ]
+  },
+  "Web/JavaScript/Memory_Management": {
     "modified": "2020-03-12T19:38:43.251Z",
     "contributors": [
       "FERNman",
@@ -14256,19 +14197,7 @@
       "eminor"
     ]
   },
-  "Web/JavaScript/Typed_arrays": {
-    "modified": "2020-03-12T19:40:57.461Z",
-    "contributors": [
-      "flying-sheep",
-      "ksm2",
-      "Adowrath",
-      "schlagi123",
-      "sspringer82",
-      "fscholz",
-      "rogerraetzel"
-    ]
-  },
-  "Web/JavaScript/Vergleiche_auf_Gleichheit_und_deren_Verwendung": {
+  "Web/JavaScript/Equality_comparisons_and_sameness": {
     "modified": "2020-03-12T19:40:00.637Z",
     "contributors": [
       "schlagi123",
@@ -14278,559 +14207,630 @@
       "spiegelp"
     ]
   },
-  "Web/Manifest": {
-    "modified": "2020-08-31T08:04:51.977Z",
+  "Web/MathML/Attribute/Values": {
+    "modified": "2019-03-18T21:17:29.433Z",
     "contributors": [
-      "Zyndoras",
-      "gpion",
-      "SphinxKnight",
-      "tomknig",
-      "Lanseuo",
-      "lionralfs",
-      "hrjhn",
-      "McSodbrenner",
-      "fscholz",
-      "mojoaxel",
-      "tempelgogo",
-      "yzanomi"
+      "Draussenduscher"
     ]
   },
-  "Web/Manifest/short_name": {
-    "modified": "2020-10-15T22:31:31.945Z",
+  "Web/MathML/Examples": {
+    "modified": "2019-03-23T22:41:30.288Z",
     "contributors": [
-      "kevin98"
+      "Draussenduscher"
     ]
   },
-  "Web/MathML": {
-    "modified": "2019-03-23T22:48:05.789Z",
+  "Web/MathML/Examples/MathML_Pythagorean_Theorem": {
+    "modified": "2019-03-18T21:15:50.621Z",
     "contributors": [
-      "Draussenduscher",
-      "jumpball"
+      "Draussenduscher"
     ]
   },
-  "Web/MathML/Attribute": {
-    "modified": "2020-12-10T08:16:36.851Z",
+  "Web/MathML/Examples/Deriving_the_Quadratic_Formula": {
+    "modified": "2019-03-23T22:41:16.866Z",
     "contributors": [
-      "Borgitowner",
       "Draussenduscher"
     ]
   },
-  "Web/MathML/Attribute/Werte": {
-    "modified": "2019-03-18T21:17:29.433Z",
+  "Web/HTTP/Public_Key_Pinning": {
+    "modified": "2020-10-15T21:39:59.794Z",
     "contributors": [
-      "Draussenduscher"
+      "Dschubba",
+      "GanbaruTobi",
+      "rugk",
+      "TheAlxH",
+      "mozjan"
     ]
   },
-  "Web/MathML/Beispiele": {
-    "modified": "2019-03-23T22:41:30.288Z",
+  "Web/SVG/Tutorial/Introduction": {
+    "modified": "2019-01-16T14:32:58.426Z",
     "contributors": [
-      "Draussenduscher"
+      "teoli",
+      "fscholz",
+      "Mickiboy"
     ]
   },
-  "Web/MathML/Beispiele/MathML_Satz_des_Pythagoras": {
-    "modified": "2019-03-18T21:15:50.621Z",
+  "Web/SVG/Tutorial/Paths": {
+    "modified": "2019-11-01T07:41:48.434Z",
     "contributors": [
-      "Draussenduscher"
+      "michelgotta",
+      "ringostarr80",
+      "Wombosvideo"
     ]
   },
-  "Web/MathML/Beispiele/Quadratische_Gleichung": {
-    "modified": "2019-03-23T22:41:16.866Z",
+  "Web/SVG/Tutorial/SVG_fonts": {
+    "modified": "2019-04-14T13:08:23.758Z",
     "contributors": [
-      "Draussenduscher"
+      "Heupferdchenritter"
     ]
   },
-  "Web/MathML/Element": {
-    "modified": "2019-03-23T22:41:28.276Z",
+  "Web/API/Geolocation_API": {
+    "modified": "2019-03-23T22:52:49.349Z",
     "contributors": [
-      "Draussenduscher"
+      "shaedrich",
+      "42triangles",
+      "silend"
+    ]
+  },
+  "Web/XML/XML_introduction": {
+    "modified": "2019-05-01T21:51:49.890Z",
+    "contributors": [
+      "ExE-Boss",
+      "fscholz",
+      "XxPlay9xX",
+      "Mowtrains",
+      "Maxemil",
+      "Tammo",
+      "M@d Man"
+    ]
+  },
+  "Web/API/WebSockets_API": {
+    "modified": "2019-03-23T22:59:48.670Z",
+    "contributors": [
+      "Johann150",
+      "mvb1996"
+    ]
+  },
+  "Web/API/WebSockets_API/Writing_WebSocket_servers": {
+    "modified": "2020-08-15T02:07:04.944Z",
+    "contributors": [
+      "otde2016"
+    ]
+  },
+  "Web/API/Document_Object_Model": {
+    "modified": "2019-03-24T00:03:18.662Z",
+    "contributors": [
+      "TheNT87",
+      "Barfooz",
+      "ethertank",
+      "fscholz",
+      "Crash",
+      "Takenbot",
+      "M@d Man"
     ]
   },
-  "Web/MathML/Element/maction": {
-    "modified": "2019-03-23T22:35:35.054Z",
+  "conflicting/Web/API/Document_Object_Model": {
+    "modified": "2019-12-23T07:48:22.460Z",
     "contributors": [
-      "Draussenduscher"
+      "Cerberooo",
+      "StevenS77",
+      "Barfooz"
     ]
   },
-  "Web/MathML/Element/math": {
-    "modified": "2019-03-18T21:15:50.121Z",
+  "Web/API/HTML_Drag_and_Drop_API": {
+    "modified": "2019-03-23T23:26:04.264Z",
     "contributors": [
-      "Draussenduscher"
+      "drewp"
     ]
   },
-  "Web/MathML/Element/menclose": {
-    "modified": "2019-03-23T22:35:37.131Z",
+  "conflicting/Mozilla/Add-ons": {
+    "modified": "2019-03-24T00:04:52.753Z",
     "contributors": [
-      "Draussenduscher"
+      "tregagnon",
+      "fscholz",
+      "SeSchneider",
+      "Yozh88",
+      "Jules Papillon",
+      "Alopix",
+      "Pl4yer",
+      "Masterdschecker",
+      "Michael2402",
+      "Undertaker",
+      "Thomas147",
+      "Felix.Schwarz",
+      "Verruckt",
+      "Slosd",
+      "Philipp",
+      "Indigo",
+      "Jonny",
+      "Takenbot",
+      "Manuel Strehl",
+      "Ar-sch.de",
+      "DDSD",
+      "Dria"
     ]
   },
-  "Web/MathML/Element/merror": {
-    "modified": "2019-03-23T22:35:42.535Z",
+  "conflicting/Glossary/Doctype": {
+    "modified": "2019-07-04T23:44:01.071Z",
     "contributors": [
-      "Draussenduscher"
+      "PercyGitarrist"
     ]
   },
-  "Web/MathML/Element/mfenced": {
-    "modified": "2019-03-23T22:35:44.635Z",
+  "conflicting/MDN/Contribute/Getting_started": {
+    "modified": "2019-01-16T20:30:11.342Z",
     "contributors": [
-      "Draussenduscher"
+      "wbamberg",
+      "dario.bloch"
     ]
   },
-  "Web/MathML/Element/mfrac": {
-    "modified": "2019-03-23T22:39:13.573Z",
+  "MDN/Tools": {
+    "modified": "2019-03-23T22:50:19.741Z",
     "contributors": [
-      "Draussenduscher"
+      "wbamberg",
+      "jezdez",
+      "LeindK"
     ]
   },
-  "Web/MathML/Element/mi": {
-    "modified": "2019-03-23T22:39:56.494Z",
+  "Web/Guide/Mobile": {
+    "modified": "2019-03-23T23:29:04.325Z",
     "contributors": [
-      "Draussenduscher"
+      "wbamberg"
     ]
   },
-  "Web/MathML/Element/mn": {
-    "modified": "2019-03-23T22:40:17.694Z",
+  "conflicting/Web/Progressive_web_apps": {
+    "modified": "2019-03-23T23:29:04.477Z",
     "contributors": [
-      "Draussenduscher"
+      "HolgerSinn.Com"
     ]
   },
-  "Web/MathML/Element/mo": {
-    "modified": "2019-03-23T22:40:19.804Z",
+  "Web/API/WindowOrWorkerGlobalScope": {
+    "modified": "2019-03-23T22:50:32.909Z",
     "contributors": [
-      "Draussenduscher"
+      "teoli"
     ]
   },
-  "Web/MathML/Element/mover": {
-    "modified": "2019-03-23T22:35:41.970Z",
+  "conflicting/Web/API/WindowOrWorkerGlobalScope": {
+    "modified": "2019-03-23T23:01:42.969Z",
     "contributors": [
-      "Draussenduscher"
+      "teoli"
     ]
   },
-  "Web/MathML/Element/mpadded": {
-    "modified": "2019-03-23T22:35:41.097Z",
+  "conflicting/Web/Accessibility": {
+    "modified": "2019-03-18T20:35:27.144Z",
     "contributors": [
-      "Draussenduscher"
+      "chrisdavidmills",
+      "teoli",
+      "eminor"
     ]
   },
-  "Web/MathML/Element/mphantom": {
-    "modified": "2019-03-23T22:35:42.968Z",
+  "Web/CSS/:placeholder-shown": {
+    "modified": "2019-03-23T23:11:34.619Z",
     "contributors": [
-      "Draussenduscher"
+      "teoli",
+      "Sebastianz"
     ]
   },
-  "Web/MathML/Element/mroot": {
-    "modified": "2019-03-23T22:40:25.676Z",
+  "conflicting/Web/CSS/::placeholder": {
+    "modified": "2019-03-23T23:08:23.797Z",
     "contributors": [
-      "Draussenduscher",
-      "jumpball"
+      "teoli",
+      "Sebastianz",
+      "icy"
     ]
   },
-  "Web/MathML/Element/mrow": {
-    "modified": "2019-03-23T22:40:55.520Z",
+  "Web/CSS/box-ordinal-group": {
+    "modified": "2019-03-23T22:45:29.807Z",
     "contributors": [
-      "Draussenduscher"
+      "Sebastianz"
     ]
   },
-  "Web/MathML/Element/ms": {
-    "modified": "2019-03-23T22:35:40.687Z",
+  "conflicting/Web/CSS/cursor": {
+    "modified": "2019-03-23T23:11:42.748Z",
     "contributors": [
-      "Draussenduscher"
+      "Sebastianz",
+      "teoli"
     ]
   },
-  "Web/MathML/Element/mspace": {
-    "modified": "2019-03-23T22:35:41.572Z",
+  "Web/CSS/mask-origin": {
+    "modified": "2019-03-23T22:44:52.161Z",
     "contributors": [
-      "Draussenduscher"
+      "Sebastianz"
     ]
   },
-  "Web/MathML/Element/msqrt": {
-    "modified": "2019-03-23T22:40:04.280Z",
+  "Web/CSS/mask-repeat": {
+    "modified": "2019-03-23T22:45:10.485Z",
     "contributors": [
-      "Draussenduscher"
+      "Sebastianz"
     ]
   },
-  "Web/MathML/Element/mstyle": {
-    "modified": "2020-10-15T21:41:26.425Z",
+  "conflicting/Web/CSS/cursor_35a62ea3f10b688a3a87ccfe07779743": {
+    "modified": "2019-03-23T22:43:38.581Z",
     "contributors": [
-      "bershanskiy",
-      "Draussenduscher"
+      "Sebastianz"
     ]
   },
-  "Web/MathML/Element/msub": {
-    "modified": "2019-03-18T21:15:46.910Z",
+  "conflicting/Web/CSS/width": {
+    "modified": "2019-03-23T23:23:49.598Z",
     "contributors": [
-      "Draussenduscher"
+      "SJW"
     ]
   },
-  "Web/MathML/Element/msubsup": {
-    "modified": "2019-03-23T22:35:33.789Z",
+  "Web/CSS/CSS_Backgrounds_and_Borders": {
+    "modified": "2019-03-23T22:44:11.176Z",
     "contributors": [
-      "Draussenduscher"
+      "teoli"
     ]
   },
-  "Web/MathML/Element/msup": {
-    "modified": "2019-03-23T22:35:34.021Z",
+  "Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds": {
+    "modified": "2019-03-23T23:02:41.693Z",
     "contributors": [
-      "Draussenduscher"
+      "terwortH",
+      "benmann",
+      "teoli",
+      "Sebastianz",
+      "srhjg"
     ]
   },
-  "Web/MathML/Element/mtable": {
-    "modified": "2019-03-23T22:35:58.744Z",
+  "Web/CSS/CSS_Color": {
+    "modified": "2019-03-23T22:45:11.820Z",
     "contributors": [
-      "Draussenduscher"
+      "Sebastianz",
+      "teoli"
     ]
   },
-  "Web/MathML/Element/mtd": {
-    "modified": "2019-03-23T22:36:01.471Z",
+  "Web/CSS/Compositing_and_Blending": {
+    "modified": "2019-03-23T22:41:20.151Z",
     "contributors": [
-      "Draussenduscher"
+      "Sebastianz"
     ]
   },
-  "Web/MathML/Element/mtext": {
-    "modified": "2019-03-23T22:35:39.496Z",
+  "conflicting/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox": {
+    "modified": "2019-03-18T20:58:13.468Z",
     "contributors": [
-      "Draussenduscher"
+      "KadirTopal",
+      "wiegels",
+      "AccNeeder",
+      "rroehrig",
+      "thorsten.rinne",
+      "fscholz",
+      "elker",
+      "thandwerker",
+      "Honig"
     ]
   },
-  "Web/MathML/Element/mtr": {
-    "modified": "2019-03-23T22:36:03.515Z",
+  "conflicting/Web/CSS/CSS_Basic_User_Interface": {
+    "modified": "2019-03-23T22:43:34.455Z",
     "contributors": [
-      "Draussenduscher"
+      "SphinxKnight",
+      "ExE-Boss",
+      "Sebastianz"
     ]
   },
-  "Web/MathML/Element/munder": {
-    "modified": "2019-03-23T22:35:33.540Z",
+  "Web/CSS/gap": {
+    "modified": "2020-10-15T22:00:43.740Z",
     "contributors": [
-      "Draussenduscher"
+      "AlexWayhill",
+      "Craeckerffm"
     ]
   },
-  "Web/MathML/Element/munderover": {
-    "modified": "2019-03-23T22:35:34.263Z",
+  "conflicting/Web/CSS/float": {
+    "modified": "2019-03-23T23:23:49.504Z",
     "contributors": [
-      "Draussenduscher"
+      "SJW"
     ]
   },
-  "Web/Performance": {
-    "modified": "2020-05-22T10:23:33.706Z",
+  "conflicting/Web/CSS/font-variant": {
+    "modified": "2019-03-23T23:23:47.885Z",
     "contributors": [
-      "chrisdavidmills"
+      "dio",
+      "SJW"
     ]
   },
-  "Web/Performance/dns-prefetch": {
-    "modified": "2020-05-22T10:23:34.773Z",
+  "Web/CSS/url()": {
+    "modified": "2020-10-15T22:01:29.787Z",
     "contributors": [
-      "chryxf"
+      "valentinprotiuc"
     ]
   },
-  "Web/Progressive_web_apps": {
-    "modified": "2019-08-19T03:49:08.791Z",
+  "conflicting/Learn/CSS/Building_blocks/Values_and_units": {
+    "modified": "2019-03-23T23:08:03.393Z",
     "contributors": [
-      "fschaupp",
-      "chrisdavidmills",
-      "friedger"
+      "spiegelp",
+      "thkoch"
     ]
   },
-  "Web/Reference": {
-    "modified": "2020-07-03T18:35:25.162Z",
+  "conflicting/Learn/CSS/First_steps": {
+    "modified": "2019-03-24T00:05:49.642Z",
     "contributors": [
-      "duckymirror",
-      "fhwfzfge",
-      "Patrick_St.",
-      "Nickolay"
+      "teoli",
+      "fscholz",
+      "DavidWalsh"
     ]
   },
-  "Web/Reference/API": {
-    "modified": "2019-03-23T23:18:19.126Z",
+  "Learn/CSS/Building_blocks/Cascade_and_inheritance": {
+    "modified": "2019-03-23T22:49:16.030Z",
     "contributors": [
-      "goligo",
-      "Hanibal1963",
-      "AngelSankturio"
+      "spiegelp"
     ]
   },
-  "Web/SVG": {
-    "modified": "2019-03-24T00:13:09.048Z",
+  "Learn/CSS/First_steps/How_CSS_is_structured": {
+    "modified": "2019-03-23T22:41:33.439Z",
     "contributors": [
-      "teoli",
-      "ethertank",
-      "DavidWalsh",
-      "nicolasmn",
-      "fscholz",
-      "Mickiboy",
-      "-=Renegade=-",
-      "Ak120"
+      "spiegelp"
     ]
   },
-  "Web/SVG/Attribute": {
-    "modified": "2019-03-23T22:14:31.297Z",
+  "Learn/CSS/Building_blocks/Selectors": {
+    "modified": "2019-03-23T23:11:23.467Z",
     "contributors": [
-      "Sebastianz"
+      "woiddale",
+      "spiegelp",
+      "hpkainz"
     ]
   },
-  "Web/SVG/Attribute/class": {
-    "modified": "2019-03-23T22:11:26.719Z",
+  "Learn/CSS/Styling_text/Fundamentals": {
+    "modified": "2019-03-23T22:49:16.242Z",
     "contributors": [
-      "grobmeier"
+      "spiegelp"
     ]
   },
-  "Web/SVG/Attribute/preserveAspectRatio": {
-    "modified": "2019-09-30T23:24:10.073Z",
+  "Learn/CSS/First_steps/How_CSS_works": {
+    "modified": "2020-05-05T12:04:06.710Z",
     "contributors": [
-      "JackLeEmmerdeur",
-      "jbvsusj"
+      "Helge-HH",
+      "fhwfzfge",
+      "msc1979",
+      "fscholz",
+      "Palmstroem",
+      "barning"
     ]
   },
-  "Web/SVG/Element": {
-    "modified": "2019-03-23T23:33:28.131Z",
+  "conflicting/Learn/CSS/First_steps/How_CSS_works": {
+    "modified": "2019-03-23T22:57:29.159Z",
     "contributors": [
-      "Sebastianz",
-      "teoli",
-      "ethertank"
+      "fhwfzfge",
+      "Palmstroem"
     ]
   },
-  "Web/SVG/Element/animate": {
-    "modified": "2020-10-15T21:26:19.629Z",
+  "conflicting/Learn/CSS/First_steps/How_CSS_works_0e31d13696060558e208fc6c734ae400": {
+    "modified": "2019-03-23T22:57:04.436Z",
     "contributors": [
-      "Dschubba",
-      "Sebastianz",
-      "fscholz",
-      "teoli",
-      "martin_ti"
+      "Palmstroem"
     ]
   },
-  "Web/SVG/Element/circle": {
-    "modified": "2019-03-23T23:02:17.743Z",
+  "Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images": {
+    "modified": "2019-03-23T23:06:19.663Z",
     "contributors": [
-      "wbamberg",
-      "Sebastianz",
-      "Oliver_Schafeld",
-      "ppk42"
+      "sos4nt",
+      "mrstork",
+      "webwirbel"
     ]
   },
-  "Web/SVG/Element/foreignObject": {
-    "modified": "2019-03-23T23:21:17.052Z",
+  "conflicting/Web/API/Document_Object_Model_656f0e51418b39c498011268be9b3a10": {
+    "modified": "2019-03-23T23:28:11.671Z",
     "contributors": [
-      "Sebastianz",
-      "gluecksmelodie",
-      "teoli",
-      "powerswitch"
+      "Sheppy"
     ]
   },
-  "Web/SVG/Element/path": {
-    "modified": "2020-10-15T22:17:06.133Z",
+  "conflicting/Web/HTML/Element": {
+    "modified": "2019-03-23T23:37:56.525Z",
     "contributors": [
-      "MyLittlePenguin"
+      "gk-freiheit",
+      "rawcat",
+      "teoli",
+      "AickeSchulz",
+      "jwl"
     ]
   },
-  "Web/SVG/Element/polygon": {
-    "modified": "2019-03-23T22:09:13.846Z",
+  "conflicting/Learn/JavaScript/Objects": {
+    "modified": "2020-03-12T19:39:48.552Z",
     "contributors": [
-      "Peremptor"
+      "ant1d0t",
+      "nemo182",
+      "christianhegedues",
+      "BurnerPat",
+      "schlagi123",
+      "neverendingo",
+      "creitiv",
+      "DunklesBlut88",
+      "paesku",
+      "bricks",
+      "fabiankreutz",
+      "spiegelp"
     ]
   },
-  "Web/SVG/Element/rect": {
-    "modified": "2019-03-18T21:41:17.238Z",
+  "conflicting/Web/JavaScript/Reference/Global_Objects/ArrayBuffer": {
+    "modified": "2020-10-15T22:01:15.339Z",
     "contributors": [
-      "philSixZero"
+      "schlagi123"
     ]
   },
-  "Web/SVG/Element/svg": {
-    "modified": "2020-10-15T21:43:06.785Z",
+  "conflicting/Web/JavaScript/Reference/Global_Objects/Boolean": {
+    "modified": "2020-10-15T21:45:26.885Z",
     "contributors": [
-      "Volker-E",
-      "Dschubba",
-      "mattenmad"
+      "schlagi123"
     ]
   },
-  "Web/SVG/Element/textPath": {
-    "modified": "2019-03-23T22:46:20.244Z",
+  "conflicting/Web/JavaScript/Reference/Global_Objects/DataView": {
+    "modified": "2020-10-15T21:46:53.689Z",
     "contributors": [
-      "Sebastianz",
-      "modellking"
+      "schlagi123"
     ]
   },
-  "Web/SVG/Element/view": {
-    "modified": "2019-03-18T21:15:30.402Z",
+  "conflicting/Web/JavaScript/Reference/Global_Objects/Date": {
+    "modified": "2020-10-15T21:45:25.297Z",
     "contributors": [
-      "Crucion"
+      "schlagi123",
+      "Schollator"
     ]
   },
-  "Web/SVG/Namespaces_Crash_Course": {
-    "modified": "2019-03-23T22:26:27.398Z",
+  "conflicting/Web/JavaScript/Reference/Global_Objects/Error": {
+    "modified": "2020-10-15T21:46:17.159Z",
     "contributors": [
-      "bgueth",
-      "Oliver_Schafeld"
+      "schlagi123"
     ]
   },
-  "Web/SVG/Tutorial": {
-    "modified": "2019-01-16T14:32:30.945Z",
+  "conflicting/Web/JavaScript/Reference/Global_Objects/EvalError": {
+    "modified": "2020-10-15T22:01:29.746Z",
     "contributors": [
-      "teoli",
-      "fscholz",
-      "Mickiboy"
+      "schlagi123"
     ]
   },
-  "Web/SVG/Tutorial/Einführung": {
-    "modified": "2019-01-16T14:32:58.426Z",
+  "conflicting/Web/JavaScript/Reference/Global_Objects/Function": {
+    "modified": "2020-10-15T22:01:36.587Z",
     "contributors": [
-      "teoli",
-      "fscholz",
-      "Mickiboy"
+      "xdevs23",
+      "schlagi123"
     ]
   },
-  "Web/SVG/Tutorial/Fills_and_Strokes": {
-    "modified": "2019-03-23T22:15:38.417Z",
+  "conflicting/Web/JavaScript/Reference/Global_Objects/GeneratorFunction": {
+    "modified": "2020-10-15T22:02:06.474Z",
     "contributors": [
-      "kevinfoerster",
-      "sebastianbarfurth"
+      "schlagi123"
     ]
   },
-  "Web/SVG/Tutorial/Pfade": {
-    "modified": "2019-11-01T07:41:48.434Z",
+  "conflicting/Web/JavaScript/Reference/Global_Objects/InternalError": {
+    "modified": "2020-10-15T22:02:05.813Z",
     "contributors": [
-      "michelgotta",
-      "ringostarr80",
-      "Wombosvideo"
+      "schlagi123"
     ]
   },
-  "Web/SVG/Tutorial/SVG_Image_Tag": {
-    "modified": "2019-04-14T13:23:03.557Z",
+  "conflicting/Web/JavaScript/Reference/Global_Objects/Intl/Collator": {
+    "modified": "2020-10-15T22:02:09.634Z",
     "contributors": [
-      "Heupferdchenritter",
-      "RmnWtnkmp"
+      "fscholz",
+      "schlagi123"
     ]
   },
-  "Web/SVG/Tutorial/SVG_Schriftarten": {
-    "modified": "2019-04-14T13:08:23.758Z",
+  "conflicting/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat": {
+    "modified": "2020-10-15T21:46:02.893Z",
     "contributors": [
-      "Heupferdchenritter"
+      "fscholz",
+      "schlagi123"
     ]
   },
-  "Web/SVG/Tutorial/Tools_for_SVG": {
-    "modified": "2019-04-14T13:43:24.617Z",
+  "conflicting/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat": {
+    "modified": "2020-10-15T22:03:24.903Z",
     "contributors": [
-      "Heupferdchenritter"
+      "fscholz",
+      "schlagi123"
     ]
   },
-  "Web/Security": {
-    "modified": "2019-09-10T16:31:42.422Z",
+  "conflicting/Web/JavaScript/Reference/Global_Objects/Map": {
+    "modified": "2020-10-15T22:01:26.449Z",
     "contributors": [
-      "SphinxKnight",
-      "Dschubba",
-      "marumari"
+      "Morphbreed",
+      "schlagi123"
     ]
   },
-  "Web/Security/Certificate_Transparency": {
-    "modified": "2020-05-12T09:08:53.446Z",
+  "conflicting/Web/JavaScript/Reference/Global_Objects/Number": {
+    "modified": "2020-10-15T21:45:14.479Z",
     "contributors": [
-      "dennissterzenbach"
+      "schlagi123",
+      "doeck"
     ]
   },
-  "Web/Security/Public_Key_Pinning": {
-    "modified": "2020-10-15T21:39:59.794Z",
+  "conflicting/Web/JavaScript/Reference/Global_Objects/Object": {
+    "modified": "2019-03-23T22:30:41.741Z",
     "contributors": [
-      "Dschubba",
-      "GanbaruTobi",
-      "rugk",
-      "TheAlxH",
-      "mozjan"
+      "peter30mar2017",
+      "fl1p"
     ]
   },
-  "Web/WebAPI": {
-    "modified": "2019-03-23T23:21:31.048Z",
+  "conflicting/Web/JavaScript/Reference/Global_Objects/RangeError": {
+    "modified": "2019-03-23T22:12:08.670Z",
     "contributors": [
-      "wbamberg",
-      "fscholz",
-      "casarock",
-      "sbarthel",
-      "TitanNano"
+      "ThomasFe"
     ]
   },
-  "Web/WebAPI/verwenden_von_geolocation": {
-    "modified": "2019-03-23T22:52:49.349Z",
+  "conflicting/Web/JavaScript/Reference/Global_Objects/String": {
+    "modified": "2020-10-15T22:24:44.810Z",
     "contributors": [
-      "shaedrich",
-      "42triangles",
-      "silend"
+      "Symtex99"
     ]
   },
-  "Web/Web_Components": {
-    "modified": "2019-03-18T20:58:34.307Z",
+  "conflicting/Web/JavaScript/Reference/Global_Objects/SyntaxError": {
+    "modified": "2020-10-15T21:46:29.639Z",
     "contributors": [
-      "SetTrend",
-      "vssn",
-      "pkos98",
-      "dreitzner",
-      "DomenicDenicola"
+      "schlagi123"
     ]
   },
-  "Web/Web_Components/Custom_Elements": {
-    "modified": "2019-03-23T22:05:53.556Z",
+  "conflicting/Web/JavaScript/Reference/Global_Objects/TypeError": {
+    "modified": "2020-10-15T21:58:39.373Z",
     "contributors": [
-      "amelzer"
+      "schlagi123",
+      "Sheggy"
     ]
   },
-  "Web/Web_Components/Using_custom_elements": {
-    "modified": "2020-03-12T05:58:55.117Z",
+  "conflicting/Web/JavaScript/Reference/Operators": {
+    "modified": "2020-10-15T21:51:28.246Z",
     "contributors": [
-      "napengam",
-      "stekoe",
-      "hermann77",
-      "Maik",
-      "td8"
+      "fscholz",
+      "kaljak",
+      "schlagi123",
+      "mizhac",
+      "MemoWalk"
     ]
   },
-  "Web/XML": {
-    "modified": "2019-03-24T00:03:04.279Z",
+  "conflicting/Web/JavaScript/Reference/Operators_8b4515dbed18a24ecb01bfe0755ca163": {
+    "modified": "2020-10-15T21:43:07.470Z",
     "contributors": [
-      "ExE-Boss"
+      "schlagi123",
+      "LeisureLarry",
+      "Webastronaut"
     ]
   },
-  "Web/XML/XML_Einführung": {
-    "modified": "2019-05-01T21:51:49.890Z",
+  "conflicting/Web/JavaScript/Reference/Operators/Spread_syntax": {
+    "modified": "2020-03-12T19:42:35.849Z",
     "contributors": [
-      "ExE-Boss",
-      "fscholz",
-      "XxPlay9xX",
-      "Mowtrains",
-      "Maxemil",
-      "Tammo",
-      "M@d Man"
+      "developitz",
+      "mschleeweiss",
+      "kdex",
+      "theRealBaccata",
+      "schlagi123",
+      "sbusch",
+      "olhaar"
     ]
   },
-  "Web/XSLT": {
-    "modified": "2019-03-24T00:03:43.722Z",
+  "conflicting/Web/JavaScript/Reference/Operators_5b3986b830cf68059c03079ef10ff039": {
+    "modified": "2020-10-15T21:37:40.074Z",
     "contributors": [
-      "ExE-Boss",
-      "ysi",
-      "fscholz",
-      "Joda"
+      "Hocdoc",
+      "christophfriedrich",
+      "schlagi123",
+      "Elyasin",
+      "loki"
     ]
   },
-  "WebSockets": {
-    "modified": "2019-03-23T22:59:48.670Z",
+  "conflicting/Web/JavaScript/Reference/Operators_bf514126b51a6e9b7591809ecc554076": {
+    "modified": "2020-10-15T21:48:40.239Z",
     "contributors": [
-      "Johann150",
-      "mvb1996"
+      "wbamberg",
+      "schlagi123"
     ]
   },
-  "WebSockets/Writing_WebSocket_servers": {
-    "modified": "2020-08-15T02:07:04.944Z",
+  "conflicting/Web/JavaScript/Reference/Statements/switch": {
+    "modified": "2020-10-15T21:46:29.118Z",
     "contributors": [
-      "otde2016"
+      "schlagi123",
+      "eluchsinger"
     ]
   },
-  "Web_Development/Mobile": {
-    "modified": "2019-03-23T23:29:04.325Z",
+  "conflicting/Web/Web_Components/Using_custom_elements": {
+    "modified": "2019-03-23T22:05:53.556Z",
     "contributors": [
-      "wbamberg"
+      "amelzer"
     ]
   },
-  "Web_Development/Mobile/Responsive_design": {
-    "modified": "2019-03-23T23:29:04.477Z",
+  "conflicting/Web/API": {
+    "modified": "2019-03-23T23:21:31.048Z",
     "contributors": [
-      "HolgerSinn.Com"
+      "wbamberg",
+      "fscholz",
+      "casarock",
+      "sbarthel",
+      "TitanNano"
     ]
   },
-  "Webentwicklung": {
+  "conflicting/Web/Guide": {
     "modified": "2019-03-24T00:03:49.652Z",
     "contributors": [
       "TornadoIDS",
diff --git a/files/de/conflicting/glossary/doctype/index.html b/files/de/conflicting/glossary/doctype/index.html
index 21847d1d09..1e8e143036 100644
--- a/files/de/conflicting/glossary/doctype/index.html
+++ b/files/de/conflicting/glossary/doctype/index.html
@@ -1,6 +1,6 @@
 ---
 title: DTD
-slug: Glossary/DTD
+slug: conflicting/Glossary/Doctype
 tags:
   - CodingScripting
   - Document
@@ -8,5 +8,6 @@ tags:
   - HTML
 translation_of: Glossary/Doctype
 translation_of_original: Glossary/DTD
+original_slug: Glossary/DTD
 ---
 
{{page("/de/docs/Glossary/Doctype")}}

diff --git a/files/de/conflicting/learn/css/building_blocks/values_and_units/index.html b/files/de/conflicting/learn/css/building_blocks/values_and_units/index.html
index be9302eb6e..12f194ed66 100644
--- a/files/de/conflicting/learn/css/building_blocks/values_and_units/index.html
+++ b/files/de/conflicting/learn/css/building_blocks/values_and_units/index.html
@@ -1,8 +1,9 @@
 ---
 title: Color
-slug: Web/Guide/CSS/Getting_started/Farbe
+slug: conflicting/Learn/CSS/Building_blocks/Values_and_units
 translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors
 translation_of_original: Web/Guide/CSS/Getting_started/Color
+original_slug: Web/Guide/CSS/Getting_started/Farbe
 ---
 
{{ CSSTutorialTOC() }}

 
diff --git a/files/de/conflicting/learn/css/first_steps/how_css_works/index.html b/files/de/conflicting/learn/css/first_steps/how_css_works/index.html
index 01933a9171..a9787ad03f 100644
--- a/files/de/conflicting/learn/css/first_steps/how_css_works/index.html
+++ b/files/de/conflicting/learn/css/first_steps/how_css_works/index.html
@@ -1,8 +1,9 @@
 ---
 title: Why use CSS?
-slug: Web/Guide/CSS/Getting_started/Why_use_CSS
+slug: conflicting/Learn/CSS/First_steps/How_CSS_works
 translation_of: Learn/CSS/First_steps/How_CSS_works
 translation_of_original: Web/Guide/CSS/Getting_started/Why_use_CSS
+original_slug: Web/Guide/CSS/Getting_started/Why_use_CSS
 ---
 
{{ CSSTutorialTOC() }}

 
diff --git a/files/de/conflicting/learn/css/first_steps/how_css_works_0e31d13696060558e208fc6c734ae400/index.html b/files/de/conflicting/learn/css/first_steps/how_css_works_0e31d13696060558e208fc6c734ae400/index.html
index 8e980ce43c..9a5325863a 100644
--- a/files/de/conflicting/learn/css/first_steps/how_css_works_0e31d13696060558e208fc6c734ae400/index.html
+++ b/files/de/conflicting/learn/css/first_steps/how_css_works_0e31d13696060558e208fc6c734ae400/index.html
@@ -1,8 +1,10 @@
 ---
 title: Wie CSS funktioniert
-slug: Web/Guide/CSS/Getting_started/Wie_CSS_funktioniert
+slug: >-
+  conflicting/Learn/CSS/First_steps/How_CSS_works_0e31d13696060558e208fc6c734ae400
 translation_of: Learn/CSS/First_steps/How_CSS_works
 translation_of_original: Web/Guide/CSS/Getting_started/How_CSS_works
+original_slug: Web/Guide/CSS/Getting_started/Wie_CSS_funktioniert
 ---
 
{{ CSSTutorialTOC() }}

 
diff --git a/files/de/conflicting/learn/css/first_steps/index.html b/files/de/conflicting/learn/css/first_steps/index.html
index 9472041b96..cd2ed7137a 100644
--- a/files/de/conflicting/learn/css/first_steps/index.html
+++ b/files/de/conflicting/learn/css/first_steps/index.html
@@ -1,11 +1,12 @@
 ---
 title: Einführung
-slug: Web/Guide/CSS/Getting_started
+slug: conflicting/Learn/CSS/First_steps
 tags:
   - CSS
-  - 'CSS:Einführung'
+  - CSS:Einführung
 translation_of: Learn/CSS/First_steps
 translation_of_original: Web/Guide/CSS/Getting_started
+original_slug: Web/Guide/CSS/Getting_started
 ---
 
Einleitung

 
Dieser Artikel stellt eine Einführung in Cascading Style Sheets (CSS) dar.

diff --git a/files/de/conflicting/learn/javascript/objects/index.html b/files/de/conflicting/learn/javascript/objects/index.html
index 41d67bc025..d09b4c33bc 100644
--- a/files/de/conflicting/learn/javascript/objects/index.html
+++ b/files/de/conflicting/learn/javascript/objects/index.html
@@ -1,6 +1,6 @@
 ---
 title: Einführung in objektorientiertes JavaScript
-slug: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript
+slug: conflicting/Learn/JavaScript/Objects
 tags:
   - Constructor
   - Encapsulation
@@ -14,6 +14,7 @@ tags:
   - Object-Oriented
 translation_of: Learn/JavaScript/Objects
 translation_of_original: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript
+original_slug: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript
 ---
 
{{jsSidebar("Introductory")}}

 
diff --git a/files/de/conflicting/mdn/contribute/getting_started/index.html b/files/de/conflicting/mdn/contribute/getting_started/index.html
index 84ae882896..4a36d8078f 100644
--- a/files/de/conflicting/mdn/contribute/getting_started/index.html
+++ b/files/de/conflicting/mdn/contribute/getting_started/index.html
@@ -1,12 +1,13 @@
 ---
 title: Was alles im MDN zu tun ist
-slug: MDN/Contribute/zu_tun_im_MDN
+slug: conflicting/MDN/Contribute/Getting_started
 tags:
   - Anleitung
   - Guide
   - MDN
 translation_of: MDN/Contribute/Getting_started
 translation_of_original: MDN/Contribute/Tasks
+original_slug: MDN/Contribute/zu_tun_im_MDN
 ---
 
{{MDNSidebar}}
Du willst das MDN besser machen? Es gibt viele Wege, wie du helfen kannst: du kannst Tippfehler verbessern, neue Inhalte verfassen, du kannst sogar die Kuma Plattform verbessern, auf welcher diese Seite aufbaut. Der Artikel "Beitragen zu MDN" deckt alle Möglichkeiten ab, wobei und wie du uns helfen könntest. Unten findest du eine etwas spezifischere Liste an Aufgaben die erledigt werden müssen.

 
diff --git a/files/de/conflicting/mdn/contribute/index.html b/files/de/conflicting/mdn/contribute/index.html
index 7fc3bce3fa..07d2219443 100644
--- a/files/de/conflicting/mdn/contribute/index.html
+++ b/files/de/conflicting/mdn/contribute/index.html
@@ -1,10 +1,11 @@
 ---
 title: Zum MDN beitragen
-slug: MDN_at_ten/Zum_MDN_beitragen
+slug: conflicting/MDN/Contribute
 tags:
   - MDN Meta
   - Mitmachen
 translation_of: MDN_at_ten/Contributing_to_MDN
+original_slug: MDN_at_ten/Zum_MDN_beitragen
 ---
 

 

diff --git a/files/de/conflicting/mozilla/add-ons/index.html b/files/de/conflicting/mozilla/add-ons/index.html
index 7d2d7a72b0..1a3425a085 100644
--- a/files/de/conflicting/mozilla/add-ons/index.html
+++ b/files/de/conflicting/mozilla/add-ons/index.html
@@ -1,10 +1,11 @@
 ---
 title: Erweiterung erstellen
-slug: Erweiterung_erstellen
+slug: conflicting/Mozilla/Add-ons
 tags:
   - Erweiterungen
 translation_of: Mozilla/Add-ons
 translation_of_original: Building_an_Extension
+original_slug: Erweiterung_erstellen
 ---
 
Schnellstart

 

diff --git a/files/de/conflicting/web/accessibility/index.html b/files/de/conflicting/web/accessibility/index.html
index 363f4646da..05ca68042d 100644
--- a/files/de/conflicting/web/accessibility/index.html
+++ b/files/de/conflicting/web/accessibility/index.html
@@ -1,8 +1,9 @@
 ---
 title: Webentwicklung
-slug: Web/Barrierefreiheit/Webentwicklung
+slug: conflicting/Web/Accessibility
 translation_of: Web/Accessibility
 translation_of_original: Web/Accessibility/Web_Development
+original_slug: Web/Barrierefreiheit/Webentwicklung
 ---
 
 

 
diff --git a/files/de/conflicting/web/api/document_object_model/index.html b/files/de/conflicting/web/api/document_object_model/index.html
index 2b8856fa6f..5378702f04 100644
--- a/files/de/conflicting/web/api/document_object_model/index.html
+++ b/files/de/conflicting/web/api/document_object_model/index.html
@@ -1,10 +1,11 @@
 ---
 title: Über das Document Object Model
-slug: DOM/Ueber_das_Document_Object_Model
+slug: conflicting/Web/API/Document_Object_Model
 tags:
   - DOM
 translation_of: Web/API/Document_Object_Model
 translation_of_original: DOM/About_the_Document_Object_Model
+original_slug: DOM/Ueber_das_Document_Object_Model
 ---
 
Was ist das DOM?

 
diff --git a/files/de/conflicting/web/api/document_object_model_656f0e51418b39c498011268be9b3a10/index.html b/files/de/conflicting/web/api/document_object_model_656f0e51418b39c498011268be9b3a10/index.html
index fc26bc0bee..9e3c7c7c46 100644
--- a/files/de/conflicting/web/api/document_object_model_656f0e51418b39c498011268be9b3a10/index.html
+++ b/files/de/conflicting/web/api/document_object_model_656f0e51418b39c498011268be9b3a10/index.html
@@ -1,6 +1,6 @@
 ---
 title: DOM developer guide
-slug: Web/Guide/DOM
+slug: conflicting/Web/API/Document_Object_Model_656f0e51418b39c498011268be9b3a10
 tags:
   - API
   - DOM
@@ -9,6 +9,7 @@ tags:
   - TopicStub
 translation_of: Web/API/Document_Object_Model
 translation_of_original: Web/Guide/API/DOM
+original_slug: Web/Guide/DOM
 ---
 
{{draft}}

 
The Document Object Model is an API for HTML and XML documents. It provides a structural representation of the document, enabling the developer to modify its content and visual presentation. Essentially, it connects web pages to scripts or programming languages.

diff --git a/files/de/conflicting/web/api/index.html b/files/de/conflicting/web/api/index.html
index 0726dd787a..cc4ef0187c 100644
--- a/files/de/conflicting/web/api/index.html
+++ b/files/de/conflicting/web/api/index.html
@@ -1,6 +1,6 @@
 ---
 title: WebAPI
-slug: Web/WebAPI
+slug: conflicting/Web/API
 tags:
   - Apps
   - DOM
@@ -8,6 +8,7 @@ tags:
   - Mobile
 translation_of: Web/API
 translation_of_original: WebAPI
+original_slug: Web/WebAPI
 ---
 
WebAPI ist ein Begriff, der auf eine Palette von Zugangs APIs verweist, die Web-Anwendungen erlaubt auf Geräte-Hardware (wie z. B. den Batteriestatus oder die Vibrations Hardware) zu zugreifen. Der Zugriff auf Daten (z. B. Kalender oder Kontakte), die auf dem Gerät gespeichert wurden ist ebenso möglich. Durch das Hinzufügen dieser APIs, hoffen wir, dass das Web um Funktionen erweitert wird, die proprietär Plattformen schon länger bereitstellen.

 
diff --git a/files/de/conflicting/web/api/windoworworkerglobalscope/index.html b/files/de/conflicting/web/api/windoworworkerglobalscope/index.html
index 67f9f76863..b6127c730b 100644
--- a/files/de/conflicting/web/api/windoworworkerglobalscope/index.html
+++ b/files/de/conflicting/web/api/windoworworkerglobalscope/index.html
@@ -1,6 +1,6 @@
 ---
 title: WindowTimers
-slug: Web/API/WindowTimers
+slug: conflicting/Web/API/WindowOrWorkerGlobalScope
 tags:
   - API
   - HTML-DOM
@@ -11,6 +11,7 @@ tags:
   - Workers
 translation_of: Web/API/WindowOrWorkerGlobalScope
 translation_of_original: Web/API/WindowTimers
+original_slug: Web/API/WindowTimers
 ---
 
{{APIRef("HTML DOM")}}

 
diff --git a/files/de/conflicting/web/css/_doublecolon_placeholder/index.html b/files/de/conflicting/web/css/_doublecolon_placeholder/index.html
index eb6775111e..40df58fe68 100644
--- a/files/de/conflicting/web/css/_doublecolon_placeholder/index.html
+++ b/files/de/conflicting/web/css/_doublecolon_placeholder/index.html
@@ -1,13 +1,14 @@
 ---
 title: '::-moz-placeholder'
-slug: 'Web/CSS/::-moz-placeholder'
+slug: conflicting/Web/CSS/::placeholder
 tags:
   - CSS
   - CSS Pseudo-class
   - CSS Reference
   - Non-standard
-translation_of: 'Web/CSS/::placeholder'
-translation_of_original: 'Web/CSS/::-moz-placeholder'
+translation_of: Web/CSS/::placeholder
+translation_of_original: Web/CSS/::-moz-placeholder
+original_slug: Web/CSS/::-moz-placeholder
 ---
 
{{Non-standard_header}}{{CSSRef}}

 
diff --git a/files/de/conflicting/web/css/css_basic_user_interface/index.html b/files/de/conflicting/web/css/css_basic_user_interface/index.html
index 7ee80c0eef..0fc6315c11 100644
--- a/files/de/conflicting/web/css/css_basic_user_interface/index.html
+++ b/files/de/conflicting/web/css/css_basic_user_interface/index.html
@@ -1,6 +1,6 @@
 ---
 title: CSS User Interface
-slug: Web/CSS/CSS_User_Interface
+slug: conflicting/Web/CSS/CSS_Basic_User_Interface
 tags:
   - CSS
   - CSS Basic User Interface
@@ -8,6 +8,7 @@ tags:
   - Übersicht
 translation_of: Web/CSS/CSS_Basic_User_Interface
 translation_of_original: Web/CSS/CSS_User_Interface
+original_slug: Web/CSS/CSS_User_Interface
 ---
 
{{CSSRef}}

 
diff --git a/files/de/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html b/files/de/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html
index 38d6da7946..94036aefdd 100644
--- a/files/de/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html
+++ b/files/de/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html
@@ -1,8 +1,9 @@
 ---
 title: Using CSS flexible boxes
-slug: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
+slug: conflicting/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
 translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
 translation_of_original: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
+original_slug: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
 ---
 
{{CSSRef}}

 
diff --git a/files/de/conflicting/web/css/cursor/index.html b/files/de/conflicting/web/css/cursor/index.html
index 2fbbb81111..a57babd069 100644
--- a/files/de/conflicting/web/css/cursor/index.html
+++ b/files/de/conflicting/web/css/cursor/index.html
@@ -1,11 +1,12 @@
 ---
 title: '-moz-cell'
-slug: Web/CSS/-moz-cell
+slug: conflicting/Web/CSS/cursor
 tags:
   - CSS
   - Non-standard
 translation_of: Web/CSS/cursor
 translation_of_original: Web/CSS/-moz-cell
+original_slug: Web/CSS/-moz-cell
 ---
 
{{CSSRef}}{{obsolete_header}}

 
diff --git a/files/de/conflicting/web/css/cursor_35a62ea3f10b688a3a87ccfe07779743/index.html b/files/de/conflicting/web/css/cursor_35a62ea3f10b688a3a87ccfe07779743/index.html
index abed12bcdf..df2a18e703 100644
--- a/files/de/conflicting/web/css/cursor_35a62ea3f10b688a3a87ccfe07779743/index.html
+++ b/files/de/conflicting/web/css/cursor_35a62ea3f10b688a3a87ccfe07779743/index.html
@@ -1,10 +1,11 @@
 ---
 title: alias
-slug: Web/CSS/Alias
+slug: conflicting/Web/CSS/cursor_35a62ea3f10b688a3a87ccfe07779743
 tags:
   - CSS
 translation_of: Web/CSS/cursor
 translation_of_original: Web/CSS/Alias
+original_slug: Web/CSS/Alias
 ---
 
Der alias {{cssxref("cursor")}} Wert wird verwendet, um einen Alias oder ein Kürzel zu etwas, das erstellt wird, zu kennzeichnen. Der Aliaszeiger wird als ein Pfeil mit einem kleinen kurvigen Pfeil daneben dargestellt.

 
diff --git a/files/de/conflicting/web/css/float/index.html b/files/de/conflicting/web/css/float/index.html
index 8c17b309fa..fb9978780d 100644
--- a/files/de/conflicting/web/css/float/index.html
+++ b/files/de/conflicting/web/css/float/index.html
@@ -1,8 +1,9 @@
 ---
 title: none
-slug: Web/CSS/none
+slug: conflicting/Web/CSS/float
 translation_of: Web/CSS/float
 translation_of_original: Web/CSS/none
+original_slug: Web/CSS/none
 ---
 

  {{ CSSRef() }}

diff --git a/files/de/conflicting/web/css/font-variant/index.html b/files/de/conflicting/web/css/font-variant/index.html
index 1bf3818e01..b9e03054c7 100644
--- a/files/de/conflicting/web/css/font-variant/index.html
+++ b/files/de/conflicting/web/css/font-variant/index.html
@@ -1,8 +1,9 @@
 ---
 title: normal
-slug: Web/CSS/normal
+slug: conflicting/Web/CSS/font-variant
 translation_of: Web/CSS/font-variant
 translation_of_original: Web/CSS/normal
+original_slug: Web/CSS/normal
 ---
 
{{ CSSRef() }}

 
diff --git a/files/de/conflicting/web/css/width/index.html b/files/de/conflicting/web/css/width/index.html
index 9279631046..9afa20932c 100644
--- a/files/de/conflicting/web/css/width/index.html
+++ b/files/de/conflicting/web/css/width/index.html
@@ -1,8 +1,9 @@
 ---
 title: auto
-slug: Web/CSS/auto
+slug: conflicting/Web/CSS/width
 translation_of: Web/CSS/width
 translation_of_original: Web/CSS/auto
+original_slug: Web/CSS/auto
 ---
 

  {{CSSRef}}

diff --git a/files/de/conflicting/web/guide/index.html b/files/de/conflicting/web/guide/index.html
index 0223fdfb7f..758598592d 100644
--- a/files/de/conflicting/web/guide/index.html
+++ b/files/de/conflicting/web/guide/index.html
@@ -1,10 +1,11 @@
 ---
 title: Webentwicklung
-slug: Webentwicklung
+slug: conflicting/Web/Guide
 tags:
   - Webentwicklung
 translation_of: Web/Guide
 translation_of_original: Web_Development
+original_slug: Webentwicklung
 ---
 
Webentwicklung umfasst alle Aspekte der Entwicklung einer Webseite oder Webanwendung.

 
Von einer einfachen Webseite bis zu komplexen, interaktiven Webanwendungen finden sich hier Artikel und Referenzen zu den unterschiedlichen Technologien der Webentwicklung.

diff --git a/files/de/conflicting/web/html/element/index.html b/files/de/conflicting/web/html/element/index.html
index 4b38e72119..8efe64c807 100644
--- a/files/de/conflicting/web/html/element/index.html
+++ b/files/de/conflicting/web/html/element/index.html
@@ -1,8 +1,9 @@
 ---
 title: Liste der HTML5-Elemente
-slug: Web/HTML/HTML5/HTML5_element_list
+slug: conflicting/Web/HTML/Element
 translation_of: Web/HTML/Element
 translation_of_original: Web/Guide/HTML/HTML5/HTML5_element_list
+original_slug: Web/HTML/HTML5/HTML5_element_list
 ---
 
Auf dieser Seite finden Sie eine Liste aller Standard HTML5-Elemente, beschrieben durch ihr öffnendes Tag, nach Funktion gruppiert. Diese Liste enthält ausschließlich die gültigen HTML5-Elemente. In neuen Websites sollten nur die hier aufgezählten Tags verwendet werden. Eine komplette Liste aller HTML-Elemente finden Sie im Index aller HTML-Elemente. Dieser enthält sämtliche möglichen Tags: standardisierte, nicht-standardkonforme, gültige, obsolete und als veraltet ("deprecated") betrachtete.

 
diff --git a/files/de/conflicting/web/javascript/reference/global_objects/arraybuffer/index.html b/files/de/conflicting/web/javascript/reference/global_objects/arraybuffer/index.html
index ee766c3529..991ad14c76 100644
--- a/files/de/conflicting/web/javascript/reference/global_objects/arraybuffer/index.html
+++ b/files/de/conflicting/web/javascript/reference/global_objects/arraybuffer/index.html
@@ -1,12 +1,13 @@
 ---
 title: ArrayBuffer.prototype
-slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype
+slug: conflicting/Web/JavaScript/Reference/Global_Objects/ArrayBuffer
 tags:
   - ArrayBuffer
   - JavaScript
   - Property
 translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer
 translation_of_original: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype
+original_slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype
 ---
 
{{JSRef}}

 
diff --git a/files/de/conflicting/web/javascript/reference/global_objects/boolean/index.html b/files/de/conflicting/web/javascript/reference/global_objects/boolean/index.html
index 62a430fac2..9d0c5ab3ac 100644
--- a/files/de/conflicting/web/javascript/reference/global_objects/boolean/index.html
+++ b/files/de/conflicting/web/javascript/reference/global_objects/boolean/index.html
@@ -1,6 +1,6 @@
 ---
 title: Boolean.prototype
-slug: Web/JavaScript/Reference/Global_Objects/Boolean/prototype
+slug: conflicting/Web/JavaScript/Reference/Global_Objects/Boolean
 tags:
   - Boolean
   - JavaScript
@@ -8,6 +8,7 @@ tags:
   - Prototype
 translation_of: Web/JavaScript/Reference/Global_Objects/Boolean
 translation_of_original: Web/JavaScript/Reference/Global_Objects/Boolean/prototype
+original_slug: Web/JavaScript/Reference/Global_Objects/Boolean/prototype
 ---
 
{{JSRef}}

 
diff --git a/files/de/conflicting/web/javascript/reference/global_objects/dataview/index.html b/files/de/conflicting/web/javascript/reference/global_objects/dataview/index.html
index e03aff8a8d..66c7adba5f 100644
--- a/files/de/conflicting/web/javascript/reference/global_objects/dataview/index.html
+++ b/files/de/conflicting/web/javascript/reference/global_objects/dataview/index.html
@@ -1,12 +1,13 @@
 ---
 title: DataView.prototype
-slug: Web/JavaScript/Reference/Global_Objects/DataView/prototype
+slug: conflicting/Web/JavaScript/Reference/Global_Objects/DataView
 tags:
   - DataView
   - JavaScript
   - Prototype
 translation_of: Web/JavaScript/Reference/Global_Objects/DataView
 translation_of_original: Web/JavaScript/Reference/Global_Objects/DataView/prototype
+original_slug: Web/JavaScript/Reference/Global_Objects/DataView/prototype
 ---
 
{{JSRef}}

 
diff --git a/files/de/conflicting/web/javascript/reference/global_objects/date/index.html b/files/de/conflicting/web/javascript/reference/global_objects/date/index.html
index ab69ff1528..8170bac635 100644
--- a/files/de/conflicting/web/javascript/reference/global_objects/date/index.html
+++ b/files/de/conflicting/web/javascript/reference/global_objects/date/index.html
@@ -1,6 +1,6 @@
 ---
 title: Date.prototype
-slug: Web/JavaScript/Reference/Global_Objects/Date/prototype
+slug: conflicting/Web/JavaScript/Reference/Global_Objects/Date
 tags:
   - Date
   - JavaScript
@@ -9,6 +9,7 @@ tags:
   - Reference
 translation_of: Web/JavaScript/Reference/Global_Objects/Date
 translation_of_original: Web/JavaScript/Reference/Global_Objects/Date/prototype
+original_slug: Web/JavaScript/Reference/Global_Objects/Date/prototype
 ---
 
{{JSRef}}

 
diff --git a/files/de/conflicting/web/javascript/reference/global_objects/error/index.html b/files/de/conflicting/web/javascript/reference/global_objects/error/index.html
index 2a48748822..21605b0596 100644
--- a/files/de/conflicting/web/javascript/reference/global_objects/error/index.html
+++ b/files/de/conflicting/web/javascript/reference/global_objects/error/index.html
@@ -1,12 +1,13 @@
 ---
 title: Error.prototype
-slug: Web/JavaScript/Reference/Global_Objects/Error/prototype
+slug: conflicting/Web/JavaScript/Reference/Global_Objects/Error
 tags:
   - Error
   - JavaScript
   - Property
 translation_of: Web/JavaScript/Reference/Global_Objects/Error
 translation_of_original: Web/JavaScript/Reference/Global_Objects/Error/prototype
+original_slug: Web/JavaScript/Reference/Global_Objects/Error/prototype
 ---
 
{{JSRef}}

 
diff --git a/files/de/conflicting/web/javascript/reference/global_objects/evalerror/index.html b/files/de/conflicting/web/javascript/reference/global_objects/evalerror/index.html
index 7de0a353bc..33c7d7627c 100644
--- a/files/de/conflicting/web/javascript/reference/global_objects/evalerror/index.html
+++ b/files/de/conflicting/web/javascript/reference/global_objects/evalerror/index.html
@@ -1,6 +1,6 @@
 ---
 title: EvalError.prototype
-slug: Web/JavaScript/Reference/Global_Objects/EvalError/prototype
+slug: conflicting/Web/JavaScript/Reference/Global_Objects/EvalError
 tags:
   - Error
   - EvalError
@@ -8,6 +8,7 @@ tags:
   - Property
 translation_of: Web/JavaScript/Reference/Global_Objects/EvalError
 translation_of_original: Web/JavaScript/Reference/Global_Objects/EvalError/prototype
+original_slug: Web/JavaScript/Reference/Global_Objects/EvalError/prototype
 ---
 
{{JSRef}}

 
diff --git a/files/de/conflicting/web/javascript/reference/global_objects/function/index.html b/files/de/conflicting/web/javascript/reference/global_objects/function/index.html
index 44598455e8..fab649a648 100644
--- a/files/de/conflicting/web/javascript/reference/global_objects/function/index.html
+++ b/files/de/conflicting/web/javascript/reference/global_objects/function/index.html
@@ -1,6 +1,6 @@
 ---
 title: Function.prototype
-slug: Web/JavaScript/Reference/Global_Objects/Function/prototype
+slug: conflicting/Web/JavaScript/Reference/Global_Objects/Function
 tags:
   - Function
   - JavaScript
@@ -8,6 +8,7 @@ tags:
   - Prototype
 translation_of: Web/JavaScript/Reference/Global_Objects/Function
 translation_of_original: Web/JavaScript/Reference/Global_Objects/Function/prototype
+original_slug: Web/JavaScript/Reference/Global_Objects/Function/prototype
 ---
 
{{JSRef}}

 
diff --git a/files/de/conflicting/web/javascript/reference/global_objects/generatorfunction/index.html b/files/de/conflicting/web/javascript/reference/global_objects/generatorfunction/index.html
index e514a8c9d7..a488196f60 100644
--- a/files/de/conflicting/web/javascript/reference/global_objects/generatorfunction/index.html
+++ b/files/de/conflicting/web/javascript/reference/global_objects/generatorfunction/index.html
@@ -1,6 +1,6 @@
 ---
 title: GeneratorFunction.prototype
-slug: Web/JavaScript/Reference/Global_Objects/GeneratorFunction/prototype
+slug: conflicting/Web/JavaScript/Reference/Global_Objects/GeneratorFunction
 tags:
   - ECMAScript 2015
   - GeneratorFunction
@@ -11,6 +11,7 @@ tags:
   - Reference
 translation_of: Web/JavaScript/Reference/Global_Objects/GeneratorFunction
 translation_of_original: Web/JavaScript/Reference/Global_Objects/GeneratorFunction/prototype
+original_slug: Web/JavaScript/Reference/Global_Objects/GeneratorFunction/prototype
 ---
 
{{JSRef}}

 
diff --git a/files/de/conflicting/web/javascript/reference/global_objects/internalerror/index.html b/files/de/conflicting/web/javascript/reference/global_objects/internalerror/index.html
index 8ed0c2de4b..9cb53a54b0 100644
--- a/files/de/conflicting/web/javascript/reference/global_objects/internalerror/index.html
+++ b/files/de/conflicting/web/javascript/reference/global_objects/internalerror/index.html
@@ -1,6 +1,6 @@
 ---
 title: InternalError.prototype
-slug: Web/JavaScript/Reference/Global_Objects/InternalError/prototype
+slug: conflicting/Web/JavaScript/Reference/Global_Objects/InternalError
 tags:
   - Error
   - InternalError
@@ -8,6 +8,7 @@ tags:
   - Property
 translation_of: Web/JavaScript/Reference/Global_Objects/InternalError
 translation_of_original: Web/JavaScript/Reference/Global_Objects/InternalError/prototype
+original_slug: Web/JavaScript/Reference/Global_Objects/InternalError/prototype
 ---
 
{{JSRef}} {{non-standard_header}}

 
diff --git a/files/de/conflicting/web/javascript/reference/global_objects/intl/collator/index.html b/files/de/conflicting/web/javascript/reference/global_objects/intl/collator/index.html
index 2b041c3f26..5cea169d48 100644
--- a/files/de/conflicting/web/javascript/reference/global_objects/intl/collator/index.html
+++ b/files/de/conflicting/web/javascript/reference/global_objects/intl/collator/index.html
@@ -1,6 +1,6 @@
 ---
 title: Intl.Collator.prototype
-slug: Web/JavaScript/Reference/Global_Objects/Intl/Collator/prototype
+slug: conflicting/Web/JavaScript/Reference/Global_Objects/Intl/Collator
 tags:
   - Collator
   - Internationalization
@@ -9,6 +9,7 @@ tags:
   - Prototype
 translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Collator
 translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/Collator/prototype
+original_slug: Web/JavaScript/Reference/Global_Objects/Intl/Collator/prototype
 ---
 
{{JSRef}}

 
diff --git a/files/de/conflicting/web/javascript/reference/global_objects/intl/datetimeformat/index.html b/files/de/conflicting/web/javascript/reference/global_objects/intl/datetimeformat/index.html
index ab0a86d286..501e95b658 100644
--- a/files/de/conflicting/web/javascript/reference/global_objects/intl/datetimeformat/index.html
+++ b/files/de/conflicting/web/javascript/reference/global_objects/intl/datetimeformat/index.html
@@ -1,6 +1,6 @@
 ---
 title: Intl.DateTimeFormat.prototype
-slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype
+slug: conflicting/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
 tags:
   - DateTimeFormat
   - Internationalization
@@ -9,6 +9,7 @@ tags:
   - Prototype
 translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
 translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype
+original_slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype
 ---
 
{{JSRef}}

 
diff --git a/files/de/conflicting/web/javascript/reference/global_objects/intl/numberformat/index.html b/files/de/conflicting/web/javascript/reference/global_objects/intl/numberformat/index.html
index 142aefbfcc..e4bfdeea20 100644
--- a/files/de/conflicting/web/javascript/reference/global_objects/intl/numberformat/index.html
+++ b/files/de/conflicting/web/javascript/reference/global_objects/intl/numberformat/index.html
@@ -1,6 +1,6 @@
 ---
 title: Intl.NumberFormat.prototype
-slug: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype
+slug: conflicting/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
 tags:
   - Internationalization
   - JavaScript
@@ -9,6 +9,7 @@ tags:
   - Prototype
 translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
 translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype
+original_slug: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype
 ---
 
{{JSRef}}

 
diff --git a/files/de/conflicting/web/javascript/reference/global_objects/map/index.html b/files/de/conflicting/web/javascript/reference/global_objects/map/index.html
index 35399160b1..2d89c00f91 100644
--- a/files/de/conflicting/web/javascript/reference/global_objects/map/index.html
+++ b/files/de/conflicting/web/javascript/reference/global_objects/map/index.html
@@ -1,12 +1,13 @@
 ---
 title: Map.prototype
-slug: Web/JavaScript/Reference/Global_Objects/Map/prototype
+slug: conflicting/Web/JavaScript/Reference/Global_Objects/Map
 tags:
   - JavaScript
   - Map
   - Property
 translation_of: Web/JavaScript/Reference/Global_Objects/Map
 translation_of_original: Web/JavaScript/Reference/Global_Objects/Map/prototype
+original_slug: Web/JavaScript/Reference/Global_Objects/Map/prototype
 ---
 
{{JSRef}}

 
diff --git a/files/de/conflicting/web/javascript/reference/global_objects/number/index.html b/files/de/conflicting/web/javascript/reference/global_objects/number/index.html
index f44a20d90d..ee44ae5fbe 100644
--- a/files/de/conflicting/web/javascript/reference/global_objects/number/index.html
+++ b/files/de/conflicting/web/javascript/reference/global_objects/number/index.html
@@ -1,6 +1,6 @@
 ---
 title: Number.prototype
-slug: Web/JavaScript/Reference/Global_Objects/Number/prototype
+slug: conflicting/Web/JavaScript/Reference/Global_Objects/Number
 tags:
   - JavaScript
   - Number
@@ -8,6 +8,7 @@ tags:
   - Prototype
 translation_of: Web/JavaScript/Reference/Global_Objects/Number
 translation_of_original: Web/JavaScript/Reference/Global_Objects/Number/prototype
+original_slug: Web/JavaScript/Reference/Global_Objects/Number/prototype
 ---
 
{{JSRef}}

 
diff --git a/files/de/conflicting/web/javascript/reference/global_objects/object/index.html b/files/de/conflicting/web/javascript/reference/global_objects/object/index.html
index d6fdd3de2b..a765011f5e 100644
--- a/files/de/conflicting/web/javascript/reference/global_objects/object/index.html
+++ b/files/de/conflicting/web/javascript/reference/global_objects/object/index.html
@@ -1,8 +1,9 @@
 ---
 title: Object.prototype
-slug: Web/JavaScript/Reference/Global_Objects/Object/prototype
+slug: conflicting/Web/JavaScript/Reference/Global_Objects/Object
 translation_of: Web/JavaScript/Reference/Global_Objects/Object
 translation_of_original: Web/JavaScript/Reference/Global_Objects/Object/prototype
+original_slug: Web/JavaScript/Reference/Global_Objects/Object/prototype
 ---
 
{{JSRef}}

 
diff --git a/files/de/conflicting/web/javascript/reference/global_objects/rangeerror/index.html b/files/de/conflicting/web/javascript/reference/global_objects/rangeerror/index.html
index fba99e1e5a..101f9bdb0d 100644
--- a/files/de/conflicting/web/javascript/reference/global_objects/rangeerror/index.html
+++ b/files/de/conflicting/web/javascript/reference/global_objects/rangeerror/index.html
@@ -1,8 +1,9 @@
 ---
 title: RangeError.prototype
-slug: Web/JavaScript/Reference/Global_Objects/RangeError/prototype
+slug: conflicting/Web/JavaScript/Reference/Global_Objects/RangeError
 translation_of: Web/JavaScript/Reference/Global_Objects/RangeError
 translation_of_original: Web/JavaScript/Reference/Global_Objects/RangeError/prototype
+original_slug: Web/JavaScript/Reference/Global_Objects/RangeError/prototype
 ---
 
{{JSRef}}

 
diff --git a/files/de/conflicting/web/javascript/reference/global_objects/string/index.html b/files/de/conflicting/web/javascript/reference/global_objects/string/index.html
index aad1a12ead..f59f666c32 100644
--- a/files/de/conflicting/web/javascript/reference/global_objects/string/index.html
+++ b/files/de/conflicting/web/javascript/reference/global_objects/string/index.html
@@ -1,6 +1,6 @@
 ---
 title: String.prototype
-slug: Web/JavaScript/Reference/Global_Objects/String/prototype
+slug: conflicting/Web/JavaScript/Reference/Global_Objects/String
 tags:
   - Eigentum
   - JavaScript
@@ -10,6 +10,7 @@ tags:
   - String
 translation_of: Web/JavaScript/Reference/Global_Objects/String
 translation_of_original: Web/JavaScript/Reference/Global_Objects/String/prototype
+original_slug: Web/JavaScript/Reference/Global_Objects/String/prototype
 ---
 
{{JSRef}}

 
diff --git a/files/de/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html b/files/de/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html
index eaa648d375..a8c283fba6 100644
--- a/files/de/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html
+++ b/files/de/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html
@@ -1,6 +1,6 @@
 ---
 title: SyntaxError.prototype
-slug: Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype
+slug: conflicting/Web/JavaScript/Reference/Global_Objects/SyntaxError
 tags:
   - Error
   - JavaScript
@@ -9,6 +9,7 @@ tags:
   - SyntaxError
 translation_of: Web/JavaScript/Reference/Global_Objects/SyntaxError
 translation_of_original: Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype
+original_slug: Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype
 ---
 
{{JSRef}}

 
diff --git a/files/de/conflicting/web/javascript/reference/global_objects/typeerror/index.html b/files/de/conflicting/web/javascript/reference/global_objects/typeerror/index.html
index 6c7e61d363..bff6dc355f 100644
--- a/files/de/conflicting/web/javascript/reference/global_objects/typeerror/index.html
+++ b/files/de/conflicting/web/javascript/reference/global_objects/typeerror/index.html
@@ -1,6 +1,6 @@
 ---
 title: TypeError.prototype
-slug: Web/JavaScript/Reference/Global_Objects/TypeError/prototype
+slug: conflicting/Web/JavaScript/Reference/Global_Objects/TypeError
 tags:
   - Error
   - JavaScript
@@ -9,6 +9,7 @@ tags:
   - TypeError
 translation_of: Web/JavaScript/Reference/Global_Objects/TypeError
 translation_of_original: Web/JavaScript/Reference/Global_Objects/TypeError/prototype
+original_slug: Web/JavaScript/Reference/Global_Objects/TypeError/prototype
 ---
 
{{JSRef}}

 
diff --git a/files/de/conflicting/web/javascript/reference/operators/index.html b/files/de/conflicting/web/javascript/reference/operators/index.html
index 598d43df68..1d540b8f9e 100644
--- a/files/de/conflicting/web/javascript/reference/operators/index.html
+++ b/files/de/conflicting/web/javascript/reference/operators/index.html
@@ -1,12 +1,13 @@
 ---
 title: Bitweise Operatoren
-slug: Web/JavaScript/Reference/Operators/Bitwise_Operatoren
+slug: conflicting/Web/JavaScript/Reference/Operators
 tags:
   - JavaScript
   - Operator
   - Reference
 translation_of: Web/JavaScript/Reference/Operators
 translation_of_original: Web/JavaScript/Reference/Operators/Bitwise_Operators
+original_slug: Web/JavaScript/Reference/Operators/Bitwise_Operatoren
 ---
 
{{jsSidebar("Operators")}}

 
diff --git a/files/de/conflicting/web/javascript/reference/operators/spread_syntax/index.html b/files/de/conflicting/web/javascript/reference/operators/spread_syntax/index.html
index ee125663f4..41317b23e8 100644
--- a/files/de/conflicting/web/javascript/reference/operators/spread_syntax/index.html
+++ b/files/de/conflicting/web/javascript/reference/operators/spread_syntax/index.html
@@ -1,6 +1,6 @@
 ---
 title: Spread-Operator
-slug: Web/JavaScript/Reference/Operators/Spread_operator
+slug: conflicting/Web/JavaScript/Reference/Operators/Spread_syntax
 tags:
   - ECMAScript 2015
   - Iterator
@@ -8,6 +8,7 @@ tags:
   - Operator
 translation_of: Web/JavaScript/Reference/Operators/Spread_syntax
 translation_of_original: Web/JavaScript/Reference/Operators/Spread_operator
+original_slug: Web/JavaScript/Reference/Operators/Spread_operator
 ---
 
{{jsSidebar("Operators")}}

 
diff --git a/files/de/conflicting/web/javascript/reference/operators_5b3986b830cf68059c03079ef10ff039/index.html b/files/de/conflicting/web/javascript/reference/operators_5b3986b830cf68059c03079ef10ff039/index.html
index ceedd1eb07..01e5b9c0fb 100644
--- a/files/de/conflicting/web/javascript/reference/operators_5b3986b830cf68059c03079ef10ff039/index.html
+++ b/files/de/conflicting/web/javascript/reference/operators_5b3986b830cf68059c03079ef10ff039/index.html
@@ -1,12 +1,14 @@
 ---
 title: Vergleichsoperatoren
-slug: Web/JavaScript/Reference/Operators/Vergleichsoperatoren
+slug: >-
+  conflicting/Web/JavaScript/Reference/Operators_5b3986b830cf68059c03079ef10ff039
 tags:
   - JavaScript
   - Operator
   - Reference
 translation_of: Web/JavaScript/Reference/Operators
 translation_of_original: Web/JavaScript/Reference/Operators/Comparison_Operators
+original_slug: Web/JavaScript/Reference/Operators/Vergleichsoperatoren
 ---
 
{{jsSidebar("Operators")}}

 
diff --git a/files/de/conflicting/web/javascript/reference/operators_8b4515dbed18a24ecb01bfe0755ca163/index.html b/files/de/conflicting/web/javascript/reference/operators_8b4515dbed18a24ecb01bfe0755ca163/index.html
index 6a20e85b79..78a7289ae7 100644
--- a/files/de/conflicting/web/javascript/reference/operators_8b4515dbed18a24ecb01bfe0755ca163/index.html
+++ b/files/de/conflicting/web/javascript/reference/operators_8b4515dbed18a24ecb01bfe0755ca163/index.html
@@ -1,6 +1,7 @@
 ---
 title: Logische Operatoren
-slug: Web/JavaScript/Reference/Operators/Logische_Operatoren
+slug: >-
+  conflicting/Web/JavaScript/Reference/Operators_8b4515dbed18a24ecb01bfe0755ca163
 tags:
   - JavaScript
   - Logic
@@ -12,6 +13,7 @@ tags:
   - or
 translation_of: Web/JavaScript/Reference/Operators
 translation_of_original: Web/JavaScript/Reference/Operators/Logical_Operators
+original_slug: Web/JavaScript/Reference/Operators/Logische_Operatoren
 ---
 
{{jsSidebar("Operators")}}

 
diff --git a/files/de/conflicting/web/javascript/reference/operators_bf514126b51a6e9b7591809ecc554076/index.html b/files/de/conflicting/web/javascript/reference/operators_bf514126b51a6e9b7591809ecc554076/index.html
index 5df33bfe62..7bc7141aec 100644
--- a/files/de/conflicting/web/javascript/reference/operators_bf514126b51a6e9b7591809ecc554076/index.html
+++ b/files/de/conflicting/web/javascript/reference/operators_bf514126b51a6e9b7591809ecc554076/index.html
@@ -1,11 +1,13 @@
 ---
 title: Zuweisungsoperator
-slug: Web/JavaScript/Reference/Operators/Zuweisungsoperator
+slug: >-
+  conflicting/Web/JavaScript/Reference/Operators_bf514126b51a6e9b7591809ecc554076
 tags:
   - JavaScript
   - Operator
 translation_of: Web/JavaScript/Reference/Operators#Assignment_operators
 translation_of_original: Web/JavaScript/Reference/Operators/Assignment_Operators
+original_slug: Web/JavaScript/Reference/Operators/Zuweisungsoperator
 ---
 
{{jsSidebar("Operators")}}

 
diff --git a/files/de/conflicting/web/javascript/reference/statements/switch/index.html b/files/de/conflicting/web/javascript/reference/statements/switch/index.html
index f8845c9591..21d4dea5bc 100644
--- a/files/de/conflicting/web/javascript/reference/statements/switch/index.html
+++ b/files/de/conflicting/web/javascript/reference/statements/switch/index.html
@@ -1,11 +1,12 @@
 ---
 title: default
-slug: Web/JavaScript/Reference/Statements/default
+slug: conflicting/Web/JavaScript/Reference/Statements/switch
 tags:
   - JavaScript
   - Keyword
 translation_of: Web/JavaScript/Reference/Statements/switch
 translation_of_original: Web/JavaScript/Reference/Statements/default
+original_slug: Web/JavaScript/Reference/Statements/default
 ---
 
{{jsSidebar("Statements")}}

 
diff --git a/files/de/conflicting/web/progressive_web_apps/index.html b/files/de/conflicting/web/progressive_web_apps/index.html
index 655d513afb..776eb5b45f 100644
--- a/files/de/conflicting/web/progressive_web_apps/index.html
+++ b/files/de/conflicting/web/progressive_web_apps/index.html
@@ -1,8 +1,9 @@
 ---
 title: Responsive Design
-slug: Web_Development/Mobile/Responsive_design
+slug: conflicting/Web/Progressive_web_apps
 translation_of: Web/Progressive_web_apps
 translation_of_original: Web/Guide/Responsive_design
+original_slug: Web_Development/Mobile/Responsive_design
 ---
 
Als Reaktion auf die Probleme mit dem getrennten Ansatz zur Entwicklung von Web-Sites für mobile und Desktop, wird eine relativ neue Idee (was ist eigentlich ziemlich alt) immer beliebter: Graben User-Agent-Erkennung, und stattdessen reagieren die Seiten  auf der Client-Seite in den Browser-Funktionen. Dieser Ansatz, der von Ethan Marcotte in seinem Artikel für A List Apart kam, wird als Responsive Web Design bekannt sein. Wie der getrennten Plattform Ansatz hat ansprechende Webdesign positive und negative Aspekte.

 
The Advantages

diff --git a/files/de/conflicting/web/web_components/using_custom_elements/index.html b/files/de/conflicting/web/web_components/using_custom_elements/index.html
index f6b3761646..1d6da3f2c3 100644
--- a/files/de/conflicting/web/web_components/using_custom_elements/index.html
+++ b/files/de/conflicting/web/web_components/using_custom_elements/index.html
@@ -1,8 +1,9 @@
 ---
 title: Benutzerdefinierte Elemente
-slug: Web/Web_Components/Custom_Elements
+slug: conflicting/Web/Web_Components/Using_custom_elements
 translation_of: Web/Web_Components/Using_custom_elements
 translation_of_original: Web/Web_Components/Custom_Elements
+original_slug: Web/Web_Components/Custom_Elements
 ---
 
Benutzerdefinierte Elemente sind stellen die Möglichkeit bereit, benutzerdefinierte HTML-Elements zu schaffen. Sie können eigenes durch JavaScript beschriebenes Verhalten und CSS-Styling haben. Sie sind Teil der Web-Components, können aber auch unabhängig von diesen benutzt werden.

 
diff --git a/files/de/glossary/abstraction/index.html b/files/de/glossary/abstraction/index.html
index 29f75adb98..ceb6adfed5 100644
--- a/files/de/glossary/abstraction/index.html
+++ b/files/de/glossary/abstraction/index.html
@@ -1,12 +1,13 @@
 ---
 title: Abstraktion
-slug: Glossary/Abstraktion
+slug: Glossary/Abstraction
 tags:
   - Abstraktion
   - Glossar
   - Programmieren
   - Programmiersprache
 translation_of: Glossary/Abstraction
+original_slug: Glossary/Abstraktion
 ---
 
Die Abstraktion in der {{Glossary("Computerprogrammierung")}} ist eine der Methoden zur Reduzierung der Komplexität von Code und der erleichterten Implementierung effizienterer Designs und Benutzerschnittstellen bei komplizierter Software. Die Abstraktion versteckt die technische Komplexität eines Systems hinter leicht verständlichen {{Glossary("API", "APIs")}}.

 
diff --git a/files/de/glossary/algorithm/index.html b/files/de/glossary/algorithm/index.html
index 0c7109ae1e..9a8f4d44f7 100644
--- a/files/de/glossary/algorithm/index.html
+++ b/files/de/glossary/algorithm/index.html
@@ -1,10 +1,11 @@
 ---
 title: Algorithmus
-slug: Glossary/Algorithmus
+slug: Glossary/Algorithm
 tags:
   - Algorithmus
   - Glossary
 translation_of: Glossary/Algorithm
+original_slug: Glossary/Algorithmus
 ---
 
Ein Algorithmus ist eine eigenständige Abfolge von Anweisungen, die eine Funktion ausüben.

 
diff --git a/files/de/glossary/asynchronous/index.html b/files/de/glossary/asynchronous/index.html
index 57f052e94f..ccc6281ad9 100644
--- a/files/de/glossary/asynchronous/index.html
+++ b/files/de/glossary/asynchronous/index.html
@@ -1,7 +1,8 @@
 ---
 title: Asynchron
-slug: Glossary/Asynchron
+slug: Glossary/Asynchronous
 translation_of: Glossary/Asynchronous
+original_slug: Glossary/Asynchron
 ---
 
Der Ausdruck Asynchron bezieht sich auf das Konzept, dass mehrere Dinge zeitgleich passieren oder mehre, verbundene Dinge geschehen ohne aufeinander zu warten. In der Informatik wird das Wort Asynchron meist in zwei Fällen unterschieden.

 
diff --git a/files/de/glossary/bandwidth/index.html b/files/de/glossary/bandwidth/index.html
index b1c856463b..ce8c34138f 100644
--- a/files/de/glossary/bandwidth/index.html
+++ b/files/de/glossary/bandwidth/index.html
@@ -1,10 +1,11 @@
 ---
 title: Bandbreite
-slug: Glossary/Bandbreite
+slug: Glossary/Bandwidth
 tags:
   - Glossar
   - Infrastruktur
 translation_of: Glossary/Bandwidth
+original_slug: Glossary/Bandbreite
 ---
 
Die Bandbreite  ist der Abstand zwischen Unterfrequenz und Oberfrequenz und gibt z.B. an welche Informationsmenge während einer bestimmten Zeit durch eine Datenverbindung durchgespielt werden kann. Ueblicherweise wird sie in mehrfachen bit-per-seconds (bps) gemessen, z.B. megabits-per-second (Mbps) oder gigabits-per-second (Gbps).

 
diff --git a/files/de/glossary/class/index.html b/files/de/glossary/class/index.html
index 0148e61387..c6179ec792 100644
--- a/files/de/glossary/class/index.html
+++ b/files/de/glossary/class/index.html
@@ -1,10 +1,11 @@
 ---
 title: Klasse
-slug: Glossary/Klasse
+slug: Glossary/Class
 tags:
   - CodingScripting
   - Glossary
 translation_of: Glossary/Class
+original_slug: Glossary/Klasse
 ---
 
In der {{glossary("OOP","objektorientierten Programmierung")}} definiert eine Klasse die Charakteristiken eines {{glossary("object","Objekts")}}. Eine Klasse ist eine Entwurfsdefinition der {{glossary("property","Eigenschaften")}} und {{glossary("method","Methoden")}} eines Objekts, der "Plan", von dem andere spezifischere Instanzen des Objekts abgeleitet werden.

 
diff --git a/files/de/glossary/constructor/index.html b/files/de/glossary/constructor/index.html
index 7c719b55ea..0d3fdb5482 100644
--- a/files/de/glossary/constructor/index.html
+++ b/files/de/glossary/constructor/index.html
@@ -1,7 +1,8 @@
 ---
 title: Konstruktor
-slug: Glossary/Konstruktor
+slug: Glossary/Constructor
 translation_of: Glossary/Constructor
+original_slug: Glossary/Konstruktor
 ---
 
Ein Konstruktor gehört zu einer Instanz eines bestimmten Klassen-{{glossary("object","Objekts")}}.

 
diff --git a/files/de/glossary/cors-safelisted_request_header/index.html b/files/de/glossary/cors-safelisted_request_header/index.html
index 97db753e07..b67f7237ed 100644
--- a/files/de/glossary/cors-safelisted_request_header/index.html
+++ b/files/de/glossary/cors-safelisted_request_header/index.html
@@ -1,9 +1,10 @@
 ---
 title: CORS-zugelassene Anfrage-Header
-slug: Glossary/CORS-zugelassener-anfrage-header
+slug: Glossary/CORS-safelisted_request_header
 tags:
   - CORS
 translation_of: Glossary/CORS-safelisted_request_header
+original_slug: Glossary/CORS-zugelassener-anfrage-header
 ---
 
Ein CORS-zugelassener Anfrage-Header ist einer der folgenden HTTP Header:

 
diff --git a/files/de/glossary/css_preprocessor/index.html b/files/de/glossary/css_preprocessor/index.html
index 43cd580206..94064f4571 100644
--- a/files/de/glossary/css_preprocessor/index.html
+++ b/files/de/glossary/css_preprocessor/index.html
@@ -1,9 +1,10 @@
 ---
 title: CSS-Präprozessor
-slug: Glossary/CSS_Praeprozessor
+slug: Glossary/CSS_preprocessor
 tags:
   - CSS
 translation_of: Glossary/CSS_preprocessor
+original_slug: Glossary/CSS_Praeprozessor
 ---
 
Ein CSS-Präprozessor ist ein Programm zur Generierung von {{Glossary("CSS")}} aus der des Präprozessors eigenen {{Glossary("Syntax")}}. Es gibt eine Vielzahl von CSS Präprozessoren aus denen man wählen kann. Die meisten davon stellen Funktionen zur Verfügung, die in reinem CSS nicht verfügbar sind, wie beispielsweise Mixins, Nesting Selectors, Inheritance Selectors und andere. Diese Funktionen verhelfen der Struktur des CSS zu mehr Lesbarkeit und besserer Pflegbarkeit.

 
diff --git a/files/de/glossary/empty_element/index.html b/files/de/glossary/empty_element/index.html
index fd95ef05a6..c050756a2e 100644
--- a/files/de/glossary/empty_element/index.html
+++ b/files/de/glossary/empty_element/index.html
@@ -1,11 +1,12 @@
 ---
 title: Leeres Element
-slug: Glossary/Leeres_Element
+slug: Glossary/Empty_element
 tags:
   - CodingScripting
   - Fortgeschritten
   - Glossar
 translation_of: Glossary/Empty_element
+original_slug: Glossary/Leeres_Element
 ---
 
Ein Leeres Element ist ein {{Glossary("Element")}} aus HTML, SVG oder MathML, welches keine untergeordneten Elemente besitzen kann.

 
diff --git a/files/de/glossary/encapsulation/index.html b/files/de/glossary/encapsulation/index.html
index 98e06ad291..25b97e2141 100644
--- a/files/de/glossary/encapsulation/index.html
+++ b/files/de/glossary/encapsulation/index.html
@@ -1,9 +1,10 @@
 ---
 title: Datenkapselung
-slug: Glossary/Datenkapselung
+slug: Glossary/Encapsulation
 tags:
   - Datenkapselung
 translation_of: Glossary/Encapsulation
+original_slug: Glossary/Datenkapselung
 ---
 
Datenkapselung bezeichnet den Vorgang des Verbergens von Daten und {{glossary("function","functions")}} (Funktionen) in eine Komponente, wobei der Zugriff darauf beschränkt wird, es wird eine Art "Blackbox" für das {{glossary("object")}}  (Objekt) erstellt. Auf diese Weise braucht der Anwender solch einer Klasse nur das Interface zu kennen, also die Daten und Funktionen die nach außen hin sichtbar sind, und nicht die verborgene Implementierung.

 
diff --git a/files/de/glossary/first-class_function/index.html b/files/de/glossary/first-class_function/index.html
index 05ac712188..ebb66baaec 100644
--- a/files/de/glossary/first-class_function/index.html
+++ b/files/de/glossary/first-class_function/index.html
@@ -1,7 +1,8 @@
 ---
 title: Funktion erster Klasse
-slug: Glossary/Funktion_erster-Klasse
+slug: Glossary/First-class_Function
 translation_of: Glossary/First-class_Function
+original_slug: Glossary/Funktion_erster-Klasse
 ---
 
Funktionen, die wie jede andere Variable behandelt werden, bezeichnet man als Funktionen erster Klasse.

 
diff --git a/files/de/glossary/forbidden_header_name/index.html b/files/de/glossary/forbidden_header_name/index.html
index 23bbba81ca..041e2b9220 100644
--- a/files/de/glossary/forbidden_header_name/index.html
+++ b/files/de/glossary/forbidden_header_name/index.html
@@ -1,6 +1,6 @@
 ---
 title: Verbotener Header-Name
-slug: Glossary/verbotener_header_name
+slug: Glossary/Forbidden_header_name
 tags:
   - Fetch
   - Glossar
@@ -10,6 +10,7 @@ tags:
   - Verboten
   - Wörterverzeichnis
 translation_of: Glossary/Forbidden_header_name
+original_slug: Glossary/verbotener_header_name
 ---
 
Ein verbotener Header-Name, ist ein HTTP header Name, welcher nicht programmatisch modifiziert werden kann;  that cannot be modified programmatically; speziell, ein HTTP Anfragen-Header Name.

 
diff --git a/files/de/glossary/information_architecture/index.html b/files/de/glossary/information_architecture/index.html
index 33e6cbc130..c85551f66d 100644
--- a/files/de/glossary/information_architecture/index.html
+++ b/files/de/glossary/information_architecture/index.html
@@ -1,11 +1,12 @@
 ---
 title: Informationsarchitektur
-slug: Glossary/Informationsarchitektur
+slug: Glossary/Information_architecture
 tags:
   - Design
   - Glossary
   - User experience
 translation_of: Glossary/Information_architecture
+original_slug: Glossary/Informationsarchitektur
 ---
 
Informationsarchitektur (IA) bezeichnet die Organisation, Strukturierung und Gestaltung von Inhalten innerhalb einer Website sowie auf einzelnen Webseiten. Eine gute Informationsarchitektur ermöglicht den Nutzer*innen, die gesuchten Informationen einfach und schnell zu finden und zu nutzen; sie ist somit mitverantwortlich für das {{Glossary("UX", "Nutzungserlebnis (User Experience)")}} einer Website.

 
diff --git a/files/de/glossary/localization/index.html b/files/de/glossary/localization/index.html
index 91b5063380..75cae277a2 100644
--- a/files/de/glossary/localization/index.html
+++ b/files/de/glossary/localization/index.html
@@ -1,9 +1,10 @@
 ---
 title: Lokalisierung
-slug: Lokalisierung
+slug: Glossary/Localization
 tags:
   - Lokalisierung
 translation_of: Glossary/Localization
+original_slug: Lokalisierung
 ---
 
Lokalisierung (L10n) ist der Vorgang zur Übersetzung von Programmbenutzeroberflächen in eine andere Sprache und deren Anpassung an weitere Eigenheiten anderer Kulturen. Auf den folgenden Seiten geht es darum Mozilla-basierte Anwendungen oder Erweiterungen zu lokalisieren. Hier wird auch von Software- bzw. Website-Lokalisierungen gesprochen.

 
diff --git a/files/de/glossary/object/index.html b/files/de/glossary/object/index.html
index 19b2f9f3d9..1acdd7c790 100644
--- a/files/de/glossary/object/index.html
+++ b/files/de/glossary/object/index.html
@@ -1,11 +1,12 @@
 ---
 title: Objekt
-slug: Glossary/Objekt
+slug: Glossary/Object
 tags:
   - Einführung
   - Objekt
   - Objektorientierte Programmierung
 translation_of: Glossary/Object
+original_slug: Glossary/Objekt
 ---
 
Ein Objekt bezieht sich auf eine Datenstruktur welche Daten und Anweisungen beinhaltet. Objekte stellen manchmal Gegenstände aus der echten Welt dar, wie zum Beispiel ein Auto oder eine Karte in einem Rennspiel. {{glossary("JavaScript")}}, Java, C++, Python und Ruby sind Beispiele für  {{glossary("OOP","Objektorientierte Programmiersprachen")}}.

 
diff --git a/files/de/glossary/primitive/index.html b/files/de/glossary/primitive/index.html
index 021ca95488..a77c9e8fff 100644
--- a/files/de/glossary/primitive/index.html
+++ b/files/de/glossary/primitive/index.html
@@ -1,12 +1,13 @@
 ---
 title: Skalare Daten
-slug: Glossary/einfache_datenelemente
+slug: Glossary/Primitive
 tags:
   - Glossary
   - einfache Datentypen
   - primitive Datentypen
   - skalare Datentypen
 translation_of: Glossary/Primitive
+original_slug: Glossary/einfache_datenelemente
 ---
 
Ein primitives (skalares) Datenelement (einfacher Wert, einfacher Datentyp) ist ein Datenelement, das kein {{Glossary("object","Objekt")}} ist und keine {{glossary("method","Methoden")}} besitzt.

 
diff --git a/files/de/glossary/protocol/index.html b/files/de/glossary/protocol/index.html
index eb631a6a81..ce222f27a3 100644
--- a/files/de/glossary/protocol/index.html
+++ b/files/de/glossary/protocol/index.html
@@ -1,11 +1,12 @@
 ---
 title: Protokoll
-slug: Glossary/Protokoll
+slug: Glossary/Protocol
 tags:
   - Glossary
   - Infrastructure
   - Protocols
 translation_of: Glossary/Protocol
+original_slug: Glossary/Protokoll
 ---
 
Ein Protokoll ist ein System aus Regeln, die festlegen wie Daten in oder zwischen Computern ausgetauscht werden. Die Kommunikation zwischen Geräten erfordert, dass die Geräte im Format der ausgetauschten Daten übereinstimmen. Der Satz an Regeln, aus dem ein Format besteht, wird Protokoll genannt.

 
diff --git a/files/de/glossary/statement/index.html b/files/de/glossary/statement/index.html
index 4913ac8f29..27eab6bf91 100644
--- a/files/de/glossary/statement/index.html
+++ b/files/de/glossary/statement/index.html
@@ -1,6 +1,6 @@
 ---
 title: Anweisung
-slug: Glossary/Anweisung
+slug: Glossary/Statement
 tags:
   - Anweisung
   - Glossar
@@ -8,6 +8,7 @@ tags:
   - JavaScript
   - befehl
 translation_of: Glossary/Statement
+original_slug: Glossary/Anweisung
 ---
 
In einer Programmiersprache ist eine Anweisung eine Vorschrift innerhalb des Codes, die zur Laufzeit des Programmes einem Befehl entspricht. Jedes Programm ist zusammengesetzt aus einer Folge von Anweisungen. 

 
diff --git a/files/de/glossary/type/index.html b/files/de/glossary/type/index.html
index 890c06d118..09a772b7d4 100644
--- a/files/de/glossary/type/index.html
+++ b/files/de/glossary/type/index.html
@@ -1,11 +1,12 @@
 ---
 title: Typ
-slug: Glossary/Typ
+slug: Glossary/Type
 tags:
   - CodingScripting
   - Glossary
   - JavaScript
 translation_of: Glossary/Type
+original_slug: Glossary/Typ
 ---
 
Typen sind Charakteristiken von {{Glossary("Value", "Werten")}}, die festlegen, welche Art von Daten oder Strukturen ein Wert bzw. eine Variable speichern kann.

 
diff --git a/files/de/glossary/vendor_prefix/index.html b/files/de/glossary/vendor_prefix/index.html
index a97254fc6e..abf99f967d 100644
--- a/files/de/glossary/vendor_prefix/index.html
+++ b/files/de/glossary/vendor_prefix/index.html
@@ -1,6 +1,6 @@
 ---
 title: Herstellerpräfix
-slug: Glossary/Herstellerpräfix
+slug: Glossary/Vendor_Prefix
 tags:
   - '-moz-'
   - '-ms-'
@@ -14,6 +14,7 @@ tags:
   - Präfix
   - scripten
 translation_of: Glossary/Vendor_Prefix
+original_slug: Glossary/Herstellerpräfix
 ---
 
Browserhersteller fügen manchmal Präfixe zu experimentellen oder nichtstandardisierten CSS-Eigenschaften hinzu, damit Entwickler mit neuen Ideen experimentieren können, während - in der Theorie - verhindert werden soll, dass sie sich auf diese Experimente verlassen und ihr Code dann während des Standardisierungsprozesses bricht. Entwickler sollten mit der Verwendung der Eigenschaft ohne Präfix warten, bis das Browserverhalten standardisiert ist.

 
diff --git a/files/de/learn/common_questions/how_does_the_internet_work/index.html b/files/de/learn/common_questions/how_does_the_internet_work/index.html
index f780dac8a7..e53bb596f3 100644
--- a/files/de/learn/common_questions/how_does_the_internet_work/index.html
+++ b/files/de/learn/common_questions/how_does_the_internet_work/index.html
@@ -1,7 +1,8 @@
 ---
 title: Wie das Internet funktioniert
-slug: Learn/Common_questions/Wie_das_Internet_funktioniert
+slug: Learn/Common_questions/How_does_the_Internet_work
 translation_of: Learn/Common_questions/How_does_the_Internet_work
+original_slug: Learn/Common_questions/Wie_das_Internet_funktioniert
 ---
 
{{LearnSidebar}}

 
diff --git a/files/de/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/de/learn/css/building_blocks/cascade_and_inheritance/index.html
index 79ce577e7f..66491c7d4b 100644
--- a/files/de/learn/css/building_blocks/cascade_and_inheritance/index.html
+++ b/files/de/learn/css/building_blocks/cascade_and_inheritance/index.html
@@ -1,8 +1,9 @@
 ---
 title: Kaskadierung und Vererbung
-slug: Web/Guide/CSS/Getting_started/Kaskadierung_und_vererbung
+slug: Learn/CSS/Building_blocks/Cascade_and_inheritance
 translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance
 translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance
+original_slug: Web/Guide/CSS/Getting_started/Kaskadierung_und_vererbung
 ---
 
{{ CSSTutorialTOC() }}

 
diff --git a/files/de/learn/css/building_blocks/selectors/index.html b/files/de/learn/css/building_blocks/selectors/index.html
index f61b8bb577..e99787c956 100644
--- a/files/de/learn/css/building_blocks/selectors/index.html
+++ b/files/de/learn/css/building_blocks/selectors/index.html
@@ -1,8 +1,9 @@
 ---
 title: Selektoren
-slug: Web/Guide/CSS/Getting_started/Selektoren
+slug: Learn/CSS/Building_blocks/Selectors
 translation_of: Learn/CSS/Building_blocks/Selectors
 translation_of_original: Web/Guide/CSS/Getting_started/Selectors
+original_slug: Web/Guide/CSS/Getting_started/Selektoren
 ---
 
{{ CSSTutorialTOC() }}

 
diff --git a/files/de/learn/css/building_blocks/values_and_units/index.html b/files/de/learn/css/building_blocks/values_and_units/index.html
index 8c45b5ba69..7cf48f86f7 100644
--- a/files/de/learn/css/building_blocks/values_and_units/index.html
+++ b/files/de/learn/css/building_blocks/values_and_units/index.html
@@ -1,6 +1,6 @@
 ---
 title: Werte und Einheiten in CSS
-slug: Learn/CSS/Building_blocks/Werten_Einheiten
+slug: Learn/CSS/Building_blocks/Values_and_units
 tags:
   - CSS
   - Einheiten
@@ -8,6 +8,7 @@ tags:
   - Lernen
   - Werte
 translation_of: Learn/CSS/Building_blocks/Values_and_units
+original_slug: Learn/CSS/Building_blocks/Werten_Einheiten
 ---
 
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}

 
diff --git a/files/de/learn/css/first_steps/how_css_is_structured/index.html b/files/de/learn/css/first_steps/how_css_is_structured/index.html
index 4c16c3e18d..ceaab03cc0 100644
--- a/files/de/learn/css/first_steps/how_css_is_structured/index.html
+++ b/files/de/learn/css/first_steps/how_css_is_structured/index.html
@@ -1,8 +1,9 @@
 ---
 title: Lesbares CSS
-slug: Web/Guide/CSS/Getting_started/Lesbares_CSS
+slug: Learn/CSS/First_steps/How_CSS_is_structured
 translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable
 translation_of_original: Web/Guide/CSS/Getting_started/Readable_CSS
+original_slug: Web/Guide/CSS/Getting_started/Lesbares_CSS
 ---
 
{{ CSSTutorialTOC() }}

 
diff --git a/files/de/learn/css/first_steps/how_css_works/index.html b/files/de/learn/css/first_steps/how_css_works/index.html
index 0641d048e4..a5a0fab8de 100644
--- a/files/de/learn/css/first_steps/how_css_works/index.html
+++ b/files/de/learn/css/first_steps/how_css_works/index.html
@@ -1,8 +1,9 @@
 ---
 title: Was ist CSS
-slug: Web/Guide/CSS/Getting_started/Was_ist_CSS
+slug: Learn/CSS/First_steps/How_CSS_works
 translation_of: Learn/CSS/First_steps/How_CSS_works
 translation_of_original: Web/Guide/CSS/Getting_started/What_is_CSS
+original_slug: Web/Guide/CSS/Getting_started/Was_ist_CSS
 ---
 
{{CSSTutorialTOC}}

 
diff --git a/files/de/learn/css/styling_text/fundamentals/index.html b/files/de/learn/css/styling_text/fundamentals/index.html
index 7a3a40f6e0..f3514793ac 100644
--- a/files/de/learn/css/styling_text/fundamentals/index.html
+++ b/files/de/learn/css/styling_text/fundamentals/index.html
@@ -1,8 +1,9 @@
 ---
 title: Textstyles
-slug: Web/Guide/CSS/Getting_started/Textstyles
+slug: Learn/CSS/Styling_text/Fundamentals
 translation_of: Learn/CSS/Styling_text/Fundamentals
 translation_of_original: Web/Guide/CSS/Getting_started/Text_styles
+original_slug: Web/Guide/CSS/Getting_started/Textstyles
 ---
 
{{ CSSTutorialTOC() }}

 
diff --git a/files/de/learn/forms/index.html b/files/de/learn/forms/index.html
index b0d1e8eb58..343876346b 100644
--- a/files/de/learn/forms/index.html
+++ b/files/de/learn/forms/index.html
@@ -1,6 +1,6 @@
 ---
 title: HTML forms
-slug: Learn/HTML/Forms
+slug: Learn/Forms
 tags:
   - Anleitung
   - Beginner
@@ -9,6 +9,7 @@ tags:
   - Lernen
   - Web
 translation_of: Learn/Forms
+original_slug: Learn/HTML/Forms
 ---
 
{{LearnSidebar}}

 
diff --git a/files/de/learn/getting_started_with_the_web/dealing_with_files/index.html b/files/de/learn/getting_started_with_the_web/dealing_with_files/index.html
index 2eaa20a9ea..1b6f1c127a 100644
--- a/files/de/learn/getting_started_with_the_web/dealing_with_files/index.html
+++ b/files/de/learn/getting_started_with_the_web/dealing_with_files/index.html
@@ -1,6 +1,6 @@
 ---
 title: Dateien nutzen
-slug: Learn/Getting_started_with_the_web/dateien_nutzen
+slug: Learn/Getting_started_with_the_web/Dealing_with_files
 tags:
   - Anfänger
   - Datei
@@ -9,6 +9,7 @@ tags:
   - Pfad
   - Webseite
 translation_of: Learn/Getting_started_with_the_web/Dealing_with_files
+original_slug: Learn/Getting_started_with_the_web/dateien_nutzen
 ---
 
{{LearnSidebar}}

 
diff --git a/files/de/learn/getting_started_with_the_web/how_the_web_works/index.html b/files/de/learn/getting_started_with_the_web/how_the_web_works/index.html
index 7b5dfbc541..e368a1ca37 100644
--- a/files/de/learn/getting_started_with_the_web/how_the_web_works/index.html
+++ b/files/de/learn/getting_started_with_the_web/how_the_web_works/index.html
@@ -1,6 +1,6 @@
 ---
 title: Wie das Internet funktioniert
-slug: Learn/Getting_started_with_the_web/Wie_das_Internet_funktioniert
+slug: Learn/Getting_started_with_the_web/How_the_Web_works
 tags:
   - Anfänger
   - Client
@@ -14,6 +14,7 @@ tags:
   - TCP
   - Web
 translation_of: Learn/Getting_started_with_the_web/How_the_Web_works
+original_slug: Learn/Getting_started_with_the_web/Wie_das_Internet_funktioniert
 ---
 
{{LearnSidebar}}

 
diff --git a/files/de/learn/getting_started_with_the_web/javascript_basics/index.html b/files/de/learn/getting_started_with_the_web/javascript_basics/index.html
index 65a31710d3..2f49aa255d 100644
--- a/files/de/learn/getting_started_with_the_web/javascript_basics/index.html
+++ b/files/de/learn/getting_started_with_the_web/javascript_basics/index.html
@@ -1,6 +1,6 @@
 ---
 title: JavaScript-Grundlagen
-slug: Learn/Getting_started_with_the_web/JavaScript_basis
+slug: Learn/Getting_started_with_the_web/JavaScript_basics
 tags:
   - Anfänger
   - JavaScript
@@ -8,6 +8,7 @@ tags:
   - Web
   - Webdesign
 translation_of: Learn/Getting_started_with_the_web/JavaScript_basics
+original_slug: Learn/Getting_started_with_the_web/JavaScript_basis
 ---
 
{{LearnSidebar}}

 
diff --git a/files/de/learn/html/introduction_to_html/advanced_text_formatting/index.html b/files/de/learn/html/introduction_to_html/advanced_text_formatting/index.html
index 1075d63f66..d8c21be264 100644
--- a/files/de/learn/html/introduction_to_html/advanced_text_formatting/index.html
+++ b/files/de/learn/html/introduction_to_html/advanced_text_formatting/index.html
@@ -1,6 +1,6 @@
 ---
 title: Fortgeschrittene Textformatierung
-slug: Learn/HTML/Einführung_in_HTML/Fortgeschrittene_Textformatierung
+slug: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting
 tags:
   - Abkürzungen
   - Beginner
@@ -11,6 +11,7 @@ tags:
   - Textformatierung
   - Zitate
 translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting
+original_slug: Learn/HTML/Einführung_in_HTML/Fortgeschrittene_Textformatierung
 ---
 
{{LearnSidebar}}

 
diff --git a/files/de/learn/html/introduction_to_html/creating_hyperlinks/index.html b/files/de/learn/html/introduction_to_html/creating_hyperlinks/index.html
index d27bf253a4..6f67a374bb 100644
--- a/files/de/learn/html/introduction_to_html/creating_hyperlinks/index.html
+++ b/files/de/learn/html/introduction_to_html/creating_hyperlinks/index.html
@@ -1,6 +1,6 @@
 ---
 title: Erstellen von Hyperlinks
-slug: Learn/HTML/Einführung_in_HTML/Erstellen_von_Hyperlinks
+slug: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks
 tags:
   - Beginner
   - Guide
@@ -13,6 +13,7 @@ tags:
   - relativ
   - urls
 translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks
+original_slug: Learn/HTML/Einführung_in_HTML/Erstellen_von_Hyperlinks
 ---
 
{{LearnSidebar}}

 
diff --git a/files/de/learn/html/introduction_to_html/debugging_html/index.html b/files/de/learn/html/introduction_to_html/debugging_html/index.html
index 3e3223016e..d430537d4e 100644
--- a/files/de/learn/html/introduction_to_html/debugging_html/index.html
+++ b/files/de/learn/html/introduction_to_html/debugging_html/index.html
@@ -1,6 +1,6 @@
 ---
 title: Fehlersuche in HTML
-slug: Learn/HTML/Einführung_in_HTML/Fehlersuche_in_HTML
+slug: Learn/HTML/Introduction_to_HTML/Debugging_HTML
 tags:
   - Anfänger
   - Beginner
@@ -10,6 +10,7 @@ tags:
   - Validation
   - validator
 translation_of: Learn/HTML/Introduction_to_HTML/Debugging_HTML
+original_slug: Learn/HTML/Einführung_in_HTML/Fehlersuche_in_HTML
 ---
 
{{LearnSidebar}}

 
diff --git a/files/de/learn/html/introduction_to_html/document_and_website_structure/index.html b/files/de/learn/html/introduction_to_html/document_and_website_structure/index.html
index 7b9ce1bae8..f2e53c49d3 100644
--- a/files/de/learn/html/introduction_to_html/document_and_website_structure/index.html
+++ b/files/de/learn/html/introduction_to_html/document_and_website_structure/index.html
@@ -1,6 +1,6 @@
 ---
 title: Struktur in die Webseite bringen
-slug: Learn/HTML/Einführung_in_HTML/Document_and_website_structure
+slug: Learn/HTML/Introduction_to_HTML/Document_and_website_structure
 tags:
   - Beginner
   - Guide
@@ -10,6 +10,7 @@ tags:
   - Sitemap
   - Struktur
 translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure
+original_slug: Learn/HTML/Einführung_in_HTML/Document_and_website_structure
 ---
 
{{LearnSidebar}}

 
diff --git a/files/de/learn/html/introduction_to_html/getting_started/index.html b/files/de/learn/html/introduction_to_html/getting_started/index.html
index 0f5354d5d2..1ee9d1214e 100644
--- a/files/de/learn/html/introduction_to_html/getting_started/index.html
+++ b/files/de/learn/html/introduction_to_html/getting_started/index.html
@@ -1,6 +1,6 @@
 ---
 title: Lerne HTML kennen
-slug: Learn/HTML/Einführung_in_HTML/Lerne_HTML_kennen
+slug: Learn/HTML/Introduction_to_HTML/Getting_started
 tags:
   - Anfänger
   - Attribut
@@ -14,6 +14,7 @@ tags:
   - Modul
   - whitespace
 translation_of: Learn/HTML/Introduction_to_HTML/Getting_started
+original_slug: Learn/HTML/Einführung_in_HTML/Lerne_HTML_kennen
 ---
 
{{LearnSidebar}}

 
diff --git a/files/de/learn/html/introduction_to_html/html_text_fundamentals/index.html b/files/de/learn/html/introduction_to_html/html_text_fundamentals/index.html
index dad40a05a9..7bc567dc92 100644
--- a/files/de/learn/html/introduction_to_html/html_text_fundamentals/index.html
+++ b/files/de/learn/html/introduction_to_html/html_text_fundamentals/index.html
@@ -1,6 +1,6 @@
 ---
 title: Einfache Textformatierung in HTML
-slug: Learn/HTML/Einführung_in_HTML/Einfache_Textformatierung_in_HTML
+slug: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals
 tags:
   - Beginner
   - Einführung in HTML
@@ -12,6 +12,7 @@ tags:
   - Text formatieren
   - Überschriften
 translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals
+original_slug: Learn/HTML/Einführung_in_HTML/Einfache_Textformatierung_in_HTML
 ---
 
{{LearnSidebar}}

 
diff --git a/files/de/learn/html/introduction_to_html/index.html b/files/de/learn/html/introduction_to_html/index.html
index 73f46a2614..625b9e01f7 100644
--- a/files/de/learn/html/introduction_to_html/index.html
+++ b/files/de/learn/html/introduction_to_html/index.html
@@ -1,6 +1,6 @@
 ---
 title: Einführung in HTML
-slug: Learn/HTML/Einführung_in_HTML
+slug: Learn/HTML/Introduction_to_HTML
 tags:
   - Einführung in HTML
   - HTML
@@ -12,6 +12,7 @@ tags:
   - Textformatierung
   - head
 translation_of: Learn/HTML/Introduction_to_HTML
+original_slug: Learn/HTML/Einführung_in_HTML
 ---
 
{{LearnSidebar}}

 
diff --git a/files/de/learn/html/introduction_to_html/marking_up_a_letter/index.html b/files/de/learn/html/introduction_to_html/marking_up_a_letter/index.html
index e2d3e9d636..ab291c955b 100644
--- a/files/de/learn/html/introduction_to_html/marking_up_a_letter/index.html
+++ b/files/de/learn/html/introduction_to_html/marking_up_a_letter/index.html
@@ -1,6 +1,6 @@
 ---
 title: Marking up a letter
-slug: Learn/HTML/Einführung_in_HTML/Marking_up_a_letter
+slug: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter
 tags:
   - Anfänger
   - Brief
@@ -9,6 +9,7 @@ tags:
   - Text
   - head
 translation_of: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter
+original_slug: Learn/HTML/Einführung_in_HTML/Marking_up_a_letter
 ---
 
{{LearnSidebar}}

 
diff --git a/files/de/learn/html/introduction_to_html/structuring_a_page_of_content/index.html b/files/de/learn/html/introduction_to_html/structuring_a_page_of_content/index.html
index fc439ad60b..6f3e12ddb2 100644
--- a/files/de/learn/html/introduction_to_html/structuring_a_page_of_content/index.html
+++ b/files/de/learn/html/introduction_to_html/structuring_a_page_of_content/index.html
@@ -1,7 +1,8 @@
 ---
 title: Structuring a page of content
-slug: Learn/HTML/Einführung_in_HTML/Structuring_a_page_of_content
+slug: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content
 translation_of: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content
+original_slug: Learn/HTML/Einführung_in_HTML/Structuring_a_page_of_content
 ---
 
{{LearnSidebar}}

 
diff --git a/files/de/learn/html/introduction_to_html/the_head_metadata_in_html/index.html b/files/de/learn/html/introduction_to_html/the_head_metadata_in_html/index.html
index f775774535..a4d67ac514 100644
--- a/files/de/learn/html/introduction_to_html/the_head_metadata_in_html/index.html
+++ b/files/de/learn/html/introduction_to_html/the_head_metadata_in_html/index.html
@@ -1,6 +1,6 @@
 ---
 title: Was gehört in den Kopf der HTML-Datei?
-slug: Learn/HTML/Einführung_in_HTML/Der_Kopf_Metadaten_in_HTML
+slug: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
 tags:
   - Anfänger
   - Beginner
@@ -14,6 +14,7 @@ tags:
   - head
   - lang
 translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
+original_slug: Learn/HTML/Einführung_in_HTML/Der_Kopf_Metadaten_in_HTML
 ---
 
{{LearnSidebar}}

 
diff --git a/files/de/learn/html/tables/basics/index.html b/files/de/learn/html/tables/basics/index.html
index a10e286570..b162ed291d 100644
--- a/files/de/learn/html/tables/basics/index.html
+++ b/files/de/learn/html/tables/basics/index.html
@@ -1,7 +1,8 @@
 ---
 title: Grundtabellen in HTML
-slug: Learn/HTML/Tables/Grund_tabelle_HTML
+slug: Learn/HTML/Tables/Basics
 translation_of: Learn/HTML/Tables/Basics
+original_slug: Learn/HTML/Tables/Grund_tabelle_HTML
 ---
 
{{LearnSidebar}}

 
diff --git a/files/de/learn/javascript/building_blocks/events/index.html b/files/de/learn/javascript/building_blocks/events/index.html
index c07922c124..88c8c66afd 100644
--- a/files/de/learn/javascript/building_blocks/events/index.html
+++ b/files/de/learn/javascript/building_blocks/events/index.html
@@ -1,7 +1,8 @@
 ---
 title: Einleitung der Ereignissen
-slug: Learn/JavaScript/Bausteine/Ereignisse
+slug: Learn/JavaScript/Building_blocks/Events
 translation_of: Learn/JavaScript/Building_blocks/Events
+original_slug: Learn/JavaScript/Bausteine/Ereignisse
 ---
 
{{LearnSidebar}}

 
diff --git a/files/de/learn/javascript/building_blocks/index.html b/files/de/learn/javascript/building_blocks/index.html
index 1c6fb8fc46..842f7f449f 100644
--- a/files/de/learn/javascript/building_blocks/index.html
+++ b/files/de/learn/javascript/building_blocks/index.html
@@ -1,7 +1,8 @@
 ---
 title: JavaScript Bausteine
-slug: Learn/JavaScript/Bausteine
+slug: Learn/JavaScript/Building_blocks
 translation_of: Learn/JavaScript/Building_blocks
+original_slug: Learn/JavaScript/Bausteine
 ---
 
{{LearnSidebar}}

 
diff --git a/files/de/learn/javascript/first_steps/a_first_splash/index.html b/files/de/learn/javascript/first_steps/a_first_splash/index.html
index e772147cae..6f5418d17b 100644
--- a/files/de/learn/javascript/first_steps/a_first_splash/index.html
+++ b/files/de/learn/javascript/first_steps/a_first_splash/index.html
@@ -1,7 +1,8 @@
 ---
 title: Ein erster Eindruck von JavaScript
-slug: Learn/JavaScript/First_steps/Erster_Blick
+slug: Learn/JavaScript/First_steps/A_first_splash
 translation_of: Learn/JavaScript/First_steps/A_first_splash
+original_slug: Learn/JavaScript/First_steps/Erster_Blick
 ---
 
{{LearnSidebar}}

 
diff --git a/files/de/learn/javascript/first_steps/silly_story_generator/index.html b/files/de/learn/javascript/first_steps/silly_story_generator/index.html
index 1703f9b6a7..d9d31e7c4f 100644
--- a/files/de/learn/javascript/first_steps/silly_story_generator/index.html
+++ b/files/de/learn/javascript/first_steps/silly_story_generator/index.html
@@ -1,7 +1,8 @@
 ---
 title: Der Lustige Geschichten Generator
-slug: Learn/JavaScript/First_steps/lustige_geschichten_generator
+slug: Learn/JavaScript/First_steps/Silly_story_generator
 translation_of: Learn/JavaScript/First_steps/Silly_story_generator
+original_slug: Learn/JavaScript/First_steps/lustige_geschichten_generator
 ---
 
{{LearnSidebar}}

 
diff --git a/files/de/learn/javascript/first_steps/what_is_javascript/index.html b/files/de/learn/javascript/first_steps/what_is_javascript/index.html
index 247b4744c5..b3253d448f 100644
--- a/files/de/learn/javascript/first_steps/what_is_javascript/index.html
+++ b/files/de/learn/javascript/first_steps/what_is_javascript/index.html
@@ -1,7 +1,8 @@
 ---
 title: Was ist JavaScript?
-slug: Learn/JavaScript/First_steps/Was_ist_JavaScript
+slug: Learn/JavaScript/First_steps/What_is_JavaScript
 translation_of: Learn/JavaScript/First_steps/What_is_JavaScript
+original_slug: Learn/JavaScript/First_steps/Was_ist_JavaScript
 ---
 
{{LearnSidebar}}

 
diff --git a/files/de/learn/server-side/first_steps/index.html b/files/de/learn/server-side/first_steps/index.html
index d2a3cc75ca..46d00ed125 100644
--- a/files/de/learn/server-side/first_steps/index.html
+++ b/files/de/learn/server-side/first_steps/index.html
@@ -1,12 +1,13 @@
 ---
 title: Erste Schritte in serverseitiger Webseiten-Programmierung
-slug: Learn/Server-side/Erste_Schritte
+slug: Learn/Server-side/First_steps
 tags:
   - Anfänger
   - Einführung
   - Lernen
   - Serverseitige Programmierung
 translation_of: Learn/Server-side/First_steps
+original_slug: Learn/Server-side/Erste_Schritte
 ---
 
{{LearnSidebar}}

  In diesem Modul beantworten wir grundlegende Fragen zur serverseitigen Programmierung - "Was ist das?", "Worin unterscheidet sie sich von der clientseitigen Programmierung?" und "Warum ist sie so nützlich?". Danach geben wir Ihnen einen Überblick über einige der beliebtesten serverseitigen Web-Frameworks und beraten Sie, wie Sie das am besten geeignete Framework für die Erstellung Ihrer ersten Website auswählen können. Schließlich bieten wir auch noch einen Einführungsartikel über Webserver-Sicherheit.

diff --git a/files/de/learn/server-side/first_steps/introduction/index.html b/files/de/learn/server-side/first_steps/introduction/index.html
index 2924655941..48ab6570fc 100644
--- a/files/de/learn/server-side/first_steps/introduction/index.html
+++ b/files/de/learn/server-side/first_steps/introduction/index.html
@@ -1,10 +1,11 @@
 ---
 title: Einführung auf der Serverseite
-slug: Learn/Server-side/Erste_Schritte/Introduction
+slug: Learn/Server-side/First_steps/Introduction
 tags:
   - Anfänger
   - Einführung
 translation_of: Learn/Server-side/First_steps/Introduction
+original_slug: Learn/Server-side/Erste_Schritte/Introduction
 ---
 
{{LearnSidebar}}

 
diff --git a/files/de/mdn/about/index.html b/files/de/mdn/about/index.html
index 745152be79..8cdb9aa58e 100644
--- a/files/de/mdn/about/index.html
+++ b/files/de/mdn/about/index.html
@@ -1,7 +1,8 @@
 ---
 title: Über MDN
-slug: MDN/Über
+slug: MDN/About
 translation_of: MDN/About
+original_slug: MDN/Über
 ---
 
{{MDNSidebar}}

 
diff --git a/files/de/mdn/at_ten/history_of_mdn/index.html b/files/de/mdn/at_ten/history_of_mdn/index.html
index 3e33c984f3..bf0d54302a 100644
--- a/files/de/mdn/at_ten/history_of_mdn/index.html
+++ b/files/de/mdn/at_ten/history_of_mdn/index.html
@@ -1,9 +1,10 @@
 ---
 title: MDNs Geschichte
-slug: MDN_at_ten/History_of_MDN
+slug: MDN/At_ten/History_of_MDN
 tags:
   - MDN
 translation_of: MDN_at_ten/History_of_MDN
+original_slug: MDN_at_ten/History_of_MDN
 ---
 

 
In diesem Gespräch schauen mehrere Mitwirkende von MDN auf die vergangenen zehn Jahre von developer.mozilla.org zurück und auf das kommende Jahrzehnt. Du wirst die Geschichte verschiedener Wiki-Software-Migrationen hören, wie eine Gemeinschaft rund ums Dokumentieren entstanden ist und viele weitere Highlights der Geschichte dieser Seite. Anschließend spricht die Gruppe auch über aktuelle Herausforderungen und Projekte, an denen die MDN Gemeinschaft dieses Jahr arbeitet.

diff --git a/files/de/mdn/at_ten/index.html b/files/de/mdn/at_ten/index.html
index 91495de944..4be697f063 100644
--- a/files/de/mdn/at_ten/index.html
+++ b/files/de/mdn/at_ten/index.html
@@ -1,10 +1,11 @@
 ---
 title: 10 Jahre MDN
-slug: MDN_at_ten
+slug: MDN/At_ten
 tags:
   - MDN
   - TopicStub
 translation_of: MDN_at_ten
+original_slug: MDN_at_ten
 ---
 
 
diff --git a/files/de/mdn/guidelines/writing_style_guide/index.html b/files/de/mdn/guidelines/writing_style_guide/index.html
index 274d9d4f8c..95beba8e3c 100644
--- a/files/de/mdn/guidelines/writing_style_guide/index.html
+++ b/files/de/mdn/guidelines/writing_style_guide/index.html
@@ -1,7 +1,8 @@
 ---
 title: MDN style guide
-slug: MDN/Guidelines/Style_guide
+slug: MDN/Guidelines/Writing_style_guide
 translation_of: MDN/Guidelines/Writing_style_guide
+original_slug: MDN/Guidelines/Style_guide
 ---
 
{{MDNSidebar}}

 
diff --git a/files/de/mdn/structures/compatibility_tables/index.html b/files/de/mdn/structures/compatibility_tables/index.html
index 758d450e7c..d235d718a3 100644
--- a/files/de/mdn/structures/compatibility_tables/index.html
+++ b/files/de/mdn/structures/compatibility_tables/index.html
@@ -1,9 +1,10 @@
 ---
 title: Kompatibilitäts Tabellen
-slug: MDN/Structures/Kompatibilitaets_Tabellen
+slug: MDN/Structures/Compatibility_tables
 tags:
   - Browser Kompatibilität
 translation_of: MDN/Structures/Compatibility_tables
+original_slug: MDN/Structures/Kompatibilitaets_Tabellen
 ---
 
{{MDNSidebar}}

 
diff --git a/files/de/mdn/tools/index.html b/files/de/mdn/tools/index.html
index 6aeb6703ed..de677e432e 100644
--- a/files/de/mdn/tools/index.html
+++ b/files/de/mdn/tools/index.html
@@ -1,8 +1,9 @@
 ---
 title: MDN Benutzerhandbuch
-slug: MDN/nutzer_leitfaden
+slug: MDN/Tools
 translation_of: MDN/Tools
 translation_of_original: MDN/User_guide
+original_slug: MDN/nutzer_leitfaden
 ---
 
{{MDNSidebar}}
Die Mozilla Developer Network-Website ist ein fortschrittliches System zum suchen, lesen und eine beitragene Dokumentions Hilfe für Web-Entwickler (wie auch für Firefox und Firefox OS-Entwickler). Die MDN Mitglieder liefern detailierte Artikel welche zum benutzen des MDN, für Dokumentionen die du brauchst und wenn du möchtest die dir helfen das Material besser und weiter und zu vervollständigen, hilft. 

 
diff --git a/files/de/mdn/tools/kumascript/troubleshooting/index.html b/files/de/mdn/tools/kumascript/troubleshooting/index.html
index 0255388aa1..a7e9a5ca0a 100644
--- a/files/de/mdn/tools/kumascript/troubleshooting/index.html
+++ b/files/de/mdn/tools/kumascript/troubleshooting/index.html
@@ -1,7 +1,8 @@
 ---
 title: Beheben von KumaScript Fehlern
-slug: MDN/Kuma/Beheben_von_KumaScript_Fehlern
+slug: MDN/Tools/KumaScript/Troubleshooting
 translation_of: MDN/Tools/KumaScript/Troubleshooting
+original_slug: MDN/Kuma/Beheben_von_KumaScript_Fehlern
 ---
 
{{MDNSidebar}}

 
KumaScript Fehler plaziert in großen roten Kästen wirken auf die Leser abstossend. Zum Glück kann jedoch jeder mit einem MDN Konto solche Fehler beseitigen. Wenn ein Fehler auf einer Seite auftritt, landet die betreffende Seite in der List der Dokumente mit Fehlern.  Seitenauthoren gehen diese Seiten regelmäßig durch um Fehler zu finden und zu beseitigen. Dieser Artikel erläutert vier Typen von KumaScript Fehlern und beschreibt einige Methoden zu ihrer Beseitigung.

diff --git a/files/de/mdn/yari/index.html b/files/de/mdn/yari/index.html
index 06e83f21ee..4a1db717af 100644
--- a/files/de/mdn/yari/index.html
+++ b/files/de/mdn/yari/index.html
@@ -1,6 +1,6 @@
 ---
 title: 'Kuma: MDN''s wiki platform'
-slug: MDN/Kuma
+slug: MDN/Yari
 tags:
   - Einstieg bei Mozilla
   - Helfen
@@ -8,6 +8,7 @@ tags:
   - MDN Meta
   - Mitarbeiten
 translation_of: MDN/Kuma
+original_slug: MDN/Kuma
 ---
 
{{MDNSidebar}}

 
diff --git a/files/de/mozilla/add-ons/webextensions/api/bookmarks/index.html b/files/de/mozilla/add-ons/webextensions/api/bookmarks/index.html
index 7c43bda2af..835cd62ecb 100644
--- a/files/de/mozilla/add-ons/webextensions/api/bookmarks/index.html
+++ b/files/de/mozilla/add-ons/webextensions/api/bookmarks/index.html
@@ -1,7 +1,8 @@
 ---
 title: Lesezeichen
-slug: Mozilla/Add-ons/WebExtensions/API/Lesezeich.
+slug: Mozilla/Add-ons/WebExtensions/API/bookmarks
 translation_of: Mozilla/Add-ons/WebExtensions/API/bookmarks
+original_slug: Mozilla/Add-ons/WebExtensions/API/Lesezeich.
 ---
 
{{AddonSidebar}}

 
diff --git a/files/de/mozilla/add-ons/webextensions/examples/index.html b/files/de/mozilla/add-ons/webextensions/examples/index.html
index 627dbe559d..3994182f13 100644
--- a/files/de/mozilla/add-ons/webextensions/examples/index.html
+++ b/files/de/mozilla/add-ons/webextensions/examples/index.html
@@ -1,9 +1,10 @@
 ---
 title: Beispiele für Erweiterungen
-slug: Mozilla/Add-ons/WebExtensions/Beispiele
+slug: Mozilla/Add-ons/WebExtensions/Examples
 tags:
   - WebExtensions
 translation_of: Mozilla/Add-ons/WebExtensions/Examples
+original_slug: Mozilla/Add-ons/WebExtensions/Beispiele
 ---
 
{{AddonSidebar}}

 
diff --git a/files/de/mozilla/add-ons/webextensions/working_with_the_tabs_api/index.html b/files/de/mozilla/add-ons/webextensions/working_with_the_tabs_api/index.html
index 39498fa606..8064341ca0 100644
--- a/files/de/mozilla/add-ons/webextensions/working_with_the_tabs_api/index.html
+++ b/files/de/mozilla/add-ons/webextensions/working_with_the_tabs_api/index.html
@@ -1,9 +1,10 @@
 ---
 title: Arbeiten mit Taps API
-slug: Mozilla/Add-ons/WebExtensions/Arbeiten_mit_Taps_API
+slug: Mozilla/Add-ons/WebExtensions/Working_with_the_Tabs_API
 tags:
   - tabs
 translation_of: Mozilla/Add-ons/WebExtensions/Working_with_the_Tabs_API
+original_slug: Mozilla/Add-ons/WebExtensions/Arbeiten_mit_Taps_API
 ---
 
{{AddonSidebar}}

 
diff --git a/files/de/mozilla/add-ons/webextensions/your_first_webextension/index.html b/files/de/mozilla/add-ons/webextensions/your_first_webextension/index.html
index b48b805b98..c46aaeffad 100644
--- a/files/de/mozilla/add-ons/webextensions/your_first_webextension/index.html
+++ b/files/de/mozilla/add-ons/webextensions/your_first_webextension/index.html
@@ -1,11 +1,12 @@
 ---
 title: Deine erste Erweiterung
-slug: Mozilla/Add-ons/WebExtensions/Deine_erste_WebErweiterung
+slug: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension
 tags:
   - Anleitung
   - Erweiterung
   - Weberweiterung
 translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension
+original_slug: Mozilla/Add-ons/WebExtensions/Deine_erste_WebErweiterung
 ---
 
{{AddonSidebar}}

 
diff --git a/files/de/mozilla/add-ons/webextensions/your_second_webextension/index.html b/files/de/mozilla/add-ons/webextensions/your_second_webextension/index.html
index cc002d0b24..6cfeba72ac 100644
--- a/files/de/mozilla/add-ons/webextensions/your_second_webextension/index.html
+++ b/files/de/mozilla/add-ons/webextensions/your_second_webextension/index.html
@@ -1,7 +1,8 @@
 ---
 title: Deine zweite Erweiterung
-slug: Mozilla/Add-ons/WebExtensions/Deine_zweite_Erweiterung
+slug: Mozilla/Add-ons/WebExtensions/Your_second_WebExtension
 translation_of: Mozilla/Add-ons/WebExtensions/Your_second_WebExtension
+original_slug: Mozilla/Add-ons/WebExtensions/Deine_zweite_Erweiterung
 ---
 
{{AddonSidebar}}

 
diff --git a/files/de/mozilla/developer_guide/so_you_just_built_firefox/index.html b/files/de/mozilla/developer_guide/so_you_just_built_firefox/index.html
index 1734710732..bc9aca7bd7 100644
--- a/files/de/mozilla/developer_guide/so_you_just_built_firefox/index.html
+++ b/files/de/mozilla/developer_guide/so_you_just_built_firefox/index.html
@@ -1,7 +1,8 @@
 ---
-title: 'So, Du hast Firefox erfolgreich erstellt'
-slug: Mozilla/Developer_guide/firefox_erfolgreich_erstellt
+title: So, Du hast Firefox erfolgreich erstellt
+slug: Mozilla/Developer_guide/So_you_just_built_Firefox
 translation_of: Mozilla/Developer_guide/So_you_just_built_Firefox
+original_slug: Mozilla/Developer_guide/firefox_erfolgreich_erstellt
 ---
 
Ein Link zu dieser Seite wird nach dem erfolgreichen Erstellen von Firefox angezeigt. Diese Seite sollte nützliche nächste Schritte enthalten, wie Links wie man Test laufen lassen kann, Build packen kann, etc. Der Inhalt hier sollte kurz gehalten werden, genauere Informationen sollten in den verlinkten Seiten hinzugefügt werden. Die Zielgruppe sind Besucher, die gerade Firefox zum ersten mal gebaut haben.

 
diff --git a/files/de/mozilla/developer_guide/source_code/index.html b/files/de/mozilla/developer_guide/source_code/index.html
index b5cc6c79bb..246dc6c1ef 100644
--- a/files/de/mozilla/developer_guide/source_code/index.html
+++ b/files/de/mozilla/developer_guide/source_code/index.html
@@ -1,7 +1,8 @@
 ---
 title: Mit Mozilla Quellcode arbeiten
-slug: Mozilla/Developer_guide/Quelltexte
+slug: Mozilla/Developer_guide/Source_Code
 translation_of: Mozilla/Developer_guide/Source_Code
+original_slug: Mozilla/Developer_guide/Quelltexte
 ---
 
Die unten aufgeführten Artikel helfen Ihnen dabei mit dem Mozilla Quelltext umgehen zu können, zu lernen wie man durch den Code navigiert und wie Änderungen in Projekte einfließen können.

 
diff --git a/files/de/mozilla/firefox/releases/1.5/changing_the_priority_of_http_requests/index.html b/files/de/mozilla/firefox/releases/1.5/changing_the_priority_of_http_requests/index.html
index 3bb91c8f5a..04c686899e 100644
--- a/files/de/mozilla/firefox/releases/1.5/changing_the_priority_of_http_requests/index.html
+++ b/files/de/mozilla/firefox/releases/1.5/changing_the_priority_of_http_requests/index.html
@@ -1,9 +1,10 @@
 ---
 title: Die Priorität von HTTP-Anfragen ändern
-slug: Firefox_1.5_für_Entwickler/Changing_the_priority_of_HTTP_requests
+slug: Mozilla/Firefox/Releases/1.5/Changing_the_priority_of_HTTP_requests
 tags:
   - HTTP
 translation_of: Mozilla/Firefox/Releases/1.5/Changing_the_priority_of_HTTP_requests
+original_slug: Firefox_1.5_für_Entwickler/Changing_the_priority_of_HTTP_requests
 ---
 
{{FirefoxSidebar}}

 
diff --git a/files/de/mozilla/firefox/releases/1.5/index.html b/files/de/mozilla/firefox/releases/1.5/index.html
index 087bc441aa..c549c60935 100644
--- a/files/de/mozilla/firefox/releases/1.5/index.html
+++ b/files/de/mozilla/firefox/releases/1.5/index.html
@@ -1,6 +1,6 @@
 ---
 title: Firefox_1.5_für_Entwickler
-slug: Firefox_1.5_für_Entwickler
+slug: Mozilla/Firefox/Releases/1.5
 tags:
   - CSS
   - DOM
@@ -17,6 +17,7 @@ tags:
   - XSLT
   - XUL
 translation_of: Mozilla/Firefox/Releases/1.5
+original_slug: Firefox_1.5_für_Entwickler
 ---
 
{{FirefoxSidebar}}
Basierend auf der Gecko 1.8 Engine, verbessert Firefox 1.5 die Unterstützung von Webstandards und stellt neue Fähigkeiten zur Verfügung, um die nächste Generationen von Webapplikationen zu ermöglichen. Firefox 1.5 verbessert die Unterstützung von CSS2 und CSS3, führt neue APIs für skript- und programmierbare 2D Grafiken durch SVG 1.1 und durch <canvas> ein, lernt XForms und XML Events kennen und wird außerdem viele DHTML, JavaScript und DOM Erweiterungen mit sich bringen.

 
diff --git a/files/de/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.html b/files/de/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.html
index cac83f31ce..b06920e46e 100644
--- a/files/de/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.html
+++ b/files/de/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.html
@@ -1,11 +1,12 @@
 ---
 title: Benutzen des Zwischenspeichers in Firefox 1.5 (caching)
-slug: Benutzen_des_Zwischenspeichers_in_Firefox_1.5_(caching)
+slug: Mozilla/Firefox/Releases/1.5/Using_Firefox_1.5_caching
 tags:
   - Caching
   - Firefox 1.5
   - JavaScript
 translation_of: Mozilla/Firefox/Releases/1.5/Using_Firefox_1.5_caching
+original_slug: Benutzen_des_Zwischenspeichers_in_Firefox_1.5_(caching)
 ---
 
{{FirefoxSidebar}}
Einführung

 
diff --git a/files/de/mozilla/firefox/releases/3.5/index.html b/files/de/mozilla/firefox/releases/3.5/index.html
index 33e6a0c728..62f396aed9 100644
--- a/files/de/mozilla/firefox/releases/3.5/index.html
+++ b/files/de/mozilla/firefox/releases/3.5/index.html
@@ -1,10 +1,11 @@
 ---
 title: Firefox_3.5_für_Entwickler
-slug: Firefox_3.5_für_Entwickler
+slug: Mozilla/Firefox/Releases/3.5
 tags:
   - Firefox 3.5
   - Gecko 1.9.1
 translation_of: Mozilla/Firefox/Releases/3.5
+original_slug: Firefox_3.5_für_Entwickler
 ---
 
{{FirefoxSidebar}}
In Firefox 3.5 wurde eine nicht geringe Zahl an neuen Bestandteilen eingeführt, darunter zusätzliche und verbesserte Unterstützung für eine Vielzahl von Webstandards. Dieser Artikel stellt eine umfangreiche Liste mit Links zu anderen Artikeln über die Hauptverbesserungen zur Verfügung.

 
diff --git a/files/de/mozilla/firefox/releases/3/index.html b/files/de/mozilla/firefox/releases/3/index.html
index 3db4c6f4e3..fd28100abc 100644
--- a/files/de/mozilla/firefox/releases/3/index.html
+++ b/files/de/mozilla/firefox/releases/3/index.html
@@ -1,9 +1,10 @@
 ---
 title: Firefox 3 für Entwickler
-slug: Firefox_3_für_Entwickler
+slug: Mozilla/Firefox/Releases/3
 tags:
   - Firefox 3
 translation_of: Mozilla/Firefox/Releases/3
+original_slug: Firefox_3_für_Entwickler
 ---
 
{{FirefoxSidebar}}
Wenn Sie als Entwickler versuchen mit den neuen Funktionen in Firefox 3 umzugehen, ist dies der perfekte Ort, um zu beginnen. Dieser Seite liefert eine Liste der neuen Artikel, die die in Firefox 3 neu hinzugekommenen Funktionen erläutern. Es wird sicher nicht jede kleine Änderung erfasst werden können, allerdings hilft werden die hauptsächlichen Verbesserungen in Firefox 3 vorgestellt.

 
diff --git a/files/de/mozilla/firefox/releases/3/updating_extensions/index.html b/files/de/mozilla/firefox/releases/3/updating_extensions/index.html
index 409fc00546..8d95c681f7 100644
--- a/files/de/mozilla/firefox/releases/3/updating_extensions/index.html
+++ b/files/de/mozilla/firefox/releases/3/updating_extensions/index.html
@@ -1,9 +1,10 @@
 ---
 title: Erweiterungen für Firefox 3 aktualisieren
-slug: Erweiterungen_für_Firefox_3_aktualisieren
+slug: Mozilla/Firefox/Releases/3/Updating_extensions
 tags:
   - Firefox 3
 translation_of: Mozilla/Firefox/Releases/3/Updating_extensions
+original_slug: Erweiterungen_für_Firefox_3_aktualisieren
 ---