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.
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.
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.
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.
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.
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.
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.
Conditional/Ternary Operator is used as an alternative to an if-else statement.
Lets see by an example.
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
Comparison operators in Javascript. This is equality operators.
== and === are comparison operators
== 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
