Combining JavaScript and HTML
This chapter is from the book
This chapter is from the book
This chapter is from the book
A Meeting of Worlds—JavaScript and HTML
So, you know how HTML works, and you now know a little about JavaScript. The next step is to look at how the two come together and work in harmony on a Web page.
Because HTML and JavaScript are entirely separate technologies, rules exist as to how JavaScript can be slotted in to the HTML of a Web page. There are, in fact, several ways to add JavaScript to a Web page, but to get you started we are initially going to concentrate just on the most commonly used and arguably the most flexible method. In this method, JavaScript is inserted in a script block into the <head> tag.
Let's take a look at how we can do this.
The HTML Skeleton
Before moving on, you must be familiar with the anatomy of an HTML page. Here is the HTML code for the very basic Web:
<html> <head> <title>A Simple Page</title> </head> <body> <p>A very simple Web page indeed!</p> </body> </html>
The part of this page you need to be aware of from a JavaScript point of view is the HTML block beginning with the opening tag <head>and closing with </head>. This is the <head> block of the page, also known as the header of the Web page, and it is here that you will be placing your JavaScript.
However, you can't just place the code directly into the <head>. There's something else you must do first!
The SCRIPT Block
To place the JavaScript inside the <head>tags, you must add a new HTML block to the <head>. This block is the <script> block. The purpose of this <script> block is to tell the browser that whatever is contained within its opening and closing tags is a script—and it should deal with it as such.
This block can be added anywhere inside the <head> block but is normally added at the end, before the closing </head>tag:
<html> <head> <title>A Simple Page</title> <script> </script> </head> <body> <p>A very simple Web page indeed!</p> </body> </html>
One reason the <script> block is put in the header is that by placing it here you guarantee that it is loaded before anything else, which dramatically reduces the scope for errors.
Before you can add JavaScript to the <script> block, you must do a few more things. The first of these tasks is to tell the browser which type of script is contained within the <script> block tags. This is because JavaScript isn't the only Web scripting language you could use. Another widely used scripting language is Microsoft's VBScript. So, to tell the browser that the language you are using is JavaScript, you first must add the language attribute to the <script> tag as follows:
<html> <head> <title>A Simple Page</title> <script language=""> </script> </head> <body> <p>A very simple Web page indeed!</p> </body> </html>
You declare that the language used is JavaScript by typing JavaScript inside the quotes:
<html> <head> <title>A Simple Page</title> <script language="JavaScript"> </script> </head> <body> <p>A very simple Web page indeed!</p> </body> </html>
NOTE
If, for example, you wanted to write a script in VBScript, the language would be set to "vbscript":
<script language="vbscript">
Let's take a look at two points.
First, quotes. On some occasions, you might look at some JavaScript code and see the language declared with no quotes used to surround the word. Everything seems to work just fine, so why bother typing them in? Well, again it is one of those times when it is better to be absolutely correct. Even though both Internet Explorer and Netscape Navigator browsers understand the language with or without the quotes, the proper form is to use the quotes, so that is why it is shown as such here. There might come a time when the browsers demand that HTML be written correctly. By writing well-formed HTML now, you are ensuring your skills are future-proof!
The second point is one of case sensitivity. Take a look at the following:
<script language="javascript"> <script language="JavaScript"> <script language="JAVASCRIPT">
What is the difference? Right, they are each written with various forms of capitalization. Throughout this book we will be using "JavaScript" but when creating your Web pages, by far the best to use is all lowercase. Not only is this quicker, it is far less prone to typos.
Now again, if you look at scripts written on the Web, you sometimes notice that the "language" attribute is omitted. Well, again this works fine. The reason behind this is that, because JavaScript was the first scripting language to appear, it is considered to be the default. However, to maintain properly formed Web pages, it is best to include it. This again ensures that the skills you learn today are future-proof.
More on the "language" Attribute
There is more to the language attribute than meets the eye. Although just plain old JavaScript is the default, quite a few versions or flavors of JavaScript exist. JavaScript 1.0, JavaScript 1.1, JScript, and so on are all available. You can actually use the language attribute to specify exactly which version you have written for. Which version you specify really depends on the browser and JavaScript version you want to run the script as. This sounds a bit complicated, but let's look at a few examples, which will help.
If you use <script language="JavaScript">, you are telling the browser it is just JavaScript and to use your JavaScript engine (the program that actually interprets the JavaScript) to run it. This is the default. However, if you want the JavaScript to just run on Microsoft's Internet Explorer, the best way to do this is to define the JavaScript you have written as JScript, as follows:
<script language="JScript"> </script>
Now, any JavaScript contained in the <script> block runs in only the Internet Explorer browser.
What if you wanted to target Netscape Navigator 3.0 users? You might already know that this browser had version 1.1 of JavaScript. This means that if you used the following language settings, only Netscape Navigator 3.0 would run your JavaScript:
<script language="JavaScript1.1"> </script>
CAUTION
Remember that the default is language="JavaScript". Be careful not to inadvertently set the language to something else because this might cause your script not to run in the new browsers, and sometimes spotting this mistake can be tricky!
Hiding JavaScript from Older Browsers
Browsers prior to Netscape Navigator 2.0 cannot run JavaScript at all, and if they come across JavaScript in a Web page, it causes them to generate some really ugly errors. To avoid the possibility of such errors, hide any script you place on the page by putting HTML comment tags inside the <script> block. This is quick and simple to add, and even though older browsers are pretty rare nowadays, inserting the comment tags into your HTML template so that they appear on every Web page that contains JavaScript is still worthwhile.
These comment tags are easy to add. Inside the <script> tags, insert another pair of tags, <!--and -->. All the code you write goes in between these tags and is then ignored by any browser that doesn't understand what the <script> tags mean.
NOTE
It might seem strange to place anything you want the browser to use inside comment tags because these are used to prevent text on the page from being displayed. But the fact is that all the browsers that understand script also know to ignore these comment tags and proceed as though they weren't there.
To make the comment tags more obvious, oftentimes developers place some (sometimes entertaining!) comments inside these HTML comment tags telling others who might view the code what they do:
<script language="JavaScript "> <!--Cloaking device on! //Cloaking device off --> </script>
The page now looks like the following:
<html> <head> <title>A Simple Page</title> <script language="JavaScript "> <!--Cloaking device on! //Cloaking device off --> </script> </head> <body> <p>A very simple Web page indeed!</p> </body> </html>
NOTE
Believe it or not, you've just come across your first small bit of JavaScript! This is the JavaScript comment tag (/). These are different from HTML comment tags.