JavaScript Tutorial Part 2 : The Script Tag and HTML

At the moment, we have our script between the two BODY tags. And it works perfectly well here. It’s quite happy where it is. However, SCRIPTS are best kept in the HEAD section of your HTML. This is because any code in the HEAD section will be dealt with first by the browser. And besides, it’s neater up there. You’re not cluttering up your HTML code with lots of JavaScript.

So, cut your script out of the BODY section, and paste it into the HEAD section. Like this:

<TITLE>A First Script</TITLE>


document.write(“Hello World”)





Save your work, and then view the results in your browser. Did it make a difference? No, it did not. But rest assured that your script was dealt with before anything in the BODY section.

You can also put your scripts into HTML tags. Here’s the document.write() code inserted into a Form’s Button code:

<INPUT TYPE = Button VALUE = “Click Me” OnClick = “document.write(‘Hello World’)”>
Looks a bit messy, but then scripting languages can get like that. Notice, however, that we’ve shifted the document code to our button:

OnClick = “document.write(‘Hello World’)”

OnClick is an event that can be applied to buttons (amongst other things.) We’ll get to Events later, but for now, note that the same code we wrote earlier then goes after an equals sign ( = ). Or is it the same code? Have you spotted the difference?

Yes, Hello World is now in single quotes! That’s because we used up our double quotes surrounding the document.write() part. And JavaScript doesn’t like you using two sets of double quotes in the same bit of code. There’s a lot of things that JavaScript doesn’t like. Get used to it.

So what have we learnt so far? We’ve learnt this:

  • Scripting code is written between a pair of <SCRIPT> </SCRIPT> tags
  • You can refer to the two BODY tags by using the word “document
  • You can use the write( ) method of document to insert stuff onto your web pages
  • JavaScript is very picky about the way you spell things

The Pop-up message box

We’ve seen one way to display text – with the write() method of document. Another way to display text (and numbers) is with a little pop-up box. These are called Alert boxes in JavaScript, and they are ideal for nagging your users when they don’t fill in your forms correctly. Here’s a picture of one:

Internet Explorer Alert Box

The code for an Alert box is quite simple. It’s this:

alert(“That was not a proper email address”)

Notice the cunning use of “alert” for an alert box? The message you want to get over to your users goes between the two brackets. Surround your text message with double quotes, or single quotes if you’re putting it after an equals sign in a HTML element.

OnClick = “alert(‘That was not a proper email address’)”

All right, now that we know how to nag our users with pop-up boxes and written messages, what else can we do? Lots, actually. Let’s have a look at that document thing again.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s