Index

A

Ajax requests, 129

adding Ajax GET request, 130–131

adding Ajax URL to main manifest, 135

adding Ajax URL to manifest NETWORK section, 135

error handling, 133–134

POST request behavior, 135

products.json File, 131

restructuring, 131–133

Application cache entries, 122

Application cache specification, 126

Asynchronous module definition (AMD)

callback arguments, 248–250

definition, 245

dependency declaration, 247–248

dependency issues, 246–247

factory function, 245

inline dependencies, 250–252

B

Bidirectional bindings, 58–60

C

Cache-control header, 122

CheeseLux, 9–12

adding routing, 101–105

browser, 105

enhancing view model, 106

managing application state, 107–108

mapProducts function, 106

Click event, 25–26

Code

fragment, 6

HTML document, 5

Content distribution network (CDN), 16

CSS class, 22–24

D

Data Storage, browser. See HTML5 local storage feature

Default actions management, 27–29

Design patterns, 4

Desktop web browser, 7

Dynamic basket, 29

E

Empty basket, 71–74

Event, definition, 24

F

Fallback entries, 122–126

Flow control bindings, 52–53

$ function, 18–19

G

Graphic design and layouts, 4

H

Hover method, jQuery, 26

HTML editor, 7

HTML5 History API

preserving view model state, 96–97

restoring application state, 99–101

storing application state, 98–99

HTML5 local storage feature, 137–139

complex data storage (see IndexedDB)

with form elements, 143–144

for JSON data, 139–141

with objects, 141–142

with offline web applications

adding buttons, 154–155

cached CheeseLux web app, 150–153

createDialog function, 156–157

enhanceViewModel function, 153–154

script element changes, 155–156

persistent forms, 142–143

session storage

benefits, 148–149

semi-persistent observable data item, 149

synchronizing view models, 144

KO subscribe method, 146

main document modification, 147–148

persistentObservable function, 144, 146–147

StorageEvent object, 145

HTMLElement properties, 35

I

IndexedDB, 156

DBO object, 158–160

locating objects

using cursor, 166

using Index, 167

by key, 165–166

onupgradeneeded property, 160–161

success outcomes, 161

to web application, 162–165

WebSQL, 157

working principle, 157

J

JavaScript

dependencies in libraries, 238

AMD module (see Asynchronous module definition (AMD))

assumed dependency, 238–239

directly resolved dependency, 240

double-loading problem, 243–244

issues, 240–243

global namespaces, 229–230

global variables, 230

namespaces

configuration, 233–234

definition, 230–231

nested, 231–232

nested, using a function, 232–233

self-executing function, 234–235

naming collision, 229

property, method and function, 235–238

unit testing, 253

adding tests, 254–256

jQuery, 257–258

QUnit, 253–254

JavaScript libraries, 7

JavaScript polyfill libraries, 129

jQuery

addClass method, 23

bind method, change and keyup events, 32–33

custom selectors, 20

hover method, 26

importing, 15–18

method chaining, 23

methods for inserting elements in document, 22

statement, 19

UI button, 43–44

UI toolkit, 42–43

jQuery Mobile

content changes, 214–215

event sequence, 211–212

disabling automatic processing, 212–213

pageinit event, 213–214

pages, 201–202

widgets, 202

K

Knockout (KO)

data bindings, 51

definition, 49

library, 49–53

ko object, 50

L

Latent content, 29, 31–32

M

Method chaining, 23

Method pairs, 23

Mobile browser emulator, 7

Mobile Web Apps, 195

CheeseLux Mobile Web App

basic implementation, 209

formatText data binding, 210–211

initial version, 206–209

duplicating elements using templates, 215

with custom data, 218

data-bind attribute, 218–220

using two-pass data bindings, 215–218

getIndexOfCategory function, 226

goals, 205

jQuery Mobile

askmobile.html document, 198

CheeseLux web app, 204

data attributes, 201

events, 203

installation, 201

setCookie, 203

mobile device detection

capabilities, 197–198

user agent, 195–196

multipage model

adding support, 220–223

changePage method, 225

mapping page names to routes, 224–225

navigation, 223

replacing radio buttons with anchors, 223

Mouseenter and mouseleave events, 26–27

N

Node.js, 8

O

Offline web apps, 109

Ajax requests

adding Ajax GET request, 129–131

adding Ajax URL to main manifest, 135

adding Ajax URL to manifest NETWORK section, 135

error handling, 133–134

POST request behavior, 135

products.json file, 131

restructuring, 131–133

HTML5 application cache

accepting changes to manifest, 115–116

adding manifest to HTML document, 112–113

adding network and fallback entries, 122–126

cached content, 113–114

control of cache update process, 116–122

manifest file, 111–112

monitoring

adding elements and bindings, 128

detecting state of network, 126–128

POST request behavior, 135

revised document, 109–111

P, Q

Polyfill, 98

POST request behavior, 135

R

Recurring Ajax requests polyfills, 129

Responsive Web Apps, 169

screen orientation, 184–188

screen size

adapting source data, 183

adapting web app layout, 179–183

conditional jQuery UI styling, 183–184

CSS media queries, 173–174

detectDeviceFeatures function, 177–178

image loading, 178–179

JavaScript media queries, 174–175

matchMedia feature, 176–177

polyfill, 175–176

removing elements, 184

touch interaction

application routes, 193

detecting touch support, 189–190

navigation, 191–193

touchSwipe library, 190–191

viewport, 169–172

S, T

Single handler function, 27

Submit button upgradation

CSS class, 22–24

$ function, 18–19

input element selection and hiding, 19–21

jQuery, 15–18

new element insertion, 21–22

U

URL routing

CheeseLux

adding routing, 101–104

browser, 104

enhancing view model, 106

managing application state, 107–108

mapProducts function, 106

consolidating routes

adding default route, 89–90

optional segments, 88–89

unexpected segment values, 86–88

variable segments, 85–86

event-driven controls to navigation

bridging events and routing, 92–94

bridging URL routing and JavaScript events, 90–92

selected data binding, 94

using HTML5 History API

history.replaceState method, 95

preserving view model state, 96–97

restoring application state, 99–101

steps demonstrating the issue, 95

storing application state, 98–99

simple routed web application, 77–78

adding navigation markup, 81–83

adding routing library, 79

adding view model and content markup, 79–81

applying controls and elements, 83–85

V

Value bindings, 51–52

View model, 47

adding more products, 53–54

dynamic basket

adding basket line items, 66–69

adding basket structure and template, 70–71

adding subtotals, 64–66

empty basket, 71–74

removing items, 71

generating content, 61–63

model creation

adding data to document, 48

adopting view model library, 49

bidirectional bindings, 58–60

extending the model. 60–61

generating content, 49–53

observable data items, 55–58

resetting, 47–48

reviewing, 63–64

URL routing, 79–80

W, X, Y, Z

Web app development principles, 15

dynamic basket data

adding basket elements, 29–31

bind method, change and keyup events, 32–33

changing form target, 37–39

latent content, 31–32

overall total calculation, 35–37

subtotal calculation, 33–34

subtotal display, 34–35

event handling

click event, 25–26

default actions, 28–29

using event object, 27

mouseenter and mouseleave, 26–27

single handler function, 27

JavaScript disabled and enabled, 39–40

JavaScript-only policy, 41

non-JavaScript users, 40

submit button upgradation

CSS class, 22–24

$ function, 18–19

input element selection and hiding, 19–21

jQuery, 15–19

new element insertion, 21–22

UI toolkit

creating jQuery UI button, 43–44

setting up jQuery UI, 42

Web server, 7

whitelist entries, 122

WURFL database, 195