Unit 2 Web

Programming

1
 DOM
The DOM is a W3C (World Wide Web Consortium)
standard.
The DOM defines a standard for accessing
documents:
"The W3C Document Object Model (DOM) is a
platform and language-neutral interface that allows
programs and scripts to dynamically access and
update the content, structure, and style of a
document."
The W3C DOM standard is separated into 3 different
parts:
Core DOM - standard model for all document types
XML DOM - standard model for XML documents
HTML DOM - standard model for HTML documents
2
 HTML DOM Tree of Objects
• When a web page is loaded, the browser creates
a Document Object Model of the page.
• The HTML DOM model is constructed as a tree of Objects

3
 What is the HTML DOM
• The HTML DOM is a standard object model
and programming interface for HTML.
• It defines:
• The HTML elements as objects.
• The properties of all HTML elements.
• The methods to access all HTML elements.
• The events for all HTML elements.
• In other words: The HTML DOM is a
standard for how to get, change, add, or
delete HTML elements.
4
 DOM OBJECTS
• In the DOM, all HTML elements are defined
as objects.
• The programming interface is the properties and
methods of each object.
• A property is a value that you can get or set (like
changing the content of an HTML element).
• A method is an action you can do (like add or
deleting an HTML element).
• Accessing : getElementById Method
• Modifying : innerHTML Property
5
 Accessing & Modifying Using DOM Methods
• Accessing HTML Elements
 Methods
document.getElementById(id) – Access element By element id
document.getElementsByTagName(tagname) – Access
elements By tag name
document.getElementByClassName(classname) – Access
elements By class name

6
 Accessing & Modifying Using DOM Methods
• Modifying HTML Elements
 Property
element.innerHTML = new html content
Change the inner HTML of an element
element.attribute = new value
Add the new attribute value of an HTML
element
element.style.property = new style
Change the style of an HTML element
 Method
element.setAttribute(attribute, value)
Change the attribute value of an HTML
element

7
 Events
• JavaScript's interaction with HTML is handled
through events that occur when the user or the
browser manipulates a page.
• When the page loads, it is called an event. When the
user clicks a button, that click too is an event. Other
examples include events like pressing any key,
closing a window, resizing a window, etc.
• Developers can use these events to execute
JavaScript coded responses, which cause buttons
to close windows, messages to be displayed to
users, data to be validated, and virtually any other
type of response imaginable.
• Events are a part of the Document Object Model
(DOM) Level 3 and every HTML element contains a
set of events which can trigger JavaScript Code.
8
 Event Handlers
 Event handlers can be used to handle and verify user
input, user actions, and browser actions
To List Few
• Things that should be done every time a page loads
• Things that should be done when the page is closed
• Action that should be performed when a user clicks a button
• Content that should be verified when a user inputs data
Many different methods can be used to let JavaScript work with
events:
• HTML event attributes can execute JavaScript code directly
• HTML event attributes can call JavaScript functions
• User can assign their own event handler functions to HTML
elements
9
• User can prevent events from being sent or being handled
 Event Handlers
• Load
– Onload
– Onloadeddata
– Onloadedmetadata
– Onloadstart
• Mouse
– The mousedown fires when you depress the mouse button on the
element.
– The mouseup fires when you release the mouse button on the
element.
– The click fires when one mousedown and one mouseup detected
on the element.
– The mousemove event fires repeatedly when you move the mouse
cursor around an element.

10
• The mouseover fires when the mouse cursor is
outside of the element and then move to
inside the boundaries of the element.

• The mouseout fires when the mouse cursor is

over an element and then moves another
element.

11
• The mouseenter fires when the mouse cursor
is outside of an element and then moves to
inside the boundaries of the element.
• The mouseleave fires when the mouse cursor
is over an element and then moves to the
outside of the element’s boundaries.
• Both mouseenter and mouseleave does not
bubble and does not fire when the mouse
cursor moves over descendant elements.

12
 Event Handlers
• Key
– Keydown ; Keyup; Keypress
– Keydown is pressing the key without releasing
it, Keypress is a complete press-and-release
cycle.
– Keydown event is fired for all keys, regardless
of whether they produce a character value.
– The keydown
– and keyup events provide a code indicating
which key is pressed, while keypress indicates
which character was entered.

13
 Event Handlers
Form Related Events
– A form event is fired when a form control
receive or loses focus or when the user modify
a form control value such as by typing text in a
text input, select any option in a select box etc.

onfocus When the user focuses on an element

onsubmit When the user submits the form
When the focus is away from a form
onblur
element
When the user modifies or changes the
onchange
value of a form element
14
 React.js
What?
React.js is an open-source JavaScript library that is used for building user
interfaces specifically for single-page applications. It’s used for handling
the view layer for web and mobile apps.
Why?
React allows developers to create large web applications that can change
data, without reloading the page. The main purpose of React is to be
fast, scalable, and simple.

15
 Synthetic Events
Basically, it’s React wrapping actual events in a JavaScript
wrapper.
So instead of onClick, it’s something like reactOnClick. The
onClick event still fires ultimately in the browser, but it’s not
what you as a programmer is actually calling.
This sort of pattern is called a abstraction. By disconnecting
the code you write from how that code actually runs allows to
inject different implementations based on what you are
writing for.
For example, a Windows app or an Android app do not have
an onClick event. If you used a native onClick event, that code
wouldn’t work. But if you abstract it behind another call
like reactOnClick, when you compile your React code, it can be
made to replace reactOnClick with native click events for any
platform.
This synthetic event system allows React to run in React
16
Native for iOS and Android or in Electron for mobile apps.
 Event Bubbling
• Event bubbling is a type of event propagation
where the event first triggers on the
innermost target element, and then
successively triggers on the ancestors of the
target element in the same nesting hierarchy
till it reaches the outermost DOM element or
document object.

17
 Cookies
• Cookies are data, stored in small text files, on
computer.
• When a web server has sent a web page to a
browser, the connection is shut down, and the
server forgets everything about the user.
• Cookies were invented to solve the problem "how
to remember information about the user":
• When a user visits a web page, his/her name can
be stored in a cookie.
• Next time the user visits the page, the cookie
"remembers" his/her name.
• Cookies are saved in name-value pairs
18
 Difference Between Cookies &
Web Storage
• On client and server, the following storages are available: local
storage, session storage, and cookies.
• The Local Storage is designed for storage that spans multiple
windows and lasts beyond the current session. In particular, Web
applications may wish to store megabytes of user data, such as
entire user-authored documents or a user's mailbox, on the client
side for performance reasons. Cookies do not handle this case well
because they are transmitted with every request.
• Local Storage is available for every page and remains even when the
web browser is closed, but you cannot read it on the server.
• The stored data has no expiration date in local storage. With
cookies, you can set the expiration duration.
• If you want to clear local storage, then do it by clearing the browser
cache. You can also use JavaScript for this. Local Storage is for client
side, whereas cookies are for the client as well as server side.

19