Behavioral Action Model - Part One
This is a brief tutorial on using the behavioral action model. Fundamentally, this is just a clean separation between HTML and Javascript scripting that relies on Javascript’s ability to modify the DOM. In essence, we are attaching Javascript functions to events on DOM elements using CSS as an identification system.
Let’s start with a simple button element that will link us to another page:
<button onclick="javascript:location='mypage.html'">My Page</button>
Nothing fancy, a very basic button that gets the job done with no styling. Now create a basic style for the button that gives us a font of choice and a size of 20 pixels.
.goLink { font-family:Verdana; font-size:20px; }
There, a basic style. Now let’s apply that style to our button:
<button class="goLink" onclick="javascript:location='mypage.html'">My Page</button>
Again, this is nothing fancy, just a basic button and an applied style. From this point, things begin to diverge.
What we intend to happen is that when the button is “clicked” we jump to the link provided.
Since our goal is to pull out the javascript, let’s start by cleaning up the button a bit into
something a little more concise.
<button onclick="goto('mypage.html');'">My Page</button>
This is a little cleaner, but now requires a supporting Javascript function like below:
function goto(url)
{
self.location = url;
}
We now have a Javascript function that actually does the work when its called from within the
button by the “onclick“. But we still have Javascript in our button! Yes, but not for long.
Lets rewrite the button again and this time pull out the “onclick” event entirely.
<button class="goLink">My Page</button>
There, a really minimal button indeed. Unfortunately, our button no longer jumps to the page when clicked.
To fix this, we need to re-attach that “goto” function to the button without embedding it back into
the button. Using Javascript we can grab the element in question with a “getElementById” call
but we don’t have an “id” attribute on that button. So let’s add one:
<button class="goLink" id="mybutton">My Page</button>
Now we can do something like this:
var btn = document.getElementById("mybutton");
Doing this gives us a Javascript object that is referenced to the button element. We now have a means
by which to re-attach our “goto” function. This looks a little like the following:
btn.onclick = goto;
That statement literally adds an “onclick” method onto our object “btn” and
assigns it to a function called “goto“.
So, we’re getting closer by the moment. What we need to do now is package all this up a little neater and make
it accessible to the browser. In fact, we could even define the “goto” function within this little
package making everything even more concise.
function link()
{
var btn = document.getElementById("mybutton");
btn.onclick = function() { self.location = 'mypage.html'; }
}
To activate this link function, we need to use the “onload” method of the body element.
<body onload="link();">
By using the “onload” we’re telling the browser to load up the functionality found in our “link”
function and this would in turn make our button do its intended business. So what does this really look like in practice.
Let’s look at a little page that uses this technique.
<html>
<head>
<title>My Test</title>
<style>
.goLink { font-family:Verdana; font-size:20px; }
</style>
<script>
function link()
{
var btn = document.getElementById("mybutton");
btn.onclick = function() { self.location = 'mypage.html'; }
}
</script>
<body onload="link();">
<button class="goLink" id="mybutton">My Page</button>
</body>
</html>
We should now pull out the CSS definitions and all the Javascript from the HTML file and place
them into their own external files much like the following rewrite of the page:
<html> <head> <title>My Test</title> <script type="text/javascript" src="link.js"></script> <link rel="stylesheet" type="text/css" href="goLink.css"/> </head> <body onload="link();"> <button class="goLink" id="mybutton">My Page</button> </body> </html>
By doing this, we have very tight and clean HTML and likewise concise supporting files for
both the CSS and the Javascript.
Now comes the next step, ramping up the possibilities. We are not limited to using only id
attributes to attach functionality, any valid element tag, class, attribute, or combination
thereof can be used for this purpose. Using CSS notation, we could have attached our “goto”
function more specifically to the button using something like ‘button.goLink#mybutton’.
Our link function would have to be rewritten to look for buttons, then for those buttons
of class “goLink” which then have an id attribute of “mybutton“.
While this might seem a bit much, it is extremely useful and very practical.
This is where a nice little Javascript library comes into play, called “Behaviour”, that
allows us to chain together our definitions into a single
Javascript object and then apply those definitions to the entire DOM with a single call.
Nice. Very nice indeed.
{end part one}