1) https://www.youtube.com/watch?v=KGkiIBTq0y0&t=5388s
2) https://www.youtube.com/watch?v=13gLB6hDHR8
mdn
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/style
yahoo baba
youtube.com/watch?v=GAJ6yIZ7fu8&list=PL0b6OzIxLPbx-BZTaWu_AF7hsKo_Fvsnf&index=18&pp=iAQB
1) BASIC JS
2) ADVANCED JS
3) MODERN JS ECMASCRIPT 2015 -2020
4) ASYNCHRONOUS JS
5) OOPS IN JS
20+ challenges
10+ interview question
5+ projects
BONUS
API
Json
ajax
==========================Variable Type:====================================
4 Ways to Declare a JavaScript Variable:
Using var
Using let
Using const
Using nothing
==========================Variable Start 3type:============================
1) name = first character letter
2) _name = first character _
3) $name = first character $
let x, y, z; // Statement 1
x = 5; // Statement 2
y = 6; // Statement 3
z = x + y; // Statement 4
JavaScript Expressions
An expression is a combination of values, variables, and operators
(a*b) = (5*5) = 25 it called an evaluation.
-------
const
-------
A new Array
A new Object
A new Function
A new RegExp
==========================Data Type in javascript:==========================
Six Data Types that are primities
1) String : typeof instance === "string"
2) Number: typeof instance === "number"
3) Boolean : typeof instance === "boolean"
4) undefined : typeof instance === "undefined"
5) undefined : typeof instance === "null"
5) undefined : typeof instance === "Object"
6) Bigint : typeof instance === "bigint"
7) Symbol : typeof instance === "symbol"
Built-in object types can be:
objects, arrays, dates, maps, sets, intarrays, floatarrays, promises, and more.
//typeof operator
console.log(typeof(age));
document.getElementById("text5").innerHTML = typeof(myName) + typeof(myAge) ;
1// ==========================Data Type practice:==========================
//10 + "20" = 1020
// 9 - "5" bug =
// "Java" + "Script" = JavaScript
// "" + "" =
// "" + 0 = 0
// "vind" - "thapa" NaN = NaN
// true + true = 2
// true + false = 1
// false + true = 1
// false - true = -1
false = 0
true = 1
console.log(10 + "20");
document.getElementById("text5").innerHTML = (10 + "20") ;
// ==========================NaN: is Global Object==========================
// NaN is a Global Object
// var myPhoneNumer = 9876543210;
// var myName = "jitender";
// isFinite
// console.log(myPhoneNumer);
// console.log(myName);
// console.log(isNaN(myPhoneNumer));
// console.log(isNaN(myName));
// if(isNaN(myName)){
// console.log("Please enter a valid number");
// }
// if(isNaN(myPhoneNumer)){
// console.log("Please enter a valid number");
// }
if(isNaN(myName)){
document.getElementById("text19").innerHTML = "Please enter a valid Number";
}
if(isNaN(myAge)){
document.getElementById("text20").innerHTML = "this is a Number";
}
// ==========================Expresion and Operator==========================
1) Assignment Operator = , +=, -=, *=, /=, %=, **= --------- (+=), (x += y), (x = x + y)
2) Arithmectic Operator +, -, *, /, %, ++, --, **,
3) Comparison Operator (a == b), (a === b), (a != b), (a !== b), (a >= b), (a <= b)
4) Logical Operator = &&, ||, !, ??
5) String Operator = "jitender" + "sharma"
6) Conditional (ternary) Operator = ternary Operator ?
1) Assignment Operator
= x = y x = y
+= x += y x = x + y
-= x -= y x = x - y
*= x *= y x = x * y
/= x /= y x = x / y
%= x %= y x = x % y
**= x **= y x = x ** y
4).Logical Operator (&&, ||, !)
Logical (&&) operator work all Expresion are true
(40 > 30) && (50 > 45) && (60 > 55) = true work
(40 > 30) && (50 > 45) && (60 > 65) = false not work
if((40 > 30) && (50 > 45) && (60 > 55)){
document.getElementById("text21").innerHTML = "& operator function is redy";
}
Logical (||) (or) Operator atlist one Expresion is true
(40 > 30) || (50 > 45) || (60 > 65) = frue work
(40 > 45) || (50 > 55) || (60 > 65) = false not work
if((40 > 30) || (50 > 45) || (60 > 65)){
document.getElementById("text22").innerHTML = "|| operator function is redy";
}
Logical ! Operator reverse the Expresion value
!((40 > 30) || (50 > 45) || (60 > 65)) = false
!((40 > 30) && (50 > 45) && (60 > 55)( = false
!true = false
!false = true
if(!(false)){
document.getElementById("text23").innerHTML = "! operator function is redy";
}
// ==========================x++==========================
postfix increment = x++
prefix increment = ++x
postfix Decrement = x--
prefix Decrement = --x
var num = 15;
var mynum = num++ + 5;
document.getElementById("text6").innerHTML = num; 15+1 = 16
document.getElementById("text7").innerHTML = mynum; 15+5 = 20
// ==========================3**3 power (Exponantionl operator)==========================
3**2 = 3x3 = 9
3**3 = 3x3x3 = 27
document.getElementById("text12").innerHTML = 3**2 ; 9
document.getElementById("text12").innerHTML = 3**3 ; 27
// ==========================SWAP NUMBER==========================
a = 5
b = 10
b = (b - a) value 5
a = (b + a) value 10
// ==========================CONTROL STATEMENT & LOOPS==========================
1) If Else
2) Switch Statement
3) While Loop
4) Do-While Loop
5) For Loop
6) For in Loop
7) For of Loop
8) Conditional (ternary) Operator
---------------------------------------------------------------------------------------------------------------------------
1) IF ELSE
---------------------------------------------------------------------------------------------------------------------------
var tomorrow = "rain";
if(tomorrow == "rain"){
document.getElementById("text13").innerHTML = "Take a Rain Coat" ;
}
else{
document.getElementById("text13").innerHTML = "No Need to Take a Rain Coat" ;
}
Leap Years
https://www.mathsisfun.com/leap-years.html
=> How to know if it is a Leap Year:
yes Leap Years are any year that can be exactly divided by 4 (such as 2016, 2020, 2024, etc)
not except if it can be exactly divided by 100, then it isn't (such as 2100, 2200, etc)
syes except if it can be exactly divided by 400, then it is (such as 2000, 2400)
var year = 2020;
if(year % 4 === 0){
if(year % 100 === 0){
if(year % 400 === 0){
document.getElementById("text14").innerHTML = "The year of " + year + " is a leap year (GREAT) ( year divide 4 true, year divide 100 true, year divide 400 true )" ;
}
else{
document.getElementById("text14").innerHTML = "The year of " + year + " is not a leap year ( year divide 4 true, year divide 100 true, year divide 400 false )" ;
}
}
else{
document.getElementById("text14").innerHTML = "The year of " + year + " is a leap year (GREAT) ( year divide 4 true, year divide 100 false )" ;
}
}
else{
document.getElementById("text14").innerHTML = "The year of " + year + " is not a leap year (year not divide 4 false )" ;
}
=> WHAT IS TRUTHY AND FALSY VALUES IN JAVASCRIPT?
we have total 5 falsy values in javascript
i) 0,
ii) "",
iii) undefined,
iv) null,
v) NaN,
vi) false (including this)
remaining all truthly valuse
if(score = 0){
document.getElementById("text15").innerHTML = "we loss the game" ;
}
else{
document.getElementById("text15").innerHTML = "we won the game" ;
}
//if if valuse is falsy(0) periority is else valuse
---------------------------------------------------------------------------------------------------------------------------
8) Conditional (ternary) Operator
---------------------------------------------------------------------------------------------------------------------------
that takes three operadnds
variable name = (condition) ? value1: value2
var voteAge = 18;
//Conditional (ternary) Operator
document.getElementById("text16").innerHTML = (voteAge >= 18) ? "you can vote": "you can't vote" ;
---------------------------------------------------------------------------------------------------------------------------
2) Switch Statement
---------------------------------------------------------------------------------------------------------------------------
Area of a circle = πr2
Area of a triangle = (L*B)/2
Area of a rectangle = L*B
var aria = "circle";
var PI = 3.142, l=5, b=4, r=3;
//Switch Statement if else
-------------------------------------------------
if(aria == "circle"){
document.getElementById("text17").innerHTML = "The aria of the circle is " + PI*r**2 ;
}
else if(aria == "triangle"){
document.getElementById("text17").innerHTML = "The aria of the triangle is " + (l*b)/2 ;
}
else if(aria == "rectangle"){
document.getElementById("text17").innerHTML = "The aria of the rectangle is " + (l*b) ;
}
else{
document.getElementById("text17").innerHTML = "Please enter a valid data";
}
//Switch Statement
-------------------------------------------------
switch(aria){
case 'circle':
document.getElementById("text18").innerHTML = "The aria of the circle is " + PI*r**2 ;
break;
case 'triangle':
document.getElementById("text18").innerHTML = "The aria of the triangle is " + (l*b)/2 ;
break;
case 'rectangle':
document.getElementById("text18").innerHTML = "The aria of the rectangle is " + (l*b) ;
break;
default:
document.getElementById("text18").innerHTML = "Please enter a valid data";
}
---------------------------------------------------------------------------------------------------------------------------
3) While Loop
---------------------------------------------------------------------------------------------------------------------------
while loop statement
the while statement creates a loop that executes a specified statement
as long as the test condition evaluates to true
//fist condition check after that loop running
var whiletext = "";
var whileNum = 1;
//block scope{}
while(whileNum <= 10){
whiletext += " while loop number is " + whileNum;
whileNum++;
}
document.getElementById("text24").innerHTML = whiletext ;
---------------------------------------------------------------------------------------------------------------------------
4) Do-While Loop
---------------------------------------------------------------------------------------------------------------------------
//fist loop running after that condition check
var dowhiletext = "";
var dowhileNum = 1;
do{
dowhiletext += " do-while loop number is " + dowhileNum;
dowhileNum++;
}
while(dowhileNum <= 10);
document.getElementById("text25").innerHTML = dowhiletext ;
---------------------------------------------------------------------------------------------------------------------------
5) For Loop
---------------------------------------------------------------------------------------------------------------------------
for(initializer; condition; iteration)
{
//code to be executed
}
initializer = ( var num = 10 ) (variable)
condition = ( num <= 10 ) (condition)
iteration = ( num++ ) (postfix increment)
//for loop
var forLoopText = "";
//forloop forLoopText
for (var forloopNum = 1; forloopNum <= 10; forloopNum++) {
forLoopText += "The For Loop number is " + forloopNum + " ";
}
document.getElementById("text26").innerHTML = forLoopText;
var forLoopTextTable = "";
//forloop forLoopText Table
for (var forloopNum = 1; forloopNum <= 10; forloopNum++) {
var forLoopTable = 8;
forLoopTextTable += "The Table of " + forLoopTable + "x" + forloopNum + " = " + forLoopTable * forloopNum + " ";
}
document.getElementById("text26a").innerHTML = forLoopTextTable;
var forLoopTextSqure = "";
//forloop forLoopText squre root
for (var forloopNum = 1; forloopNum <= 10; forloopNum++) {
forLoopTextSqure += "The For Loop for squre root of " + forloopNum + "x" + forloopNum + " = " + forloopNum * forloopNum + " ";
}
document.getElementById("text26b").innerHTML = forLoopTextSqure;
//for loop car create Array
const forLoopCars = ["Hundui", " TATA", " Mahindra", " Scorpio", " Passion", " Revolt", " Splender", " Hero"];
var forLoopCarsText = "";
//for loop car create Array
for (var forLoopCarNum = 0; forLoopCarNum < forLoopCars.length; forLoopCarNum++) {
forLoopCarsText += "Car detail = " + forLoopCars[forLoopCarNum] + " ";
}
document.getElementById("text26c").innerHTML = forLoopCarsText;
document.getElementById("text26d").innerHTML = "car length " + forLoopCars.length;
---------------------------------------------------------------------------------------------------------------------------
6) For in Loop
---------------------------------------------------------------------------------------------------------------------------
//for in loop array & object
//option 1 for in loop
//for(let x in carName) ==> index number provide to (element= 0,1,2,3,4,)
const person = {fname:"John", lname:"Doe", age:25};
const carsName = ["BMW", "Volvo", "Mini"];
var forInLoopTextPerson = "";
var forInLoopTextCar = "";
//for in loop array & object
for (var x in person) {
forInLoopTextPerson += person[x] + " ";
}
document.getElementById("text13").innerHTML = forInLoopTextPerson;
for (var x in carsName) {
forInLoopTextCar += carsName[x] + " ";
}
document.getElementById("text14").innerHTML = forInLoopTextCar;
---------------------------------------------------------------------------------------------------------------------------
7) For of Loop
---------------------------------------------------------------------------------------------------------------------------
//for of loop array
//option 2 for of loop
//for(let x of forcarsName) ==> elements provide to x (BMW, Volvo, Mini)
const forcarsName = ["BMW", "Volvo", "Mini"];
var forOfLoopTextPerson = "";
var forOfLoopTextCar = "";
for (var x of forcarsName) {
forOfLoopTextCar += x + " ";
}
document.getElementById("text16").innerHTML = forOfLoopTextCar;
// ==========================FUNCTION==========================
A JavaScript function is a block of code designed to perform a particular task.
A JavaScript function is executed when "something" invokes it (calls it).
=> Function Definition
=> Calling a Function
=> Function Parameter
=> function Arguments
=> function expressions
=> Return Keyword
=> Anonymous Function
function functionName ()
{
//Statement
}
function Definition
befor we use a function, we need to define it.
function definition (also called a function declaration, or function statement)
consists of the function keyword, followed by:
The name of the function.
A list of parameters to the function, enclosed in parentheses and separated by commas.
The JavaScript statements that define the function, enclosed in curly brackets, {...}.
1) Local Variables function
------------------------------------------------
function myfunction() {
var fname = "Rakesh Kumar";
document.getElementById("text6").innerHTML = fname + " (typeof) " + typeof (fname);
}
myfunction();
2) Functions Used as Variable Values
------------------------------------------------
3) Function Return
------------------------------------------------
function numbervalue(a, b) {
return a * b;
}
var numbervalue1 = numbervalue(10, 5)
var numbervalue2 = numbervalue(12, 5)
document.getElementById("text7").innerHTML = numbervalue1;
document.getElementById("text8").innerHTML = numbervalue2;
// function creat by template string
function numbervalue(a, b) {
let totalmulti = a * b;
return `total multipule valuse is ${totalmulti} `;
}
var numbervalue1 = numbervalue(10, 5) // output = total multipule valuse is 50
var numbervalue2 = numbervalue(12, 5) // output = total multipule valuse is 60
document.getElementById("text7").innerHTML = numbervalue1;
document.getElementById("text8").innerHTML = numbervalue2;
-------------------------------------------------------------
********** this is complate function only **********
const fsum = function (){
let a = 5, b = 8;
return `the total sum number is ${a+b}`;
}
let sum = fsum();
document.getElementById("text3").innerHTML = sum; // outpul = 13
-------------------------------------------------------------
********** this is complate function only **********
parameter => function numbervalue(a, b) => (a, b) when we creat function which value pass that is (parameter)
argument => var numbervalue1 = numbervalue(10, 5) => (10, 5) when we call the function which value pass that is (argument)
// ==========================MODERN JAVASCRIPT==========================
creat javascript 1996
official javascript 1997 (ECMA script)
ECMA script 2015/ES6
2015/ES6
2016/ES7
2017/ES8
2018/ES9
2019/ES10
2020/ES11
2021/ES12
2022/ES13
2023/ES14
2024/ES15
2025/ pending
ES6
---------------------------
1 => let and const
2 => template literals (template strings)
3 => default arguments
4 => arrow function (fat arrow function)
5 => destructuring (use array , use object)
6 => object properties
7 => rest operators
8 => spread operators = more use (use in react js)
var = Function Scope
let = Block Scope
const = Block Scope
-----------------------------------------------------------------------------
1) => let and const ES6
-----------------------------------------------------------------------------
i) var
--------------------------------
function biodata(){
var firstName = "jitender"
document.getElementById("text1").innerHTML = "" + firstName; // in var work
if(true)
{
var lastName = "sharma"
document.getElementById("text2").innerHTML = "inner " + lastName; // in var work
document.getElementById("text3").innerHTML = "inner " + firstName; // in var work
}
document.getElementById("text4").innerHTML = "Outer " + lastName; // in var work
}
biodata();
var myName = "jitender";
document.getElementById("text1").innerHTML = "my name is " + myName; // in var work
myName = "jitender sharma";
document.getElementById("text2").innerHTML = "my full name is " + myName; // in var work
ii) let and const
--------------------------------
function biodata(){
let firstName = "jitender"
document.getElementById("text1").innerHTML = "" + firstName; // in let and const work
if(true)
{
let lastName = "sharma"
document.getElementById("text2").innerHTML = "inner " + lastName; // in let and const work
document.getElementById("text3").innerHTML = "inner " + firstName; // in let and const work
}
document.getElementById("text4").innerHTML = "Outer " + lastName; // in let and const not work
}
biodata();
const myName = "jitender";
document.getElementById("text1").innerHTML = "my name is " + myName; // in const work
myName = "jitender sharma";
document.getElementById("text2").innerHTML = "my full name is " + myName; // in const not work
-----------------------------------------------------------------------------
2) => template literals (template strings) ES6
-----------------------------------------------------------------------------
for concatenate shorter for 2 or more variable
// template literals (template strings)
let tableofText = "";
// template literals (template strings)
for(let tableNum = 1; tableNum <= 10; tableNum++)
{
let tableof = 8;
//tableofText += "table of " + tableof + " x " + tableNum + " = " + tableof*tableNum + " " ;
tableofText += `table of ${tableof} x ${tableNum} = ${tableof * tableNum} ` ;
}
document.getElementById("text5").innerHTML = tableofText;
-----------------------------------------------------------------------------
3) => default arguments ES6
-----------------------------------------------------------------------------
default function parameters allow named parameters to be initialized with default values if no value or undefined is passed
function rfmultipule(a, b=5)
{
return a * b;
}
let rfmultivalue = rfmultipule (3);
document.getElementById("text6").innerHTML =`default arguments when one value pass only ${rfmultivalue}`;
-----------------------------------------------------------------------------
4) => arrow function (fat arrow function) {in fat arro function we not use in (this argument)} ES6
-----------------------------------------------------------------------------
*******************************************************************
ES-5 VERSION
********** this is complate function only --- not fat arro function **********
const fsum = function (){
let a = 5, b = 8;
return `the total sum number is ${a+b}`;
}
let sum = fsum();
document.getElementById("text3").innerHTML = sum; // outpul = 13
*******************************************************************
********** this is complate function only --- not fat arro function **********
ES-6 VERSION THIS IS SORT FORM NOT NEED TO WRITTEN function
// option 1
const numbervaluee = () => {
let a = 5, b = 10;
let totalsum = a + b;
return `total sum valuse is ${totalsum} `;
}
let numbervalue3 = numbervaluee() // output 15
document.getElementById("text9").innerHTML = numbervalue3;
// option 2
const numbervaluee = () => {
let a = 5, b = 10;
return `total multipul valuse is ${a*b} `;
}
let numbervalue3 = numbervaluee() // output 50
document.getElementById("text9").innerHTML = numbervalue3;
// option 3
const numbervaluee = () => {
return `total multiple values is ${(a = 9)*(b = 4)} `;
}
let numbervalue3 = numbervaluee() // output 36
document.getElementById("text9").innerHTML = numbervalue3;
// option 4
const numbervaluee = () => `total sum valuse is ${(a = 8)*(b = 4)}`; // on single line code no need to retrun keyword
let numbervalue3 = numbervaluee() // output 32
document.getElementById("text9").innerHTML = numbervalue3;
-----------------------------------------------------------------------------
5) destructuring (use array , use object) ES6
-----------------------------------------------------------------------------
for use multiplule values in one variable
=> Traversal of any array
=> Searching and filtter in any array
=> how to sort and compare an array
=> how to insert, and, replace and delete elements in array (CRUD)
=> Map(), Rduce(), Filter() ---- most for react.js use
--------------------------------
i) => Traversal of any array
--------------------------------
//option 1 for in loop
//for(let elements in carName) ==> index number provide to (element= 0,1,2,3,4,)
let carNameText = "";
const carName = ["toyota", "hundui", "bmw", "marsdize", "tata", "passion", "spendor"]
for(let elements in carName)
{
carNameText += `Template string for in loop car name is - ${carName[elements]} `;
}
document.getElementById("text10").innerHTML = carNameText;
//option 2 for of loop
//for(let elements of carName) ==> elements provide to (element= toyota, hundui, bmw, marsdize, tata,)
let carNameText = "";
const carName = ["toyota", "hundui", "bmw", "marsdize", "tata", "passion", "spendor"]
for(let elements of carName)
{
carNameText += `Template string for of loop car name is - ${elements} `;
}
document.getElementById("text10").innerHTML = carNameText;
//option 3
const carName = ["toyota", "hundui", "bmw", "marsdize", "taba", "passion", "spendor"]
let elements =`template string car name data = ${carName[carName.length-1]}`;
document.getElementById("text11").innerHTML = elements;
==> FOR EACH LOOP
for in loop => get index number of array
for of loop => get elements of array
for each loop => get (elements, index number, total array of array)
for each loop is combination of (for in loop) and (for of loop)
forEach loop return => undefined
.map() return => new array
//option 1 for Each loop
let forEachLoopCarNameText = "";
const forEachLoopCarName = ["toyota", " hundui", " bmw", " marsdize", " taba", " passion", " spendor"]
forEachLoopCarName.forEach(function(element, index, array)
{
//forEachLoopCarNameText += element + " index num : " + index + " " + array + " " ;
forEachLoopCarNameText += `${element} index nubmer : ${index} ${array} `;
});
document.getElementById("text12").innerHTML = forEachLoopCarNameText;
//option 1 for Each loop (fat arrow function)
let forEachLoopCarNameText2 = "";
const forEachLoopCarName2 = ["toyota", " hundui", " bmw", " marsdize", " taba", " passion", " spendor", " MAHINDRA"]
forEachLoopCarName2.forEach((element, index, array) =>
{
//forEachLoopCarNameText2 += element + " index num : " + index + " " + array + " " ;
forEachLoopCarNameText2 += `${element} index num : ${index} ${array} `;
});
document.getElementById("text13").innerHTML = forEachLoopCarNameText2;
more then 40 method in this complite array part
1] .indexOf() get = [0,1,2,3,4,5,6,7,8,9,...] no search [-1] search left to right
2] .lastIndexOf() get = [0,1,2,3,4,5,6,7,8,9,...] no search [-1] search right to left
3] .includes() if includes get [true] else [false]
4] .find() if value find [value ] else undefined
5] .findIndex() if findIndex find [0,1,2,3,4,5,6,7,8,9,...] else [-1]
6] .filter() if filter value match get all match value [value ] else nothing data
7] .sort() sort ascending order in array [,5,4,502,,402,0] to [0,4,402,5,502]
8] .push() add array value in last position => return value is number of length
9] .unshift() add array value in first position => return value is number of length
10] .pop() remove array value in last position => return value which one we deleted
11] .shift() remove array value in first position => return value which one we deleted
12] .splice() add, replace, remove exp = (indexNub, 0 1, "cat")
13] .map() get data (element, indexnum, array)
14] .reduce() get data (accumulator, element, indexnum, array)
15] length get length of string and array
STRING METHOD
16] .indexOf() TO get index number of string ("name", 5) character search left to right
17] .lastIndexOf() TO get index number of string ("name", 5) character search right to left
18] .search() ("name") not use second argument and not use (-) -1, -2
19] .slice() slice(start, end)
20] .substring() substring(9, -2)// we not use -2 index number here
21] .substr() .substr(0,5) , .substr(-7)
22] .replace() .replace("name", "NAME2"); only one name change only
23] .replaceAll() .replaceAll("name", "NAME2"); all the name will be chang to NAME
24] .charAt() .charAt(14) => put index number and get what character here
25] .charCodeAt() .charCodeAt(5) => get unicode of the character (a,b,c and 1,2,3) (an integer between 0 and 65535).
26] PAccessString[1]; just like array[3]
27] .toUpperCase() to uppercase
28] .toLowerCase() to tolowercase
29] .concat() to concat 2 string => Fname.concat(Lname)
30] .trim() to space remove in string
31] Date() (1)toLocaleString, (2)toLocaleDateString, (3)toLocaleTimeString
32] Math.PI PI value 3.14159
33] Math.round() (91.5 = 92), (91.4 = 91)
34] Math.pow() Math.pow(3,3) = 81
35] Math.sqrt() Math.sqrt(81) = 9
36] Math.abs() Math.abs(-55) = 55
37] Math.ceil() Math.ceil(99.1) = 100
38] Math.floor() Math.floor(99.9) = 99
39] Math.min() Math.min(0, 150, 30, 20, -8, -200) = -200
40] Math.max() Math.max(0, 150, 30, 20, -8, -200) = 150
41] Math.random() get any randon value 0 to 9
42] Math.trunc() (4.9 = 4)-, (-4.9 = 4)+
43]
44]
45]
46]
-----------------------------------------
ii) => Searching and filtter in any array
-----------------------------------------
1] Array.prototype.indexOf() =@@@@ (METHOD)
if any data search in array we GET index number like [0,1,2,3,4,5,6,7,8,9,...]
if any data no search in array we GET index number like [-1 only]
.indexOf() = forward search = search left to right direction
const SearchArrayCarName = ["toyota", "hundui", "bmw", "marsdize", "tata", "passion", "spendor", "MAHINDRA"]
document.getElementById("text14").innerHTML = `Search index number is ${SearchArrayCarName.indexOf("tata")}`; // index number is 4
document.getElementById("text15").innerHTML = `Search index number is ${SearchArrayCarName.indexOf("tata" , 5 )}`; // index number is -1 because no search find
2] Array.prototype.lastIndexOf() =@@@@ (METHOD)
if any data search in array we GET index number like [0,1,2,3,4,5,6,7,8,9,...]
if any data no search in array we GET index number like [-1 only]
.indexOf() = backward search = search right to left direction
const SearchArrayCarName = ["toyota", "hundui", "bmw", "marsdize", "tata", "passion", "spendor", "MAHINDRA"]
document.getElementById("text1").innerHTML = `Search index number is ${SearchArrayCarName.lastIndexOf("tata")}`; // index number is 4
document.getElementById("text2").innerHTML = `Search index number is ${SearchArrayCarName.lastIndexOf("tata" , 3 )}`; // index number is -1 because no search find
3] Array.prototype.includes() =@@@@ (METHOD)
if any data search in array we GET value [true]
if any data no search in array we GET value [false]
const SearchArrayCarName = ["toyota", "hundui", "bmw", "marsdize", "tata", "passion", "spendor", "MAHINDRA"]
document.getElementById("text1").innerHTML = `Search value is includes ${SearchArrayCarName.includes("tata")}`; // true
document.getElementById("text2").innerHTML = `Search value is includes ${SearchArrayCarName.includes("tata" , 5 )}`; // false
4] Array.prototype.find() =@@@@ (METHOD)
if any data find in array we GET value [value like 200]
if any data no find in array we GET value [undefined]
const animalname2 = ["rat", "cat", "dog", "pig", "donkey"];
const findArrayNumber2 = [100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600]
//sol-1
const funcname_animalname2 = animalname2.find((elem, indexnum) =>
{
return elem == "dog";
});
document.getElementById("text5").innerHTML = `array method find Value: ${funcname_animalname2}`;
//sol-2
const funcname_findArrayNumber = findArrayNumber2.find((elem, indexnum) =>
{
return elem < 400;
});
document.getElementById("text6").innerHTML = `array method find Value: ${funcname_findArrayNumber}`;
//if value not find =: undefined
5] Array.prototype.findIndex() =@@@@ (METHOD)
if any data find in array we GET index number like [0,1,2,3,4,5,6,7,8,9,...]
if any data no find in array we GET index number like [-1 only]
//.findIndex() METHOD left to right
const animalname3 = ["rat", "cat", "dog", "pig", "donkey"];
const findArrayNumber3 = [100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600]
//sol-1
const funcname_animalname3 = animalname3.findIndex((elem) =>
{
return elem == "dog";
});
document.getElementById("text7").innerHTML = `array method findIndex Value: ${funcname_animalname3}`;
//sol-2
const funcname_findArrayNumber3 = findArrayNumber3.findIndex((elem, indexnum) =>
{
return elem < 300;
});
document.getElementById("text8").innerHTML = `array method findIndex Value: ${funcname_findArrayNumber3}`;//
6] Array.prototype.filter() =@@@@ (METHOD) more use for REACT.JS and node.js
if any data filtet in array we GET value like [200,250,300,350]
if any data no filtet in array we GET nothing []
const filterArrayValue = [200, 250, 300, 350, 400, 450, 500, 550, 600]
const filterelem = filterArrayValue.filter((elem, index) => {
return elem < 400;
});
document.getElementById("text1").innerHTML = `filter method value is ${filterelem}`; // [200,250,300,350]
-----------------------------------------
iii) => how to sort and compare an array
-----------------------------------------
1] Array.prototype.sort() =@@@@ (METHOD)
in this method first convert to string then search it
const shortArrayValue = [100, 10, 1100, 200, 250, 300]
document.getElementById("text1").innerHTML = `short method value is ${shortArrayValue.sort()}`; // sort 10,100,1100,200,250,300
----------------------------------------------------------------------------------
iv) => how to insert, and, replace and delete elements in array (CRUD)
----------------------------------------------------------------------------------
1] Array.prototype.push() =@@@@ (METHOD)
the push() method adds one or more elements to the end of an array and returns the new length of the array
// return => length of array
// .push() method -- (ADD ARRAY) in last
const animalarray1 = ["got", "buffalo", "camel", "dog"]
document.getElementById("text6").innerHTML = `return is total length of array ${animalarray1.push("cow", "seep", "horse")}`; //
document.getElementById("text7").innerHTML =animalarray1;
2] Array.prototype.unshift() =@@@@ (METHOD)
// .unshift() method -- (ADD ARRAY) in first
const animalarray2 = ["got", "buffalo", "camel", "dog"]
document.getElementById("text8").innerHTML = `return is total length of array ${animalarray2.unshift("cow", "seep", "horse", "ELEPHANT")}`; //
document.getElementById("text9").innerHTML =animalarray2;
3] Array.prototype.pop() =@@@@ (METHOD)
The pop() method removes the last elemtnt from an array and returns that element. This method changes the length of the array
// .pop() method -- (REMOVE ARRAY) in last
const animalarray3 = ["got", "buffalo", "camel", "dog"]
document.getElementById("text10").innerHTML = `return value which is remove it ${animalarray3.pop()}`; // last name dog
document.getElementById("text11").innerHTML =animalarray3;
4] Array.prototype.shift() =@@@@ (METHOD)
The shift() method removes the first elemtnt from an array and returns that element. This method changes the length of the array
// .shift() method -- (REMOVE ARRAY) in first
const animalarray4 = ["got", "buffalo", "camel", "dog"]
document.getElementById("text12").innerHTML = `return value which is remove it ${animalarray4.shift()}`; // first name got
document.getElementById("text13").innerHTML =animalarray4;
***************************************
CHALANGE TASK
=> 1) add Dec at the end of an array?
=> 2) what is the return value of splice method?
=> 3) update march to March (update)?
=> 4) Delete June from an array?
const months = ["Jan", "march", "April", "June", "July",];
***************************************
5] Array.prototype.splice() =@@@@ (METHOD)
// Adds and/or removes elements from and array.
// retrun delete index number only like [0,1,2,3,4,5]
// sol-1 .splice() method add array
//months1.splice(indexnumber,0 not delete delete 1,"add Dec");
//sol 1.1 add in last
const months1 = ["Jan", "march", "April", "June", "July", ];
const newmonths1 = months1.splice(months1.length, 0, "Dec")
document.getElementById("text9").innerHTML = `array method splice Value: ${months1}`;
//sol 1.2 anywere is add array
const months2 = ["Jan", "march", "April", "June", "July", ];
document.getElementById("text10").innerHTML = `array : ${months2}`;
const month_indexnumber = months2.indexOf("march");
const newmonths2 = months2.splice(month_indexnumber, 0, "Dec");
document.getElementById("text11").innerHTML = `array method splice Value: ${months2}`;
// sol-3 .splice() method replace array
const months3 = ["Jan", "march", "April", "June", "July",];
const indexOfmonth = months3.indexOf("march");
if(indexOfmonth !== -1)
{
const newmonts3 = months3.splice(indexOfmonth,1,"March1");
document.getElementById("text15").innerHTML = months3; // March1
}
else{
document.getElementById("text15").innerHTML = "no such data found";
}
// sol-4 .splice() method delete array
const months4 = ["Jan", "march", "April", "June", "July",];
const indexOfmonth2 = months4.indexOf("Jan1");
if(indexOfmonth2 !== -1)
{
const newmonts3 = months4.splice(indexOfmonth2,1);
document.getElementById("text16").innerHTML = months4; //
document.getElementById("text17").innerHTML = indexOfmonth2; //
}
else{
document.getElementById("text16").innerHTML = "no such data found";
}
// sol-5 .splice() method delete Infinity array
const months5 = ["Jan", "march", "April", "June", "July",];
const indexOfmonth5 = months5.indexOf("April");
if (indexOfmonth5 !== -1)
{
const newmonts3 = months5.splice(indexOfmonth5, Infinity);
document.getElementById("text18").innerHTML = months5; //
document.getElementById("text19").innerHTML = indexOfmonth5; //
}
else{
document.getElementById("text18").innerHTML = "no such data found";
}
v) => Map(), Rduce(), Filter() --- for react.js use
-----------------------------------------
1] Array.prototype.map() =@@@@ (METHOD)
// let newArray = arr.map(callback(currentValue[, index[, array]]) {
// return element for newArray, after executing something
}[, thisArg]);
// Reterns a new array containing the results of calling a function on every element in this array.
forEach loop return => undefined
.map() return => new array
.map() we use chainable method
use use .reduce(), sort, filter(), method with .map(), mathod
// .map()
// sol-1
//element > 9
const array1 = [1, 4, 9, 16, 25];
let newArray1 = array1.map( (element, indexNum, arr) => {
return element > 9;
} );
document.getElementById("text2").innerHTML = `array Value: ${array1}`; //
document.getElementById("text3").innerHTML = `array method map Value: ${newArray1}`; // array > 9 = all value true
// sol-2 map return value
const array2 = [1, 4, 9, 16, 25];
let newArray2 = array2.map( (element, indexNum, arr) => {
return ` index no = ${indexNum} and the value is ${element} belong to ${arr} `
} );
document.getElementById("text4").innerHTML = `array Value: ${array2}`; //
document.getElementById("text5").innerHTML = `array method map Value: ${newArray2}`; // return element, index number, array
// sol-3 for each loop return value is undefined
const array3 = [1, 4, 9, 16, 25];
let newArray3 = array3.forEach( (element, indexNum, arr) => {
return ` index no = ${indexNum} and the value is ${element} belong to ${arr} `
} );
document.getElementById("text6").innerHTML = `array Value: ${array3}`; //
document.getElementById("text7").innerHTML = `array method map Value: ${newArray3}`; // // return undefined
//chalange
1) find the square root of each element in an array?
let arr = [25, 36, 49, 64, 81];
2) multiply each elemtnt by 2 and return only those elements which are greater than 10?
let arr = [2, 3, 4, 6, 8];
//sol-4 squre root
const maparray4 = [25, 36, 49, 64, 81];
const newmaparray4 = maparray4.map((element) =>
{
return Math.sqrt(element);
//return Math.pow(element, 2);
})
document.getElementById("text19").innerHTML = `array map(). squre root value: ${newmaparray4}`;
//sol-5 squre
const maparray5 = [5, 6, 7, 8, 9];
const newmaparray5 = maparray5.map((element) =>
{
return element**2;
})
document.getElementById("text20").innerHTML = `array map(). squre value: ${newmaparray5}`;
//sol-6 array x 2 and > 10 value only pass
const maparray6 = [2, 3, 4, 6, 8];
const newmaparray6 = maparray6.map((element) =>
{
return element*2;
}).filter((element) =>
{
return element > 10;
})
document.getElementById("text21").innerHTML = `array map(). value: ${maparray6}`;
document.getElementById("text22").innerHTML = `array map(). value: ${newmaparray6}`;
2] Array.prototype.reduce() =@@@@ (METHOD)
// flatten an array means to convert the 3d or 2d array into a single dimensional arary
//the reduce() method executes a reducer function (that you provide) on each element of the array, resultingin single output value.
// The reducer function takes four arguments: (Accumulator, Ellement, IndexNum, array)
// Accumulator
// Current Value
// Current Index
// Source Array
for use = , sum, %, product, average
// sol-6 reduce method?
const array6 = [2, 3, 4];
let newarray6 = array6.reduce((accumulator, element) => {
return accumulator += element;
//return accumulator *= element;
},5)
document.getElementById("text12").innerHTML = `array Value: ${array6}`; //
document.getElementById("text13").innerHTML = `array method .reduce() value ${newarray6}`; //
// sol-7 multiply each elemtnt by 2 and return only those elements which are greater than 10?
const array7 = [2, 3, 4, 6, 8];
let newarray7 = array7.map( (element, indexNum, array) => {
return element*2;
}).filter((element, indexnum, array) => {
return element > 10;
}).reduce((accumulator, element) =>{
return accumulator += element;
})
document.getElementById("text14").innerHTML = `array Value: ${array7}`; //
document.getElementById("text15").innerHTML = `array method > 10 map().filter.reduce value ${newarray7}`; //
// how to flatten an array
// converting 2d and 3d array into one dimensinal array
// 2d array
const arr = [
['zone_1', 'zone_2'],
['zone_3', 'zone_4'],
['zone_5', 'zone_6'],
['zone_7', 'zone_8'],
];
let flatArray = arr.reduce((accumulator, element) =>{
return accumulator.concat(element);
})
document.getElementById("text16").innerHTML = `2d array convert to flatten array: ${flatArray}`; //
-----------------------------------------------------------------------------
6) STRINGS IN JAVASCRIPT ES6
-----------------------------------------------------------------------------
what we will do
1) Escape Character
2) Finding a String in a String
3) Searching for a String in a String
4) Extracting String Part
5) Replacing String Content
6) Extracting String Characters
7) Other useful methods
// Section 7 strings in javascript
// A javascript string is zero or more characters written inside quotes.
// JavaScript strings are used for storing and manipulating text.
// You can use single or double quotes
//Strings can be created as primitives, from string literals, or as objects, using the String() constructor
i) String.prototype.length() =@@@@ (METHOD)
// how to find the length of a string
// Reflects the length of the string.
// length array
let myname = "jitender sharma";
document.getElementById("text17").innerHTML = `length of array: ${myname.length}`; //
1) Escape Character = \"
------------------------------------------
// let anySentence = "We are the so-called "vikings" from the north. ";
// if you want to mess, simply use the alternate quote
// sol-1
let anySentence1 = "We are the so-called \"vikings\" from the north. ";
document.getElementById("text18").innerHTML = `length of array: ${anySentence1}`; // need back \ slace
// sol-2
let anySentence2 = 'We are the so-called "vikings" from the north. ';
document.getElementById("text19").innerHTML = `length of array: ${anySentence2}`; // no need back \ slace
2) FINDINGS STRING IN A STRING
------------------------------------------
String.prototype.indexOf(serachValue [, fromIndex]) =@@@@ (METHOD)
// String.prototype.indexOf(serachValue [, fromIndex])
the indexOf() method returns the index of (the position of) the first occurrence of a specified text in a string
// find index in a string
// sol-1
let biodata1 = 'hi my name is jitender sharma';
document.getElementById("text20").innerHTML = `find index number in a string: ${biodata1.indexOf("my")}`; // find index numbers -3
String.prototype.lastIndexOf(serachValue [, fromIndex]) =@@@@ (METHOD)
3) Searching for a String in a String
------------------------------------------
String.prototype.search(regexp) =@@@@ (METHOD)
// The search() method searches a string for a specified value and returns the position of the match
// The search() method connot take a second start position argument
// search for in a STRING
let biodata3 = 'hi my name is jitender sharma';
document.getElementById("text21").innerHTML = `find index number in a string: ${biodata3.search("name")}`; // find index numbers -6 not use second argument like ("name" , 3)
4) Extracting String Part
------------------------------------------
// There are 3 methods for extracting a part of a string:
a) slice(start, end)
b) substring(start, end)
c) substr(start, length)
String.prototype.slice() =@@@@ (METHOD)
// slice() extracts a part of a string and returns the extracted part in a new string.
// The method takes 2 parameters: the start position, and the end position (end not included).
//sol-1
let slicestring = 'hi my name is jitender sharma';
res_slicestring = slicestring.slice(4, 8)// index number
//res_slicestring = slicestring.slice(bananaindex , oranngeindex-1)
document.getElementById("text22").innerHTML = `old string value : ${slicestring}`; //
document.getElementById("text23").innerHTML = `we want Slice sting value : ${res_slicestring}`; //
//11 CHALLENGE TIME
// Display only 280 characters of a tirng like the one used in twitter?
//sol-1 we want only 280 character get only
let mytwittertext = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.";
let result_mytwittertext = mytwittertext.slice(0, 280);
let length_mytwittertext = result_mytwittertext.length;
document.getElementById("text24").innerHTML = `${result_mytwittertext}`; //
document.getElementById("text25").innerHTML = `Slice total length of text : ${length_mytwittertext}`; //
String.prototype.substring() =@@@@ (METHOD)
// substring() is similar to slice()
// The difference is that substring() cannot accept negative indexes.
//sol-1
let substringstring = 'hi my name is jitender sharma';
//res_substringstring = substringstring.substring(9, -2)// we not use -2 index number here
res_substringstring = substringstring.substring(9)
document.getElementById("text26").innerHTML = `old string value : ${substringstring}`; //
document.getElementById("text27").innerHTML = `we want substring sting value : ${res_substringstring}`;
String.prototype.substr() =@@@@ (METHOD)
//substr() is similar to slice()
// The difference is that the second parameter specifies the length of the extracted part
// substr method
let substrstring = "Apple Mango Banana Orange";
//sol-1
//res_substrstring = substrstring.substr(0,5)
res_substrstring = substrstring.substr(-7)
document.getElementById("text28").innerHTML = `old string value : ${substrstring}`; //
document.getElementById("text29").innerHTML = `we want substring sting value : ${res_substrstring}`;
5) Replacing String Content
------------------------------------------
REPLACING STRING CONTENT()
String.prototype.replace() =@@@@ (METHOD)
// string.prototype.replace(searchFor, replaceWith)
// The replace() method replaces a specified value with another value in a string
// replace method
//sol-1
let replaceString = "hi my name is jitender sharma and my profile jitender sharma";
let Resutl_replaceString = replaceString.replace("jitender sharma", "JITENDER KUMAR");
document.getElementById("text30").innerHTML = `old string value : ${replaceString}`; //
document.getElementById("text31").innerHTML = `replace replace() string value : ${Resutl_replaceString}`; //
//sol-2
let replaceString2 = "hi my name is jitender sharma and my profile jitender sharma";
let Resutl_replaceString2 = replaceString2.replaceAll("jitender sharma", "JITENDER KUMAR");
document.getElementById("text32").innerHTML = `old string value : ${replaceString2}`; //
document.getElementById("text33").innerHTML = `replace replace() string value : ${Resutl_replaceString2}`; //
6) Extracting String Characters
------------------------------------------
// There are 3 methods for extracting string characters:
// charAt(position)
//charCodeAt(position)
//Property access []
String.prototype.charAt() =@@@@ (METHOD)
// The charAt() method returns the character at a specified index (position) in a string
// charAt method
//sol-1
let charAtString = "hi my name is jitender sharma and my profile jitender sharma";
let Resut_charAtString = charAtString.charAt(14);
document.getElementById("text34").innerHTML = `old string value : ${charAtString}`; //
document.getElementById("text35").innerHTML = `charAt charAt() string value : ${Resut_charAtString}`; //
String.prototype.charCodeAt() =@@@@ (METHOD)
//The charCodeAt() method returns the unicode of the character at a specified index in a string:
// The method returns a UTF-16 code (an integer between 0 and 65535).
// charCodeAt method
//sol-1
let charCodeAtString = "HELLO WORLD";
let Resut_charCodeAtString = charCodeAtString.charCodeAt(0);
let length_charCodeAtString = charCodeAtString.length;
let Resut_charCodeAtString2 = charCodeAtString.charCodeAt(length_charCodeAtString-1);
document.getElementById("text36").innerHTML = `old string value : ${charCodeAtString}`; //
document.getElementById("text37").innerHTML = `charCodeAt charCodeAt() string value : ${Resut_charCodeAtString}`; //
document.getElementById("text38").innerHTML = `charCodeAt last character charCodeAt() string value : ${Resut_charCodeAtString2}`; //
PROPERTY ACCESS
// ECMAScript 5 (2009) allows property access [] on strings
//sol-1
let PAccessString = "HELLO WORLD";
let Resut_PAccessString = PAccessString[1];
document.getElementById("text39").innerHTML = `old string value : ${PAccessString}`; //
document.getElementById("text40").innerHTML = `PROPERTY ACCESS PROPERTY ACCESS() string value : ${Resut_PAccessString}`; //
7) Other useful methods
------------------------------------------
String.prototype.toUpperCase() =@@@@ (METHOD)
String.prototype.toLowerCase() =@@@@ (METHOD)
String.prototype.concat() =@@@@ (METHOD)
// UPPER AND LOWER CASE
//sol-1
let LowerUpperString = "HELLO world";
let Resut_LowerUpperString1 = LowerUpperString.toUpperCase();
document.getElementById("text41").innerHTML = `old string value : ${LowerUpperString}`; //
document.getElementById("text42").innerHTML = `uppercase toUpperCase() string value : ${Resut_LowerUpperString1}`; //
//sol-2
let Resut_LowerUpperString2 = LowerUpperString.toLowerCase();
document.getElementById("text43").innerHTML = `old string value : ${LowerUpperString}`; //
document.getElementById("text44").innerHTML = `uppercase toUpperCase() string value : ${Resut_LowerUpperString2}`; //
// CONCAT METHOD
String.prototype.concat() =@@@@ (METHOD)
let Fname = "jitender";
let Lname = "sharma";
let ConcatString = Fname.concat(Lname)
//let ConcatString = Fname.concat(" ", Lname)
document.getElementById("text45").innerHTML = ` concat() of 2 string value : ${ConcatString}`; //
String.prototype.trim() =@@@@ (METHOD)
// The trim() method removes whitespace from both sides of a
// TRIM METHOD
let TrimString = " Rahul Kumar ";
//let Result_TrimString = TrimString.trim();
document.getElementById("text46").innerHTML = `old string value : ${TrimString}`; //
document.getElementById("text47").innerHTML = ` trim() string value : ${Result_TrimString}`; //
String.prototype.split() =@@@@ (METHOD)
//Converting a String to an Array
//A string can be converted to an array with the split() method
//split method
let split_text1 = "a,b,c,d,e";
let split_text2 = "a b c d e";
let split_text3 = "a|b|c|d|e";
document.getElementById("text1").innerHTML = `split text 1 : ${split_text1.split(",")}`; //split on commas
document.getElementById("text2").innerHTML = `split text 2 : ${split_text2.split(" ")}`; //split on spaces
document.getElementById("text3").innerHTML = `split text 3 : ${split_text3.split("|")}`; //split on pipe
---------------------------------------------------
/**** section 8 => Date and time in javasript ****/
---------------------------------------------------
//DATE method
//TIME method
// javaacript date objects represent a single moment in time in a platform-independent format. date objects contain a Number
// that represents milliseconds since 1 janauray 1970 UTC.
// CREATING DATE OBJECTS
// Thre are 4 ways to create a new date object:
1) new Date()
2) new Date(year, month, day, hours, minutes, seconds, milliseconds)
// it takes 7 arguments
3) new Date(millisenonds)
// we connot avoid month section
4) new Date(date string)
// Date objects are created with the new Date() construction.
Date() =@@@@ (METHOD)
//1) Date method
let currDate = new Date();
let currDate2 = new Date().toLocaleString();
let currDate3 = new Date().toString();
document.getElementById("text4").innerHTML = ` Date() date and time data : ${currDate}`; //
document.getElementById("text5").innerHTML = ` Date() date and time data : ${currDate2}`; // local aria date time
document.getElementById("text6").innerHTML = ` Date() date and time data : ${currDate3}`; //
Date.now() =@@@@ (METHOD)
Returns the numeric value corresponding to the currrent time-the number of millisenconds elapsed sine january 1, 1970 00:00:00 UTC
//Date.now() method
//let currDateNow = new Date.now();
//document.getElementById("text7").innerHTML = ` Date.now() date and time data : ${currDateNow.toLocaleString()} `; //
//2) new Date(year, month, day, hours, minutes, seconds, milliseconds)
let myDateTime = new Date(2022, 11, 31, 23, 30, 0, 0);
document.getElementById("text8").innerHTML = ` Date date and time data : ${myDateTime.toLocaleString()} `; //
Date(dateString) =@@@@ (METHOD)
// new Date(dateString)
// new Date(dateString) creates a new date object from a date string
//4) Date(dateString)
let dateString = new Date("october 13 2022 11:13:05 ");
document.getElementById("text9").innerHTML = ` Date dateString date and time data : ${dateString.toLocaleString()} `; //
Date(milliseconds) =@@@@ (METHOD)
// new Date(milliseconds)
Date() =@@@@ (METHOD)
// how to get the indivisual date
.toLocaleString()
.getFullYear()
.getMonth()
.getDate()
.getDay()
DATE METHOD =@@@@ (METHOD) GET DATE
// Date() method to get indivulal date YEAR, MONTH, DATE, DAY
let datemethod1 = new Date();
document.getElementById("text10").innerHTML = ` Date method date and time data : ${datemethod1.toLocaleString()} `; //
document.getElementById("text11").innerHTML = ` Date method CURRENY YEAR : ${datemethod1.getFullYear()} `; // get year
document.getElementById("text12").innerHTML = ` Date method CURRENY MONTH : ${datemethod1.getMonth()+1} `; // get month
document.getElementById("text13").innerHTML = ` Date method CURRENY DATE : ${datemethod1.getDate()} `; // get date
document.getElementById("text14").innerHTML = ` Date method CURRENY DAY : ${datemethod1.getDay()} `; // get day
// how to set the indivisual date
DATE METHOD =@@@@ (METHOD) SET DATE
// HOW TO SET THE INDIVISUAL DATE (GET VALUE IN MILLILSECOND)
let datemethod2 = new Date();
document.getElementById("text15").innerHTML = ` Date method : ${datemethod2.toLocaleString()} `; //
document.getElementById("text16").innerHTML = ` Date method SET YEAR : ${datemethod2.setFullYear(2022, 10, 5)} `; // set year
document.getElementById("text17").innerHTML = ` Date method SET MONTH : ${datemethod2.setMonth(10)} `; // set month
document.getElementById("text18").innerHTML = ` Date method SET DATE : ${datemethod2.setDate(5)} `; // set date
//document.getElementById("text19").innerHTML = ` Date method SET DAY : ${datemethod2.setDay(4)} `; // set day
TIMES METHOD =@@@@ (METHOD) GET TIME
// HOW TO GET THE TIME (HOUSE, MINUTES, SECONDS, MILISECOND)
let datemethod3 = new Date();
document.getElementById("text20").innerHTML = ` Date method : ${datemethod3.toLocaleString()} `; //
document.getElementById("text21").innerHTML = ` Date method GET TIME : ${datemethod3.getTime()} `; // set year
document.getElementById("text22").innerHTML = ` Date method GET HOURS : ${datemethod3.getHours()} `; // set month
document.getElementById("text23").innerHTML = ` Date method GET MINUTES : ${datemethod3.getMinutes()} `; // set date
document.getElementById("text24").innerHTML = ` Date method GET SECONDS : ${datemethod3.getSeconds()} `; // set day
document.getElementById("text25").innerHTML = ` Date method GET MILISECONDS : ${datemethod3.getMilliseconds()} `; // set day
TIMES METHOD =@@@@ (METHOD) SET TIME
// HOW TO SET THE INDIVISUAL TIME (GET VALUE IN MILLILSECOND)
let datemethod4 = new Date();
document.getElementById("text26").innerHTML = ` Date method SET TIME FULL TIME : ${datemethod4.toLocaleTimeString()} `; //
document.getElementById("text27").innerHTML = ` Date method SET TIME : ${datemethod4.setTime(0)} `; //
document.getElementById("text28").innerHTML = ` Date method SET HOURS : ${datemethod4.setHours(0)} `; //
document.getElementById("text29").innerHTML = ` Date method SET MINUTES : ${datemethod4.setMinutes(30)} `; //
document.getElementById("text30").innerHTML = ` Date method SET SECONDS : ${datemethod4.setSeconds(30)} `; //
document.getElementById("text31").innerHTML = ` Date method SET MILISECONDS : ${datemethod4.setMilliseconds(30)} `; //
function mytime(){
let mytimes = new Date();
mytimes.setHours(5)
document.getElementById("text32").innerHTML = ` Date method ON ONCLICK FUNCTION SET HOUSE : ${mytimes.toLocaleTimeString()}`; //
}
let datemethod5 = new Date();
document.getElementById("text33").innerHTML = ` Date method CURRENT TIME : ${datemethod5.toLocaleTimeString()} `; //
//time date .toLocaleString()
let currDate1 = new Date();
document.getElementById("text34").innerHTML = `Date and Time : ${currDate1.toLocaleString()}`; //
//date .toLocaleDateString()
let currDate2 = new Date();
document.getElementById("text35").innerHTML = `Date Only : ${currDate1.toLocaleDateString()}`; //
//time .toLocaleTimeString()
let currDate3 = new Date();
document.getElementById("text36").innerHTML = `Time Only : ${currDate1.toLocaleTimeString()}`; //
------------------------------------------------------------------------------------------------------
/**** section 9 => MATH OBJECT in javasript ****/
------------------------------------------------------------------------------------------------------
The javascript math object allows you to perform mathematical tasks on numbers
Math.PI =@@@@ (METHOD) @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
//(Math.PI)
let Math_Pi = Math.PI;
document.getElementById("text1").innerHTML = `PI Value : ${Math_Pi}`; //
Math.round() =@@@@ (METHOD) @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
// returns the value of x rounded to its nearest integer
//Math.round()
let Math_round1 = 97.1;
let Math_round2 = 97.5;
document.getElementById("text2").innerHTML = `round Value of 97.1 : ${Math.round(Math_round1)}`; //
document.getElementById("text3").innerHTML = `round Value 97.5 : ${Math.round(Math_round2)}`; //
Math.pow() =@@@@ (METHOD) @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
// Math.pow(x,y) returns the value of x to the power of y
//Math.pow()
document.getElementById("text4").innerHTML = `power 2 pow 3 : ${Math.pow(2,3)}`; //
document.getElementById("text5").innerHTML = `power 4 pow 3 : ${Math.pow(4,3)}`; //
Math.sqrt() =@@@@ (METHOD) @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
Math.sqrt(x) returns the square root of x
//Math.sqrt()
document.getElementById("text6").innerHTML = `sqrt 25 : ${Math.sqrt(25)}`; //
document.getElementById("text7").innerHTML = `sqrt 91 : ${Math.sqrt(81)}`; //
document.getElementById("text8").innerHTML = `sqrt 66 : ${Math.sqrt(66)}`; //
Math.abs() =@@@@ (METHOD) @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
Math.abs(x) returns the absolute (Positive) value of x (- convert to + value)
//Math.abs()
let abs1 = -55;
let abs2 = -55.5;
let abs3 = -955;
document.getElementById("text9").innerHTML = `abs value pass only -55 : ${Math.abs(abs1)}`; //
document.getElementById("text10").innerHTML = `abs value pass only -55.5 : ${Math.abs(abs2)}`; //
document.getElementById("text11").innerHTML = `abs value pass only -955 : ${Math.abs(abs3)}`; //
Math.ceil() =@@@@ (METHOD) @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
Math.ceil(x) returns the value of x rounded up to its nearest integer (0.2 any point value up )
//Math.ceil()
let ceil1 = 4.6;
let ceil2 = 99.1;
document.getElementById("text12").innerHTML = `ceil auto increase any (.)decimal value 4.6 : ${Math.ceil(ceil1)}`; //
document.getElementById("text13").innerHTML = `ceil auto increase any (.)decimal value 99.1 : ${Math.ceil(ceil2)}`; //
Math.floor() =@@@@ (METHOD) @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
Math.floor(x) returns the value of x rounded down to its nearest integer (decrease .(dot) valuse down )
//Math.floor()
let floor1 = 4.6;
let floor2 = 99.1;
document.getElementById("text14").innerHTML = `floor auto decrease any (.)decimal value 4.6 : ${Math.floor(floor1)}`; //
document.getElementById("text15").innerHTML = `floor auto decrease any (.)decimal value 99.1 : ${Math.floor(floor2)}`; //
Math.min() =@@@@ (METHOD) @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
Math.min() can be used to find the lowest value in a list of argument
//Math.min()
let min1 = (0, 150, 30, 20, -8, -200);
document.getElementById("text16").innerHTML = `min value in list : ${Math.min(min1)}`; //
Math.max() =@@@@ (METHOD) @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
Math.max() can be used to find the maximum value in a list of argument
//Math.max()
let maxvalue = (0, 150, 30, 20, -8, -200);
document.getElementById("text17").innerHTML = `max value in list : ${Math.max(0, 150, 30, 20, -8, -200)}`; //
Math.random() =@@@@ (METHOD) @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
Math.random() returns a random number between 0 (inclusive), and 1 to 9
//Math.random()
document.getElementById("text18").innerHTML = `random number : ${Math.floor(Math.random()*10)}`; //
Math.trunc() =@@@@ (METHOD) @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
The Math.trunc() method returns the integer part of a number
//Math.trunc()
document.getElementById("text19").innerHTML = `trunc value : ${Math.trunc(4.6)}`; //
document.getElementById("text20").innerHTML = `trunc value : ${Math.trunc(-99.1)}`; //
if the argument is a positive number, Math.trunc() is equivalent ot Math.floor()
otherwise Match.trunc() is equivalent to Math.ceil().
------------------------------------------------------------------------------------------------------
/**** section 10 => DOM in javasript ****/
------------------------------------------------------------------------------------------------------
=> Window vs Document
=> DOM vs BOM
=> DOM navigation
=> Searching and getting Elements Reference
=> Window vs Document (DEFERENCE)
=> Window
a) window is Globle object
=> Document
a) document is child of window
WINDOW
||
1) DOM => DOCUMENT OBJECT MODEL
2) BOM => BROWSER OBJECT MODEL
3) JAVASCRIPT
1) DOM => DOCUMENT => HTML(head body) => body(p a span h1)
2) BOM => navigator, screen, location, frames, history, (xhm httpRequest)
2) javascript => Object, Array, Function
----------------------------
BOM
----------------------------
//GO BACK HISTORY
function goback(){
window.history.back();
}
BOM URL CHANGE
// alert and move to other site
alert(location.href); // show current url
if(confirm("want to visit current website"))
{
location.href = "https://www.youtube.com/"; // redirectin the website
}
----------------------------
DOM NAVIGATION
----------------------------
CONSOLE
document.body.childElementCount how many element in body tag
document.body.children how many children of body take
document.body.firstElementChild
document.body.lastElementChild
document.body.childNodes how many child in body tag
document.body.parentElement body parent
document.body.parentNode body parent same
document.body.nextSibling sibling with body tag
document.body.previousElementSibling
--------------------------------------------------------
=> Searching and getting Elements Reference
--------------------------------------------------------
// onclik funtion
const fulldata = () =>{
document.getElementById("text1").innerHTML = `my full name is jitendr sharma`;
}
document.getElementsByClassName('carname').innerHTML = `change the car name text`; // (s) on getElementsByClassName
document.getElementsByTagName('p').innerHTML = "" ;
document.getElementsByName('gender').innerHTML = "" ;
document.querySelector(".carname").innerHTML = "bike name" ; // by classname
document.querySelector("#text3").innerHTML = "3bike name" ;// by id
------------------------------------------------------------------------------------------------------
/**** section 10 => EVENT in javasript ****/
------------------------------------------------------------------------------------------------------
1) 4 ways of writing events in JavaScript
2) What is Event Object?
3) MouseEvent in JavaScript
4) KeyboardEvent in JavaScript
5) InputEvents in JavaScript
HTML events are "things" that happen to HTML elements. When JavaScript is used in HTML pages, JavaScript Cat "react" these events.
=> HTML Event
An HTML event can be something the browser does, or something a user does.
1) 4 ways of writing events in JavaScript
------------------------------------------------------
here are some ecamplers of HTML events:
a) An HTML web page has finshed loading
b) An HTML input field was changed
c) An HTML button was clicked
d) Often, when evets happen, you may want to do something.
// section1 4 ways of wriring Events in JavaScript
1): using inline event alert();
2): By Calling a funcion (we already seen and most common way of writing)
3): using Inline events (HTML onclick="" property and element.onclick)
4): using Event Listeners (addEventListener and IE's attachEvent) (@@@@@@@@@@@ MOSTLY THIS IS USE IMPORTANT @@@@@@@@@@)
// 1ST way to writing ALERT
// 2nd way to writing CALING FUNCTION
const callingFunction = () =>{
if(true){document.getElementById("text2").innerHTML = `Function Task COMPLETE`;}
else{document.getElementById("text2").innerHTML = `Function Task NOT COMPLETE`;}
}
// 3rd way to writing INLINE FUNCTION
const thirdway = document.getElementById("inlineEventBTN");
thirdway.onclick = function(){
alert("inline event functin BY ID alert Yes No");
}
// 3rd B way to writing INLINE FUNCTION
const thirdway2 = document.querySelector(".class_inline_event");
thirdway2.onclick = function(){
alert("inline event functin BY CLASS alert Yes No");
}
// 4th way to writing EVENT LISTENERS (@@@@@@@@@@@ MOSTLY USE EVENT LISTENERS IMPORTANT @@@@@@@@@@)
const fourtway = document.querySelector("#event_listener_id");
fourtway.addEventListener('click', () =>{
alert("this is event listener ");
})
fourtway.addEventListener('click', () =>{
console.log("this is event listener ");
})
// this is run both site HTML and consol.log
2) What is Event Object?
------------------------------------------------------
Event object is the parent object of the event object.
for Example
MouseEvent, FocusEvent, KeyboardEvent etc
const EventObject = document.querySelector("#event_object");
const checkevent = () =>{
alert("this is EVENT OBJECT");
console.log(event);
console.log(event.target);
console.log(event.type);
}
EventObject.addEventListener('click', checkevent);
3) MouseEvent in JavaScript
------------------------------------------------------
The mouseEvent Object
Events that occur when the moues interacts with the HTML
document belogs to the MouseEvvent Object.
//mouse event 1
function mousedown(){
document.querySelector("#mouse_event").style.color = "#f00"
}
function mouseup(){
document.querySelector("#mouse_event").style.color = "#065fd4"
}
//mouse event 2 mose enter and mouse leave
const new_mouse_event2 = document.getElementById("mouse_event2");
new_mouse_event2.addEventListener('mouseenter', () =>{
new_mouse_event2.style.backgroundColor = "#f00"
console.log("mouse is enter");
})
new_mouse_event2.addEventListener('mouseleave', () =>{
new_mouse_event2.style.backgroundColor = "#065fd4"
console.log("mouse is leave");
})
4) KeyboardEvent in JavaScript
------------------------------------------------------
//KeyboardEvent
// sol 1
const keypress = () =>{
document.getElementById("keys1").innerHTML = `you press ${event.key} and its code is ${event.code} `;
}
// sol 2
const keydown = () =>{
document.getElementById("keys2").innerHTML = `key is down`;
}
const keyup = () =>{
document.getElementById("keys2").innerHTML = `key is up`;
}
5) InputEvents in JavaScript
------------------------------------------------------
The onchange event occurs when the value of an element has been changed.
for radio button and check boxes, the onchange event occur when the checker state has been changed.
const iceCreame = document.getElementById("icecreame2");
iceCreame.addEventListener('change', () =>{
const inputchange = document.getElementById("ice2").value;
const selectchange = document.getElementById("icecreame2").value;
const result = document.getElementById("input_event_result2");
result.innerHTML = `mr: ${inputchange} select ${selectchange} ice creame flavor`;
})
a) onclick="callingFunction()"
b) onmousedown="mousedown()"
c) onmouseup="mouseup()"
d) mouseenter
e) mouseleave
f) onkeypress="keypress()"
g) onkeydown="keydown()"
h) onkeyup="keyup()"
i) onchange="selectElement()"
*********** 8-Events2 HTML ************
------------------------------------------------------------------------------------------------------
/**** section 11 => TIMING BASE EVENT in javasript ****/
------------------------------------------------------------------------------------------------------
1) setTimeout() ------ COUNDOWN
2) setInterval() ------ DIGITAL CLOCK
3) clearTimeout()
4) clearInterval()
The window object allows execution of code at specified time intervals
these time intervals are called timing events.
The two key mehods to use with JavaScript are:
1) setTimeout(function, milliseconds)
Executes a function, after waiting a specified number of millisenods.
2) setInterval(function, millisenods)
Same as setTimeout(), but repeats the execution of the function continuously.
// 3 4 setInterval() clearInterval()
const setIntervalValue = document.getElementById("setinterval");
const setinIerval_btn = document.getElementById("setinterval_btn");
const clearInterval_btn = document.getElementById("clearinterval_btn");
let num = 0;
let intervalReff;
const showInterval = () =>{
setIntervalValue.innerHTML = `Loading.........`;
intervalReff = setInterval( () =>{
setIntervalValue.innerHTML = `${num}`;
num++
}, 1000)
}
setinIerval_btn.addEventListener('click', showInterval)
clearInterval_btn.addEventListener('click', () =>{
clearInterval(intervalReff);
})
------------------------------------------------------------------------------------------------------
/**** section 12 => OOPS in javasript ****/
------------------------------------------------------------------------------------------------------
1) What is Object Literals?
2) What is "this" objects?
Objet literal is simply a key: vale pair data structure.
Storing variables and functions together in one container we can refer this as Objects.
OBJECT = LIKE SCHOOL BAG
array = [] use
object = {} use
1 HOW TO CREATE AN OBJECT?
-----------------------------
// 1 Object Literals
const bioData = {
myName : "jitender sharma",
myAge : "30 year",
getDate (){
return `my name is ${bioData.myName} and my age is ${bioData.myAge}`
}
}
let com_func = bioData.getDate();
document.getElementById("text1").innerHTML = bioData.myName;
document.getElementById("text2").innerHTML = bioData.myAge;
document.getElementById("text3").innerHTML = com_func;
WHAT IF WE WANT OBJECT AS A VALUE INSIDE AN OBJECT
// 2 OBJECT AS A VALUE INSIDE AN OBJECT
const bioData2 = {
myName : {
myFullName : "JITENDER SHARMA",
myNicName : "MONU"
},
myAge : "30 year",
}
document.getElementById("text4").innerHTML = bioData2.myName.myFullName;
document.getElementById("text5").innerHTML = bioData2.myName.myNicName;
document.getElementById("text6").innerHTML = bioData2.myAge;
2 WHAT IS THIS OBJECT?
-----------------------------
The difinition fo "this" object is that it contain the current context.
The this object can hae different values depending on where it is placed.
// 3 THIS
// EXAMPLE 1
console.log(this.alert("THIS ALERT"));
//It refers to the current ontext and that is window global object
// EXAMPLE 2
function my_name() {
console.log(this);
}
my_name();
// "this" is bilog to window, that is window global object
// EXAMPLE 3
let myNames = "JITENDER KUMAR";
function f_myname() {
return `${this.myNames}`
}
let f_mynae_value = f_myname();
document.getElementById("text7").innerHTML = f_mynae_value;
// EXAMPLE 4
const bioData3 = {
myName : "jitender kumar sharma",
myAge : 30,
my_func(){
return `${this.myName}`
}
}
let biodata_value = bioData3.my_func();
document.getElementById("text8").innerHTML = biodata_value;
// EXAMPLE 5
const bioData4 = {
myName : {
myFullName : "JITENDER SHARMA",
myNicName : "MONU"
},
myAge : 30,
my_func(){
return `my nic name is ${this.myName.myNicName} and my age is ${this.myAge}`
}
}
let biodata_value1 = bioData4.my_func();
document.getElementById("text9").innerHTML = biodata_value1;
------------------------------------------------------------------------------------------------------
/**** section 13 => DESTRUCTURING IN ES 6 ****/
------------------------------------------------------------------------------------------------------
DESTRUCTURING IN ES 6
The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays,
or properties from objects, into disinct variables.
=> ARRAY DESTRUCTURING
=> OBJECT DESTRUCTURING
// DESTRUCTURING ARRAY
// EXAMPLE 1 old version not in use
const myBioData = ["jitender", "kumar", "sharma", "30", "nangloi"]
let firstName = myBioData[0];
let middleName = myBioData[1];
let lastName = myBioData[2];
let age = myBioData[3];
document.getElementById("text1").innerHTML = `My first name ${firstName} middle ${middleName} last ${lastName} my age ${age}`
// EXAMPLE 2 new version this is use
const myBioData2 = ["jitender", "kumar", "sharma", "30", "nangloi"]
let [text1, text2, text3, text4, text5 ] = myBioData2;
document.getElementById("text2").innerHTML = `My first name ${text1} middle ${text2} last ${text3} my age ${text4} addrss ${text5}`
// EXAMPLE 3 add array MOST USE IN REACT
const myBioData3 = ["jitender", "kumar", "sharma", "30", "nangloi"]
let [mytext1, mytext2, mytext3, mytext4, mytext5, mydegree="b.com" ] = myBioData3;
document.getElementById("text3").innerHTML = `My first name ${mytext1} last ${mytext2} my education ${mydegree} `
// DESTRUCTURING OBJECT
// EXAMPLE 1 old version not in use
const myBioData4 = {
myName : "jitender",
myLastName : "sharma",
myAge : 30
}
let myFname = myBioData4.myName;
let myLname = myBioData4.myLastName;
let myAge = myBioData4.myAge;
document.getElementById("text4").innerHTML = `My first name ${myFname} last ${myLname} my Age ${myAge} `
// EXAMPLE 2 new version this is use
const myBioData5 = {
myName : "jitender",
myLastName : "sharma",
myAgee : 30
}
let {myName, myLastName, myAgee, mydegree2="b.comarce" } = myBioData5;
document.getElementById("text5").innerHTML = `My first name ${myName} last ${myLastName} my Age ${myAgee} my education ${mydegree2} `
------------------------------------------------------------------------------------------------------
/**** section 14 => OBJECT PROPERTY IN ES 6 ****/
------------------------------------------------------------------------------------------------------
OBJECT PROPERTIES
=> we can now use Dynamic Properties
// 1 Object properties (we can now use Dynamic Properties)
// example 1
let name = "jitender"
const bioData = {
myName : "jitender sharma",
age : "my age is 30"
}
document.getElementById("text1").innerHTML = `my name is ${bioData.myName} age ${bioData.age}`;
// example 2 (we can now use Dynamic Properties)
let name2 = "jitender"
const bioData2 = {
[name2] : "jitender sharma",
[25+3]: "my age is 30"
}
console.log(bioData2)
document.getElementById("text2").innerHTML = `my name is ${bioData2.jitender} `;
// example 3 (no need to write key and value, if both are same)
let myName = "jitender";
let myage = 31;
const bioData3 = {
myName1 : myName,
myAge1 : myage
}
console.log(bioData3);
document.getElementById("text3").innerHTML = `my name is ${bioData3.myName1} and my age is ${bioData3.myAge1} `;
// example 4 (no need to write key and value, if both are same)
let myNameis = "jitender kumar";
let myageis = 32;
const bioData4 = {myNameis, myageis}
console.log(bioData4);
document.getElementById("text4").innerHTML = `my name is ${bioData4.myNameis} and my age is ${bioData4.myageis} `;
// ==========================BOOTSTRAP TUTORIAL==========================
// ==========================Create Array==========================
const cars = ["Hundui", " TATA", " Mahindra"];
cars[0] = "hundui i10"
cars[1] = "TATA Indica"
//document.getElementById("text10").innerHTML = "Car name is " + cars[0];
//document.getElementById("text10").innerHTML = "Car name is " + cars + "car length " + cars.length;
// ==========================Create Object==========================
const car = { type: "TATA", model: ":s500", owner: "jitender" };
//car.type = "Mahinder";
document.getElementById("text13").innerHTML = "CAR DETAIL" + car.type + car.model + car.owner;
// ==========================convert string of any special carecter ==========================
//The sequence \' inserts a single quote in a string:
let text = "We are the so-called \"Vikings\" from the north.";
document.getElementById("demo").innerHTML = text;
// ==========================length==========================
//The length property returns the length of a string:
let text = "jitender";
document.getElementById("demo").innerHTML = text.length;
// ==========================portion==========================
//Slice out a portion of a string from position 7 to position 13 (13 not included):
let str = "Apple, Banana, Kiwi";
document.getElementById("demo").innerHTML = str.slice(7,13);
document.getElementById("demo").innerHTML = str.slice(-12,-6);
document.getElementById("demo").innerHTML = str.slice(7);
// ==========================allow variables in strings::==========================
let firstName = "John";
let lastName = "Doe";
let text = `Welcome ${firstName}, ${lastName}!`;
// ==========================(exponent):==========================
//Extra large or extra small numbers can be written with scientific (exponent) notation:
let x = 123e5; = value 12300000
let y = 123e-5; = value 0.00123
document.getElementById("demo").innerHTML = x + " " + y;
// ==========================(exponent):==========================
//Integers (numbers without a period or exponent notation) are accurate up to 15 digits:
let x = 999999999999999; = value 999999999999999
let y = 9999999999999999; = value 10000000000000000
document.getElementById("demo").innerHTML = x + " " + y;
//Floating point arithmetic is not always 100% accurate:
let x = 0.2 + 0.1; =value 0.2 + 0.1 = 0.30000000000000004
document.getElementById("demo1").innerHTML = "0.2 + 0.1 = " + x;
//To solve the problem above, it helps to multiply and divide:
let y = (0.2*10 + 0.1*10) / 10; =value 0.2 + 0.1 = 0.3
document.getElementById("demo2").innerHTML = "0.2 + 0.1 = " + y;
// ==========================numbers objects :==========================
But numbers can also be defined as objects with the keyword new:
// x is a number
let x = 123;
// y is a Number object
let y = new Number(123);
document.getElementById("demo").innerHTML = typeof x + " " + y;
document.getElementById("demo").innerHTML = typeof x + " " + typeof y;
********************************************************************************
NOTE
********************************************************************************
// function 1
function myname1() {}
// function 2 no need writen to function NAME
const adress = function(){}
// Example 3 no need writen to function
const phoneNo = () =>{}
============================
11) function 3 Type
============================
// function 1
function my_fun1() {
return ("THIS IS MY 1st FUNCTION");
}
let my_fun_value1 = my_fun1();
document.getElementById("text12").innerHTML = `1 my function name ${my_fun_value1}`;
//===============================
// function 2
const my_fun2 = function() {
return ("THIS IS MY 2nd FUNCTION")
}
const my_fun_value2 = my_fun2();
document.getElementById("text13").innerHTML = `2 my function name ${my_fun_value2}`;
//===============================
// function 3
const my_fun3 = () => {
return ("THIS IS MY 3rd FUNCTION")
}
const my_fun_value3 = my_fun3();
document.getElementById("text14").innerHTML = `3 my function name ${my_fun_value3}`;
================================================================================================
// 1) ARRAY = FOR IN LOOP (let x in carname), FOR OF LOOP (let x of carname) => best in (FOR OF LOOP)
// 2) OBJECT = FOR IN LOOP (let x in carname) => best in (FOR IN LOOP)
Q1) What is anonymous function with example?
Ans An anonymous function is a function that was declared without any named identifier to refer to it.
like there is no name of funcion
funcion(){
alert("alert text hire");
}
Q2 call back funcion
Ans if we call funcion in a funcion that is call back funcion
funcion(){
funcion(){
alert("alert text hire");
}
}