vikramlc/javascript

javascript's Issues

Styling DOM elements

Toggle the class on a button click:

section.classList.toggle('invisible');

Creating, Inserting and Removing Elements

What is DOM?

• Javascript is a hosted language.
• The browser engine provides the environment for the Javascript engine to operate.
• The HTML content downloaded at the browser end is loaded and parsed by the browser.
• It parses the HTML file top to bottom. If it sees an HTML file, it renders and if it sees a javascript file, it executes it.
• As a result of this, the pixels are displayed on the browser.
  

The document is a property of the windows object. The document object is the entry to all the operations which can be performed on a DOM.

More Info on DOM and Browser APIs

Getting element box dimensions:

> $0.getBoundingClientRect()
DOMRect {x: 144.61459350585938, y: 70, width: 88.32292175292969, height: 26.666667938232422, top: 70, …}
bottom: 96.66666793823242
height: 26.666667938232422
left: 144.61459350585938
right: 232.93751525878906
top: 70
width: 88.32292175292969
x: 144.61459350585938
y: 70
__proto__: DOMRect

Objects and its properties

Arrays and Iterables

Maps and Sets

Async Javascript - Promises and Callbacks

Working with Http requests

Sending a GET request:

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts');

xhr.onload = function() {
  console.log(xhr.response);
};

xhr.send();

JSON data and parsing data:

const listElement = document.querySelector('.posts');
const postTemplate = document.getElementById('single-post');

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts');

xhr.responseType = 'json';

xhr.onload = function() {
  // const listOfPosts = JSON.parse(xhr.response);
  const listOfPosts = xhr.response;
  for (const post of listOfPosts) {
    const postEl = document.importNode(postTemplate.content, true);
    postEl.querySelector('h2').textContent = post.title.toUpperCase();
    postEl.querySelector('p').textContent = post.body;
    listElement.append(postEl);
  }
};

xhr.send();

this keyword and getters/setters

The this keyword can lead to some headaches in JavaScript - this summary hopefully acts as a remedy.

this refers to different things, depending on where it's used and how (if used in a function) a function is called.

Generally, this refers to the "thing" which called a function (if used inside of a function). That can be the global context, an object, or some bound data/ object (e.g. when the browser binds this to the button that triggered a click event).

1. this in Global Context (i.e. outside of any function)

function something() { ... }
console.log(this); // logs global object (window in browser) - ALWAYS (also in strict mode)!

2. this in a Function (non-Arrow) - Called in the global context

function something() { 
    console.log(this);
}
something(); // logs global object (window in browser) in non-strict mode, undefined in strict mode

3. this in an Arrow-Function - Called in the global context

const something = () => { 
    console.log(this);
}
something(); // logs global object (window in browser) - ALWAYS (also in strict mode)!

4. this in a Method (non-Arrow) - Called on an object

const person = { 
    name: 'Max',
    greet: function() { // or use method shorthand: greet() { ... }
        console.log(this.name);
    }
};
person.greet(); // logs 'Max', "this" refers to the person object

5. this in a Method (Arrow Function) - Called on an object

const person = { 
    name: 'Max',
    greet: () => {
        console.log(this.name);
    }
};
person.greet(); // logs nothing (or some global name on window object), "this" refers to global (window) object, even in strict mode

this can refer to unexpected things if you call it on some other object, e.g.:

const person = { 
    name: 'Max',
    greet() {
        console.log(this.name);
    }
};
const anotherPerson = { name: 'Manuel' }; // does NOT have a built-in greet method!

anotherPerson.sayHi = person.greet; // greet is NOT called here, it's just assigned to a new property/ method on the "anotherPerson" object

anotherPerson.sayHi(); // logs 'Manuel' because method is called on "anotherPerson" object => "this" refers to the "thing" which called it
If in doubt, a console.log(this); can always help you find out what this is referring to at the moment!

Live node lists vs Static node lists

listitems2 is Live node and listitems is Static node.

Evaluating and Manipulating elements

Classes and Object-Oriented Programming

Advance Functions in Javascript

Working with Events

Click event

const button = document.querySelector('button');

const buttonClickHandler = () => {
    alert('Button clicked!!');
}

// button.onclick = buttonClickHandler;

button.addEventListener('click', buttonClickHandler);

setTimeout(() => {
    button.removeEventListener('click', buttonClickHandler);
}, 2000);

Numbers and Strings

Number.MAX_SAFE_INTEGER
9007199254740991

Math.pow(2, 53)
9007199254740992

Math.pow(2, 54)
18014398509481984

Math.pow(2, 100)
1.2676506002282294e+30

Math.pow(2, 65)
36893488147419103000

Number.MIN_SAFE_INTEGER
-9007199254740991

Number.MAX_VALUE
1.7976931348623157e+308

Number.MIN_VALUE
5e-324

Constructors functions and Prototypes

Querying Elements

Live node:
First, query the node, and get the list. Changing the node after that also reflects in the list.

Non-Live node:
First, query the node, and get the list. Changing the node after that does not reflect in the list.