CSS:

BOX MODEL :
- content box : area where content is displayed. Modify by using height and
width
- padding box : space around content box. Modify using padding property
- border box : it wraps content and padding box.Modify using border box.
- margin box : it is outermost layer around content, padding, border.Modify
using margin property.
POSITIONS :
-Static : it is a default positioning of each element.We cannot apply top,
left, right, bottom properties.
-Relative : elements will be positioned according to there original position
-Absolute : ele will be no more part of normal flow.it will create its own
flow
-Fixed : same as absolute but it will positioned to nearest ancestor.in fixed
positioning ele are positioned according to browser viewport.
-Sticky : it is used to make ele stick to the given position .
FLEX-MODEL :
The flexible box model makes it easier to design flexible responsive layout
structure .

JavaScript :
JS Engine working principle :
- our code is first received by the 'parser' inside js engine.it checks for
error in the code
- once the parser checks the code and satisfied that there are no errors, it
creates the ds called AST(abstract syntax tree)
- once the ast is created by the parser, the js engine converts the js code
in to machine code.
-machine code is send to the system for execution
Datatype :
-Number
-String
-Boolean : true,false
-null
-undefined
-object
Variable :
-block of memory which is used to store value
var let const
RD yes no no
RI yes yes no
S globlal local local
H yes no no

TYPECASTING :
Implicit Typecasting :
-js engine converts one type of data to another type implicitly
Explicit Typecasting :
-the process of converting one type of data to another explicity
-Number, Boolean, String
console.log(Boolean("true")+2);//3
console.log(Number("true"+5));//NaN
console.log(Boolean(1)+"true");//trurtrue
console.log(String(55)+5);//555
console.log(false-"1");
console.log(Number(true)+"true");//1true
console.log("hollo"-10);//NaN ==>> NotaNumber
Function :
- Function Declaration :
function fun_name(){}
- Function as Expression :
var/let/const identifier = function(){}
-Anonymous Function :
function(){}();
- Arrow Function :
()=>{}
- IIFE (Immediate Invoking Function)
(function(){
console.log("This is IIFE");
}())
HIGHER-ORDER FUNCTION :
-In JavaScript, a higher-order function is a function that can take other
functions as arguments, or return a function as its result.
Example 1: argument
function higherOrderFunction(callback) {
// Perform some operations
console.log('Executing higher-order function');

// Call the callback function

callback();
}

function callbackFunction() {
console.log('Executing callback function');
}

// Passing the callback function to the higher-order function

higherOrderFunction(callbackFunction);
Example 2 : return
function higherOrderFunction() {
// Define and return a new function
return function() {
console.log('Returned function executed');
};
}

// Assign the returned function to a variable

const returnedFunction = higherOrderFunction();
// Invoke the returned function
returnedFunction();

CALLBACK FUNCTION :
-In JavaScript, a callback function is a function that is passed as an
argument to another function and is executed inside that function.
Example :
function fetchData(callback) {
setTimeout(function () {
const data = 'Some fetched data';
callback(data);
}, 2000);
}
function processFetchedData(data) {
console.log('Processing data:', data);
}
fetchData(processFetchedData);
OBJECTS :
- object is an entity having state and behavior.
ObjectCreation :
1. By using Literals :
var obj = {
name : "Rushi",
age : 21
}
2. By using new keyword :
var obj = new Object();
obj.name = "ganya"
obj.age=45
3. By using constructor function :
let emp = function tcs(name,age){
this.name=name;
this.age=age;
}
let emp1 = new emp("abc",21)

Arrays :
-is a block of memory which is used to store multiple values of hetrogeneous
type.In js arrays are object.
Array Creation :
1. By using array literals :
let arr = [val1,val2,valn]
2. By using new keyword :
let arr = new Array(10,20,30);
Methods in array :
-shift() : remove ele from first index
-unshift() : add item at first index
-indexOf() : return the index of pass ele.
-includes() : return true if ele is present.
-splice() : splice(start_index,del-count,new el1,new elen)
-slice() : slice(start_index,last_index) : this method is used to turn the
array into new fragments. it will ignore last_index element.

Array map() method :

