Javascript

Javascript notes

 

                       

Assignments 

Create an Add address form using DOM

What is javascript

 

JavaScript is a scripting or programming language that allows you to implement complex features on web pages — every time a web page does more than just sit there and display static information for you to look at — displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, etc. — you can bet that JavaScript is probably involved. It is the third layer of the layer cake of standard web technologies, two of which (HTML and CSS) we have covered in much more detail in other parts of the Learning Area.

 

JavaScript Variables

Variables are Containers for Storing Data

JavaScript Variables can be declared in 4 ways:

 

1)Automatically

2)Using var

3)Using let

4)Using const

 

When to Use var, let, or const?

1. Always declare variables

2. Always use const if the value should not be changed

3. Always use const if the type should not be changed (Arrays and Objects)

4. Only use let if you can't use const

5. Only use var if you MUST support old browsers.

 

Js output

    

 

 

Differences between var, let, and const

 

‘use strict’;

This keyword is used to strictly follow the variable declaration before using it

 

Eg:-

 

'use strict';

x= 10;

console.log(x);

Error will be  ReferenceError: x is not defined  

 

Variable Hoisting

It means a variable will not be used before declaration

 

x= 10;

console.log(x);

let x;

JavaScript Data Types

JavaScript supports multiple data types. Understanding these data types is fundamental to effective programming. JavaScript data types are broadly categorized into primitive and non-primitive types. The primitive data types include Number, String, Boolean, Null, Undefined, and Symbol. Non-primitive types include Object, Array, and Function. This guide will delve into these data types, providing a comprehensive overview and examples to help you master their usage in JavaScript.

 

Primitive Data Types

The predefined data types provided by JavaScript language are known as primitive data types. Primitive data types are also known as in-built data types.

 

Type        Description

Number    JavaScript numbers are always stored in double-precision 64-bit binary format IEEE 754.

String    JavaScript Strings are made up of a list of characters, essentially an array of characters.

Boolean    Represents a logical entity and can have two values: true or false.

Null    This type has only one value: null.

Undefined    A variable that has not been assigned a value is undefined.

Symbol    Symbols return unique identifiers that can be used as property keys in objects without colliding with other keys.

BigInt    BigInt is a built-in object providing a way to represent whole numbers larger than 253-1.

This table summarizes the basic data types in JavaScript along with their descriptions.

 

Non-Primitive Data Types:

The data types that are derived from primitive data types of the JavaScript language are known as non-primitive data types. It is also known as derived data types or reference data types.

 

JavaScript Operators

 

Arithmetic Operators

Assignment Operators

Comparison Operators

String Operators

Logical Operators

Ternary Operators

Type Operators

 

Assignment operator 

 

a  =10

b  =20;

a  = a+10;    //20

a+=10;    

a-=10;

a*=10;    

console.log(a)  //30

 

Arithmetic Operators

 

let x = 5;

let y = 2;

console.log(x + y);

console.log(x - y);

console.log(x * y);

console.log(x / y);

console.log(x % y);

console.log(x ** y **2);

 

 

 

Logical operator

 

a= 10;

b = 20;

//And operator

if(a>5 && b>15){

  console.log("a is greater than 5 and b is greater than 30");

}else{

  console.log("a is less than  and b is less than 30");

}

//Or operator

if(a>5 || b>30){

  console.log("a is greater than 5 and b is greater than 30");

}else{

  console.log("a is less than  and b is less than 30");

}

//Not operator

if(!(a>50)){

  console.log("a is greater than 5 and b is greater than 30");

}else{

  console.log("a is less than  and b is less than 30");

}

 

Comparison operator

 

//comparison operator

a= 10;

b= "10";

if(a==b){

  console.log("a is equal to b");

}else{

  console.log("a is not equal to b");

}

 

if(a===b){

  console.log("a is equal to b");

}else{

  console.log("a is not equal to b");

}

 

if(a!=b){

  console.log("a is equal to b");

}else{

  console.log("a is not equal to b");

}

if(a!==b){

  console.log("a is equal to b");

}else{

  console.log("a is not equal to b");

}

 

a= 10;

b= 10;

if(a<=b){

  console.log("a is equal to b");

}else{

  console.log("a is not equal to b");

}

 

typeof Operator

 

a= [10,20,30,40,50];

b= 10.90;

c= "hello";

d= true;

console.log(typeof a);

console.log(typeof b);

console.log(typeof c);

console.log(typeof d);

 

Ternary operator  

 

a= 10;

(a>5)? console.log("sucesss"):console.log("fail");  

 

Control structure  

 

If 

 

// Control structure

let  x = 309;

if (x >= 51 && x<61){

  console.log("x is between   51 and 60");

}else if(x>=41 && x<51){

  console.log("x is between 41 and 50");

}else if(x>=31 && x<41){

  console.log("x is between 31 and 40");

}else{

  console.log("Other");

}

 

