Array:-

 Array is collection of heterogeneous data.

 In java script we can represent array in 3 ways
1. Array literal
2. New keyword
3. Using constructor
Syntax:
<script>
Var varname=[data1,data2,data3…….dataN]
Var varname=new array()
Var varname=new array(data1,data2,data3,…….dataN)

Ex:-
<script>
    var object=[12,23.98556,"js",true,null,"java"]
    console.log(object)
    document.write(object)
</script>

<script>
    var num=new Array()
    num[0]="node js"
    num[1]="react js"
    num[2]="anglural js"
    num[3]="pebele js"
    console.log(num[2])
    console.log(num[9000])
    console.log(num.length)
    console.log(num)
console.log(num[50])

</script>

{‘empty*96’ is the empty data}

console.table(num)
[The data of array will be shown in table format.]
console.error("hi")
[show the error data]

How many ways we can iterate array in forward direction ?

<script>
    var num=new Array(12,34,56,78)
    document.write(num)
    console.log(num)
    //=====================================
    for(let i =0;i<num.length;i++)
    {
        console.log(num[i])
    }
    //=====================================
    num.forEach((n,i,num)=>console.log(n,i,num))
    //============================================
    num.map((n,i,num)=>console.log(n,i,num))
    //=======================================
    for (let key in num)
    {
        console.log(num[key])
    }
    //========================================
    for (let iterator of num)
    {
        console.log(iterator)
    }
</script>

Difference between normal traditional for loop and forEach loop

The difference forEach and map
Difference between…

Array inbuilt method :-

Push() :- Push is a function which is use to add one or more then one data at the end of
existing array
Ex:-
var x=[12,40,67,45,12]
    document.write(x+"<br>")//12,40,67,45,12
    x.push(33,44,55)
    document.write(x+"<br>")//12,40,67,45,12,33,44,55

unshift():- Unshift is a function which is use to add one or more than element at the
beginning of the existing array
ex:-
<script>
    var x=[12,40,67,45,12]
    document.write(x+"<br>")//12,40,67,45,12
    x.unshift(33,44,55)
    document.write(x+"<br>")//33,44,55,12,40,67,45,12
</script>

Pop():- Pop is a function which is use to remove only one element at the end of the
existing array
Ex:-
<script>
    var x=[12,40,67,45,12]
    document.write(x+"<br>")//12,40,67,45,12
    document.write("poped data "+x.pop()+"<br>")//12
    document.write(x+"<br>")//12,40,67,45
</script>

Shift():- shift is a function which is use to remove only one element from the given array
from the index value 0.
Ex:-
<script>
    var x=[12,40,67,45,12]
    document.write(x+"<br>")//12,40,67,45,12
    document.write("shifted data "+x.shift()+"<br>")//12
    document.write(x+"<br>")//40,67,45,12
</script>

Reverse():- Reverse is the function which is use to reverse the given array
Ex:-
<script>
    var x=[12,40,67,45,12]
    document.write(x+"<br>")//12,40,67,45,12
    document.write(x.reverse())//12,45,67,40,12
</script>

Sort():- Sort is a function which is use to sort data acending order

Ex:-
<script>
    var x=[12,40,67,45,12]
    document.write(x+"<br>")//12,40,67,45,12
    document.write(x.sort())//12,12,40,45,67
</script>

For decending order there no inbuilt function so we have to do

<script>
    var x=[12,40,67,45,12]
    document.write(x+"<br>")//12,40,67,45,12
    document.write(x.sort().reverse())//67,45,40,12,12
</script>

Write a java script progam to find biggest element in the given array
Write a java script program to find the smallest element in the given array

Write a java script proggam to get a respected out put

Var Array=[‘amazon’,’12’,’billble’,’element’,’apple’]
Output=[‘AMAZON’,’APPLE’,’BUBBLE’]

Filter() :- Filter is a function which is use to filter the existing array based on passed
condition.
<script>
var num=[12,34,45,78,64,68]
document.write(num+"<br>")
var result=num.filter(n=>n>25)
document.write(result)
</script>
Find() :- Find is a function which is use to find the data in the existing array based on
passed condition.
<script>
var num=[12,34,45,78,64,68]
document.write(num+"<br>")
var result=num.find(n=>n>40)
document.write(result)
</script>

Slice() :- Slice is a function which is use to create copy of the existing array without
modifying the original array.
Syntax:- slice(starting point,ending point);
Starting pointindex value
Ending pointarray length
<script>
var num=[12,34,45,78,64,68]
document.write(num+"<br>")
document.write(num.slice(2,5)+"<br>")
document.write(num)
</script>

Splice() :- Splice is a function which is use to add and remove the element from the given
array.

Syntax:- splice(starting point, deletecount, add Element)

Add element is optional
<script>
var num=[12,34,45,78,64,68]
document.write(num+"<br>")
num.slice(2,5)
document.write(num)
</script>

To add the data

<script>
var num=[12,34,45,78,64,68]
document.write(num+"<br>")
num.slice(2,0,56,99)
document.write(num)
</script>

56 and 99 will add in index 2

String :-
1. JavaScript string length :-
The length properly return of the length of a string
Ex:-

<script>
    let txt='ABCDEFGHIJKLMNOPQRSTUVXYZ'
        let length=txt.length;
        console.log(length)//26
</script>

2. Slice():-
Syntax:-
Slice(start,end)

 Slice() extract a part of a string and return the extracted extracted part in a new
string.
 The method takes 2 parameters the start position and the end position(not end
included)
Ex:-

<script>
    let str="Apple,banana,wiki"
    let prt=str.slice(7,13)
    console.log(prt)//banana
</script>

If a parameter is negative the position is counted from the end of the string.
This example slice out a position of a string from position -12 to position -6
Ex:-

