Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
0% found this document useful (0 votes)
20 views

Javascript Notes

Uploaded by

rickxyz08
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
20 views

Javascript Notes

Uploaded by

rickxyz08
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

Interview Question in web

What is marquee tag and its properties ?

Explain table tag and its properties briefly

Explain what is fonts and its types

What is lists in html .give example

Explain type of character formatting tags

What is the use of pre tag

Explain the ways of using css

What is display property and its types

Explain types of selectors ,combinators , pseudo selectors with example

What is flexbox in css and its properties

Explain grid in css

Explain positioning in css with its types

What is the difference between absolute and relative

Difference between absolute and fixed

Explain transformation properties in css

Explain animation properties with css

Explain pseudo class elements

Difference between symmentic and non-symmentic

Java Script Questions

What is java script and its uses

Explain execution in java script

Explain variable keywords in java script

Difference between identifiers and keywords

Difference between comparison operator == && ====

Explain datatypes in java script and its types

Explain types of primitive datatypes with examples

Explain functions in javascripts with its types

What is arrays and advantages of arrays

Explain array inbuilt methods with example

Difference between splice and slice

Difference between toString() and join()


Explain includes , reverse, pop , unshift ,shift ,push

What is the use of typeof operator

Explain switch case in javascript

Explain looping statements in java script


Java Script notes

1. Introduction to javascript
2. variables in javascript
3. operatoers in javascript
4. Datatypes in javascript
Primitives of datatype
Non-primitives’ datatypes
5. Function in javascript
6. Types of functions
1) Normal functions
2) function with parameters
3) function with returntypes
4) Anonymous functions
5) function with expression
6) arrow function
7) call back function
8) immediately invoked function
9) higher order function
10) First order function
11) constructor function
7. Closures
8. Advance javascript (ECMA scripting)
9. Introduction to array in java script
10. Array inbuilt methods
11. Strings in java script
12. String inbuilt methods
13. Objects in java scripts
i. Objects using literals
ii. Objects using constructor
iii. Object using class
14. Document object model
15. Selectors of DOM
i. Getelementbyid()
ii. Get element by class name ()
iii. Get elements by tagname()
iv. Get element by name()
v. Query selectors()
vi. Query select all()
16. Create elements using dom
17. Operations on table using dom
18. Hosting in javascript
19. Promises in javascript
20. Synchronous and asynchronous javascript
21. Asynic &await in javascript
22. Destructure in javascript
23. Spread operator and rest parameter in javascript
Introduction to javascript
1. It is a scripting and programming language introduced by company known as Netscape navigation
2. Javascript was introduced by a person known as berden eich in the year 1995
3. The main reason of introducing javascript was for generating live responses or dynamic response in a
webpage
4. Javascript introduces as a client side language
5. Difference between client side & server side
Client side Server side
In a client side lang the In a server side lang ,the execution
execution happens on happens on the application /database
the users system .ie server
browser
No need to install an In a server side lang if uses have to use
external engine the language they have to install they
/compilation engine .It have install external engine/
will be present in the compilation engine
browser
Ex:html ,css, javascript Ex: C# ,java , ruby ,python

6. Because of easy to understand and less complexcity and user friendly


7. Javascript was later on converted as client side and server side language
8. To use javascript on the frontend and on the backend a new execution engine was introduced a name of the
execution software is node.js.
9. Javascript is known as a scripting language because
a. Javascript executes the program line by line starting from the initial content of the page
b. The program return in js is known as script file
c. The execution of script file is done by a browser
10. In a browser to execute js ,css we will attach it to a html file through which we create a document known as
webpage Browser

HTML
JS
CSS

11. Advantage of javascript


I. Easy to use
II. Javascript executes in a single thread that means browser can execute only one line of program at a
time
III. Single thread execution makes it easier to understand the flow of execution in js
IV. It is a dynamically typed language
V. It is one of the popular language which can be used in frontend ,backend and database application
12. After inventing node.js ,javascript became popular worldwide because of its behaviour easy to undersatand
13. Javascript stands as one of the most widely used language ever in the world
14. In the year 2015, an organization known as European computer manufacture association upgrade easy with
features like reduce , filter ,dom ,async & await etc… and name it as ECMA script 1mark ES1
15. Since 2015 every year new version of ECMA script have been introduced and currently we are in years 6 and
years 7 versions
Ways of execution in javascript

Js can be execute in 3 ways

1. Internal javascript
2. External javascript
3. Javascript using node.js

1)Internal javascript

1. It is method of writing javasccript in html


2. To write js program in a html webpage we need to use script tag
3. Script tag should be the last tag of the body

2)External javascript

1. In this we create a separate js file that ends with .js extenstion


