codeguppy.com can also be used to practice algorithms or implement programs with basic data input UI. This page describes the support for this kind of programs.

• Printing data
• Building data input UIs

Printing data

Use the print and println instructions to quickly print numbers, strings and other information on top of the canvas. These instructions operates on a separate scrollable text layer.

These instructions are perfect for debugging programs, for practicing language elements or algorithms:

Print the numbers from 0 to 9

for(let i = 0; i < 10; i++)
{
    println(i);
}

Print the first 10 prime numbers

background('Shapes');

let found = 0;
let n = 0;

while(found < 10)
{
    if (isPrime(n))
    {
        println(n);
        found++;
    }

    n++;
}

// Returns true if specified number is prime
function isPrime(n)
{
    if (n < 2)
        return false;

    let max = sqrt(n);

    for(let i = 2; i <= max; i++)
    {
        if (n % i === 0)
            return false;
    }

    return true;
}

Note: println is adding a new line character after each print, while print is not.

Building data input UIs

codeguppy.com offers simple instructions for creating data input user interfaces.

Creating input boxes

To create a single-line input box, use the createEdit instruction, specifying the control position and width.

text("Your name", 300, 90);
let nameBox = createEdit(300, 100, 200);

To create a multi-line input box, you also need to specify the height. If you omit the height parameter, then the system will automatically build a single-line input box.

text("Comments", 300, 190);
let commentsBox = createEdit(300, 200, 300, 100);

Note that the createEdit instruction is returning a reference to the edit box object. You can use the following properties to manipulate edit box content.

• .text
• .readonly
• .visible
• .width
• .height
• .onchange

Example:

text("Your name", 300, 90);
let nameBox = createEdit(300, 100, 200);

text("Comments", 300, 190);
let commentsBox = createEdit(300, 200, 300, 100);

nameBox.onchange = handleNameChange;

function handleNameChange()
{
    commentsBox.text = "Thank you " + nameBox.text;
}

Creating buttons

Another UI element that you can create in the UI layer is a regular push button.

let btn = createButton(505, 100, 60, 20);
btn.text = "Enter";

The createButton instruction is returning a reference to the created button object. You can use this reference to access properties such as:

• .text
• .visible
• .disabled
• .width
• .height
• .onclick

Example:

text("Your name", 300, 90);
let nameBox = createEdit(300, 100, 200);

text("Comments", 300, 190);
let commentsBox = createEdit(300, 200, 300, 100);

let btn = createButton(505, 100, 60, 20);
btn.text = "Enter";
btn.onclick = handleButtonClick;

function handleButtonClick(sender)
{
    commentsBox.text += "Thank you " + nameBox.text + "\n";
}

This article is part of a series of mini-articles containing JavaScript coding hints applicable to codeguppy.com environment.

• Coding Hints. Part I: JavaScript syntax

• Coding Hints. Part II: Drawing

• Coding Hints. Part III: User Input

• Coding Hints. Part IV: Game Development

• Coding Hints. Part V: Other hints