# Javascript

# What is JavaScript ?

* JavaScript is the world's most popular programming language.
    
* JavaScript is the programming language of the Web.
    
* JavaScript to program the behavior of web pages.
    

# JavaScript Where To write

## Internal js:

* JavaScript code is inserted between `<script>` and `</script>` tags. ***JavaScript in*** `<head>` or
    
* ***js in head***
    
    ```javascript
    <!DOCTYPE html>
    <html>
    <head>
    <script>
    function myFunction() {
      document.getElementById("demo").innerHTML = "Paragraph changed.";
    }
    </script>
    </head>
    <body>
    <h2>Demo JavaScript in Head</h2>
    
    <p id="demo">A Paragraph</p>
    <button type="button" onclick="myFunction()">Try it</button>
    
    </body>
    </html>
    ```
    
* **js in body**
    

```javascript
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Demo JavaScript in Head</h2>

<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>

</body>
</html>
```

## External js:

* create a file with js extension and link the html file.
    

like:-

```javascript
<script src="scriptfile.js"> </script>
```

## Variables:-

* Variable is ued to store the data, such as container
    
* Variable a name of storage location.
    
* variable are three types.
    
    1. `let`
        

**syntax**:

# Data Types

1. A JavaScript variable can hold any type of data.
    
2. JavaScript provides different **data types** to hold different types of values. There are two types of data types in JavaScript.
    
    1. Primitive data type
        
    2. Non-primitive data type
        
        ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1672141427646/6d280a9e-481b-41d0-8812-f0cd446be2d9.jpeg align="center")
        

```javascript
// Numbers:
let length = 16;
let weight = 7.5;

// Strings:
let color = "Yellow";
let lastName = "Johnson";

// Booleans
let x = true;
let y = false;

// Object:
const person = {firstName:"John", lastName:"Doe"};

// Array object:
const cars = ["Saab", "Volvo", "BMW"];
```

# Operators

* JavaScript operators are symbols that are used to perform operations on operands. For example:
    
* `var sum=10+20;`
    
    Here, + is the arithmetic operator and = is the assignment operator.
    
* ***here are following types of operators in JavaScript.***
    

**Arithmetic Operators**:-

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1672142015958/c8fc62e6-f083-402b-b80f-46d2b6c14161.jpeg align="center")

**Comparison Operators**:-

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1672142134982/e42c663d-1877-4bbc-914d-4b359df39aca.png align="center")

**Bitwise Operators**:-

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1672142249991/ca43f356-040e-48e3-8ab1-93f8ac407f0b.png align="center")

**Logical Operators**:-

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1672142321274/81f10f90-3e12-4f3e-abd0-28b5a262bcc8.png align="center")

**Assignment Operators**:-

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1672142381323/9940e1d7-8634-429c-8c5b-e452ba8219f8.jpeg align="center")

# JavaScript If-else

1. If Statement
    
2. If else statement
    
3. if else if statement
    

### If statement:-

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1672150224846/2c6130e4-eba1-4cae-b1fa-38f8182e40ed.png align="center")

```javascript
<script>  
var a=20;  
if(a>10){  
document.write("value of a is greater than 10");  
}  
</script>
```

### If...else Statement:-

```javascript
<script>  
var a=20;  
if(a%2==0){  
document.write("a is even number");  
}  
else{  
document.write("a is odd number");  
}  
</script>
```

### If...else if statement:-

```javascript
<script>  
var a=20;  
if(a==10){  
document.write("a is equal to 10");  
}  
else if(a==15){  
document.write("a is equal to 15");  
}  
else if(a==20){  
document.write("a is equal to 20");  
}  
else{  
document.write("a is not equal to 10, 15 or 20");  
}  
</script>
```

# JavaScript Switch

The **JavaScript switch statement** is used *to execute one code from multiple expressions*. It is just like else if statement.

```javascript
<script>  
var grade='B';  
var result;  
switch(grade){  
case 'A':  
result="A Grade";  
break;  
case 'B':  
result="B Grade";  
break;  
case 'C':  
result="C Grade";  
break;  
default:  
result="No Grade";  
}  
document.write(result);  
</script>
```

# JavaScript Loops

* The **JavaScript loops** are used *to iterate the piece of code* using for, while, do while or for-in loops.It makes the code compact. It is mostly used in array.
    
    1. for loop
        
    2. while loop
        
    3. do-while loop
        
    
    ## For loop:-
    

The **JavaScript for loop** *iterates the elements for the fixed number of times*. It should be used if number of iteration is known.

```javascript
<script>  
for (i=1; i<=5; i++)  
{  
document.write(i + "<br/>")  
}  
</script>
```

## while loop:-

The **JavaScript while loop** *iterates the elements for the infinite number of times*. It should be used if number of iteration is not known.

```javascript
<script>  
var i=11;  
while (i<=15)  
{  
document.write(i + "<br/>");  
i++;  
}  
</script>
```

## do while loop:-

The **JavaScript do while loop** *iterates the elements for the infinite number of times* like while loop. But, code is *executed at least* once whether condition is true or false.

```javascript
<script>  
var i=21;  
do{  
document.write(i + "<br/>");  
i++;  
}while (i<=25);  
</script>
```
