JavaScript

JavaScript is a single-threaded programming language. In the browser, JS is event-driven, meaning that after initialization, the JS engine is idle until an event occurs such as a button being pressed in the DOM.

This page is a mostly about browser-based JavaScript or ECMAScript usage and interaction with the HTML DOM (window). For server and desktop application JavaScript usage, please see the NodeJS page.

Usage

For basic dom manipulation, see https://htmldom.dev/.

Inputs

Showing an input image

const myInput = document.getElementById("myInput");
const myImage = document.getElementById("myImage");
myInput.addEventListener('change', function() {
    if (myInput.files.length !== 1) {
        return;
    }
    let image = myInput.files[0];
    const reader = new FileReader();
    reader.onload = function(e) {
        myImage.src = e.target.result;
    };
    reader.readAsDataURL(image);
});

Video

Your HTML:

<video id="myVideoElt" controls>
</video>

Your JS:

const myVideo = document.getElementById("myVideoElt");

// Create a new source
const newSource = document.createElement("source");
const myVideoUrl = "https://interactive-examples.mdn.mozilla.net/media/examples/flower.webm";
newSource.setAttribute("src", myVideoUrl);
myVideo.appendChild(newSource);
myVideo.play();

Regular Expressions (Regex)

Reference

var myRegex = /(\d+),(\d+)/;
var myStr = "124,52";
var match = myStr.match(myRegex);
// Captures
console.log(match[1], match[2]);
console.table(match);

Classes

Traditionally, classes are done using functions in JavaScript.

Traditional JS Classes

function Rectangle(height, width) {
  this.height = height;
  this.width = width;
}

// To extend some Shape class
Rectangle.prototype = Object.create(Shape.prototype);
// To add to the prototype
Object.assign(Rectangle.prototype, {
  constructor: Rectangle,
  getSize: function() {
    return this.height * this.width;
  }
});

Mozilla Reference
ES2015 adds syntax for classes in JavaScript.

class Rectangle extends Shape {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }

  getSize() {
    return this.height * this.width;<br />
  }
}

Promises

Added in ES2015 (ES6)
See Promises
In general, a function returns a promise if it needs to perform asyncronous tasks.

function myFunc() {
  // Do syncronous things here
  return new Promise((resolve, reject) => {
    // Do asyncronous things here
    // Return data
    resolve(myData);
    // Or if we have an error
    reject(myError);
  });
}

myFunc()
  .then(data => {
     console.log(data);
  }).catch(err => {
     console.error(err);
  });

Async-await

Added in ES2017
See Async_await
Async functions return implicit promises. They allow you to use keyword await to get results from other promises or functions.

Websockets

How to use Websockets

Getting Started

let ws = new WebSocket(this.SERVER_URL);
ws.onopen = function(event) {
   console.log("Websocket opened");
   ws.send("Hi");
};
ws.onmessage = function(event) {
   console.log("message received");
   console.log(event.data);
};
ws.onclose = function() {
   console.log("WS Closed");
};

Data Structures

JavaScript traditionally has arrays and objects (hashmap) data structures.
ES2015 (ES6) adds several collections including: Map, Set, WeakMap, WeakSet
ES6 Collections

Arrays

let arr = [1,2,3];

// Map
arr.map(x => x > 2); // [false, false, true]

// Reduce or Fold
// Note that if you do not provide an initial accumulator,
// then the first element will be your accumulator
// I.e. the first call to your function will be (arr[0], arr[1])
arr.reduce((acc, x) => acc + x, 0); // 6

Objects

Objects are maps in JavaScript. They are typically implemented as hashmaps by the JS engine.
Note that you can only use numbers and strings as keys.
Learn more about the implementation at https://v8.dev/blog/hash-code

let my_map = {};
// or my_map["my_key"]
my_map.my_key = "my_value";
"my_key" in my_map;

// Loop over keys
for (let key in a) {
  console.log("Key:", key);
}

Map

MDN Map
ES2019 (ES10) Map Specification
This is your typical hashmap.

let myMap = new Map();

let keyObj = {};

// Set value
myMap.set(keyObj, 'value associated with keyObj');

// Get size
myMap.size;

// Get value
myMap.get(keyObj);

// Check if key is in the map
myMap.has(keyObj);

// Delete
myMap.delete(keyObj);

Notes

• You can mix and match types of keys
• The hash for objects are randomly generated under the hood
• Do not use [] to get or set from the map
• Iterating over a Map will be in order of insertion

Saving as json

See es6 map json

const data = JSON.stringify([...myMap]);
myMap = new Map(JSON.parse(data));

Set

MDN Set

let my_set = new Set();

// Returns the set itself
my_set.add(key);

my_set.has(key);

my_set.clear();

// Returns if key has in the set
my_set.delete(key);

WeakMap

Unlike map, weakmap holds weak references to its keys. This allows keys to be garbage collected when no reference to it remains. Note that once keys are garbage collected, they are also removed from the weakmap since you can no longer access them. You can not iterate through a weakmap.

WebXR

// Check for VR support
if ("xr" in navigator && "isSessionSupported" in navigator.xr) {
  navigator.xr.isSessionSupported('immersive-vr').then((supported) => {
    console.log("immersive-vr supported:", supported);
  });
}

Modules

These days, we can use modules for everything.
Note that in most instances, you should compile these using Webpack, browserify or similar.
For Node.js, you will need to transpile using Babel.

However some modern browsers now support importing modules directly using script tags.

• Caniuse: Modules

Getting Started

MDN Guide to Modules

Example Module

// Import three.js as a module. webpack will resolve this.
import * as THREE from 'three';
// Import MyClass as a module. webpack will resolve this.
import {MyClass} from "./MyClass.js";

// Pretend we're writing another class
export class MyOtherClass {
  constructor() {}
}

Notes

• The Google style guide suggests always using named exports rather than using export default.

Web Workers

By default, JavaScript is a single-threaded language. For things that take a long time, people usually use asynchronous JS through promises and callbacks. However, if you have a heavy calculation that needs to be performed, you can use spawn web workers which will run in background threads. NodeJS also has a similar concept called Worker Threads.

Getting Started

Your main JS file

Your worker JS file

Resources

• MDN: Using web workers
• Web Workers API

Useful Packages

Packages which run in the browser and may be useful for developing web applications. Note that some of these may overlap with the NodeJS page.

lerp, clamp

npm i lerp clamp

Math.lerp = require("lerp");
Math.clamp = require("clamp");

pako

pako github
"zlib port to javascript, very fast!"

npm install pako

url-join

Basically path.join for the browser.

npm install url-join

mathjs

https://mathjs.org/
Some useful math things for JavaScript in the browser and in NodeJS

npm install mathjs