Question

这对我来说是一个有趣的问题。如果我在Head部分的页面顶部有代码，则下面的代码将起作用。但是如果我在页面底部有代码，代码将无法工作。为什么是这样。我应该能够移动代码，它应该像我想的那样工作。因为Java脚本位于Head部分的上方，所以它将检查页面是否加载了Action Listener。因此，如果我将它放在页面底部（脚本），它将首先加载页面，然后运行我的脚本代码。

我想把它放在页面底部，看看它在页面底部的工作原理。我应该能够使用带有脚本的加载操作取出动作监听器。

代码：

<!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>

代码（作品）：

<!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>

底部代码在底部示例中工作，这是因为它首先检查并加载页面然后运行脚本。我应该能够将它移到HTML页面的底部并删除检查页面加载的代码，并在脚本语言的底部调用我的两个方法。

Answer 1

不知道我是否在这里陈述了明显的内容，但是您的顶级代码已经在头部留下了结束</script>标记，并且在它下面的脚本末尾丢失了它。从头部删除它并将其添加到页面的末尾使得它对我来说都很好，两种方式。你知道，我在浏览器的控制台（F12）

中看到了这一点

为什么Javascript代码在底部而不是在顶部？

1 个答案: