Something Like that:
Javascript Types
Javascript has two types Primitive and non-Primitive
Primitive Type: represent a single Value
1. Undefined (you shouldn’t set a Variable to this)
2. Null (you can set a Variable to this)
3. Boolean (true or false)
4. Number
5. String (a sequence of characters (both ” and “” can be used))
6. Symbol (Used in ES6 (the next version of Javascript))
Non-Primitive Type: more than one value
1. Object
Something Like that:
CallBack function
For that you need to create first html code.
HTML
<p>Value of function wait3s = <span id="demo1"></span></p> <p>Value of function clickH = <span id="demo2"></span></p> <p>Value of finished = <span id="demo3"></span></p>
After that add this JS code.
JS
/*CallBack*/
//long running function
function wait3s(){
var ms = 3000 + new Date().getTime();
while (new Date() < ms){}
document.getElementById("demo1").innerHTML = "finished function";
}
function clickH(){
document.getElementById("demo2").innerHTML = "clicked";
}
//listen for the click event
document.addEventListener('click', clickH);
wait3s();
document.getElementById("demo3").innerHTML = "finished execution";
/*CallBack End*/
[codepen_embed height="265" theme_id="0" slug_hash="qXbzxr" default_tab="result" user="pradeepanvi"]See the Pen CallBack function in javascript by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]
Now you can see after 3 second.
Value of function wait3s = finished function
Value of function clickH =
Value of finished = finished execution
And on click document anywhere
Value of function wait3s = finished function
Value of function clickH = clicked
Value of finished = finished execution
Something Like that:
let same as var
For that you need to create first html code.
HTML
<p>Value of function a = <span id="demo1"></span></p>
After that add this JS code.
JS
let a = 10,
b = 5;
//let same as var;
if(a > b){
let c = true;
document.getElementById("demo1").innerHTML = c;
}
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”KvVjKr” default_tab=”result” user=”pradeepanvi”]See the Pen let same as var in javascript by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]
Now you can see
Value of c = true
We can also use let instead of var
Something Like that:
Scope Chain
For that you need to create first html code.
HTML
<p>Value of function a = <span id="demo1"></span></p>
After that add this JS code.
JS
//The Scope Chain
function b(){
document.getElementById("demo1").innerHTML = myvar;
}
function a(){
var myvar = 2;
b();
}
var myvar = 1;
a();
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”WErBLJ” default_tab=”result” user=”pradeepanvi”]See the Pen Scope Chain in Javascript by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]
Now you can see
Value of function a = 1
Why it’s showing function a = 1?
Because in the previous lecture you can see when var value is not declared so it’s given undefined!
Exactly this var value is not defined but there you can see in function b var is not defined as well. So now javascript finding parent until not find. and last It’s find outer function var value = 1.
That’s why It’s given us 1.
Something Like that:
Variable Environments
For that you need to create first html code.
HTML
<p>Value of function a = <span id="demo1"></span></p> <p>Value of function b = <span id="demo2"></span></p> <p>Value of global myvar = <span id="demo3"></span></p>
After that add this JS code.
JS
//Variable Environments
function b(){
var myvar;
document.getElementById("demo2").innerHTML = myvar;
}
function a(){
var myvar = 2;
document.getElementById("demo1").innerHTML = myvar;
b();
}
var myvar = 1;
document.getElementById("demo3").innerHTML = myvar;
a();
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”gxPvZx” default_tab=”result” user=”pradeepanvi”]See the Pen Variable Environments in javascript by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]
Now you can see
Value of function a = 2
Value of function b = undefined
Value of global myvar = 1
Why it’s showing function b undefined?
Because you can see in the global my It’s find declared value and function a as well. But and function two var only declared But not assign any value. that’s why.
Something Like that:
Function Invocation
For that you need to create first html code.
HTML
<p>Value of a function = <span id="demo1"></span></p>
After that add this JS code.
JS
//Function Invocation
function b(){
document.getElementById("demo1").innerHTML = "Home";
}
function a(){
document.getElementById("demo1").innerHTML = "Home2";
b();
}
a();
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”LjGQrV” default_tab=”result” user=”pradeepanvi”]See the Pen Function Invocation in javascript by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]
Now you can see
Value of a function = Home
But there is one issue I defined function a value Home2, so why it’s changed.
Because b function is calling into a function and the value has been re-write in function b, that’s why.
Something Like that:
Execution
For that you need to create first html code.
HTML
<p>Value of b = <span id="demo1"></span></p> <p>Value of a = <span id="demo2"></span></p> <p>Value of a = <span id="demo3"></span></p>
After that add this JS code.
JS
//The Execution Content
function b(){
document.getElementById("demo1").innerHTML = "Called b!";
}
b();
document.getElementById("demo2").innerHTML = a;
var a = 'hello';
document.getElementById("demo3").innerHTML = a;
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”QMyOEY” default_tab=”result” user=”pradeepanvi”]See the Pen Execution in Javascript by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]
Now you can see
Value of B = Called b!
Value of A = undefined
Value of A = hello
There you can see B is function and this is calling well.
But A is undefined and after that it is showing value “hello”
This is strange because you can see before one when a is calling, But value didn’t defined.
JS
//The Execution Content
function b(){
document.getElementById("demo1").innerHTML = "Called b!";
}
b();
document.getElementById("demo2").innerHTML = a;
var a = 'hello';
document.getElementById("demo3").innerHTML = a;
But when value is defined! it is showing value.
JS
//The Execution Content
function b(){
document.getElementById("demo1").innerHTML = "Called b!";
}
b();
document.getElementById("demo2").innerHTML = a;
var a = 'hello';
document.getElementById("demo3").innerHTML = a;
This Execution is only for value because if I changed function calling method. It will be work as well.
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”gxPvvm” default_tab=”result” user=”pradeepanvi”]See the Pen Execution in Javascript 02 by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]
Now you can see I changed the sequence of calling b, now it is before function.
Value of B = Called b!
Value of A = undefined
Value of A = hello
But still now B is fine.
Something Like that:
Defined and Undefined
First we should check undefined.
For that you need to create first html code.
HTML
<p>Value of a = <span id="demo1"></span></p> <p>Status a = <span id="demo2"></span></p>
After that add this JS code.
JS
var a;
document.getElementById("demo1").innerHTML = a;
if (a === undefined){
document.getElementById("demo2").innerHTML = 'a is undefined!';
} else {
document.getElementById("demo2").innerHTML = 'a is defined!';
}
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”eEpbzG” default_tab=”result” user=”pradeepanvi”]See the Pen Defined and Undefined in javascript by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]
Now you can see
Value of a = undefined
Status a = a is undefined!
Now we want a should be Defined
After that add this JS code.
JS
var a = 'hello';
document.getElementById("demo1").innerHTML = a;
if (a === undefined){
document.getElementById("demo2").innerHTML = 'a is undefined!';
} else {
document.getElementById("demo2").innerHTML = 'a is defined!';
}
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”WErbKR” default_tab=”result” user=”pradeepanvi”]See the Pen Defined and Undefined in javascript 02 by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]
Now we can see
Value of a = hello
Status a = a is defined!
Something Like that:
for loop
Pyramid in javascript
For that you need to create first html code.
HTML
No need any html code because this will be write in your document.
After that add this JS code.
JS
for(i=0; i<=10; i++){
for(x=0; x<=i; x++){
document.write("#");
}
document.write("
");
}
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”YxyYjK” default_tab=”result” user=”pradeepanvi”]See the Pen Pyramid in javascript by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]
Now you can see
#
##
###
####
#####
######
#######
########
#########
##########
###########
But One thing Now I want this should be rotate.
##########
#########
########
#######
######
#####
####
###
##
#
After that add this JS code.
JS
for(i=10; i>0; i--){
for(x=0; x<i; x++){
document.write("#");
}
document.write("
");
}
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”prjZZg” default_tab=”result” user=”pradeepanvi”]See the Pen Rotate Pyramid in javascript by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]
Something Like that:
[]
Duplicate value in array
For example I want to write number like 2,5,8
[]
For that you need to create first html code.
HTML
<p id="demo"></p>
After that add this JS code.
JS
var arr1 = [1,2,5,8,10,2,8,5];
var sortarr1 = arr1.sort();
var newarr1 = [];
for(i=0; i<arr1.length; i++){
if(sortarr1[i] == sortarr1[i + 1]){
newarr1.push(sortarr1[i]);
}
}
document.getElementById("demo").innerHTML = newarr1;
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”zdvpPL” default_tab=”result” user=”pradeepanvi”]See the Pen Duplicate array value in javascript by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]
Now you can see
2,5,8