Website Design United States, Website Design California, Website Designing United States, Website Designing California

JavaScript

JavaScript is useful.

It's a way of getting that extra bit of interactivity onto any webpage, while not being too difficult to understand or use to your advantage. This tutorial won't cover the basics of JavaScript, so its recommended you look for a decent online tutorial (google keyword "Thau's JavaScript Tutorial") if your knowledge is lacking in that subject. This tutorial basically covers getting the scripts you've created to work on all the (major) browsers out there through object detection. "But JavaScript is one scripting language, why should scripts be different on different browsers?", I hear you asking. The answer to that lies within the programmers that write the web browsers. They can't resist adding in that one little function, or tweaking command 'A' do something slightly different. It is normally their opinion (but hardly anyone elses) that this is a good thing. Unfortunately all this ends up doing is creating more hassle for the web designers that spend tears and sleepless nights trying to get sites working and looking the same on all browsers.

Never ever use browser detection to handle your website. For example, Jim wants to use the document.images object for an image swap. What he shouldn't do is check if the browser is IE4, just because he knows that IE4 supports document.images. What about all the other browsers that support that object? They will be deprived of that certain function which might have added that little extra interactivity. Always check for the object. Instead of Jim checking for IE, he should have checked to see if document.images exists and is usable, and then carried out that certain function if it is.

A simple way he could have checked would have been:

if(document.images) {
// Carry out Jim's image swap
}

Always check for the object, not the browser.

Now, to explain the code above:

Its just a basic if statement. If document.images exists, true will be returned to the statement and Jim's image swap will begin! Otherwise, the code in the if statement will not be carried out, thus producing no errors if the object Jim used doesn't exist.

Okay, now you have a basic understanding of object checking, lets show you a few things which you might need this checking for. The solution shows an example and is the best solution in the chance that the certain object you are trying to access is not provided. It may be an alternative way of doing something, or just how to prevent annoying JavaScript errors.

//////////////////////////////////////////////////////////////////////////////////////

Name: document.images
Why use it: Image swaps, other image modification
Doesn't work on: IE3 and under, NS2 and under, Opera 3.6 if the script it is being used cross-frame.

Solution:

<html>
<head><title>Test</title></head>

<body>
<img src="pic1.jpg" name="picture1" onmouseover="if(document.images)
document.picture1.src = 'pic2.jpg';" />
</body>

</html>

---------------------------------------
Name: window.focus
Why use it: change the focus onto different elements such as text boxes and other elements of forms
Doesn't work on: Opera 5 on mac, Opera 5 on Linux. Bugs with Opera 3 and 4 and Netscape 4 on Linux.

Solution:

<html>
<head><title>Test</title></head>

<body>

<form name="someform">
<input type="text" name="sometext" />
</form>
<br /><br />

<a href="#" onclick="if(window.focus)
document.myform.mytext.focus();">Set focus</a>
</body>

</html>

---------------------------------------
Name: DHTML? Yes or no
Why use it: use dhtml to dynamically change stylesheets and html. Makes for easy interactivity.
Doesn't work on: Netscape 3 and below, IE 3 and below.

Solution:

<html>

<head><title>Test</title>
<script language="javascript" type="text/javascript">
var i = false;
if(document.getElementById || document.all || document.layers) {
// Browser only needs to support one of these to allow dhtml.

i = true;
}
if(i) document.write("Your browser supports DHTML!");
</head>
</body>

</html>

--------------- Example ----------------------------

<html>
<head><title>Test</title>

<script language="javascript" type="text/javascript">

if(document.getElementById) {
function movedown() {
document.getElementById('dhtmlLink').style.position="relative";

document.getElementById('dhtmlLink').style.top="100";
}

}
</script>

</head>

<body>
<a id="dhtmlLink" href="#" onmouseover="movedown()">

Place your mouse here (nothing will happen if you're browser doesn't
support getElementById)
</a>
</body>
</html>

<body>
<a id="dhtmlLink" href="#" onmouseover="shakeleft()"

onmouseout="stoptimer()">
Place your mouse here (nothing will happen if you're browser doesn't
support getElementById)
</a>
</body>
</html>

------------------------------------------------------
Name: Showing and hiding divs.
Why use it: Make things magically appear and disappear.
Works fine on: ie 4 and above, ns 4 and above, most other browsers. The tricky part is getting it to work on all the modern browsers.

Solution:

<html>

<head><title>Test</title>

<style type="text/css">
body {
}
#divone {
margin: 0;

padding: 2px 0 2px 5px;
width: 300px;
height: 20px;
background-color: #066;

font-family: verdana, sans-serif;
font-size: 15px;
color: #ddd;
}
</style>

<script language="javascript" type="text/javascript">

function changeDivOne(divstatus) {
if(document.getElementById) {
document.getElementById("divone").style.visibility = divstatus;

// If the browser supports getElementById the change the
// Visibility of the tag with the id 'divone'

}

if(document.layers) {
document.divone.visibility = divstatus;

// If the browser supports layers (netscape) then we can change
// the visibility this way

}

if(document.all) {
document.all.divone.visibility = divstatus;

// Same thing but through document.all, for the older ie versions.
}
}

</script>

<div id="divone" name="divone">Here is some text inside divone</div>
<!-- id and name both used for backwards compatability ---
<br />

<input type="button" value="hide" onclick="changeDivOne('hidden')" />

<input type="button" value="show" onclick="changeDivOne('visible')" />

</body>
</html>

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

We have now arrived to the end of the tutorial. Hopefully it's given you an insight into how different browsers handle things, and what to do in those situations. Please bear in mind this isn't a complete guide. It should be enough to give you a good push in the right direction, or just make for some interesting light reading. I'll hopefully bring out part 2, a more advanced javascript compatability tutorial (if people like this one!).

See you.
Paul

Author Information:

Paul...

http://

Comments:

Add your comments here.

Name

Comment

You can also send feedback to feedback@programmers-corner.com

Ami - February 24, 2005 11:18 AM

Hi,
The information here is really useful, but would like some more information as to if the object is not supported by a browser what is the alternative solution.

Cerulean - May 6, 2005 6:57 PM

Hi Ami,
Do you have any particular object in mind?















 


© 2008-2009 dotnet4all.com