2. The js file will be connected to html page with the help of src property written in script tag

<body> Console.log(“ hell”);


<script src=”file.js”></script>
</body>
3)JavaScript using node js

1. To execute a js program on a server side and client side we use one software known as node.js
2. To execute a node.js program on a terminal we use a command “node filename.js”

Variables in javascript

Javascript is a dynamically typed language

In js the datatype of a variable is based on a value passed by the user

To declare and initialize the variable in js we can use

1. Var
2. Let
3. const

Var

It is a variable keyword that is used in js to declare a variable and also initialize a value

Using var we can re-initialize (change the value ) a value to the same variable number of times

Using var we can re-declare the same variable number of times

Var creates a function scope variable

Ex:

Var a; // variable declared

a=100; // initialized

a=300; // re-initialized

var a=800; // re-declared

console.log(“ a is “+a);
let

It is a variable keyword that is used in js to declare a variable and also initialize a value

Using let we can re-initialize a new value to the same variable but we cannot re-declare the same variable .

Using let we can create a block scoped variable

Ex:

let a;

a=100;

a=300;

let a=800; // cannot be redeclared

console.log(“ a is “+a);

Const

It is a variable keyword that is used in js to declare a variable and also initialize a value

In js const stands for constant

Using const we cannot be re-initialized or re-declared the same variable .

Ex:

const a=200;

a=100; //cannot re-initialize

const a=800; // cannot be redeclared

console.log(“ a is “+a);

Execution contest in javaScript

Js is a programming language in which each line of program is executed in a single thread one after the other

The variables and functions that is created in js will be in the form of objects

Every variable and function are executed in java script in the form of key and value pair

The execution of program in js happens in “ Execution context “

Execution context is made up of two parts

1.Memory allocation

2.Global execution context

1.Memeory Allocation context (MAC)

Is a temporary space created in java script engine to store the objects during execution

MAC in js supports auto garbage collection that means the variables and functions which are not in use will be
automatically freed by garbage collectors
2.Global execution context (GEC)

Is also known as code component or thread component in which execution of every variable and function get
performed

GEC is responsible to perform every action that takes place in js

Ex: Storage Execution

let a=10; MAC GEC


let a a=10;
console.log(a);
a=10; log(a);
a=40; a=10; a=40;
console.log(a); a=40; log(a);
let b b=20;
let b=20;
b=20; log(b)
console.log(b); let c c=a+b =>c=60;
let c= a+b; c=60; log(c);
console.log(c);

ex: MAC GEC


let a a=10;
let a=10; a=10; a=20;
a=20; a=20;
let b b=40;
let b=40; b=40;
let c=a*b; let c c=a*b; c=800;
c=800;
let d=c/a; let d d=c/a; d=40;
let e =d+b; d=40;
let e e=d+b; e=80;
b=e-c;
e=80; b=e-c; b=-720
console.log(a,b,c,d,e); b=-720; log(a,b,c,d,e)
ex: MGR GEC
var a
var a,b,c=20,d; var b
a=21; var c c=20
c=20
b=(a-c)+30; var d a=21
a=21 b=(a-c)+30=31
var d= b*c-b*a/b;
b=31
var a =d-a+b; var d d=b*c-b*a/b=599
d=599
log(a,b,c,d); var a a=d-a+b
a=609 log(a,b,c,d)
Operators in java script

Write a js program to count the total number of even elements present from zero to 99

let count =0;


for(var i=0;i<99;i++){
if(i%2==0){
count++;
}
}
console.log(count)
Wirte a js program to calculate the factorial of 10

const num =10;


let fact=1;
for(let i=1;i<=num;i++){
fact*=i;
}
console.log(fact);
Write a js program to display the account details like balance amount, name ,last visited if username and password
of user is correct else through error in a console saying invalid username or password

const username='Dinesh';
let password=7777;
let Accname="Dinesh V C";
let bal_amount=5000;
let last_v ='30-jun-2024';
if(username=='Dinesh' && password==7777){
console.log(Accname+ "\n"+ bal_amount +"\n"+ last_v);
}else{
console.error("Invalid username or password");
}

Comparison operator

“==” & “!=” both are considered as comparison operators in javascript that is used to compare only the values of
operands on both the sides

Using == comparison operator we can not compare the both values and its datatype of the variable

let a=100;let b=100;

console.log(a==b); // true

console.log(a!=b); //false

To avoid this problem in javascript we use a special operator known as strict comparison operator (“===” & ”!==”)

Strict comparison operator is a special operator that is used in java script to compare the values and the datatypes of
both operands

strict comparison operator returns a Boolean value of true is both the operands values and datatype are same or
else it will return false

