DHTML is a buzzword that came onto the scene during the version 4 browsers and tried to bring the “sexy back” to web development. Even though web standards, accessibility and unobtrusiveness were still in their infantcy, it did make the web world more aware of what you could do on the client (browser) before sending data to the server.
Even though the defintions of DHTML may never be totally accurate (the changing of the styles of HTML elements by means of JavaScript), if we can take what we have learned in the past and apply them now we can get a very thorough understanding of what JavaScript can do.
This e-book (.pdf) and example code (.zip) covers some topics I covered on this website as well as many others I have not, such as: the DOM, table sorting and highlighting, regular expressions, hide-show, pop-up windows, form validation and formatting, alertless error messages, date picker, google maps, and ajax basics.
Chris Heilmann created a nice DOM Cheatsheet (.pdf) to help all us would-be JavaScript developers.
The visibilty of an element is a powerful tool that can be used in JavaScript to create everything from animations and effects to fast templating. More importantly, however, it can also be used to quickly hide an element from view, providing users with some basic user interaction capabilities.
Within CSS there are two different ways of effectively hiding an element from view; both have their benefits but can provide unintented consquences, depending on how you use them:
read more…
Every element in a document is an object. Every one of these objects has a whole collection of properties as we have discussed in previous meetings. There’s one property called style which every element node has. It contains information about the styles attached to the element. Querying this property doesn’t return a simple string, it returns an object. Style information is stored as properties of this style object:
element.style.property
read more…
Many sites that present tabular data use alternating background colors to increase the readability of that data. The obvious solution is to hardcode every second row to ensure it had a different background color. But if you want the table to be dynamic, meaning that it would be possible to add a new row in the middle of the table without changing the background color attribute of the rows that followed requires a little JavaScript.
read more…
Should you use popup windows? Popup windows have gained a bad reputation from marketers’ aggressive use of them, but even requested popups can be barriers to good usability. There are situations where popping a new window is arguably the most appropriate solution. Popups are mostly used for one-page interfaces or those in which history navigation is discouraged, such as a survey or a logon page for a commercial web site.
read more…
One way to enhance a table style is to introduce a hover effect on the table rows: when the user is moving across the table with their mouse, the current row they are on will change color. This is something that you frequently see in interface design in internal web applications which help users view a particlar row of data.
read more…
As we have started to learn about the DOM this season, one thing that is an issue when developing your scripts is knowing when you can have your scripts execute. Remember, the DOM is available to you only when it has finished loading in the browser. You may ask, when has it finished loading? Good Question!
The order of completion that takes place inside a browser is roughly:
1. HTML is parsed
2. External scripts/style sheets are loaded
3. Scripts are executed as they are parsed in the document
4. DOM is fully constructed
5. Images and external content are loaded
6. The page is finished loading
read more…
Jeremy Keith author of DOM Scripting: Web Design with JavaScript and Bulletproof Ajax and JavaScript guru along with Aaron Gustafson gave a talk about JavaScript and the DOM at SXSW06.
Here are the online slides that were given during the presentation.
