1. Technology

Your suggestion is on its way!

An email with a link to:

http://javascript.about.com/library/bladdjs1.htm

was emailed to:

Thanks for sharing About.com with others!

How to Attach JavaScript into Your Page.

Join the Discussion

Questions? Comments?

To be able to use JavaScript with our web pages the first thing that we need to know is how to actually attach the JavaScript into the web page. There are in fact several different places where JavaScript can be added to a web page. JavaScript can be embedded into the web page itself either between script tags within either the head or the body of the web page or by adding event handlers into tags within the page itself.

Of course while jumbling the JavaScript together with the HTML for your page will work it will make your job of maintaining the code much more difficult. A better solution is to separate the JavaScript from the HTML as much as possible into separate files. By keeping them separate you can easily reuse the JavaScript on multiple web pages with minimal effort as well as being able to make changes to the JavaScript without having to update every single page that uses it.

In addition by doing this we also end up with a much smaller HTML file where more of the content of the file is the actual content of the page. This should help the search engines to more easily figure out what the web pages are about and so give your pages higher rankings in the search results.

Separating the JavaScript from the HTML gives a number of benefits and is not all that much harder to write than the jumbled confusion of HTML and JavaScript that has been common with JavaScript authors in the past. Of course even where we separate the JavaScript and HTML into separate files we still need something to link them together. That something is a script tag in the head of the web page which attaches a specific JavaScript file to the web page.

The following HTML code illustrates how and where we should place the link to the JavaScript code into the HTML files. The one line of code that does the link will be the only line that needs to be repeated into another web page in order to add the same JavaScript to additional web pages.

Just before we look though, don't worry if you have never looked at HTML code before and have created all of your web pages using a "What you see is what you (almost) get" (WYSIWYG) web editor. If that is the case then the editor will be creating the HTML code for you which should look something like this example code anyway. That editor should also provide a way of adding a Javascript into the head of the page just like the following example and if it doesn't then you should be able to add the code manually yourself using a text editor to add the code exactly as shown.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>page title goes here</title>
<script type="text/javascript" src="myscript.js"></script>
<link rel="stylesheet" href="code.css" type="text/css">
</head>
<body>
<p>The content of your page goes here, including all the relevant HTML tags that describe what it is.</p>
</body>
</html>

The above code illustrates a number of important points when it comes to coding web pages the modern way where we keep the content, appearance, and behaviour of our site (the HTML, stylesheet and JavaScript respectively) separate from one another.

Firstly, our HTML starts with an HTML 4.01 strict doctype. Having the doctype as the very first thing in the content of the HTML is necessary in order to get Internet Explorer 6 into standards mode rather than quirks mode. This means that it will work more similarly to other web browsers requiring fewer code patches. We have chosen HTML 4.01 since the JavaScript code that we need to work with HTML is slightly simpler than that which would be required if we chose XHTML 1.0 (as we wont need to specify a namespace when accessing the DOM). The other disadvantage that XHTML has is that it is much more difficult to get Internet Explorer to process it properly as actual XHTML as Internet Explorer 8 and earlier do not recognise XHTML web pages as such and require that they be treated either as HTML or as XML. The reason for choosing version 4.01 is that it is the latest version of HTML and is therefore more compatible with modern and future browsers than earlier HTML versions are. The reason for not choosing XHTML 1.1 or XHTML 2.0 is that too few browsers actually support those standards well enough yet. The reason for choosing strict is that we want to separate the content and appearance and so we will not be using any of the deprecated HTML tags that used to be used to try to force a web page to look a certain way before the introduction of stylesheets. If your pages were written some time ago and do use these deprecated tags then you will need to use a transitional/loose doctype instead of a strict one. This will affect some of the Browser Object Model commands that you will need to use to have your page work correctly with Internet Explorer.

The main part of the web page consists of two parts – the head of the page which contains information about the page such as the title of the page which appears in the browser title bar and any JavaScripts and stylesheets that are attached to the page and the body of the page which contains the HTML that describes what the content of the web page is made up of – headings, paragraphs, lists, links, images etc. What we want to do in order to keep our content, appearance, and behaviour separate is to NOT put any additional JavaScript code anywhere in the web page beyond the one line of HTML that is shown in the script above (perhaps repeated two or more times if we need to include multiple scripts in the same page).

If you view the source of any web page on the web you can see how that web page is put together. Most of those that you look at that use JavaScript will have JavaScript commands both within script tags in the body of the page and also using event handlers hard coded into individual tags. By the time that you have learnt JavaScript properly you will be able to take such a script out of someone's page and rewrite it in such a way that it will be able to work from an entirely separate file linked in using the one script tag in the head that we have just looked at. One thing to be careful of though is copyright. Once you get beyond JavaScripts of just two or three lines you soon reach the point where there are many different ways of coding a script that will produce exactly the same results. When someone writes such a script that script is then automatically subject to copyright (at least in most countries) and you would be breaching the owners copyright if you just copy their script. Of course there is nothing to stop you from examining the code to see how they do it and then making use of your own knowledge of JavaScript and without looking at their code you then write your own version of the script to perform that task. As you will have been the one to write that script you will be entitled to the copyright on your version of the script. Because you will have learnt to write JavaScript in a way that keeps it separate from the HTML your version will probably continue to be usable for a lot longer that the original script whose effect you duplicated with your own code.

©2014 About.com. All rights reserved.