There's quite a bit here, so let's look at this method step by step.
Example 3.24. appmonitor2.js (excerpt)
while (pollDiv.firstChild) {
pollDiv.removeChild(pollDiv.firstChild);
}
After initializing some variables, this method removes everything from pollDiv: the while loop uses removeChild repeatedly to delete all the child nodes from pollDiv.
Next comes a simple for loop that jumps through the updated array of results and displays them.
We generate a message for the result of each item in this array. As you can see below, timeouts (which are recorded as a 0) generate a message of (Timeout).
Example 3.25. appmonitor2.js (excerpt)
if (polls[i] == 0) {
msgStr = '(Timeout)';
}
else {
msgStr = polls[i] + ' sec.';
}
Next, we use DOM methods to add the markup for each entry in the list dynamically. In effect, we construct the following HTML in JavaScript for each entry in the list:
<div class="pollResult">
<div class="time" style="color: #339;">8.031 sec.</div>
<div class="bar" style="width: 160px;"> </div>
<br class="clearAll"/>
</div>
The width of the bar div changes to reflect the actual response time, and timeouts are shown in red, but otherwise all entries in this list are identical. Note that you have to put something in the div to cause its background color to display. Even if you give the div a fixed width, the background color will not show if the div is empty. This is annoying, but it's easy to fix: we can fill in the div with a non-breaking space character.
Let's take a look at the code we'll use to insert this markup:
Example 3.26. appmonitor2.js (excerpt)
entryDiv = document.createElement('div');
messageDiv = document.createElement('div');
barDiv = document.createElement('div');
clearAll = document.createElement('br');
entryDiv.className = 'pollResult';
messageDiv.className = 'time';
barDiv.className = 'bar';
clearAll.className = 'clearAll';
if (polls[i] == 0) {
messageDiv.style.color = '#933';
}
else {
messageDiv.style.color = '#339';
}
barDiv.style.width = (parseInt(polls[i] * 20)) + 'px';
messageDiv.appendChild(document.createTextNode(msgStr));
barDiv.appendChild(document.createTextNode('\u00A0'));
entryDiv.appendChild(messageDiv);
entryDiv.appendChild(barDiv);
entryDiv.appendChild(clearAll);
pollDiv.appendChild(entryDiv);
This code may seem complicated if you've never used DOM manipulation functions, but it's really quite simple. We use the well-named createElement method to create elements; then we assign values to the properties of each of those element objects.
Just after the if statement, we can see the code that sets the pixel width of the bar div according to the number of seconds taken to generate each response. We multiply that time figure by 20 to get a reasonable width, but you may want to use a higher or lower number depending on how much horizontal space is available on the page.
To add text to elements, we use createTextNode in conjunction with appendChild, which is also used to place elements inside other elements.
createTextNode and Non-breaking Spaces
In the code above, we create a non-breaking space using \u00A0. If we try to use the normal entity here, createTextNode will attempt to be "helpful" by converting the ampersand to &; the result of this is that is displayed on your page. The workaround is to use the escaped unicode non-breaking space: \u00A0.
Figure 3.6. The application starting to take shape
Share and Enjoy:
