Get Programming with JavaScript

✍ Scribed by John Larsen

• Publisher: Manning
• Tongue: English
• Leaves: 436
• Category: Library

✦ Synopsis

Summary

Get Programming with JavaScript is a hands-on introduction to programming for readers who have never programmed. You'll be writing your own web apps, games, and programs in no time! Foreword by Remy Sharp.

Purchase of the print book includes a free eBook in PDF, Kindle, and ePub formats from Manning Publications.

About the Book

Are you ready to start writing your own web apps, games, and programs? You’re in the right place! Get Programming with JavaScript is a hands-on introduction to programming for readers who have never written a line of code. Since you’re just getting started, this friendly book offers you lots of examples backed by careful explanations. As you go along, you’ll find exercises to check your understanding and plenty of opportunities to practice your new skills. You don’t need any­thing special to follow the examples—just the text editor and web browser already installed on your computer. We even give you links to working online code so you can see how everything should look live on your screen.

What’s Inside

• All the basics—objects, functions, responding to users, and more
• Think like a coder and design your own programs
• Create a text-based adventure game
• Enhance web pages with JavaScript
• Run your programs in a web browser
• Four bonus chapters available online

About the Reader

No experience required! All you need is a web browser and an internet connection.

About the Author

John Larsen is a mathematics and computing teacher with an interest in educational research. He has an MA in mathematics and an MSc in information technology. He started programming in 1982, writing simple programs for teaching mathematics in 1993, building websites in 2001, and developing data-driven web-based applications for education in 2006.

Table of Contents

1. PART 1 CORE CONCEPTS ON THE CONSOLE

2. Programming, JavaScript, and JS Bin
3. Variables: storing data in your program
4. Objects: grouping your data
5. Functions: code on demand
6. Arguments: passing data to functions
7. Return values: getting data from functions
8. Object arguments: functions working with objects
9. Arrays: putting data into lists
10. Constructors: building objects with functions
11. Bracket notation: flexible property names

12. PART 2 ORGANIZING YOUR PROGRAMS

13. Scope: hiding information
14. Conditions: choosing code to run
15. Modules: breaking a program into pieces
16. Models: working with data
17. Views: displaying data
18. Controllers: linking models and views

19. PART 3 JAVASCRIPT IN THE BROWSER

20. HTML: building web pages
21. Controls: getting user input
22. Templates: filling placeholders with data
23. XHR: loading data
24. Conclusion: get programming with JavaScript

25. BONUS ONLINE CHAPTERS

26. Node: running JavaScript outside the browser
27. Express: building an API
28. Polling: repeating requests with XHR
29. Socket.IO: real-time messaging

✦ Table of Contents

