The first uses the standards compliant method, "getElementById()", where the value of the HTML id attribute is placed within the parenthesis to identify which element is being referred to.

<form id="blueForm">

<input type="text" name="myText" id="blueElm">

The JavaScript reference for the text field in the above form would be:

document.getElementById("blueElm")

As you can see, it is a much shorter reference than the dot path with its listing of every containing object. Most of these lessons don't use the getElementById() method. This is because there still exists all over the web, scripts which use the dot path (I'm a believer in learning by example), and you must use the dot path when working with custom made objects. However, many CSS identifiers are applied to HTML elements which do not fit into any object containment hierarchy (other than the document). In these cases, it is nesscessary - as you'll see when you reach the dynamic html section of this site. You will not be hurt or have to unlearn anything by using both techniques.

If you have quality content on your webpage and want to prevent people stealing your resources, you can add this script to disable the right-mouse click. This does not assure complete safety for your resources (there is always a way to copy them), but it is better than nothing. :)

Click here to see a demo page.

Note1:The following script works for IE6 and Netscape.

Note2:Right click cannot be disabled for Opera browsers!
The Javascript function that is listed below. To use it paste the code into the section of your page

Do you remember the browser detection script we worked on a while back? Then you probably remember how much trouble it was to detect a specific browser type before we could run certain scripts. Here was how we had to do it:

browserName=navigator.appName;
browserVer=parseInt(navigator.appVersion);
if ((browserName=="Netscape" && browserVer>=3) || (browserName=="Microsoft Internet Explorer" && browserVer>=4))
version="n3";
else
version="n2";

That is a lot of code to run through, and it can be much worse when you create a script that has a lot of browser differences. Well, instead of checking for the browser, we could have checked for the javascript object that we needed for the script to work. Since we know that a hover button script needs the document.images object to work, we could shorten the above code to say:

Changing a select element's content on the fly is a powerful feature of JavaScript that's just as practical. It forms the basis of implementing inter-dependant select menus, where the selection of one menu changes the contents of another. In this tutorial, lets look at how this is done, and also, how to create a 2 level interdependent select list using the technique. Sounds like fun!

JavaScript and Frames. Frames and JavaScript. Sounds like a mess doesn't it? Well, it does make things a bit more complicated. Let's see if we can figure out how to get those frames to work with our scripts.

The first thing you will want to know is "How in the land of JavaScript do I access javascript variables and other things in one frame from another frame? The answer is to use a trick like this:

parent.framename.attributes_to_change

Replacing framename with the name you gave the frame in your frameset, ie:

<FRAME src="jex14.htm" name="right_frame">

In this case, you would access something in that frame with:

parent.right_frame.attributes_to_change