DHTML

JavaScript Programming Fundamentals

Your First Scripts

It's finally time to try some of this stuff out and write your very own first scripts. Traditionally, books or courses on programming languages start with the writing out of the words "Hello, world". We don't want to break with tradition, so we will do the same. Your first script will write out the words "Hello, world".

Open your favourite text editor (Notepad, SimpleText), and create a blank HTML document with all the necessary tags. In case you need to know, it should look like this (if it is an XHTML document, and it should be):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>My First Script</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head><body>

</body> </html>

We won't tell you every time to do this. From this point on, we are going to assume that you are putting your scripts into a blank page like the one above.

Writing out text

In order to accomplish out task of writing out some text, we are going to use the write() method of the document object. As we mentioned earlier, although most JavaScript should go into the <head> of the HTML document, whenever you are using JavaScript to write something out, be it ordinary text or even HTML code, you should put this script in the <body> section of the document. Otherwise, no one will see what you are trying to do.

Even though we said we weren't going to show you the <script> tag any more, we will do it just this one last time so you can get an idea of what this should look like.

<body>

<h2>
<script type="text/javascript"> <!--

document.write("Hello, world");

//--> </script> </h2>

</body> </html>

Make sure you write out this script and try it out. Congratulations if you have, you are on your way to becoming a JavaScript programmer.

Let's make a few observations about this script.

There is no event handler, so this script will run automatically when the page loads.
Whenever you write out a statement, such as the one above, it should always end with a semicolon (;). This tells the browser that it has reached the end of the statement.
The statement could also have been written out as window.document.write("Hello, World");, but if you leave out the "window" section of any statement, the browser will just assume you are dealing with the current document.
document is an object, and write() is one of its methods.
When we put this JavaScript in between the <h2></h2> tags, the written out text uses these tags just as if it was written there without JavaScript.

write() is a good example of a method. In this case, it is a method of the document object.

Here is an example of this script in action.

Using the Alert Box

JavaScript alert boxes are a way of getting the user's attention. Although the various browsers have slightly different looking alert boxes, they all do the same thing. They pop up over the browser with some sort of message to alert the user. The user is then unable to do anything with the browser, including closing it, until he/she clicks the "OK" button. The alert box acts like a "pause" button on your Web page. The browser will not load any parts of the page (including other JavaScript, HTML and images) that come after it, until the user clicks "OK".

Click here to see an alert box.

That alert box used an onclick event handler that looked like this:

<a href="#" onclick="alert('This is a JavaScript Alert Box.'); return false;">Click here to see an alert box</a>

Did you notice the "return false;" statement at the end of it? This stops the link from actually doing its thing. If we took this statement out of the event handler, then the browser would go to the top of the page every time you clicked that link.

This is what would happen without the return false; statement.

Another way around this is to put javascript:; into the link instead of href="#". This has the same effect.

The same link without the return false statement, but with javascript:; in the link.

<a href="javascript:;" onclick="alert('This is a JavaScript Alert Box.');">Click here to see an alert box</a>

If you are using some versions of Internet Explorer, you may notice that IE still makes a clicking sound after you click OK, but when you used href="#" it didn't make the sound. Whichever method you use is up to you.

Anyway, let's get back to alert boxes. They are useful for many things. One common use is to let the user know that they have forgotten to fill in all the fields in a form, or have filled one out incorrectly. (More on form validation later.)

The good old alert box also has the capacity to be misused, although more as an annoyance than anything else.

Click for a demonstration (but we're warning you, it's annoying).

That annoying demonstration was accomplished by putting all of the alert statements into the <head> section of the page. This way, they load up before that page even displays. the code would look like this:

We followed this with another little <body> script with another write() method to give you a message:

document.write('wasn\'t that annoying?');

You may have noticed something a little strange in both code examples. In particular, this bit: alert('Isn\'t this annoying?'); If we didn't include the backslash (\) before the apostrophe, then the browser would think that the apostrophe was the end of the text part of the alert box. It then wouldn't know what to do with the rest of the statement, and would show you a big, fat error. Try it out and see.

This is called escaping a character. This basically means you are telling JavaScript to ignore the character that is following the backslash. You need to do this anytime you use a character that has some other meaning for JavaScript.

In case you were wondering, alert() is a method if the window object. One thing to note about the alert box is that it can be written on its own. You don't need to have window, or document in front of it.

Your First Scripts Summary

Scripts that will write out text or HTML code out onto the page must be placed in its <body> section.
To write out text or HTML to a page, we use the document object's write() method.
JavaScript statements should always end with a semicolon (;).
Scripts placed inside HTML tags write out text the same as if they weren't written out by JavaScript.
Alert boxes can be used to grab the viewer's attention.
When placing an event handler in an anchor, you can use href="#" as the link.
The return false; statement prevents the browser from acting on the link contained in the href attribute.
You can also use javascript:; as a link for an event handler, in which case you don't need the return false; statement.
Escaping a character using the backslash character (\) tells the browser to ignore the character that immediately follows it.
Alert() is a method of the window object.

Coming Soon:

Feb 13: ISSD 24 - XML

Feb 14: Web Design Level 4: XHTML Advanced

Feb 21: ISSD 23 - Web 2.0 Technology

Feb 23: Facebook for Business
Hours: 2
Cost: Free!

Feb 25: Search Engine Optimization (SEO)
Hours: 2
Cost: Free!

Feb 25: Search Engine Marketing (SEM)
Hours: 2
Cost: Free!

Feb 27: ISSD 24 - OLDB (Online Databases with MySQL and PHP)

Mar 05: ISSD 23 - Ajax

Mar 20: Web Design Level 5: DHTML Introduction

DHTML - TOC - Introduction - Books -
JavaScript Programming Fundamentals - Links - Questions -
1 - 2 - [ 3 ] - 4 - 5 - 6 - 7 - 8 - 9 -