CS133JS Beginning Programming: JavaScript

The Document Object Model

Topics by Week
1. Intro to JavaScript programming	6. Arrays
2. Functions, Operators and Expressions	7. Objects and Object Constructors
3. Conditional Statements: if and switch	8. Web Page I/O
4. Repetition: while, do while, and for	9. Dynamic Web Pages
5. Midterm Check-Point	10. Review for final quiz

Introduction

Announcements

For Winter 2024

Note: the tutorial you are reading this week has examples that use arrow functions. You will learn about those next term. I've translated those examples to use "normal" functions.
Reminders:
- Lab 6 (objects) code reviews are due today (Tuesday).
- The reading quiz closes before class on Wednesday.
- Lab 6 is due Thursday.

Q and A

Any questions?

Web Page Input and Output

A brief introduction

What is the DOM?

The browser has a set of built-in JavaScript objects that represent the web page and all its HTML elements. The objects are arranged in a hierarchy:

DOM-model

By Birger Eriksson - Own work, CC BY-SA 3.0, Link

HTML for the web page in the DOM diagram above


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>My title</title>
  </head>
  <body>
    <h1>A heading</h1>
    <a href="https://example.com">Link text</a>
  </body>  
</html>

Referencing HTML Elements

We can reference elements directly through the DOM tree, like this:


document.body.children[0].innerHTML = "Dom Demo"; // Change the h1 element

But usually, we use some method to search for an element by id, selector or some other identifying feature.

For the examples below, assume we have this in our web page:


<h1>Greetings</h1>
<p id="eugene">Hello Eugene!</p>
<p id="lcc">Hello LCC!</p>
<p id="cit" class="cit">Hello CIT!</p>

By id attribute


document.getElementById("lcc").innerHTML = "Hello Lane Community College!";

By CSS selector

Using `querySelector` with a single selector

Review of CSS

in a CSS rule, the first part is the selector. For example, in the rule below, .cit is the class selector:


.cit {
  background-color: green;
}

Back to the querySelector

In JavaScript, we can use document.querySelector to get a reference to an HTML element.

The selector can be any valid CSS selector such as:
- id
- class
- element name (tag name)
- or a combination of the selectors above

The querySelector method will return a single reference to the first matching element it finds on the page. In the example below, it will find an element with the attribute class="cit".


document.querySelector(".cit").innerHTML = "Greetings CIT!";

Using `querySelector` with multiple selectors

For the html below,


<h1>Students and Their Degree Programs</h1>
<ul>
        <li id="s1">
            Student: <span></span>
            <p>Degree: <span></span></p>  
        </li>
        <li id="s2">
            Student: <span></span>
            <p>Degree: <span></span></p>  
       </li>
</ul>

In the JavaScript example below, we are using the selectors being passed to the querySelector method to put text into the spans.


document.querySelector("#s1 span").innerHTML = "Susan Lee";
document.querySelector("#s1 p span").innerHTML = "Computer Programming";

document.querySelector("#s2 span").innerHTML = "David Johnson";
document.querySelector("#s2 p span").innerHTML = "Computer Network Operations";

I/O Using HTML Elements

In previous examples and lab assignments you've used the prompt function to get input document.write, or getElementById with innerHTML to put output on a web page.

Now we'll look at a couple new ways to do input and output (I/O).

`textContent`

This is another way to access the content between tags. The difference between this property and innerHTML is that textContent just gets or set text, no HTML tags will be processed and no formatting done on the web page. Here's an example showing the differences:

Demo of innerHTML vs. textConent

The textContent property is the best one to use when you just need to output text (without HTML tags) to a web page.

`value`

This object property is useful for getting or setting the value in an HTML <input> element. The input element would normally be in an HTML form.


xxxxxxxxxx
<input id="name" placeholder="Your name">
<script>
  alert(document.getElementById("name").value);
  // The alert will display "Your name"
</script>

JavaScript Events

JavaScript can respond to various actions a user preforms when interacting with a web page in a browser. These user actions are called events.

Common events

onclick The user clicks an HTML element.
onmouseover The mouse pointer moves over an HTML element.
onkeydown The user presses a keyboard key.
onload The browser has finished loading the page.

Event Handlers

Event handlers are JavaScript functions that are called when events occur.

The event handler must be specified for a particular HTML element.

One way to do this is with an HTML attribute:


xxxxxxxxxx
<p onmouseover="doSomething()">This paragraph has an onmouseover event</p>

An event handler is just an ordinary function:


xxxxxxxxxx
function doSomething() {
   document.write("something");
}

Event handlers that write something to the document (web page) need to have a target element.


xxxxxxxxxx
function doSomething() {
   document.querySelector("p").innerHTML = "Something";
}

Using a Button to Get Input

We can use a button with an onclick event handler to get user input. Here's an example:


xxxxxxxxxx
Enter your name:<input>
<button onclick="getName()">Enter</button>

<p>Hello: <span id="name"></span></p>
<script>
  function getName() {
    let name = document.querySelector("input").value;
    document.querySelector("#name").innerHTML = name;
  }
</script>

Note: The onclick event can be used with any element, but we frequently use it with a button.

When to Use an HTML `<form>`

The purpose of a <form> is to send the information entered in the form to a program running on a server. Only use a form if that is what you want to do. If you are just using input elements with JavaScript running in the browser, don't put the input elements in a form.

When you click a button on a form, the information entered on the form will be sent in an HTTP request either to a program at a URL specified in the form's action attribute or back to the URL of the web page the form is in—this is called a postback. A postback will reset the web page to its original state and any information entered on the form will be lost.

The Document Object Model

Table of Contents

Introduction

Announcements

Q and A

Web Page Input and Output

What is the DOM?

Referencing HTML Elements

By id attribute

By CSS selector

Using `querySelector` with a single selector

Using `querySelector` with multiple selectors

I/O Using HTML Elements

`textContent`

`value`

JavaScript Events

Common events

Event Handlers

Using a Button to Get Input

When to Use an HTML `<form>`

Further Reading

Tutorials

Reference

The Document Object Model

Table of Contents

Introduction

Announcements

Q and A

Web Page Input and Output

What is the DOM?

Referencing HTML Elements

By id attribute

By CSS selector

Using querySelector with a single selector

Using querySelector with multiple selectors

I/O Using HTML Elements

textContent

value

JavaScript Events

Common events

Event Handlers

Using a Button to Get Input

When to Use an HTML <form>

Further Reading

Tutorials

Reference

Using `querySelector` with a single selector

Using `querySelector` with multiple selectors

`textContent`

`value`

When to Use an HTML `<form>`