Decide to create something visual to interact with
Understand concepts working together
then...Examine statements more closely
Always start with what you want to make. Can be anything...some ideas
var jshero = {
color: green,
run : function(){code to make
character run;
}
};
Start with the window
var theBox; //just declared
var theBox = “string”; //string
var theBox = 5; //number
var theBox = true; //boolean
var myButton = document.getElementById("button");
Initialized button
var myButton = document.getElementById("button");
Adding an event to the button initialized above
myButton.addEventListener('click' , changeColor, false);
function colorChange(){
theBox.style.backgroundColor= "red";
}
Once you
a. know what you want to happen, and
b. know the parts you need
How do you do particular things?
Objects. DOM. Variables. Events. Functions.
These concepts often come together in the three steps below.
1. Declare what's there
2. Say the way
3. Run the fun
More info on Event Listeners
http://www.w3schools.com/js/js_htmldom_eventlistener.asp
List of DOM Events - Much more than just mouse events
http://www.w3schools.com/jsref/dom_obj_event.asp
More info on changing css styles with JavaScript
http://www.w3schools.com/js/js_htmldom_css.asp
Style object reference
http://www.w3schools.com/jsref/dom_obj_style.asp