JavaScript Workshop » JavaScript

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...)

Modifying your markup can be as easy or as difficult as you want. Using the innerHTML or the W3C DOM methods such as createElement, appendChild and insertBefore can allow you to manipulate anything on your web page to create some very interesting effects.

These techniques allow you to further enhance the user's web experience and are part of truly creating interactive content.

(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.

My use for external windows (not popups) use scripting that degrades if not available. We have already discussed this issue at our unobtrusive discussion.

(read more...)

With HTML pages on the web you can just include the required Javascript between tags. When you validate the HTML on your web page the Javascript content is considered to be CDATA (character data) that is therefore ignored by the validator. The same is not true if you follow the more recent XHTML standards in setting up your web page. With XHTML the code between the script tags is considered to be PCDATA (parsed character data) which is therefore processed by the validator.

Because of this, you can't just include Javascript between the script tags on your page without 'breaking' your web page (at least as far as the validator is concerned).

(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...)

Using many if or switch statements can make your code very long and complex in no time. A trick to avoid some of the bloating involves using something called the ternary operator.

The ternary operator syntax is:

var variable = condition ? trueValue:falseValue;

(read more...)

Web development happens on several layers:

• Structure: The HTML mark-up that defines the elements on a page.
• Presentation: The CSS that changes the appearance.
• Behavior: Goood ole' JavaScript that can make the content interactive.

(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!

(read more...)