我如何在 sublime text 2 上 运行 javascript?
How do I run javascript on sublime text 2?
我正在创建一个画板,我想知道如何在 Sublime Text 2 中创建一个 JavaScript 文件。当我保存文件时,我是否只将它保存为 index.js?通过这样做,是否意味着该文件是 JavaScript 文件?
我已经完成了以下操作,但我认为它并没有真正起作用。因为我在 html/css 中创建了一个按钮,并想使用 jQuery 给它一个淡入淡出的效果,当我编写代码并应用它时,没有任何反应。
那么如何在 Sublime Text 2 中将 JavaScript 和 HTML 转换为 link?
<!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 文件扩展名。
<script>
标签上没有 href
属性,这可能是 jQuery 不适合您的原因。将 href
更改为 src
:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
您可能知道 <img>
标签的工作原理。这同样适用于 <script>
标签,当涉及到 linking 东西时。例如,当您 link 来自本地计算机的图像时,您必须像 <img src="users/name/desktop/image.png">
一样提供文件的位置,当您 link 来自本地计算机的脚本时,您必须提供像 <script src="users/name/desktop/myScriptFile.js"></script>
这样的文件位置,现在同样适用于 links 在你的计算机之外,从这个 link https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js
说,你所要做的就是替换本地 link 到 link 外面,如:
来自
<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
在 Sublime Text 2 中创建 javascript 文件的方法有很多种。
从菜单栏:
文件 -> 新文件
之后:查看 -> 语法 -> JavaScript
您只需选择一个 javascript 文件即可。
另一个简单的方法:
在 Sublime 中创建新文件,然后用 .js 扩展名保存它,例如 yourAppName.js
还要确保将 javascript 文件放在您在 <script>
标签的源属性中指定的适当路径中。
检查我包含的第一张图片我把我的 html 文件和 javascript 文件放在同一个文件夹 Todos List 然后我可以 link 我的 javascript 文件 html 页来自:
<script type="text/javascript" src="todos.js"></script>
注意 src="todos.js"
我没有放 js 文件的完整路径因为它们已经在同一个 folder.but 如果你的 javascript 文件在不同的文件夹你应该放完整路径以便 link 它与 html 页面。
更新:
我检查了你的项目 images album 并且我测试 it.it 工作完美并且脚本文件 link 没有任何错误。
但我发现您的 CSS 文件中缺少内容,导致您无法查看按钮上 jQuery 事件的效果。
$(document).ready(function(){
$("button").mouseenter(function(){
$("button").addClass("highlight");
});
});
您应该在 CSS 文件中声明 highlight
class 以测试您的 jQuery 事件:
.highlight{
background-color: cyan;
}
检查这个非常适合您的案例的完整测试项目:
https://codepen.io/anon/pen/MmMNdR
希望这能解决您的问题。
我正在创建一个画板,我想知道如何在 Sublime Text 2 中创建一个 JavaScript 文件。当我保存文件时,我是否只将它保存为 index.js?通过这样做,是否意味着该文件是 JavaScript 文件?
我已经完成了以下操作,但我认为它并没有真正起作用。因为我在 html/css 中创建了一个按钮,并想使用 jQuery 给它一个淡入淡出的效果,当我编写代码并应用它时,没有任何反应。
那么如何在 Sublime Text 2 中将 JavaScript 和 HTML 转换为 link?
<!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 文件扩展名。
<script>
标签上没有 href
属性,这可能是 jQuery 不适合您的原因。将 href
更改为 src
:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
您可能知道 <img>
标签的工作原理。这同样适用于 <script>
标签,当涉及到 linking 东西时。例如,当您 link 来自本地计算机的图像时,您必须像 <img src="users/name/desktop/image.png">
一样提供文件的位置,当您 link 来自本地计算机的脚本时,您必须提供像 <script src="users/name/desktop/myScriptFile.js"></script>
这样的文件位置,现在同样适用于 links 在你的计算机之外,从这个 link https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js
说,你所要做的就是替换本地 link 到 link 外面,如:
来自
<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
在 Sublime Text 2 中创建 javascript 文件的方法有很多种。
从菜单栏:
文件 -> 新文件
之后:查看 -> 语法 -> JavaScript
您只需选择一个 javascript 文件即可。
另一个简单的方法:
在 Sublime 中创建新文件,然后用 .js 扩展名保存它,例如 yourAppName.js
还要确保将 javascript 文件放在您在 <script>
标签的源属性中指定的适当路径中。
检查我包含的第一张图片我把我的 html 文件和 javascript 文件放在同一个文件夹 Todos List 然后我可以 link 我的 javascript 文件 html 页来自:
<script type="text/javascript" src="todos.js"></script>
注意 src="todos.js"
我没有放 js 文件的完整路径因为它们已经在同一个 folder.but 如果你的 javascript 文件在不同的文件夹你应该放完整路径以便 link 它与 html 页面。
更新:
我检查了你的项目 images album 并且我测试 it.it 工作完美并且脚本文件 link 没有任何错误。
但我发现您的 CSS 文件中缺少内容,导致您无法查看按钮上 jQuery 事件的效果。
$(document).ready(function(){
$("button").mouseenter(function(){
$("button").addClass("highlight");
});
});
您应该在 CSS 文件中声明 highlight
class 以测试您的 jQuery 事件:
.highlight{
background-color: cyan;
}
检查这个非常适合您的案例的完整测试项目:
https://codepen.io/anon/pen/MmMNdR
希望这能解决您的问题。