Alert

ALERT

Confirm

Prompt

propt value

call function

Basic Event

Find Even & Odd Numbers with Loops in

sum of even number only

for loop

Nested Loop-1

Nested Loop-2

Create New Arrays Method

let ary = new Array("new TVS");

NORMAL ARRAY

NEW ARRAY

NEW ARRAY (get array by prompt popup)

All Arrays Method in js file

All Array Method

Multidimensional Arrays

type 1:-

type 2 (array ke ander array ki value ka loop chalange ke liye [["name",18,"b.com"]] )

new method

Modify & Delete Array Elements

MODIFY TYPE: (array ki value change karne ke liye)

DELETE TYPE:- (array ki value ko delete karne ke liye)

Array Sort & Reverse

1. sort():- sort a-z
2. reverse():- ulta
3. pop():- delete end
4. push():- add end
5. shift():- delete first
6. unshift():- add first
7. concat():- add two array
8. join():- array ki sari vlue ko ek sting banana
9. slice():- array ki value kat kar nikalne ke liye
10. splice():- array ke beech me value add karnne ke liye
11. isArray():- if it is array TURE
12. indexOf():- array ki value ka INDEX nikalne ke liye
13. lastIndexOf():- index find RIGHT to LEFT
14. includes():-if value includes return TRUE not inclues FALSE
15. some():- one value match return TRUE
16. every():- all value match return TRUE
17. find():-find value result 1 value only
18. findIndex():-find index value 1 only
19. filter():- filter
20. toString():- array convert to STRING
21. valueOf():- call just like variable
22. fill():- array all value change
23. forEach():- loop
24. entries():-

SORT METHOD:- (array ko sort karne ke liye a to z)

REVERSE METHOD:- (array ko reverse karne ke liye last ka array in frond position)

Array toSorted()

Array toReversed()

Array sort number

Array sort number descending

Array Pop & Push

POP METHOD:- (last array ko delete karne ke liye)

PUSH METHOD:- (array ke last me array add karne ke liye)

Array Shift & Unshift

shift() METHOD:- (array ki first value ko delete karne ke liye ==> pop() ka opposit )

unshift() METHOD:- (array ke first me array add karne ke liye ==> push ka opposit )

Array Concat & Join

Concat() METHOD:- (2 array ko jodne ke liye )

Join() METHOD:- (array ke alag alag value ko ek string value banata hai )

Array Slice & Splice

Slice() METHOD:- (array ki value kat kar nikale ke liye )

Splice() METHOD:- (array ke beech value add karne ke liye )

isArray (is array or not)

isArray() METHOD:- (array ko check karne ke liye, variable array hi ke nahi )

Array indexOf & lastIndexOf

indexOf() METHOD:- (array ka index number check karne ke liye LEFT to RIGHT )

lastIndexOf() METHOD:- (array ka index number check karne ke liye RIGHT to LEFT )

Array Includes Method

Includes() METHOD:- (array ke ander value match karne ke liye, value match karti hai to TRUE result milta hai )

array Some & Every Methods

Some() METHOD:- (atlist one conditoin case match, return true)

some() return a function

Every() METHOD:- (every condition case match, return true)

Every() return a function

Array find & findIndex

find() METHOD:- ( find array value)

findIndex() METHOD:- (find array value index)

Array Filter

Filter() METHOD:- (filter value)

Array toString, valueOf & fill Methods

toString() METHOD:- (convert array value to STRING)

valueOf() METHOD:- (value just like a variable)

fill() METHOD:- (fill all array value to another value)

forEach Loop

forEach() METHOD:- (get element, get index no, get total of array)

Objects Tutorial

object is advance version of arrray

in object no index number, on is behalf name of value

key value pair:- name: "jitender", age:40, deg:"b.com"

3 strong point

1) name = property

2) object ke ander array bhi bana sakte hai

3) isme multipule function bhi bana sakte hai, jineh hum method bhi kehte hai

