Practical JavaScript DOM Scripting and Ajax

Projects 1st Edition Frank Zammetti download

https://ebookultra.com/download/practical-javascript-dom-
scripting-and-ajax-projects-1st-edition-frank-zammetti/

Explore and download more ebooks or textbooks

at ebookultra.com
 We believe these products will be a great fit for you. Click
the link to download now, or visit ebookultra.com
to discover even more!

DOM Scripting Web Design with JavaScript and the Document

Object Model 2nd Edition Jeremy Keith

https://ebookultra.com/download/dom-scripting-web-design-with-
javascript-and-the-document-object-model-2nd-edition-jeremy-keith/

DOM Scripting Web Design with JavaScript and the Document

Object Model Second Edition Jeremy Keith

https://ebookultra.com/download/dom-scripting-web-design-with-
javascript-and-the-document-object-model-second-edition-jeremy-keith/

Learn JavaScript and Ajax with w3Schools 1st Edition

W3Schools

https://ebookultra.com/download/learn-javascript-and-ajax-
with-w3schools-1st-edition-w3schools/

Zk Ajax without Javascript Framework 1st Edition Henri

Chen

https://ebookultra.com/download/zk-ajax-without-javascript-
framework-1st-edition-henri-chen/
JavaScript Ajax for Dummies 1. Edition Andy Harris

https://ebookultra.com/download/javascript-ajax-for-dummies-1-edition-
andy-harris/

Scripting in Java Integrating with Groovy and JavaScript

1st Edition Kishori Sharan

https://ebookultra.com/download/scripting-in-java-integrating-with-
groovy-and-javascript-1st-edition-kishori-sharan/

DHTML Utopia Modern Web Design Using JavaScript DOM 1st

edition Edition Stuart Langridge

https://ebookultra.com/download/dhtml-utopia-modern-web-design-using-
javascript-dom-1st-edition-edition-stuart-langridge/

AJAX Creating Web Pages with Asynchronous JavaScript and

XML 1st Edition Edmond Woychowsky

https://ebookultra.com/download/ajax-creating-web-pages-with-
asynchronous-javascript-and-xml-1st-edition-edmond-woychowsky/

MooTools Essentials The Official MooTools Reference for

JavaScript and Ajax Development 1st Edition Aaron Newton

https://ebookultra.com/download/mootools-essentials-the-official-
mootools-reference-for-javascript-and-ajax-development-1st-edition-
aaron-newton/
Practical JavaScript DOM Scripting and Ajax Projects
1st Edition Frank Zammetti Digital Instant Download
Author(s): Frank Zammetti
ISBN(s): 9781590598160, 1590598164
Edition: 1
File Details: PDF, 6.20 MB
Year: 2007
Language: english
Practical JavaScript™,
DOM Scripting, and
Ajax Projects

■■■

Frank W. Zammetti
Practical JavaScript™, DOM Scripting, and Ajax Projects
Copyright © 2007 by Frank W. Zammetti
All rights reserved. No part of this work may be reproduced or transmitted in any form or by any means,
electronic or mechanical, including photocopying, recording, or by any information storage or retrieval
system, without the prior written permission of the copyright owner and the publisher.
ISBN-13 (pbk): 978-1-59059-816-0
ISBN-10 (pbk): 1-59059-816-4
Printed and bound in the United States of America 9 8 7 6 5 4 3 2 1
Trademarked names may appear in this book. Rather than use a trademark symbol with every occurrence
of a trademarked name, we use the names only in an editorial fashion and to the benefit of the trademark
owner, with no intention of infringement of the trademark.
Java and all Java-based marks are trademarks or registered trademarks of Sun Microsystems, Inc., in the
United States and other countries. Apress, Inc., is not affiliated with Sun Microsystems, Inc., and this book
was written without endorsement from Sun Microsystems, Inc.
Lead Editor: Matthew Moodie
Technical Reviewer: Herman van Rosmalen
Editorial Board: Steve Anglin, Ewan Buckingham, Gary Cornell, Jason Gilmore, Jonathan Gennick,
Jonathan Hassell, James Huddleston, Chris Mills, Matthew Moodie, Jeff Pepper, Paul Sarknas, Dominic
Shakeshaft, Jim Sumser, Matt Wade
Project Manager: Tracy Brown Collins
Copy Edit Manager: Nicole Flores
Copy Editor: Marilyn Smith
Assistant Production Director: Kari Brooks-Copony
Production Editor: Laura Esterman
Compositor: Susan Glinert
Proofreaders: Lori Bring and April Eddy
Indexer: Broccoli Information Management
Cover Designer: Kurt Krames
Manufacturing Director: Tom Debolski
Distributed to the book trade worldwide by Springer-Verlag New York, Inc., 233 Spring Street, 6th Floor,
New York, NY 10013. Phone 1-800-SPRINGER, fax 201-348-4505, e-mail orders-ny@springer-sbm.com, or
visit http://www.springeronline.com.
For information on translations, please contact Apress directly at 2560 Ninth Street, Suite 219, Berkeley, CA
94710. Phone 510-549-5930, fax 510-549-5939, e-mail info@apress.com, or visit http://www.apress.com.
The information in this book is distributed on an “as is” basis, without warranty. Although every precaution
has been taken in the preparation of this work, neither the author(s) nor Apress shall have any liability to
any person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly
by the information contained in this work.
The source code for this book is available to readers at http://www.apress.com in the Source Code/Download
section.
 Dedicated to all the animals I’ve eaten over the years, without whom I
most certainly would have died a long time ago due to starvation. Well, I suppose
I could have been a vegan, but then I’d have to dedicate this to all the plants
I’ve eaten, and that would just be silly because very few plants can read.

To all my childhood friends who provided me with cool stories to tell: Joe, Thad,
Meenie, Kenny, Franny, Tubby, Stubby, Kenway, JD, dVoot, Corey, and Francine.

To Denny Crane, for raising awareness of Mad Cow disease.

Hmm, who am I forgetting? Oh yeah, and to my wife and kids.

You guys make life worth living.
Contents at a Glance

About the Author . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv

About the Technical Reviewer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii
About the Illustrator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix
Acknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxi
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxiii

PART 1 ■■■ Say Hello to My Little Friend:

JavaScript!
■CHAPTER 1 A Brief History of JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
■CHAPTER 2 The Seven Habits of Highly Successful
JavaScript Developers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

PART 2 ■■■ The Projects

