Box Model Programming – Construct to last
This “command part” of your web page is just waiting for you to empower it. But first, let’s pick up where we left off…
Your first step in powering this with JavaScript quickly builds up a serious set of useful actions; however, a bit of foundation-planning will keep it as a warehouse of useful tools rather than a junkyard of scary surprises. The programmer should always know what is expected as much as the user should see the page for what it is.
This shot is about building to last. It shows progressive steps alongside a familiar story so you can follow what each step is for. It works through three stages of a simpler setup before the lessons learned from them are applied to the box-model itself.
Part 1: The straw house
function describeRed(){var listElem = document.getElementsByName("describer");for(var i=0;i<listElem.length;i++){listElem[i].style.backgroundColor = "pink";}}
The straw house code has a single button that calls its only function. This function gives a pink background to every element named “Describer”. When you load the page, it shows two possible states, “where it started” and “turned pink.” The button turns it pink and the refresh-button (on the browser) turns it back.
Conclusion of part 1
The start achieves functionality but lacks both Protection and Standards.
Part 2: The sticks house
function throwNum(cameFromStr){let x = Number(cameFromStr);describeCoin(x);}function describeCoin(faceUp){ret = null;alert('describe Coin called with: ' + faceUp);switch (faceUp) {case 0:alert('HEAD shows a face');break;case 1:alert('TAIL shows a squiggle');break;default:alert("Sorry, we don't have them");}return ret;}
The Sticks-House code demonstrates one level of improvement on what we have so far – it appears within “best of three” at the end. It handles all the buttons in the same place and clearly rejects any Coin-Code that it does NOT know.
Conclusion of part 2
This code shows how Protection can be added to what we have so far.
function youRang(cameFrom){s=validatedRinger(cameFrom.id);if (s!=false) alert("Called from: "+s);}function validatedRinger(str){let ret = false;let rulesBroken = 3;if (str.includes("cmd")) rulesBroken--;if (str.length > 3) rulesBroken--;if (str.indexOf("cmd")==0) rulesBroken--;alert("Still Inside - RulesB:"+rulesBroken);if (rulesBroken==0) ret = str.substr(3).toLowerCase();return ret}
The Brick-House code demonstrates a further level of improvement on what we have so far – it also appears within “best of three” at the end. It refuses to accept codes that obviously CAN’T belong in the sequence. This code sample includes a button with a name in the wrong format and a button without a name.
Conclusion of part 3
This code shows how Standards can also be added to what we have so far.
Bringing everything together
The resulting version of this is extravagant because it does in 50 lines what could be done in only five.
On the other hand, writing this way gives two levels of defense against construction-errors that could make it into the final version.
At the first level, there is a convention of at least four characters where the first three are "cmd," and the remainder represents a background color.
This is consistent with buttons associated solely with color-actions rather than items like"navigate-To-Check-Out" or "submit-Fields-To-Server". Thus, at the first level the user will get an error-message that the button DOESN'T belong.
But what about the colors for which code isn't available? For example, a button called 'cmdBurgundy' makes sense for this structure, but the code DOESN'T meet that value. Thus, at the second level, the user will get an error-message that you CAN'T have the background color 'Burgundy'.
The finished product
Take away
The web-menu allows you to run code by clicking on any line that starts with a dot. The programmer can then test the code for two levels of built-in self-defense.
Conclusion
The web-menu allows the user to change background colors on the rest of the page. I could have used far less code to meet requirements, but the advantage of this ‘much longer coding style’ is the two code levels that have built-in self-defense.
RELATED TAGS
CONTRIBUTOR
