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>
Can I declare the function drawGraph() somewhere in the body? Do I need to declare it before it is called?
The order does matter. You'll need to have the drawGraph() function declared before it's called.
Keep in mind that many web platforms already use the window.onload method, and owing to the fact that window.onload can be called only once, you could have a script collision. You might consider using a different method for loading your script that builds the window.onload or waits for the page load to complete.
An example without using a JavaScript framework like JQuery would look like:
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:
$(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);
})
You should be able to have the drawGraph function anywhere in the document because it isn't called until the document is completely loaded. That means any <script> tags should have already been parsed and executed.
While order does matter, how you declare functions also matters. If you use the declaration syntax,...
function identifier ( arglist ) { body }
...then it will exist before the script is even executed regardless of where in the script you declared it (I'm not sure if this is standard for all interpreters, but it seems to apply within Firefox, Chrome, and Internet Explorer). However, that only applies to a single <script> tag. Declarations in other script tags won't exist until those scripts are parsed, which is after preceding scripts have executed.
<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 <script> tags be placed at the bottom of the document (I guess preceding the closing </body> tag) because of the way they are loaded in browsers.