Skip to content

Latest commit

 

History

History
415 lines (351 loc) · 15 KB

README.md

File metadata and controls

415 lines (351 loc) · 15 KB
Raw
Copyright(c) 2020-
Author: Chaitanya Tejaswi (github.com/CRTejaswi)    License: GPL v3.0+

JS

Personal notes for JS.

References (General)

Beau Carnes
Brad Traversy

Index

Resources

Link Description
Projects Useful list of projects

General

  • Access Environment Variables
    Environment Variables can't be accessed in plain JS.
    You can access User/System environment variables in NodeJS using dotenv package: 
    require('dotenv').config();
console.log(process.env.Youtube_ApiKey); // <API_KEY>
    This approach gets values from a file - .env (and not from your PC). So, eh?!

CLI/GUI

Array

Object

Defining Properties & Methods

  1. Using Object-Initialization
    Explanation of code-snippet.
SYNTAX:
    var obj = {
              property(params) {...},
              *generator(params) {...},
        async property(params) {...},
        async *generator(params) {...},

              [property](params) {...},
              *[generator](params) {...},
        async [property](params) {...},

          get property(){...},
          set property(value){...}
    };
var car1 = {
    make: 'Honda',
    model: 'City',
    year: 2008
};
var car2 = {
    make: 'Suzuki',
    model: 'Wagon-R',
    year: 2017
};

console.table([car1, car2]);
(index)  make    model    year
   0    Honda    City     2008
   1    Suzuki  Wagon-R   2017
  1. Using A Constructor-Function
    Explanation of code-snippet.
function Car(make, model, year){
    this.make = make;
    this.model = model;
    this.year = year;
    this.displayCar = displayCar;
};
function displayCar(){
    var result = `A Beautiful ${this.year} ${this.make} ${this.model}`;
    return result;
}

var car1 = new Car('Honda', 'City', 2008);
var car2 = new Car('Suzuki', 'Wagon-R', 2017);
console.log(car1.displayCar());
console.log(car2.displayCar());
A Beautiful 2008 Honda City
A Beautiful 2017 Suzuki Wagon-R
  1. Using Object.create Method
    Explanation of code-snippet.
var Car = {
    make: '',
    model: '',
    year: undefined
};

var car1 = Object.create(Car);
var car2 = Object.create(Car);

car1.make = 'Honda'; car1.model = 'City'; car1.year = 2008;
car2.make = 'Suzuki'; car2.model = 'Wagon-R'; car2.year = 2017;

console.table([car1, car2]);
(index)  make    model    year
   0    Honda    City     2008
   1    Suzuki  Wagon-R   2017

Generic Properties & Methods

  1. Using Object-Initialization
    Explanation of code-snippet.
SYNTAX:
    var obj = {
              property(params) {...},
              *generator(params) {...},
        async property(params) {...},
        async *generator(params) {...},

              [property](params) {...},
              *[generator](params) {...},
        async [property](params) {...},

          get property(){...},
          set property(value){...}
    };

Iterator v Iterable Protocol

  • Iterator Protocol
let obj = {
    array: [1,2,3,4,5],
    nextIndex: 0,
    next: function(){
        return (this.nextIndex < this.array.length)
            ? {value: this.array[this.nextIndex++],
               done: false}
            : {done: true}
    }
};

for (var i=0; i < 5; i++)
    console.log(obj.next().value);
console.log(obj.next().done);
  • Iterable Protocol
let obj = {
    array: [1,2,3,4,5],
    nextIndex: 0,
    [Symbol.iterator]: function(){
        return {
            array: this.array,
            nextIndex: this.nextIndex,
            next: function(){
                return (this.nextIndex < this.array.length)
                    ? {value: this.array[this.nextIndex++],
                       done: false}
                    : {done: true}
            }
        }
    }
};

let iterable = obj[Symbol.iterator]()
for (var i=0; i < 5; i++)
    console.log(iterable.next().value);
console.log(iterable.next().done);

Outputs of both these code-snippets are:

1
2
3
4
5
true

  • Generator (Iterator + Iterable)

    • Returns the next natural number
  function* foo(n){
    while (true)
        yield ++n;
}

let generator = foo(0);
for (var i = 0; i < 10; i++)
    console.log(generator.next().value);

Promise

var car1 = {
    make: 'Honda',
    model: 'City',
    year: 2008
};
var car2 = {
    make: 'Suzuki',
    model: 'Wagon-R',
    year: 2017
};
console.table([car1, car2]);

Promise.resolve(car1)
    .then (function(value){
        console.log(value.make, value.model, value.year);
        console.log(value[0], value[1], value[2]);
        console.log(value['make'], value['model'], value['year']);
    });
Promise.reject(car2)
    .then (null, function(value){
        console.log(value.make, value.model, value.year);
        console.log(value[0], value[1], value[2]);
        console.log(value['make'], value['model'], value['year']);
    });
(index)  make    model    year
   0    Honda    City     2008
   1    Suzuki  Wagon-R   2017
​
Honda City 2008
undefined undefined undefined
Honda City 2008
Suzuki Wagon-R 2017
undefined undefined undefined
Suzuki Wagon-R 2017

Structured Data (CSV, JSON, XML)

Refer:

CSV

JSON

XML

Databases

JS Engines

SpiderMonkey by Mozilla & V8 by Google are two major JS engines out there; both written in C/C++.
Install JS Shell Utility.
Also see Firefox: JS Interpreter
See Yulia Startsev's streams to get started with SpiderMonkey. Later on, decide which project to focus on.

SVG

Refer: Basics, Tutorial, Tutorial & Videos, SVG Elements.

Shapes

Tag Attributes
<line> x1,y1,x2,y2, stroke,stroke-width, stroke-linecap, stroke-dasharray
<polyline> points, fill, stroke,stroke-width, stroke-linecap, stroke-dasharray
<rect> x,y, width,height, fill, stroke,stroke-width
<polygon>
<circle> cx,cy,r, fill, stroke,stroke-width, stroke-dasharray
<ellipse> cx,cy,rx,ry, fill, stroke,stroke-width, stroke-dasharray
<path> d (M-LQCA), fill, stroke,stroke-width, stroke-dasharray
<text> x,y, fill, font, font-family, font-size
<image> xlink:href, x,y, width,height, preserveAspectRatio
<marker> id, refX,refY, viewBox, markerWidth,markerHeight, orient, preserveAspectRatio

<path> is the most important shape, with a curve sketched by M-LQCA ("Move to M(x,y), then move linearly/quadratically/cubically/on an ellipticalArc").

<path d="M 0,0 L 100,0" fill="none" stroke="#000000"/>
<path d="M 0,0 Q 150,200 100,100 z" fill="none" stroke="#ff0000"/>
<path d="M 0,0 C 150,200 150,150 100,100 z" fill="none" stroke="#00ff00"/>
<path d="M 0,0 A 150,200 0 0,0 100,100 z" fill="none" stroke="#0000ff"/>

Data Visualization

Refer: Basics, Tutorial, Video, Videos, Examples.

  • Live Server With Node, install/use live-server globally using:
npm install -g live-server
live-server

Projects

(currently lifted from https://github.com/tuvtran/project-based-learning#javascript)

Node

React