Beginner's Series to: JavaScript

<!DOCTYPE html><html class="hasPageActions hasBreadcrumb show has-default-focus theme-light" lang="en-us" dir="ltr" data-authenticated="false" data-auth-status-determined="false" data-target="docs" x-ms-format-detection="none"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta property="og:title" content="Beginner's Series to: JavaScript" /> <meta property="og:type" content="website" /> <meta property="og:url" content="https://learn.microsoft.com/en-us/shows/beginners-series-to-javascript/" /><meta property="og:description" content="Beginner's guide to JavaScript on Node.jsLearning a new framework or development environment is made even more difficult when you don't know the programming language. Fortunately, we're here to help! We've created this series of videos to focus on the core concepts of JavaScript. While we don't cover every aspect of JavaScript, we will help you build a foundation from which you can continue to grow. By the end of this series, you'll be able to work through tutorials, quick starts, books, and other resources, continuing to grow on your own. The video series is designed to be consumed as you see fit. You can watch from start to finish, or you can dive into specific topics. You can always bookmark and come back as you need. Additional resources and next steps:Microsoft Learn Build JavaScript applications with Node.jsCreate a bot with the Bot Framework SDK for JavaScriptQuickstart: Use the Text Analytics client library Mozilla Developer Network JavaScript   " /><meta property="og:image" content="https://learn.microsoft.com/en-us/media/open-graph-image.png" /> <meta property="og:image:alt" content="Microsoft Learn" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@MicrosoftLearn" /> <meta name="color-scheme" content="light dark"><meta name="author" content="markdefalco" /> <meta name="breadcrumb_path" content="/shows/breadcrumb/toc.json" /> <meta name="depot_name" content="MSDN.show" /> <meta name="description" content="Beginner's guide to JavaScript on Node.jsLearning a new framework or development environment is made even more difficult when you don't know the programming language. Fortunately, we're here to help! We've created this series of videos to focus on the core concepts of JavaScript.&nbsp;While we don't cover every aspect of JavaScript, we will help you build a foundation from which you can continue to grow. By the end of this series, you'll be able to work through tutorials, quick starts, books, and other resources, continuing to grow on your own.&nbsp;The video series is designed to be consumed as you see fit. You can watch from start to finish, or you can dive into specific topics. You can always bookmark and come back as you need.&nbsp;Additional resources and next steps:Microsoft Learn&nbsp;Build JavaScript applications with Node.jsCreate a bot with the Bot Framework SDK for JavaScriptQuickstart: Use the Text Analytics client library&nbsp;Mozilla Developer Network&nbsp;JavaScript&nbsp;&nbsp; " /> <meta name="document_id" content="33ac5b11-f309-4367-66e0-4e0f87b11d26" /> <meta name="document_version_independent_id" content="33ac5b11-f309-4367-66e0-4e0f87b11d26" /> <meta name="feedback_help_link_type" content="" /> <meta name="feedback_help_link_url" content="" /> <meta name="feedback_product_url" content="" /> <meta name="feedback_system" content="None" /> <meta name="git_commit_id" content="4adbac1c31372b72e613c9bd318ab6b10f3eb1ad" /> <meta name="gitcommit" content="https://github.com/MicrosoftDocs/show-pr/blob/4adbac1c31372b72e613c9bd318ab6b10f3eb1ad/shows/beginners-series-to-javascript/index.yml" /> <meta name="imageUrlSmall" content="media/927da2a5-293e-4fc8-8e17-ed08e95188ee.jpg" /> <meta name="locale" content="en-us" /> <meta name="ms.topic" content="episode" /> <meta name="original_content_git_url" content="https://github.com/MicrosoftDocs/show-pr/blob/live/shows/beginners-series-to-javascript/index.yml" /> <meta name="page_type" content="show" /> <meta name="presentedLocale" content="en" /> <meta name="schema" content="Show" /> <meta name="site_name" content="Docs" /> <meta name="type" content="series" /> <meta name="uhfHeaderId" content="MSDocsHeader-Shows" /> <meta name="uid" content="beginners-series-to-javascript" /> <meta name="updated_at" content="2021-11-16 09:23 PM" /> <meta name="persistent_id" content="394a9197-ede4-ea30-3dea-80268fd7cf84" /> <meta name="github_feedback_content_git_url" content="https://github.com/MicrosoftDocs/show-pr/blob/live/shows/beginners-series-to-javascript/index.yml" /><link href="https://learn.microsoft.com/en-us/shows/beginners-series-to-javascript/" rel="canonical"><title>Beginner's Series to: JavaScript | Microsoft Learn</title><link rel="stylesheet" href="/static/assets/0.4.028726178/styles/site-ltr.css"> <script id="msdocs-script"> var msDocs = {environment: { supportLevel: 'production', accessLevel: 'online', reviewFeatures: false, systemContent: true, azurePortalHostname: 'portal.azure.com', legacyHosting: false, siteName: 'learn', },data: { timeOrigin: Date.now(), contentLocale: 'en-us', contentDir: 'ltr', userLocale: 'en-us', userDir: 'ltr', pageTemplate: 'Show', brand: '', context: {}, hasBinaryRating: false, feedbackHelpLinkType:'', feedbackHelpLinkUrl:'', standardFeedback: false, showFeedbackReport: false, enableTutorialFeedback: false, feedbackSystem: 'None', feedbackGitHubRepo: '', feedbackProductUrl: '',extendBreadcrumb: false,isEditDisplayable: false, hideViewSource: false, hasPageActions: true, hasPrintButton: false, hasBookmark: true, hasShare: false, isPermissioned: false, isPrivateUnauthorized: false,hasRecommendations: false,}, functions:{} }; </script><script src="https://wcpstatic.microsoft.com/mscc/lib/v2/wcp-consent.js"></script> <script src="https://js.monitor.azure.com/scripts/c/ms.jsll-4.min.js"></script><script src="/static/assets/0.4.028726178/global/deprecation.js"></script><script src="/static/assets/0.4.028726178/scripts/en-us/index-docs.js"></script></head> <body lang="en-us" dir="ltr"> <div class="header-holder has-default-focus"> <a href="#main" style="z-index: 1070" class="outline-color-text visually-hidden-until-focused position-fixed inner-focus focus-visible top-0 left-0 right-0 padding-xs text-align-center has-body-background" tabindex="1">Skip to main content</a><div hidden id="cookie-consent-holder" data-test-id="cookie-consent-container"></div> <div id="unsupported-browser" style=" background-color: white; color: black; padding: 16px; border-bottom: 1px solid grey;" hidden > <div style="max-width: 800px; margin: 0 auto;"> <p style="font-size: 24px">This browser is no longer supported.</p> <p style="font-size: 16px; margin-top: 16px;">Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.</p> <div style="margin-top: 12px;"> <a href="https://go.microsoft.com/fwlink/p/?LinkID=2092881 " style=" background-color: #0078d4; border: 1px solid #0078d4; color: white; padding: 6px 12px; border-radius: 2px; display: inline-block; ">Download Microsoft Edge</a> <a href="https://learn.microsoft.com/en-us/lifecycle/faq/internet-explorer-microsoft-edge" style=" background-color: white; padding: 6px 12px; border: 1px solid #505050; color: #171717; border-radius: 2px; display: inline-block; ">More info about Internet Explorer and Microsoft Edge</a> </div> </div> </div>   <header id="ms--site-header" data-test-id="site-header-wrapper" role="banner" itemscope="itemscope" itemtype="http://schema.org/Organization"> <div id="ms--mobile-nav" class="site-header display-none-tablet padding-inline-none gap-none" data-bi-name="mobile-header" data-test-id="mobile-header"></div> <div id="ms--primary-nav" class="site-header display-none display-flex-tablet" data-bi-name="L1-header" data-test-id="primary-header"></div> <div id="ms--secondary-nav" class="site-header display-none display-flex-tablet" data-bi-name="L2-header" data-test-id="secondary-header"></div> </header><div id="content-header" class="content-header uhf-container has-padding has-default-focus border-bottom-none" data-bi-name="content-header"> <div class="content-header-controls margin-xxs margin-inline-sm-tablet"> <button type="button" class="contents-button button button-sm margin-right-xxs" data-bi-name="contents-expand" aria-haspopup="true" data-contents-button> <span class="icon"><span class="docon docon-menu" aria-hidden="true"></span></span> <span class="contents-expand-title">Table of contents</span> </button> <button type="button" class="ap-collapse-behavior ap-expanded button button-sm" data-bi-name="ap-collapse" aria-controls="action-panel"> <span class="icon"><span class="docon docon-exit-mode" aria-hidden="true"></span></span> <span>Exit focus mode</span> </button> </div> </div><div id="disclaimer-holder" class="has-overflow-hidden has-default-focus">  </div> </div> <div class="mainContainer has-body-background-dark is-full display-flex has-default-focus" data-bi-name="body"> <div class="columns has-large-gaps is-gapless-mobile flex-grow-1 is-gapless"> <section class="primary-holder column display-flex is-full-height">  <div class="columns is-gapless-mobile has-large-gaps flex-grow-1 is-gapless"><div id="main-column" class="column is-full-height"> <main id="main" class="" role="main" data-bi-name="content" lang="en-us" dir="ltr"> <div id="article-header" class="background-color-body display-none-print"> <div class="display-flex align-items-center uhf-container"><details id="article-header-breadcrumbs-overflow-popover" class="popover" data-for="article-header-breadcrumbs"> <summary class="button button-clear button-primary button-sm inner-focus" aria-label="All breadcrumbs"> <span class="icon"> <span class="docon docon-more"></span> </span> </summary> <div id="article-header-breadcrumbs-overflow" class="popover-content padding-none"> </div> </details> <bread-crumbs id="article-header-breadcrumbs" data-test-id="article-header-breadcrumbs" class="overflow-hidden flex-grow-1 margin-right-sm margin-right-md-tablet margin-right-lg-desktop margin-left-negative-xxs padding-left-xxs"></bread-crumbs><div id="article-header-page-actions" class="opacity-none margin-left-auto display-flex flex-wrap-no-wrap align-items-stretch"><a id="lang-link-tablet" class="button button-primary button-clear button-sm display-none display-inline-flex-tablet" title="Read in English" data-bi-name="language-toggle" data-read-in-link hidden> <span class="icon margin-none" aria-hidden="true" data-read-in-link-icon> <span class="docon docon-locale-globe"></span> </span> <span class="is-visually-hidden" data-read-in-link-text>Read in English</span> </a><button type="button" class="collection button button-clear button-sm button-primary display-none display-inline-flex-tablet" data-list-type="collection" data-bi-name="collection" title="Add to collection"> <span class="icon margin-none" aria-hidden="true"> <span class="docon docon-circle-addition"></span> </span> <span class="collection-status is-visually-hidden">Save</span> </button> <details class="popover popover-right" id="article-header-page-actions-overflow"> <summary class="justify-content-flex-start button button-clear button-sm button-primary" aria-label="More actions" title="More actions"> <span class="icon" aria-hidden="true"> <span class="docon docon-more-vertical"></span> </span> </summary> <div class="popover-content padding-xs"><a id="lang-link-overflow" class="justify-content-flex-start button-sm has-inner-focus button button-clear button-block display-none-tablet" title="Read in English" data-bi-name="language-toggle" data-page-action-item="overflow-mobile" data-check-hidden="true" data-read-in-link hidden > <span class="icon" aria-hidden="true" data-read-in-link-icon> <span class="docon docon-locale-globe"></span> </span> <span data-read-in-link-text>Read in English</span> </a><button type="button" class="collection justify-content-flex-start button button-clear button-sm has-inner-focus button-block display-none-tablet" data-list-type="collection" data-bi-name="collection" title="Save" data-page-action-item="overflow-mobile" data-check-hidden="true" data-popover-close> <span class="icon" aria-hidden="true"> <span class="docon docon-circle-addition"></span> </span> <span class="collection-status">Save</span> </button> <button type="button" class="collection justify-content-flex-start button button-clear button-sm has-inner-focus button-block display-none-tablet" data-list-type="plan" data-bi-name="plan" title="Add to Plan" data-page-action-item="overflow-mobile" data-check-hidden="true" data-popover-close hidden> <span class="icon" aria-hidden="true"> <span class="docon docon-circle-addition"></span> </span> <span class="plan-status">Add to Plan</span> </button> </div> </details> </div></div> </div> <div> <button type="button" class="border contents-button button button-clear button-sm is-hidden-tablet has-inner-focus" data-bi-name="contents-expand" data-contents-button hidden> <span class="icon"> <span class="docon docon-editor-list-bullet" aria-hidden="true"></span> </span><span class="contents-expand-title">Table of contents</span></button> </div> <div class="is-full-height"><div> <section> <div class="uhf-container padding-top-lg-tablet"> <div class="columns"> <div class="column is-7"> <div class="column is-half"> <figure> <img src="media/927da2a5-293e-4fc8-8e17-ed08e95188ee.jpg" role="presentation" alt="" data-linktype="relative-path"> </figure> </div> <div class="column is-full"> <div class="margin-top-sm"> <p class="supertitle is-uppercase letter-spacing-wide font-size-xs is-spaced margin-bottom-xxs">Series</p> <h1 class="title font-size-h2 font-weight-bold margin-bottom-xxs">Beginner's Series to: JavaScript</h1> <div id="show-details" class="is-invisible margin-top-xxs"> <ul class="metadata page-metadata"> <li class="last-episode is-hidden"></li> <li>English</li> </ul> </div> </div> <div> <div id="description-container" class="margin-top-xs content" aria-live="polite" aria-relevant="additions"> <div id="truncated-html"><p><strong>Beginner's guide to JavaScript on Node.js</strong></p><p>Learning a new framework or development environment is made even more difficult when you don't know the programming language. Fortunately, we're here to help! We've created this series of videos to focus on the core concepts of JavaScript. </p><p>While we don't cover...</p></div> <div id="full-html" class="is-hidden"><p><strong>Beginner's guide to JavaScript on Node.js</strong></p><p>Learning a new framework or development environment is made even more difficult when you don't know the programming language. Fortunately, we're here to help! We've created this series of videos to focus on the core concepts of JavaScript. </p><p>While we don't cover every aspect of JavaScript, we will help you build a foundation from which you can continue to grow. By the end of this series, you'll be able to work through tutorials, quick starts, books, and other resources, continuing to grow on your own. </p><p>The video series is designed to be consumed as you see fit. You can watch from start to finish, or you can dive into specific topics. You can always bookmark and come back as you need. </p><p><strong>Additional resources and next steps:</strong></p><p>Microsoft Learn </p><ul><li><a title="Original URL: https://docs.microsoft.com/learn/paths/build-javascript-applications-nodejs/. Click or tap if you trust this link." href="/en-us/learn/paths/build-javascript-applications-nodejs/?WT.mc_id=beginner-c9-niner" target="_blank" rel="noopener noreferrer" data-linktype="absolute-path">Build JavaScript applications with Node.js</a></li><li><a title="Original URL: https://docs.microsoft.com/azure/bot-service/javascript/bot-builder-javascript-quickstart?view=azure-bot-service-4.0. Click or tap if you trust this link." href="/en-us/azure/bot-service/javascript/bot-builder-javascript-quickstart?WT.mc_id=beginner-c9-niner&view=azure-bot-service-4.0" target="_blank" rel="noopener noreferrer" data-linktype="absolute-path">Create a bot with the Bot Framework SDK for JavaScript</a></li><li><a title="Original URL: https://docs.microsoft.com/azure/cognitive-services/text-analytics/quickstarts/text-analytics-sdk?tabs=version-3&pivots=programming-language-javascript. Click or tap if you trust this link." href="/en-us/azure/cognitive-services/text-analytics/quickstarts/text-analytics-sdk?WT.mc_id=beginner-c9-niner&tabs=version-3-1&pivots=programming-language-csharp" target="_blank" rel="noopener noreferrer" data-linktype="absolute-path">Quickstart: Use the Text Analytics client library</a> </li></ul><p>Mozilla Developer Network </p><ul><li><a title="Original URL: https://developer.mozilla.org/docs/Web/JavaScript. Click or tap if you trust this link." href="https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fdocs%2FWeb%2FJavaScript&data=02%7C01%7CKaitlin.McKinnon%40microsoft.com%7C6e42ff6119fd431a085708d84c63e477%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C637343339204009948&sdata=AKViis46n%2Bvn5dZ91LEl9M0hIh0zb40OCL1wJ7JpSl8%3D&reserved=0" target="_blank" rel="noopener noreferrer" data-linktype="external">JavaScript</a> </li></ul><p> </p> </div> </div> <button id="show-more-button" class="button margin-top-xs" aria-controls="description-container" aria-expanded="false" data-truncated-show-more-button="">Show more</button> </div> </div> </div> <div class="column is-4 is-offset-1"> </div> </div> <hr class="hr margin-top-xs margin-bottom-sm"> </div> </section> <section id="episodes-section" class="column"> <div class="uhf-container margin-bottom-lg"> <h2 class="title font-size-h3 margin-bottom-lg">Episodes<span class="episode-count font-size-md color-text-subtle margin-left-xxs"></span></h2> <div class="episodes"> <ul class="columns is-multiline"> <li class="column is-4"> <article class="media-card border-radius-lg position-relative has-loading-skeleton"> <a href="" tabindex="-1" aria-hidden="true"> <figure class="media-card-image"> <img src=""> <time class="duration tag is-black position-absolute bottom-0 right-0 margin-bottom-xxs margin-right-xxs"></time> </figure> </a> <div class="media-card-content"> <div class="media-card-content-titles padding-bottom-md padding-top-sm"> <p class="margin-bottom-xxs color-text-subtle"></p> <a href="" class="media-card-content-titles"> <span class="title is-5"></span> </a> <p class="media-card-content-titles"></p> </div> <p class="font-size-sm color-text-subtle margin-top-xxs"></p> </div> </article> </li> <li class="column is-4"> <article class="media-card border-radius-lg position-relative has-loading-skeleton"> <a href="" tabindex="-1" aria-hidden="true"> <figure class="media-card-image"> <img src=""> <time class="duration tag is-black position-absolute bottom-0 right-0 margin-bottom-xxs margin-right-xxs"></time> </figure> </a> <div class="media-card-content"> <div class="media-card-content-titles padding-bottom-md padding-top-sm"> <p class="margin-bottom-xxs color-text-subtle"></p> <a href="" class="media-card-content-titles"> <span class="title is-5"></span> </a> <p class="media-card-content-titles"></p> </div> <p class="font-size-sm color-text-subtle margin-top-xxs"></p> </div> </article> </li> <li class="column is-4"> <article class="media-card border-radius-lg position-relative has-loading-skeleton"> <a href="" tabindex="-1" aria-hidden="true"> <figure class="media-card-image"> <img src=""> <time class="duration tag is-black position-absolute bottom-0 right-0 margin-bottom-xxs margin-right-xxs"></time> </figure> </a> <div class="media-card-content"> <div class="media-card-content-titles padding-bottom-md padding-top-sm"> <p class="margin-bottom-xxs color-text-subtle"></p> <a href="" class="media-card-content-titles"> <span class="title is-5"></span> </a> <p class="media-card-content-titles"></p> </div> <p class="font-size-sm color-text-subtle margin-top-xxs"></p> </div> </article> </li> <li class="column is-4"> <article class="media-card border-radius-lg position-relative has-loading-skeleton"> <a href="" tabindex="-1" aria-hidden="true"> <figure class="media-card-image"> <img src=""> <time class="duration tag is-black position-absolute bottom-0 right-0 margin-bottom-xxs margin-right-xxs"></time> </figure> </a> <div class="media-card-content"> <div class="media-card-content-titles padding-bottom-md padding-top-sm"> <p class="margin-bottom-xxs color-text-subtle"></p> <a href="" class="media-card-content-titles"> <span class="title is-5"></span> </a> <p class="media-card-content-titles"></p> </div> <p class="font-size-sm color-text-subtle margin-top-xxs"></p> </div> </article> </li> <li class="column is-4"> <article class="media-card border-radius-lg position-relative has-loading-skeleton"> <a href="" tabindex="-1" aria-hidden="true"> <figure class="media-card-image"> <img src=""> <time class="duration tag is-black position-absolute bottom-0 right-0 margin-bottom-xxs margin-right-xxs"></time> </figure> </a> <div class="media-card-content"> <div class="media-card-content-titles padding-bottom-md padding-top-sm"> <p class="margin-bottom-xxs color-text-subtle"></p> <a href="" class="media-card-content-titles"> <span class="title is-5"></span> </a> <p class="media-card-content-titles"></p> </div> <p class="font-size-sm color-text-subtle margin-top-xxs"></p> </div> </article> </li> <li class="column is-4"> <article class="media-card border-radius-lg position-relative has-loading-skeleton"> <a href="" tabindex="-1" aria-hidden="true"> <figure class="media-card-image"> <img src=""> <time class="duration tag is-black position-absolute bottom-0 right-0 margin-bottom-xxs margin-right-xxs"></time> </figure> </a> <div class="media-card-content"> <div class="media-card-content-titles padding-bottom-md padding-top-sm"> <p class="margin-bottom-xxs color-text-subtle"></p> <a href="" class="media-card-content-titles"> <span class="title is-5"></span> </a> <p class="media-card-content-titles"></p> </div> <p class="font-size-sm color-text-subtle margin-top-xxs"></p> </div> </article> </li> </ul> </div> </div> </section> </div> </div><div id="assertive-live-region" role="alert" aria-live="assertive" class="visually-hidden" aria-relevant="additions" aria-atomic="true"></div> <div id="polite-live-region" role="status" aria-live="polite" class="visually-hidden" aria-relevant="additions" aria-atomic="true"></div>  </main>  <div class="border-top is-visible-interactive has-default-focus margin-top-sm margin-top-none"><footer id="footer-interactive" data-bi-name="footer" class="footer-layout"><div class="display-flex gap-xs flex-wrap-wrap is-full-height padding-right-lg-desktop"><a data-mscc-ic="false" class="locale-selector-link button button-sm button-clear flex-shrink-0" href="#" data-bi-name="select-locale"> <span class="icon" aria-hidden="true"> <span class="docon docon-world"></span> </span> <span class="local-selector-link-text"></span></a><div class="ccpa-privacy-link" data-ccpa-privacy-link hidden> <a href="https://aka.ms/yourcaliforniaprivacychoices" class="button button-sm button-clear flex-shrink-0" data-mscc-ic="false" data-bi-name="your-privacy-choices" > <svg role="img" aria-label="California Consumer Privacy Act (CCPA) Opt-Out Icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 14" xml:space="preserve" height="16" width="43" focusable="false" > <title>California Consumer Privacy Act (CCPA) Opt-Out Icon</title> <path d="M7.4 12.8h6.8l3.1-11.6H7.4C4.2 1.2 1.6 3.8 1.6 7s2.6 5.8 5.8 5.8z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#fff"></path> <path d="M22.6 0H7.4c-3.9 0-7 3.1-7 7s3.1 7 7 7h15.2c3.9 0 7-3.1 7-7s-3.2-7-7-7zm-21 7c0-3.2 2.6-5.8 5.8-5.8h9.9l-3.1 11.6H7.4c-3.2 0-5.8-2.6-5.8-5.8z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#06f"></path> <path d="M24.6 4c.2.2.2.6 0 .8L22.5 7l2.2 2.2c.2.2.2.6 0 .8-.2.2-.6.2-.8 0l-2.2-2.2-2.2 2.2c-.2.2-.6.2-.8 0-.2-.2-.2-.6 0-.8L20.8 7l-2.2-2.2c-.2-.2-.2-.6 0-.8.2-.2.6-.2.8 0l2.2 2.2L23.8 4c.2-.2.6-.2.8 0z" style="fill:#fff"></path> <path d="M12.7 4.1c.2.2.3.6.1.8L8.6 9.8c-.1.1-.2.2-.3.2-.2.1-.5.1-.7-.1L5.4 7.7c-.2-.2-.2-.6 0-.8.2-.2.6-.2.8 0L8 8.6l3.8-4.5c.2-.2.6-.2.9 0z" style="fill:#06f"></path> </svg> <span>Your Privacy Choices</span> </a> </div> <div class="flex-shrink-0"> <div class="dropdown has-caret-up"> <button class="dropdown-trigger button button-clear button-sm has-inner-focus theme-dropdown-trigger" aria-controls="theme-menu-interactive" aria-expanded="false" title="Theme" data-bi-name="theme"> <span class="icon"> <span class="docon docon-sun" aria-hidden="true"></span> </span> <span>Theme</span> <span class="icon expanded-indicator" aria-hidden="true"> <span class="docon docon-chevron-down-light"></span> </span> </button> <div class="dropdown-menu" id="theme-menu-interactive" role="menu"> <ul class="theme-selector padding-xxs" role="none"> <li class="theme display-block" role="menuitem"> <button class="button button-clear button-sm theme-control button-block justify-content-flex-start" data-theme-to="light"> <span class="theme-light margin-right-xxs"> <span class="theme-selector-icon border display-inline-block has-body-background" aria-hidden="true"> <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 14"> <rect width="22" height="14" class="has-fill-body-background" /> <rect x="5" y="5" width="12" height="4" class="has-fill-secondary" /> <rect x="5" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="8" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="11" y="2" width="3" height="1" class="has-fill-secondary" /> <rect x="1" y="1" width="2" height="2" class="has-fill-secondary" /> <rect x="5" y="10" width="7" height="2" rx="0.3" class="has-fill-primary" /> <rect x="19" y="1" width="2" height="2" rx="1" class="has-fill-secondary" /> </svg> </span> </span> <span>Light</span> </button> </li> <li class="theme display-block" role="menuitem"> <button class="button button-clear button-sm theme-control button-block justify-content-flex-start" data-theme-to="dark"> <span class="theme-dark margin-right-xxs"> <span class="border theme-selector-icon display-inline-block has-body-background" aria-hidden="true"> <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 14"> <rect width="22" height="14" class="has-fill-body-background" /> <rect x="5" y="5" width="12" height="4" class="has-fill-secondary" /> <rect x="5" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="8" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="11" y="2" width="3" height="1" class="has-fill-secondary" /> <rect x="1" y="1" width="2" height="2" class="has-fill-secondary" /> <rect x="5" y="10" width="7" height="2" rx="0.3" class="has-fill-primary" /> <rect x="19" y="1" width="2" height="2" rx="1" class="has-fill-secondary" /> </svg> </span> </span> <span>Dark</span> </button> </li> <li class="theme display-block" role="menuitem"> <button class="button button-clear button-sm theme-control button-block justify-content-flex-start" data-theme-to="high-contrast"> <span class="theme-high-contrast margin-right-xxs"> <span class="border theme-selector-icon display-inline-block has-body-background" aria-hidden="true"> <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 14"> <rect width="22" height="14" class="has-fill-body-background" /> <rect x="5" y="5" width="12" height="4" class="has-fill-secondary" /> <rect x="5" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="8" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="11" y="2" width="3" height="1" class="has-fill-secondary" /> <rect x="1" y="1" width="2" height="2" class="has-fill-secondary" /> <rect x="5" y="10" width="7" height="2" rx="0.3" class="has-fill-primary" /> <rect x="19" y="1" width="2" height="2" rx="1" class="has-fill-secondary" /> </svg> </span> </span> <span>High contrast</span> </button> </li> </ul> </div> </div> </div> </div> <ul class="links" data-bi-name="footerlinks"> <li class="manage-cookies-holder" hidden></li><li><a class="external-link-indicator" data-mscc-ic="false" href="/en-us/previous-versions/" data-bi-name="archivelink">Previous Versions</a></li> <li><a class="external-link-indicator" data-mscc-ic="false" href="https://techcommunity.microsoft.com/t5/microsoft-learn-blog/bg-p/MicrosoftLearnBlog" data-bi-name="bloglink">Blog</a></li> <li><a class="external-link-indicator" data-mscc-ic="false" href="/en-us/contribute/" data-bi-name="contributorGuide">Contribute</a></li><li><a class="external-link-indicator" data-mscc-ic="false" href="https://go.microsoft.com/fwlink/?LinkId=521839" data-bi-name="privacy">Privacy</a></li><li><a class="external-link-indicator" data-mscc-ic="false" href="/en-us/legal/termsofuse" data-bi-name="termsofuse">Terms of Use</a></li><li><a class="external-link-indicator" data-mscc-ic="false" href="https://www.microsoft.com/legal/intellectualproperty/Trademarks/" data-bi-name="trademarks">Trademarks</a></li><li>© Microsoft 2024</li> </ul> </footer></div></div></div>  </section>   <aside id="interactive-container" class="interactive-container is-visible-interactive column has-body-background-dark "> </aside>  </div> </div>  <section class="border-top has-default-focus is-hidden-interactive margin-top-sm margin-top-none"><footer id="footer" data-bi-name="footer" class="footer-layout uhf-container has-padding" role="contentinfo"><div class="display-flex gap-xs flex-wrap-wrap is-full-height padding-right-lg-desktop"><a data-mscc-ic="false" class="locale-selector-link button button-sm button-clear flex-shrink-0" href="#" data-bi-name="select-locale"> <span class="icon" aria-hidden="true"> <span class="docon docon-world"></span> </span> <span class="local-selector-link-text"></span></a><div class="ccpa-privacy-link" data-ccpa-privacy-link hidden> <a href="https://aka.ms/yourcaliforniaprivacychoices" class="button button-sm button-clear flex-shrink-0" data-mscc-ic="false" data-bi-name="your-privacy-choices" > <svg role="img" aria-label="California Consumer Privacy Act (CCPA) Opt-Out Icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 14" xml:space="preserve" height="16" width="43" focusable="false" > <title>California Consumer Privacy Act (CCPA) Opt-Out Icon</title> <path d="M7.4 12.8h6.8l3.1-11.6H7.4C4.2 1.2 1.6 3.8 1.6 7s2.6 5.8 5.8 5.8z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#fff"></path> <path d="M22.6 0H7.4c-3.9 0-7 3.1-7 7s3.1 7 7 7h15.2c3.9 0 7-3.1 7-7s-3.2-7-7-7zm-21 7c0-3.2 2.6-5.8 5.8-5.8h9.9l-3.1 11.6H7.4c-3.2 0-5.8-2.6-5.8-5.8z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#06f"></path> <path d="M24.6 4c.2.2.2.6 0 .8L22.5 7l2.2 2.2c.2.2.2.6 0 .8-.2.2-.6.2-.8 0l-2.2-2.2-2.2 2.2c-.2.2-.6.2-.8 0-.2-.2-.2-.6 0-.8L20.8 7l-2.2-2.2c-.2-.2-.2-.6 0-.8.2-.2.6-.2.8 0l2.2 2.2L23.8 4c.2-.2.6-.2.8 0z" style="fill:#fff"></path> <path d="M12.7 4.1c.2.2.3.6.1.8L8.6 9.8c-.1.1-.2.2-.3.2-.2.1-.5.1-.7-.1L5.4 7.7c-.2-.2-.2-.6 0-.8.2-.2.6-.2.8 0L8 8.6l3.8-4.5c.2-.2.6-.2.9 0z" style="fill:#06f"></path> </svg> <span>Your Privacy Choices</span> </a> </div> <div class="flex-shrink-0"> <div class="dropdown has-caret-up"> <button class="dropdown-trigger button button-clear button-sm has-inner-focus theme-dropdown-trigger" aria-controls="theme-menu" aria-expanded="false" title="Theme" data-bi-name="theme"> <span class="icon"> <span class="docon docon-sun" aria-hidden="true"></span> </span> <span>Theme</span> <span class="icon expanded-indicator" aria-hidden="true"> <span class="docon docon-chevron-down-light"></span> </span> </button> <div class="dropdown-menu" id="theme-menu" role="menu"> <ul class="theme-selector padding-xxs" role="none"> <li class="theme display-block" role="menuitem"> <button class="button button-clear button-sm theme-control button-block justify-content-flex-start" data-theme-to="light"> <span class="theme-light margin-right-xxs"> <span class="theme-selector-icon border display-inline-block has-body-background" aria-hidden="true"> <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 14"> <rect width="22" height="14" class="has-fill-body-background" /> <rect x="5" y="5" width="12" height="4" class="has-fill-secondary" /> <rect x="5" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="8" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="11" y="2" width="3" height="1" class="has-fill-secondary" /> <rect x="1" y="1" width="2" height="2" class="has-fill-secondary" /> <rect x="5" y="10" width="7" height="2" rx="0.3" class="has-fill-primary" /> <rect x="19" y="1" width="2" height="2" rx="1" class="has-fill-secondary" /> </svg> </span> </span> <span>Light</span> </button> </li> <li class="theme display-block" role="menuitem"> <button class="button button-clear button-sm theme-control button-block justify-content-flex-start" data-theme-to="dark"> <span class="theme-dark margin-right-xxs"> <span class="border theme-selector-icon display-inline-block has-body-background" aria-hidden="true"> <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 14"> <rect width="22" height="14" class="has-fill-body-background" /> <rect x="5" y="5" width="12" height="4" class="has-fill-secondary" /> <rect x="5" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="8" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="11" y="2" width="3" height="1" class="has-fill-secondary" /> <rect x="1" y="1" width="2" height="2" class="has-fill-secondary" /> <rect x="5" y="10" width="7" height="2" rx="0.3" class="has-fill-primary" /> <rect x="19" y="1" width="2" height="2" rx="1" class="has-fill-secondary" /> </svg> </span> </span> <span>Dark</span> </button> </li> <li class="theme display-block" role="menuitem"> <button class="button button-clear button-sm theme-control button-block justify-content-flex-start" data-theme-to="high-contrast"> <span class="theme-high-contrast margin-right-xxs"> <span class="border theme-selector-icon display-inline-block has-body-background" aria-hidden="true"> <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 14"> <rect width="22" height="14" class="has-fill-body-background" /> <rect x="5" y="5" width="12" height="4" class="has-fill-secondary" /> <rect x="5" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="8" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="11" y="2" width="3" height="1" class="has-fill-secondary" /> <rect x="1" y="1" width="2" height="2" class="has-fill-secondary" /> <rect x="5" y="10" width="7" height="2" rx="0.3" class="has-fill-primary" /> <rect x="19" y="1" width="2" height="2" rx="1" class="has-fill-secondary" /> </svg> </span> </span> <span>High contrast</span> </button> </li> </ul> </div> </div> </div> </div> <ul class="links" data-bi-name="footerlinks"> <li class="manage-cookies-holder" hidden></li><li><a class="external-link-indicator" data-mscc-ic="false" href="/en-us/previous-versions/" data-bi-name="archivelink">Previous Versions</a></li> <li><a class="external-link-indicator" data-mscc-ic="false" href="https://techcommunity.microsoft.com/t5/microsoft-learn-blog/bg-p/MicrosoftLearnBlog" data-bi-name="bloglink">Blog</a></li> <li><a class="external-link-indicator" data-mscc-ic="false" href="/en-us/contribute/" data-bi-name="contributorGuide">Contribute</a></li><li><a class="external-link-indicator" data-mscc-ic="false" href="https://go.microsoft.com/fwlink/?LinkId=521839" data-bi-name="privacy">Privacy</a></li><li><a class="external-link-indicator" data-mscc-ic="false" href="/en-us/legal/termsofuse" data-bi-name="termsofuse">Terms of Use</a></li><li><a class="external-link-indicator" data-mscc-ic="false" href="https://www.microsoft.com/legal/intellectualproperty/Trademarks/" data-bi-name="trademarks">Trademarks</a></li><li>© Microsoft 2024</li> </ul> </footer> </section> <div id="action-panel" role="region" aria-label="Action Panel" class="action-panel has-default-focus" tabindex="-1"></div> </body> </html>

CINXE.COM

Beginner's Series to: JavaScript | Microsoft Learn