The
JavaScript
Workshop

Built by a team of experts to help you unlock your next promotion, reboot your career, or kick off your latest side project.

Get Started Today

You'll be up and running with JavaScript in no time at all.

  • $34.99

    $34.99The JavaScript Workshop

    Unlock full, unlimited access and get started right away!
    Buy Now

Engineered for Success

Nobody likes going through hundreds of pages of dry theory, or struggling with uninteresting examples that don’t compile. We've got you covered. Any time, any device.

  • Learn by doing real-world development, supported by detailed step-by-step examples, screencasts and knowledge checks.

  • Become a verified practitioner, building your credentials by completing exercises, activities and assessment checks.

  • Manage your learning based on your personal schedule, with content structured to easily let you pause and progress at will.

Learn By Doing

You already know you want to learn JavaScript, and a smarter way to learn JavaScript is to learn by doing.

The JavaScript Workshop focuses on building up your practical skills so that you can develop for web, mobile and desktop users. Alongside knowledge of HTML and CSS, JavaScript is a key skill for those looking to enter professional web development.

On Your Terms

Build up and reinforce key skills in a way that feels rewarding.

You won't have to sit through any unnecessary theory. If you're short on time you can jump into a single exercise each day or spend an entire weekend learning about third-party libraries. It's your choice.

An Ideal Start

The JavaScript Workshop is the ideal companion for JavaScript beginners.

You'll build and iterate on your code like a software developer, learning along the way. This process means that you'll find that your new skills stick, embedded as best practice. A solid foundation for the years ahead.

Begin Your Journey

A simple, straightforward and pain-free way to learn JavaScript.

  • $34.99

    $34.99The JavaScript Workshop

    Unlock full, unlimited access and get started right away!
    Buy Now

Everything You Need

Every Workshop includes free access to a whole host of bonus downloadable content. No hidden fees or annoying DRM policies. Just pure, top-quality content.

  • Download a text-only version of the entire Workshop. Perfect for those moments where your WiFi connection is a bit spotty. Available as PDF or EPUB, and always DRM-free.

  • Save any of our step-by-step screencasts directly from our interactive player. You can rest easy knowing that you'll always have a live example to hand.

Get Build-Ready

Every Workshop includes a whole host of features that work together to help you get the job done. You’ll be ready to tackle real-world development in no time.
  • Hack Your Brain

    We've applied the latest pedagogical techniques to deliver a truly multimodal experience. It'll keep you engaged and make the learning stick. It's science!

  • Build Real Things

    Nobody likes wasting their time. We cut right to the action and get you building real skills that real, working developers value. The perfect approach for a career move.

  • Learn From Experts

    We've paired technical experts with top editorial talent. They've worked hard to deliver you the maximum impact for each minute you spend learning. It's our secret sauce.

  • Verify Your Credentials

    Prove yourself by taking the final challenge. We use the blockchain to cryptographically certify your newly vetted skill. It's perfect for sharing on social media. Hello LinkedIn!

  • Receive Free Updates

    Technology keeps changing, and so do we. We keep versions updated independently, so you'll always have access. No more worrying about third-party release cycles.

  • Access Anywhere

    All you need is an internet connection. We've built every course so that it works on desktop and mobile, giving you options that fit within your schedule.

What's Inside