Switch 

 

switch(20){

    case 0:

      console.log("Sunday");

      break;

    case 1:

      console.log("Monday");

      break;

    case 2:

      console.log("Tuesday");

      break;

    case 3:

      console.log("Wednesday");

      break;

    case 4:

      console.log("Thursday");

      break;

    case 5:

       console.log("Friday");

      break;

    case 6:

      console.log("Saturday");

      break;

    default:

      console.log("Invalid day");

    

}

 

JavaScript do…while Loop

A do…while loop in JavaScript is a control structure where the code executes repeatedly based on a given boolean condition. It’s similar to a repeating if statement. One key difference is that a do…while loop guarantees that the code block will execute at least once, regardless of whether the condition is met initially or not.

There are mainly two types of loops.

 

Entry Controlled loops: In this type of loop, the test condition is tested before entering the loop body. For Loop and While Loops are entry-controlled loops.

Exit Controlled Loops: In this type of loop the test condition is tested or evaluated at the end of the loop body. Therefore, the loop body will execute at least once, irrespective of whether the test condition is true or false. the do-while loop is exit controlled loop.

Syntax:

 

do {

    // Statements

}

while(conditions)

 

The main difference between do…while and while loop is that it is guaranteed that do…while loop will run at least once. Whereas, the while loop will not run even once if the given condition is not satisfied

 

let test = 1;

do {

    console.log(test);

} while(test<1)

 

while(test<1){

    console.log(test);

}

 

For loop

JavaScript for loop is a control flow statement that allows code to be executed repeatedly based on a condition. It consists of three parts: initialization, condition, and increment/decrement. This loop iterates over a code block until the specified condition is false.

 

For Loop in JavaScript

A for loop in JavaScript repeatedly executes a block of code as long as a specified condition is true. It includes initialization, condition checking, and iteration steps, making it efficient for controlled, repetitive tasks.

 

Syntax:

for (statement 1 ; statement 2 ; statement 3){

    code here...

}

Statement 1: It is the initialization of the counter. It is executed once before the execution of the code block.

Statement 2: It defines the testing condition for executing the code block

Statement 3: It is the increment or decrement of the counter & executed (every time) after the code block has been executed.

 

Statement 1: Initializing Counter Variable

Statement 1 is used to initialize the counter variable. A counter variable is used to keep track of the number of iterations in the loop. You can initialize multiple counter variables in statement 1.

 

We can initialize the counter variable externally rather than in statement 1. This shows us clearly that statement 1 is optional. We can leave the portion empty with a semicolon. 

 

Statement 2: Testing Condition

This statement checks the boolean value of the testing condition. If the testing condition is true, the for loop will execute further, otherwise loop will end and the code outside the loop will be executed. It is executed every time the for loop runs before the loop enters its body.

 

This is also an optional statement and Javascript treats it as true if left blank. If this statement is omitted, the loop runs indefinitely if the loop control isn’t broken using the break statement. It is explained below in the example.

 

Statement 3: Updating Counter Variable

It is a controlled statement that controls the increment/decrement of the counter variable.

 

It is also optional by nature and can be done inside the loop body.

 

 

for(i=1;i<=1001;i++){

  //console.log(i)

}

let x = [10,20,30,40,50,60,70,80,90,100]

//console.log(x[4])

 

for(y in x){

 //console.log(y) 

}

for(z of x){

 // console.log(z)

}

 

let g=1;

while(g<=10){

  //console.log(g)

  g++;

}

let k = 1;

do{

  console.log(k)

  k++;

}while(k<=10)

 

Break,Continue

Break statement

The break statement is used to jump out of a loop. It can be used to “jump out” of a switch() statement. It breaks the loop and continues executing the code after the loop.

 

for (i = 1; i <= 10; i++) {

  if(i==3){

    continue;

  }

  console.log(i);

}

 

Continue statement

The continue statement “jumps over” one iteration in the loop. It breaks iteration in the loop and continues executing the next iteration in the loop.

 

for (i = 1; i <= 10; i++) {

  if(i==3){  

    break;

  }

  console.log(i);

}

 

Array

An array in JavaScript is a data structure used to store multiple values in a single variable. It can hold various data types and allows for dynamic resizing. Elements are accessed by their index, starting from 0.

 

let x = [10,20,30,40,50];

console.log(x);

console.log(x[0]);

console.log(x[3]);

console.log(x[1]);

let y = Array(22,33,44,55,66)

console.log(y[2])

 

x[6]= 60;

console.log(x);

x[5]= 66;

console.log(x);

x[5]= 606;

console.log(x);

 

for(z in x){

  console.log(z)

}

for(k of x){

  console.log(k)

}

 

Array predefined function