(Note that I’ve given this button the id “hello-world2″, because every id on the page must be unique, and I already have a button with the id “hello-world” above.)

Let’s look in detail at what this bit of code is saying:

onClick=””

onClick is an event handler. It tells the browser to run whatever’s in the quotes when the event “click” happens to the button.

alert()

alert() is the first JavaScript function we’ve seen. It’s built into JavaScript, and in a web browser it shows an alert box on the screen.

‘Hello World!’

You notice that alert(), like all function calls, is followed by a pair of round brackets. Some functions expect to be given parameters – extra information that the function needs. The alert() function takes one parameter – the message you want to display. This message has to be put inside quotes (either single- or double-quotes), so that JavaScript knows just to treat it as a piece of text. because we’ve already got the whole bit of JavaScript inside double-quotes (onClick=”…”), I’ve used single-quotes here.

;

The semicolon after the alert function tells the browser that it’s the end of the statement. It’s not strictly required, but if you wanted more than one thing to happen, you’d separate the statements with semicolons.

Problems with inline JavaScript

I’ve shown you how to write your instructions inline (i.e. in your HTML), because it’s the easiest and quickest way. However it’s not very good practice, because (just like the problems with inline CSS):

You have to write your code out in full for every button. (OK, this example is very very simple, but it could be much more complicated.)

That means that if you have more than one button that does this function, and you want to change what happens, you have to locate and edit every occurrence of the code).

It makes your pages longer, more cluttered and more complex.

A better way to manage your code is to put it in separate functions, which, just like CSS again, can be written either:

into the page header (or body, but header is best)

or in separate files

Making something happen with a custom function

To do the same thing as we’ve achieved above, but with neater code, we’ll write our own JavaScript function.

First thing is to write a block of JavaScript in the <head> section of our HTML page.

Note that the script type= stuff above is a common block that you’ll always use to write blocks of JavaScript into your web pages. I do explain what it does below, but it’s not vital that you understand it now.

JavaScript code

<script type=”text/javascript”> … </script>

The <script> tag tells the browser that some client-side script follows, and where it ends. The type parameter tells the browser what kind of script it is, so the browser knows to use its JavaScript capability to interpret the code.

<!– … //–>

This is an HTML comment. It prevents whatever’s between the comment start & end tags from being displayed on screen. The last line has a JavaScript comment (//) in front of it, to tell the JavaScript block to ignore that line.

function

function is saying that we’re creating a new custom function here

helloWorld()

helloWorld is its name. The pair of round brackets () follows all function definitions. This is where you may tell a function what parameters to expect to be given. We don’t have any parameters in this example, so we have empty brackets.

{ … }

Everything between the curly braces { } is the body of the function. This is the code that gets run when you call the function.

alert(‘Hello World!’);

This is exactly what we had before inside our onClick() event handler. Now, it’s stored in the document <head> section.

Firing the function

To fire the function, we’ll change the bit of code inside the onClick() event handler as follows.

Now, instead of alert() function, we’ve written the name of our own custom function.

When the button is clicked, the browser will look within the page (and any referenced JavaScript files) for a function of that name. We’ve already written a function of that name in our <head> section, so the browser runs that function.

The benefit of this approach to writing JavaScript code is, if we want to change what happens when the “Hello” button is clicked (say, we want to ask the user their name, and then say “Hello Bob!”, we change it in only one place.

Making something happen with an external JavaScript file

This is fairly straightforward change, which gives us even more benefits.

Instead of writing our JavaScript code into a block in the document <head>, we write it into a separate file, which we include in any pages that might use its functions.

hello.js

You’d write the following code into a separate file, and save it as “hello.js” (you can call it whatever you want).

function helloWorld() {
alert('Hello World!') ;
}

Include the external js file in your document <head>

Again, this uses the <script>…</script> HTML tag, but instead of writing our code between the start and end tags, we tell the browser that the script is in another file whose “source” (src) is “hello.js”.

This will have exactly the same effect as the previous 2 methods we’ve tried, but is much better because now:

It’s easier to update our code. If we want to change what the helloWorld() function does, we only have to change it in one place, and those changes will be reflected in all pages that include the hello.js file.

It’s easier to manage our code. If you come back to a web site project, it’s much easier to find out what’s doing what if your styles (CSS) and functions (JavaScript) are kept separate from your content (HTML). These benefits increase as sites get more complex.

The browser should only have to download your JavaScript code once, no matter how how many pages use it, because it can cache (i.e. remember) the external file.

(Note, if you’re using xHTML, the language parameter is not allowed, just use the type parameter in your <script> tag.)

About the author

Ben Hunt

Ben is the creator of Web Design From Scratch. He started writing articles about web design to kill time on a long train commute, and is now one of the most influential figures on the subject of effective web design. He has written three books and spoken at multiple conferences internationally.

Leave a reply:

Great article! I’m a Java programmer, but I’m brand new to Javascript this was a great introduction. I just wish there were more articles? JS102, 103, 201, and so on. Can you point me to a good resource for more info? Rob