Transcript Document

Building, Testing, and Debugging
Client-side Web Applications
Porter Glendinning
Web/UI Commando
Commerce One e-Business Innovations
Prerequisites for presentation:
I assume you know: 1) HTML/XHTML;
2) JavaScript; 3) Basic CSS; and 4)
Basic concepts of Web application
development.
Level: Intermediate to Advanced
DHTML is dead!
Long live DHTML!
We think DHTML is…
• Silly rollover effects
• Popup menus that close before you can get
your mouse over them
• Annoying animations that follow the cursor
around
• Impossible to implement in more than one
browser running on one computer locked in a
monastery high on a mountaintop
We can do much more.
• Generate content client-side for faster,
more responsive pages
• Sort, evaluate, and validate without
going back to the server
• Create truly interactive documents
Building Blocks
• HTML/XHTML
What is this thing?
• CSS
What does this thing look (sound, smell, feel,
taste) like?
• ECMAScript (JavaScript, JScript)
What does this thing do?
• DOM
How does this thing relate to these other things?
Writing Bug-free Code
Before You Write any Code
• Envisioning the application is 80% of the
work.
• Break the job up into workable components.
• Get a good, complete mental picture of how
each piece should work.
• Compose that image in terms of the building
blocks that the browser understands (objects,
events, styles, etc.).
Envisioning Example
Event: onclick Object: <a>
When I click on this link I want to make
Style: background-color: #ccc
its background turn gray.
Build a Simple Prototype
• Start with the minimum amount of code
and markup needed for the task at
hand.
• This allows you to solve functional
problems before having to deal with
outside interference.
Expand Gradually
• Add features to that prototype,
modifying the structure as needed.
• Wait to refine its looks as long as
possible.
Working the DOM
Understanding Nodes
• Nodes are the basic building blocks of
the Document Object Model
• The DOM Spec defines 12 different
types of nodes
• We’re mainly concerned with two:
– Element nodes
– Text nodes
Sample Node Structure
<p>This is a <em>sample</em> paragraph.</p>
p
(Element node)
“This is a”
(Text node)
em
(Element node)
“sample”
(Text node)
“paragraph.”
(Text node)
Event Handling
• The DOM provides a fairly robust
mechanism for attaching handlers to all
manner of events.
• Unlike HTML event attributes, DOM
events allow multiple handlers to attach
to the same event.
• For most applications HTML-style event
handling will still suffice (for now).
Node Creation
• There are two main ways to create a new
node in a document:
– Build one from scratch with createElement()
or createTextNode()
– Copy an existing node from the document tree
with cloneNode()
• Once created, nodes can be added to the tree
with insertBefore() or appendChild()
Node Destruction
• Nodes can be outright destroyed with
removeChild()
• Or replaced by a new one with
replaceChild()
Accessing and Modifying Text
• The contents of a Text node can be
read or modified using the nodeValue
property.
• While this property also applies to other
node types, Text is currently the most
commonly useful.
What’s the deal with
innerHTML?
• It (and its corollaries) allow easier
access to modifying the contents of an
element.
• It’s not part of the DOM Specification,
but it is supported by both Internet
Explorer and Mozilla/Netscape.
• In Internet Explorer some elements’
innerHTML properties are read-only.
Example of Adding Elements
• Start from a page containing a table of
CDs without product images.
• Create a simple model:
When I click on this link add a
thumbnail image to each product in the
table.
Example of Removing
Elements
• Take a basic shopping cart as a starting
point.
• Removing an item from your cart is a
perfect application for node removal.
• Simple envisioning might be:
When I click on the remove button for
an item delete that item’s row from the
shopping cart table.
“Remove from Cart” Example,
Cont’d
• Building on the previous model:
When I click on the remove button for
an item delete that item’s row from the
shopping cart table, and update the cart
total based on the remaining items.
Sorting in the Browser
• Sorting is a perfect candidate for clientside processing.
• The information is already there in the
browser. Why go back to the server just
to get it served back in a different
order?
Client-side Sorting Example
• Using the common paradigm of clicking
column headers to sort the table:
When I click on the heading for a
column sort the rows in the table in
ascending order using the values in that
column. If the rows are already sorted
on that column’s values, reverse the
sort order.
Sneaking Calls to the Server
• Sometimes you can’t avoid going back
to the server
• Instead of refreshing the entire page,
use a “hidden round-trip” to update
only the data that needs to change.
Sneaking Calls to the Server,
Cont’d
• We used to use an “invisible” frame in a
frameset to make calls to the server
and receive responses behind the user’s
back.
• Instead, try using a truly invisible
iframe to do the same thing.
• Or, even better, manipulate the source
of a script element.
Exterminate Those Bugs
Testing
• Testing client-side Web applications is
still very much a manual process.
• Find those outlying fringe cases and
bang on them.
• Beware if you hear, “Oh, no one would
ever really do that.”
Testing, Cont’d
• Obviously, run your tests on a wide
range of browsers and platforms.
• Even if the client-side portions don’t
work in a given environment, be sure
that they degrade gracefully.
• Test early and test often.
Validate, Validate, Validate
• Make use of validators to check your
HTML and CSS
• Unfortunately, it’s still sometimes
necessary to write invalid code to get
around browser problems.
• Be sure you know why you are violating
the Specs if you do.
Make the Most of What the
Browser Gives You
• Turn scripting error messages on in
Internet Explorer.
• Keep the JavaScript console open in
Mozilla/Netscape while you’re
developing.
Low-tech Debugging
• Use alert() calls to get a quick and
dirty look at what’s going on.
• Write information to the window’s
status bar for less annoying feedback.
• Throw a textarea onto the page to
write larger amounts of debugging
information into.
High-tech Debugging
• Fight fire with fire: Insert an absolutely
positioned element into your document
to write debugging information into.
• Use Mozilla’s JavaScript debugger to
trace into your code as it executes.
Tools You Need
• Mozilla 1.1
– JavaScript Debugger
– DOM Inspector
– http://www.mozilla.org/releases/
• DevEdge Sidebar Tabs
– HTML 4.01, CSS2, and DOM2 quick references
– http://devedge.netscape.com/toolbox/sidebars/
Tools You Need, Cont’d
• W3C HTML and CSS validators
– http://validator.w3.org
– http://jigsaw.w3.org/css-validator/
• The Document Object Model:
Processing Structured Documents
– Joe Marini, Osborne McGraw-Hill
This presentation and demo files are
available on my Web site at:
http://glendinning.org/webbuilder/