JavaScript: Difference between revisions

From David's Wiki
No edit summary
Line 44: Line 44:
// To add to the prototype
// To add to the prototype
Object.assign(Rectangle.prototype, {
Object.assign(Rectangle.prototype, {
  constructor: Rectangle,
   getSize: function() {
   getSize: function() {
     return this.height * this.width;
     return this.height * this.width;

Revision as of 17:31, 21 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, {
  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 />
  }
}

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