In our last module, we reviewed basic Javascript syntax, and explored decision-making with conditions. In this module, we are going to review conditionals and look at variable types more deeply. Then we are going to make things move.
Student Outcomes
Learn more Javascript basics.
Review conditionals.
Understand strings and numbers. click here to read more about STRINGS
Learn string parsing.
Structure, format, and behavior are the three areas that define web design. Keeping these three areas separate makes web pages manageable, flexible, and less prone to breakage.
Assignments
Assignment: More Javascript samples... same as last week.
Final Project: Gathering the media needed for your portfolio, tighten up your resume, solidify the design of your site. (this can be a photoshop or illustrator file, it doesn't need to be coded just yet, but can be!)
Notes Structure, format, and behavior are the three arenas that define web design. Keeping these three arenas separate makes web pages manageable, flexible, and less prone to breakage.
The languages that define these areas -- HTML, CSS, and Javascript -- all work in concert with each other, yet retain their unique identities. Javascript accesses both HTML and CSS through the DOM (Document Object Model). The DOM is the abstract representation of a web page. It is how the computer understands a web page. It grants both humans and computers an agreed-upon picture of all the parts of a web page and how to access them. The DOM stores lists every element on the page. There lists for all the tags, all the attributes, all the images, everything. These lists can be accessed in a variety of ways to act upon the different elements that make up the page. In the last module we used id attributes to grab specific elements on a page and act on them. In some cases, we changed their appearance by adjusting the CSS that defines their look. In other cases, we made elements active by telling them to "listen" for a particular user event -- most notably mouse events. They listened for when they were clicked. RGB Mixer
Toggle Buttons
Hello World!
Butterflies are free!
When you name the result graphics, use a system that includes the name of the color. In the case of the below graphics, they are named: "flower_red.gif," "flower_green.gif," "flower_blue.gif," and so on. you can download these here for class, but for your homework, you must use your OWN design concepts.
The CSS for this page is very simple. A basic text style for the page is helpful -- be sure to remove the default border from the images. Optionally, while you're at it, you can also remove the default padding and margins from both the images and the divs. Give the msg and container divs a bit of styling, as well as the box class.
The icons we made are going to function as buttons. You can use inheritance to target only the button images and tell them to use the pointer cursor. Here is the CSS in full:
Once the button hears the event, it fires the event handler. The event handler is the function we assign to the button. These are anonymous functions -- they don't have names, but they do handle the events. They contain all the logic that needs to fire.
The event handler grabs the variable that matches the id. If the variable is true, it toggles the value to false and swaps out the button's graphic for the off state. If the value is already false, it changes the value to true and displays the on graphic.
All the buttons work pretty much the same. Here is the code for all three colors:
Here is the complete code with all the HTML, CSS, and Javascript in place:
We need to tweak the HTML and CSS just a bit to include the results display. Below the buttons div, add another div with id "picture." Add the white image to it with the id "result." We are starting with the white image because all our buttons start in the on display and the value of our variables is true.
Here is the HTML:
In the CSS, give the picture div a bit of styling. Float the buttons div to the left and give the picture div a substantial left margin.
Here is the completed CSS:
Now we'll tackle the Javascript.
Every time a button is clicked, the script needs to take a look at the values of red, green, and blue. It needs to evaluate the variables and deliver the correct image based on which colors are on or off. This is a complex decision. We are going to contain it in a single function called "evaluate()."
At the bottom of your code, begin the evaluate funtion, declare the name, add the parentheses, and open and close the curly brackets. Add the event listener to the bottom of each of your event handlers for each of your buttons. The function call needs to go directly after the toggle, like this:
RGB Mixer Explained
The evaluation is a complex decision. It requires the browser to juggle three boolean values. There are eight possible outcomes: three with only one value true, three with only two values true, one with everything on, and one with everything off. Below is a table of the possibilities and results:
| r | g | b | Result |
| Y | Y | Y | White |
| Y | Y | N | Yellow |
| Y | N | Y | Magenta |
| Y | N | N | Red |
| N | Y | Y | Teal |
| N | Y | N | Green |
| N | N | Y | Blue |
| N | N | N | Black |
You can nest conditionals to make complex choices. If we were to write it out as a story, we might start with one color and work through all the possibilities of that color being true. We could say "If red is true..." and then systematically work through the other colors.
The code says "if red is true, and green is true, and blue is true, then white. If red is still true, and green is still true, but blue is false, then yellow. If red is still true, but green is false, and blue is true, then magenta..." It goes through systematically, handling all the "red is true" possibilities. Nested inside that are all the "green is true" and all the "green is false" possibilites. And inside those two possibilities are the blue options.
The scrub code might look something like this:
if (r) {
if (g){
if(b){
do something...
} else{
do something else....
}
} else {
if(b){
do something...
} else{
do something else....
}} else {
now evaluate everything again with r as false!}
Now minimize your browser and see if you can write evaluate() on your own.
here's one way...
here's one way...
No comments:
Post a Comment