So in this blog, we’re going to create a little bit more at Timing Animations Using Callback Functions in jQuery.
In the previous blog, we also learn how can animate multiple C S S properties at once. So let’s go ahead and do that for the blue box first in index.html, with help of style.css & main.js.
A Promise is an object representing the eventual completion or failure of an asynchronous operation. A JavaScript Promise object contains both the producing code and calls to the consuming code. It can be used to deal with Asynchronous operations in JavaScript.
Promise State:-
Pending – Initial State, Not yet Fulfilled or Rejected
Fulfilled/Resolved – Promise Completed
Rejected – Promise Failed
Promise () – A Promise object is created using the new keyword and its constructor. This constructor takes a function, called the “executor function”, as its parameter. This function should take two functions as parameters. The first of these functions (resolve) is called when the asynchronous task completes successfully and returns the results of the task as a value. The second (reject) is called when the task fails and returns the reason for failure, which is typically an error object.
Syntax:- Promise (executor)
A JavaScript Promise object contains both the producing code and calls to the consuming code.
The then() method returns a Promise. It takes up to two arguments: callback functions for the success and failure cases of the Promise. As then the method returns a Promise so we can do method chaining.
Syntax:- then(onResolved, onRejected)
onResolved – A Function called if the Promise is fulfilled. This function has one argument, the fulfillment value.
onRejected – A Function called if the Promise is rejected. This function has one argument, the rejection reason.
The then method returns a Promise which allows for method chaining. If the function passed as a handler to then returns a Promise, an equivalent Promise will be exposed to the subsequent then in the method chain.
The catch() method returns a Promise and deals with rejected cases only. It behaves the same as calling then(undefined, onRejected). In fact, calling catch(onRejected) internally calls then(undefined, onRejected).
The catch method is used for error handling in promise composition. Since it returns a Promise, it can be chained in the same way as its sister method, then()
Syntax:- catch(callback)
Where the callback is a function called when the Promise is rejected. This function has one argument error – The rejection error.
The finally() method returns a Promise. When the promise is settled, i.e either fulfilled or rejected, the specified callback function is executed. This provides a way for code to be run whether the promise was fulfilled successfully or rejected once the Promise has been dealt with.
This helps to avoid duplicating code in both the promise’s then() and catch() handlers.
Syntax:- finally(callback)
In JavaScript, a Module is a JavaScript file where we write codes. The object is a module that is not available for use unless the module file exports them.
export – The export statement is used when creating JavaScript modules to export functions, objects, or primitive values from the module so they can be used by other programs with the import statement.
There are two different types of export – named and default. You can have multiple named exports per module but only one default export.
You can have only one default export per module. A default export can be imported with any name.
mobile.js
You can have multiple named exports per module. Named exports are useful to export several values. During the import, it is mandatory to use the same name of the corresponding object.
mobile.js
You can have multiple named exports per module. Named exports are useful to export several values. During the import, it is mandatory to use the same name of the corresponding object.
mobile.js
import – The static import statement is used to import bindings that are exported by another module. Imported modules are in strict mode whether you declare them as such or not.
You can have only one default export per module. A default export can be imported with any name.
mobile.js
app.js
You can have multiple named exports per module. Named exports are useful to export several values. During the import, it is mandatory to use the same name of the corresponding object.
mobile.js
app.js
mobile.js
app.js
mobile.js
app.js
The setTimeout() method sets a timer which executes a function or specified piece of code once after the timer expires. The function is only executed once. It returns a positive integer value which identifies the timer created by the call to setTimeout(); this value can be passed to clearTimeout() to cancel the timeout.
Syntax: –
setTimeout (function, milliseconds, para1, para2);
Ex: – var timeoutID = setTimeout(show, 2000);
The clearTimeout() method cancels a timeout previously established by calling setTimeout(). The ID value returned by setTimeout() is used as the parameter for the clearTimeout() method.
Syntax: – clearTimeout (timeoutID);
Ex: – clearTimeout(timeoutID);
The setInterval() method repeatedly calls a function or executes a code snippet, with a fixed time delay between each call. It returns an interval ID that uniquely identifies the interval, so you can remove it later by calling clearInterval().
Syntax: – setInterval (function, milliseconds, para1, para2);
Ex: – var intervalID = setInterval(show, 2000);
The clearInterval() method cancels a timed, repeating action that was previously established by a call to setInterval().
Syntax: – clearInterval (intervalID);
Ex: – clearInterval(intervalID);
Arrays are a collection of data items stored under a single name. Array provides a mechanism for declaring and accessing several data items with only one identifier, thereby simplifying the task of data management.
We use an array when we have to deal with multiple data items. Arrays are a special type of object. The typeof operator in JavaScript returns “object” for arrays.
Syntax: – var array_name = [ ];
Syntax: – var array_name = [value1, value2, value_n];
Syntax: – var array_name = new Array( );
This will create an empty array with 5 lengths. So this is not a good idea to use Array
Constructor if you have only a single numeric value.
Note – By default, the array starts with index 0.
Access all at once
Array elements can be removed using the delete operator. This operator sets the array element it is invoked on to undefined but does not change the array‟s length.
Syantx :- delete Array_name[index];
Ex:- delete dev[0];
The length property retrieves the index of the next available position at the end of the array. The length property is automatically updated as new elements are added to the array. For this reason, length is commonly used to iterate through all elements of an array.
JavaScript classes, introduced in ECMAScript 2015 or ES 6, Classes are in fact “special functions”.
There are two ways to define a class in JavaScript using class keyword:-
The constructor method is a special method for creating and initializing an object created within a class. There can be only one special method with the name “constructor” in a class.
If you do not specify a constructor method a default constructor is used.
Class expressions can be named or unnamed.
Class Declarations and Class Expression are not hoisted. You first need to declare your class and then access it.
The extends keyword is used in class declarations or class expressions to create a class that is a child of another class.
The extended keyword can be used to subclass custom classes as well as built-in objects.
– Date
– String
– Array
class myDate extends Date {
}
Super ( ) is used to initialize parent class constructor. If there is a constructor present in a subclass,
it needs to first call super() before using “this”. A constructor can use the super keyword to call the
constructor of a parent class.
Same function name with different implementation.
Parent ———————> show ( ) {return “Super Class”; }
Child ———————–> show ( ) {return “Sub Class”; } show ( ) {return “Super Class”; }
The static keyword is used to define a static method for a class. Static methods are called without creating object and cannot be called through a class instance (object). Static methods are often used to create utility functions for an
application.
Object instance are created with constructor, which is basically a special function that prepares a new instance of an object for use.
When a function returns an object, we call it a factory function. It can produce object instance without new keywords or classes.
IIFE (Immediately Invoked Function Expression) is a JavaScript function that runs as soon as it is defined.
It is a design pattern which is also known as Self-Executing Anonymous Function and contains two major parts. The first is the anonymous function with lexical scope enclosed within the Grouping Operator (). This prevents accessing variables within the IIFE idiom as well as polluting the global scope.
The second part is creating the immediately executing function expression (), through which the JavaScript engine will directly interpret the function.
