Chapter 1: Chapter 1. JavaScript is everywhere
The chapter introduction uses two developers’ experiences to show why JavaScript skills transfer across application domains and why the language has spread beyond web pages.
After this chapter you will be able to
- Transferable JavaScript skills. Explain how Bob’s and Ann’s experiences illustrate the value of using JavaScript across application domains.
- Functions closures and scope. Explain how JavaScript’s treatment of functions differs from what its C-like syntax might suggest: functions are first-class objects, closures maintain external variables used in their bodies, and JavaScript historically relied on global and function-level variables rather than block-level variables.
- Prototypes instead of classes. Distinguish JavaScript’s prototype-based object orientation from the class-based approach associated here with languages such as Java, and explain why assuming they work alike can lead to unexpected results.
- Yearly JavaScript standards updates. Describe the ECMAScript committee’s move toward smaller, yearly incremental changes, with ES7/ES2016 presented as a smaller upgrade than ES6.
- Standards versus browser support. Explain why a feature’s release in the JavaScript specification does not mean developers can immediately use it in every browser, and describe how to check support.
- Transpilers for older browsers. Explain why developers use transpilers and what they do to newer JavaScript code.
- DOM as UI representation. Describe the DOM as a structured representation of a client-side application's UI, initially built from its HTML.
- Event-driven browser applications. Explain what it means for JavaScript applications to be event-driven, and give examples of events named in the section.
- Cross-browser support constraints. Justify why browser development requires attention to differences between browsers and a choice about which browsers to support.
- Best practices beyond language mastery. Explain why knowing JavaScript and cross-browser coding is not enough for expert web development, and name debugging, testing, and performance analysis as practices that contribute to quality code.
- Browser developer tools for debugging. Explain how modern developer tools have replaced alerts for debugging JavaScript, and describe why the tool in your chosen browser is generally suitable.
- Assertion-based code testing. Explain how an assert function checks expected behavior: it takes a condition that should be true and a message displayed if the condition is false. Describe what happens when an assertion that a equals 1 fails.
- Console timer measurement. Describe how to measure elapsed time by placing console.time before an operation and console.timeEnd after it, using the same timer name.
- Repeated operation timing. Justify running a fast operation many times when measuring it and describe how the repeat count is chosen.
- Transferable JavaScript foundations. Explain why understanding fundamental JavaScript principles and core browser APIs can make a developer more versatile across application domains.
Section by section
Introduction
The chapter introduction uses two developers’ experiences to show why JavaScript skills transfer across application domains and why the language has spread beyond web pages.
- Transferable JavaScript skills: Explain how Bob’s and Ann’s experiences illustrate the value of using JavaScript across application domains.
Why it matters: The comparison explains why deepening your JavaScript skills can help with more than one kind of application. - JavaScript beyond web pages: Describe what the introduction credits with extending JavaScript beyond the web page.
Why it matters: This gives context for why the book treats JavaScript as more than a language for adding features to web pages.
Key terms: JavaScript, skill transferability, JavaScript engines, Node, Apache Cordova, Ionic, Electron
1.1 Understanding the JavaScript language
This section shows why JavaScript’s familiar-looking syntax can hide distinctive language concepts and briefly identifies advanced features that help make code more effective.
- Functions closures and scope: Explain how JavaScript’s treatment of functions differs from what its C-like syntax might suggest: functions are first-class objects, closures maintain external variables used in their bodies, and JavaScript historically relied on global and function-level variables rather than block-level variables.
Why it matters: JavaScript’s familiar syntax does not tell the whole story about how its functions and variables work. - Prototypes instead of classes: Distinguish JavaScript’s prototype-based object orientation from the class-based approach associated here with languages such as Java, and explain why assuming they work alike can lead to unexpected results.
Why it matters: Treating JavaScript as Java with different syntax can lead to mistaken expectations about objects. - Advanced feature purposes: Describe, at a high level, some purposes the section assigns to advanced JavaScript features, such as promises for controlling asynchronous code, maps and sets for collections, or modules for breaking code into manageable pieces.
Why it matters: These brief descriptions connect language features to the problems they help address.
Key terms: first-class objects, function closures, scopes, prototype-based object orientation, class-based object orientation, prototypes, generators, promises, proxies, maps
1.1 Do you know?
This section poses two self-check questions about Babel and Traceur and the browser JavaScript API without explaining either topic.
1.1.1 How will JavaScript evolve?
This section explains JavaScript’s shift toward smaller yearly standards updates and why new features may not yet work in every browser.
- Yearly JavaScript standards updates: Describe the ECMAScript committee’s move toward smaller, yearly incremental changes, with ES7/ES2016 presented as a smaller upgrade than ES6.
Why it matters: It helps explain why new JavaScript features can arrive in successive editions of the standard. - Standards versus browser support: Explain why a feature’s release in the JavaScript specification does not mean developers can immediately use it in every browser, and describe how to check support.
Why it matters: A feature’s presence in the standard alone cannot tell you whether it will run in a reader’s browser.
Key terms: ECMAScript committee, ES6, ES7/ES2016, yearly incremental changes, language specification, JavaScript engine, feature support, browsers, compatibility lists
1.1.2 Transpilers give us access to tomorrow’s JavaScript today
The section explains how transpilers let developers use newer JavaScript features when some users have older browsers.
- Transpilers for older browsers: Explain why developers use transpilers and what they do to newer JavaScript code.
Why it matters: This lets you use newer JavaScript without assuming every user has a browser that supports it directly.
Key terms: transpilers, cutting-edge JavaScript code
1.2 Understanding the browser
The section introduces the browser concepts that client-side JavaScript relies on and explains why browser differences matter.
- DOM as UI representation: Describe the DOM as a structured representation of a client-side application's UI, initially built from its HTML.
Why it matters: It connects a web application's HTML to the interface its JavaScript works with. - Event-driven browser applications: Explain what it means for JavaScript applications to be event-driven, and give examples of events named in the section.
Why it matters: It explains why responding to events is central to browser application code. - Browser API capabilities: Describe the kinds of interaction the browser's API makes available to an application.
Why it matters: JavaScript applications rely on browser-provided capabilities to interact with devices, stored data, and servers. - Cross-browser support constraints: Justify why browser development requires attention to differences between browsers and a choice about which browsers to support.
Why it matters: Reliable browser applications require both awareness of browser inconsistencies and realistic support decisions.
Key terms: Document Object Model, DOM, UI, HTML, event-driven, events, timers, Browser API, browser-specific quirks, cross-browser
1.3 Using current best practices
This section explains why JavaScript expertise also requires development best practices.
- Best practices beyond language mastery: Explain why knowing JavaScript and cross-browser coding is not enough for expert web development, and name debugging, testing, and performance analysis as practices that contribute to quality code.
Why it matters: Writing quality code takes more than knowing the language and accounting for browser differences.
Key terms: best practices, debugging skills, testing, performance analysis
1.3.1 Debugging
This section explains why browser developer tools, rather than alerts, are the practical way to debug JavaScript applications.
- Browser developer tools for debugging: Explain how modern developer tools have replaced alerts for debugging JavaScript, and describe why the tool in your chosen browser is generally suitable.
Why it matters: You can investigate a web application with the tools already available in the relevant browser instead of relying on alerts.
Key terms: developer tools, alert, DOM, CSS styles, network events
1.3.2 Testing
The section introduces assertions as a way to test whether example code behaves as expected.
- Assertion-based code testing: Explain how an assert function checks expected behavior: it takes a condition that should be true and a message displayed if the condition is false. Describe what happens when an assertion that a equals 1 fails.
Why it matters: Assertions let you state what the code should do and spot when it does not.
Key terms: assert function, assertion, condition
1.3.3 Performance analysis
This section explains why JavaScript performance still needs attention and how to time an operation reliably with console timers and repeated runs.
- Need for performance analysis: Explain why faster JavaScript engines do not remove the need to examine code performance.
Why it matters: A fast engine cannot make efficiency irrelevant. - Console timer measurement: Describe how to measure elapsed time by placing console.time before an operation and console.timeEnd after it, using the same timer name.
Why it matters: Matching console timer calls gives you an elapsed-time measurement for the code between them. - Repeated operation timing: Justify running a fast operation many times when measuring it and describe how the repeat count is chosen.
Why it matters: Repeating very fast code makes its execution time easier to measure.
Key terms: performance analysis, JavaScript engines, console.time, console.timeEnd, built-in console object, for loop, maxCount, measurable value
1.4 Boosting skill transferability
The section explains why JavaScript and browser knowledge transfers to desktop, mobile, server-side, embedded, and cloud applications.
- Transferable JavaScript foundations: Explain why understanding fundamental JavaScript principles and core browser APIs can make a developer more versatile across application domains.
Why it matters: Your web-development knowledge can help you tackle problems in other kinds of applications. - Application environment differences: Distinguish how the section says web technologies support desktop and mobile apps versus server-side and embedded apps.
Why it matters: The examples show both where existing web skills apply and what each environment adds.
Key terms: fundamental JavaScript principles, core APIs, client-side web applications, NW.js, Electron, Apache Cordova, Node.js, wrapped browser, platform-specific APIs
1.5 Summary
Where this is used later
- Functions as first-class objects (chapter 3) · Develops the first-class treatment of functions.
- Do you know? (chapter 5) · Develops the introductory definition of closures.
- Do you know? (chapter 7) · Develops the introductory distinction by explaining prototypes.
- Working with promises (chapter 6) · Develops the briefly stated purpose of promises.
- ES6 modules (chapter 11) · Develops the briefly stated purpose of modules.
- Parsing the HTML and building the DOM (chapter 2) · Explains how the DOM is built from HTML.
- Do you know? (chapter 12) · Works with HTML and the DOM.
- Event-handling overview (chapter 2) · Develops the overview of event handling.
Concepts explained in this chapter
- JavaScriptA high-level, dynamically typed programming language standardized as ECMAScript and commonly used for web, server-side, desktop, mobile, and other application development.
- closureA function together with the lexical environment in which it was created, allowing it to access variables from that environment after the outer function has finished executing.
- first-class objectA value that can be assigned, passed as an argument, returned, and otherwise handled like an ordinary value.
- prototype-based object orientationAn object-oriented model in which objects inherit properties through prototype links rather than class inheritance.
- scopeThe region in which an identifier's binding is visible and can be resolved.
- eventA detectable occurrence, such as a user action or timer firing, to which a program can respond.
- debuggingThe process of finding, inspecting, and correcting software defects or unexpected behavior.
- cross-browser developmentCross-browser development is the practice of writing web code that works acceptably across multiple browsers despite differences in support and behavior.
- MapA collection type that stores key-value associations and supports efficient lookup by key.
- ProxyA JavaScript object that intercepts operations on a target object using a handler.
- generatorA JavaScript function that can yield values, suspend execution, and later resume with its local state preserved.
- moduleA bounded unit of code used to organize and reuse program functionality.
- promiseA JavaScript object representing the eventual completion or failure of an asynchronous operation and its resulting value.
- setA JavaScript collection of unique values.
- array methodA method available on arrays for operations such as iteration, transformation, or querying.
- async functionA JavaScript function marked as asynchronous that can use await and returns a promise.
- regular expressionA pattern for matching character sequences in text.
- timerA host-environment scheduling mechanism for running code after a delay or at repeated intervals.
- prototypeAn object from which another object can inherit properties in JavaScript.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.