Question

我在Javascript编码，我得到一个例子，我认为这很奇怪。

示例：

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,20,0,2*Math.PI);
ctx.stroke();
</script> 

</body>
</html>

以上示例工作并输出一个圆圈。

但是，当我尝试将脚本的确切代码复制到javascript.js文件时，圆圈不再存在。为什么会这样？

<!DOCTYPE html>
<html>
<head>
<script src="javascriptFile.js"></script>
</head>

<body>
<canvas id="myCanvas"></canvas>
</body>

</html>

我认为优先顺序是web浏览器发布html代码，然后构造我认为javascript代码在创建html对象后运行的DOM。我尝试在画布中放置一个函数createShape（），然后将其余的代码插入到javascriptFile.js文件的函数createShape（）{}中，但是也没有。

我是否必须始终将javascript代码放在所有画布对象的html主体中？

Answer 1

我认为优先顺序是网页浏览器发布html代码，然后构建我认为javascript代码在创建html对象后运行的DOM。

这是不正确的。通常，如果您的JavaScript代码在其尝试访问的元素之前出现在源代码中（并且未明确marked as defered），那么它将是executed before the browser continues to parse the page.

将脚本嵌入到正文的底部，你应该没问题：

<!DOCTYPE html>
<html>
<head></head>
<body>
    <canvas id="myCanvas"></canvas>
    <script src="javascriptFile.js"></script>
</body>
</html>

运行时编译顺序

1 个答案: