1. console.log()
console.log(), it is a method to show output in web browser console. It is a very basic method. It is very useful in testing small parts while building big projects.
console.log("Hello World!");
2.Scope
Scope means the access to the variable. It is a type of boundary, like when something is declared inside a scope it cannot be accessed outside that scope. Scopes are of two types:
Local Scope: It is a box which contains boundaries. Where elements declared inside scope cannot be accessed by variables outside the scope.
Global Scope: It is a box which has no boundaries. Where elements are declared without a scope. It can be accessed from anywhere in the code.
3.querySelector()
querySelector is a document method used to return elements that matches with declared selector/s. Using querySelector HTML elements can be selected into JavaScript.
var outputBox = document.querySelector(‘#output');
querySelectorAll()
querySelectorAll selects all the elements with specific group of selectors declared with class in HTML
const outputDiv = document.querySelectorAll('.output');
4.Arrow Functions
Arrow Function syntax is a simpler than normal function. It reduces lines of code and makes easy to understand complex function. It is limited and cannot be used in all situations.
const list = [ 'bread', 'milk', 'biscuit', 'wafers' ];console.log(list.map(list => list.valueOf(list)));
5.Promises
Promise is an object that is much similar to a promise in real life, like promise to someone. A promise has two outcomes, either it will be fulfilled or not. A promise has three states: Pending, Fulfilled and Rejected.
- Pending: initial state i.e. neither fulfilled nor rejected.
- Fulfilled: completed successfully.
- Rejected: operation failed.
//output.
Completedthen()
then() is invoked when a promise is either resolved or rejected.
6.EventListener
Event Listener is a method that adds an event handler to a specific element. We can add many EventListener like mouse events, touch events, mouse hover, onClick, dblclick , etc.
HTML<button id="click-btn">Click</button>JavaScript
var clickBtn = document.querySelector('#click-btn');clickBtn.addEventListner('click', clickHandler);function clickHandler() {
console.log("clicked!");5
