Scribd
Upload
7 views

JavaScript Notes 5

Uploaded by

Sumit Rana
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

JavaScript Notes 5

Uploaded by

Sumit Rana
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 27

COMPUTER POGRAMMING

JavaScript
HTML DOM HTML

<html>
<head>
<title>sitename<title> HEAD BODY

</head> element element

<body> attribute

<div id=“myDiv”> TITLE DIV ID

<p class=“bold”> element element myDiv


attribute
Hello sitename P CLASS
</p> element bold
text
</div>
</body> Hello
</html> text

HTML DOM TREE


<html> document HTML
<head>
<title>sitename<title>
HEAD BODY
</head>
<body>
<div id=“myDiv”>
TITLE DIV ID
<p class=“bold”>
myDiv
Hello </p>
</div> sitename P CLASS

</body> bold

</html>
Hello

document = {
title : “sitename", document
location :"http://localhost" ,
getElementById : function(),
getElementsByClassName : function(),
getElementsByTagName : function(),
… … 100 more
}
Select Elements HTML

<html> HEAD BODY


<head>
<title>sitename<title>
TITLE DIV ID
</head>
myDiv
<body>
<div id=“myDiv”> sitename P CLASS

<p class=“bold”> bold

Hello </p>
Hello
</div>
</body>
</html> document

document .querySelector ( “.bold” )

HTMLElement JS Object
Select Elements HTML

<html> HEAD BODY


<head>
<title>sitename<title>
TITLE DIV ID
</head>
myDiv
<body>
<div id=“myDiv”> sitename P CLASS

<p class=“bold”> bold

Hello </p>
Hello
</div>
</body>
</html> document

