JavaScript: Difference between revisions

From David's Wiki
(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...")
 
No edit summary
(7 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==
===Arrays===
==Video==
<syntaxhighlight lang="javascript">
let arr = [1,2,3];


=Compilation=
// Map
arr.map(x => x > 2); // [false, false, true]


=Modules=
// 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>
 
===Canvas===
===Video===
===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, {
  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>
 
==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==
===Getting Started===
[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules MDN Guide to Modules]<br>
<syntaxhighlight lang="javascript">
 
</syntaxhighlight>

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