JavaScript Tutorial

Home » JavaScript Tutorial

JavaScript is a versatile scripting language that, on the client side, runs in a user’s web browser to create interactive and dynamic web page experiences. Additionally, JavaScript can be utilized on the server side, leveraging environments like Node.js, to manage application logic, interact with databases, and handle requests.

JavaScript Introduction:

  • JavaScript’s History: A brief history of JavaScript and an introduction to what it’s used for.
  • Getting Started with JS: Text editor setup, linking HTML/JS files, and using the browser console effectively.
  • JavaScript’s Syntax & Structure: Case sensitivity, comments in JavaScript, statements, semi-colons, strict mode, and dynamic typed vs. static typed languages.
  • Variables: Create named containers for storing data with the var, let, and const variable keywords.
  • Data Types: The fundamental “primitive” data types that can be stored in variables (String, Number, Boolean, BigInt, null, undefined, Symbol) and the Object type which includes several sub-types.
  • Escape Sequences: Control text formatting by escaping characters or adding characters, line breaks, and tabs.
  • Scope: The “visibility” and where variables are accessible with Global, Function, and Block scope.
  • Operators: The symbols that let you perform calculations, assign values, and compare data. This lesson covers the essential Arithmetic, Assignment, Comparison, and Logical operators (like +, ===, and &&).
  • Type Coercion: Learn how to write predictable code by understanding the difference between == (loose) and === (strict) equality while seeing how JavaScript automatically converts data from one type to another.
  • Expressions & Statements: Learn the difference between a Statement (a complete instruction, like a sentence) and an Expression (a piece of code that results in a single value).

Built-in Objects & Methods:

  • Primitives & Methods: While primitives (like a string) aren’t objects, JavaScript temporarily wraps them in a “wrapper object” when you try to access a method or property (e.g., ‘hello’.toUpperCase()).
  • String Properties & Methods: How to manipulate and inspect strings, such as .length (property), .toUpperCase(), .toLowerCase(), .trim(), .includes(), .slice(), .split(), .replace().
  • Number Methods & Global Functions: Methods for formatting numbers and functions for converting strings to numbers with .toFixed(), .toString(). Also, the global functions parseInt(), parseFloat(), and isNaN().
  • The Math Object: A global, built-in object that provides common mathematical functions and constants with Math.random() (and how to get a random number in a range), Math.floor(), Math.ceil(), Math.round(), Math.max(), Math.min().
  • The Date Object: How to create and work with dates and times in JavaScript. (This fits much better here than under “Functions”). Topics: new Date(), .getFullYear(), .getMonth(), .getDate(), .toString().

Control Flow and Collections (Arrays, Objects, Sets, Maps):

  • Conditional Logic: Add Description
  • Try/Catch Synchronous Error Handling: Try/Catch/Finally (optional) to handle runtime errors.
  • Loops: Add Description
  • Arrays: Add Description
  • Basic Array Methods: Learn how to create arrays (literals), access elements by their index, and perform basic manipulation like adding, removing, and finding items. Core Methods Include: .length (property) .push() / .pop() (adding/removing from the end) .shift() / .unshift() (adding/removing from the beginning) .slice() (copying a portion) .splice() (modifying the original array) .indexOf() / .includes() (checking for items) .join() (creating a string from an array).
  • Objects: Add Description
  • JS Objects vs. JSON: Add Description
  • The JSON Object: How to convert JavaScript objects to strings (for sending data) and vice-versa with JSON.stringify() (JS object to JSON string) and JSON.parse() (JSON string to JS object). This provides a great setup for your later section “JS Objects vs. JSON.”
  • Primitive vs. Reference Values: Add Description
  • ES6 Features (Part 1): Add Description