Front cover
brief contents
contents
foreword
preface
acknowledgments
about this book
Who should read this book
Roadmap
About the code
Other online resources
About the author
Author Online
Part 1—Core concepts on the console
1 Programming, JavaScript, and JS Bin
1.1 Programming
1.2 JavaScript
1.3 Learning by doing and thinking
1.4 JS Bin
1.4.1 JS Bin panels
1.4.2 Following the code listings on JS Bin
1.4.3 Logging to the console
1.4.4 Code comments
1.4.5 Further Adventures
1.4.6 Error messages
1.4.7 Line numbers
1.4.8 Get an account
1.5 The Crypt—our running example
1.5.1 Playing The Crypt
1.5.2 Steps for building The Crypt
1.6 Further examples and practice
1.7 Browser support
1.8 Summary
2 Variables: storing data in your program
2.1 What is a variable?
2.2 Declaring variables and assigning values
2.2.1 Declaring variables
2.2.2 Assigning values to variables
2.2.3 One-step declaration and assignment
2.2.4 Using a variable in its own assignment
2.3 Choosing good variable names
2.3.1 Keywords and reserved words
2.3.2 Rules for naming variables
2.3.3 camelCase
2.3.4 Use descriptive variable names
2.4 The Crypt—player variables
2.5 Summary
3 Objects: grouping your data
3.1 A need for organization
3.2 Creating objects
3.2.1 Creating an empty object
3.2.2 Properties as key-value pairs
3.3 Accessing object properties
3.4 Updating object properties
3.5 Further examples
3.5.1 Writing a blog
3.5.2 Creating a calendar
3.5.3 What’s the weather like?
3.5.4 The testing effect
3.5.5 Create your own
3.6 The Crypt—a player object
3.7 Summary
4 Functions: code on demand
4.1 Noticing repetition
4.1.1 Displaying object properties as text
4.1.2 Adding tax and displaying a summary
4.2 Defining and calling functions
4.2.1 Defining new functions
4.2.2 Function expressions and function declarations
4.2.3 Using functions
4.2.4 Functions step by step
4.3 Reducing repetition
4.3.1 A function for displaying object properties as text
4.3.2 Functions for adding tax and displaying a summary
4.4 Making code easier to read and update
4.4.1 Updating the showMovieInfo function
4.5 The Crypt—displaying player information
4.5.1 A function to display player information
4.6 Summary
5 Arguments: passing data to functions
5.1 Function reuse and versatility
5.2 Passing information to functions
5.2.1 Passing one argument to a function
5.2.2 Passing multiple arguments to a function
5.3 The Crypt—displaying player information
5.3.1 Displaying players’ names
5.3.2 Displaying players’ health
5.3.3 Displaying players’ locations
5.3.4 Putting it all together—displaying players’ information
5.4 Summary
6 Return values: getting data from functions
6.1 Returning data from functions
6.1.1 The return value replaces the function call
6.1.2 The return keyword
6.1.3 Using arguments to determine the return value
6.2 Experimenting at the console prompt
6.2.1 Calling functions
6.2.2 Declaring new variables
6.3 The Crypt—building player information strings
6.3.1 Building strings for a player’s name, health, and location
6.3.2 A function for player information—putting the pieces together
6.4 Summary
7 Object arguments: functions working with objects
7.1 Using objects as arguments
7.1.1 Accessing properties of an object argument
7.1.2 Adding properties to an object argument
7.2 Returning objects from functions
7.2.1 Building planets—an object creation function
7.2.2 Points in 2D space
7.3 Methods—setting functions as properties of objects
7.3.1 Namespaces—organizing related functions
7.3.2 Math methods
7.3.3 String methods
7.3.4 spacer—more methods for your namespace
7.3.5 Deep namespace exploration
7.4 The Crypt–player objects as arguments
7.5 Summary
8 Arrays: putting data into lists
8.1 Creating arrays and accessing elements
8.1.1 Creating an array
8.1.2 Accessing array elements
8.2 Array methods
8.2.1 Adding and removing elements
8.2.2 Slicing and splicing arrays
8.2.3 Visiting each element with forEach
8.3 The Crypt—a player items array
8.4 Summary
9 Constructors: building objects with functions
9.1 Using functions to build objects
9.1.1 Adding properties
9.1.2 Adding methods
9.2 Using constructor functions to build objects
9.2.1 Constructor functions
9.2.2 World building—making use of the Planet constructor
9.2.3 Telling objects apart with the instanceof operator
9.3 Building mastery—two examples of constructors
9.4 The Crypt—providing places to plunder
9.4.1 Building the Place constructor—title and description
9.4.2 Building the Place constructor—items for your hoard
9.4.3 Building the Place constructor—exits to explore
9.5 The Crypt—streamlining player creation
9.5.1 Organizing player properties
9.5.2 Turning functions into methods
9.5.3 Assigning places to players
9.5.4 Using null as a placeholder for objects
9.6 Summary
10 Bracket notation: flexible property names
10.1 Using square brackets instead of dots
10.1.1 Brackets in action—people’s names as keys
10.1.2 Making the most of square bracket notation—word counts
10.2 The Crypt—enhancing exit excitement
10.2.1 Using an object to hold the exits
10.2.2 Creating functions to add and display exits
10.2.3 Giving each place object its own set of exits
10.2.4 Adding the exits object to the full Place constructor
10.2.5 Testing the Place constructor
10.3 The Crypt—let the games begin!
10.3.1 Updating the display—render
10.3.2 Exploring the map—go
10.3.3 Collecting all the things—get
10.3.4 Designing a bigger adventure—Jahver’s ship
10.4 What’s next?
10.5 Summary
Part 2—Organizing your programs
11 Scope: hiding information
11.1 The dangers of global variables
11.1.1 Access all areas—peeking and tweaking
11.1.2 Access all areas—relying on an implementation
11.1.3 Naming collisions
11.1.4 Crazy bugs
11.2 The benefits of local variables
11.3 Interfaces—controlling access and providing functionality
11.3.1 Using a function to hide variables
11.3.2 Creating multiple independent counters with getCount
11.3.3 Creating multiple independent counters with a constructor function
11.4 Creating a quick quiz app
11.4.1 Using an object as a namespace
11.4.2 Hiding the questions array
11.5 The Crypt—hiding player info
11.5.1 Our current Player constructor—everything is public
11.5.2 An updated Player constructor—some variables are hidden
11.6 The Crypt—hiding place info
11.7 The Crypt—user interaction
11.7.1 The interface—go and get
11.7.2 Hiding the implementation
11.8 Summary
12 Conditions: choosing code to run
12.1 Conditional execution of code
12.1.1 The strict equality operator, ===
12.1.2 The if statement
12.1.3 The else clause
12.1.4 Hide the secret number inside a function
12.2 Generating random numbers with Math.random()
12.3 Further conditions with else if
12.3.1 Comparison operators
12.4 Checking answers in the quiz app
12.4.1 Multiple declarations with a single var keyword
12.4.2 Displaying a question
12.4.3 Moving to the next question
12.4.4 Checking the player’s answer
12.4.5 Handling a player’s answer
12.4.6 Returning the interface object
12.5 The Crypt—checking user input
12.5.1 Step by step through the go method
12.5.2 Never trust user input
12.5.3 Safe exploration—using the if statement to avoid problems
12.6 Summary
13 Modules: breaking a program into pieces
13.1 Understanding bins and files on JS Bin
13.1.1 Creating a bin
13.1.2 Writing some code
13.1.3 Making a note of the filename
13.1.4 Viewing an individual code file
13.2 Importing files into other projects
13.2.1 Creating a bin
13.2.2 Writing some code
13.2.3 Adding a script element
13.2.4 Refreshing the page
13.2.5 Running the program
13.3 Importing the Number Generator—further examples
13.3.1 Picking random questions in the quiz app
13.3.2 Using the between function in your guessing game
13.4 Importing multiple files
13.5 Collisions—when imported code overwrites your variables
13.5.1 Variable collisions
13.5.2 Minimizing collisions by using namespaces
13.6 Immediately invoked function expressions (IIFE)
13.6.1 Recognizing function expressions
13.6.2 Invoking functions
13.6.3 Immediately invoking function expressions
13.6.4 Returning information from an IIFE
13.7 The Crypt—organizing code into modules
13.7.1 Sharing a namespace across modules
13.8 Summary
14 Models: working with data
14.1 Building a fitness app—data and models
14.1.1 Defining a User constructor
14.1.2 Getting a feel for the data as a JavaScript object
14.1.3 Converting the data into a user model
14.1.4 What’s next for the fitness app?
14.2 The Crypt—separating map data from the game
14.2.1 Map data
14.2.2 Adding challenges to the map data
14.2.3 Updating the Place constructor to include challenges
14.2.4 Using the map data to build a game map
14.2.5 Bringing all the pieces together to run the game
14.3 Summary
15 Views: displaying data
15.1 Building a fitness app—displaying the latest user data
15.1.1 Creating your first fitness app view
15.1.2 Using modules to switch fitness app views
15.1.3 What’s next for the fitness app?
15.2 The Crypt—moving view code from Player and Place
15.2.1 Creating a view for players
15.2.2 Creating a view for places
15.3 Talking to players—a message view
15.4 Summary
16 Controllers: linking models and views
16.1 Building a fitness app—controllers
16.1.1 What does the controller do?
16.1.2 Building the fitness app controller
16.1.3 Putting the pieces together for a working fitness app
16.1.4 What’s next for the fitness app?
16.2 The Crypt—adding a game controller
16.2.1 What does the controller do?
16.2.2 Approaching the controller code
16.3 The Crypt—the structure of the controller code
16.4 The Crypt—starting and stopping the game
16.4.1 Initializing the game
16.4.2 Monitoring player health
16.4.3 Updating the display—functions that use the view modules
16.5 The Crypt—giving commands and solving puzzles
16.5.1 Picking up items with game.get
16.5.2 Listing the properties of a challenge
16.5.3 Moving with game.go
16.5.4 Licking the leopard with game.use
16.6 The Crypt—running the game
16.7 The Crypt—what’s next for the app?
16.8 Summary
Part 3—JavaScript in the browser
17 HTML: building web pages
17.1 HTML, CSS, JavaScript—building a web page
17.1.1 Loading the layers
17.1.2 Loading the layers in JS Bin
17.2 HTML—a very short introduction
17.2.1 Starting with an empty page
17.2.2 Adding some content
17.2.3 Marking up a list
17.2.4 Some common HTML elements
17.3 Adding content to a web page with JavaScript
17.3.1 Getting an element by its id
17.3.2 Function declarations
17.3.3 What, no JavaScript?
17.4 Displaying data from an array
17.5 The Crypt—displaying players and places with web views
17.5.1 Updating the player and place view modules—the render method
17.5.2 Updating the player and place view modules—the listings
17.5.3 Using JavaScript’s strict mode
17.5.4 Loading modules and adding placeholders in the HTML
17.5.5 Adding a touch of CSS
17.5.6 Playing the game
17.5.7 Preparing the message view
17.6 Summary
18 Controls: getting user input
18.1 Working with buttons
18.1.1 Adding a button to a page
18.1.2 Writing functions to update the greeting
18.1.3 Listening for clicks
18.2 Using a select element to choose an option
18.2.1 Adding a select element to the page
18.2.2 A function to rate movies and a button to call it
18.3 Reading user input with text boxes
18.3.1 Adding a text box to the page
18.3.2 Adding an unordered list to display the comments
18.3.3 Getting references to the new elements
18.3.4 Updating the rateMovie function
18.3.5 Styling the examples with CSS
18.4 The Crypt—player commands via a text box
18.4.1 Adding controls to the page
18.4.2 Mapping text box entries to game commands
18.4.3 Issuing orders with split, join, pop, and shift
18.4.4 Deciding between options with switch
18.4.5 Making it so—listening for button clicks
18.4.6 Enter The Crypt
18.5 Summary
19 Templates: filling placeholders with data
19.1 Building a news page—breaking news
19.1.1 Comparing the news item data and HTML
19.1.2 Constructing the HTML by string concatenation
19.1.3 Designing with HTML templates
19.1.4 Using script tags for templates
19.2 Replacing one string with another
19.2.1 Chaining calls to replace
19.3 While loops—replacing a string multiple times
19.3.1 Repeating code while a condition is met
19.3.2 The while loop
19.3.3 Replacing a string while it can be found
19.3.4 Replacing strings with regular expressions
19.4 Automating placeholder replacement for templates
19.4.1 Matching template placeholders with object properties
19.4.2 Filling all of the placeholders for each key
19.4.3 Building a list of items using a template
19.5 Building a news page—news just in
19.5.1 Creating the templates and data modules
19.5.2 Importing the modules
19.6 The Crypt—improving the views
19.6.1 Creating HTML templates for all of the views
19.6.2 Updating the views to use the new templates
19.6.3 Enter The Crypt
19.7 Summary
20 XHR: loading data
20.1 Building a fitness app—retrieving user data
20.1.1 Locating the user data
20.1.2 Loading the user data—an outline
20.1.3 Loading the user data—the XMLHttpRequest constructor
20.1.4 Loading the user data—parsing the XHR response with JSON.parse
20.1.5 Loading JS Bin data—a handy function
20.1.6 Building the fitness app
20.1.7 The fitness app—what’s next?
20.2 JSON—a simple data format
20.2.1 Converting JSON into objects and arrays with JSON.parse
20.3 The Crypt—loading a map on demand
20.3.1 Specifying exits with JS Bin file codes
20.3.2 Using a cache—load each place only once
20.3.3 Replacing the Map Data and Map Builder modules with Map Manager
20.3.4 Updating the game controller to use the Map Manager
20.3.5 Building the game page
20.3.6 Enter The Crypt
20.4 Summary
21 Conclusion: get programming with JavaScript
21.1 Working locally with files
21.1.1 Writing code
21.1.2 Saving files
21.1.3 Opening your pages in a browser
21.1.4 Concatenating and minifying files
21.2 Getting help
21.3 What next?
21.3.1 The companion site
21.3.2 Books
21.3.3 Sites
21.3.4 Practice makes permanent
21.4 Summary
index
Symbols
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
R
S
T
U
V
W
X
Y
Back cover