• Questions?
• Review chaining (challenge from last class)
• JavaScript + DOM, SVG

Write a procedure makeObject

function makeObject(v) {
  let result = {
    value: v,
    printValue: function() {
      console.log(this.value);
      return this;
    },
    increment: function() {
      this.value++;
      return this;
    }
  };
  return result;
}

makeObject(10).printValue().increment().increment().printValue();

You can find the basic HTML file we will be working with today at https://github.com/picoral/csc-444-fall2022/blob/main/example-code/01-class-demo-code.html

Remember how you can access variables in window in JavaScript?

You can also query the document variable.

var mainDiv = document.getElementById("my_div"); 
mainDiv.parentElement;
mainDiv.innerHTML;
mainDiv.children[0].innerText;

What other getElementBy... methods are there?

mainDiv.children[0].innerText = "This is a new paragraph";

mainDiv.style.backgroundColor = "#AAAAAA";
mainDiv.setAttribute("style", "color: red;");

mainDiv.setAttribute("style", "color: blue;");
mainDiv.setAttribute("style", "position: absolute; 
                     left: 100px; top: 50px;")

mainDiv.setAttribute("itemType", "modified"); //create a new attribute
mainDiv.getAttribute("itemType");

var aTextNode = document.createTextNode("This is some text");
mainDiv.appendChild(aTextNode);

For this part of the tutorial we will be adding our script to our document in the editor/IDE of your choosing (I’ll be using VS Code).

<script>
        var mainDiv = document.getElementById("my_div");

        function createDiv(text) {
            var result = document.createElement("div");
            var textNode = document.createTextNode(text);
            result.appendChild(textNode);
            return result;
        }

        for (var i = 0; i < 10; i++) {
            mainDiv.appendChild(createDiv(String(i*i)));
        }
</script>

Create a new html file called forecasts.html and add the following script chunk to it:

var forecasts = [
            { "city": "DCA", "temperature": 92,  order: 0 },
            { "city": "JFK", "temperature": 96,  order: 1 },
            { "city": "SEA", "temperature": 77,  order: 2 },
            { "city": "TUS", "temperature": 102, order: 3 },
            { "city": "SFO", "temperature": 65,  order: 4 }
        ];

forecasts.forEach(element => console.log(element));
forecasts.forEach(element => console.log(element.city));

Add the createDiv() to your script chunk, and we will create a new createTextAtPosition() function:

function createTextAtPosition(text, x, y) {
  var node = createDiv(text);
  node.setAttribute("style", 
          "position:absolute; left: " + x + "px; top: " + y + "px;");
  return node;
};

We can test the function:

createTextAtPosition("here", 100, 100); // this only returns the node

mainDiv.appendChild(
  createTextAtPosition("here", 100, 100)
  ); // this appends the node

We can use .forEach() with a function and append multiple childs with the city property from our forecasts data.

forecasts.forEach(function(element) {
            mainDiv.appendChild(
                createTextAtPosition(
                  element.city,
                  100 + element.order * 40,
                  150)
                );
        });

Change the code we wrote to display the following the city and the temperatures as two columns, like so:

DCA   92

JFK   96

SEA   77

TUS   102

SFO   65

Our JavaScript chunk is getting pretty long. Let’s save that as a .js file and source the script in our HTML:

<script src="forecast.js"></script>

1. Download this .js file which contains data on Driver Fatalities in the UK.
2. Create and html file called uk_driver_fatalities.html with basic DOM structure
3. Call the .js file in a script junk in your HTML file
4. Adjust the code we wrote for forecast.js to this data, so you print two columns: Year and Fatalities