Lab Week 15

The DOM

DOM = Document Object Model

This lab explores how you can use JavaScript to modify web page content.

Start with this base code: lab15base

Slider

Some useful functions and methods for working with sliders:

  1. var aSlider; – declare a global variable to contain a slider object
  2. aSlider = createSlider(smallestValue, largestValue, startingValue); – create a new slider
  3. aSlider.size(sliderWidth, AUTO); – optional, set the width of the slider
  4. aSlider.position(x, y); – optional, put the slider somewhere in your canvas
  5. var v = aSlider.value() – get the current slider value

Programming Exercise

Make a canvas full of vertical lines, separated by an adjustable amount controlled by a slider. (Your TA should demonstrate an example.)

Image on Web Page

Some useful functions and methods for working with images:

  1. var img; – declare a global variable to contain an image object
  2. img = createImg("https://imgur.com/lmz4IcH.png"); – create an image from URL
  3. img.position(x, y); – put the image on web page, use x = -1000 to hide image
  4. img.style("transform", "scale(-1, 1)"); – optional, flip the image horizontally
  5. img.style("transform", "scale(1, 1)"); – optional, unflip the image horizontally

Programming Exercise

Put an image on your web page. Move it or hide it randomly from time to time. (Your TA should demonstrate an example.)

Changing Text on Web Page

To modify text on a web page you have to find the text. By adding an ID to the HTML tag, you can make the text easy to search. For example, the HTML file in the base code replaced <h2>About</h2> (a typical HTML heading) with <h2 id="about">About</h2> (the same heading, but now with an ID attribute with value “about”).

Some useful functions and methods for working with ID’s and text:

  1. var anElem; – declare a global variable to contain a document element
  2. anElem = document.getElementById("about"); – search by ID for name “about”
  3. anElem.style.color = "red"; – set the color attribute of a text element
  4. anElem.innerHTML = "Course Description!"; – change the HTML inside a document element

Programming Exercise

Animate text in a web page by changing color, innerHTML, or other attributes. (Your TA should demonstrate an example.)