<script>
    let str="Apple,banana,wiki"
    let prt=str.slice(-12,-6)
    console.log(prt)//banana
</script>
 3. Substring():-
Syntax:-
Substring(start,end)
 Substring() is similar to slice()
The difference is that substring() cannot accept negative index.
Ex:-

<script>
    let str="Apple,banana,wiki"
    let prt=str.slice(7,13)
    console.log(prt)//banana
</script>

4. Substr():-
Syntax:-
Substr(start,length)
Substr() is similar to slice()
The difference is that the second parameter specifies the length of the extracted part
Ex:-

<script>
    let str="Apple,banana,wiki"
    let prt=str.slice(7,6)
    console.log(prt)//banana
</script>

5. Replace():-
The replace method replace a specified value with another value in a string :by
default,the replace() method replace only the first match:
Example:-

<script>
    let text="please visit microsoft"
    let newText=text.replace("microsoft","qspider")
    console.log(newText)//please visit qspider
</script>
 6. Trim():-

The trim() method removes whitespace from both side of a string

Ex:-

<script>
    let text1="Hello World!"
    let text2=text1.trim()
    document.write("length.txt1="+text1.length+"<br>")
    document.write("length text2="+text2.length)
</script>

Object oriented:-
In javaScript we can create object in 3 ways
1. Object literals:-
2. JSON (JavaScript object notation)
3. Using Class Concept
Syntax to create an object using object literal concept :-
**Anything enclosed within the { } this is consider as a object kind of data
Ex:-

<script>
    var objectname={
        key1:"value1",
        key2:"value",
        .
        .
        .
        keyN:"valueN"
    }
</script>
 Ex:-

<script>
   const person={
    name:"satya",
    age:"25",
    sal:"25lpa",
    hobbies:["Teaching","Dancing"],
    add:{
        state:"Karnataka",
        area:"btmlayout",
        city:"banglore",
    }
   }
   console.log(person)
   console.log.(person.sal)
   console.log(person.hobbies[1])
   console.log(person.add.city)
   person.email="[email protected]"
   person.add.pincode=56555
</script>

When there is n number of object we have to use array kind of data

Ex:-

<script>
   var emp[
    {
        ename:"riya",
        sal:"4lpa",
        company:"ibm"
    },
    {
        ename:"siya",
        sal:"9lpa",
        company:"TCS"
    },
    {
        ename:"ziya",
        sal:"7lpa",
        company:"Accenture"
    },
   ]
   console.log(emp)
   console.log[emp[2].company]
</script>

JSON :-

Syntax:-

<script>
   var objectName{
    "key1":"value1",
    "key2":"value2"
    .
    .
    .
    "keyN":"valueN"
   }
</script>

 JSON format is use to add the data to the database and fetch the data from the
database.
 We can convert object literals in the form of JSON using 2 ways
1. With internet
2. Without internet
With internet:-
Json formater and validator

Without internet:-
Using stringify() inbuilt function
Stringify():-
It is a inbuilt function which is present inside JSON. It is use to convert object literals data
the form of JSON.

Chrome use v8 javascript engine

Firefox use -----spider monkey
Edge –chakra

One class is missed here

So many class missed

New date() :- This function will take the system current date and time

Document Object Model :-

The document object model (DOM) is a platform and language-neutral
interface that allows programs and scripts to dynamically access and update
the content, structure, and style of a document.

Documenthtml file
Objecttags,elements,nodes
Modellayout,structure

When a web page is loaded, the browser creates a document object model of
the page.
The HTML DOM model is constructed as a tree of objects :
With the object model, JavaScript gets all the power it needs to create dynamic
HTML :

JavaScript can change all the HTML elements in the page

JavaScript can change all the HTML attributes in the page

JavaScript can change all the CSS style in the page

JavaScript can remove existing HTML elements and attributs

JavaScript can add new HTML elements and attributes

JavaScript can react to all existing Html events in the page

JavaScript can create new HTML events in the page

DOM SELECTERS :

1) document.getElementsByTagName():
2) document.getElementById():
3) document.getElementsByClassName():
4) document.querySelector():
5) document.querySelectorAll():

1)get element by tag name :

This function is basically used to target or fetch element from the document
object model. This function target the element based on tag name.

Eg1:
<body>
    <h1>dom</h1>
    <h1 id="heading">js</h1>
    <h1 class="box">java</h1>
    <h1>react</h1>
    <script>
        var tag=document.getElementsByTagName("h1")
        console.log(tag)
    </script>

</body>

Out put :

Collection of object

With respect to above code we are targeting the heading element based on
the tag name.

Ex 2:-
<body>
    <h1>dom</h1>
    <h1 id="heading">js</h1>
    <h1 class="box">java</h1>
    <h1>react</h1>
    <button onclick="xyz()">change</button>
    <button onclick="Reload()">reset</button>
    <script>
        function xyz()
        {
            var tag=document.getElementsByTagName("h1")
        tag[0].style.color="orange"
        tag[1].style.color="blue"
        tag[2].style.color="green"
        }
        function Reload()
        {
            location.reload()
        }
    </script>

</body>
With respect to above code we are targeting the heading element using get
elements by tag name function.

This function targets the selected elements and stores it in array like object so,
hence to access we have to use index position.

Eg 3:-
<body>
    <h1>dom</h1>
    <h1 id="heading">js</h1>
    <h1 class="box">java</h1>
    <h1>react</h1>
    <button onclick="xyz()">change</button>
    <button onclick="Reload()">reset</button>
    <script>
        var tag=document.getElementsByTagName("*")
        console.log(tag)
    </script>

</body>

The above code targets all the elements present inside the DOM tree.