Always start with what you want to make. Can be anything...some ideas
var box; //just declared
var box = “string”; //string
var box = 5; //number
var box = true; //boolean
var button = document.getElementById("button");
To get its value it needs to go into the html and get an id. Enter the below and then we'll discuss.
var jshero = {
color: green, //property
run : function(){ //method
code to make character run;
}
};
Objects and their properties and methods, play out in the DOM (Document Object Model)
The DOM is just a map or blueprint of the webpage.
In order to change or update via user interaction, JavaScript has to understand what the starting elements are and their location.
Then it can update via the instructions based on what occurred.
The DOM has then changed.
Events are at the heart of interactivity on the web.
User interaction, which can be many types of events, is listened for.
When it is heard, we can program a response.
This response can very often be a function.
We'll listen for a click event today. When its heard the color will update in our box.
Initialized button
var button = document.getElementById("button");
Adding an event (to the button initialized above)
button.addEventListener('click' , changeColor, false);
Events hav something that is listened for and a function that runs
when that something happens - in this case a click)
Now we need to understand functions...
Functions are basically lists of things you'd like to happen.
A grocery list might have a statement to buy apples. Then a statement to buy oranges.
The function can provide different options.
We'll run a function today that will change the background color of a box from black to red.
function colorChange(){
box.style.backgroundColor= "red";
}
Access box and make its style red
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
Id only gets one at a time
Class gets many
More efficient code
change overall class
not just one being applied
Others
querySelectorAll - conditional
Tag - whatever tag you'd like
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
(more focused slides to come in this area
as well as a recommended resources)
Just change statements in the function
Add classes for different colors
Access classList property
See example below
note: classList.toggle is not supported
in all browsers without a shim.
No html content
Changes background color or css
Uses onload Event
See example below