基本的javascript警报在英特尔XDK代码编辑器

时间：2016-01-10 05:18:08

标签： javascript html intel-xdk

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

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

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

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

js file with errors

enter image description here Index.html文件

***** **** UPDATE

所以我尝试过一些事情并且仍然无法正常工作但我已经设法将我的错误归结为一个无法理解的错误分号＆＃34;这将变成一个＆＃34;不必要的分号＆＃34;如果我放置它会出错。 无论如何，根据第一个屏幕截图，您将看到我没有将文档对象放在显式声明的变量中。一旦我这样做并通过点语法而不是等号访问它然后我停止得到错误。在我进行更改之前，我将此屏幕截图显示在我的工作中。 not using var keyword was giving me error

所以我接下来要解决的问题是，除非使用＆＃34; Var＆＃34;声明每个函数或dom对象，否则我会收到错误。这包括alert（）函数，我不认为我曾经看过需要以这种方式声明，但我给了代码编辑器它想要的东西，最后的截图是结果。它没有工作，但我没有得到我以前的错误，除了缺少/不必要的分号悖论。删除它或包含它会引发错误。 No errors, but not working

4 个答案:

答案 0 :(得分：6)

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

例如，如果您希望将JavaScript文件包含在head文件的HTML中，则必须使用JavaScript或jQuery {{{{{{{{ 1}}。

使用DOMContentLoaded的常见误解无法解决元素未正确加载的问题。

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

  

当初始HTML文档已完全加载并解析时，会触发DOMContentLoaded事件，而无需等待样式表，图像和子帧完成加载。一个非常不同的事件 - 加载 - 应该仅用于检测完全加载的页面。使用负载是一个非常流行的错误，其中DOMContentLoaded会更合适，所以要小心。

该引用本身应该证明{em}不应该依赖于，如果你希望在开始操作它之前正确加载完整的DOM。相反，您应该执行以下操作：

<强>香草 

$(document).ready()

<强>的jQuery 

window.onload

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

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

示例

试试这个工作示例我快速编码了。

<强> HTML

将onload的{​​{1}}标记内的内容替换为以下内容：

document.addEventListener("DOMContentLoaded", function (e) {
    /** DOM has been fully loaded here, so manipulation can begin. **/
    /** Your code here. **/
});

使用以下内容替换JavaScript的内容：

<强>的JavaScript 

$(document).ready(function () {
    /** DOM has been fully loaded here, so manipulation can begin. **/
    /** Your code here. **/
});

然后使用英特尔XDK中的模拟标签对其进行测试。

其他信息

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

尝试使用body，因为HTML对象中定义了<button id="myJsTest">Click Me!</button> <div id="clickCounter">Click Count: 0</div> 。

答案 1 :(得分：1)

您正在<script src="js/Test.js"></script>标记内添加header的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
}

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

答案 2 :(得分：1)

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

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

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

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

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

有关详细信息，请参阅JSHint documentation ...并查看＆＃34; Blank Cordova Starter App＆＃34;在＆＃34;开始一个新项目＆＃34; 项目标签的一部分可以启动更好的空白模板（空白模板和演示应用之间没有真正的区别，它们的结构相同）。

要获得更完整，更具指导性的应用，请参阅＆＃34; Hello，Cordova＆＃34;示例应用。这两个应用程序也可以在Intel XDK GitHub repo上找到。

答案 3 :(得分：-1)

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

的document.getElementById（......

之间的html页面内的

<script>HERE</script>

如果仍然无效。尝试将onClick属性添加到按钮，如下所示：

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

使用谷歌浏览器元素检查也很好，同时开发cuse它会给你所有这些东西的错误信息。

相关问题
最新问题