To them, I say, "you're probably right..."
Q: But why?
A: Because by doing this, you are mixing your JavaScript in your HTML. This makes it somewhat difficult to debug sometimes, and it's just not "neat". Also there's instances where using In-line function calls can cause script errors (haven't personally encountered this, but if the internet says it's possible, it must be true.) These are the only reasons I can find that would make using the <body onload="function()"> method a terrible thing. So, as an exercise let's do it a different way.
onreadystatechange
This is the event we will use to detect when the state of the "document" has changed. We need to know when the "readyState" is "complete"... this means the document is completely downloaded and ready to be used.
For more information on this please visit:
This Page
Moving forward:
Any time the state of the document is changed, it will fire this event. So we need to therefor tell the script to do something when this event is changed to "complete".
To query this event:
In the above line we are telling onreadystatechange to execute a function when this.document triggers the event.this.document.onreadystatechange = function() {}
"This" - JavaScript Keyword
This can be pretty tricky, but basically refers to the "owner" of the element or function. For more information on "this" keyword, visit:
This Page
The Function
The following function can be used to check the ready state of the current document.
What's happening here? First, we assign the function to the onreadystatechange event. So when the onreadystatechange event is fired, it will then check to see if the document's ready state is equal to "complete". readyState of course being a property of document (and many other things as defined in the previously mentioned resource):this.document.onreadystatechange = function() {if(document.readyState == "complete") {}}
This Page
Now What?
Now, simply remove onload="HelloWorld()" from the <body> tag, and instead put HelloWorld(); between the {}'s inside your if statement that checks for the readyState.
this.document.onreadystatechange = function() {
if(document.readyState == "complete") {HelloWorld();
}
}
Conclusion
In conclusion, there are more than a million ways to skin a cat. Do which one works best for you. I prefer to check the ready state of the document. It allows me to execute a range of functions and set some important variables for later use. For instance, I use it to set the transform method and anything else that is constant... this way, when the transform method of the browsers become more standardized, I don't have to go through all my scripts and change the transform method, but instead can change the function that sets the transform method for every function I've written by changing how the variable is set when the document is ready.
Have fun!
No comments:
Post a Comment