Jump to content

JavaScript: Difference between revisions

JavaScript (view source)

Revision as of 13:50, 2 June 2020

3,728 bytes added ,  2 June 2020
→‎Map
(16 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 112: Line 165:
===Objects===
===Objects===
Objects are maps in JavaScript. They are typically implemented as hashmaps by the JS engine.<br>
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.
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">
<syntaxhighlight lang="javascript">
let my_map = {};
let my_map = {};
my_map["my_key"] = "my_value";
// or my_map["my_key"]
my_map.my_key = "my_value";
"my_key" in my_map;
"my_key" in my_map;


Line 125: 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 134: 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 168: 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>
Retrieved from "https://wiki.davidl.me/view/Special:MobileDiff/2479...3487"