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>Speichern der benötigten Informationen — Variablen - Webentwicklung lernen | MDN</title><link rel="alternate" title="Storing the information you need — Variables" href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Variables" hrefLang="en"/><link rel="alternate" title="Almacenando la información que necesitas - Variables" href="https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/Variables" hrefLang="es"/><link rel="alternate" title="Stocker les informations nécessaires — les variables" href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/First_steps/Variables" hrefLang="fr"/><link rel="alternate" title="必要な情報を保管する — 変数" href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Variables" hrefLang="ja"/><link rel="alternate" title="필요한 정보를 저장하기 - 변수" href="https://developer.mozilla.org/ko/docs/Learn/JavaScript/First_steps/Variables" hrefLang="ko"/><link rel="alternate" title="Armazenando as informações que você precisa — Variáveis" href="https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/First_steps/Variables" hrefLang="pt"/><link rel="alternate" title="Переменные - место хранения необходимой информации" href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/First_steps/Variables" hrefLang="ru"/><link rel="alternate" title="如何存储你需要的信息——变量" href="https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/Variables" hrefLang="zh"/><link rel="alternate" title="存儲你需要的資訊 - 變數" href="https://developer.mozilla.org/zh-TW/docs/Learn/JavaScript/First_steps/Variables" hrefLang="zh-Hant"/><link rel="alternate" title="Speichern der benötigten Informationen — Variablen" href="https://developer.mozilla.org/de/docs/Learn/JavaScript/First_steps/Variables" 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="robots" content="noindex, follow"/><meta name="description" content="Nachdem Sie die letzten Artikel gelesen haben, sollten Sie nun wissen, was JavaScript ist, was es für Sie tun kann, wie Sie es zusammen mit anderen Webtechnologien verwenden und wie seine Hauptfunktionen aus einer hohen Perspektive aussehen. In diesem Artikel gehen wir zu den wirklichen Grundlagen und schauen uns an, wie man mit den grundlegendsten Bausteinen von JavaScript arbeitet — Variablen."/><meta property="og:url" content="https://developer.mozilla.org/de/docs/Learn/JavaScript/First_steps/Variables"/><meta property="og:title" content="Speichern der benötigten Informationen — Variablen - Webentwicklung lernen | MDN"/><meta property="og:type" content="website"/><meta property="og:locale" content="de"/><meta property="og:description" content="Nachdem Sie die letzten Artikel gelesen haben, sollten Sie nun wissen, was JavaScript ist, was es für Sie tun kann, wie Sie es zusammen mit anderen Webtechnologien verwenden und wie seine Hauptfunktionen aus einer hohen Perspektive aussehen. In diesem Artikel gehen wir zu den wirklichen Grundlagen und schauen uns an, wie man mit den grundlegendsten Bausteinen von JavaScript arbeitet — Variablen."/><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/JavaScript/First_steps/Variables"/><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.95536068.js"></script><link href="/static/css/main.959b5ea9.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="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="guides-button" class="top-level-entry menu-toggle" aria-controls="guides-menu" aria-expanded="false">Guides</button><a href="/de/docs/Learn" class="top-level-entry">Guides</a><ul id="guides-menu" class="submenu guides hidden inline-submenu-lg" aria-labelledby="guides-button"><li class="apis-link-container mobile-only "><a href="/de/docs/Learn" 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" 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/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">Learn to structure web content with HTML</p></div></a></li><li class="css-link-container "><a href="/de/docs/Learn/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">Learn to style content using CSS</p></div></a></li><li class="javascript-link-container "><a href="/de/docs/Learn/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">Learn to run scripts in the browser</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">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%2FJavaScript%2FFirst_steps%2FVariables" class="login-link" rel="nofollow">Log in</a></li><li><a href="/users/fxa/login/authenticate/?next=%2Fde%2Fdocs%2FLearn%2FJavaScript%2FFirst_steps%2FVariables" 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" class="breadcrumb" property="item" typeof="WebPage"><span property="name">Webentwicklung lernen</span></a><meta property="position" content="1"/></li><li property="itemListElement" typeof="ListItem"><a href="/de/docs/Learn/JavaScript" class="breadcrumb" property="item" typeof="WebPage"><span property="name">JavaScript — Dynamisches clientseitiges Scripting</span></a><meta property="position" content="2"/></li><li property="itemListElement" typeof="ListItem"><a href="/de/docs/Learn/JavaScript/First_steps" class="breadcrumb" property="item" typeof="WebPage"><span property="name">JavaScript erste Schritte</span></a><meta property="position" content="3"/></li><li property="itemListElement" typeof="ListItem"><a href="/de/docs/Learn/JavaScript/First_steps/Variables" class="breadcrumb-current-page" property="item" typeof="WebPage"><span property="name">Speichern der benötigten Informationen — Variablen</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/JavaScript/First_steps/Variables" class="button submenu-item"><span>English (US)</span></a></li><li class=" "><a data-locale="es" href="/es/docs/Learn/JavaScript/First_steps/Variables" class="button submenu-item"><span>Español</span></a></li><li class=" "><a data-locale="fr" href="/fr/docs/Learn/JavaScript/First_steps/Variables" class="button submenu-item"><span>Français</span></a></li><li class=" "><a data-locale="ja" href="/ja/docs/Learn/JavaScript/First_steps/Variables" class="button submenu-item"><span>日本語</span></a></li><li class=" "><a data-locale="ko" href="/ko/docs/Learn/JavaScript/First_steps/Variables" class="button submenu-item"><span>한국어</span></a></li><li class=" "><a data-locale="pt-BR" href="/pt-BR/docs/Learn/JavaScript/First_steps/Variables" class="button submenu-item"><span>Português (do Brasil)</span></a></li><li class=" "><a data-locale="ru" href="/ru/docs/Learn/JavaScript/First_steps/Variables" class="button submenu-item"><span>Русский</span></a></li><li class=" "><a data-locale="zh-CN" href="/zh-CN/docs/Learn/JavaScript/First_steps/Variables" class="button submenu-item"><span>中文 (简体)</span></a></li><li class=" "><a data-locale="zh-TW" href="/zh-TW/docs/Learn/JavaScript/First_steps/Variables" 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" data-macro="LearnSidebar"><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="#werkzeuge_die_sie_benötigen">Werkzeuge, die Sie benötigen</a></li><li class="document-toc-item "><a class="document-toc-link" href="#was_ist_eine_variable">Was ist eine Variable?</a></li><li class="document-toc-item "><a class="document-toc-link" href="#eine_variable_deklarieren">Eine Variable deklarieren</a></li><li class="document-toc-item "><a class="document-toc-link" href="#eine_variable_initialisieren">Eine Variable initialisieren</a></li><li class="document-toc-item "><a class="document-toc-link" href="#eine_anmerkung_zu_var">Eine Anmerkung zu var</a></li><li class="document-toc-item "><a class="document-toc-link" href="#eine_variable_aktualisieren">Eine Variable aktualisieren</a></li><li class="document-toc-item "><a class="document-toc-link" href="#variablentypen">Variablentypen</a></li><li class="document-toc-item "><a class="document-toc-link" href="#dynamisches_typing">Dynamisches Typing</a></li><li class="document-toc-item "><a class="document-toc-link" href="#konstanten_in_javascript">Konstanten in JavaScript</a></li><li class="document-toc-item "><a class="document-toc-link" href="#wann_sollte_man_const_und_wann_let_verwenden">Wann sollte man const und wann let verwenden</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/Getting_started_with_the_web">Komplette Anfänger beginnen hier!</a></li><li><details><summary>Erste Schritte mit dem Web</summary><ol><li><a href="/de/docs/Learn/Getting_started_with_the_web">Einführung ins Web</a></li><li><a href="/de/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installation von grundlegender Software</a></li><li><a href="/de/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Wie wird Ihre Website aussehen?</a></li><li><a href="/de/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Umgang mit Dateien</a></li><li><a href="/de/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML-Grundlagen</a></li><li><a href="/de/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS-Grundlagen</a></li><li><a href="/de/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript-Grundlagen</a></li><li><a href="/de/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Veröffentlichung Ihrer Website</a></li><li><a href="/de/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Wie das Web funktioniert</a></li></ol></details></li><li class="section"><a href="/de/docs/Learn/HTML">HTML — Strukturierung des Webs</a></li><li><details><summary>Einführung in HTML</summary><ol><li><a href="/de/docs/Learn/HTML/Introduction_to_HTML">Einführung in HTML</a></li><li><a href="/de/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Erste Schritte mit HTML</a></li><li><a href="/de/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Was ist im Kopfbereich? Metadaten in HTML</a></li><li><a href="/de/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Grundlagen des HTML-Textes</a></li><li><a href="/de/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Erstellen von Hyperlinks</a></li><li><a href="/de/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Erweiterte Textformatierung</a></li><li><a href="/de/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Struktur eines Dokuments und einer Website</a></li><li><a href="/de/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li><li><a href="/de/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Markierung eines Briefes</a></li><li><a href="/de/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Die Strukturierung einer Seite mit Inhalt</a></li></ol></details></li><li><details><summary>Multimedia und Einbettung</summary><ol><li><a href="/de/docs/Learn/HTML/Multimedia_and_embedding">Multimedia und Einbettung</a></li><li><a href="/de/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Bilder in HTML</a></li><li><a href="/de/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video- und Audioinhalte</a></li><li><a href="/de/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">Von Objekt zu iframe — andere Einbettungstechnologien</a></li><li><a href="/de/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Vektorgrafiken zum Web hinzufügen</a></li><li><a href="/de/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive Images</a></li><li><a href="/de/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla Splash-Seite</a></li></ol></details></li><li><details><summary>HTML-Tabellen</summary><ol><li><a href="/de/docs/Learn/HTML/Tables">HTML-Tabellen</a></li><li><a href="/de/docs/Learn/HTML/Tables/Basics">HTML Table Grundlagen</a></li><li><a href="/de/docs/Learn/HTML/Tables/Advanced">Erweiterte Funktionen und Barrierefreiheit von HTML-Tabellen</a></li><li><a href="/de/docs/Learn/HTML/Tables/Structuring_planet_data">Strukturierung von Planeten-Daten</a></li></ol></details></li><li class="section"><a href="/de/docs/Learn/CSS">CSS — Gestaltung des Webs</a></li><li><details><summary>CSS erste Schritte</summary><ol><li><a href="/de/docs/Learn/CSS/First_steps">Erste Schritte mit CSS</a></li><li><a href="/de/docs/Learn/CSS/First_steps/What_is_CSS">Was ist CSS?</a></li><li><a href="/de/docs/Learn/CSS/First_steps/Getting_started">Einstieg in CSS</a></li><li><a href="/de/docs/Learn/CSS/First_steps/How_CSS_is_structured">Wie CSS strukturiert ist</a></li><li><a href="/de/docs/Learn/CSS/First_steps/How_CSS_works">Wie CSS funktioniert</a></li><li><a href="/de/docs/Learn/CSS/First_steps/Styling_a_biography_page">Eine Biografieseite stylen</a></li></ol></details></li><li><details><summary>CSS-Bausteine</summary><ol><li><a href="/de/docs/Learn/CSS/Building_blocks">CSS-Grundbausteine</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Selectors">CSS-Selektoren</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Typ-, Klassen- und ID-Selektoren</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attributselektoren</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-Klassen und Pseudo-Elemente</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Kombinatoren</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaskade, Spezifität und Vererbung</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Cascade_layers">Kaskadenschichten</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/The_box_model">Das Boxmodell</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Hintergründe und Rahmen</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Umgang mit unterschiedlichen Textausrichtungen</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Overflowing_content">Überlaufender Inhalt</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Values_and_units">CSS-Werte und Einheiten</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Größe von Elementen in CSS</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Bilder, Medien und Formularelemente</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Styling_tables">Tabellen stylen</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Advanced_styling_effects">Erweiterte Styling-Effekte</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Organizing">Organisieren Ihres CSS</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Fundamental_CSS_comprehension">Grundlegendes CSS-Verständnis</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper">Erstellen von stilvollem Briefpapier</a></li><li><a href="/de/docs/Learn/CSS/Building_blocks/A_cool_looking_box">Eine cool aussehende Box</a></li></ol></details></li><li><details><summary>Textgestaltung</summary><ol><li><a href="/de/docs/Learn/CSS/Styling_text">CSS Textgestaltung</a></li><li><a href="/de/docs/Learn/CSS/Styling_text/Fundamentals">Grundlegende Text- und Schriftgestaltung</a></li><li><a href="/de/docs/Learn/CSS/Styling_text/Styling_lists">Listen stilisieren</a></li><li><a href="/de/docs/Learn/CSS/Styling_text/Styling_links">Styling von Links</a></li><li><a href="/de/docs/Learn/CSS/Styling_text/Web_fonts">Web-Fonts</a></li><li><a href="/de/docs/Learn/CSS/Styling_text/Typesetting_a_homepage">Setzen einer Community-Schul-Startseite</a></li></ol></details></li><li><details><summary>CSS-Layout</summary><ol><li><a href="/de/docs/Learn/CSS/CSS_layout">CSS-Layout</a></li><li><a href="/de/docs/Learn/CSS/CSS_layout/Introduction">Einführung in CSS Layout</a></li><li><a href="/de/docs/Learn/CSS/CSS_layout/Normal_Flow">Normaler Fluss</a></li><li><a href="/de/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li><li><a href="/de/docs/Learn/CSS/CSS_layout/Grids">Raster</a></li><li><a href="/de/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li><li><a href="/de/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li><li><a href="/de/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Mehrspaltiges Layout</a></li><li><a href="/de/docs/Learn/CSS/CSS_layout/Responsive_Design">Responsives Design</a></li><li><a href="/de/docs/Learn/CSS/CSS_layout/Media_queries">Einsteigerleitfaden für Media Queries</a></li><li><a href="/de/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy-Layout-Methoden</a></li><li><a href="/de/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Unterstützung älterer Browser</a></li><li><a href="/de/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Grundlegendes Verständnis von Layouts</a></li></ol></details></li><li class="section"><a href="/de/docs/Learn/JavaScript">JavaScript — Dynamisches clientseitiges Skripting</a></li><li><details open=""><summary>JavaScript erste Schritte</summary><ol><li><a href="/de/docs/Learn/JavaScript/First_steps">JavaScript erste Schritte</a></li><li><a href="/de/docs/Learn/JavaScript/First_steps/What_is_JavaScript">Was ist JavaScript?</a></li><li><a href="/de/docs/Learn/JavaScript/First_steps/A_first_splash">Ein erster Sprung in JavaScript</a></li><li><a href="/de/docs/Learn/JavaScript/First_steps/What_went_wrong">Was ist schiefgelaufen? JavaScript-Fehlerbehebung</a></li><li><em><a href="/de/docs/Learn/JavaScript/First_steps/Variables" aria-current="page">Speichern der benötigten Informationen — Variablen</a></em></li><li><a href="/de/docs/Learn/JavaScript/First_steps/Math">Grundlegende Mathematik in JavaScript – Zahlen und Operatoren</a></li><li><a href="/de/docs/Learn/JavaScript/First_steps/Strings">Umgang mit Text — Strings in JavaScript</a></li><li><a href="/de/docs/Learn/JavaScript/First_steps/Useful_string_methods">Nützliche String-Methoden</a></li><li><a href="/de/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li><li><a href="/de/docs/Learn/JavaScript/First_steps/Silly_story_generator">Silly Story Generator</a></li></ol></details></li><li><details><summary>JavaScript-Bausteine</summary><ol><li><a href="/de/docs/Learn/JavaScript/Building_blocks">JavaScript-Bausteine</a></li><li><a href="/de/docs/Learn/JavaScript/Building_blocks/conditionals">Entscheidungen in Ihrem Code treffen — Bedingte Anweisungen</a></li><li><a href="/de/docs/Learn/JavaScript/Building_blocks/Looping_code">Schleifen-Code</a></li><li><a href="/de/docs/Learn/JavaScript/Building_blocks/Functions">Funktionen — wiederverwendbare Codeblöcke</a></li><li><a href="/de/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Erstellen Sie Ihre eigene Funktion</a></li><li><a href="/de/docs/Learn/JavaScript/Building_blocks/Return_values">Funktionsrückgabewerte</a></li><li><a href="/de/docs/Learn/JavaScript/Building_blocks/Events">Einführung in Ereignisse</a></li><li><a href="/de/docs/Learn/JavaScript/Building_blocks/Event_bubbling">Event bubbling</a></li><li><a href="/de/docs/Learn/JavaScript/Building_blocks/Image_gallery">Bildgalerie</a></li></ol></details></li><li><details><summary>Einführung in JavaScript-Objekte</summary><ol><li><a href="/de/docs/Learn/JavaScript/Objects">Einführung in JavaScript-Objekte</a></li><li><a href="/de/docs/Learn/JavaScript/Objects/Basics">JavaScript Objekt Grundlagen</a></li><li><a href="/de/docs/Learn/JavaScript/Objects/Object_prototypes">Objektprototypen</a></li><li><a href="/de/docs/Learn/JavaScript/Objects/Object-oriented_programming">Objektorientierte Programmierung</a></li><li><a href="/de/docs/Learn/JavaScript/Objects/Classes_in_JavaScript">Klassen in JavaScript</a></li><li><a href="/de/docs/Learn/JavaScript/Objects/JSON">Arbeiten mit JSON</a></li><li><a href="/de/docs/Learn/JavaScript/Objects/Object_building_practice">Objekt-Baupraxis</a></li><li><a href="/de/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Hinzufügen von Funktionen zu unserem hüpfenden Kugeln-Demo</a></li></ol></details></li><li><details><summary>Asynchrones JavaScript</summary><ol><li><a href="/de/docs/Learn/JavaScript/Asynchronous">Asynchrones JavaScript</a></li><li><a href="/de/docs/Learn/JavaScript/Asynchronous/Introducing">Einführung in asynchrones JavaScript</a></li><li><a href="/de/docs/Learn/JavaScript/Asynchronous/Promises">Anleitung zur Verwendung von Promises</a></li><li><a href="/de/docs/Learn/JavaScript/Asynchronous/Implementing_a_promise-based_API">Anleitung zur Implementierung einer Promise-basierten API</a></li><li><a href="/de/docs/Learn/JavaScript/Asynchronous/Introducing_workers">Einführung in Workers</a></li><li><a href="/de/docs/Learn/JavaScript/Asynchronous/Sequencing_animations">Sequenzierung von Animationen</a></li></ol></details></li><li><details><summary>Client-seitige Web-APIs</summary><ol><li><a href="/de/docs/Learn/JavaScript/Client-side_web_APIs">Client-Side-Web-APIs</a></li><li><a href="/de/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Einführung in Web-APIs</a></li><li><a href="/de/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipulating documents</a></li><li><a href="/de/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Abrufen von Daten vom Server</a></li><li><a href="/de/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">Third-party APIs</a></li><li><a href="/de/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Grafiken zeichnen</a></li><li><a href="/de/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">Video- und Audio-APIs</a></li><li><a href="/de/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">Client-side storage</a></li></ol></details></li><li class="section"><a href="/de/docs/Learn/Forms">Webformulare — Arbeiten mit Benutzerdaten</a></li><li><details><summary>Grundlagen der Webformulare</summary><ol><li><a href="/de/docs/Learn/Forms">Bausteine für Webformulare</a></li><li><a href="/de/docs/Learn/Forms/Your_first_form">Ihr erstes Formular</a></li><li><a href="/de/docs/Learn/Forms/How_to_structure_a_web_form">Wie Sie ein Webformular strukturieren</a></li><li><a href="/de/docs/Learn/Forms/Basic_native_form_controls">Basis-Native Formularelemente</a></li><li><a href="/de/docs/Learn/Forms/HTML5_input_types">Die HTML5 input Typen</a></li><li><a href="/de/docs/Learn/Forms/Other_form_controls">Andere Formularelemente</a></li><li><a href="/de/docs/Learn/Forms/Styling_web_forms">Styling von Webformularen</a></li><li><a href="/de/docs/Learn/Forms/Advanced_form_styling">Erweiterte Formular-Stilgestaltung</a></li><li><a href="/de/docs/Learn/Forms/UI_pseudo-classes">UI-Pseudo-Klassen</a></li><li><a href="/de/docs/Learn/Forms/Form_validation">Client-seitige Formularvalidierung</a></li><li><a href="/de/docs/Learn/Forms/Sending_and_retrieving_form_data">Senden von Formulardaten</a></li></ol></details></li><li><details><summary>Erweiterte Techniken für Webformulare</summary><ol><li><a href="/de/docs/Learn/Forms/How_to_build_custom_form_controls">Anleitung zur Erstellung benutzerdefinierter Formularelemente</a></li><li><a href="/de/docs/Learn/Forms/Sending_forms_through_JavaScript">Versenden von Formularen über JavaScript</a></li><li><a href="/de/docs/Learn/Forms/Property_compatibility_table_for_form_controls">CSS-Eigenschaftskompatibilitätstabelle für Formularelemente</a></li><li><a href="/de/docs/Learn/Forms/HTML_forms_in_legacy_browsers">HTML-Formulare in älteren Browsern</a></li></ol></details></li><li class="section"><a href="/de/docs/Learn/Accessibility">Barrierefreiheit — Das Web für alle nutzbar machen</a></li><li><details><summary>Barrierefreiheitsleitfäden</summary><ol><li><a href="/de/docs/Learn/Accessibility">Barrierefreiheit</a></li><li><a href="/de/docs/Learn/Accessibility/What_is_accessibility">Was ist Barrierefreiheit?</a></li><li><a href="/de/docs/Learn/Accessibility/HTML">HTML: Eine gute Grundlage für Barrierefreiheit</a></li><li><a href="/de/docs/Learn/Accessibility/CSS_and_JavaScript">CSS und JavaScript: Barrierefreiheits-Best Practices</a></li><li><a href="/de/docs/Learn/Accessibility/WAI-ARIA_basics">Grundlagen von WAI-ARIA</a></li><li><a href="/de/docs/Learn/Accessibility/Multimedia">Barrierefreie Multimedia</a></li><li><a href="/de/docs/Learn/Accessibility/Mobile">Barrierefreiheit auf Mobilgeräten</a></li><li><a href="/de/docs/Learn/Accessibility/Accessibility_troubleshooting">Bewertung: Barrierefreiheits-Troubleshooting</a></li></ol></details></li><li class="section"><a href="/de/docs/Learn/Performance">Leistung — Websites schnell und reaktionsschnell machen</a></li><li><details><summary>Leitfäden zur Leistung</summary><ol><li><a href="/de/docs/Learn/Performance">Webleistung</a></li><li><a href="/de/docs/Learn/Performance/why_web_performance">Der 'Warum' der Web-Performance</a></li><li><a href="/de/docs/Learn/Performance/What_is_web_performance">Was ist Web-Performance?</a></li><li><a href="/de/docs/Learn/Performance/Perceived_performance">Wahrgenommene Leistung</a></li><li><a href="/de/docs/Learn/Performance/Measuring_performance">Messung der Performance</a></li><li><a href="/de/docs/Learn/Performance/Multimedia">Multimedia: Bilder</a></li><li><a href="/de/docs/Learn/Performance/video">Multimedia: Video</a></li><li><a href="/de/docs/Learn/Performance/JavaScript">JavaScript-Leistungsoptimierung</a></li><li><a href="/de/docs/Learn/Performance/HTML">HTML-Leistungsoptimierung</a></li><li><a href="/de/docs/Learn/Performance/CSS">CSS-Leistungsoptimierung</a></li><li><a href="/de/docs/Learn/Performance/business_case_for_performance">Der geschäftliche Nutzen von Web-Performance</a></li></ol></details></li><li class="section"><a href="/de/docs/Learn/MathML">MathML — Schreiben von Mathematik mit MathML</a></li><li><details><summary>MathML erste Schritte</summary><ol><li><a href="/de/docs/Learn/MathML/First_steps">Erste Schritte mit MathML</a></li><li><a href="/de/docs/Learn/MathML/First_steps/Getting_started">Erste Schritte mit MathML</a></li><li><a href="/de/docs/Learn/MathML/First_steps/Text_containers">MathML Text-Container</a></li><li><a href="/de/docs/Learn/MathML/First_steps/Fractions_and_roots">MathML-Brüche und -Wurzeln</a></li><li><a href="/de/docs/Learn/MathML/First_steps/Scripts">MathML gescriptete Elemente</a></li><li><a href="/de/docs/Learn/MathML/First_steps/Tables">MathML-Tabellen</a></li><li><a href="/de/docs/Learn/MathML/First_steps/Three_famous_mathematical_formulas">Drei berühmte mathematische Formeln</a></li></ol></details></li><li class="section"><a href="/de/docs/Learn/../Games">Spiele — Entwicklung von Spielen für das Web</a></li><li><details><summary>Anleitungen und Tutorials</summary><ol><li><a href="/de/docs/Games/Introduction">Einführung in die Spieleentwicklung für das Web</a></li><li><a href="/de/docs/Games/Techniques">Techniken für die Spieleentwicklung</a></li><li><a href="/de/docs/Games/Tutorials">Tutorials</a></li><li><a href="/de/docs/Games/Publishing_games">Publishing Games</a></li></ol></details></li><li class="section"><a href="/de/docs/Learn/Tools_and_testing">Werkzeuge und Tests</a></li><li><details><summary>Client-seitige Webentwicklungstools</summary><ol><li><a href="/de/docs/Learn/Tools_and_testing/Understanding_client-side_tools">Verständnis von Client-seitigen Webentwicklungstools</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview">Übersicht über clientseitige Werkzeuge</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">Crashkurs zur Kommandozeile</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management">Grundlagen des Paketmanagements</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_complete_toolchain">Einführung in eine vollständige Toolchain</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment">Bereitstellung unserer App</a></li></ol></details></li><li><details><summary>Einführung in client-seitige Frameworks</summary><ol><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Einführung in client-seitige Frameworks</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">Hauptmerkmale von Frameworks</a></li></ol></details></li><li><details><summary>React</summary><ol><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Erste Schritte mit React</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">Beginn unserer React-Task-Liste</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">Komponentisieren unserer React-App</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">React-Interaktivität: Ereignisse und Status</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">React Interaktivität: Bearbeiten, Filtern, bedingtes Rendering</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">Accessibility in React</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">React-Ressourcen</a></li></ol></details></li><li><details><summary>Ember</summary><ol><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Einstieg in Ember</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Ember App-Struktur und Komponentisierung</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Ember-Interaktivität: Events, Klassen und Zustand</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Ember Interaktivität: Footer-Funktionalität, bedingtes Rendering</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Routing in Ember</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Ember-Ressourcen und Fehlerbehebung</a></li></ol></details></li><li><details><summary>Vue</summary><ol><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Einstieg in Vue</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">Erstellen unserer ersten Vue-Komponente</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">Rendering einer Liste von Vue-Komponenten</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">Hinzufügen eines neuen Todo-Formulars: Vue-Ereignisse, Methoden und Modelle</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">Styling von Vue-Komponenten mit CSS</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">Verwendung von Vue computed properties</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Vue bedingte Darstellung: Bearbeitung bestehender Todos</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">Vue-Refs und Lifecycle-Methoden zur Fokusverwaltung</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Vue-Ressourcen</a></li></ol></details></li><li><details><summary>Svelte</summary><ol><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started">Erste Schritte mit Svelte</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning">Starten unserer Svelte-Tasklisten-App</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props">Dynamisches Verhalten in Svelte: Arbeiten mit Variablen und Props</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components">Komponentisierung unserer Svelte-App</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility">Fortgeschrittenes Svelte: Reaktivität, Lebenszyklus, Barrierefreiheit</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores">Arbeiten mit Svelte Stores</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript">TypeScript-Unterstützung in Svelte</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next">Bereitstellung und nächste Schritte</a></li></ol></details></li><li><details><summary>Angular</summary><ol><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started">Erste Schritte mit Angular</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning">Anfang unserer Angular-To-Do-Liste-App</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling">Styling unserer Angular-Anwendung</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_item_component">Erstellen einer Item-Komponente</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_filtering">Filtern unserer To-Do-Elemente</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_building">Building Angular applications and further resources</a></li></ol></details></li><li><details><summary>Git und GitHub</summary><ol><li><a href="/de/docs/Learn/Tools_and_testing/GitHub">Git und GitHub</a></li></ol></details></li><li><details><summary>Cross-Browser-Tests</summary><ol><li><a href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing">Cross-Browser-Testing</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">Einführung in das Cross-Browser-Testing</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">Strategien zur Durchführung von Tests</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">Umgang mit häufigen HTML- und CSS-Problemen</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Umgang mit häufigen JavaScript-Problemen</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Umgang mit häufigen Problemen der Barrierefreiheit</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">Implementierung von Feature-Erkennung</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">Einführung in automatisiertes Testen</a></li><li><a href="/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Einrichten Ihrer eigenen Testautomatisierungsumgebung</a></li></ol></details></li><li class="section"><a href="/de/docs/Learn/Server-side">Server-seitige Webprogrammierung</a></li><li><details><summary>Erste Schritte</summary><ol><li><a href="/de/docs/Learn/Server-side/First_steps">Server-seitige Website-Programmierung: Erste Schritte</a></li><li><a href="/de/docs/Learn/Server-side/First_steps/Introduction">Einführung in die serverseitige Programmierung</a></li><li><a href="/de/docs/Learn/Server-side/First_steps/Client-Server_overview">Überblick über Client-Server</a></li><li><a href="/de/docs/Learn/Server-side/First_steps/Web_frameworks">Serverseitige Web-Frameworks</a></li><li><a href="/de/docs/Learn/Server-side/First_steps/Website_security">Website-Sicherheit</a></li></ol></details></li><li><details><summary>Django Web-Framework (Python)</summary><ol><li><a href="/de/docs/Learn/Server-side/Django">Django Web Framework (Python)</a></li><li><a href="/de/docs/Learn/Server-side/Django/Introduction">Einführung in Django</a></li><li><a href="/de/docs/Learn/Server-side/Django/development_environment">Einrichten einer Django-Entwicklungsumgebung</a></li><li><a href="/de/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django-Tutorial: Die Local Library Website</a></li><li><a href="/de/docs/Learn/Server-side/Django/skeleton_website">Django-Tutorial Teil 2: Erstellung einer Skelett-Website</a></li><li><a href="/de/docs/Learn/Server-side/Django/Models">Django-Tutorial Teil 3: Verwenden von Modellen</a></li><li><a href="/de/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Teil 4: Django Admin-Seite</a></li><li><a href="/de/docs/Learn/Server-side/Django/Home_page">Django-Tutorial Teil 5: Erstellen unserer Startseite</a></li><li><a href="/de/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Teil 6: Generische Listen- und Detailansichten</a></li><li><a href="/de/docs/Learn/Server-side/Django/Sessions">Django-Tutorial Teil 7: Sessions-Framework</a></li><li><a href="/de/docs/Learn/Server-side/Django/Authentication">Django-Tutorial Teil 8: Benutzer-Authentifizierung und Berechtigungen</a></li><li><a href="/de/docs/Learn/Server-side/Django/Forms">Django Tutorial Teil 9: Arbeiten mit Formularen</a></li><li><a href="/de/docs/Learn/Server-side/Django/Testing">Django Tutorial Teil 10: Testen einer Django-Webanwendung</a></li><li><a href="/de/docs/Learn/Server-side/Django/Deployment">Django-Tutorial Teil 11: Django in Produktion bereitstellen</a></li><li><a href="/de/docs/Learn/Server-side/Django/web_application_security">Django-Webanwendungssicherheit</a></li><li><a href="/de/docs/Learn/Server-side/Django/django_assessment_blog">Bewertung: DIY Django Mini-Blog</a></li></ol></details></li><li><details><summary>Express Web-Framework (Node.js/JavaScript)</summary><ol><li><a href="/de/docs/Learn/Server-side/Express_Nodejs">Express-Webframework (Node.js/JavaScript)</a></li><li><a href="/de/docs/Learn/Server-side/Express_Nodejs/Introduction">Einführung in Express/Node</a></li><li><a href="/de/docs/Learn/Server-side/Express_Nodejs/development_environment">Einrichtung einer Node-Entwicklungsumgebung</a></li><li><a href="/de/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express-Tutorial: Die Website der lokalen Bibliothek</a></li><li><a href="/de/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express Tutorial Teil 2: Erstellung einer Grundstruktur für eine Website</a></li><li><a href="/de/docs/Learn/Server-side/Express_Nodejs/mongoose">Express Tutorial Teil 3: Verwendung einer Datenbank (mit Mongoose)</a></li><li><a href="/de/docs/Learn/Server-side/Express_Nodejs/routes">Express Tutorial Teil 4: Routen und Controller</a></li><li><a href="/de/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Teil 5: Bibliotheksdaten anzeigen</a></li><li><a href="/de/docs/Learn/Server-side/Express_Nodejs/forms">Express Tutorial Teil 6: Arbeiten mit Formularen</a></li><li><a href="/de/docs/Learn/Server-side/Express_Nodejs/deployment">Express-Tutorial Teil 7: Bereitstellung für die Produktion</a></li></ol></details></li><li class="section"><a href="/de/docs/Learn/Common_questions">Weitere Ressourcen</a></li><li><details><summary>Häufige Fragen</summary><ol><li><a href="/de/docs/Learn/Common_questions">Häufige Fragen</a></li><li><a href="/de/docs/Learn/HTML/Howto">HTML verwenden, um häufige Probleme zu lösen</a></li><li><a href="/de/docs/Learn/CSS/Howto">CSS verwenden, um häufige Probleme zu lösen</a></li><li><a href="/de/docs/Learn/JavaScript/Howto">Lösen Sie häufige Probleme in Ihrem JavaScript-Code</a></li><li><a href="/de/docs/Learn/Common_questions/Web_mechanics">Web-Mechanik</a></li><li><a href="/de/docs/Learn/Common_questions/Tools_and_setup">Tools und Einrichtung</a></li><li><a href="/de/docs/Learn/Common_questions/Design_and_accessibility">Design und Barrierefreiheit</a></li></ol></details></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="#werkzeuge_die_sie_benötigen">Werkzeuge, die Sie benötigen</a></li><li class="document-toc-item "><a class="document-toc-link" href="#was_ist_eine_variable">Was ist eine Variable?</a></li><li class="document-toc-item "><a class="document-toc-link" href="#eine_variable_deklarieren">Eine Variable deklarieren</a></li><li class="document-toc-item "><a class="document-toc-link" href="#eine_variable_initialisieren">Eine Variable initialisieren</a></li><li class="document-toc-item "><a class="document-toc-link" href="#eine_anmerkung_zu_var">Eine Anmerkung zu var</a></li><li class="document-toc-item "><a class="document-toc-link" href="#eine_variable_aktualisieren">Eine Variable aktualisieren</a></li><li class="document-toc-item "><a class="document-toc-link" href="#variablentypen">Variablentypen</a></li><li class="document-toc-item "><a class="document-toc-link" href="#dynamisches_typing">Dynamisches Typing</a></li><li class="document-toc-item "><a class="document-toc-link" href="#konstanten_in_javascript">Konstanten in JavaScript</a></li><li class="document-toc-item "><a class="document-toc-link" href="#wann_sollte_man_const_und_wann_let_verwenden">Wann sollte man const und wann let verwenden</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>Speichern der benötigten Informationen — Variablen</h1></header><div class="section-content"><ul class="prev-next"> <li><a class="button secondary" href="/de/docs/Learn/JavaScript/First_steps/What_went_wrong"><span class="button-wrap"> Zurück </span></a></li> <li><a class="button secondary" href="/de/docs/Learn/JavaScript/First_steps"><span class="button-wrap"> Übersicht: JavaScript erste Schritte</span></a></li> <li><a class="button secondary" href="/de/docs/Learn/JavaScript/First_steps/Math"><span class="button-wrap"> Weiter </span></a></li> </ul> <p>Nachdem Sie die letzten Artikel gelesen haben, sollten Sie nun wissen, was JavaScript ist, was es für Sie tun kann, wie Sie es zusammen mit anderen Webtechnologien verwenden und wie seine Hauptfunktionen aus einer hohen Perspektive aussehen. In diesem Artikel gehen wir zu den wirklichen Grundlagen und schauen uns an, wie man mit den grundlegendsten Bausteinen von JavaScript arbeitet — Variablen.</p> <figure class="table-container"><table> <tbody> <tr> <th scope="row">Voraussetzungen:</th> <td> Grundverständnis von HTML und CSS sowie Verständnis davon, was JavaScript ist. </td> </tr> <tr> <th scope="row">Ziel:</th> <td>Vertrautheit mit den Grundlagen der JavaScript-Variablen erlangen.</td> </tr> </tbody> </table></figure></div><section aria-labelledby="werkzeuge_die_sie_benötigen"><h2 id="werkzeuge_die_sie_benötigen"><a href="#werkzeuge_die_sie_benötigen">Werkzeuge, die Sie benötigen</a></h2><div class="section-content"><p>Im Verlauf dieses Artikels werden Sie gebeten, Codezeilen einzugeben, um Ihr Verständnis des Inhalts zu testen. Wenn Sie einen Desktop-Browser verwenden, ist der beste Ort, um Ihren Beispielcode einzugeben, die JavaScript-Konsole Ihres Browsers (siehe <a href="/de/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools">Was sind Entwicklerwerkzeuge im Browser</a> für weitere Informationen, wie Sie auf dieses Werkzeug zugreifen können).</p></div></section><section aria-labelledby="was_ist_eine_variable"><h2 id="was_ist_eine_variable"><a href="#was_ist_eine_variable">Was ist eine Variable?</a></h2><div class="section-content"><p>Eine Variable ist ein Container für einen Wert, wie beispielsweise eine Zahl, die wir in einer Rechnung verwenden könnten, oder ein String, den wir als Teil eines Satzes verwenden könnten.</p></div></section><section aria-labelledby="beispiel_für_eine_variable"><h3 id="beispiel_für_eine_variable"><a href="#beispiel_für_eine_variable">Beispiel für eine Variable</a></h3><div class="section-content"><p>Lassen Sie uns ein Beispiel ansehen:</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><button id="button_A">Press me</button> <h3 id="heading_A"></h3> </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const buttonA = document.querySelector("#button_A"); const headingA = document.querySelector("#heading_A"); let count = 1; buttonA.onclick = () => { buttonA.textContent = "Try again!"; headingA.textContent = `${count} clicks so far`; count += 1; }; </code></pre></div><div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="Variable example sample" id="frame_variable_example" width="100%" height="120" src="about:blank" data-live-path="/de/docs/Learn/JavaScript/First_steps/Variables" data-live-id="variable_example" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div> <p>In diesem Beispiel führt das Drücken des Buttons Code aus. Zuerst ändert es den Text auf dem Button selbst. Zweitens zeigt es eine Nachricht über die Anzahl der Male an, die der Button gedrückt wurde. Die Zahl wird in einer Variablen gespeichert. Jedes Mal, wenn der Benutzer den Button drückt, wird die Zahl in der Variablen um eins erhöht.</p></div></section><section aria-labelledby="ohne_eine_variable"><h3 id="ohne_eine_variable"><a href="#ohne_eine_variable">Ohne eine Variable</a></h3><div class="section-content"><p>Um zu verstehen, warum das so nützlich ist, denken wir darüber nach, wie wir dieses Beispiel schreiben würden, ohne eine Variable zu verwenden, um die Anzahl zu speichern. Es würde in etwa so aussehen:</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html example-bad notranslate"><code><button id="button_B">Press me</button> <h3 id="heading_B"></h3> </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js example-bad notranslate"><code>const buttonB = document.querySelector("#button_B"); const headingB = document.querySelector("#heading_B"); buttonB.onclick = () => { buttonB.textContent = "Try again!"; headingB.textContent = "1 click so far"; }; </code></pre></div><div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="Without a variable sample" id="frame_without_a_variable" width="100%" height="120" src="about:blank" data-live-path="/de/docs/Learn/JavaScript/First_steps/Variables" data-live-id="without_a_variable" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div> <p>Vielleicht verstehen Sie die verwendete Syntax noch nicht vollständig, aber Sie sollten das Konzept erfassen können. Ohne eine Variable haben wir keine Möglichkeit zu wissen, wie oft der Button geklickt wurde. Die Nachricht an den Benutzer wird schnell irrelevant, wenn keine Informationen mehr gespeichert werden können.</p> <p>Variablen ergeben einfach Sinn, und je mehr Sie über JavaScript lernen, desto natürlicher wird es Ihnen erscheinen.</p> <p>Eine Besonderheit von Variablen ist, dass sie fast alles enthalten können — nicht nur Strings und Zahlen. Variablen können auch komplexe Daten und sogar ganze Funktionen enthalten, um erstaunliche Dinge zu tun. Sie werden mehr darüber erfahren, während Sie fortschreiten.</p> <div class="notecard note"> <p><strong>Hinweis:</strong> Wir sagen, dass Variablen Werte enthalten. Das ist ein wichtiger Unterschied. Variablen sind nicht die Werte selbst; sie sind Container für Werte. Sie können sich Variablen wie kleine Pappkartons vorstellen, in die Sie Dinge legen können.</p> </div> <p> <img src="/de/docs/Learn/JavaScript/First_steps/Variables/boxes.png" alt="Ein Screenshot von drei 3-dimensionalen Pappkartons, die Beispiele für JavaScript-Variablen demonstrieren. Jeder Karton enthält hypothetische Werte, die verschiedene JavaScript-Datentypen darstellen. Die Beispielwerte sind "Bob", true und 35." width="1052" height="436" loading="lazy"> </p></div></section><section aria-labelledby="eine_variable_deklarieren"><h2 id="eine_variable_deklarieren"><a href="#eine_variable_deklarieren">Eine Variable deklarieren</a></h2><div class="section-content"><p>Um eine Variable zu verwenden, müssen Sie sie zuerst erstellen — genauer gesagt, wir nennen das Deklarieren der Variable. Dazu tippen Sie das Schlüsselwort <code>let</code> gefolgt von dem Namen ein, den Sie Ihrer Variablen geben möchten:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>let myName; let myAge; </code></pre></div> <p>Hier erstellen wir zwei Variablen namens <code>myName</code> und <code>myAge</code>. Versuchen Sie, diese Zeilen in die Konsole Ihres Webbrowsers einzugeben. Danach versuchen Sie, eine Variable (oder zwei) mit eigenen Namensentscheidungen zu erstellen.</p> <div class="notecard note"> <p><strong>Hinweis:</strong> In JavaScript sollten alle Codeanweisungen mit einem Semikolon (<code>;</code>) enden — Ihr Code könnte korrekt funktionieren bei einzelnen Zeilen, aber wahrscheinlich nicht, wenn Sie mehrere Codezeilen zusammen schreiben. Versuchen Sie, sich anzugewöhnen, es hinzuzufügen.</p> </div> <p>Sie können testen, ob diese Werte nun in der Ausführungsumgebung existieren, indem Sie einfach den Variablennamen eingeben, z.B.</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>myName; myAge; </code></pre></div> <p>Derzeit haben sie keinen Wert; sie sind leere Container. Wenn Sie die Variablennamen eingeben, sollten Sie einen Wert von <code>undefined</code> zurückerhalten. Wenn sie nicht existieren, erhalten Sie eine Fehlermeldung — versuchen Sie, dies einzugeben:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>scoobyDoo; </code></pre></div> <div class="notecard note"> <p><strong>Hinweis:</strong> Verwechseln Sie eine Variable, die existiert, aber keinen definierten Wert hat, nicht mit einer Variable, die überhaupt nicht existiert — das sind sehr unterschiedliche Dinge. Im obigen Box-Beispiel würde das Nichtvorhandensein bedeuten, dass es keine Box (Variable) gibt, in die ein Wert gehen kann. Kein definierter Wert würde bedeuten, dass es eine Box gibt, aber sie keinen Wert enthält.</p> </div></div></section><section aria-labelledby="eine_variable_initialisieren"><h2 id="eine_variable_initialisieren"><a href="#eine_variable_initialisieren">Eine Variable initialisieren</a></h2><div class="section-content"><p>Nachdem Sie eine Variable deklariert haben, können Sie sie mit einem Wert initialisieren. Dies tun Sie, indem Sie den Variablennamen, gefolgt von einem Gleichheitszeichen (<code>=</code>), gefolgt von dem Wert, den Sie ihr geben möchten, tippen. Zum Beispiel:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>myName = "Chris"; myAge = 37; </code></pre></div> <p>Versuchen Sie nun, diese Zeilen in die Konsole einzugeben. Sie sollten den Wert, den Sie der Variablen zugewiesen haben, in der Konsole sehen, um es zu bestätigen. Wiederum können Sie Ihre Variablenwerte zurückgeben, indem Sie deren Namen in die Konsole eingeben — versuchen Sie dies noch einmal:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>myName; myAge; </code></pre></div> <p>Sie können eine Variable gleichzeitig deklarieren und initialisieren, wie folgt:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>let myDog = "Rover"; </code></pre></div> <p>Das ist wahrscheinlich das, was Sie die meiste Zeit tun werden, da es schneller ist, als die beiden Aktionen auf zwei getrennten Zeilen auszuführen.</p></div></section><section aria-labelledby="eine_anmerkung_zu_var"><h2 id="eine_anmerkung_zu_var"><a href="#eine_anmerkung_zu_var">Eine Anmerkung zu var</a></h2><div class="section-content"><p>Sie werden wahrscheinlich auch eine andere Methode zur Deklaration von Variablen sehen, bei der das Schlüsselwort <code>var</code> verwendet wird:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>var myName; var myAge; </code></pre></div> <p>Als JavaScript erstmals erstellt wurde, war dies die einzige Möglichkeit, Variablen zu deklarieren. Das Design von <code>var</code> ist verwirrend und fehleranfällig. Deshalb wurde <code>let</code> in modernen Versionen von JavaScript eingeführt, ein neues Schlüsselwort zur Erstellung von Variablen, das etwas anders funktioniert als <code>var</code> und dessen Probleme behebt.</p> <p>Einige einfache Unterschiede sind unten erklärt. Wir werden jetzt nicht auf alle Unterschiede eingehen, aber Sie werden sie entdecken, wenn Sie mehr über JavaScript lernen (wenn Sie wirklich jetzt schon alles über sie lesen möchten, können Sie unsere <a href="/de/docs/Web/JavaScript/Reference/Statements/let">let-Referenzseite</a> besuchen).</p> <p>Zum Beispiel, wenn Sie ein mehrzeiliges JavaScript-Programm schreiben, das eine Variable deklariert und initialisiert, können Sie tatsächlich eine Variable mit <code>var</code> deklarieren, nachdem Sie sie initialisiert haben, und es wird immer noch funktionieren. Zum Beispiel:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>myName = "Chris"; function logName() { console.log(myName); } logName(); var myName; </code></pre></div> <div class="notecard note"> <p><strong>Hinweis:</strong> Dies funktioniert nicht beim Eingeben einzelner Zeilen in eine JavaScript-Konsole, nur beim Ausführen mehrerer JavaScript-Zeilen in einem Webdokument.</p> </div> <p>Dies funktioniert wegen des <strong>Hoistings</strong> — lesen Sie <a href="/de/docs/Web/JavaScript/Reference/Statements/var#hoisting">var hoisting</a> für weitere Details zu diesem Thema.</p> <p>Das Hoisting funktioniert nicht mehr mit <code>let</code>. Wenn wir im obigen Beispiel <code>var</code> durch <code>let</code> ersetzen, würde es mit einem Fehler fehlschlagen. Das ist eine gute Sache — das Deklarieren einer Variablen, nachdem Sie sie initialisiert haben, führt zu verwirrendem, schwer verständlichem Code.</p> <p>Zweitens, wenn Sie <code>var</code> verwenden, können Sie dieselbe Variable so oft deklarieren, wie Sie möchten, aber mit <code>let</code> können Sie das nicht. Das folgende würde funktionieren:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>var myName = "Chris"; var myName = "Bob"; </code></pre></div> <p>Aber das folgende würde einen Fehler in der zweiten Zeile auslösen:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js example-bad notranslate"><code>let myName = "Chris"; let myName = "Bob"; </code></pre></div> <p>Sie müssten stattdessen dies tun:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>let myName = "Chris"; myName = "Bob"; </code></pre></div> <p>Wiederum ist dies eine sinnvolle Sprachentscheidung. Es gibt keinen Grund, Variablen neu zu deklarieren — es macht die Dinge nur verwirrender.</p> <p>Aus diesen und weiteren Gründen empfehlen wir Ihnen, <code>let</code> in Ihrem Code zu verwenden, anstatt <code>var</code>. Es sei denn, Sie schreiben ausdrücklich Unterstützung für sehr alte Browser, es gibt keinen Grund mehr, <code>var</code> zu verwenden, da alle modernen Browser <code>let</code> seit 2015 unterstützen.</p> <div class="notecard note"> <p><strong>Hinweis:</strong> Wenn Sie diesen Code in der Konsole Ihres Browsers ausprobieren, bevorzugen Sie bitte, jeden der Codeblöcke hier als Ganzes zu kopieren & einzufügen. Es gibt eine <a href="https://docs.google.com/document/d/1NP_FnHr4WCZRp7exgUklvNiXrH3nujcfwvp2pzMQ8-0/edit#heading=h.7y5hynxk52e9" class="external" target="_blank">Funktion in der Chrome-Konsole</a>, bei der Variablen-Neudeklarationen mit <code>let</code> und <code>const</code> erlaubt sind:</p> <pre class="brush: plain notranslate">> let myName = "Chris"; let myName = "Bob"; // Als eine Eingabe: SyntaxError: Identifier 'myName' has already been declared > let myName = "Chris"; > let myName = "Bob"; // Als zwei Eingaben: beide erfolgreich </pre> </div></div></section><section aria-labelledby="eine_variable_aktualisieren"><h2 id="eine_variable_aktualisieren"><a href="#eine_variable_aktualisieren">Eine Variable aktualisieren</a></h2><div class="section-content"><p>Sobald eine Variable mit einem Wert initialisiert wurde, können Sie diesen Wert ändern (oder aktualisieren), indem Sie ihr einen anderen Wert zuweisen. Versuchen Sie, die folgenden Zeilen in Ihre Konsole einzugeben:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>myName = "Bob"; myAge = 40; </code></pre></div></div></section><section aria-labelledby="eine_randbemerkung_zu_variablenbenennungsregeln"><h3 id="eine_randbemerkung_zu_variablenbenennungsregeln"><a href="#eine_randbemerkung_zu_variablenbenennungsregeln">Eine Randbemerkung zu Variablenbenennungsregeln</a></h3><div class="section-content"><p>Sie können eine Variable so ziemlich nennen, wie Sie möchten, aber es gibt Einschränkungen. Generell sollten Sie darauf achten, nur lateinische Zeichen (0-9, a-z, A-Z) und den Unterstrich zu benutzen.</p> <ul> <li>Sie sollten keine anderen Zeichen verwenden, da sie Fehler verursachen oder für ein internationales Publikum schwer verständlich sein können.</li> <li>Verwenden Sie keine Unterstriche zu Beginn von Variablennamen — dies wird in bestimmten JavaScript-Konstrukten verwendet, um bestimmte Dinge zu bedeuten, und kann verwirrend sein.</li> <li>Verwenden Sie keine Zahlen am Anfang von Variablen. Das ist nicht erlaubt und verursacht einen Fehler.</li> <li>Eine sichere Konvention ist <a href="/de/docs/Glossary/Camel_case">lower camel case</a>, bei der Sie mehrere Wörter verbinden und für das gesamte erste Wort Kleinbuchstaben verwenden und dann die folgenden Wörter groß schreiben. Wir haben das für unsere Variablennamen im Artikel bisher verwendet.</li> <li>Machen Sie Variablennamen intuitiv, damit sie die Daten beschreiben, die sie enthalten. Verwenden Sie nicht nur einzelne Buchstaben/Zahlen oder lange Phrasen.</li> <li>Variablen sind case-sensitive — also ist <code>myage</code> eine andere Variable als <code>myAge</code>.</li> <li>Ein letzter Punkt: Sie müssen auch vermeiden, reservierte JavaScript-Wörter als Ihre Variablennamen zu verwenden — damit meinen wir die Wörter, die die eigentliche Syntax von JavaScript ausmachen! Also können Sie keine Wörter wie <code>var</code>, <code>function</code>, <code>let</code> und <code>for</code> als Variablennamen verwenden. Browser erkennen sie als verschiedene Codeelemente und daher erhalten Sie Fehler.</li> </ul> <div class="notecard note"> <p><strong>Hinweis:</strong> Sie finden eine ziemlich vollständige Liste der reservierten Schlüsselwörter, die Sie vermeiden sollten, unter <a href="/de/docs/Web/JavaScript/Reference/Lexical_grammar#keywords">Lexikalische Grammatik — Schlüsselwörter</a>.</p> </div> <p>Gute Namensbeispiele:</p> <pre class="brush: plain example-good notranslate">age myAge init initialColor finalOutputValue audio1 audio2 </pre> <p>Schlechte Namensbeispiele:</p> <pre class="brush: plain example-bad notranslate">1 a _12 myage MYAGE var Document skjfndskjfnbdskjfb thisisareallylongvariablenameman </pre> <p>Versuchen Sie nun, einige weitere Variablen zu erstellen, mit den obigen Richtlinien im Hinterkopf.</p></div></section><section aria-labelledby="variablentypen"><h2 id="variablentypen"><a href="#variablentypen">Variablentypen</a></h2><div class="section-content"><p>Es gibt einige verschiedene Datentypen, die wir in Variablen speichern können. In diesem Abschnitt werden wir diese kurz beschreiben, bevor Sie sie in kommenden Artikeln detaillierter kennenlernen.</p></div></section><section aria-labelledby="zahlen"><h3 id="zahlen"><a href="#zahlen">Zahlen</a></h3><div class="section-content"><p>Sie können Zahlen in Variablen speichern, entweder ganze Zahlen wie 30 (auch Integer genannt) oder Dezimalzahlen wie 2.456 (auch Fließkommazahlen genannt). Sie müssen die Variablentypen in JavaScript nicht deklarieren, im Gegensatz zu einigen anderen Programmiersprachen. Wenn Sie einer Variablen einen zahlenwertigen Wert geben, schließen Sie ihn nicht in Anführungszeichen ein:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>let myAge = 17; </code></pre></div></div></section><section aria-labelledby="strings"><h3 id="strings"><a href="#strings">Strings</a></h3><div class="section-content"><p>Strings sind Textstücke. Wenn Sie einer Variablen einen String-Wert geben, müssen Sie ihn in einfache oder doppelte Anführungszeichen einschließen; andernfalls versucht JavaScript, es als einen anderen Variablennamen zu interpretieren.</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>let dolphinGoodbye = "So long and thanks for all the fish"; </code></pre></div></div></section><section aria-labelledby="booleans"><h3 id="booleans"><a href="#booleans">Booleans</a></h3><div class="section-content"><p>Booleans sind Wahrheitswerte — sie können zwei Werte haben, <code>true</code> oder <code>false</code>. Diese werden in der Regel verwendet, um eine Bedingung zu testen, nach der der Code entsprechend ausgeführt wird. Ein einfaches Beispiel wäre:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>let iAmAlive = true; </code></pre></div> <p>Während es in Wirklichkeit eher so verwendet würde:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>let test = 6 < 3; </code></pre></div> <p>Hierbei wird der "kleiner als"-Operator (<code><</code>) verwendet, um zu testen, ob 6 kleiner als 3 ist. Wie Sie vielleicht erwarten, gibt es <code>false</code> zurück, da 6 nicht kleiner als 3 ist! Sie werden später im Kurs viel mehr über solche Operatoren erfahren.</p></div></section><section aria-labelledby="arrays"><h3 id="arrays"><a href="#arrays">Arrays</a></h3><div class="section-content"><p>Ein Array ist ein einzelnes Objekt, das mehrere Werte in eckigen Klammern enthält, die durch Kommas getrennt sind. Versuchen Sie, die folgenden Zeilen in Ihre Konsole einzugeben:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>let myNameArray = ["Chris", "Bob", "Jim"]; let myNumberArray = [10, 15, 40]; </code></pre></div> <p>Sobald diese Arrays definiert sind, können Sie auf jeden Wert durch deren Position im Array zugreifen. Versuchen Sie diese Zeilen:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>myNameArray[0]; // should return 'Chris' myNumberArray[2]; // should return 40 </code></pre></div> <p>Die eckigen Klammern geben einen Indexwert an, der der Position des gewünschten zurückgegebenen Werts entspricht. Sie haben vielleicht bemerkt, dass Arrays in JavaScript nullbasiert sind: das erste Element befindet sich an Index 0.</p> <p>Um mehr zu erfahren, sehen Sie sich unseren Artikel über <a href="/de/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a> an.</p></div></section><section aria-labelledby="objekte"><h3 id="objekte"><a href="#objekte">Objekte</a></h3><div class="section-content"><p>In der Programmierung ist ein Objekt eine Struktur aus Code, die ein reales Objekt modelliert. Sie können ein Objekt haben, das eine Box darstellt und Informationen über dessen Breite, Länge und Höhe enthält, oder Sie könnten ein Objekt haben, das eine Person darstellt und Daten über deren Namen, Größe, Gewicht, welche Sprache sie spricht, wie man sie begrüßt, und mehr enthält.</p> <p>Versuchen Sie, die folgende Zeile in Ihrer Konsole einzugeben:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>let dog = { name: "Spot", breed: "Dalmatian" }; </code></pre></div> <p>Um die im Objekt gespeicherten Informationen abzurufen, können Sie die folgende Syntax verwenden:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>dog.name; </code></pre></div> <p>Weitere Informationen zu diesem Thema finden Sie im <a href="/de/docs/Learn/JavaScript/Objects">Einführungsmodul zu JavaScript-Objekten</a>.</p></div></section><section aria-labelledby="dynamisches_typing"><h2 id="dynamisches_typing"><a href="#dynamisches_typing">Dynamisches Typing</a></h2><div class="section-content"><p>JavaScript ist eine "dynamisch typisierte Sprache", was bedeutet, dass Sie im Gegensatz zu einigen anderen Sprachen nicht angeben müssen, welcher Datentyp eine Variable enthält (Zahlen, Strings, Arrays, etc.).</p> <p>Wenn Sie beispielsweise eine Variable deklarieren und ihr einen in Anführungszeichen eingeschlossenen Wert zuweisen, behandelt der Browser die Variable als String:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>let myString = "Hello"; </code></pre></div> <p>Selbst wenn der in Anführungszeichen eingeschlossene Wert nur Ziffern ist, ist es trotzdem ein String — keine Zahl — also seien Sie vorsichtig:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>let myNumber = "500"; // oops, this is still a string typeof myNumber; myNumber = 500; // much better — now this is a number typeof myNumber; </code></pre></div> <p>Versuchen Sie, die vier Zeilen oben einzeln in Ihre Konsole einzugeben, und sehen Sie, was die Ergebnisse sind. Ihnen wird auffallen, dass wir einen speziellen Operator verwenden, genannt <a href="/de/docs/Web/JavaScript/Reference/Operators/typeof"><code>typeof</code></a> — dieser gibt den Datentyp der Variable zurück, die Sie danach eingeben. Das erste Mal sollte er <code>string</code> zurückgeben, da zu diesem Zeitpunkt die <code>myNumber</code>-Variable einen String enthält, <code>'500'</code>. Schauen Sie mal, was er beim zweiten Aufruf zurückgibt.</p></div></section><section aria-labelledby="konstanten_in_javascript"><h2 id="konstanten_in_javascript"><a href="#konstanten_in_javascript">Konstanten in JavaScript</a></h2><div class="section-content"><p>Neben Variablen können Sie auch Konstanten deklarieren. Diese sind wie Variablen, außer dass:</p> <ul> <li>Sie sie bei der Deklaration initialisieren müssen</li> <li>Sie ihnen nach der Initialisierung keinen neuen Wert zuweisen können.</li> </ul> <p>Beispielsweise können Sie mit <code>let</code> eine Variable ohne Initialisierung deklarieren:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>let count; </code></pre></div> <p>Wenn Sie versuchen, dies mit <code>const</code> zu tun, erhalten Sie einen Fehler:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js example-bad notranslate"><code>const count; </code></pre></div> <p>Ebenso können Sie mit <code>let</code> eine Variable initialisieren und ihr dann einen neuen Wert zuweisen (dies wird auch <em>Umzuweisung</em> der Variable genannt):</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>let count = 1; count = 2; </code></pre></div> <p>Wenn Sie versuchen, dies mit <code>const</code> zu tun, erhalten Sie einen Fehler:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js example-bad notranslate"><code>const count = 1; count = 2; </code></pre></div> <p>Beachten Sie, dass, obwohl in JavaScript eine Konstante immer denselben Wert benennen muss, Sie den Inhalt des Werts, den sie benennt, ändern können. Das ist für einfache Typen wie Zahlen oder Booleans nicht nützlich, aber betrachten Sie ein Objekt:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const bird = { species: "Kestrel" }; console.log(bird.species); // "Kestrel" </code></pre></div> <p>Sie können die Eigenschaften eines Objekts aktualisieren, hinzufügen oder entfernen, das mit <code>const</code> deklariert wurde, weil die Konstante zwar immer noch auf dasselbe Objekt zeigt, der Inhalt des Objekts sich jedoch geändert hat:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>bird.species = "Striated Caracara"; console.log(bird.species); // "Striated Caracara" </code></pre></div></div></section><section aria-labelledby="wann_sollte_man_const_und_wann_let_verwenden"><h2 id="wann_sollte_man_const_und_wann_let_verwenden"><a href="#wann_sollte_man_const_und_wann_let_verwenden">Wann sollte man const und wann let verwenden</a></h2><div class="section-content"><p>Wenn man mit <code>const</code> nicht so viel machen kann wie mit <code>let</code>, warum sollte man es dann lieber verwenden? Tatsächlich ist <code>const</code> sehr nützlich. Wenn Sie <code>const</code> verwenden, um einen Wert zu benennen, sagt es jedem, der Ihren Code liest, dass dieser Name niemals einem anderen Wert zugewiesen wird. Jedes Mal, wenn sie diesen Namen sehen, wissen sie, worauf er sich bezieht.</p> <p>In diesem Kurs verwenden wir folgendes Prinzip, wann <code>let</code> und wann <code>const</code> verwendet werden sollte:</p> <p><em>Verwenden Sie <code>const</code>, wenn Sie können, und verwenden Sie <code>let</code>, wenn Sie müssen.</em></p> <p>Das bedeutet, dass, wenn Sie eine Variable bei der Deklaration initialisieren können und sie später nicht neu zuweisen müssen, machen Sie sie zu einer Konstante.</p></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 die wichtigsten Informationen merken? Sie finden einige weitere Tests, um zu überprüfen, ob Sie dieses Wissen behalten haben, bevor Sie weitermachen — siehe <a href="/de/docs/Learn/JavaScript/First_steps/Test_your_skills:_variables">Testen Sie Ihre Fähigkeiten: Variablen</a>.</p></div></section><section aria-labelledby="zusammenfassung"><h2 id="zusammenfassung"><a href="#zusammenfassung">Zusammenfassung</a></h2><div class="section-content"><p>Bis jetzt sollten Sie eine angemessene Menge über JavaScript-Variablen und deren Erstellung wissen. Im nächsten Artikel werden wir uns im Detail mit Zahlen befassen und uns ansehen, wie man grundlegende Mathematik in JavaScript betreibt.</p><ul class="prev-next"> <li><a class="button secondary" href="/de/docs/Learn/JavaScript/First_steps/What_went_wrong"><span class="button-wrap"> Zurück </span></a></li> <li><a class="button secondary" href="/de/docs/Learn/JavaScript/First_steps"><span class="button-wrap"> Übersicht: JavaScript erste Schritte</span></a></li> <li><a class="button secondary" href="/de/docs/Learn/JavaScript/First_steps/Math"><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/javascript/first_steps/variables/index.md?plain=1" title="Folder: de/learn/javascript/first_steps/variables (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%2FJavaScript%2FFirst_steps%2FVariables&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%2Fjavascript%2Ffirst_steps%2Fvariables%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fde%2Fdocs%2FLearn%2FJavaScript%2FFirst_steps%2FVariables%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content-de%2Fblob%2Fmain%2Ffiles%2Fde%2Flearn%2Fjavascript%2Ffirst_steps%2Fvariables%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content-de%2Fcommit%2Fnull%0A*+Document+last+modified%3A+*date+not+known*%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://mozilla.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 width="112" height="32" fill="none" xmlns="http://www.w3.org/2000/svg"><title id="mozilla-footer-logo-svg">Mozilla logo</title><path d="M41.753 14.218c-2.048 0-3.324 1.522-3.324 4.157 0 2.423 1.119 4.286 3.29 4.286 2.082 0 3.447-1.678 3.447-4.347 0-2.826-1.522-4.096-3.413-4.096Zm54.89 7.044c0 .901.437 1.618 1.645 1.618 1.427 0 2.949-1.024 3.044-3.352-.649-.095-1.365-.185-2.02-.185-1.426-.005-2.668.397-2.668 1.92Z" fill="currentColor"></path><path d="M0 0v32h111.908V0H0Zm32.56 25.426h-5.87v-7.884c0-2.423-.806-3.352-2.39-3.352-1.924 0-2.702 1.365-2.702 3.324v4.868h1.864v3.044h-5.864v-7.884c0-2.423-.806-3.352-2.39-3.352-1.924 0-2.702 1.365-2.702 3.324v4.868h2.669v3.044H6.642v-3.044h1.863v-7.918H6.642V11.42h5.864v2.11c.839-1.489 2.3-2.39 4.252-2.39 2.02 0 3.878.963 4.566 3.01.778-1.862 2.361-3.01 4.566-3.01 2.512 0 4.812 1.522 4.812 4.84v6.402h1.863v3.044h-.005Zm9.036.307c-4.314 0-7.296-2.635-7.296-7.106 0-4.096 2.484-7.481 7.514-7.481s7.481 3.38 7.481 7.29c0 4.472-3.228 7.297-7.699 7.297Zm22.578-.307H51.942l-.403-2.11 7.7-8.846h-4.376l-.621 2.17-2.888-.313.498-4.907h12.294l.313 2.11-7.767 8.852h4.533l.654-2.172 3.167.308-.872 4.908Zm7.99 0h-4.191v-5.03h4.19v5.03Zm0-8.976h-4.191v-5.03h4.19v5.03Zm2.618 8.976 6.054-21.358h3.945l-6.054 21.358h-3.945Zm8.136 0 6.048-21.358h3.945l-6.054 21.358h-3.939Zm21.486.307c-1.863 0-2.887-1.085-3.072-2.792-.805 1.427-2.232 2.792-4.498 2.792-2.02 0-4.314-1.085-4.314-4.006 0-3.447 3.323-4.253 6.518-4.253.778 0 1.584.034 2.3.124v-.465c0-1.427-.034-3.133-2.3-3.133-.84 0-1.488.061-2.143.402l-.453 1.578-3.195-.34.549-3.224c2.45-.996 3.692-1.27 5.992-1.27 3.01 0 5.556 1.55 5.556 4.75v6.083c0 .805.314 1.085.963 1.085.184 0 .375-.034.587-.095l.034 2.11a5.432 5.432 0 0 1-2.524.654Z" fill="currentColor"></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–2024 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/JavaScript/First_steps/Variables","doc":{"isMarkdown":true,"isTranslated":true,"isActive":true,"flaws":{},"title":"Speichern der benötigten Informationen — Variablen","mdn_url":"/de/docs/Learn/JavaScript/First_steps/Variables","locale":"de","native":"Deutsch","sidebarHTML":"<ol><li class=\"section\"><a href=\"/de/docs/Learn/Getting_started_with_the_web\">Komplette Anfänger beginnen hier!</a></li><li><details><summary>Erste Schritte mit dem Web</summary><ol><li><a href=\"/de/docs/Learn/Getting_started_with_the_web\">Einführung ins Web</a></li><li><a href=\"/de/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">Installation von grundlegender Software</a></li><li><a href=\"/de/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like\">Wie wird Ihre Website aussehen?</a></li><li><a href=\"/de/docs/Learn/Getting_started_with_the_web/Dealing_with_files\">Umgang mit Dateien</a></li><li><a href=\"/de/docs/Learn/Getting_started_with_the_web/HTML_basics\">HTML-Grundlagen</a></li><li><a href=\"/de/docs/Learn/Getting_started_with_the_web/CSS_basics\">CSS-Grundlagen</a></li><li><a href=\"/de/docs/Learn/Getting_started_with_the_web/JavaScript_basics\">JavaScript-Grundlagen</a></li><li><a href=\"/de/docs/Learn/Getting_started_with_the_web/Publishing_your_website\">Veröffentlichung Ihrer Website</a></li><li><a href=\"/de/docs/Learn/Getting_started_with_the_web/How_the_Web_works\">Wie das Web funktioniert</a></li></ol></details></li><li class=\"section\"><a href=\"/de/docs/Learn/HTML\">HTML — Strukturierung des Webs</a></li><li><details><summary>Einführung in HTML</summary><ol><li><a href=\"/de/docs/Learn/HTML/Introduction_to_HTML\">Einführung in HTML</a></li><li><a href=\"/de/docs/Learn/HTML/Introduction_to_HTML/Getting_started\">Erste Schritte mit HTML</a></li><li><a href=\"/de/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML\">Was ist im Kopfbereich? Metadaten in HTML</a></li><li><a href=\"/de/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals\">Grundlagen des HTML-Textes</a></li><li><a href=\"/de/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks\">Erstellen von Hyperlinks</a></li><li><a href=\"/de/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting\">Erweiterte Textformatierung</a></li><li><a href=\"/de/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure\">Struktur eines Dokuments und einer Website</a></li><li><a href=\"/de/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML\">Debugging HTML</a></li><li><a href=\"/de/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter\">Markierung eines Briefes</a></li><li><a href=\"/de/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content\">Die Strukturierung einer Seite mit Inhalt</a></li></ol></details></li><li><details><summary>Multimedia und Einbettung</summary><ol><li><a href=\"/de/docs/Learn/HTML/Multimedia_and_embedding\">Multimedia und Einbettung</a></li><li><a href=\"/de/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML\">Bilder in HTML</a></li><li><a href=\"/de/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content\">Video- und Audioinhalte</a></li><li><a href=\"/de/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies\">Von Objekt zu iframe — andere Einbettungstechnologien</a></li><li><a href=\"/de/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web\">Vektorgrafiken zum Web hinzufügen</a></li><li><a href=\"/de/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images\">Responsive Images</a></li><li><a href=\"/de/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page\">Mozilla Splash-Seite</a></li></ol></details></li><li><details><summary>HTML-Tabellen</summary><ol><li><a href=\"/de/docs/Learn/HTML/Tables\">HTML-Tabellen</a></li><li><a href=\"/de/docs/Learn/HTML/Tables/Basics\">HTML Table Grundlagen</a></li><li><a href=\"/de/docs/Learn/HTML/Tables/Advanced\">Erweiterte Funktionen und Barrierefreiheit von HTML-Tabellen</a></li><li><a href=\"/de/docs/Learn/HTML/Tables/Structuring_planet_data\">Strukturierung von Planeten-Daten</a></li></ol></details></li><li class=\"section\"><a href=\"/de/docs/Learn/CSS\">CSS — Gestaltung des Webs</a></li><li><details><summary>CSS erste Schritte</summary><ol><li><a href=\"/de/docs/Learn/CSS/First_steps\">Erste Schritte mit CSS</a></li><li><a href=\"/de/docs/Learn/CSS/First_steps/What_is_CSS\">Was ist CSS?</a></li><li><a href=\"/de/docs/Learn/CSS/First_steps/Getting_started\">Einstieg in CSS</a></li><li><a href=\"/de/docs/Learn/CSS/First_steps/How_CSS_is_structured\">Wie CSS strukturiert ist</a></li><li><a href=\"/de/docs/Learn/CSS/First_steps/How_CSS_works\">Wie CSS funktioniert</a></li><li><a href=\"/de/docs/Learn/CSS/First_steps/Styling_a_biography_page\">Eine Biografieseite stylen</a></li></ol></details></li><li><details><summary>CSS-Bausteine</summary><ol><li><a href=\"/de/docs/Learn/CSS/Building_blocks\">CSS-Grundbausteine</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Selectors\">CSS-Selektoren</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors\">Typ-, Klassen- und ID-Selektoren</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors\">Attributselektoren</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements\">Pseudo-Klassen und Pseudo-Elemente</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Selectors/Combinators\">Kombinatoren</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance\">Kaskade, Spezifität und Vererbung</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Cascade_layers\">Kaskadenschichten</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/The_box_model\">Das Boxmodell</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders\">Hintergründe und Rahmen</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Handling_different_text_directions\">Umgang mit unterschiedlichen Textausrichtungen</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Overflowing_content\">Überlaufender Inhalt</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Values_and_units\">CSS-Werte und Einheiten</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS\">Größe von Elementen in CSS</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Images_media_form_elements\">Bilder, Medien und Formularelemente</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Styling_tables\">Tabellen stylen</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Advanced_styling_effects\">Erweiterte Styling-Effekte</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Debugging_CSS\">Debugging CSS</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Organizing\">Organisieren Ihres CSS</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Fundamental_CSS_comprehension\">Grundlegendes CSS-Verständnis</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper\">Erstellen von stilvollem Briefpapier</a></li><li><a href=\"/de/docs/Learn/CSS/Building_blocks/A_cool_looking_box\">Eine cool aussehende Box</a></li></ol></details></li><li><details><summary>Textgestaltung</summary><ol><li><a href=\"/de/docs/Learn/CSS/Styling_text\">CSS Textgestaltung</a></li><li><a href=\"/de/docs/Learn/CSS/Styling_text/Fundamentals\">Grundlegende Text- und Schriftgestaltung</a></li><li><a href=\"/de/docs/Learn/CSS/Styling_text/Styling_lists\">Listen stilisieren</a></li><li><a href=\"/de/docs/Learn/CSS/Styling_text/Styling_links\">Styling von Links</a></li><li><a href=\"/de/docs/Learn/CSS/Styling_text/Web_fonts\">Web-Fonts</a></li><li><a href=\"/de/docs/Learn/CSS/Styling_text/Typesetting_a_homepage\">Setzen einer Community-Schul-Startseite</a></li></ol></details></li><li><details><summary>CSS-Layout</summary><ol><li><a href=\"/de/docs/Learn/CSS/CSS_layout\">CSS-Layout</a></li><li><a href=\"/de/docs/Learn/CSS/CSS_layout/Introduction\">Einführung in CSS Layout</a></li><li><a href=\"/de/docs/Learn/CSS/CSS_layout/Normal_Flow\">Normaler Fluss</a></li><li><a href=\"/de/docs/Learn/CSS/CSS_layout/Flexbox\">Flexbox</a></li><li><a href=\"/de/docs/Learn/CSS/CSS_layout/Grids\">Raster</a></li><li><a href=\"/de/docs/Learn/CSS/CSS_layout/Floats\">Floats</a></li><li><a href=\"/de/docs/Learn/CSS/CSS_layout/Positioning\">Positioning</a></li><li><a href=\"/de/docs/Learn/CSS/CSS_layout/Multiple-column_Layout\">Mehrspaltiges Layout</a></li><li><a href=\"/de/docs/Learn/CSS/CSS_layout/Responsive_Design\">Responsives Design</a></li><li><a href=\"/de/docs/Learn/CSS/CSS_layout/Media_queries\">Einsteigerleitfaden für Media Queries</a></li><li><a href=\"/de/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods\">Legacy-Layout-Methoden</a></li><li><a href=\"/de/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers\">Unterstützung älterer Browser</a></li><li><a href=\"/de/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension\">Grundlegendes Verständnis von Layouts</a></li></ol></details></li><li class=\"section\"><a href=\"/de/docs/Learn/JavaScript\">JavaScript — Dynamisches clientseitiges Skripting</a></li><li><details open=\"\"><summary>JavaScript erste Schritte</summary><ol><li><a href=\"/de/docs/Learn/JavaScript/First_steps\">JavaScript erste Schritte</a></li><li><a href=\"/de/docs/Learn/JavaScript/First_steps/What_is_JavaScript\">Was ist JavaScript?</a></li><li><a href=\"/de/docs/Learn/JavaScript/First_steps/A_first_splash\">Ein erster Sprung in JavaScript</a></li><li><a href=\"/de/docs/Learn/JavaScript/First_steps/What_went_wrong\">Was ist schiefgelaufen? JavaScript-Fehlerbehebung</a></li><li><em><a href=\"/de/docs/Learn/JavaScript/First_steps/Variables\" aria-current=\"page\">Speichern der benötigten Informationen — Variablen</a></em></li><li><a href=\"/de/docs/Learn/JavaScript/First_steps/Math\">Grundlegende Mathematik in JavaScript – Zahlen und Operatoren</a></li><li><a href=\"/de/docs/Learn/JavaScript/First_steps/Strings\">Umgang mit Text — Strings in JavaScript</a></li><li><a href=\"/de/docs/Learn/JavaScript/First_steps/Useful_string_methods\">Nützliche String-Methoden</a></li><li><a href=\"/de/docs/Learn/JavaScript/First_steps/Arrays\">Arrays</a></li><li><a href=\"/de/docs/Learn/JavaScript/First_steps/Silly_story_generator\">Silly Story Generator</a></li></ol></details></li><li><details><summary>JavaScript-Bausteine</summary><ol><li><a href=\"/de/docs/Learn/JavaScript/Building_blocks\">JavaScript-Bausteine</a></li><li><a href=\"/de/docs/Learn/JavaScript/Building_blocks/conditionals\">Entscheidungen in Ihrem Code treffen — Bedingte Anweisungen</a></li><li><a href=\"/de/docs/Learn/JavaScript/Building_blocks/Looping_code\">Schleifen-Code</a></li><li><a href=\"/de/docs/Learn/JavaScript/Building_blocks/Functions\">Funktionen — wiederverwendbare Codeblöcke</a></li><li><a href=\"/de/docs/Learn/JavaScript/Building_blocks/Build_your_own_function\">Erstellen Sie Ihre eigene Funktion</a></li><li><a href=\"/de/docs/Learn/JavaScript/Building_blocks/Return_values\">Funktionsrückgabewerte</a></li><li><a href=\"/de/docs/Learn/JavaScript/Building_blocks/Events\">Einführung in Ereignisse</a></li><li><a href=\"/de/docs/Learn/JavaScript/Building_blocks/Event_bubbling\">Event bubbling</a></li><li><a href=\"/de/docs/Learn/JavaScript/Building_blocks/Image_gallery\">Bildgalerie</a></li></ol></details></li><li><details><summary>Einführung in JavaScript-Objekte</summary><ol><li><a href=\"/de/docs/Learn/JavaScript/Objects\">Einführung in JavaScript-Objekte</a></li><li><a href=\"/de/docs/Learn/JavaScript/Objects/Basics\">JavaScript Objekt Grundlagen</a></li><li><a href=\"/de/docs/Learn/JavaScript/Objects/Object_prototypes\">Objektprototypen</a></li><li><a href=\"/de/docs/Learn/JavaScript/Objects/Object-oriented_programming\">Objektorientierte Programmierung</a></li><li><a href=\"/de/docs/Learn/JavaScript/Objects/Classes_in_JavaScript\">Klassen in JavaScript</a></li><li><a href=\"/de/docs/Learn/JavaScript/Objects/JSON\">Arbeiten mit JSON</a></li><li><a href=\"/de/docs/Learn/JavaScript/Objects/Object_building_practice\">Objekt-Baupraxis</a></li><li><a href=\"/de/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features\">Hinzufügen von Funktionen zu unserem hüpfenden Kugeln-Demo</a></li></ol></details></li><li><details><summary>Asynchrones JavaScript</summary><ol><li><a href=\"/de/docs/Learn/JavaScript/Asynchronous\">Asynchrones JavaScript</a></li><li><a href=\"/de/docs/Learn/JavaScript/Asynchronous/Introducing\">Einführung in asynchrones JavaScript</a></li><li><a href=\"/de/docs/Learn/JavaScript/Asynchronous/Promises\">Anleitung zur Verwendung von Promises</a></li><li><a href=\"/de/docs/Learn/JavaScript/Asynchronous/Implementing_a_promise-based_API\">Anleitung zur Implementierung einer Promise-basierten API</a></li><li><a href=\"/de/docs/Learn/JavaScript/Asynchronous/Introducing_workers\">Einführung in Workers</a></li><li><a href=\"/de/docs/Learn/JavaScript/Asynchronous/Sequencing_animations\">Sequenzierung von Animationen</a></li></ol></details></li><li><details><summary>Client-seitige Web-APIs</summary><ol><li><a href=\"/de/docs/Learn/JavaScript/Client-side_web_APIs\">Client-Side-Web-APIs</a></li><li><a href=\"/de/docs/Learn/JavaScript/Client-side_web_APIs/Introduction\">Einführung in Web-APIs</a></li><li><a href=\"/de/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents\">Manipulating documents</a></li><li><a href=\"/de/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data\">Abrufen von Daten vom Server</a></li><li><a href=\"/de/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs\">Third-party APIs</a></li><li><a href=\"/de/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics\">Grafiken zeichnen</a></li><li><a href=\"/de/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs\">Video- und Audio-APIs</a></li><li><a href=\"/de/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage\">Client-side storage</a></li></ol></details></li><li class=\"section\"><a href=\"/de/docs/Learn/Forms\">Webformulare — Arbeiten mit Benutzerdaten</a></li><li><details><summary>Grundlagen der Webformulare</summary><ol><li><a href=\"/de/docs/Learn/Forms\">Bausteine für Webformulare</a></li><li><a href=\"/de/docs/Learn/Forms/Your_first_form\">Ihr erstes Formular</a></li><li><a href=\"/de/docs/Learn/Forms/How_to_structure_a_web_form\">Wie Sie ein Webformular strukturieren</a></li><li><a href=\"/de/docs/Learn/Forms/Basic_native_form_controls\">Basis-Native Formularelemente</a></li><li><a href=\"/de/docs/Learn/Forms/HTML5_input_types\">Die HTML5 input Typen</a></li><li><a href=\"/de/docs/Learn/Forms/Other_form_controls\">Andere Formularelemente</a></li><li><a href=\"/de/docs/Learn/Forms/Styling_web_forms\">Styling von Webformularen</a></li><li><a href=\"/de/docs/Learn/Forms/Advanced_form_styling\">Erweiterte Formular-Stilgestaltung</a></li><li><a href=\"/de/docs/Learn/Forms/UI_pseudo-classes\">UI-Pseudo-Klassen</a></li><li><a href=\"/de/docs/Learn/Forms/Form_validation\">Client-seitige Formularvalidierung</a></li><li><a href=\"/de/docs/Learn/Forms/Sending_and_retrieving_form_data\">Senden von Formulardaten</a></li></ol></details></li><li><details><summary>Erweiterte Techniken für Webformulare</summary><ol><li><a href=\"/de/docs/Learn/Forms/How_to_build_custom_form_controls\">Anleitung zur Erstellung benutzerdefinierter Formularelemente</a></li><li><a href=\"/de/docs/Learn/Forms/Sending_forms_through_JavaScript\">Versenden von Formularen über JavaScript</a></li><li><a href=\"/de/docs/Learn/Forms/Property_compatibility_table_for_form_controls\">CSS-Eigenschaftskompatibilitätstabelle für Formularelemente</a></li><li><a href=\"/de/docs/Learn/Forms/HTML_forms_in_legacy_browsers\">HTML-Formulare in älteren Browsern</a></li></ol></details></li><li class=\"section\"><a href=\"/de/docs/Learn/Accessibility\">Barrierefreiheit — Das Web für alle nutzbar machen</a></li><li><details><summary>Barrierefreiheitsleitfäden</summary><ol><li><a href=\"/de/docs/Learn/Accessibility\">Barrierefreiheit</a></li><li><a href=\"/de/docs/Learn/Accessibility/What_is_accessibility\">Was ist Barrierefreiheit?</a></li><li><a href=\"/de/docs/Learn/Accessibility/HTML\">HTML: Eine gute Grundlage für Barrierefreiheit</a></li><li><a href=\"/de/docs/Learn/Accessibility/CSS_and_JavaScript\">CSS und JavaScript: Barrierefreiheits-Best Practices</a></li><li><a href=\"/de/docs/Learn/Accessibility/WAI-ARIA_basics\">Grundlagen von WAI-ARIA</a></li><li><a href=\"/de/docs/Learn/Accessibility/Multimedia\">Barrierefreie Multimedia</a></li><li><a href=\"/de/docs/Learn/Accessibility/Mobile\">Barrierefreiheit auf Mobilgeräten</a></li><li><a href=\"/de/docs/Learn/Accessibility/Accessibility_troubleshooting\">Bewertung: Barrierefreiheits-Troubleshooting</a></li></ol></details></li><li class=\"section\"><a href=\"/de/docs/Learn/Performance\">Leistung — Websites schnell und reaktionsschnell machen</a></li><li><details><summary>Leitfäden zur Leistung</summary><ol><li><a href=\"/de/docs/Learn/Performance\">Webleistung</a></li><li><a href=\"/de/docs/Learn/Performance/why_web_performance\">Der 'Warum' der Web-Performance</a></li><li><a href=\"/de/docs/Learn/Performance/What_is_web_performance\">Was ist Web-Performance?</a></li><li><a href=\"/de/docs/Learn/Performance/Perceived_performance\">Wahrgenommene Leistung</a></li><li><a href=\"/de/docs/Learn/Performance/Measuring_performance\">Messung der Performance</a></li><li><a href=\"/de/docs/Learn/Performance/Multimedia\">Multimedia: Bilder</a></li><li><a href=\"/de/docs/Learn/Performance/video\">Multimedia: Video</a></li><li><a href=\"/de/docs/Learn/Performance/JavaScript\">JavaScript-Leistungsoptimierung</a></li><li><a href=\"/de/docs/Learn/Performance/HTML\">HTML-Leistungsoptimierung</a></li><li><a href=\"/de/docs/Learn/Performance/CSS\">CSS-Leistungsoptimierung</a></li><li><a href=\"/de/docs/Learn/Performance/business_case_for_performance\">Der geschäftliche Nutzen von Web-Performance</a></li></ol></details></li><li class=\"section\"><a href=\"/de/docs/Learn/MathML\">MathML — Schreiben von Mathematik mit MathML</a></li><li><details><summary>MathML erste Schritte</summary><ol><li><a href=\"/de/docs/Learn/MathML/First_steps\">Erste Schritte mit MathML</a></li><li><a href=\"/de/docs/Learn/MathML/First_steps/Getting_started\">Erste Schritte mit MathML</a></li><li><a href=\"/de/docs/Learn/MathML/First_steps/Text_containers\">MathML Text-Container</a></li><li><a href=\"/de/docs/Learn/MathML/First_steps/Fractions_and_roots\">MathML-Brüche und -Wurzeln</a></li><li><a href=\"/de/docs/Learn/MathML/First_steps/Scripts\">MathML gescriptete Elemente</a></li><li><a href=\"/de/docs/Learn/MathML/First_steps/Tables\">MathML-Tabellen</a></li><li><a href=\"/de/docs/Learn/MathML/First_steps/Three_famous_mathematical_formulas\">Drei berühmte mathematische Formeln</a></li></ol></details></li><li class=\"section\"><a href=\"/de/docs/Learn/../Games\">Spiele — Entwicklung von Spielen für das Web</a></li><li><details><summary>Anleitungen und Tutorials</summary><ol><li><a href=\"/de/docs/Games/Introduction\">Einführung in die Spieleentwicklung für das Web</a></li><li><a href=\"/de/docs/Games/Techniques\">Techniken für die Spieleentwicklung</a></li><li><a href=\"/de/docs/Games/Tutorials\">Tutorials</a></li><li><a href=\"/de/docs/Games/Publishing_games\">Publishing Games</a></li></ol></details></li><li class=\"section\"><a href=\"/de/docs/Learn/Tools_and_testing\">Werkzeuge und Tests</a></li><li><details><summary>Client-seitige Webentwicklungstools</summary><ol><li><a href=\"/de/docs/Learn/Tools_and_testing/Understanding_client-side_tools\">Verständnis von Client-seitigen Webentwicklungstools</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview\">Übersicht über clientseitige Werkzeuge</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">Crashkurs zur Kommandozeile</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management\">Grundlagen des Paketmanagements</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_complete_toolchain\">Einführung in eine vollständige Toolchain</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment\">Bereitstellung unserer App</a></li></ol></details></li><li><details><summary>Einführung in client-seitige Frameworks</summary><ol><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction\">Einführung in client-seitige Frameworks</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features\">Hauptmerkmale von Frameworks</a></li></ol></details></li><li><details><summary>React</summary><ol><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started\">Erste Schritte mit React</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning\">Beginn unserer React-Task-Liste</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components\">Komponentisieren unserer React-App</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state\">React-Interaktivität: Ereignisse und Status</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering\">React Interaktivität: Bearbeiten, Filtern, bedingtes Rendering</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility\">Accessibility in React</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources\">React-Ressourcen</a></li></ol></details></li><li><details><summary>Ember</summary><ol><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started\">Einstieg in Ember</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization\">Ember App-Struktur und Komponentisierung</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state\">Ember-Interaktivität: Events, Klassen und Zustand</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer\">Ember Interaktivität: Footer-Funktionalität, bedingtes Rendering</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing\">Routing in Ember</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources\">Ember-Ressourcen und Fehlerbehebung</a></li></ol></details></li><li><details><summary>Vue</summary><ol><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started\">Einstieg in Vue</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component\">Erstellen unserer ersten Vue-Komponente</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists\">Rendering einer Liste von Vue-Komponenten</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models\">Hinzufügen eines neuen Todo-Formulars: Vue-Ereignisse, Methoden und Modelle</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling\">Styling von Vue-Komponenten mit CSS</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties\">Verwendung von Vue computed properties</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering\">Vue bedingte Darstellung: Bearbeitung bestehender Todos</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management\">Vue-Refs und Lifecycle-Methoden zur Fokusverwaltung</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources\">Vue-Ressourcen</a></li></ol></details></li><li><details><summary>Svelte</summary><ol><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started\">Erste Schritte mit Svelte</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning\">Starten unserer Svelte-Tasklisten-App</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props\">Dynamisches Verhalten in Svelte: Arbeiten mit Variablen und Props</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components\">Komponentisierung unserer Svelte-App</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility\">Fortgeschrittenes Svelte: Reaktivität, Lebenszyklus, Barrierefreiheit</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores\">Arbeiten mit Svelte Stores</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript\">TypeScript-Unterstützung in Svelte</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next\">Bereitstellung und nächste Schritte</a></li></ol></details></li><li><details><summary>Angular</summary><ol><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started\">Erste Schritte mit Angular</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning\">Anfang unserer Angular-To-Do-Liste-App</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling\">Styling unserer Angular-Anwendung</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_item_component\">Erstellen einer Item-Komponente</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_filtering\">Filtern unserer To-Do-Elemente</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_building\">Building Angular applications and further resources</a></li></ol></details></li><li><details><summary>Git und GitHub</summary><ol><li><a href=\"/de/docs/Learn/Tools_and_testing/GitHub\">Git und GitHub</a></li></ol></details></li><li><details><summary>Cross-Browser-Tests</summary><ol><li><a href=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing\">Cross-Browser-Testing</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction\">Einführung in das Cross-Browser-Testing</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies\">Strategien zur Durchführung von Tests</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS\">Umgang mit häufigen HTML- und CSS-Problemen</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript\">Umgang mit häufigen JavaScript-Problemen</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility\">Umgang mit häufigen Problemen der Barrierefreiheit</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection\">Implementierung von Feature-Erkennung</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing\">Einführung in automatisiertes Testen</a></li><li><a href=\"/de/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment\">Einrichten Ihrer eigenen Testautomatisierungsumgebung</a></li></ol></details></li><li class=\"section\"><a href=\"/de/docs/Learn/Server-side\">Server-seitige Webprogrammierung</a></li><li><details><summary>Erste Schritte</summary><ol><li><a href=\"/de/docs/Learn/Server-side/First_steps\">Server-seitige Website-Programmierung: Erste Schritte</a></li><li><a href=\"/de/docs/Learn/Server-side/First_steps/Introduction\">Einführung in die serverseitige Programmierung</a></li><li><a href=\"/de/docs/Learn/Server-side/First_steps/Client-Server_overview\">Überblick über Client-Server</a></li><li><a href=\"/de/docs/Learn/Server-side/First_steps/Web_frameworks\">Serverseitige Web-Frameworks</a></li><li><a href=\"/de/docs/Learn/Server-side/First_steps/Website_security\">Website-Sicherheit</a></li></ol></details></li><li><details><summary>Django Web-Framework (Python)</summary><ol><li><a href=\"/de/docs/Learn/Server-side/Django\">Django Web Framework (Python)</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/Introduction\">Einführung in Django</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/development_environment\">Einrichten einer Django-Entwicklungsumgebung</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/Tutorial_local_library_website\">Django-Tutorial: Die Local Library Website</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/skeleton_website\">Django-Tutorial Teil 2: Erstellung einer Skelett-Website</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/Models\">Django-Tutorial Teil 3: Verwenden von Modellen</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/Admin_site\">Django Tutorial Teil 4: Django Admin-Seite</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/Home_page\">Django-Tutorial Teil 5: Erstellen unserer Startseite</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/Generic_views\">Django Tutorial Teil 6: Generische Listen- und Detailansichten</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/Sessions\">Django-Tutorial Teil 7: Sessions-Framework</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/Authentication\">Django-Tutorial Teil 8: Benutzer-Authentifizierung und Berechtigungen</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/Forms\">Django Tutorial Teil 9: Arbeiten mit Formularen</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/Testing\">Django Tutorial Teil 10: Testen einer Django-Webanwendung</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/Deployment\">Django-Tutorial Teil 11: Django in Produktion bereitstellen</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/web_application_security\">Django-Webanwendungssicherheit</a></li><li><a href=\"/de/docs/Learn/Server-side/Django/django_assessment_blog\">Bewertung: DIY Django Mini-Blog</a></li></ol></details></li><li><details><summary>Express Web-Framework (Node.js/JavaScript)</summary><ol><li><a href=\"/de/docs/Learn/Server-side/Express_Nodejs\">Express-Webframework (Node.js/JavaScript)</a></li><li><a href=\"/de/docs/Learn/Server-side/Express_Nodejs/Introduction\">Einführung in Express/Node</a></li><li><a href=\"/de/docs/Learn/Server-side/Express_Nodejs/development_environment\">Einrichtung einer Node-Entwicklungsumgebung</a></li><li><a href=\"/de/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website\">Express-Tutorial: Die Website der lokalen Bibliothek</a></li><li><a href=\"/de/docs/Learn/Server-side/Express_Nodejs/skeleton_website\">Express Tutorial Teil 2: Erstellung einer Grundstruktur für eine Website</a></li><li><a href=\"/de/docs/Learn/Server-side/Express_Nodejs/mongoose\">Express Tutorial Teil 3: Verwendung einer Datenbank (mit Mongoose)</a></li><li><a href=\"/de/docs/Learn/Server-side/Express_Nodejs/routes\">Express Tutorial Teil 4: Routen und Controller</a></li><li><a href=\"/de/docs/Learn/Server-side/Express_Nodejs/Displaying_data\">Express Tutorial Teil 5: Bibliotheksdaten anzeigen</a></li><li><a href=\"/de/docs/Learn/Server-side/Express_Nodejs/forms\">Express Tutorial Teil 6: Arbeiten mit Formularen</a></li><li><a href=\"/de/docs/Learn/Server-side/Express_Nodejs/deployment\">Express-Tutorial Teil 7: Bereitstellung für die Produktion</a></li></ol></details></li><li class=\"section\"><a href=\"/de/docs/Learn/Common_questions\">Weitere Ressourcen</a></li><li><details><summary>Häufige Fragen</summary><ol><li><a href=\"/de/docs/Learn/Common_questions\">Häufige Fragen</a></li><li><a href=\"/de/docs/Learn/HTML/Howto\">HTML verwenden, um häufige Probleme zu lösen</a></li><li><a href=\"/de/docs/Learn/CSS/Howto\">CSS verwenden, um häufige Probleme zu lösen</a></li><li><a href=\"/de/docs/Learn/JavaScript/Howto\">Lösen Sie häufige Probleme in Ihrem JavaScript-Code</a></li><li><a href=\"/de/docs/Learn/Common_questions/Web_mechanics\">Web-Mechanik</a></li><li><a href=\"/de/docs/Learn/Common_questions/Tools_and_setup\">Tools und Einrichtung</a></li><li><a href=\"/de/docs/Learn/Common_questions/Design_and_accessibility\">Design und Barrierefreiheit</a></li></ol></details></li></ol>","sidebarMacro":"LearnSidebar","body":[{"type":"prose","value":{"id":null,"title":null,"isH3":false,"content":"<ul class=\"prev-next\">\n <li><a class=\"button secondary\" href=\"/de/docs/Learn/JavaScript/First_steps/What_went_wrong\"><span class=\"button-wrap\"> Zurück </span></a></li>\n <li><a class=\"button secondary\" href=\"/de/docs/Learn/JavaScript/First_steps\"><span class=\"button-wrap\"> Übersicht: JavaScript erste Schritte</span></a></li>\n <li><a class=\"button secondary\" href=\"/de/docs/Learn/JavaScript/First_steps/Math\"><span class=\"button-wrap\"> Weiter </span></a></li>\n</ul>\n<p>Nachdem Sie die letzten Artikel gelesen haben, sollten Sie nun wissen, was JavaScript ist, was es für Sie tun kann, wie Sie es zusammen mit anderen Webtechnologien verwenden und wie seine Hauptfunktionen aus einer hohen Perspektive aussehen. In diesem Artikel gehen wir zu den wirklichen Grundlagen und schauen uns an, wie man mit den grundlegendsten Bausteinen von JavaScript arbeitet — Variablen.</p>\n<figure class=\"table-container\"><table>\n <tbody>\n <tr>\n <th scope=\"row\">Voraussetzungen:</th>\n <td>\n Grundverständnis von HTML und CSS sowie\n Verständnis davon, was JavaScript ist.\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Ziel:</th>\n <td>Vertrautheit mit den Grundlagen der JavaScript-Variablen erlangen.</td>\n </tr>\n </tbody>\n</table></figure>"}},{"type":"prose","value":{"id":"werkzeuge_die_sie_benötigen","title":"Werkzeuge, die Sie benötigen","isH3":false,"content":"<p>Im Verlauf dieses Artikels werden Sie gebeten, Codezeilen einzugeben, um Ihr Verständnis des Inhalts zu testen. Wenn Sie einen Desktop-Browser verwenden, ist der beste Ort, um Ihren Beispielcode einzugeben, die JavaScript-Konsole Ihres Browsers (siehe <a href=\"/de/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools\">Was sind Entwicklerwerkzeuge im Browser</a> für weitere Informationen, wie Sie auf dieses Werkzeug zugreifen können).</p>"}},{"type":"prose","value":{"id":"was_ist_eine_variable","title":"Was ist eine Variable?","isH3":false,"content":"<p>Eine Variable ist ein Container für einen Wert, wie beispielsweise eine Zahl, die wir in einer Rechnung verwenden könnten, oder ein String, den wir als Teil eines Satzes verwenden könnten.</p>"}},{"type":"prose","value":{"id":"beispiel_für_eine_variable","title":"Beispiel für eine Variable","isH3":true,"content":"<p>Lassen Sie uns ein Beispiel ansehen:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><button id=\"button_A\">Press me</button>\n<h3 id=\"heading_A\"></h3>\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const buttonA = document.querySelector(\"#button_A\");\nconst headingA = document.querySelector(\"#heading_A\");\n\nlet count = 1;\n\nbuttonA.onclick = () => {\n buttonA.textContent = \"Try again!\";\n headingA.textContent = `${count} clicks so far`;\n count += 1;\n};\n</code></pre></div><div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"Variable example sample\" id=\"frame_variable_example\" width=\"100%\" height=\"120\" src=\"about:blank\" data-live-path=\"/de/docs/Learn/JavaScript/First_steps/Variables\" data-live-id=\"variable_example\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>\n<p>In diesem Beispiel führt das Drücken des Buttons Code aus. Zuerst ändert es den Text auf dem Button selbst. Zweitens zeigt es eine Nachricht über die Anzahl der Male an, die der Button gedrückt wurde. Die Zahl wird in einer Variablen gespeichert. Jedes Mal, wenn der Benutzer den Button drückt, wird die Zahl in der Variablen um eins erhöht.</p>"}},{"type":"prose","value":{"id":"ohne_eine_variable","title":"Ohne eine Variable","isH3":true,"content":"<p>Um zu verstehen, warum das so nützlich ist, denken wir darüber nach, wie wir dieses Beispiel schreiben würden, ohne eine Variable zu verwenden, um die Anzahl zu speichern. Es würde in etwa so aussehen:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html example-bad notranslate\"><code><button id=\"button_B\">Press me</button>\n<h3 id=\"heading_B\"></h3>\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js example-bad notranslate\"><code>const buttonB = document.querySelector(\"#button_B\");\nconst headingB = document.querySelector(\"#heading_B\");\n\nbuttonB.onclick = () => {\n buttonB.textContent = \"Try again!\";\n headingB.textContent = \"1 click so far\";\n};\n</code></pre></div><div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"Without a variable sample\" id=\"frame_without_a_variable\" width=\"100%\" height=\"120\" src=\"about:blank\" data-live-path=\"/de/docs/Learn/JavaScript/First_steps/Variables\" data-live-id=\"without_a_variable\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>\n<p>Vielleicht verstehen Sie die verwendete Syntax noch nicht vollständig, aber Sie sollten das Konzept erfassen können. Ohne eine Variable haben wir keine Möglichkeit zu wissen, wie oft der Button geklickt wurde. Die Nachricht an den Benutzer wird schnell irrelevant, wenn keine Informationen mehr gespeichert werden können.</p>\n<p>Variablen ergeben einfach Sinn, und je mehr Sie über JavaScript lernen, desto natürlicher wird es Ihnen erscheinen.</p>\n<p>Eine Besonderheit von Variablen ist, dass sie fast alles enthalten können — nicht nur Strings und Zahlen. Variablen können auch komplexe Daten und sogar ganze Funktionen enthalten, um erstaunliche Dinge zu tun. Sie werden mehr darüber erfahren, während Sie fortschreiten.</p>\n<div class=\"notecard note\">\n <p><strong>Hinweis:</strong> Wir sagen, dass Variablen Werte enthalten. Das ist ein wichtiger Unterschied. Variablen sind nicht die Werte selbst; sie sind Container für Werte. Sie können sich Variablen wie kleine Pappkartons vorstellen, in die Sie Dinge legen können.</p>\n</div>\n<p>\n <img src=\"/de/docs/Learn/JavaScript/First_steps/Variables/boxes.png\" alt=\"Ein Screenshot von drei 3-dimensionalen Pappkartons, die Beispiele für JavaScript-Variablen demonstrieren. Jeder Karton enthält hypothetische Werte, die verschiedene JavaScript-Datentypen darstellen. Die Beispielwerte sind "Bob", true und 35.\" width=\"1052\" height=\"436\" loading=\"lazy\">\n</p>"}},{"type":"prose","value":{"id":"eine_variable_deklarieren","title":"Eine Variable deklarieren","isH3":false,"content":"<p>Um eine Variable zu verwenden, müssen Sie sie zuerst erstellen — genauer gesagt, wir nennen das Deklarieren der Variable. Dazu tippen Sie das Schlüsselwort <code>let</code> gefolgt von dem Namen ein, den Sie Ihrer Variablen geben möchten:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>let myName;\nlet myAge;\n</code></pre></div>\n<p>Hier erstellen wir zwei Variablen namens <code>myName</code> und <code>myAge</code>. Versuchen Sie, diese Zeilen in die Konsole Ihres Webbrowsers einzugeben. Danach versuchen Sie, eine Variable (oder zwei) mit eigenen Namensentscheidungen zu erstellen.</p>\n<div class=\"notecard note\">\n <p><strong>Hinweis:</strong> In JavaScript sollten alle Codeanweisungen mit einem Semikolon (<code>;</code>) enden — Ihr Code könnte korrekt funktionieren bei einzelnen Zeilen, aber wahrscheinlich nicht, wenn Sie mehrere Codezeilen zusammen schreiben. Versuchen Sie, sich anzugewöhnen, es hinzuzufügen.</p>\n</div>\n<p>Sie können testen, ob diese Werte nun in der Ausführungsumgebung existieren, indem Sie einfach den Variablennamen eingeben, z.B.</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>myName;\nmyAge;\n</code></pre></div>\n<p>Derzeit haben sie keinen Wert; sie sind leere Container. Wenn Sie die Variablennamen eingeben, sollten Sie einen Wert von <code>undefined</code> zurückerhalten. Wenn sie nicht existieren, erhalten Sie eine Fehlermeldung — versuchen Sie, dies einzugeben:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>scoobyDoo;\n</code></pre></div>\n<div class=\"notecard note\">\n <p><strong>Hinweis:</strong> Verwechseln Sie eine Variable, die existiert, aber keinen definierten Wert hat, nicht mit einer Variable, die überhaupt nicht existiert — das sind sehr unterschiedliche Dinge. Im obigen Box-Beispiel würde das Nichtvorhandensein bedeuten, dass es keine Box (Variable) gibt, in die ein Wert gehen kann. Kein definierter Wert würde bedeuten, dass es eine Box gibt, aber sie keinen Wert enthält.</p>\n</div>"}},{"type":"prose","value":{"id":"eine_variable_initialisieren","title":"Eine Variable initialisieren","isH3":false,"content":"<p>Nachdem Sie eine Variable deklariert haben, können Sie sie mit einem Wert initialisieren. Dies tun Sie, indem Sie den Variablennamen, gefolgt von einem Gleichheitszeichen (<code>=</code>), gefolgt von dem Wert, den Sie ihr geben möchten, tippen. 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>myName = \"Chris\";\nmyAge = 37;\n</code></pre></div>\n<p>Versuchen Sie nun, diese Zeilen in die Konsole einzugeben. Sie sollten den Wert, den Sie der Variablen zugewiesen haben, in der Konsole sehen, um es zu bestätigen. Wiederum können Sie Ihre Variablenwerte zurückgeben, indem Sie deren Namen in die Konsole eingeben — versuchen Sie dies noch einmal:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>myName;\nmyAge;\n</code></pre></div>\n<p>Sie können eine Variable gleichzeitig deklarieren und initialisieren, 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>let myDog = \"Rover\";\n</code></pre></div>\n<p>Das ist wahrscheinlich das, was Sie die meiste Zeit tun werden, da es schneller ist, als die beiden Aktionen auf zwei getrennten Zeilen auszuführen.</p>"}},{"type":"prose","value":{"id":"eine_anmerkung_zu_var","title":"Eine Anmerkung zu var","isH3":false,"content":"<p>Sie werden wahrscheinlich auch eine andere Methode zur Deklaration von Variablen sehen, bei der das Schlüsselwort <code>var</code> verwendet wird:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>var myName;\nvar myAge;\n</code></pre></div>\n<p>Als JavaScript erstmals erstellt wurde, war dies die einzige Möglichkeit, Variablen zu deklarieren. Das Design von <code>var</code> ist verwirrend und fehleranfällig. Deshalb wurde <code>let</code> in modernen Versionen von JavaScript eingeführt, ein neues Schlüsselwort zur Erstellung von Variablen, das etwas anders funktioniert als <code>var</code> und dessen Probleme behebt.</p>\n<p>Einige einfache Unterschiede sind unten erklärt. Wir werden jetzt nicht auf alle Unterschiede eingehen, aber Sie werden sie entdecken, wenn Sie mehr über JavaScript lernen (wenn Sie wirklich jetzt schon alles über sie lesen möchten, können Sie unsere <a href=\"/de/docs/Web/JavaScript/Reference/Statements/let\">let-Referenzseite</a> besuchen).</p>\n<p>Zum Beispiel, wenn Sie ein mehrzeiliges JavaScript-Programm schreiben, das eine Variable deklariert und initialisiert, können Sie tatsächlich eine Variable mit <code>var</code> deklarieren, nachdem Sie sie initialisiert haben, und es wird immer noch funktionieren. 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>myName = \"Chris\";\n\nfunction logName() {\n console.log(myName);\n}\n\nlogName();\n\nvar myName;\n</code></pre></div>\n<div class=\"notecard note\">\n <p><strong>Hinweis:</strong> Dies funktioniert nicht beim Eingeben einzelner Zeilen in eine JavaScript-Konsole, nur beim Ausführen mehrerer JavaScript-Zeilen in einem Webdokument.</p>\n</div>\n<p>Dies funktioniert wegen des <strong>Hoistings</strong> — lesen Sie <a href=\"/de/docs/Web/JavaScript/Reference/Statements/var#hoisting\">var hoisting</a> für weitere Details zu diesem Thema.</p>\n<p>Das Hoisting funktioniert nicht mehr mit <code>let</code>. Wenn wir im obigen Beispiel <code>var</code> durch <code>let</code> ersetzen, würde es mit einem Fehler fehlschlagen. Das ist eine gute Sache — das Deklarieren einer Variablen, nachdem Sie sie initialisiert haben, führt zu verwirrendem, schwer verständlichem Code.</p>\n<p>Zweitens, wenn Sie <code>var</code> verwenden, können Sie dieselbe Variable so oft deklarieren, wie Sie möchten, aber mit <code>let</code> können Sie das nicht. Das folgende würde funktionieren:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>var myName = \"Chris\";\nvar myName = \"Bob\";\n</code></pre></div>\n<p>Aber das folgende würde einen Fehler in der zweiten Zeile auslösen:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js example-bad notranslate\"><code>let myName = \"Chris\";\nlet myName = \"Bob\";\n</code></pre></div>\n<p>Sie müssten stattdessen dies tun:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>let myName = \"Chris\";\nmyName = \"Bob\";\n</code></pre></div>\n<p>Wiederum ist dies eine sinnvolle Sprachentscheidung. Es gibt keinen Grund, Variablen neu zu deklarieren — es macht die Dinge nur verwirrender.</p>\n<p>Aus diesen und weiteren Gründen empfehlen wir Ihnen, <code>let</code> in Ihrem Code zu verwenden, anstatt <code>var</code>. Es sei denn, Sie schreiben ausdrücklich Unterstützung für sehr alte Browser, es gibt keinen Grund mehr, <code>var</code> zu verwenden, da alle modernen Browser <code>let</code> seit 2015 unterstützen.</p>\n<div class=\"notecard note\">\n <p><strong>Hinweis:</strong> Wenn Sie diesen Code in der Konsole Ihres Browsers ausprobieren, bevorzugen Sie bitte, jeden der Codeblöcke hier als Ganzes zu kopieren & einzufügen. Es gibt eine <a href=\"https://docs.google.com/document/d/1NP_FnHr4WCZRp7exgUklvNiXrH3nujcfwvp2pzMQ8-0/edit#heading=h.7y5hynxk52e9\" class=\"external\" target=\"_blank\">Funktion in der Chrome-Konsole</a>, bei der Variablen-Neudeklarationen mit <code>let</code> und <code>const</code> erlaubt sind:</p>\n <pre class=\"brush: plain notranslate\">> let myName = \"Chris\";\n let myName = \"Bob\";\n// Als eine Eingabe: SyntaxError: Identifier 'myName' has already been declared\n\n> let myName = \"Chris\";\n> let myName = \"Bob\";\n// Als zwei Eingaben: beide erfolgreich\n</pre>\n</div>"}},{"type":"prose","value":{"id":"eine_variable_aktualisieren","title":"Eine Variable aktualisieren","isH3":false,"content":"<p>Sobald eine Variable mit einem Wert initialisiert wurde, können Sie diesen Wert ändern (oder aktualisieren), indem Sie ihr einen anderen Wert zuweisen. Versuchen Sie, die folgenden Zeilen in Ihre 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>myName = \"Bob\";\nmyAge = 40;\n</code></pre></div>"}},{"type":"prose","value":{"id":"eine_randbemerkung_zu_variablenbenennungsregeln","title":"Eine Randbemerkung zu Variablenbenennungsregeln","isH3":true,"content":"<p>Sie können eine Variable so ziemlich nennen, wie Sie möchten, aber es gibt Einschränkungen. Generell sollten Sie darauf achten, nur lateinische Zeichen (0-9, a-z, A-Z) und den Unterstrich zu benutzen.</p>\n<ul>\n <li>Sie sollten keine anderen Zeichen verwenden, da sie Fehler verursachen oder für ein internationales Publikum schwer verständlich sein können.</li>\n <li>Verwenden Sie keine Unterstriche zu Beginn von Variablennamen — dies wird in bestimmten JavaScript-Konstrukten verwendet, um bestimmte Dinge zu bedeuten, und kann verwirrend sein.</li>\n <li>Verwenden Sie keine Zahlen am Anfang von Variablen. Das ist nicht erlaubt und verursacht einen Fehler.</li>\n <li>Eine sichere Konvention ist <a href=\"/de/docs/Glossary/Camel_case\">lower camel case</a>, bei der Sie mehrere Wörter verbinden und für das gesamte erste Wort Kleinbuchstaben verwenden und dann die folgenden Wörter groß schreiben. Wir haben das für unsere Variablennamen im Artikel bisher verwendet.</li>\n <li>Machen Sie Variablennamen intuitiv, damit sie die Daten beschreiben, die sie enthalten. Verwenden Sie nicht nur einzelne Buchstaben/Zahlen oder lange Phrasen.</li>\n <li>Variablen sind case-sensitive — also ist <code>myage</code> eine andere Variable als <code>myAge</code>.</li>\n <li>Ein letzter Punkt: Sie müssen auch vermeiden, reservierte JavaScript-Wörter als Ihre Variablennamen zu verwenden — damit meinen wir die Wörter, die die eigentliche Syntax von JavaScript ausmachen! Also können Sie keine Wörter wie <code>var</code>, <code>function</code>, <code>let</code> und <code>for</code> als Variablennamen verwenden. Browser erkennen sie als verschiedene Codeelemente und daher erhalten Sie Fehler.</li>\n</ul>\n<div class=\"notecard note\">\n <p><strong>Hinweis:</strong> Sie finden eine ziemlich vollständige Liste der reservierten Schlüsselwörter, die Sie vermeiden sollten, unter <a href=\"/de/docs/Web/JavaScript/Reference/Lexical_grammar#keywords\">Lexikalische Grammatik — Schlüsselwörter</a>.</p>\n</div>\n<p>Gute Namensbeispiele:</p>\n<pre class=\"brush: plain example-good notranslate\">age\nmyAge\ninit\ninitialColor\nfinalOutputValue\naudio1\naudio2\n</pre>\n<p>Schlechte Namensbeispiele:</p>\n<pre class=\"brush: plain example-bad notranslate\">1\na\n_12\nmyage\nMYAGE\nvar\nDocument\nskjfndskjfnbdskjfb\nthisisareallylongvariablenameman\n</pre>\n<p>Versuchen Sie nun, einige weitere Variablen zu erstellen, mit den obigen Richtlinien im Hinterkopf.</p>"}},{"type":"prose","value":{"id":"variablentypen","title":"Variablentypen","isH3":false,"content":"<p>Es gibt einige verschiedene Datentypen, die wir in Variablen speichern können. In diesem Abschnitt werden wir diese kurz beschreiben, bevor Sie sie in kommenden Artikeln detaillierter kennenlernen.</p>"}},{"type":"prose","value":{"id":"zahlen","title":"Zahlen","isH3":true,"content":"<p>Sie können Zahlen in Variablen speichern, entweder ganze Zahlen wie 30 (auch Integer genannt) oder Dezimalzahlen wie 2.456 (auch Fließkommazahlen genannt). Sie müssen die Variablentypen in JavaScript nicht deklarieren, im Gegensatz zu einigen anderen Programmiersprachen. Wenn Sie einer Variablen einen zahlenwertigen Wert geben, schließen Sie ihn nicht in Anführungszeichen ein:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>let myAge = 17;\n</code></pre></div>"}},{"type":"prose","value":{"id":"strings","title":"Strings","isH3":true,"content":"<p>Strings sind Textstücke. Wenn Sie einer Variablen einen String-Wert geben, müssen Sie ihn in einfache oder doppelte Anführungszeichen einschließen; andernfalls versucht JavaScript, es als einen anderen Variablennamen zu interpretieren.</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>let dolphinGoodbye = \"So long and thanks for all the fish\";\n</code></pre></div>"}},{"type":"prose","value":{"id":"booleans","title":"Booleans","isH3":true,"content":"<p>Booleans sind Wahrheitswerte — sie können zwei Werte haben, <code>true</code> oder <code>false</code>. Diese werden in der Regel verwendet, um eine Bedingung zu testen, nach der der Code entsprechend ausgeführt wird. Ein einfaches Beispiel wäre:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>let iAmAlive = true;\n</code></pre></div>\n<p>Während es in Wirklichkeit eher so verwendet würde:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>let test = 6 < 3;\n</code></pre></div>\n<p>Hierbei wird der \"kleiner als\"-Operator (<code><</code>) verwendet, um zu testen, ob 6 kleiner als 3 ist. Wie Sie vielleicht erwarten, gibt es <code>false</code> zurück, da 6 nicht kleiner als 3 ist! Sie werden später im Kurs viel mehr über solche Operatoren erfahren.</p>"}},{"type":"prose","value":{"id":"arrays","title":"Arrays","isH3":true,"content":"<p>Ein Array ist ein einzelnes Objekt, das mehrere Werte in eckigen Klammern enthält, die durch Kommas getrennt sind. Versuchen Sie, die folgenden Zeilen in Ihre 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>let myNameArray = [\"Chris\", \"Bob\", \"Jim\"];\nlet myNumberArray = [10, 15, 40];\n</code></pre></div>\n<p>Sobald diese Arrays definiert sind, können Sie auf jeden Wert durch deren Position im Array zugreifen. Versuchen Sie diese Zeilen:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>myNameArray[0]; // should return 'Chris'\nmyNumberArray[2]; // should return 40\n</code></pre></div>\n<p>Die eckigen Klammern geben einen Indexwert an, der der Position des gewünschten zurückgegebenen Werts entspricht. Sie haben vielleicht bemerkt, dass Arrays in JavaScript nullbasiert sind: das erste Element befindet sich an Index 0.</p>\n<p>Um mehr zu erfahren, sehen Sie sich unseren Artikel über <a href=\"/de/docs/Learn/JavaScript/First_steps/Arrays\">Arrays</a> an.</p>"}},{"type":"prose","value":{"id":"objekte","title":"Objekte","isH3":true,"content":"<p>In der Programmierung ist ein Objekt eine Struktur aus Code, die ein reales Objekt modelliert. Sie können ein Objekt haben, das eine Box darstellt und Informationen über dessen Breite, Länge und Höhe enthält, oder Sie könnten ein Objekt haben, das eine Person darstellt und Daten über deren Namen, Größe, Gewicht, welche Sprache sie spricht, wie man sie begrüßt, und mehr enthält.</p>\n<p>Versuchen Sie, die folgende Zeile in Ihrer 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>let dog = { name: \"Spot\", breed: \"Dalmatian\" };\n</code></pre></div>\n<p>Um die im Objekt gespeicherten Informationen abzurufen, können Sie die folgende Syntax verwenden:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>dog.name;\n</code></pre></div>\n<p>Weitere Informationen zu diesem Thema finden Sie im <a href=\"/de/docs/Learn/JavaScript/Objects\">Einführungsmodul zu JavaScript-Objekten</a>.</p>"}},{"type":"prose","value":{"id":"dynamisches_typing","title":"Dynamisches Typing","isH3":false,"content":"<p>JavaScript ist eine \"dynamisch typisierte Sprache\", was bedeutet, dass Sie im Gegensatz zu einigen anderen Sprachen nicht angeben müssen, welcher Datentyp eine Variable enthält (Zahlen, Strings, Arrays, etc.).</p>\n<p>Wenn Sie beispielsweise eine Variable deklarieren und ihr einen in Anführungszeichen eingeschlossenen Wert zuweisen, behandelt der Browser die Variable als String:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>let myString = \"Hello\";\n</code></pre></div>\n<p>Selbst wenn der in Anführungszeichen eingeschlossene Wert nur Ziffern ist, ist es trotzdem ein String — keine Zahl — also seien Sie vorsichtig:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>let myNumber = \"500\"; // oops, this is still a string\ntypeof myNumber;\nmyNumber = 500; // much better — now this is a number\ntypeof myNumber;\n</code></pre></div>\n<p>Versuchen Sie, die vier Zeilen oben einzeln in Ihre Konsole einzugeben, und sehen Sie, was die Ergebnisse sind. Ihnen wird auffallen, dass wir einen speziellen Operator verwenden, genannt <a href=\"/de/docs/Web/JavaScript/Reference/Operators/typeof\"><code>typeof</code></a> — dieser gibt den Datentyp der Variable zurück, die Sie danach eingeben. Das erste Mal sollte er <code>string</code> zurückgeben, da zu diesem Zeitpunkt die <code>myNumber</code>-Variable einen String enthält, <code>'500'</code>. Schauen Sie mal, was er beim zweiten Aufruf zurückgibt.</p>"}},{"type":"prose","value":{"id":"konstanten_in_javascript","title":"Konstanten in JavaScript","isH3":false,"content":"<p>Neben Variablen können Sie auch Konstanten deklarieren. Diese sind wie Variablen, außer dass:</p>\n<ul>\n <li>Sie sie bei der Deklaration initialisieren müssen</li>\n <li>Sie ihnen nach der Initialisierung keinen neuen Wert zuweisen können.</li>\n</ul>\n<p>Beispielsweise können Sie mit <code>let</code> eine Variable ohne Initialisierung deklarieren:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>let count;\n</code></pre></div>\n<p>Wenn Sie versuchen, dies mit <code>const</code> zu tun, erhalten Sie einen Fehler:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js example-bad notranslate\"><code>const count;\n</code></pre></div>\n<p>Ebenso können Sie mit <code>let</code> eine Variable initialisieren und ihr dann einen neuen Wert zuweisen (dies wird auch <em>Umzuweisung</em> der Variable genannt):</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>let count = 1;\ncount = 2;\n</code></pre></div>\n<p>Wenn Sie versuchen, dies mit <code>const</code> zu tun, erhalten Sie einen Fehler:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js example-bad notranslate\"><code>const count = 1;\ncount = 2;\n</code></pre></div>\n<p>Beachten Sie, dass, obwohl in JavaScript eine Konstante immer denselben Wert benennen muss, Sie den Inhalt des Werts, den sie benennt, ändern können. Das ist für einfache Typen wie Zahlen oder Booleans nicht nützlich, aber betrachten Sie ein Objekt:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const bird = { species: \"Kestrel\" };\nconsole.log(bird.species); // \"Kestrel\"\n</code></pre></div>\n<p>Sie können die Eigenschaften eines Objekts aktualisieren, hinzufügen oder entfernen, das mit <code>const</code> deklariert wurde, weil die Konstante zwar immer noch auf dasselbe Objekt zeigt, der Inhalt des Objekts sich jedoch geändert hat:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>bird.species = \"Striated Caracara\";\nconsole.log(bird.species); // \"Striated Caracara\"\n</code></pre></div>"}},{"type":"prose","value":{"id":"wann_sollte_man_const_und_wann_let_verwenden","title":"Wann sollte man const und wann let verwenden","isH3":false,"content":"<p>Wenn man mit <code>const</code> nicht so viel machen kann wie mit <code>let</code>, warum sollte man es dann lieber verwenden? Tatsächlich ist <code>const</code> sehr nützlich. Wenn Sie <code>const</code> verwenden, um einen Wert zu benennen, sagt es jedem, der Ihren Code liest, dass dieser Name niemals einem anderen Wert zugewiesen wird. Jedes Mal, wenn sie diesen Namen sehen, wissen sie, worauf er sich bezieht.</p>\n<p>In diesem Kurs verwenden wir folgendes Prinzip, wann <code>let</code> und wann <code>const</code> verwendet werden sollte:</p>\n<p><em>Verwenden Sie <code>const</code>, wenn Sie können, und verwenden Sie <code>let</code>, wenn Sie müssen.</em></p>\n<p>Das bedeutet, dass, wenn Sie eine Variable bei der Deklaration initialisieren können und sie später nicht neu zuweisen müssen, machen Sie sie zu einer Konstante.</p>"}},{"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 die wichtigsten Informationen merken? Sie finden einige weitere Tests, um zu überprüfen, ob Sie dieses Wissen behalten haben, bevor Sie weitermachen — siehe <a href=\"/de/docs/Learn/JavaScript/First_steps/Test_your_skills:_variables\">Testen Sie Ihre Fähigkeiten: Variablen</a>.</p>"}},{"type":"prose","value":{"id":"zusammenfassung","title":"Zusammenfassung","isH3":false,"content":"<p>Bis jetzt sollten Sie eine angemessene Menge über JavaScript-Variablen und deren Erstellung wissen. Im nächsten Artikel werden wir uns im Detail mit Zahlen befassen und uns ansehen, wie man grundlegende Mathematik in JavaScript betreibt.</p><ul class=\"prev-next\">\n <li><a class=\"button secondary\" href=\"/de/docs/Learn/JavaScript/First_steps/What_went_wrong\"><span class=\"button-wrap\"> Zurück </span></a></li>\n <li><a class=\"button secondary\" href=\"/de/docs/Learn/JavaScript/First_steps\"><span class=\"button-wrap\"> Übersicht: JavaScript erste Schritte</span></a></li>\n <li><a class=\"button secondary\" href=\"/de/docs/Learn/JavaScript/First_steps/Math\"><span class=\"button-wrap\"> Weiter </span></a></li>\n</ul>"}}],"toc":[{"text":"Werkzeuge, die Sie benötigen","id":"werkzeuge_die_sie_benötigen"},{"text":"Was ist eine Variable?","id":"was_ist_eine_variable"},{"text":"Eine Variable deklarieren","id":"eine_variable_deklarieren"},{"text":"Eine Variable initialisieren","id":"eine_variable_initialisieren"},{"text":"Eine Anmerkung zu var","id":"eine_anmerkung_zu_var"},{"text":"Eine Variable aktualisieren","id":"eine_variable_aktualisieren"},{"text":"Variablentypen","id":"variablentypen"},{"text":"Dynamisches Typing","id":"dynamisches_typing"},{"text":"Konstanten in JavaScript","id":"konstanten_in_javascript"},{"text":"Wann sollte man const und wann let verwenden","id":"wann_sollte_man_const_und_wann_let_verwenden"},{"text":"Testen Sie Ihre Fähigkeiten!","id":"testen_sie_ihre_fähigkeiten!"},{"text":"Zusammenfassung","id":"zusammenfassung"}],"summary":"Nachdem Sie die letzten Artikel gelesen haben, sollten Sie nun wissen, was JavaScript ist, was es für Sie tun kann, wie Sie es zusammen mit anderen Webtechnologien verwenden und wie seine Hauptfunktionen aus einer hohen Perspektive aussehen. In diesem Artikel gehen wir zu den wirklichen Grundlagen und schauen uns an, wie man mit den grundlegendsten Bausteinen von JavaScript arbeitet — Variablen.","popularity":0,"modified":null,"other_translations":[{"locale":"en-US","title":"Storing the information you need — Variables","native":"English (US)"},{"locale":"es","title":"Almacenando la información que necesitas - Variables","native":"Español"},{"locale":"fr","title":"Stocker les informations nécessaires — les variables","native":"Français"},{"locale":"ja","title":"必要な情報を保管する — 変数","native":"日本語"},{"locale":"ko","title":"필요한 정보를 저장하기 - 변수","native":"한국어"},{"locale":"pt-BR","title":"Armazenando as informações que você precisa — Variáveis","native":"Português (do Brasil)"},{"locale":"ru","title":"Переменные - место хранения необходимой информации","native":"Русский"},{"locale":"zh-CN","title":"如何存储你需要的信息——变量","native":"中文 (简体)"},{"locale":"zh-TW","title":"存儲你需要的資訊 - 變數","native":"正體中文 (繁體)"}],"pageType":"unknown","source":{"folder":"de/learn/javascript/first_steps/variables","github_url":"https://github.com/mdn/translated-content/blob/main/files/de/learn/javascript/first_steps/variables/index.md","last_commit_url":"https://github.com/mdn/translated-content/commit/null","filename":"index.md"},"short_title":"Speichern der benötigten Informationen — Variablen","parents":[{"uri":"/de/docs/Learn","title":"Webentwicklung lernen"},{"uri":"/de/docs/Learn/JavaScript","title":"JavaScript — Dynamisches clientseitiges Scripting"},{"uri":"/de/docs/Learn/JavaScript/First_steps","title":"JavaScript erste Schritte"},{"uri":"/de/docs/Learn/JavaScript/First_steps/Variables","title":"Speichern der benötigten Informationen — Variablen"}],"pageTitle":"Speichern der benötigten Informationen — Variablen - Webentwicklung lernen | MDN","noIndexing":false}}</script></body></html>