CINXE.COM

<!doctype html><html lang="en-US" prefix="og: https://ogp.me/ns#"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="icon" href="https://developer.mozilla.org/favicon-48x48.bc390275e955dacb2e65.png"/><link rel="apple-touch-icon" href="https://developer.mozilla.org/apple-touch-icon.528534bba673c38049c2.png"/><meta name="theme-color" content="#ffffff"/><link rel="manifest" href="https://developer.mozilla.org/manifest.f42880861b394dd4dc9b.json"/><link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="MDN Web Docs"/><title>JavaScript-Objektgrundlagen - Lernen Sie Webentwicklung | MDN</title><link rel="alternate" title="JavaScript object basics" href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Object_basics" hrefLang="en"/><link rel="alternate" title="Conceptos básicos de los objetos JavaScript" href="https://developer.mozilla.org/es/docs/Learn_web_development/Core/Scripting/Object_basics" hrefLang="es"/><link rel="alternate" title="Les bases de JavaScript, orienté objet" href="https://developer.mozilla.org/fr/docs/Learn_web_development/Core/Scripting/Object_basics" hrefLang="fr"/><link rel="alternate" title="JavaScript オブジェクトの基本" href="https://developer.mozilla.org/ja/docs/Learn_web_development/Core/Scripting/Object_basics" hrefLang="ja"/><link rel="alternate" title="JavaScript 객체 기본" href="https://developer.mozilla.org/ko/docs/Learn_web_development/Core/Scripting/Object_basics" hrefLang="ko"/><link rel="alternate" title="O básico sobre objetos JavaScript" href="https://developer.mozilla.org/pt-BR/docs/Learn_web_development/Core/Scripting/Object_basics" hrefLang="pt"/><link rel="alternate" title="Основы объектов в JavaScript" href="https://developer.mozilla.org/ru/docs/Learn_web_development/Core/Scripting/Object_basics" hrefLang="ru"/><link rel="alternate" title="JavaScript 对象基础" href="https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Scripting/Object_basics" hrefLang="zh"/><link rel="alternate" title="JavaScript 物件基礎概念" href="https://developer.mozilla.org/zh-TW/docs/Learn_web_development/Core/Scripting/Object_basics" hrefLang="zh-Hant"/><link rel="alternate" title="JavaScript-Objektgrundlagen" href="https://developer.mozilla.org/de/docs/Learn_web_development/Core/Scripting/Object_basics" hrefLang="de"/><link rel="preload" as="font" type="font/woff2" href="/static/media/Inter.var.c2fe3cb2b7c746f7966a.woff2" crossorigin=""/><link rel="alternate" type="application/rss+xml" title="MDN Blog RSS Feed" href="https://developer.mozilla.org/en-US/blog/rss.xml" hrefLang="en"/><meta name="description" content="In diesem Artikel betrachten wir die grundlegende JavaScript-Objektsyntax und wiederholen einige JavaScript-Funktionen, die wir bereits früher im Kurs gesehen haben. Dadurch wird verdeutlicht, dass viele der Funktionen, mit denen Sie bereits umgegangen sind, Objekte sind."/><meta property="og:url" content="https://developer.mozilla.org/de/docs/Learn_web_development/Core/Scripting/Object_basics"/><meta property="og:title" content="JavaScript-Objektgrundlagen - Lernen Sie Webentwicklung | MDN"/><meta property="og:type" content="website"/><meta property="og:locale" content="de"/><meta property="og:description" content="In diesem Artikel betrachten wir die grundlegende JavaScript-Objektsyntax und wiederholen einige JavaScript-Funktionen, die wir bereits früher im Kurs gesehen haben. Dadurch wird verdeutlicht, dass viele der Funktionen, mit denen Sie bereits umgegangen sind, Objekte sind."/><meta property="og:image" content="https://developer.mozilla.org/mdn-social-share.d893525a4fb5fb1f67a2.png"/><meta property="og:image:type" content="image/png"/><meta property="og:image:height" content="1080"/><meta property="og:image:width" content="1920"/><meta property="og:image:alt" content="The MDN Web Docs logo, featuring a blue accent color, displayed on a solid black background."/><meta property="og:site_name" content="MDN Web Docs"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="MozDevNet"/><link rel="canonical" href="https://developer.mozilla.org/de/docs/Learn_web_development/Core/Scripting/Object_basics"/><style media="print">.article-actions-container,.document-toc-container,.language-menu,.main-menu-toggle,.on-github,.page-footer,.place,.sidebar,.top-banner,.top-navigation-main,ul.prev-next{display:none!important}.main-page-content,.main-page-content pre{padding:2px}.main-page-content pre{border-left-width:2px}</style><script src="/static/js/gtag.js" defer=""></script><script defer="" src="/static/js/main.f565372a.js"></script><link href="/static/css/main.3d9e7a02.css" rel="stylesheet"/></head><body><script>if(document.body.addEventListener("load",(t=>{t.target.classList.contains("interactive")&&t.target.setAttribute("data-readystate","complete")}),{capture:!0}),window&&document.documentElement){const t={light:"#ffffff",dark:"#1b1b1b"};try{const e=window.localStorage.getItem("theme");e&&(document.documentElement.className=e,document.documentElement.style.backgroundColor=t[e]);const o=window.localStorage.getItem("nop");o&&(document.documentElement.dataset.nop=o)}catch(t){console.warn("Unable to read theme from localStorage",t)}}</script><div id="root"><ul id="nav-access" class="a11y-nav"><li><a id="skip-main" href="#content">Skip to main content</a></li><li><a id="skip-search" href="#top-nav-search-input">Skip to search</a></li><li><a id="skip-select-language" href="#languages-switcher-button">Skip to select language</a></li></ul><div class="page-wrapper category-javascript document-page"><div class="top-banner loading"><section class="place top container"></section></div><div class="sticky-header-container"><header class="top-navigation "><div class="container "><div class="top-navigation-wrap"><a href="/de/" class="logo" aria-label="MDN homepage"><svg id="mdn-docs-logo" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 694.9 104.4" style="enable-background:new 0 0 694.9 104.4" xml:space="preserve" role="img"><title>MDN Web Docs</title><path d="M40.3 0 11.7 92.1H0L28.5 0h11.8zm10.4 0v92.1H40.3V0h10.4zM91 0 62.5 92.1H50.8L79.3 0H91zm10.4 0v92.1H91V0h10.4z" class="logo-m"></path><path d="M627.9 95.6h67v8.8h-67v-8.8z" class="logo-_"></path><path d="M367 42h-4l-10.7 30.8h-5.5l-10.8-26h-.4l-10.5 26h-5.2L308.7 42h-3.8v-5.6H323V42h-6.5l6.8 20.4h.4l10.3-26h4.7l11.2 26h.5l5.7-20.3h-6.2v-5.6H367V42zm34.9 20c-.4 3.2-2 5.9-4.7 8.2-2.8 2.3-6.5 3.4-11.3 3.4-5.4 0-9.7-1.6-13.1-4.7-3.3-3.2-5-7.7-5-13.7 0-5.7 1.6-10.3 4.7-14s7.4-5.5 12.9-5.5c5.1 0 9.1 1.6 11.9 4.7s4.3 6.9 4.3 11.3c0 1.5-.2 3-.5 4.7h-25.6c.3 7.7 4 11.6 10.9 11.6 2.9 0 5.1-.7 6.5-2 1.5-1.4 2.5-3 3-4.9l6 .9zM394 51.3c.2-2.4-.4-4.7-1.8-6.9s-3.8-3.3-7-3.3c-3.1 0-5.3 1-6.9 3-1.5 2-2.5 4.4-2.8 7.2H394zm51 2.4c0 5-1.3 9.5-4 13.7s-6.9 6.2-12.7 6.2c-6 0-10.3-2.2-12.7-6.7-.1.4-.2 1.4-.4 2.9s-.3 2.5-.4 2.9h-7.3c.3-1.7.6-3.5.8-5.3.3-1.8.4-3.7.4-5.5V22.3h-6v-5.6H416v27c1.1-2.2 2.7-4.1 4.7-5.7 2-1.6 4.8-2.4 8.4-2.4 4.6 0 8.4 1.6 11.4 4.7 3 3.2 4.5 7.6 4.5 13.4zm-7.7.6c0-4.2-1-7.4-3-9.5-2-2.2-4.4-3.3-7.4-3.3-3.4 0-6 1.2-8 3.7-1.9 2.4-2.9 5-3 7.7V57c0 3 1 5.6 3 7.7s4.5 3.1 7.6 3.1c3.6 0 6.3-1.3 8.1-3.9 1.8-2.7 2.7-5.9 2.7-9.6zm69.2 18.5h-13.2v-7.2c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2 5.7 0 9.8 2.2 12.3 6.5V22.3h-8.6v-5.6h15.8v50.6h6v5.5zM493.2 56v-4.4c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm53.1-1.4c0 5.6-1.8 10.2-5.3 13.7s-8.2 5.3-13.9 5.3-10.1-1.7-13.4-5.1c-3.3-3.4-5-7.9-5-13.5 0-5.3 1.6-9.9 4.7-13.7 3.2-3.8 7.9-5.7 14.2-5.7s11 1.9 14.1 5.7c3 3.7 4.6 8.1 4.6 13.3zm-7.7-.2c0-4-1-7.2-3-9.5s-4.8-3.5-8.2-3.5c-3.6 0-6.4 1.2-8.3 3.7s-2.9 5.6-2.9 9.5c0 3.7.9 6.8 2.8 9.4 1.9 2.6 4.6 3.9 8.3 3.9 3.6 0 6.4-1.3 8.4-3.8 1.9-2.6 2.9-5.8 2.9-9.7zm45 5.8c-.4 3.2-1.9 6.3-4.4 9.1-2.5 2.9-6.4 4.3-11.8 4.3-5.2 0-9.4-1.6-12.6-4.8-3.2-3.2-4.8-7.7-4.8-13.7 0-5.5 1.6-10.1 4.7-13.9 3.2-3.8 7.6-5.7 13.2-5.7 2.3 0 4.6.3 6.7.8 2.2.5 4.2 1.5 6.2 2.9l1.5 9.5-5.9.7-1.3-6.1c-2.1-1.2-4.5-1.8-7.2-1.8-3.5 0-6.1 1.2-7.7 3.7-1.7 2.5-2.5 5.7-2.5 9.6 0 4.1.9 7.3 2.7 9.5 1.8 2.3 4.4 3.4 7.8 3.4 5.2 0 8.2-2.9 9.2-8.8l6.2 1.3zm34.7 1.9c0 3.6-1.5 6.5-4.6 8.5s-7 3-11.7 3c-5.7 0-10.6-1.2-14.6-3.6l1.2-8.8 5.7.6-.2 4.7c1.1.5 2.3.9 3.6 1.1s2.6.3 3.9.3c2.4 0 4.5-.4 6.5-1.3 1.9-.9 2.9-2.2 2.9-4.1 0-1.8-.8-3.1-2.3-3.8s-3.5-1.3-5.8-1.7-4.6-.9-6.9-1.4c-2.3-.6-4.2-1.6-5.7-2.9-1.6-1.4-2.3-3.5-2.3-6.3 0-4.1 1.5-6.9 4.6-8.5s6.4-2.4 9.9-2.4c2.6 0 5 .3 7.2.9 2.2.6 4.3 1.4 6.1 2.4l.8 8.8-5.8.7-.8-5.7c-2.3-1-4.7-1.6-7.2-1.6-2.1 0-3.7.4-5.1 1.1-1.3.8-2 2-2 3.8 0 1.7.8 2.9 2.3 3.6 1.5.7 3.4 1.2 5.7 1.6 2.2.4 4.5.8 6.7 1.4 2.2.6 4.1 1.6 5.7 3 1.4 1.6 2.2 3.7 2.2 6.6zM197.6 73.2h-17.1v-5.5h3.8V51.9c0-3.7-.7-6.3-2.1-7.9-1.4-1.6-3.3-2.3-5.7-2.3-3.2 0-5.6 1.1-7.2 3.4s-2.4 4.6-2.5 6.9v15.6h6v5.5h-17.1v-5.5h3.8V51.9c0-3.8-.7-6.4-2.1-7.9-1.4-1.5-3.3-2.3-5.6-2.3-3.2 0-5.5 1.1-7.2 3.3-1.6 2.2-2.4 4.5-2.5 6.9v15.8h6.9v5.5h-20.2v-5.5h6V42.4h-6.1v-5.6h13.4v6.4c1.2-2.1 2.7-3.8 4.7-5.2 2-1.3 4.4-2 7.3-2s5.3.7 7.5 2.1c2.2 1.4 3.7 3.5 4.5 6.4 1.1-2.5 2.7-4.5 4.9-6.1s4.8-2.4 7.9-2.4c3.5 0 6.5 1.1 8.9 3.3s3.7 5.6 3.7 10.2v18.2h6.1v5.5zm42.5 0h-13.2V66c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2s9.8 2.2 12.3 6.5V22.7h-8.6v-5.6h15.8v50.6h6v5.5zm-13.3-16.8V52c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm61.5 16.8H269v-5.5h6V51.9c0-3.7-.7-6.3-2.2-7.9-1.4-1.6-3.4-2.3-5.7-2.3-3.1 0-5.6 1-7.4 3s-2.8 4.4-2.9 7v15.9h6v5.5h-19.3v-5.5h6V42.4h-6.2v-5.6h13.6V43c2.6-4.6 6.8-6.9 12.7-6.9 3.6 0 6.7 1.1 9.2 3.3s3.7 5.6 3.7 10.2v18.2h6v5.4h-.2z" class="logo-text"></path></svg></a><button title="Open main menu" type="button" class="button action has-icon main-menu-toggle" aria-haspopup="menu" aria-label="Open main menu" aria-expanded="false"><span class="button-wrap"><span class="icon icon-menu "></span><span class="visually-hidden">Open main menu</span></span></button></div><div class="top-navigation-main"><nav class="main-nav" aria-label="Main menu"><ul class="main-menu nojs"><li class="top-level-entry-container "><button type="button" id="references-button" class="top-level-entry menu-toggle" aria-controls="references-menu" aria-expanded="false">References</button><a href="/de/docs/Web" class="top-level-entry">References</a><ul id="references-menu" class="submenu references hidden inline-submenu-lg" aria-labelledby="references-button"><li class="apis-link-container mobile-only "><a href="/de/docs/Web" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview / Web Technology</div><p class="submenu-item-description">Web technology reference for developers</p></div></a></li><li class="html-link-container "><a href="/de/docs/Web/HTML" class="submenu-item "><div class="submenu-icon html"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTML</div><p class="submenu-item-description">Structure of content on the web</p></div></a></li><li class="css-link-container "><a href="/de/docs/Web/CSS" class="submenu-item "><div class="submenu-icon css"></div><div class="submenu-content-container"><div class="submenu-item-heading">CSS</div><p class="submenu-item-description">Code used to describe document style</p></div></a></li><li class="javascript-link-container "><a href="/de/docs/Web/JavaScript" class="submenu-item "><div class="submenu-icon javascript"></div><div class="submenu-content-container"><div class="submenu-item-heading">JavaScript</div><p class="submenu-item-description">General-purpose scripting language</p></div></a></li><li class="http-link-container "><a href="/de/docs/Web/HTTP" class="submenu-item "><div class="submenu-icon http"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTTP</div><p class="submenu-item-description">Protocol for transmitting web resources</p></div></a></li><li class="apis-link-container "><a href="/de/docs/Web/API" class="submenu-item "><div class="submenu-icon apis"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web APIs</div><p class="submenu-item-description">Interfaces for building web applications</p></div></a></li><li class="apis-link-container "><a href="/de/docs/Mozilla/Add-ons/WebExtensions" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web Extensions</div><p class="submenu-item-description">Developing extensions for web browsers</p></div></a></li><li class=" "><a href="/de/docs/Web/Accessibility" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Accessibility</div><p class="submenu-item-description">Build web projects usable for all</p></div></a></li><li class="apis-link-container desktop-only "><a href="/de/docs/Web" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web Technology</div><p class="submenu-item-description">Web technology reference for developers</p></div></a></li></ul></li><li class="top-level-entry-container active"><button type="button" id="learn-button" class="top-level-entry menu-toggle" aria-controls="learn-menu" aria-expanded="false">Learn</button><a href="/de/docs/Learn_web_development" class="top-level-entry">Learn</a><ul id="learn-menu" class="submenu learn hidden inline-submenu-lg" aria-labelledby="learn-button"><li class="apis-link-container mobile-only "><a href="/de/docs/Learn_web_development" class="submenu-item "><div class="submenu-icon learn"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview / MDN Learning Area</div><p class="submenu-item-description">Learn web development</p></div></a></li><li class="apis-link-container desktop-only "><a href="/de/docs/Learn_web_development" class="submenu-item "><div class="submenu-icon learn"></div><div class="submenu-content-container"><div class="submenu-item-heading">MDN Learning Area</div><p class="submenu-item-description">Learn web development</p></div></a></li><li class="html-link-container "><a href="/de/docs/Learn_web_development/Core/Structuring_content" class="submenu-item "><div class="submenu-icon html"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTML</div><p class="submenu-item-description">Learn to structure web content with HTML</p></div></a></li><li class="css-link-container "><a href="/de/docs/Learn_web_development/Core/Styling_basics" class="submenu-item "><div class="submenu-icon css"></div><div class="submenu-content-container"><div class="submenu-item-heading">CSS</div><p class="submenu-item-description">Learn to style content using CSS</p></div></a></li><li class="javascript-link-container "><a href="/de/docs/Learn_web_development/Core/Scripting" class="submenu-item "><div class="submenu-icon javascript"></div><div class="submenu-content-container"><div class="submenu-item-heading">JavaScript</div><p class="submenu-item-description">Learn to run scripts in the browser</p></div></a></li><li class=" "><a href="/de/docs/Learn_web_development/Core/Accessibility" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Accessibility</div><p class="submenu-item-description">Learn to make the web accessible to all</p></div></a></li></ul></li><li class="top-level-entry-container "><button type="button" id="mdn-plus-button" class="top-level-entry menu-toggle" aria-controls="mdn-plus-menu" aria-expanded="false">Plus</button><a href="/de/plus" class="top-level-entry">Plus</a><ul id="mdn-plus-menu" class="submenu mdn-plus hidden inline-submenu-lg" aria-labelledby="mdn-plus-button"><li class=" "><a href="/de/plus" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview</div><p class="submenu-item-description">A customized MDN experience</p></div></a></li><li class=" "><a href="/de/plus/ai-help" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">AI Help</div><p class="submenu-item-description">Get real-time assistance and support</p></div></a></li><li class=" "><a href="/de/plus/updates" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Updates</div><p class="submenu-item-description">All browser compatibility updates at a glance</p></div></a></li><li class=" "><a href="/en-US/plus/docs/features/overview" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Documentation</div><p class="submenu-item-description">Learn how to use MDN Plus</p></div></a></li><li class=" "><a href="/en-US/plus/docs/faq" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">FAQ</div><p class="submenu-item-description">Frequently asked questions about MDN Plus</p></div></a></li></ul></li><li class="top-level-entry-container "><a class="top-level-entry menu-link" href="/en-US/curriculum/">Curriculum <sup class="new">New</sup></a></li><li class="top-level-entry-container "><a class="top-level-entry menu-link" href="/en-US/blog/">Blog</a></li><li class="top-level-entry-container "><button type="button" id="tools-button" class="top-level-entry menu-toggle" aria-controls="tools-menu" aria-expanded="false">Tools</button><ul id="tools-menu" class="submenu tools hidden inline-submenu-lg" aria-labelledby="tools-button"><li class=" "><a href="/de/play" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Playground</div><p class="submenu-item-description">Write, test and share your code</p></div></a></li><li class=" "><a href="/en-US/observatory" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTTP Observatory</div><p class="submenu-item-description">Scan a website for free</p></div></a></li><li class=" "><a href="/en-US/plus/ai-help" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">AI Help</div><p class="submenu-item-description">Get real-time assistance and support</p></div></a></li></ul></li></ul></nav><div class="header-search"><form action="/de/search" class="search-form search-widget" id="top-nav-search-form" role="search"><label id="top-nav-search-label" for="top-nav-search-input" class="visually-hidden">Search MDN</label><input aria-activedescendant="" aria-autocomplete="list" aria-controls="top-nav-search-menu" aria-expanded="false" aria-labelledby="top-nav-search-label" autoComplete="off" id="top-nav-search-input" role="combobox" type="search" class="search-input-field" name="q" placeholder=" " required="" value=""/><button type="button" class="button action has-icon clear-search-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear search input</span></span></button><button type="submit" class="button action has-icon search-button"><span class="button-wrap"><span class="icon icon-search "></span><span class="visually-hidden">Search</span></span></button><div id="top-nav-search-menu" role="listbox" aria-labelledby="top-nav-search-label"></div></form></div><div class="theme-switcher-menu"><button type="button" class="button action has-icon theme-switcher-menu small" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-theme-os-default "></span>Theme</span></button></div><ul class="auth-container"><li><a href="/users/fxa/login/authenticate/?next=%2Fde%2Fdocs%2FLearn_web_development%2FCore%2FScripting%2FObject_basics" class="login-link" rel="nofollow">Log in</a></li><li><a href="/users/fxa/login/authenticate/?next=%2Fde%2Fdocs%2FLearn_web_development%2FCore%2FScripting%2FObject_basics" target="_self" rel="nofollow" class="button primary mdn-plus-subscribe-link"><span class="button-wrap">Sign up for free</span></a></li></ul></div></div></header><div class="article-actions-container"><div class="container"><button type="button" class="button action has-icon sidebar-button" aria-label="Expand sidebar" aria-expanded="false" aria-controls="sidebar-quicklinks"><span class="button-wrap"><span class="icon icon-sidebar "></span></span></button><nav class="breadcrumbs-container" aria-label="Breadcrumb"><ol typeof="BreadcrumbList" vocab="https://schema.org/" aria-label="breadcrumbs"><li property="itemListElement" typeof="ListItem"><a href="/de/docs/Learn_web_development" class="breadcrumb" property="item" typeof="WebPage"><span property="name">Lernen Sie Webentwicklung</span></a><meta property="position" content="1"/></li><li property="itemListElement" typeof="ListItem"><a href="/de/docs/Learn_web_development/Core" class="breadcrumb" property="item" typeof="WebPage"><span property="name">Kern-Lernmodule</span></a><meta property="position" content="2"/></li><li property="itemListElement" typeof="ListItem"><a href="/de/docs/Learn_web_development/Core/Scripting" class="breadcrumb" property="item" typeof="WebPage"><span property="name">Dynamisches Skripting mit JavaScript</span></a><meta property="position" content="3"/></li><li property="itemListElement" typeof="ListItem"><a href="/de/docs/Learn_web_development/Core/Scripting/Object_basics" class="breadcrumb-current-page" property="item" typeof="WebPage"><span property="name">JavaScript-Objektgrundlagen</span></a><meta property="position" content="4"/></li></ol></nav><div class="article-actions"><button type="button" class="button action has-icon article-actions-toggle" aria-label="Article actions"><span class="button-wrap"><span class="icon icon-ellipses "></span><span class="article-actions-dialog-heading">Article Actions</span></span></button><ul class="article-actions-entries"><li class="article-actions-entry"><div class="languages-switcher-menu open-on-focus-within"><button id="languages-switcher-button" type="button" class="button action small has-icon languages-switcher-menu" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-language "></span>Deutsch<span title="Diese Übersetzung ist Teil eines Experiments."><span class="icon icon-experimental "></span></span></span></button><div class="hidden"><ul class="submenu language-menu " aria-labelledby="language-menu-button"><li class=" "><form class="submenu-item locale-redirect-setting"><div class="group"><label class="switch"><input type="checkbox" name="locale-redirect"/><span class="slider"></span><span class="label">Remember language</span></label><a href="https://github.com/orgs/mdn/discussions/739" rel="external noopener noreferrer" target="_blank" title="Enable this setting to automatically switch to this language when it's available. (Click to learn more.)"><span class="icon icon-question-mark "></span></a></div></form></li><li class=" "><a data-locale="en-US" href="/en-US/docs/Learn_web_development/Core/Scripting/Object_basics" class="button submenu-item"><span>English (US)</span></a></li><li class=" "><a data-locale="es" href="/es/docs/Learn_web_development/Core/Scripting/Object_basics" class="button submenu-item"><span>Español</span></a></li><li class=" "><a data-locale="fr" href="/fr/docs/Learn_web_development/Core/Scripting/Object_basics" class="button submenu-item"><span>Français</span></a></li><li class=" "><a data-locale="ja" href="/ja/docs/Learn_web_development/Core/Scripting/Object_basics" class="button submenu-item"><span>日本語</span></a></li><li class=" "><a data-locale="ko" href="/ko/docs/Learn_web_development/Core/Scripting/Object_basics" class="button submenu-item"><span>한국어</span></a></li><li class=" "><a data-locale="pt-BR" href="/pt-BR/docs/Learn_web_development/Core/Scripting/Object_basics" class="button submenu-item"><span>Português (do Brasil)</span></a></li><li class=" "><a data-locale="ru" href="/ru/docs/Learn_web_development/Core/Scripting/Object_basics" class="button submenu-item"><span>Русский</span></a></li><li class=" "><a data-locale="zh-CN" href="/zh-CN/docs/Learn_web_development/Core/Scripting/Object_basics" class="button submenu-item"><span>中文 (简体)</span></a></li><li class=" "><a data-locale="zh-TW" href="/zh-TW/docs/Learn_web_development/Core/Scripting/Object_basics" class="button submenu-item"><span>正體中文 (繁體)</span></a></li></ul></div></div></li></ul></div></div></div></div><div class="container"><div class="notecard experimental localized-content-note"><p><a href="https://github.com/orgs/mdn/discussions/741" class="external"><strong>Experiment</strong>: Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.</a></p></div></div><div class="main-wrapper"><div class="sidebar-container"><aside id="sidebar-quicklinks" class="sidebar"><button type="button" class="button action backdrop" aria-label="Collapse sidebar"><span class="button-wrap"></span></button><nav aria-label="Related Topics" class="sidebar-inner"><header class="sidebar-actions"><section class="sidebar-filter-container"><div class="sidebar-filter "><label id="sidebar-filter-label" class="sidebar-filter-label" for="sidebar-filter-input"><span class="icon icon-filter"></span><span class="visually-hidden">Filter sidebar</span></label><input id="sidebar-filter-input" autoComplete="off" class="sidebar-filter-input-field false" type="text" placeholder="Filter" value=""/><button type="button" class="button action has-icon clear-sidebar-filter-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear filter input</span></span></button></div></section></header><div class="sidebar-inner-nav"><div class="in-nav-toc"><div class="document-toc-container"><section class="document-toc"><header><h2 class="document-toc-heading">In diesem Artikel</h2></header><ul class="document-toc-list"><li class="document-toc-item "><a class="document-toc-link" href="#objektgrundlagen">Objektgrundlagen</a></li><li class="document-toc-item "><a class="document-toc-link" href="#punktnotation">Punktnotation</a></li><li class="document-toc-item "><a class="document-toc-link" href="#klammernotation">Klammernotation</a></li><li class="document-toc-item "><a class="document-toc-link" href="#festlegen_von_objektmitgliedern">Festlegen von Objektmitgliedern</a></li><li class="document-toc-item "><a class="document-toc-link" href="#was_ist_this">Was ist "this"?</a></li><li class="document-toc-item "><a class="document-toc-link" href="#einführung_in_konstruktoren">Einführung in Konstruktoren</a></li><li class="document-toc-item "><a class="document-toc-link" href="#sie_haben_die_ganze_zeit_objekte_verwendet">Sie haben die ganze Zeit Objekte verwendet</a></li><li class="document-toc-item "><a class="document-toc-link" href="#testen_sie_ihre_fähigkeiten!">Testen Sie Ihre Fähigkeiten!</a></li><li class="document-toc-item "><a class="document-toc-link" href="#zusammenfassung">Zusammenfassung</a></li></ul></section></div></div><div class="sidebar-body"><ol><li class="section"><a href="/de/docs/Learn_web_development/Getting_started">Einstiegsmodule</a></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Getting_started/Environment_setup">Umgebung einrichten</a></summary><ol><li><a href="/de/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software">Installation grundlegender Software</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web">Surfen im Web</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors">Code-Editor</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files">Umgang mit Dateien</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Environment_setup/Command_line">Leitfaden für die Befehlszeilen-Einführung</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Getting_started/Your_first_website">Ihre erste Website</a></summary><ol><li><a href="/de/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like">Wie wird Ihre Website aussehen?</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content">HTML: Erstellen der Inhalte</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content">CSS: Gestaltung des Inhalts</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity">JavaScript: Interaktivität hinzufügen</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website">Veröffentlichen Ihrer Website</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Getting_started/Web_standards">Webstandards</a></summary><ol><li><a href="/de/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works">How the web works</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model">Das Modell der Webstandards</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites">Wie Browser Websites laden</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Getting_started/Soft_skills">Soziale Kompetenzen</a></summary><ol><li><a href="/de/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning">Forschung und Lernen</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork">Zusammenarbeit und Teamarbeit</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes">Workflows und Prozesse</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Soft_skills/Job_interviews">Erfolgreich in Vorstellungsgesprächen</a></li></ol></details></li><li class="section"><a href="/de/docs/Learn_web_development/Core">Kernmodule</a></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Core/Structuring_content">Inhalte mit HTML strukturieren</a></summary><ol><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax">Grundlegende HTML-Syntax</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata">Was befindet sich im Kopf? Metadaten einer Webseite</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs">Überschriften und Absätze in HTML</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance">Hervorhebung und Wichtigkeit</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Lists">Listen</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Structuring_documents">Strukturierung von Dokumenten</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features">Erweiterte Textfunktionen</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Creating_links">Erstellen von Links</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter">Herausforderung: Eine E-Mail korrekt auszeichnen</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content">Herausforderung: Strukturierung einer Inhaltsseite</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/HTML_images">HTML-Bilder</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio">HTML video und audio</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Mozilla_splash_page">Herausforderung: Mozilla Splash-Seite</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics">Grundlagen von HTML-Tabellen</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Table_accessibility">Barrierefreiheit von HTML-Tabellen</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Planet_data_table">Herausforderung: Strukturierung einer Planeten-Datentabelle</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/HTML_forms">Formulare und Schaltflächen in HTML</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Debugging_HTML">Debugging von HTML</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Core/Styling_basics">Grundlagen des CSS-Stylings</a></summary><ol><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/What_is_CSS">Was ist CSS?</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Getting_started">Einstieg in CSS</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Styling_a_bio_page">Herausforderung: Gestaltung einer Biografie-Seite</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Basic_selectors">Grundlagen der CSS-Selektoren</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Attribute_selectors">Attribut-Selektoren</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Pseudo_classes_and_elements">Pseudoklassen und Pseudoelemente</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Combinators">Kombinatoren</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Box_model">Das Box-Modell</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts">Umgang mit Konflikten</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Values_and_units">CSS-Werte und -Einheiten</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Sizing">Größenbestimmung von Elementen in CSS</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders">Hintergründe und Rahmen</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Overflow">Überlaufender Inhalt</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Images_media_forms">Bilder, Medien und Formularelemente</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Tables">Tabellen stylen</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS">Debugging CSS</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Fundamental_CSS_comprehension">Herausforderung: Grundlegendes CSS-Verständnis</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Fancy_letterheaded_paper">Herausforderung: Erstellung eines ansprechenden Briefpapiers</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Cool-looking_box">Herausforderung: Eine cool aussehende Box</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Core/Text_styling">CSS-Textgestaltung</a></summary><ol><li><a href="/de/docs/Learn_web_development/Core/Text_styling/Fundamentals">Grundlegendes zur Text- und Schriftgestaltung</a></li><li><a href="/de/docs/Learn_web_development/Core/Text_styling/Styling_lists">Listen gestalten</a></li><li><a href="/de/docs/Learn_web_development/Core/Text_styling/Styling_links">Gestaltung von Links</a></li><li><a href="/de/docs/Learn_web_development/Core/Text_styling/Web_fonts">Webfonts</a></li><li><a href="/de/docs/Learn_web_development/Core/Text_styling/Typesetting_a_homepage">Herausforderung: Setzen einer Startseite für eine Gemeinschaftsschule</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Core/CSS_layout">CSS-Layout</a></summary><ol><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Introduction">Einführung in CSS-Layout</a></li><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Floats">Floats</a></li><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Positioning">Platzierung</a></li><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Flexbox">Flexbox</a></li><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Grids">CSS-Grid-Layout</a></li><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Responsive_Design">Responsives Design</a></li><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Media_queries">Grundlagen von Media Query</a></li><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Fundamental_Layout_Comprehension">Herausforderung: Grundlegendes Verständnis von Layouts</a></li></ol></details></li><li class="toggle"><details open=""><summary><a href="/de/docs/Learn_web_development/Core/Scripting">Dynamisches Scripting mit JavaScript</a></summary><ol><li><a href="/de/docs/Learn_web_development/Core/Scripting/What_is_JavaScript">Was ist JavaScript?</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/A_first_splash">Erster Einblick in JavaScript</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/What_went_wrong">Was ist schiefgelaufen? JavaScript-Fehlerbehebung</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Variables">Speichern der benötigten Informationen — Variablen</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Math">Grundlegende Mathematik in JavaScript – Zahlen und Operatoren</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Strings">Umgang mit Text — Zeichenketten in JavaScript</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Useful_string_methods">Nützliche String-Methoden</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Arrays">Arrays</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Silly_story_generator">Herausforderung: Blödsinnige Geschichtengenerator</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Conditionals">Entscheidungen in Ihrem Code treffen — Konditionalen</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Loops">Code-Schleifen</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Functions">Funktionen — wiederverwendbare Codeblöcke</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Build_your_own_function">Erstellen Sie Ihre eigene Funktion</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Return_values">Funktionsrückgabewerte</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Events">Einführung in Ereignisse</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Event_bubbling">Ereignis-Bubbling</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Image_gallery">Herausforderung: Bildergalerie</a></li><li><em><a href="/de/docs/Learn_web_development/Core/Scripting/Object_basics" aria-current="page">JavaScript-Objektgrundlagen</a></em></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/DOM_scripting">Einführung in DOM-Scripting</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Network_requests">Netzwerkanfragen mit JavaScript</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/JSON">Arbeiten mit JSON</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Debugging_JavaScript">Debugging JavaScript and handling errors</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries">JavaScript-Frameworks und -Bibliotheken</a></summary><ol><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/Introduction">Einführung in client-seitige Frameworks</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/Main_features">Hauptmerkmale von Frameworks</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/React_getting_started">Erste Schritte mit React</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/React_todo_list_beginning">Beginn unserer React To-Do-Liste</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/React_components">Komponenten in unserer React-App erstellen</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_events_state">React Interaktivität: Events und State</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_filtering_conditional_rendering">Reaktivität in React: Bearbeiten, Filtern, bedingtes Rendern</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/React_accessibility">Barrierefreiheit in React</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/React_resources">React-Ressourcen</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Core/Accessibility">Barrierefreiheit</a></summary><ol><li><a href="/de/docs/Learn_web_development/Core/Accessibility/What_is_accessibility">Was ist Barrierefreiheit?</a></li><li><a href="/de/docs/Learn_web_development/Core/Accessibility/Tooling">Barrierefreiheitstools und unterstützende Technologien</a></li><li><a href="/de/docs/Learn_web_development/Core/Accessibility/HTML">HTML: Eine gute Grundlage für Barrierefreiheit</a></li><li><a href="/de/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript">CSS and JavaScript Zugänglichkeitsbest Practices</a></li><li><a href="/de/docs/Learn_web_development/Core/Accessibility/WAI-ARIA_basics">WAI-ARIA Grundlagen</a></li><li><a href="/de/docs/Learn_web_development/Core/Accessibility/Multimedia">Barrierefreie Multimedia-Inhalte</a></li><li><a href="/de/docs/Learn_web_development/Core/Accessibility/Mobile">Mobile Accessibility</a></li><li><a href="/de/docs/Learn_web_development/Core/Accessibility/Accessibility_troubleshooting">Herausforderung: Barrierefreiheits-Fehlerbehebung</a></li></ol></details></li><li><a href="/de/docs/Learn_web_development/Core/Design_for_developers">Design für Entwickler:innen</a></li><li><a href="/de/docs/Learn_web_development/Core/Version_control">Versionskontrolle</a></li><li class="section"><a href="/de/docs/Learn_web_development/Extensions">Erweiterungsmodule</a></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects">Advanced JavaScript objects</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes">Objektprototypen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object-oriented_programming">Objektorientierte Programmierung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript">Klassen in JavaScript</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice">Objektbaupraxis</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Adding_bouncing_balls_features">Herausforderung: Hinzufügen von Funktionen zu unserem hüpfenden Ball-Demo</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Client-side_APIs">Client-seitige Web-APIs</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction">Einführung in Web-APIs</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs">Video- und Audio-APIs</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics">Zeichnen von Grafiken</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage">Client-seitiger Speicher</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs">Third-party APIs</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Async_JS">Asynchrones JavaScript</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Async_JS/Introducing">Einführung in asynchrones JavaScript</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Async_JS/Promises">Anleitung zur Verwendung von Promises</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Async_JS/Implementing_a_promise-based_API">Wie man eine Promise-basierte API implementiert</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Async_JS/Introducing_workers">Einführung in Worker</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Async_JS/Sequencing_animations">Herausforderung: Animationen sequenzieren</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Forms">Webformulare — Arbeiten mit Benutzerdaten</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Forms/Your_first_form">Ihr erstes Formular</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/How_to_structure_a_web_form">Wie man ein Webformular strukturiert</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls">Grundlegende native Formularsteuerungen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/HTML5_input_types">Die HTML5-Eingabetypen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/Other_form_controls">Andere Formularelemente</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/Styling_web_forms">Styling von Webformularen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling">Fortgeschrittenes Formular-Styling</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/UI_pseudo-classes">UI-Pseudoklassen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/Form_validation">Client-seitige Formularvalidierung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data">Senden von Formulardaten</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Client-side_tools">Verständnis für clientseitige Tools</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_tools/Overview">Überblick über Client-seitige Tools</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_tools/Package_management">Grundlagen des Paketmanagements</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain">Einführung in eine vollständige Werkzeugkette</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_tools/Deployment">Bereitstellung unserer App</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Server-side">Serverseitige Programmierung</a></summary><ol><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Server-side/First_steps">Erste Schritte auf der Serverseite</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Introduction">Einführung in die Server-Seite</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview">Überblick über Client-Server</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks">Server-seitige Web-Frameworks</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security">Website-Sicherheit</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django">Django Web-Framework (Python)</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Introduction">Einführung in Django</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/development_environment">Einrichten einer Django-Entwicklungsumgebung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Tutorial_local_library_website">Django Tutorial: Die Website der lokalen Bibliothek</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/skeleton_website">Django-Tutorial Teil 2: Erstellen einer Skelett-Website</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Models">Django Tutorial Teil 3: Verwenden von Modellen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Admin_site">Django Tutorial Teil 4: Die Django Admin-Seite</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Home_page">Django Tutorial Teil 5: Erstellen unserer Homepage</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Generic_views">Django Tutorial Teil 6: Generische Listen- und Detailansichten</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Sessions">Django-Tutorial Teil 7: Sitzungs-Framework</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Authentication">Django-Tutorial Teil 8: Benutzer-Authentifizierung und -Berechtigungen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Forms">Django Tutorial Teil 9: Arbeiten mit Formularen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Testing">Django Tutorial Teil 10: Testen einer Django-Webanwendung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Deployment">Django-Tutorial Teil 11: Bereitstellung von Django für die Produktion</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/web_application_security">Django Webanwendungssicherheit</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/django_assessment_blog">Bewertung: DIY Django Mini-Blog</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs">Express Web-Framework (Node.js)</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Introduction">Einführung in Express/Node</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/development_environment">Einrichten einer Node-Entwicklungsumgebung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Tutorial_local_library_website">Express Tutorial: Die Website der lokalen Bibliothek</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website">Express-Tutorial Teil 2: Erstellen einer Skelett-Website</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose">Express-Tutorial Teil 3: Verwendung einer Datenbank (mit Mongoose)</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes">Express Tutorial Teil 4: Routen und Controller</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Teil 5: Bibliotheksdaten anzeigen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms">Express Tutorial Teil 6: Arbeiten mit Formularen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment">Express Tutorial Teil 7: Bereitstellung im Produktionsumfeld</a></li></ol></details></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Performance">Web-Performance</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Performance/why_web_performance">Das "Warum" der Web-Performance</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/What_is_web_performance">Was ist Web-Performance?</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/Perceived_performance">Wahrgenommene Leistung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/Measuring_performance">Leistungsmessung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/Multimedia">Multimedia: Bilder</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/video">Multimedia: video</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/JavaScript">JavaScript-Leistungsoptimierung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/HTML">HTML-Performance-Optimierung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/CSS">CSS-Leistungsoptimierung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/business_case_for_performance">Der geschäftliche Nutzen der Web-Performance</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Testing">Tests</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Testing/Introduction">Einführung in das Cross-Browser-Testing</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Testing/Testing_strategies">Strategien zur Durchführung von Tests</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS">Umgang mit häufigen HTML- und CSS-Problemen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Testing/Feature_detection">Implementierung der Funktionsprüfung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Testing/Automated_testing">Einführung in automatisiertes Testen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment">Einrichtung Ihrer eigenen Testautomatisierungsumgebung</a></li></ol></details></li><li><a href="/de/docs/Learn_web_development/Extensions/Transform_animate">CSS transformieren und animieren</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Security_privacy">Sicherheit und Datenschutz</a></li><li class="section">Weitere Ressourcen</li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Howto">Häufige Probleme lösen</a></summary><ol><li><a href="/de/docs/Learn_web_development/Howto/Solve_HTML_problems">Häufige HTML-Probleme lösen</a></li><li><a href="/de/docs/Learn_web_development/Howto/Solve_CSS_problems">Häufige CSS-Probleme lösen</a></li><li><a href="/de/docs/Learn_web_development/Howto/Solve_JavaScript_problems">Häufige JavaScript-Probleme lösen</a></li><li><a href="/de/docs/Learn_web_development/Howto/Web_mechanics">Webmechanik</a></li><li><a href="/de/docs/Learn_web_development/Howto/Tools_and_setup">Tools und Einrichtung</a></li><li><a href="/de/docs/Learn_web_development/Howto/Design_and_accessibility">Design und Barrierefreiheit</a></li></ol></details></li><li><a href="/de/docs/Learn_web_development/About">Über</a></li><li><a href="/de/docs/Learn_web_development/Educators">Ressourcen für Lehrkräfte</a></li><li><a href="/de/docs/Learn_web_development/Changelog">Änderungsprotokoll</a></li></ol></div></div><section class="place side"></section></nav></aside><div class="toc-container"><aside class="toc"><nav><div class="document-toc-container"><section class="document-toc"><header><h2 class="document-toc-heading">In diesem Artikel</h2></header><ul class="document-toc-list"><li class="document-toc-item "><a class="document-toc-link" href="#objektgrundlagen">Objektgrundlagen</a></li><li class="document-toc-item "><a class="document-toc-link" href="#punktnotation">Punktnotation</a></li><li class="document-toc-item "><a class="document-toc-link" href="#klammernotation">Klammernotation</a></li><li class="document-toc-item "><a class="document-toc-link" href="#festlegen_von_objektmitgliedern">Festlegen von Objektmitgliedern</a></li><li class="document-toc-item "><a class="document-toc-link" href="#was_ist_this">Was ist "this"?</a></li><li class="document-toc-item "><a class="document-toc-link" href="#einführung_in_konstruktoren">Einführung in Konstruktoren</a></li><li class="document-toc-item "><a class="document-toc-link" href="#sie_haben_die_ganze_zeit_objekte_verwendet">Sie haben die ganze Zeit Objekte verwendet</a></li><li class="document-toc-item "><a class="document-toc-link" href="#testen_sie_ihre_fähigkeiten!">Testen Sie Ihre Fähigkeiten!</a></li><li class="document-toc-item "><a class="document-toc-link" href="#zusammenfassung">Zusammenfassung</a></li></ul></section></div></nav></aside><section class="place side"></section></div></div><main id="content" class="main-content "><article class="main-page-content" lang="de"><header><h1>JavaScript-Objektgrundlagen</h1></header><div class="section-content"><ul class="prev-next"><li><a class="button secondary" href="/de/docs/Learn_web_development/Core/Scripting/Image_gallery"><span class="button-wrap"> Zurück </span></a></li><li><a class="button secondary" href="/de/docs/Learn_web_development/Core/Scripting"><span class="button-wrap"> Übersicht: Dynamisches Skripting mit JavaScript</span></a></li><li><a class="button secondary" href="/de/docs/Learn_web_development/Core/Scripting/DOM_scripting"><span class="button-wrap"> Weiter </span></a></li></ul> <p>In diesem Artikel betrachten wir die grundlegende JavaScript-Objektsyntax und wiederholen einige JavaScript-Funktionen, die wir bereits früher im Kurs gesehen haben. Dadurch wird verdeutlicht, dass viele der Funktionen, mit denen Sie bereits umgegangen sind, Objekte sind.</p> <figure class="table-container"><table> <tbody> <tr> <th scope="row">Voraussetzungen:</th> <td>Verständnis von <a href="/de/docs/Learn_web_development/Core/Structuring_content">HTML</a> und den <a href="/de/docs/Learn_web_development/Core/Styling_basics">CSS-Grundlagen</a>, Vertrautheit mit den JavaScript-Grundlagen, wie in vorherigen Lektionen behandelt.</td> </tr> <tr> <th scope="row">Lernziele:</th> <td> <ul> <li>Verstehen, dass in JavaScript die meisten Dinge Objekte sind und Sie wahrscheinlich Objekte verwendet haben, jedes Mal, wenn Sie JavaScript berührt haben.</li> <li>Grundsyntax: Objektliterale, Eigenschaften und Methoden, Verschachteln von Objekten und Arrays in Objekten.</li> <li>Verwendung von Konstruktoren zur Erstellung eines neuen Objekts.</li> <li>Objektscope und <code>this</code>.</li> <li>Zugreifen auf Eigenschaften und Methoden — Klammer- und Punkt-Syntax.</li> <ul> </ul></ul></td> </tr> </tbody> </table></figure></div><section aria-labelledby="objektgrundlagen"><h2 id="objektgrundlagen"><a href="#objektgrundlagen">Objektgrundlagen</a></h2><div class="section-content"><p>Ein Objekt ist eine Sammlung von verwandten Daten und/oder Funktionalitäten. Diese bestehen normalerweise aus mehreren Variablen und Funktionen (die als Eigenschaften und Methoden bezeichnet werden, wenn sie innerhalb von Objekten sind). Lassen Sie uns ein Beispiel durchgehen, um zu verstehen, wie sie aussehen.</p> <p>Zunächst erstellen Sie eine lokale Kopie unserer <a href="https://github.com/mdn/learning-area/blob/main/javascript/oojs/introduction/oojs.html" class="external" target="_blank">oojs.html</a> Datei. Diese enthält sehr wenig — ein <a href="/de/docs/Web/HTML/Element/script"><code><script></code></a>-Element, in das wir unseren Quellcode schreiben können. Wir verwenden dies als Grundlage, um grundlegende Objektsyntax zu erkunden. Während Sie mit diesem Beispiel arbeiten, sollten Sie Ihre <a href="/de/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools#the_javascript_console">JavaScript-Konsole der Entwicklertools</a> geöffnet und bereit zum Eingeben einiger Befehle haben.</p> <p>Wie bei vielen Dingen in JavaScript beginnt die Erstellung eines Objekts oft mit der Definition und Initialisierung einer Variablen. Versuchen Sie die folgende Zeile unterhalb des bereits in Ihrer Datei vorhandenen JavaScript-Codes einzugeben, dann speichern und aktualisieren Sie:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const person = {}; </code></pre></div> <p>Öffnen Sie nun die <a href="/de/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools#the_javascript_console">JavaScript-Konsole</a> Ihres Browsers, geben Sie <code>person</code> ein und drücken Sie <kbd>Enter</kbd>/<kbd>Return</kbd>. Sie sollten ein Ergebnis ähnlich einer der untenstehenden Zeilen erhalten:</p> <pre class="brush: plain notranslate">[object Object] Object { } { } </pre> <p>Glückwunsch, Sie haben gerade Ihr erstes Objekt erstellt. Arbeit erledigt! Aber dies ist ein leeres Objekt, also können wir damit nicht wirklich etwas anfangen. Aktualisieren wir das JavaScript-Objekt in unserer Datei, um folgendermaßen auszusehen:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const person = { name: ["Bob", "Smith"], age: 32, bio: function () { console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`); }, introduceSelf: function () { console.log(`Hi! I'm ${this.name[0]}.`); }, }; </code></pre></div> <p>Nach dem Speichern und Aktualisieren versuchen Sie, einige der folgenden Befehle in die JavaScript-Konsole Ihrer Entwicklertools einzugeben:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>person.name; person.name[0]; person.age; person.bio(); // "Bob Smith is 32 years old." person.introduceSelf(); // "Hi! I'm Bob." </code></pre></div> <p>Sie haben nun einige Daten und Funktionalitäten in Ihrem Objekt und können jetzt mit einer schönen einfachen Syntax darauf zugreifen!</p> <p>Also, was passiert hier? Ein Objekt besteht aus mehreren Mitgliedern, von denen jedes einen Namen (z.B. <code>name</code> und <code>age</code> oben) und einen Wert (z.B. <code>['Bob', 'Smith']</code> und <code>32</code>) hat. Jedes Name/Wert-Paar muss durch ein Komma getrennt werden, und der Name und der Wert in jedem Fall werden durch einen Doppelpunkt getrennt. Die Syntax folgt immer diesem Muster:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const objectName = { member1Name: member1Value, member2Name: member2Value, member3Name: member3Value, }; </code></pre></div> <p>Der Wert eines Objektmitglieds kann so ziemlich alles sein — in unserem Personenobjekt haben wir eine Zahl, ein Array und zwei Funktionen. Die ersten beiden Elemente sind Datenelemente und werden als die <strong>Eigenschaften</strong> des Objekts bezeichnet. Die letzten beiden Elemente sind Funktionen, die dem Objekt erlauben, etwas mit diesen Daten zu machen, und werden als die <strong>Methoden</strong> des Objekts bezeichnet.</p> <p>Wenn die Mitglieder des Objekts Funktionen sind, gibt es eine einfachere Syntax. Anstatt <code>bio: function ()</code> können wir <code>bio()</code> schreiben. So:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const person = { name: ["Bob", "Smith"], age: 32, bio() { console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`); }, introduceSelf() { console.log(`Hi! I'm ${this.name[0]}.`); }, }; </code></pre></div> <p>Von nun an verwenden wir diese kürzere Syntax.</p> <p>Ein solches Objekt wird als <strong>Objektliteral</strong> bezeichnet — wir haben buchstäblich den Inhalt des Objekts geschrieben, wie wir es erstellt haben. Dies unterscheidet sich von Objekten, die aus Klassen instanziiert werden, die wir später betrachten werden.</p> <p>Es ist sehr gebräuchlich, ein Objekt mit einem Objektliteral zu erstellen, wenn Sie eine Reihe von strukturierten, verwandten Datenelementen auf irgendeine Weise übertragen möchten, zum Beispiel das Senden einer Anfrage an den Server, um in einer Datenbank gespeichert zu werden. Das Senden eines einzelnen Objekts ist viel effizienter als das Senden mehrerer Elemente einzeln, und es ist einfacher zu handhaben als ein Array, wenn Sie einzelne Elemente anhand ihres Namens identifizieren möchten.</p></div></section><section aria-labelledby="punktnotation"><h2 id="punktnotation"><a href="#punktnotation">Punktnotation</a></h2><div class="section-content"><p>Oben haben Sie auf die Eigenschaften und Methoden des Objekts mit der <strong>Punktnotation</strong> zugegriffen. Der Objektname (person) fungiert als <strong>Namensraum</strong> — er muss zuerst eingegeben werden, um auf alles innerhalb des Objekts zuzugreifen. Als nächstes schreiben Sie einen Punkt, dann das Element, auf das Sie zugreifen möchten — das kann der Name einer einfachen Eigenschaft, ein Element einer Array-Eigenschaft oder ein Aufruf einer der Methoden des Objekts sein, zum Beispiel:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>person.age; person.bio(); </code></pre></div></div></section><section aria-labelledby="objekte_als_objekteigenschaften"><h3 id="objekte_als_objekteigenschaften"><a href="#objekte_als_objekteigenschaften">Objekte als Objekteigenschaften</a></h3><div class="section-content"><p>Eine Objekteigenschaft kann selbst ein Objekt sein. Versuchen Sie zum Beispiel, das <code>name</code>-Mitglied zu ändern, von</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const person = { name: ["Bob", "Smith"], }; </code></pre></div> <p>zu</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const person = { name: { first: "Bob", last: "Smith", }, // … }; </code></pre></div> <p>Um auf diese Elemente zuzugreifen, müssen Sie nur den zusätzlichen Schritt mit einem weiteren Punkt am Ende verketten. Versuchen Sie dies in der JS-Konsole:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>person.name.first; person.name.last; </code></pre></div> <p>Wenn Sie dies tun, müssen Sie auch Ihren Methoden-Code durchgehen und alle Instanzen von</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>name[0]; name[1]; </code></pre></div> <p>durch</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>name.first; name.last; </code></pre></div> <p>ersetzen. Andernfalls funktionieren Ihre Methoden nicht mehr.</p></div></section><section aria-labelledby="klammernotation"><h2 id="klammernotation"><a href="#klammernotation">Klammernotation</a></h2><div class="section-content"><p>Die Klammernotation bietet eine alternative Möglichkeit, auf Objekteigenschaften zuzugreifen. Anstatt Punktnotation zu verwenden wie hier:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>person.age; person.name.first; </code></pre></div> <p>Können Sie stattdessen eckige Klammern verwenden:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>person["age"]; person["name"]["first"]; </code></pre></div> <p>Dies sieht sehr ähnlich aus wie der Zugriff auf die Elemente in einem Array, und es ist im Grunde dasselbe — anstelle einer Indexnummer zum Auswählen eines Elements verwenden Sie den Namen, der mit dem Wert eines jeden Mitglieds verbunden ist. Es ist kein Wunder, dass Objekte manchmal als <strong>assoziative Arrays</strong> bezeichnet werden — sie ordnen Zeichenfolgen zu Werten in der gleichen Weise, wie Arrays Zahlen zu Werten zuordnen.</p> <p>Punktnotation wird im Allgemeinen über Klammernotation bevorzugt, weil sie prägnanter und leichter zu lesen ist. Es gibt jedoch einige Fälle, in denen Sie eckige Klammern verwenden müssen. Zum Beispiel, wenn ein Objekteigenschaftsname in einer Variablen gehalten wird, können Sie mit der Punktnotation nicht auf den Wert zugreifen, aber Sie können den Wert mit der Klammernotation abrufen.</p> <p>Im Beispiel unten kann die <code>logProperty()</code> Funktion <code>person[propertyName]</code> verwenden, um den Wert der Eigenschaft abzurufen, die in <code>propertyName</code> genannt wird.</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const person = { name: ["Bob", "Smith"], age: 32, }; function logProperty(propertyName) { console.log(person[propertyName]); } logProperty("name"); // ["Bob", "Smith"] logProperty("age"); // 32 </code></pre></div></div></section><section aria-labelledby="festlegen_von_objektmitgliedern"><h2 id="festlegen_von_objektmitgliedern"><a href="#festlegen_von_objektmitgliedern">Festlegen von Objektmitgliedern</a></h2><div class="section-content"><p>Bisher haben wir nur das Abrufen (oder <strong>Holen</strong>) von Objektmitgliedern betrachtet — Sie können auch den Wert von Objektmitgliedern <strong>setzen</strong> (aktualisieren), indem Sie das Mitglied deklarieren, das Sie setzen möchten (mit Punkt- oder Klammernotation), folgendermaßen:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>person.age = 45; person["name"]["last"] = "Cratchit"; </code></pre></div> <p>Versuchen Sie, die obigen Zeilen einzugeben, und holen Sie sich dann die Mitglieder erneut, um zu sehen, wie sie sich geändert haben, wie folgt:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>person.age; person["name"]["last"]; </code></pre></div> <p>Das Festlegen von Mitgliedern hört nicht nur beim Aktualisieren der Werte vorhandener Eigenschaften und Methoden auf; Sie können auch völlig neue Mitglieder erstellen. Versuchen Sie dies in der JS-Konsole:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>person["eyes"] = "hazel"; person.farewell = function () { console.log("Bye everybody!"); }; </code></pre></div> <p>Nun können Sie Ihre neuen Mitglieder testen:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>person["eyes"]; person.farewell(); // "Bye everybody!" </code></pre></div> <p>Ein nützlicher Aspekt der Klammernotation ist, dass sie nicht nur Mitgliedswerte dynamisch setzen kann, sondern auch Mitgliedsnamen. Angenommen, wir wollten, dass Benutzer benutzerdefinierte Werttypen in ihren Personendaten speichern können, indem sie den Mitgliedsnamen und den Wert in zwei Texteingaben eingeben. Wir könnten diese Werte so erhalten:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const myDataName = nameInput.value; const myDataValue = nameValue.value; </code></pre></div> <p>Wir könnten dann diesen neuen Mitgliedsnamen und Wert dem <code>person</code>-Objekt so hinzufügen:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>person[myDataName] = myDataValue; </code></pre></div> <p>Um dies zu testen, versuchen Sie, die folgenden Zeilen in Ihren Code einzufügen, direkt unterhalb der schließenden geschweiften Klammer des <code>person</code>-Objekts:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const myDataName = "height"; const myDataValue = "1.75m"; person[myDataName] = myDataValue; </code></pre></div> <p>Jetzt speichern und aktualisieren und folgendes in Ihr Texteingabefeld eingeben:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>person.height; </code></pre></div> <p>Das Hinzufügen einer Eigenschaft zu einem Objekt mit der oben genannten Methode ist mit Punktnotation nicht möglich, die nur einen literalen Mitgliedsnamen akzeptieren kann, nicht einen Variablenwert, der auf einen Namen verweist.</p></div></section><section aria-labelledby="was_ist_this"><h2 id="was_ist_this"><a href="#was_ist_this">Was ist "this"?</a></h2><div class="section-content"><p>Möglicherweise haben Sie etwas leicht Merkwürdiges in unseren Methoden bemerkt. Schauen Sie sich zum Beispiel diese an:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>introduceSelf() { console.log(`Hi! I'm ${this.name[0]}.`); } </code></pre></div> <p>Sie fragen sich wahrscheinlich, was "this" ist. Das <code>this</code>-Schlüsselwort bezieht sich typischerweise auf das aktuelle Objekt, in dem der Code ausgeführt wird. Im Kontext einer Objektmethode bezieht sich <code>this</code> auf das Objekt, auf dem die Methode aufgerufen wurde.</p> <p>Lassen Sie uns veranschaulichen, was wir meinen, mit einem vereinfachten Paar von Personenobjekten:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const person1 = { name: "Chris", introduceSelf() { console.log(`Hi! I'm ${this.name}.`); }, }; const person2 = { name: "Deepti", introduceSelf() { console.log(`Hi! I'm ${this.name}.`); }, }; </code></pre></div> <p>In diesem Fall gibt <code>person1.introduceSelf()</code> "Hi! I'm Chris." aus; <code>person2.introduceSelf()</code> gibt "Hi! I'm Deepti." aus. Dies geschieht, weil, wenn die Methode aufgerufen wird, <code>this</code> sich auf das Objekt bezieht, auf dem die Methode aufgerufen wird, wodurch dieselbe Methodendefinition für mehrere Objekte funktioniert.</p> <p>Dies ist nicht allzu nützlich, wenn Sie Objektliterale manuell schreiben, da die Verwendung des Objektnamens (<code>person1</code> und <code>person2</code>) zum exakt gleichen Ergebnis führt, aber es wird wesentlich sein, wenn wir beginnen, <strong>Konstruktoren</strong> zu verwenden, um mehr als ein Objekt aus einer einzigen Objektdefinition zu erstellen, und das ist das Thema des nächsten Abschnitts.</p></div></section><section aria-labelledby="einführung_in_konstruktoren"><h2 id="einführung_in_konstruktoren"><a href="#einführung_in_konstruktoren">Einführung in Konstruktoren</a></h2><div class="section-content"><p>Die Verwendung von Objektliteralen ist in Ordnung, wenn Sie nur ein Objekt erstellen müssen, aber wenn Sie mehr als eines erstellen müssen, wie im vorherigen Abschnitt, sind sie ernsthaft unzureichend. Wir müssen den gleichen Code für jedes Objekt, das wir erstellen, ausschreiben, und wenn wir einige Eigenschaften des Objekts ändern wollen — wie das Hinzufügen einer <code>height</code>-Eigenschaft — dann müssen wir daran denken, jedes Objekt zu aktualisieren.</p> <p>Wir hätten gerne eine Möglichkeit, die "Form" eines Objekts zu definieren — die Menge der Methoden und der Eigenschaften, die es haben kann — und dann beliebig viele Objekte zu erstellen, wobei wir nur die Werte für die Eigenschaften aktualisieren, die unterschiedlich sind.</p> <p>Die erste Version davon ist einfach eine Funktion:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>function createPerson(name) { const obj = {}; obj.name = name; obj.introduceSelf = function () { console.log(`Hi! I'm ${this.name}.`); }; return obj; } </code></pre></div> <p>Diese Funktion erstellt und gibt jedes Mal, wenn wir sie aufrufen, ein neues Objekt zurück. Das Objekt wird zwei Mitglieder haben:</p> <ul> <li>eine Eigenschaft <code>name</code></li> <li>eine Methode <code>introduceSelf()</code>.</li> </ul> <p>Beachten Sie, dass <code>createPerson()</code> einen Parameter <code>name</code> nimmt, um den Wert der <code>name</code>-Eigenschaft zu setzen, aber der Wert der <code>introduceSelf()</code>-Methode wird für alle Objekte, die mithilfe dieser Funktion erstellt werden, gleich sein. Dieses Muster zur Objekterstellung ist sehr gebräuchlich.</p> <p>Nun können wir so viele Objekte erstellen, wie wir möchten, und die Definition wiederverwenden:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const salva = createPerson("Salva"); salva.introduceSelf(); // "Hi! I'm Salva." const frankie = createPerson("Frankie"); frankie.introduceSelf(); // "Hi! I'm Frankie." </code></pre></div> <p>Das funktioniert gut, ist aber etwas umständlich: Wir müssen ein leeres Objekt erstellen, es initialisieren und zurückgeben. Eine bessere Möglichkeit ist die Verwendung eines <strong>Konstruktors</strong>. Ein Konstruktor ist einfach eine Funktion, die mit dem <a href="/de/docs/Web/JavaScript/Reference/Operators/new"><code>new</code></a>-Schlüsselwort aufgerufen wird. Wenn Sie einen Konstruktor aufrufen, wird er:</p> <ul> <li>ein neues Objekt erstellen</li> <li><code>this</code> an das neue Objekt binden, sodass Sie in Ihrem Konstruktorcode auf <code>this</code> verweisen können</li> <li>den Code im Konstruktor ausführen</li> <li>das neue Objekt zurückgeben.</li> </ul> <p>Konstruktoren beginnen konventionell mit einem Großbuchstaben und sind nach dem Typ des Objekts benannt, das sie erstellen. Wir könnten unser Beispiel also so umschreiben:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>function Person(name) { this.name = name; this.introduceSelf = function () { console.log(`Hi! I'm ${this.name}.`); }; } </code></pre></div> <p>Um <code>Person()</code> als Konstruktor aufzurufen, verwenden wir <code>new</code>:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const salva = new Person("Salva"); salva.introduceSelf(); // "Hi! I'm Salva." const frankie = new Person("Frankie"); frankie.introduceSelf(); // "Hi! I'm Frankie." </code></pre></div></div></section><section aria-labelledby="sie_haben_die_ganze_zeit_objekte_verwendet"><h2 id="sie_haben_die_ganze_zeit_objekte_verwendet"><a href="#sie_haben_die_ganze_zeit_objekte_verwendet">Sie haben die ganze Zeit Objekte verwendet</a></h2><div class="section-content"><p>Während Sie diese Beispiele durchgegangen sind, haben Sie wahrscheinlich gedacht, dass die Punktnotation, die Sie verwendet haben, sehr vertraut ist. Das liegt daran, dass Sie sie während des gesamten Kurses verwendet haben! Jedes Mal, wenn wir ein Beispiel durchgearbeitet haben, das eine integrierte Browser-API oder ein JavaScript-Objekt verwendet, haben wir Objekte verwendet, da solche Funktionen genau mit den gleichen Arten von Objektstrukturen gebaut werden, die wir hier betrachtet haben, wenn auch komplexer als in unseren eigenen grundlegenden benutzerdefinierten Beispielen.</p> <p>Also wenn Sie String-Methoden wie:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>myString.split(","); </code></pre></div> <p>verwendet haben, haben Sie eine Methode verwendet, die auf einem <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/String"><code>String</code></a> Objekt verfügbar ist. Jedes Mal, wenn Sie in Ihrem Code eine Zeichenfolge erstellen, wird diese Zeichenfolge automatisch als eine Instanz von <code>String</code> erstellt und hat daher mehrere gängige Methoden und Eigenschaften darauf verfügbar.</p> <p>Wenn Sie auf das Document Object Model mit Zeilen wie dieser zugegriffen haben:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const myDiv = document.createElement("div"); const myVideo = document.querySelector("video"); </code></pre></div> <p>haben Sie Methoden verwendet, die auf einem <a href="/de/docs/Web/API/Document"><code>Document</code></a> Objekt verfügbar sind. Für jede geladene Webseite wird eine Instanz von <code>Document</code> erstellt, die <code>document</code> genannt wird, und die die gesamte Struktur der Seite, Inhalte und andere Funktionen wie ihre URL darstellt. Auch hier bedeutet das, dass sie mehrere gemeinsame Methoden und Eigenschaften darauf verfügbar hat.</p> <p>Das Gleiche gilt so ziemlich für jedes andere integrierte Objekt oder API, das Sie verwendet haben — <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Array"><code>Array</code></a>, <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Math"><code>Math</code></a>, und so weiter.</p> <p>Beachten Sie, dass eingebaute Objekte und APIs nicht immer automatisch Objektinstanzen erstellen. Als Beispiel benötigt die <a href="/de/docs/Web/API/Notifications_API">Notifications API</a> – die es modernen Browsern ermöglicht, Systembenachrichtigungen auszulösen – dass Sie für jede Benachrichtigung, die Sie auslösen möchten, eine neue Objektinstanz mithilfe des Konstruktors instanziieren. Versuchen Sie, das folgende in Ihre JavaScript-Konsole einzugeben:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const myNotification = new Notification("Hello!"); </code></pre></div></div></section><section aria-labelledby="testen_sie_ihre_fähigkeiten!"><h2 id="testen_sie_ihre_fähigkeiten!"><a href="#testen_sie_ihre_fähigkeiten!">Testen Sie Ihre Fähigkeiten!</a></h2><div class="section-content"><p>Sie haben das Ende dieses Artikels erreicht, aber können Sie sich an die wichtigsten Informationen erinnern? Sie finden einige weitere Tests, um zu überprüfen, ob Sie diese Informationen beibehalten haben, bevor Sie fortfahren — siehe <a href="/de/docs/Learn_web_development/Core/Scripting/Test_your_skills:_Object_basics">Testen Sie Ihre Fähigkeiten: Objektgrundlagen</a>.</p></div></section><section aria-labelledby="zusammenfassung"><h2 id="zusammenfassung"><a href="#zusammenfassung">Zusammenfassung</a></h2><div class="section-content"><p>Nun sollten Sie eine gute Vorstellung davon haben, wie Sie mit Objekten in JavaScript arbeiten — einschließlich der Erstellung Ihrer eigenen einfachen Objekte. Sie sollten auch schätzen, dass Objekte sehr nützlich als Strukturen zum Speichern verwandter Daten und Funktionalitäten sind — wenn Sie versuchen würden, alle Eigenschaften und Methoden in unserem <code>person</code>-Objekt als separate Variablen und Funktionen zu verfolgen, wäre das ineffizient und frustrierend, und wir würden riskieren, mit anderen Variablen und Funktionen, die die gleichen Namen haben, zu kollidieren. Objekte ermöglichen es uns, die Informationen sicher in ihrem eigenen Paket, abseits aller Gefahren, aufzubewahren.</p> <p>Im nächsten Artikel werden wir uns mit <strong>DOM-Scripting</strong> befassen, das eine große Menge an grundlegenden Browser-API-Funktionalitäten freischaltet.</p> <ul class="prev-next"><li><a class="button secondary" href="/de/docs/Learn_web_development/Core/Scripting/Image_gallery"><span class="button-wrap"> Zurück </span></a></li><li><a class="button secondary" href="/de/docs/Learn_web_development/Core/Scripting"><span class="button-wrap"> Übersicht: Dynamisches Skripting mit JavaScript</span></a></li><li><a class="button secondary" href="/de/docs/Learn_web_development/Core/Scripting/DOM_scripting"><span class="button-wrap"> Weiter </span></a></li></ul></div></section></article><aside class="article-footer"><div class="article-footer-inner"><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" width="162" height="162" viewBox="0 0 162 162" fill="none" role="none"><mask id="b" fill="#fff"><path d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z"></path></mask><path stroke="url(#a)" stroke-dasharray="6, 6" stroke-width="2" d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z" mask="url(#b)" style="stroke:url(#a)" transform="translate(-63.992 -25.587)"></path><ellipse cx="8.066" cy="111.597" fill="var(--background-tertiary)" rx="53.677" ry="53.699" transform="matrix(.71707 -.697 .7243 .6895 0 0)"></ellipse><g clip-path="url(#c)" transform="translate(-63.992 -25.587)"><path fill="#9abff5" d="m144.256 137.379 32.906 12.434a4.41 4.41 0 0 1 2.559 5.667l-9.326 24.679a4.41 4.41 0 0 1-5.667 2.559l-8.226-3.108-2.332 6.17c-.466 1.233-.375 1.883-1.609 1.417l-2.253-.527c-.411-.155-.95-.594-1.206-1.161l-4.734-10.484-12.545-4.741a4.41 4.41 0 0 1-2.559-5.667l9.325-24.679a4.41 4.41 0 0 1 5.667-2.559m9.961 29.617 8.227 3.108 3.264-8.638-.498-6.768-4.113-1.555.548 7.258-4.319-1.632zm-12.339-4.663 8.226 3.108 3.264-8.637-.498-6.769-4.113-1.554.548 7.257-4.319-1.632z"></path></g><g clip-path="url(#d)" transform="translate(-63.992 -25.587)"><path fill="#81b0f3" d="M135.35 60.136 86.67 41.654c-3.346-1.27-7.124.428-8.394 3.775L64.414 81.938c-1.27 3.347.428 7.125 3.774 8.395l12.17 4.62-3.465 9.128c-.693 1.826-1.432 2.457.394 3.15l3.014 1.625c.609.231 1.637.274 2.477-.104l15.53-6.983 18.56 7.047c3.346 1.27 7.124-.428 8.395-3.775l13.862-36.51c1.27-3.346-.428-7.124-3.775-8.395M95.261 83.207l-12.17-4.62 4.852-12.779 7.19-7.017 6.085 2.31-7.725 7.51 6.389 2.426zm18.255 6.93-12.17-4.62 4.852-12.778 7.189-7.017 6.085 2.31-7.725 7.51 6.39 2.426z"></path></g><defs><clipPath id="c"><path fill="#fff" d="m198.638 146.586-65.056-24.583-24.583 65.057 65.056 24.582z"></path></clipPath><clipPath id="d"><path fill="#fff" d="m66.438 14.055 96.242 36.54-36.54 96.243-96.243-36.54z"></path></clipPath><linearGradient id="a" x1="97.203" x2="199.995" y1="47.04" y2="152.793" gradientUnits="userSpaceOnUse"><stop stop-color="#086DFC"></stop><stop offset="0.246" stop-color="#2C81FA"></stop><stop offset="0.516" stop-color="#5497F8"></stop><stop offset="0.821" stop-color="#80B0F6"></stop><stop offset="1" stop-color="#9ABFF5"></stop></linearGradient></defs></svg></div><h2>MDN-Feedback-Box</h2><fieldset class="feedback"><label>War diese Übersetzung hilfreich?</label><div class="button-container"><button type="button" class="button primary has-icon yes"><span class="button-wrap"><span class="icon icon-thumbs-up "></span>Ja</span></button><button type="button" class="button primary has-icon no"><span class="button-wrap"><span class="icon icon-thumbs-down "></span>Nein</span></button></div></fieldset><p class="last-modified-date">Diese Seite wurde automatisch aus dem Englischen übersetzt.</p><div id="on-github" class="on-github"><a href="https://github.com/mdn/translated-content-de/blob/main/files/de/learn_web_development/core/scripting/object_basics/index.md?plain=1" title="Folder: de/learn_web_development/core/scripting/object_basics (Opens in a new tab)" target="_blank" rel="noopener noreferrer">Übersetzung auf GitHub anzeigen</a> • <a href="https://github.com/mdn/translated-content-de/issues/new?template=page-report-de.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fde%2Fdocs%2FLearn_web_development%2FCore%2FScripting%2FObject_basics&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60de%2Flearn_web_development%2Fcore%2Fscripting%2Fobject_basics%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fde%2Fdocs%2FLearn_web_development%2FCore%2FScripting%2FObject_basics%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content-de%2Fblob%2Fmain%2Ffiles%2Fde%2Flearn_web_development%2Fcore%2Fscripting%2Fobject_basics%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content-de%2Fcommit%2F452fe502cfb4c9a91c346af17370ecfb6a8bd17e%0A*+Document+last+modified%3A+2025-02-17T00%3A20%3A27.000Z%0A%0A%3C%2Fdetails%3E" title="This will take you to GitHub to file a new issue." target="_blank" rel="noopener noreferrer">Fehler mit dieser Übersetzung melden</a></div></div></aside></main></div></div><footer id="nav-footer" class="page-footer"><div class="page-footer-grid"><div class="page-footer-logo-col"><a href="/" class="mdn-footer-logo" aria-label="MDN homepage"><svg width="48" height="17" viewBox="0 0 48 17" fill="none" xmlns="http://www.w3.org/2000/svg"><title id="mdn-footer-logo-svg">MDN logo</title><path d="M20.04 16.512H15.504V10.416C15.504 9.488 15.344 8.824 15.024 8.424C14.72 8.024 14.264 7.824 13.656 7.824C12.92 7.824 12.384 8.064 12.048 8.544C11.728 9.024 11.568 9.64 11.568 10.392V14.184H13.008V16.512H8.472V10.416C8.472 9.488 8.312 8.824 7.992 8.424C7.688 8.024 7.232 7.824 6.624 7.824C5.872 7.824 5.336 8.064 5.016 8.544C4.696 9.024 4.536 9.64 4.536 10.392V14.184H6.6V16.512H0V14.184H1.44V8.04H0.024V5.688H4.536V7.32C5.224 6.088 6.32 5.472 7.824 5.472C8.608 5.472 9.328 5.664 9.984 6.048C10.64 6.432 11.096 7.016 11.352 7.8C11.992 6.248 13.168 5.472 14.88 5.472C15.856 5.472 16.72 5.776 17.472 6.384C18.224 6.992 18.6 7.936 18.6 9.216V14.184H20.04V16.512Z" fill="currentColor"></path><path d="M33.6714 16.512H29.1354V14.496C28.8314 15.12 28.3834 15.656 27.7914 16.104C27.1994 16.536 26.4154 16.752 25.4394 16.752C24.0154 16.752 22.8954 16.264 22.0794 15.288C21.2634 14.312 20.8554 12.984 20.8554 11.304C20.8554 9.688 21.2554 8.312 22.0554 7.176C22.8554 6.04 24.0634 5.472 25.6794 5.472C26.5594 5.472 27.2794 5.648 27.8394 6C28.3994 6.352 28.8314 6.8 29.1354 7.344V2.352H26.9754V0H32.2314V14.184H33.6714V16.512ZM29.1354 11.04V10.776C29.1354 9.88 28.8954 9.184 28.4154 8.688C27.9514 8.176 27.3674 7.92 26.6634 7.92C25.9754 7.92 25.3674 8.176 24.8394 8.688C24.3274 9.2 24.0714 10.008 24.0714 11.112C24.0714 12.152 24.3114 12.944 24.7914 13.488C25.2714 14.032 25.8394 14.304 26.4954 14.304C27.3114 14.304 27.9514 13.96 28.4154 13.272C28.8954 12.584 29.1354 11.84 29.1354 11.04Z" fill="currentColor"></path><path d="M47.9589 16.512H41.9829V14.184H43.4229V10.416C43.4229 9.488 43.2629 8.824 42.9429 8.424C42.6389 8.024 42.1829 7.824 41.5749 7.824C40.8389 7.824 40.2709 8.056 39.8709 8.52C39.4709 8.968 39.2629 9.56 39.2469 10.296V14.184H40.6869V16.512H34.7109V14.184H36.1509V8.04H34.5909V5.688H39.2469V7.344C39.9669 6.096 41.1269 5.472 42.7269 5.472C43.7509 5.472 44.6389 5.776 45.3909 6.384C46.1429 6.992 46.5189 7.936 46.5189 9.216V14.184H47.9589V16.512Z" fill="currentColor"></path></svg></a><p>Your blueprint for a better internet.</p><ul class="social-icons"><li><a href="https://mastodon.social/@mdn" target="_blank" rel="me noopener noreferrer"><span class="icon icon-mastodon"></span><span class="visually-hidden">MDN on Mastodon</span></a></li><li><a href="https://twitter.com/mozdevnet" target="_blank" rel="noopener noreferrer"><span class="icon icon-twitter-x"></span><span class="visually-hidden">MDN on X (formerly Twitter)</span></a></li><li><a href="https://github.com/mdn/" target="_blank" rel="noopener noreferrer"><span class="icon icon-github-mark-small"></span><span class="visually-hidden">MDN on GitHub</span></a></li><li><a href="/en-US/blog/rss.xml" target="_blank"><span class="icon icon-feed"></span><span class="visually-hidden">MDN Blog RSS Feed</span></a></li></ul></div><div class="page-footer-nav-col-1"><h2 class="footer-nav-heading">MDN</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a href="/en-US/about">About</a></li><li class="footer-nav-item"><a href="/en-US/blog/">Blog</a></li><li class="footer-nav-item"><a href="https://www.mozilla.org/en-US/careers/listings/?team=ProdOps" target="_blank" rel="noopener noreferrer">Careers</a></li><li class="footer-nav-item"><a href="/en-US/advertising">Advertise with us</a></li></ul></div><div class="page-footer-nav-col-2"><h2 class="footer-nav-heading">Support</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="https://support.mozilla.org/products/mdn-plus">Product help</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/de/docs/MDN/Community/Issues">Report an issue</a></li></ul></div><div class="page-footer-nav-col-3"><h2 class="footer-nav-heading">Our communities</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="/en-US/community">MDN Community</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="https://discourse.mozilla.org/c/mdn/236" target="_blank" rel="noopener noreferrer">MDN Forum</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/discord" target="_blank" rel="noopener noreferrer">MDN Chat</a></li></ul></div><div class="page-footer-nav-col-4"><h2 class="footer-nav-heading">Developers</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="/de/docs/Web">Web Technologies</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/de/docs/Learn">Learn Web Development</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/de/plus">MDN Plus</a></li><li class="footer-nav-item"><a href="https://hacks.mozilla.org/" target="_blank" rel="noopener noreferrer">Hacks Blog</a></li></ul></div><div class="page-footer-moz"><a href="https://www.mozilla.org/" class="footer-moz-logo-link" target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" width="137" height="32" fill="none" viewBox="0 0 267.431 62.607"><path fill="currentColor" d="m13.913 23.056 5.33 25.356h2.195l5.33-25.356h14.267v38.976h-7.578V29.694h-2.194l-7.264 32.337h-7.343L9.418 29.694H7.223v32.337H-.354V23.056Zm47.137 9.123c9.12 0 14.423 5.385 14.423 15.214s-5.33 15.214-14.423 15.214c-9.12 0-14.423-5.385-14.423-15.214 0-9.855 5.304-15.214 14.423-15.214m0 24.363c4.285 0 6.428-2.196 6.428-7.032v-4.287c0-4.836-2.143-7.032-6.428-7.032s-6.428 2.196-6.428 7.032v4.287c0 4.836 2.143 7.032 6.428 7.032m18.473-.157 15.47-18.01h-15.26v-5.647h24.352v5.646L88.616 56.385h15.704v5.646H79.523Zm29.318-23.657h11.183V62.03h-7.578V38.375h-3.632v-5.646zm3.605-9.672h7.578v5.646h-7.578zm13.17 0h11.21v38.976h-7.578v-33.33h-3.632zm16.801 0H153.6v38.976h-7.577v-33.33h-3.632v-5.646zm29.03 9.123c4.442 0 7.394 2.143 8.231 5.881h2.194v-5.332h9.276v5.646h-3.632v18.011h3.632v5.646h-4.442c-3.135 0-4.834-1.699-4.834-4.836V56.7h-2.194c-.81 3.738-3.789 5.881-8.23 5.881-6.978 0-11.916-5.829-11.916-15.214 0-9.384 4.938-15.187 11.915-15.187m2.3 24.363c4.284 0 6.192-2.196 6.192-7.032v-4.287c0-4.836-1.908-7.032-6.193-7.032-4.18 0-6.193 2.196-6.193 7.032v4.287c0 4.836 2.012 7.032 6.193 7.032m48.34 5.489h-7.577V0h7.577zm6.585-29.643h32.165v-2.196l-21.295-7.634v-6.143l21.295-7.633V6.588h-25.345V0h32.165v12.522l-17.35 5.881V20.6l17.35 5.882v12.521h-38.985zm0-25.801h6.794v6.796h-6.794z"></path></svg></a><ul class="footer-moz-list"><li class="footer-moz-item"><a href="https://www.mozilla.org/privacy/websites/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Website Privacy Notice</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/privacy/websites/#cookies" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Cookies</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/about/legal/terms/mozilla" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Legal</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/about/governance/policies/participation/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Community Participation Guidelines</a></li></ul></div><div class="page-footer-legal"><p id="license" class="page-footer-legal-text">Visit <a href="https://www.mozilla.org" target="_blank" rel="noopener noreferrer">Mozilla Corporation’s</a> not-for-profit parent, the <a target="_blank" rel="noopener noreferrer" href="https://foundation.mozilla.org/">Mozilla Foundation</a>.<br/>Portions of this content are ©1998–2025 by individual mozilla.org contributors. Content available under <a href="/de/docs/MDN/Writing_guidelines/Attrib_copyright_license">a Creative Commons license</a>.</p></div></div></footer></div><script type="application/json" id="hydration">{"url":"/de/docs/Learn_web_development/Core/Scripting/Object_basics","doc":{"body":[{"type":"prose","value":{"id":null,"title":null,"isH3":false,"content":"<ul class=\"prev-next\"><li><a class=\"button secondary\" href=\"/de/docs/Learn_web_development/Core/Scripting/Image_gallery\"><span class=\"button-wrap\"> Zurück </span></a></li><li><a class=\"button secondary\" href=\"/de/docs/Learn_web_development/Core/Scripting\"><span class=\"button-wrap\"> Übersicht: Dynamisches Skripting mit JavaScript</span></a></li><li><a class=\"button secondary\" href=\"/de/docs/Learn_web_development/Core/Scripting/DOM_scripting\"><span class=\"button-wrap\"> Weiter </span></a></li></ul>\n<p>In diesem Artikel betrachten wir die grundlegende JavaScript-Objektsyntax und wiederholen einige JavaScript-Funktionen, die wir bereits früher im Kurs gesehen haben. Dadurch wird verdeutlicht, dass viele der Funktionen, mit denen Sie bereits umgegangen sind, Objekte sind.</p>\n<figure class=\"table-container\"><table>\n <tbody>\n <tr>\n <th scope=\"row\">Voraussetzungen:</th>\n <td>Verständnis von <a href=\"/de/docs/Learn_web_development/Core/Structuring_content\">HTML</a> und den <a href=\"/de/docs/Learn_web_development/Core/Styling_basics\">CSS-Grundlagen</a>, Vertrautheit mit den JavaScript-Grundlagen, wie in vorherigen Lektionen behandelt.</td>\n </tr>\n <tr>\n <th scope=\"row\">Lernziele:</th>\n <td>\n <ul>\n <li>Verstehen, dass in JavaScript die meisten Dinge Objekte sind und Sie wahrscheinlich Objekte verwendet haben, jedes Mal, wenn Sie JavaScript berührt haben.</li>\n <li>Grundsyntax: Objektliterale, Eigenschaften und Methoden, Verschachteln von Objekten und Arrays in Objekten.</li>\n <li>Verwendung von Konstruktoren zur Erstellung eines neuen Objekts.</li>\n <li>Objektscope und <code>this</code>.</li>\n <li>Zugreifen auf Eigenschaften und Methoden — Klammer- und Punkt-Syntax.</li>\n <ul>\n </ul></ul></td>\n </tr>\n </tbody>\n</table></figure>"}},{"type":"prose","value":{"id":"objektgrundlagen","title":"Objektgrundlagen","isH3":false,"content":"<p>Ein Objekt ist eine Sammlung von verwandten Daten und/oder Funktionalitäten.\nDiese bestehen normalerweise aus mehreren Variablen und Funktionen (die als Eigenschaften und Methoden bezeichnet werden, wenn sie innerhalb von Objekten sind).\nLassen Sie uns ein Beispiel durchgehen, um zu verstehen, wie sie aussehen.</p>\n<p>Zunächst erstellen Sie eine lokale Kopie unserer <a href=\"https://github.com/mdn/learning-area/blob/main/javascript/oojs/introduction/oojs.html\" class=\"external\" target=\"_blank\">oojs.html</a> Datei. Diese enthält sehr wenig — ein <a href=\"/de/docs/Web/HTML/Element/script\"><code><script></code></a>-Element, in das wir unseren Quellcode schreiben können. Wir verwenden dies als Grundlage, um grundlegende Objektsyntax zu erkunden. Während Sie mit diesem Beispiel arbeiten, sollten Sie Ihre <a href=\"/de/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools#the_javascript_console\">JavaScript-Konsole der Entwicklertools</a> geöffnet und bereit zum Eingeben einiger Befehle haben.</p>\n<p>Wie bei vielen Dingen in JavaScript beginnt die Erstellung eines Objekts oft mit der Definition und Initialisierung einer Variablen. Versuchen Sie die folgende Zeile unterhalb des bereits in Ihrer Datei vorhandenen JavaScript-Codes einzugeben, dann speichern und aktualisieren Sie:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const person = {};\n</code></pre></div>\n<p>Öffnen Sie nun die <a href=\"/de/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools#the_javascript_console\">JavaScript-Konsole</a> Ihres Browsers, geben Sie <code>person</code> ein und drücken Sie <kbd>Enter</kbd>/<kbd>Return</kbd>. Sie sollten ein Ergebnis ähnlich einer der untenstehenden Zeilen erhalten:</p>\n<pre class=\"brush: plain notranslate\">[object Object]\nObject { }\n{ }\n</pre>\n<p>Glückwunsch, Sie haben gerade Ihr erstes Objekt erstellt. Arbeit erledigt! Aber dies ist ein leeres Objekt, also können wir damit nicht wirklich etwas anfangen. Aktualisieren wir das JavaScript-Objekt in unserer Datei, um folgendermaßen auszusehen:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const person = {\n name: [\"Bob\", \"Smith\"],\n age: 32,\n bio: function () {\n console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`);\n },\n introduceSelf: function () {\n console.log(`Hi! I'm ${this.name[0]}.`);\n },\n};\n</code></pre></div>\n<p>Nach dem Speichern und Aktualisieren versuchen Sie, einige der folgenden Befehle in die JavaScript-Konsole Ihrer Entwicklertools einzugeben:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>person.name;\nperson.name[0];\nperson.age;\nperson.bio();\n// \"Bob Smith is 32 years old.\"\nperson.introduceSelf();\n// \"Hi! I'm Bob.\"\n</code></pre></div>\n<p>Sie haben nun einige Daten und Funktionalitäten in Ihrem Objekt und können jetzt mit einer schönen einfachen Syntax darauf zugreifen!</p>\n<p>Also, was passiert hier? Ein Objekt besteht aus mehreren Mitgliedern, von denen jedes einen Namen (z.B. <code>name</code> und <code>age</code> oben) und einen Wert (z.B. <code>['Bob', 'Smith']</code> und <code>32</code>) hat. Jedes Name/Wert-Paar muss durch ein Komma getrennt werden, und der Name und der Wert in jedem Fall werden durch einen Doppelpunkt getrennt. Die Syntax folgt immer diesem Muster:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const objectName = {\n member1Name: member1Value,\n member2Name: member2Value,\n member3Name: member3Value,\n};\n</code></pre></div>\n<p>Der Wert eines Objektmitglieds kann so ziemlich alles sein — in unserem Personenobjekt haben wir eine Zahl, ein Array und zwei Funktionen. Die ersten beiden Elemente sind Datenelemente und werden als die <strong>Eigenschaften</strong> des Objekts bezeichnet. Die letzten beiden Elemente sind Funktionen, die dem Objekt erlauben, etwas mit diesen Daten zu machen, und werden als die <strong>Methoden</strong> des Objekts bezeichnet.</p>\n<p>Wenn die Mitglieder des Objekts Funktionen sind, gibt es eine einfachere Syntax. Anstatt <code>bio: function ()</code> können wir <code>bio()</code> schreiben. So:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const person = {\n name: [\"Bob\", \"Smith\"],\n age: 32,\n bio() {\n console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`);\n },\n introduceSelf() {\n console.log(`Hi! I'm ${this.name[0]}.`);\n },\n};\n</code></pre></div>\n<p>Von nun an verwenden wir diese kürzere Syntax.</p>\n<p>Ein solches Objekt wird als <strong>Objektliteral</strong> bezeichnet — wir haben buchstäblich den Inhalt des Objekts geschrieben, wie wir es erstellt haben. Dies unterscheidet sich von Objekten, die aus Klassen instanziiert werden, die wir später betrachten werden.</p>\n<p>Es ist sehr gebräuchlich, ein Objekt mit einem Objektliteral zu erstellen, wenn Sie eine Reihe von strukturierten, verwandten Datenelementen auf irgendeine Weise übertragen möchten, zum Beispiel das Senden einer Anfrage an den Server, um in einer Datenbank gespeichert zu werden. Das Senden eines einzelnen Objekts ist viel effizienter als das Senden mehrerer Elemente einzeln, und es ist einfacher zu handhaben als ein Array, wenn Sie einzelne Elemente anhand ihres Namens identifizieren möchten.</p>"}},{"type":"prose","value":{"id":"punktnotation","title":"Punktnotation","isH3":false,"content":"<p>Oben haben Sie auf die Eigenschaften und Methoden des Objekts mit der <strong>Punktnotation</strong> zugegriffen. Der Objektname (person) fungiert als <strong>Namensraum</strong> — er muss zuerst eingegeben werden, um auf alles innerhalb des Objekts zuzugreifen. Als nächstes schreiben Sie einen Punkt, dann das Element, auf das Sie zugreifen möchten — das kann der Name einer einfachen Eigenschaft, ein Element einer Array-Eigenschaft oder ein Aufruf einer der Methoden des Objekts sein, zum Beispiel:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>person.age;\nperson.bio();\n</code></pre></div>"}},{"type":"prose","value":{"id":"objekte_als_objekteigenschaften","title":"Objekte als Objekteigenschaften","isH3":true,"content":"<p>Eine Objekteigenschaft kann selbst ein Objekt sein. Versuchen Sie zum Beispiel, das <code>name</code>-Mitglied zu ändern, von</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const person = {\n name: [\"Bob\", \"Smith\"],\n};\n</code></pre></div>\n<p>zu</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const person = {\n name: {\n first: \"Bob\",\n last: \"Smith\",\n },\n // …\n};\n</code></pre></div>\n<p>Um auf diese Elemente zuzugreifen, müssen Sie nur den zusätzlichen Schritt mit einem weiteren Punkt am Ende verketten. Versuchen Sie dies in der JS-Konsole:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>person.name.first;\nperson.name.last;\n</code></pre></div>\n<p>Wenn Sie dies tun, müssen Sie auch Ihren Methoden-Code durchgehen und alle Instanzen von</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>name[0];\nname[1];\n</code></pre></div>\n<p>durch</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>name.first;\nname.last;\n</code></pre></div>\n<p>ersetzen. Andernfalls funktionieren Ihre Methoden nicht mehr.</p>"}},{"type":"prose","value":{"id":"klammernotation","title":"Klammernotation","isH3":false,"content":"<p>Die Klammernotation bietet eine alternative Möglichkeit, auf Objekteigenschaften zuzugreifen.\nAnstatt Punktnotation zu verwenden wie hier:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>person.age;\nperson.name.first;\n</code></pre></div>\n<p>Können Sie stattdessen eckige Klammern verwenden:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>person[\"age\"];\nperson[\"name\"][\"first\"];\n</code></pre></div>\n<p>Dies sieht sehr ähnlich aus wie der Zugriff auf die Elemente in einem Array, und es ist im Grunde dasselbe — anstelle einer Indexnummer zum Auswählen eines Elements verwenden Sie den Namen, der mit dem Wert eines jeden Mitglieds verbunden ist. Es ist kein Wunder, dass Objekte manchmal als <strong>assoziative Arrays</strong> bezeichnet werden — sie ordnen Zeichenfolgen zu Werten in der gleichen Weise, wie Arrays Zahlen zu Werten zuordnen.</p>\n<p>Punktnotation wird im Allgemeinen über Klammernotation bevorzugt, weil sie prägnanter und leichter zu lesen ist. Es gibt jedoch einige Fälle, in denen Sie eckige Klammern verwenden müssen. Zum Beispiel, wenn ein Objekteigenschaftsname in einer Variablen gehalten wird, können Sie mit der Punktnotation nicht auf den Wert zugreifen, aber Sie können den Wert mit der Klammernotation abrufen.</p>\n<p>Im Beispiel unten kann die <code>logProperty()</code> Funktion <code>person[propertyName]</code> verwenden, um den Wert der Eigenschaft abzurufen, die in <code>propertyName</code> genannt wird.</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const person = {\n name: [\"Bob\", \"Smith\"],\n age: 32,\n};\n\nfunction logProperty(propertyName) {\n console.log(person[propertyName]);\n}\n\nlogProperty(\"name\");\n// [\"Bob\", \"Smith\"]\nlogProperty(\"age\");\n// 32\n</code></pre></div>"}},{"type":"prose","value":{"id":"festlegen_von_objektmitgliedern","title":"Festlegen von Objektmitgliedern","isH3":false,"content":"<p>Bisher haben wir nur das Abrufen (oder <strong>Holen</strong>) von Objektmitgliedern betrachtet — Sie können auch den Wert von Objektmitgliedern <strong>setzen</strong> (aktualisieren), indem Sie das Mitglied deklarieren, das Sie setzen möchten (mit Punkt- oder Klammernotation), folgendermaßen:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>person.age = 45;\nperson[\"name\"][\"last\"] = \"Cratchit\";\n</code></pre></div>\n<p>Versuchen Sie, die obigen Zeilen einzugeben, und holen Sie sich dann die Mitglieder erneut, um zu sehen, wie sie sich geändert haben, wie folgt:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>person.age;\nperson[\"name\"][\"last\"];\n</code></pre></div>\n<p>Das Festlegen von Mitgliedern hört nicht nur beim Aktualisieren der Werte vorhandener Eigenschaften und Methoden auf; Sie können auch völlig neue Mitglieder erstellen. Versuchen Sie dies in der JS-Konsole:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>person[\"eyes\"] = \"hazel\";\nperson.farewell = function () {\n console.log(\"Bye everybody!\");\n};\n</code></pre></div>\n<p>Nun können Sie Ihre neuen Mitglieder testen:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>person[\"eyes\"];\nperson.farewell();\n// \"Bye everybody!\"\n</code></pre></div>\n<p>Ein nützlicher Aspekt der Klammernotation ist, dass sie nicht nur Mitgliedswerte dynamisch setzen kann, sondern auch Mitgliedsnamen. Angenommen, wir wollten, dass Benutzer benutzerdefinierte Werttypen in ihren Personendaten speichern können, indem sie den Mitgliedsnamen und den Wert in zwei Texteingaben eingeben. Wir könnten diese Werte so erhalten:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const myDataName = nameInput.value;\nconst myDataValue = nameValue.value;\n</code></pre></div>\n<p>Wir könnten dann diesen neuen Mitgliedsnamen und Wert dem <code>person</code>-Objekt so hinzufügen:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>person[myDataName] = myDataValue;\n</code></pre></div>\n<p>Um dies zu testen, versuchen Sie, die folgenden Zeilen in Ihren Code einzufügen, direkt unterhalb der schließenden geschweiften Klammer des <code>person</code>-Objekts:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const myDataName = \"height\";\nconst myDataValue = \"1.75m\";\nperson[myDataName] = myDataValue;\n</code></pre></div>\n<p>Jetzt speichern und aktualisieren und folgendes in Ihr Texteingabefeld eingeben:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>person.height;\n</code></pre></div>\n<p>Das Hinzufügen einer Eigenschaft zu einem Objekt mit der oben genannten Methode ist mit Punktnotation nicht möglich, die nur einen literalen Mitgliedsnamen akzeptieren kann, nicht einen Variablenwert, der auf einen Namen verweist.</p>"}},{"type":"prose","value":{"id":"was_ist_this","title":"Was ist \"this\"?","isH3":false,"content":"<p>Möglicherweise haben Sie etwas leicht Merkwürdiges in unseren Methoden bemerkt. Schauen Sie sich zum Beispiel diese an:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>introduceSelf() {\n console.log(`Hi! I'm ${this.name[0]}.`);\n}\n</code></pre></div>\n<p>Sie fragen sich wahrscheinlich, was \"this\" ist. Das <code>this</code>-Schlüsselwort bezieht sich typischerweise auf das aktuelle Objekt, in dem der Code ausgeführt wird. Im Kontext einer Objektmethode bezieht sich <code>this</code> auf das Objekt, auf dem die Methode aufgerufen wurde.</p>\n<p>Lassen Sie uns veranschaulichen, was wir meinen, mit einem vereinfachten Paar von Personenobjekten:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const person1 = {\n name: \"Chris\",\n introduceSelf() {\n console.log(`Hi! I'm ${this.name}.`);\n },\n};\n\nconst person2 = {\n name: \"Deepti\",\n introduceSelf() {\n console.log(`Hi! I'm ${this.name}.`);\n },\n};\n</code></pre></div>\n<p>In diesem Fall gibt <code>person1.introduceSelf()</code> \"Hi! I'm Chris.\" aus; <code>person2.introduceSelf()</code> gibt \"Hi! I'm Deepti.\" aus. Dies geschieht, weil, wenn die Methode aufgerufen wird, <code>this</code> sich auf das Objekt bezieht, auf dem die Methode aufgerufen wird, wodurch dieselbe Methodendefinition für mehrere Objekte funktioniert.</p>\n<p>Dies ist nicht allzu nützlich, wenn Sie Objektliterale manuell schreiben, da die Verwendung des Objektnamens (<code>person1</code> und <code>person2</code>) zum exakt gleichen Ergebnis führt, aber es wird wesentlich sein, wenn wir beginnen, <strong>Konstruktoren</strong> zu verwenden, um mehr als ein Objekt aus einer einzigen Objektdefinition zu erstellen, und das ist das Thema des nächsten Abschnitts.</p>"}},{"type":"prose","value":{"id":"einführung_in_konstruktoren","title":"Einführung in Konstruktoren","isH3":false,"content":"<p>Die Verwendung von Objektliteralen ist in Ordnung, wenn Sie nur ein Objekt erstellen müssen, aber wenn Sie mehr als eines erstellen müssen, wie im vorherigen Abschnitt, sind sie ernsthaft unzureichend. Wir müssen den gleichen Code für jedes Objekt, das wir erstellen, ausschreiben, und wenn wir einige Eigenschaften des Objekts ändern wollen — wie das Hinzufügen einer <code>height</code>-Eigenschaft — dann müssen wir daran denken, jedes Objekt zu aktualisieren.</p>\n<p>Wir hätten gerne eine Möglichkeit, die \"Form\" eines Objekts zu definieren — die Menge der Methoden und der Eigenschaften, die es haben kann — und dann beliebig viele Objekte zu erstellen, wobei wir nur die Werte für die Eigenschaften aktualisieren, die unterschiedlich sind.</p>\n<p>Die erste Version davon ist einfach eine Funktion:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>function createPerson(name) {\n const obj = {};\n obj.name = name;\n obj.introduceSelf = function () {\n console.log(`Hi! I'm ${this.name}.`);\n };\n return obj;\n}\n</code></pre></div>\n<p>Diese Funktion erstellt und gibt jedes Mal, wenn wir sie aufrufen, ein neues Objekt zurück. Das Objekt wird zwei Mitglieder haben:</p>\n<ul>\n<li>eine Eigenschaft <code>name</code></li>\n<li>eine Methode <code>introduceSelf()</code>.</li>\n</ul>\n<p>Beachten Sie, dass <code>createPerson()</code> einen Parameter <code>name</code> nimmt, um den Wert der <code>name</code>-Eigenschaft zu setzen, aber der Wert der <code>introduceSelf()</code>-Methode wird für alle Objekte, die mithilfe dieser Funktion erstellt werden, gleich sein. Dieses Muster zur Objekterstellung ist sehr gebräuchlich.</p>\n<p>Nun können wir so viele Objekte erstellen, wie wir möchten, und die Definition wiederverwenden:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const salva = createPerson(\"Salva\");\nsalva.introduceSelf();\n// \"Hi! I'm Salva.\"\n\nconst frankie = createPerson(\"Frankie\");\nfrankie.introduceSelf();\n// \"Hi! I'm Frankie.\"\n</code></pre></div>\n<p>Das funktioniert gut, ist aber etwas umständlich: Wir müssen ein leeres Objekt erstellen, es initialisieren und zurückgeben. Eine bessere Möglichkeit ist die Verwendung eines <strong>Konstruktors</strong>. Ein Konstruktor ist einfach eine Funktion, die mit dem <a href=\"/de/docs/Web/JavaScript/Reference/Operators/new\"><code>new</code></a>-Schlüsselwort aufgerufen wird. Wenn Sie einen Konstruktor aufrufen, wird er:</p>\n<ul>\n<li>ein neues Objekt erstellen</li>\n<li><code>this</code> an das neue Objekt binden, sodass Sie in Ihrem Konstruktorcode auf <code>this</code> verweisen können</li>\n<li>den Code im Konstruktor ausführen</li>\n<li>das neue Objekt zurückgeben.</li>\n</ul>\n<p>Konstruktoren beginnen konventionell mit einem Großbuchstaben und sind nach dem Typ des Objekts benannt, das sie erstellen. Wir könnten unser Beispiel also so umschreiben:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>function Person(name) {\n this.name = name;\n this.introduceSelf = function () {\n console.log(`Hi! I'm ${this.name}.`);\n };\n}\n</code></pre></div>\n<p>Um <code>Person()</code> als Konstruktor aufzurufen, verwenden wir <code>new</code>:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const salva = new Person(\"Salva\");\nsalva.introduceSelf();\n// \"Hi! I'm Salva.\"\n\nconst frankie = new Person(\"Frankie\");\nfrankie.introduceSelf();\n// \"Hi! I'm Frankie.\"\n</code></pre></div>"}},{"type":"prose","value":{"id":"sie_haben_die_ganze_zeit_objekte_verwendet","title":"Sie haben die ganze Zeit Objekte verwendet","isH3":false,"content":"<p>Während Sie diese Beispiele durchgegangen sind, haben Sie wahrscheinlich gedacht, dass die Punktnotation, die Sie verwendet haben, sehr vertraut ist. Das liegt daran, dass Sie sie während des gesamten Kurses verwendet haben! Jedes Mal, wenn wir ein Beispiel durchgearbeitet haben, das eine integrierte Browser-API oder ein JavaScript-Objekt verwendet, haben wir Objekte verwendet, da solche Funktionen genau mit den gleichen Arten von Objektstrukturen gebaut werden, die wir hier betrachtet haben, wenn auch komplexer als in unseren eigenen grundlegenden benutzerdefinierten Beispielen.</p>\n<p>Also wenn Sie String-Methoden wie:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>myString.split(\",\");\n</code></pre></div>\n<p>verwendet haben, haben Sie eine Methode verwendet, die auf einem <a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/String\"><code>String</code></a> Objekt verfügbar ist. Jedes Mal, wenn Sie in Ihrem Code eine Zeichenfolge erstellen, wird diese Zeichenfolge automatisch als eine Instanz von <code>String</code> erstellt und hat daher mehrere gängige Methoden und Eigenschaften darauf verfügbar.</p>\n<p>Wenn Sie auf das Document Object Model mit Zeilen wie dieser zugegriffen haben:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const myDiv = document.createElement(\"div\");\nconst myVideo = document.querySelector(\"video\");\n</code></pre></div>\n<p>haben Sie Methoden verwendet, die auf einem <a href=\"/de/docs/Web/API/Document\"><code>Document</code></a> Objekt verfügbar sind. Für jede geladene Webseite wird eine Instanz von <code>Document</code> erstellt, die <code>document</code> genannt wird, und die die gesamte Struktur der Seite, Inhalte und andere Funktionen wie ihre URL darstellt. Auch hier bedeutet das, dass sie mehrere gemeinsame Methoden und Eigenschaften darauf verfügbar hat.</p>\n<p>Das Gleiche gilt so ziemlich für jedes andere integrierte Objekt oder API, das Sie verwendet haben — <a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/Array\"><code>Array</code></a>, <a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/Math\"><code>Math</code></a>, und so weiter.</p>\n<p>Beachten Sie, dass eingebaute Objekte und APIs nicht immer automatisch Objektinstanzen erstellen. Als Beispiel benötigt die <a href=\"/de/docs/Web/API/Notifications_API\">Notifications API</a> – die es modernen Browsern ermöglicht, Systembenachrichtigungen auszulösen – dass Sie für jede Benachrichtigung, die Sie auslösen möchten, eine neue Objektinstanz mithilfe des Konstruktors instanziieren. Versuchen Sie, das folgende in Ihre JavaScript-Konsole einzugeben:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const myNotification = new Notification(\"Hello!\");\n</code></pre></div>"}},{"type":"prose","value":{"id":"testen_sie_ihre_fähigkeiten!","title":"Testen Sie Ihre Fähigkeiten!","isH3":false,"content":"<p>Sie haben das Ende dieses Artikels erreicht, aber können Sie sich an die wichtigsten Informationen erinnern? Sie finden einige weitere Tests, um zu überprüfen, ob Sie diese Informationen beibehalten haben, bevor Sie fortfahren — siehe <a href=\"/de/docs/Learn_web_development/Core/Scripting/Test_your_skills:_Object_basics\">Testen Sie Ihre Fähigkeiten: Objektgrundlagen</a>.</p>"}},{"type":"prose","value":{"id":"zusammenfassung","title":"Zusammenfassung","isH3":false,"content":"<p>Nun sollten Sie eine gute Vorstellung davon haben, wie Sie mit Objekten in JavaScript arbeiten — einschließlich der Erstellung Ihrer eigenen einfachen Objekte. Sie sollten auch schätzen, dass Objekte sehr nützlich als Strukturen zum Speichern verwandter Daten und Funktionalitäten sind — wenn Sie versuchen würden, alle Eigenschaften und Methoden in unserem <code>person</code>-Objekt als separate Variablen und Funktionen zu verfolgen, wäre das ineffizient und frustrierend, und wir würden riskieren, mit anderen Variablen und Funktionen, die die gleichen Namen haben, zu kollidieren. Objekte ermöglichen es uns, die Informationen sicher in ihrem eigenen Paket, abseits aller Gefahren, aufzubewahren.</p>\n<p>Im nächsten Artikel werden wir uns mit <strong>DOM-Scripting</strong> befassen, das eine große Menge an grundlegenden Browser-API-Funktionalitäten freischaltet.</p>\n<ul class=\"prev-next\"><li><a class=\"button secondary\" href=\"/de/docs/Learn_web_development/Core/Scripting/Image_gallery\"><span class=\"button-wrap\"> Zurück </span></a></li><li><a class=\"button secondary\" href=\"/de/docs/Learn_web_development/Core/Scripting\"><span class=\"button-wrap\"> Übersicht: Dynamisches Skripting mit JavaScript</span></a></li><li><a class=\"button secondary\" href=\"/de/docs/Learn_web_development/Core/Scripting/DOM_scripting\"><span class=\"button-wrap\"> Weiter </span></a></li></ul>"}}],"isActive":true,"isMarkdown":true,"isTranslated":true,"locale":"de","mdn_url":"/de/docs/Learn_web_development/Core/Scripting/Object_basics","modified":"2025-02-17T00:20:27.000Z","native":"Deutsch","noIndexing":false,"other_translations":[{"locale":"en-US","title":"JavaScript object basics","native":"English (US)"},{"locale":"es","title":"Conceptos básicos de los objetos JavaScript","native":"Español"},{"locale":"fr","title":"Les bases de JavaScript, orienté objet","native":"Français"},{"locale":"ja","title":"JavaScript オブジェクトの基本","native":"日本語"},{"locale":"ko","title":"JavaScript 객체 기본","native":"한국어"},{"locale":"pt-BR","title":"O básico sobre objetos JavaScript","native":"Português (do Brasil)"},{"locale":"ru","title":"Основы объектов в JavaScript","native":"Русский"},{"locale":"zh-CN","title":"JavaScript 对象基础","native":"中文 (简体)"},{"locale":"zh-TW","title":"JavaScript 物件基礎概念","native":"正體中文 (繁體)"}],"pageTitle":"JavaScript-Objektgrundlagen - Lernen Sie Webentwicklung | MDN","parents":[{"uri":"/de/docs/Learn_web_development","title":"Lernen Sie Webentwicklung"},{"uri":"/de/docs/Learn_web_development/Core","title":"Kern-Lernmodule"},{"uri":"/de/docs/Learn_web_development/Core/Scripting","title":"Dynamisches Skripting mit JavaScript"},{"uri":"/de/docs/Learn_web_development/Core/Scripting/Object_basics","title":"JavaScript-Objektgrundlagen"}],"popularity":null,"short_title":"JavaScript-Objektgrundlagen","sidebarHTML":"<ol><li class=\"section\"><a href=\"/de/docs/Learn_web_development/Getting_started\">Einstiegsmodule</a></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Getting_started/Environment_setup\">Umgebung einrichten</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software\">Installation grundlegender Software</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web\">Surfen im Web</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors\">Code-Editor</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files\">Umgang mit Dateien</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Environment_setup/Command_line\">Leitfaden für die Befehlszeilen-Einführung</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Getting_started/Your_first_website\">Ihre erste Website</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like\">Wie wird Ihre Website aussehen?</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content\">HTML: Erstellen der Inhalte</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content\">CSS: Gestaltung des Inhalts</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity\">JavaScript: Interaktivität hinzufügen</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website\">Veröffentlichen Ihrer Website</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Getting_started/Web_standards\">Webstandards</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works\">How the web works</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model\">Das Modell der Webstandards</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites\">Wie Browser Websites laden</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Getting_started/Soft_skills\">Soziale Kompetenzen</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning\">Forschung und Lernen</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork\">Zusammenarbeit und Teamarbeit</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes\">Workflows und Prozesse</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Soft_skills/Job_interviews\">Erfolgreich in Vorstellungsgesprächen</a></li></ol></details></li><li class=\"section\"><a href=\"/de/docs/Learn_web_development/Core\">Kernmodule</a></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Core/Structuring_content\">Inhalte mit HTML strukturieren</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax\">Grundlegende HTML-Syntax</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata\">Was befindet sich im Kopf? Metadaten einer Webseite</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs\">Überschriften und Absätze in HTML</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance\">Hervorhebung und Wichtigkeit</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Lists\">Listen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Structuring_documents\">Strukturierung von Dokumenten</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features\">Erweiterte Textfunktionen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Creating_links\">Erstellen von Links</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter\">Herausforderung: Eine E-Mail korrekt auszeichnen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content\">Herausforderung: Strukturierung einer Inhaltsseite</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/HTML_images\">HTML-Bilder</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio\">HTML video und audio</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Mozilla_splash_page\">Herausforderung: Mozilla Splash-Seite</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics\">Grundlagen von HTML-Tabellen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Table_accessibility\">Barrierefreiheit von HTML-Tabellen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Planet_data_table\">Herausforderung: Strukturierung einer Planeten-Datentabelle</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/HTML_forms\">Formulare und Schaltflächen in HTML</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Debugging_HTML\">Debugging von HTML</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Core/Styling_basics\">Grundlagen des CSS-Stylings</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/What_is_CSS\">Was ist CSS?</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Getting_started\">Einstieg in CSS</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Styling_a_bio_page\">Herausforderung: Gestaltung einer Biografie-Seite</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Basic_selectors\">Grundlagen der CSS-Selektoren</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Attribute_selectors\">Attribut-Selektoren</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Pseudo_classes_and_elements\">Pseudoklassen und Pseudoelemente</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Combinators\">Kombinatoren</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Box_model\">Das Box-Modell</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts\">Umgang mit Konflikten</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Values_and_units\">CSS-Werte und -Einheiten</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Sizing\">Größenbestimmung von Elementen in CSS</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders\">Hintergründe und Rahmen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Overflow\">Überlaufender Inhalt</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Images_media_forms\">Bilder, Medien und Formularelemente</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Tables\">Tabellen stylen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS\">Debugging CSS</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Fundamental_CSS_comprehension\">Herausforderung: Grundlegendes CSS-Verständnis</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Fancy_letterheaded_paper\">Herausforderung: Erstellung eines ansprechenden Briefpapiers</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Cool-looking_box\">Herausforderung: Eine cool aussehende Box</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Core/Text_styling\">CSS-Textgestaltung</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Core/Text_styling/Fundamentals\">Grundlegendes zur Text- und Schriftgestaltung</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Text_styling/Styling_lists\">Listen gestalten</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Text_styling/Styling_links\">Gestaltung von Links</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Text_styling/Web_fonts\">Webfonts</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Text_styling/Typesetting_a_homepage\">Herausforderung: Setzen einer Startseite für eine Gemeinschaftsschule</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Core/CSS_layout\">CSS-Layout</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Introduction\">Einführung in CSS-Layout</a></li><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Floats\">Floats</a></li><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Positioning\">Platzierung</a></li><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Flexbox\">Flexbox</a></li><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Grids\">CSS-Grid-Layout</a></li><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Responsive_Design\">Responsives Design</a></li><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Media_queries\">Grundlagen von Media Query</a></li><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Fundamental_Layout_Comprehension\">Herausforderung: Grundlegendes Verständnis von Layouts</a></li></ol></details></li><li class=\"toggle\"><details open=\"\"><summary><a href=\"/de/docs/Learn_web_development/Core/Scripting\">Dynamisches Scripting mit JavaScript</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/What_is_JavaScript\">Was ist JavaScript?</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/A_first_splash\">Erster Einblick in JavaScript</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/What_went_wrong\">Was ist schiefgelaufen? JavaScript-Fehlerbehebung</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Variables\">Speichern der benötigten Informationen — Variablen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Math\">Grundlegende Mathematik in JavaScript – Zahlen und Operatoren</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Strings\">Umgang mit Text — Zeichenketten in JavaScript</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Useful_string_methods\">Nützliche String-Methoden</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Arrays\">Arrays</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Silly_story_generator\">Herausforderung: Blödsinnige Geschichtengenerator</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Conditionals\">Entscheidungen in Ihrem Code treffen — Konditionalen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Loops\">Code-Schleifen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Functions\">Funktionen — wiederverwendbare Codeblöcke</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Build_your_own_function\">Erstellen Sie Ihre eigene Funktion</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Return_values\">Funktionsrückgabewerte</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Events\">Einführung in Ereignisse</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Event_bubbling\">Ereignis-Bubbling</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Image_gallery\">Herausforderung: Bildergalerie</a></li><li><em><a href=\"/de/docs/Learn_web_development/Core/Scripting/Object_basics\" aria-current=\"page\">JavaScript-Objektgrundlagen</a></em></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/DOM_scripting\">Einführung in DOM-Scripting</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Network_requests\">Netzwerkanfragen mit JavaScript</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/JSON\">Arbeiten mit JSON</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Debugging_JavaScript\">Debugging JavaScript and handling errors</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries\">JavaScript-Frameworks und -Bibliotheken</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/Introduction\">Einführung in client-seitige Frameworks</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/Main_features\">Hauptmerkmale von Frameworks</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/React_getting_started\">Erste Schritte mit React</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/React_todo_list_beginning\">Beginn unserer React To-Do-Liste</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/React_components\">Komponenten in unserer React-App erstellen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_events_state\">React Interaktivität: Events und State</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_filtering_conditional_rendering\">Reaktivität in React: Bearbeiten, Filtern, bedingtes Rendern</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/React_accessibility\">Barrierefreiheit in React</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/React_resources\">React-Ressourcen</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Core/Accessibility\">Barrierefreiheit</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/What_is_accessibility\">Was ist Barrierefreiheit?</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/Tooling\">Barrierefreiheitstools und unterstützende Technologien</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/HTML\">HTML: Eine gute Grundlage für Barrierefreiheit</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript\">CSS and JavaScript Zugänglichkeitsbest Practices</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/WAI-ARIA_basics\">WAI-ARIA Grundlagen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/Multimedia\">Barrierefreie Multimedia-Inhalte</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/Mobile\">Mobile Accessibility</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/Accessibility_troubleshooting\">Herausforderung: Barrierefreiheits-Fehlerbehebung</a></li></ol></details></li><li><a href=\"/de/docs/Learn_web_development/Core/Design_for_developers\">Design für Entwickler:innen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Version_control\">Versionskontrolle</a></li><li class=\"section\"><a href=\"/de/docs/Learn_web_development/Extensions\">Erweiterungsmodule</a></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects\">Advanced JavaScript objects</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes\">Objektprototypen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object-oriented_programming\">Objektorientierte Programmierung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript\">Klassen in JavaScript</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice\">Objektbaupraxis</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Adding_bouncing_balls_features\">Herausforderung: Hinzufügen von Funktionen zu unserem hüpfenden Ball-Demo</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_APIs\">Client-seitige Web-APIs</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction\">Einführung in Web-APIs</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs\">Video- und Audio-APIs</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics\">Zeichnen von Grafiken</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage\">Client-seitiger Speicher</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs\">Third-party APIs</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Async_JS\">Asynchrones JavaScript</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Async_JS/Introducing\">Einführung in asynchrones JavaScript</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Async_JS/Promises\">Anleitung zur Verwendung von Promises</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Async_JS/Implementing_a_promise-based_API\">Wie man eine Promise-basierte API implementiert</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Async_JS/Introducing_workers\">Einführung in Worker</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Async_JS/Sequencing_animations\">Herausforderung: Animationen sequenzieren</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Forms\">Webformulare — Arbeiten mit Benutzerdaten</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/Your_first_form\">Ihr erstes Formular</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/How_to_structure_a_web_form\">Wie man ein Webformular strukturiert</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls\">Grundlegende native Formularsteuerungen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/HTML5_input_types\">Die HTML5-Eingabetypen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/Other_form_controls\">Andere Formularelemente</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/Styling_web_forms\">Styling von Webformularen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling\">Fortgeschrittenes Formular-Styling</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/UI_pseudo-classes\">UI-Pseudoklassen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/Form_validation\">Client-seitige Formularvalidierung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data\">Senden von Formulardaten</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_tools\">Verständnis für clientseitige Tools</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_tools/Overview\">Überblick über Client-seitige Tools</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_tools/Package_management\">Grundlagen des Paketmanagements</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain\">Einführung in eine vollständige Werkzeugkette</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_tools/Deployment\">Bereitstellung unserer App</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Server-side\">Serverseitige Programmierung</a></summary><ol><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/First_steps\">Erste Schritte auf der Serverseite</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Introduction\">Einführung in die Server-Seite</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview\">Überblick über Client-Server</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks\">Server-seitige Web-Frameworks</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security\">Website-Sicherheit</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django\">Django Web-Framework (Python)</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Introduction\">Einführung in Django</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/development_environment\">Einrichten einer Django-Entwicklungsumgebung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Tutorial_local_library_website\">Django Tutorial: Die Website der lokalen Bibliothek</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/skeleton_website\">Django-Tutorial Teil 2: Erstellen einer Skelett-Website</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Models\">Django Tutorial Teil 3: Verwenden von Modellen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Admin_site\">Django Tutorial Teil 4: Die Django Admin-Seite</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Home_page\">Django Tutorial Teil 5: Erstellen unserer Homepage</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Generic_views\">Django Tutorial Teil 6: Generische Listen- und Detailansichten</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Sessions\">Django-Tutorial Teil 7: Sitzungs-Framework</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Authentication\">Django-Tutorial Teil 8: Benutzer-Authentifizierung und -Berechtigungen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Forms\">Django Tutorial Teil 9: Arbeiten mit Formularen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Testing\">Django Tutorial Teil 10: Testen einer Django-Webanwendung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Deployment\">Django-Tutorial Teil 11: Bereitstellung von Django für die Produktion</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/web_application_security\">Django Webanwendungssicherheit</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/django_assessment_blog\">Bewertung: DIY Django Mini-Blog</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs\">Express Web-Framework (Node.js)</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Introduction\">Einführung in Express/Node</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/development_environment\">Einrichten einer Node-Entwicklungsumgebung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Tutorial_local_library_website\">Express Tutorial: Die Website der lokalen Bibliothek</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website\">Express-Tutorial Teil 2: Erstellen einer Skelett-Website</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose\">Express-Tutorial Teil 3: Verwendung einer Datenbank (mit Mongoose)</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes\">Express Tutorial Teil 4: Routen und Controller</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data\">Express Tutorial Teil 5: Bibliotheksdaten anzeigen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms\">Express Tutorial Teil 6: Arbeiten mit Formularen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment\">Express Tutorial Teil 7: Bereitstellung im Produktionsumfeld</a></li></ol></details></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Performance\">Web-Performance</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/why_web_performance\">Das \"Warum\" der Web-Performance</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/What_is_web_performance\">Was ist Web-Performance?</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/Perceived_performance\">Wahrgenommene Leistung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/Measuring_performance\">Leistungsmessung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/Multimedia\">Multimedia: Bilder</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/video\">Multimedia: video</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/JavaScript\">JavaScript-Leistungsoptimierung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/HTML\">HTML-Performance-Optimierung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/CSS\">CSS-Leistungsoptimierung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/business_case_for_performance\">Der geschäftliche Nutzen der Web-Performance</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Testing\">Tests</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Testing/Introduction\">Einführung in das Cross-Browser-Testing</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Testing/Testing_strategies\">Strategien zur Durchführung von Tests</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS\">Umgang mit häufigen HTML- und CSS-Problemen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Testing/Feature_detection\">Implementierung der Funktionsprüfung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Testing/Automated_testing\">Einführung in automatisiertes Testen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment\">Einrichtung Ihrer eigenen Testautomatisierungsumgebung</a></li></ol></details></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Transform_animate\">CSS transformieren und animieren</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Security_privacy\">Sicherheit und Datenschutz</a></li><li class=\"section\">Weitere Ressourcen</li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Howto\">Häufige Probleme lösen</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Howto/Solve_HTML_problems\">Häufige HTML-Probleme lösen</a></li><li><a href=\"/de/docs/Learn_web_development/Howto/Solve_CSS_problems\">Häufige CSS-Probleme lösen</a></li><li><a href=\"/de/docs/Learn_web_development/Howto/Solve_JavaScript_problems\">Häufige JavaScript-Probleme lösen</a></li><li><a href=\"/de/docs/Learn_web_development/Howto/Web_mechanics\">Webmechanik</a></li><li><a href=\"/de/docs/Learn_web_development/Howto/Tools_and_setup\">Tools und Einrichtung</a></li><li><a href=\"/de/docs/Learn_web_development/Howto/Design_and_accessibility\">Design und Barrierefreiheit</a></li></ol></details></li><li><a href=\"/de/docs/Learn_web_development/About\">Über</a></li><li><a href=\"/de/docs/Learn_web_development/Educators\">Ressourcen für Lehrkräfte</a></li><li><a href=\"/de/docs/Learn_web_development/Changelog\">Änderungsprotokoll</a></li></ol>","source":{"folder":"de/learn_web_development/core/scripting/object_basics","github_url":"https://github.com/mdn/translated-content-de/blob/main/files/de/learn_web_development/core/scripting/object_basics/index.md","last_commit_url":"https://github.com/mdn/translated-content-de/commit/452fe502cfb4c9a91c346af17370ecfb6a8bd17e","filename":"index.md"},"summary":"In diesem Artikel betrachten wir die grundlegende JavaScript-Objektsyntax und wiederholen einige JavaScript-Funktionen, die wir bereits früher im Kurs gesehen haben. Dadurch wird verdeutlicht, dass viele der Funktionen, mit denen Sie bereits umgegangen sind, Objekte sind.","title":"JavaScript-Objektgrundlagen","toc":[{"text":"Objektgrundlagen","id":"objektgrundlagen"},{"text":"Punktnotation","id":"punktnotation"},{"text":"Klammernotation","id":"klammernotation"},{"text":"Festlegen von Objektmitgliedern","id":"festlegen_von_objektmitgliedern"},{"text":"Was ist \"this\"?","id":"was_ist_this"},{"text":"Einführung in Konstruktoren","id":"einführung_in_konstruktoren"},{"text":"Sie haben die ganze Zeit Objekte verwendet","id":"sie_haben_die_ganze_zeit_objekte_verwendet"},{"text":"Testen Sie Ihre Fähigkeiten!","id":"testen_sie_ihre_fähigkeiten!"},{"text":"Zusammenfassung","id":"zusammenfassung"}],"pageType":"learn-module-chapter"}}</script></body></html>