Practical prototype and scipt.aculo.us part 54 pot

■ Special characters

$ function, 18–21, 136

DOM nodes, 20–21

multiple arguments, 19–20

strings and nodes, 19

$ string, 19

$$ function, 26–28

$$('a[rel]') selector, 28

$$('a[rel~=external]) selector, 28

$$('li.current + li') selector, 28

$$('li.current li') selector, 28

$$('ul#menu a:not([rel])') selector, 28

$$('ul#menu li:not(.current)') selector, 28

$_REQUEST global variable, 63

$A array, 46

$A function, 24–25

$break exception, 47

$break object, 34

$H shortcut, 43

$('input[type="text"]') selector, 28

$super method, 146

$time value, 84

0px property, 217

50px property, 217

80 percent rule, 11

■ A

a element, 18, 28

absolute mode, 228

absolute positioning, 200–201

abstract code, 311

action attribute, 98

addClassName method, 117–119

addMethods method, 148

addObservers function, 102, 105

administration section, 288

advanced enumeration, 38–40 Enumerable#inject method, 38–39 Enumerable#invoke method, 40 Enumerable#map method, 38–39 Enumerable#pluck method, 40 after value, 59

afterFinish parameter, 241 afterSetup parameter, 241 afterStart parameter, 241 afterUpdate parameter, 241 afterUpdateElement element, 286 Ajax, 49–89

Ajax object, 50–62 dynamic content, 62–74, 89 and Firefox, 308–309 overview, 49

pros and cons of, 49–50 Ajax Autocompleter, 283–285 Ajax classes, 297

Ajax.Autocompleter class, 279, 283 ajax.html file, 57, 59

Ajax.InPlaceEditor, 288–293 options and features, 292–293 overview, 288–290

styling, 291–292 ajax.js file, 50 Ajax.PeriodicalUpdater, 60, 297 Ajax.Request, 52–56, 297 Ajax.Updater, 56–59, 69, 297 alert dialog, 101, 241 alert function, 7 ancestor nodes, 114 ancestors method, 132 anchor, 195

anonymous function, 8, 92 application/json content type, 88 application/json MIME type, 110 application/x-javascript file, 53 arbitrary properties, 6–7

315

arguments, multiple, $ function, 19–20

arguments variable, 24, 25

Array data type, 5

Array object, 33

Array#clear method, 188

Array#reverse method, 188

Array#sort method, 37

Array#uniq method, 189

Array#without method, 189

Array.prototype, 6

arrays, 8, 188–189

associative array, 41

asynchronous communication, 49

autocomplete_players.php file, 284

Autocompleter class, 278

Autocompleter.Local, 279–283

autocompleters, 277–286

overview, 277

using, 278–286

Ajax Autocompleter, 283–285

Autocompleter.Local, 279–283

options and features, 285–286

overview, 278–279

when to use, 277–278

axis option, 296

■ B

base classes, 143–144

before value, 59

beforeFinish parameter, 241

beforeSetup parameter, 241

beforeStart parameter, 241

beforeUpdate parameter, 241

big-box class name, 226

blank data type, 4

blank method, 176

block property, 194

block-level elements, visualizing with, 194

blocks, formatting with inline elements,

195–196

blur handler, 104

body tag, 267

border box, 198

border property, 198

borders, 196–198

bottom property, 203

bottom value, 59

box score page, 76 break keyword, 34 breakfast log example, 62–73 client side, 64–67

error handling, 67–73 overview, 62–63 server side, 63–64 breakfast.js file, 102 breakfast.php file, 63, 68 breakfast.php script, 67, 95 breakpoint, 98

browsers compatibility problems, 305–310 capabilities support, 306–307 overview, 305–306

quirks, 307–309 sniffing, 309–310 history of, 91–94 bucket element, 58–59 bugs, 8, 209, 307 builder.js file, 210, 212

■ C

callbacks, 241–242, 265–269, 296, 312–313 camelize method, 174–175

cancelLink parameter, 292 cancelText parameter, 292 capabilities support, 306–307 capitalize method, 175

Cascading Style Sheets See CSS

children nodes, 114 class attribute, 118, 127 class name, 118 Class object, 143 Class#addMethods method, 148, 298 Class.create class, 298

Class.create method, 143–144, 304 classes, 142–148

base classes, 143–144 monkeypatching, 148 overview, 142–143 subclasses, 145–147 className property, 118 clear method, 188–189 clearTimeout function, 161 clientHeight property, 198 client-side validation, 102–106

clientWidth property, 198

code formatting, 311

code patterns, 297–305

inheritance and mixins, 297–305

keeping track of instances, 302–305

overview, 297–299

setting default options, 299–301

overview, 297

collapsed state, 117

collections, 31–48

advanced enumeration, 38–40

Enumerable#inject method, 38–39

Enumerable#invoke method, 40

Enumerable#map method, 38–39

Enumerable#pluck method, 40

enumerable methods, 34–36

Enumerable#detect method, 35

Enumerable#each method, 34–35

Enumerable#partition method, 36

Enumerable#reject method, 36

Enumerable#select method, 36

source code, 46–48

functional programming, 32–33

hash construct, 41–45

enumerable methods on, 44–45

key safety, 41–42

Object.prototype, 42–44

for loop, 31–32

ObjectRange class, 45–46

overview, 31

sorting, 36–38

turning into arrays, 46

cols parameter, 293

combination effects, 220, 236–240

Effect.BlindUp and Effect.BlindDown,

238–239

Effect.Fade and Effect.Appear, 237–238

Effect.SlideUp and Effect.SlideDown,

239–240

overview, 236–237

comment nodes, and Internet Explorer,

307–308

computeTotalForTable function, 136

configurability, 311–312

Configurable method, 300

Configurable mixin, 301, 312

Connection: close header, 308

console.log function, 7, 157 constraint option, 262 constructor property, 300, 303 containment option, 273 content box, 198

Content-Length header, 308 Content-type header, 87 continue keyword, 34 contributing to script.aculo.us, 209 controls.js file, 210, 212

conventions, 311 core effects, 220 CSS box model, 193–208 CSS positioning, 199–207 absolute positioning, 200–201 offset parents and positioning context, 205–207

with offset properties, 208 overview, 199

relative positioning, 203–204 static positioning, 199 z-index property, 202–203 DHTML properties, 198–199 formatting blocks with inline elements, 195–196

margins, padding, and borders, 196–198 overview, 193–194

visualizing with block-level elements, 194

CSS selector string, 131 currentFrame parameter, 242 currying, 159

custom events, 108–111, 312–313 broadcasting scores, 109–110 listening for scores, 110–111 overview, 108–109

■ D

dasherize method, 174–175 data types

inheritance, 4–5 instance methods, 4 Date type, 182

debugger keyword, 240 decay parameter, 61–62 default action, 98 DEFAULT_OPTIONS property, 300–301

defer function, 163

descendants method, 132

descendants node, 114

destination argument, 22

destroy method, 304

developer control, 277

DHTML, 193 See also CSS box model

dictionary, 41

disabled attribute, 127

display property, 194, 196

div container, 65

div element, 135, 280

document argument, 313

document element, 129

document object, 110

Document Object Model See DOM

documentation, 208

document.createTextNode element, 134

document.evaluate function, 307

document.fire function, 110

document.getElementById method, 18,

187, 306

document.getElementsByTagName('* ')

method, 307

DOM API

nodes, 113–115

overview, 113

DOM behavior pattern, 148–158

overview, 148–150

refactoring, 150–153

reuse, 158

testing, 154–157

DOM extensions, 115–137

node creation, 132–135

node modification, 115–128

addClassName method, 117–119

getStyle method, 119–120

hasClassName method, 117–119

hide method, 115–117

insert method, 120–125

readAttribute method, 126–127

remove method, 120–125

removeClassName method, 117–119

replace method, 120–123

setStyle method, 119–120

show method, 115–117

toggle method, 115–117

toggleClassName method, 117–119 update method, 120–122

visible method, 115–117 writeAttribute method, 126–128 traversal and collection, 128–132 ancestors method, 132 descendants method, 132 down method, 129–131 immediateDescendants method, 132 navigating nodes, 128–129

next method, 129–131 nextSiblings method, 132 previous method, 129–130 previousSiblings method, 132 select method, 131

siblings method, 132

up method, 129–131 DOM NodeLists, 25 DOM nodes, 20–21 DOM scripting, 92, 101 dom:loaded event, 109, 250 doSomethingCostly method, 163 down method, 129–131

dragdrop.js file, 210, 212 Draggable object, 257 draggables, 257–263 constraint option, 262 ghosting option, 262–263 making, 260–261

overview, 257–259 start, end, and revert effects, 263 zindex option, 263

drop-down menu, 277 droppables, 264–270 callbacks, 265–269 making, 264–265 overview, 264 Droppables object, 257 Droppables.add argument, 270 Droppables.add method, 264 duration argument, 222 dynamic content, Ajax, 62–74, 89

■ E

each function, 34 each loop, 35 each method, 33

_each method, 47

edit mode, 288

editor_field class, 291

effect callbacks, 241

effect queues, 241

Effect.Appear, 237–238

Effect.Base class, 242, 297

Effect.BlindDown, 238–239

Effect.BlindUp, 238–239

Effect.Fade, 237–238

Effect.Highlight, 233–234, 253, 290

Effect.Morph, 221–226

function of, 222–223

morphing in parallel, 224–226

overview, 221–222

Effect.Move, 228

effects, script.aculo.us, 215–255

adding styles, 247–248

asynchronous, 240–244

callbacks, 241–242

overview, 240–241

queues, 243–244

basics of, 217–220

bringing in help, 248–249

combination effects, 236–240

Effect.BlindUp and

Effect.BlindDown, 238–239

Effect.Fade and Effect.Appear,

237–238

Effect.SlideUp and Effect.SlideDown,

239–240

overview, 236–237

defined, 215

Effect.Highlight, 233–234

Effect.Morph, 221–226

function of, 222–223

morphing in parallel, 224–226

overview, 221–222

Effect.Move, 228

Effect.Scale, 230–233

Effect.ScrollTo, 235

overview, 215–220

reasons for use of, 215–216

writing markup, 244–247

Effect.Scale, 230–233

Effect.ScrollTo, 235

effects.js file, 210, 212

Effect.SlideDown, 239–240 Effect.SlideUp, 239–240 Element constructor, 132, 135 Element object, 21

Element#addClassName class, 226 Element#addClassName method, 118 Element#down element, 134

Element#getStyle method, 119 Element#hide control element, 115 Element#identify method, 303 Element#insert method, 124, 133, 170 Element#morph class, 222

Element#readAttribute method, 126, 186 Element#remove method, 125

Element#removeClassName method, 118 Element#replace method, 123

Element#scrollTo function, 235 Element#select class, 152 Element#select method, 136 Element#setStyle class, 221–222, 226 Element#setStyle method, 119, 128, 175 Element#show control element, 115 Element#toggle method, 116 Element#update method, 122, 134, 136, 170

Element#wrap method, 135 Element#writeAttribute method, 126, 134 Element.extend method, 134

Element.extend object, 21 Element.getStyle property, 199 Element.remove object, 19 element.style attribute, 268 empty method, 176 empty text boxes, 107 end effect, 263 end value, 244 endcolor parameter, 234 endsWith method, 176 enhancements, 209 enumerable methods, 34–36, 43, 298 Enumerable#detect method, 35 Enumerable#each method, 34–35 Enumerable#inject method, 38–39 Enumerable#invoke method, 40 Enumerable#map method, 38–39 Enumerable#max method, 37 Enumerable#min method, 37

Enumerable#partition method, 36

Enumerable#pluck method, 40

Enumerable#reject method, 36

Enumerable#select method, 36

Enumerable#sortBy method, 37–38

on hash construct, 44–45

source code, 46–48

error handling, 67–73

escapeHTML method, 170–174

eval function, 182

event argument, 99

Event handlers, 92

event object, 93

Event#element method, 104

Event#preventDefault, 99–101

Event#stop, 99–101

Event#stopPropagation, 99–101

event-driven architecture, 108

Event.observe event, 111

event.preventDefault call, 103

events, 91–111

browsers, 91–94

custom, 108–111

Event#preventDefault, 99–101

Event#stop, 99–101

Event#stopPropagation, 99–101

and forms, 102–108

overview, 91–98

expanded state, 117

exponential decay, 62

■ F

fantasy football example, 74–89

Ajax call, 87–89

broadcasting scores, 109–110

code, 80–86

data, 78–80

league, 75–76

listening for scores, 110–111

mocking, 78

overview, 74–75

scoring, 76

stats, 76–77

testing, 86

finishOn option, 242

Firebug, 9, 14

Firebug console, 146 Firefox browser, 9, 308–309 flexible syntax, 8

Foo class, 299–300 food_type parameter, 68 food_type text box, 105 Foo.DEFAULT_OPTIONS property, 300 _fooInstance property, 302

footer cell, 156 for attribute, 127 for loops, 31–32, 34, 47 for.in loop, 24, 42 form element, 107 form parent node, 291 formatting blocks with inline elements, 195–196

Form.getInputs method, 107 forms, and events, 102–108 frequency option, 286 frequency parameter, 60 from method, 33 front option, 244 function literals, 8 function operator, 185 Function#bind, 164–165 Function#curry class, 159–161, 163 Function#defer, 161–163

Function#delay class, 161–163, 219 functional programming, 32–33 functions, 7–8

■ G

game.html file, 244, 247–248 GET method, 62

getAttribute method, 126–127 getStyle method, 119–120 ghosting option, draggables, 262–263 gsub method, 167–169

■ H

h2s, 61 handle element, 293 handle option, 260 hasClassName method, 117–119