Why does the Javascript code work at the bottom and not at the top?

Question

This is an interesting problem to me. The code below will work if I have code at the top of the page in the Head section. But the code will not work if I have the code at the bottom of the page. Why is this. I should be able to move the code around and it should work the same I would think. Because the Java Script when it is above in the Head part it will check to see if the page is loaded with the Action Listener. So if I put it at the bottom of the page (script) it will load the page first and then run my scripting code.

I want to put this at the bottom of the page to see how it will work at the bottom of the page as well. I should be able to take out the action listener with the load action that carries the script.

Code:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ch2Ex9 Rotation Transformation #3</title>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvas" width="500" height="500">
 Your browser does not support the HTML 5 Canvas. 
</canvas>
</div>

<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded, false);  

function eventWindowLoaded() {
    canvasApp();
}

function canvasApp(){
    var theCanvas = document.getElementById('canvas');
    if (!theCanvas || !theCanvas.getContext) {
       return;
    }

    var context = theCanvas.getContext('2d');

    if (!context) {
       return;
    }

    drawScreen(); 

    function drawScreen() {
        //draw black square
        context.fillStyle = "black";
        context.fillRect(20,20 , 25, 25);
        //now draw a red square
        context.setTransform(1,0,0,1,0,0);
        var angleInRadians =45 * Math.PI / 180;
        var x=100;
        var y=100;
        var width=50;
        var height=50;
        context.translate(x+.5*width, y+.5*height);
        context.rotate(angleInRadians);
        context.fillStyle = "red";
        context.fillRect(-.5*width,-.5*height , width, height);
    }


}
</script> 
</body>
</html>

Code (Works):

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ch2Ex9 Rotation Transformation #3</title>
<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded, false);  

function eventWindowLoaded() {
    canvasApp();
}

function canvasApp(){
    var theCanvas = document.getElementById('canvas');
    if (!theCanvas || !theCanvas.getContext) {
            return;
    }

    var context = theCanvas.getContext('2d');

    if (!context) {
        return;
    }

    function drawScreen() {

        //draw black square
        context.fillStyle = "black";
        context.fillRect(20,20 , 25, 25);

        //now draw a red square
        context.setTransform(1,0,0,1,0,0);
        var angleInRadians =45 * Math.PI / 180;
        var x=100;
        var y=100;
        var width=50;
        var height=50;
        context.translate(x+.5*width, y+.5*height);
        context.rotate(angleInRadians);
        context.fillStyle = "red";
        context.fillRect(-.5*width,-.5*height , width, height);
    }

drawScreen(); 
}

</script> 
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
    <canvas id="canvas" width="500" height="500">
         Your browser does not support the HTML 5 Canvas. 
    </canvas>
</div>
</body>
</html>

the bottom code works in the bottom example and that is because it checks and loads the page first and then runs the script. I should be able to move this to the bottom of the HTML page and remove the code that checks the load of the page and just call my two methods at the bottom of the script language.

score 0 · Accepted Answer · answered Mar 16 '14 at 21:05

Don't know if I'm stating the obvious here, but your top code you have left the closing </script> tag in the head, and it is missing from end of the script below it. Removing this from the head and adding it to the end of the page makes its work fine for me, both ways. Just so you know, I saw this in the Console of the browser (F12)

Why does the Javascript code work at the bottom and not at the top?

1 Answers1