Skip to content

A1 - Introduction to the kijj UI Library

  • Run the update
  • In Visual Studio Code, open the newly created Unit 4 folder
  • Open index.html with Live Server, and read through the code in index.js

Try to get a sense of how index.js works by just reading through the code, then to get a deeper understanding, check out the full documentation of the kijj library here.

Some Notes Regarding the Docs

The docs assume a basic knowledge of Object Oriented Programming. Specifically, how constructors are used, and how inheritance works. Both are introduced below:

Constructors

When you see a constructor method in the documentation, it is not a normal method like the other ones. It is a method that is automatically called when a new instance is created, and the arguments the constructor accepts get provided when the instance is created.

For example, the constructor for a KTextBlock accepts a string of text. You will provide the constructor arguments as you are creating the object, like this:

let myTextBlock = new KTextBlock("This is the text")

Inheritance

KComponent is the base class for all other components.

The other components extend KComponent, meaning that they all inherit the methods defined in KComponent.

Therefore, when you see a component like KSelectBox documented with only a constructor and one additional method, you need to remember that KSelectBox also has all methods defined in it's parent class, KComponent.

Your Task

Try one or both of the following, or something similar of your choice. You'll probably want to do each of these in a new JavaScript file, each modelled off of the example. You would need to edit the index.html file to point to the JavaScript file you're currently working on.

Option 1

Create a calculator for a more complex formula. For example, compound interest or the quadratic formula.

Option 2

Create a madlib.