基本的javascript警报在Intel XDK代码编辑器中不起作用

Question

我刚刚开始使用一个新的空白英特尔项目,我还没有开始编码.我只是设置我的文件树并确保通过正确的锚点和脚本路径连接html和javascript页面.我的第一个.js文件不起作用.

我已经包含了测试代码和错误的屏幕截图.我知道语法是正确的,因为当我将它放在<script>index.html文件中的标签中时它会起作用.我得到"文件未定义"和"警告未定义"错误或js页面.我不知道这意味着什么.

我认为我的索引文件中的脚本标记src路径不正确,但所有路径都是相对的注释掉的模板脚本标签intel提供的索引页面开箱即用,为什么我必须使用绝对路径？

我的路径是:js/Test.js,它是正文之前的最后一个脚本标记.

Index.html文件

*****UPDATE****

所以我尝试了一些东西,它仍然没有用,但我设法将我的错误归结为一个莫名其妙的"缺少分号",如果我放置它将变成"不必要的分号"错误.按照第一个屏幕截图,您将看到我没有将文档对象放在显式声明的变量中.一旦我这样做并通过点语法而不是等号访问它然后我停止得到错误.在我进行更改之前,我将此屏幕截图显示在我的工作中.

所以我接下来的问题是,除非每个函数或dom对象都用"Var"声明,否则我会收到错误.这包括alert()函数,我认为我从未见过需要以这种方式声明,但我给了代码编辑器它想要的东西,最后的截图是结果.它不起作用,但我没有得到我以前的错误,除了缺少/不必要的分号悖论.删除它或包含它会引发错误.

Answer 1

JavaScript可以在之前或之后加载HTML,但是它的完成方式略有不同,具体取决于您的操作方式.

例如,如果您希望将JavaScript文件包含head在HTML文件中,那么必须JavaScript使用DOMContentLoadedjQuery或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为以下内容:

<button id="myJsTest">Click Me!</button>
<div id="clickCounter">Click Count: 0</div>

用以下内容替换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对象.