Drupal 6 JavaScript and jQuery - Ebook-Cours.com

[ 157 ]
Chapter 6
For example, calling calculateSum(1, 2, 3, 4) would find the element with ID
sum, and insert the HTML The sum is: 10.
What we are interested in is how this function builds the information it inserts into
the document.
Here, the HTML and CSS are embedded in strings, which are nested inside of the
programming logic. The strings are concatenated (using the + or += operators) and
the result is injected into the appropriate element.
The method exhibited here strikes many programmers as ugly. The string
concatenation code is written alongside the programming logic (the actual summing
of the numbers), and the result looks jumbled.
One response to this has been to get rid of the "ugly" string building code and use
DOM objects. In this way, everything is essentially treated as programming logic
as seen here:
function calculateSum2() {
var pEle = document.createElement('p');
var total = 0;
if (arguments.length == 0) {
var pcdata = document.createTextNode(
'Error: No data given.'
);
pEle.appendChild(txt);
}
else if (arguments.length == 1) {
var pcdata = document.createTextNode(
'Error: Cannot sum only one number'
);
pEle.appendChild(txt);
}
else {
var pcdata1 = document.createTextNode('The sum is:');
var spanEle = document.createElement('span');
spanEle.setAttribute(
'style',
'color: red; font-weight: bold'
);
for(var i = 0; i < arguments.length; ++i) {
total += arguments[i];
}
This material is copyright and is licensed for the sole use by Richard Ostheimer on 18th June 2009
2205 hilda ave., , missoula, , 59801