By now you have completed the third adventure in Codingville. These notes build on that learning.
# Javascript Objects on the Web
Javascript treats each item on an HTML page like an object. Consider the following snippet of HTML...
```html
<body>
<div id="firstOne">
<h1 id="firstHeader">Hello</h1>
<input id="myValue" type="number" value="42">
</div>
</body>
```
Javascript first of all views the entire `document` object. Within it there is a `body` object. Additionally within it is a series of other objects that each have IDs.
```javascript
var theBody = document.body;
var theHeader = document.getElementById('firstHeader');
var theValue = document.getElementById('myValue');
```
In Javascript you can then refer to each specific object. Additionally javascript treats attribute of an element as another object. As an example ...
```javascript
var inputValue = document.getElementById('myValue').value;
var calculate = inputValue + 4;
```
In the above example, the `42` in the `"myValue" input` was collected and stored in the Javascript variable `inputValue`, then used to make the `calculate` variable, which would equal 46.
# Changing Values via Javascript
If you can get an "object" in the HTML file, Javascript can also change it.
```javascript
function changeIt() {
var theBody = document.body;
theBody.classList.toggle("darkmode");
var theHeader = document.getElementById('firstHeader');
theHeader.innerHTML = "Goodbye";
document.getElementById('myValue') = (12*3);
}
```
Each of the examples above demonstrate how you can use Javascript functions to manipulate items on a webpage.
# Calling the Javascript Functions
Having the Javascript function is only part of the challenge. There needs to be a trigger that calls the function. There are many types of triggers you can use.
- onclick
- onchange
- onmouseover
- onmouseout
- onload
Adding any of these to an HTML tag will result in the javascript function being called, just as below;
```html
<div id="firstOne" onclick="changeIt();"> ... </div>
```
When a person clicks anywhere inside that section of the webpage, it will cause the `changeIt()` function to be called.