From A to Z, we've got you covered!

  • 2. Working with JavaScript

    • Overview
    • Integrated Development Environments (IDE)
    • Exercise 2.01: Creating a Working Project Directory
    • Exercise 2.01: Creating a Working Project Directory
    • Exercise 2.02: Creating Project Boilerplate
    • Exercise 2.02: Creating Project Boilerplate
    • Basic JavaScript Syntax
    • Exercise 2.03: Verifying an Execution Order
    • Exercise 2.03: Verifying an Execution Order
    • Overview of JavaScript Environments
    • A Closer Look at Web Browser Developer Tools
    • HTML Element Manipulation with JavaScript
    • Activity 2.01: Adding and Modifying an Item to/in the To-Do List
    • Summary
    • Quiz 2
  • 3. Programming Fundamentals

    • Overview
    • Data Types
    • Exercise 3.01: Implementing Expressions and Operators
    • Exercise 3.01: Implementing Expressions and Operators
    • Using Variables and Constants in Expressions
    • Exercise 3.02: Working with Variables Using the Web Browser Console
    • Exercise 3.02: Working with Variables Using the Web Browser Console
    • Functions that Return Values
    • Exercise 3.03: Using Functions in Expressions
    • Exercise 3.03: Using Functions in Expressions
    • The Object Data Type
    • Exercise 3.04: Working with Ready-Made Objects
    • Exercise 3.04: Working with Ready-Made Objects
    • Self-Made Objects
    • Syntax
    • Conditional and Loop Flow
    • Exercise 3.05: Writing an if statement
    • Exercise 3.05: Writing an if statement
    • Exercise 3.06: Writing an if...else Statement
    • Exercise 3.06: Writing an if...else Statement
    • if Statements with Multiple else if Statements
    • Exercise 3.07: Writing an if Statement with Multiple if else Statements and the else Statement
    • Exercise 3.07: Writing an if Statement with Multiple if else Statements and the else Statement
    • Exercise 3.08: Writing a switch Statement and Testing it
    • Exercise 3.08: Writing a switch Statement and Testing it
    • Exercise 3.09: Writing a for Loop and Testing it
    • Exercise 3.09: Writing a for Loop and Testing it
    • Exercise 3.10: Writing a do...while Loop and Testing it
    • Exercise 3.10: Writing a do...while Loop and Testing it
    • Exercise 3.11: Writing a while Loop and Testing it
    • Exercise 3.11: Writing a while Loop and Testing it
    • Exercise 3.12: Writing a for...in Loop and Testing it
    • Exercise 3.12: Writing a for...in Loop and Testing it
    • Exercise 3.13: Writing a for...of Loop and Testing it
    • Exercise 3.13: Writing a for...of Loop and Testing it
    • continue Statement
    • Writing and Invoking Functions
    • Exercise 3.14: Writing a Function as a Statement and Invoking It
    • Exercise 3.14: Writing a Function as a Statement and Invoking It
    • Exercise 3.15: Writing a Function as an Expression and Invoking It
    • Exercise 3.15: Writing a Function as an Expression and Invoking It
    • Exercise 3.16: Writing an Arrow Function and Invoking It
    • Exercise 3.16: Writing an Arrow Function and Invoking It
    • Reacting to User Input Events and Updating the DOM
    • Exercise 3.17: Working with DOM Manipulation and Events
    • Exercise 3.17: Working with DOM Manipulation and Events
    • Debugging
    • Logic Bugs
    • Activity 3.01: The To-Do List Shuffle Program
    • Summary
    • Quiz 3
  • 4. JavaScript Libraries and Frameworks

    • Overview
    • Framework Versus Library
    • Popular JavaScript Frameworks
    • Exercise 4.01: Using a Third-Party Library in Your Code
    • Exercise 4.01: Using a Third-Party Library in Your Code
    • jQuery Versus Vanilla.js
    • Making XHR Requests
    • Exercise 4.02: Handling Click Events with jQuery
    • Exercise 4.02: Handling Click Events with jQuery
    • Exercise 4.03: Handling the Same Event with Vanilla.js
    • Exercise 4.03: Handling the Same Event with Vanilla.js
    • Exercise 4.04: Animating a "Peek-a-boo" on Button Click
    • Exercise 4.04: Animating a "Peek-a-boo" on Button Click
    • Exercise 4.05 : Rendering a List of To-Dos Using React
    • Exercise 4.05 : Rendering a List of To-Dos Using React
    • Exercise 4.06: Rendering a List of To-dos without a Library
    • Exercise 4.06: Rendering a List of To-dos without a Library
    • Exercise 4.07: Creating a Library Yourself
    • Exercise 4.07: Creating a Library Yourself
    • Activity 4.01: Adding an Animation to the To-Do List Application
    • Summary
    • Quiz 4
  • 5. Beyond the Fundamentals

    • Overview
    • Creating Variables
    • Exercise 5.01: Variables and Scope
    • Exercise 5.01: Variables and Scope
    • Exercise 5.02: Evaluating Types from Variables
    • Exercise 5.02: Evaluating Types from Variables
    • Fixed Types
    • Boolean Operators
    • Exercise 5.03: Odds and Evens
    • Exercise 5.03: Odds and Evens
    • Testing the Truth of Values
    • Exercise 5.04: Free Home Delivery Eligibility Validation
    • Exercise 5.04: Free Home Delivery Eligibility Validation
    • Why You Shouldn't Compare Boolean and Non-Boolean Expressions
    • Working with Numbers
    • Exercise 5.05: Currency Formatter
    • Exercise 5.05: Currency Formatter
    • Working with Strings
    • Exercise 5.06: Email Templates
    • Exercise 5.06: Email Templates
    • The String Object
    • Exercise 5.07: Sentence Reversal
    • Exercise 5.07: Sentence Reversal
    • The toString Method
    • Working with Functions
    • Exercise 5.08: Functional Parameters
    • Exercise 5.08: Functional Parameters
    • Arrow Functions
    • Exercise 5.09: Dynamic Currying
    • Exercise 5.09: Dynamic Currying
    • Activity 5.01: Simple Number Comparison
    • Working with Objects
    • Exercise 5.10: Converting Objects to toString
    • Exercise 5.10: Converting Objects to toString
    • Working with Arrays
    • Working with Dates
    • Activity 5.02: Creating a To-Do Model
    • Summary
    • Quiz 5
  • 6: Understanding Core Concepts

    • Overview
    • Event Types
    • Exercise 6.01: Custom Timer
    • Exercise 6.01: Custom Timer
    • Event Timers
    • Exercise 6.02: Real-Time Clock
    • Exercise 6.02: Real-Time Clock
    • The JavaScript Events Model
    • Exercise 6.03: Tabbed Content
    • Exercise 6.03: Tabbed Content
    • Bubbling Versus Capturing
    • Exercise 6.04: Conditional Event Prevention
    • Exercise 6.04: Conditional Event Prevention
    • Event Triggers
    • Working with Forms
    • Exercise 6.05: Simple Form Handling
    • Exercise 6.05: Simple Form Handling
    • Form Controls
    • Activity 6.01: Making Changes to the Model
    • Summary
    • Quiz 6
  • 7. Popping the Hood

    • Overview
    • JavaScript Execution and the Event Loop
    • Exercise 7.01: Working with the Event loop
    • Exercise 7.01: Working with the event loop
    • Exercise 7.02: Stack Overflow
    • Exercise 7.02: Stack Overflow
    • Memory Management
    • Exercise 7.03: Identifying Memory Leaks
    • Exercise 7.03: Identifying Memory Leaks
    • Exercise 7.04: Fixing the Memory Leak
    • Exercise 7.04: Fixing the Memory Leak
    • Activity 7.01: Finding Out the Number of Stack Frames
    • Summary
    • Quiz 7
  • 8. Browser APIs

    • Overview
    • Exercise 8.01: Drawing Shapes Using Canvas Elements
    • Exercise 8.01: Drawing Shapes Using Canvas Elements
    • Manipulate Shapes Using Path
    • Activity 8.01: Creating a Simple Fractal
    • Web Audio API
    • Exercise 8.02: Creating an Oscillator Waveform
    • Exercise 8.02: Creating an Oscillator Waveform
    • Activity 8.02: Playing Sound and Controlling Frequency Using Two Oscillators
    • Audio Visualization
    • Exercise 8.03: Storing and Populating Name Using the localStorage API
    • Exercise 8.03: Storing and Populating Name Using the localStorage API
    • IndexedDB
    • Exercise 8.04: Creating an Object Store and Adding Data
    • Exercise 8.04: Creating an Object Store and Adding Data
    • Exercise 8.05: Querying the Database
    • Exercise 8.05: Querying the Database
    • IndexedDB Cursor
    • Exercise 8.06: Fetching, Storing, and Querying Data
    • Exercise 8.06: Fetching, Storing, and Querying Data
    • Performance API
    • Exercise 8.07: Assessing Performance
    • Exercise 8.07: Assessing Performance
    • Exercise 8.08: Creating Chat Rooms Using Websockets
    • Exercise 8.08: Creating Chat Rooms Using Websockets
    • Activity 8.03: Audio Visualization
    • Summary
    • Quiz 8
  • 9: Working with Node.js

    • Overview
    • The Node.js Environment
    • Exercise 9.01: Your First Program!
    • Exercise 9.01: Your First Program!
    • How to Import/Require a Module in a Node.js Application
    • Node Modules
    • Exercise 9.02: Updating URL Information Using the URL Module
    • Exercise 9.02: Updating URL Information Using the URL Module
    • Exercise 9.03: Fetching Details about the Operating System
    • Exercise 9.03: Fetching Details about the Operating System
    • Path Module
    • Exercise 9.04: How to Extract and Join Directories
    • Exercise 9.04: How to Extract and Join Directories
    • HTTP
    • Exercise 9.05: Using a Node.js Server
    • Exercise 9.05: Using a Node.js Server
    • Third-Party Modules
    • Working with Databases
    • Exercise 9.06: Install, Connect, and Process Responses with a MySQL Server
    • Exercise 9.06: Installing, Connecting, and Processing Responses with a MySQL Server
    • Exercise 9.07: Installing and Configuring a Connection in MongoDB
    • Exercise 9.07: Installing and Configuring a Connection in MongoDB
    • Making Real-Time Web Apps
    • Exercise 9.08: Building a Chat Application
    • Exercise 9.08: Building a Chat Application
    • Activity 9.01: Create a Web Application to Upload, Store, and Save Image Details
    • Summary
    • Quiz 9
  • 10: Accessing External Resources

    • Overview
    • JSON
    • Exercise 10.01: Using a REST API to Make Calls
    • Exercise 10.01: Using a REST API to Make Calls
    • HTTP Headers
    • Exercise 10.02: Using AJAX and the jQuery ajax() Method to Invoke a Service
    • Exercise 10.02: Using AJAX and the jQuery ajax() Method to Invoke a Service
    • Exercise 10.03: More AJAX and Some CSS Styling
    • Exercise 10.03: More AJAX and Some CSS Styling
    • CSS
    • Other Libraries and XMLHttpRequest
    • Activity 10.01: Implement REST Service Calls Using Various Techniques
    • Summary
    • Quiz 10
  • 11. Creating Clean and Maintainable Code

    • Overview
    • What is a Regex?
    • Regexes in Detail
    • Exercise 11.01: The Effect of the g Flag
    • Exercise 11.01: The Effect of the g Flag
    • Other String Methods for Regexes
    • Exercise 11.02: Modifying Regex to Match a Pattern
    • Exercise 11.02: Modifying Regex to Match a Pattern
    • Adding More Strings to the Regex
    • Activity 11.01: Expanding Phone Number Matching Patterns to Accept Multiple Formats
    • Activity 11.02: Expanding Phone Number Matching Patterns to Accept a Particular Format
    • Useful Regexes
    • Best Practices for Clean Coding
    • Exercise 11.03: JSLint
    • Exercise 11.03: JSLint
    • Activity 11.03: Refactoring to Clean Code
    • Summary
    • Quiz 11
  • 12. Using Next-Generation JavaScript

    • Overview
    • Browser Differences
    • Package Managers
    • Exercise 12.01: A Basic Babel Project
    • Exercise 12.01: A Basic Babel Project
    • Babel Applications with Parcel
    • Exercise 12.02: A Basic Parcel Project
    • Exercise 12.02: A Basic Parcel Project
    • Babel Applications with webpack
    • Exercise 12.03: A Basic webPack Project
    • Exercise 12.03: A Basic webPack Project
    • Other Popular Bundlers
    • Exercise 12.04: A Basic TypeScript Project
    • Exercise 12.04: A Basic TypeScript Project
    • Elm and ClojureScript
    • Code Support Libraries
    • Popular Frameworks
    • Server-Side Libraries
    • Activity 12.01: Creating a Project to Recognize and Compile TypeScript Files
    • Summary
    • Quiz 12
  • 13. JavaScript Programming Paradigms

    • Overview
    • Exercise 13.01: Implementing Procedural Programming
    • Exercise 13.01: Implementing Procedural Programming
    • Exercise 13.02: Implementing OOP
    • Exercise 13.02: Implementing OOP
    • Exercise 13.03: Inheritance Implementation Using the extends Keyword
    • Exercise 13.03: Inheritance Implementation Using the extends Keyword
    • Exercise 13.04: Prototypical Inheritance Implementation
    • Exercise 13.04: Prototypical Inheritance Implementation
    • Anonymous Functions
    • Data Scope
    • JavaScript Memory Management
    • Activity 13.01: Creating a Calculator App
    • Summary
    • Quiz 13
  • 14. Understanding Functional Programming

    • Overview
    • Exercise 14.01: Immutable Values and Objects – Strings
    • Exercise 14.01: Immutable Values and Objects – Strings
    • Exercise 14.02: Immutable Values and Objects – Numbers
    • Exercise 14.02: Immutable Values and Objects – Numbers
    • Exercise 14.03: Mutability – Arrays
    • Exercise 14.03: Mutability – Arrays
    • Exercise 14.04: Mutability – Objects
    • Exercise 14.04: Mutability – Objects
    • Cloning Objects and Arrays
    • Higher-Order Functions
    • Exercise 14.05: Another Way of Using Array.prototype.map
    • Exercise 14.05: Another Way of Using Array.prototype.map
    • Exercise 14.06: Grouping with Array.prototype.reduce
    • Exercise 14.06: Grouping with Array.prototype.reduce
    • Composition with compose() and pipe()
    • Exercise 14.07: More Uses for Composition and Curried Functions
    • Exercise 14.07: More Uses for Composition and Curried Functions
    • Exercise 14.08: Creating a Deck of Cards Using reduce()
    • Exercise 14.08: Creating a Deck of Cards Using reduce
    • Exercise 14.09: Using the pipe Method to Create a Card Shuffling Function
    • Exercise 14.09: Using the pipe Method to Create a Card Shuffling Function
    • Blackjack
    • Activity 14.01: Blackjack Card Functions
    • Managing Blackjack Game State
    • Summary
    • Quiz 14
  • 15. Asynchronous Tasks

    • Overview
    • Exercise 15.01: Asynchronous Execution with setTimeout()
    • Exercise 15.01: Asynchronous Execution with setTimeout()
    • Callback Hell and the Pyramid of Doom
    • Exercise 15.02: Refactoring the Honors List to Use the Fetch API
    • Exercise 15.02: Refactoring the Honors List to Use the Fetch API
    • An Improvement for Better Performance
    • Exercise 15.03: Creating a Utility Function to Delay Execution
    • Exercise 15.03: Creating a Utility Function to Delay Execution
    • Further Refinements to addDelay()
    • Async/Await
    • Activity 15.01: Refactoring Promise Code to await/async Syntax
    • Activity 15.02: Further Simplifying Promise Code to Remove Function Parameters
    • Summary
    • Quiz 15
  • Assessment Test

    • Assessment
  • Bonus Chapter 1: Stepping into the Future

    • Overview
    • Machine Learning
    • What is TensorFlow.js?
    • Exercise 16.01: Creating an Image Classification App Using TensorFlow
    • Exercise 16.01: Creating an Image Classification App Using TensorFlow
    • The KNN Algorithm
    • Exercise 16.02: Creating a Webcam Image Classification App Using TensorFlow
    • Exercise 16.02: Creating a Webcam Image Classification App Using TensorFlow
    • Exercise 16.03: Model Training in the Browser
    • Exercise 16.03: Model Training in the Browser
    • Exercise 16.04: Preparing the Data
    • Exercise 16.04: Preparing the Data
    • Exercise 16.05: Training the Model
    • Exercise 16.05: Training the Model
    • Exercise 16.06: Using the Model for Prediction
    • Exercise 16.06: Using the Model for Prediction
    • Activity 16.01: Using TensorFlow.js and COCO-SSD Object Detection to Create an App
    • Summary
    • Bonus Chapter 1 Quiz
  • Bonus Chapter 2: Testing Your Code

    • Overview
    • Why is Testing Important?
    • Test-Driven Development (TDD)
    • Exercise 17.01 – Simple Unit Test
    • Exercise 17.01 – Simple Unit Test
    • Higher-Kinded Types
    • Exercise 17.02: Setting Up Tests Using Babel
    • Exercise 17.02: Setting Up Tests Using Babel
    • Writing Tests
    • Testing the validateString Function
    • Exercise 17.03: Populating the Tests
    • Exercise 17.03: Populating the Tests
    • Exercise 17.04: Building Functor Functionality
    • Exercise 17.04: Building Functor Functionality
    • Exercise 17.05: Resolving Errors from Unit Tests
    • Exercise 17.05: Resolving Errors from Unit Tests
    • Activity 17.01: Test-Driven Development
    • Jest expect Methods
    • Test Module Structure
    • Asynchronous Assertions
    • Custom Assertions
    • Exercise 17.06: Extending Jest with Functor Matchers
    • Exercise 17.06: Extending Jest with Functor Matchers
    • Mocking Tests
    • Activity 17.02: Sentence Parsing Test Suite
    • Summary
    • Bonus Chapter 2 Quiz
  • Activity Solutions

    • Activity 1.01: Creating an Alert Box Popup in the Web Browser
    • Activity 1.01: Creating an Alert Box Popup in the Web Browser
    • Activity 2.01: Adding and Modifying an Item to/in the To-Do List
    • Activity 2.01: Adding and Modifying an Item to/in the To-Do List
    • Activity 3.01: The To-Do List Shuffle Program
    • Activity 3.01: The To-Do List Shuffle Program
    • Activity 4.01: Adding an Animation to the To-do List Application
    • Activity 4.01: Adding an Animation to the To-do List Application
    • Activity 5.01: Simple Number Comparison
    • Activity 5.01: Simple Number Comparison
    • Activity 5.02: Creating a To-Do Model
    • Activity 5.02: Creating a To-Do Model
    • Activity 6.01: Making Changes to the Model
    • Activity 6.01: Making Changes to the Model
    • Activity 7.01: Finding out the Number of Stack Frames
    • Activity 7.01: Finding out the Number of Stack Frames
    • Activity 8.01: Creating a Simple Fractal
    • Activity 8.01: Creating a Simple Fractal
    • Activity 8.02: Playing Sound and Controlling Frequency Using Two Oscillators
    • Activity 8.02: Playing Sound and Controlling Frequency Using Two Oscillators
    • Activity 8.03: Audio Visualization
    • Activity 8.03: Audio Visualization
    • Activity 9.01: Create a Web Application to Upload, Store, and Save Image Details
    • Activity 9.01: Create a Web Application to Upload, Store, and Save Image Details
    • Activity 10.01: Implement REST Service Calls Using Various Techniques
    • Activity 10.01: Implement REST Service Calls Using Various Techniques
    • Activity 11.01: Expanding Phone Number Matching Patterns to Accept Multiple Formats
    • Activity 11.01: Expanding Phone Number Matching Patterns to Accept Multiple Formats
    • Activity 11.02: Expanding Phone Number Matching Patterns to Accept a Particular Format
    • Activity 11.02: Expanding Phone Number Matching Patterns to Accept a Particular Format
    • Activity 11.03: Refactoring to Clean Code
    • Activity 11.03: Refactoring to Clean Code
    • Activity 12.01: Creating a Project to Recognize and Compile TypeScript Files
    • Activity 12.01: Creating a Project to Recognize and Compile TypeScript Files
    • Activity 13.01: Creating a Calculator App
    • Activity 13.01: Creating a Calculator App
    • Activity 14.01: Blackjack Card Functions
    • Activity 14.01: Blackjack Card Functions
    • Activity 15.01: Refactoring Promise Code to await/async Syntax
    • Activity 15.01: Refactoring Promise Code to await/async Syntax
    • Activity 15.02: Further Simplifying Promise Code to Remove Function Parameters
    • Activity 15.02: Further Simplifying Promise Code to Remove Function Parameters
    • Activity 16.01: Using TensorFlow.js and COCO-SSD Object Detection to Create an App
    • Activity 16.01: Using TensorFlow.js and COCO-SSD Object Detection to Create an App
    • Activity 17.01: Test-Driven Development
    • Activity 17.01: Test-Driven Development
    • Activity 17.02: Sentence Parsing Test Suite
    • Activity 17.02: Sentence Parsing Test Suite
  • Post Assessment

    • Post Assessment

Get Verified

Complete The JavaScript Workshop to unlock your secure credential.

We seal a record of your certification on the public Bitcoin blockchain. This verifies your achievement and lets employers authenticate your status with Packt. Our credentials are easy to share, and are ideal for displaying on your LinkedIn profile.
A copy of a certificate for The JavaScript Workshop

Take A Step Forward

There has never been a better time to start learning JavaScript.

  • $34.99

    $34.99The JavaScript Workshop

    Unlock full, unlimited access and get started right away!
    Buy Now

Already Know
JavaScript?

Don't worry, we've got your back with other languages and frameworks too!

Show me my options!