WDI Fundamentals Unit 10
But first, a little math.
Function is a term that comes out of mathematics. You may remember seeing it in a high school algebra class. The basic idea of a function is simple — it's a relationship between a set of inputs and a set of outputs.
Consider the relationship between a variable,
x, and the function
f. The function
f takes the input
x and spits out a single output (
What if we were shown the output (
f(x)) for each of the following values of
We could figure out that the relationship between
f(x) is that the output is equal to double the input. In algebra, this relationship is written as
f(x) = 2 * x. Familiar, right?
In previous units, we've relied on
alert to give feedback to users. Later in this unit we'll look at how we can provide more meaningful feedback and make our sites more "user friendly" by allowing users to interact with our site and see its contents update in real time.
Let's take a look at the following HTML page:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>To-Do List</title> </head> <body> <h1>Things To Do</h1> <ul> <li>Call Mom</li> <li>Take out the trash</li> <li>Return library books</li> </ul> </body> </html>
The browser pulls in this HTML document, parses it, and creates an object model of the page in memory. This model is called the Document Object Model (DOM).
The DOM specifies that the browser should use a DOM Tree to structure this code:
We can get and set attributes for these nodes. Perhaps, for example, we want to add a class or update styling to change the background color for an element. We can also access and change their content — maybe we want to change the text in the third
li to read "Return library books — DONE!" We can even add new nodes to or remove nodes from the page.
Ready to dig in? Let's take a look at functions.