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
}