let a=100; let b=100; console.log(a===b); // true console.log(a!==b); //false


Typeof operator in java script

Its is special operator that is used in java script to return the data type of a variable

let a=100; let b=’100’; console.log(typeof a); // number console.log(typeof b); //String

Identifiers in js

Identifiers are the variable names or the names that is given for a function ,class ,value , object ,array etc…

Variable name can be mention in different cases

1)Lowercase 2)Uppercase 3)Pascal case 4)Camel case 5)Snake case

“abc” “ABC” “Abc” “abc_ABC” “a_B_c_D_e”

Keywords in js

Keywords are the predefined words That is already defined to perform some specific function in java script

Ex: var , function , let , const ,promise , pop , Document ,Promise ,async ,await, then , this , try , catch , splice,

Reverse , length

Datatypes in js

They are classified into two different types

1)Primitive datatypes

We have elements like number , strings ,Boolean , null , undefined , bigint , symbol

2)Non-Primitive

It has few elements like arrays , objects

1)Number

It is part of primitive datatypes in js that is used to store different types of mathematical numbers

It can store an integer ,decimal ,lengthy integer etc….

Ex: var a=10.5 , b= 20 , c=2346987;

2)Strings

It is part of primitive datatypes in js that is used to store any values that is return inside ‘ ‘ || “ ”

Ex: let a=’10’ ;

3)boolean

It is part of primitive datatypes in js that can accept only 2 values that is either true or false

In js Boolean value true =1 , false =0

Ex: let a=true , b= false ;


4)Null

It is a special datatypes in js that is used as a value

Null was invented as a bug in js and later converted into a datatype

Its is a Object

Ex: let a= null ; //Object

5)undefined

It is special datatypes used in js

If a variable is declared in js and does not get initialized with any values then the datatypes of that variables will be
undefined.

Ex: let a; Console.log(typeof a); //undefined

Function in java script

It is purely 100% Object Oriented Programming language

In js each and every element are considered as inherited property of object.

To avoid the restrictions oops in js we create programs in terms of functions.

Functions in a block of code ie written in js to perform some specific operations

Using function we can write a program once and run it any no of times

Advantage of functions

1)Re usability of code

2)Less complexity

3)Easy to understand

4)can divide a large program into smaller functions

To use the functions in js we have to call to function by using the function name . ex: function check() { }

Functions are classified into two types

1)User-defined functions

2)Pre-defined functions

Syntax for functions

function funcname(arg1,arg2){ | funcname(value1,value2);

//logic |

} |
The function without any parameters are values is known as empty function or normal function
Eg: function print(){ | print()
Console.log(“Welcome”);
}
The function with arguments and its corresponding values is known as function with parameter
Eg: let c=0; || add(5,6);
Function add(a,b){
C=a+b;
Console.log(c);
}
The function that accepts arguments and return a value is known as function with return keyword

In js a function can return any kind of values of each data types

To create a function with a return type we need to use the keyword return

The value retuned needs to be stored in a separate variable outside the function

Using function with return we can change the scope of variable


Eg: let c=0; || let t= add(5,6);
Function add(a,b){ || console.log(t);
C=a+b;
Return c;
}
Arrays

Arrays are the collection of homogenous and heterogenous elements that is stored in a variable

In java script the array elements are dynamic /automatic in allocation that means user can add or remove an element
from the array dynamically

In java script arrays are dynamic in length that means the size of the array can increase or decrease during execution

In java script the bucket that stores the elements of array will be dynamically removed once we take the element
from the array that leads to automatic garbage collection

Advantages and applications of array

• Easy to configure
• Allocation and reallocation is easy
• Less restrictions
• Application is used in shopping kart
• Used in wishlist etc…
Array in-built methods

push – is used to insert multiple elements at the last index position of the array
ex: let arr=[1,”hi”,null,5]; output : [1,”hi”,null,5, ‘hello’,’dude’]
arr.push(‘hello’,’dude’);

pop – is used to remove one element at the last index position of the array
ex: let arr=[1,”hi”,null,5]; arr.pop(); output : [1,”hi”,null,5, ‘hello’];
unshift – its is used to add no of elements at the starting index position .using unshift will change the index of each
position in arr
ex: arr.unshift(‘hello’,’hellboy’); output:[‘hello’,’hellboy’, 1,”hi”,null,5, ‘hello’]

shift - its is used to remove one element from the starting index position .using shift will change the index of each
position in arr
ex: arr.shift(); output:[’hellboy’, 1,”hi”,null,5, ‘hello’]