■CHAPTER 3 Hodgepodge: Building an Extensible JavaScript Library . . . . . . . . 71
■CHAPTER 4 CalcTron 3000: A JavaScript Calculator . . . . . . . . . . . . . . . . . . . . . . 107
■CHAPTER 5 Doing the Monster Mash: A Mashup . . . . . . . . . . . . . . . . . . . . . . . . . 147
■CHAPTER 6 Don’t Just Live in the Moment: Client-Side Persistence . . . . . . . 185
■CHAPTER 7 JSDigester: Taking the Pain Out of Client-Side XML . . . . . . . . . . . 231
■CHAPTER 8 Get It Right, Bub: A JavaScript Validation Framework . . . . . . . . . 261
■CHAPTER 9 Widget Mania: Using a GUI Widget Framework . . . . . . . . . . . . . . . 305
■CHAPTER 10 Shopping in Style: A Drag-and-Drop Shopping Cart . . . . . . . . . . . 351
■CHAPTER 11 Time for a Break: A JavaScript Game . . . . . . . . . . . . . . . . . . . . . . . . 403
■CHAPTER 12 Ajax: Where the Client and Server Collide . . . . . . . . . . . . . . . . . . . . 465

■INDEX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 525

v
Contents

About the Author . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv

About the Technical Reviewer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii
About the Illustrator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix
Acknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxi
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxiii

PART 1 ■■■ Say Hello to My Little Friend:

JavaScript!
■CHAPTER 1 A Brief History of JavaScript ..............................3

How JavaScript Came to Exist . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

The Evolution of JavaScript: Teething Pains . . . . . . . . . . . . . . . . . . . . . . . . 6
But It’s the Same Code: Browser Incompatibilities . . . . . . . . . . . . . . . 6
Of Snails and Elephants: JavaScript Performance and
Memory Issues . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
The Root of All Evil: Developers! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
DHTML—The Devil’s Buzzword . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
The Evolution Continues: Approaching Usability . . . . . . . . . . . . . . . . . . . . 18
Building a Better Widget: Code Structure . . . . . . . . . . . . . . . . . . . . . 19
Relearning Good Habits . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
The Final Evolution: Professional JavaScript at Last! . . . . . . . . . . . . . . . . 21
The Browsers Come Around . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Object-Oriented JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
“Responsible” JavaScript: Signs and Portents . . . . . . . . . . . . . . . . . 26
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

vii
viii ■C O N T E N T S

■CHAPTER 2 The Seven Habits of Highly Successful

JavaScript Developers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
More on Object-Oriented JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Simple Object Creation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Object Creation with JSON . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Class Definition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
Prototypes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Which Approach Should You Use? . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Benefits of Object-Orientation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Graceful Degradation and Unobtrusive JavaScript . . . . . . . . . . . . . . . . . . 35
Keep JavaScript Separate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Allow Graceful Degradation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Don’t Use Browser-Sniffing Routines . . . . . . . . . . . . . . . . . . . . . . . . . 39
Don’t Create Browser-Specific or Dialect-Specific JavaScript . . . . 40
Properly Scope Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Don’t Use Mouse Events to Trigger Required Events . . . . . . . . . . . . 41
It’s Not All Just for Show: Accessibility Concerns . . . . . . . . . . . . . . . . . . . 42
When Life Gives You Grapes, Make Wine: Error Handling . . . . . . . . . . . . 43
When It Doesn’t Go Quite Right: Debugging Techniques . . . . . . . . . . . . . 46
Browser Extensions That Make Life Better . . . . . . . . . . . . . . . . . . . . . . . . 49
Firefox Extensions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
IE Extensions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Maxthon Extension: DevArt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
JavaScript Libraries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
Prototype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Dojo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Java Web Parts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
Script.aculo.us . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
Yahoo! User Interface Library . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
MochiKit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Rico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
Mootools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
 ■C O N T E N T S ix

PART 2 ■■■ The Projects

■CHAPTER 3 Hodgepodge: Building an Extensible
JavaScript Library . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Bill the n00b Starts the Day . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Overall Code Organization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Creating the Packages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Building the jscript.array Package . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Building the jscript.browser Package . . . . . . . . . . . . . . . . . . . . . . . . . 78
Building the jscript.datetime Package . . . . . . . . . . . . . . . . . . . . . . . . 78
Building the jscript.debug Package . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Building the jscript.dom Package . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
Building the jscript.form Package . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
Building the jscript.lang Package . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
Building the jscript.math Package . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
Building the jscript.page Package . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
Building the jscript.storage Package . . . . . . . . . . . . . . . . . . . . . . . . . 94
Building the jscript.string Package . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Testing All the Pieces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
Suggested Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105

■CHAPTER 4 CalcTron 3000: A JavaScript Calculator . . . . . . . . . . . . . . . . . 107

Calculator Project Requirements and Goals . . . . . . . . . . . . . . . . . . . . . . . 107
A Preview of CalcTron . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
Rico Features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
Dissecting the CalcTron Solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
Writing calctron.htm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
Writing styles.css . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
Writing CalcTron.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Writing Classloader.htm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
Writing Mode.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
Writing Standard.json and Standard.js . . . . . . . . . . . . . . . . . . . . . . . 131
Writing BaseCalc.json and BaseCalc.js . . . . . . . . . . . . . . . . . . . . . . 140
Suggested Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
x ■C O N T E N T S

■CHAPTER 5 Doing the Monster Mash: A Mashup . . . . . . . . . . . . . . . . . . . . 147

What’s a Mashup? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
Monster Mash(up) Requirements and Goals . . . . . . . . . . . . . . . . . . . . . . 148
The Yahoo APIs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
Yahoo Maps Map Image Service . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
Yahoo Registration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
The Google APIs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
Script.aculo.us Effects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
A Preview of the Monster Mash(up) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
Dissecting the Monster Mash(up) Solution . . . . . . . . . . . . . . . . . . . . . . . 161
Writing styles.css . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162
Writing mashup.htm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
Writing ApplicationState.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168
Writing Hotel.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169
Writing SearchFuncs.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170
Writing Masher.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173
Writing CallbackFuncs.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176
Writing MapFuncs.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
Writing MiscFuncs.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
Suggested Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183

■CHAPTER 6 Don’t Just Live in the Moment:

Client-Side Persistence . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
Contact Manager Requirements and Goals . . . . . . . . . . . . . . . . . . . . . . . 185
Dojo Features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
Dojo and Cookies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188
Dojo Widgets and Event System . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
Local Shared Objects and the Dojo Storage System . . . . . . . . . . . 190
A Preview of the Contact Manager . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192
Dissecting the Contact Manager Solution . . . . . . . . . . . . . . . . . . . . . . . . 194
Writing styles.css . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196
Writing dojoStyles.css . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199
Writing index.htm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199
Writing goodbye.htm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207
Writing EventHandlers.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208
Writing Contact.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212
Writing ContactManager.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
Writing DataManager.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223
 ■C O N T E N T S xi

Suggested Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229

Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229

■CHAPTER 7 JSDigester: Taking the Pain Out of Client-Side XML . . . . 231

