Page 4: Doing things to HTML

On the last page, we added JavaScript to a web page, but we didn’t do much with the JavaScript. Here’s we’ll see how we connect between JavaScript programs and web pages to make the code do things that we can see. Eventually, we’ll make it do graphics, but for now, we’ll do some simpler things.

And yes, I am putting the javascript code right into the HTML for these simple examples. We won’t do this in the future.

Box 1 - Referring to HTML

We often need our JavaScript code to be able to refer to elements on the page so we can do things to them. The web browser provides many functions that allow us to search through the DOM (Document Object Model, the data structure that represents the web page). The most useful for us is to find an element by id. Remember from Page  1  (HTML and CS559), that we can label elements with an id attribute. In our JavaScript code, we can search for an element by Id and do something to it. The box has an example (and as you can guess, you should read the code in 01-04-01.js).

If you look at the code, you’ll see a pattern: we find an element, and we do something to it. We changed the text of a span named span1, we changed the color of span2 and added a click handler to the button. Read the code and make sure you understand how it works.

There are many other ways to find elements on web pages - this is the simplest one, and the one we will use for almost everything in class.

Here’s a hint for looking at the code in the debugger: if you open the inner page (01-04-01.html for this one, you can right-click -> open in new tab), it still works in the browser. But the browser is working on this page. If you use “view source”, you’ll see only the page’s source. If you go to the browser console, you can also see the code - and use the debugger to set a breakpoint.

This is a good time to practice using the debugger. Put a breakpoint before the text in span1 is changed (stop on line 19). And you’ll see the that HTML says something different before it is changed.

If you need more help with the VS Code debugger, check out the optional workbook Debugger Tutorial (GitHub Repository).

Box 2 - Button Events

We saw this on the last page, but when a button is clicked it calls the onclick handler. More generally, when something happens (to almost any element), it creates an event. We can tie a function (called a handler) to the event, and do things when the event happens. The style of programming is called event driven programming - we basically write code that does things in response to events.

Different elements have different events associated with them. Buttons actually have a several different events (onclick that we’ve seen, as well as onmousedown, onmouseup, and onmouseleave and several others). This box uses them in different ways to get different behaviors. Try moving the mouse while clicking. And then make sure to read the code in 01-04-02.js.

An obvious, but important thing here is that our code only gets run when an event happens. Otherwise, we don’t do anything. This is called event-driven programming.

Different kinds of HTML elements generate different kinds of events.

Box 3 - Slider Events

When you look at the code, you will see some weird looking comments with type information. See Typed JavaScript and CS559 for an explanation.

Box 4 - Sliders as Outputs

Just as you can read a slider’s value, you can also set it’s value in order to move it.

Again, read the code (in 01-04-04.js) and understand what is going on. Notice the difference between handling onchange events versus oninput events with sliders. One creates an event for every movement of the slider, the other only creates an event when the user is done dragging.

Box 5 - Making Things

In the examples so far, we put the HTML elements in the HTML, and the script found it. Often, we will want the script to make new elements. Here is a simple example:

Be sure to look at 01-04-05.html and understand it.

There are two main steps to adding an element: first we need to create the element (and set it up appropriately), and then we need to insert it into the document somewhere. Although the createElement method is a method of document, it only creates the element (as a data structure). We still need to place it on the page.

Box 6 - Putting Code in a Better Place

Most of the examples so far, put the Javascript code right onto the HTML pages. This is convenient for short programs, but often it is nice to keep languages separate.

We saw an example of loading a script from a page on a previous page (box 01-03-03, to be precise).

In general for class, we will separate code and HTML. A “style” we will use is to make the HTML be very simple, and make the work happen in a separate JavaScript file. While we can put the <script> tags anywhere, we tend to put them at the beginning or end of the html file (outside of the body).

Here’s a simple example - one that might have been better just to put things into html.

You can see that this could have been a few lines of HTML. But, has been spread among 01-04-06.html and two Javascript files 01-04-06a.js and 01-04-06b.js. There was no good reason to spread it across 3 files, other than to show you that we can do it (and you should get used to seeing things this way).

This is also a time to acknowledge that the html in these examples is very minimal. We are trying to make things as simple as possible.

Box 7 - Oops, I forgot…

This box is a public service announcement: sometimes you will need to create files as part of the workbook. If you do this, you should:

1. Always make the files in the for_students directory
2. Remember to add them to your git repository so that you can commit and push them!

So, to practice that, here is a box for you to fill in. I’ve made the html, but I “forgot” the Javascript file. (I didn’t actually forget, I intentionally left it out) Add the Javascript file to put the sentence “NAME was here” (where NAME is your name) into the box. You should do this by adding a Javascript file (like box 01-04-06 did). Make sure you add the new file to GIT so we can see it for grading!

Yes, you could have done this by editing 01-04-07.html, but we want you to practice adding Javascript files to a workbook. (yes, you get points for doing this)

Moving On …

Being able to manipulate web pages is important. And buttons and sliders will be useful for controlling our graphics programs. On the Next Page, we’ll talk about animation loops - trying to make things change without user intervention.

Next: Animation Loops