Account Log In - Home/Outlines - Books - Contact Us - Support - Employment -

DHTML

JavaScript Programming Fundamentals

Your First Scripts

Yay! 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 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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>

<h2>
<script language="JavaScript" 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.

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.

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>

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 later versions of Internet Explorer, you may notice that IE still makes that 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:

<script language="JavaScript" type="text/javascript">
<!--
alert('This is an example of how to misuse the JavaScript Alert box.');
alert('Each time you click "ok", another one pops up.');
alert('You can\'t even close your browser window until the demonstration is done.');
alert('Isn\'t this annoying?');
alert('This could potentially go on forever');
alert('Ok, we\'ll stop.');
alert('But first, you have to promise to never do this.');
alert('You have to promise..');
alert('Are you sure your fingers aren\'t crossed?');
alert('Hey! Your toes too!');
alert('OK, we believe you.');
alert('This concludes annoying JavaScript test number 1.');
//-->
</script>

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

Free seminars, open to the public:
Free seminars, open to the public:

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

Previous PageTop of page. Accesskey=.Next Page
DHTML - TOC - Introduction - Books -
JavaScript Programming Fundamentals - Links - Questions - Quiz -
1 - 2 - [ 3 ] - 4 - 5 - 6 - 7 - 8 - 9 -