JavaScript Crash Course: A Hands-On, Project-Based Introduction to Programming

Praise for Javascript Crash Course....9

Title Page....11

Copyright....12

Dedication....13

About the Author and Technical Reviewer....14

Acknowledgments....15

Introduction....16

Who Is This Book For?....17

Why JavaScript?....17

What Can You Expect to Learn?....18

Online Resources....20

Part I: The Language....22

1. Getting Started....23

Using the JavaScript Console....23

Using a Text Editor....25

Summary....27

2. The Basics....28

Expressions and Statements....28

Numbers and Operators....30

Order of Operations....30

Floating Point....31

Bindings....32

Variables....32

Constants....34

Naming Conventions....36

Incrementing and Decrementing....37

Addition and Subtraction Assignment....39

Multiplication and Division Assignment....40

Strings....40

Joining Strings....41

Finding the Length of a String....42

Getting a Character from a String....43

Getting Multiple Characters from a String....44

Trimming Whitespace from a String....45

Other Useful String Methods....45

Escape Sequences....46

Template Literals....48

Undefined and Null....49

Booleans....50

Logical Operators....51

Comparison Operators....54

Type Coercion....56

Equality with Coercion....57

Truthiness....58

Uses for Truthiness....60

Summary....62

3. Compound Data Types....64

Arrays....64

Creation and Indexing....65

Arrays of Arrays....66

Array Methods....69

Objects....76

Creating Objects....77

Accessing Object Values....78

Setting Object Values....79

Working with Objects....80

Nesting Objects and Arrays....83

Nesting with Literals....84

Nesting with Variables....85

Exploring Nested Objects in the Console....86

Printing Nested Objects with JSON.stringify....88

Summary....89

4. Conditionals and Loops....91

Making Decisions with Conditionals....92

if Statements....92

if…else Statements....93

More Complex Conditions....94

Chained if…else Statements....96

Repeating Code with Loops....99

while Loops....99

for Loops....101

for…of Loops....104

for…in Loops....107

Summary....108

5. Functions....109

Declaring and Calling Functions....109

Return Values....111

Parameter Types....113

Side Effects....114

Passing a Function as an Argument....116

Other Function Syntaxes....117

Function Expressions....118

Arrow Functions....120

Rest Parameters....123

Higher-Order Functions....124

Array Methods That Take Callbacks....125

Custom Functions That Take Callbacks....128

Functions That Return Functions....130

Summary....132

6. Classes....134

Creating Classes and Instances....134

Inheritance....139

Prototype-Based Inheritance....144

Using Constructors and Prototypes....145

Comparing Constructors and Classes....148

Exploring Object.prototype....149

Walking the Prototype Chain....151

Overriding a Method....153

Summary....154

Part II: Interactive Javascript....156

7. HTML, the DOM, and CSS....157

HTML....157

Creating an HTML Document....158

Understanding Nested Relationships....160

The Document Object Model....161

The DOM API....163

Element Identifiers....163

script Elements....167

CSS....169

link Elements....169

Rulesets....170

Selectors....171

Using CSS Selectors in JavaScript....175

Summary....176

8. Event-based Programming....178

Event Handlers....178

Event Bubbling....181

Event Delegation....183

Mouse Movement Events....187

Keyboard Events....191

Summary....194

9. The Canvas Element....195

Creating a Canvas....195

Making Static Drawings....196

Drawing Outlined Rectangles....198

Drawing Other Shapes Using Paths....200

Interacting with the Canvas....203

Animating the Canvas....209

Summary....211

Part III: Projects....213

Project 1: Creating a Game....215

10. Pong....216

The Game....216

Setup....217

The Ball....218

Refactoring....220

The Game Loop....221

Bouncing....224

The Paddles....226

Moving the Paddles with Player Input....229

Detecting Paddle Collisions....230

Bouncing Near the Paddle Ends....235

Scoring Points....238

Computer Control....243

Game Over....245

The Complete Code....249

Summary....253

11. Object-Oriented Pong....255

Object-Oriented Design....256

The File Structure....257

The GameView Class....258

The Game Elements....260

The Paddles....261

The Ball....262

The Scores and Computer Classes....266

The Game Class....267

Starting the Game....271

Summary....272

Project 2: Making Music....273

12. Generating Sounds....274

The Web Audio API....274

Setting Up....275

Generating a Tone with the Web Audio API....276

The Tone.js Library....280

Generating a Tone with Tone.js....280

Understanding the Tone.Synth Options....282

Playing More Notes in Sequence....287

Playing Multiple Notes at Once....289

The Tone.js Transport....290

Tone.Loop....291

Tone.Sequence....295

Tone.Part....297

Making Drum Sounds....299

Hi-Hat Synthesis....299

Snare Synthesis....301

Kick Synthesis....304

Reverb....305

A Drum Loop....307

Working with Samples....310

Summary....313

13. Writing a Song....314

Getting Organized....314

Event Handling....315

Making the Drumbeat....316

Adding the Bass Lines....320

Adding Chords....324

Playing a Tune....326

The Complete Code....330

Summary....336

Project 3: Visualizing Data....337

14. Introducing the D3 Library....338

The SVG Graphics Format....339

Grouping Elements....341

Drawing Circles....344

Defining Paths....346

Styling Elements with CSS....350

Adding Interactivity with JavaScript....353

The D3 Library....355

Setup....355

Selections....356

Data Binding....358

Data Joins....360

Real-Time Updates....362

Transitions and Key Functions....365

Advanced Joins....367

Creating a Bar Graph....371

Setting Up....371

Calculating Character Frequencies....372

Drawing the Bar Graph....375

Styling with CSS and Regular Expressions....388

Cleaning the Data....392

Animating the Changes....393

Summary....395

15. Visualizing Data from the Github Search API....397

Setting Up....398

Fetching Data....398

The Basic Visualization....403

Creating the Elements....403

Drawing the Axes....404

Drawing the Bars....408

Improving the Visualization....411

Showing Repository Info....411

Color-Coding the Bars....417

Labeling the Left Axis....422

Adding Interactivity....423

Filtering the Data by License....423

Animating the Changes....428

The Complete Code....432

Summary....436

Afterword....437

Index....445

A fast-paced, thorough programming introduction that will have you writing your own software and web applications in no time.Like Python Crash Course, this hands-on guide is a must-have for anyone who wants to learn how to code from the ground up—this time using the popular JavaScript programming language.Learn JavaScript—Fast!JavaScript Crash Course is a fun-filled, fast-paced introduction to programming with JavaScript. Dive right in and you’ll be writing code, solving problems, and building working web applications and games in no time. You’ll start by learning fundamental programming concepts, such as variables, arrays, objects, functions, conditionals, loops, classes, and more. Aided by engaging examples and hands-on exercises, you’ll build on this foundation and combine JavaScript with HTML and CSS to create interactive web applications that you can run right away.Then you’ll put your new skills into play with three substantial projects: a Pong-style game with a virtual opponent, an app that generates electronic music, and a platform for visualizing data fetched from an API.

Along the way, you’ll learn how to:

• Update web pages in real time by manipulating the Document Object Model
• Trigger functions in response to events like key presses and mouse clicks
• Generate graphics and animations with JavaScript and HTML’s Canvas element
• Visualize data with the D3.js library and scalable vector graphics (SVG)
• Make electronic music with Tone.js and the Web Audio API

If you’ve been thinking about digging into programming, JavaScript Crash Course will get you writing real programs fast. Why wait any longer? Jump on your magic carpet and ride!