PRESENTATION OUTLINE
The content background is grey
This is the HTML code for the webpage
This is the code for the content area
Notice its id is "content"
First, it accesses a JQuery library
Next, it accesses the MVC script
This is the JavaScript code for the MVC
"M" stands for the "model" object
"V" stands for the "view" object
"C" stands for the "controller" object
Listeners are needed to engage the objects
This one engages when the page loads
It calls the controller method "update"
Which calls the model method "update"
Here, it sets the variable "content"
It searches an HTML file for the id "swap"
This is the HTML code for the content file
The entire div element has the id "swap"
Thus, the entire div element is "content"
Back at the MVC file, "content" is set
Controller method "swap" is called
Which calls the view method "swap"
It loads to webpage at the id "content"
Back at the webpage, content is loaded
Notice its class is "box"
Webpage accesses a CSS style sheet here
This is the CSS code for the style sheet
This style is for class selector "box"
Notice the background color is set to grey
Back at the webpage, the content area is grey
By clicking this button, users turn it green
This is the code for the button
MVC can override the style sheet color
Back at the MVC, a listener is engaged
It listens for element id "grn" to be clicked
Controller method "grn" is then called
Which calls the model method "grn"
Here, it sets variable "color" to green
Controller method "page" is called
Which calls the view method "page"
It overrides webpage at id "content"
Back at the webpage, background is changed
The content background is now green
This is how to control webpage behavior!
