Few basic js snippets



It is rather test post then anything else :)

CreateElement, Create Element

var btn = document.createElement("BUTTON"); // Create a <button> element
btn.innerHTML = "CLICK ME"; // Insert text
document.body.appendChild(btn);

Promise

new Promise((resolve, reject) => { ... });
new Promise(function (resolve, reject) { ... });

Es6 class sample

1: Creating a new class (declaration-form)

"use strict";

// A base class is defined using the new reserved 'class' keyword
class Polygon {
// ..and an (optional) custom class constructor. If one is
// not supplied, a default constructor is used instead:
// constructor() { }
constructor(height, width) {
this.name = "Polygon";
this.height = height;
this.width = width;
}

// Simple class instance methods using short-hand method
// declaration
sayName() {
ChromeSamples.log("Hi, I am a ", this.name + ".");
}

sayHistory() {
ChromeSamples.log(
'"Polygon" is derived from the Greek polus (many) ' + "and gonia (angle)."
);
}

// We will look at static and subclassed methods shortly
}

// Classes are used just like ES5 constructor functions:
let p = new Polygon(300, 400);
p.sayName();
ChromeSamples.log("The width of this polygon is " + p.width);

Example 2: Creating a new class (expression-form)

// Our Polygon class above is an example of a Class declaration.
// ES6 classes also support Class expressions - just another way
// of defining a new class. For example:
const MyPoly = class Poly {
getPolyName() {
ChromeSamples.log(
"Hi. I was created with a Class expression. My name is " + Poly.name
);
}
};

let inst = new MyPoly();
inst.getPolyName();

3: Extending an existing class

// Classes support extending other classes, but can also extend
// other objects. Whatever you extend must be a constructor.
//
// Let's extend the Polygon class to create a new derived class
// called Square.
class Square extends Polygon {
constructor(length) {
// The reserved 'super' keyword is for making super-constructor
// calls and allows access to parent methods.
//
// Here, it will call the parent class' constructor with lengths
// provided for the Polygon's width and height
super(length, length);
// Note: In derived classes, super() must be called before you
// can use 'this'. Leaving this out will cause a reference error.
this.name = "Square";
}

// Getter/setter methods are supported in classes,
// similar to their ES5 equivalents
get area() {
return this.height * this.width;
}

set area(value) {
this.area = value;
}
}

let s = new Square(5);

s.sayName();
ChromeSamples.log("The area of this square is " + s.area);

4: Subclassing methods of a parent class

class Rectangle extends Polygon {
constructor(height, width) {
super(height, width);
this.name = "Rectangle";
}
// Here, sayName() is a subclassed method which
// overrides their superclass method of the same name.
sayName() {
ChromeSamples.log("Sup! My name is ", this.name + ".");
super.sayHistory();
}
}

let r = new Rectangle(50, 60);
r.sayName();

5: Defining static methods

// Classes support static members which can be accessed without an
// instance being present.
class Triple {
// Using the 'static' keyword creates a method which is associated
// with a class, but not with an instance of the class.
static triple(n) {
n = n || 1;
return n * 3;
}
}

// super.prop in this example is used for accessing super-properties from
// a parent class. This works fine in static methods too:
class BiggerTriple extends Triple {
static triple(n) {
return super.triple(n) * super.triple(n);
}
}

ChromeSamples.log(Triple.triple());
ChromeSamples.log(Triple.triple(6));
ChromeSamples.log(BiggerTriple.triple(3));
// var tp = new Triple();
// ChromeSamples.log(tp.triple()); tp.triple is not a function

6: Subclassing built-in classes and DOM

// Extend Date built-in
class MyDate extends Date {
constructor() {
super();
}

getFormattedDate() {
var months = [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
];
return (
this.getDate() + "-" + months[this.getMonth()] + "-" + this.getFullYear()
);
}
}

var aDate = new MyDate();
ChromeSamples.log(aDate.getTime());
ChromeSamples.log(aDate.getFormattedDate());

// Extend Uint8Array
class ExtendedUint8Array extends Uint8Array {
constructor() {
super(10);
this[0] = 255;
this[1] = 0xffa;
}
}

var eua = new ExtendedUint8Array();
ChromeSamples.log(eua.byteLength);

// Extend DOM Audio element
class MyAudio extends Audio {
constructor() {
super();
this._lyrics = "";
}

get lyrics() {
return this._lyrics;
}

set lyrics(str) {
this._lyrics = str;
}
}

var player = new MyAudio();
player.controls = true;
player.lyrics = "Never gonna give you up";
document.querySelector("body").appendChild(player);
ChromeSamples.log(player.lyrics);

// Note: The V8 in Chrome 42 supports subclassing built-ins but Arrays.
// Subclassing arrays supported in Chrome 43.

class Stack extends Array {
constructor() {
super();
}

top() {
return this[this.length - 1];
}
}

var stack = new Stack();
stack.push("world");
stack.push("hello");
ChromeSamples.log(stack.top());
ChromeSamples.log(stack.length);

Recent Posts

Quick formatted {dd-mm-yy hh:mm} date output in JavaScript

Dependency free module to copy all files (sync) from directory in nodejs

Git repository as dependency in package.json.

Iterating through nested JavaScript object and extracting data.

Modules Cheatsheet

Ultimate slugify function

XPath cheatsheet

Vanilla JS XPath query function

Online code utilities

← Back to all posts