29-7-2025

JavaScript Array Methods

क्र. Method Name कोड हिंदी में व्याख्या

Array में कुल कितने items हैं, इसकी गिनती
1. .length arr.length
देता है।
Array को ascending order (A-Z या 0-9) में sort करता
2. .sort() arr.sort()
है (string बेस्ड)।
3. .reverse() arr.reverse() Array के items को उल्टा कर देता है।
4. .pop() arr.pop() आखिरी item को हटाता है।
5. .push(item) arr.push(false) Array के अंत में नया item जोड़ता है।
6. .shift() arr.shift() पहले item को हटाता है।
7. .unshift(item) arr.unshift(500) Array की शुरुआत में item जोड़ता है।
8. .concat() arr.concat(arr1) दो arrays को जोड़कर नया array बनाता है।
Array के सभी items को एक string में बदलता है,
9. .join(separator) arr.join('*')
separator लगाकर।
Array से कुछ हिस्सा निकालता है, लेकिन
10. .slice(start,end) arr.slice(3,9)
ओरिजिनल array को नहीं बदलता।
arr.splice(8,
Items हटाता, जोड़ता या replace करता है, और
11. .splice(start,count,new...) 12, 'rahi',
ओरिजिनल array को modify करता है।
'madhura')

30-7-2025
JavaScript Functions & Methods

क्
Code/Type नाम / प्रकार विवरण (हिंदी में)
र.
सामान्य तरीका function define
function hello() { ... Function Declaration /
1. } करने का; इसे कहीं से भी call
Statement किया जा सकता है।
function demo(a, b) Parameter Function / दो arguments लेता है और उनका
2. { ... } जोड़ दिखाता है।
Expression
IIFE (Immediately Invoked जो function तुरंत define होते
3. (function(){ ... })() ही खुद-ब-खुद run हो जाता है।
Function Expression)
Short syntax; एक parameter लेता
let data = (s) => Arrow Function (with
4. { return s**5 } है और उसका power 5 निकालता
block) है।
दो parameters लेता है और सीधे
let hello = (x, y) =>
5. x + y Arrow Function (one-line) उनका जोड़ return करता है (short
syntax)।
let hello1 = () => Arrow Function (no कोई parameter नहीं लेता; सीधा
6. 'hello world' string return करता है।
params)
arr.map((val) => val + हर element पर function apply करता
7. 5) Array Method – map() है और नया array return करता है।
जो elements condition को pass
arr.filter((val) =>
8. val > 50) Array Method – filter() करते हैं, सिर्फ उन्हें return
करता है।
सभी values को एक ही value में
arr.reduce((p, c) => p
9. * c) Array Method – reduce() बदल देता है (जैसे sum, product,
etc.)।

JavaScript Object
No. Code / Method Purpose Behavior / Result
Declares an object with Creates an object: {name:
1 let obj = { ... } 'madhura', city: 'pune', age:
key-value pairs 27}
Returns all the keys of the
2 Object.keys(obj) Output: ['name', 'city', 'age']
object as an array
Returns all the values of
3 Object.values(obj) Output: ['madhura', 'pune', 27]
the object as an array
Copies the object into a obj1 = Object.assign(obj)
4 Object.assign(obj)
creates a shallow copy of obj
new object
obj1.name = 'Rahi' Updates values in the obj1 becomes: { name: 'Rahi',
city: 'Banglore', age: 25,
etc. copied object company: 'TCS' }
Freezes the object – no
Any modification on obj1 will be
5 Object.freeze(obj) add/update/delete is
ignored silently in non-strict mode
allowed
obj1.name = 'Rahi' ❌ Change will not happen obj1.name will still be 'madhura'
Seals the object – update
You can change existing keys, but
6 Object.seal(obj) is allowed, but no
can't add or remove properties
add/delete
obj1.name = 'Rahi' ✅ Update works name will now be 'Rahi'
obj1.company = Property company won't be added to
'TCS' ❌ Won’t be added
the object

30-7-2025
JAVASCRIPT STRING FUNCTION
 Output (for given
Variable Method Used Description
string)
Returns the total
a str.length
number of 41
characters in the
string
Converts all "JAVASCRIPT IS A
b str.toUpperCase() characters to BEST FRONTEND
uppercase LANGUAGE."
Converts all "javascript is a
c str.toLowerCase() characters to best frontend
lowercase language."

d str.startsWith('J')
Checks if string true
starts with 'J'
e str.endsWith('age.')
Checks if string true
ends with "age."
Replaces
"React is a best
f str.replace('Javascript','React') "Javascript"
frontend language."
with "React"
Extracts
"ascript is a best
g str.slice(3, 35) characters from frontend lang"
index 3 to 34
Splits the string ["Javascript", "",
"is", "a", "best",
h str.split(" ") into an array by "frontend",
space "language."]
Returns the
i str.charAt(10) character at " " (space character)
index 10

JavaScript Aaray MEthods

Method
# Description Example Output
Used
Transforms each element of the [6,7,8,9,10,11,12,13] (adds 5 to
1 map()
array. each element)
 Method
# Description Example Output
Used
2 filter() Filters elements based on condition. [59, 83] (values > 50)
Reduces array to single value by
3 reduce() 40320
multiplying all elements.

Function Methods: apply(), bind(), call(), toString()

Method /
# Description Example Output / Behavior
Pattern
Combines two arrays using concat
10 apply() [2,4,5,6,11,12,13]
+ apply.
Binds function context to another My name is dipti and I got 90
11 bind() % in the exam
object (changes this).
Calls constructor function with
12 call() 1 rohan, 2 riya
another constructor's context.
Converts String object to string
13 toString() 'good morning everyone'
primitive.

1-8-2025
JavaScript Number Methods

Output (for data =

Variable Method / Function Description
23.676)

a Number.parseInt(data)
Converts to integer (removes 23
decimals)
b Number.parseFloat(data)
Keeps decimal (converts to 23.676
float)
c Number.isInteger(data) Checks if value is an integer false

d Number.isFinite(data)
Checks if value is a finite true
number
e data.toFixed(5)
Returns string with 5 decimal "23.67600"
places
f data.toPrecision(6)
Returns number as a string with "23.6760"
6 total digits precision

JavaScript Date and Time Methods

Sample Output (will vary by current

Method Description
date/time)
new Date() Creates current date/time object Tue Aug 05 2025 15:30:00 GMT+0530
 Sample Output (will vary by current
Method Description
date/time)
(IST)
getDate() Returns day of the month (1–31) 5

getMonth() + 1
Returns current month (0–11, +1 8
to correct)
getFullYear() Returns 4-digit year 2025
Returns day of the week (0–6,
getDay() 2 (Tuesday)
Sunday = 0)
getHours() Current hour (0–23) 15
getMinutes() Current minutes (0–59) 30
getSeconds() Current seconds (0–59) 12
getMilliseconds() Current milliseconds (0–999) 482
setDate(3) Sets day of the month 3
setFullYear(2027) Sets the year 2027

setMonth(5)
Sets month to June (0-based 6
index)
Format Example Custom date format with concat 8/5/2025

4-8-2025 (mONDAY) - DOM Selection Methods

Method Description Returns Example Output

Selects one
Single DOM
getElementById('id1') element by <p id="id1">...</p>
element
its id
Selects all
elements HTMLCollection
getElementsByClassName('data') 4 <p> elements
with class (array-like)
data
Selects all
getElementsByTagName('p') HTMLCollection All <p> elements
<p> tags
Selects first
matching First <p
querySelector('.data') 1 element
element with class="data">
.data class
Selects all
matching NodeList (can use
querySelectorAll('.data') 4 <p> elements
elements with .forEach)
.data class

DOM Manipulation using getElementsByClassName –

# Selector / Code Type Action Effect / Description

1 document.getElementsByClassName('data') DOM Selector Selects all Returns a live

(HTMLCollection) elements HTMLCollection of <p>
with class
 # Selector / Code Type Action Effect / Description

data elements

Selects 3rd
<p>
Used to apply styling to this
2 element[2] Index access element
specific element
(index starts
at 0)

Changes
element[2].style.backgroundColor = Inline Style
3 background Only one style applied
'red' (commented) (single)
color to red

color: yellow,
Sets
background: blue,
Inline Style multiple
4 element[2].style.cssText = "..." font-size: 50px,
(multiple) CSS
border: 7px solid red
properties
applied at once

DOM Content Retrieval & Modification

Property / Method Description Returns/Effect

innerHTML
Gets/sets content including HTML <h2>This is innerHTML methods</h2>
tags
innerText
Gets/sets only visible text, ignores This is innerHTML methods
spacing/tags
textContent
Gets/sets all text, including spacing ' DOM session'
and hidden text

Form-Related Events
Event Attribute Triggered When...

onchange Value of input/select/textarea changes and loses focus

oninput User input is received (real-time typing)

onfocus Element (input) gains focus

Event Attribute Triggered When...

onblur Element loses focus

onreset Form is reset

onsubmit Form is submitted

Mouse Events

Event Attribute Triggered When...

onclick Mouse click

ondblclick Mouse double click

onmousedown Mouse button is pressed

onmouseup Mouse button is released

onmouseover Mouse pointer enters an element

onmouseout Mouse pointer leaves an element

onmousemove Mouse moves within an element

oncontextmenu Right-click (opens context menu)

Keyboard Events
Event Attribute Triggered When...

onkeydown Any key is pressed down

onkeypress Key is pressed (deprecated, use keydown/keyup)

onkeyup Key is released

Clipboard Events
Event Attribute Triggered When...

oncopy Content is copied

oncut Content is cut

onpaste Content is pasted

Drag & Drop Events
Event Attribute Triggered When...

ondrag Element is being dragged

ondragstart Drag starts

ondragend Drag ends

ondragenter Draggable enters drop area

ondragleave Draggable leaves drop area

ondragover Draggable is over drop area

ondrop Dropped in drop area

✅ Window Events
Event Attribute Triggered When...

onload Page or image is fully loaded

onunload User leaves the page

onresize Window is resized

onscroll Scrolling occurs

onbeforeunload Before page unloads

✅ Touch Events (Mobile)

Event Attribute Triggered When...

ontouchstart Finger touches screen

ontouchmove Finger moves on screen

ontouchend Finger removed from screen

ontouchcancel Touch interrupted

 ✅ Media Events
Event Attribute Triggered When...

onplay Media begins to play

onpause Media is paused

onended Media has ended

onvolumechange Volume is changed

✅ Miscellaneous Events
Event Attribute Triggered When...

onchange Input value changes (dropdown, text, etc.)

onerror An error occurs (image fails to load, etc.)

onwheel Mouse wheel is rolled

onselect Text is selected

onanimationstart CSS animation starts

onanimationend CSS animation ends

5-8-2025(tUesDAY)
JavaScript DOM & Math Methods – Summary Table
# Code / Concept Method / Property Type Description / Action
element.setAttribute('href', DOM Sets or updates an attribute
1 URL)
setAttribute()
Attribute (e.g., href) on an element
DOM Gets the value of the specified
2 element.getAttribute('title') getAttribute()
Attribute attribute
addEventListener('click', Event Adds an event listener (non-
3 function(){})
addEventListener()
Handling inline), e.g., on click
Event Triggers a function when an
4 onclick="functionName()" onclick (inline)
Handling element is clicked
Timing Calls a function every ms
5 setInterval(function, ms) setInterval()
Function milliseconds until cleared
 # Code / Concept Method / Property Type Description / Action
Timing Stops the interval set by
6 clearInterval(intervalID) clearInterval()
Function setInterval()
Executes a function once after
Timing
7 setTimeout(function, ms) setTimeout() a specified delay in
Function
milliseconds
Timing Cancels a timeout set by
8 clearTimeout(timeoutID) clearTimeout()
Function setTimeout() before it runs
Dynamically changes the
DOM
9 style.marginLeft = x + 'px' style manipulation inline CSS style (e.g.,
Styling
movement animation)
Math Rounds up to the nearest
10 Math.ceil(-4.456) Math.ceil()
Object integer
Math Rounds down to the nearest
11 Math.floor(4.456) Math.floor()
Object integer
Math Returns a random float
12 Math.random() * 100 Math.random()
Object between 0 and 100