Parsing XML in JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231

JSDigester Requirements and Goals . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234
How Digester Works . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234
Dissecting the JSDigester Solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237
Writing the Test Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
Understanding the Overall JSDigester Flow . . . . . . . . . . . . . . . . . . 244
Writing the JSDigester Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246
Writing the Rules Classes Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253
Suggested Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259

■CHAPTER 8 Get It Right, Bub: A JavaScript

Validation Framework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261
JSValidator Requirements and Goals . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261
How We Will Pull It Off . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262
The Prototype Library . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263
A Preview of JSValidator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
Dissecting the JSValidator Solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268
Writing index.htm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269
Writing styles.css . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270
Writing jsv_config.xml . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271
Writing JSValidatorObjects.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274
Writing JSValidator.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287
Writing JSValidatorBasicValidators.js . . . . . . . . . . . . . . . . . . . . . . . . 297
Writing DateValidator.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301
Suggested Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303

■CHAPTER 9 Widget Mania: Using a GUI Widget Framework . . . . . . . . . 305

JSNotes Requirements and Goals . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305

The YUI Library . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 306
A Preview of JSNotes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307
xii ■C O N T E N T S

Dissecting the JSNotes Solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310

Writing index.htm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311
Writing styles.css . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313
Writing Note.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317
Writing JSNotes.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 318
Suggested Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349

■CHAPTER 10 Shopping in Style: A Drag-and-Drop Shopping Cart . . . . 351

Shopping Cart Requirements and Goals . . . . . . . . . . . . . . . . . . . . . . . . . 351
Graceful Degradation, or Working in the Stone Age . . . . . . . . . . . . . . . . 352
The MochiKit Library . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 355
The Mock Server Technique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 357
A Preview of the Shopping Cart Application . . . . . . . . . . . . . . . . . . . . . . 359
Dissecting the Shopping Cart Solution . . . . . . . . . . . . . . . . . . . . . . . . . . . 363
Writing styles.css . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365
Writing index.htm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 367
Writing main.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 370
Writing idX.htm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373
Writing CatalogItem.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375
Writing Catalog.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 380
Writing CartItem.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 382
Writing Cart.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 385
Writing viewCart.htm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 392
Writing checkout.htm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 396
Writing mockServer.htm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 398
Suggested Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 401
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 401

■CHAPTER 11 Time for a Break: A JavaScript Game . . . . . . . . . . . . . . . . . . . 403

K&G Arcade Requirements and Goals . . . . . . . . . . . . . . . . . . . . . . . . . . . 403
A Preview of the K&G Arcade . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 405
Dissecting the K&G Arcade Solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 408
Writing index.htm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 409
Writing styles.css . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 413
Writing GameState.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 415
Writing globals.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417
 ■C O N T E N T S xiii

Writing main.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417

Writing consoleFuncs.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 424
Writing keyHandlers.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 428
Writing gameFuncs.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 432
Writing MiniGame.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 435
Writing Title.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 435
Writing GameSelection.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 437
Writing CosmicSquirrel.js. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 440
Writing Deathtrap.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 448
Writing Refluxive.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 456
Suggested Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 462
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 463

■CHAPTER 12 Ajax: Where the Client and Server Collide . . . . . . . . . . . . . . 465

Chat System Requirements and Goals . . . . . . . . . . . . . . . . . . . . . . . . . . . 465
The “Classic” Web Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 466
Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 469
The Ajax Frame of Mind . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 470
Accessibility and Similar Concerns . . . . . . . . . . . . . . . . . . . . . . . . . . 472
Ajax: A Paradigm Shift for Many . . . . . . . . . . . . . . . . . . . . . . . . . . . . 473
The “Hello World” of Ajax Examples. . . . . . . . . . . . . . . . . . . . . . . . . 474
JSON . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 481
Mootools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 483
A Preview of the Chat Application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 484
Dissecting the Chat Solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 486
Writing SupportChat.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 488
Writing ChatMessage.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 497
Writing styles.css . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 500
Writing index.htm and index_support.htm. . . . . . . . . . . . . . . . . . . . 501
Writing chat.htm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 503
Writing goodbye.htm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 508
Creating the Database . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 508
Writing the Server Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 509
Suggested Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 523
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 523

■INDEX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 525
About the Author

■FRANK W. ZAMMETTI is a web architect specialist for a leading worldwide financial company by
day, and a PocketPC and open source developer by night. He is the founder and chief software
architect of Omnytex Technologies, a PocketPC development house.
Frank has more than 13 years of “professional” experience in the IT field, and over 12 more
of “amateur” experience. He began his nearly lifelong love of computers at age 7, when he became
one of four students chosen to take part in the school district’s pilot computer program. A year
later, he was the only participant left! The first computer Frank owned was a Timex Sinclair 1000,
in 1982, on which he wrote a program to look up movie times for all of Long Island (and without
the 16kb expansion module!). After that, he moved on to an Atari computer, and then a
Commodore 64, where he spent about four years doing nothing but assembly programming
(games mostly). He finally got his first IBM-compatible PC in 1987, and began learning the finer
points of programming (as they existed at that time!).
Frank has primarily developed web-based applications for about eight years. Before that,
he developed Windows-based client/server applications in a variety of languages. Frank holds
numerous certifications, including SCJP, MCSD, CNA, i-Net+, A+, CIW Associate, MCP, and
numerous BrainBench certifications. He is a contributor to a number of open source projects,
including DataVision, Struts, PocketFrog, and Jakarta Commons. In addition, Frank has started
two projects: Java Web Parts and The Struts Web Services Enablement Project. He also was one
of the founding members of a project that created the first fully functioning Commodore 64
emulator for PocketPC devices (PocketHobbit).
Frank has authored various articles on topics that range from integrating DataVision into
web applications to using Ajax in Struts-based applications, as well as a book on Ajax for Apress.
He is currently working on a new application framework specifically geared to creating next-
generation web applications.
Frank lives in the United States with his wife Traci, his two kids Andrew and Ashley, and his
dog Belle. And an assortment of voices in his head, but the pills are supposed to stop that.

xv
About the Technical Reviewer

■HERMAN VAN ROSMALEN works as a developer/software architect for De Nederlandsche Bank N.V.,
the central bank of the Netherlands. He has more than 20 years of experience in developing
software applications in a variety of programming languages. Herman has been involved in
building mainframe, PC, and client/server applications. For the past six years, however, he has
been involved mainly in building J2EE web-based applications. After working with Struts
(pre-1.0) for years, he got interested in Ajax and joined the Java Web Parts open source project
in 2005.
Herman lives in a small town, Pijnacker, in the Netherlands, with his wife Liesbeth and
their children, Barbara, Leonie, and Ramon.

xvii
About the Illustrator

