我刚刚开始使用一个新的空白英特尔项目,我还没有开始编码.我只是设置我的文件树并确保通过正确的锚点和脚本路径连接html和javascript页面.我的第一个.js文件不起作用.
我已经包含了测试代码和错误的屏幕截图.我知道语法是正确的,因为当我将它放在index.html文件中的标签中时它会起作用.我得到"文件未定义"和"警告未定义"错误或js页面.我不知道这意味着什么.
我认为我的索引文件中的脚本标记src路径不正确,但所有路径都是相对的注释掉的模板脚本标签intel提供的索引页面开箱即用,为什么我必须使用绝对路径?
我的路径是:js/Test.js,它是正文之前的最后一个脚本标记.
Index.html文件
*****UPDATE****
所以我尝试了一些东西,它仍然没有用,但我设法将我的错误归结为一个莫名其妙的"缺少分号",如果我放置它将变成"不必要的分号"错误.按照第一个屏幕截图,您将看到我没有将文档对象放在显式声明的变量中.一旦我这样做并通过点语法而不是等号访问它然后我停止得到错误.在我进行更改之前,我将此屏幕截图显示在我的工作中.
所以我接下来的问题是,除非每个函数或dom对象都用"Var"声明,否则我会收到错误.这包括alert()函数,我认为我从未见过需要以这种方式声明,但我给了代码编辑器它想要的东西,最后的截图是结果.它不起作用,但我没有得到我以前的错误,除了缺少/不必要的分号悖论.删除它或包含它会引发错误.
JavaScript可以在之前或之后加载HTML
,但是它的完成方式略有不同,具体取决于您的操作方式.
例如,如果您希望将JavaScript文件包含head
在HTML
文件中,那么必须JavaScript
使用DOMContentLoaded
jQuery或jQuery 包装代码$(document).ready()
.
使用的常见误解window.onload
不会解决元素未正确加载的问题.
Mozilla开发者网络在此页面上说明:
完全加载和解析初始HTML文档时会触发DOMContentLoaded事件,而无需等待样式表,图像和子帧完成加载.一个非常不同的事件 - 加载 - 应该仅用于检测完全加载的页面.使用负载是一个非常流行的错误,其中DOMContentLoaded会更合适,所以要小心.
如果您希望在开始操作之前正确加载完整的DOM,那么该引用本身应该证明onload
不应该依赖它.相反,你应该做以下事情:
香草
document.addEventListener("DOMContentLoaded", function (e) { /** DOM has been fully loaded here, so manipulation can begin. **/ /** Your code here. **/ });
jQuery的
$(document).ready(function () { /** DOM has been fully loaded here, so manipulation can begin. **/ /** Your code here. **/ });
单击此链接可查看vanilla和jQuery之间的区别.
加载JavaScript的第二种方法是将所有脚本标记放在正文中,但是在所有HTML之后,这样就可以保证在HTML之后加载.
例
尝试这个工作示例我快速编码.
HTML
将body
您标记内的内容替换HTML
为以下内容:
Click Count: 0
用以下内容替换JavaScript的内容:
JavaScript的
document.addEventListener("DOMContentLoaded", function() { var clickCount = 0; document.getElementById("myJsTest").addEventListener("click", function() { clickCount++; document.getElementById("clickCounter").innerText = "Click Count: " + clickCount; }); });
然后使用Intel XDK中的Emulate选项卡对其进行测试.
附加信息
当我使用英特尔XDK并且出现错误时,我会快速将文件加载到浏览器中并检查控制台.它可以是一个非常有用和有效的方式来压缩那些讨厌的小错误.
尝试使用window.alert
如alert
在定义window
对象.