1. End of class example from last class
2. Using Substring to flip first half and second half of string.

The DOM

• Document Object Model
• What is an API?
• Ok. So what does that mean for me?
• Go here and do the following in the console:
  • document.all
  • window.alert()

There are several methods available to us for querying the DOM.

Some of the older methods are:
• .getElementsByTagName()
• .getElementsByClassName()
• .getElementById()

Some of these return arrays, while getElementById returns a single DOM node. This is important when you query the DOM.

There are newer methods that allow us to query the DOM as well. They are:
• .querySelector()
• .querySelectorAll()

Let's try it out!

• Create a function that queries the DOM for the body tag using all of these methods. Log the results to your console.
• The function should take 2 arguments: the DOM selector method the user wants to employ and the name of the DOM selector to be searched for.

Now that we know how to target DOM nodes, let's use them dynamically.

• Event Listeners allow you to fire certain functionality when your user performs a specific action.
• For instance, if you want to alert something when the user clicks on an h1 tag, you could use an event listener. They can optionally accept 1 argument, which represents the event that you are targetting.

        //BASIC EVENT LISTENER

        var h1 = document.querySelector('h1');
        h1.addEventListener('click', function(e) {
            console.log(e);
        });

        //NOTICE the highlighted section. What does it look like that we've seen before?
    

Callback Functions
• A function that is passed to another function as an argument, which is then executed inside that function.
• Can be used syncronously, or asyncronously (more on that later)

Now that you understand callbacks, let's look at some other event listeners

Keyboard Events:

• Keydown
• Keypress
• Keyup

Mouse Events:

• Click
• Mouseenter
• Mouseover
• Mousemove
• Mousedown
• Mouseleave

A comprehensive list of all the DOM events can be found here.

1. On your day6 branch, create a basic HTML mockup with a button, a div with some height and background color, and an h1 with some text
2. Create event listeners for each:
   • For the button, alert the user with a message when they click it.
   • For the div, change the color of the background when their mouse goes into the div.
   • For the h1, change the color of the text the user releases any key.
3. Not Tough Enough? Try redirecting the user's browser to facebook when the click anywhere on the page.

Write a program that converts temperatures. It should:

1. Ask your user to give you a scale (Celcius or Fahrenheit) and the tempurature they want to convert. So if they give you 90 Fahrenheit, they would want you to convert 90 degrees Fahrenheit to whatever that is in Celcius
2. Employ a function that accepts those two values as arguments: temperature and scale (either celcius or fahrenheit) and converts the tempurature they gave you to the opposite scale.
3. Display the temperature in an h3 with minimal styling.
4. From that point on, when the user clicks on the h3, run the function to convert the temperature back and forth between Celcius and Fahrenheit.
5. Display the converted temperature in the h3 each time it is changed.