AnimeJs a Javascript animation engine

Animejs is a lightweight JavaScript animation engine library. It can be work with any CSS properties, individual CSS transforms, SVG or any DOM attributes, and JavaScript Objects.

How to use animejs DasJs

Creating animations with web technologies can be tricky however as there is a great deal to consider and numerous approaches to making them.
In this post, I will use anime.js, an incredible and exceptionally adaptable Javascript animation library written by Julian Garnier.

Adding Anime.js library is the same as including jquery or other javascript libraries. See Github section below for downloading and installation.

How to use History api in web development

First thing comes to our mind.   Why should we use History API? How to implement it in our web development?

I am explaining all these queries one by one.

What is the history API?

As its name, It stores URLs visited by the user. It only stores URL open on the browser not loaded by an asynchronous call. for example, it doesn't store URL requested by ajax.

What can we do with stored URLs by history object/API?

  • Suppose you want to make a single page application. It means if you want to show different sections. You will use the hash (#) tag in URL. For example:
    baseurl: http://localhost/history/index.php
    If you want to load the contact section. You use something like below
    http://localhost/history/index.php#contact
    Your purpose will be solved but it's not SEO friendly. History API will help you to change URL without refreshing page.
  • History API changes URLs and contents change by ajax request. So, the page loads quickly.

How to use History API.

It's very simple to implement. It has many methods. But we only have to concentrate on two methods.

1. pushState
2. replaceState

and one event: popState

These two methods control the browser history.

pushState: It adds history entries in the stack. For example,
suppose you have visited URL index.php then click on any link contact.php then visited how-to.php then contact.php then how-to.php then index.php

pushState store history in the same manner.
index.php >> contact.php >> how-to.php >> contact.php >> how-to.php >> index.php

If you click the navigation button, you will navigate in the same manner.

replaceState: It replaces existing history entry with current entry.
Every time you visited any URL, It replaces existing history with a new one.

popState event fired when you navigate from a page using the back button.

Our objective is to store the URL in history when visited any page. the pushState method will be used there.

Syntax:
history.pushState(state,title,url)

state:
This is a JSON object associated with new entry created by pushState. Its size limit is 640K characters on the serialized representation. If size is larger than this, pushState method throw exception.

title: In a modern browser, No need to use it. Set it as null
url: Which url you are going to store in history

I have explained everything by example. Please watch this video.

How to know Variable Scope in Javascript

Variable Scope
Means:
1. Lifetime of variable
2. Place where the variable is available to use

On basis of variable scope, You can say
variables are local, global and window variable.

Variable Scope / Scope of Variable Javascript

Local variable:

This variable is used only inside the function. You can not use this
variable outside of the function or inside other functions.

Examples of Variable Scope:



function checkVariable(){
var value = 10;

/* variable value is only availabe for checkVariable function.

If you call outside of this function, then the output will be undefined. */
}

var value=5;
console.log(value); // output will be undefined.
// Let's check on the browser.

Local variable value is not available outside. When I create a variable outside of this function. It is available.

Global variable:

A variable declared outside of the function is available for the entire document.
This is a global variable.

Let's check by an example:



var a=23;
function checkVariable(){
alert("Global variable scope inside function "+a);
}

checkVariable();
alert("Global variable scope outside function "+a);

The global variable is available for the entire document.

Lets analysis some cases.

Can we change the value of a global variable from a function's local variable?
Let's try


var a = 5;
function updateGlobal(){
a=6; // updated value of a here
alert("Value of inside function: "+a);
}
updateGlobal();
alert("Value of outside function: "+a);

Let's see results on the browser:
You have seen that the value of a is updated from the function. But here variable
inside the updateGlobal function is not local. It is global because you haven't use a prefix like "var" here.

Now I am updating it to make is a local variable.


var a = 5;
function updateGlobal(){
var a=6; // updated value of a here
alert("Value of inside function: "+a);
}
updateGlobal();
alert("Value of outside function: "+a);

What do you think, What will be the output now?
Output:
Value of inside function:6
Value of outside function:5

Now you can see, you can not update the global variable by local variable.
If you want to update global variable from the function, you can only
update by a global variable.

Window variable:

This variable is similar to a global variable.
You always use 'window' as a prefix with a variable. for example

avascript]window.a = 5;

