Table of Contents

Learn how to bring life and interactivity to your web page with JavaScript our beginner's tutorial guide. We'll start from the basics and move through to more intermediate concepts.

  1. Fundamentals
  2. Learn the fundamentals of JavaScript, including how to include a .js file within an HTML document, what literals and variables are, and how to organize statements and code blocks to maximize readability.

    1. What is JavaScript?
    2. Learn what JavaScript is, and how you can use it to add interactivity and better user experience on your webpage.

    3. Applying JavaScript
    4. Learn how to apply JavaScript within an HTML document (internally) or link it from an external source.

    5. Literals and Variables
    6. Learn the difference between a literals and variables, and how to declare the latter.

    7. Statements and Code Organization
    8. Learn what statements are and how to organize your code to maximize readability and maintainability.

    9. Three ways to output text
    10. Learn the three ways you can print in JavaScript - alert(), document.write(), and console.log().

  3. Data Types
  4. Learn all about data types in JavaScript including strings, numbers, booleans, null, undefined and arrays.

    1. Introduction to Data Types
    2. Learn the different types of

    3. Numbers
    4. Learn about numbers, operators and the Math object in JavaScript.

    5. Strings
    6. Learn about Strings.

    7. Booleans, Null and Undefined
    8. Learn about booleans, null and undefined and what makes each special.

    9. Arrays
    10. Learn about how to declare and access javascript arrays.

    11. Implicit and Explicit Typing
    12. Learn how to convert from one type to another in JavaScript.

  5. Control Flow
  6. control flow

    1. Operators
    2. Look up the different types of comparison operators in Javascript

    3. Falsy and Truthy Values
    4. Learn which statements evaluate to true or false in JavaScript

    5. If and Switch Statements
    6. Learn how to navigate control flow with if and switch statements.

    7. Loops
    8. Learn how to use while, for, do-while loops in JavaScript. Also learn about the two keywords break and continue.

  7. Functions
  8. functions

    1. Introduction
    2. Learn what a function is, why you should use it, how to declare one and what function hoisting is in JavaScript.

    3. Function Arguments and Parameters
    4. Learn about JavaScript arguments and Parameters and their differences, along with the arguments object.

    5. Anonymous Functions and Closures
    6. Learn about anonymous functions, closures and IIFE.

    7. Variable Scope
    8. Learn about how variables can have a local and global scope.

  9. Objects
  10. objects

    1. Object Properties and Methods
    2. Learn about JavaScript objects, the object-oriented programming paradigm, and properties & methods.

    3. Creating objects
    4. Learn how to create (or instantiate) objects in JavaScript, as well as delete properties.

    5. Getting and Looping through Properties
    6. Learn how to check for the existance of a property, or loop through all properties of an object.

    7. Built-in Objects
    8. Learn about the three built-in objects of JavaScript: Browser Object Model, Document Object Model and Global JavaScript Objects.

    9. Global Objects
    10. Learn about the Math, Date, and Random global objects in JavaScript.

  11. Browser Object Model
  12. Learn about JavaScript's Browser Object Model, including the window object, history, location, navigator and screen objects.

    1. What is the Browser Object Model?
    2. Learn about the browser object model, which gives JavaScript its powerful features.

    3. The Window Object, Properties and Methods
    4. Learn about the window object, the top-most element in the Browser Object Model, which allows you to query the user's window properties and functions.

    5. The Other BOM Elements
    6. Learn about the history, location, navigator and screen elements of the Browser Object Model.

  13. Document Object Model
  14. Learn about JavaScript's document object model, which can be used to manipulate the elements on an HTML page.

    1. Introduction to the DOM
    2. Take a look into the Document Object Model, its tree-like structure and the four types of nodes.

    3. Accessing single elements and tree traversal
    4. Learn how to access single elements by using the getElementById() function as well as the querySelector(). Additionally, learn how to traverse the DOM tree.

    5. Accessing multiple elements and NodeLists
    6. Learn how to access multiple elements and manipulate NodeLists in Javascript.

    7. Modifying text and attributes fields
    8. Learn how to modify text and attribute fields in JavaScript using nodeValue, innerHTML, textContent, and learn about the methods used to access and update attributes.

    9. Creating and Deleting Elements
    10. Learn how to create elements, add attributes to them and attach them to the DOM. Also learn how to remove elements from the DOM.