运行时编译顺序

我使用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正文中用于所有画布对象？

来源

2016-12-02 Zulu

确保你的脚本标签是画布元素，以下更好，做的东西文件加载后（在window.onload等） – georg

在脚本运行时画布尚不存在。 –

那就是为什么我们需要文档准备好状态...知道需要加载的所有东西:) –

我认为优先顺序是Web浏览器发布html代码，然后构建DOM图，然后我创建html对象后，javascript代码就会运行。

这是不正确的。一般来说，如果你的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>

来源

2016-12-02 14:07:34 Timo

谢谢！所以我想我应该总是把我的javascriptFile.js放在代码的底部呢？在/ body标签上方一行代码 – Zulu

或者，或者在'window.onload'事件被触发后执行你的代码，这表明页面已经被完全渲染。 – Timo

哦，我明白了，这很有趣。我还是不太了解window.onload的概念。我是否在html body标签上实现了这个？ – Zulu

运行时编译顺序

回答

相关问题