Using JavaScript to Define TV App Functionality

TV Apps use JavaScript to define app functionality. JavaScript is a popular scripting language for lightweight programming that you don’t need to purchase a license to use. Your app’s JavaScript statements are executed by the Engine running on the connected TV device.

You can write your app’s JavaScript in external files and save each file with a .js file extension. Use the <script> tag to insert your external JavaScript files into your app’s main.TV XML file (or into an init.js file which is included in main.TV). If a JavaScript file (call this the first file) defines functions or data that are used by other functions defined in a second file, then the <script> tag including the first file must come before the <script> tag including the second file. The src attribute of the <script> tag should point to the .js file (typically stored in the Javascript directory) as follows:

<script src="Javascript/myFile_1.js"> 
<script src="Javascript/myFile_2.js">

JavaScript Comments

JavaScript comments start with // for a single line comment.

// This is a single line JavaScript comment

Multi-line JavaScript comments start with /* and end with */.

/* This is a multi-line
JavaScript comment */

Data Types

JavaScript has a small set of data types. It has three primitive types: boolean, number, and string, and supports special values for null and undefined. Other data types, such as Dates and Regular Expressions are variations on the object type.

The boolean data type has two values: true and false.

The number data type is 64-bit floating point. There is no integer type. Division between two integers may produce a fractional result. The number data type also includes the special values NaN (not a number) and Infinity.

The string data type is a sequence of zero or more Unicode characters. There is no separate character type. A character is represented as a string of length 1. Literal strings are quoted using the single quote (') or double quote (") characters. The quote characters can be used interchangeably, but must match.

'This is a string.'
"Isn't this a string? Yes!"
'A' // The character A
""  // The empty string

Escapement in strings is accomplished with the backslash (\) character. Strings are not modifyable after creation. Strings have a length property which is used to determine the number of characters in the string.

var s = "Hello World!";
// In this example s.length == 12

Objects

JavaScript supports objects, which can contain data and methods that act upon that data. JavaScript objects can also contain other objects. JavaScript does not have classes, but it does have constructors which act as containers for class variables and methods. JavaScript does not have class-oriented inheritance, but does have prototype-oriented inheritance.

New members can be added to any object at any time by assignment. JavaScript arrays and functions are implemented as objects. The main difference between objects and arrays is that arrays support the length property. Arrays are not typed. You can mix strings, numbers, and objects in the same array.

Variables

JavaScript objects cannot have private variables and private methods. All members of an object are public. JavaScript variable names are case sensitive and variable names must begin with a letter or the underscore character (_). By convention, variable names and function names that begin with the underscore character (_) are intended to be private and not for public use.

Every variable that is not defined with the var keyword in a function context becomes a global variable, also known as an implied global. Implied globals should be avoided when writing JavaScript for TV Apps.

Statements

The set of named JavaScript statements includes var, if, switch, for, while, do, break, continue, return, try, throw, and with. In if statements, while statements, do statements, and logical operators, JavaScript treats false, null, undefined, "" (the empty string), and the number 0 as false. All other values are treated as true.

Functions

Functions are first class objects in JavaScript which means they can be a member of an object and passed as arguments to other functions. When a function is a member of an object, it is called a method. There is a special variable, called this that is set to the object when a method of the object is called. For example, if an object playButton has a method toggle(), inside the function playButton.toggle(), the this variable is set to the object playButton. The function toggle() can then refer to this to access the playButton object’s data members. In a simple function call, the variable this is set to the Global Object (or window).

When calling a function in JavaScript, it is not required that you pass a fixed number of parameters which allows you to write functions with optional arguments. Inside the function block, a function has access to an arguments array which contains all of the parameters that were actually sent by the caller. Excess parameters are ignored. Missing parameters are given the value undefined.

Functions which are used to initialize objects are called constructors. By convention, the name of a constructor has an initial capital letter. Inside the constructor the this variable is the new object. The body of the constructor function initializes the object’s members. The constructor returns the new object. A constructor is called with the new prefix, for example:

var myObject = new ConstructorFunction(param1, param2, param3…);

Object Literal Notation

You will find that most TV App JavaScript examples use object literal notation. In object literal notation, an object description is a set of comma-separated name-value pairs inside curly braces. The names can be identifiers or strings followed by a colon. The names are treated as literal names, not as variable names, so the names of the properties of the object must be known at compile time. The values can be literals or expressions of any type, including other objects or functions. An object literal can appear anywhere an expression can appear.

The following is an example of an employee object defined using object literal notation:

The empty object can be created with an Object constructor or by using two empty curly braces in object literal notation, for example:

The following examples show the same simple JavaScript function helloWorld() written three different ways: as a constructor, as an object, and finally in object literal notation.

First, consider a simple constructor helloWorld() that produces a single stateless object:

A second option is to simply make an empty object and augment it by assigning the methods to it, as follows:

Finally, in this third example, the same functionality can be accomplished by using object literal notation, as follows:

Object literals are a convenient notation for creating new objects. In object literal notation, a property’s value can be obtained from any expression, including another object literal. Objects can be nested as shown in the following example:

TV App JavaScript Recommendations

The following are recommendations for the JavaScript used in TV Apps:

  • Implied globals should be avoided.
  • Put a semicolon (;) at the end of every simple statement. When a function is assigned to a value it should end with a semicolon (;) just like all assignment statements.
  • The == and != operators do type coercsion. It is better to use the === and !== operators, especially when comparing false values.
  • Do not use the eval() function.
  • Do not use synchronous calls. When accessing a server, your script should allow the app to continue and your code should handle a reply if and when it arrives.

Table of Contents