Forum Moderators: open
For example:
Prompt: "Enter your destination page."
*user types in "texas"*
*script automatically redirects to "http://www.server.com/texas.html"*
Many thanks for any pointers!
-Rich
Better yet, use unobtrusive JavaScript instead of mixing JavaScript with your markup.
<script type='text/javascript' src='myscript.js'></script>
Then in your script file you have an init function that attaches events to whatever elements you like. Include this function in your file:
function addEvent(elm, evType, fn, useCapture)
{
//Credit: Function written by Scott Andrews
//(slightly modified)var ret = 0;
if (elm.addEventListener)
ret = elm.addEventListener(evType, fn, useCapture);
else if (elm.attachEvent)
ret = elm.attachEvent('on' + evType, fn);
elseelm['on' + evType] = fn;return ret;
}
The last line of your script file should probably be:
addEvent( window, "load", myInitFunction);
That means with just one line of JS in your markup, your progam will launch itself when the page has loaded and do whatever is in your init function. For example these functions:
function myInitFunction() {
var aTags = document.getElementsByTagName( "A");for( var a = 0; a < aTags.length; a++)
addEvent( aTags[ a], "click", clicked);
}function clicked() {
alert( "Ouch!");
return true;
}
The init function will look up all A tags on the page, then tell them that whenever the mouse clicks on them it will pop up and say "Ouch!", which some people may find slightly amusing. The 'return true;' will ensure that the link actually works, if it returned false then the page wouldn't move.
If you have something in mind you want to try post a new thread and someone will be able to help you with it.
If you have something in mind you want to try post a new thread
I just didn't understand why
<body onload="">
might be considered the less-preferred way of doing it. I understand the code you posted, but I'm still not really seeing why onload is 'bad'. Is it somewhat akin to the desire to use css to separate presentation from content?
I often use 4 or 5 scripts on a page, each self contained. So you'd have to use
<body onLoad='initThis(); initThat(); doSomething(); doSomethingElse(); reportThings();'>
you see it starts to get messy. The addEvent function I gave you is additive, i.e. if in your script you put window.onload = "doThis()"; it removes anything else assigned to window.onLoad, but addEvent will do just that, add an event so you can stack up as many as you like.
rmisssy did you manage to fix your problem?
I just didn't understand why
<body onload="">
might be considered the less-preferred way of doing it. I understand the code you posted, but I'm still not really seeing why onload is 'bad'. Is it somewhat akin to the desire to use css to separate presentation from content?
<body onLoad='something();'> I personally would use if I only had 1 function to run, I don't see a problem with that.
What's the difference between running 1 function and 10 functions? The issue is that you've now mixed your behavior with your content. If you ever decide to change the behavior, you may need to modify your content. If you need to debug a problem, you now have more than one place to look (in the content and in the behavior files). If all of the pages in your site have some common functionality that occurs onload, then you'll need to go modify all of your content pages if you decide to change that onload behavior.
For example, suppose every page in your site has this:
<body onload="animateBackground();">
Now suppose you decide that you no longer want that behavior... instead, you want to run a different function, or maybe you decide that you don't want to run anything at all. So now you'll need to go to all of your pages that have this onload attribute and modify them one-by-one. If, on the other hand, you had done this in an unobtrusive way by including some script which attached the onload behavior, you only need to modify that 1 script to affect the entire site.
The addEvent function I gave you is additive, i.e. if in your script you put window.onload = "doThis()"; it removes anything else assigned to window.onLoad, but addEvent will do just that, add an event so you can stack up as many as you like.
Right, attaching events is generally a better practice than straight out defining the window.onload event. Personally, I prefer to use the Yahoo UI Library [developer.yahoo.com]'s Event Utility [developer.yahoo.com] for this. It makes working with events a piece of cake (cross-browser compatible)!
[edited by: Fotiman at 3:31 pm (utc) on April 19, 2007]
The issue is that you've now mixed your behavior with your content. If you ever decide to change the behavior, you may need to modify your content
Agreed. As long as it's only 1 event on 1 tag, and it looks tidy, I just write it as I'm doing the markup.
If, on the other hand, you had done this in an unobtrusive way
Anything that requires more than the above example I generally do. A good example of this is my unobtrusive pre-caching image mouseover script. It searches images by classname, and automatically attaches onMouseOver, onMouseOut, and onMouseDown to them. I realise this isn't the best example, you still have the classname as the identifier but hey, imaging doing that to every image!
Personally, I prefer to use the Yahoo UI Library's Event Utility for this. It makes working with events a piece of cake (cross-browser compatible)!
I prefer to learn by doing. I always write my own code, even if I find other scripts that do it, I find it's great experience and a fast way of learning to try to reproduce the effects yourself. Incidentally, I believe that addEvent function is also cross browser. I have to say I pinched it, hence the guys name on it. Google "10 useful javascript functions", they have a few good ones that should be in every JS coders toolbox!
Also, imagine if Yahoo suddenly moved or removed that file? I don't like things being out of my control.