Starting the Project

Notes

Cheater code is here
Code developed in class is here

Start by creating an mostly empty web page, call it newton.html

<html lang="en">

<head>
<title> Newton Fractal </title>
</head>

<body>
    <div id="output">
    </div>
</body>
</html>

Note this has a div tag.
- reference
- Divisions are used as containers.
- We will write to this division as javascript has strange/no direct output
- note the <div id="output"></div>
- We will use this to grab this element from the document.
- The id should be unique for our use.
A first javascript program
- We can put javascript in multiple locations.
- For now, we will embed it into the document.
- We start with <script>
- Then place the commands
- And end with </script>
- Remember to add "use strict" after the beginning tag.
- This will be parsed and executed as the document is loaded.
A first yucky bit of code.
- HTML uses the DOM model, Document Object.
  - In javascript we can request pointers to elements inside of the document.
  - We can then modify these.
- We want to start by grabbing a reference to the div we just added.
- To do this, I use getElementById(string id)
  - This is a method associated with the global variable document
  - There are other methods that allow you to search by other tings.
  - const outputArea = document.getElementById("output")
  - If the id is not unique, the first one is returned.
  - If the id is not found, null will be returned.
  - Note we are declaring the variable outputArea and setting it to be a constant reference to the structure that holds the div.
- console.log()
  - This will write the arguments to the console if it can.
  - ctrl-shift-j in chrome to view this.
- So add this code:
```
</div>
<script>
"use strict"

const outputArea = document.getElementById("output")
const anError = document.getElementById("Output")
console.log("the output area is ", outputArea)
console.log("The error area is ", anError)

</script>
</body>
```
But how do we know what we can chage?
- In the debugging area, select Elements and browse in the document to find the div.
- Click on the div
- In the sub window move to Properties
- This allows us to browse the properties of the div.
- Find the innerHTML property
- This is member data that is displayed.
You could also do console.dir(outputArea) to see this.
We can modify these properties in our code.
- Delete the error and log entries
- Add outputArea.innerHTML = "Look MA, I can code"
- reload the page.
- After this add outputArea.innerHTML += " Yippie!"
- try adding some other html tags to the div.
We now have two ways to output
- console.log
- Change the html code of an element.