Dynamic scripting with JavaScript - Learn web development | MDN * Skip to main content * Skip to search HTML HTML: Markup language HTML reference * Elements * Global attributes * Attributes * See all… HTML guides * Responsive images * HTML cheatsheet * Date & time formats * See all… Markup languages * SVG * MathML * XML CSS CSS: Styling language CSS reference * Properties * Selectors * At-rules * Values * See all… CSS guides * Box model * Animations * Flexbox * Colors * See all… Layout cookbook * Column layouts * Centering an element * Card component * See all… JavaScript JS JavaScript: Scripting language JS reference * Standard built-in objects * Expressions & operators * Statements & declarations * Functions * See all… JS guides * Control flow & error handing * Loops and iteration * Working with objects * Using classes * See all… Web APIs Web APIs: Programming interfaces Web API reference * File system API * Fetch API * Geolocation API * HTML DOM API * Push API * Service worker API * See all… Web API guides * Using the Web animation API * Using the Fetch API * Working with the History API * Using the Web speech API * Using web workers All All web technology Technologies * Accessibility * HTTP * URI * Web extensions * WebAssembly * WebDriver * See all… Topics * Media * Performance * Privacy * Security * Progressive web apps Learn Learn web development Frontend developer course * Getting started modules * Core modules * MDN Curriculum * Check out the video course from Scrimba, our partner Learn HTML * Structuring content with HTML module Learn CSS * CSS styling basics module * CSS layout module Learn JavaScript * Dynamic scripting with JavaScript module Tools Discover our tools * Playground * HTTP Observatory * Border-image generator * Border-radius generator * Box-shadow generator * Color format converter * Color mixer * Shape generator About Get to know MDN better * About MDN * Advertise with us * Community * MDN on GitHub Blog Toggle sidebar * Learn * Core learning modules * JavaScript Theme * OS default * Light * Dark English (US) Remember language Learn more * Deutsch * English (US) * Español * Français * 日本語 * 한국어 * Português (do Brasil) * Русский * 中文 (简体) * 正體中文 (繁體) Dynamic scripting with JavaScript * Overview: Core learning modules * Next JavaScript is a huge topic, with so many different features, styles, and techniques to learn, and so many APIs and tools built on top of it. This module focuses on the essentials of the core language, plus some key surrounding topics — learning these topics will give you a solid basis to work from. In this article * Prerequisites * Tutorials and challenges * Test your skills * See also Prerequisites Before starting this module, you don't need any previous JavaScript knowledge, but you should have worked through the previous modules in the course. You should at least know HTML and the basic fundamentals of CSS . Note: If you are working on a computer, tablet, or another device where you can't create files, you can try running the code in an online editor such as CodePen or JSFiddle . Tutorials and challenges What is JavaScript? Welcome to the MDN beginner's JavaScript course! In this first article we will look at JavaScript from a high level, answering questions such as "what is it?", and "what is it doing?", and making sure you are comfortable with JavaScript's purpose. A first splash into JavaScript Now you've learned something about the theory of JavaScript, and what you can do with it, we are going to give you a crash course on the basic features of JavaScript via a completely practical tutorial. Here you'll build up a simple "Guess the number" game, step by step. What went wrong? Troubleshooting JavaScript When you built up the "Guess the number" game in the previous article, you may have found that it didn't work. Never fear — this article aims to save you from tearing your hair out over such problems by providing you with some simple tips on how to find and fix errors in JavaScript programs. Storing the information you need — Variables After reading the last couple of articles you should now know what JavaScript is, what it can do for you, how you use it alongside other web technologies, and what its main features look like from a high level. In this article, we will get down to the real basics, looking at how to work with the most basic building blocks of JavaScript — Variables. Basic math in JavaScript — numbers and operators At this point in the course, we discuss math in JavaScript — how we can combine operators and other features to successfully manipulate numbers to do our bidding. Handling text — strings in JavaScript Next, we'll turn our attention to strings — this is what pieces of text are called in programming. In this article, we'll look at all the common things that you really ought to know about strings when learning JavaScript, such as creating strings, escaping quotes in strings, and joining them together. Useful string methods Now we've looked at the very basics of strings, let's move up a gear and start thinking about what useful operations we can do on strings with built-in methods, such as finding the length of a text string, joining and splitting strings, substituting one character in a string for another, and more. Arrays In this lesson we'll look at arrays — a neat way of storing a list of data items under a single variable name. Here we look at why this is useful, then explore how to create an array, retrieve, add, and remove items stored in an array, and more besides. Challenge: Silly story generator Challenge In this challenge you are tasked with taking some of the knowledge you've picked up in this module so far and applying it to creating a fun app that generates random silly stories. Along the way, we'll test your knowledge of variables, math, strings, and arrays. Making decisions in your code — conditionals In any programming language, the code needs to make decisions and carry out actions accordingly depending on different inputs. For example, in a game, if the player's number of lives is 0, then it's game over. In a weather app, if it is being looked at in the morning, show a sunrise graphic; show stars and a moon if it is nighttime. In this article, we'll explore how so-called conditional statements work in JavaScript. Looping code Programming languages are very useful for rapidly completing repetitive tasks, from multiple basic calculations to just about any other situation where you've got a lot of similar items of work to complete. Here we'll look at the loop structures available in JavaScript that handle such needs. Functions — reusable blocks of code Another essential concept in coding is functions , which allow you to store a piece of code that does a single task inside a defined block, and then call that code whenever you need it using a single short command — rather than having to type out the same code multiple times. In this article we'll explore fundamental concepts behind functions such as basic syntax, how to invoke and define them, scope, and parameters. Build your own function With most of the essential theory dealt with in the previous article, this article provides practical experience. Here you will get some practice building your own, custom function. Along the way, we'll also explain some useful details of dealing with functions. Function return values There's one last essential concept about functions for us to discuss — return values. Some functions don't return a significant value, but others do. It's important to understand what their values are, how to use them in your code, and how to make functions return useful values. We'll cover all of these below. Introduction to events In this article, we discuss some important concepts surrounding events, and look at the fundamentals of how they work in browsers. Event bubbling This article introduces the concepts of event bubbling, event capture, and event delegation, which are all about what happens when you add a listener to an element that contains another element, and an event then happens to the contained element. Challenge: Image gallery Challenge Now that we've looked at the fundamental building blocks of JavaScript, we'll test your knowledge of loops, functions, conditionals and events by getting you to build a fairly common item you'll see on a lot of websites — a JavaScript-powered image gallery. Object basics In this article, we'll look at fundamental JavaScript object syntax, and revisit some JavaScript features that we've already seen earlier in the course, reiterating the fact that many of the features you've already dealt with are objects. DOM scripting introduction When writing web pages and apps, one of the most common things you'll want to do is change the document structure in some way. This is usually done by manipulating the Document Object Model (DOM) via a set of built-in browser APIs for controlling HTML and styling information. In this article we'll introduce you to DOM scripting . Making network requests with JavaScript Another very common task in modern websites and applications is making network requests to retrieve individual data items from the server to update sections of a webpage without having to load an entire new page. This seemingly small detail has had a huge impact on the performance and behavior of sites, so in this article, we'll explain the concept and look at technologies that make it possible. Working with JSON JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax. It is commonly used for transmitting data in web applications (e.g., sending some data from the server to the client, so it can be displayed on a web page, or vice versa). You'll come across it quite often, so in this article, we give you all you need to work with JSON using JavaScript, including parsing JSON so you can access data within it, and creating JSON. Challenge: Building a house data UI Challenge In this challenge we are going to get you to write some JavaScript for a house search page on a property website. This will include fetching JSON data, filtering that data based on the values entered in provided form controls, and rendering that data to the UI. Along the way, we'll also test your knowledge of conditionals, loops, arrays and array methods, and more besides. JavaScript debugging and error handling In this lesson, we will return to the subject of debugging JavaScript (which we first looked at in What went wrong? ). Here we will delve deeper into techniques for tracking down errors, but also look at how to code defensively and handle errors in your code, avoiding problems in the first place. Test your skills You will find "Test your skills" articles placed between the tutorial articles to check whether you have retained the most important information before you move on. If you want to explore all of these together, you can find them listed at Test your skills: JavaScript . See also Scrimba: Learn JavaScript MDN learning partner Scrimba's Learn JavaScript course teaches you JavaScript through solving 140+ interactive coding challenges, building projects including a game, a browser extension, and even a mobile app. Scrimba features fun interactive lessons taught by knowledgeable teachers. Learn JavaScript An excellent resource for aspiring web developers — Learn JavaScript in an interactive environment, with short lessons and interactive tests, guided by automated assessment. The first 40 lessons are free, and the complete course is available for a small one-time payment. * Overview: Core learning modules * Next Help improve MDN Yes No Learn how to contribute This page was last modified on Aug 27, 2026 by MDN contributors . View this page on GitHub • Report a problem with this content Clear filter input * Learn web development * MDN curriculum * Getting started modules * Environment setup * Installing software * Browsing the web * Code editors * Dealing with files * Command line * Your first website * What will it look like? * Creating the content * Styling the content * Adding interactivity * Publishing * Web standards * How the web works * The web standards model * How browsers load websites * Soft skills * Research and learning * Collaboration and teamwork * Workflows and processes * Finding a job * Core modules * Structuring content with HTML * Basic HTML syntax * Web page metadata * Headings and paragraphs * Emphasis and importance * Lists * Test: HTML text basics * Advanced text features * Test: Advanced HTML text * Challenge: Letter markup * Structuring documents * Creating links * Test: Links * Challenge: Bird watching site * Images * Test: Images * Video and audio * Test: Audio and video * Challenge: Splash page * Table basics * Table accessibility * Challenge: Planet data table * Forms and buttons * Test: Forms and buttons * Challenge: Feedback form * Debugging HTML * Test: HTML tests index * Additional tutorials * Vector graphics * Embedding technologies * CSS styling basics * What is CSS? * CSS getting started * Challenge: Biography page * Basic selectors * Attribute selectors * Pseudo-classes and elements * Combinators * Test: Selectors * Box model * Test: Box model * Handling conflicts * Test: Cascade * Challenge: Fixing blog styles * Values and units * Test: Values and units * Sizing * Test: Sizing * Backgrounds and borders * Test: Backgrounds and borders * Overflow * Test: Overflow * Challenge: Sizing and decorating * Images, media, forms * Test: Images and forms * Styling tables * Challenge: Styling color scheme search * Debugging CSS * Test: Styling basics tests index * Additional tutorials * Advanced styling effects * Cascade layers * Multiple text directions * Organizing your CSS * CSS text styling * Text and font fundamentals * Styling lists * Styling links * Web fonts * Challenge: Community school homepage * CSS layout * Introduction * Floats * Test: Floats * Positioning * Test: Positioning * Flexbox * Test: Flexbox * CSS grid layout * Test: CSS grid * Challenge: Fundamental layout * Responsive web design * Media queries * Test: RWD & media queries * Challenge: mobile-first * Test: Layout tests index * Additional tutorials * Multiple-column layout * Practical positioning examples * Legacy layout methods * Supporting older browsers * Dynamic scripting with JavaScript * What is JavaScript? * JavaScript walkthrough * Troubleshooting * Variables * Test: Variables * Numbers and operators * Test: Math * Strings * String methods * Test: Strings * Arrays * Test: Arrays * Challenge: Story generator * Conditionals * Test: Conditionals * Loops * Test: Loops * Functions * Build your own function * Function return values * Test: Functions * Events * Event bubbling * Test: Events * Objects * Test: Objects * DOM scripting * Challenge: Image gallery * Network requests * JSON * Test: JSON * Challenge: House data UI * Debugging and error handling * Test: JavaScript tests index * JavaScript frameworks and libraries * Introduction * Framework features * React getting started * React ToDo app * React components * React events and state * React editing, filtering, conditional UI * React accessibility * React resources * Accessibility * What is accessibility? * Accessibility tools * Accessible HTML * Test: HTML a11y * Accessible CSS and JS * Test: CSS/JS a11y * WAI-ARIA * Test: WAI-ARIA * Accessible multimedia * Mobile accessibility * Challenge: A11y debugging * Test: A11y tests index * Design for developers * Version control * Extension modules * Advanced JavaScript objects * Object prototypes * Object-oriented programming * Classes in JavaScript * Test: Object-oriented JavaScript * Object building practice * Challenge: Bouncing balls features * Test: OOJS tests index * Client-side web APIs * Introduction * Video and audio * Drawing graphics * Client-side storage * Third-party APIs * Asynchronous JavaScript * Introduction * Using promises * Implementing promise-based APIs * Introducing workers * Challenge: Animation sequence * Web forms * Your first form * How to structure a web form * Basic native form controls * The HTML5 input types * Other form controls * Styling web forms * Advanced form styling * Customizable selects * Customizable listboxes * UI pseudo-classes * Client-side form validation * Sending form data * Additional tutorials * Custom form controls * JS form submission * Forms in legacy browsers * UI methods & controls * Understanding client-side tools * Overview * Package management * Sample toolchain * Deploying our app * Server-side websites * First steps * Introduction * Client-server overview * Server-side frameworks * Website security * Django (Python) * Django introduction * Dev environment setup * 1: Local library tutorial * 2: Skeleton website * 3: Models * 4: Django admin site * 5: Home page * 6: Generic list and detail views * 7: Sessions framework * 8: Authentication and permissions * 9: Forms * 10: Testing * 11: Deploying * Django security * Challenge: Django blog * Express (Node.js) * Express/Node introduction * Dev environment setup * 1: Local library tutorial * 2: Skeleton website * 3: Using databases with Mongoose * 4: Routes and controllers * 5: Displaying data * 6: Working with forms * 7: Deploying * Additional tutorials * Apache .htaccess * Server MIME type config * Plain Node.js server * Web performance * The "why" of web performance * What is web performance? * Perceived performance * Measuring performance * Multimedia: Images * Multim