lesson5.js
<![CDATA[
<!--
// Lesson 5, JavaScript and the Document Object Model
// Good programming practice includes following strict programming guidelines
// "use strict" also helps find Syntax Errors that would otherwise fail silently
"use strict"
/* Global (aka window) variables are initialized in the initRed() method. */
var currentState; // The currentState holds the "model"
var userInterface; // The userInterface represents the "view"
/*
* There are 6 programmer-defined methods given below.
* 1. The myMainMethod() is the first method called by the browser AFTER the web page has completed loading
* and the DOM has been created in the browser's memory. Corresponds to the tag in the X/HTML
* <body onLoad="myMainMethod()">...
* 2. The init() method starts by defining and initializing the:
* a) programmer-defined "view" object for the user interface (i.e. X/HTML DOM),
* b) programmer-defined "model" object representing the user's choice of color.
* c) methods to be called when the user makes changes (i.e. hits back button on browser or types a value
* d) changes the X/HTML web page via the DOM
* 3. The setHistory() method puts the "model" (i.e. new color choice) into the history object which is predefined in the DOM
* 4. The getHistoryState() method retrives the old "model" (i.e. color choice) from the history object when the back button is clicked.
* 5. The handleNewRedShade() method checks the the user's new color choice to make sure the value is valid before putting it in the "model."
* 6. The modifyWebPage() method combines the "view" (DOM) and the "model" (user's color choice or color history) and updates the webpage.
*/
function myMainMethod() {
// Just call the programmer-designed init() method.
init();
}
/*
* The init() method sets up the local object variables for the user interface (i.e. X/HTML) as well
* as the methods below that are to be called when the user either types in a new value or clicks on the back button.
*/
function init(newShade) {
/*
* Set up an programmer-defined object with variables/properties to match each X/HTML tag id attribute of the
* DOM. We use these as the interface between want to store in the history element of the document.
*/
userInterface = {
headingIdRed: null,
promptIdRed: null,
inputIdRed: null,
percentIdRed: null,
numberIdRed: null,
lowIdRed: null,
highIdRed: null
};
// Get each of the DOM elements with matching id's and store them in the userInterface array
for (var id in userInterface) {
// The programmer-defined userInterface object can be accessed just like an Array
// but with Strings instead of integers as the key/index.
// JavaScript Array objects are similar to Java's Map<String,String> class.
// The document.getElementById() is pre-defined in the DOM.
userInterface[id] = document.getElementById(id);
}
/*
* Set up another programmer-designed object with variables/properties that are needed to maintain
* the state (or condition) each time a user types in a new value for red.
* Start with a random red value between 0 and 100.
*/
currentState = {
valueRed: Math.floor(Math.random()*100)+1, // 0 < value of Red <= 100
numberOfTriesRed: 0, // how many shades of red attempted
previousRed: undefined // last shade of red entered
};
// If the user types in a new red percentage in the input textbox,
// then call the handleNewRedShade() method. NOTE: methods are variables in JavaScript and don't always need () at the end!
// NOTE: The onchange property (or variable) is predefined in the DOM for the <input type="text"> tag.
userInterface.inputIdRed.onchange = handleNewRedShade;
// If the browser's back button was clicked (i.e. window), then the history must be accessed and
// we call the getHistoryState(event) method.
// NOTE: The window.onpopstate property/variable is prebuilt in the DOM as soon as the X/HTML web page starts loading.
window.onpopstate = getHistoryState;
// Call the programmer-defined modifyebPage() method to change the X/HTML document to display the initial state.
modifyWebPage(currentState);
}
/*
* The programmer-defined setHistory() method saves the old values (state) in the history object using
* the pushState() method predefined in the history object of the DOM. The history object is also predefined.
*/
function setHistory(oldState) {
// If the document doesn't have a history then just return because we cannot save the old data.
if (!history.pushState) {
alert ("cannot push to the history object");
return;
}
// Otherwise put the old state (previousRed) in the url and in the history object.
var url = "#previous" + oldState.previousRed;
history.pushState(oldState, "", url);
}
/*
* The programmer-defined getHistoryState() method is called whenever the browser's BACK button is clicked
* as commented above in the init() method.
* The method retrieves the state of the history event.
* Both history and event are predefined in the window object in the DOM.
*/
function getHistoryState(event) {
// If the event already has an old state then restore the old state and updated the web page.
if (event.state != null) {
currentState = event.state;
modifyWebPage(currentState);
}
// Else the event doesn't have an old state (i.e. first time opening the web page)
// and replaces the history state with the current state. The replaceState() method
// is predefined in the history object of the DOM.
else {
history.replaceState(currentState, "", "#previous" + currentState.previousRed);
}
}
/*
* The programmer-defined handleNewRedShade() method is called whenever the user types in a new value in the textbox
* in the browser.
*/
function handleNewRedShade() {
// Get the user's value typed into the input text box and convert it to an integer.
// The "this" variable is predefined and is usually synonymous with the window object of the DOM.
var value = parseInt(this.value);
if ((value > 0) && (value <= 100)) {
// Save the current value, update the new value and number of user entries.
currentState.previousRed = currentState.valueRed;
currentState.valueRed = value;
currentState.numberOfTriesRed++;
// Save the information in the history object in case the "BACK" button was clicked.
setHistory(currentState);
// Update the X/HTML DOM to reflect the new values in the browser.
modifyWebPage(currentState);
}
else {
alert("Please enter a number between 0 and 100"); // The alert() method is predefined in the DOM.
}
}
/*
* The programmer-defined modifyWebPage() method changes the DOM to via each tag's id attribute which is matched
* to the userInterface object defined in the initRed() method.
*/
function modifyWebPage(newState) {
document.title = "Try a shade between 0 and 100"; // The document is predefined in the DOM
userInterface.headingIdRed.innerHTML = document.title; // Each innerHTML is predefined in the DOM for any X/HTML tag.
userInterface.percentIdRed.innerHTML = "Red at " + newState.valueRed +" %";
userInterface.numberIdRed.innerHTML = "Number of red shades attempted: "+newState.numberOfTriesRed;
// Convert the red value from a percentage (%) to a byte value between 0 < byteColorRed < 256
// The new Number() and toFixed() methods are predefined as part of JavaScript Number wrapper type.
var byteColorRed = new Number(newState.valueRed/100.0 * 255);
byteColorRed = byteColorRed.toFixed(0);
// Set the value of the background color to the converted value of red entered.
// See below the line for a NOTE regarding setting colors for background styles.
// The style is predefined in the DOM for any X/HTML tag that can by styled by CSS (cascading style sheets).
// THe background-color and rgb() properties are predefined attribute for many X/HTML tags.
userInterface.lowIdRed.style = "background-color:rgb("+byteColorRed+",0,0)";
// NOTE: Some browsers may have difficulty with the above statement for setting the color style.
// The next line (along with the 'helper' methods below may be used instead.
//userInterface.lowIdRed.style.backgroundColor = rgbToHexColor(byteColorRed,0,0);
// Modify the table to simulate a completion bar with corresponding color % and width %.
userInterface.lowIdRed.style.width = newState.valueRed +"%";
userInterface.highIdRed.style.width = (100-newState.valueRed) + "%";
// Blank the input values and put the cursor focus back on the input text tag.
// Both value and focus() are predefined properties of <input type="text"> tags.
userInterface.inputIdRed.value = "";
userInterface.inputIdRed.focus();
// Depending on the user entering of values, change prompt appropriately.
if (newState.previousRed === undefined) {
userInterface.promptIdRed.innerHTML = "Type in a shade of RED and hit Enter";
}
else if (newState.previousRed > 100) {
userInterface.promptIdRed.innerHTML = "too high, try a number less than or equal to 100";
}
else if (newState.previousRed < 0) {
userInterface.promptIdRed.innerHTML = "too low, try a number greater than 0";
}
else {
userInterface.promptIdRed.innerHTML = "Enter a new shade of RED";
}
}
/**
* The following two functions are "helper" functions to convert color integer values into
* hexidecimal values that browsers use for styling purposes.
*
* THE CONVERSIONS ARE BEYOND THE SCOPE OF LESSON 5
*/
function rgbToHexColor(red,green,blue) {
return "#" + byteToHex(red) + byteToHex(green) + byteToHex(blue);
}
function byteToHex(value) {
var hexidecimalCharacters = "0123456789ABCDEF";
var grabLeft4Bits = value >> 4;
var getLeftHexDigit = grabLeft4Bits & 0x0F;
var firstHexCharacter = hexidecimalCharacters.substr(getLeftHexDigit,1)
var getRightHexDigit = value & 0x0F;
var secondHexCharacter = hexidecimalCharacters.substr(getRightHexDigit,1)
return String(firstHexCharacter + secondHexCharacter) ;
}
-->
]]>
lesson5noComments.js- sometimes it is difficult to see the forest for the trees
<![CDATA[
<!--
// Lesson 5, JavaScript and the Document Object Model NO COMMENT VERSION
"use strict"
var currentState;
var userInterface;
function myMainMethod() {init();}
function init(newShade) {
userInterface = {
headingIdRed: null,
promptIdRed: null,
inputIdRed: null,
percentIdRed: null,
numberIdRed: null,
lowIdRed: null,
highIdRed: null
};
for (var id in userInterface) {
userInterface[id] = document.getElementById(id);
}
currentState = {
valueRed: Math.floor(Math.random()*100)+1,
numberOfTriesRed: 0,
previousRed: undefined
};
userInterface.inputIdRed.onchange = handleNewRedShade;
window.onpopstate = getHistoryState;
modifyWebPage(currentState);
}
function setHistory(oldState) {
if (!history.pushState) {
alert ("cannot push to the history object");
return;
}
var url = "#previous" + oldState.previousRed;
history.pushState(oldState, "", url);
}
function getHistoryState(event) {
if (event.state != null) {
currentState = event.state;
modifyWebPage(currentState);
}
else {
history.replaceState(currentState, "", "#previous" + currentState.previousRed);
}
}
function handleNewRedShade() {
var value = parseInt(this.value);
if ((value > 0) && (value <= 100)) {
currentState.previousRed = currentState.valueRed;
currentState.valueRed = value;
currentState.numberOfTriesRed++;
setHistory(currentState);
modifyWebPage(currentState);
}
else {
alert("Please enter a number between 0 and 100");
}
}
function modifyWebPage(newState) {
document.title = "Try a shade between 0 and 100";
userInterface.headingIdRed.innerHTML = document.title;
userInterface.percentIdRed.innerHTML = "Red at " + newState.valueRed +" %";
userInterface.numberIdRed.innerHTML = "Number of red shades attempted: "+newState.numberOfTriesRed;
var byteColorRed = new Number(newState.valueRed/100.0 * 255);
byteColorRed = byteColorRed.toFixed(0);
userInterface.lowIdRed.style = "background-color:rgb("+byteColorRed+",0,0)";
userInterface.lowIdRed.style.width = newState.valueRed +"%";
userInterface.highIdRed.style.width = (100-newState.valueRed) + "%";
userInterface.inputIdRed.value = "";
userInterface.inputIdRed.focus();
if (newState.previousRed === undefined) {
userInterface.promptIdRed.innerHTML = "Type in a shade of RED and hit Enter";
}
else if (newState.previousRed > 100) {
userInterface.promptIdRed.innerHTML = "too high, try a number less than or equal to 100";
}
else if (newState.previousRed < 0) {
userInterface.promptIdRed.innerHTML = "too low, try a number greater than 0";
}
else {
userInterface.promptIdRed.innerHTML = "Enter a new shade of RED";
}
}
-->
]]>
