JavaScript 101: Hello World!

JavaScript is a programming language that web browsers understand. You can use it to make your web pages interactive by:

• Responding to user actions and changes on the page
• Manipulating the web page’s contents and behaviour
• Communicating with the user directly

You can do just about anything you want with a web page, using JavaScript.

In this introductory tutorial and the series to follow, I’ll introduce the JavaScript language and how to write it, through a series of practical worked examples.

Example 1: Hello World!

“Hello World!” is traditionally the first thing you learn to do with any new language.

What we want to do

When the user clicks a button, show the message, “Hello World!”.

Step 1: Create a button

Our web page needs a button to click:

1

<input type="button" id="hello-world" value="Hello" />

Let’s explain the various bits of the HTML:

input

This is the generic HTML command for a form input. (Note it’s self-closing, so if you’re coding xHTML you must use the trailing slash.)

type=”button”

There are several types of input in HTML: button, text, submit-button.

id=”hello-world”

We don’t actually need this yet, but it’s good practice to give every important element on your page its own useful ID (unique identifier).

value=”Hello”

With a button, the value parameter sets the text that’s displayed on the button.

Try clicking the button…

Did anything happen? No? Good.

This is exactly right, because we haven’t told the page that anything should happen when the button is clicked. Let’s look at ways of making something happen when the button is clicked.

Making something happen with inline JavaScript

The easiest way is to write what we want to happen into the button tag itself. For example…

1

<input type="button" id="hello-world2" value="Hello" onClick="alert('Hello World!');" />

Try it now. (If nothing happens, check that JavaScript is enabled in your browser.)

(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):

1. 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.)
2. 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).
3. 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.

1
2
3
4
5
6
7
8
9

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

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.

1

<input type="button" id="hello-world2" value="Hello" onClick="helloWorld();" />

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).

1
2
3

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

Include the external js file in your document <head>

1
2
3

<head>
   <script type="text/javascript" language="javascript" src="hello.js"></script>
</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.)

• Tweet