■ANTHONY VOLPE did the illustrations for this book and the K&G Arcade game. He has worked on
several video games with author Frank Zammetti, including Invasion Trivia!, Io Lander, and
Ajax Warrior. Anthony lives in Collegeville, Pennsylvania, and works as a graphic designer and
front-end web developer. His hobbies include recording music, writing fiction, making video
games, and going to karaoke bars to make a spectacle of himself.

xix
Random documents with unrelated
content Scribd suggests to you:
IV. The Money in this Office is not intended for business
purposes—by no means—it is solely to lend. Please
note this.
V. A Supply of Cash is always provided to Cash Cheques for
all comers, and relieve Bank Clerks of their legitimate
duties. Stamped cheque forms given gratis.
VI. Talk loud and whistle, especially when we are engaged;
if this has not the desired effect, sing.
VII. The Clerks receive visits from their friends and their
relatives; please don’t interrupt them with business
matters when so engaged.
VIII. Gentlemen will please examine our letters, and jot
down the Names and Addresses of our Customers,
particularly if they are in the same profession.
IX. As we are always glad to see old friends, it will be
particularly refreshing to receive visits and renewal of
orders from any former Customer who has passed
through the Bankruptcy Court, and paid us not more
than Sixpence in the Pound. A Warm welcome may be
relied on.
X. Having no occupation for our Office Boy, he is entirely at
the service of callers.
XI. Our Telephone is always at the disposal of anyone
desirous of using it.
XII. The following are kept at this Office for Public
Convenience:—
A Stock of Umbrellas (silk), all the Local Newspapers,
Railway Time Tables, and other Guides and Directories;
also a supply of Note Paper, Envelopes, and Stamps.
XIII. Should you find our principals engaged, do not hesitate
to interrupt them. No business can possibly be of
greater importance than yours.
 XIV. If you have the opportunity of overhearing any
conversation, do not hesitate to listen. You may gain
information which may be useful in the event of
disputes arising.
XV. In case you wish to inspect our premises, kindly do so
during wet weather, and carry your umbrella with you.
We admire the effect on the floor; it gives an air of
comfort to the establishment. (The Umbrella Stand is
only for ornament, and on no account to be used).
P.S.—Our hours for listening to Commercial Travellers, Beggars,
Hawkers, and Advertising Men are all day. We attend to our Business
at Night only.

A NEW WAY OF PUTTING IT.

“Dirty days hath September,
April, June and November;
From January up to May,
The rain it raineth every day.
All the rest have thirty-one,
Without a blessed gleam of sun;
And if any of them had two and thirty,
They’d be just as wet and twice as dirty.”

Does the top of a carriage wheel move faster than the bottom?
This question seems absurd. That the top moves faster, however, is
perfectly correct; for if not it would simply move round in the same
place: in a wheel on a fixed axle the bottom moves backward as fast
as the top moves forward; but in a wheel that is going forward,
drawn by a progressive axle, the bottom does not go back at all, but
remains almost stationary until it is its turn to rise and go forward.
 37. A General, arranging his army in a solid square, finds he has
284 men to spare, but on increasing the sides of the square by one
man, he wants 25 men to complete the square. How many men has
he?

“STEWING.”
38. A student reads two lines more of “Virgil” each day than he
did the day before, and finds that, having read a certain quantity in
18 days, he will read at this rate the same quantity in the next 14
days. How much will he read in the whole time?

39. Two bootmakers who lived in the town of B., thrown out of
employment, resolved to go to G., a town 24 miles north from B.,
where there is a large factory; one of them went straight on to G.,
but the other went first to C., a small township west of B., and then
went direct to G., his whole journey being 45 miles. What is the
distance from C. to G.?

40. A tree which grows each year 1 inch less than the previous
year, grew a yard in the first year; the value of the tree at any time
is equal to the number of pence in the cube of the number of yards
of its height. What is the value of the tree when done growing?

THIS OFTEN “STICKS” PEOPLE UP.

41. What two odd numbers multiplied together make 7?

MAGIC SQUARES.
A Magic Square is a series of figures arranged in the equal
divisions of a square in such a manner that the figures in each row
when added up, whether horizontally, vertically, or diagonally, form
exactly the same sum.
They have been called
“Magic” because the ancients
ascribed to them great virtues,
and because this arrangement
of numbers formed the basis
and principle of their talismans.
Archimedes devoted a great
amount of attention to them,
which has caused a great many
to speak of them as “the
squares of Archimedes.” They
may be either odd or even.
When the former, the following
method will be found valuable:—
With the digits from 1 to 25 form a square so that the numbers
when added up horizontally, vertically, or diagonally will amount to
65.
Method.—Imagine an exterior line of squares above the magic
square you wish to form, and another on the right hand of it. These
two imaginary lines are shown in the diagram.
1st. In placing the numbers in the square, we must go in the
ascending diagonal direction from left to right, any number which,
by pursuing this direction, would fall into the exterior line must be
carried along that line of squares, whether vertical or horizontal, to
the last square. Thus, 1 having been placed in the centre of the top
row, 2 would fall into the exterior square above the fourth vertical
line; then ascending diagonally 3 falls into the square diagonally
from 2, but 4 falls out of it to the end of a horizontal line, and it
must be carried along that line to the extreme left and there placed.
Resuming our diagonal ascension to the right we place 5 where the
reader sees it, and would place 6 in the middle of the top row, but
as we find 1 is already there we look for the direction to
 2nd. That when in ascending diagonally we come to a square
already occupied, we must place the number which, according to the
1st rule should go into that occupied square directly under the last
number placed: thus, in ascending with 4, 5, 6, the 6 must be placed
under the 5, because the square next to 5 in diagonal direction is
occupied.

A Promising Sign—I O U.

HOW TO FIND THE TOTAL OF A ROW OF

FIGURES IN A MAGIC SQUARE.
Rule.—Multiply half the sum of the extremes by the square root
of the greatest extreme.
Referring to the example given above, we see that the extremes
1 and 25 added equal 26—half of which is 13; this multiplied by 5
(the square root of 25) gives 65 as the total for each row.
Again, in the next question, the two extremes 1 and 81 equal 82,
half of this sum is 41, which multiplied by 9 (the square root of 81)
gives 369 as the total for each row.

42. Arrange the figures from 1 to 81 in a square that when added

up horizontally, vertically, or diagonally the sum will be 369.

HOW THEY WORKED IT.

