INDEX

SYMBOLS

$() shortcut for jQuery() function 296, 299, 313, 361

$() conflicts with other scripts that use $() 361

$(document).ready(function(){…}) 312

$(function() { … }) (shortcut) 313, 364–5

$(this) 324, 549

[] Array syntax 72

[] Accessing an object's properties 103

{} Code blocks 57

{} Code block (function) 90

() Final parentheses (calling a function) 97

() Grouping operator 97

= Assignment operator 107

+= Operator (adding to a string) 111, 125

== Equal to (comparison operator) 150, 168

=== Strict equal to (comparison operator) 150, 168

!= Not equal to (comparison operator) 150, 168

!== Strict not equal to (comparison operator) 150, 168

> Greater than (comparison operator) 151

>= Greater than or equal to (comparison operator) 151

< Less than (comparison operator) 151

<= Less than or equal to (comparison operator) 151

&& Logical and (logical operators) 157, 158, 537

! Logical not (logical operators) 157, 159

|| Logical or (logical operators) 157, 159, 169

. Member operator 50, 103

// (No http: in a url) 355

A

.abort() method (jqXHR object) 389

Accessibility 46, 491

Accordion 430, 492–5, 522–5

.accordion() (jQuery UI method) 430

action (DOM property – forms) 572

add() (option to select box) 584

.add() (jQuery method) 531

.addClass() (jQuery method) 320, 498, 512–3, 519, 565

addEventListener() (DOM method) 254–5, 570–1

Adding or removing HTML Content

Comparing techniques 226–7

innerHTML & DOM manipulation 218–225, 240–1

Using jQuery 314–9, 346–7

Addition 76–7, 181

.after() (jQuery method) 318–9

Age verification 617–9

Ajax

Introduction to 370–3

Data formats

HTML 374, 378–9, 390–1

JSON 374, 376–7, 382–3, 396–7

XML 374–5, 380–1

Forms 394–5

.serialize() (jQuery method) 394

jqXHR object (see J > jqXHR object)

JSON object (see J > JSON > JSON object)

Relative URLs 389

Requests (loading data):

CORS (Cross Origin Resource Sharing) 384

HTML 378–9

HTML (jQuery) 390–1, 393

JSON 382–3

JSON/JSONP from a remote server 385–8

Proxy for loading remote content 384

XML 380–1

jQuery 388–9, 392–3

.load() 390–1, 407, 427

$.ajax() 388, 398–9, 405

$.get() 392–3

$.getJSON() 392, 396–7

$.getScript() 392

$.post() 392, 394–5

Responses 373–391

Update URL 424–7

URLs (maintaining) 424–7

XMLHttpRequest object

Methods

open(), send() 372–3

Properties

responseText 379, 383, 389

responseXML 380–2, 389

status 373, 378–9, 389

XDomainRequest object (IE8–9) 384

Alert box 125

alert() (window object) 124–5

.always() (jqXHR object) 389, 396–7

AngularJS 428, 434–9

.animate() (jQuery method) 332, 334–5, 352–3, 493, 515, 520–1

Anonymous functions 88, 96

APIs

Introduction to 410, 412

API Keys 441

Console API 470

HTML5 APIs 413

Geolocation API 416–9

History API 424–7

Web Storage API 420–3

Platform APIs 440

Google Maps API 441–7

Scripts

Introduction to 428

AngularJS 434–9

jQuery UI 429–433

.append() (jQuery method) 318, 565

.appendTo() (jQuery method) 318, 505, 519

appendChild() (DOM method) 222, 240

Arguments 93, 109

Arithmetic operators 76–7

Arrays

Introduction to 70–3

Adding and removing items 530, 536–7, 540–3

Creating 72

split() method (String object) to create arrays 128–130, 546–7, 563, 618–9

Looping through an array 174–5, 535

Methods

concat() 530

every() 530

filter() 530, 536–7

forEach() 530, 536–7

map() 530

pop() 530

push() 530, 536–7, 540–3

reverse() 530, 564–5

shift() 530

some() 530

sort() 530, 554–9, 564–5

unshift() 530

Properties

length property 72, 118–9

Arrays and objects

Arrays are objects 118–9

Array-like objects (jQuery) 308, 340

Arrays of objects 119, 533–5

Multiple return values from a function 95

vs variables and objects 116–7

Assignment operator 61, 107

Asynchronous loading (images) 509

Asynchronous processing 371

attachEvent() (IE8 event model) 255, 258–9, 570–1

Cross-browser solution 570–1

Attributes

.attr() (jQuery method) 320–1

Creating / removing (DOM method) 232–5

Autocomplete (live search) 370

B

back() (history object) 426

.before() (jQuery method) 318

beforeunload event 286–7

Behavior layer 44

Binding events 248, 250

blur() (DOM method) 573

blur event 247, 274–5, 282, 573, 588–9

Boolean data type 62, 66

break keyword 174

Browsers

Developer tools