Objects() METHOD:- (find array value index)

The Object.values(student1) Method

The Object.entries(student1) Method

The Object.entries(student1) Method with key value pair

Using JSON.stringify()

Using JSON.parse() == convert string to object

Array Objects

Array Objects:- ()

Create Objects

let Create_Objects1 = new Object()

Create Objects:- (Asign value after created object)

Const Variable with Array & Objects

Const Array:- (const variable ARRAY how to change)

Const Object:- (const variable OBJECT how to change)

For in Loop

For in Loop:- (for in loop-- get for object data)

Map Method

map():- (for in loop-- get for object data)

map():- (for array object --- create new array)

flatMap():-

String Methods

String Methods 2

1. length:- property
2. toLowerCase():-
3. toUpperCase():-
4. includes():-
5. statsWith():-
6. endsWith():-
7. search():-
8. match():-
9. indexOf():-
10. lastIndexOf():-
11. replace():-
12. trim():- input value space
13. charAt():-
14. charCodeAt():-
15. fromCharCode():-
16. concat():-
17. split():-
18. repeat():-
19. slice():-
20. substr():-
21. substring():-
22. toString():-
23. valueOf():-

String Methods():- (all string mathos)

Number Methods

Number():- (string convert to number)

parseInt():- (remove decimal value)

parseFloat():- (same no changes)

isFinite():- (if is number true, not number false)

isInteger():- (isInteger -- without decimal number)

toFixed():- (fixed how many degit in decimal)

toPrecision():- (how many degit with decimal)

Math Methods

1. ceil(x)-decimal upper value
2. floor(x):-decimal down value
3. round(x):-nearest value round
4. trunc(x):-trunc return value without decimal, no upper, no down value
5. max(x,y,z,..,n):-return max value only
6. min(x,y,z...,n):-return min value only
7. sqrt(x):-squre root
8. cbrt(x):-cube root
9. pow(x,y):-power== 5, 2
10. random():-any randam value show
11. abs(x):-
12. PI:-

ceil():- (decimal upper value)

floor():- (decimal down value)

round():- (nearest value round)

trunc():- (trunc return value without decimal, no upper, no down value)

max(x,y,z,..,n):- (return max value only)

min(x,y,z,..,n):- (return min value only)

sqrt(x):- (squre root)

cbrt(x):- (cube root)

pow(x,y):- (power== 5, 2)

random():- (any randam value show)

abs(x):- (how)

PI():- (how)

Date Methods

1. toDateString()-
2. getDate():-
3. getFullYear():-
4. getMonth():- january ko 0 count karta hai
5. getDay():-
6. getHours():-
7. getMinutes():-
8. getSeconds():-
9. getMilliseconds():-
10. setDate():-
11. setFullYear():-
12. setHours():-
13. setMilliSeconds():-
14. setMinutes():-
15. setMonth():-
16. setSeconds():-

let full_date = new Date()

1) toDateString():- (how)

2) getDate():- (how)

3) getFullYear():- (how)

4) getMonth():- (january ko 0 count karta hai)

5) getDay():- (mon-1, tue-2, wed-3, thu-4, fri-5, sat-6, sun-7)

6) getHours():- (how)

7) getMinutes():- (how)

8) getSeconds():- (how)

9) getMilliseconds():- (how)

10) setDate():- (how)

11) setFullYear():- (how)

12) setHours():- (how)

13) setMilliseconds():- (how)

14) setMinutes():- (how)

15) setMonth():- (how)

16) setSeconds():- (how)

DOM Introduction

DOM - dom tree

html

head body

DOM - get, set

dom help karta hai HTML ke tag ki value ko get ya set karne ke liye

element ko add karne ke liye ya delet karne ke liye like --- h1, p, ul, li, span etc

Targeting Methods

how to target DOM Object (to get and set value)

