javascript

CHAPTER 10 ■ SCRIPTING BOM
The only problem is it’s floating around in memory, totally invisible to visitors. So, we want to insert
it into the DOM tree with appendChild(), a method we covered in Chapter 7:
function parseHTML(req) {
if (req.status === 200 || req.status === 304) {
var div = createElem("div", {className: "scroller", id: "s2"}, [
createElem("div", {className: "wrapper"}),
createElem("div", {className: "left arrow sprite"}),
createElem("div", {className: "right arrow sprite"})]);
div.firstChild.innerHTML = req.responseText;
document.body.appendChild(div);
}
}
Regardless of the HTTP status code for our GET request for data/s2.html, we want to call a function
named prep(), which will replace the function literal we currently have for the load event. That way, if
we get an undesirable status code, say a 404 “Not found” for mistyping the URL, prep() will still run,
adding the drag and drop, sprite, and other behaviors elements on our page.
function parseHTML(req) {
if (req.status === 200 || req.status === 304) {
var div = createElem("div", {className: "scroller", id: "s2"}, [
createElem("div", {className: "wrapper"}),
createElem("div", {className: "left arrow sprite"}),
createElem("div", {className: "right arrow sprite"})]);
div.firstChild.innerHTML = req.responseText;
document.body.appendChild(div);
}
prep();
}
Underneath parseHTML(), define a function named prep(). In its body, call prepSprites(),
prepDrag(), prepSkinKeys(), and prepScrollers(). Finally, in the body of the load event listener, which
now contains just a call to presetSkin(), append a call to getData() to fetch data/s2.html. Our script
now ends like so:
function prep() {
prepSprites();
prepDrag();
prepSkinKeys();
prepScrollers();
}
addListener(window, "load", function(e) {
presetSkin();
getData("data/s2.html", parseHTML);
431