README.md

#Javascript Events

##Learning Objectives

Create a listener for mouse events and respond with an action
Capture data from specific events and do something with it

#Introduction Any basic web app needs to use events and javascript that is triggered on pages

Take 5 minutes here and try to learn something about events and be able to tell me what an event is and a few different types of events https://developer.mozilla.org/en-US/docs/Web/Events

So this page here is our final goal!

But we're going to work up to it in small steps.

Theres a file in this folder called starter.html Leave all the existing code the way it is, I want you guys to add a new div at the top of the page with the text "Hello" inside of it, give it the ID, greeting, it should look like this

<div id="greeting">
  Hello!
</div>

Now we're going to add an eventlistener to the div so that when we click it, an alert pops up!

document.getElementById("greeting").onclick = function(event){
  alert("Clicked!!")
};

Notice that if we put this into a script tag at the top of the page and open our console we get an error!

What order do you think that a web browser builds a page?

it runs the javascript last, luckily there is a handy trick we can do to get around this. We just wait until the window is fully loaded then we execute our javascript

window.onload = function() {
  // Execute Javascript here
}

Let's try putting that code we wrote above into this section and then seeing what we get! lets try it with two more events as well

document.getElementById("greeting").onmouseover = function(event){
  alert("hovering!!")
};
document.getElementById("greeting").onmouseout = function(event){
  alert("read anything interesting??")
};

There is another way to do this too, we can use addEventListener()

Let's modify our onclick to use this syntax

Now I want you all to try changing it to use one of the other events that you learned about

###Building up the box app!

I want you all to cd into the folder called box-click-STARTER and open up the index.html in your browser with open index.html and the folder in sublime with subl .

Lets go over what we have so far and add a click listener to one of the boxes! Why don't you all add a click listener to one of the boxes that pops up an alert that says "You found me"

If you notice all of our boxes have a class box is there a way to select elements by class in Javascript?

What does this selector return?

An array of elements!

and we can loop through this array and add an event listener to every element in the array.

lets add an event listener on mouseover that pops up an alert when you mouse over any square.

Now I want you guys to console.log this when you click on the box.

What gets outputted to the console?

Its an HTML element with all the properties of a regular HTML element. So we could set any of its css properties by using box[i].style, lets set opacity equal to 0.7 on mouseout and 1 on mouseover.

Next write a function that returns a random string from "rgb(0,0,0)" to "rgb(255,255,255)"
change the background color to that whenever you click on a square!

###Challenge/HW

Use the following html to try the following exercises.

<html>
<head>
  <meta charset="utf-8">
  <title>Exercise</title> 
  <script type="text/javascript" src="script.js"></script>
</head>
<body>
  <div id="last_clicked">none</div>
  <div id="previously_clicked">
  none
  </div>
  <div id="div_1"> 
   1
  </div>
  <div id="div_2">
   2
  </div>
  <div id="div_3">
   3
  </div>
  <div id="div_4">
   4
  </div>
  <div id="div_5">
   5
  </div>

</body>
</html>

Listen for a click on div_1 through div_5 and each time something is clicked update the last_clicked element with the content from the div that was clicked.
Listen for a click on div_1 through div_5 and each time something is clicked update the last_clicked element with the content from the div that was clicked, and take the old last clicked to update the previously_clicked
Listen for a click on div_1 through div_5 and each time something is clicked change its color to blue. On each click update the previously_clicked element with content from the previously clicked element.
- (Hint: you need a variable to hold the currentlyClicked content that you should use to update the previously_clicked div)
Building off the last example, listen for a click on the previously_clicked element. When clicked, make the currentlyClicked div have a white backgroundColor and use the number it's displaying to change the respective div to have background color blue.

RobAWilkinson/README.md

Lets go over what we have so far and add a click listener to one of the boxes! Why don't you all add a click listener to one of the boxes that pops up an alert that says "You found me"