Hello World - Your First JS++ Program

By Charles Kozeny-Pelling

Charles Kozeny-Pelling is a graduate of the University of Oxford

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.

Code Editor

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.

Writing the 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.

Running the program on Windows

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

Running the program on Mac OS / Linux

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 did it work?

You might have noticed that when you compiled HelloWorld.jspp by following the instructions above, a new file named "HelloWorld.jspp.js" was created in your HelloWorld folder. This is a JavaScript file and the code it contains is executed by your browser when the browser opens HelloWorld.html. The effect of executing that code is that HelloWorld.html displays "Hello World!".

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 src="HelloWorld.jspp.js"></script>

The <script> tag in an HTML document either itself contains executable code, or (as in this case) points to another file that contains executable code. The code in question (typically JavaScript) is executed by a browser when the browser is used to open the HTML document. In our case, the effect of executing the code in HelloWorld.jspp.js is to make the document display "Hello World!".What about the other <script> tag in HelloWorld.html:

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

This line refers to a popular JavaScript library called jQuery. jQuery is popular because it simplifies the process of scripting the browser: it lets you do things with less code than you would otherwise have to write.

The jQuery <script> tag is needed in HelloWorld.html because you used jQuery in writing HelloWorld.jspp. Look again at its first line:

external $;

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:

$("#content")

Here, you use jQuery to select the HTML element with the ID "content":

<p id="content"></p>

Then, in the second part of the line, we have:

.text("Hello World!");

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.

Hopefully this should give you a broad outline of the way in which JS++ is used in combination with JavaScript and jQuery, at least in the context of the HelloWorld project. Don’t worry if you feel that you don’t yet have a full grasp of these issues at this stage. As you work your way through the tutorials, you’ll gain a more general understanding of JS++ and its relation to JavaScript and jQuery.

Previous Next