document .querySelector ( “#myDiv” )

HTMLElement
Select Elements HTML

<html> HEAD BODY


<head>
<title>sitename<title>
TITLE DIV ID
</head>
myDiv
<body>
<div id=“myDiv”> sitename P CLASS

<p class=“bold”> bold

Hello </p>
Hello
</div>
</body>
</html> document

document .querySelectorAll ( “.bold” )

NodeList [ p ] [ HTMLelememt ]
Select Elements HTML

<html> HEAD BODY


<head>
<title>sitename<title>
TITLE DIV ID
</head>
myDiv
<body>
<div id=“myDiv”> sitename P CLASS

<p class=“bold”> bold

Hello </p>
Hello
</div>
</body>
</html> document

document .getElementById ( “myDiv” )

HTMLElement
Select Elements HTML

<html> HEAD BODY


<head>
<title>sitename<title>
TITLE DIV ID
</head>
myDiv
<body>
<div id=“myDiv”> sitename P CLASS

<p class=“bold”> bold


Hello </p>
Hello
</div>
</body>
</html> document

document .getElementsByClassName ( “bold” )

HTMLCollection [ p ] [ HTMLelememt ]
Select Elements HTML

<html> HEAD BODY


<head>
<title>sitename<title>
TITLE DIV ID
</head>
myDiv
<body>
<div id=“myDiv”> sitename P CLASS

<p class=“bold”> bold

Hello </p>
Hello
</div>
</body>
</html> document

document .getElementsByTagName ( “p” )

HTMLCollection [ p ] [ HTMLelememt ]
HTMLElement HTML

(reading)
HEAD BODY
const el = document .querySelector ( “#myDiv” )

TITLE
el.innerText “” DIV ID
myDiv

el.innerHTML <p class=“bold”> Hello </p> sitename P CLASS


bold
el.id “myDiv”
Hello
<html>
const el = document .querySelector ( “.bold” ) <head>
<title>sitename<title>
</head>
e.className “bold”
<body>
<div id=“myDiv”>
e.innerText “Hello” <p class=“bold”>
Hello </p>
</div>
</body>
</html>
HTMLElement HTML

(writing)
HEAD BODY
const el = document .querySelector ( “#myDiv” )

TITLE DIV ID
myDiv
el.innerHTML = <p class=“bold”> Hey </p>
sitename P CLASS

el.id = “myDiv” bold

Hello
<html>
const el = document .querySelector ( “.bold” ) <head>
<title>sitename<title>
</head>
e.className = “bold”
<body>
<div id=“myDiv”>
e.innerText = “Hello” <p class=“bold”>
Hey </p>
</div>
</body>
</html>
Attributes HTML

HEAD BODY
const el = document .querySelector ( “.bold” )

TITLE DIV ID
myDiv

el.getAttribute(“class”) “bold”
sitename P CLASS
bold
el.setAttribute(“class”, “bold dark”)
Hello
<html>
<head>
<title>sitename<title>
</head>
<body>
<div id=“myDiv”>
<p class=“bold”>
Hello </p>
</div>
</body>
</html>
CSS Styles HTML

HEAD BODY
const el = document .querySelector ( “.bold” )

TITLE DIV ID
el.style.color “black” myDiv

sitename P CLASS

el.style.color = “blue” bold

Hello
el.style.backgroundColor = “yellow” <html>
<head>
<title>sitename<title>
el.style.border = “1px solid red” </head>
<body>
<div id=“myDiv”>
<p class=“bold”>
Hello </p>
</div>
</body>
</html>
ClassList HTML

HEAD BODY
const el = document .querySelector ( “.bold” )

TITLE DIV ID

el.classList.add(“dark”) myDiv

sitename P CLASS
bold

el.classList.remove(“dark”) Hello
<html>
<head>
el.classList.replace(“bold”, “dark”) <title>sitename<title>
</head>
<body>
<div id=“myDiv”>
<p class=“bold”>
Hello </p>
</div>
</body>
</html>
Children / Parent / Sibling HTML

HEAD BODY
const el = document .querySelector ( “#myDiv” )

TITLE DIV ID

el.children P myDiv

sitename P CLASS

el.parentElement Body bold

Hello
el.previousSibling null <html>
<head>
el.nextSibling null <title>sitename<title>
</head>
<body>
<div id=“myDiv”>
<p class=“bold”>
Hello </p>
</div>
</body>
</html>
Events HTML

HEAD BODY
const el = document .querySelector ( “.bold” )

TITLE DIV ID
myDiv
el.addEventListener( “click”, function(){
sitename P CLASS
bold
})
Hello
<html>
runs on every click <head>
<title>sitename<title>
</head>
<body>
<div id=“myDiv”>
<p class =“bold”>
`
Hello </p>
</div>
</body>
</html>
Event Object HTML

HEAD BODY
const el = document .querySelector ( “.bold” )

TITLE DIV ID
myDiv
el.addEventListener( “click”, function(e){
sitename P CLASS
bold
})
Hello
<html>
<head>
event Object <title>sitename<title>
</head>
<body>
e.target.innerText <div id=“myDiv”>
<p class=“bold”>
Hello </p>
</div>
</body>
target = element </html>
Event Bubbling HTML

HEAD
const body = document .querySelector ( “body” ) BODY

TITLE DIV ID
myDiv

sitename P CLASS
bold

Hello
<html>
<head>
<title>sitename<title>
</head>
“click” started here, <body>
<div id=“myDiv”>
and it bubbles “up” <p class=“bold”>
P => Div => Body Hello </p>
</div>
</body>
</html>
Event Delegation HTML

HEAD
const body = document .querySelector ( “body” ) BODY

TITLE DIV
body.addEventListener( “click”, function(e){ ID
myDiv

sitename P CLASS
bold
})
Hello
“body” will also <html>
capture “click” / we can delegate <head>
<title>sitename<title>
“events” to body </head>
<body>
“click” started here, <div id=“myDiv”>
<p class=“bold”>
and it bubbles “up” Hello </p>
P => Div => Body </div>
</body>
</html>
Mouse Events
mousedown event
mouseenter event
mouseleave event
mousemove event
mouseout event
mouseover event
mouseup event
click event
dblclick event
Keyboard Events

keyup event
keydown event
keypress event
Document Events

scroll event
copy event
cut event
paste event
Promise : States
Promise
initial State

PENDING

RESOLVED REJECT

DATA ERROR
Forms
<form name="myForm" action="/serverAPI" method="post">
Name: <input type="text" name=“fname">
<input type="submit" value="Submit">
</form>

const form = document.querySelector ( “form” )

const nameInput = form.fname


access inputs by “name” attribute

el.addEventListener( “submit”, function(e){


nameInput.value
})
value of input event on submit button click
Validate Forms
<form name="myForm" action="/serverAPI" method="post">
Name: <input type="text" name=“fname">
<input type="submit" value="Submit">
</form>

const form = document.querySelector ( “form” )


const nameInput = form.fname
const regexPattern = /^(?:\d{3})([-/.])\d{3}\1\d{4}$/

el.addEventListener( “submit”, function(e){

const result = regexPattern.test(nameInput.value)


pattern for phone 111-222-333

})
BOM- Browser Object Model
window = {

location :Location object ,


document : DOM Object,
alert : function(), THIS
confirm : function(),
scrollX : 0, THIS
scrollY : 100px, THIS
innerWidth : 900px,
innerHeight : 900px, THIS
open : function(), THIS
close : function(),
scrollTo: function()

… … 100 more
}

You might also like