Exploring Lite-Brite Functionality
Back to our human metaphor: the JavaScript code is the brain and muscle of our webpage! Similar to how the neural and muscular systems are much more complex than the skeleton, the JavaScript work we do will be more complex that our work with HTML and CSS. Please remember: the goal is not for you to be a pro at the end of this, but to get a little bit of exposure!
Understand the Existing Functionality
Click around your Lite-Brite; see if you can “color in” any of the dots. What happens?
Explore to Learn:
On line 2, change black
to red
. Re-run the program and click a dot.
Breakdown:
Now, let’s walk through each line of the existing JavaScript to understand what’s happening:
- Line 2: A variable called
activeColor
is set to “black”. This doesn’t mean much yet. - Line 5: We accessed the
dot-container
element from the HTML file, and stored a reference to it in our JavaScipt code. This helps for line 8… - Line 8: We told the program to be on the lookout for our user to click anywhere inside the
dot-container
. If/when that does happen, a function calledchangeDotColor
will run. - Line 11: We declare the
changeDotColor
function. - Line 13: We ask the program if it was a dot that was actually clicked on (as opposed to the black background in between the dots).
- Line 15: We change the color of the dot that was clicked on, to the color stored in the
activeColor
variable.
Break Code to Learn
That was a LOT of info! Sometimes it soaks in better when we have a chance to poke at the code.
- On line 5, change
container
todotContainer
. Run the program (it should no longer work). Now, on line 8, changecontainer
todotContainer
and then run the program. It should be back to working! - Finally, on line 2, change
activeColor
toactive
. Run the program (you guessed it, it should no longer work). Why did things break? What else could you modify at this point to get the functionality back?
Exploring Functionality Summary
- Like HTML and CSS, JavaScript needs very specific directions
- Each piece of the puzzle has to be connected to the other (this is why spelling and capitalization can be really important!)