Pro JavaScript Techniques

by Resig, John

• ISBN13: 9781590597279
• ISBN10: 1590597273
• Format: Paperback
• Copyright: 2006-12-11
• Publisher: Apress

Summary

Pro JavaScript Techniquesis the ultimate JavaScript book for the modern web developer. It provides everything you need to know about modern JavaScript, and shows what JavaScript can do for your web sites. This book doesnt waste any time looking at things you already know, like basic syntax and structures.Expert web developer and author John Resig concentrates on fundamental, vital topicswhat modern JavaScripting is (and isnt), the current state of browser support, and pitfalls to be wary of. The book is organized into four sections: Modern JavaScript developmentusing JavaScript the object-oriented way, creating reusable code, plus testing and debugging DOM scriptingupdating content and styles, plus events, and effect and event libraries Ajaxhow Ajax works, overcoming problems, and using libraries to speed up development of Ajax applications The future of JavaScriptlooking at cutting edge topics like JSON, HTML 5, and moreAll concepts are backed up by real-world examples and case studies, and John provides numerous reusable functions and classes to save you time in your development. There are also up-to-date reference appendixes for the DOM, events, browser support (including IE7), and frameworksso you can look up specific details quickly and easily.

Table of Contents

About the Author	xv
About the Technical Reviewer	xvii
Acknowledgments	xix
PART 1 Introducing Modern JavaScript
Modern JavaScript Programming	3	(16)
Object-Oriented JavaScript	3	(2)
Testing Your Code	5	(1)
Packaging for Distribution	5	(2)
Unobtrusive DOM Scripting	7	(3)
The Document Object Model	8	(1)
Events	9	(1)
JavaScript and CSS	10	(1)
Ajax	10	(3)
Browser Support	13	(3)
Summary	16	(3)
PART 2 Professional JavaScript Development
Object-Oriented JavaScript	19	(20)
Language Features	19	(13)
References	19	(2)
Function Overloading and Type-Checking	21	(4)
Scope	25	(2)
Closures	27	(3)
Context	30	(2)
Object-Oriented Basics	32	(6)
Objects	32	(1)
Object Creation	32	(6)
Summary	38	(1)
Creating Reusable Code	39	(20)
Standardizing Object-Oriented Code	39	(10)
Prototypal Inheritance	39	(1)
Classical Inheritance	40	(4)
The Base Library	44	(1)
The Prototype Library	45	(4)
Packaging	49	(7)
Namespacing	49	(3)
Cleaning Up Your Code	52	(2)
Compression	54	(2)
Distribution	56	(2)
Summary	58	(1)
Tools for Debugging and Testing	59	(18)
Debugging	59	(9)
Error Console	59	(5)
DOM Inspectors	64	(3)
Firebug	67	(1)
Venkman	67	(1)
Testing	68	(5)
JSUnit	69	(2)
J3Unit	71	(1)
Test.Simple	72	(1)
Summary	73	(4)
PART 3 Unobtrusive JavaScript
The Document Object Model	77	(34)
An Introduction to the Document Object Model	77	(1)
Navigating the DOM	77	(10)
Handling White Space in the DOM	80	(2)
Simple DOM Navigation	82	(2)
Binding to Every HTML Element	84	(1)
Standard DOM Methods	85	(2)
Waiting for the HTML DOM to Load	87	(4)
Waiting for the Page to Load	87	(1)
Waiting for Most of the DOM to Load	87	(1)
Figuring Out When the DOM Is Loaded	88	(3)
Finding Elements in an HTML Document	91	(5)
Finding Elements by Class Name	91	(1)
Finding Elements by CSS Selector	92	(3)
XPath	95	(1)
Getting the Contents of an Element	96	(3)
Getting the Text Inside an Element	96	(2)
Getting the HTML Inside an Element	98	(1)
Working with Element Attributes	99	(4)
Getting and Setting an Attribute Value	99	(4)
Modifying the DOM	103	(7)
Creating Nodes Using the DOM	103	(1)
Inserting into the DOM	104	(1)
Injecting HTML into the DOM	105	(3)
Removing Nodes from the DOM	108	(2)
Summary	110	(1)
Events	111	(24)
Introduction to JavaScript Events	111	(5)
Asynchronous Events vs. Threads	111	(3)
Event Phases	114	(2)
Common Event Features	116	(6)
The Event Object	116	(1)
The this Keyword	117	(1)
Canceling Event Bubbling	118	(1)
Overriding the Browser's Default Action	119	(3)
Binding Event Listeners	122	(7)
Traditional Binding	122	(2)
DOM Binding: W3C	124	(1)
DOM Binding: IE	125	(1)
addEvent and removeEvent	126	(3)
Types of Events	129	(1)
Unobtrusive DOM Scripting	129	(4)
Anticipating JavaScript Being Disabled	130	(1)
Making Sure Links Don't Rely on JavaScript	130	(1)
Watching for When CSS Is Disabled	131	(1)
Event Accessibility	132	(1)
Summary	133	(2)
JavaScript and CSS	135	(34)
Accessing Style Information	135	(2)
Dynamic Elements	137	(14)
An Element's Position	137	(10)
An Element's Size	147	(2)
An Element's Visibility	149	(2)
Animations	151	(2)
Slide In	152	(1)
Fade In	152	(1)
The Browser	153	(4)
Mouse Position	153	(2)
The Viewport	155	(2)
Drag-and-Drop	157	(6)
Libraries	163	(4)
moo.fx and jQuery	163	(1)
Scriptaculous	164	(3)
Summary	167	(2)
Improving Forms	169	(22)
Form Validation	169	(10)
Required Fields	172	(2)
Pattern Matching	174	(3)
Rule Set	177	(2)
Displaying Error Messages	179	(7)
Validation	179	(4)
When to Validate	183	(3)
Usability Improvements	186	(3)
Hover Labels	186	(2)
Marking Required Fields	188	(1)
Summary	189	(2)
Building an Image Gallery	191	(24)
Example Galleries	191	(4)
Lightbox	191	(2)
ThickBox	193	(2)
Building the Gallery	195	(17)
Loading Unobtrusively	198	(2)
Transparent Overlay	200	(3)
Positioned Box	203	(4)
Navigation	207	(2)
Slideshow	209	(3)
Summary	212	(3)
PART 4 Ajax
Introduction to Ajax	215	(18)
Using Ajax	215	(10)
HTTP Requests	216	(5)
HTTP Response	221	(4)
Handling Response Data	225	(1)
The Complete Ajax Package	226	(3)
Examples of Different Data Usage	229	(3)
An XML-Based RSS Feed	229	(2)
An HTML Injector	231	(1)
JSON and JavaScript: Remote Execution	232	(1)
Summary	232	(1)
Enhancing Blogs with Ajax	233	(14)
Never-Ending Blog	233	(10)
The Blog Template	234	(2)
The Data Source	236	(2)
Event Detection	238	(1)
The Request	238	(1)
The Result	239	(4)
Live Blogging	243	(2)
Summary	245	(2)
Autocomplete Search	247	(18)
Examples of Autocomplete Search	247	(2)
Building the Page	249	(2)
Watching for Key Input	251	(3)
Retrieving the Results	254	(3)
Navigating the Result List	257	(2)
Keyboard Navigation	257	(1)
Mouse Navigation	258	(1)
The Final Result	259	(5)
Summary	264	(1)
An Ajax Wiki	265	(22)
What Is a Wiki?	265	(1)
Talking With the Database	266	(1)
The Ajax Request	267	(1)
The Server-Side Code	268	(4)
Handling a Request	268	(2)
Executing and Formatting SQL	270	(2)
Handling the JSON Response	272	(2)
An Extra Case Study: A JavaScript Blog	274	(1)
Application Code	275	(8)
Core JavaScript Code	276	(3)
JavaScript SQL Library	279	(1)
Ruby Server-Side Code	280	(3)
Summary	283	(4)
PART 5 The Future of JavaScript
Where Is JavaScript Going?	287	(20)
JavaScript 1.6 and 1.7	287	(7)
JavaScript 1.6	288	(3)
JavaScript 1.7	291	(3)
Web Applications 1.0	294	(7)
Building a Clock	294	(4)
Simple Planet Simulation	298	(3)
Comet	301	(3)
Summary	304	(3)
PART 6 Appendixes
APPENDIX A DOM Reference	307	(18)
Resources	307	(1)
Terminology	307	(2)
Global Variables	309	(1)
document	309	(1)
HTMLElement	310	(1)
DOM Navigation	310	(4)
body	310	(1)
childNodes	311	(1)
documentElement	311	(1)
firstChild	311	(1)
getElementByld( elemID )	311	(1)
getElementsByTagName( tagName )	312	(1)
lastChild	312	(1)
nextSibling	313	(1)
parentNode	313	(1)
previousSibling	314	(1)
Node Information	314	(2)
innerText	314	(1)
nodeName	315	(1)
nodeType	315	(1)
nodeValue	316	(1)
Attributes	316	(3)
className	316	(1)
getAttribute( attrName )	317	(1)
removeAttribute( attrName )	317	(1)
setAttribute( attrName, attrValue )	318	(1)
DOM Modification	319	(6)
appendChild( nodeToAppend )	319	(1)
cloneNode( truelfalse )	319	(1)
createElement( tagName )	320	(1)
createElementNS( namespace, tagName )	320	(1)
createTextNode( textString )	321	(1)
innerHTML	321	(1)
insertBefore( nodeTolnsert, nodeTolnsertBefore )	322	(1)
removeChild( nodeToRemove )	322	(1)
replaceChild( nodeTolnsert, nodeToReplace )	323	(2)
APPENDIX B Events Reference	325	(20)
Resources	325	(1)
Terminology	325	(1)
Event Object	326	(8)
General Properties	327	(2)
Mouse Properties	329	(3)
Keyboard Properties	332	(2)
Page Events	334	(3)
load	334	(1)
beforeunload	335	(1)
error	335	(1)
resize	336	(1)
scroll	336	(1)
unload	336	(1)
Ul Events	337	(1)
focus	337	(1)
blur	337	(1)
Mouse Events	337	(4)
click	337	(1)
dblclick	338	(1)
mousedown	338	(1)
mouseup	338	(1)
mousemove	338	(2)
mouseover	340	(1)
mouseout	340	(1)
Keyboard Events	341	(1)
keydown / keypress	341	(1)
keyup	341	(1)
Form Events	342	(3)
select	342	(1)
change	342	(1)
submit	342	(1)
reset	343	(2)
APPENDIX C The Browsers	345	(4)
Modern Browsers	345	(4)
Internet Explorer	345	(1)
Mozilla	346	(1)
Safari	346	(1)
Opera	346	(3)
Index	349