• Skip to main content
  • Select language
  • Skip to search
MDN Web Docs
  • Technologies
    • HTML
    • CSS
    • JavaScript
    • Graphics
    • HTTP
    • APIs / DOM
    • WebExtensions
    • MathML
  • References & Guides
    • Learn web development
    • Tutorials
    • References
    • Developer Guides
    • Accessibility
    • Game development
    • ...more docs
Learn web development
  1. MDN
  2. Learn web development
  3. JavaScript
  4. Use JavaScript to solve common problems

Use JavaScript to solve common problems

In This Article
  1. Common beginner's mistakes
    1. Correct spelling and casing
    2. Semi-colon position
    3. Functions
      1. Function scope
      2. Running code after a return statement
    4. Object notation versus normal assignment
  2. Basic definitions
  3. Basic use cases
    1. General
    2. Variables
    3. Math
    4. Strings
    5. Arrays
    6. Debugging JavaScript
    7. Making decisions in code
    8. Looping/iteration
  4. Intermediate use cases
    1. Functions
    2. Objects
    3. JSON
    4. Events
    5. Object-oriented JavaScript
    6. Web APIs

Draft
This page is not complete.

The following links point to solutions to common everyday problems you'll need to solve with JavaScript.

Common beginner's mistakes

Correct spelling and casing

If your code doesn't work and/or the browser complains that something is undefined, check that you've spelt all your variable names, function names, etc. correctly.   

Common built-in browser functions that cause problems are:

Correct Wrong
getElementsByTagName() getElementbyTagName()
getElementsByName() getElementByName()
getElementsByClassName() getElementByClassName()
getElementById() getElementsById()

Semi-colon position

You need to make sure you don't place semi-colon incorrectly. For example:

Correct Wrong
elem.style.color = 'red'; elem.style.color = 'red;'

Functions

There are a number of things that can go wrong with functions.

One of the most common errors is to declare the function, but not call it anywhere. For example:

function myFunction() {
  alert('This is my function.');
};

Won't do anything unless you call it, for example with

myFunction();

Function scope

Remember that functions have their own scope — you can't access a variable value set inside a function from outside the function, unless you declared the variable globally (i.e. not inside any functions), or return the value out of the function.

Running code after a return statement

Remember also that when you return a value out of a function, the JavaScript interpreter exits the function — no code declared after the return statement will run.

In fact, some browsers (like Firefox) will give you an error message in the developer console if you have code after a return statement. Firefox gives you "unreachable code after return statement".

Object notation versus normal assignment

When you assign something normally in JavaScript, you use a single equals sign, e.g.:

var myNumber = 0;

This doesn't work in Objects, however — with objects you need to separate member names from their values using colons, and separate each member with a comma, for example:

var myObject = {
  name : 'Chris',
  age : 38
}

Basic definitions

  • What is JavaScript?
  • What is a variable?
  • What are strings?
  • What is an array?
  • What is a loop?
  • What is a function?
  • What is an event?
  • What is an object?
  • What is JSON?
  • What is a web API?
  • What is the DOM?

Basic use cases

General

  • How do you add JavaScript to your page?
  • How do you add comments to JavaScript code?

Variables

  • How do you declare a variable?
  • How do you initialize a variable with a value?
  • How do you update a variable's value? (also see Assignment operators)
  • What data types can values have in JavaScript?
  • What does 'loosely typed' mean?

Math

  • What types of number do you have to deal with in web development?
  • How do you do basic math in JavaScript?
  • What is operator precedence, and how is it handled in JavaScript?
  • How do you increment and decrement values in JavaScript?
  • How do you compare values in JavaScript? (e.g. to see which one is bigger, or to see if one value is equal to another).

Strings

  • How do you create a string in JavaScript?
  • Do you have to use single quotes or double quotes?
  • How do you escape characters in strings?
  • How do you join strings together?
  • Can you join strings and numbers together?
  • How do you find the length of a string?
  • How you find what character is at a certain position in a string?
  • How do you find and extract a specific substring from a string?
  • How do you change the case of a string?
  • How do you replace one specific substring with another?

Arrays

  • How do you create an array?
  • How do you access and modify the items in an array? (this includes multidimensional arrays)
  • How do you find the length of an array?
  • How you add and remove array items?
  • How do you split a string into array items, or join array items into a string?

