JavaScript: Difference between revisions
Line 183: | Line 183: | ||
let myMap = new Map(); | let myMap = new Map(); | ||
let keyObj | let keyObj = {}; | ||
// Set value | // Set value |
Revision as of 12:13, 1 April 2020
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
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);
});
Canvas
Picture
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)
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.
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.
Compilation
Webpack
Babel
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
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
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.
WeakSet
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
Getting Started
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