1. id ------------------ document.getElementById(id)
2. Class Name ----- document.getElementsByClassName(name)
3. Tag Name ------- document.getElementsByTagName(h1)

ALTERNATE

1. document.querySelector("#id")
2. document.querySelector(".className")
3. document.querySelectorAll("#id")
4. document.querySelectorAll(".className")

Other DOM targeting methods

1. document
2. document.all
3. document.documentElement
4. document.head
5. document.title
6. document.body
7. document.images
8. document.anchors
9. document.links
10. document.forms
11. document.doctype
12. document.URL
13. document.baseURI
14. document.domain

DOM Get & Set Value Methods

what we can Get with DOM

1. HTML
2. Text
3. Attribute

DOM get method

1. innerText
2. innerHTML
3. outerHTML
4. getAttribute
5. getAttributeNode
6. Attributes

GET innerText

innerText

ruff

GET innerHTML

innerHTML

ruff

GET getAttribute

getAttribute

ruff

ruff

ruff

GET getAttributeNode

getAttributeNode

ruff

ruff

ruff

GET attributes

attributes

ruff

==========================================================================================================

SET DOM method

document.querySelector("#text23").innerText = `add innerText`

document.querySelector("#text23").innerHTML = `

innerHTML

document.querySelector("#text23").outerHTML = `

innerHTML

document.querySelector("#text23").setAttribute('class', 'abc xyz')

document.querySelector("#text23").style.background = "#f00";

document.querySelector("#text23").setAttribute("title", "my title name")

document.querySelector("#text23").className = "abc xyz";

document.querySelector("#text23").classList.add("xyz");

document.querySelector("#text23").classList.remove("abc", "efg");

SET DOM

old value

old value

setAttribute class name abc to xyz

old value

old value

DOM querySelector & querySelectorAll

1. document.querySelector
2. document.querySelectorAll

querySelector innerHTML

old value

old value

querySelectorAll innerHTML

old value

DOM CSS Styling Methods

3 method of css styling

1. Style
2. className
3. classList

set style

set className work only new add class only

classList

remove class

old value

Mutable and Immutable Objects

Immutable Primitive data types

Mutable non-Primitive data types for ARRAY

Mutable non-Primitive data types for OBJECT

how to create Mutable to Immutable

Shallow Copy vs Deep Copy

Shallow Copy

DEEP Copy 2

DEEP Copy 3 with Array

Convert to Title Case

Convert to Title Case

Normal case

Title Case

Normal case

Variable title case

addEventListener Method

addEventListener me multiple event ek sath use kar sakte hai

like, onclick, ondblclick, onmouesenter, onmouseout

Text 1

Text 2

Text 3

Text 4

Text 5

Text 6

Text 7

Text 8

classList Methods

Text 1 = click class add

Text 2 = click class remove

Text 3 = click class length

Text 4 = click class toggle

Text 5 = click class item class index 1

Text 6 = click class contains abc

DOM Traversal Method (for target HTML element)

1. parentNode
2. parentElement
3. Children
4. childNodes
5. firstChild
6. firstElementChild
7. lastChild
8. lastElementChild
9. nestElementSibling
10. nestSibling
11. previousElementSibling
12. previousSibling

these are most popular

1. parentElement
2. children[2]
3. firstElementChild
4. lastElementChild
5. previousElementSibling
6. nextElementSibling

parentElement & parentNode Method

Children & childNodes Methods

firstElementChild & lastElementChild Method

first child = childrenNode

last child = childrenNode

previousElementSibling & nextElementSibling Method

nextSibling = childrenNode

previousSibling = childrenNode

createElement & createTextNode

not working

1. createElement = DOM me tag add karne ke liye, p, div, span
2. createTextNode = DOM me text add karne ke liye
3. createComment = DOM me kisi tag ko comment karne ke liye <--p -->

createElement

createTextNode

createComment

appendChild & insertBefore

append 1

prepend

insertAdjacentElement & insertAdjacentHTML

not working

