ITEC 325 2015fall ibarland

home—lects—exams—hws
D2L—breeze (snow day)

lect-js
case study: refactoring javascript

You have already talked about javascript code and the DOM in WebI; we'll review those concepts in the context of improving an actual web page.

Do not attempt to write any significant javascript without a decent debugging tool like Firebug or Chrome Tools' javascript console window help. At least, not if you value your sanity. In particular:

• Chrome » "more" dropdown » More Tools » Javascript Console, and
• From that same panel Elements » right-hand ">>" » Properties.

We'll show-source, and discuss evolution of the javascript program. For each version: discuss how much work it would be to add another category (animal)? (And: what is the least conceivable amount of work/info required?)

1. lect-js-hiding-parts-v0.html (A first version, copied from one person to another. C-)

teacher's note:We got this far, having also discussed magic quotes and php's `gpc_special_quotes` (and, `trim`).

2. lect-js-hiding-parts-v1.html (A small tweak, greatly reduces length of code. B)
3. lect-js-hiding-parts-v2.html (Generalize -- much nicer. A)
   Take note that javascript's for-in construct loops over indices, not contents, so you still need to use square-brackets inside the loop. (This is different from java's foreach and php's foreach).
4. lect-js-hiding-parts-v3a.html Generalize the entire navbar. A+.

teacher's note:On day 2, we got this far. I didn't demo the .js console window, nor actually *showing* nodes being inserted or not, nor my own bugs/pitfalls in writing the demos, nor the idea of passing .js functions DOM-nodes directly rather than their id-name.

5. Pitfall: lect-js-hiding-parts-v3b.html (As before, but placing the paragraph in a different place suddenly breaks the code?! It's because the processing happens ASAP, before the named id has been parsed by the browser. An error message like 'no such id' would have been very nice!¹ Had my first attempt suffered from this bug, I would have given up assuming my whole approach didn't work.
   See also: attribute defer for tag script.
6. lect-js-hiding-parts-v3c.html, Pulling the javascript into its own file (can now be re-used between many pages). (It also demo's how you really can easily call the function twice in the same page w/o repeating code, which we could have done ever since we made createNavBar its own function.)

Applying the above: How can/should we generalize a Bingo card javscript?

Note: here's an on-line javascript interpreter. We'll use it to note that: arrays are objects; any object can have properties accessed via square-brackets; but you should still iterate over arrays by indexing over [0,data.count). You can also use “for…in” to iterate over a general object's properties. For example, .childnodes returns a list, which can be iterated over via “for…in”.

arrays vs. objects, in javascript

Arrays in javascript are not associative -- the indices are only numeric.
However: any object (array or string or DOM-node or whatever) can have properties; properties are key/value pairs. So I guess every object could be used as an asssociate array incidentally. This is discouraged, because other code might add properties to your object.

Just to muddle things thoroughly, properties can be assigned/retrieve either through dot-notation (“a.color = "true"”) or through array-brackets (“a['color'] = "true"”) even though they are not arrays.

Arrays have a property named “length”. To demo, paste the below into this on-line javascript interpreter.

var a;
a = [71,72,73];


a.foo = "huh";

writeln( "The length of a: " + a.length );
writeln( "The length of a: " + a['length'] );



writeln( "Using a regular for-loop, to loop over numeric indices:" );
for (var i = 0;   i < a.length;  ++i ) {
  writeln("at index i=" + i + ", a[i]=" + a[i] );
}


writeln( "Using for-in, to loop over all *enumerable* properties:" );
for (var i in a) {
  writeln("at index i=" + i + ", a[i]=" + a[i] );
}
writeln( "Note: the for-in loop will also include properties from the object's "
       + "parent object, and it's parent, etc." );
writeln( "Note: `length` is a property of the object, but the `for` loop doesn't "
       + "enumerate over it.  That's because some properties can be tagged as "
       + "'non-enumerable' -- a concept invented just for for-each loops?" );

Tips for minimizing the difference between php and javascript code:

• You are allowed to have javascript variables start with "$" (weird, but allowed)
• Grabbing input from a form:
  • in php: $_POST['fname']
  • in javascript: document.getElementById('fname')
  You can abstract these into a function

  getDocElement('fname')

  and then make getDocElement a (1-line wrapper) in both php and in javascript.

  This has the advantage that you can provide a default argument, to use when the element doesn't exist [especially helpful in php handling checkboxes, where if no checkboxes were selected the lookup $_POST would give a warning, and you can have your wrapper avoid the warning with isset, and instead have that function allow an optional second input: a value to use when the item isn't in the array: getDocElement('dietaryRestrictions', 'no restrictions'); or even getDocElement('billingAddr', getDocElement('shippingAddr') ).

Note:Finished here after day 3, w/ discussion of using debugger.

home—lects—exams—hws
D2L—breeze (snow day)

©2015, Ian Barland, Radford University Last modified 2015.Oct.12 (Mon)

Please mail any suggestions (incl. typos, broken links) to ibarlandradford.edu