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 [Link] using border box.
- margin box : it is outermost layer around content, padding, [Link]
using margin property.
POSITIONS :
-Static : it is a default positioning of each [Link] 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 [Link] will create its own
flow
-Fixed : same as absolute but it will positioned to nearest [Link] 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 [Link] 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
[Link](Boolean("true")+2);//3
[Link](Number("true"+5));//NaN
[Link](Boolean(1)+"true");//trurtrue
[Link](String(55)+5);//555
[Link](false-"1");
[Link](Number(true)+"true");//1true
[Link]("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(){
[Link]("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
[Link]('Executing higher-order function');
// Call the callback function
callback();
}
function callbackFunction() {
[Link]('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() {
[Link]('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) {
[Link]('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();
[Link] = "ganya"
[Link]=45
3. By using constructor function :
let emp = function tcs(name,age){
[Link]=name;
[Link]=age;
}
let emp1 = new emp("abc",21)
Arrays :
-is a block of memory which is used to store multiple values of hetrogeneous
[Link] 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 [Link]
not change the original array.
let fName = ["Ajay","Atul","Jay","Prajwal"]
[Link](fName);
let fullName = [Link]((cValue)=>{
return cValue+" Patil"
})
Array filter() method :
-it filter and extract the ele of array that satisfy the provided
[Link] not change the original array.
let num = [10,20,30,40,50]
let fil = [Link]((cValue)=>{
return (10<cValue && 50>cValue)
})
[Link](fil);
Array reduce() method :
-is used to reduce a array to single value and excutes a provided function
for each value of the [Link] val is stored in accumulator.
Example :
let num = [10,20,30,40]
let sum = [Link]((acc,cValue)=>{
debugger;
return acc+cValue
})
[Link](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;
[Link](name); // Output: Alice
[Link](age); // Output: 30
[Link](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
[Link](pl1);
[Link](pl2);
[Link](pl3);
[Link](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;
}
[Link](sum(1, 2, 3, 4, 5)); // Output: 15
[Link](sum(10, 20)); // Output: 30
[Link](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)
}
})
[Link]((food)=>{
[Link]("enjoy ur "+food);
}).catch((error)=>{
[Link](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) {
[Link](obj1[x]);
[Link](obj1[x]+"<br>")
}
FOR of :
-iterates over array
Example :
const fruits = ['apple', 'banana', 'cherry'];
for (const x of fruits) {
[Link](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 [Link] an HTML file is loaded into the browser
,the js cannot understand the HTML document directly. So, a
corresponding document is created i.e [Link] is basically the
representation of the same HTML document but in a different format with
the use of [Link] js can understand the tags in the
form of [Link] 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.