The Document Object Model (DOM):

  • The Document Object Model (DOM): What the DOM is and how the browser parses HTML into a “tree” of objects that JavaScript can interact with the document object.
  • DOM Manipulation (Part 1) Selecting & Traversing: How to find and navigate to specific elements on the page with getElementById, querySelector, querySelectorAll, parentElement, children, nextElementSibling, and more.
  • DOM Manipulation (Part 2) Changing the Page: How to create, modify, and remove elements and their content with .textContent vs. .innerHTML (and their security comparitivly), .setAttribute(), .style, .classList (add/remove/toggle), .createElement(), .appendChild(), .remove(), and more.
  • Event Handling: Making Pages Interactive: How to “listen” for user actions (like clicks, key presses, or form submissions) and run code in response with addEventListener(), the event object, and common event types (click, submit, keydown, change).
  • Advanced Events: Bubbling, Capturing & Delegation: Understanding the DOM’s event flow (bubbling) and mastering event delegation, the most efficient pattern for handling many events.
  • Web Storage (localStorage & sessionStorage): Understanding the DOM’s event flow (bubbling) and mastering event delegation, the most efficient pattern for handling many events.
  • Accessibility (A11y): A brief introduction to accessibility, such as managing keyboard focus with .focus() and what ARIA attributes are for (e.g., dynamically changing aria-hidden).

Functions and Scope:

  • Function Fundamentals: Add Description
  • Arrow Functions (ES6): Add Description
  • Scope Explained: Add Description
  • Scope Examples: Add Description
  • Hoisting & The Temporal Dead Zone (TDZ): Add Description

JavaScript “Under the Hood”:

  • Intro to Async JS: Add Description
  • The Execution Context: Add Description
  • The Call Stack: Add Description
  • The Event Loop: Add Description
  • Browser Web APIs: Add Description

Callbacks & Higher Order Functions:

  • First-Class Functions: Add Description
  • Callback Functions: Add Description
  • Higher-Order Functions: Add Description
  • Advanced Array Methods: Master modern, powerful iteration and transformation techniques using higher-order functions. This is the core of modern JavaScript data manipulation. Core Methods: .forEach() (to replace for loops) .map() (to transform data into a new array) .filter() (to select a subset of data) .reduce() (to aggregate data into a single value) .find() / .findIndex() (to get the first matching item) .some() / .every() (to check for conditions) .sort() (and the importance of the compare function).
  • ES6 Features (Part 2): Add Description

Object-Oriented Programming:

  • The ‘this’ Keyword: Add Description
  • Prototypes: Prototypes and the Prototype Chain
  • Constructor Functions (ES5): Add Description
  • ES6 Classes: Add Description

Asynchronous JavaScript:

  • Asynchronous Callbacks: Add Description
  • Promises: Prototypes and the Prototype Chain
  • HTTP and APIs: Add Description
  • The fetch API: Add Description
  • Async/Await (ES8): Add Description
  • Advanced Async Patterns: Add Description
  • Error Handling: Add Description

Modern JavaScript & Advanced Patterns:

  • Modules (ES6): Add Description
  • IIFE Functions (Immediately Invoked Function Expressions): Add Description
  • Lexical Scope & Closure: Add Description
  • Practical Closure: Add Description
  • Recursion: Add Description
  • Currying: Prototypes and the Prototype Chain
  • Generator Functions: Add Description
  • Regular Expressions: Add Description

Tooling & Best Practices:

  • Advanced Debugging: Add Description
  • Git & GitHub: Prototypes and the Prototype Chain
  • Introduction to Unit Testing: Add Description
  • Linters & Formatters: Add Description
  • Continuous Integration/Continuous Deployment (CI/CD): Creating a CI/CD pipeline with GitHub Actions.

Data Structures & Algorithms (DSA):

  • Complexity Analysis: Add Description
  • Core Data Structures: Prototypes and the Prototype Chain ..graphs
  • Search Algorithms: Add Description
  • Sorting Algorithms: Add Description
  • Tree/Graph Traversal: Add Description
  • & more.. Linked Lists, queues, etc.: Add Description

JavaScript is the foundation to bulding dynamic experiences on the web. Whether you’re aiming to become a software engineer or want to add interactive elements to your website, learning JavaScript is an essential step in your journey.

HOME
Next Lesson >