The JavaScript Workshop : Learn to Develop Interactive Web Applications with Clean and Maintainable JavaScript Code

If you're looking for a programming language to develop flexible and efficient apps, JavaScript is a great choice. However, while offering real benefits, the complexity of the entire JavaScript ecosystem can be overwhelming. This Workshop is a smarter way to learn JavaScript. It is specifically designed to cut through the noise and help build your JavaScript skills from scratch, while sparking your interest with engaging activities and clear explanations. Starting with explanations of JavaScript's fundamental programming concepts, this book will introduce the key tools, libraries and frameworks that programmers use in everyday development. You will then move on and see how to handle data, control the flow of information in an application, and create custom events. You'll explore the differences between client-side and server-side JavaScript, and expand your knowledge further by studying the different JavaScript development paradigms, including object-oriented and functional programming. By the end of this JavaScript book, you'll have the confidence and skills to tackle real-world JavaScript development problems that reflect the emerging requirements of the modern web.Key FeaturesLearn the basics of JavaScript programming to create dynamic web pagesExplore the fundamentals of back-end development using Node.jsTackle challenging development problems and apply solutions to real-world situationsWhat you will learnWrite clean, maintainable and eloquent JavaScript codeBuild websites using plain JS and various frameworks and librariesSimplify your workflow with package managers such as Gulp and GruntUse Node.js to build server-side JavaScript applicationsImprove the functionality of your applications with browser APIsImplement asynchronous programming to build apps that can multitaskWho this book is forThe JavaScript Workshop is the ideal guide to JavaScript for beginners. It is designed for anyone who wants to get started learning JavaScript. Whether you're an aspiring web developer, or are just curious about learning how to code with a versatile programming language, this book will help you get up and running. Previous development experience is not required, but basic prior knowledge of HTML and CSS will help you get the most from this book. Cover FM Copyright Table of Contents Preface Chapter 1: Getting to Know JavaScript Introduction What Is JavaScript and How Is It Used? JavaScript versus Other Languages Exercise 1.01: Languages Discovery A Brief History of the JavaScript Language Netscape Mocha and LiveScript Sun Microsystems and Java Ecma International and ECMAScript Versions of ECMAScript (and JavaScript) ECMAScript 1 (1997) ECMAScript 2 (1998) ECMAScript 3 (1999) ECMAScript 4 (unreleased) ECMAScript 5 (2009) ECMAScript 6 (2015) ECMAScript 7 (2016), ECMAScript 8 (2017), and ECMAScript 9 (2018) Exercise 1.02: Can I Use This Feature? Accessing Web Browser Developer Tools Google Chrome Microsoft Edge Apple Safari An Introduction to Variables Exercise 1.03: Programming First Steps Activity 1.01: Creating an Alert Box Popup in the Web Browser Overview of JavaScript Capabilities Client-Side Form Validation JavaScript Widgets or Components XML HTTP Requests (XHR) Storing Local Data DOM Manipulation Animations and Effects Summary Chapter 2: Working with JavaScript Introduction Integrated Development Environments (IDE) GitHub's Atom Sublime Text Adobe Dreamweaver JetBrains WebStorm Microsoft Visual Studio Code JavaScript Project and File Management Project Folders and Files Exercise 2.01: Creating a Working Project Directory JavaScript Syntax and Structure Exercise 2.02: Creating Project Boilerplate Basic JavaScript Syntax JavaScript Execution Order Exercise 2.03: Verifying an Execution Order Overview of JavaScript Environments Browser-Based JavaScript Server-Based JavaScript Desktop JavaScript Mobile JavaScript A Closer Look at Web Browser Developer Tools The Elements View The Console View The Sources View The Network View HTML Element Manipulation with JavaScript Activity 2.01: Adding and Modifying an Item to/in the To-Do List Summary Chapter 3: Programming Fundamentals Introduction Data Types Representation of Data Literal Values Using Operators in Expressions Exercise 3.01: Implementing Expressions and Operators Using Variables and Constants in Expressions Exercise 3.02: Working with Variables Using the Web Browser Console Functions That Return Values Exercise 3.03: Using Functions in Expressions The Object Data Type Ready-Made Objects Exercise 3.04: Working with Ready-Made Objects Self-Made Objects Object Dot Notation The Array Object Using the Console Object Syntax Semicolon at the End of Code Statements Lines of Code versus Statements Comments Conditional and Loop Flow Code Blocks Conditional Flow Statements if...else Statement if Statement Exercise 3.05: Writing an if statement if Statement and else Statement Exercise 3.06: Writing an if...else Statement if Statements with Multiple else...if Statements if Statement, Multiple else...if statements, and the else Statement Exercise 3.07: Writing an if Statement with Multiple if else Statements and the else Statement The break Statement switch Statement Exercise 3.08: Writing a switch Statement and Testing It Loop Statements for Statement Exercise 3.09: Writing a for Loop and Testing It do...while Statement Exercise 3.10: Writing a do...while Loop and Testing It while Statement Exercise 3.11: Writing a while Loop and Testing It for...in Statement Exercise 3.12: Writing a for...in Loop and Testing It for...of Statement Exercise 3.13: Writing a for...of Loop and Testing It continue Statement Labeled Statement Writing and Invoking Functions Defining Functions Function Declaration Exercise 3.14: Writing a Function as a Statement and Invoking It Function Expression Exercise 3.15: Writing a Function as an Expression and Invoking It Arrow Function Expression Defining and Invoking an Arrow Function Expression Exercise 3.16: Writing an Arrow Function and Invoking It Reacting to User Input Events and Updating the DOM The DOM HTML Element Object Getting Access to Elements in the DOM Creating Elements and Content in the DOM DOM Events Exercise 3.17: Working with DOM Manipulation and Events Debugging Silent Fail Syntax Bugs Logic Bugs Debugging Debuggers Activity 3.01: The To-Do List Shuffle Program Summary Chapter 4: JavaScript Libraries and Frameworks Introduction Framework versus Library Vanilla.js Popular JavaScript Frameworks Everlasting jQuery Where to Find and How to Use External Code Exercise 4.01: Using a Third-Party Library in Your Code jQuery versus Vanilla.js Manipulating the DOM Making XHR Requests Exercise 4.02: Handling Click Events with jQuery Exercise 4.03: Handling the Same Event with Vanilla.js UI Animation Using jQuery Exercise 4.04: Animating a "Peek-a-boo" on Button Click Frameworks versus Core JavaScript 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.07: Creating a Library Yourself Activity 4.01: Adding an Animation to the To-Do List Application Summary Chapter 5: Beyond the Fundamentals Introduction Creating Variables A Note on Referencing Global Assignment Declaring with var Declaring with let Declaring with const Exercise 5.01: Variables and Scope Identifying a Variable's Type Exercise 5.02: Evaluating Types from Variables Fixed Types The null Value The undefined Value Boolean Values Boolean Operators Comparison Operators Logical Operators Exercise 5.03: Odds and Evens Testing the Truth of Values The NOT Operator Boolean Operator Precedence Boolean Operator Associativity Exercise 5.04: Free Home Delivery Eligibility Validation Why You Shouldn't Compare Boolean and Non-Boolean Expressions Why You Shouldn't Chain Comparison Expressions The Ternary Operator Working with Numbers Arithmetic Limitations The Number Object Number Functions Number Methods Number Properties Exercise 5.05: Currency Formatter Working with Strings Special Characters Concatenation Template Literals Exercise 5.06: Email Templates The String Object The length Property String Methods Exercise 5.07: Sentence Reversal The toString Method Numbers with Strings Working with Functions Anonymous Functions Callbacks Exercise 5.08: Functional Parameters Arrow Functions Arrow Function Caveats Generator Functions The this Keyword The arguments Keyword Call and Apply Exercise 5.09: Dynamic Currying Activity 5.01: Simple Number Comparison Working with Objects Objects as Hashtables Object Keys and Memory Object and Pass-By Reference Object Iteration Object Accessors Exercise 5.10: Converting Objects to toString Working with Arrays Arrays and Mutability Array Iteration Built-In Array Functions Working with Dates Parsing Date Strings Formatting Dates into Strings Date Math Activity 5.02: Creating a To-Do Model Summary Chapter 6: Understanding Core Concepts Introduction Event Types Timer Events Exercise 6.01: Custom Timer Event Timers The setInterval Function The setTimeout Function Timer Parameters Exercise 6.02: Real-Time Clock The JavaScript Events Model Event Bubbling Traversing the Node Tree Direct Node Acquisition Assigning and Removing an Event Handler Exercise 6.03: Tabbed Content Bubbling versus Capturing The JavaScript Event Life Cycle Halting Event Propagation Halting Event Actions Exercise 6.04: Conditional Event Prevention Event Triggers Custom Events Native Event Triggers Event Hander Attributes Events and Memory Working with Forms HTTP The Form Tag Submitting a Form with JavaScript Form Submission Events Preventing Form Submission Resetting a Form Form Reset Event Exercise 6.05: Simple Form Handling Form Controls Input Controls The Button Control The Checkbox Control The Radio Control The Text Control The Password Control email, tel, and url Controls The Hidden Control The Number Control The Image Control The File Control The Textarea Control The Select Control Activity 6.01: Making Changes to the Model Summary Chapter 7: Popping the Hood Introduction JavaScript Execution and the Event Loop The JavaScript Runtime JavaScript Engine Environment APIs Message Queue Event Loop Call Stack Memory Heap Event Loop in Action Exercise 7.01: Working with the Event Loop Stack Overflow Exercise 7.02: Stack Overflow Memory Management The Garbage Collector Memory Leaks Event Listeners Detached DOM Nodes Global Variables Identifying Memory Leaks Exercise 7.03: Identifying Memory Leaks Exercise 7.04: Fixing the Memory Leak Activity 7.01: Finding out the Number of Stack Frames Summary Chapter 8: Browser APIs Introduction Canvas 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 Activity 8.02: Playing Sound and Controlling Frequency Using Two Oscillators Audio Visualization Web Storage API Exercise 8.03: Storing and Populating Name Using the localStorage API IndexedDB Exercise 8.04: Creating an Object Store and Adding Data Querying IndexedDB Exercise 8.05: Querying the Database IndexedDB Cursor Exercise 8.06: Fetching, Storing, and Querying Data Performance API Exercise 8.07: Assessing Performance Web Socket API Exercise 8.08: Creating Chat Rooms Using Websockets Activity 8.03: Audio Visualization Summary Chapter 9: Working with Node.js Introduction The Node.js Environment Sync versus Async Background of Request Processing What Are Callbacks? The Node.js Shell Exercise 9.01: Your First Program How to Import/Require a Module in a Node.js Application Node Package Manager (npm) Flags Commands package.json Publishing a Package Node Modules Node.js Modules Exercise 9.02: Updating URL Information Using the URL Module Filesystem Operating System Exercise 9.03: Fetching Details about the Operating System Path Module Exercise 9.04: How to Extract and Join Directories HTTP Exercise 9.05: Using a Node.js Server Third-Party Modules Express.js The bodyParser Module Morgan Logger Working with Databases Setting up Databases Connecting with Databases MySQL Exercise 9.06: Install, Connect, and Process Responses with a MySQL Server MongoDB Exercise 9.07: Installing and Configuring a Connection in MongoDB Making Real-Time Web Apps WebSocket Socket.IO Exercise 9.08: Building a Chat Application Activity 9.01: Create a Web Application to Upload, Store, and Save Image Details Summary Chapter 10: Accessing External Resources Introduction JSON REST What Is HTTP? TheSportsDB Exercise 10.01: Using a REST API to Make Calls HTTP Headers AJAX jQuery Exercise 10.02: Using AJAX and the jQuery ajax() Method to Invoke a Service Exercise 10.03: More AJAX and Some CSS Styling CSS Other Libraries and XMLHttpRequest Axios and the Fetch API For Comparison: XMLHttpRequest and jQuery Using jQuery and XMLHttpRequest for POST Requests Cross-Domain Requests CORS Header Activity 10.01: Implement REST Service Calls Using Various Techniques Summary Chapter 11: Creating Clean and Maintainable Code Introduction What Is a Regex? Regexes in Detail Literal Characters Special Characters, Anchors, and Escaping Word Boundary Shorthand Character Classes and Word Characters Inverse Classes Dot Character Sets Ranges Excluding Sets and Ranges Quantifiers Shorthand Quantifiers Alternation Many More Regex Concepts Pattern Specification and Flags Finding Matches with String.match() Exercise 11.01: The Effect of the g Flag Other String Methods for Regexes 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 Good Naming Practices JavaScript Linters Exercise 11.03: JSLint Activity 11.03: Refactoring to Clean Code Summary Chapter 12: Using Next‐Generation JavaScript Introduction Browser Differences polyfills Transpilers Development Methodology Libraries Package Managers The Node Package Manager Installing Modules The Yarn Package Manager The Babel Transpiler @babel/core @babel/cli @babel/preset-env @babel/polyfill .babelrc Configuration File Exercise 12.01: A Basic Babel Project Babel Applications with Parcel What is Parcel? Using Parcel Modular Applications in Parcel Exercise 12.02: A Basic Parcel Project Babel Applications with Webpack Webpack Architecture Webpack Loaders and Plugins Webpack Configuration Exercise 12.03: A Basic WebPack Project Other Popular Bundlers Other Language Transpiling The TypeScript Language Exercise 12.04: A Basic TypeScript Project Elm and ClojureScript Haxe Code Support Libraries jQuery Underscore, Lodash, and Ramda Client Frameworks Overview Models, Views, and Controllers Virtual DOMs Reactive Programming Popular Frameworks AngularJS ReactJS Vue.js Server-Side Libraries Express Request Socket.IO Activity 12.01: Creating a Project to Recognize and Compile TypeScript Files Summary Chapter 13: JavaScript Programming Paradigms Introduction JavaScript Paradigms The Procedural Paradigm Exercise 13.01: Implementing Procedural Programming The Object-Oriented Paradigm Exercise 13.02: Implementing OOP Encapsulation Inheritance Exercise 13.03: Inheritance Implementation Using the extends Keyword Basic JavaScript Concepts Prototypes and Prototypical Inheritance What Is Prototypical Inheritance? Exercise 13.04: Prototypical Inheritance Implementation Anonymous Functions The Differences between Named Functions and Anonymous Functions Data Scope Global Scope Local Scope Function-Level Scope Block-Level Scope Hoisting The Difference between var and let Closures JavaScript Memory Management Memory Life Cycle Static versus Dynamic Allocation Releasing Memory Reference-Counting Garbage Collection Activity 13.01: Creating a Calculator App Summary Chapter 14: Understanding Functional Programming Introduction Pure Functions Side Effects Immutability Exercise 14.01: Immutable Values and Objects – Strings Exercise 14.02: Immutable Values and Objects – Numbers Exercise 14.03: Mutability – Arrays Exercise 14.04: Mutability – Objects Cloning Objects and Arrays Sample Data for Examples and Exercises Higher-Order Functions The Array.prototype.filter Method A Refresher Eliminating for Loops The Array.prototype.map Method Exercise 14.05: Another Way of Using Array.prototype.map The Array.prototype.reduce method Exercise 14.06: Grouping with Array.prototype.reduce Composition with compose() and pipe() Implementation of compose() and pipe() Currying Functions Exercise 14.07: More Uses for Composition and Curried Functions Function Recursion Exercise 14.08: Creating a Deck of Cards Using reduce() Exercise 14.09: Using the pipe Method to Create a Card Shuffling Function Blackjack Mapping Card Values to Cards Activity 14.01: Blackjack Card Functions Managing Blackjack Game State Blackjack Game Logic Flow Blackjack Game Display Functions Blackjack Code Listing Summary Chapter 15: Asynchronous Tasks Introduction Callbacks setTimeout() Exercise 15.01: Asynchronous Execution with setTimeout() Callback Hell and the Pyramid of Doom Promises and the Fetch API Using the Fetch API to Get Player Honors Exercise 15.02: Refactoring the Honors List to Use the Fetch API An Improvement for Better Performance Tidying Up Fetch Code Some Fetch API Usage Details Some Details Concerning Promises Exercise 15.03: Creating a Utility Function to Delay Execution Further Refinements to addDelay() Async/Await Asynchronous Generators and Iterators Activity 15.01: Refactoring Promise Code to await/async Syntax Activity 15.02: Further Simplifying Promise Code to Remove Function Parameters Summary Appendix Index Cut through the noise and get real results with a step-by-step approach to beginner JavaScript development Key Features A structured, straightforward introduction to JavaScript for beginners A JavaScript tutorial with step-by-step exercises and activities that help build key skills Structured to let you progress at your own pace, on your own terms Use your physical print copy to redeem free access to the online interactive edition Book Description 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 cutting-edge applications 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. You'll learn from real examples that lead to real results. Throughout The JavaScript Workshop, you'll take an engaging step-by-step approach to understanding JavaScript code. 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 functional programming and unit testing. It's your choice. Learning on your terms, you'll build up and reinforce key skills in a way that feels rewarding. Every physical print copy of The JavaScript Workshop unlocks access to the interactive edition. With videos detailing all exercises and activities, you'll always have a guided solution. You can also benchmark yourself against assessments, track progress, and receive content updates. You'll even earn a secure credential that you can share and verify online upon completion. It's a premium learning experience that's included with your printed copy. To redeem, follow the instructions located at the start of your JavaScript book. Fast-paced and direct, The JavaScript Workshop is the ideal companion for JavaScript beginners. You'll build and iterate on your JavaScript coding skills like a real 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. What you will learn Learn how you can work with JavaScript to develop for the modern web Discover ways to write clean and maintainable JavaScript code Learn how to use unit testing to write bug free and stable JavaScript code Simplify your workflow with package managers like Gulp, Grunt..