Out and about (22:36 pm)…

I'm waist-deep in JavaScript for a new project (yes, another one). I'll unveil it soon, but in the meantime let us all thank the inventor of Arrays!

Dom diddly Dom…

I’ve been looking recently at the Proper Way To Do The DOM?, because the well-used innerHTML method of injecting something into a page is, ya know, sooo 2005. Instead we should be using the DOM to create elements and set attributes the proper way, rather than just spitting a HTML chunk into an existing element. The Proper DOM Way is very well demonstrated by Peter-Paul Koch here.

However, compared to just throwing around some HTML chunks, it’s a lot more complicated. And by a lot, I mean a lot. For instance, to create a paragraph with a link inside it, I’d have to do this:

// Create the link
newLink = document.createElement("a");
// Set the href of the link
newLink.setAttribute("href","path-to-the-document.htm");
// Set the TextNode (the bit of text you see) for the link
newLink.appendChild(document.createTextNode("Click here!"));
// Create a new paragraph
newParagraph = document.createElement("p");
// Put the link inside the paragraph
newParagraph.appendChild(newLink);
// Get the target element
var targetElement = document.getElementById("targetElement");
// Put the new paragraph and link into the target element
targetElement.appendChild(newParagraph;

Rather than the considerably shorter:

// Get the target element
var targetElement = document.getElementById("targetElement");
// Put the HTML in the element
targetElement.innerHTML = "

Click here!

";

So, what can we do? If I’m going to shout about the right way to do things, I can’t do it a non-standard way just because it saves my fingers (and brain) from some work. What I need is a way to simplify, and preferably automate to some extent, the Right Way.

So there I was, pondering my quandary, and I had an idea. The thing is, I’m not clever enough to make it happen, but perhaps someone else is, so I’ll write it here and hope that one day some person with a monstrous mind and Jedi coding fingers will Make It So.

OK, so what we want is to convert a HTML chunk:

Click here!

Into a set of DOM elements with attributes:

Click here!

(They look the same, but trust me when I say they are VERY different. Just look at the code samples above).

Maybe JavaScript could be leveraged (ugh, I’m a buzzword whore) to parse a HTML chunk and convert it to the correct format. Simple! Us developers get to write in a language we understand well (HTML) and output a language we don’t really want to know (XML).

I guess some advanced regular expression could be used to parse the HTML string and pull out the elements and their attributes, and only accept certain HTML elements – P, H1, H2, DIV, FORM etc. In fact, depending how complex it gets, the function could also validate the HTML chunk, only allowing certain attributes for each element, or checking they are properly nested, for instance.

Once the HTML chunk has been carved up, the function would then automatically write out the elements, attributes and textnodes using the DOM methods. It would certainly save a lot of typing. How about this:

var html = "

Click here!

";
if (!domInsertHTML($html, "targetElement")){
alert("Sorry, I couldn't put the HTML chunk into the target element.");
}

So, will anyone take up the challenge?

A touchy musical idea…

I had a musical idea pop into my head as I walked to work this morning. In a nutshell, it’s just a large pressure-sensitive mat placed on the floor, linked to a sound generator. Each footstep on the mat produces a tone, and the weight of the footstep dicates the pitch. So, a heavier person walking slowly would produce a deep booming sounds, and a light person running would sound like pattering.

For some variation the sound generator could chnge the timbre of the sound(s) produced – change very slowly from sine to saw wave and back again, for instance. The piece could be prerecorded and sped up, therefore showing a day on the life of a shopping street, or a school corridor, or a churches nave.

Anyway, if anyone uses this idea please let me know. And, of course, if you make a packet from it, let me have some!