JavaScript

The SpinetiX players conform with the ECMAScript Standard (ECMA-262) and implement the SpiderMonkey JavaScript engine.

Introduction

JavaScript (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles. Read more about JavaScript on MDN.

The JavaScript standard is ECMAScript (a scripting language that forms the basis of several well-known client-side scripting languages like JavaScript, JScript, ActionScript etc.), standardized by the Ecma International standards organization in the ECMA-262 specification and ISO/IEC 16262.

JavaScript engine

The SpinetiX players use the open-source SpiderMonkey JavaScript engine, currently maintained by Mozilla Foundation.

History:

• Firmware 2.2.x - SpiderMonkey 1.8.0, which implements ECMAScript 3;
• Firmware 3.0.0 - update to SpiderMonkey 1.8.5, which implements ECMAScript 5;
• Firmware 3.1.0 - update to SpiderMonkey 17.

Getting started with JavaScript

To get started with the JavaScript language, refer to Mozilla's JavaScript Guide and JavaScript reference.

• You can also check out W3Schools' JavaScript Tutorial or JavaScript Wikibook.

JavaScript tutorials

You can find a lot of tutorials on the MDN site under JavaScript section - some of the must-read are:

• Introduction to Object-Oriented JavaScript
• A re-introduction to JavaScript
• JavaScript data structures
• Equality comparisons and when to use them
• Inheritance and the prototype chain (advanced)

JavaScript reference

For the complete documentation of JavaScript language features, refer to the JavaScript Reference - some shortcuts are provided below:

• Standard objects
• Expressions & operators
• Statements & declarations
• Functions

How to include JavaScript code

To include JavaScript code inside an SVG document, the <script> element is used. The JS code can either be placed inline in the <script> element (as character data) or as an external resource, referenced through the xlink:href attribute.

<script xlink:href="http://download.spinetix.com/spxjslibs/jSignage.js" />

<script>
   <![CDATA[
       // Your code goes here ...
   ]]>
</script>

In case of interactive projects, the JavaScript code can also be included using the <handler> element in a similar manner as above.

How to debug the code

The best tool to debug the JavaScript code is to use the Developer Console included into Elementi X. Otherwise, you can use standard alert messages - these are displayed on the screen in Elementi and written inside the player.log on the HMP.

Supported APIs

• SVG Tiny 1.2 Micro DOM (uDOM) API

  Offers access to the Document object, creation and manipulation of SVG elements, navigation of the element nodes in the DOM tree, access to initial and computed attribute and property values of SVG elements, Event listener registration and removal, animation and multimedia control.

  See also the JavaScript additions to the SVG uDOM API (global variables and objects, parsing functions etc.) specific to the SpinetiX platform.

• jSignage API

  Simplifies writing code for animations, interactivity & event handling, DOM traversal & manipulation, Ajax calls, data feed parsing etc., comparing to standard JavaScript. It includes a port of the popular jQuery library on the SVG Tiny 1.2 uDOM.

• Shared Variables JavaScript API

  Offers access to Shared Variables (which is a framework for real-time data exchange) from the JavaScript code.

• Web Storage API (since 3.0.0 release)

  Offers permanent storage of structured data on the client side (HMP, Elementi).

• JavaScript COM API (since 3.0.0 release)

  Allows interacting with devices connected to the HMP via the serial port directly from the JavaScript code.

• USB I/O API (since 3.0.0 release)

  Allows interacting with USB devices that comply to the HID specification, directly from the JavaScript code.

• Node.js API (since 3.0.0 release)

  Allows creating UDP and TCP sockets and servers. The supported modules are: Buffer, Events, Net, Stream and UDP / Datagram Sockets.

• HTMLImageElement API(since 3.0.0 release)

  An HTML5 API that allows querying information about the dimensions of graphic resources.

• XMLHttpRequest Level 1 API (since 3.1.0 release)

  Provides client functionality for transferring data between a client and a server. It includes the FormData and Blob APIs.

• HTML Canvas 2D Context API (since 3.1.0 release)

  Provides objects, methods, and properties to draw and manipulate graphics on a canvas drawing surface.