Wednesday , September 20 2017
Home / IT Books / Get Programming with JavaScript

Get Programming with JavaScript

JavaScript is associated with adding interactivity to web pages: reacting to users clicking buttons and selecting from drop-down menus, for example, and updating parts of a page with new content.

JSON is a data format that’s easy for humans to read and write and easy for computers to parse and generate. It has become very popular as a format for exchanging data on the web.

What is a variable?
A variable is a named value in your program. Whenever you use the name in the program, it’s replaced with the value. You could create a variable called score and give it the value 100. Then, if you tell the computer to “display the score,” it will display 100. Now, variables can change, hence the name, so later in the program, maybe in response to some action a player takes, you can update the score. If you add 50 to score and tell the computer to “display the score,” it will now display 150.

JS Bin is an online sandbox for developing and sharing web pages and JavaScript programs. All of the code listings in this book are available on JS Bin (www.jsbin.com) to give you hands-on practice with the code and to let you experiment and learn.

Part 1: Core Concepts On The Console
Chapter 1: Programming, Javascript, and JS Bin
1.1 Programming
1.2 JavaScript
1.3 Learning by doing and thinking
1.4 JS Bin
JS Bin panels ■ Following the code listings on JS Bin
Logging to the console ■ Code comments ■ Further
Adventures ■ Error messages ■ Line numbers
Get an account
1.5 The Crypt—our running example
Playing The Crypt ■ Steps for building The Crypt
1.6 Further examples and practice
1.7 Browser support
Chapter 2 Variables: storing data in your program
2.1 What is a variable?
2.2 Declaring variables and assigning values
Declaring variables ■ Assigning values to variables
One-step declaration and assignment ■ Using a variable in its own assignment
2.3 Choosing good variable names
Keywords and reserved words ■ Rules for naming
variables ■ camelCase ■ Use descriptive variable names
2.4 The Crypt—player variables
Chapter 3 Objects: grouping your data
3.1 A need for organization
3.2 Creating objects
Creating an empty object ■ Properties as key-value pairs
3.3 Accessing object properties
3.4 Updating object properties
3.5 Further examples
Writing a blog ■ Creating a calendar ■ What’s the weather like? ■ The testing effect ■ Create your own
3.6 The Crypt—a player object
Chapter 4 Functions: code on demand
4.1 Noticing repetition
Displaying object properties as text ■ Adding tax and displaying a summary
4.2 Defining and calling functions
Defining new functions ■ Function expressions and function declarations ■ Using functions
Functions step by step
4.3 Reducing repetition
A function for displaying object properties as text
Functions for adding tax and displaying a summary
4.4 Making code easier to read and update
Updating the showMovieInfo function
4.5 The Crypt—displaying player information
A function to display player information
5 Arguments: passing data to functions
5.1 Function reuse and versatility
5.2 Passing information to functions
Passing one argument to a function ■ Passing multiple arguments to a function
5.3 The Crypt—displaying player information
Displaying players’ names ■ Displaying players’ health
Displaying players’ locations ■ Putting it all together—displaying players’ information
6 Return values: getting data from functions
6.1 Returning data from functions
The return value replaces the function call ■ The return keyword ■ Using arguments to determine the return value
6.2 Experimenting at the console prompt
Calling functions ■ Declaring new variables
6.3 The Crypt—building player information strings
Building strings for a player’s name, health, and location
A function for player information—putting the pieces together
7 Object arguments: functions working with objects
7.1 Using objects as arguments
Accessing properties of an object argument ■ Adding properties to an object argument
7.2 Returning objects from functions
Building planets—an object creation function ■ Points in 2D space
7.3 Methods—setting functions as properties of objects
Namespaces—organizing related functions
Math methods ■ String methods ■ spacer—more methods
for your namespace ■ Deep namespace exploration
7.4 The Crypt–player objects as arguments
8 Arrays: putting data into lists
8.1 Creating arrays and accessing elements
Creating an array ■ Accessing array elements
8.2 Array methods
Adding and removing elements ■ Slicing and splicing arrays ■ Visiting each element with forEach
8.3 The Crypt—a player items array
9 Constructors: building objects with functions
9.1 Using functions to build objects
Adding properties ■ Adding methods
9.2 Using constructor functions to build objects Constructor functions ■ World building—making use of the Planet constructor ■ Telling objects apart with the instanceof operator
9.3 Building mastery—two examples of constructors
9.4 The Crypt—providing places to plunder
Building the Place constructor—title and description
Building the Place constructor—items for your hoard
Building the Place constructor—exits to explore
9.5 The Crypt—streamlining player creation
Organizing player properties ■ Turning functions
into methods ■ Assigning places to players
Using null as a placeholder for objects
10 Bracket notation: flexible property names
10.1 Using square brackets instead of dots
Brackets in action—people’s names as keys ■ Making the most of square bracket notation—word counts
10.2 The Crypt—enhancing exit excitement
Using an object to hold the exits ■ Creating functions to
add and display exits ■ Giving each place object its own
set of exits ■ Adding the exits object to the full Place
constructor ■ Testing the Place constructor
10.3 The Crypt—let the games begin!
Updating the display—render ■ Exploring the
map—go 166 ■ Collecting all the things—get
Designing a bigger adventure—Jahver’s ship
10.4 What’s next?
PART 2 ORGANIZING YOUR PROGRAMS
11 Scope: hiding information 171
11.1 The dangers of global variables 172
Access all areas—peeking and tweaking 173 ■ Access all areas—
relying on an implementation 174 ■ Naming collisions 176
Crazy bugs 177
11.2 The benefits of local variables 177
11.3 Interfaces—controlling access and providing
functionality 179
Using a function to hide variables 180 ■ Creating multiple
independent counters with getCount 181 ■ Creating multiple
independent counters with a constructor function 182
11.4 Creating a quick quiz app 183
Using an object as a namespace 184 ■ Hiding the questions
array 185
11.5 The Crypt—hiding player info 187
Our current Player constructor—everything is public 187
An updated Player constructor—some variables are hidden 188
11.6 The Crypt—hiding place info 191
11.7 The Crypt—user interaction 193
The interface—go and get 194 ■ Hiding the implementation
12 Conditions: choosing code to run 198
12.1 Conditional execution of code 199
The strict equality operator, === 199 ■ The if statement 200
The else clause 200 ■ Hide the secret number inside a
function 202
12.2 Generating random numbers with Math.random() 204
12.3 Further conditions with else if 206
Comparison operators 208
12.4 Checking answers in the quiz app 210
Multiple declarations with a single var keyword 211
Displaying a question 212 ■ Moving to the next question 213
Checking the player’s answer 213 ■ Handling a player’s
answer 214 ■ Returning the interface object 214
12.5 The Crypt—checking user input 214
Step by step through the go method 215 ■ Never trust
user input 216 ■ Safe exploration—using the if statement
to avoid problems 217
12.6 Summary 219
13 Modules: breaking a program into pieces 221
13.1 Understanding bins and files on JS Bin 223
Creating a bin 225 ■ Writing some code 225 ■ Making a note
of the filename 225 ■ Viewing an individual code file 226
13.2 Importing files into other projects 226
Creating a bin 227 ■ Writing some code 227 ■ Adding a
script element 227 ■ Refreshing the page 228 ■ Running the
program 228
13.3 Importing the Number Generator—further
examples 229
Picking random questions in the quiz app 230 ■ Using the between
function in your guessing game 231
13.4 Importing multiple files 232
13.5 Collisions—when imported code overwrites
your variables 234
Variable collisions 236 ■ Minimizing collisions by
using namespaces
13.6 Immediately invoked function expressions (IIFE) 238
Recognizing function expressions 240 ■ Invoking functions 240
Immediately invoking function expressions 241 ■ Returning
information from an IIFE 241
13.7 The Crypt—organizing code into modules 242
Sharing a namespace across modules 244
13.8 Summary 246
14 Models: working with data 248
14.1 Building a fitness app—data and models 249
Defining a User constructor 250 ■ Getting a feel for the
data as a JavaScript object 251 ■ Converting the data into
a user model 252 ■ What’s next for the fitness app? 253
14.2 The Crypt—separating map data from the game 253
Map data 255 ■ Adding challenges to the map data 256
Updating the Place constructor to include challenges 258
Using the map data to build a game map 258 ■ Bringing all
the pieces together to run the game 262
14.3 Summary 263
15 Views: displaying data 264
15.1 Building a fitness app—displaying the latest user
data 265
Creating your first fitness app view 266 ■ Using modules to switch
fitness app views 267 ■ What’s next for the fitness app? 268
15.2 The Crypt—moving view code from Player and Place 268
Creating a view for players 269 ■ Creating a view for places 274
15.3 Talking to players—a message view 278
15.4 Summary 279
16 Controllers: linking models and views 280
16.1 Building a fitness app—controllers 281
What does the controller do? 281 ■ Building the fitness app
controller 282 ■ Putting the pieces together for a working
fitness app 283 ■ What’s next for the fitness app? 284
16.2 The Crypt—adding a game controller 284
What does the controller do? 285 ■ Approaching the
controller code 286
xiv CONTENTS
16.3 The Crypt—the structure of the controller code 287
16.4 The Crypt—starting and stopping the game 287
Initializing the game 288 ■ Monitoring player health 288
Updating the display—functions that use the view modules 289
16.5 The Crypt—giving commands and solving puzzles 290
Picking up items with game.get 290 ■ Listing the properties
of a challenge 291 ■ Moving with game.go 292
Licking the leopard with game.use 294
16.6 The Crypt—running the game 296
16.7 The Crypt—what’s next for the app? 298
16.8 Summary 298
PART 3 JAVASCRIPT IN THE BROWSER…………………….299
17 HTML: building web pages 301
17.1 HTML, CSS, JavaScript—building a web page 302
Loading the layers 303 ■ Loading the layers in JS Bin 304
17.2 HTML—a very short introduction 304
Starting with an empty page 305 ■ Adding some content 305
Marking up a list 306 ■ Some common HTML elements 307
17.3 Adding content to a web page with JavaScript 309
Getting an element by its id 310 ■ Function declarations 311
What, no JavaScript? 311
17.4 Displaying data from an array 311
17.5 The Crypt—displaying players and places with
web views 314
Updating the player and place view modules—the render
method 315 ■ Updating the player and place view modules—
the listings 317 ■ Using JavaScript’s strict mode 318
Loading modules and adding placeholders in the HTML 318
Adding a touch of CSS 319 ■ Playing the game 320
Preparing the message view
18 Controls: getting user input 323
18.1 Working with buttons 324
Adding a button to a page 324 ■ Writing functions to update the
greeting 325 ■ Listening for clicks
18.2 Using a select element to choose an option 327
Adding a select element to the page 328 ■ A function to rate movies
and a button to call it 329
18.3 Reading user input with text boxes 330
Adding a text box to the page 331 ■ Adding an unordered
list to display the comments 332 ■ Getting references to the
new elements 332 ■ Updating the rateMovie function 332
Styling the examples with CSS 334
18.4 The Crypt—player commands via a text box 334
Adding controls to the page 335 ■ Mapping text box entries
to game commands 336 ■ Issuing orders with split, join, pop,
and shift 336 ■ Deciding between options with switch 338
Making it so—listening for button clicks 339
Enter The Crypt
19 Templates: filling placeholders with data 343
19.1 Building a news page—breaking news 344
Comparing the news item data and HTML 345 ■ Constructing
the HTML by string concatenation 345 ■ Designing with HTML
templates 346 ■ Using script tags for templates 346
19.2 Replacing one string with another 347
Chaining calls to replace 348
19.3 While loops—replacing a string multiple times 349
Repeating code while a condition is met 350 ■ The while
loop 351 ■ Replacing a string while it can be found 352
Replacing strings with regular expressions 353
19.4 Automating placeholder replacement for templates 353
Matching template placeholders with object properties 353
Filling all of the placeholders for each key 355 ■ Building a list
of items using a template 355
19.5 Building a news page—news just in 357
Creating the templates and data modules 357 ■ Importing the
modules 359
19.6 The Crypt—improving the views 360
Creating HTML templates for all of the views 361 ■ Updating the
views to use the new templates 362 ■ Enter The Crypt 365
19.7 Summary 365
xvi CONTENTS
20 XHR: loading data 367
20.1 Building a fitness app—retrieving user data 368
Locating the user data 368 ■ Loading the user data—an outline 370
Loading the user data—the XMLHttpRequest constructor 370
Loading the user data—parsing the XHR response with JSON.parse 372
Loading JS Bin data—a handy function 373 ■ Building the fitness
app 374 ■ The fitness app—what’s next? 376
20.2 JSON—a simple data format 377
Converting JSON into objects and arrays with JSON.parse 378
20.3 The Crypt—loading a map on demand 378
Specifying exits with JS Bin file codes 379 ■ Using a cache—load
each place only once 380 ■ Replacing the Map Data and Map
Builder modules with Map Manager 380 ■ Updating the game
controller to use the Map Manager 383 ■ Building the game
page 384 ■ Enter The Crypt 386
20.4 Summary 386
21 Conclusion: get programming with JavaScript 387
21.1 Working locally with files 387
Writing code 388 ■ Saving files 388 ■ Opening your pages
in a browser 390 ■ Concatenating and minifying files 390
21.2 Getting help 391
21.3 What next? 392
The companion site 392 ■ Books 392 ■ Sites 392
Practice makes permanent 392

Get Programming with JavaScript

About huydam

Check Also

Data Science For Dummies 2nd Edition

Get Free Books is a personal website, which shares all my books (used books or …

Leave a Reply

Your email address will not be published. Required fields are marked *