当前位置：极客教程 > JavaScript > JavaScript 教程 > JS++ 打印Hello World的程序

JS++ 打印Hello World的程序

JS++ 打印Hello World的程序

在本教程中，你将编写你的第一个JS++程序。该程序的目的是让一个HTML文档在用网络浏览器打开时显示 “Hello World！”。

Visual Studio代码

在你开始写代码之前，你需要决定使用哪种应用程序来进行编写。

  • 虽然在理论上，你可以使用一个标准的文本编辑器，如NotePad（在Windows上）或TextEdit（在Mac OS上），但最好是使用一个专门为帮助程序员进行软件开发而设计的代码编辑应用程序。一个与Js++兼容的好的代码编辑器是Visual Studio Code，你可以在这里找到它：https://code.visualstudio.com

  • 要安装Visual Studio Code，请点击下载按钮，并按照这里的特定平台安装指南进行安装：https://code.visualstudio.com/docs/setup/setup-overview

  • 安装后，你应该添加JS++ Visual Studio Code插件，你可以在这里找到： https://github.com/onux/jspp/tree/master/Editor Integration/Visual Studio Code

在这些教程的其余部分，我们将假设你是用Visual Studio Code编写代码。

编写代码

让我们开始吧。为了在本教程中把你的Js++文件分组，创建一个新的文件夹并命名为 “HelloWorld”。然后创建一个新文件并命名为 “HelloWorld.jspp”（不含引号）。写入以下代码。

// My first JS++ program
// Adds the text "Hello World!" to the page
external ;("#content").text("Hello World!");

不要担心这些代码是什么意思–我们稍后会讨论这个问题。现在，让我们专注于让你的程序启动和运行。把HelloWorld.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!”。

在Mac OS / Linux上运行该程序

打开终端，并导航到你的HelloWorld目录。键入 “js++ HelloWorld.jspp”，不要加引号。现在用一个网络浏览器打开HelloWorld.html。如果一切都成功了，该文件应该显示 “Hello World!”。

它是如何工作的？

你可能已经注意到，当你按照上面的说明编译HelloWorld.jspp时，在你的HelloWorld文件夹中创建了一个名为 “HelloWorld.jspp.js “的新文件。这是一个JavaScript文件，当你的浏览器打开HelloWorld.html时，它所包含的代码会被浏览器执行。执行该代码的效果是HelloWorld.html显示 “Hello World！”。

当HelloWorld.html被打开时，你的浏览器如何知道它应该执行HelloWorld.jspp.js中的代码？答案就在HelloWorld.html的这一行。

<script src="HelloWorld.jspp.js"></script>

HTML文档中的<script>标签要么本身包含可执行代码，要么（如本例中）指向另一个包含可执行代码的文件。当浏览器被用来打开HTML文档时，有关的代码（通常是JavaScript）会被浏览器执行。在我们的例子中，执行HelloWorld.jspp.js中的代码的效果是使文档显示 “Hello World!”。HelloWorld.html中的另一个<script>标签呢。

<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>

这一行指的是一个叫做jQuery的流行的JavaScript库。jQuery之所以流行，是因为它简化了对浏览器进行脚本处理的过程：它让你用比原来更少的代码来做事情。

HelloWorld.html中需要jQuery