Newbie: Javascript must be in the header to run? Does the order of these functions make sense?
I have this function in my head:
<head>
window.onload = function(){
var x = new Array(0,2,3,4,5,6,7,8);
var y = new Array(20,10,40,30,60,50,70,10);
drawGraph(y,x);
}
</head>
Is it possible to declare the drawGraph () function anywhere in the body? Do I need to announce it before calling it?
source to share
Be aware that many web platforms already use the window.onload method, and because window.onload can only be called once, you might run into the script. You might want to use a different method to load the script that creates the window. Loading or waiting for the page to finish loading.
An example without using a JavaScript framework like JQuery would look like this:
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
}
else {
window.onload = function() {
oldonload();
var x = new Array(0,2,3,4,5,6,7,8);
var y = new Array(20,10,40,30,60,50,70,10);
drawGraph(y,x);
}
}
}
An example using jQuery would look like this:
$(document).ready(function() {
var x = new Array(0,2,3,4,5,6,7,8);
var y = new Array(20,10,40,30,60,50,70,10);
drawGraph(y,x);
})
source to share
You can have a function drawGraph
anywhere in the document because it is not called until the document is fully loaded. This means that any tags <script>
must already be parsed and executed.
While order matters, how you declare the functions matters too. If you are using declaration syntax ...
function identifier ( arglist ) { body }
... then it will exist before the script is executed even no matter where in the script you declared it (I'm not sure if this is standard across all interpreters, but it seems to apply in Firefox, Chrome and Internet Explorer ). However, this only applies to the tag <script>
. Declarations in other script tags will not exist until those scripts have been parsed, which is after the execution of the previous scripts.
<html>
<head>
<script type="text/javascript">
function check_existance()
{
if(!check_existance.i)
check_existance.i = 0;
document.write("<h5>Call : " + ++check_existance.i + "</h5>" +
"func1 : " + typeof func1 + "<br />" +
"func2 : " + typeof func2 + "<br />" +
"func3 : " + typeof func3 + "<br />" +
"func4 : " + typeof func4 + "<br />");
}
</script>
<script type="text/javascript">
check_existance();
func1 = function()
{
alert("func1");
};
check_existance();
function func2()
{
alert("func2");
}
</script>
</head>
<body>
<script type="text/javascript">
check_existance();
func3 = function()
{
alert("func3");
};
check_existance();
function func4()
{
alert("func4");
}
</script>
</body>
</html>
Output:
Call: 1
func1: undefined
func2: function
func3: undefined
func4: undefined
Call: 2
func1: function
func2: function
func3: undefined
func4: undefined
Call: 3
func1: function
func2: function
func3: undefined
func4: function
Call: 4
func1: function
func2: function
func3: function
func4: function
I believe YSlow recommends placing tags <script>
at the bottom of the document (before closing the closing tag, I think </body>
) because of the way they load in browsers.
source to share