1. beforebegin
2. afterbegin
3. beforeend
4. afterend

insertAdjacentElement 1

insertAdjacentHTML 2

insertAdjacentText 3

Form Events

1. keydown
2. keypress
3. keyup
4. focus()
5. blur()
6. input
7. change
8. select
9. submit
10. invalid

BOM Introduction

1. Get Width & Hight of Browser Window
2. Open & Close Browser Window
3. Move & Resize Browser Window
4. Scroll To Browser Window
5. Get URL, Hostname, Protocol of Browser Window
6. Get History of Browser Window

Most Popular Window Event

1. window.open("https://designwithjitender.co.in/", "_blank", "width=500,height=500");
2. wiondow.close()
3. location
4. location.href
5. location.assign('https://designwithjitender.co.in/')
6. location.reload()
7. location.replace('https://www.jagran.com/')
8. history.back()
9. history.forward()
10. history.go(-1)
11. offsetTop
12. offsetLeft
13. scrollTop
14. scrollLeft

Window Height & Width Method

1. innerHeight = window.innerHeight
2. outerHeight = window.outerHeight
3. innerWidth = window.innerWidth
4. outerWidth = window.outerWidth

innerHeight

outerHeight

innerWidth

outerWidth

Window Open & Close Method

Location Object

location.href = 'https://designwithjitender.co.in/'

location

location.href

1. Assign() = url ko change karne ke liye
2. Reload() = url ko refresh karne ke liye
3. Replace() = url change but remove history

History Object

url History

1. history
2. history.length
3. history.scrollRestoration
4. history.state
5. history.back()
6. history.forward()
7. history.go(-1)

pageYOffset & pageXOffset (for window object)

1. pageYOffset
2. pageXOffset

pageYOffset

pageXOffset

windown offset on scroll

offsetTop & offsetLeft

position relative lagane par, offset get karega relative div ka

Offset Top Left

scrollTop & scrollLeft

scrollWidth & scrollHeight

offsetWidth & offsetHeight

offsetWidth & offsetHeight

offset width and height with border and padding

clientWidth & clientHeight

clientWidth & clientHeight

client width and height:=== without border and with padding and minus scroll bar

visual aria only width and height show

ClientX & ClientY

mouse event property

mouse positon Y-axis X-axis

view viewport only not window

pageX & pageY

mouse event property

mouse positon Y-axis X-axis

view window width scroll height

screenX & screenY

mouse event property

mouse positon Y-axis X-axis

view screen

offsetX & offsetY

mouse event property

mouse positon Y-axis X-axis

view window

for box offset

CtrlKey AltKey ShiftKey MetaKey

1. ctrlKey
2. altKey
3. shiftKey
4. metaKey

mouse event property

ctrlKey

altKey

shiftKey

metaKey

mouse Button

event work mouse down

1. Left Button return value 0
2. Middle Button return value 1
3. Right Button return value 2

Key Property

keyboard event use on (onkeydown)

for box key property

for box key property (if else condition)

• b = blue
• r = red
• y = yellow
• p = ping
• g = green

Clipboard Events : onCut onCopy onPaste

1. cut (oncut)
2. copy (oncopy)
3. past (onpast)

right click disable code for window

ononline & onoffline

1. Event online = ononline
2. Event offline = onoffline

another method for online offline event

Advance JavaScript - Introduction

Advance JavaScript

Prevent Default in JavaScript

e.preventDefault() = for disable link

behaviour ko change kar deta hai

Chrome Developer Tools

Network tab

dev tools

Confirm

Confirm

Radio Buttion

Local Storage

Check Box

setInterval and setTimeout

Number how many time repeat

JavaScript Program to Find the Factorial of a Number

prime number

prime number is:- 2, 3, 5, 7, 11

type 2

Confirm

Confirm

Confirm

Confirm

Confirm

Confirm

Confirm

Confirm

Confirm

Confirm

Confirm