javascript - 基本 javascript 警报在英特尔 XDK 代码编辑器中不起作用

Question

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

我附上了测试代码和错误的屏幕截图。我知道语法是正确的，因为当我把它放在 <script> 中时它起作用了index.html 文件中的标签。 我收到“文档未定义”和“警报未定义”错误或 js 页面。我不知道那是什么意思。

我认为索引文件中的脚本标签 src 路径不正确，但英特尔在索引页上提供的注释掉的模板脚本标签中的所有路径都是相对的，所以我为什么要使用绝对路径？

我的路径是:js/Test.js，它是主体之前的最后一个脚本标记。

Index.html文件

*****更新****

所以我已经尝试了一些方法，但仍然无法正常工作，但我已经设法将我的错误减少到一个莫名其妙的“缺少分号”，如果我放置它，它将变成一个“不必要的分号”错误。 按照第一个屏幕截图的任何方式，您都会看到我没有将文档对象放在显式声明的变量中。一旦我这样做并通过点语法而不是等号访问它，我就不再收到错误。我包含此屏幕截图以显示我进行更改之前的工作。

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

Answer 1

JavaScript 可以在 HTML 之前或之后加载，但是根据您的操作方式，完成方式会略有不同。

例如，如果您希望将 JavaScript 文件包含在 HTML 文件的 head 中，那么您必须将 JavaScript 代码包装成DOMContentLoaded 或 jQuery 的 $(document).ready()。

使用 window.onload 的常见误解不会解决元素未正确加载的问题。

Mozilla 开发者网络在 this 上声明页:

The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. A very different event - load - should be used only to detect a fully-loaded page. It is an incredibly popular mistake to use load where DOMContentLoaded would be much more appropriate, so be cautious.

这句话本身应该证明 onload 不应依赖如果您希望在开始操作之前正确加载完整的 DOM。相反，您应该执行以下操作:

Vanilla

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. **/
});

点击this链接以查看 vanilla 和 jQuery 之间的区别。

加载 JavaScript 的第二种方法是将所有脚本标记放在正文中，但在所有 HTML 之后，这样可以保证在 HTML 之后加载。

示例

试试我快速编写的这个工作示例。

HTML

将 HTML 的 body 标记中的内容替换为以下内容:

<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 选项卡对其进行测试。

附加信息

当我使用 Intel XDK 时遇到错误，我会快速将文件加载到浏览器并检查控制台。对于消除那些讨厌的小错误，它可能是一种非常有用且有效的方法。

尝试使用 window.alert 作为 alert 是在 window 对象中定义的。