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

Question

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

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

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

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

Index.html文件

***** UPDATE ****

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

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

Answer 1

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

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

使用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

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

附加信息

当我使用英特尔XDK并且出现错误时，我会快速将文件加载到浏览器中并检查控制台。 它可以是一个非常有用和有效的方法来压缩那些讨厌的小错误。

尝试使用window.alert因为在window对象中定义了alert 。

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

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

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

我更愿意使用第一种方法，因为这也解决了页面加载时间等其他问题

Answer 3

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

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

因为Lint / Hint工具一次只查看一个文件，并且因为您的应用程序通常分布在多个文件中，所以他们对您的其他文件中定义的内容知之甚少。 同样，需要告诉那些提示/ lint工具你正在使用一些预期在浏览器中找到的标准全局方法和属性（但在其他JavaScript环境中可能找不到，因为JavaScript已经不再存在了）仅限于浏览器环境 - 实际上，您的XDK应用程序（即Cordova应用程序）在“webview”内部运行，而不是在浏览器中，但这是另一个故事...）

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

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

见JSHint文档的详细信息...看看“空白科尔多瓦入门应用” 项目选项卡的“启动新项目”一节中一个更好的空白模板开始（有一个空白模板和之间没有真正的区别演示应用程序，它们结构相同）。

有关更完整，更具指导性的应用程序，请参阅“Hello，Cordova”示例应用程序。 这两个应用程序也可以在Intel XDK GitHub仓库中找到。

Answer 4

尝试将该行放在JS函数之外

的document.getElementById（......

在你的html页面之间

<script>HERE</script>

如果这仍然没有用。 尝试将onClick属性添加到按钮，如下所示：

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

它也很好使用谷歌铬元素检查，而devlopping cuse它会给你所有这些东西的错误消息。

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

问题描述

4 个解决方案

解决方案1
6 已采纳 2016-01-12 23:14:36

解决方案2
1 2016-01-10 07:23:26

解决方案3
1 2016-01-18 01:02:22

解决方案4
-1 2016-01-10 05:42:38

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

问题描述

4 个解决方案

解决方案1 6 已采纳 2016-01-12 23:14:36

解决方案2 1 2016-01-10 07:23:26

解决方案3 1 2016-01-18 01:02:22

解决方案4 -1 2016-01-10 05:42:38

解决方案1
6 已采纳 2016-01-12 23:14:36

解决方案2
1 2016-01-10 07:23:26

解决方案3
1 2016-01-18 01:02:22

解决方案4
-1 2016-01-10 05:42:38