Using arguments keyword , we have all the parameters stored in
that , so in case of multiple parameters we can iterate over
all of them using arguments keyword. (for length->
arguments.length );
||
\/
using spread operator also we can do so->function abc(...rishi)
{ for(i=0;i<risi.length;i++{}}
Arrow function-> const say=()=>{....};
// or const addv=(a,b)=>{ return a+b};
if ek hi line hai body me to directly likh sakte hai
like -> const addv=(a,b)=>a+b;
inside a object if there is a function and we are using
this keyword inside that , then this will be referring to
that particular object . (but the funct. should be normal fn.)
but in case of arrow function since it is global in scope
so it will refer to the window object i.e. the browser ko
refer karega.
arguments keyword not available for arrow fn.
spread is available
hoisting not allowed for arrow function=> i.e. we cannot
call a function before it's initialization
the function which is passed inside another funciton is
called callback funciton and the function inside which
it is passed is called higher order function since it
is excepting another function inside it;
arrow functions can also be used as callback funtions
and both these types of functions are used in places
where there are time consuming task such as api calling
Arrays:
1) .length
2) .push()
3) inside array in js we can keep any values (like string,
object,emojis)
4) .pop()
5) .reverse()
=> Arrays higher order funct. :-
const arr=[....];
1) arr.forEach(()=>{}) // inside for each there can be a
normal function or a arrow function.
2) arr.map(some funct. which is defined outside)
=> map function returns an array.
3) arr.find((val)=>val===4) -> if true then returns the
number
4) arr.findIndex((num)=>num===4) -> if true the returns
index
5) arr.filter -> returns filtered array based on some
condition which we apply
DOM = ? (define)
some methods:
- alert()
- prompt()
jo bhi hum browser ke sath interaction kar rhe hai vo,
window object ka use karke kar rhe hai.
d
we use the document object to interact with our dom->
console.log(document.title) => to access the title of
the document .
document functions:
1) .write("...") = for writing some on the document or we can
on the actual screen
2) .querySelector("body").innerHTML = jo likha hua hai
usko acess karna // instead of body we can select
other tags or selector and manipulate them also
3)for selecting id=> document.querySelector("#id_name").innerText; kisi id ka
text select karne ke liye for class use(".class_name")
4) use innerHTML only when you have to give html else
don't give.
5) document.querySelector(").children;
6) document.querySelector(").parentElement;
7)If we use .querySelectorAll(")-> then it will return
all such selectors in the form of an array and then
we can apply array functions on that.
8) for getting id wale elements we can also use =>
document.getElementById("..");
*for giving class using js-> after abc=getElementById ->
abc.classList.add("red-color","..") // so red-color class
will be given to element with the given id .
*and for removing => abc.classList.remove("");
*for adding inline style using js -> el.style.textDecoration="underline".
-> el.style.color="red"
for setting the attributes=>
el.setAttribute("aria","123");
and for gettign the value of attribute=>
e1.getAttribute("aria");
=>for accessing elements by class=>
const ele=document.getElementsByClassName("..");
// and it selects all the elements having that class
// and for accesing particular element->
iterate using for loop and -> "ele.item(i)";
* Event Listners :-
inside the tag itself -> onclick="alert('hey')"
// i.e. to the onclick itself put the
javascript code in form of string .
// second method :
-> intialize function inside js file , then call
it inside the tag using onclick keyword.
// another way of calling event=> el is accessed using getElementById
el.onclick=function(){console.log("..."); };
preferred way=> el.addEventListener("click",callback_function(){..});
using .appendChild(el) function we can add new elements .
if we need to fetch info. from some network or url
then we use 'fetch("url")' funct.
asynchonous tasks are those which return promise bcz. there task requires time
in case of async tasks we need to create async function
and we need to use await keyword , to hold the pointer
in order to wait for it's execution.
fetch("url").then(()=>{}).catch(()=>{}).finally(()=>{});
if successful -> then wala run hoga
if error occurs -> then catch wala run hoga
finally wala hamesha run hoga , error aaye na aaye.
Local Storage in js:
every browser has a storage called local storage where
we can store any info. of user like token ,any settings
like dark-mode ,etc. so that whenever user comes back
the browser identifies him and make the setting accordign
to user.
->for storing => localStorage.setItem("name",value);
-> for getting => localStorage.getItem("name");
For getting current location of the user=>
navigator.geolocation.getCurrentPosition(sucess_callback,failure_callback);
setInterval=>
to get the current-time => const time=new Date(), const currTime=time.getHours()
, // for minutes time.getMinutes();
let interval=setInterval(func_name,time_in_millisecond);
// and for stoping the above interval
=> clearInterval(interval);
clousure=> defination ?
iife => ((a,b)=>a+b)(2,3) => immediately invoke ho jaega
advantages:
1)unnecessory global variables nhi banane padte
2)const data=(async ()=> await fetch())(); easily
async functions bana sakte hai.
Our HTML inside the browser is called DOM;
**** Important: ****
function_name ->this is just giving the function
function_name() -> this means calling the
function immediately .