- Map method is used to modify the existing value present in the array.Does
not change the original array.
let fName = ["Ajay","Atul","Jay","Prajwal"]
console.log(fName);
let fullName = fName.map((cValue)=>{
return cValue+" Patil"
})
Array filter() method :
-it filter and extract the ele of array that satisfy the provided
function.Does not change the original array.
let num = [10,20,30,40,50]
let fil = num.filter((cValue)=>{
return (10<cValue && 50>cValue)
})
console.log(fil);

Array reduce() method :

-is used to reduce a array to single value and excutes a provided function
for each value of the array.Return val is stored in accumulator.
Example :
let num = [10,20,30,40]
let sum = num.reduce((acc,cValue)=>{
 debugger;
return acc+cValue
})
console.log(sum);
setTimeout() method :
-is used to execute a function after waiting for the specified time interval.
Syntax :
setTimeout(function,millieseconds)

setTimeout(() => {
clg("hi")
}, 4000);
setInterval() method :
-is used to call the function repeatly at given interval of time.
-clearInterval() is used to stop

Object Destructuring :
-Object destructuring is a feature in JavaScript that allows you to extract
values from objects and assign them to variables
const person = {
name: 'Alice',
age: 30,
profession: 'Engineer'
};

// Destructuring assignment
const { name, age, profession } = person;
console.log(name); // Output: Alice
console.log(age); // Output: 30
console.log(profession); // Output: Engineer

Array Destructuring :
-Array destructuring is a feature in JavaScript that allows you to extract
values from arrays and assign them to variables.
let ref = ["js","python","java","html"]
let[pl1,pl2,pl3,pl4]=ref
console.log(pl1);
console.log(pl2);
console.log(pl3);
console.log(pl4);
REST PARAMETER :
- introduced in ES6
- allows a function to accept multiple arguments as an array.
- it is prefixed with 3 dots (...)
Example :
function sum(...numbers) {
let total = 0;
for (let i of numbers) {
total += i;
}
return total;
}
console.log(sum(1, 2, 3, 4, 5)); // Output: 15
console.log(sum(10, 20)); // Output: 30
console.log(sum(2, 4, 6, 8)); // Output: 20
SPREAD OPERATOR :
- used to copy one array into another array
let color = ['red','yellow']
let newColor = [...color,'violet','orange']
 clg(newColor)//['red','yellow','violet','orange']
PROMISE :

Example :

const orderFood = new Promise((resolve,reject)=>{

const foodAvailable = false
if (foodAvailable) {
let food = "pizza"
resolve(food)
}
else{
let error = "restaurant closed"
reject(error)
}
})
orderFood.then((food)=>{
console.log("enjoy ur "+food);
}).catch((error)=>{
console.log(error);
})

CALL STACK :
-Global Execution Context
-Function Execution Context
Example :
function getSum(x,y){
return x+y
}
function getAvg(x,y){
return getSum(x,y)/2
}
getAvg(10,20)
FOR in :
-iterates over object. used to access the properties of object
Example :
let obj1 = {
name : "Rushi",
age : 21,
contNo : 7066651719,
status : false,
}
for (x in obj1) {
console.log(obj1[x]);
document.write(obj1[x]+"<br>")
}
FOR of :
-iterates over array
Example :
const fruits = ['apple', 'banana', 'cherry'];
for (const x of fruits) {
console.log(x);
}
DOM :
-In JavaScript, the Document Object Model (DOM) is a programming interface
that represents the structure of HTML
documents as a tree-like structure. It provides a way to interact with
and manipulate the content, structure,
and style of web pages dynamically.
 - HTML is used to structure the web pages and js is used to add behavior to
web pages.When an HTML file is loaded into the browser
,the js cannot understand the HTML document directly. So, a
corresponding document is created i.e DOM.Dom is basically the
representation of the same HTML document but in a different format with
the use of objects.Now js can understand the tags in the
form of objects.And we can give different dynamic functionality to the
elements of the html
Difference between js and java:
JAVASCRIPT :
-JS is scripting langauge
-js is object-based language.
-js is not a standalone language as it needs html program for execution
-js is loosely typed language
-js is easy language to learn
-takes less amount of memory
-js is interpreted language
JAVA :
-java is a programming language.
-java is a object-oriented programming language
-java is standalone language
-java is strongly typed language.
-java is one of the complex language.
-takes more amount of memory
-java is compiled language.