Naming our Animals with Fields and Methods

While our first example for class fields involved naming, we never actually added a name field to our classes. However, rather than just naming our cats, let’s also make it tangible by making the name visible in the web browser when we hover over the animal. As we showed in our previous example, fields like the name should be unique to the class instance – no two cat elements on the page should be showing the same name if they were given different names.

Insert the following code into Cat.jspp:

external $;

module Animals
{
    class Cat
    {
        string name;

        var $element = $(
            """
            <div class="animal">
                <i class="icofont icofont-animal-cat"></i>
            </div>
            """
        );

        void setName(string name) {
            this.name = name;
        }

        void render() {
            $("#content").append($element);
            $element.attr("title", name);
        }
    }
}

We added a new field: ‘name’ with type ‘string’. We also added a new method ‘setName’. It contains only one line of code:

this.name = name;

You’ll notice the method takes one parameter called ‘name’:

void setName(string name) {
    this.name = name;
}

In order to disambiguate the ‘name’ parameter from our ‘name’ class field, we need to use ‘this’. When two conflicting names appear in the same method, this is known as “variable shadowing.” It’s a convenience so that we don’t have to come up with different variable names to describe the same concept. Thus, what our statement is saying is: set the ‘name’ class field (‘this.name’) to the ‘name’ value passed in as an argument to our method.

The ‘this’ keyword inside a class refers to the class instance. Class instance methods, like the ‘setName’ method we just defined, cannot be called unless the class has been instantiated first. Once we’ve instantiated the ‘Cat’ class, we can call the ‘setName’ method. When we call the ‘setName’ instance method, the ‘this’ keyword refers to the class instance that executed the method. Thus, the above statement will set the ‘name’ field of the class instance that ‘setName’ is being executed on; it is always unique to the class instance; thus, no two class instances will end up having the same ‘name’ field set after a ‘setName’ method call.

Finally, we added the following statement to our ‘render’ method:

$element.attr("title", name);

This will set the HTML ‘title’ attribute of our cat HTML element that we render to the page. By setting the ‘title’ attribute, we can set the text that appears when we hover over an HTML element. In this case, when we hover over our cat element, we will see its name.

Before we can see our results, we must set the names of our cats in main.jspp. Let’s do that:

import Animals;

Cat cat1 = new Cat();
cat1.setName("Kitty");
cat1.render();
Cat cat2 = new Cat();
cat2.setName("Kat");
cat2.render();

Make sure ‘setName’ is called before the ‘render’ method.

Compile the code. Once again, for Windows, Mac, and Linux users, the command is now all the same:

$ js++ src/ -o build/app.jspp.js

If the program compiled successfully, open index.html. Hover your name over each cat. You should see its name.