Jump to content

JavaScript: Difference between revisions

JavaScript (view source)

Revision as of 13:50, 2 June 2020

8,055 bytes added ,  2 June 2020
→‎Map
(Created page with "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, pleas...")
 
(32 intermediate revisions by the same user not shown)
Line 2: Line 2:
For server and desktop application JavaScript usage, please see the [[NodeJS]] page.
For server and desktop application JavaScript usage, please see the [[NodeJS]] page.


=Usage=
==Usage==
==Canvas==
For basic dom manipulation, see [https://htmldom.dev/ https://htmldom.dev/].
==Video==


=Compilation=
===Inputs===


=Modules=
====Showing an input image====
<syntaxhighlight lang="javascript">
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);
});
</syntaxhighlight>
 
===Canvas===
 
===Picture===
 
===Video===
Your HTML:
<syntaxhighlight lang="html">
<video id="myVideoElt" controls>
</video>
</syntaxhighlight>
Your JS:
<syntaxhighlight lang="javascript">
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();
</syntaxhighlight>
 
===Regular Expressions (Regex)===
[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions Reference]
<syntaxhighlight lang="javascript">
var myRegex = /(\d+),(\d+)/;
var myStr = "124,52";
var match = myStr.match(myRegex);
// Captures
console.log(match[1], match[2]);
console.table(match);
</syntaxhighlight>
 
 
===Classes===
Traditionally, classes are done using functions in JavaScript.<br>
{{hidden | Traditional JS Classes |
<syntaxhighlight lang="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;
  }
});
</syntaxhighlight>
}}
[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes Mozilla Reference]<br>
ES2015 adds syntax for classes in JavaScript.<br>
<syntaxhighlight lang="javascript">
class Rectangle extends Shape {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
 
  getSize() {
    return this.height * this.width; 
  }
}
</syntaxhighlight>
 
===Promises===
Added in ES2015 (ES6)<br>
See [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise Promises]<br>
In general, a function returns a promise if it needs to perform asyncronous tasks.<br>
<syntaxhighlight lang="javascript">
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);
  });
</syntaxhighlight>
 
===Async-await===
Added in ES2017<br>
See [https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await Async_await]<br>
Async functions return implicit promises. They allow you to use keyword <code>await</code> to get results from other promises or functions.
 
==Compilation==
===Webpack===
===Babel===
 
==Websockets==
How to use Websockets
===Getting Started===
<syntaxhighlight lang="javascript">
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");
};
</syntaxhighlight>
 
==Data Structures==
JavaScript traditionally has arrays and objects (hashmap) data structures.<br>
ES2015 (ES6) adds several collections including: Map, Set, WeakMap, WeakSet<br>
[https://www.sitepoint.com/es6-collections-map-set-weakmap-weakset/ ES6 Collections]
 
===Arrays===
<syntaxhighlight lang="javascript">
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
</syntaxhighlight>
 
===Objects===
Objects are maps in JavaScript. They are typically implemented as hashmaps by the JS engine.<br>
Note that you can only use numbers and strings as keys.<br>
Learn more about the implementation at [https://v8.dev/blog/hash-code https://v8.dev/blog/hash-code]<br>
<syntaxhighlight lang="javascript">
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);
}
</syntaxhighlight>
 
===Map===
[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map MDN Map] 
[https://www.ecma-international.org/ecma-262/10.0/index.html#sec-map-objects ES2019 (ES10) Map Specification] 
This is your typical hashmap.
 
<syntaxhighlight lang="js">
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);
</syntaxhighlight>
 
;Notes
* You can mix and match types of keys
* The hash for objects are randomly generated under the hood
* Do not use <code>[]</code> to get or set from the map
* Iterating over a Map will be in order of insertion
 
;Saving as json
See [https://2ality.com/2015/08/es6-map-json.html es6 map json]<br>
<syntaxhighlight lang="javascript">
const data = JSON.stringify([...myMap]);
myMap = new Map(JSON.parse(data));
</syntaxhighlight>
 
===Set===
[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set MDN Set]
 
<syntaxhighlight lang="js">
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);
</syntaxhighlight>
 
===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==
<syntaxhighlight lang="javascript">
// 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);
  });
}
</syntaxhighlight>
 
==Modules==
These days, we can use modules for everything.
 
===Getting Started===
[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules MDN Guide to Modules]<br>
 
Example Module
<syntaxhighlight lang="javascript">
// 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 default class MyOtherClass {
  constructor() {}
}
</syntaxhighlight>
 
==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===
 
<syntaxhighlight lang="bash">
npm i lerp clamp
</syntaxhighlight>
 
<syntaxhighlight lang="javascript">
Math.lerp = require("lerp");
Math.clamp = require("clamp");
</syntaxhighlight>
 
===pako===
[https://github.com/nodeca/pako pako github]<br>
"zlib port to javascript, very fast!"
<syntaxhighlight lang="bash">
npm install pako
</syntaxhighlight>
 
===url-join===
Basically <code>path.join</code> for the browser.<br>
<syntaxhighlight lang="bash">
npm install url-join
</syntaxhighlight>
 
===mathjs===
[https://mathjs.org/ https://mathjs.org/]<br>
Some useful math things for JavaScript in the browser and in NodeJS
<syntaxhighlight lang="bash">
npm install mathjs
</syntaxhighlight>
Retrieved from "https://wiki.davidl.me/view/Special:MobileDiff/1406...3487"