Mick and Pat, working in the country some distance from a hotel,
arranged with the landlord to take to their hut a small keg of rum.
They were unable to pay for the liquor at the time, having only one
threepenny piece between them; but Mick proposed that every time
he had a drink he would give Pat threepence, and Pat also agreed to
pay Mick for his drinks, the cash thus gathered to be brought to the
publican when the keg was empty. This proposal was accepted by
the publican, the keg of rum handed over to the two Irishmen, who
immediately started on their journey. They had not proceeded very
far before their burden made them thirsty. Mick is the first to pull up
with: “Hold on, Pat, I think I’ll have a drink.” “Begorra,” replied Pat,
“you’ll have to pay me for it then.” Mick hands the 3d. to Pat before
having a good “pull.” Pat now being the possessor of the price of a
drink, slakes his thirst by paying Mick 3d. for it. This form of
payment is kept up till the rum has disappeared. On their next visit
to the hotel, the 3d piece is handed to the landlord as being
payment, according to terms of agreement adopted by him.

43. Arrange the figure’s from 1 to 9 in a square, so that they will

add up to 15, horizontally, vertically, or diagonally.

44.

45. A man sold a horse for £35 and half as much as he gave for
it, and gained thereby 10 guineas. What did he pay for the horse?

THE DISHONEST SERVANT.

46. A gentleman having bought 28 bottles of wine, and
suspecting his servant of tampering with the contents of the wine
cellar, caused these bottles to be arranged in a bin in such a way as
to count 9 bottles on each side. Nothwithstanding this precaution,
the servant in two successive visits stole 8 bottles—4 each time—re-
arranging the bottles each time so that they
still counted 9 on a side. How did he do it?

Father—“You are very backward in your

arithmetic. When I was your age I was
doing cube roots.”
Boy—“What’s them?”
Father—“What! You don’t know what
they are? My! my! that’s terrible! There,
give me your pencil. Now, we take, say, 28764289, and find the
cube root. First, you divide—no, you point off—no—let me see?—um
—yes—no—don’t stand there grinning like a Cheshire cat; go
upstairs and stay in your bedroom for an hour.”

A “TAKE-DOWN” WITH CARDS.

This is a card trick which depends upon a certain “key,” the
possessor of which will always have the advantage over his
uninstructed adversary. It is played with the first six of each suit—
the four aces in one row, next row the deuces, threes, fours, fives
and sixes. The object now will be to turn down cards alternately, and
endeavour to make thirty-one points by so turning without over-
running that number. The chief point is to count so as to end with
the following numbers: 3, 10, 17 or 24.
For instance, we will suppose it your privilege to commence the
count; you would commence with 3, and your adversary would add
6, which would make 9; it would be then your policy to add 1 and
make 10; then, no matter what number he adds he cannot prevent
you making 17, which gives you the command of the trick. We will
suppose he adds 6 and make 16; then you add 1 and make 17; then
he to add 6 and make 23, you add 1 and make 24; then he cannot
add any number to make 31, as the highest number he can add is 6,
which would only count 30, so that you can easily add the remaining
1 and make 31.
If your adversary is not wary, you may safely turn indifferent
numbers at the beginning, trusting to his ignorance to let you count
17 or 24; but, as his knowledge increases, he will soon learn that 24
is a critical number, and to play for it accordingly.
If both players know the trick, the first to play must be the
winner, as he is sure to begin with a 3, which commands the game.

ON AN OFFICE DOOR IN GOULBURN.

A baptism in Hades’ depths,
As hot as boiling tar,
Awaits the man who quits this room
And leaves the door ajar.
But he who softly shuts the door
Shall dwell among the blest—
Where the wicked cease from troubling
And the weary are at rest.

47. There are 5 eggs on a dish; divide them amongst 5 persons

so that each will get 1 egg and yet 1 still remain on the dish.

48. If a goose weighs 10 lbs. and a half of its own weight, what
is the weight of the goose?

THE GEOMETRICAL WONDER AND ARITHMETICAL ABSURDITY.

Take a piece of cardboard 13 inches long and 5 wide, thus giving
a surface of 65 inches. Cut this strip diagonally, giving two pieces in
the shape of a triangle, and measure exactly 5 inches from the
larger end of each strip and cut in two pieces. Take these strips and
put them into the shape of an
exact square, and it will appear
to be just 8 inches each way, or
64 inches—a loss of one square
inch of superficial measurement
with no diminution of surface.

5 × 13 = 65 square inches.

49. If we buy 20 sheep for 20 shillings, and give 2s. for wethers,
1s. 6d. for ewes, and 4d. for lambs, how many of each must we
buy?

50. A sets out from a place and travels 5 miles an hour. B sets
out 4½ hours after A and travels in the same direction 3 miles in the
first hour, 3½ miles the second hour, 4 miles the third hour, and so
on. In how many hours will B overtake A?

OFTEN ASKED.
51. What is the difference between 4 square miles and 4 miles
square?

TO TELL THE NUMBER THOUGHT OF ON A CLOCK.

Ask a person to think of any number on the dial of a clock; you
then point, promiscuously at the various numbers, telling the person
to add the number of times you point to the number he thought of,
and when the total reaches 20, you will be pointing at the number
he selected.
For instance, suppose he selected the number 5. You point
indifferently 7 times at the various numbers, but the 8th time your
pointer must be at XII., his addition will
then be 13 (for 5 and 8 added equal 13),
the next at XI., his addition then 14, next at
X., and so on. When he calls 20, you will be
pointing at the number he thought of—5.

A very amusing experiment is to ask a

person to write down the figures around
the dial of a clock. Nearly all know that the
figures are generally the Roman numerals;
but, in writing them down, when they come to the four, it is very
often written IV. instead of IIII.
It is said that a certain king, being unable to find any other fault
in a clock that had been constructed for him, declared that the figure
four should be represented by four strokes (IIII) instead of IV. In
vain did the clock-maker point out the mistake, for his majesty
adhered obstinately to his own opinion, and angrily ordered the
alteration to be made. This was done, and the precedent thus
formed has been followed by clockmakers ever since.

52. At dinner table: one great grandfather, 2 grandfathers, 1

grandmother, 3 fathers, 2 mothers, 4 children, 3 grandchildren, 1
great grandchild, 3 sisters, 1 brother, 2 husbands, 2 wives, 1
mother-in-law, 1 father-in-law, 2 brothers-in-law, 3 sisters-in-law, 2
uncles, 3 aunts, 1 nephew, 2 nieces, and 2 cousins. How many
persons?
“Can February March?” he asked.
“No, but April May,” was the reply.
“Look here, old man, you are out of June.”
“Don’t July about it.”
“It is not often one gets the better of your August
personage.”
“Ha! now you have me Noctober.”
And then there was work for the coroner.

