In this tutorial, you’ll write your first JS++ program. The program’s purpose will be to get an HTML document to display "Hello World!" when opened with a web browser.
Before you can start writing code, you’ll need to decide which application to use to do the writing.
While in theory, you could use a standard text editor such as NotePad (on Windows) or TextEdit (on Mac OS), it would be better to use a code editing application that’s specially designed to help programmers with software development. One good code editor that’s compatible with JS++ is Visual Studio Code, which you can find here: https://code.visualstudio.com
To install Visual Studio Code, click the download button and follow the platform-specific installation guide here: https://code.visualstudio.com/docs/setup/setup-overview
After installing, you should add the JS++ Visual Studio Code plug-in, which you can find here: https://marketplace.visualstudio.com/items?itemName=Onux.jspp
For the rest of these tutorials, we’ll assume that you’re writing your code using Visual Studio Code.
Let's get started. To group your JS++ files together for this tutorial, create a new folder and name it "HelloWorld". Then create a new file and name it "HelloWorld.jspp" (without the quotes). Write in the following code:
// My first JS++ program // Adds the text "Hello World!" to the page external $; $("#content").text("Hello World!");
Don’t worry what the code means – we’ll get to that later. For now, let’s focus on getting your program up and running. Save HelloWorld.jspp to your HelloWorld folder. Then create a second file named "HelloWorld.html" and write in the following code:
<!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>
Save this file to your HelloWorld folder.
You should now see two files in your HelloWorld folder: HelloWorld.jspp and HelloWorld.html. Right click on HelloWorld.jspp and select "Compile with JS++". Now open HelloWorld.html with a web browser. If everything has worked, the document should display "Hello World!".
Open the Terminal, and navigate to your HelloWorld directory. Type in "js++ HelloWorld.jspp" without the quotes. Now open HelloWorld.html with a web browser. If everything has worked, the document should display "Hello World!".
> js++ HelloWorld.jspp
How does your browser know that it should execute the code in HelloWorld.jspp.js when HelloWorld.html is opened? The answer lies in this line of HelloWorld.html:
<script> tag in HelloWorld.html:
<script> tag is needed in HelloWorld.html because you used jQuery in writing HelloWorld.jspp. Look again at its first line:
This statement imports the jQuery library into HelloWorld.jspp, thereby enabling you to use jQuery in the code that comes after. (The "$" symbol here is just a shorthand for "jQuery"; we’ll look more generally at external import statements in Chapter 9.)
Now let’s look at the next line, breaking it down into two parts. First, we have:
Here, you use jQuery to select the HTML element with the ID "content":
Then, in the second part of the line, we have:
This sets the text of the selected element to "Hello World!".
Since you used jQuery in writing HelloWorld.jspp, it’s also used in the HelloWorld.jspp.js file that was created when you compiled HelloWorld.jspp. That is why the jQuery
<script> tag is needed in HelloWorld.html: without it, your browser would not be able to understand the jQuery code in HelloWorld.jspp.js.