Do-It-Yourself HTML and JavaScript Tips

HTML and JavaScript is the original specification for most web applications of the last few years. Of course, it goes without saying that there are several new technologies ready to lay down markers on the developing scene, but not many can compare to the flexibility and support offered by the use of HTML and JavaScript in tandem.

It's important to realize that the true value of these languages doesn't lie in their own individual qualities, but in the way that they can be used together. JavaScript can be considered a built on extension of regular HTML.

HTML, on its own, doesn't know how to respond to requests sent directly through its central components. JavaScript works to integrate event handlers and provide a more dynamic browsing experience for us all.

We're going to look at several ways that you can bring to life, and improve the functionality of your website, through the use of JavaScript or regular HTML.

JavaScript is extremely useful in the sense that it has the capacity to evaluate data before it gets sent to a server for processing. How many times have you filled in a form online, or tried to log in somewhere, only to receive an error message? This is achieved through the use of client-side validation, and yes, that's where JavaScript is the Holy Grail for web developers.

When we submit a form on a website, it's possible to include an additional attribute known as the onSubmit event. Through this scope, we can link to a JavaScript file or a code snippet where the data will be checked. If the script returns true, the form will be submitted. If it returns false, it won't.

On the surface, this might sound quite irrelevant. Why would we need to check a form? Surely that can be done once it's been submitted? In some cases, it isn't overly important. But if you're committing changes to a SQL database or checking the integrity of a field value, validation gives the developer a great deal of control over the application.

JavaScript can also be used to produce popup windows and alerts. By using the WINDOW and ALERT functions, it's possible to add an extra layer of security and flexibility to prevent users from making a single click to radically affect their browsing experience.

- Window.Open()

The OPEN command above will create a new window. The attributes of the window can be defined within the brackets. You can use this to embed advertisements in a page.

- alert (" This my alert! ")

Embedding the alert code in to a page will spring up a common confirmation box. If the user presses OK, the application will continue. If they press "Cancel" or the little X, the changes will be rolled back with a false value being returned.

As you can probably imagine, confirmation boxes are a highly recommended addition to any HTML page which requires an important form submission. You should never commit major changes without asking for a confirmation through the use of JavaScript.

It isn't all about functionality though. JavaScript can be used to make your page look more visually creative, and this is probably happening right under your nose without you noticing! Rollover images are another example of JavaScript events being triggered.

When we use the onMouseOver and onMouseOut events, we can capture the location of the user's mouse and enjoy a whole variety of different possibilities. The most commonly used of these is the aforementioned rollover effect.

A website can really leap out from the page if it moves and changes from your touch. Many sites use JavaScript in the navigation menu to change the color of a button, or to produce a light glow when the mouse hovers over it.

By saving two versions of the same image in different states, you can link each image to the onMouseOver and onMouseOut events respectively, and this will give you a neat rollover. Don't abuse the trick though. Too many rollover images will lead to painstakingly slow loading times, or delayed changes!

We can even go as far as to change the way that a site transitions from one page to the next. The HTTP-EQUIV attribute inside the META tag can be modified to any value between 1 and 23. Each of these numbers relates to a different page transition; whether it is a dissolving page, a box-in motion, or a box-out effect. You can create a truly unique navigation system by having a play around with the various transitions on offer. But once again, remember that too much is a real spoiler for the user. If you apply relentless transitions left right and center, it'll simply disorientate your audience.

Transitional effects are currently supported on Microsoft Internet Explorer, but they can't be sure of working on other browsers such as Firefox or Netscape. Check the documentation of your web browser to establish whether it's compatible with JavaScript page transitioning.

Many web designers use JavaScript to bring a page to life with movement and visual activity, but they'd do well to remember the potential of a very basic HTML tag. The MARQUEE set is great for sprucing up a web page and can be used to create a scrolling news bar with little difficulty.

- <MARQUEE> This is my scrolling text. </MARQUEE>

The code above will create moving text to scroll from right to left. You can configure the speed of the marquee by setting its attributes accordingly.

It might not be the hardest tag to master, but it's amazing how a single marquee can make a website seem dynamic and alive!

HTML is a great starting base for any aspiring web developer, but knowledge of JavaScript and a few simple tricks is often enough to turn a good webpage in to a great one. Use your knowledge wisely and steer clear of over-elaboration. It doesn't take much to separate your site from the rest.