Debugging 464–7

Examining DOM 236–7

Dimensions 124–5, 350

Feature detection (see F > Feature detection)

JavaScript console 464–79 (see also C > Console)

Rendering engine 40

Scrollbars 350

Support in examples 10

Browser Object Model

Introduction to 121–2

history object 122, 124–5, 424–7

location object 122

navigator object 122

screen object 122, 124–5

window object 122, 124–5

Bubbling (event flow) 260–1

Built–in objects 120–7

:button (jQuery selector) 342

C

Caching

Cross-references 540–1

DOM queries 190–1, 575

Images (in custom object) 509–511

jQuery selections 308–9, 540–1

Object references 540–1

Calling a function 91

cancelable property (event object) 262

Capturing (event flow) 260–1

Case sensitivity 56

catch (error handling) 480–1, 576–7

CDN 354–5

ceil() (Math object) 134

Centering images 511

Chaining (jQuery methods) 311

change event 247, 282, 573, 576–7, 586–7

Character count 588–9

charAt() (String object) 128–130

Checkboxes 580–1

:checkbox (jQuery selector) 342

:checked (jQuery selector) 342

checked (DOM property – forms) 573, 580–1

.children() (jQuery method) 336

clearTimeout() (window object) 517–9

.click() (jQuery method) 512–3

click() (DOM method) 573

click event 39, 246, 276–7, 573

clientX, clientY (event object) 278–9

.clone() (jQuery method) 346–7

.closest() (jQuery method) 336

Code blocks 56, 90

Code dependencies 616

Code reuse 616

Collections

elements (nodeLists) 196–9

elements (form) 572, 600

Color picker 591

Comments 57

Compare functions (sorting) 555–9

Comparison operators 150–9

Checking equality 168

Comparing expressions 154–5

Operands 152

Truthy and falsy values 167

concat() (array object) 530

Conditional loading 596–7

Conditional statements 149

if 160–1, 181

if … else 162–3

switch 164–5, 291

Conditions (loops) 170–1

Console

Breakpoints 476–8

console.assert() 475

console.error() 472

console.group() 473

console.groupEnd() 473

console.info() 472

console.log() 470–1

console.table() 474

console.warn() 472

debugger keyword 479

Constructor notation 106–111, 113

:contains() (jQuery selector) 338

Content layer 44

Content panels

Accordion 492–5, 522–5

Modal window 500–5

Photo viewer 506–513

Slider 515–520

Tabs 496–9

continue keyword 174, 594–5

Coordinates (geolocation API) 417–9

copy event 247

CORS (Cross Origin Resource Sharing) 384

Create attributes (DOM) 234

Create elements (DOM) 126, 222–3, 240

Create text nodes (DOM) 126, 222–3, 240

Cross-Site Scripting (XSS) Attacks 228–231

.css() (jQuery method) 322–3, 504–5, 510–1, 521

CSS

Box dimensions 348

CSS-style selectors in jQuery 302–3

Properties and values 9

Selectors to find elements (DOM) 193, 197, 202

Updating class names 189, 195, 232

Updating id attributes 189, 232

Updating styles (DOM) 195, 232

Updating styles (jQuery) 320–3, 497–9

Cut, copy, paste element (jQuery) 346–7

cut event 247

D

.data() (jQuery method) 546–7, 565, 602, 608–9

data-* attributes (HTML5) 289–90, 544–6, 608

Data binding (Angular) 437

Data models

Introduction to 26–7

Comparing techniques 116–7

Arrays and objects 118–9, 533

Objects and properties 28, 102–5, 142

Data types

Complex data types

Objects (Arrays and functions) 131

Simple (primitive) data types

Boolean 62, 131, 167

Number 62, 131–5

Null 131

String 62, 128–130, 131

Undefined 131

Type coercion and weak typing 166–7

Dates / Date object

Introduction to 136–9

Comparing 618–9

Creating / Constructor 136, 138, 143

Date formats 136–9

Date pickers 432–3, 591, 618–9

Day & month names 137, 143

Difference between two dates 139, 143

Sorting 559, 562–3

Methods

getTime(), getMilliseconds(), getSeconds(),

getMinutes(), getHours(), getDate(), getDay(),

getMonth(), getFullYear(),

getTimeZoneOffset() 137

setTime(), setMilliseconds(), setSeconds(),

setMinutes(), setHours(), setDate(),

setMonth(), setFullYear(), toString(),

toTimeString(), toDateString() 137

dblclick event 246

Debugging

Errors and a debugging workflow 462–3

Tips 484

(see also Console and Troubleshooting)

Declare a variable 60–1

Declaring an array 71–3

Declaring a function 90, 92

defaultChecked (DOM property – forms) 573

defaultValue (DOM property – forms) 573

Delays

clearTimeout() 517–9

.delay() (jQuery method) 311, 332–3, 364

setTimeout() 517–9

Delegating events 266–70, 290–1, 331