Debugging JavaScript

  • What are the basic types of error?
  • What are browser developer tools, and how do you access them?
  • How do you log a value to the JavaScript console?
  • How do you use breakpoints, and other JavaScript debugging features?

For more information on JavaScript debugging, see Handling common JavaScript problems; also see Other common errors for a description of common errors.

Making decisions in code

  • How do you execute different blocks of code, depending on a variable's value or other condition?
  • How do you use if ...else statements?
  • How do nest one decision block inside another?
  • How do you use AND, OR, and NOT operators in JavaScript?
  • How do you conveniently handle a large number of choices for one condition?
  • How do you use a ternary operator to make a quick choice between two options based on a true or false test?

Looping/iteration

  • How do you run the same bit of code over and over again?
  • How do you exit a loop before the end if a certain condition is met?
  • How do you skip to the next iteration of a loop if a certain condition is met?
  • How do you use while and do ... while loops?
  • How to iterate over the elements in an array
  • How to iterate over the elements in a multidimensional array
  • How to iterate over the members in an object
  • How to iterate over the members of an object nested inside an array

Intermediate use cases

Functions

  • How do you find functions in the browser?
  • What is the difference between a function and a method?
  • How do you create your own functions?
  • How do you run (call, or invoke) a function?
  • What is an anonymous function?
  • How do you specify parameters (or arguments) when invoking a function?
  • What is function scope?
  • What are return values, and how do you use them?

Objects

  • How do you create an object?
  • What is dot notation?
  • What is bracket notation?
  • How do you get and set the methods and properties of an object?
  • What is this, in the context of an object?
  • What is object-oriented programming?
  • What are constructors and instances, and how do you create them?
  • What different ways are there to create objects in JavaScript?

JSON

  • How do you structure JSON data, and read it from JavaScript?
  • How can you load a JSON file into a page?
  • How do you convert a JSON object to a text string, and back again?

Events

  • What are event handlers and how do you use them?
  • What are inline event handlers?
  • What does the addEventListener() function do, and how do you use it?
  • Which mechanism should I use to add event code to my web pages?
  • What are event objects, and how do you use them?
  • How do you prevent default event behaviour?
  • How do events fire on nested elements? (event propagation, also related — event bubbling and capturing)
  • What is event delegation, and how does it work?

Object-oriented JavaScript

  • What are object prototypes?
  • What is the constructor property, and how can you use it?
  • How do you add methods to the constructor?
  • How do you create a new constructor that inherits its members from a parent constructor?
  • When should you use inheritance in JavaScript?

Web APIs

  • How do you manipulate the DOM (e.g. adding or removing elements) using JavaScript?

 

Document Tags and Contributors

Tags: 
  • Beginner
  • JavaScript
  • Learn
 Contributors to this page: adekoyejo, chrisdavidmills
 Last updated by: adekoyejo, May 17, 2017, 5:29:31 AM
