Ready to add a little action to your site? Javascript is a great place to start. Because it's a scripting tool rather than a programming language in itself, it's quite a bit easier to learn – think of it as "programming lite."

If you are new to Javascript you might want to start with the Javascript Basics article, which explains the formatting requirements for all Javascript programs. In essence, a Javascript program looks like this:

<script type="text/javascript">
<!--
Code goes here…
//-->
</script>

Functions are the building blocks of Javascript programs. A function is a section of code that will run when called, either if a predetermined event takes place (say, a visitor types something into a text box) or if another function calls it. A complicated Javascript program might have dozens of functions that work together to create the desired result. One common example is a drop-down navigation menu. The program powering a site's navigation might have one function that pre-loads the menu's images, another that causes the drop-down menu to appear when the mouse hovers over the menu title, and a third that controls the individual images' rollover effects (such as swapping to a darker-colored image when the mouse cursor rolls over that item). Using different functions to create these effects makes it much easier for the programmer (you!) to locate any bugs, and also saves time in the long run by allowing you to re-use functions in other programs.

Let's begin by crafting a program that will pop up a message when your visitors click a button. For this one-function program you'll make use of the alert command, which pops up an alert box when executed. Place this code in the head of your HTML page:

<script type="text/javascript">
<!--
function helloworld()
{
alert("Hello World!");
}
//-->
</script>

Like all functions, this one has a name ("helloworld") followed by the bulk of the function inside curly brackets {}.

Any Javascript functions placed in the head of an HTML document don't run right away, unlike functions in the body of the page. In order to execute helloworld, you'll need to call it – or in this case, have your visitors call it – by including the following HTML in the body of your page:

<input type="button" value="Click me!" onclick="helloworld()" >

Here we've used the onclick event handler to activate the function. Javascript has several event handlers that you can use to call functions when certain events happen; the onclick handler, not surprisingly, will run a function when a visitor clicks on the button.