📝 JavaScript Fundamentals (Pluralsight course) — Notes

javascript-fundamentals-notes.js

// IIFE:

let app = (function() {
    console.log("weheh");
    let carId = 123;
    let getId = function() {
        return carId * 2;
    };

    return {
        getId: getId,
        zzz: "123"
    };
})();

console.log(app.getId); // function getId()
console.log(app.getId()); // 246
console.log(app.zzz); // 123

// This:

let o = {
    carId: 123,
    getId: function()
    {
        console.log(this);
        return this.carId * 2;
    }
};

console.log(o.getId()); // 246

// Call (calling function but with different context):

let o = {
    carId: 123,
    getId: function()
    {
        return this.carId;
    }
};

let newCar = { carId: 456 };

console.log(o.getId.call(newCar)); // 456

// Apply (the same as call but with params):

let o = {
    carId: 123,
    getId: function(prefix, suffix)
    {
        return prefix + this.carId + suffix;
    }
};

let newCar = { carId: "456" };

console.log(o.getId.apply(newCar, ['ID: ', '!'])); // ID: 456!

// Bind (change the context of this):

let o = {
    carId: 123,
    getId: function()
    {
        return this.carId;
    }
};

let newCar = { carId: "456" };
let newFn = o.getId.bind(newCar);

console.log(newFn()); // 456

// Arrow function:

let getId = a => 123 + a;
console.log(getId('a')); // 123a

// Constructor Functions (note: remember about this keyword!):

function Car(id) {
    this.carId = id;
    this.start = function() {
        console.log('starting!: ' + this.carId);
    };
}

let car = new Car(123);
car.start(); // starting!: 123

// Prototypes:

function Car(id) {
    this.carId = id;
}

Car.prototype.start = function(){ 
    console.log('starting: ' + this.carId);
};

Car.prototype.engineType = "Diesel";

let car = new Car(123);
car.start(); // starting: 123
console.log(car.engineType); // Diesel

// JSON - stringify:

let car = {
    id: 123,
    style: "cabrio"
};

console.log(JSON.stringify(car)); // {"id":123,"style":"cabrio"}

// JSON - parse:

let jsonIn =
`
    {"carId": 123}
`;

let car = JSON.parse(jsonIn);
console.log(car); // Object { carId: 123 }

// Array iteration:

let carIds = [
    {carId: 123, style: 'sedan'},
    {carId: 456, style: 'cabriolet'}
];

carIds.forEach(car => console.log(car));

/*
Object { carId: 123, style: "sedan" }
Object { carId: 456, style: "cabriolet" }
*/

carIds.forEach((car, index) => console.log(car, index));

/*
Object { carId: 123, style: "sedan" }
Object { carId: 456, style: "cabriolet" }
*/

// Array filtering:

let carIds = [
    {carId: 123, style: 'sedan'},
    {carId: 456, style: 'cabriolet'}
];

let cabrios = carIds.filter(x => x.style === 'cabriolet');

console.log(cabrios);

/*
Object { carId: 456, style: "cabriolet" }
length: 1
*/

// Array testing:

let carIds = [
    {carId: 123, style: 'sedan'},
    {carId: 456, style: 'cabriolet'}
];

let result = carIds.every(x => x.carId > 100);

console.log(result); // true

// Array - locate first match:

let carIds = [
    {carId: 123, style: 'sedan'},
    {carId: 456, style: 'cabriolet'}
];

let result = carIds.find(x => x.carId > 100);

console.log(result); // Object { carId: 123, style: "sedan" }

// Class:

class Car {
    constructor(id) {
        this.id = id; // beware of this keyword
    }
    identify() {
        return `car no. ${this.id}`;
    }
}

let car = new Car(123);
car.id = 456;

console.log(car.id); // 456
console.log(car.identify()); // car no. 456
console.log(typeof(car.identify)); // function

import { basename } from "path";

// Class inheritance:

class Vehicle {
    constructor() {
        this.type = 'car';
    }
    start() {
        return `Starting ${this.type}`;
    }
}

class Car extends Vehicle {
    constructor() {
        super();
    }
    start(){
        return 'in Car.start() ' + super.start();
    }
}

let car = new Car();
console.log(car.start()); // in Car.start() Starting car

// Module (in scripts/models/car.js):

export class Car () {
    constructor(id) {
       this.id = id;
    }
}

// index.js:

import { Car } from './models/car.js';

let car = new Car(123);
console.log(car.id);

// Window:

