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
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
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.
Top comments (0)