Compiling

Creating and Rendering an Animal

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

Compiling

Compilation is going to be slightly different compared to our previous tutorial examples due to our deep directory structure. Mac/Linux users won’t have to make much of an adjustment, but, for Windows users, we have to start using the Command Prompt....

Styling the Animals

Right now, our cat is quite small and hard to see. Let’s modify the styling to make our cat bigger and clearer....

Class Fields

Beyond methods that define the behavior for a class, classes can also hold data of their own. At its core, you can think of classes as data plus methods that operate on that data. For example, with pets like cats, we may want to be able to give the cat a name. The name is the data and examples of methods might be functions that allow us to set or change the name....

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