Computer Science 302:

Web Development

Gregory M. Kapfhammer

Keep in Touch!

Course Web Site

Office Hours

Teaching Assistants

Slack Communication

Relevant Tweets

Email Communication

Color Scheme

Key Concept

Corresponding Diagram

In-Class Discussion

In-Class Activity

Details in the Textbook

Document Object Model

DOM

Intermediate Representation

DOM Trees

A DOM tree is a set of nodes

It stores data elements hierarchically

It contains a root DOM node

The nodes have a parent-child relationship

It represents an entire HTML document

What does this look like in memory?

See Figures 9.1 and 9.2

Why do we represent a web site this way?

DOM Methods

Selection methods

Family manipulation methods

Event methods

Why do we need these methods?

What are the benefits of these methods?

Selection methods

Run a query on a DOM tree

Use the getElement method

See Figure 9.3 for an example

See Figure 9.4 for an example

How does this relate to CSS?

Summary: access components of a page

But, what else is important?

Modifying DOM Trees

Change an element's style

Change an element's content

Create new DOM elements

What are the benefits of this approach?

Select and then modify

But, be careful with timing!

Query and modify after loading

Event-driven programming

Callbacks and event properties

Event listeners

Event Types

Mouse

Keyboard

Touch

Form

Frame

Sense and respond to an event

Practical application of events?

Form evaluation!

Study the forms on my web site

You can learn more in CMPSC 100!

You can learn more in CMPSC 101!

Any further questions about JavaScript programming?