There are no tracking or monitoring cookies on this site. There are only cookies used for documentation examples related to cookies.
Close

Processing...
This may take a few seconds.

JavaScript Expressions

A JavaScript expression is simply the right-hand side of an equation in JavaScript, which in Active CSS needs to equate currently to a string, number, boolean, array or object value.

The syntax for inserting an expression is: {= javascript expression =}.

You can put expressions into an action value, a conditional value, a component or a target selector.

You can put whatever you like into an expression, as long as it is a valid JavaScript expression and returns any of the result types above.

Eg. if we are working in JavaScript, we might do something like this:

let nowTime = new Date().toLocaleTimeString();

The expression is on the right-hand side. To use the same expression in an Active CSS action value, we simply place it in between "{=" and "}":

render: {= new Date().toLocaleTimeString() =};

The exception to the rule is the var command. A JavaScript expression is written directly into the command without {= =}. This just saves you some typing:

var: clockTime new Date().toLocaleTimeString();

All JavaScript expression variables are run dynamically. So they will be evaluated each time an event is run.

You can mix JavaScript expressions with other parameters and have more than one expression in the same line if you need to.

An unsupported result type will be returned as substituted into the config as the error string "Invalid expression".

Below is a simple example of building an interactive clock using JavaScript that produces a time string that we can use in the render command. Feel free to use this code - the examples are for copying.

We will be adding more examples as we think of them. If you have any good ones, let us know :)

Basic clock with data binding

The Active CSS "draw" event is triggered when any element is first drawn on the page.
When the "clockTime" variable changes every second, it re-draws automatically.
The double curlies around clockTime means "re-draw when the variable changes".
Only the content drawn in variable placeholders is updated, never the whole HTML tag.