PANCAKE DAY.
53. On Shrove Tuesday last, I’ll tell you what
pass’d
In a neighbouring gentleman’s kitchen,
Where pancakes were making, with eggs, and with
bacon
As good as e’er cut off a flitchen.
The cook-maid she makes four lusty pancakes
For William her favourite gardener,
“Pray be quick with that four,” cries Jack, “and make
more,
For William won’t let me go partner.”
Being sparing of lard, the pan’s bottom she marr’d
In making the last of Will’s four;
So she said, “Pr’ythee, John, run and borrow a pan,
Or else I can’t make any more.”
Jack soon got a pan, but found by his span
That the first was more wide than the latter,
This being a foot o’er, whereas that before
Was three inches more and a quarter.
Jack cries, “Don’t me cozen, but make half a dozen.
For the pan is much less than before;”
Says Will, “For a crown (and I’ll put the cash down)
Your six will be more than my four.”
“Tis done,” says brisk Jack, and his crown he did
stake,
So both of them sent for a gauger;
The dimensions he takes, of all their pancakes,
To determine this important wager.
He found, by his stick, they were equally thick,
So one of Will’s cakes he did take,
Which he straight cut in twain, twelve one-fifth[1]
the chord line;
And gave the less piece unto Jack.
“To the best of my skill,” says the gauger, “this will
Make both of your shares equal and true;”
Will swore that he lied, so, the point to decide,
Will swore that he lied, so, the point to decide,
They refer themselves, sirs, unto you;
Then pray give your answers, as soon as you can,
sirs,
For what with their quarrels and jars,
We’re afraid of some murder, for no day goes over
But they fight, and are cover’d with scars!

[1] Inches.

A Great Prophet—100 per cent.

 Interesting Items About the
Almanac.
The reason why February has only 28 days, while the other
months have 30 and 31 is attributable to the vanity of the Emperor
Augustus. His uncle and predecessor corrected the calendar,
arranging the year almost as we have it now; he gave to the year 12
months, or 365¼ days. The months were—March (the first month),
April, May, June, Quintilis, Sextiles, September, October, November,
December, January, and February (the latter being the last month of
the year, which among the Romans had consisted originally of 10
months). Cæsar ordered that the year should begin with January,
and divided the days among them thus: January, March, May,
Quintilis, September, and November each had 31 days; April, June,
Sextiles, October and December had 30 days each; and February
(the last month added to the year) had 29 days regularly and a 30th
day every fourth year. After Julius Cæsar’s death, Mark Antony
changed the name of Quintilis to July as we have it now. Augustus
wanted a month for himself, and wanted it as long as his uncle’s
month, so he took Sextiles for his and changed the name to August.
Then he took February’s 29th day and added it to August, so that it
might have 31 days; and, to avoid having 3 months of 31 days each
in succession, September and November were reduced to 30 days,
and October and December increased to 31 days each.

Previous to the year 1752, the legal year in England commenced

on the 25th March. In that year it was enacted that the legal year
should begin on 1st January. The change brought the calendar into
unison with the actual state of the solar year. It is curious that in
Scotland the change which made the legal year begin on January 1st
was effected in 1600. For some time after the change in England,
legal documents contained two dates for the period intervening
between 1st January and 25th March—that of the old year and that
of the new.

During the time of Oliver Cromwell, Christmas Day was described

as a superstitious festival, and put down in England by the strong
hand of the law.

There has been a superstitious notion that Fools’ Day dated back
to the time of Noah’s Ark. The dove that was sent forth from the Ark
is supposed to have returned on April 1st.

The Most Remarkable Month was February, 1866. It had no full

moon. January had two full moons, and so had March, but February
had none. This had not occurred since the creation of the world, and
it will not occur again, so scientists tell us.

All Fools’ Day had it’s origin in France, before the time of the
Reformed Calendar. When the year commenced on March 25th, the
French frequently paid their New Year’s visits and bestowed their
gifts on April 1st, as March 25th occurred in Passion Week. After the
adoption of the new calendar, however, these New Year’s
observances took place on January 1st, and it was a common thing
for people to forget the change of date. Pretended presents and
mock ceremonial visits became common, and the persons thus
imposed on were known as April fish, i.e., a mackerel, which, like a
fool, is easily caught. Hence, All Fools’ Day.

54. Being at the summit of a tower 400 ft. high, I dropped a

cricket ball from my hand, causing it to alight on a ledge 260 ft. from
the base, over which it rolled and fell to the earth: supposing that
1½ seconds were occupied by the rolling of the ball over the ledge,
how many seconds elapsed from the ball leaving my hand till it
touched the earth, and what was the acquired velocity at the
moment of contact?

PRACTICAL ILLUSTRATION.
In one of our great public schools a
master known to successive generations of
his pupils for fifty years as “old Buggus”
delighted in surprising his boys with strange
sayings and doings. On one occasion,
desirous of illustrating a question in the
arithmetic lesson, he said to a boy, “I am a
tripe merchant, and this platform is my
shop. You will come here and buy a pound
of tripe. Now, begin.”
“Please, I want a pound of tripe,” said a boy, sauntering up.
“Where’s your money?” demanded old Buggus, hoping to put the
boy out of countenance.
“Where’s your tripe?” was the ready retort; but it gained for its
unfortunate author four hours’ detention on the next holiday.

55. A syphon would empty a cistern in 48 minutes, a tap would

fill it in 36. How long will it take to fill the cistern when both taps are
in action?

Born to rule—a book-keeper.

“MORE HASTE LESS SPEED.”

 56. A compositor, hurrying whilst setting up type for
an arithmetic book—“How to Become Quick at
Figures”—accidentally dropped the work of a problem;
unfortunately he mislaid the copy, and all that he
remembered was that both multiplicand and multiplier
consisted of two figures. The scattered type
represented the following figures:—1, 2, 3, 3, 4, 6, 7,
8, 8, 9, 9. With the aid of a pencil and a piece of paper
the compositor managed after a while to rearrange the
figures in their proper place. What was the problem?

PROFITABLE CARELESSNESS.
A very amusing story is told of a harness-maker who lived some
years ago in London. He had a handsome saddle in his shop,
occupying a conspicuous position therein. On his return from
luncheon one day he observed that the saddle was gone. Calling to
his foreman, he said:
“John, who has bought the saddle?”
“I’m sure I don’t know, sir,” said the foreman, scratching his head
as if he were trying to think. “I cannot tell, and the worst part of it
is, it hasn’t been paid for. While I was at work in the back of the
shop a gentleman came in, priced it, decided to take it, told me to
charge it, and throwing it into his trap, drove off, before I could think
to ask his name.”
“That was very stupid of you,” said the harness-maker, disposed
to be angry at the man’s carelessness. “Very likely we have been
robbed.”
“I don’t think that sir,” said the foreman, “for I’m very sure that
the gentleman has traded here before.”
“Well, I can’t afford to lose the money,” said the harness-maker.
“We’ll have to find out who took it and send him the bill. Ah!” he
added, with a smile, after a moment’s reflection, “I have it. We’ll
charge it up to the account of every one of our customers who keep
open accounts here. Those who didn’t get it will refuse to pay, so we
shall be all right.”
“The book-keeper was instructed to do this, and the bills in due
course of time went out. Some weeks later the harness-maker asked
the book-keeper if he had succeeded in discovering who the
customer was.
“No, sir,” he replied, “and we never shall, I fear, sir, for about 40
people have paid for it already without saying a word.”