This 'window.a' a variable is available for the entire window. you use it inside/outside of any function.

Read also: Let Vs Var: Battle between modern javascript keywords

I have tried to explain, the scope of a variable in javascript. If you have
any query. You can comment, I will try to respond quickly.

Thanks and keep in touch.

Click here to check other Javascript operators.

How to use delete Operator in Javascript

Delete operator is using to delete a property of an object.

Delete Operator in Javascript

Know more about delete operator by examples

for example:

var a = {name:"Michel",age:"28",gender:"M"};
Here a is an object.
Now I want to remove property "age"

Just use following code

[code javascript]

var a = {name:"Michel",age:"28",gender:"M"};

console.log("Before delete: ");

console.log(a);
delete.a.age; // Here a is Object and age is property of this object.
if(delete.a.age){

console.log("After delete: ");

console.log(a);

}

[/code]

Output:

Before delete:

[code javascript]{name: "Michel", age: "28", gender: "M"}[/code]

After delete:

[code javascript]{name: "Michel", gender: "M"}[/code]

Just keep in mind that delete operator only deletes property of an object
not value.

[code javascript]

// Check by example:
var b = "Michel"

delete b;
console.log(b);

[/code]

Output: Michel

You can delete property of an object not value.

Let's try another example:

[code javascript]

// Check by example:
b = "Michel"

delete b;
console.log(b);

[/code]

I am not writing "var" before variable b here. It means
this is a property of a window.

You can delete it. You can delete global variables using delete
operator.

This is using to delete property of an object
as well as global variables.

Summary:

  1. This operator can be used to delete property of an object.
  2. You can also delete global variables.
  3. You can not delete a normal variable using this operator.
  4. If you are not using "var" before any variable during initialization, then this variable is a property of the window.

Click here to check other Javascript operators.

How to use Comma Operator in Javascript

Comma operator (,) allows writing two statements as one statement.
When you write javascript script and try to minify code. Then
Minifier can shrink your code using the comma operator.

Comma Operator In Javascript By DasJs

Know more about Comma operator by examples

[code javascript]<script>
var x = (5,6);
console.log(x);
</script>[/code]

What is answer of x?
Try now
After analyzing this code,
You can see that
The output is always the second operand
Here 5 is the first operand and 6 is the second operand.
Both operands could be any type of variable such as string, number, objects etc.

Lets try another example

[code javascript]var x = (y=5,++y);[/code]
What is answer of x?
Check now
In the comma operator, always execute the first operand and then the second operand.
In case of

[code javascript]var x = (y=5,++y);[/code]
First execute: y=5; // value 5 assigned to variable y;
Then
y increment by 1 in second operand.
It means
New value of y = 5 + 1;
y=6
Second operand has value 6 now.

So the output of this statement is 6. Because variable x assigned the value of
second operand.

Now try for following example:

[code javascript]var x = (y=5,y++);[/code]
What is answer of x?
Answer: 5
Why?
Because
The first operand execute and y assigned by value 5;
y++ means it assigned first then increment
++y means first increment then assigned

So, y has assigned the same value. that's why the output is 5.

Try another example:
[code javascript]var x = (y=5,y++,y);[/code]
First operand execute and y assigned by 5.
The second operand execute, the value of y unchanged but the value of y for next
statement increment.
Third operand execute. This time y has incremented value,i.e. 6

Try another example:

[code javascript]

function addition(a,b){
return (a+b);
}
function substract(a,b){
return (a-b);
}

var a=6,b=5;
var x = (addition(a,b),substract(a,b));
console.log(x);

[/code]

First operand execute and addition function run.
The second function executes next.

