为什么Javascript代码工作在底部而不是顶部?

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

本文关键字：顶部 底部 Javascript 代码 工作 为什么      更新时间：2023-09-26

这对我来说是个有趣的问题。下面的代码将工作，如果我在头部部分的页面顶部的代码。但代码将不工作，如果我有在页面底部的代码。这是为什么?我应该能够移动代码周围，它应该工作相同的我认为。因为当Java脚本位于Head部分上方时，它将检查页面是否加载了Action Listener。所以如果我把它放在页面的底部(脚本)，它将首先加载页面，然后运行我的脚本代码。

我想把这个放在页面的底部，看看它将如何在页面的底部工作。我应该能够使用承载脚本的load操作取出操作侦听器。

代码:

<!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页面的底部，并删除检查页面加载的代码，并在脚本语言的底部调用我的两个方法。

我不知道我是否在这里陈述了显而易见的事情，但是您的顶部代码将关闭</script>标记留在了头部，并且它在它下面的脚本末尾丢失了。将其从头部移除并将其添加到页面的末尾，这两种方式对我来说都很好。我在浏览器控制台(F12)中看到了

相关文章：