Home Services Tutorials Portfolio About Contact

JavaScript - Client side coding with JavaScript

Introduction

Javascript is a web based programming language, used to make webpages more interesting, intuitive, interactive and dynamic. It is mixed together with HTML and exercuted once a page is loaded. Javascript is a 'client side' programming language. This means that it is the job of the users browser software, whether it be Internet Explorer, Netscape Navigator or another, to decode the javascript and act accordingly. This introduces one of the fundamental problems with javascript, (or infact any 'client side' language), it relies solely on the users computer. If their computer is unable to understand the code, or interprets the code incorrectly, problems arise. This may result in the page not working at all.

Javascript is based around something known as the DOM, (Document Object Model). Before expanding on to any other topics, it is a good idea to have a basic understanding of what the DOM is, and how it works. Once you begin to understand how the DOM is made up, programming in javascript is a doddle, the only problem then is making it work universally on different browsers.

The DOM (Document Object Model)

Basically the DOM is the framework which describes a webpage in a universal manner. You can then use javascript to refer to certain objects on your page.

For example, a web page may contain any number of images, links, form elements etc. If you wanted to refer the src of an image within a webpage, you could type,

document.imagename.src

if you then wanted to change the image, you would simply type

document.imagename.src='whateverimage.gif';

This is the basis of the common image rollover, used on many webpages.

The Code for this was simply.

<a href="#" onMouseOver="document.image1.src='/images/APPSWarn.gif';" onMouseOut="document.image1.src='/images/BeBoxNetPositive.gif';"> <img name=image1 src='/images/BeBoxNetPositive.gif' border="0"></a>

That's it for now, but take a look at these additional resources for more information.

Additional Resources

Thaus JavaScript Tutorial on WebMonkey