Get Programming with JavaScript

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 PART 1 CORE CONCEPTS ON THE CONSOLE Programming, JavaScript, and JS Bin Variables: storing data in your program Objects: grouping your data Functions: code on demand Arguments: passing data to functions Return values: getting data from functions Object arguments: functions working with objects Arrays: putting data into lists Constructors: building objects with functions Bracket notation: flexible property names PART 2 ORGANIZING YOUR PROGRAMS Scope: hiding information Conditions: choosing code to run Modules: breaking a program into pieces Models: working with data Views: displaying data Controllers: linking models and views PART 3 JAVASCRIPT IN THE BROWSER HTML: building web pages Controls: getting user input Templates: filling placeholders with data XHR: loading data Conclusion: get programming with JavaScript BONUS ONLINE CHAPTERS Node: running JavaScript outside the browser Express: building an API Polling: repeating requests with XHR Socket.IO: real-time messaging 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 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 anything 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 PART 1 CORE CONCEPTS ON THE CONSOLEProgramming, JavaScript, and JS Bin Variables: storing data in your program Objects: grouping your data Functions: code on demand Arguments: passing data to functions Return values: getting data from functions Object arguments: functions working with objects Arrays: putting data into lists Constructors: building objects with functions Bracket notation: flexible property namesPART 2 ORGANIZING YOUR PROGRAMSScope: hiding information Conditions: choosing code to run Modules: breaking a program into pieces Models: working with data Views: displaying data Controllers: linking models and viewsPART 3 JAVASCRIPT IN THE BROWSERHTML: building web pages Controls: getting user input Templates: filling placeholders with data XHR: loading data Conclusion: get programming with JavaScriptBONUS ONLINE CHAPTERSNode: running JavaScript outside the browser Express: building an API Polling: repeating requests with XHR Socket.IO: real-time messaging " SummaryGet Programming with JavaScriptAbout the BookGet Programming with JavaScriptWhat’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 ReaderAbout the AuthorJohn LarsenTable of Contents1. ## 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 "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 anything 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"-- Page 4 of cover