Integrating Javascript and DHTML into Webpages

Incoorporating Javascript and DHTML (Dynamic HTML) into your webpages is actually a lot easier and less confusing than you think. Javascript is a very basic programming language, and anyone who fully understands HTML and CSS should not have too much of a problem dealing with it. If you don't even know what Javascript is, or what it's used for, you should read this.

Gee whiz, don't I sound awfully smart. Golly!

Much like CSS, you can define your Javascripts:
1. Inside the page you're working on, inside of the headers
2. Inside the page you're working on, inside the body HTML itself.
3 . Externally, and linked to the page you'd like
4 . In each element you want to have a behaviour

The easiest, and least complicated way to define Javascript is right in your document. This, of course like anything else, has various limitations. For instance, if you want to use some of the same functions and variables in another document you're going to have to find them in the original document and copy and paste them into the new one, every single time. And if you have a hundred pages... that could get pretty boring (does this paragraph look farmilar to anyone that read the first CSS guide? :S).

Define a script inside of a document, like so:

<head>

<title>Monkeyslunch.com - FAQ's</title>

<script language="javascript">
<!--
document.write("hello, Mrs. Nesbit!")

-->
</script>
</head>

<body>

When you open the page with this script on it it will simpy write "hello, Mrs. Nesbit!" in the body of the page, before anything else is executed. Now, you could actually put the script anywhere on the page if you wanted, as long as you have the <script> tags, and in fact sometimes this can be quite helpful. You see, if you just want to define a bunch of Javascript functions at the beginning of your page and then call them later with event handlers, that will work fine for you. However, when a browser loads a page it loads it one line at a time, basically, so if you want that "hello, Mrs. Nesbit!" to appear somewhere else without using an event handler you're going to have to place your document.write script somewhere else within the page. Do so at your leisure!

Did you know though, that you can create outside Javascipt libraries and link to them? Much like CSS, you can create an external Javascript library and link your pages to it, in fact, you can even make multiple libraries and link more than one to the same page. You do this in basically the same way CSS does, only you save your files in the .js format:

<head>

<script type="text/javascript" src="http://monkeyslunch.com/js/slfunctions.js"></script>
<script type="text/javascript" src="http://monkeyslunch.com/js/writefunctions.js"></script>

</head>


Your page will now act as though everything in those libraries is actually a part of your current page that they are linked to.

When would you want to use Javascript though? Well, there are plenty of different times when you would. People use it to validate forms so that the user cannot input the incorrect information before submitting, they can make the page more dynamic by creating things such as sliding menus, and even games could be written in Javascript. One man went through all the trouble of recreating the classic Lemmings game in Javascript and DHTML- it was simply amazing, only now there's a huge legal battle between himself and the original respected owners of Lemmings.

That brings up another valid point though. Most people won't go through the trouble of writing their own scripts, they'll just browse the internet and take someone else's. This is actually quite common with Javascript, and a lot of creators even encourage it, although you should still give credit to the original author, AND make sure that they are indeed one of those people that doesn't mind if their scripts are "borrowed".

Let's make up a function just to show you how Javascript can (at the very rudimentary level) be incoorporated into webpages:

<head>
<script language="javascript">

function changeText ()
{

  • x = document.getElementById("mySpan");
    x.style.display = "block";
  • return false;
}

</script>
</head>
<body>
<a href="#" class="content" onclick="return changeText()">Hello Mrs. Nesbit!</a> :

<span id="mySpan" style="display:none;">Hello to you too, Danny! The cactus got out of it's pen again!</span>

Hello Mrs. Nesbit! :

So, we can call functions that change things on a page without even reloading it. What's happened here is that we have an anchor tag (the ones you use for linking) that calls our function when it is clicked on. Not only that, but it returns that false value at the end of the function to stop any browsers from reloading the page, just in case they get confused. Our function allows us to turn on the display styling of the hidden span tag and we can now see it! Weeeeeehaw! This is how we create sliding menus.

The parameter onclick that called our function changeText is called an event handler. In order to call a function you need an event handler- there are many different types, including onclick, onload, onfocus, onmouseover, onmouseout, and you get the idea. A function is delcared somewhere in your Javascript, and when the event handler calls the function everything inside of the functions { } parenthesis is executed.

This concludes the Javascript integration tutorial.

-Spence