Creative Computing: Week 7

Javascript Research Presentations, More Fun with DOM

Assignments

• Three Things in a Series (pt 2): Pick one of your "things" and implement three functions on it:

  1. a function called speak() that adds text to your "thing"
  2. a function called move() that animates your "thing" (hint: all move() needs to do is add a class to your HTML element. You can make CSS handle the rest.)
  3. a function which should accept and act on a numerical parameter to do whatever you want

  Add three <button>s on the page that trigger each of the functions. You will also need one <input> to accept a parameter for your third function. Due Week 8.

Class Notes

Here are the topics that we saw presentations for in class:

• document.createElement()
• document.getElementById()
• document.getElementsByClassName()
• document.querySelector()
• style
• getClientBoundingRect()
• getAttribute()
• appendChild() and removeChild()
• offsetWidth and offsetHeight
• classList.add() and classList.remove()
• addEventListener() for the input event
• addEventListener() for the mouseover and mouseout events
• addEventListener() for the click event
• addEventListener() for the focus and blur events
• addEventListener() for the mousemove event

In the second half of class, we added a "generate more stars" button to our planet example from week 4. In doing so, we started to apply some more of the DOM manipulation functions that we've been learning the past few weeks.

To built the "generate more stars" functionality, we need two new HTML elements that the user will interact with. They need a button to click on and a place to input the number of stars that they want to create. We covered the <button> tag last week, so that should be familiar. The tag for user input is called <input>. Let's add them into our planet HTML just before the </body> tag.

<input id="numStarsInput" placeholder="How Many Stars?" />
<button id="addStarsBtn">Add Stars!</button>

In addition to id, the <input> tag has a placeholder attribute. This is the text that appears in an <input> when nothing else is there. It's greyed out a little and disappears immediately upon user input, so we can use it like a prompt. The <input> also has a property called value. We could set it manually with a value attribute, but we'll leave it out for now and let the user type it in themselves.

Next we will add the interactivity to our program with JavaScript. First, we need to import our JS file into the page with the <script> tag. Then, in our JavaScript file, we start by adding two event listeners: one for the page to finish loading, and another for when the button is clicked.

window.addEventListener("load", onWindowLoad);

function onWindowLoad() {
    var addStarsBtn = document.getElementById("addStarsBtn");
    addStarsBtn.addEventListener("click", onAddStarsBtnClick);
}

function onAddStarsBtnClick() {
}

This should look familiar from last week. If it doesn't, go back and have a look through those class notes.

When we're adding interaction to our websites, it helps to start breaking our desired functionality down into simple steps. Each step might represent a function that we already know, a function that we need to create, or some logical operation like an if statment. For example, when our click event listener is triggered, we need to:

1. Figure out how many stars the user wants to add, and
2. Add one star to the page that many times.

From there, we can start to break those steps down further. For example, figuring out how many stars the user wants to add is a few steps on its own:

1. Get the <input> element
2. Get its value property

The same is true for adding a new star to the page:

1. For as many times as the value from above:
2. Create a <div> element with a class named star
3. Give it a random position
4. Add it to the page

Having a clear understanding of the tasks you need to perform to achieve the desired end result is going to make writing your code much easier. Let's run through our steps one more time, this time translating the task into some code we know can help us:

1. Get the <input> element: getElementById
2. Get its value: property .value
3. For as many times as the value from above: for loop
4. Create a <div> element with a class named star: document.createElement and element.classList.add
5. Give it a random position: element.style and Math.random
6. Add it to the page: element.appendChild

Now it should be pretty easy to turn this into code:

function onAddStarsBtnClick() {
    // 1. get the element
    var numStarsInput = document.getElementById("numStarsInput");

    // 2. get its value property
    var numStars = numStarsInput.value

    // 3. for as many times as the value says...
    for (var i=0; i < numStars; i++) {

        // 4. make a div with a class named "star"
        var star = document.createElement("div");
        star.classList.add("star");

        // 5. manually set the top and left style properties to a random location
        // anywhere on the screen
        star.style.top = Math.random() * window.innerHeight + "px";
        star.style.left = Math.random() * window.innerWidth + "px";

        // 6. get the planet element and add the star to the end
        var planet = document.getElementById("planet");
        planet.appendChild(star);
    }
}

Let's see it in action! For the purposes of putting it on this page, I've made a few changes to how the star position gets calculated. View the page's source to see how!

Add Stars!