JavaScript

The Document Object Model Some simple example scripts Resources Nowadays no matter where you go on the Web you will interact with JavaScript whether you are aware of it or not. JavaScript is a programming language that is built into pretty much every browser available today, especially the graphical ones. It allows the page author to include functionality in their page that otherwise would not be possible. HTML has a special tag that allows JavaScript code to be included in a page, either directly, or by referencing another file. The language is very C-like in its syntax and so most programmers today should not find it too unfamiliar. The purpose of having a scripting language in the browser is to allow interaction with the page contents. In order to make the interactions happen the page has to be written in a special way, making use of tags and attributes that would not appear otherwise. HTML that is written in this way is termed Dynamic HTML because it can be changed once rendered by the browser, that is, it is not static, but dynamic. Where is it used ? Probably the most commonly seen use of dynamic html is for image rollovers which, as the name suggests, affect how images appear when you roll the mouse over them. Rollovers are a simple use of JavaScript, but more complicated things can be done. Another very popular use is for in-browser validation of form data whereby you can check, warn about and even alter the data that a user has entered into a form before having it sent to the server. More complicated scripts can deal with cookies, manage dynamically filled <select> drop down lists, make use of and manipulate the browser URL history, make use of delayed or timed actions and much more. You can even write games in it that play in your browser. The awesome (but sadly now defunct) JavaScript Games had some truly amazing examples, which even included an in-browser windowing system. How does it work ? Each browser that supports JavaScript has what is known as a Document Object Model or DOM. This is basically a big structure that is accessible from JavaScript which contains representations of all of the HTML elements in the page. Also included in the DOM are the properties of the browser, such as window size, current URL and scroll bar position. JavaScript reads and manipulates the contents of the DOM structure to perform its work. It is unfortunate however that the DOM for each browser is different, but this is changing with the World Wide Web Consortium driving through a standardised DOM. This DOM diversity causes most of the problems that JavaScript programmers have to overcome as they often need to write the same piece of code several times to support the different browser DOM implementations. This is true even with the same browser where the DOM can differ between one version and another. Resources Here are a few links to places that I have found useful W3C Document Object Model Netscape JavaScript Central Archived mirror for Netscape Developer Central Microsoft DHTML Reference