delete keyword 107, 112, 533

Deserializing JSON data 382–3

Design patterns 501

.detach() (jQuery method) 346, 502–3, 505

Developer tools 236–7, 464–5

:disabled (jQuery selector) 342

disabled (DOM property – forms) 573, 578

disabled (JavaScript is disabled) 491

document object

Introduction to 36–9, 123, 126–7

Events

load 39, 246, 272–3

Methods

getElementById() 39, 126, 193–195

createElement(), createTextNode() 126, 222–3

querySelectorAll() 126, 193, 197, 202, 204–5

write() 39, 49, 126, 226

Properties

domain 126

lastModified 36, 39, 126–7

title 36, 39, 126–7

URL 126–7

DOMContentLoaded event 286–7

DOM (document object model)

Introduction to 121, 126–7, 184, 186–7

Elements

Accessing

getElementById() 193–5

getElementsByClassName() 193, 197–9, 200

getElementsByTagName() 193, 197, 201

querySelector() 193–4, 202–3

querySelectorAll() 193, 197, 202–3, 204–5

Adding

appendChild() 222–3

insertBefore() 222, 240

Creating

createElement() 222–3

Updating

DOM manipulation 219, 222–5, 227

innerHTML 218, 220–1, 227, 228–31

textContent and innerText 216

Attributes

class attribute/className property 195, 232

getting and updating 232–5

id property 232

Text nodes

createTextNode() 222

nodeValue 214–5

textContent and innerText 216–7

Document nodes 186

document object (see D > document object)

DOM queries

Performance (fastest route) 192

Caching DOM queries 190–1, 575

DOM tree

Introduction to 40–1, 186–7

Inspecting (exploring – browser tools) 236–7

Traversing the DOM 208, 210–11

Updating 212–3

Events (see E > Events)

Event handlers 250, 252–3

Event listeners 250, 254–5, 263, 265

Nodes 40, 186–9

Whitespace 209–211

NodeList 192, 196–9, 202–205

length property 196

Live and static NodeLists 196

Looping through 204–5

Selecting items from a NodeList 198–9

.done() (jqXHR object) 389, 405

Dot notation 103 (see also member operator)

Do while loops 170, 177

Drop–down boxes 584–7

