JavaScript 2: Using

JavaScript

Chapter 9

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

© 2017 Pearson
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd
Ed.
http://www.funwebdev.com
 Chapter 9
The Document
1 2
Modifying the
Object Model DOM
(DOM)

3 Events
4 Event Types

5 Forms
6 Summary

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Chapter 9
The Document
1 2
Modifying the
Object Model DOM
(DOM)

3 Events
4 Event Types

5 Forms
6 Summary

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 The Document Object Model (DOM)
Overview

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 The Document Object Model (DOM)
Nodes and NodeLists

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 The Document Object Model (DOM)
Document Object

The DOM document object is the root JavaScript

object representing the entire HTML document

// retrieve the URL of the current page

var a = document.URL;
// retrieve the page encoding, for example ISO-8859-1
var b = document.inputEncoding;

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 The Document Object Model (DOM)
Selection Methods

Classic
• getElementById()
• getElementsByTagName()
• getElementsByClassName()
Newer
• querySelector() and
• querySelectorAll()

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 The Document Object Model (DOM)
Selection Methods

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 The Document Object Model (DOM)
Query Selector

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 The Document Object Model (DOM)
Element Node Object

Element Node object represents an HTML element in

the hierarchy, contained between the opening <> and
closing </> tags for this element. Every node has
• classList
• className
• Id
• innerHTML
• Style
• tagName

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 The Document Object Model (DOM)
More common (not universal) properties

• href
• name
• src
• value

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Chapter 9
The Document
1 2
Modifying the
Object Model DOM
(DOM)

3 Events
4 Event Types

5 Forms
6 Summary

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Modifying the DOM
Changing an Element’s Style

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Modifying the DOM
Meet the family

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Modifying the DOM
Changing an Element’s Content

document.getElementById("here").innerHTML =
"foo<em>bar</em>";

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Modifying the DOM
Creating DOM elements

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Modifying the DOM
Creating DOM elements

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Modifying the DOM
Tools - Debuggers

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Modifying the DOM
Tools – Performace checkers

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Modifying the DOM
Tools – Linters

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Chapter 9
The Document
1 2
Modifying the
Object Model DOM
(DOM)

3 Events
4 Event Types

5 Forms
6 Summary

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Events

JavaScript event is an action that can be detected by

JavaScript
• Many of them are initiated by user actions
• some are generated by the browser itself.

We say that an event is triggered and then it is

handled by JavaScript functions

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Events
Event-Handling Approaches – Inline Hook

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Events
Event-Handling Approaches – Event Property Approach

var myButton = document.getElementById('example');

myButton.onclick = alert('some message');

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Events
Event-Handling Approaches – Event Listener Approach

var myButton = document.getElementById('example');

myButton.addEventListener('click', alert('some
message'));
myButton.addEventListener('mouseout', funcName);

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Events
Event-Handling Approaches – Event Listener Approach (anon function)

myButton.addEventListener('click', function() {
var d = new Date();
alert("You clicked this on "+ d.toString());
});

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Events
Event Object

When an event is triggered, the browser will construct

an event object that contains information about the
event.
div.addEventListener('click', function(e) {
// find out where the user clicked
var x = e.clientX;
…

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Events
Event Object

• bubbles Indicates whether the event bubbles up

through the DOM
• cancelable Indicates whether the event can be
cancelled
• target The object that generated (or dispatched)
the event
• type The type of the event (see Section 9.4)

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Chapter 9
The Document
1 2
Modifying the
Object Model DOM
(DOM)

3 Events
4 Event Types

5 Forms
6 Summary

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Event Types
Mouse Events

• click The mouse was clicked on an element

• dblclick The mouse was double clicked on an element
• mousedown The mouse was pressed down over an
element
• mouseup The mouse was released over an element
• mouseover The mouse was moved (not clicked) over
an element
• mouseout The mouse was moved off of an element
• mousemove The mouse was moved while over an
element

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Event Types
Keyboard Events

• keydown The user is pressing a key (this happens

first)
• keypress The user presses a key (this happens after
keydown)
• keyup The user releases a key that was down (this
happens last)

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Event Types
Touch Events

Touch events are a new category of events that can be

triggered by devices with touch screens
Limited Browser support (2017)
The different events (e.g., touchstart, touchmove, and
touchend) are analogous to some of the mouse events
(mousedown, mousemove, and mouseup).

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Event Types
Form Events

• Blur
• Change
• Focus
• Reset
• select
• Submit

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Event Types
Frame Events

• abort An object was stopped from loading

• error An object or image did not properly load
• load When a document or object has been loaded
• resize The document view was resized
• scroll The document view was scrolled
• unload The document has unloaded

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Chapter 9
The Document
1 2
Modifying the
Object Model DOM
(DOM)

3 Events
4 Event Types

5 Forms
6 Summary

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Forms
Responding to Form Movement Events

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Forms
Responding to Form Changes Events

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Forms
Validating a Submitted Form

• Field Validation
• Number Validation
• Other (non JavaScript) Form validation reminder

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Forms
Submitting Forms

var formExample =
document.getElementById("loginForm");
formExample.submit();

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 AJAX
First the Normal Request Response Loop

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 AJAX
The problem

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 AJAX
The solution

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Chapter 9
The Document
1 2
Modifying the
Object Model DOM
(DOM)

3 Events
4 Event Types

5 Forms
6 Summary

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Summary
Key Terms

• blur • event bubbling • form events

• Document • event • frame events
Object Model delegation
• keyboard
• (DOM) • event handler events
• document root • event listener • linter
• DOM • event object • mouse events
document
object • event • node
propagation
• selection
• DOM tree • event type methods
• element node • focus • touch events
• event

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Summary
Questions?

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.