JavaScript
There are various data types in js as in case of many other coding languages but js is somehow
more flexible but a bit tricky with its datatypes and scope issues .
Let
Const
Var
JS is dynamically typed as we don't have to declare variable type
Var pierces scope of block
So it is important to know the types and their conversion .
Mostly you will be dealing with numbers and strings
So below are few to convert.
To integer
Let a = Number(num)
parseInt(num)
ParseFloat(num)
To string
.toString()
String()
Now comparing 2 numbers is easy but if you miss the conversion the follwing may help
The == converts both the strings into number then checks if they are equal
But === is strict check it doesnot convert but checks
Object is a collection of key value pairs
Where keys are generally the properties and are strings
And values can be any data type
Object are declared within curly braces {}
Objects can be nested within objects
Dot operator is used to acess values
Now one of the most important thing is string methods
Slice can take negative value
Substring ignores negative values
Trim can be used on shite spaces and line terminators
Starttrim trimend also available
Splits(separator)
Includes
Replace
Object types number provides less operations
So we convert it to string
Mathematics functions
Abs - absolute value
Round - rounds
ceil - ceiling values
Floor - floor value
Max , min - in an array of elements
Random - gives random values between 0 to 1
We create object of date
toString
toDateString
toLocaleString
.now() counts time from initial date
.getTime time from a specific date till now
.getDay , .getMonth
toLocaleString very useful create object inside parenthesis and declare your specifications for
time like long day name , time zone date in words etc ..
Arrays
Elements can be of different types
Shallow copy - heap
Deep copy - stack
Array produces shallow copy
Push add at last
Pop delete at last
Unshift insert at beginning
Shift delete at beginning
Slice does not change array and doesnot include last index
Splice changes the initial index and no of elements to be deleted
12345
Splice 123
Original array 45
Join concatenates array and produces string type
Array.of(a , b ,c ) creates an array of elements
Array from("hitesh") creates an array of each element
Spread most imp [...marvel_heroes , ...dc_heroes]
Spread is a better way of concatenation
Destructuring
${} best way to pass variable within a string
And {} used to pass value to anything as such a button
Var pierces scope block
() => {} If curly braces then use return
() => () Do not use return
Can take arrow function inside alse ( () => {} )()
Loops
For of
For(let e in apples)
For each
Array.forEach(e => console log e )
Map
users.map(user => user.name);
Specify a key for identification
Filter sorts out the data
DOM manipulation
document.queryselector
.getElementById('title')
.getAttribute('id')
.class
setAttribute(' parameter to be changed ie class or I'd or base that holds the value ' , ' new
parameter ' )
B.innerText shows on what is visible on website as many content are hidden by css
B.textContent print entire content without hiding anything that may not be visible in website
B.innerHTML shows inner tags also
Queryselector selects the first element
Queryselectorall returns node LIST not an array
It is used to select multiple elements which was not possible in queryselector
Getbyclassname returns values in HTMLcollection not an array
Write in script tag after body tag all the programs codes you learnt
. FirstElementChild selects first child
.LastElementChild selects Last child
Parent.child.length as parent is collection but children are elements
.parentElement
Create an elemnet
.createElement
Apply I'd class name attributes
createTextnode then .append
.innerText does the same as append overirdes previous
But after all this it won't be visible
So we need document.body.appendChild('element created ') to make it visible on webpage
Create text node is more optimised than innerText no traversing
.textcontent same as innerText
.replacechildwith to replace child or we can use append
Li : nth- child('2') to select nth child
.outerHTMl you have to take entire tag not only text
.remove() to remove an object
Events
We should not used onclick as it gives less functionality
We should rather prefer eventlistener as it gives propagation ability
.addeventlistener( any event , then function)
Can be predefined or custom
Async code
Js is synchronous and single threaded
So we async await in order to attain synchronous function for asynchronous code
Async projects
setTimeout()
Purpose: Executes a function after a specified delay
clearTimeout()
Purpose: Cancels a previously set timeout
setInterval()
Purpose: Repeatedly executes a function at a specified interval (in milliseconds)
Clear interval same as clear timeout
API
Fetch
Axios
Const resp = await Fetch('url') as it takes times to fetch
Data = await resp.json() to convert json we also use await as it takes time
Localstorage.getitem
Localstorage.setitem
Promise
let promise = new Promise((resolve, reject) => {
let success = true;
if (success) {
resolve('The operation was successful!');
} else {
reject('Something went wrong.');
}
});
Try catch
try {
console.log("Trying to run something...");
let result = 10 / 0;
} catch (error) {
console.log("Caught an error:", error);
} finally {
console.log("This will always run, whether an error occurs or not.");
}
Finally is optional may or may not use
