Brief Introduction on JavaScript - Internship Presentation - Week4

WEEKLY PRESENTATION
DURING TRAINING PROGRAM
- Devang Garach
devanggarach.rao@gmail.com
WEEK-4
Information Technology

AGENDA
JavaScript Introduction
JavaScript Variable Declaration
JavaScript Data Types
JavaScript Objects
JavaScript Classes
JavaScript Hoisting
JavaScript Promises
DURING TRAINING PROGRAM - WEEKLY PRESENTATION

JavaScript Introduction
JavaScript is a lightweight interpreted, client side scripting language, high
level loosely typed dynamic language.
Introduced by Netscape in 1995
To Add JavaScript into webpage, there are two ways Internal and External
under <script> tags.
JavaScript errors are silently ignored by the browsers, to know errors we
can use browser console debugging, to open console in browser press F12
key in keyboard.

JavaScript Variables Declaration
We can declare variables in JavaScript by var keyword.
var a = 12 //number 12
var a = 12+”a”//String 12a
var check=true //boolean true
let b = 12 /number 12
const size=100 //number 100

JavaScript Variables Declaration (Difference between let, var ,constant)
var let const
It is available right from
the beginning when the
JavaScript was introduced
It is a new way to declare
variables in JavaScript,
starting from ES6 or
ECMAScript 2015
const is used to store a
value that will not be
changed throughout the
execution of the script, it is
also introduced with ES6
It has a global/ function
scope
It has block scope It also has block scope
Can be updated or re-
declared in its scope
We can't re-declare them const represent a const
value, so it can't be
updated or re-declared

JavaScript Data Types
In JavaScript there are 5 different data types that we can contain values
- string
- number
- boolean
- object
- function
There are 3 types of object
- Object, Date , Array
and 2 data types that cannot contain values:
- null and undefined

JavaScript Object
JavaScript is designed on a simple object-based paradigm. An object is a
collection of properties, and a property is an association between a name (or
key) and a value. A property's value can be a function, in which case the
property is known as a method.
(Source : w3school.com)

JavaScript Object (Continue...)
To declare objects, The values are written as name:value pairs (name and
value separated by a colon).
var car = {type:"Fiat", model:"500", color:"white"};
var person = { firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
Also by using New Keyword we can create object ot String, Number, Boolean...
object

JavaScript Class
JavaScript Class were introduced in ES6
JavaScript Class Syntax
Use the keyword class to create a class.
Always add a method named constructor() and methods:
class ClassName {
constructor() { ... }
method_1() { ... }
method_2() { ... }
method_3() { ... }
}

JavaScript Class (Continue...)
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
age(x) {
return x - this.year;}
}
let date = new Date();
let year = date.getFullYear();
let myCar = new Car("Ford",2014);
document.getElementById("demo").innerHTML= "My car is " + myCar.age(year) +
" years old.";

JavaScript Hoisting
Hoisting is JavaScript's default behavior of moving declarations to the top
In JavaScript, a variable can be declared after it has been used. In other
words; a variable can be used before it has been declared
Not only variables but also function declarations are moved to the top of
their scope before code execution
JavaScript only hoists declarations, not initializations.
Example:
x = 5; // Assign 5 to x
elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x; // Display x in the element
var x; // Declare x

JavaScript Promises
As we all know that JavaScript is an asynchronous scripting language.
Promises are used to handle asynchronous operations in JavaScript. They
are easy to manage when dealing with multiple asynchronous operations
where callbacks can create callback hell leading to unmanageable code.
Benefits of Promises
● Improves Code Readability
● Better handling of asynchronous operations
● Better flow of control definition in asynchronous logic
● Better Error Handling

JavaScript Promises (Continue...)
A Promise has four states:
● fulfilled: Action related to the promise succeeded
● rejected: Action related to the promise failed
● pending: Promise is still pending i.e not fulfilled or rejected yet
● settled: Promise has fulfilled or rejected
A promise can be created using Promise constructor.
Syntax:
var promise = new Promise(function(resolve, reject){
//do something
}
);

Promise Consumers:
Promises can be consumed by registering functions using .then and .catch methods.
then() is invoked when a promise is either resolved or rejected.
Parameters: then() method takes two functions as parameters. Success or Error.
Example:
var promise = new Promise(function(resolve, reject) {
resolve('Geeks For Geeks');
})
promise.then(
function(successMessage) {
//success handler function is invoked
console.log(successMessage);
}, function(errorMessage) {
console.log(errorMessage);
})

Promises Methods:
Promise.all([array])
If the returned promise resolves, it is resolved with an aggregating array of
the values from the resolved promises, in the same order as defined in the
iterable of multiple promises. If it rejects, it is rejected with the reason from
the first promise in the iterable that was rejected.
Promise.allSettled()
Wait until all promises have settled (each may resolve or reject). Returns a
Promise that resolves after all of the given promises have either resolved or
rejected, with an array of objects that each describe the outcome of each
promise.

Promises Methods:
Promise.any():
Takes an iterable of Promise objects and, as soon as one of the promises in
the iterable fulfills, returns a single promise that resolves with the value
from that promise.
Promise.finally() - finally is an instance method like then() , catch()
Appends a handler to the promise, and returns a new promise that is
resolved when the original promise is resolved. The handler is called when
the promise is settled, whether fulfilled or rejected.

Thank You.
- Devang Garach
devanggarach.rao@gmail.com

Brief Introduction on JavaScript - Internship Presentation - Week4

More Related Content

What's hot (20)

Similar to Brief Introduction on JavaScript - Internship Presentation - Week4 (20)

More from Devang Garach (8)

Recently uploaded (20)

Brief Introduction on JavaScript - Internship Presentation - Week4