在本教程中,您将编写第一个JS++程序。该程序的目的是获得一个HTML文档来显示“Hello World!”当用网络浏览器打开时。
Visual Studio代码
-
从理论上讲,你可以使用标准的文本编辑器,比如NotePad(在Windows上)或TextEdit(在Mac OS上),但最好使用专门为帮助程序员进行软件开发而设计的代码编辑应用程序。与JS++兼容的一个好的代码编辑器是Visual Studio代码,您可以在这里找到: https://code.visualstudio.com
-
要安装Visual Studio代码,请单击下载按钮,然后按照此处的平台特定安装指南进行操作: https://code.visualstudio.com/docs/setup/setup-overview
-
安装后,您应该添加JS++Visual Studio代码插件,可以在下面找到: https://github.com/onux/jspp/tree/master/Editor集成/Visual Studio代码
对于这些教程的其余部分,我们将假设您正在使用Visual Studio代码编写代码。
在开始编写代码之前,您需要决定使用哪个应用程序来编写代码。
编写代码
让我们开始吧。要为本教程将JS++文件分组,请创建一个新文件夹,并将其命名为“HelloWorld”。然后创建一个新文件,并将其命名为“HelloWorld.jspp”(不带引号)。编写以下代码:
// My first JS++ program // Adds the text "Hello World!" to the page external $; $("#content").text("Hello World!");
不要担心代码的意思——我们稍后会讨论这个问题。现在,让我们专注于启动并运行您的程序。拯救地狱世界。jspp到HelloWorld文件夹。然后创建第二个名为“HelloWorld.html”的文件,并编写以下代码:
<!DOCTYPE html> <title>My first JS++ program</title> <body> <p id="content"></p> <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script> <script src="HelloWorld.jspp.js"></script> </body> </html>
将此文件保存到HelloWorld文件夹。
在Windows上运行该程序
您现在应该在HelloWorld文件夹中看到两个文件:HelloWorld。jspp和HelloWorld。html。右键点击HelloWorld。jspp并选择“用JS++编译”。现在打开HelloWorld。带有网页浏览器的html。如果一切正常,文档应该显示“Hello World!”。
在Linux上运行Mac/OS程序
打开终端,导航到HelloWorld目录。输入“js++HelloWorld.jspp”,不带引号。现在打开HelloWorld。带有网页浏览器的html。如果一切正常,文档应该显示“Hello World!”。
它是怎么工作的?
在编译HelloWorld时,您可能已经注意到了这一点。jspp按照上面的说明,在HelloWorld文件夹中创建了一个名为“HelloWorld.jspp.js”的新文件。这是一个JavaScript文件,它包含的代码在浏览器打开HelloWorld时由浏览器执行。html。执行该代码的效果就是HelloWorld。html显示“你好,世界!”。
您的浏览器如何知道应该在HelloWorld中执行代码。jspp。当HelloWorld的时候。html被打开了吗?答案就在这一行的HelloWorld中。html:
<script src="HelloWorld.jspp.js"></script>
这个 <script>
HTML文档中的标记本身包含可执行代码,或者(在本例中)指向另一个包含可执行代码的文件。当浏览器用于打开HTML文档时,相关代码(通常是JavaScript)由浏览器执行。在我们的例子中,是在HelloWorld中执行代码的效果。jspp。js将使文档显示“Hello World!”。另一个呢 <script>
在HelloWorld中标记。html:
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
这一行指的是一个名为jQuery的流行JavaScript库。jQuery之所以受欢迎,是因为它简化了编写浏览器脚本的过程:它可以让你用更少的代码来做事情,而不是编写代码。
jQuery <script>
在HelloWorld中需要标记。html,因为您在编写HelloWorld时使用了jQuery。jspp。再看看它的第一行:
external $;
此语句将jQuery库导入HelloWorld。jspp,从而使您能够在后面的代码中使用jQuery。(这里的“$”符号只是“jQuery”的简写;我们将在第9章更全面地了解外部导入语句。)
现在让我们看下一行,将其分为两部分。首先,我们有:
$("#content")
在这里,您可以使用jQuery选择ID为“content”的HTML元素:
<p id="content"></p>
然后,在第二部分,我们有:
.text("Hello World!");
这会将所选元素的文本设置为“Hello World!”。
因为您在编写HelloWorld时使用了jQuery。jspp,它也在HelloWorld中使用。jspp。编译HelloWorld时创建的js文件。jspp。这就是为什么jQuery <script>
在HelloWorld中需要标记。html:如果没有它,浏览器将无法理解HelloWorld中的jQuery代码。jspp。js。
希望这能让您大致了解JS++与JavaScript和jQuery结合使用的方式,至少在HelloWorld项目的上下文中是这样。如果你觉得在现阶段还没有完全掌握这些问题,不要担心。通过学习教程,您将对JS++及其与JavaScript和jQuery的关系有一个更全面的了解。