See also
  1. Complete beginners start here!
  2. Getting started with the Web
    1. Getting started with the Web overview
    2. Installing basic software
    3. What will your website look like?
    4. Dealing with files
    5. HTML basics
    6. CSS basics
    7. JavaScript basics
    8. Publishing your website
    9. How the Web works
  3. HTML — Structuring the Web
  4. Introduction to HTML
    1. Introduction to HTML overview
    2. Getting started with HTML
    3. What's in the head? Metadata in HTML
    4. HTML text fundamentals
    5. Creating hyperlinks
    6. Advanced text formatting
    7. Document and website structure
    8. Debugging HTML
    9. Assessment: Marking up a letter
    10. Assessment: Structuring a page of content
  5. Multimedia and embedding
    1. Multimedia and embedding overview
    2. Images in HTML
    3. Video and audio content
    4. From object to iframe — other embedding technologies
    5. Adding vector graphics to the Web
    6. Responsive images
    7. Assessment: Mozilla splash page
  6. HTML tables
    1. HTML tables overview
    2. HTML table basics
    3. HTML Table advanced features and accessibility
    4. Assessment: Structuring planet data
  7. CSS — Styling the Web
  8. Introduction to CSS
    1. Introduction to CSS overview
    2. How CSS works
    3. CSS syntax
    4. Selectors introduction
    5. Simple selectors
    6. Attribute selectors
    7. Pseudo-classes and pseudo-elements
    8. Combinators and multiple selectors
    9. CSS values and units
    10. Cascade and inheritance
    11. The box model
    12. Debugging CSS
    13. Assessment: Fundamental CSS comprehension
  9. Styling text
    1. Styling text overview
    2. Fundamental text and font styling
    3. Styling lists
    4. Styling links
    5. Web fonts
    6. Assessment: Typesetting a community school homepage
  10. Styling boxes
    1. Styling boxes overview
    2. Box model recap
    3. Backgrounds
    4. Borders
    5. Styling tables
    6. Advanced box effects
    7. Assessment: Creating fancy letterheaded paper
    8. Assessment: A cool-looking box
  11. CSS layout
    1. CSS layout overview
    2. Introduction
    3. Floats
    4. Positioning
    5. Practical positioning examples
    6. Flexbox
    7. Grids
  12. JavaScript — Dynamic client-side scripting
  13. JavaScript first steps
    1. JavaScript first steps overview
    2. What is JavaScript?
    3. A first splash into JavaScript
    4. What went wrong? Troubleshooting JavaScript
    5. Storing the information you need — Variables
    6. Basic in JavaScript — Numbers and operators
    7. Handling text — Strings in JavaScript
    8. Useful string methods
    9. Arrays
    10. Assessment: Silly story generator
  14. JavaScript building blocks
    1. JavaScript building blocks overview
    2. Making decisions in your code — Conditionals
    3. Looping code
    4. Functions — Reusable blocks of code
    5. Build your own function
    6. Function return values
    7. Introduction to events
    8. Assessment: Image gallery
  15. Introducing JavaScript objects
    1. Introducing JavaScript objects overview
    2. Object basics
    3. Object-oriented JavaScript for beginners
    4. Object prototypes
    5. Inheritance in JavaScript
    6. Working with JSON data
    7. Object building practise
    8. Assessment: Adding features to our bouncing balls demo
  16. Accessibility — Make the web usable by everyone
  17. Accessibility guides
    1. Accessibility overview
    2. What is accessibility?
    3. HTML: A good basis for accessibility
    4. CSS and JavaScript accessibility best practices
    5. WAI-ARIA basics
    6. Accessible multimedia
    7. Mobile accessibility
  18. Accessibility assessment
    1. Assessment: Accessibility troubleshooting
  19. Tools and testing
  20. Cross browser testing
    1. Cross browser testing overview
    2. Introduction to cross browser testing
    3. Strategies for carrying out testing
    4. Handling common HTML and CSS problems
    5. Handling common JavaScript problems
    6. Handling common accessibility problems
    7. Implementing feature detection
    8. Introduction to automated testing
    9. Setting up your own test automation environment
  21. Server-side website programming
  22. First steps
    1. First steps overview
    2. Introduction to the server-side
    3. Client-Server overview
    4. Server-side web frameworks
    5. Website security
  23. Django web framework (Python)
    1. Django web framework (Python) overview
    2. Introduction
    3. Setting up a development environment
    4. Tutorial: The Local Library website
    5. Tutorial Part 2: Creating a skeleton website
    6. Tutorial Part 3: Using models
    7. Tutorial Part 4: Django admin site
    8. Tutorial Part 5: Creating our home page
    9. Tutorial Part 6: Generic list and detail views
    10. Tutorial Part 7: Sessions framework
    11. Tutorial Part 8: User authentication and permissions
    12. Tutorial Part 9: Working with forms
    13. Tutorial Part 10: Testing a Django web application
    14. Tutorial Part 11: Deploying Django to production
    15. Web application security
    16. Assessment: DIY mini blog
  24. Express Web Framework (node.js/JavaScript)
    1. Express Web Framework (Node.js/JavaScript) overview
    2. Express/Node introduction
    3. Setting up a Node (Express) development environment
    4. Express tutorial: The Local Library website
    5. Express Tutorial Part 2: Creating a skeleton website
    6. Express Tutorial Part 3: Using a database (with Mongoose)
    7. Express Tutorial Part 4: Routes and controllers
    8. Express Tutorial Part 5: Displaying library data
    9. Express Tutorial Part 6: Working with forms
    10. Express Tutorial Part 7: Deploying to production
  25. Further resources
  26. Advanced learning material
    1. WebGL: Graphics processing
  27. Common questions
    1. HTML questions
    2. CSS questions
    3. JavaScript questions
    4. How the Web works
    5. Tools and setup
    6. Design and accessibility
  28. How to contribute