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

Question

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

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

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

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

Index.html 文件

*****更新****

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

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

Answer 1

尝试将行放在 JS 函数之外

document.getElementById(......

在

之间的 html 页面内

<script>HERE</script>

如果还是不行。尝试像这样向按钮添加 onClick 属性：

<button id="" onClick="testJsFile()">

在开发时使用 google chrome 元素检查也很好，因为它会给你所有这些东西的错误消息。

Answer 2

您正在 header 标签内添加 <script src="js/Test.js"></script> 的 js 文件。所以 js 将首先加载，并将所有事件附加到它。但是当加载 js 时 button id="jsTest" 不存在，因为 DOM 没有加载。

解决方案：-您可以采用任何一种方法

在 DOM 准备好后添加您的 js 文件

<body>
  <button id ="js/Test.js">Test JS</button>
     // other HTML tags
<script src = "js/Test.js></script>
</body>

使用window.onload

加载事件在文档加载过程结束时触发。

window.onload = testJsFile(){
  //Your code goes here
}

我更愿意使用第一种方法，因为它还可以解决其他问题，例如页面加载时间

Answer 3

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它。相反，您应该执行以下操作：

原版

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 link查看原版和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 对象中定义。

Answer 4

您在编辑器 window 中看到所有这些 "error" 消息的原因是您在编辑器中加载了各种 JSLint/Hint 工具。他们试图让您保持诚实，并为您节省大量调试器追逐潜在语法错误的时间。

XDK 内部的编辑器是 Brackets，它使用标准的 Brackets 扩展来提供那些 JSLint/Hint 工具。您可以下载它并运行它在您的系统上独立运行并直接在其中进行编辑，您不必使用 XDK 中的编辑器（或者您可以使用您喜欢的任何其他编辑器）。

因为 Lint/Hint 工具一次只查看一个文件，而且因为您的应用程序通常分布在多个文件中，所以它们不太了解其他文件中定义的内容。同样，这些 hint/lint 工具需要被告知您正在使用一些标准的全局方法和属性，这些方法和属性预计会在浏览器中找到（但在其他 JavaScript 环境中可能找不到，因为 JavaScript 不再仅限于浏览器环境——事实上，您的 XDK 应用程序，又名 Cordova 应用程序，运行s 在 "webview" 中而不是在浏览器中，但那是另一个故事...)

因此，您应该遵循一些标准做法，在 JS 文件的顶部设置 JSHint/Lint 指令。例如，这是一个很好的起点：

/*jslint browser:true, devel:true, white:true, vars:true */
/*global $:false, intel:false */

有关详细信息，请参阅 JSHint documentation...并参阅 Projects 选项卡的 "Start a New Project" 部分中的 "Blank Cordova Starter App" 以获得更好的空白模板开始（空白模板和演示应用程序之间没有真正的区别，它们的结构相同）。

如需更完整、更具指导意义的应用程序，请参阅 "Hello, Cordova" 示例应用程序。这两个应用程序也可以在 Intel XDK GitHub repo.

上找到

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

basic javascript alert not working in Intel XDK code editor

html

javascript

intel-xdk