如何在sublime text 2上运行javascript?

时间:2017-05-28 09:35:06

标签: javascript jquery html sublimetext2

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

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

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

<!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>

3 个答案:

答案 0 :(得分:0)

*.js是一个JavaScript文件扩展名。

href标记上没有<script>属性,这可能是jQuery不适合你的原因。将href更改为src

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

答案 1 :(得分:0)

您可能知道<ImagePixelated url={entity.image} height={90} width={90} /> 标记的工作原理。当涉及链接内容时,同样适用于<img>标签。例如,当您链接来自本地计算机的图像时,您必须提供类似<script>的文件位置,当您从本地计算机链接脚本时,您必须提供文件位置,如{{1}现在,这同样适用于计算机外部的链接,请从此链接<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>

答案 2 :(得分:0)

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

从菜单栏中:

档案 - &gt;新文件

之后:查看 - &gt;语法 - &gt; JavaScript

你只需选择一个javascript文件。

enter image description here

另一种简单的方法:

在Sublime中创建新文件,然后使用 yourAppName.js

.js 扩展名进行保存

enter image description here

另外,请确保将您的javascript文件放在<script>标记的源属性中指定的相应路径中。

检查我包含的第一张图片我把我的html文件和javascript文件放在同一个文件夹待办事项列表然后我可以通过以下方式将我的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

我希望这可以解决你的问题。