Eloquent JavaScript: A Modern Introduction to Programming
A comprehensive guide to modern programming using JavaScript. The course covers fundamental programming principles, the JavaScript language specification, web browser integration, and server-side development with Node.js, including five real-world project applications.
Lessons
Lesson
This lesson introduces the concept of programming as the art of subduing complexity by creating immaterial logic that directs physical hardware. Students will learn the fundamental structure of JavaScript, including the roles of variables, control flow, and the distinction between statements and expressions.
This lesson explores advanced control flow in JavaScript, focusing on sophisticated iteration patterns like for loops, do-while loops, and multi-way branching with switch statements. Students will learn to manage program execution precisely using break and continue keywords, modular arithmetic, and nested loops to solve complex algorithmic challenges.
This lesson explores the concept of abstraction in programming, focusing on how to transition from imperative, hardware-level logic to declarative, human-readable code. Students will learn to implement and refine flexible functions, such as range and sum, while analyzing the performance trade-offs associated with the abstraction tax.
This lesson explores interface-based polymorphism by defining a standardized Table Interface that allows layout engines to process diverse data types through a consistent set of methods. Students will learn to implement flexible, decoupled systems by using defensive programming techniques and interface contracts to manage object rendering and alignment.
This lesson introduces Regular Expressions (RegExp) in JavaScript, covering how to define patterns using literal notation or constructors and how to use the .test() method for validation. Students will learn to manage case sensitivity, handle special characters through escaping, and apply these techniques to dynamic string matching tasks.
This lesson explores the evolution of JavaScript module systems, focusing on how to prevent namespace pollution through techniques like Immediately Invoked Function Expressions (IIFEs) and closures. Students will learn to design robust, encapsulated code by creating private scopes and structured public interfaces for their modules.
AI020: Events and Interactive Platforms (Lesson 7) explores the technical foundations of building dynamic web experiences through DOM manipulation, regular expressions, and event handling. Students will learn to transform static content into interactive environments by implementing efficient workflows for real-time feedback and user input tracking.
This lesson explores the performance advantages of the HTML5 Canvas API over SVG for high-density graphics by utilizing a 2D rendering context to bypass DOM overhead. Students will also examine the role of the transport layer in web applications, specifically analyzing the performance trade-offs between TCP and UDP for data transmission.
This lesson explores the necessity of asynchronous programming in web development to prevent UI freezing caused by synchronous I/O operations. Students will learn to implement event-driven patterns and browser persistence APIs to maintain responsive, high-performance applications during network-intensive tasks.
This lesson explores advanced Canvas API techniques for building interactive drawing tools, focusing on state management, composite operations, and mathematical constraints. Students will learn to implement dynamic features like spray brushes and erasers by manipulating canvas context properties and handling mouse events through higher-order patterns.
Course Overview
📚 Content Summary
A comprehensive guide to modern programming using JavaScript. The course covers fundamental programming principles, the JavaScript language specification, web browser integration, and server-side development with Node.js, including five real-world project applications.
A deep and elegant dive into the heart of JavaScript programming.
Author: Marijn Haverbeke
Acknowledgments: Supported by 454 financial backers; illustrations by Wasif Hyder, Max Xiantu, Margarita Martínez, José Menor, Jim Tierney, Dyle MacGregor, Jeff Avallone, Thomas Palef, and Antonio Perdomo Pastor.
🎯 Learning Objectives
- Define what a program is and explain the different levels of abstraction in computer languages.
- Utilize JavaScript numbers and arithmetic operators to produce values.
- Declare and update variables while adhering to naming conventions and reserved word restrictions.
- Implement robust control flow using
doloops,forloops, andswitchstatements while maintaining clean code via indentation and comments. - Define and invoke functions using multiple notations, handling parameters, optional arguments, and nested lexical scopes.
- Apply advanced functional concepts such as recursion, closures, and the call stack to solve complex algorithmic puzzles.
- Utilize specialized object and array methods to manage complex data structures and strings.
- Implement higher-order functions (
filter,map,reduce) to abstract logic and compose data transformations. - Navigate and manipulate the prototype chain to create structured, reusable object instances and polymorphic interfaces.
- Implement polymorphic interfaces to handle complex data visualization (tables).
Lessons
Overview: This lesson introduces the foundational concepts of programming using JavaScript, moving from the philosophical definition of a program to the practical mechanics of code. Students will explore how data is represented through types and bits, how to manipulate values using operators, and how to structure programs using variables, expressions, and statements. The lesson also covers JavaScript’s unique behaviors, such as automatic type conversion and short-circuit evaluation.
Learning Outcomes:
- Define what a program is and explain the different levels of abstraction in computer languages.
- Utilize JavaScript numbers and arithmetic operators to produce values.
- Declare and update variables while adhering to naming conventions and reserved word restrictions.
Overview: This lesson explores the essential building blocks of structured programming, focusing on advanced control flow, functional programming techniques, and complex data organization. Students will master how to encapsulate logic within functions, manage variable visibility through scopes and closures, and manipulate mutable objects to analyze real-world data like statistical correlations.
Learning Outcomes:
- Implement robust control flow using
doloops,forloops, andswitchstatements while maintaining clean code via indentation and comments. - Define and invoke functions using multiple notations, handling parameters, optional arguments, and nested lexical scopes.
- Apply advanced functional concepts such as recursion, closures, and the call stack to solve complex algorithmic puzzles.
Overview: This lesson explores the transition from basic data manipulation to advanced functional and object-oriented patterns in JavaScript. It covers efficient data storage using Maps and global objects, the power of higher-order functions to abstract actions (filtering, transforming, and summarizing), and the underlying mechanics of the JavaScript object system, including prototypes, constructors, and polymorphism.
Learning Outcomes:
- Utilize specialized object and array methods to manage complex data structures and strings.
- Implement higher-order functions (
filter,map,reduce) to abstract logic and compose data transformations. - Navigate and manipulate the prototype chain to create structured, reusable object instances and polymorphic interfaces.
Overview: This lesson explores advanced object-oriented patterns in JavaScript, focusing on polymorphism through table layout interfaces and the design of a simulated ecosystem ("Electronic Life"). It transitions into software reliability by covering the "Strict Mode," debugging techniques, and the importance of structured testing to mitigate common programmer mistakes.
Learning Outcomes:
- Implement polymorphic interfaces to handle complex data visualization (tables).
- Contrast inheritance and composition to build extensible object structures.
- Manage the execution context (
this) within higher-order functions and object methods.
Overview: This lesson covers the dual requirements of modern programming: processing complex string data and organizing code into maintainable structures. Students will learn to use Regular Expressions to describe and manipulate text patterns, followed by an exploration of Modularization to isolate code, manage namespaces, and facilitate reuse.
Learning Outcomes:
- Construct and test regular expressions using literal and constructor notation.
- Implement advanced pattern matching techniques including grouping, backtracking, and non-greedy repetition.
- Apply modular design principles to prevent namespace pollution and decouple program components.
Overview: This lesson explores the transition from structured software design to the creation of a custom programming language called "Egg." It further bridges these concepts into the Web environment, detailing how networks, HTML, and the Document Object Model (DOM) create a programmable interface for browsers. Students will learn to manage code complexity through modularity and manipulate live web documents using JavaScript.
Learning Outcomes:
- Implement robust module systems using the
definefunction and manage complex dependencies. - Construct a functional parser and evaluator for a domain-specific language, including scoping and function support.
- Explain the architecture of the Web, including TCP/IP, HTML structure, and the security implications of the browser sandbox.
Overview: This lesson explores the synergy between Document Object Model (DOM) manipulation, CSS styling, and complex event handling to create interactive web experiences and games. Students will learn to control layout and animation, manage the asynchronous nature of user inputs, optimize performance through timing techniques, and architect a grid-based platform game using object-oriented principles.
Learning Outcomes:
- Manipulate DOM Layout and Styles: Use JavaScript to read element dimensions, apply cascading styles, and animate elements using CSS positioning and trigonometry.
- Master Event Orchestration: Implement advanced event handling including propagation control, preventing default actions, and managing specialized events (keyboard, mouse, scroll, and focus).
- Optimize Script Execution: Apply web workers for background processing and utilize debouncing/throttling to manage high-frequency events.
Overview: This lesson explores the transition from DOM-based game rendering to the high-performance HTML5 Canvas API, alongside the fundamental mechanics of 2D platformer physics. Students will learn to implement complex game logic including gravity and collision detection while mastering imperative drawing techniques. Additionally, the lesson introduces the HTTP protocol and the XMLHttpRequest object for handling client-server communication.
Learning Outcomes:
- Implement grid-based collision detection and gravity-driven motion in a game environment.
- Utilize the HTML5 Canvas API to render paths, curves, images, and animated sprite sheets.
- Apply coordinate transformations (scaling, rotation, flipping) and manage context states using save and restore.
Overview: This lesson explores advanced web development techniques, focusing on asynchronous communication via XMLHttpRequest and Promises, deep interaction with HTML form fields, and client-side data persistence. Students will learn to manage network requests with custom headers and handle errors in asynchronous flows by building a modular paint application and a persistent note-taking tool.
Learning Outcomes:
- Configure and execute asynchronous network requests using XMLHttpRequest and Promise-based chaining.
- Manipulate complex form behaviors, including focus management, field disabling, and file handling.
- Implement client-side data storage using localStorage and sessionStorage to maintain application state.
Overview: This lesson bridges the gap between advanced client-side interactivity and server-side logic. Students will first master complex canvas manipulation tools and browser security constraints before transitioning into the Node.js environment to build asynchronous file servers and real-time web applications using long-polling and RESTful routing.
Learning Outcomes:
- Implement advanced drawing tools (Line, Erase, Spray Paint, Flood Fill) and manage canvas security (Tainting).
- Execute server-side scripts using Node.js, managing dependencies via NPM and handling asynchronous I/O with callbacks and promises.
- Construct a functional HTTP server capable of file manipulation, JSON request processing, and real-time updates via long-polling.