Writing OKO Scripts - Javascript Introduction

The following section gives a simple introduction to the Javascript language. It focuses on the elements that will be useful when working with the OKO ScriptComponent.

For a more detailed guide the following websites are an excellent resource.

https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics

https://www.w3schools.com/js/default.asp

Syntax

The most generally adopted casing convention for JavaScript is camelCase (starting with a lowercase first letter).

firstName, lastName, myAwesomeFunction()

Strings can be written with single or double quotes.

'Monday'

"Tuesday"

Commenting your code

// This is a one line comment.

/*

This is a comment block

That can span multiple lines.

*/

Variables

Variables can be declared using var, let and const. Let or const are the preferred way.

var myVar1 = 1;

Variables declared with ‘var’ have function scope.

let myVar2 = 2;

Variables declared with ‘let’ have block scope.

const myVar3 = 3;

Variables declared with ‘const’ keyword cannot be redeclared, cannot be reassigned and have block scope.

Logging

OKO.Log('This message will be displayed in the console.');

CODE

let firstName = 'Artemis';
let lastName = 'Goddess of War';

// String literals are created using single or double quotes.
// You can log the name of the goddess like so:

OKO.Log(firstName + ' the ' + lastName);

CODE

// Template literals are denoted using backticks and can be used to embed variables
// and expressions within the string.

OKO.Log(`Greek Goddess: ${firstName} - ${lastName}`);

CODE

let logCount = 10;

for (let i = 0; i < logCount; i++) {
    OKO.Log('This is message number: ', i);
}

Comparisons

‘=’ Assignment

‘==’ Comparison but datatype is ignored.

‘===’ Comparison but the operator checks the datatype.

CODE

let number1 = 10; // number

let number2 = '10'; // string

number1 == number2 // true

number1 === number2 // false

Conditionals

CODE

let goddess = 'Hera';

if(goddess === 'Hera') {
    OKO.Log('Hera, Queen of Olympus!');
} else {
    OKO.Log('Your goddess is not Hera!');
}

Switch

CODE

let dayOfTheWeek = 'Saturday';

switch(dayOfTheWeek) {
    case 'Monday':
    case 'Tuesday':
    case 'Wednesday':
    case 'Thursday':
    case 'Friday':
        OKO.Log("It's a weekday.");
        break;
    case 'Saturday':
    case 'Sunday':
        OKO.Log("It's the weekend.");
        break;
    default:
        OKO.Log("A new day.");
}

Functions

CODE

function multiply(num1, num2) {
    let result = num1 * num2;
    return result;
}

CODE

let result = multiply(7, 11.5);

OKO.Log('The result is: ', result);
OKO.Log('You get the same result with: ', multiply(7, 11.5));

Objects

Objects are variables that can contain many values. They are declared using braces and use key/value pairs.

propertyName: propertyValue

Objects can be declared in a single line.

CODE

const car = {manufacturer:'Mercedes-Benz', model:'G-Wagon', color:'gold'};

OKO.Log('Car manufacturer: ', car.manufacturer);

Or object declarations can span multiple lines.

CODE

const mountain = {
    name: 'Mount Olympus',
    elevation: 2917,
    country: 'Greece'
};

OKO.Log(`Mountain name: ${mountain.name}`);

Arrays

It is common to declare arrays using the const keyword.

CODE

const greekGoddesses = ['Aphrodite', 'Artemis', 'Athena', 'Demeter'];

let greekGoddess = greekGoddesses[1];

OKO.Log('Goddess of Hunting: ', greekGoddess);

Arrays can also be created and then populated later. Here the array has been declared as const, which means we cannot reassign or redeclare the variable, but we can alter the list it points to.

CODE

const minorGoddesses = [];

minorGoddesses[0] = 'Achelois';
minorGoddesses[1] = 'Calypso';
minorGoddesses[2] = 'Harmonia';

// Number of elements in array.
let numberOfMinorGoddesses = minorGoddesses.length;

Array Iteration

The following examples call a function for each iteration of the array. They can pass the function the following arguments; element, index and array. If you are only interested in the current array element you can just pass that. Both are shown below.

const greekGoddesses = ['Aphrodite', 'Athena', 'Demeter', 'Hestia'];

Foreach

ForEach calls a function for each element in the array.

CODE

function logGoddessName(element) {
    OKO.Log('Goddess name: ', element);
}

greekGoddesses.forEach(logGoddessName);

Map

Map creates a new array and calls a function for each element. The original array is not mutated.

CODE

function prefixGoddessName(element, index, array) {
    return 'Goddess name: ' + element;
}

const greekGoddesses2 = greekGoddesses.map(prefixGoddessName);

Filter

Filter creates a new array with elements that pass a test.

CODE

function filterNames(element) {
    return element.startsWith('D');
}

const goddessesStartingWithD = greekGoddesses.filter(filterNames);

For Loops

const greekGoddesses = ['Aphrodite', 'Artemis', 'Athena', 'Demeter'];

For loop

CODE

for (let i = 0; i < greekGoddesses.length; i++) {
    let goddessName = greekGoddesses[i];
    OKO.Log(goddessName);
}

For In loop

CODE

for (let goddess in greekGoddesses) {
    OKO.Log(goddess);
}

For In loop can also loop over properties of an object.

const car = {manufacturer:'Mercedes-Benz', model:'G-Wagon', color:'white'};

Each iteration of the loop passes a key for accessing an object property.

CODE

for (let propertyKey in car) {
    OKO.Log(car[propertyKey]);
}

While loop

CODE

const greekGoddesses = ['Aphrodite', 'Artemis', 'Athena', 'Demeter'];
let goddessCount = greekGoddesses.length;
currentNum = 0;

while (currentNum < goddessCount) {
    OKO.Log(greekGoddesses[currentNum]);
    currentNum++;
}