Scribd
Upload
31 views

Unit - 2 WEB PROGRAMMING

The document discusses DOM and DOM events including accessing and modifying the DOM, event handlers for load, mouse, key, form and synthetic events, event bubbling and cookies. It provides details on the DOM tree, DOM objects and methods for accessing and modifying elements. It also covers different types of events and event handlers.

Uploaded by

SATHYABAMA MADHANKUMAR
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
31 views

Unit - 2 WEB PROGRAMMING

The document discusses DOM and DOM events including accessing and modifying the DOM, event handlers for load, mouse, key, form and synthetic events, event bubbling and cookies. It provides details on the DOM tree, DOM objects and methods for accessing and modifying elements. It also covers different types of events and event handlers.

Uploaded by

SATHYABAMA MADHANKUMAR
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 21

Unit 2 Web

Programming
Unit – II
DOM and DOM Events:
Accessing and modifying DOM,
Events and Event Handlers -
Load, Mouse, Synthetic Events,
Key and Form Related Events,
Event Bubbling, Cookies
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
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
<!DOCTYPE html>
<html>
<body>
<h2>
Demo for <a> tag
</h2>
<a href="http://www.tjohncollege.com/">
Click here to visit TJC
</a>
</body>
</html>
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.
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
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
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
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.
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
• 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.
• 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.
• 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.
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.
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
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.
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 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.
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
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.

You might also like