Skip to content

Instantly share code, notes, and snippets.

@akibraza91

akibraza91/------------------------JavaScript------------------------

Last active February 26, 2023 07:33
Show Gist options
  • Save akibraza91/e284b01ac4c0ca0bb42a7110ef39bd69 to your computer and use it in GitHub Desktop.
Save akibraza91/e284b01ac4c0ca0bb42a7110ef39bd69 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
------------------------JavaScript------------------------
Writing into an HTML element, using-------- innerHTML.
Writing into the HTML output using------- document.write().
Writing into an alert box, using-------- window.alert().
Writing into the browser console, using------ console.log().
<!---- Object ---->
<p id="demo"></p>
const person = {firstName:"Alex", lastName:"Walker", age:"24", contact:"9658754856", country:"Norway"};
document.getElementById("demo").innerHTML = person.firstName + " " + person.lastName + " is " + person.age;
<!----- String methods ----->
toString()
toUpperCase()
toLowerCase()
replace()
slice()
trim()
concat()
length
let str1 = "Hello world!";
let str2 = "Welcome you to the coding playground.";
document.getElementById("demo").innerHTML = str1.replace("world", "Duniya").concat(" ", str2);
<!------- Number methods ----->
Number()
parseInt()
parseFloat()
toFixed()
let x = 10.87;
let y = 20;
document.getElementById("demo").innerHTML = parseInt(x) + "<br>" + parseFloat(y) + "<br>" + x.toFixed(1);
<!------ Array methods ---->
join()
sort()
pop()
push()
slice()
splice()
reverse()
map()
filter()
reduce()
shift()
unshift()
<!------ join methods ---->
const fruits = ["Banana", "Apple", "Mango", "Amrood"];
document.getElementById("demo").innerHTML = fruits.join("*");
<!------ Map an array ---->
const arr = [85,78,56,93,25,42,16];
let txt = "";
arr.map(myFunction);
document.getElementById("demo").innerHTML = txt;
function myFunction(value){
return txt += value + "<br>";
}
<!------ Filter an array ----->
const arr = [85,78,56,93,25,42,16];
arr.filter(myFunction);
document.getElementById("demo").innerHTML = arr;
function myFunction(value){
return value > 16;
}
Raw
1.0-arraySorting.html
<html>
<head>
<title>Javascript</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
</head>
<body>
<p id="demo"></p>
<p id="demo1"></p>
<script>
const num = [5,6,3,8,0,2,9,7,1];
let sortArr = document.getElementById("demo").innerHTML = num.sort();
document.getElementById("demo1").innerHTML = sortArr.reverse();
</script>
</body>
</html>
Raw
1.1-arrayMethod.html
<html>
<head>
<title>Javascript-practice</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="array">
<meta name="description" content="array methods">
</head>
<body>
<p id="demo"></p>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<p id="demo4"></p>
<script>
<!---- Simple array --->
const oldEmp = ["Junaid","Hitender","Sourav","Vishal"];
document.getElementById("demo").innerHTML = oldEmp;
<!---- Concat array --->
const newEmp = ["Ankit","Sandeep","Akib"];
const newArray = oldEmp.concat(newEmp);
document.getElementById("demo1").innerHTML = newArray;
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let rm = fruits.splice(2,3,"Lemon","Kiwi");
document.getElementById("demo").innerHTML = fruits;
<!---- Remove the last element from an array --->
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();
document.getElementById("demo").innerHTML = fruits;
<!---- Add a element into an array --->
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");
document.getElementById("demo").innerHTML = fruits;
<!---- Shift an element from the array --->
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let x = fruits.shift();
document.getElementById("demo").innerHTML = x;
document.getElementById("demo1").innerHTML = fruits;
<!---- Add an element in the 0 position --->
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let x = fruits.unshift("Kiwi");
document.getElementById("demo").innerHTML = x;
document.getElementById("demo1").innerHTML = fruits;
<!---- remove element from the array -->
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let rm = fruits.slice(1);
document.getElementById("demo").innerHTML = rm;
<!---- replace the elements from an array -->
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let x = fruits.splice(2,3,"Lemon","Kiwi");
document.getElementById("demo").innerHTML = fruits;
<!---- remove the elements in the middle of an array -->
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const x = fruits.slice(1,3);
document.getElementById("demo").innerHTML = fruits + "<br><br>" +x;
<!---- Comma seprated string, well javascript it does automaticaly---->
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
<!---- Print reverse array ---->
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.reverse();
</script>
</body>
</html>
Raw
1.2-arrayMap.html
<html>
<head>
<title>Javascript</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
</head>
<body>
<!--- Note function takes 3 arguments value, index, array--->
<p id="demo"></p>
<script>
const num1 = [45, 4, 9, 16, 25];
const num2 = num1.map(myFunction);
document.getElementById("demo").innerHTML = num2;
function myFunction(value){
return value * 2;
}
</script>
</body>
</html>
Raw
1.3-arrayFilter.html
<html>
<head>
<title>Javascript</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
</head>
<body>
<p id="demo"></p>
<script>
const num1 = [45, 4, 9, 16, 25];
const num2 = num1.filter(myFunction);
document.getElementById("demo").innerHTML = num2;
function myFunction(value){
return value > 9;
}
</script>
</body>
</html>
Raw
1.4-arrayForEach.html
<html>
<head>
<title>Javascript</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
</head>
<body>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;
function myFunction(value){
txt += value + "<br>";
}
</script>
</body>
</html>
Raw
1.5-arrayReduce.html
<html>
<head>
<title>Javascript</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
</head>
<body>
<p id="demo"></p>
<script>
const num1 = [45, 4, 9, 16, 25];
const num2 = num1.reduce(myFunction);
document.getElementById("demo").innerHTML = num2;
function myFunction(total, value){
return total + value;
}
</script>
</body>
</html>
Raw
1.6-arrayAscending.html
<html>
<head>
<title>Javascript</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
</head>
<body>
<p>Ascending order.</p>
<p id="demo"></p>
<script>
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points.sort(function(a,b){return a - b;});
</script>
</body>
</html>
Raw
1.7-arrayDescending.html
<html>
<head>
<title>Javascript</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
</head>
<body>
<p>Desending order.</p>
<p id="demo"></p>
<script>
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points.sort(function(a,b){return b - a;});
</script>
</body>
</html>
Raw
1.8-minMaxValue.html
<html>
<head>
<title>Javascript</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
</head>
<body>
<p id="demo"></p>
<button onclick="reset()">Reset</button>
<button onclick="minValue()">Min Value</button>
<button onclick="maxValue()">Max Value</button>
<script>
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;
function minVal(arr){
return Math.min.apply(null, arr);
}
function maxVal(arr){
return Math.max.apply(null, arr);
}
function minValue(){
document.getElementById("demo").innerHTML = minVal(points);
}
function maxValue(){
document.getElementById("demo").innerHTML = maxVal(points);
}
function reset(){
document.getElementById("demo").innerHTML = points;
}
</script>
</body>
</html>
Raw
1.9-sortRandomNum.html
<html>
<head>
<title>Javascript</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
</head>
<body>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;
function myFunction() {
points.sort(function(a,b){return 0.5 - Math.random()});
document.getElementById("demo").innerHTML = points;
}
</script>
</body>
</html>
Raw
2.0-arrayReverse.html
<html>
<head>
<title>Javascript</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
</head>
<body>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.reverse();
</script>
</body>
</html>
Raw
2.1-arraySortFunction.html
<html>
<head>
<title>Javascript</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
</head>
<body>
<p id="demo"></p>
<button onclick="sortArray()">Sort</button>
<button onclick="reverseArray()">Reverse</button>
<script>
const points = [5,6,3,8,0,2,9,7,1];
document.getElementById("demo").innerHTML = points;
function sortArray() {
x = document.getElementById("demo").innerHTML = points.sort();
}
function reverseArray() {
document.getElementById("demo").innerHTML = points.reverse();
}
</script>
</body>
</html>
Raw
2.2-Numbers.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins">
<style>
*{
margin: 0;
padding: 0;
font-family: poppins;
}
</style>
</head>
<body>
<p id="demo"></p>
<p id="demo1"></p>
<script>
let x = 123;
let y = Number.MIN_VALUE;
document.getElementById("demo").innerHTML = x.toString() +
"<br>" + x.toExponential() +
"<br>" + x.toFixed(2) +
"<br>" + x.toPrecision() +
"<br>" + parseInt(x) +
"<br>" + parseFloat(x);
document.getElementById("demo1").innerHTML =
"<br>" + Number.MIN_VALUE +
"<br>" + Number.MAX_VALUE +
"<br>" + Number.POSITIVE_INFINITY +
"<br>" + Number.NEGATIVE_INFINITY;
</script>
</body>
</html>
Raw
2.3-Arrays.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins">
<style>
*{
margin: 0;
padding: 0;
font-family: poppins;
}
</style>
</head>
<body>
<p id="demo"></p>
<script>
const fruits = ["Apple", "Banana", "Kiwi", "Pineapple"];
document.getElementById("demo").innerHTML =
fruits.sort() + "<br>" + /* Array sort alphabetically */
fruits.join("*") + "<br>" + /* Array joins */
fruits.push("Mango") + "<br>" + /* array add an element */
fruits.sort() + "<br>" +
fruits.slice(1,3) + "<br>" + /* Array get 2 elements */
fruits.sort() + "<br>" +
fruits.pop() + "<br>" + /* array deleted the last element */
fruits.sort();
</script>
</body>
</html>
Raw
2.4-arrayList.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins">
<style>
*{
margin: 0;
padding: 0;
font-family: poppins;
}
</style>
</head>
<body>
<p id="demo"></p><br>
<p id="demo1"></p>
<script>
const uList = ["Home", "Products", "About", "Contact"];
let uLen = uList.length;
let txt = "<ul>";
for(i=0; i<uLen; i++){
txt += "<li>" + uList[i] + "</li>";
}
txt += "</ul>";
document.getElementById("demo").innerHTML = txt;
/*-----------2nd method-----------*/
const fruits = ["Apple", "Mango", "Pineapple", "Banana"];
let txt1 = "<ul>";
fruits.forEach(myFunction);
txt1 += "</ul>";
function myFunction(value){
txt1 += "<li>" + value + "</li>";
}
document.getElementById("demo1").innerHTML = txt1;
</script>
</body>
</html>
Raw
2.5-arrayMethod.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins">
<style>
*{
margin: 0;
padding: 8px;
font-family: poppins;
}
</style>
</head>
<body>
<p id="demo"></p><br>
<p id="demo1"></p>
<script>
const fruits = ["Apple", "Banana", "Mango", "Pineapple"];
document.getElementById("demo").innerHTML =
Array.isArray(fruits) + "<br>" +
typeof fruits + "<br>";
/*-------Array Methods--------*/
const arr = [12,3,5,85,9,5,45];
function mapArray(value){
return value * 2;
}
function filterArray(value){
return value > 3;
}
function reduceArray(total, value){
return total + value;
}
function everyArray(value){
return value > 2;
}
function someArray(value){
return value > 18;
}
function findArray(value){
return value > 3;
}
document.getElementById("demo1").innerHTML =
"Actual Array : " + arr +"<br>"+
"Map Array : " + arr.map(mapArray) +"<br>"+
"Filter Array : " + arr.filter(filterArray) +"<br>"+
"Total : " + arr.reduce(reduceArray) +"<br>"+
"All values are Larger then 2 : " + arr.every(everyArray) +"<br>"+
"Some numbers are larger then 18 : " +arr.some(someArray) +"<br>"+
arr.indexOf(5) +"<br>"+ arr.lastIndexOf(5) +"<br>"+ arr.find(findArray);
</script>
</body>
</html>
Raw
2.6-dateObject.html
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins">
</head>
<style>
*{
margin: 0;
padding: 8px;
font-family: poppins;
}
</style>
<body>
<p id="demo"></p>
<p id="demo1"></p>
<script>
const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
let mDate = new Date();
document.getElementById("demo").innerHTML = mDate +"<br>"+
/***************GET METHOD*******************************/
"Year : " + mDate.getFullYear() +"<br>"+
"Month : " + mDate.getMonth() +"<br>"+
"Day : " + mDate.getDay() +"<br>"+
"Hours : " + mDate.getHours() +"<br>"+
"Seconds : " + mDate.getSeconds() +"<br>"+
"Milliseconds : " + mDate.getMilliseconds() +"<br>"+
"Full Date in Milliseconds : " + Date.now() +"<br>"+
"Current Month : " + months[mDate.getMonth()] +"<br>"+
"Current Day : " + days[mDate.getDay()];
/****************SET METHOD*****************************/
mDate = mDate;
mDate.setFullYear(mDate.getFullYear()-1);
mDate.setMonth(mDate.getMonth()-1);
mDate.setDate(mDate.getDate()-1);
mDate.setHours(mDate.getHours()-1);
mDate.setMinutes(mDate.getMinutes()-1);
mDate.setSeconds(mDate.getSeconds()-1);
mDate.setMilliseconds(mDate.getMilliseconds()-999);
document.getElementById("demo1").innerHTML = "New Date : " + mDate;
</script>
</body>
</html>
Raw
2.7-mathObject.html
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins">
</head>
<style>
*{
margin: 0;
padding: 8px;
font-family: poppins;
}
</style>
<body>
<p id="demo"></p>
<!----------------
Math.round();
Math.ceil();
Math.floor();
Math.trunc();
Math.sign();
Math.pow();
Math.sqrt();
Math.abs();
Math.sin();
Math.cos();
Math.min();
Math.max();
Math.random();
-->
<script>
let x = 123.789;
document.getElementById("demo").innerHTML =
"Square Root : " + Math.SQRT2 +"<br>"+
"Pi : " + Math.PI +"<br>"+
"Round nearest INT : " + Math.round(x) +"<br>"+
"Round UP nearest INT : " + Math.ceil(x) +"<br>"+
"Round Down nearest INT : " + Math.floor(x) +"<br>"+
"Round INT part : " + Math.trunc(x) +"<br>"+
"Round +/- : " + Math.sign(x) +"<br>"+
"Power of 2 : " + Math.pow(8, 2) +"<br>"+
"Min value : " + Math.min(8,5,6,9,7,5,5) +"<br>"+
"Max value : " + Math.max(9,8,5,7,5,8,2) +"<br>"+
"Sin Value : " + Math.sin(x) +"<br>"+
"Cos Value : " + Math.cos(x) +"<br>"+
"Square Root : " + Math.sqrt(x) +"<br>"+
"Absolute Value : " + Math.abs(x) +"<br>"+
"Random Value :" + Math.random();
</script>
</body>
</html>
Raw
2.8-boolean.html
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins">
</head>
<style>
*{
margin: 0;
padding: 8px;
font-family: poppins;
}
</style>
<body>
<p id="demo"></p>
<script>
function getRandomInt(min, max){
return Math.floor(Math.random() * (max - min)) + min;
}
document.getElementById("demo").innerHTML =
getRandomInt(1, 100) +"<br>"+
Boolean(10 > 9) +"<br>"+
Boolean(10 >= 11);
</script>
</body>
</html>
Raw
2.9-conditionalStatement.html
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins">
</head>
<style>
*{
margin: 0;
padding: 8px;
font-family: poppins;
}
</style>
<body>
<p id="demo">demo</p>
<script>
var x = 10, y = 20;
if (x > y){
out = "X is greater then y.";
}else if (x < y){
out = "X is less then y.";
}else{
out = "X is equal to y.";
}
document.getElementById("demo").innerHTML = out;
</script>
</body>
</html>
Raw
3.0-switchStatement.html
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins">
</head>
<style>
*{
margin: 0;
padding: 8px;
font-family: poppins;
}
</style>
<body>
<p id="demo">demo</p>
<script>
var day;
switch(new Date().getDay()){
case 0:
day = "Sunday";
break;
case 1:
day = "Monday";
break;
case 2:
day = "Tuesday";
break;
case 3:
day = "Wednesday";
break;
case 4:
day = "Thursday";
break;
case 5:
day = "Friday";
break;
case 6:
day = "Saturday";
break;
}
document.getElementById("demo").innerHTML = day;
</script>
</body>
</html>
Raw
3.1-forLoop.html
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins">
</head>
<style>
*{
margin: 0;
padding: 8px;
font-family: poppins;
}
</style>
<body>
<p id="demo">demo</p>
<script>
const person = {firstName:"Akib", lastName:"Raza", age:"23"};
const arr = [23,52,12,36,45,89,69,74,63];
var objTxt = "", arrTxt = "";
for (i=0; i<10; i++){
txt += i + "<br>";
}
document.getElementById("demo").innerHTML =
objTxt +"<br>"+
arrTxt;
</script>
</body>
</html>
Raw
3.2-forInLoop.html
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins">
</head>
<style>
*{
margin: 0;
padding: 8px;
font-family: poppins;
}
</style>
<body>
<p id="demo">demo</p>
<script>
const person = {firstName:"Akib", lastName:"Raza", age:"23"};
const arr = [23,52,12,36,45,89,69,74,63];
var objTxt = "", arrTxt = "";
// for in loop with obj
for (var i in person){
objTxt += person[i] + ", ";
}
// for in with array
for (var j in arr){
arrTxt += arr[j] + ",";
}
document.getElementById("demo").innerHTML =
objTxt +"<br>"+
arrTxt;
</script>
</body>
</html>
Raw
3.3-forOfLoop.html
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins">
</head>
<style>
*{
margin: 0;
padding: 8px;
font-family: poppins;
}
</style>
<body>
<p id="demo">demo</p>
<script>
//It lets you loop over iterable data structures such as Arrays, Strings, Maps, NodeLists, and more:
const arr = [23,54,25,36,45,7,89,12];
var txt = "";
for (var i of arr){
txt += i + "<br>";
}
document.getElementById("demo").innerHTML = txt;
</script>
</body>
</html>
Raw
3.4-whileLoop.html
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins">
</head>
<style>
*{
margin: 0;
padding: 8px;
font-family: poppins;
}
</style>
<body>
<p id="demo">demo</p>
<script>
var i=0, j=0, txt = "", txt1 = "";
while(i<10){
txt += i +" ";
i++;
}
do{
txt1 += j +" ";
j++;
}
while(j<10);
document.getElementById("demo").innerHTML = txt +"<br>"+ txt1;
</script>
</body>
</html>
Raw
3.5-forLoopBreakConti.html
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins">
</head>
<style>
*{
margin: 0;
padding: 8px;
font-family: poppins;
}
</style>
<body>
<p id="demo">demo</p>
<script>
const obj = {firstName:"Akib", lastName:"Raza", age:"23"};
const arr = [23,52,12,36,45,89,69,74,63];
var objTxt = "", arrTxt = "";
for (var i in arr){
arrTxt += arr[i] + "<br>";
if (arr[i] == 45){break;}
}
for (var j in obj){
objTxt += obj[j] +" ";
if (obj[j] == "Raza"){break;}
}
document.getElementById("demo").innerHTML = arrTxt +"<br>"+ objTxt;
</script>
</body>
</html>
Raw
3.6-setObject.html
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins">
</head>
<style>
*{
margin: 0;
padding: 8px;
font-family: poppins;
}
</style>
<body>
<p id="demo">demo</p>
<script>
let txt = "";
const mySet = new Set(["Apple","Banana","Mango","Kiwi"]);
mySet.add("Pineapple");
mySet.forEach(function(value){
txt += value + " ";
})
document.getElementById("demo").innerHTML =
mySet.size +"<br>"+
mySet.has("Pineapple") +"<br>"+
mySet.delete("Kiwi") +"<br>"+
mySet.has("Kiwi") +"<br>"+
txt;
</script>
</body>
</html>
Raw
3.7-mapObject.html
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins">
</head>
<style>
*{
margin: 0;
padding: 8px;
font-family: poppins;
}
</style>
<body>
<p id="demo">demo</p>
<script>
let txt = "";
const myMap = new Map();
myMap.set("Apple",500);
myMap.set("Banana",400);
myMap.set("Mango",300);
myMap.set("Kiwi",200);
myMap.set("Pineapple",100);
myMap.forEach(function(key, value){
txt += value + " " + key +"<br>";
});
document.getElementById("demo").innerHTML =
myMap.size +"<br>"+
txt +"<br>"+
myMap.delete("Pineapple") +"<br>"+
myMap.has("Pineapple") +"<br>"+
myMap.get("Apple"); //Gets the value for a key
</script>
</body>
</html>
Raw
3.8-typeof-Manual.html
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins">
</head>
<style>
*{
margin: 0;
padding: 8px;
font-family: poppins;
}
</style>
<body>
<!---
Datatypes in Javascript
string
number
boolean
object
function
//Objects in Javascript
Date
array
object
string
//null type
null
undefined
//Primitive Data types
A primitive type is a single simple type of data which has no properties and methods.
A typeof type returns below datatypes.
string
number
boolean
//Complex data
function
object
-->
<p id="demo">demo</p>
<script>
const arr = [12,13,14,15,16,17,18,19];
const obj = {name:"Akib",age:"23"};
// you can chech manually instead of using typeof method to check data type by using constructor
function isArray(myArray){
return myArray.constructor.toString().indexOf("Array") > -1;
}
function isObject(myObject){
return myObject.constructor.toString().indexOf("Object") > -1;
}
function isDate(myDate){
return myDate.constructor.toString().indexOf("Date") > -1;
}
document.getElementById("demo").innerHTML =
"Apple".constructor +"<br>"+
2.356.constructor +"<br>"+
[25468].constructor +"<br>"+
{name:"Akib"}.constructor +"<br>"+
true.constructor +"<br>"+
function(value){txt += value;}.constructor +"<br>"+
isArray(arr) +"<br>"+
isObject(obj) +"<br>"+
isDate(new Date());
</script>
</body>
</html>
Raw
3.9-Bitwise.html
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins">
</head>
<style>
*{
margin: 0;
padding: 8px;
font-family: poppins;
}
</style>
<body>
<p id="demo">demo</p>
<script>
/*
Bitwise AND
0 & 0 0
0 & 1 0
1 & 0 0
1 & 1 1
Bitwise OR
0 | 0 0
0 | 1 1
1 | 0 1
1 | 1 1
Bitwise XOR
0 ^ 0 0
0 ^ 1 1
1 ^ 0 1
1 ^ 1 0
*/
let x = 1, y = 1;
let a = 0, b = 1;
let c = 1, d = 0;
if (x & y){
aOut = true;
}else{
aOut = false;
}
if (a | b){
oOut = true;
}else{
oOut = false;
}
if (c ^ d){
xOut = true;
}else{
xOut = false;
}
document.getElementById("demo").innerHTML =
aOut +"<br>"+
oOut +"<br>"+
xOut +"<br>"+
(5 >> 1) +"<br>"+
(5 << 1) +"<br>"+
(-5 >> 1) +"<br>"+
(-1 << 5);
</script>
</body>
</html>
Raw
4.0-decToBinary.html
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins">
</head>
<style>
*{
margin: 0;
padding: 8px;
font-family: poppins;
letter-spacing: 1.5px;
}
</style>
<body>
<p id="demo">demo</p>
<script>
let str = "Welcom to the platform.";
function toBinary(dec){
return (dec >>> 0).toString(2);
}
function toDecimal(bin){
return parseInt(bin, 2).toString(10);
}
document.getElementById("demo").innerHTML =
toBinary(5) +"<br>"+
toDecimal(101);
</script>
</body>
</html>
Raw
4.1-regExp.html
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins">
</head>
<style>
*{
margin: 0;
padding: 8px;
font-family: poppins;
letter-spacing: 1.2px;
}
</style>
<body>
<p id="demo">demo</p>
<script>
let str = "Welcome to the platform.";
let pattern = /e/;
let rExp = /i/.exec(str);
document.getElementById("demo").innerHTML =
str.search(/platform/i,"W3schools") +"<br>"+
str.replace(/platform/g,"W3schools") +"<br>"+
pattern.test(str) +"<br>"+ rExp;
</script>
</body>
</html>
Raw
4.2-Errors.html
<!DOCTYPE html>
<html>
<head><meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
<style>
*{
margin: 0;
padding: 0;
font-family: fantasy;
margin: 16px;
}
input{
padding: 4px;
}
button{
padding: 4px;
}
</style>
</head>
</body>
<input id="inputBox" type="text" placeholder="Please input."></input>
<button onclick="myFunction()">Submit</button><br>
<p id="message"></p>
<script>
function myFunction(){
const msg = document.getElementById("message");
msg.innerHTML = "";
let inputBox = document.getElementById("inputBox").value;
try{
if (inputBox == "") throw "Please input something.";
if (isNaN(inputBox)) throw "Please input number.";
if (inputBox < 5 | inputBox > 10) throw "Please input from 5 to 10.";
if (inputBox >= 5 | 5 <= 10) throw "Thanks for your feedback !";
}
catch(err){
msg.innerHTML = err;
}
finally{
document.getElementById("inputBox").value = "";
}
}
</script>
</body>
</html>
Raw
4.3-Scope.html
<!DOCTYPE html>
<html>
<head><meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
<style>
*{
margin: 0;
padding: 0;
font-family: fantasy;
margin: 16px;
}
</style>
</head>
</body>
<p id="demo">demo</p>
<script>
//Global window scope, it will delete when you close the browsers window.
//you can access it from anywhere in the whole program.
var x = "Hello World!";
//It is quite similar to var but, it will delete when the program is completed. //if you declared it from inside the fuction then you will avail to access from function only.
let y = "Hello World!";
//const also have block scope you can access inside function or if you declared
//outside the function then you also can acess it from a function.
const z = "Hello World!";
function myFunction(){
var cName1 = "Ferrari"; //these three variables has function scope.
let cName2 = "Volvo";
const cName3 = "BMW";
document.getElementById("demo").innerHTML =
x +"<br>"+
y +"<br>"+
z +"<br>"+
cName1 +"<br>"+
cName2 +"<br>"+
cName3;
}
myFunction();
</script>
</body>
</html>
Raw
4.5-Hoisting.html
<!DOCTYPE html>
<html>
<head><meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
<style>
*{
margin: 0;
padding: 0;
font-family: fantasy;
margin: 16px;
}
</style>
</head>
</body>
<p id="demo">demo</p>
<p id="demo1">demo</p>
<script>
//Hosting allow you to redeclare variables before it used.
var x = 10;
var y = 20;
function add(a,b){
return a+b;
}
elem = document.getElementById("demo");
elem.innerHTML = add(x,y);
// Redeclare variables
var x = 30;
var y = 20;
function sub(c,d){
return c-d;
}
elem = document.getElementById("demo1");
elem.innerHTML = sub(x,y);
</script>
</body>
</html>
Raw
4.6-strictMode.html
<!DOCTYPE html>
<html>
<head><meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
<style>
*{
margin: 0;
padding: 0;
font-family: fantasy;
margin: 16px;
}
</style>
</head>
</body>
<p id="demo">demo</p>
<p id="msg"></p>
<script>
// Strict mode, In that you cannot use undeclared variables.
// Try to remove "use strict" line you will show the logic.
"use strict";
x = 10;
y = 20;
const xMsg = document.getElementById("msg");
xMsg.innerHTML = "";
function myFunction(a, b){
return a+b;
}
try{
document.getElementById("demo").innerHTML = myFunction(x, y);
}
catch(err){
xMsg.innerHTML = err;
}
</script>
</body>
</html>
Raw
4.7-thisKeyword.html
<!DOCTYPE html>
<html>
<head><meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins" />
<style>
*{
margin: 0;
padding: 0;
font-family: poppins;
}
body{
padding: 12px;
}
</style>
</head>
</body>
<p id="demo">demo</p>
<script>
// "this" keyword
// it is use for constructor
const person1 = {
fullName : function(){
return this.firstName + " " + this.lastName;
}
}
const person2 = {
firstName : "Akib",
lastName : "Raza"
}
const member = {
firstName: "John",
lastName: "Doe"
}
let fullName = person1.fullName.bind(member);
document.getElementById("demo").innerHTML =
fullName() +"<br>"+
person1.fullName.apply(person2) +"<br>"+
person1.fullName.call(member);
</script>
</body>
</html>
Raw
4.8-aeroFunction.html
<!DOCTYPE html>
<html>
<head><meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins" />
<style>
*{
margin: 0;
padding: 0;
font-family: poppins;
}
body{
padding: 12px;
}
</style>
</head>
</body>
<p id="demo">demo</p>
<script>
// Aero function, you can write function in a short way to write less code.
let myFun1 = (a,b) => a*b;
let hello = function(){
return "Hello World";
}
let myFun2 = () => {
return "Hello";
}
document.getElementById("demo").innerHTML =
myFun1(42,56) +"<br>"+
hello() +"<br>"+
myFun2();
</script>
</body>
</html>
Raw
4.9-classes.html
<!DOCTYPE html>
<html>
<head><meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins" />
<style>
*{
margin: 0;
padding: 0;
font-family: poppins;
}
body{
margin: 12px;
}
</style>
</head>
</body>
<p id="demo">demo</p>
<script>
// Classes
class Car{
constructor(name, year){
this.name = name;
this.year = year;
}
age(x){
return x - this.year;
}
}
let myCar = new Car("Audi", 2014);
let date = new Date();
let year = date.getFullYear();
document.getElementById("demo").innerHTML =
"My car name is " + myCar.name + " and its " + myCar.age(year) +" years of old.";
</script>
</body>
</html>
Raw
5.0-modules.html
<!DOCTYPE html>
<html lang="en">
<head><meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins" />
<style>
*{
margin: 0;
padding: 0;
font-family: poppins;
}
</style>
</head>
</body>
<p id="demo"></p>
<!--
Javascript module allow you to break up seprate files,
then you will avail to access from another file.
it works only with HTTPS protocol.
it works with external javascript file.
-->
<script>
// Script-1.js
let x = 10;
let y = 20;
function myFunction(){
return "javascript module allow you to break up seprate files";
}
// named export
export {x, y};
// default export method allows you to export module in a file at once.
export default myFunction();
</script>
<script>
// Script-2.js
function myFunction(){
return "javascript module allow you to break up seprate files";
}
// named import
import {x, y} from "./script-1.js";
// import from script-1.js.
import myFunction() from "./script-1.js";
</script>
</body>
</html>
Raw
5.1-jsonArray.html
<!DOCTYPE html>
<html lang="en">
<head><meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins" />
<style>
*{
margin: 0;
padding: 0;
font-family: poppins;
}
body{
margin: 16px;
}
</style>
</head>
</body>
<p id="demo"></p>
<script>
/*
// JSON array
let jsonArray = "employees":[
{"firstName":"Akib", "lastName":"Raza"},
{"firstName":"sandeep", "lastName":"verma"},
{"firstName":"vishal", "lastName":"kaushik"}
];
*/
//connverting json array into javascript object
let scriptObj = '{"employees" : ['+
'{"firstname":"John", "lastname":"Doe"},'+
'{"firstname":"Alex", "lastname":"Walker"},'+
'{"firstname":"Vanilla", "lastname":"Icecream"} ]}';
const parseObj = JSON.parse(scriptObj);
document.getElementById("demo").innerHTML =
parseObj.employees[0].firstname +" "+
parseObj.employees[0].lastname +"<br>"+
parseObj.employees[1].firstname +" "+
parseObj.employees[1].lastname +"<br>"+
parseObj.employees[2].firstname +" "+
parseObj.employees[2].lastname;
</script>
</body>
</html>
Raw
5.2-debugging.html
<!DOCTYPE html>
<html lang="en">
<head><meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins" />
<style>
*{
margin: 0;
padding: 0;
font-family: poppins;
}
body{
margin: 16px;
}
</style>
</head>
</body>
<p id="demo"></p>
<script>
// Debugging
let x = 10;
let y = 20;
z = x + y;
console.log(z);
</script>
</body>
</html>
Raw
5.3-styleGuide.html
<!DOCTYPE html>
<html lang="en">
<head><meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins" />
<style>
*{
margin: 0;
padding: 0;
font-family: poppins;
}
body{
margin: 16px;
}
</style>
</head>
</body>
<p id="demo"></p>
<script>
/*
Always use variables name in a logical and clear way.
const keyword allow you to declare variable name, list, array, object etc.
You cannot change its reference but you can change its object value just using object property.
Keep space between operators and variables.
Use "" instead of declaring new String()
Use 0 instead of declaring new Number()
Use {} for object instead of declaring new Object()
Use [] for array instead of declaring new Array()
*/
let name = "Akib Raza";
const person = {
firstName:"John",
lastName:"Doe",
city:"London",
contact:"+1 752854985",
myPerson: function () {
return this.firstName +" "+ this.lastName +" "+ this.city +" "+ this.contact;
}
};
person.firstName = "Alex";
const myArray = [32,52,13,54,62,14,25,36,45];
myArray[0] = 23;
document.getElementById("demo").innerHTML =
person.myPerson() +"<br>"+
myArray.join("-");
</script>
</body>
</html>
Raw
5.4-bestPractice.html
<!DOCTYPE html>
<html lang="en">
<head><meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins" />
<style>
*{
margin: 0;
padding: 0;
font-family: poppins;
}
body{
margin: 16px;
}
</style>
</head>
</body>
<p id="demo"></p>
<script>
/*
Best Practice
Always write cleaner code which undertood to everyone.
Always use logical and readable variable name.
Avoid string, number, boolean as object, it slow down the execution.
Dont use new object()
Use = "" instead of new String();
Use = 0 instead of new Number();
Use = false instead new Boolean();
Use = [] instead of new Array();
Use = {} instead of new Object();
Use = /()/ instead of new RegExp();
Use = function(){} instead of new function(){}
*/
// You can change its value by using let and var.
let name = "Akib Raza";
name = "John Doe";
// You cannot change its value
const myName = "Akib Raza";
//myName = "John Doe"; // it will give you an error.
// You can change its property value just selecting by
// property name and enter the value.
const myObject = {
firstName : "John",
lastname : "Doe",
city : "norway",
contact : "+1 750986542"
};
myObject.firstName = "Alex";
// You can change, add, delete the value with array.
const fruits = ["Apple","Banana","Mango"];
fruits[3] = "Kiwi";
document.getElementById("demo").innerHTML = myObject.firstName;
</script>
</body>
</html>
Raw
5.5-performance.html
<!DOCTYPE html>
<html lang="en">
<head><meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins" />
<style>
*{
margin: 0;
padding: 0;
font-family: poppins;
}
body{
margin: 16px;
}
</style>
</head>
</body>
<p id="demo"></p>
<script>
/*
How to speedup your javascript code.
Loops are offen used in programming.
The fastest way for execution,
statements or assignments that can be placed outside of the loop.
Avoid unececery variables
Always putting ur javascript at the bottom of the page.
Only one script will download by the browser at a time.
defer="true" in script tag
lets the browsers after the parsing html only one script load at a time.
*/
const myArray = ["Apple","Banana","Mango","Kiwi"];
// outside array length, lets brower run loop faster.
let arrLen = myArray.length;
let txt = "";
for (let i=0; i<arrLen; i++){
txt += myArray[i] + " ";
}
// Reduce DOM access.
// get it once and use it as a local variable.
let obj = document.getElementById("demo");
obj.innerHTML = txt;
</script>
</body>
</html>
Raw
5.6-objectsProperties.html
<!DOCTYPE html>
<html lang="en">
<head><meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins" />
<style>
*{
margin: 0;
padding: 0;
font-family: poppins;
}
body{
margin: 16px;
}
</style>
</head>
</body>
<p id="demo"></p>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<!--Javascript -->
<script>
// Objects, objects are everything in javascript.
// If you learn objects, you leart javascript.
// Easiest way to describe object
const person = new Object();
person.name = "John Doe";
person.age = 23;
person.city = "Norway";
let x = document.getElementById("demo");
x.innerHTML = person.name;
// other way to describe object
const artist = {
firstName: "Alan",
lastName: "Walker",
age:26,
profession: "Musician",
city:"Norway"
}
// You can delete or add object property.
delete artist.age;
artist.age = 28;
let y = document.getElementById("demo1");
y.innerHTML =
artist.firstName +" "+
artist.lastName + " is "+
artist.age +" years of old and by profession " +
artist.profession + ", He lives in " +
artist.city +".";
// Nested object.
const aPerson = {
name:"John Doe",
city:"California",
cars:{
car1:" Volvo",
car2:" Ferrari",
car3:" BMW"
}
}
delete aPerson.cars.car1;
let z = document.getElementById("demo2");
z.innerHTML = aPerson.name + " have a " + aPerson.cars.car2;
// Object array
const myObj = {
cars: [
{name:"Ford",models:["Fiesta","Focus","Mustang"]},
{name:"BMW",models:["320","X3","X5"]},
{name:"Fiat",models:["500","Panda"]}
]
}
// Nested loop
let txt = "";
for (let i in myObj.cars){
txt += "<h2>" + myObj.cars[i].name + "</h2>";
for (let j in myObj.cars[i].models){
txt += myObj.cars[i].models[j] + "<br>";
}
}
document.getElementById("demo3").innerHTML = txt;
</script>
</body>
</html>
Raw
5.7-objectMethods.html
<html>
<head>
<title>Javascript-practice</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script>
const person = {
first: "John",
last: "doe",
fullname: function(){
return this.first + " " + this.last;
}
};
console.log(person.fullname());
</script>
</body>
</html>
Raw
5.8-objectAccessor.html
<html>
<head>
<title>Javascript-practice</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script>
const person = {
first: "John",
last: "Doe",
fullName: this.first + " " + this.last,
get fullName(){
return this.first + " " + this.last;
}
}
console.log(person.fullName);
const person = {
first: "John",
last: "Doe",
language: "",
set lang(lang){
this.language = lang;
}
};
person.lang = "English";
console.log(person.language);
</script></body>
</html>
Raw
5.9-constructor.html
<html>
<head>
<title>Javascript-practice</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script>
function Person(first, last){
this.first = first;
this.last = last;
}
const obj = new Person("John", "Doe");
console.log(obj.first);
</script>
</body>
</html>
Raw
6.0-prototype.html
<html>
<head>
<title>Javascript-practice</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script>
function Person(first, last, address){
this.first = first;
this.last = last;
this.address = address;
}
const obj = new Person("John", "Doe", "Norway");
Person.prototype.language = "english";
console.log(obj.language);
</script>
</body>
</html>
Raw
6.1-sets.html
<html>
<head>
<title>Javascript-practice</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script>
const mSet = new Set([
"Apple",
"Banana",
"Mango"
]);
mSet.add("Kiwi");
let itrator = mSet.values();
let txt = " ";
for(let i of itrator){
txt += i + " ";
}
console.log(txt);
</script>
</body>
</html>
Raw
6.2-maps.html
<html>
<head>
<title>Javascript-practice</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script>
const mMap = new Map([
["Apple",500],
["Banana",400],
["Mango",300]
]);
mMap.set("Kiwi",200);
console.log(mMap.has("Kiwi"));
</script>
</body>
</html>
Raw
6.3-functionCallMethod.html
<html>
<head>
<title>Javascript-practice</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script>
const person = {
first: "Alan",
last: "Walker",
fullname: function(){
return this.first + " " + this.last;
}
}
const person1 = {
first: "John",
last: "Doe"
}
const person2 = {
first: "Amma",
last: "Doe"
}
// difference between call and apply
// call takes arguments sepretly
// apply takes agruemnet as an array
console.log(person.fullname.call(person));
console.log(person.fullname.apply(person1, ["Amma", "Doe"]));
console.log(Math.random.apply(Math, [1,2,3,5]));
console.log(Math.min.apply(2, [1,2,3]));
console.log(Math.max.apply(0, [1,2,3]));
</script>
</body>
</html>
Raw
6.4-functionBorrower.html
<html>
<head>
<title>Javascript-practice</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script>
const person = {
first: "John",
last: "Doe",
fullname: function(){
return this.first + " " + this.last;
}
};
const member = {
first: "Hege",
last: "Nilsen",
}
let myfunction = person.fullname.bind(member);
console.log(myfunction());
</script>
</body>
</html>
Raw
6.4-setTimeout.html
<html>
<head>
<title>Javascript-practice</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script>
const person = {
firstName: "John",
lastName: "Doe",
display: function(){
return appDiv.innerHTML = this.firstName +" "+ this.lastName;
}
};
let display = person.display.bind(person);
setTimeout(display, 3000);
</script>
</body>
</html>
Raw
6.5-clossures.html
<html>
<head>
<title>Javascript-practice</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script>
<!--// Javascript variables can belongs to global or local scope
// Using with closures can be made local (private) variable
// Local variables live when function invoked
// Global variables live until the page discarded.
-->
function add(){
let x = 10;
return x + x;
}
let y = 20;
function mult(){
return y * y;
}
console.log(add());
</script>
</body>
</html>
Raw
6.6-classes.html
<html>
<head>
<title>Javascript-practice</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script>
"use strict"
class Car {
constructor(name, year){
this.name = name;
this.year = year;
}
age(){
let date = new Date();
return date.getFullYear() - this.year;
}
}
let myCar = new Car("Audi", 2014);
console.log(myCar.age());
<!---// -----------------------------------------Class inheritence
// A class created with a class inheritance inherits all the methods from another class:
// we can inherits all the methods from another class to a class---->
class Car {
constructor(brand) {
this.brand = brand;
}
present(){
return "I have a " + this.brand;
}
}
class Model extends Car {
constructor(brand, model){
super(brand);
this.model = model;
}
show(){
return this.present() + ", it is a " + this.model;
}
}
let myCar = new Model("Ford", "Mustang");
console.log(myCar.show());
</script>
</body>
</html>
Raw
6.7-callbacks.html
<html>
<head>
<title>Javascript-practice</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script>
<!---// -------------------------------------Callbacks----------------
// A callback is a function passed as an argument to another function.
// A callback function can run after another function has finished.---->
function mFirst(){
let name = "John";
return name;
}
function mSecond(){
let last = "Doe";
return last;
}
console.log(mFirst() + " " + mSecond());
function mDisplayer(data){
return appDiv.innerHTML = data;
}
function mCalculator(num1, num2){
let sum = num1 + num2;
return sum;
}
let calculator = mCalculator(10, 20);
// Callback
mDisplayer(calculator);
// // Callback aero function (x) => x >= 0
const myNumbers = [2,3,-4,-6,-8,9,4,7];
const rm = removeNeg(myNumbers, (x) => x >= 0);
function removeNeg(numbers, callback){
const myArray = [];
for(let x of numbers){
if(callback(x) > 0){
myArray.push(x);
}
}
return myArray;
}
console.log(rm);
</script>
</body>
</html>
Raw
6.8-Asynchronous.html
<html>
<head>
<title>Javascript-practice</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app"></div>
<script>
const appDiv = document.getElementById("app");
appDiv.innerHTML = "Hello World!";
// Asynchronus functions can run parallel with others.
function getTime(){
let date = new Date();
return appDiv.innerHTML = date.toLocaleTimeString();
}
// setInterval is a function and gettime function passed as an argument.
setInterval(getTime, 1000);
</script>
</body>
</html>
Raw
6.9-Promises.html
<html>
<head>
<title>Javascript-practice</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app"></div>
<script>
const appDiv = document.getElementById("app");
appDiv.innerHTML = "Hello World!";
// Promises takes two functions as a arguments
// myResolev, myReject
let myPromise = new Promise(function(myResolve, myReject){
let x = 0;
if(x == 0){
myResolve("OK");
}else{
myReject("Error");
}
});
myPromise.then(
function(value){
return appDiv.innerHTML = value;
},
function(error){
return appDiv.innerHTML = error;
}
);
</script>
</body>
</html>
Raw
7.0-asyn-await.html
<html>
<head>
<title>Javascript-practice</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app"></div>
<script>
const appDiv = document.getElementById("app");
appDiv.innerHTML = "Hello World!";
// Asych/Await
// Async makes a function return a promise
// Await makes a function wait for a promise
async function myFunction(){
let myPromise1 = new Promise(function(resolve, reject){
setTimeout(function(){
return appDiv.innerHTML = "Promise 1 Ok";
}, 3000);
});
let myPromise2 = new Promise(function(resolve, reject){
setTimeout(function() {
return appDiv.innerHTML = "Promise 2 Ok";
}, 6000);
});
// Waiting for execution to promise 1
let pr1 = await myPromise1;
// Waiting for execution to promise 2
let pr2 = await myPromise2;
return [pr1, pr2];
}
myFunction();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment