JavaScript: Difference between revisions

From David's Wiki
Line 28: Line 28:
console.log(match[1], match[2]);
console.log(match[1], match[2]);
console.table(match);
console.table(match);
===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>


</syntaxhighlight>
</syntaxhighlight>

Revision as of 15:17, 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.<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;
  }
});

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

</syntaxhighlight>

Compilation

Modules