Remember a few things:
[code javascript]var a=6,b=5;[/code]
Here comma is not a comma operator, Its comma separator.
You can write any number of operands.

[code javascript]var x = (a,b,c.....,f);[/code]

Click here to check other Javascript operators

I think you understand the concept of the comma operator.
If you have any query. You can comment.
Thanks

How to use Conditional/Ternary Operator in Javascript

Conditional/Ternary Operator is used as an alternative to an if-else statement.

Lets see by an example.

Conditional/Ternary Operator

Now try using Conditional or Ternary operator

Know more about Conditional/Ternary operator by examples

[code javascript]

<script type="text/javascript">

var a = 999;

var result = (a>1000)?"Hey this is greater than 1000":"Sorry this is not greater than 1000";

console.log(result);

</script>

[/code]

Output: Sorry this is not greater than 1000

Explanation:
(a>1000) is checking for condition is true or false.
If this condition is true then
result variable is assigned with value "Hey this is greater than 1000"
If this condition is false then
result variable is assigned with value "Sorry this is not greater than 1000"

Output: Sorry this is not greater than 1000

Next example:

[code javascript]

<script type="text/javascript">

var a = 999;

var result = (a>1000 && a<=2000)?"Hey this is greater than 1000":"Sorry this is greater than 1000 and less than equal to 2000";

console.log(result);

</script>

[/code]

Output: Sorry this is greater than 1000 and less than equal to 2000

In this example, if the value is greater than 1000 and less than equal to 2000
then result variable assigned with "Hey this is greater than 1000"
otherwise
"Sorry this is greater than 1000 and less than equal to 2000"

But there is a bug, what happens if value 'a' is less than 1000
let's see

Actually for all false condition
the result is assigned with "Sorry this is greater than 1000 and less than equal to 2000"
Lets change in false section

[code javascript]

<script type="text/javascript">

var a= 999;

var result = (a>1000 && a<=2000)?"Hey, this is greater than 1000":(a<1000)?"Sorry this is less than 1000":"Sorry this is greater than 2000";

console.log(result);

</script>

[/code]

Output: Sorry this is less than 1000

I have replace false part by
(a<1000)?"Sorry this is less than 1000":"Sorry this is greater than 2000"
This is again a conditional statement.

Now you can see how can we use nested conditional statement.

Please watch the video carefully.

Click here to check other Javascript operators.
If you have any query. Feel free to ask.
I think You understand the concept of the conditional/Ternary operator in Javascript
Thanks

Difference between equality operators == and === in Javascript

Comparison operators in Javascript. This is equality operators.

== and === are comparison operators

Equality Operators Difference between == and === in Javascript

== is type-converting equality comparison operator and
=== is strict quality comparison operator

Know more about equality operators by examples

let see the meaning of this by an example
it is true if
I check
0 == false => true

[code javascript]

<script type="text/javascript">

if(0==false){

 console.log("Its True");

}

else{

console.log("Sorry Its False");

}

</script>

[/code]

Output:Its True

Reason:
In javascript, 0 and false are same.
So its result is true.

Lets check with === operator

Now you can see result
0 === false => false

[code javascript]

<script type="text/javascript">

if(0===false){

 console.log("Its True");

}

else{

console.log("Sorry Its False");

}

</script>

[/code]

Output: Sorry Its False

In this case, We are comparing using strict equality operator.
It compares everything of two variables. It checks the type of variable, length of
variables, sequence of characters.
But in this case
0 is an integer and false is boolean.
So result comes as false

what do you think for
"5" == 5 => True
Here "5" is a string but it can be treated as an integer.
Result is true

"5" === 5 => False
Its follow strict rule.
So, a string cannot be equal to an integer.
In this comparison, Data type must be equal.
Result is false

Lets try another example:

true == "true" => False
true === "true" => False
What do you think?
Could you explain it? If yes, You can comment on this video.

I think, Now you understand the difference between equality operators == and ===.

Click here to check other Javascript operators.
If you have any question, Feel free to ask.
Thanks