splice – it is used to add no of elements and to remove no elements at any specified index position in the array .
its has 3 parameters splice (“start index”,”delete count”,”new elememts…”)
ex: arr.splice(0,2,”Hello “ ,”Deadpool”); output:[“Hello”,”Deadpool”, 1,”hi”,null,5, ‘hello’]

slice- it cannot affect the original array it returns a sub part of an array as an output .
it has 2 arguments slice(“start index”,”end index”)
from start index to the end index ecluding the end index and return the sub array

reverse- It cannot affect the original array it returns a sub part of an array as an output .
It is used to reverse the order of element that is present in the array based on its index position
ex: let arr=[1,”hi”,null,5]; output : [’dude’,’hello,5,null,”hi”,1]
arr.reverse();

toString - It cannot affect the original array .


It is used to convert all the array elements into one single string
ex: let arr=[1,”hi”,null,5]; output : ’dude’,’hello,5,null,”hi”,1
arr.toString();

join - it cannot affect the original array.


It is used to convert all the array elements into one single string
In join we can specify the separator between every elements in the array

Includes - it cannot affect the original array.


It return Boolean values as an output
It accepts an argument and checks the existence of that element in the array
If the argument present return true else return false

String in javascript

Strings are the collection of primitive datatypes of characters in javascript that is written inside of “” or ‘ ‘ .

String are immutable in javascript

String have index position for each character in js

Index position starts from 0

String inbuilts methods

Str.length is a special keyword that is used in js to find the total length of a string

Str.toUpperCase() :it converts all char to uppercase and return a new string
Str.toLowerCase()::it converts all char to lowercase and return a new string

Str.split(“ “) :it return a string array

Str.replace(“l”,”t t”) : replace the first occurance of the given substring with the new substring and return a new string

Str.replaceAll(“l”,”t t”) : : replace the all occurance of the given substring with the new substring and return a new
string

Str.charAt(0): return the new string with the char in that index position

Str.indexOf(‘a’,5): returns a new string with index position of that string from that starting point

Str.lastIndexOf(“Z”): returns a new string with index position of that string from the last index position

Objects in js

Objects are the collection of non-primitive datatypes that is used in javascript to store the collection of elements in
key and value pair.

Js is 100% object based programming language

In js each and every item that is present in inherited from object class

Ways of creating object in js

1.object using object literals

2.objects using functions

3.object using constructor and class

1.object using object literals

In this method the element are created inside a block of curly braces directly by the developer in the from of key and
value pair.
Eg:
Syntax: Const students={
Id:”101”,
Const objName ={
Name:”abc”,
Key1:value1,
Subject:{“java”,”web”},
Key2:value2,
Marks:{java:123,web:40}
Key3:value3…}
}
Console.log(students.marks.web);
Console.log(students.name);
2.object using Functions

It is a method of creating a normal function in js that will initialise the arguments of the function into keys

The values passed to the functions during the function call will be considered as a value for the object and the
function name will be considered as a object name.

We can create the object by performing the function call followed by “new”

Using the reference variable the stores the function and we can create the objects in the form of key and value pair.

Eg:
Function students(id,name,subject){
This.id=id;
This.name=name;
This.subject=subject;
}
Let s1=new students(10,”dinesh”,{“java”,”web”});

3.object using constructor


Object using constructor and class is a method of creating an objects in js based on object oriented programming
language
In this methos we can create a methods by declaring a class
Class is a blue print of a object
Inside the class to initialize the objects we use a special function known as constructor
Constructor will accept the properties of the object in the form arguments
To avoid variable shadowing in constructor we use “this” keyword followed by the property name to differentiate the
local variable and global variable.
The values passed to the functions during the constructor call will be considered as a value for the object and the
class name will be considered as a object name.
We can create the object by performing the constructor call followed by “new”
Using the reference variable that stores the constructor and we can create the objects in the form of key and value
pair
Eg:
Class students {
Constructor(id,name,subject){
This.id=is;
This.name=name;
This.subject=subject;
}
}
Let std1=new students( 10,”dinesh”,{“java”,”web”});

Operations on objects
Create and read -We can create a new key and value pair into the existing object dynamically
We can also view the object that has been created dynamically
Eg:
Std1.sal=120000;
Output:
Students {Id:”101”,Name:”abc”,subject:{“java”,”sql”},marks:{java:12,sql:45},sal:120000}

Update- we can update the existing key and value pair into the object dynamically
Eg:
Std1.id=12;
Output:
Students {Id:12,Name:”abc”,subject:{“java”,”sql”},marks:{java:12,sql:45},sal:120000}

Delete-we can the delete the data from the object dynamically using the “delete” keyword .
Eg:
delete std1.name;
Students {Id:”101”, subject:{“java”,”sql”},marks:{java:12,sql:45},sal:120000}

You might also like