A CYCLE CATCH.
Tie a cord to the pedal of a bicycle, such
pedal to be the one that is the nearer to the
ground, and, standing behind the back
wheel, pull the cord, when, strange as it
appears, the machine will come towards
you, although everyone would first imagine
that the bicycle would move forward. How
is this?

One ought to have dates at one’s finger ends seeing they grow
upon the palms.

TO TELL THE SPOTS ON THE

BOTTOM CARDS OF SIX HEAPS.
Allow anyone to choose six cards from a full pack. Tell him the
court cards count 10, and the other cards according to their pips.
Having made his selection, tell him to lay the chosen cards upon the
table face downwards, without allowing you to see them, and to
place upon each as many cards as pips are required to make 12.
Whilst he is doing so, you should be out of the room or blindfolded.
On your return he hands you the cards left over, and you have to tell
the total number of spots on the six bottom cards.
Suppose he had chosen 10, 6, 1, K, 3 and 7, which totals 37, now
on the 10, he would place two cards to make 12; on the 6, he would
place 6; and on the 1, 11 would be placed, and so on. On receiving
the remaining cards from him you pretend to be looking through
them carefully, but you simply want to know how many he has given
you, which in the above example would be 11. To this number you
add 26, which gives 37, the total spots required.
Should there not be enough cards left on hand to complete the
six heaps, you can ask him how many cards he is short of, and this
number, subtracted from 25, will give the total. It is better not to
allow the person to choose six cards right off at the beginning, but
for him to shuffle and cut the pack as he pleases, and to take the
cards as they come.

BOOK-KEEPING COMMANDMENTS.
By Ledger laws, what I receive Is Debtor made to those who
give. Stock for my debts must Debtor be, and Creditor by Property.
Profit and Loss accounts are plain, I Debit loss and Credit gain.

57. How far does a man walk while planting a field of corn 285
feet square, the rows being 3 ft apart from the fence?

A MATTER OF OPINION.
A man walks round a pole on the top of which is a monkey. As
the man moves, the monkey turns on the top of the pole, so as still
to keep face to face with the man. Now, when the man has gone
round the pole, has he or has he not gone round the monkey?
 TRY IT.
Take the number 15, multiply it by itself, and you
have 225; now multiply 225 by itself, then multiply that
product by itself, and so on until 15 products have
been multiplied by themselves in turn. The final
product called for contains 38,539 figures (the first of
which is 1412). Allowing three figures to an inch, the
answer would be over 1070 feet long. To perform the
operation would require about 50,000,000 figures. If
they can be made at the rate of 100 a minute, a person working 10
hours a day for 300 days in each year would be 28 years on the job.

PATHETIC ADVERTISING.
“Died, on the 11th ultimo., at his shop in Fleet-street, Mr. Edward
Jones much regretted by all who knew and dealt with him. As a
man, he was amiable; as a hatter, upright and moderate. His virtues
were beyond all price, and his beaver hats were only £1 4s each. He
has left a widow to deplore his loss, and a large stock to be sold
cheap for the benefit of his family. He was snatched to the other
world in the prime of life, and just as he had concluded an extensive
purchase of felt, which he got so cheap that the widow can supply
hats at a more moderate charge than any house in London. His
disconsolate family will carry on his business with punctuality.”

58. In one corner of a hexagonal grass paddock each of the sides

of which is 40 yards long, a horse is tethered with a rope 50 yards
long. How many square yards can he graze over?

59. A and B start together from the same point on a circular

path, and walk till they both arrive together at the starting point. If
A performs the circuit in 224 seconds and B in 364 seconds, how
many times do they each walk round?
 “IF.”
If you could sell the sea at 1d. per 10,000 gallons, it would bring
in 155 billion pounds. If you were to try and pump it dry, at the rate
of 1,000 gallons per second, it would take 12,000 million years.
There is always an “if” in these things!

60. A lady met a gentleman in the street. The

gentleman said “I think I know you.” The lady
said he ought, as his mother was her mother’s
only daughter. What relation was he?

A CRICKET “CATCH.”
61. In an eleven, when the ninth batsman
goes in, how many wickets have to fall before all
are out?

62. A boat’s crew can row eight miles an hour in still water; what
is the speed of a river’s current if it takes them 2 hours and 40
minutes to row 8 miles up and 8 miles down?

BAD WRITING.
In a well-known firm in Sydney the clerks are presided over by a
rather impetuous manager, whose violent fits of temper very often
dominate his reason. For instance, the other day he was wiring into
one of them about his bad work.
“Look here, Jones,” he thundered, “this won’t do. These figures
are a perfect disgrace to a clerk! I could get an office boy to make
better figures than those, and I tell you I won’t have it! Now, look at
that five, it looks just like a three. What do you mean, sir, by making
such beastly figures? Explain!”
“I—er beg your pardon, sir,” suggested the trembling clerk, his
heart fluttering terribly, “but—er well, you see, sir, it is three.”
“A three?” roared the manager; “why, it looks just like a five!”

63. Write 24 with three equal figures, neither of them being 8.

THE WRONG COLUMN.

64. A clerk, while posting from day book to ledger, transposed an
amount by placing the pence in the shilling column and the shillings
in the pence column, thereby causing an error of 9s. 2d. With what
amount could he make such a mistake?

EDUCATIONAL VAGARIES.
Extracts from Reports of Country Provisional Schools.
School No. 1: On roll, 1 boy, 1 girl; total, 2. Average
attendance, 0·6 boy, 0·6 girl; total, 1·2.
School No. 2: On roll, 2 boys, 2 girls; total 4. Average
attendance, 1·6 boys, 1·3 girls; total, 2·9.
School No. 3: On roll, 2 boys, no girls. Average
attendance, 0·8 boys.
By the above we see the public are paying for a teacher to
provide education for eight-tenths of a boy!

65.
 Three-fourths of a cross, and a circle complete,
Two semi-circles at a perpendicular meet;
Next add a triangle which stands on two feet,
Two semi-circles and a circle complete.

A DISPUTE.
66. Two men have an equal interest in a
grindstone, which is 5 ft. 6 in. in diameter. The
centre of the stone, to the extent of a diameter
of 18 in., is useless, and not to be taken into
account.
Required to find the depth to which the first
partner may be allowed to grind away from the
stone in order to leave an equal share of the stone to the second
partner.

BANK NOTE VERSE.