// Properties: document, location, console, innerHeight, innerWidth, pageXOffset, pageYOffset
// Methods: alert(), back(), confirm()

year = 2018;
console.log(window.year);

// Timeout & Interval:

let timeoutId = setTimeout(function() {
    console.log('2 secs. passed...');
}, 2000);

// if need to cancel:
//clearTimeout(timeoutId);

let intervalId = setInterval(function() {
    console.log('tick...');
}, 1);

// if need to cancel:
//clearInterval(intervalId);

// Location:

// Properties: href, hostname, port, pathname, search
// Methods: assign(), reload()

console.log(document.location.href); // http://localhost:8080/
console.log(location.href);          // http://localhost:8080/
console.log(location.host);          // localhost:8080
console.log(location.hostname);      // localhost
console.log(location.port);          // 8080
console.log(location.protocol);      // http:
console.log(location.origin);        // http://localhost:8080
console.log(location.pathname);      // /

// Document:

// Properties: body, forms, links
// Methods: createElement(), createEvent(), getElementById(), getElementsByClassName()
// Events: onload, onclick, onkeypress

/*
  <h1>JS fundamentals</h1>
  <p id="first" class="p1">1st para</p>
  <p name="name1" class="p1">2nd para</p>
  <p class="p3">3rd para</p>
*/

let el = document.getElementById('first');
console.log(el);

let els = document.getElementsByClassName('p1');
console.log(els);

let elss = document.getElementsByTagName('p');
console.log(elss);

// Document - modify DOM:

let el = document.getElementById('first');
el.textContent = 'new text here yo';
el.setAttribute('name', 'nameValue');
//el.classList.add('my classname yo');
el.style.color = 'red';

// Try catch:

try {
    let car = newCar;
}
catch (error) {
    console.log(error);
}

console.log('continuing...');

// Finally:

try {
    let car = newCar;
}
catch (error) {
    console.log(error);
}
finally {
    console.log("i'm always executed");
}

console.log('continuing...');

// Throw:

try {
    throw new Error('my custom error...')
}
catch(error) {
    console.log(error);
}

// Promises (for asynchronous code):

let promise = new Promise(
    function(resolve, reject) {
        setTimeout(resolve, 1000, 'someValue');
    }
);

promise.then(
    value => console.log('fulfilled ' + value),
    error => console.log('rejecteed ' + error)
);

// XHR:

let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        console.log(this.responseText);
    }
};

xhttp.open("GET", "http://5c2a4cf2b1c87d001421e699.mockapi.io/v1/users", true);
xhttp.send();

// HTTP Request via jQuery:

// npm install jQuery

import $ from 'jquery';

$.get("http://5c2a4cf2b1c87d001421e699.mockapi.io/v1/users",
    data => console.log(data));

// HTTP Request via jQuery with Premise:

import $ from 'jquery';

let promise = $.get("http://5c2a4cf2b1c87d001421e699.mockapi.io/v1/users");

promise.then(
    data => console.log(data),
    error => console.log(error)
);

// HTTP POST with jquery:

import $ from 'jquery';

let user = {
    name: 'Dariusz Wozniak',
    country: 'Poland'
};

let promise = $.post("http://5c2a4cf2b1c87d001421e699.mockapi.io/v1/users", user);

promise.then(
    data => console.log('data: ', data),
    error => console.log('error: ', error)
);

// Prevent Form Submission:

/*
<form action="/somepath" method="post" id="user-form">
    <input name="user" placeholder="user name"/>
    <span id="user-error"></span>
    <br>
    <input name="country" placeholder="country name"/>
    <span id="country-error"></span>
    <br>
    <button type="submit">Submit</button>
</form>
*/

let form = document.getElementById('user-form');

form.addEventListener('submit', event => {
    event.preventDefault(); // prevent from submitting form
});

// Access Form Fields:

let form = document.getElementById('user-form');

form.addEventListener('submit', event => {
    let user = form.elements['user'];
    let country = form.elements['country'];

    console.log(user.value, country.value);

    event.preventDefault();
});

// Sending POST from form:

import $ from 'jquery';

let form = document.getElementById('user-form');

form.addEventListener('submit', event => {
    let user = form.elements['user'];
    let country = form.elements['country'];

    let userToPost = {
        user: user.value,
        country: country.value
    };

    let promise = $.post("http://5c2a4cf2b1c87d001421e699.mockapi.io/v1/users", userToPost);

    promise.then(
        data => console.log('data: ', data),
        error => console.log('error: ', error)
    );

    event.preventDefault(); // must be here for above demo purposes!
});