home—lects—exams—hws
breeze (snow day)
lect06a-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.
(If you find other tools you like, post on the discussion board.)
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?)
-
lect06a-js-hiding-parts-v0.html (A first version, copied from one person to another. C-)
-
lect06a-js-hiding-parts-v1.html (A small tweak, greatly reduces length of code. B)
-
lect06a-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).
Note:Reached here after day 1
-
lect06a-js-hiding-parts-v3a.html
Generalize the entire navbar. A+.
Note:Reached here after day 2, w/ discussion of DOM.
- Pitfall:
lect06a-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!1
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.
-
lect06a-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?
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.getElementsById('fname')
You can abstract these into a function
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.
1Javascript
error tools like Firebug or Chrome Tools' javascript console window help. ↩
home—lects—exams—hws
breeze (snow day)
radford.edu