Creating and Rendering an Animal

Open ‘src/Animals/Cat.jspp’ and enter the following code:

external $;

module Animals
{
    class Cat
    {
        void render() {
            var $element = $(
                """
                <div class="animal">
                    <i class="icofont icofont-animal-cat"></i>
                </div>
                """
            );

            $("#content").append($element);
        }
    }
}

One thing you may immediately notice is the multiline string (“””…”””). When we surround our string in triple quotation marks, we can write a “multi-line” string. Multi-line strings are a feature of JS++ that are especially useful when dealing with HTML. You’ll notice that, with multi-line strings, we didn’t have to escape our double quote characters (“) or newline characters.

Besides the multi-line string, we’re just passing some HTML to jQuery via the $(…) as usual. jQuery will recognize this as HTML and dynamically create the HTML elements for us. However, the dynamically-created HTML elements are still only held in memory unless we render it to the page. We do that with this line:

$("#content").append($element);

You’ll notice we named our variable for the jQuery element as $element. It is a common naming convention to prefix variables holding jQuery objects with the $ sign.

You may also have noticed that we declare the data type for the jQuery $element variable as ‘var’. As we discussed in previous chapters, there may not always be a corresponding JS++ data type for complex objects so we can just use ‘var’ in these cases (or even just for convenience).

Side Note: jQuery and the Document Object Model (DOM) API for manipulating web pages can be classified as “highly-dynamic.” Some large companies were incorrect to try to add static data types in these cases as there are many corner cases where static data types will be incorrect or fail – such as for ECMAScript “host objects, ” which includes the DOM API, where “implementation-defined” behavior, such as different browser implementations of the same DOM API methods, is valid according to the language specification (and indeed occurs in real-world implementations). Another example is the garbage collector implementation in versions of Internet Explorer where the GC can reclaim non-cyclic, in-use host objects (such as the “htmlfile” ActiveXObject used for real-time streaming) too early, a scenario that is not amenable to static analysis. Despite their convenience, the static data types in these cases create a “false sense of security.” However, discussion of these topics is outside the scope of this tutorial.

You will notice that we declared a function inside our ‘Cat’ class. A function declared inside a class is commonly called a “class method” or just “method” for short. Functions that are not members of a class are known as “free functions.”

We declared a class inside a module, so this file by itself will not compile. We need to create a “main file” to act as the program entry point. In your ‘src’ folder (the parent folder of the ‘Animals’ folder), you’ll recall we created an empty main.jspp file. Open the main.jspp file and enter these lines of code:

import Animals;

Cat cat = new Cat();
cat.render();

We first instantiate the class to get a class instance. Once we have a class instance, we call the ‘render’ method on that specific class instance.

JS++ | Fields and Methods

Similar Reads