6-8-2025(Wednesday) –
clearTimeout()
// Schedule a timeout
let timer = setTimeout(() => {
console.log("This will not run if cleared in time.");
}, 3000);

// Cancel the timeout before it executes

clearTimeout(timer);
 STOPWATCH EXAMPLE

7-8-2025(THURSDAY) – Jquery Evenets

# Code / Concept Method / Property Type Description / Action

Event Executes a function when the
1 $('#btn').click(function(){}) .click()
Handling selected element is clicked
Event Executes when the value of an
2 $('#input').change(function(){}) .change()
Handling input, select, or textarea changes
Event
3 $('#txt').keyup(function(){}) .keyup() Executes when a key is released
Handling
Event Executes when a key is pressed
4 $('#txt').keydown(function(){}) .keydown()
Handling down
Event Executes when the mouse pointer
5 $('#box').mouseenter(function(){}) .mouseenter()
Handling enters the element
Event Executes when the mouse pointer
6 $('#box').mouseleave(function(){}) .mouseleave()
Handling leaves the element
 # Code / Concept Method / Property Type Description / Action
Event Executes when a form is
7 $('#form').submit(function(e){}) .submit()
Handling submitted
Executes two functions when
Event
8 $('#el').hover(funcIn, funcOut) .hover() mouse enters and leaves an
Handling
element
Attaches one or more event
Event
9 $('#el').on('click', function(){}) .on() handlers (preferred over .bind()
Binding
for dynamic elements)
Event Removes event handlers attached
10 $('#el').off('click') .off()
Binding with .on()
Event Executes when the element is
11 $('#el').dblclick(function(){}) .dblclick()
Handling double-clicked
Event Executes when an element gains
12 $('#el').focus(function(){}) .focus()
Handling focus
Event Executes when an element loses
13 $('#el').blur(function(){}) .blur()
Handling focus

8-8-2025(FRIDAY) – jQuery Traversing Methods

# Code / Concept Method / Property Type Description / Action

Gets the immediate parent of the
1 $('#el').parent() .parent() Traversing Up
selected element
Gets all ancestor elements of the
2 $('#el').parents() .parents() Traversing Up
selected element
Gets all ancestor elements up to,
3 $('#el').parentsUntil('#stop') .parentsUntil() Traversing Up but not including, the specified
element
Traversing Gets all direct child elements of
4 $('#el').children() .children()
Down the selected element
Traversing Gets all descendant elements that
5 $('#el').find('.cls') .find()
Down match the selector
Gets all sibling elements of the
6 $('#el').siblings() .siblings() Traversing Side
selected element
 # Code / Concept Method / Property Type Description / Action
Gets the immediately following
7 $('#el').next() .next() Traversing Side
sibling of the selected element
Gets all following siblings of the
8 $('#el').nextAll() .nextAll() Traversing Side
selected element
Gets following siblings up to, but
9 $('#el').nextUntil('.stop') .nextUntil() Traversing Side not including, the specified
element
Gets the immediately preceding
10 $('#el').prev() .prev() Traversing Side
sibling of the selected element
Gets all preceding siblings of the
11 $('#el').prevAll() .prevAll() Traversing Side
selected element
Gets preceding siblings up to, but
12 $('#el').prevUntil('.stop') .prevUntil() Traversing Side not including, the specified
element
13 $('#el').first() .first() Filtering Selects the first element in the set
14 $('#el').last() .last() Filtering Selects the last element in the set
Selects the element at the specified
15 $('#el').eq(2) .eq() Filtering
index
Keeps only elements that match
16 $('#el').filter('.cls') .filter() Filtering
the selector
Removes elements that match the
17 $('#el').not('.cls') .not() Filtering
selector
Keeps only elements containing
18 $('#el').has('.child') .has() Filtering
the specified selector