EasyCoder documentation


Browser commands

Browser commands are those that apply to the visual environment offered by the browser. They deal with the on-screen elements; their content, attributes and behaviors.

a, button, div, h1, h2, h3, h4, h5, h6, img, input, li, p, span, ul

are all variables to match the HTML elements having the same names. These variables are neither numeric, boolean nor string; they exist to hold information about an HTML element and they have their own set of functions and capabilities.

a Hyperlink
div ThisDiv
div ThatDiv
img Picture


An alert is a popup box that contains the message specified. It's very useful for debugging and occasionally to warn the user about something.


Each of the HTML variables listed above must be attached to an element in the page identified by its CSS id, before they can be used.

attach Button to `ec-button-help`


An audioclip is a variable that will hold an audio clip loaded from a URL. See also play.

audioclip Click


This command creates DOM objects or audio clips.

In the first of these you can create an element of one of the supported types:  div, p, h1, h2, h3, h4, h5, h6, span, button and input. Each element is created as a child of a specified parent element, so you can construct an entire web page on a single HTML div tag.

You can also use the command to create an audioclip, loading it with a sound retrieved from a specified URL.

create MyDiv in Container
create RadioButton in MyDiv
create Sound from `https://easycoder.software/public/sounds/quack.mp3`


Specifies the URL of another page. The browser abandons the current page and loads the new one. You can also specify that the page should open in a new tab or window, by adding the word new.

location `https://google.com`
location new `https://bbc.co.uk`


Specifies what should happen when an event occurs. Only a limited number of event types are currently handled but more may be added in the future.

on click Button go to HandleButtonClick


Play an audioclip, which must previously have been created.

play Click


A variable type to represent a section of HTML code as a popup that floats above the page and disappears when the user clicks outside its main area. These are used primarily for menus.

attach MyPopup to `ec-popup-menu`


(1) Sets the content of an HTML tag (e.g. div).

set TheDiv from Sample1                ! == Set the content from another div
set the content of TheDiv from Sample1 ! == You can use either version
set (the) content of Tag to `This is the new content`
set (the) text of Button to `Close`

(2) Sets an attribute or a style on an element variable, which must previously have been either created or attached to an HTML element.

set attribute `src` of MyImage to `http://image.com/img12345`
set style `background-image` of Block2 to `url(http://image.com/img456)`
set style `width` of Button3 to W
set style `color` of TheDiv to `red`
set style `color` of TheDiv to `#0f346a`
set style `color` of TheDiv to color 89917


Sets up program tracing or acts as a breakpoint. In the former case it is given a list of variables whose values it should display. In the second case, program execution stops and the user interacts with on-screen buttons to resume or step one command at a time. Tracing is a debugging feature and requires a special DIV to be included in the page:

<div id="easycoder-tracer"></div>

This is where it places its buttons and display panel.

You can choose whether to display variables inline or on separate lines, by specifying horizontal (the default) or vertical. This follows the list of variables:

trace Value1 Value2 horizontal
trace Width Height Count vertical