On the backs of bank notes one sometimes meets with strange
and peculiar sentiments. “Go, poor devil, get thee gone,” is the kind
of parting salutation most in favour; but the following is chiefly
notable as a rare instance of the bank-note rhymester parting with
his money in a Christian spirit:
Farewell, my note, and wheresoe’er ye wend,
Shun gaudy scenes, and be the poor man’s friend;
You’ve left a poor one—go to one as poor;
And drive despair and hunger from his door.

An Irish merchant, who felt annoyed at a complaining letter he

received from a customer, wrote back:—“We decline to acknowledge
the receipt of yours of the 15th.”
 If to-day is the to-morrow of yesterday, is to-day the yesterday of
to-morrow?

67. Suppose that four poor men build

their houses around a pond, and that
afterwards four evil-disposed rich men build
houses at the back of the poor people—as
shown in illustration—and wish to have a
monopoly of the water: how can they erect
a fence so as to shut the poor people off
from the pond?

SOME TRADE SIGNS AND MOTTOES.

Many curious inscriptions are to be found displayed on shop
windows, office doors, etc.
Here are a few:—
A Pawnbroker.—“Mine is a business of the greatest interest.”
A Flourishing Bootmaker.—“Don’t you wish you were in my
shoes?”
A Publican.—“Good beer sold here, but don’t take my word for it.”
A Hairdresser.—“Two heads are better than one.”
A Carter.—“Excelsior—hire and hire.”
A Baker.—“The staff of life I do supply, by it you live and so must
I.”
A Butcher.—“We kill to dress, not dress to kill.”
A Builder.—“I send innocent men to the ‘scaffold.’”
A Clerk.—“I possess more pens than pounds.”
A Dentist.—“I look ‘down in the mouth’ and am happy.”
 A Doctor.—“I take pains to remove pains.”
A Hatter.—“I shelter ‘the heir apparent’ and protect ‘the crown.’“
A Photographer.—“Mine is a developing business and mounting
rapidly.”
A Solicitor.—“I study the law—and the profits.”
An Undertaker.—“No complaints from our customers.”

RIVAL BUTCHERS.
T. Jones.—“Sausages, 3d. per lb.—to pay more is to be robbed.”
J. Smith.—“Sausages, 4d. per lb.—to pay less is to be poisoned.”

A French confectioner, proud of his English, and wishing to let his

customers know that their wants would be attended to without
delay, put out the notice, “Short weights here.”
A shopkeeper in the old country had printed under his name “The
little rascal.” When asked the meaning of this strange sign, he
replied, “It distinguishes me from the rest of my trade, who are all
great rascals.”

On an Office Door.—“Shut this door, and as soon as you have

done talking on business, serve your mouth the same way.”

“SHE.”
68.
 A country spark addressed a charming “she,”
In whom all lovely features did agree;
But being void of numbers, as doth show,
Desirous was the lady’s age to know.
“My age is such that if multiplied by three,
Two-sevenths of the product triple be:
The square root of two-ninths of that is four;—
Tell me my age or never see me more.”

RUNNING SHORT.
69. A vessel on a 3 months’ trip has provisions for 4 months, but
the stores are served out as if the voyage had to be completed in 3
months. At the end of 2 months, it is discovered that the voyage will
take 3½ months. To what proportion must the rations be reduced
for the remaining time?

In a certain town in the North of Queensland, a class of young

men was formed to receive lessons in short methods of business
arithmetic. The teacher was endeavouring to knock into the head of
a young man that the cost of a dozen articles is the same number of
shillings that a single article costs in pence. To illustrate the rule, he
gave the following example:—
 “If I buy 1 dozen apples at 1d each, then the dozen will cost 1
shilling; and if I buy 1 dozen oranges at 2 pence each, the dozen will
cost 2 shillings. Now, supposing I buy 1 dozen at 3 pence each, how
much will the dozen cost?”
Young Man (after two minutes’ reflection)—“Are they apples or
oranges?”

A DRAUGHTS PUZZLE.
70. Ten draughtsmen are placed in a row. The puzzle is to lift one
up and passing over two at a time (neither more nor less) to place it
on the top, or to “crown” the next one, continuing in this fashion
until all are crowned. In passing over a piece already crowned, it is
to be reckoned as two pieces.

71. In the centre of a pond 20 feet square there is a small island,

on which is growing a tree. Two boys notice there is a bird’s nest on
the top of the tree, but the difficulty is to reach the island, as they
have 2 short planks that only measure 8 feet each. After a little
while they hit on an ingenious plan, and, without nailing the planks
together, manage to place them so they can reach the tree in safety.
How did they do it?

Teacher—“Now, I want all the children to look at Tommy’s hands,

and see how clean they are, and see if all of you cannot come to
school with cleaner hands. Tommy, perhaps, will tell us how he
keeps them so nice?”
Tommy—“Yes ’m; mother makes me wash the breakfast things
every morning.”

BRAIN-BEWILDERERS.
 An amusing periodical got up by the boys of a certain college
gives a capital skit on the style of examination-papers frequently
presented for the torture of pupils. Here are a few examples:—
Supposing the River Murray to be three cubits in breadth—which
it isn’t—what is the average height of the Alps, stocks being at
nineteen and a-half?
If in autumn apples cost fourpence per pound in Melbourne, and
potatoes a shilling a score in spring, when will greengages be sold in
Brisbane at three-halfpence each, Sydney oranges being at a
discount of five per cent.?
If two men can kill twelve kangaroos in going up the right side of
a rectangular turnip-field, how many would be killed by five men and
a terrier pup in going down the other side?
If a milkmaid four feet ten inches in height, while sitting on a
three-legged stool, took four pints of milk out of every fifteen cows,
what was the size of the field in which the animals grazed, and what
was the girl’s name, age, and the occupation of her grandfather?
If thirty thousand millions of human beings have lived since the
beginning of the world, how many may we safely say will die before
the end of it? N.B.—This example to be worked out by simple
subtraction, algebra, and the rule of three. Compare results.

72. Find two numbers in the proportion of 9 to 7 such as the

square of their sum shall be equal to the cube of their difference.
Welcome to our website – the ideal destination for book lovers and
knowledge seekers. With a mission to inspire endlessly, we offer a
vast collection of books, ranging from classic literary works to
specialized publications, self-development books, and children's
literature. Each book is a new journey of discovery, expanding
knowledge and enriching the soul of the reade

Our website is not just a platform for buying books, but a bridge
connecting readers to the timeless values of culture and wisdom. With
an elegant, user-friendly interface and an intelligent search system,
we are committed to providing a quick and convenient shopping
experience. Additionally, our special promotions and home delivery
services ensure that you save time and fully enjoy the joy of reading.

Let us accompany you on the journey of exploring knowledge and

personal growth!

ebookultra.com