如何在 sublime text 2 上运行 javascript？答案

【问题标题】：How do I run javascript on sublime text 2?如何在 sublime text 2 上运行 javascript？
【发布时间】：2017-10-28 18:40:54
【问题描述】：

我正在创建一个草图板，并且想知道如何在 Sublime Text 2 中创建一个 JavaScript 文件。当我保存文件时，我只是将它保存为 index.js 吗？这样做是否意味着该文件是 JavaScript 文件？

我已经完成了以下操作，但我认为它并没有真正起作用。因为我在 html/css 中创建了一个按钮并想使用 jQuery 给它一个淡入淡出效果，当我编写代码并应用它时，什么也没发生。

那么如何让 JavaScript 和 HTML 在 Sublime Text 2 中链接？

<!DOCTYPE html>
<html>
<head>
  <title>Etch-A-Sketch</title>
  <link rel="stylesheet" type="text/css" href="etchASketch.css">
  <script type="text/javascript" href="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
  </script>
  <script type="text/javascript" src = "etchASketch.js"></script>   
</head>

【问题讨论】：

*.js 是一个javascript文件，所以是的。您需要保存一个文件（例如，etchASketch.js）。由于使用了href 而不是src，您的jQuery 将无法工作

标签： javascript jquery html sublimetext2

【解决方案1】：

*.js 是 JavaScript 文件扩展名。

<script> 标签上没有 href 属性，这可能是 jQuery 不适合您的原因。将href 更改为src：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

【讨论】：

好的，我试过了，还是没有。你想看看我的代码，也许它有问题？我在下面附上了一张专辑，上面有 HTML、CSS 和 javascript 代码的图片，最后一张图片表明它们也都在同一个文件夹中（突出显示的文件）imgur.com/a/VLr5t

【解决方案2】：

您可能知道<img> 标签的工作原理。在链接内容时，<script> 标签也同样如此。例如，当您从本地计算机链接图像时，您必须提供文件的位置，例如 <img src="users/name/desktop/image.png">，类似地，当您从本地计算机链接脚本时，您必须提供文件位置，例如 <script src="users/name/desktop/myScriptFile.js"></script>，现在同样适用于您计算机外部的链接，从这个链接说https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js，您所要做的就是将该本地链接替换为外部链接，例如：

来自

<script src="users/name/desktop/myScriptFile.js"></script>

到

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

它的src 不是href

【讨论】：

好的，我试过了，还是没有。你想看看我的代码，也许它有问题？我在下面附上了一张专辑，上面有 HTML、CSS 和 javascript 代码的图片，最后一张图片显示它们也都在同一个文件夹中（突出显示的文件）imgur.com/a/VLr5t

【解决方案3】：

在 Sublime Text 2 中有很多方法可以创建一个 javascript 文件。

从菜单栏：

文件 -> 新文件

之后从：视图 -> 语法 -> JavaScript

您只需选择一个 javascript 文件。

另一种简单的方法：

在 Sublime 中创建新文件，然后使用 .js 扩展名保存它，例如 yourAppName.js

还要确保将您的 javascript 文件放在您在 <script> 标记的源属性中指定的适当路径中。

检查我包含的第一张图片我将我的 html 文件和 javascript 文件放在同一个文件夹中 Todos List 然后我可以通过以下方式将我的 javascript 文件与 html 页面链接：

<script type="text/javascript" src="todos.js"></script>

注意src="todos.js" 我没有放 js 文件的完整路径，因为它们已经在同一个文件夹中。但是如果您的 javascript 文件在不同的文件夹中，您应该放置完整路径以便将其与 html 页面链接.

更新：

我检查了您的项目images album 并对其进行了测试。它运行良好，脚本文件链接正常，没有任何错误。

但我发现您的 CSS 文件中缺少一个阻止您查看按钮上的 jQuery 事件的效果。

$(document).ready(function(){
  $("button").mouseenter(function(){
      $("button").addClass("highlight");
  }); 
});

您应该在 CSS 文件中声明 highlight 类以测试您的 jQuery 事件：

.highlight{
    background-color: cyan;
}

检查这个完全适合您的案例的完整测试项目：

https://codepen.io/anon/pen/MmMNdR

我希望这能解决你的问题。

【讨论】：

谢谢，这很有帮助。
不客气！如果您觉得我的回答有用，请按正确按钮接受它。
@FatimaA。我找到了你的问题并解决了它检查我更新的答案。
是的，确实有效！太感谢了！但是为什么我必须在 CSS 中声明高亮类呢？我必须在 CSS 中将每个 jQuery 事件声明为一个类吗？
因为当你用 $("button").mouseenter(function(){ $("button").addClass("highlight"); }); 触发 jQuery 事件时您实际上向元素按钮添加了一个 css 类选择器，因此如果 CSS 文件中没有 .highlight 类，则该事件将不起作用检查谷歌浏览器中的检查以查看在按钮元素上触发 jQuery 事件时的差异。还可以查看 jQuery .addClass() 事件文档以了解它是如何工作的：api.jquery.com/addclass