JavaScript: Difference between revisions

From David's Wiki
No edit summary
No edit summary
Line 66: Line 66:


==Compilation==
==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>


==Modules==
==Modules==

Revision as of 18:42, 20 January 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

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

Canvas

Video

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, {
  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 />
  }
}

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");
};


Modules

Getting Started

MDN Guide to Modules