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}