Coding with JavaScript For Dummies

Introduction ………………………………………………………. 1
About This Book ………………………………………………………………………………….1
Foolish Assumptions……………………………………………………………………………2
Icons Used In This Book ………………………………………………………………………3
Beyond the Book …………………………………………………………………………………4
Where to Go from Here………………………………………………………………………..4
Part I: Getting Started with JavaScript …………………….. 5
Chapter 1: The World’s Most Misunderstood
Programming Language . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
What Is JavaScript? ……………………………………………………………………………..8
The Eich‐man cometh………………………………………………………………….8
Mocha‐licious ……………………………………………………………………………..9
We need more effects! …………………………………………………………………9
JavaScript grows up ……………………………………………………………………9
Dynamic scripting language ………………………………………………………10
What Does JavaScript Do?………………………………………………………………….12
Why JavaScript?…………………………………………………………………………………13
JavaScript is easy to learn …………………………………………………………13
Where is JavaScript? JavaScript is everywhere! …………………………14
JavaScript is powerful! ………………………………………………………………18
JavaScript is in demand …………………………………………………………….18
Chapter 2: Writing Your First JavaScript Program . . . . . . . . . . . . . . . 19
Setting Up Your Development Environment……………………………………….19
Downloading and installing Chrome ………………………………………….20
Downloading and installing a code editor ………………………………….21
Reading JavaScript Code ……………………………………………………………………29
Running JavaScript in the Browser Window……………………………………….29
Using JavaScript in an HTML event attribute……………………………..30
Using JavaScript in a script element ………………………………………….31
Including external JavaScript files……………………………………………..33
Using the JavaScript Developer Console…………………………………………….36
Commenting your code……………………………………………………………..37
Chapter 3: Working with Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
Understanding Variables ……………………………………………………………………39
Declaring Variables ……………………………………………………………………………41
Understanding Global and Local Scope………………………………………………42
Naming Variables……………………………………………………………………………….44
Creating Constants Using the const Keyword …………………………………….46
Working with Data Types …………………………………………………………………..46
Number data type ……………………………………………………………………..47
String data type…………………………………………………………………………49
Boolean data type……………………………………………………………………..52
NaN data type……………………………………………………………………………53
undefined data type…………………………………………………………………..53
Chapter 4: Understanding Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Making a List ……………………………………………………………………………………..55
Array Fundamentals…………………………………………………………………………..57
Arrays are zero indexed…………………………………………………………….57
Arrays can store any type of data………………………………………………58
Creating Arrays………………………………………………………………………………….59
Using the new keyword method ………………………………………………..59
Array literal……………………………………………………………………………….59
Populating Arrays………………………………………………………………………………60
Understanding Multidimensional Arrays ……………………………………………60
Accessing Array Elements………………………………………………………………….62
Looping through arrays …………………………………………………………….63
Array properties ……………………………………………………………………….63
Array methods ………………………………………………………………………….64
Using array methods …………………………………………………………………64
Chapter 5: Working with Operators, Expressions,
and Statements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Express Yourself………………………………………………………………………………..68
Hello, Operator ………………………………………………………………………………….68
Operator precedence ………………………………………………………………..68
Types of Operators ……………………………………………………………………………72
Assignment operators……………………………………………………………….72
Comparison operators ………………………………………………………………73
Arithmetic operators…………………………………………………………………73
String operator ………………………………………………………………………….75
Bitwise operators………………………………………………………………………75
Logical operators………………………………………………………………………77
Special operators………………………………………………………………………78
Combining operators…………………………………………………………………80
Chapter 6: Getting into the Flow with Loops and Branches . . . . . . . 81
Branching Out……………………………………………………………………………………81
if . . . else……………………………………………………………………………………82
Switch……………………………………………………………………………………….84
Here We Go: Loop De Loop ………………………………………………………………..85
for……………………………………………………………………………………………..86
for . . . in ……………………………………………………………………………………88
while loops………………………………………………………………………………..90
do. . . while ……………………………………………………………………………….91
break and continue……………………………………………………………………92
Part II: Organizing Your JavaScript ……………………….. 95
Chapter 7: Getting Functional . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Understanding the Function of Functions…………………………………………..97
Using Function Terminology………………………………………………………………99
Define a function ……………………………………………………………………….99
Function head……………………………………………………………………………99
Function body …………………………………………………………………………..99
Call a function………………………………………………………………………….100
Defining parameters and passing arguments……………………………100
Return a value …………………………………………………………………………100
The Benefits of Using Functions ……………………………………………………….101
Writing Functions …………………………………………………………………………….104
Returning Values ……………………………………………………………………………..105
Passing and Using Arguments…………………………………………………………..106
Passing arguments by value…………………………………………………….107
Passing arguments by reference………………………………………………109
Calling a function without all of the arguments………………………..109
Setting default parameter values……………………………………………..109
Calling a function with more argument than parameters………….110
Getting into arguments with the arguments object ………………….110
Function Scope ………………………………………………………………………………..111
Anonymous Function……………………………………………………………………….111
Knowing the differences between anonymous and named
functions………………………………………………………………………………112
Self-executing anonymous functions………………………………………..112
Do it Again with Recursion……………………………………………………………….113
Functions within Functions………………………………………………………………114
Chapter 8: Making and Using Objects . . . . . . . . . . . . . . . . . . . . . . . . . 117
Object of My Desire………………………………………………………………………….117
Creating Objects ………………………………………………………………………………119
Defining objects with object literals…………………………………………119
Defining objects with an Object constructor ……………………………120
Retrieving and Setting Object Properties………………………………………….120
Dot notation…………………………………………………………………………….120
Square bracket notation ………………………………………………………….121
Deleting Properties…………………………………………………………………………..123
Working with Methods……………………………………………………………………..123
Using this ………………………………………………………………………………..124
An Object-Oriented Way to Become Wealthy: Inheritance………………..125
Constructing Objects with constructor functions…………………….127
Modifying an object type …………………………………………………………129
Creating Objects with Object.create ………………………………………..129
Part III: JavaScript on the Web …………………………… 131
Chapter 9: Controlling the Browser with the Window Object . . . . 133
Understanding the Browser Environment…………………………………………133
The user interface……………………………………………………………………134
Loader …………………………………………………………………………………….134
HTML parsing………………………………………………………………………….136
CSS parsing ……………………………………………………………………………..136
JavaScript parsing……………………………………………………………………136
Layout and rendering………………………………………………………………137
Igniting the BOM ……………………………………………………………………..137
The Navigator object……………………………………………………………….137
The Window object………………………………………………………………….140
Using the Window object’s methods ………………………………………..145
Chapter 10: Manipulating Documents with the DOM . . . . . . . . . . . . 147
Understanding the DOM…………………………………………………………………..147
Node Relationships ………………………………………………………………………….149
Using the Document Object’s Properties and Methods …………………….153
Using the Element Object’s Properties and Methods………………………..155
Working with the Contents of Elements ……………………………………………159
innerHTML………………………………………………………………………………160
Setting attributes …………………………………………………………………….161
Getting Elements by ID, Tag Name, or Class ……………………………………..161
getElementById ……………………………………………………………………….161
getElementsByTagName ………………………………………………………….162
getElementsByClassName ……………………………………………………….163
Using the Attribute Object’s Properties ……………………………………………165
Creating and appending elements ……………………………………………165
Removing elements …………………………………………………………………166
Chapter 11: Using Events in JavaScript . . . . . . . . . . . . . . . . . . . . . . . 169
Knowing Your Events……………………………………………………………………….169
Handling Events ……………………………………………………………………………….171
Using inline event handlers ……………………………………………………..172
Event handling using element properties…………………………………173
Event handling using addEventListener …………………………………..174
Stopping propagation………………………………………………………………179
Chapter 12: Integrating Input and Output . . . . . . . . . . . . . . . . . . . . . . 181
Understanding HTML Forms…………………………………………………………….181
The form element…………………………………………………………………….181
The label element ……………………………………………………………………183
The input element……………………………………………………………………184
The select element…………………………………………………………………..185
The textarea element……………………………………………………………….186
The button element…………………………………………………………………186
Working with the Form Object………………………………………………………….187
Using Form properties …………………………………………………………….187
Using the Form object’s methods…………………………………………….188
Accessing form elements…………………………………………………………190
Getting and setting form element values………………………………….191
Validating user input……………………………………………………………….192
Chapter 13: Working with CSS and Graphics . . . . . . . . . . . . . . . . . . 195
Using the Style Object………………………………………………………………………195
Getting the current style of an element……………………………………196
Setting style properties……………………………………………………………199
Animating Elements with the Style Object………………………………………..200
Working with Images………………………………………………………………………..203
Using the Image object…………………………………………………………….203
Creating rollover buttons ………………………………………………………..203
Grow images on mouseover …………………………………………………….205
Creating an image slideshow……………………………………………………206
Using the Style Object’s Animation Properties …………………………………207
Part IV: Beyond the Basics ………………………………… 211
Chapter 14: Searching with Regular Expressions . . . . . . . . . . . . . . . 213
Finding It Out with Regular Expressions …………………………………………..213
Writing Regular Expressions…………………………………………………………….215
Using the RegExp object………………………………………………………….216
Regular expression literals ………………………………………………………217
Testing regular expressions …………………………………………………….219
Special character in regular expressions …………………………………219
Using Modifiers ………………………………………………………………………………..220
Coding with Regular Expressions……………………………………………………..221
Chapter 15: Understanding Callbacks and Closures . . . . . . . . . . . . . 225
What Are Callbacks?…………………………………………………………………………225
Passing functions as arguments……………………………………………….226
Writing functions with callbacks ……………………………………………..226
Using named callback functions ………………………………………………227
Understanding Closures …………………………………………………………………..230
Using Closures …………………………………………………………………………………233
Chapter 16: Embracing AJAX and JSON . . . . . . . . . . . . . . . . . . . . . . . 237
Working Behind the Scenes with AJAX……………………………………………..237
AJAX examples………………………………………………………………………..238
Viewing AJAX in action ……………………………………………………………240
Using the XMLHttpRequest object…………………………………………243
Working with the same-origin policy ……………………………………….245
Using CORS, the silver bullet for AJAX requests ………………………247
Putting Objects in Motion with JSON………………………………………………..248
Part V: JavaScript and HTML5 …………………………… 253
Chapter 17: HTML5 APIs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255
Understanding How APIs Work…………………………………………………………255
Checking HTML5 API browser support…………………………………….256
Getting to know HTML5’s APIs…………………………………………………257
Using Geolocation…………………………………………………………………………….259
What does geolocation do? ……………………………………………………..259
How does geolocation work?……………………………………………………260
How do you use geolocation ……………………………………………………261
Combining geolocation with Google maps……………………………….263
Accessing Audio and Video………………………………………………………………266
Chapter 18: jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271
Writing More and Doing Less……………………………………………………………271
Getting Started with jQuery ……………………………………………………………..272
The jQuery Object……………………………………………………………………………273
Is Your Document Ready? ………………………………………………………………..274
Using jQuery Selectors……………………………………………………………………..274
Changing Things with jQuery……………………………………………………………275
Getting and setting attributes ………………………………………………….276
Changing CSS…………………………………………………………………………..276
Manipulating elements in the DOM ………………………………………….277
Events………………………………………………………………………………………………278
Using on( ) to attach events …………………………………………………….279
Detaching with off( )………………………………………………………………..280
Binding to events that don’t exist yet………………………………………281
Other event methods ………………………………………………………………281
Effects………………………………………………………………………………………………282
Basic effects…………………………………………………………………………….282
Fading effects…………………………………………………………………………..282
Sliding effects ………………………………………………………………………….283
Setting arguments for animation methods ……………………………….283
Custom effects with animate( ) ………………………………………………..283
Playing with jQuery animations……………………………………………….284
AJAX ………………………………………………………………………………………………..285
Using the ajax( ) method………………………………………………………….285
Shorthand AJAX methods………………………………………………………..287
Part VI: The Part of Tens …………………………………… 289
Chapter 19: Ten JavaScript Frameworks and Libraries
to Learn Next . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291
Angular JS ………………………………………………………………………………………..291
Backbone.js ……………………………………………………………………………………..293
Ember.js …………………………………………………………………………………………..294
Famo.us……………………………………………………………………………………………295
Knockout………………………………………………………………………………………….296
QUnit ……………………………………………………………………………………………….297
underscore.js …………………………………………………………………………………..297
Modernizr ………………………………………………………………………………………..298
Handlebars.js …………………………………………………………………………………..299
jQuery………………………………………………………………………………………………300
Chapter 20: Ten Common JavaScript Bugs and
How to Avoid Them . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303
Equality Confusion …………………………………………………………………………..304
Avoiding misuse of assignment………………………………………………..304
Dodging the equals pitfalls ………………………………………………………304
Mismatched Brackets……………………………………………………………………….305
Mismatched Quotes …………………………………………………………………………306
Missing Parentheses ………………………………………………………………………..306
Missing Semicolon……………………………………………………………………………307
Capitalization Errors ………………………………………………………………………..307
Referencing Code Before It’s Loaded………………………………………………..307
Bad Variable Names …………………………………………………………………………310
Scope Errors…………………………………………………………………………………….310
Missing Parameters in Function Calls……………………………………………….310
Counting Errors: Forgetting That JavaScript Counts from 0………………311
Chapter 21: Ten Online Tools to Help You Write Better
JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313
JSLint……………………………………………………………………………………………….313
JSFiddle.net ……………………………………………………………………………………..314
JSBin………………………………………………………………………………………………..315
javascriptcompressor.com ………………………………………………………………316
jsbeautifier.org…………………………………………………………………………………317
JavaScript RegEx generator………………………………………………………………318
JSONformatter………………………………………………………………………………….319
jshint.com………………………………………………………………………………………..320
Mozilla Developer Network………………………………………………………………321
Douglas Crockford……………………………………………………………………………322
Index ……………………………………………………………. 325