DRY principle (don't repeat yourself) 616

Dynamic filtering 538–43

E

.each() (jQuery method) 324–5, 333, 339, 498–9, 519, 531, 546–7

ECMAScript 532

Elements (see D> DOM > Elements and J > jQuery)

Dimensions (jQuery) 348–9

Finding elements (DOM) 192–203

Finding elements (jQuery) 296, 302–3, 336, 342

Form element content (jQuery) 342–5

Hiding/showing 332–3, 582–3, 618–9

Inserting new elements (jQuery) 318–9

Updating elements (DOM) 212–3

Updating elements (jQuery) 313

elements collection (DOM property) 572, 574–5

.empty() (jQuery method) 346, 504–5

:enabled (jQuery selector) 342

.eq() (jQuery method) 340–1, 512–3, 521

Equality 150–1, 168

equals sign (assignment operator) 61

Errors

Common errors 460–1, 485

Debugging workflow 462–3 (and tips 484–5)

error event 246, 272

Error handling 480–1, 576–7

Error objects 459, 461, 481

EvalError 459–460

RangeError 459, 461

ReferenceError 459–60

SyntaxError 459–60

TypeError 459, 461

URIError 459–60

Exceptions 458, 480–1

NaN 461

Understanding errors 458

e (shorthand: event or error object) 328

EvalError 459–460

Evaluating conditions 149–59

Events

Introduction to 5, 30–31, 244–50

All events

beforeunload 286–7

blur 247, 274–5, 282

change 282–3, 586–7

click 260–1, 268–9, 276–7

dblclick 246, 276

DOMContentLoaded 286–7

DOMNodeInserted 284, 285

DOMNodeInsertedIntoDocument 284

DOMNodeRemoved 284

DOMNodeRemovedFromDocument 284

DOMSubtreeModified 284

error 246, 272

focus 274–5, 282, 588–9, 594–5

focusin 274

focusout 274

hashchange 286, 426–7

input 247, 271, 280–2, 552–3, 573, 588–9

keydown 280

keypress 280–1

keyup 280

load 39, 246, 272–3

mousedown 276

mousemove 276, 279

mouseout 276

mouseover 276

mouseup 276

resize 272, 504–5

scroll 272

submit 282–3, 572, 574–5

unload 272

binding 248, 250

Delegation (DOM) 266, 268–71, 290–1

Delegation (jQuery) 330–1, 365

Determining position 278–9

Event flow (bubbling and capturing) 260–1

Event handlers

Cross browser 570–1

DOM Event handlers 250, 252–3

DOM Event listeners 250, 254–5

Removing event listeners 255

Using parameters with events 256–7, 263

HTML event handlers 250–1

event object DOM 262–3, 265–70

Methods

preventDefault() 262, 267, 283

stopPropagation() 262, 267

Properties

cancelable, clientX, clientY, pageX, pageY,

screenX, screenY, target, type 262, 278–9

event object (jQuery) 328–9, 331

Methods

.preventDefault() 328

.stopPropagation() 328

Properties

data, pageX, pageY, target, timeStamp,

type, which 328

IE8 event model

attachEvent() 255, 258–9, 290

Cross-browser helper function 570–1

event object 264–5, 570–1

Property and method equivalents 262

Fallback example 258–9

jQuery (consider as alternative) 300–1

jQuery events 326–331, 343

Performance (delegation) 266, 268–9, 290, 331

Terminology (fired, raised, triggered) 247

Types of event 246–7, 271

W3C DOM 271–286

HTML5 286–7

jQuery events 326–331, 343–5

Which element user interacted with 262–70

every() (array object) 530

Exceptions (see Errors)

Execution contexts 453–6

Expressions 74–6

Comparing expressions 154

Function expressions 96–7

F

.fadeIn() (jQuery method) 298, 311, 332–7, 365

.fadeOut() (jQuery method) 332–3, 337, 510–11

.fadeTo() (jQuery method) 510–11

.fail() method (jqXHR object) 389, 396–7, 405

Falsy and truthy values 167–9

Feature detection

Feature detection (in jQuery) 301

Modernizr 414–5, 417, 419, 593, 596–7

:file (jQuery selector) 342

File extension

.js 46

.min.js 298

Filtering

Introduction to 534

filter() (array object) 530, 536–7

.filter() (jQuery method) 338–9, 343, 531, 548–9

Tags 544–9

Text / live search 550–3

finally (error handling) 480–1

Final parentheses 97

.find() (jQuery method) 336–7, 518–9, 564–5

Firebug 237

firstChild (DOM property) 188–9, 208–9, 211

Flags 578–9

floor() (Math object) 134–5, 139

Flowcharts 18, 23, 148, 494

fn object (jQuery) 523–5

focus() (DOM method) 273, 573

.focus() (jQuery method) 326, 619

:focus (jQuery selector) 342

focus event 274–5, 282, 573, 588–9

focusin event 247

focusout event 247

forEach() (array object) 530, 536–7, 542–3

for loop 172–3, 175, 207

Forms

Controls (types of) 573

Changing type of form control 576–7

Checkboxes 580–1

Date picker (HTML5) 591

Date picker (jQuery) 432–3, 619–9

Email 590, 611

Radio buttons 582–3

Range inputs 591

Select boxes 584–7

Submit button 578–9

Text input 576–7, 594–5

Textareas 588–9

elements collection 600

Enhancement

Introduction to 568

jQuery UI (Date picker & slider) 432–3

Password length and match 620–1

Show or hide based on other form input 618–9

Giving focus to an element 273, 326, 573, 619

Methods 343, 572–3, 584

Properties 343, 572–3, 584

Submitting forms 574–5, 578–9

Validation 282, 598–619

Introduction to 568, 598

Age 617–9

Character count 588–9

Checkbox selected 580–1

Checking for a value 606–7

Checking length of text input 615

Dates 617–9

Email 611

HTML5 form validation 590–1, 604–5

Length of text/password input 588–9, 620–1

Numbers 132, 343

Password length and match 615

Radio button selected 582–3

Regular expressions 612–3

Required elements 606–7

test() and regular expressions 611–3

Turn off HTML5 validation 591

URL 590

Which element the user interacted with 576–7 (see also Event object)

forward() (history object) 426

Function-level scope 98

Functions

Introduction to 88–9

Anonymous functions 88

Arguments 92–3

Calling 91, 93

Code block 90

Declaring 90, 92, 96

Final parentheses 97

Function expressions 96–7

Helper functions 570–571

initialize / init() 539, 542–3

Parameters 88, 92–3

return 92, 94–7, 578–9, 586–7, 594–5

this (scope of keyword) 270 (see also this keyword)

G

Geolocation API 416–9

$.get() (jQuery method) 388, 392–3

getAttribute() (DOM method) 232–3

getCurrentPosition() (Geolocation API) 417–9

getDate() (Date object) 137

getDay() (Date object) 137

getElementById() (DOM method) 126, 192–5

getElementsByClassName() (DOM method) 193, 197, 200

getElementsByTagName() (DOM method) 193, 197, 201, 240

getFullYear() (Date object) 137–8

getHours() (Date object) 137

getItem() (storage API) 421–3

$.getJSON() (jQuery method) 388, 392, 396–7, 405

getMillseconds() (Date object) 137

getMinutes() (Date object) 137

getMonth() (Date object) 137

$.getScript() (jQuery method) 388, 392

getSeconds() (Date object) 137

getTime() (Date object) 137

getTimezoneOffset() (Date object) 137

Global JavaScript Objects

Introduction to 121, 124–139

Boolean object 123

Date object 123, 136–9

Math object 123, 134–5

Number object 123, 132–3

Regex object 123

String object 123, 128–130

Global scope 98

go() (history object) 426

Google Maps API 441–7

Grouping operator 97

:gt() (jQuery selector) 340–1

H

:has() (jQuery selector) 338–9

hasAttribute() (DOM method) 232–3, 235

.hasClass() (jQuery method) 365

hashchange event 286, 426–7

.height() (jQuery methods) 348–9, 350, 353

height (screen object) 124–5

Helper functions 570–571

.hide() (jQuery method) 332–3, 512–3, 582–3, 618–9

History API 424–7

history object (Browser Object Model) 124–5, 424–7

Methods

back(), forward(), go(),

pushState(), replaceState() 426

Properties

length 426

History stack 424

Hoisting 456

How many characters in a string 128–130

.html() (jQuery method) 314–7

HTML5

APIs 413

Geolocation API 416–9

History API 424–7

Web Storage API 420–3

Attributes

data-* attributes 289–90, 544–6, 608

required 591, 607

Events 286–7

Form controls (support, polyfills, styling) 590–2

placeholder fallback 594–7

I

id (DOM property) 189, 232

if … else 148–9, 162–3

if statements 148–9, 160–3, 181

:image (jQuery selector) 342

Images centering 511

Immediately Invoked Function Expressions (IIFE) 97, 142, 504, 523

Implicit iteration 310

Increment in loops 170–3

.index() (jQuery method) 565

Index numbers 129

indexOf() (String object) 128–130, 550–3

Initialize / init() (functions) 539, 542–3

Inline scripts 49

.innerHeight() (jQuery methods) 348

innerHeight (window object) 124–5

innerHTML (DOM property) 218, 220–1, 227

Security risks 228

innerText (DOM property) 216–7

.innerWidth() (jQuery methods) 348

innerWidth (window object) 124–5

:input (jQuery selector) 342

input event 247, 271, 280–2, 552–3, 573, 588–9

insertBefore() (DOM method) 240

Instances (of objects) 109–11

Interpreter

Definition 40

How it works 452–7

.is() (jQuery method) 343, 521, 565

isNaN() (Number object) 132

$.isNumeric() 343

item() (Array) 71

item() (NodeLists) 196, 198

J

JavaScript console 462–79

JavaScript History / Standards 532

JavaScript libraries 360–1, 428

JavaScript not enabled 491

jQuery

Introduction to 294, 296, 298–9

$() shortcut for jQuery() 296, 299, 313, 361

$(function() { … }); 313

Advantages 300

Ajax (see Ajax)

API 358

Caching selections 308–9

Chaining methods 311

Conflicts with other scripts 361

document.ready() 312–13

Documentation 358

Elements 302–3, 314–6, 318–9, 336–9, 342–7

Events object 326–331

.fn object 523–5

Forms (.serialize()) 394

Global methods

$.ajax() 388, 398–9, 405

$.get() 388, 392–3

$.getJSON() 388, 392, 396–7, 405

$.getScript() 388

$.isNumeric() 343

$.post() 388, 394–5

How to include 298, 354–5

Implicit iteration 310

jQuery() function (see also $()) 296, 299, 313, 361

jQuery methods: full list of methods 304–5

jQuery selection (matched set) 296–7, 306

Adding to / filtering selection 338–341

Caching 308–9

Number of elements (length property) 364

jQuery selectors 296, 300, 302–3

jQuery Selectors: full list of selectors 302–3

jQuery UI 429

Accordion 430

Date picker 432–33, 618–9

Form enhancements 432–3

Tabs 431

Looping

Through elements (implicit iteration) 310

Through elements .each() (see E > .each())

Matched set (see J > jQuery > jQuery selection)

Page is ready to work with 312–3

Plugins 359, 428

Creating your own 522–5

Date picker 619

jQuery UI 429–434, 618–9

noUISlider 538

Versions 298, 301

Where to get / download 298, 354–5

Where to place script 313, 354–7

jqXHR object 389, 405

Methods

.abort(), .always(),

.done(), .fail() 389, 396–7

.overrideMimeType() 405

Properties

responseText, responseXML,

status, statusText 389

JSON

Introduction to 376–7

As an Ajax data format 374

Debugging JSON 474

Displaying JSON 382–3

JSON object

parse() & stringify() methods 377, 382–3

Serializing and deserializing data 382–3

JSONP 385–7

K

Keyboard events 246–7, 280–1

keydown, keypress, keyup, input event 246–7

keys (objects) 101, 533, key/value pairs 118

Keywords

break 164–5, 174

case 164–5

catch 480–1, 576–7

continue 174, 595

debugger 479

delete 107, 112, 533

finally 480–1

new (array) 71

new (object) 106, 109

return 92, 94–7, 578–9, 586–7, 594–5

switch 164–5

this 102–9, 114–5, 270, 324

throw 482

try 480–1, 576–7

var 60, 63–8

L

lastChild (DOM property) 208, 211

lastIndexOf() (String object) 128–130

length (history object) 124, 426

length (items in a select box) 584

length (String object) 128–130, 588–9, 620–1

Length of text input 588–9

Lexical scope 457

Lexicographic sort 554

Libraries 360–1, 428

Linking to a JavaScript file 47, 51, 298, 313, 354–7

Links

Get value of href attribute 407

Which link was clicked 498–9

Literal notation 102, 104–5, 113, 142

(see also O > Objects > Creating your own objects)

Livesearch (autocomplete) 370

load event 246, 272–3, 286–7

.load() (jQuery method – Ajax) 388, 390–1, 407

Local scope 98–9 (see also p456–7)

Locale 137

localStorage 420–3

location property (window object) 124–5

Logical operators 156–9, 169

Logical and 157–8, 537

Logical not 157, 159

Logical OR 157, 159

Short-circuit evaluation 157, 169

Looking for text 550–3

Loops

Introduction to 170–7

break keyword 174 (see also Keywords > break)

Conditions 170–3

continue keyword 174, 595

Counters 171–4, 181

do while loop 170, 177

for loop 175

Introduction to 170, 175

Diagram 172–3

Looping through elements 204–7

Increment (++) 171

Infinite loop 174

jQuery implicit iteration 310

jQuery .each() method 324

Looping through

an array 175, 530, 534–7, 542–3

checkboxes 580–1

DOM elements (nodeList) 204–7, 594–5

properties of an object 533, 605

radio buttons 582–3

Performance 174

while loop 170, 176, 181

Lowercase 128–130

:lt() (jQuery selector) 340

M

map() (array object) 530

Maps (Google maps) 441–7

Matched set (jQuery) 296–7, 306–9, 338–41, 364

Math object 134–5

Methods

ceil(), floor(), random(),

round(), sqrt() 134

Properties

PI 134

Member operator 50, 103

method property (DOM property – forms) 572

Methods

Introduction to 32–3, 100–11

Calling a method 50, 103

Minification (.min.js extension) 298

Modal window 500–5

Modernizr 414–5, 417, 419, 593, 596–7

Module pattern 501

mousedown, mousemove, mouseout,

mouseover, mouseup event 246, 276–7

multiple (DOM property – forms) 584

Multiplication 76–7, 176–7, 181

Mutation events 247, 284–5

MVC / MV* 360, 434–9

N

name (DOM property – forms) 572–3

Name/value pairs 28, 88–9, 101, 113, 116–8, 131

Naming conflicts (collisions) 97, 99, 361

NaN 78, 132, 461, 483

navigator object (Browser Object Model) 122, 414, 417–9

new keyword 71, 106, 109

.next() (jQuery method) 336–7, 495

.nextAll() (jQuery method) 336

nextSibling (DOM property) 208, 210, 214

NodeLists 196–9

Nodes (introduction to) 40, 186–7

nodeValue (DOM property) 184, 214–5, 241

No JavaScript 491

Non–blocking processing 371

.not() (jQuery method) 338, 494–5, 531

:not() (jQuery selectors) 338–9

noUiSlider 538, 542–3

novalidate property (HTML5 forms) 591, 604–5

Number object (Built-in Objects)

Methods

isNan(), toExponential(),

toFixed(), toPrecision() 132–3

Rounding numbers 132–3

Numbers 62–3

Random numbers 135

Rounding 132–3

Sorting 558

Numeric data type 62 (see also D > Data types)

O

Objects

Introduction to 26–9, 34–5, 100–1

Accessing properties and methods

Dot notation 103–5, 110

Square brackets 103, 107

Adding and removing properties 112

Arrays and objects 118–9, 308, 340, 533

Built–in objects 120–3

Creating

Comparison of techniques 113

Constructor notation 106, 108–111, 113

Literal notation 102, 104–5, 113, 142

Instances of 109–11

Multiple objects 105, 108–111

Creating your own objects (examples of)

Compare functions for sorting 562–3

Custom object for valid elements 601, 604–5

Data: cameras and projectors 586–7

Data: people for filtering 533–4

Image cache 509–13

Modal window 501–5

Tags 544–9

keys 101–2, 113, 117–8, 131, 533

Methods 32–5, 38–9, 100–11

Properties 28–9, 34–5, 100–12

this 114–5

Updating properties 107

vs variables and arrays 116–7

Object models (introduction to) 121

.off() (jQuery method) 505

.offset() (jQuery methods) 351, 353

.on() (jQuery method) 326–31, 343–5, 365

onpopstate property (window object) 426–7

.open() (XMLHttpRequest object) 373, 379, 381, 383

Operators

+= adding to a string 111, 125, 127, 130, 133

Comparison operators 148–56

> greater than, >= greater than or equal to 151–5

() grouping operator 97

< less than, <= less than or equal to 151

. Member operator 50, 103

== is equal to, != is not equal to 150

=== strict equal to, !== strict not equal to 150

? : Ternary operator 562, 579, 583

Unary operator 168

<option> elements 584–7

options (DOM property – forms) 584

Order of execution 452

.outerHeight(), (jQuery method) 348

.outerWidth() (jQuery method) 348

.overrideMimeType() (jqXHR method) 405

P

Page loads – run script 273, 312–3

pageXOffset, pageYOffset (window object) 124–5

pageX, pageY (window object) 124, 278–9

Parameters 50, 88, 92–3

With event listeners 256–7

.parent() (jQuery method) 336, 498–9

.parents() (jQuery method) 336

parentNode (DOM property) 208, 224–5

:password (jQuery selector) 342

paste event 247

Performance

Caching

DOM queries 190–1, 575

Images (custom object) 509–11

jQuery selections 308–9, 540–1

Object references 540–1

Text (custom object) 551

Event delegation 266, 268–71, 290–1, 330–1, 365

Global vs Local variables 98–9

Selecting class and id attributes (jQuery vs DOM) 324

Where to place scripts 356–7

PI property (Math object) 134

placeholder (and its fallback) 590–1, 594–5

Polyfills 593–7

pop() (array object) 530

.position() (jQuery method) 351

Position object (geolocation API) 418–9

PositionError object (geolocation API) 418–9

Position of items on page 351–3

$.post() (jQuery method) 388, 392, 394–6

.prepend() & .prependTo() (jQuery methods) 318

Presentation layer 44

preventDefault() (event object) 262, 267, 283,

.preventDefault() (jQuery method) 328, 345, 365, 494–5, 504–5

previousSibling (DOM property) 208–10

Primitive data types (see Data types)

Progressive enhancement 45

.prop() (jQuery method) 618–9

Properties 28–9, 34–5, 100–12

Protocol relative URL 355

Proxy (Ajax) 384

push() (array object) 519, 530, 536–7, 540, 542–3

pushState() (history object) 424–7, 426

Q

querySelector() (DOM method) 193–6, 202, 241

querySelectorAll() (DOM method) 126, 193, 197

R

:radio (jQuery selector) 342

random() (Math object) 134–5

Random numbers 135

RangeError 459, 461

Range slider 432–3, 538, 542–3

.ready() (jQuery method) 312–3, 361, 364

Reference

To an element DOM 190–1, 575

To an element jQuery 308–9, 540–1

To an object 540–1

ReferenceError 459–60

Regular expressions 563, 611–3

Relative URLs (Ajax) 389

Removing content:

.remove() (jQuery method) 299, 316–7, 346, 584

.removeAttr() (jQuery method) 320

removeAttribute() (DOM method) 232, 235

removeChild() (DOM method) 224–5

.removeClass() (jQuery method) 320–1, 339, 341, 512–3

removeEventListener() (DOM method) 255

(see also innerHTML an(d detach())

replace() (String object) 128–130, 406–7, 562–3

replaceState() method (history object) 424–6

.replaceWith() (jQuery method) 316

Require.js 593

:reset (jQuery selector) 342

reset() (DOM method – forms) 572

reset event 247, 572

resize event 246, 272, 504–5

responseText (XMLHttpRequest object) 379, 383, 389

responseXML (XMLHttpRequest object) 380, 389

return keyword 92, 94–7, 578–9, 586–7, 594–5

reverse() (Array object) 530, 564–5

RangeError 459, 461

Rounding numbers 132–5

round() (Math object) 134

S

Same origin policy 420

Saving a script 46

Scope 98–9, 457

Global scope 98–9, 453–7

IIFEs 97

Lexical scope 457

Local (function-level) scope 98–9, 453

Naming collisions and namespaces 99, 523

Screen dimensions 124–125, 278, 350

screen object (Browser Object Model) 124–5

Properties

height, width 124

screenX, screenY (window object) 124, 278

<script> element 47

Conditional loader for scripts 596–597

When to load 596–7

Where to place <script> tag 48, 51, 313, 354–7

Scripts

Approach to writing 16–23

Definition 14–7

scroll event 246, 272

.scrollLeft() (jQuery method) 350

.scrollTop() (jQuery method) 350, 353

Search 550–553

Security: Cross Site Scripting (CSS) Attack 228–231

Select boxes 584–7

select() (DOM method) 573

:selected (jQuery selector) 342

selected (DOM property – forms) 573, 580–3

selectedIndex (DOM property – forms) 584

selectedOptions (DOM property – forms) 584

select event 247

send() (XMLHttpRequest object) 373, 379, 381, 383

Separation of concerns 490

.serialize() (jQuery method - forms) 394–5

Serializing JSON data 382

sessionStorage 420–3

setAttribute() (DOM method) 232, 234

setDate() (Date object) 137

setFullYear() (Date object) 137

setHours() (Date object) 137

setItem() (storage API) 421–3

setTime() (Date object) 137

setTimeout() (window object) 517–9

setMillseconds() (Date object) 137

setMinutes() (Date object) 137

setMonth() (Date object) 137

setSeconds() (Date object) 137

shift() (array object) 530

Short–circuit evaluation 157, 169

.show() (jQuery method) 332–3, 344, 364

.siblings() (jQuery method) 336, 548–9

Slider (content panel) 515–520

.slideToggle() (jQuery method) 494–5

some() (array object) 530

sort() (array object) 530, 533, 554–65

Sorting 555–6

Dates 559

Lexicographic sort 554

Numbers 554, 558

Random order 558

Sorting a table 561–6

split() (String object) 128–130, 546–7, 563, 618–9

sqrt() (Math object) 134

src attribute 47

Stack 454–5

Statements 56

.stop() (jQuery method) 332, 353, 510–1

stopPropagation() (DOM event object) 262, 267

.stopPropagation() (jQuery method) 328

Storage objects (storage API) 420–3

Storing data (compare techniques) 116–7

String data type 62, 64–5

Checking for text 552–3

String object

Methods

charAt(), indexOf(), lastIndexOf(),

replace(), split(), substring(), trim(),

toLowerCase(), toUpperCase() 128–130

Properties

length 128–130

:submit (jQuery selector) 342

submit() (DOM method – forms) 572

Submit buttons 578–9

submit event 247, 271, 282, 572

substring() (String object) 128–130

.complete() (jQuery method) 396

.error() (jQuery method) 396

.success() (jQuery method) 396

switch statements 164–165, 291

Switch value 165

Synchronous processing 371

SyntaxError 459–460

T

Tables

Adding rows 542–3

Sorting a table 560–5

.tabs() (jQuery UI method) 431

Tabs 431, 496–9

target property (event object) 262–3, 268–9

Templates 360, 434–9

Ternary operator 562–3, 579, 583

Testing for features (see Feature detection) test() method 611

.text() (jQuery method) 314–7, 364–5, 535

:text (jQuery selector) 342

<textarea> 588–9

textContent (DOM property) 216–7

this 102–9, 114–5, 270, 324

throw (error handling) 481–3

Timers (see Delays)

.toArray() (jQuery method) 531

toDateString() (Date object) 137

toExponential() (Number object) 132

toFixed() (Number object) 132

.toggle() (jQuery method) 332, 493

.toggleClass() (jQuery method) 565

toLowerCase() (String object) 128–130, 550–3

toPrecision() (Number object) 132

toString() (Date object) 137

toTimeString() (Date object) 137

toUpperCase() (String object) 128–130, 406

Traversing the DOM 208–11

trim() (String object) 128–130, 552–3

Troubleshooting

Ajax not working in Chrome (locally) 378

Ajax requests: assets not showing up 389

Common errors 485 (see also 460–1)

Console 464–474

Debugging JSON data and objects 474

Debugging tips 462–3, 484

Equivalent values do not match 166

Events firing more than once 260–1

IE will not run script locally 47

jQuery object only returns data from first element in selection 307

NaN 78, 461

try … catch 480–1, 576–7

Truthy and falsy values 167–9

try (error handling) 480–1, 576–7

type (DOM property – forms) 573

type (event object) 262

Type coercion 166, 168

TypeError 459, 461

U

UML (Unified Modeling Language) 494

undefined 61, 485

Unix time 136–7

unload event 246, 272 (see also beforeunload)

unshift() (array object) 530

Untrusted data (XSS) 228–31

.unwrap() (jQuery method) 346

Updating content (see DOM and jQuery)

Updating page without refreshing (see Ajax)

Uppercase 128–130, 406

URIError 459–460

URL (get current) 36–9, 124

V

.val() (jQuery method) 343, 345, 365, 542–3

Validation (definition) 282, 568

value (DOM property – forms) 573, 574–5, 578–9

Variables

Assign a value / assignment operator 61

Declaration 60

Definition 58–9

Naming 60, 69

Naming conflicts and collisions 97, 99

Scope 98, 453

undefined 61, 485

vs arrays and objects 116–7

var keyword 60, 63–8

W

Weak typing 166–7

Web Storage API 420–3

Where to place your scripts 356

while loop 170, 176, 181

Whitespace (DOM) 209–211, 237

width (screen object) 124–5

.width() (jQuery methods) 348–50

window object (Browser Object Model) 36–7, 124–5

Introduction to 36–7

Methods

alert(), open(), print() 124

Properties

innerHeight, innerWidth 124–5

location property 36, 124

onpopstate 426

pageXOffset, pageYOffset 124

screenX, screenY 124–5

write() (document object) 126, 226

XYZ

XDomainRequest object (IE8–9) 384

XML 374–5, 380–81

XMLHttpRequest object

Methods

open(), send() 372–3

Properties

responseText 379, 383, 389

responseXML 380–2, 389

status 373, 378–9, 389

XSS (Cross Site Scripting) Attacks 228–231