5,322
edits
(→Map) |
|||
(15 intermediate revisions by the same user not shown) | |||
Line 3: | Line 3: | ||
==Usage== | ==Usage== | ||
For basic dom manipulation, see [https://htmldom.dev/ https://htmldom.dev/]. | |||
===Inputs=== | |||
====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=== | ===Canvas=== | ||
===Picture=== | |||
===Video=== | ===Video=== | ||
Your HTML: | Your HTML: | ||
Line 68: | Line 92: | ||
} | } | ||
</syntaxhighlight> | </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== | ==Compilation== | ||
Line 127: | Line 180: | ||
===Map=== | ===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=== | ===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=== | ===WeakMap=== | ||
Line 136: | Line 241: | ||
===WeakSet=== | ===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== | ==Modules== | ||
These days, we can use modules for everything. | |||
===Getting Started=== | ===Getting Started=== | ||
[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules MDN Guide to Modules]<br> | [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules MDN Guide to Modules]<br> | ||
Example Module | |||
<syntaxhighlight lang="javascript"> | <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> | </syntaxhighlight> | ||
Line 170: | Line 297: | ||
<syntaxhighlight lang="bash"> | <syntaxhighlight lang="bash"> | ||
npm install url-join | 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> | </syntaxhighlight> |